From a5e4de97e3f9cbbe5c75b770c2468382c2df6260 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 25 Sep 2025 09:22:25 +0200 Subject: [PATCH] :lipstick: Use deprecated prefix for deprecated scss vars and mixins (#7375) --- frontend/src/app/main/ui/alert.scss | 12 +- frontend/src/app/main/ui/comments.scss | 160 +++++----- .../app/main/ui/components/button_link.scss | 2 +- .../app/main/ui/components/color_bullet.scss | 46 +-- .../main/ui/components/context_menu_a11y.scss | 48 +-- .../app/main/ui/components/copy_button.scss | 38 +-- .../main/ui/components/editable_label.scss | 20 +- .../main/ui/components/editable_select.scss | 18 +- .../src/app/main/ui/components/forms.scss | 210 ++++++------- .../app/main/ui/components/radio_buttons.scss | 28 +- .../app/main/ui/components/search_bar.scss | 34 +-- .../src/app/main/ui/components/select.scss | 38 +-- .../app/main/ui/components/tab_container.scss | 42 +-- .../src/app/main/ui/components/title_bar.scss | 18 +- frontend/src/app/main/ui/confirm.scss | 22 +- frontend/src/app/main/ui/dashboard.scss | 10 +- .../app/main/ui/dashboard/change_owner.scss | 12 +- frontend/src/app/main/ui/dashboard/grid.scss | 156 +++++----- .../src/app/main/ui/dashboard/import.scss | 50 +-- .../src/app/main/ui/dashboard/team_form.scss | 20 +- frontend/src/app/main/ui/delete_shared.scss | 14 +- frontend/src/app/main/ui/exports/assets.scss | 152 +++++----- frontend/src/app/main/ui/exports/files.scss | 108 +++---- .../src/app/main/ui/inspect/annotation.scss | 8 +- .../app/main/ui/inspect/attributes/blur.scss | 6 +- .../main/ui/inspect/attributes/common.scss | 92 +++--- .../app/main/ui/inspect/attributes/fill.scss | 6 +- .../main/ui/inspect/attributes/geometry.scss | 6 +- .../main/ui/inspect/attributes/layout.scss | 6 +- .../ui/inspect/attributes/layout_element.scss | 6 +- .../main/ui/inspect/attributes/shadow.scss | 4 +- .../main/ui/inspect/attributes/stroke.scss | 8 +- .../app/main/ui/inspect/attributes/svg.scss | 10 +- .../app/main/ui/inspect/attributes/text.scss | 24 +- .../main/ui/inspect/attributes/variant.scss | 4 +- .../ui/inspect/attributes/visibility.scss | 6 +- frontend/src/app/main/ui/inspect/code.scss | 60 ++-- frontend/src/app/main/ui/inspect/exports.scss | 40 +-- .../app/main/ui/inspect/right_sidebar.scss | 50 +-- frontend/src/app/main/ui/modal.scss | 2 +- .../src/app/main/ui/notifications/badge.scss | 18 +- .../notifications/context_notification.scss | 20 +- .../ui/notifications/inline_notification.scss | 12 +- .../app/main/ui/onboarding/newsletter.scss | 40 +-- .../src/app/main/ui/onboarding/questions.scss | 66 ++-- .../app/main/ui/onboarding/team_choice.scss | 98 +++--- frontend/src/app/main/ui/releases/common.scss | 10 +- frontend/src/app/main/ui/releases/v2_0.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_1.scss | 44 +-- frontend/src/app/main/ui/releases/v2_10.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_2.scss | 44 +-- frontend/src/app/main/ui/releases/v2_3.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_4.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_5.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_6.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_7.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_8.scss | 52 ++-- frontend/src/app/main/ui/releases/v2_9.scss | 52 ++-- .../app/main/ui/settings/change_email.scss | 20 +- .../app/main/ui/settings/delete_account.scss | 20 +- frontend/src/app/main/ui/viewer/login.scss | 26 +- .../src/app/main/ui/viewer/share_link.scss | 86 +++--- frontend/src/app/main/ui/workspace.scss | 12 +- .../app/main/ui/workspace/color_palette.scss | 26 +- .../ui/workspace/color_palette_ctx_menu.scss | 44 +-- .../workspace/colorpicker/color_inputs.scss | 22 +- .../ui/workspace/colorpicker/gradients.scss | 70 ++--- .../ui/workspace/colorpicker/harmony.scss | 28 +- .../main/ui/workspace/colorpicker/hsva.scss | 16 +- .../ui/workspace/colorpicker/libraries.scss | 16 +- .../main/ui/workspace/colorpicker/ramp.scss | 18 +- .../colorpicker/slider_selector.scss | 28 +- .../src/app/main/ui/workspace/comments.scss | 78 ++--- .../app/main/ui/workspace/context_menu.scss | 52 ++-- .../app/main/ui/workspace/left_header.scss | 64 ++-- .../src/app/main/ui/workspace/libraries.scss | 190 ++++++------ .../src/app/main/ui/workspace/main_menu.scss | 42 +-- frontend/src/app/main/ui/workspace/nudge.scss | 20 +- .../src/app/main/ui/workspace/palette.scss | 88 +++--- .../src/app/main/ui/workspace/plugins.scss | 128 ++++---- .../src/app/main/ui/workspace/presence.scss | 24 +- .../app/main/ui/workspace/right_header.scss | 90 +++--- .../src/app/main/ui/workspace/sidebar.scss | 36 +-- .../app/main/ui/workspace/sidebar/assets.scss | 80 ++--- .../ui/workspace/sidebar/assets/colors.scss | 50 +-- .../ui/workspace/sidebar/assets/common.scss | 36 +-- .../workspace/sidebar/assets/components.scss | 130 ++++---- .../sidebar/assets/file_library.scss | 40 +-- .../ui/workspace/sidebar/assets/groups.scss | 22 +- .../sidebar/assets/typographies.scss | 16 +- .../workspace/sidebar/collapsable_button.scss | 32 +- .../workspace/sidebar/debug_shape_info.scss | 46 +-- .../main/ui/workspace/sidebar/history.scss | 50 +-- .../main/ui/workspace/sidebar/layer_item.scss | 97 +++--- .../main/ui/workspace/sidebar/layer_name.scss | 24 +- .../app/main/ui/workspace/sidebar/layers.scss | 98 +++--- .../main/ui/workspace/sidebar/options.scss | 10 +- .../ui/workspace/sidebar/options/common.scss | 4 +- .../sidebar/options/drawing/frame.scss | 20 +- .../sidebar/options/menus/align.scss | 10 +- .../workspace/sidebar/options/menus/blur.scss | 50 +-- .../workspace/sidebar/options/menus/bool.scss | 8 +- .../sidebar/options/menus/border_radius.scss | 8 +- .../options/menus/color_selection.scss | 18 +- .../sidebar/options/menus/component.scss | 284 +++++++++--------- .../sidebar/options/menus/constraints.scss | 82 ++--- .../sidebar/options/menus/exports.scss | 22 +- .../workspace/sidebar/options/menus/fill.scss | 12 +- .../sidebar/options/menus/frame_grid.scss | 128 ++++---- .../sidebar/options/menus/grid_cell.scss | 34 +-- .../sidebar/options/menus/interactions.scss | 140 ++++----- .../sidebar/options/menus/layer.scss | 16 +- .../options/menus/layout_container.scss | 100 +++--- .../sidebar/options/menus/layout_item.scss | 20 +- .../sidebar/options/menus/measures.scss | 34 +-- .../sidebar/options/menus/shadow.scss | 36 +-- .../sidebar/options/menus/stroke.scss | 10 +- .../sidebar/options/menus/svg_attrs.scss | 38 +-- .../workspace/sidebar/options/menus/text.scss | 18 +- .../sidebar/options/menus/typography.scss | 214 ++++++------- .../options/menus/variants_help_modal.scss | 24 +- .../ui/workspace/sidebar/options/page.scss | 2 +- .../sidebar/options/rows/color_row.scss | 78 ++--- .../sidebar/options/rows/stroke_row.scss | 10 +- .../sidebar/options/shapes/group.scss | 4 +- .../sidebar/options/shapes/multiple.scss | 4 +- .../main/ui/workspace/sidebar/shortcuts.scss | 68 ++--- .../main/ui/workspace/sidebar/sitemap.scss | 100 +++--- .../main/ui/workspace/sidebar/versions.scss | 42 +-- .../app/main/ui/workspace/text_palette.scss | 52 ++-- .../ui/workspace/text_palette_ctx_menu.scss | 42 +-- .../app/main/ui/workspace/tokens/export.scss | 2 +- .../app/main/ui/workspace/tokens/import.scss | 2 +- .../tokens/management/context_menu.scss | 42 +-- .../management/create/input_tokens_value.scss | 4 +- .../tokens/management/create/modals.scss | 8 +- .../app/main/ui/workspace/tokens/sets.scss | 74 ++--- .../workspace/tokens/sets/context_menu.scss | 20 +- .../main/ui/workspace/tokens/sets/lists.scss | 74 ++--- .../ui/workspace/tokens/settings/menu.scss | 2 +- .../app/main/ui/workspace/tokens/sidebar.scss | 18 +- .../workspace/tokens/themes/create_modal.scss | 60 ++-- .../tokens/themes/theme_selector.scss | 37 +-- .../app/main/ui/workspace/top_toolbar.scss | 48 +-- .../main/ui/workspace/viewport/comments.scss | 2 +- .../viewport/grid_layout_editor.scss | 52 ++-- .../ui/workspace/viewport/path_actions.scss | 26 +- .../main/ui/workspace/viewport/presence.scss | 8 +- .../main/ui/workspace/viewport/top_bar.scss | 34 +-- .../main/ui/workspace/viewport/widgets.scss | 28 +- 150 files changed, 3336 insertions(+), 3328 deletions(-) diff --git a/frontend/src/app/main/ui/alert.scss b/frontend/src/app/main/ui/alert.scss index 74cc5d92b4..f50ee50d41 100644 --- a/frontend/src/app/main/ui/alert.scss +++ b/frontend/src/app/main/ui/alert.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -19,11 +19,11 @@ } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include headlineMediumTypography; + @include deprecated.headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -32,8 +32,8 @@ } .modal-content { - @include bodyLargeTypography; - margin-bottom: $s-24; + @include deprecated.bodyLargeTypography; + margin-bottom: deprecated.$s-24; } .action-buttons { @@ -55,7 +55,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); line-height: 1.5; } diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index fd333d6ed6..9da4eef616 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .cursor-grabbing { cursor: grabbing; @@ -23,7 +23,7 @@ } .error-text { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--color-foreground-error); } @@ -31,7 +31,7 @@ color: var(--comment-subtitle-color); display: flex; align-items: center; - gap: $s-6; + gap: deprecated.$s-6; } .location-icon { @@ -39,14 +39,14 @@ } .location-text { - @include textEllipsis; + @include deprecated.textEllipsis; } .author { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; - gap: $s-8; + gap: deprecated.$s-8; } .author-identity { @@ -54,56 +54,56 @@ } .author-fullname { - @include textEllipsis; + @include deprecated.textEllipsis; color: var(--comment-title-color); } .author-timeago { - @include textEllipsis; + @include deprecated.textEllipsis; color: var(--comment-subtitle-color); } .avatar { position: relative; - height: $s-24; - width: $s-24; - border-radius: $br-circle; + height: deprecated.$s-24; + width: deprecated.$s-24; + border-radius: deprecated.$br-circle; } .avatar-lg { - height: $s-32; - width: $s-32; + height: deprecated.$s-32; + width: deprecated.$s-32; } .avatar-read { - border: $s-2 solid var(--color-background-tertiary); + border: deprecated.$s-2 solid var(--color-background-tertiary); } .avatar-unread { - border: $s-2 solid var(--color-accent-primary); + border: deprecated.$s-2 solid var(--color-accent-primary); } .avatar-solved { - border: $s-2 solid var(--color-background-tertiary); + border: deprecated.$s-2 solid var(--color-background-tertiary); } .avatar-image { - border-radius: $br-circle; + border-radius: deprecated.$br-circle; } .avatar-text { - border-radius: $br-circle; + border-radius: deprecated.$br-circle; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; - font-size: $fs-12; + font-size: deprecated.$fs-12; background-color: var(--color-background-quaternary); } .avatar-mask { - border-radius: $br-circle; + border-radius: deprecated.$br-circle; position: absolute; height: 100%; width: 100%; @@ -116,17 +116,17 @@ } .cover { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; cursor: pointer; display: flex; flex-direction: column; - gap: $s-8; - padding: $s-20; - border-bottom: $s-1 solid var(--color-background-quaternary); + gap: deprecated.$s-8; + padding: deprecated.$s-20; + border-bottom: deprecated.$s-1 solid var(--color-background-quaternary); } .item { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--color-foreground-primary); word-wrap: break-word; overflow-wrap: break-word; @@ -135,9 +135,9 @@ } .replies { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; - gap: $s-8; + gap: deprecated.$s-8; } .replies-total { @@ -148,12 +148,12 @@ } .floating-preview-wrapper { - z-index: $z-index-1; + z-index: deprecated.$z-index-1; position: absolute; user-select: none; cursor: pointer; pointer-events: auto; - transform: translate(calc(-1 * $s-16), calc(-1 * $s-16)); + transform: translate(calc(-1 * deprecated.$s-16), calc(-1 * deprecated.$s-16)); } .floating-preview-bubble { @@ -164,7 +164,7 @@ position: absolute; display: flex; flex-direction: row; - column-gap: $s-12; + column-gap: deprecated.$s-12; --translate-x: 0%; --translate-y: 0%; @@ -184,31 +184,31 @@ .floating-thread-draft-inner-wrapper { display: flex; flex-direction: column; - gap: $s-12; - width: $s-284; - padding: $s-8 $s-12 $s-8 $s-12; + gap: deprecated.$s-12; + width: deprecated.$s-284; + padding: deprecated.$s-8 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12; pointer-events: auto; - border-radius: $br-8; - border: $s-2 solid var(--modal-border-color); + border-radius: deprecated.$br-8; + border: deprecated.$s-2 solid var(--modal-border-color); background-color: var(--comment-modal-background-color); max-height: var(--comment-height); } .floating-preview-displacement { - margin-left: calc(-1 * ($s-12 + $s-2)); - margin-top: calc(-1 * ($s-8 + $s-2)); + margin-left: calc(-1 * (deprecated.$s-12 + deprecated.$s-2)); + margin-top: calc(-1 * (deprecated.$s-8 + deprecated.$s-2)); } .floating-thread-wrapper { position: absolute; display: flex; flex-direction: column; - gap: $s-12; - width: $s-284; - padding: $s-8 $s-12 $s-8 $s-12; + gap: deprecated.$s-12; + width: deprecated.$s-284; + padding: deprecated.$s-8 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12; pointer-events: auto; - border-radius: $br-8; - border: $s-2 solid var(--modal-border-color); + border-radius: deprecated.$br-8; + border: deprecated.$s-2 solid var(--modal-border-color); background-color: var(--comment-modal-background-color); max-height: var(--comment-height); @@ -228,11 +228,11 @@ display: flex; justify-content: space-between; align-items: center; - height: $s-32; + height: deprecated.$s-32; } .floating-thread-header-left { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--color-foreground-primary); } @@ -244,9 +244,9 @@ .floating-thread-main { display: flex; flex-direction: column; - gap: $s-16; + gap: deprecated.$s-16; overflow-y: auto; - padding-bottom: $s-16; + padding-bottom: deprecated.$s-16; } .floating-thread-item-wrapper { @@ -256,15 +256,15 @@ .floating-thread-item { display: flex; flex-direction: column; - gap: $s-8; - @include bodySmallTypography; + gap: deprecated.$s-8; + @include deprecated.bodySmallTypography; } .checkbox-wrapper { - @include flexCenter; - width: $s-16; - height: $s-24; - margin-right: $s-8; + @include deprecated.flexCenter; + width: deprecated.$s-16; + height: deprecated.$s-24; + margin-right: deprecated.$s-8; } .checkbox { @@ -275,8 +275,8 @@ @extend .dropdown-wrapper; position: absolute; width: fit-content; - max-width: $s-200; - right: $s-32; + max-width: deprecated.$s-200; + right: deprecated.$s-32; top: 0; left: unset; } @@ -288,16 +288,16 @@ .form { display: flex; flex-direction: column; - gap: $s-8; - max-height: calc(var(--comment-height) - $s-132); + gap: deprecated.$s-8; + max-height: calc(var(--comment-height) - deprecated.$s-132); } .form-buttons-wrapper { display: grid; grid-template-columns: 1fr auto auto; justify-content: flex-end; - gap: $s-8; - margin-top: $s-8; + gap: deprecated.$s-8; + margin-top: deprecated.$s-8; } .open-mentions-button { @@ -310,17 +310,17 @@ .comments-mentions-choice { background: var(--color-background-tertiary); - border-radius: $s-8; + border-radius: deprecated.$s-8; border: none; display: flex; flex-direction: column; - left: calc(-1 * $s-2); - margin-top: $s-8; + left: calc(-1 * deprecated.$s-2); + margin-top: deprecated.$s-8; overflow: hidden; - padding: $s-2; + padding: deprecated.$s-2; position: absolute; top: 100%; - width: calc(100% + $s-4); + width: calc(100% + deprecated.$s-4); } .comments-mentions-entry { @@ -329,12 +329,12 @@ grid-template-areas: "avatar name" "avatar email"; - grid-template-columns: $s-32 1fr; - column-gap: $s-8; - margin: $s-4 $s-8; - padding: 0 $s-4; - border-radius: $br-8; - border: $s-1 solid transparent; + grid-template-columns: deprecated.$s-32 1fr; + column-gap: deprecated.$s-8; + margin: deprecated.$s-4 deprecated.$s-8; + padding: 0 deprecated.$s-4; + border-radius: deprecated.$br-8; + border: deprecated.$s-1 solid transparent; &:hover { background: var(--color-background-quaternary); @@ -347,13 +347,13 @@ .comments-mentions-name { grid-area: name; - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-primary); } .comments-mentions-email { grid-area: email; - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-secondary); } @@ -364,23 +364,23 @@ } .comment-input { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; white-space: pre-line; background: var(--input-background-color); - border-radius: $br-8; - border: $s-1 solid var(--input-border-color); + border-radius: deprecated.$br-8; + border: deprecated.$s-1 solid var(--input-border-color); color: var(--input-foreground-color); - height: $s-36; - max-width: $s-260; + height: deprecated.$s-36; + max-width: deprecated.$s-260; overflow-y: auto; - padding: $s-8; + padding: deprecated.$s-8; resize: vertical; width: 100%; white-space: pre-wrap; overflow-wrap: break-word; &:focus { - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); outline: none; } @@ -402,7 +402,7 @@ } .comments-mentions-empty { - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-secondary); - padding: $s-6 $s-8; + padding: deprecated.$s-6 deprecated.$s-8; } diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss index 492287b2ed..bb58dcc4a5 100644 --- a/frontend/src/app/main/ui/components/button_link.scss +++ b/frontend/src/app/main/ui/components/button_link.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .button { appearance: none; diff --git a/frontend/src/app/main/ui/components/color_bullet.scss b/frontend/src/app/main/ui/components/color_bullet.scss index a04df7986d..52fc242fac 100644 --- a/frontend/src/app/main/ui/components/color_bullet.scss +++ b/frontend/src/app/main/ui/components/color_bullet.scss @@ -4,38 +4,38 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .color-bullet { position: relative; display: flex; flex-direction: row; - width: var(--bullet-size, $s-24); - height: var(--bullet-size, $s-24); - min-width: var(--bullet-size, $s-24); - min-height: var(--bullet-size, $s-24); - border: $s-2 solid var(--color-bullet-border-color); - border-radius: $br-circle; + width: var(--bullet-size, deprecated.$s-24); + height: var(--bullet-size, deprecated.$s-24); + min-width: var(--bullet-size, deprecated.$s-24); + min-height: var(--bullet-size, deprecated.$s-24); + border: deprecated.$s-2 solid var(--color-bullet-border-color); + border-radius: deprecated.$br-circle; &.grid-area { grid-area: color; } &.mini { - width: var(--bullet-size, $s-16); - height: var(--bullet-size, $s-16); - min-width: var(--bullet-size, $s-16); - min-height: var(--bullet-size, $s-16); + width: var(--bullet-size, deprecated.$s-16); + height: var(--bullet-size, deprecated.$s-16); + min-width: var(--bullet-size, deprecated.$s-16); + min-height: var(--bullet-size, deprecated.$s-16); margin-top: 0; border: 1px solid var(--color-bullet-border-color); } &.is-not-library-color { overflow: hidden; - border-radius: $br-8; + border-radius: deprecated.$br-8; & .color-bullet-wrapper { clip-path: none; } &.mini { - border-radius: $br-4; + border-radius: deprecated.$br-4; } } &.is-gradient { @@ -65,27 +65,27 @@ background-color: var(--color-bullet-background-color); } &:hover:not(.read-only) { - border: $s-2 solid var(--color-bullet-border-color-selected); + border: deprecated.$s-2 solid var(--color-bullet-border-color-selected); } } .color-text { - @include twoLineTextEllipsis; - @include bodySmallTypography; - width: $s-80; + @include deprecated.twoLineTextEllipsis; + @include deprecated.bodySmallTypography; + width: deprecated.$s-80; text-align: center; - margin-top: $s-2; - max-height: $s-28; + margin-top: deprecated.$s-2; + max-height: deprecated.$s-28; color: var(--palette-text-color); &.small-text { - @include textEllipsis; - max-height: $s-16; + @include deprecated.textEllipsis; + max-height: deprecated.$s-16; } } .big-text { - @include inspectValue; - @include twoLineTextEllipsis; + @include deprecated.inspectValue; + @include deprecated.twoLineTextEllipsis; line-height: 1; color: var(--palette-text-color); text-align: center; 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 0b4fc187e9..e0fc29989e 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -4,18 +4,18 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .context-menu { position: relative; visibility: hidden; - opacity: $op-0; - z-index: $z-index-4; + opacity: deprecated.$op-0; + z-index: deprecated.$z-index-4; &.is-open { position: relative; display: block; - opacity: $op-10; + opacity: deprecated.$op-10; visibility: visible; } @@ -24,39 +24,39 @@ } .context-menu-items { - @include menuShadow; + @include deprecated.menuShadow; position: absolute; - top: $s-12; - left: calc(-1 * $s-6); - max-height: $s-480; - min-width: $s-96; - margin: $s-0; - padding: $s-4; - border-radius: $br-8; - border: $s-2 solid var(--panel-border-color); + top: deprecated.$s-12; + left: calc(-1 * deprecated.$s-6); + max-height: deprecated.$s-480; + min-width: deprecated.$s-96; + margin: deprecated.$s-0; + padding: deprecated.$s-4; + border-radius: deprecated.$br-8; + border: deprecated.$s-2 solid var(--panel-border-color); background-color: var(--menu-background-color); overflow: auto; & .separator { - border-top: solid $s-1 var(--color-background-quaternary); + border-top: solid deprecated.$s-1 var(--color-background-quaternary); } &.min-width { - min-width: $s-192; + min-width: deprecated.$s-192; } .context-menu-item { display: flex; .context-menu-action { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; justify-content: flex-start; - height: $s-28; + height: deprecated.$s-28; width: 100%; - padding: $s-6; - border-radius: $br-8; + padding: deprecated.$s-6; + border-radius: deprecated.$br-8; white-space: nowrap; color: var(--menu-foreground-color); @@ -78,7 +78,7 @@ &.submenu-back { display: flex; align-items: center; - font-weight: $fw700; + font-weight: deprecated.$fw700; background: none; border: none; cursor: pointer; @@ -141,7 +141,7 @@ .selected-icon { @extend .button-tag; - border-radius: $br-8; + border-radius: deprecated.$br-8; height: 100%; svg { @@ -153,12 +153,12 @@ } .is-selected .context-menu-action { - padding-left: $s-28; + padding-left: deprecated.$s-28; background-image: url(/images/icons/tick.svg); background-repeat: no-repeat; background-position: 5% 48%; - background-size: $s-12; - font-weight: $fw700; + background-size: deprecated.$s-12; + font-weight: deprecated.$fw700; } } diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss index bb93e1acc4..0239900938 100644 --- a/frontend/src/app/main/ui/components/copy_button.scss +++ b/frontend/src/app/main/ui/components/copy_button.scss @@ -4,21 +4,21 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .copy-button { - @include buttonStyle; + @include deprecated.buttonStyle; width: 100%; - height: $s-32; - border: $s-1 solid transparent; - border-radius: $br-8; + height: deprecated.$s-32; + border: deprecated.$s-1 solid transparent; + border-radius: deprecated.$br-8; background-color: transparent; box-sizing: border-box; .icon-btn { - @include flexCenter; - height: $s-32; - min-width: $s-28; - width: $s-28; + @include deprecated.flexCenter; + height: deprecated.$s-32; + min-width: deprecated.$s-28; + width: deprecated.$s-28; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -28,7 +28,7 @@ &:hover { background-color: var(--color-background-tertiary); color: var(--color-foreground-primary); - border: $s-1 solid var(--color-background-tertiary); + border: deprecated.$s-1 solid var(--color-background-tertiary); .icon-btn { svg { stroke: var(--button-tertiary-foreground-color-active); @@ -38,7 +38,7 @@ &:focus, &:focus-visible { outline: none; - border: $s-1 solid var(--button-tertiary-border-color-focus); + border: deprecated.$s-1 solid var(--button-tertiary-border-color-focus); background-color: transparent; color: var(--button-tertiary-foreground-color-focus); .icon-btn svg { @@ -48,19 +48,19 @@ } .copy-wrapper { - @include buttonStyle; - @include copyWrapperBase; + @include deprecated.buttonStyle; + @include deprecated.copyWrapperBase; width: 100%; height: fit-content; text-align: left; - border: $s-1 solid transparent; + border: deprecated.$s-1 solid transparent; .icon-btn { - @include flexCenter; + @include deprecated.flexCenter; position: absolute; top: 0; right: 0; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon-small; stroke: var(--button-tertiary-foreground-color-focus); @@ -70,7 +70,7 @@ &:hover { background-color: var(--button-tertiary-background-color-focus); color: var(--button-tertiary-foreground-color-focus); - border: $s-1 solid var(--button-tertiary-background-color-focus); + border: deprecated.$s-1 solid var(--button-tertiary-background-color-focus); .icon-btn svg { display: flex; } @@ -79,7 +79,7 @@ &:focus, &:focus-visible { outline: none; - border: $s-1 solid var(--button-tertiary-border-color-focus); + border: deprecated.$s-1 solid var(--button-tertiary-border-color-focus); background-color: transparent; color: var(--button-tertiary-foreground-color-focus); } diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss index 432d46f77f..b0669c92c1 100644 --- a/frontend/src/app/main/ui/components/editable_label.scss +++ b/frontend/src/app/main/ui/components/editable_label.scss @@ -4,19 +4,19 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .editable-label-input { - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; flex-grow: 1; - height: $s-28; + height: deprecated.$s-28; max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); margin: 0; - padding-left: $s-6; - border-radius: $br-4; - border: $s-1 solid var(--input-border-color-active); + padding-left: deprecated.$s-6; + border-radius: deprecated.$br-4; + border: deprecated.$s-1 solid var(--input-border-color-active); color: var(--input-foreground-color-active); } @@ -29,8 +29,8 @@ svg { @extend .button-icon; - height: $s-12; - width: $s-12; + height: deprecated.$s-12; + width: deprecated.$s-12; stroke: var(--icon-foreground); margin: 0; } diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss index d0e7ce8ff1..16962b6d22 100644 --- a/frontend/src/app/main/ui/components/editable_select.scss +++ b/frontend/src/app/main/ui/components/editable_select.scss @@ -4,22 +4,22 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .editable-select { @extend .asset-element; margin: 0; padding: 0; - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); position: relative; display: flex; - height: $s-32; + height: deprecated.$s-32; width: 100%; - padding: $s-8; - border-radius: $br-8; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; cursor: pointer; .dropdown-button { - @include flexCenter; + @include deprecated.flexCenter; svg { @extend .button-icon-small; transform: rotate(90deg); @@ -29,10 +29,10 @@ .custom-select-dropdown { @extend .dropdown-wrapper; - max-height: $s-320; + max-height: deprecated.$s-320; .separator { margin: 0; - height: $s-12; + height: deprecated.$s-12; } .dropdown-element { @extend .dropdown-element-base; @@ -43,7 +43,7 @@ } .check-icon { - @include flexCenter; + @include deprecated.flexCenter; svg { @extend .button-icon-small; visibility: hidden; diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index a2c946eadd..6a81a0fcb9 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; // INPUT .input-wrapper { @@ -15,33 +15,33 @@ position: relative; &.valid { input { - border: $s-1 solid var(--input-border-color-success); + border: deprecated.$s-1 solid var(--input-border-color-success); @extend .disabled-input; &:hover, &:focus { - border: $s-1 solid var(--input-border-color-success); + border: deprecated.$s-1 solid var(--input-border-color-success); } } } &.invalid { input { - border: $s-1 solid var(--input-border-color-error); + border: deprecated.$s-1 solid var(--input-border-color-error); @extend .disabled-input; &:hover, &:focus { - border: $s-1 solid var(--input-border-color-error); + border: deprecated.$s-1 solid var(--input-border-color-error); } } } &.valid .help-icon, &.invalid .help-icon { - right: $s-40; + right: deprecated.$s-40; } } .input-with-label-form { - @include flexColumn; - gap: $s-8; + @include deprecated.flexColumn; + gap: deprecated.$s-8; justify-content: flex-start; align-items: flex-start; height: 100%; @@ -57,12 +57,12 @@ width: 100%; max-width: 100%; height: 100%; - padding: 0 $s-8; + padding: 0 deprecated.$s-8; &:focus { outline: none; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; + border: deprecated.$s-1 solid var(--input-border-color-focus); + border-radius: deprecated.$br-8; } } @@ -73,7 +73,7 @@ input:-webkit-autofill:active { -webkit-text-fill-color: var(--input-foreground-color-active); -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); -webkit-background-clip: text; transition: background-color 5000s ease-in-out 0s; caret-color: var(--input-foreground-color-active); @@ -82,27 +82,27 @@ .input-and-icon { position: relative; - width: var(--input-width, calc(100% - $s-1)); + width: var(--input-width, calc(100% - deprecated.$s-1)); min-width: var(--input-min-width); - height: var(--input-height, $s-32); + height: var(--input-height, deprecated.$s-32); } .help-icon { cursor: pointer; position: absolute; - right: $s-16; - top: calc(50% - $s-8); + right: deprecated.$s-16; + top: calc(50% - deprecated.$s-8); svg { @extend .button-icon-small; stroke: var(--color-foreground-secondary); - width: $s-16; - height: $s-16; + width: deprecated.$s-16; + height: deprecated.$s-16; } } .invalid-icon { - width: $s-16; - height: $s-16; + width: deprecated.$s-16; + height: deprecated.$s-16; background: var(--input-border-color-error); border-radius: 50%; display: flex; @@ -110,28 +110,28 @@ justify-content: center; position: absolute; right: var(--input-icon-padding); - top: calc(50% - $s-8); + top: calc(50% - deprecated.$s-8); svg { - width: $s-12; - height: $s-12; + width: deprecated.$s-12; + height: deprecated.$s-12; stroke: var(--input-background-color); } } .valid-icon { - width: $s-16; - height: $s-16; + width: deprecated.$s-16; + height: deprecated.$s-16; background: var(--input-border-color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; - right: $s-16; - top: calc(50% - $s-8); + right: deprecated.$s-16; + top: calc(50% - deprecated.$s-8); svg { - width: $s-12; - height: $s-12; + width: deprecated.$s-12; + height: deprecated.$s-12; fill: var(--input-border-color-success); stroke: var(--input-background-color); } @@ -140,25 +140,25 @@ .error { color: var(--input-border-color-error); width: 100%; - font-size: $fs-14; + font-size: deprecated.$fs-14; } .hint { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; width: 99%; - margin-block-start: $s-8; + margin-block-start: deprecated.$s-8; color: var(--modal-text-foreground-color); } .checkbox { @extend .input-checkbox; .checkbox-label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; flex-direction: row-reverse; - gap: $s-6; - min-height: $s-32; + gap: deprecated.$s-6; + min-height: deprecated.$s-32; cursor: pointer; span { @extend .checkbox-icon; @@ -181,23 +181,23 @@ // SELECT .custom-select { @extend .select-wrapper; - height: $s-32; + height: deprecated.$s-32; .input-container { - @include flexRow; - height: $s-32; + @include deprecated.flexRow; + height: deprecated.$s-32; width: 100%; - border-radius: $br-8; - border: $s-1 solid var(--input-border-color); + border-radius: deprecated.$br-8; + border: deprecated.$s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); background-color: var(--input-background-color); .main-content { - @include flexColumn; - @include bodySmallTypography; + @include deprecated.flexColumn; + @include deprecated.bodySmallTypography; position: relative; justify-content: center; flex-grow: 1; height: 100%; - padding: $s-8; + padding: deprecated.$s-8; .label { color: var(--input-foreground-color); @@ -211,9 +211,9 @@ } } .icon { - @include flexCenter; - height: $s-32; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-32; + width: deprecated.$s-24; pointer-events: none; svg { @extend .button-icon-small; @@ -224,40 +224,40 @@ &.disabled { background-color: var(--input-background-color-disabled); - border: $s-1 solid var(--input-border-color-disabled); + border: deprecated.$s-1 solid var(--input-border-color-disabled); color: var(--input-foreground-color-disabled); } &.focus { outline: none; color: var(--input-foreground-color-active); background-color: var(--input-background-color-active); - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); } } select { @extend .menu-dropdown; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; box-sizing: border-box; position: absolute; top: 0; left: 0; - min-height: $s-32; + min-height: deprecated.$s-32; height: auto; width: calc(100% - 1px); - padding: 0 $s-12; + padding: 0 deprecated.$s-12; margin: 0; border: none; opacity: 0; - z-index: $z-index-10; + z-index: deprecated.$z-index-10; background-color: transparent; cursor: pointer; option { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--title-foreground-color-hover); background-color: var(--menu-background-color); appearance: none; - height: $s-32; + height: deprecated.$s-32; } } } @@ -267,7 +267,7 @@ @extend .button-primary; &:disabled { @extend .button-disabled; - min-height: $s-32; + min-height: deprecated.$s-32; } } @@ -276,33 +276,33 @@ display: flex; flex-direction: column; position: relative; - min-height: $s-40; - max-height: $s-180; + min-height: deprecated.$s-40; + max-height: deprecated.$s-180; width: 100%; overflow-y: hidden; .inside-input { - @include removeInputStyle; - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.removeInputStyle; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; width: 100%; - max-width: calc(100% - $s-1); - min-height: $s-32; + max-width: calc(100% - deprecated.$s-1); + min-height: deprecated.$s-32; padding-top: 0; - height: $s-32; - padding: $s-8; + height: deprecated.$s-32; + padding: deprecated.$s-8; margin: 0; - border-radius: $br-8; + border-radius: deprecated.$br-8; color: var(--input-foreground-color-active); background-color: var(--input-background-color); &:focus { outline: none; - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); } &.invalid { - border: $s-1 solid var(--input-border-color-error); + border: deprecated.$s-1 solid var(--input-border-color-error); &:hover, &:focus { - border: $s-1 solid var(--input-border-color-error); + border: deprecated.$s-1 solid var(--input-border-color-error); } } } @@ -312,31 +312,31 @@ .selected-items { display: flex; flex-wrap: wrap; - gap: $s-4; - max-height: $s-136; - padding: $s-4 0; + gap: deprecated.$s-4; + max-height: deprecated.$s-136; + padding: deprecated.$s-4 0; overflow-y: scroll; .selected-item { .around { - @include flexRow; - height: $s-24; + @include deprecated.flexRow; + height: deprecated.$s-24; width: fit-content; - padding-left: $s-6; - border-radius: $br-6; + padding-left: deprecated.$s-6; + border-radius: deprecated.$br-6; background-color: var(--pill-background-color); - border: $s-1 solid var(--pill-background-color); + border: deprecated.$s-1 solid var(--pill-background-color); box-sizing: border-box; .text { - @include bodySmallTypography; - padding-right: $s-8; + @include deprecated.bodySmallTypography; + padding-right: deprecated.$s-8; color: var(--pill-foreground-color); } .icon { - @include flexCenter; - @include buttonStyle; - height: $s-32; - width: $s-24; + @include deprecated.flexCenter; + @include deprecated.buttonStyle; + height: deprecated.$s-32; + width: deprecated.$s-24; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -360,31 +360,31 @@ .custom-radio { display: grid; grid-template-columns: repeat(3, 1fr); - gap: $s-16; + gap: deprecated.$s-16; } .radio-label { - @include bodySmallTypography; - @include flexRow; + @include deprecated.bodySmallTypography; + @include deprecated.flexRow; align-items: flex-start; - gap: $s-8; - min-height: $s-32; + gap: deprecated.$s-8; + min-height: deprecated.$s-32; height: fit-content; - border-radius: $br-8; - padding: $s-8; + border-radius: deprecated.$br-8; + padding: deprecated.$s-8; color: var(--input-foreground-color-rest); - border: $s-1 solid transparent; + border: deprecated.$s-1 solid transparent; &:focus, &:focus-within { outline: none; - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); } } .radio-dot { - height: $s-8; - width: $s-8; - border-radius: $br-circle; + height: deprecated.$s-8; + width: deprecated.$s-8; + border-radius: deprecated.$br-circle; background-color: var(--color-background-tertiary); } @@ -395,16 +395,16 @@ .radio-icon { @extend .checkbox-icon; - border-radius: $br-circle; + border-radius: deprecated.$br-circle; } .radio-label-image { - @include smallTitleTipography; + @include deprecated.smallTitleTipography; display: grid; grid-template-rows: auto auto 0px; justify-items: center; gap: 0; - border-radius: $br-8; + border-radius: deprecated.$br-8; margin: 0; border: 1px solid var(--color-background-tertiary); cursor: pointer; @@ -414,28 +414,28 @@ &:focus, &:focus-within { outline: none; - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); } .image-text { color: var(--input-foreground-color-rest); display: grid; align-self: center; - margin-bottom: $s-16; - padding-inline: $s-8; + margin-bottom: deprecated.$s-16; + padding-inline: deprecated.$s-8; text-align: center; } } .image-inside { - margin: $s-16; + margin: deprecated.$s-16; background-size: 100%; background-repeat: no-repeat; background-position: center; } .icon-inside { - margin: $s-16; - @include flexCenter; + margin: deprecated.$s-16; + @include deprecated.flexCenter; svg { width: 40px; height: 60px; @@ -447,10 +447,10 @@ //TEXTAREA .textarea-label { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); text-transform: uppercase; - margin-bottom: $s-8; + margin-bottom: deprecated.$s-8; } .textarea-wrapper { diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index b88a7e1891..6ef73339ad 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -4,27 +4,27 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .radio-btn-wrapper { - @include flexCenter; - border-radius: $br-8; - height: $s-32; + @include deprecated.flexCenter; + border-radius: deprecated.$br-8; + height: deprecated.$s-32; background-color: var(--input-background-color); - gap: $s-4; + gap: deprecated.$s-4; } .radio-icon { --radio-icon-border-color: var(--radio-btn-border-color); - @include buttonStyle; - @include flexCenter; - @include focusRadio; - height: $s-32; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; + @include deprecated.focusRadio; + height: deprecated.$s-32; flex-grow: 1; - border-radius: $s-8; + border-radius: deprecated.$s-8; box-sizing: border-box; - border: $br-2 solid var(--radio-icon-border-color); + border: deprecated.$br-2 solid var(--radio-icon-border-color); input { display: none; @@ -34,7 +34,7 @@ stroke: var(--radio-btn-foreground-color); } .title-name { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--radio-btn-foreground-color); } &:hover { @@ -59,7 +59,7 @@ .disabled { cursor: default; background-color: transparent; - border: $s-2 solid transparent; + border: deprecated.$s-2 solid transparent; svg { stroke: var(--button-foreground-color-disabled); } @@ -68,7 +68,7 @@ } &:hover { background-color: transparent; - border: $s-2 solid transparent; + border: deprecated.$s-2 solid transparent; svg { stroke: var(--button-foreground-color-disabled); } diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss index 9a155d68a4..96855005a1 100644 --- a/frontend/src/app/main/ui/components/search_bar.scss +++ b/frontend/src/app/main/ui/components/search_bar.scss @@ -4,33 +4,33 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .search-box { display: flex; - gap: $s-2; - height: $s-32; + gap: deprecated.$s-2; + height: deprecated.$s-32; width: 100%; - border-radius: $br-8; + border-radius: deprecated.$br-8; background-color: var(--search-bar-background-color); } .icon { - margin-left: $s-8; - flex: 0 0 $s-16; + margin-left: deprecated.$s-8; + flex: 0 0 deprecated.$s-16; color: var(--color-foreground-primary); } .search-input-wrapper { - @include flexCenter; - height: $s-32; + @include deprecated.flexCenter; + height: deprecated.$s-32; width: 100%; - border: $s-1 solid var(--search-bar-input-border-color); - border-radius: $br-8; + border: deprecated.$s-1 solid var(--search-bar-input-border-color); + border-radius: deprecated.$br-8; background-color: var(--search-bar-input-background-color); &:hover { - border: $s-1 solid var(--input-border-color-hover); + border: deprecated.$s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); .search-input { background-color: var(--input-background-color-hover); @@ -40,7 +40,7 @@ &:focus-within { background-color: var(--input-background-color-active); color: var(--input-foreground-color-active); - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); .search-input { background-color: var(--input-background-color-active); } @@ -50,12 +50,12 @@ .search-input { width: 100%; height: 100%; - margin: 0 $s-8 0 $s-4; + margin: 0 deprecated.$s-8 0 deprecated.$s-4; border: 0; background-color: var(--input-background-color); - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--input-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; &:focus { outline: none; } @@ -63,12 +63,12 @@ .clear-icon { @extend .button-tag; - flex: 0 0 $s-32; + flex: 0 0 deprecated.$s-32; height: 100%; color: var(--color-icon-default); } .search-box.has-children .search-input-wrapper { - border-radius: 0 $br-8 $br-8 0; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; margin-left: 0; } diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index a9096a5a60..ba01e42e08 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .custom-select { --border-color: var(--menu-background-color); @@ -12,18 +12,18 @@ --icon-color: var(--icon-foreground); --text-color: var(--menu-foreground-color); @extend .new-scrollbar; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; - height: $s-32; + height: deprecated.$s-32; width: 100%; margin: 0; - padding: $s-8; - border-radius: $br-8; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--bg-color); - border: $s-1 solid var(--border-color); + border: deprecated.$s-1 solid var(--border-color); color: var(--text-color); cursor: pointer; @@ -53,7 +53,7 @@ } .dropdown-button { - @include flexCenter; + @include deprecated.flexCenter; margin-inline-end: var(--sp-xxs); svg { @extend .button-icon-small; @@ -63,9 +63,9 @@ } .current-icon { - @include flexCenter; - width: $s-24; - padding-right: $s-4; + @include deprecated.flexCenter; + width: deprecated.$s-24; + padding-right: deprecated.$s-4; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -76,23 +76,23 @@ @extend .dropdown-wrapper; .separator { margin: 0; - height: $s-12; - border-block-start: $s-1 solid var(--dropdown-separator-color); + height: deprecated.$s-12; + border-block-start: deprecated.$s-1 solid var(--dropdown-separator-color); } } .custom-select-dropdown[data-direction="up"] { - bottom: $s-32; + bottom: deprecated.$s-32; top: auto; } .checked-element { @extend .dropdown-element-base; .icon { - @include flexCenter; - height: $s-24; - width: $s-24; - padding-right: $s-4; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; + padding-right: deprecated.$s-4; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -105,7 +105,7 @@ } .check-icon { - @include flexCenter; + @include deprecated.flexCenter; svg { @extend .button-icon-small; visibility: hidden; @@ -126,5 +126,5 @@ } .current-label { - @include textEllipsis; + @include deprecated.textEllipsis; } diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index 2090240177..aab1d5ffdd 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -3,11 +3,11 @@ // file, You can obtain one at http://mozilla.org/MPL/2.0/. // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .tab-container { display: grid; - grid-template-rows: $s-32 1fr; + grid-template-rows: deprecated.$s-32 1fr; height: 100%; } @@ -15,11 +15,11 @@ display: flex; align-items: center; flex-direction: row; - gap: $s-2; - border-radius: $br-8; + gap: deprecated.$s-2; + border-radius: deprecated.$br-8; background: var(--tabs-background-color); cursor: pointer; - font-size: $fs-12; + font-size: deprecated.$fs-12; height: 100%; } @@ -31,15 +31,15 @@ } .tab-container-tab-title { - @include flexCenter; + @include deprecated.flexCenter; height: 100%; width: 100%; - padding: 0 $s-8; + padding: 0 deprecated.$s-8; margin: 0; - border-radius: $br-8; + border-radius: deprecated.$br-8; background-color: transparent; color: var(--tab-foreground-color); - border: $s-2 solid var(--tab-border-color); + border: deprecated.$s-2 solid var(--tab-border-color); min-width: 0; svg { @@ -48,7 +48,7 @@ } .content { - @include headlineSmallTypography; + @include deprecated.headlineSmallTypography; text-align: center; white-space: nowrap; overflow: hidden; @@ -76,18 +76,18 @@ } .collapse-sidebar { - @include flexCenter; - @include buttonStyle; + @include deprecated.flexCenter; + @include deprecated.buttonStyle; height: 100%; - width: $s-24; - min-width: $s-24; - padding: 0 $s-6; - border-radius: $br-5; + width: deprecated.$s-24; + min-width: deprecated.$s-24; + padding: 0 deprecated.$s-6; + border-radius: deprecated.$br-5; svg { - @include flexCenter; - height: $s-16; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; stroke: var(--icon-foreground); transform: rotate(180deg); fill: none; @@ -103,7 +103,7 @@ &.collapsed { svg { transform: rotate(0deg); - padding: 0 0 0 $s-6; + padding: 0 0 0 deprecated.$s-6; } } } @@ -118,6 +118,6 @@ //Firefox doesn't respect scrollbar-gutter @supports (-moz-appearance: none) { .tab-container-content { - padding-right: $s-8; + padding-right: deprecated.$s-8; } } diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index d4f5837055..b4b5b84554 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -5,15 +5,15 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as t; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .title-bar { display: flex; align-items: center; justify-content: space-between; - height: $s-32; + height: deprecated.$s-32; width: 100%; - min-height: $s-32; + min-height: deprecated.$s-32; --arrow-icon-color: var(--icon-foreground); --title-color: var(--title-foreground-color); } @@ -26,7 +26,7 @@ justify-content: flex-start; grid-auto-flow: column; height: 100%; - min-height: $s-32; + min-height: deprecated.$s-32; overflow: hidden; } @@ -37,13 +37,13 @@ .title-only { @include t.use-typography("headline-small"); - --title-bar-title-margin: #{$s-8}; + --title-bar-title-margin: #{deprecated.$s-8}; color: var(--title-color); margin-inline-start: var(--title-bar-title-margin); } .title-only-icon-gap { - --title-bar-title-margin: #{$s-12}; + --title-bar-title-margin: #{deprecated.$s-12}; } .inspect-title { @@ -63,7 +63,7 @@ } .icon-text-btn { - @include buttonStyle; + @include deprecated.buttonStyle; display: flex; align-items: center; flex-grow: 1; @@ -77,8 +77,8 @@ } .icon-btn { - @include buttonStyle; - @include flexCenter; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; &:hover { --arrow-icon-color: var(--icon-foreground-hover); diff --git a/frontend/src/app/main/ui/confirm.scss b/frontend/src/app/main/ui/confirm.scss index 94a72efc65..e517a7b685 100644 --- a/frontend/src/app/main/ui/confirm.scss +++ b/frontend/src/app/main/ui/confirm.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -18,11 +18,11 @@ } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include headlineMediumTypography; + @include deprecated.headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -31,25 +31,25 @@ } .modal-content { - @include bodyLargeTypography; - margin-bottom: $s-24; + @include deprecated.bodyLargeTypography; + margin-bottom: deprecated.$s-24; } .modal-item-element { - @include flexRow; + @include deprecated.flexRow; } .modal-component-icon { - @include flexCenter; - height: $s-16; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; svg { @extend .button-icon-small; stroke: var(--color); } } .modal-component-name { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; } .action-buttons { @@ -70,6 +70,6 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); } diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss index 26d4f051a8..994f56a723 100644 --- a/frontend/src/app/main/ui/dashboard.scss +++ b/frontend/src/app/main/ui/dashboard.scss @@ -4,23 +4,23 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .dashboard { @extend .new-scrollbar; background-color: var(--app-background); display: grid; - grid-template-columns: $s-40 $s-256 1fr; - grid-template-rows: $s-52 1fr; + grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr; + grid-template-rows: deprecated.$s-52 1fr; height: 100vh; } .dashboard-content { display: grid; - grid-template-rows: $s-64 1fr; + grid-template-rows: deprecated.$s-64 1fr; position: relative; grid-row: 1 / span 2; - padding: $s-16 $s-16 0 0; + padding: deprecated.$s-16 deprecated.$s-16 0 0; overflow: hidden; width: 100%; } diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss index 0b94ce465e..40e8387274 100644 --- a/frontend/src/app/main/ui/dashboard/change_owner.scss +++ b/frontend/src/app/main/ui/dashboard/change_owner.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -15,11 +15,11 @@ } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -28,13 +28,13 @@ } .modal-content { - @include bodySmallTypography; - margin-bottom: $s-24; + @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; } .input-wrapper { @extend .input-with-label; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } .action-buttons { diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss index 2319611ea8..ae9807214d 100644 --- a/frontend/src/app/main/ui/dashboard/grid.scss +++ b/frontend/src/app/main/ui/dashboard/grid.scss @@ -4,28 +4,28 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; // TODO: Legacy sass variables. We should remove them in favor of DS tokens. $bp-max-1366: "(max-width: 1366px)"; -$thumbnail-default-width: $s-252; // Default width -$thumbnail-default-height: $s-168; // Default width +$thumbnail-default-width: deprecated.$s-252; // Default width +$thumbnail-default-height: deprecated.$s-168; // Default width .dashboard-grid { - font-size: $fs-14; + font-size: deprecated.$fs-14; height: 100%; overflow-y: auto; overflow-x: hidden; - padding: 0 $s-16; + padding: 0 deprecated.$s-16; } .grid-row { display: grid; grid-auto-flow: column; - grid-auto-columns: calc($s-12 + var(--th-width, #{$thumbnail-default-width})); + grid-auto-columns: calc(deprecated.$s-12 + var(--th-width, #{$thumbnail-default-width})); width: 100%; - gap: $s-24; + gap: deprecated.$s-24; } .grid-item { @@ -33,23 +33,23 @@ $thumbnail-default-height: $s-168; // Default width cursor: pointer; display: flex; flex-direction: column; - margin: $s-12 0; + margin: deprecated.$s-12 0; position: relative; text-align: center; a, button { width: 100%; - font-weight: $fw400; + font-weight: deprecated.$fw400; } button { background-color: transparent; border: none; - padding: 0 $s-6; + padding: 0 deprecated.$s-6; } .grid-item-th { - border-radius: $br-8; + border-radius: deprecated.$br-8; text-align: initial; width: var(--th-width, #{$thumbnail-default-width}); height: var(--th-height, #{$thumbnail-default-height}); @@ -62,22 +62,22 @@ $thumbnail-default-height: $s-168; // Default width } &.dragged { - border-radius: $br-4; - outline: $br-4 solid var(--color-accent-primary); + border-radius: deprecated.$br-4; + outline: deprecated.$br-4 solid var(--color-accent-primary); text-align: initial; - width: calc(var(--th-width) + $s-12); + width: calc(var(--th-width) + deprecated.$s-12); height: var(--th-height, #{$thumbnail-default-height}); } &.overlay { - border-radius: $br-4; - border: $s-2 solid var(--color-accent-tertiary); + border-radius: deprecated.$br-4; + border: deprecated.$s-2 solid var(--color-accent-tertiary); height: 100%; opacity: 0; pointer-events: none; position: absolute; width: 100%; - z-index: $z-index-1; + z-index: deprecated.$z-index-1; } &:hover .overlay { @@ -94,28 +94,28 @@ $thumbnail-default-height: $s-168; // Default width .item-info { display: grid; - padding: $s-8; + padding: deprecated.$s-8; text-align: left; width: 100%; - font-size: $fs-12; + font-size: deprecated.$fs-12; h3 { - border: $s-1 solid transparent; + border: deprecated.$s-1 solid transparent; color: var(--color-foreground-primary); - font-size: $fs-16; - font-weight: $fw400; - height: $s-28; + font-size: deprecated.$fs-16; + font-weight: deprecated.$fw400; + height: deprecated.$s-28; line-height: 1.92; - max-width: $s-260; + max-width: deprecated.$s-260; overflow: hidden; - padding-right: $s-8; + padding-right: deprecated.$s-8; padding: 0; text-overflow: ellipsis; white-space: nowrap; width: 100%; @media #{$bp-max-1366} { - max-width: $s-232; + max-width: deprecated.$s-232; } } @@ -125,12 +125,12 @@ $thumbnail-default-height: $s-168; // Default width text-overflow: ellipsis; width: 100%; white-space: nowrap; - max-width: $s-260; + max-width: deprecated.$s-260; &::first-letter { text-transform: capitalize; } @media #{$bp-max-1366} { - max-width: $s-232; + max-width: deprecated.$s-232; } } } @@ -138,12 +138,12 @@ $thumbnail-default-height: $s-168; // Default width .item-badge { background-color: var(--color-accent-primary); border: none; - border-radius: $br-6; + border-radius: deprecated.$br-6; position: absolute; - top: $s-12; - right: $s-12; - height: $s-32; - width: $s-32; + top: deprecated.$s-12; + right: deprecated.$s-12; + height: deprecated.$s-32; + width: deprecated.$s-32; display: flex; align-items: center; justify-content: center; @@ -151,38 +151,38 @@ $thumbnail-default-height: $s-168; // Default width svg { stroke: var(--color-background-secondary); fill: none; - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; } } &.add-file { - border: $s-1 dashed var(--color-foreground-secondary); + border: deprecated.$s-1 dashed var(--color-foreground-secondary); justify-content: center; box-shadow: none; span { color: var(--color-background-primary); - font-size: $fs-14; + font-size: deprecated.$fs-14; } &:hover { background-color: var(--color-foreground-primary); - border: $s-2 solid var(--color-accent-tertiary); + border: deprecated.$s-2 solid var(--color-accent-tertiary); } } } .drag-counter { position: absolute; - top: $s-4; - left: $s-4; - width: $s-32; - height: $s-32; + top: deprecated.$s-4; + left: deprecated.$s-4; + width: deprecated.$s-32; + height: deprecated.$s-32; background-color: var(--color-accent-tertiary); - border-radius: $br-circle; + border-radius: deprecated.$br-circle; color: var(--color-background-secondary); - font-size: $fs-16; + font-size: deprecated.$fs-16; display: flex; justify-content: center; align-items: center; @@ -191,8 +191,8 @@ $thumbnail-default-height: $s-168; // Default width // PROJECTS, ELEMENTS & ICONS GRID .project-th { background-color: transparent; - border-radius: $br-8; - padding-top: $s-6; + border-radius: deprecated.$br-8; + padding-top: deprecated.$s-6; &:hover, &:focus, @@ -208,7 +208,7 @@ $thumbnail-default-height: $s-168; // Default width .selected { .grid-item-th { - outline: $s-4 solid var(--color-accent-tertiary); + outline: deprecated.$s-4 solid var(--color-accent-tertiary); } } } @@ -219,8 +219,8 @@ $thumbnail-default-height: $s-168; // Default width height: 100%; justify-content: center; opacity: 0; - right: $s-6; - width: $s-32; + right: deprecated.$s-6; + width: deprecated.$s-32; span { color: var(--color-background-secondary); @@ -230,7 +230,7 @@ $thumbnail-default-height: $s-168; // Default width .project-th-icon { align-items: center; display: flex; - margin-right: $s-8; + margin-right: deprecated.$s-8; margin-top: 0; } @@ -238,10 +238,10 @@ $thumbnail-default-height: $s-168; // Default width align-items: flex-end; display: flex; flex-direction: column; - height: $s-32; + height: deprecated.$s-32; justify-content: center; margin-right: 0; - margin-top: $s-20; + margin-top: deprecated.$s-20; width: 100%; --menu-icon-color: var(--button-tertiary-foreground-color-rest); @@ -255,8 +255,8 @@ $thumbnail-default-height: $s-168; // Default width stroke: var(--menu-icon-color); fill: none; margin-right: 0; - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; } .project-th-actions.force-display { @@ -264,7 +264,7 @@ $thumbnail-default-height: $s-168; // Default width } .grid-item-th { - border-radius: $br-4; + border-radius: deprecated.$br-4; cursor: pointer; height: 100%; overflow: hidden; @@ -282,11 +282,11 @@ $thumbnail-default-height: $s-168; // Default width // LIBRARY VIEW .library { - height: $s-580; + height: deprecated.$s-580; } .grid-item.project-th.library { - height: $s-612; + height: deprecated.$s-612; } .grid-item-th.library { @@ -294,21 +294,21 @@ $thumbnail-default-height: $s-168; // Default width flex-direction: column; height: 90%; justify-content: flex-start; - max-height: $s-580; - padding: $s-32; + max-height: deprecated.$s-580; + padding: deprecated.$s-32; .asset-section { - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-secondary); &:not(:first-child) { - margin-top: $s-16; + margin-top: deprecated.$s-16; } } .asset-title { display: flex; - font-size: $fs-12; + font-size: deprecated.$fs-12; text-transform: uppercase; .num-assets { @@ -318,18 +318,18 @@ $thumbnail-default-height: $s-168; // Default width .asset-list-item { align-items: center; - border-radius: $br-4; - border: $s-1 solid transparent; + border-radius: deprecated.$br-4; + border: deprecated.$s-1 solid transparent; color: var(--color-foreground-primary); display: flex; - font-size: $fs-12; - margin-top: $s-4; - padding: $s-2; + font-size: deprecated.$fs-12; + margin-top: deprecated.$s-4; + padding: deprecated.$s-2; position: relative; .name-block { color: var(--color-foreground-secondary); - width: calc(100% - $s-24 - $s-8); + width: calc(100% - deprecated.$s-24 - deprecated.$s-8); } .item-name { @@ -341,11 +341,11 @@ $thumbnail-default-height: $s-168; // Default width svg { background-color: var(--color-canvas); - border-radius: $br-4; - border: $s-2 solid transparent; - height: $s-24; - margin-right: $s-8; - width: $s-24; + border-radius: deprecated.$br-4; + border: deprecated.$s-2 solid transparent; + height: deprecated.$s-24; + margin-right: deprecated.$s-8; + width: deprecated.$s-24; } .color-name { @@ -354,14 +354,14 @@ $thumbnail-default-height: $s-168; // Default width .color-value { color: var(--color-foreground-secondary); - margin-left: $s-4; + margin-left: deprecated.$s-4; text-transform: uppercase; } .typography-sample { - height: $s-20; - margin-right: $s-4; - width: $s-20; + height: deprecated.$s-20; + margin-right: deprecated.$s-4; + width: deprecated.$s-20; } } } @@ -369,7 +369,7 @@ $thumbnail-default-height: $s-168; // Default width .color-item { display: grid; grid-template-columns: auto 1fr; - gap: $s-8; + gap: deprecated.$s-8; } .grid-loader { diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss index 5df69e82ab..cf7cea13ae 100644 --- a/frontend/src/app/main/ui/dashboard/import.scss +++ b/frontend/src/app/main/ui/dashboard/import.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -17,11 +17,11 @@ } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -30,14 +30,14 @@ } .modal-content { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; flex: 1; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: 1fr; - gap: $s-16; - margin-bottom: $s-24; + gap: deprecated.$s-16; + margin-bottom: deprecated.$s-24; min-height: 40px; } @@ -58,7 +58,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--modal-text-foreground-color); line-height: 1.5; } @@ -66,11 +66,11 @@ .file-entry { display: flex; .file-name { - @include flexRow; + @include deprecated.flexRow; .file-icon { - @include flexCenter; - height: $s-24; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-16; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -81,19 +81,19 @@ } .file-name-edit { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; flex-grow: 1; } .file-name-label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; - gap: $s-12; + gap: deprecated.$s-12; flex-grow: 1; .icon { - @include flexCenter; - height: $s-16; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -101,11 +101,11 @@ } } .edit-entry-buttons { - @include flexRow; + @include deprecated.flexRow; button { @extend .button-tertiary; - width: $s-28; - height: $s-32; + width: deprecated.$s-28; + height: deprecated.$s-32; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -117,19 +117,19 @@ .progress-message { display: flex; align-items: center; - height: $s-32; + height: deprecated.$s-32; color: var(--modal-text-foreground-color); } .linked-library { display: flex; align-items: center; - gap: $s-12; + gap: deprecated.$s-12; color: var(--modal-text-foreground-color); .linked-library-tag { - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; svg { @extend .button-icon; stroke: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss index 6decdde6b4..eba9c361d0 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.scss +++ b/frontend/src/app/main/ui/dashboard/team_form.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -15,11 +15,11 @@ } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -28,20 +28,20 @@ } .modal-content { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .team-form { - min-width: $s-400; + min-width: deprecated.$s-400; } .group-name-input { @extend .input-element-label; - @include bodySmallTypography; - margin-bottom: $s-8; + @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-8; label { - @include flexColumn; - @include bodySmallTypography; + @include deprecated.flexColumn; + @include deprecated.bodySmallTypography; align-items: flex-start; width: 100%; border: none; @@ -49,7 +49,7 @@ height: 100%; input { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } } } diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss index e6accaaabd..ff842933da 100644 --- a/frontend/src/app/main/ui/delete_shared.scss +++ b/frontend/src/app/main/ui/delete_shared.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -18,11 +18,11 @@ } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include headlineMediumTypography; + @include deprecated.headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -31,12 +31,12 @@ } .modal-content { - @include bodySmallTypography; - margin-bottom: $s-24; + @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; } .element-list { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); } @@ -58,7 +58,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); line-height: 1.5; } diff --git a/frontend/src/app/main/ui/exports/assets.scss b/frontend/src/app/main/ui/exports/assets.scss index 462161c7f9..8bc4737a20 100644 --- a/frontend/src/app/main/ui/exports/assets.scss +++ b/frontend/src/app/main/ui/exports/assets.scss @@ -4,13 +4,13 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; // PROGRESS WIDGET .export-progress-widget { - @include flexCenter; - width: $s-28; - height: $s-28; + @include deprecated.flexCenter; + width: deprecated.$s-28; + height: deprecated.$s-28; } // PROGRESS MODAL @@ -20,19 +20,19 @@ --export-modal-icon-color: var(--alert-icon-foreground-color-default); --export-modal-border-color: var(--alert-border-color-default); position: absolute; - right: $s-16; - top: $s-48; + right: deprecated.$s-16; + top: deprecated.$s-48; display: grid; - grid-template-columns: $s-24 1fr $s-24; + grid-template-columns: deprecated.$s-24 1fr deprecated.$s-24; grid-template-areas: "icon text close" "bar bar bar"; - gap: $s-4 $s-8; - padding-block-start: $s-8; + gap: deprecated.$s-4 deprecated.$s-8; + padding-block-start: deprecated.$s-8; background-color: var(--export-modal-bg-color); - border: $s-1 solid var(--export-modal-border-color); - border-radius: $br-8; - z-index: $z-index-modal; + border: deprecated.$s-1 solid var(--export-modal-border-color); + border-radius: deprecated.$br-8; + z-index: deprecated.$z-index-modal; overflow: hidden; } @@ -42,23 +42,23 @@ --export-modal-icon-color: var(--alert-icon-foreground-color-error); --export-modal-border-color: var(--alert-border-color-error); grid-template-areas: "icon text close"; - gap: $s-8; - padding-block: $s-8; + gap: deprecated.$s-8; + padding-block: deprecated.$s-8; } .icon { @extend .button-icon; grid-area: icon; align-self: center; - margin-inline-start: $s-8; + margin-inline-start: deprecated.$s-8; stroke: var(--export-modal-icon-color); } .export-progress-title { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; display: grid; grid-template-columns: auto 1fr; - gap: $s-8; + gap: deprecated.$s-8; grid-area: text; align-self: center; padding: 0; @@ -67,16 +67,16 @@ } .progress { - @include bodyMediumTypography; - padding-left: $s-8; + @include deprecated.bodyMediumTypography; + padding-left: deprecated.$s-8; margin: 0; align-self: center; color: var(--modal-text-foreground-color); } .retry-btn { - @include buttonStyle; - @include bodySmallTypography; + @include deprecated.buttonStyle; + @include deprecated.bodySmallTypography; display: inline; text-align: left; color: var(--modal-link-foreground-color); @@ -85,9 +85,9 @@ } .progress-close-button { - @include buttonStyle; + @include deprecated.buttonStyle; padding: 0; - margin-inline-end: $s-8; + margin-inline-end: deprecated.$s-8; } .close-icon { @@ -110,15 +110,15 @@ .modal-container { @extend .modal-container-base; - max-height: calc(10 * $s-80); + max-height: calc(10 * deprecated.$s-80); } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include headlineMediumTypography; + @include deprecated.headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -128,32 +128,32 @@ .modal-content, .no-selection { - @include bodySmallTypography; - margin-bottom: $s-24; + @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; .modal-link { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; text-decoration: none; cursor: pointer; color: var(--modal-link-foreground-color); } .selection-header { - @include flexRow; - height: $s-32; - margin-bottom: $s-4; + @include deprecated.flexRow; + height: deprecated.$s-32; + margin-bottom: deprecated.$s-4; .selection-btn { - @include buttonStyle; + @include deprecated.buttonStyle; @extend .input-checkbox; - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; padding: 0; - margin-left: $s-16; + margin-left: deprecated.$s-16; span { @extend .checkbox-icon; } } .selection-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); } } @@ -177,67 +177,67 @@ } } .selection-list { - @include flexColumn; - max-height: $s-400; + @include deprecated.flexColumn; + max-height: deprecated.$s-400; overflow-y: auto; - padding-bottom: $s-12; + padding-bottom: deprecated.$s-12; .selection-row { - @include flexRow; + @include deprecated.flexRow; background-color: var(--entry-background-color); - min-height: $s-40; - border-radius: $br-8; + min-height: deprecated.$s-40; + border-radius: deprecated.$br-8; .selection-btn { - @include buttonStyle; + @include deprecated.buttonStyle; display: grid; grid-template-columns: min-content auto 1fr auto auto; align-items: center; width: 100%; height: 10%; - gap: $s-8; - padding: 0 $s-16; + gap: deprecated.$s-8; + padding: 0 deprecated.$s-16; .checkbox-wrapper { @extend .input-checkbox; - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; padding: 0; .checkobox-tick { @extend .checkbox-icon; } } .selection-name { - @include bodyLargeTypography; - @include textEllipsis; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; flex-grow: 1; color: var(--modal-text-foreground-color); text-align: start; } .selection-scale { - @include bodyLargeTypography; - @include textEllipsis; - min-width: $s-108; - padding: $s-12; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; + min-width: deprecated.$s-108; + padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } .selection-extension { - @include bodyLargeTypography; - @include textEllipsis; - min-width: $s-72; - padding: $s-12; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; + min-width: deprecated.$s-72; + padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } } .image-wrapper { - @include flexCenter; - min-height: $s-32; - min-width: $s-32; + @include deprecated.flexCenter; + min-height: deprecated.$s-32; + min-width: deprecated.$s-32; background-color: var(--app-white); - border-radius: $br-6; + border-radius: deprecated.$br-6; margin: auto 0; img, svg { object-fit: contain; - max-height: $s-40; + max-height: deprecated.$s-40; } } } @@ -260,7 +260,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); } @@ -271,27 +271,27 @@ label { align-items: flex-start; .modal-subtitle { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } } span { - margin-top: $s-8; + margin-top: deprecated.$s-8; } } .option-content { - @include flexColumn; - @include bodyLargeTypography; + @include deprecated.flexColumn; + @include deprecated.bodyLargeTypography; } .file-entry { .file-name { - @include flexRow; + @include deprecated.flexRow; .file-icon { - @include flexCenter; - height: $s-16; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; svg { @extend .button-icon-small; @@ -299,8 +299,8 @@ } } .file-name-label { - @include bodyLargeTypography; - @include textEllipsis; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; } } &.loading { diff --git a/frontend/src/app/main/ui/exports/files.scss b/frontend/src/app/main/ui/exports/files.scss index 370f075930..d6055ed184 100644 --- a/frontend/src/app/main/ui/exports/files.scss +++ b/frontend/src/app/main/ui/exports/files.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; // EXPORT MODAL .modal-overlay { @@ -16,15 +16,15 @@ .modal-container { @extend .modal-container-base; - max-height: calc(10 * $s-80); + max-height: calc(10 * deprecated.$s-80); } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include headlineMediumTypography; + @include deprecated.headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -33,32 +33,32 @@ } .modal-content { - @include bodySmallTypography; - margin-bottom: $s-24; + @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; .modal-link { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; text-decoration: none; cursor: pointer; color: var(--modal-link-foreground-color); } .selection-header { - @include flexRow; - height: $s-32; - margin-bottom: $s-4; + @include deprecated.flexRow; + height: deprecated.$s-32; + margin-bottom: deprecated.$s-4; .selection-btn { - @include buttonStyle; + @include deprecated.buttonStyle; @extend .input-checkbox; - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; padding: 0; - margin-left: $s-16; + margin-left: deprecated.$s-16; span { @extend .checkbox-icon; } } .selection-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); } } @@ -82,67 +82,67 @@ } } .selection-list { - @include flexColumn; - max-height: $s-400; + @include deprecated.flexColumn; + max-height: deprecated.$s-400; overflow-y: auto; - padding-bottom: $s-12; + padding-bottom: deprecated.$s-12; .selection-row { - @include flexRow; + @include deprecated.flexRow; background-color: var(--entry-background-color); - min-height: $s-40; - border-radius: $br-8; + min-height: deprecated.$s-40; + border-radius: deprecated.$br-8; .selection-btn { - @include buttonStyle; + @include deprecated.buttonStyle; display: grid; grid-template-columns: min-content auto 1fr auto auto; align-items: center; width: 100%; height: 10%; - gap: $s-8; - padding: 0 $s-16; + gap: deprecated.$s-8; + padding: 0 deprecated.$s-16; .checkbox-wrapper { @extend .input-checkbox; - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; padding: 0; .checkobox-tick { @extend .checkbox-icon; } } .selection-name { - @include bodyLargeTypography; - @include textEllipsis; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; flex-grow: 1; color: var(--modal-text-foreground-color); text-align: start; } .selection-scale { - @include bodyLargeTypography; - @include textEllipsis; - min-width: $s-108; - padding: $s-12; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; + min-width: deprecated.$s-108; + padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } .selection-extension { - @include bodyLargeTypography; - @include textEllipsis; - min-width: $s-72; - padding: $s-12; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; + min-width: deprecated.$s-72; + padding: deprecated.$s-12; color: var(--modal-text-foreground-color); } } .image-wrapper { - @include flexCenter; - min-height: $s-32; - min-width: $s-32; + @include deprecated.flexCenter; + min-height: deprecated.$s-32; + min-width: deprecated.$s-32; background-color: var(--app-white); - border-radius: $br-6; + border-radius: deprecated.$br-6; margin: auto 0; img, svg { object-fit: contain; - max-height: $s-40; + max-height: deprecated.$s-40; } } } @@ -165,7 +165,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); } @@ -176,29 +176,29 @@ label { align-items: flex-start; .modal-subtitle { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); padding: 0.25rem 0; } } span { - margin-top: $s-8; + margin-top: deprecated.$s-8; } } .option-content { - @include flexColumn; - @include bodyLargeTypography; + @include deprecated.flexColumn; + @include deprecated.bodyLargeTypography; } .file-entry { .file-name { - @include flexRow; + @include deprecated.flexRow; .file-icon { - @include flexCenter; - height: $s-16; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; svg { @extend .button-icon-small; @@ -206,8 +206,8 @@ } } .file-name-label { - @include bodyLargeTypography; - @include textEllipsis; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; } } &.loading { diff --git a/frontend/src/app/main/ui/inspect/annotation.scss b/frontend/src/app/main/ui/inspect/annotation.scss index bc826bbc73..431754d330 100644 --- a/frontend/src/app/main/ui/inspect/annotation.scss +++ b/frontend/src/app/main/ui/inspect/annotation.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-annotation { @@ -15,10 +15,10 @@ } .annotation-content { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--entry-foreground-color); } .copy-btn-title { - max-width: $s-28; + max-width: deprecated.$s-28; } diff --git a/frontend/src/app/main/ui/inspect/attributes/blur.scss b/frontend/src/app/main/ui/inspect/attributes/blur.scss index 62087b9a9e..736ab135c9 100644 --- a/frontend/src/app/main/ui/inspect/attributes/blur.scss +++ b/frontend/src/app/main/ui/inspect/attributes/blur.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-blur { @@ -23,5 +23,5 @@ } .copy-btn-title { - max-width: $s-28; + max-width: deprecated.$s-28; } diff --git a/frontend/src/app/main/ui/inspect/attributes/common.scss b/frontend/src/app/main/ui/inspect/attributes/common.scss index 44f749162d..305c396489 100644 --- a/frontend/src/app/main/ui/inspect/attributes/common.scss +++ b/frontend/src/app/main/ui/inspect/attributes/common.scss @@ -4,67 +4,67 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-image-as-color-row { - max-width: $s-240; + max-width: deprecated.$s-240; } .attributes-color-row { display: grid; - grid-template-columns: $s-16 $s-72 $s-144; - gap: $s-4; + grid-template-columns: deprecated.$s-16 deprecated.$s-72 deprecated.$s-144; + gap: deprecated.$s-4; } .bullet-wrapper { - @include flexCenter; - height: $s-32; + @include deprecated.flexCenter; + height: deprecated.$s-32; } .format-wrapper { - width: $s-72; - height: $s-32; + width: deprecated.$s-72; + height: deprecated.$s-32; } .image-format { - @include uppercaseTitleTipography; - height: $s-32; - padding: $s-8 0; + @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; + padding: deprecated.$s-8 0; color: var(--menu-foreground-color-rest); } .select-format-wrapper { width: 100%; - padding: $s-8 $s-2; + padding: deprecated.$s-8 deprecated.$s-2; background-color: transparent; border-color: transparent; color: var(--menu-foreground-color-rest); } .format-info { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; align-items: center; width: 100%; height: 100%; - padding-left: $s-2; - font-size: $fs-12; + padding-left: deprecated.$s-2; + font-size: deprecated.$fs-12; color: var(--menu-foreground-color-rest); } .color-row-copy-btn { - max-width: $s-144; + max-width: deprecated.$s-144; } .color-info { display: flex; align-items: flex-start; - gap: $s-4; + gap: deprecated.$s-4; flex-grow: 1; - max-width: $s-144; + max-width: deprecated.$s-144; button { visibility: hidden; - min-width: $s-28; + min-width: deprecated.$s-28; } &:hover button { visibility: visible; @@ -72,32 +72,32 @@ } .one-line { - max-height: $s-32; + max-height: deprecated.$s-32; } .two-line { display: grid; grid-template-rows: auto 1fr; - gap: $s-4; + gap: deprecated.$s-4; } .color-name-wrapper { - @include bodySmallTypography; - @include flexColumn; - padding: $s-8 $s-4 $s-8 $s-8; - height: $s-32; - max-width: $s-80; + @include deprecated.bodySmallTypography; + @include deprecated.flexColumn; + padding: deprecated.$s-8 deprecated.$s-4 deprecated.$s-8 deprecated.$s-8; + height: deprecated.$s-32; + max-width: deprecated.$s-80; } .opacity-info { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--menu-foreground-color); - padding: $s-8 0; + padding: deprecated.$s-8 0; } .first-row { display: grid; - grid-template-columns: 1fr $s-28; + grid-template-columns: 1fr deprecated.$s-28; height: fit-content; width: 100%; padding: 0; @@ -107,14 +107,14 @@ .name-opacity { height: fit-content; width: 100%; - line-height: $s-16; + line-height: deprecated.$s-16; display: grid; grid-template-columns: 1fr auto; } .color-value-wrapper { - @include textEllipsis; - @include inspectValue; + @include deprecated.textEllipsis; + @include deprecated.inspectValue; text-transform: uppercase; &.gradient-name { text-transform: none; @@ -122,14 +122,14 @@ } .opacity-info { - @include inspectValue; + @include deprecated.inspectValue; text-transform: uppercase; width: 100%; } .second-row { - min-height: $s-16; - padding-right: $s-8; + min-height: deprecated.$s-16; + padding-right: deprecated.$s-8; width: 100%; text-align: left; margin: 0; @@ -137,7 +137,7 @@ } .color-name-library { - @include inspectValue; + @include deprecated.inspectValue; color: var(--menu-foreground-color-rest); word-break: break-word; } @@ -148,22 +148,22 @@ .download-button { @extend .button-secondary; - @include uppercaseTitleTipography; - height: $s-32; + @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; width: 100%; - margin-top: $s-4; + margin-top: deprecated.$s-4; } .image-wrapper { background-color: var(--menu-background-color); position: relative; - @include flexCenter; - width: $s-240; - height: $s-160; - max-height: $s-160; - max-width: $s-248; - margin: $s-8 0; - border-radius: $br-8; + @include deprecated.flexCenter; + width: deprecated.$s-240; + height: deprecated.$s-160; + max-height: deprecated.$s-160; + max-width: deprecated.$s-248; + margin: deprecated.$s-8 0; + border-radius: deprecated.$br-8; img { height: 100%; diff --git a/frontend/src/app/main/ui/inspect/attributes/fill.scss b/frontend/src/app/main/ui/inspect/attributes/fill.scss index 2ccf774305..c55c401b98 100644 --- a/frontend/src/app/main/ui/inspect/attributes/fill.scss +++ b/frontend/src/app/main/ui/inspect/attributes/fill.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-fill { @@ -16,5 +16,5 @@ .attributes-content { display: grid; - gap: $s-4; + gap: deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/inspect/attributes/geometry.scss b/frontend/src/app/main/ui/inspect/attributes/geometry.scss index c9b8594e06..dd002ce5e6 100644 --- a/frontend/src/app/main/ui/inspect/attributes/geometry.scss +++ b/frontend/src/app/main/ui/inspect/attributes/geometry.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-geometry { @@ -23,5 +23,5 @@ } .copy-btn-title { - max-width: $s-28; + max-width: deprecated.$s-28; } diff --git a/frontend/src/app/main/ui/inspect/attributes/layout.scss b/frontend/src/app/main/ui/inspect/attributes/layout.scss index 25a7ea8a8c..0eb1b64168 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout.scss +++ b/frontend/src/app/main/ui/inspect/attributes/layout.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-layout { @@ -23,5 +23,5 @@ } .copy-btn-title { - max-width: $s-28; + max-width: deprecated.$s-28; } diff --git a/frontend/src/app/main/ui/inspect/attributes/layout_element.scss b/frontend/src/app/main/ui/inspect/attributes/layout_element.scss index dc62771306..7f32cca1a1 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout_element.scss +++ b/frontend/src/app/main/ui/inspect/attributes/layout_element.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-layout-element { @@ -23,5 +23,5 @@ } .copy-btn-title { - max-width: $s-28; + max-width: deprecated.$s-28; } diff --git a/frontend/src/app/main/ui/inspect/attributes/shadow.scss b/frontend/src/app/main/ui/inspect/attributes/shadow.scss index 5a45188c88..106cb03bca 100644 --- a/frontend/src/app/main/ui/inspect/attributes/shadow.scss +++ b/frontend/src/app/main/ui/inspect/attributes/shadow.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-shadow { diff --git a/frontend/src/app/main/ui/inspect/attributes/stroke.scss b/frontend/src/app/main/ui/inspect/attributes/stroke.scss index 47e9d3bd9f..a83ad6cfea 100644 --- a/frontend/src/app/main/ui/inspect/attributes/stroke.scss +++ b/frontend/src/app/main/ui/inspect/attributes/stroke.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-stroke { @@ -15,7 +15,7 @@ } .attributes-stroke-block { - @include flexColumn; + @include deprecated.flexColumn; } .stroke-row { @@ -28,5 +28,5 @@ .attributes-content { display: grid; - gap: $s-4; + gap: deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/inspect/attributes/svg.scss b/frontend/src/app/main/ui/inspect/attributes/svg.scss index b5326f628e..41846547dc 100644 --- a/frontend/src/app/main/ui/inspect/attributes/svg.scss +++ b/frontend/src/app/main/ui/inspect/attributes/svg.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-svg { @@ -23,12 +23,12 @@ } .attributes-subtitle { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; justify-content: space-between; - height: $s-32; + height: deprecated.$s-32; span { - height: $s-32; + height: deprecated.$s-32; display: flex; align-items: center; } diff --git a/frontend/src/app/main/ui/inspect/attributes/text.scss b/frontend/src/app/main/ui/inspect/attributes/text.scss index b6ed44c00e..54bc1e8095 100644 --- a/frontend/src/app/main/ui/inspect/attributes/text.scss +++ b/frontend/src/app/main/ui/inspect/attributes/text.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-text { @@ -15,13 +15,13 @@ } .attributes-content { - @include flexColumn; + @include deprecated.flexColumn; } .text-row { @extend .attr-row; height: unset; - min-height: $s-32; + min-height: deprecated.$s-32; :global(.attr-value) { align-items: center; } @@ -32,20 +32,20 @@ } .attributes-content-row { - max-width: $s-240; - min-height: calc($s-2 + $s-32); - border-radius: $br-8; - border: $s-1 solid var(--menu-border-color-disabled); - margin-top: $s-4; + max-width: deprecated.$s-240; + min-height: calc(deprecated.$s-2 + deprecated.$s-32); + border-radius: deprecated.$br-8; + border: deprecated.$s-1 solid var(--menu-border-color-disabled); + margin-top: deprecated.$s-4; .content { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; width: 100%; - padding: $s-4 0; + padding: deprecated.$s-4 0; color: var(--color-foreground-secondary); } &:hover { - border: $s-1 solid var(--color-background-tertiary); + border: deprecated.$s-1 solid var(--color-background-tertiary); background-color: var(--menu-background-color); .content { color: var(--menu-foreground-color-hover); diff --git a/frontend/src/app/main/ui/inspect/attributes/variant.scss b/frontend/src/app/main/ui/inspect/attributes/variant.scss index 1c8b3cfca5..7478fae373 100644 --- a/frontend/src/app/main/ui/inspect/attributes/variant.scss +++ b/frontend/src/app/main/ui/inspect/attributes/variant.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-variant { diff --git a/frontend/src/app/main/ui/inspect/attributes/visibility.scss b/frontend/src/app/main/ui/inspect/attributes/visibility.scss index 086b53bf2e..d76c906b18 100644 --- a/frontend/src/app/main/ui/inspect/attributes/visibility.scss +++ b/frontend/src/app/main/ui/inspect/attributes/visibility.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .attributes-block { - @include flexColumn; + @include deprecated.flexColumn; } .title-spacing-visibility { @@ -23,5 +23,5 @@ } .copy-btn-title { - max-width: $s-28; + max-width: deprecated.$s-28; } diff --git a/frontend/src/app/main/ui/inspect/code.scss b/frontend/src/app/main/ui/inspect/code.scss index 7ef5c4ac22..c0fa8bab75 100644 --- a/frontend/src/app/main/ui/inspect/code.scss +++ b/frontend/src/app/main/ui/inspect/code.scss @@ -4,42 +4,42 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-options { display: flex; flex-direction: column; - height: calc(100vh - #{$s-160}); // TODO: Fix this hardcoded value + height: calc(100vh - #{deprecated.$s-160}); // TODO: Fix this hardcoded value overflow: hidden; - padding-bottom: $s-16; + padding-bottom: deprecated.$s-16; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; } .viewer-code-block { - height: calc(100vh - #{$s-108}); // TODO: Fix this hardcoded value + height: calc(100vh - #{deprecated.$s-108}); // TODO: Fix this hardcoded value } .download-button { @extend .button-secondary; - @include uppercaseTitleTipography; - height: $s-32; + @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; width: 100%; - margin: $s-8 0; + margin: deprecated.$s-8 0; } .code-block { - @include codeTypography; + @include deprecated.codeTypography; display: flex; flex-direction: column; height: 100%; min-height: 0; - padding: 0 $s-4 $s-8 0; + padding: 0 deprecated.$s-4 deprecated.$s-8 0; pre { - border-radius: $br-8; - padding: $s-16; + border-radius: deprecated.$br-8; + padding: deprecated.$s-16; overflow: auto; height: 100%; } @@ -56,13 +56,13 @@ .code-row-lang { display: grid; - grid-template-columns: $s-12 1fr $s-60; - gap: $s-4; + grid-template-columns: deprecated.$s-12 1fr deprecated.$s-60; + gap: deprecated.$s-4; width: 100%; } .code-lang { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; align-items: center; } @@ -70,15 +70,15 @@ .action-btns { display: grid; grid-template-columns: 1fr 1fr; - gap: $s-4; + gap: deprecated.$s-4; } .expand-button, .css-copy-btn, .html-copy-btn { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -86,20 +86,20 @@ } .code-lang-options { - max-width: $s-108; + max-width: deprecated.$s-108; } .code-lang-select { - @include uppercaseTitleTipography; - width: $s-72; - border: $s-1 solid transparent; + @include deprecated.uppercaseTitleTipography; + width: deprecated.$s-72; + border: deprecated.$s-1 solid transparent; background-color: transparent; color: var(--menu-foreground-color-disabled); } .code-lang-option { - @include uppercaseTitleTipography; - width: $s-72; - height: $s-32; - padding: $s-8; + @include deprecated.uppercaseTitleTipography; + width: deprecated.$s-72; + height: deprecated.$s-32; + padding: deprecated.$s-8; color: var(--menu-foreground-color-disabled); } @@ -107,20 +107,20 @@ flex: 1; min-height: 0; overflow: hidden; - padding-bottom: $s-8; + padding-bottom: deprecated.$s-8; } .toggle-btn { - @include buttonStyle; + @include deprecated.buttonStyle; display: flex; align-items: center; padding: 0; color: var(--title-foreground-color); stroke: var(--title-foreground-color); .collapsabled-icon { - @include flexCenter; - height: $s-24; - border-radius: $br-8; + @include deprecated.flexCenter; + height: deprecated.$s-24; + border-radius: deprecated.$br-8; svg { @extend .button-icon-small; transform: rotate(90deg); diff --git a/frontend/src/app/main/ui/inspect/exports.scss b/frontend/src/app/main/ui/inspect/exports.scss index 9c767cc7d6..4ca98720a8 100644 --- a/frontend/src/app/main/ui/inspect/exports.scss +++ b/frontend/src/app/main/ui/inspect/exports.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { - padding-bottom: $s-16; + padding-bottom: deprecated.$s-16; margin: 0; } @@ -18,14 +18,14 @@ .title-spacing-export-viewer { margin: 0; color: var(--entry-foreground-color-hover); - margin-inline-start: calc(-1 * $s-8); - width: calc(100% + $s-8); + margin-inline-start: calc(-1 * deprecated.$s-8); + width: calc(100% + deprecated.$s-8); } .add-export { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -33,12 +33,12 @@ } .element-set-content { - @include flexColumn; - margin-bottom: $s-4; + @include deprecated.flexColumn; + margin-bottom: deprecated.$s-4; } .multiple-exports { - @include flexRow; + @include deprecated.flexRow; grid-column: 1 / span 9; } @@ -47,17 +47,17 @@ } .actions { - @include flexRow; + @include deprecated.flexRow; } .element-group { display: grid; grid-template-columns: repeat(9, 1fr); - column-gap: $s-4; + column-gap: deprecated.$s-4; .action-btn { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon; } @@ -75,8 +75,8 @@ padding: 0; .dropdown-upwards { - bottom: $s-36; - width: $s-80; + bottom: deprecated.$s-36; + width: deprecated.$s-80; top: unset; } } @@ -85,21 +85,21 @@ grid-column: span 2; padding: 0; .dropdown-upwards { - bottom: $s-36; + bottom: deprecated.$s-36; top: unset; - width: $s-80; + width: deprecated.$s-80; } } .suffix-input { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; grid-column: span 3; } .export-btn { @extend .button-secondary; - @include uppercaseTitleTipography; - height: $s-32; + @include deprecated.uppercaseTitleTipography; + 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 26cef04ba3..14f81f572c 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/inspect/right_sidebar.scss @@ -5,10 +5,10 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .settings-bar-right { - min-width: $s-252; + min-width: deprecated.$s-252; width: 100%; height: 100vh; position: relative; @@ -18,28 +18,28 @@ overflow: hidden; &.viewer-code { - height: calc(100vh - $s-48); + height: calc(100vh - deprecated.$s-48); } } .viewer-code { - padding-inline-start: $s-8; + padding-inline-start: deprecated.$s-8; } .tool-windows { height: 100%; display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; padding-left: var(--sp-m); } .shape-info { display: grid; grid-template-columns: auto minmax(0, 1fr); - gap: $s-8; + gap: deprecated.$s-8; align-items: center; - height: $s-32; + height: deprecated.$s-32; } .shape-info-subtitle { @@ -49,16 +49,16 @@ .layers-icon, .shape-icon { - @include flexCenter; - height: $s-32; + @include deprecated.flexCenter; + height: deprecated.$s-32; --icon-stroke-color: var(--color-foreground-primary); } .layer-title { - @include bodySmallTypography; - @include textEllipsis; - height: $s-32; - padding: $s-8 0; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; + height: deprecated.$s-32; + padding: deprecated.$s-8 0; color: var(--color-foreground-primary); } @@ -68,8 +68,8 @@ } .layer-subtitle { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; color: var(--assets-item-name-foreground-color-rest); } @@ -77,17 +77,17 @@ display: flex; flex-direction: column; align-items: center; - gap: $s-40; - padding-top: $s-24; + gap: deprecated.$s-40; + padding-top: deprecated.$s-24; } .code-info, .help-info { - @include flexColumn; + @include deprecated.flexColumn; align-items: center; justify-content: flex-start; - gap: $s-12; - margin-right: $s-8; + gap: deprecated.$s-12; + margin-right: deprecated.$s-8; } .placeholder-icon { @@ -95,17 +95,17 @@ } .placeholder-label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; text-align: center; - width: $s-200; + width: deprecated.$s-200; color: var(--empty-message-foreground-color); } .more-info-btn { @extend .button-secondary; - @include uppercaseTitleTipography; - height: $s-32; - padding: $s-8 $s-24; + @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; + padding: deprecated.$s-8 deprecated.$s-24; } .inspect-tab-switcher { diff --git a/frontend/src/app/main/ui/modal.scss b/frontend/src/app/main/ui/modal.scss index abfb094530..b78ff64bf4 100644 --- a/frontend/src/app/main/ui/modal.scss +++ b/frontend/src/app/main/ui/modal.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; :global(:root) { --s-4: 0.25rem; diff --git a/frontend/src/app/main/ui/notifications/badge.scss b/frontend/src/app/main/ui/notifications/badge.scss index cc15455b1e..bc88b69b59 100644 --- a/frontend/src/app/main/ui/notifications/badge.scss +++ b/frontend/src/app/main/ui/notifications/badge.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .badge-notification { - @include smallTitleTipography; + @include deprecated.smallTitleTipography; --badge-notification-bg-color: var(--alert-background-color-default); --badge-notification-fg-color: var(--alert-text-foreground-color-default); --badge-notification-border-color: var(--alert-border-color-default); @@ -15,22 +15,22 @@ display: grid; place-items: center; grid-template-columns: 1fr; - min-height: $s-32; + min-height: deprecated.$s-32; height: fit-content; - min-width: $s-80; + min-width: deprecated.$s-80; width: fit-content; padding: 0; margin: 0; - border: $s-1 solid var(--badge-notification-border-color); - border-radius: $br-8; + border: deprecated.$s-1 solid var(--badge-notification-border-color); + border-radius: deprecated.$br-8; background-color: var(--badge-notification-bg-color); color: var(--badge-notification-fg-color); } .small { - @include bodySmallTypography; - min-height: $s-20; - border-radius: $br-6; + @include deprecated.bodySmallTypography; + min-height: deprecated.$s-20; + border-radius: deprecated.$br-6; } .warning { diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss index 2b9f1820e6..1b14e33cea 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.scss +++ b/frontend/src/app/main/ui/notifications/context_notification.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .context-notification { --context-notification-bg-color: var(--alert-background-color-default); @@ -13,14 +13,14 @@ --context-notification-border-color: var(--alert-border-color-default); box-sizing: border-box; display: grid; - grid-template-columns: $s-16 1fr; - gap: $s-8; - min-height: $s-32; + grid-template-columns: deprecated.$s-16 1fr; + gap: deprecated.$s-8; + min-height: deprecated.$s-32; height: fit-content; width: 100%; - padding: $s-8; - border: $s-1 solid var(--context-notification-border-color); - border-radius: $br-8; + padding: deprecated.$s-8; + border: deprecated.$s-1 solid var(--context-notification-border-color); + border-radius: deprecated.$br-8; background-color: var(--context-notification-bg-color); } @@ -66,7 +66,7 @@ } .context-text { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; align-self: center; color: var(--context-notification-fg-color); margin: auto 0; @@ -78,11 +78,11 @@ .link, .contain-html .context-text a { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; align-self: center; display: inline; text-align: left; - height: $s-16; + height: deprecated.$s-16; margin: 0; color: var(--modal-link-foreground-color); } diff --git a/frontend/src/app/main/ui/notifications/inline_notification.scss b/frontend/src/app/main/ui/notifications/inline_notification.scss index 3d1e717ed5..ee71bc5c3d 100644 --- a/frontend/src/app/main/ui/notifications/inline_notification.scss +++ b/frontend/src/app/main/ui/notifications/inline_notification.scss @@ -4,19 +4,19 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .new-inline { position: absolute; - top: $s-72; + top: deprecated.$s-72; margin: auto; left: 0; right: 0; - min-height: $s-48; - min-width: $s-640; + min-height: deprecated.$s-48; + min-width: deprecated.$s-640; width: fit-content; - max-width: $s-960; - z-index: $z-index-modal; + max-width: deprecated.$s-960; + z-index: deprecated.$z-index-modal; } .link { diff --git a/frontend/src/app/main/ui/onboarding/newsletter.scss b/frontend/src/app/main/ui/onboarding/newsletter.scss index 191b2d80fd..34abf708bd 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.scss +++ b/frontend/src/app/main/ui/onboarding/newsletter.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -15,49 +15,49 @@ position: relative; display: grid; grid-template-columns: auto auto; - gap: $s-32; - padding-inline: $s-100; - padding-block-start: $s-100; - padding-block-end: $s-72; + gap: deprecated.$s-32; + padding-inline: deprecated.$s-100; + padding-block-start: deprecated.$s-100; + padding-block-end: deprecated.$s-72; margin: 0; - width: $s-960; - height: $s-632; - max-width: $s-960; - max-height: $s-632; + width: deprecated.$s-960; + height: deprecated.$s-632; + max-width: deprecated.$s-960; + max-height: deprecated.$s-632; } .modal-left { - width: $s-172; - margin-block-end: $s-64; + width: deprecated.$s-172; + margin-block-end: deprecated.$s-64; img { - width: $s-172; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-172; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } } .modal-right { display: grid; grid-template-columns: 1fr; - grid-template-rows: $s-40 auto auto auto auto $s-32; - gap: $s-24; + grid-template-rows: deprecated.$s-40 auto auto auto auto deprecated.$s-32; + gap: deprecated.$s-24; position: relative; } .modal-title { - @include bigTitleTipography; + @include deprecated.bigTitleTipography; color: var(--modal-title-foreground-color); } .modal-text { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } .newsletter-options { display: grid; - gap: $s-16; - margin-inline-start: $s-16; + gap: deprecated.$s-16; + margin-inline-start: deprecated.$s-16; } .input-wrapper { @@ -65,7 +65,7 @@ } .modal-link { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-link-foreground-color); margin: 0; } diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss index d387cc6af0..94444a493b 100644 --- a/frontend/src/app/main/ui/onboarding/questions.scss +++ b/frontend/src/app/main/ui/onboarding/questions.scss @@ -4,34 +4,34 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; } .modal-container { - max-width: $s-960; + max-width: deprecated.$s-960; max-height: fit-content; width: fit-content; - padding-inline: $s-100; - padding-block-start: $s-40; - padding-block-end: $s-72; - border-radius: $br-8; - border: $s-2 solid var(--modal-border-color); + padding-inline: deprecated.$s-100; + padding-block-start: deprecated.$s-40; + padding-block-end: deprecated.$s-72; + border-radius: deprecated.$br-8; + border: deprecated.$s-2 solid var(--modal-border-color); background-color: var(--modal-background-color); } .form-wrapper { display: grid; grid-template-columns: 1fr; - gap: $s-24; + gap: deprecated.$s-24; } // STEP CONTAINER .paginator { - @include smallTitleTipography; - height: $s-20; + @include deprecated.smallTitleTipography; + height: deprecated.$s-20; text-align: right; color: var(--modal-text-foreground-color); } @@ -49,33 +49,33 @@ .radio-btns label, .select-class span { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; } // STEP 1 .header-image { - height: $s-60; + height: deprecated.$s-60; width: auto; margin-inline-start: auto; } .modal-title { - @include bigTitleTipography; + @include deprecated.bigTitleTipography; color: var(--modal-title-foreground-color); - min-height: $s-32; + min-height: deprecated.$s-32; margin-block: auto; } .modal-subtitle { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); margin: 0; padding: 0; } .modal-text { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } @@ -85,60 +85,60 @@ .step-2, .step-3, .step-5 { - max-width: $s-540; - width: $s-540; + max-width: deprecated.$s-540; + width: deprecated.$s-540; } .step-2 { - grid-template-rows: $s-20 auto auto $s-32; + grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32; } .modal-question { display: grid; grid-template-columns: 1fr; - grid-template-rows: $s-16 $s-32; - gap: $s-16; + grid-template-rows: deprecated.$s-16 deprecated.$s-32; + gap: deprecated.$s-16; height: fit-content; } .question-centered { - width: $s-424; - grid-template-rows: auto $s-32; + width: deprecated.$s-424; + grid-template-rows: auto deprecated.$s-32; margin: 0 auto; } .radio-wrapper { display: grid; grid-template-columns: 1fr; - gap: $s-16; + gap: deprecated.$s-16; } // STEP-3 .step-3 { - grid-template-rows: $s-20 auto auto auto auto $s-32; + grid-template-rows: deprecated.$s-20 auto auto auto auto deprecated.$s-32; } .image-radio { display: grid; grid-template-rows: 1fr 1fr; - grid-template-columns: $s-92 $s-92 $s-92; - row-gap: $s-16; - column-gap: $s-24; + grid-template-columns: deprecated.$s-92 deprecated.$s-92 deprecated.$s-92; + row-gap: deprecated.$s-16; + column-gap: deprecated.$s-24; justify-content: center; } .input-spacing { - height: $s-32; + height: deprecated.$s-32; width: 100%; - margin-block-end: $s-8; + margin-block-end: deprecated.$s-8; } .input-spacing input { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; } // STEP-4 .step-4 { - grid-template-rows: $s-20 auto auto $s-32; - row-gap: $s-16; + grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32; + row-gap: deprecated.$s-16; } diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss index 5bc976e1ba..465ed6152a 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.scss +++ b/frontend/src/app/main/ui/onboarding/team_choice.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,35 +12,35 @@ .modal-container { position: relative; - width: $s-908; - max-height: $s-800; + width: deprecated.$s-908; + max-height: deprecated.$s-800; height: 100%; - padding-inline: $s-100; - padding-block-start: $s-40; - padding-block-end: $s-40; - border-radius: $br-8; + padding-inline: deprecated.$s-100; + padding-block-start: deprecated.$s-40; + padding-block-end: deprecated.$s-40; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); display: flex; flex-direction: column; - gap: $s-24; + gap: deprecated.$s-24; } .modal-sections { display: grid; - grid-template-columns: 1fr $s-32 1fr; - gap: $s-24; + grid-template-columns: 1fr deprecated.$s-32 1fr; + gap: deprecated.$s-24; height: 100%; overflow: hidden; } .paginator { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; position: absolute; - top: $s-40; - right: $s-100; - padding: $s-4; - border-radius: $br-6; + top: deprecated.$s-40; + right: deprecated.$s-100; + padding: deprecated.$s-4; + border-radius: deprecated.$br-6; color: var(--color-foreground-secondary); } @@ -48,54 +48,54 @@ .modal-left { display: grid; grid-template-columns: 1fr; - grid-template-rows: $s-32 auto auto 1fr; - gap: $s-16; + grid-template-rows: deprecated.$s-32 auto auto 1fr; + gap: deprecated.$s-16; overflow: auto; } .modal-title { - @include bigTitleTipography; + @include deprecated.bigTitleTipography; color: var(--modal-title-foreground-color); } .modal-subtitle { - @include medTitleTipography; + @include deprecated.medTitleTipography; color: var(--modal-title-foreground-color); } .invite-subtitle { - padding-top: $s-16; + padding-top: deprecated.$s-16; } .modal-text { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } .modal-desc { - @include smallTitleTipography; + @include deprecated.smallTitleTipography; margin: 0; color: var(--modal-title-foreground-color); } .team-features { - @include flexColumn; - gap: $s-16; + @include deprecated.flexColumn; + gap: deprecated.$s-16; margin: 0; } .feature { - @include flexRow; - gap: $s-16; + @include deprecated.flexRow; + gap: deprecated.$s-16; } .icon { - @include flexCenter; - height: $s-32; - width: $s-32; - border-radius: $br-circle; - border: $s-1 solid var(--color-accent-primary); + @include deprecated.flexCenter; + height: deprecated.$s-32; + width: deprecated.$s-32; + border-radius: deprecated.$br-circle; + border: deprecated.$s-1 solid var(--color-accent-primary); svg { @extend .button-icon; stroke: var(--color-accent-primary); @@ -117,9 +117,9 @@ // SEPARATOR .separator { - width: $s-8; + width: deprecated.$s-8; height: 100%; - border-radius: $br-8; + border-radius: deprecated.$br-8; opacity: 42%; background-color: var(--modal-separator-backogrund-color); } @@ -129,7 +129,7 @@ display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; - gap: $s-24; + gap: deprecated.$s-24; overflow: hidden; } @@ -140,21 +140,21 @@ .first-block, .second-block { - @include flexColumn; - gap: $s-16; + @include deprecated.flexColumn; + gap: deprecated.$s-16; } .modal-form { display: grid; grid-template-columns: 1fr; - gap: $s-16; + gap: deprecated.$s-16; } .team-name-input { @extend .input-element-label; label { - @include flexColumn; - @include bodySmallTypography; + @include deprecated.flexColumn; + @include deprecated.bodySmallTypography; align-items: flex-start; width: 100%; border: none; @@ -162,8 +162,8 @@ height: 100%; input { - @include bodySmallTypography; - margin-top: $s-8; + @include deprecated.bodySmallTypography; + margin-top: deprecated.$s-8; } } } @@ -174,21 +174,21 @@ display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; - gap: $s-16; - max-height: $s-512; + gap: deprecated.$s-16; + max-height: deprecated.$s-512; } .modal-form-invitations { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; - margin-block-end: $s-72; - gap: $s-8; + margin-block-end: deprecated.$s-72; + gap: deprecated.$s-8; } .role-title { - @include uppercaseTitleTipography; - margin-block-end: $s-8; + @include deprecated.uppercaseTitleTipography; + margin-block-end: deprecated.$s-8; color: var(--modal-title-foreground-color); } @@ -198,7 +198,7 @@ } .modal-hint { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--modal-text-foreground-color); text-align: right; } diff --git a/frontend/src/app/main/ui/releases/common.scss b/frontend/src/app/main/ui/releases/common.scss index f0a4c2e916..977411aec5 100644 --- a/frontend/src/app/main/ui/releases/common.scss +++ b/frontend/src/app/main/ui/releases/common.scss @@ -4,13 +4,13 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .step-dots { display: grid; grid-template-columns: none; grid-auto-flow: column; - gap: $s-8; + gap: deprecated.$s-8; height: fit-content; width: fit-content; margin: 0; @@ -20,9 +20,9 @@ } .dot { - height: $s-12; - width: $s-12; - border-radius: $br-circle; + height: deprecated.$s-12; + width: deprecated.$s-12; + border-radius: deprecated.$br-circle; background-color: var(--modal-navigator-foreground-color-rest); cursor: pointer; } diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss index 2cbb1a4dab..0d5bc38d2e 100644 --- a/frontend/src/app/main/ui/releases/v2_0.scss +++ b/frontend/src/app/main/ui/releases/v2_0.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,76 +12,76 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; } .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -92,7 +92,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_1.scss b/frontend/src/app/main/ui/releases/v2_1.scss index c3b518bf0d..7b2559bc96 100644 --- a/frontend/src/app/main/ui/releases/v2_1.scss +++ b/frontend/src/app/main/ui/releases/v2_1.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,55 +12,55 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; } .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } @@ -73,7 +73,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_10.scss b/frontend/src/app/main/ui/releases/v2_10.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_10.scss +++ b/frontend/src/app/main/ui/releases/v2_10.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_2.scss b/frontend/src/app/main/ui/releases/v2_2.scss index 651e112642..34d030466f 100644 --- a/frontend/src/app/main/ui/releases/v2_2.scss +++ b/frontend/src/app/main/ui/releases/v2_2.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,55 +12,55 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-480; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-480; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; } .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } @@ -73,7 +73,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_3.scss b/frontend/src/app/main/ui/releases/v2_3.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_3.scss +++ b/frontend/src/app/main/ui/releases/v2_3.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_4.scss b/frontend/src/app/main/ui/releases/v2_4.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_4.scss +++ b/frontend/src/app/main/ui/releases/v2_4.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_5.scss b/frontend/src/app/main/ui/releases/v2_5.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_5.scss +++ b/frontend/src/app/main/ui/releases/v2_5.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_6.scss b/frontend/src/app/main/ui/releases/v2_6.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_6.scss +++ b/frontend/src/app/main/ui/releases/v2_6.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_7.scss b/frontend/src/app/main/ui/releases/v2_7.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_7.scss +++ b/frontend/src/app/main/ui/releases/v2_7.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_8.scss b/frontend/src/app/main/ui/releases/v2_8.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_8.scss +++ b/frontend/src/app/main/ui/releases/v2_8.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/releases/v2_9.scss b/frontend/src/app/main/ui/releases/v2_9.scss index 64eeb886bc..e5d13841eb 100644 --- a/frontend/src/app/main/ui/releases/v2_9.scss +++ b/frontend/src/app/main/ui/releases/v2_9.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,24 +12,24 @@ .modal-container { display: grid; - grid-template-columns: $s-324 1fr; - height: $s-500; - width: $s-888; - border-radius: $br-8; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; background-color: var(--modal-background-color); - border: $s-2 solid var(--modal-border-color); + border: deprecated.$s-2 solid var(--modal-border-color); } .start-image { - width: $s-324; - border-radius: $br-8 0 0 $br-8; + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; } .modal-content { - padding: $s-40; + padding: deprecated.$s-40; display: grid; - grid-template-rows: auto 1fr $s-32; - gap: $s-24; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; a { color: var(--button-primary-background-color-rest); @@ -38,54 +38,54 @@ .modal-header { display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .version-tag { - @include flexCenter; - @include headlineSmallTypography; - height: $s-32; - width: $s-96; + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; background-color: var(--communication-tag-background-color); color: var(--communication-tag-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .modal-title { - @include headlineLargeTypography; + @include deprecated.headlineLargeTypography; color: var(--modal-title-foreground-color); } .features-block { display: flex; flex-direction: column; - gap: $s-16; - width: $s-440; + gap: deprecated.$s-16; + width: deprecated.$s-440; } .feature { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .feature-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; color: var(--modal-title-foreground-color); } .feature-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; margin: 0; color: var(--modal-text-foreground-color); } .feature-list { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--modal-text-foreground-color); list-style: disc; display: grid; - gap: $s-8; + gap: deprecated.$s-8; } .navigation { @@ -96,7 +96,7 @@ .next-btn { @extend .button-primary; - width: $s-100; + width: deprecated.$s-100; justify-self: flex-end; grid-area: button; } diff --git a/frontend/src/app/main/ui/settings/change_email.scss b/frontend/src/app/main/ui/settings/change_email.scss index 565d1f1bea..71900cf9e4 100644 --- a/frontend/src/app/main/ui/settings/change_email.scss +++ b/frontend/src/app/main/ui/settings/change_email.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,15 +12,15 @@ .modal-container { @extend .modal-container-base; - min-width: $s-408; + min-width: deprecated.$s-408; } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -29,18 +29,18 @@ } .modal-content { - @include flexColumn; - @include bodySmallTypography; - gap: $s-24; - margin-bottom: $s-24; + @include deprecated.flexColumn; + @include deprecated.bodySmallTypography; + gap: deprecated.$s-24; + margin-bottom: deprecated.$s-24; } .fields-row { - @include flexColumn; + @include deprecated.flexColumn; } .select-title { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; 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 bcd9a88f07..c69d17de53 100644 --- a/frontend/src/app/main/ui/settings/delete_account.scss +++ b/frontend/src/app/main/ui/settings/delete_account.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,15 +12,15 @@ .modal-container { @extend .modal-container-base; - min-width: $s-408; + min-width: deprecated.$s-408; } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -29,18 +29,18 @@ } .modal-content { - @include flexColumn; - @include bodySmallTypography; - gap: $s-24; - margin-bottom: $s-24; + @include deprecated.flexColumn; + @include deprecated.bodySmallTypography; + gap: deprecated.$s-24; + margin-bottom: deprecated.$s-24; } .fields-row { - @include flexColumn; + @include deprecated.flexColumn; } .select-title { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss index dd0faf2118..f107742588 100644 --- a/frontend/src/app/main/ui/viewer/login.scss +++ b/frontend/src/app/main/ui/viewer/login.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,15 +12,15 @@ .modal-container { @extend .modal-container-base; - width: $s-368; + width: deprecated.$s-368; } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -29,10 +29,10 @@ } .modal-content { - @include flexColumn; - @include bodySmallTypography; - gap: $s-24; - max-height: $s-400; + @include deprecated.flexColumn; + @include deprecated.bodySmallTypography; + gap: deprecated.$s-24; + max-height: deprecated.$s-400; overflow: hidden auto; form { @@ -56,19 +56,19 @@ .link-entry { display: flex; flex-direction: column; - gap: $s-12; + gap: deprecated.$s-12; span { text-align: center; - font-size: $fs-14; + font-size: deprecated.$fs-14; color: var(--modal-text-foreground-color); - margin-top: $s-12; + margin-top: deprecated.$s-12; } a { @extend .button-secondary; - height: $s-40; + height: deprecated.$s-40; text-transform: uppercase; - font-size: $fs-11; + font-size: deprecated.$fs-11; } } diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss index c8d690dc37..2c8bcc60b1 100644 --- a/frontend/src/app/main/ui/viewer/share_link.scss +++ b/frontend/src/app/main/ui/viewer/share_link.scss @@ -4,15 +4,15 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .share-modal { display: block; position: absolute; - top: $s-52; - right: $s-12; - left: calc(100vw - $s-512); - z-index: $z-index-modal; + top: deprecated.$s-52; + right: deprecated.$s-12; + left: calc(100vw - deprecated.$s-512); + z-index: deprecated.$z-index-modal; } .share-link-dialog { @@ -21,11 +21,11 @@ } .share-link-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .share-link-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -34,18 +34,18 @@ } .modal-content { - @include bodySmallTypography; - @include flexColumn; - gap: $s-24; + @include deprecated.bodySmallTypography; + @include deprecated.flexColumn; + gap: deprecated.$s-24; } .share-link-section { - @include flexColumn; - gap: $s-8; + @include deprecated.flexColumn; + gap: deprecated.$s-8; } .hint-wrapper { - @include flexRow; + @include deprecated.flexRow; } .hint { @@ -54,32 +54,32 @@ } .custon-input-wrapper { - @include flexRow; - border-radius: $br-8; - height: $s-32; + @include deprecated.flexRow; + border-radius: deprecated.$br-8; + height: deprecated.$s-32; width: 100%; background-color: var(--input-background-color); } .input-text { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--input-foreground-color-active); - padding-left: $s-8; + padding-left: deprecated.$s-8; margin: 0; flex-grow: 1; &:focus { outline: none; - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); } } .copy-button { @extend .button-secondary; - @include flexRow; - gap: $s-8; - height: $s-32; - width: $s-28; + @include deprecated.flexRow; + gap: deprecated.$s-8; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon; stroke: var(--icon-foreground-hover); @@ -87,13 +87,13 @@ } .description { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--modal-text-foreground-color); - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .actions { - @include flexRow; + @include deprecated.flexRow; justify-content: flex-end; } @@ -110,23 +110,23 @@ } .permissions-section { - @include flexColumn; - gap: $s-8; + @include deprecated.flexColumn; + gap: deprecated.$s-8; } .manage-permissions { - @include buttonStyle; - @include uppercaseTitleTipography; + @include deprecated.buttonStyle; + @include deprecated.uppercaseTitleTipography; color: var(--menu-foreground-color-rest); - height: $s-32; + height: deprecated.$s-32; display: flex; align-items: center; padding: 0; } .icon { - @include flexCenter; - margin-right: $s-6; + @include deprecated.flexCenter; + margin-right: deprecated.$s-6; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -144,7 +144,7 @@ } .view-mode { - max-height: $s-216; + max-height: deprecated.$s-216; overflow: hidden auto; scrollbar-gutter: stable; } @@ -154,8 +154,8 @@ display: flex; align-items: center; justify-content: flex-start; - width: $s-136; - height: $s-32; + width: deprecated.$s-136; + height: deprecated.$s-32; } .items { @@ -163,10 +163,10 @@ color: var(--input-foreground-color-active); } .select-all-row { - @include flexRow; + @include deprecated.flexRow; justify-content: space-between; - height: $s-32; - border-bottom: $s-1 solid var(--input-border-color-disabled); + height: deprecated.$s-32; + border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled); } .select-all-label { color: var(--input-foreground-color-active); @@ -174,7 +174,7 @@ .pages-selection { margin: 0; li { - border-bottom: $s-1 solid var(--input-border-color-disabled); + border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled); } li:last-child { border-bottom: none; @@ -182,17 +182,17 @@ } .count-pages, .current-tag { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--input-foreground-color); } .checkbox-wrapper { @extend .input-checkbox; - height: $s-32; + height: deprecated.$s-32; padding: 0; span.checked { background-color: var(--input-checkbox-background-color-active); - border: $s-1 solid var(--input-checkbox-background-color-active); + border: deprecated.$s-1 solid var(--input-checkbox-background-color-active); svg { @extend .button-icon-small; stroke: var(--input-checkbox-foreground-color-active); diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index 93edc8d843..d6c21429dd 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .workspace { @extend .new-scrollbar; @@ -33,18 +33,18 @@ .history-debug-overlay { bottom: 0; - max-height: $s-500; - width: $s-500; + max-height: deprecated.$s-500; + width: deprecated.$s-500; overflow-y: auto; position: absolute; - z-index: $z-index-modal; + z-index: deprecated.$z-index-modal; } .workspace-viewport { overflow: hidden; transition: none; display: grid; - grid-template-rows: $s-20 1fr; - grid-template-columns: $s-20 1fr; + grid-template-rows: deprecated.$s-20 1fr; + grid-template-columns: deprecated.$s-20 1fr; flex: 1; } diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index 34f6ffea6f..7a4cb7c09b 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .color-palette { height: 100%; @@ -13,13 +13,13 @@ .left-arrow, .right-arrow { - @include buttonStyle; - @include flexCenter; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; position: relative; height: 100%; - width: $s-24; + width: deprecated.$s-24; padding: 0; - z-index: $z-index-5; + z-index: deprecated.$z-index-5; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -27,11 +27,11 @@ &::after { content: ""; position: absolute; - z-index: $z-index-1; + z-index: deprecated.$z-index-1; bottom: 0; - left: calc(-1 * $s-80); + left: calc(-1 * deprecated.$s-80); height: 100%; - width: $s-80; + width: deprecated.$s-80; background-image: linear-gradient( to left, var(--palette-button-shadow-initial) 0%, @@ -55,7 +55,7 @@ } .left-arrow { &::after { - left: $s-24; + left: deprecated.$s-24; background-image: linear-gradient( to right, var(--palette-button-shadow-initial) 0%, @@ -82,7 +82,7 @@ display: grid; grid-auto-flow: column; grid-auto-columns: var(--color-cell-width); - gap: $s-8; + gap: deprecated.$s-8; } .color-cell { @@ -98,12 +98,12 @@ height: 100%; &.no-text { - @include flexCenter; - width: $s-32; + @include deprecated.flexCenter; + width: deprecated.$s-32; } } .color-palette-empty { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; 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 d6a23e7bb0..a3703f8588 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 @@ -4,17 +4,17 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .palette-menu { position: absolute; left: auto; bottom: var(--height); - max-width: $s-480; - padding: $s-4; - margin: 0 0 $s-4 0; - z-index: $z-index-4; - border-radius: $br-10; + max-width: deprecated.$s-480; + padding: deprecated.$s-4; + margin: 0 0 deprecated.$s-4 0; + z-index: deprecated.$z-index-4; + border-radius: deprecated.$br-10; background-color: var(--context-menu-background-color); .palette-library, @@ -24,36 +24,36 @@ display: flex; align-items: flex-start; width: 100%; - padding: $s-8; - border-radius: $br-8; - margin-bottom: $s-4; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; + margin-bottom: deprecated.$s-4; &:last-child { margin-bottom: 0; } .option-wrapper { width: 100%; .library-name { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--context-menu-foreground-color); display: grid; - grid-template-columns: 1fr $s-24; + grid-template-columns: 1fr deprecated.$s-24; .lib-name-wrapper { display: flex; - max-width: $s-400; + max-width: deprecated.$s-400; .lib-name { - @include textEllipsis; - max-width: $s-380; + @include deprecated.textEllipsis; + max-width: deprecated.$s-380; } .lib-num { - margin-left: $s-4; + margin-left: deprecated.$s-4; } } .icon-wrapper { - margin-left: $s-4; - @include flexCenter; + margin-left: deprecated.$s-4; + @include deprecated.flexCenter; svg { @extend .button-icon-small; - @include flexCenter; + @include deprecated.flexCenter; stroke: var(--icon-foreground); } } @@ -61,8 +61,8 @@ .color-sample { display: flex; flex-direction: row; - gap: $s-8; - margin-top: $s-4; + gap: deprecated.$s-8; + margin-top: deprecated.$s-4; } } @@ -71,9 +71,9 @@ .option-wrapper .library-name { color: var(--context-menu-foreground-color-selected); .icon-wrapper { - @include flexCenter; + @include deprecated.flexCenter; svg { - @include flexCenter; + @include deprecated.flexCenter; @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 22c71fa42d..6d653f34e3 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss @@ -4,36 +4,36 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .color-values { - @include flexColumn; - margin-top: $s-8; + @include deprecated.flexColumn; + margin-top: deprecated.$s-8; &.disable-opacity { grid-template-columns: 3.5rem repeat(3, 1fr); } .colors-row { - @include flexRow; + @include deprecated.flexRow; .input-wrapper { @extend .input-element; - @include bodySmallTypography; - width: $s-84; + @include deprecated.bodySmallTypography; + width: deprecated.$s-84; display: flex; align-items: baseline; } } .hex-alpha-wrapper { - @include flexRow; + @include deprecated.flexRow; .input-wrapper { @extend .input-element; - @include bodySmallTypography; - width: $s-84; + @include deprecated.bodySmallTypography; + width: deprecated.$s-84; &.hex { - width: $s-172; + width: deprecated.$s-172; display: flex; align-items: baseline; - gap: $s-8; + gap: deprecated.$s-8; } } } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss index 5a43b9c8ac..d9e5b75633 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss @@ -4,13 +4,13 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .gradient-panel { - margin-top: $s-12; + margin-top: deprecated.$s-12; display: grid; - gap: $s-4; - grid-template-rows: $s-56 $s-32 1fr; + gap: deprecated.$s-4; + grid-template-rows: deprecated.$s-56 deprecated.$s-32 1fr; } .gradient-preview { @@ -24,18 +24,18 @@ .gradient-background { width: 100%; - height: $s-20; - border-radius: $br-4; + height: deprecated.$s-20; + border-radius: deprecated.$br-4; position: relative; cursor: pointer; } .gradient-preview-stop-wrapper { position: absolute; - width: calc(100% - $s-24 - $s-4); + width: calc(100% - deprecated.$s-24 - deprecated.$s-4); height: 100%; - left: $s-2; - top: calc(-1 * $s-4); + left: deprecated.$s-2; + top: calc(-1 * deprecated.$s-4); pointer-events: none; } @@ -43,31 +43,31 @@ background-color: var(--color-foreground-primary); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII="); background-position: left center; - background-size: $s-8; - border-radius: $br-6; - border: $s-2 solid var(--color-foreground-primary); - box-shadow: 0px 0px $s-4 0px var(--menu-shadow-color); - height: calc($s-24 - $s-2); + background-size: deprecated.$s-8; + border-radius: deprecated.$br-6; + border: deprecated.$s-2 solid var(--color-foreground-primary); + box-shadow: 0px 0px deprecated.$s-4 0px var(--menu-shadow-color); + height: calc(deprecated.$s-24 - deprecated.$s-2); left: var(--position); overflow: hidden; pointer-events: initial; position: absolute; - width: calc($s-24 - $s-2); + width: calc(deprecated.$s-24 - deprecated.$s-2); &.is-selected, &:hover { - outline: $s-2 solid var(--color-accent-primary); + outline: deprecated.$s-2 solid var(--color-accent-primary); } } .gradient-preview-stop-decoration { background: var(--color-foreground-primary); border-radius: 100%; - bottom: $s-32; - box-shadow: 0px 0px $s-4 0px var(--menu-shadow-color); - height: $s-4; - left: calc(var(--position) + $s-8); + bottom: deprecated.$s-32; + box-shadow: 0px 0px deprecated.$s-4 0px var(--menu-shadow-color); + height: deprecated.$s-4; + left: calc(var(--position) + deprecated.$s-8); position: absolute; - width: $s-4; + width: deprecated.$s-4; } .gradient-preview-stop-color { @@ -97,7 +97,7 @@ } .gradient-options-select { - width: $s-140; + width: deprecated.$s-140; } .rotate-icon { @@ -107,8 +107,8 @@ .gradient-stops-list { display: flex; flex-direction: column; - gap: $s-4; - max-height: $s-180; + gap: deprecated.$s-4; + max-height: deprecated.$s-180; overflow-y: auto; overflow-x: hidden; padding: 0 0 var(--sp-s) var(--sp-m); @@ -116,10 +116,10 @@ .gradient-stops-entry { display: flex; - gap: $s-4; - padding: $s-2; - border-radius: $br-12; - border: $s-1 solid transparent; + gap: deprecated.$s-4; + padding: deprecated.$s-2; + border-radius: deprecated.$br-12; + border: deprecated.$s-1 solid transparent; position: relative; @@ -142,13 +142,13 @@ .offset-input-wrapper { @extend .input-element; - @include bodySmallTypography; - width: $s-92; + @include deprecated.bodySmallTypography; + width: deprecated.$s-92; } .gradient-separator { border-color: var(--color-background-quaternary); - border-width: $s-3; + border-width: deprecated.$s-3; margin-left: calc(var(--sp-m) / 2); position: relative; width: calc(100% - var(--sp-m)); @@ -157,10 +157,10 @@ .gradient-preview-stop-preview { background: var(--color-foreground-primary); border-radius: 50%; - height: $s-4; - left: calc(var(--preview-position, 0%) - $s-2); + height: deprecated.$s-4; + left: calc(var(--preview-position, 0%) - deprecated.$s-2); pointer-events: none; position: absolute; - top: calc(50% - $s-2); - width: $s-4; + top: calc(50% - deprecated.$s-2); + width: deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss index bef7c05aa6..e2438dc416 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss @@ -4,41 +4,41 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .harmony-selector { display: flex; align-items: center; - gap: $s-8; - margin-top: $s-12; - margin-bottom: $s-8; + gap: deprecated.$s-8; + margin-top: deprecated.$s-12; + margin-bottom: deprecated.$s-8; } .hue-wheel-wrapper { - @include flexCenter; + @include deprecated.flexCenter; position: relative; } .hue-wheel { - width: $s-196; - height: $s-196; + width: deprecated.$s-196; + height: deprecated.$s-196; } .handler { @extend .colorpicker-handler; - height: $s-16; - width: $s-16; - border: $s-2 solid var(--colorpicker-handlers-color); + height: deprecated.$s-16; + width: deprecated.$s-16; + border: deprecated.$s-2 solid var(--colorpicker-handlers-color); } .handler.complement { background-color: var(--colorpicker-handlers-color); - border: $s-2 solid var(--colorpicker-handlers-color); + border: deprecated.$s-2 solid var(--colorpicker-handlers-color); } .handlers-wrapper { - @include flexRow; - height: $s-200; - width: $s-52; + @include deprecated.flexRow; + height: deprecated.$s-200; + width: deprecated.$s-52; flex-grow: 1; } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss index 66cac137b4..08def7607f 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss @@ -4,13 +4,13 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .hsva-selector { - @include flexColumn; - padding: $s-4; - grid-row-gap: $s-8; - margin-bottom: $s-8; + @include deprecated.flexColumn; + padding: deprecated.$s-4; + grid-row-gap: deprecated.$s-8; + margin-bottom: deprecated.$s-8; } .hsva-row { @@ -19,13 +19,13 @@ } .hsva-selector-label { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; align-items: center; justify-content: flex-start; - width: $s-32; + width: deprecated.$s-32; } .hsva-bar { - width: $s-228; + width: deprecated.$s-228; } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss index a2bd7c70b2..0fc9028c86 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss @@ -4,29 +4,29 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .libraries { - margin-top: $s-8; + margin-top: deprecated.$s-8; width: 100%; } .selected-colors { display: grid; grid-template-columns: repeat(8, 1fr); - gap: $s-4; + gap: deprecated.$s-4; justify-content: space-between; overflow: auto; - margin-top: $s-8; - max-height: $s-168; + margin-top: deprecated.$s-8; + max-height: deprecated.$s-168; } .add-color-btn, .palette-btn { @extend .button-secondary; - height: $s-24; - width: $s-24; - border-radius: $br-circle; + height: deprecated.$s-24; + width: deprecated.$s-24; + border-radius: deprecated.$br-circle; padding: 0; svg { @extend .button-icon; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss index 3366868bbb..00e5825af6 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss @@ -4,15 +4,15 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .value-saturation-selector { background-color: rgba(var(--hue-rgb)); position: relative; - height: $s-140; + height: deprecated.$s-140; width: 100%; - margin-top: $s-12; - margin-bottom: $s-12; + margin-top: deprecated.$s-12; + margin-bottom: deprecated.$s-12; cursor: pointer; &::before { @@ -34,15 +34,15 @@ .handler { @extend .colorpicker-handler; - height: $s-16; - width: $s-16; - border: $s-2 solid var(--colorpicker-handlers-color); + height: deprecated.$s-16; + width: deprecated.$s-16; + border: deprecated.$s-2 solid var(--colorpicker-handlers-color); } .shade-selector { display: flex; - gap: $s-4; - height: $s-52; + gap: deprecated.$s-4; + height: deprecated.$s-52; cursor: pointer; } diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss index aeb341c6f8..460939c0a8 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .slider-selector { --gradient-direction: 90deg; @@ -16,10 +16,10 @@ } position: relative; align-self: center; - height: $s-24; + height: deprecated.$s-24; inline-size: 100%; - border: $s-2 solid var(--colorpicker-details-color); - border-radius: $br-6; + border: deprecated.$s-2 solid var(--colorpicker-details-color); + border-radius: deprecated.$br-6; background: linear-gradient( var(--gradient-direction), rgba(var(--color), 0) 0%, @@ -28,8 +28,8 @@ cursor: pointer; &.vertical { - width: $s-24; - height: $s-200; + width: deprecated.$s-24; + height: deprecated.$s-200; } &.hue { @@ -60,7 +60,7 @@ &::after { content: ""; position: absolute; - border-radius: $br-6; + border-radius: deprecated.$br-6; width: 100%; height: 100%; background: linear-gradient( @@ -78,24 +78,24 @@ .handler { position: absolute; left: 50%; - width: calc($s-8 + $s-2); - height: calc($s-24 + $s-1); - border-radius: $br-4; - z-index: $z-index-1; + width: calc(deprecated.$s-8 + deprecated.$s-2); + height: calc(deprecated.$s-24 + deprecated.$s-1); + border-radius: deprecated.$br-4; + z-index: deprecated.$z-index-1; transform: translate(-4px, -3px); background-color: var(--colorpicker-handlers-color); } &.vertical .handler { - height: calc($s-8 + $s-2); - width: calc($s-24 + $s-1); + height: calc(deprecated.$s-8 + deprecated.$s-2); + width: calc(deprecated.$s-24 + deprecated.$s-1); transform: translate(-12px, 5px); } } .opacity-wrapper { background-color: var(--colorpicker-background-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .slider-selector.hue { diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index 5de7690e8d..cad6693505 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -4,30 +4,30 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .comments-section { position: relative; background-color: var(--panel-background-color); display: grid; - grid-template-rows: $s-40 $s-48 1fr; + grid-template-rows: deprecated.$s-40 deprecated.$s-48 1fr; } .from-viewer { - padding: 0 $s-8; + padding: 0 deprecated.$s-8; } .comments-section-title { - @include flexCenter; - @include uppercaseTitleTipography; + @include deprecated.flexCenter; + @include deprecated.uppercaseTitleTipography; position: relative; - height: $s-32; - min-height: $s-32; - margin: $s-8 $s-8 0 $s-8; - border-radius: $br-8; + height: deprecated.$s-32; + min-height: deprecated.$s-32; + margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--panel-title-background-color); span { - @include flexCenter; + @include deprecated.flexCenter; flex-grow: 1; color: var(--title-foreground-color-hover); } @@ -35,20 +35,20 @@ .viewer-title { margin: 0; - margin-block-start: $s-8; + margin-block-start: deprecated.$s-8; } .mode-dropdown-wrapper { - @include buttonStyle; + @include deprecated.buttonStyle; @extend .asset-element; background-color: var(--color-background-tertiary); display: flex; width: 100%; - max-width: $s-256; - height: $s-32; - padding: $s-8; - border-radius: $br-8; - margin: $s-16 auto 0 auto; + max-width: deprecated.$s-256; + height: deprecated.$s-32; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; + margin: deprecated.$s-16 auto 0 auto; cursor: pointer; position: relative; } @@ -61,9 +61,9 @@ } .arrow-icon { - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; svg { @extend .button-icon-small; transform: rotate(90deg); @@ -73,30 +73,30 @@ .comment-mode-dropdown { @extend .dropdown-wrapper; - top: $s-92; - left: $s-12; - max-width: $s-256; + top: deprecated.$s-92; + left: deprecated.$s-12; + max-width: deprecated.$s-256; width: 100%; } .viewer-dropdown { - left: $s-8; + left: deprecated.$s-8; } .dropdown-item { @extend .dropdown-element-base; justify-content: space-between; .icon { - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; svg { @extend .button-icon-small; stroke: transparent; } } .label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } &:hover { .icon svg { @@ -114,7 +114,7 @@ } .separator { - height: $s-12; + height: deprecated.$s-12; } .comments-section-content { @@ -128,29 +128,29 @@ } .thread-group-placeholder { - @include flexColumn; + @include deprecated.flexColumn; align-items: center; justify-content: flex-start; - margin-top: $s-36; + margin-top: deprecated.$s-36; } .placeholder-icon { - @include flexCenter; - height: $s-48; - width: $s-48; - border-radius: $br-circle; + @include deprecated.flexCenter; + height: deprecated.$s-48; + width: deprecated.$s-48; + border-radius: deprecated.$br-circle; background-color: var(--empty-message-background-color); svg { @extend .button-icon; - height: $s-28; - width: $s-28; + height: deprecated.$s-28; + width: deprecated.$s-28; stroke: var(--empty-message-foreground-color); } } .placeholder-label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; text-align: center; - width: $s-184; + width: deprecated.$s-184; color: var(--empty-message-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index 1e870a3ced..8d347c2190 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -4,23 +4,23 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .workspace-context-menu { position: absolute; - top: $s-40; - left: $s-736; - z-index: $z-index-4; + top: deprecated.$s-40; + left: deprecated.$s-736; + z-index: deprecated.$z-index-4; } .context-list, .workspace-context-submenu { - @include menuShadow; + @include deprecated.menuShadow; display: grid; - width: $s-240; - padding: $s-4; - border-radius: $br-8; - border: $s-2 solid var(--panel-border-color); + width: deprecated.$s-240; + padding: deprecated.$s-4; + border-radius: deprecated.$br-8; + border: deprecated.$s-2 solid var(--panel-border-color); background-color: var(--menu-background-color); max-height: 100vh; overflow-y: auto; @@ -31,33 +31,33 @@ } .separator { - height: $s-12; + height: deprecated.$s-12; } .context-menu-item { display: flex; align-items: center; justify-content: space-between; - height: $s-28; + height: deprecated.$s-28; width: 100%; - padding: $s-6; - border-radius: $br-8; + padding: deprecated.$s-6; + border-radius: deprecated.$br-8; cursor: pointer; .title { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--menu-foreground-color); } .shortcut { - @include flexCenter; - gap: $s-2; + @include deprecated.flexCenter; + gap: deprecated.$s-2; color: var(--menu-shortcut-foreground-color); .shortcut-key { - @include bodySmallTypography; - @include flexCenter; - height: $s-20; - padding: $s-2 $s-6; - border-radius: $br-6; + @include deprecated.bodySmallTypography; + @include deprecated.flexCenter; + height: deprecated.$s-20; + padding: deprecated.$s-2 deprecated.$s-6; + border-radius: deprecated.$br-6; background-color: var(--menu-shortcut-background-color); } } @@ -86,15 +86,15 @@ display: flex; justify-content: flex-start; align-items: center; - height: $s-28; - padding: $s-6; - border-radius: $br-8; + height: deprecated.$s-28; + padding: deprecated.$s-6; + border-radius: deprecated.$br-8; &:hover { background-color: var(--menu-background-color-hover); } span.title { - margin-left: $s-6; + margin-left: deprecated.$s-6; } .selected-icon { @@ -105,7 +105,7 @@ } .shape-icon { - margin-left: $s-2; + margin-left: deprecated.$s-2; svg { @extend .button-icon-small; stroke: var(--menu-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index 1c4af6260d..a096c8144a 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -4,24 +4,24 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .workspace-header-left { display: flex; align-items: center; - padding: $s-12 $s-12 $s-8 $s-12; - min-height: $s-52; + padding: deprecated.$s-12 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12; + min-height: deprecated.$s-52; } .main-icon { - @include flexCenter; - width: $s-32; - height: $s-32; - min-height: $s-32; - margin-right: $s-4; + @include deprecated.flexCenter; + width: deprecated.$s-32; + height: deprecated.$s-32; + min-height: deprecated.$s-32; + margin-right: deprecated.$s-4; svg { - min-height: $s-32; - width: $s-32; + min-height: deprecated.$s-32; + width: deprecated.$s-32; fill: var(--icon-foreground-hover); } } @@ -29,24 +29,24 @@ .project-tree { position: relative; flex-grow: 1; - height: $s-32; - min-height: $s-32; - max-width: calc(100% - $s-64); + height: deprecated.$s-32; + min-height: deprecated.$s-32; + max-width: calc(100% - deprecated.$s-64); } .project-name, .file-name { - @include uppercaseTitleTipography; - @include textEllipsis; - height: $s-16; + @include deprecated.uppercaseTitleTipography; + @include deprecated.textEllipsis; + height: deprecated.$s-16; width: 100%; - padding-bottom: $s-2; + padding-bottom: deprecated.$s-2; color: var(--title-foreground-color); cursor: pointer; } .file-name { - @include smallTitleTipography; + @include deprecated.smallTitleTipography; text-transform: none; color: var(--title-foreground-color-hover); align-items: center; @@ -55,20 +55,20 @@ } .file-name-label { - @include textEllipsis; + @include deprecated.textEllipsis; } .file-name-input { - @include flexCenter; + @include deprecated.flexCenter; width: 100%; margin: 0; border: 0; padding: 0; - border-radius: $br-4; + border-radius: deprecated.$br-4; background-color: var(--input-background-color); - font-size: $fs-14; + font-size: deprecated.$fs-14; color: var(--input-foreground-color); - z-index: $z-index-20; + z-index: deprecated.$z-index-20; white-space: break-spaces; &:focus { outline: none; @@ -76,23 +76,23 @@ } .shared-badge { - @include flexCenter; - width: $s-16; - height: $s-32; - margin-right: $s-4; + @include deprecated.flexCenter; + width: deprecated.$s-16; + height: deprecated.$s-32; + margin-right: deprecated.$s-4; svg { stroke: var(--button-secondary-foreground-color-rest); fill: none; - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; } } .status-notification { - width: $s-6; - height: $s-6; + width: deprecated.$s-6; + height: deprecated.$s-6; border-radius: 50%; - margin-right: $s-4; + margin-right: deprecated.$s-4; flex-shrink: 0; background-color: var(--status-widget-background-color-pending); diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 586f63dd41..9f0a0ff03a 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; // Library modal .modal-overlay { @@ -15,10 +15,10 @@ @extend .modal-container-base; display: grid; grid-template-rows: auto 1fr; - height: $s-520; - max-height: $s-520; - width: $s-712; - max-width: $s-712; + height: deprecated.$s-520; + max-height: deprecated.$s-520; + width: deprecated.$s-712; + max-width: deprecated.$s-712; } .close-btn { @@ -31,8 +31,8 @@ } .modal-title { - @include headlineMediumTypography; - margin-block-end: $s-16; + @include deprecated.headlineMediumTypography; + margin-block-end: deprecated.$s-16; color: var(--modal-title-foreground-color); } @@ -41,9 +41,9 @@ .updates-content { display: grid; grid-template-columns: 1fr 1fr; - gap: $s-32; - max-height: $s-400; - padding-block-start: $s-16; + gap: deprecated.$s-32; + max-height: deprecated.$s-400; + padding-block-start: deprecated.$s-16; } .lib-section, @@ -51,7 +51,7 @@ .shared-section { display: grid; grid-template-rows: auto 1fr; - gap: $s-8; + gap: deprecated.$s-8; } .shared-section { @@ -59,22 +59,22 @@ } .title-spacing-lib { - margin: 0 0 0 calc(-1 * $s-8); + margin: 0 0 0 calc(-1 * deprecated.$s-8); } .section-list, .section-list-shared { display: grid; grid-auto-rows: min-content; - gap: $s-8; - max-height: $s-320; + gap: deprecated.$s-8; + max-height: deprecated.$s-320; overflow-y: auto; } .section-list-item { display: grid; grid-template-columns: 1fr auto; - gap: $s-8; + gap: deprecated.$s-8; } .item-content { @@ -84,12 +84,12 @@ .item-publish, .item-unpublish { @extend .button-primary; - @include uppercaseTitleTipography; - height: $s-32; - min-width: $s-92; - padding: $s-8 $s-24; + @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; + min-width: deprecated.$s-92; + padding: deprecated.$s-8 deprecated.$s-24; margin: 0; - border-radius: $br-8; + border-radius: deprecated.$br-8; } .item-unpublish { @@ -99,11 +99,11 @@ .item-button, .item-button-shared { @extend .button-secondary; - height: $s-32; - width: $s-32; - margin-inline-start: $s-2; - margin-inline-end: $s-8; - padding: $s-8; + height: deprecated.$s-32; + width: deprecated.$s-32; + margin-inline-start: deprecated.$s-2; + margin-inline-end: deprecated.$s-8; + padding: deprecated.$s-8; } .detach-icon, @@ -113,19 +113,19 @@ } .section-list-shared { - max-height: $s-272; + max-height: deprecated.$s-272; } .section-title { - @include headlineSmallTypography; - margin-block-end: $s-12; + @include deprecated.headlineSmallTypography; + margin-block-end: deprecated.$s-12; color: var(--title-foreground-color); } .search-icon { - @include flexCenter; - width: $s-20; - padding: 0 0 0 $s-8; + @include deprecated.flexCenter; + width: deprecated.$s-20; + padding: 0 0 0 deprecated.$s-8; svg { @extend .button-icon-small; @@ -135,30 +135,30 @@ // empty state .section-list-empty { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; display: grid; grid-template-rows: auto 1fr; justify-items: center; - gap: $s-8; + gap: deprecated.$s-8; text-align: center; height: fit-content; - margin-block: $s-16; + margin-block: deprecated.$s-16; color: var(--modal-title-foreground-color); } .empty-state-icon { - @include flexCenter; - width: $s-48; - height: $s-48; - border-radius: $br-circle; + @include deprecated.flexCenter; + width: deprecated.$s-48; + height: deprecated.$s-48; + border-radius: deprecated.$br-circle; background-color: var(--pill-background-color); } .library-icon { @extend .button-icon; stroke: var(--icon-foreground); - height: $s-32; - width: $s-32; + height: deprecated.$s-32; + width: deprecated.$s-32; } // Update library tab @@ -166,8 +166,8 @@ @extend .link; direction: rtl; grid-column: span 3; - margin-block-start: $s-8; - margin-inline-start: $s-8; + margin-block-start: deprecated.$s-8; + margin-inline-start: deprecated.$s-8; margin: 0; } @@ -178,60 +178,60 @@ .libraries-updates { display: grid; grid-column: span 3; - grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr)); - gap: $s-24; - margin-block-start: $s-16; + grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-160, 1fr)); + gap: deprecated.$s-24; + margin-block-start: deprecated.$s-16; } .libraries-updates-column { display: grid; - gap: $s-4; + gap: deprecated.$s-4; } .libraries-updates-item { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; display: grid; grid-template-columns: auto 1fr; align-items: start; - gap: $s-8; + gap: deprecated.$s-8; color: var(--library-content-foreground-color); } .component-svg { background-color: var(--color-canvas); - border-radius: $br-4; - border: $s-2 solid transparent; - height: $s-24; - width: $s-24; - min-height: $s-24; - min-width: $s-24; + border-radius: deprecated.$br-4; + border: deprecated.$s-2 solid transparent; + height: deprecated.$s-24; + width: deprecated.$s-24; + min-height: deprecated.$s-24; + min-width: deprecated.$s-24; } .name-block { color: var(--library-content-foreground-color); - width: $s-168; + width: deprecated.$s-168; } .ellipsis { - padding-inline-start: calc($s-24 + #{$s-8}); + padding-inline-start: calc(deprecated.$s-24 + #{deprecated.$s-8}); } .item-name { - @include bodyLargeTypography; - @include textEllipsis; + @include deprecated.bodyLargeTypography; + @include deprecated.textEllipsis; margin: 0; - max-width: $s-244; + max-width: deprecated.$s-244; color: var(--library-name-foreground-color); } .item-update { @extend .button-primary; - @include headlineSmallTypography; - height: $s-32; - min-width: $s-92; - padding: $s-8 $s-24; - margin-inline-end: $s-2; - border-radius: $br-8; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + min-width: deprecated.$s-92; + padding: deprecated.$s-8 deprecated.$s-24; + margin-inline-end: deprecated.$s-2; + border-radius: deprecated.$br-8; &:disabled { @extend .button-disabled; @@ -239,7 +239,7 @@ } .item-contents { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--library-content-foreground-color); display: flex; flex-wrap: wrap; @@ -251,33 +251,33 @@ &:not(:last-child)::after { content: "·"; - margin-inline: $s-4; + margin-inline: deprecated.$s-4; } } // Modal Component v2 update .modal-v2-info { - width: $s-664; + width: deprecated.$s-664; height: fit-content; max-height: fit-content; } .modal-v2-title { - @include headlineMediumTypography; + @include deprecated.headlineMediumTypography; color: var(--modal-title-foreground-color); } .info-content { display: grid; grid-template-rows: repeat(4, 1fr); - margin-top: $s-32; - gap: $s-24; + margin-top: deprecated.$s-32; + gap: deprecated.$s-24; } .info-block { display: grid; grid-template-columns: auto 1fr; - column-gap: $s-20; + column-gap: deprecated.$s-20; grid-template: "icon title" "icon content"; @@ -285,30 +285,30 @@ .info-icon { grid-area: icon; - width: $s-52; - height: $s-52; - margin-top: $s-8; - border-radius: $br-circle; + width: deprecated.$s-52; + height: deprecated.$s-52; + margin-top: deprecated.$s-8; + border-radius: deprecated.$br-circle; background: var(--color-background-quaternary); display: flex; justify-content: center; align-items: center; svg { - width: $s-32; - height: $s-32; + width: deprecated.$s-32; + height: deprecated.$s-32; fill: var(--icon-foreground-active); } } .info-block-title { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; grid-area: title; color: var(--modal-title-foreground-color); } .info-block-content { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; grid-area: content; color: var(--library-content-foreground-color); } @@ -316,27 +316,27 @@ .info-bottom { display: flex; justify-content: flex-end; - margin-block-start: $s-24; - margin-inline-end: $s-8; + margin-block-start: deprecated.$s-24; + margin-inline-end: deprecated.$s-8; } .primary-button { @extend .button-primary; - @include headlineSmallTypography; - padding: $s-0 $s-16; + @include deprecated.headlineSmallTypography; + padding: deprecated.$s-0 deprecated.$s-16; } .sample-libraries-info { display: flex; flex-direction: column; - font-size: $fs-12; - margin: $s-32; + font-size: deprecated.$fs-12; + margin: deprecated.$s-32; color: var(--color-foreground-secondary); } .sample-libraries-link { color: var(--color-accent-primary); - font-weight: $fw400; + font-weight: deprecated.$fw400; &:hover { text-decoration: underline; } @@ -345,7 +345,7 @@ .sample-libraries-container { display: flex; flex-direction: column; - font-size: $fs-12; + font-size: deprecated.$fs-12; width: 100%; align-items: start; color: var(--color-foreground-secondary); @@ -356,16 +356,16 @@ justify-content: space-between; align-items: center; width: 100%; - margin-top: $s-8; + margin-top: deprecated.$s-8; } .sample-library-item-name { - font-size: $fs-14; + font-size: deprecated.$fs-14; color: var(--color-foreground-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: $s-232; + max-width: deprecated.$s-232; } .sample-library-add { @@ -377,11 +377,11 @@ } .sample-library-button { - @include uppercaseTitleTipography; - height: $s-32; - width: $s-80; + @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; + width: deprecated.$s-80; margin: 0; - border-radius: $br-8; + border-radius: deprecated.$br-8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/frontend/src/app/main/ui/workspace/main_menu.scss b/frontend/src/app/main/ui/workspace/main_menu.scss index 5290d250b6..d47def9ad2 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.scss +++ b/frontend/src/app/main/ui/workspace/main_menu.scss @@ -4,13 +4,13 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .menu { @extend .menu-dropdown; - top: $s-48; - left: calc(var(--width, $s-256) - $s-16); - width: $s-192; + top: deprecated.$s-48; + left: calc(var(--width, deprecated.$s-256) - deprecated.$s-16); + width: deprecated.$s-192; margin: 0; } @@ -19,7 +19,7 @@ cursor: pointer; .open-arrow { - @include flexCenter; + @include deprecated.flexCenter; svg { @extend .button-icon; @@ -43,12 +43,12 @@ } .separator { - border-top: $s-1 solid var(--color-background-quaternary); - height: $s-4; - left: calc(-1 * $s-4); - margin-top: $s-8; + border-top: deprecated.$s-1 solid var(--color-background-quaternary); + height: deprecated.$s-4; + left: calc(-1 * deprecated.$s-4); + margin-top: deprecated.$s-8; position: relative; - width: calc(100% + $s-8); + width: calc(100% + deprecated.$s-8); } .shortcut { @@ -61,9 +61,9 @@ .sub-menu { @extend .menu-dropdown; - left: calc(var(--width, $s-256) + $s-180); - width: $s-192; - min-width: calc($s-272 - $s-2); + left: calc(var(--width, deprecated.$s-256) + deprecated.$s-180); + width: deprecated.$s-192; + min-width: calc(deprecated.$s-272 - deprecated.$s-2); width: 110%; .submenu-item { @@ -89,34 +89,34 @@ } &.file { - top: $s-48; + top: deprecated.$s-48; } &.edit { - top: $s-76; + top: deprecated.$s-76; } &.view { - top: $s-116; + top: deprecated.$s-116; } &.preferences { - top: $s-148; + top: deprecated.$s-148; } &.plugins { - top: $s-180; - max-height: calc(100vh - $s-180); + top: deprecated.$s-180; + max-height: calc(100vh - deprecated.$s-180); overflow-x: hidden; overflow-y: auto; } &.help-info { - top: $s-232; + top: deprecated.$s-232; } &.help-info-old { - top: $s-192; + top: deprecated.$s-192; } } diff --git a/frontend/src/app/main/ui/workspace/nudge.scss b/frontend/src/app/main/ui/workspace/nudge.scss index 706b83e681..9ed244bedd 100644 --- a/frontend/src/app/main/ui/workspace/nudge.scss +++ b/frontend/src/app/main/ui/workspace/nudge.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -12,15 +12,15 @@ .modal-container { @extend .modal-container-base; - min-width: $s-408; + min-width: deprecated.$s-408; } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include headlineMediumTypography; + @include deprecated.headlineMediumTypography; color: var(--modal-title-foreground-color); } .modal-close-btn { @@ -28,22 +28,22 @@ } .modal-content { - @include flexColumn; - gap: $s-24; - @include bodyLargeTypography; - margin-bottom: $s-24; + @include deprecated.flexColumn; + gap: deprecated.$s-24; + @include deprecated.bodyLargeTypography; + margin-bottom: deprecated.$s-24; } .input-wrapper { @extend .input-with-label; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; label { text-transform: none; } } .modal-msg { - @include bodyLargeTypography; + @include deprecated.bodyLargeTypography; 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 1478e0de37..7dc42ffc37 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -8,14 +8,14 @@ @use "ds/z-index.scss" as *; @use "ds/_sizes.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .palette-wrapper { position: absolute; width: 100vw; left: 0; bottom: 0; - padding-bottom: $s-4; + padding-bottom: deprecated.$s-4; /** Aligns AI Chat button **/ display: flex; @@ -25,7 +25,7 @@ } .palettes { - z-index: $z-index-2; + z-index: deprecated.$z-index-2; position: relative; right: 0; grid-area: color-palette; @@ -33,15 +33,15 @@ grid-template-areas: "resize resize resize" "buttons actions palette"; - grid-template-rows: $s-8 1fr; - grid-template-columns: $s-32 auto 1fr; - max-height: $s-80; + grid-template-rows: deprecated.$s-8 1fr; + grid-template-columns: deprecated.$s-32 auto 1fr; + max-height: deprecated.$s-80; height: var(--height); width: fit-content; - padding: $s-0 $s-0 $s-8 $s-8; - border-radius: $br-8; + padding: deprecated.$s-0 deprecated.$s-0 deprecated.$s-8 deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--palette-background-color); - border: $s-2 solid var(--panel-border-color); + border: deprecated.$s-2 solid var(--panel-border-color); transition: right 0.3s, opacity 0.2s, @@ -52,36 +52,36 @@ .resize-area { grid-area: resize; - height: $s-8; - z-index: $z-index-4; - width: calc(100% - $s-8); - border-radius: $br-circle; + height: deprecated.$s-8; + z-index: deprecated.$z-index-4; + width: calc(100% - deprecated.$s-8); + border-radius: deprecated.$br-circle; cursor: ns-resize; background-color: var(--palette-background-color); } .palette-btn-list { grid-area: buttons; background-color: var(--palette-background-color); - height: calc(var(--height) - $s-16); - width: $s-32; - margin: $s-0; + height: calc(var(--height) - deprecated.$s-16); + width: deprecated.$s-32; + margin: deprecated.$s-0; list-style: none; - z-index: $z-index-2; - gap: $s-2; + z-index: deprecated.$z-index-2; + gap: deprecated.$s-2; &.mid-palette, &.small-palette { display: flex; } .palette-item { - @include flexCenter; - border-radius: $br-8; - opacity: $op-10; + @include deprecated.flexCenter; + border-radius: deprecated.$br-8; + opacity: deprecated.$op-10; transition: opacity 1s ease; .palette-btn { @extend .button-tertiary; - height: $s-32; - width: $s-32; - border-radius: $br-8; + height: deprecated.$s-32; + width: deprecated.$s-32; + border-radius: deprecated.$br-8; background-clip: padding-box; padding: 0; svg { @@ -98,13 +98,13 @@ .palette-actions { @extend .button-tertiary; grid-area: actions; - height: calc(var(--height) - $s-16); - width: $s-32; + height: calc(var(--height) - deprecated.$s-16); + width: deprecated.$s-32; padding: 0; - margin-left: $s-4; - border-radius: $br-8; + margin-left: deprecated.$s-4; + border-radius: deprecated.$br-8; background-color: var(--palette-background-color); - z-index: $z-index-2; + z-index: deprecated.$z-index-2; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -118,41 +118,41 @@ } .handler { - @include buttonStyle; - @include flexCenter; - width: $s-12; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; + width: deprecated.$s-12; height: 100%; .handler-btn { - width: $s-4; + width: deprecated.$s-4; height: 100%; - max-height: $s-40; - margin: $s-8 $s-4; + max-height: deprecated.$s-40; + margin: deprecated.$s-8 deprecated.$s-4; padding: 0; - border-radius: $s-4; + border-radius: deprecated.$s-4; background-color: var(--palette-handler-background-color); } } .mid-palette, .small-palette { - grid-template-columns: $s-64 auto 1fr; + grid-template-columns: deprecated.$s-64 auto 1fr; } .hidden-bts { - right: $s-2; - z-index: $z-index-1; + right: deprecated.$s-2; + z-index: deprecated.$z-index-1; width: 22px; - grid-template-columns: $s-8 auto 1fr; + grid-template-columns: deprecated.$s-8 auto 1fr; padding: 0; border-inline-start: 0; border-start-start-radius: 0; border-end-start-radius: 0; .palette-btn-list { - opacity: $op-0; + opacity: deprecated.$op-0; visibility: hidden; width: 0; .palette-item { - opacity: $op-0; + opacity: deprecated.$op-0; visibility: hidden; z-index: 0; } @@ -171,7 +171,7 @@ z-index: 0; } .handler { - padding-bottom: $s-8; + padding-bottom: deprecated.$s-8; } } @@ -182,7 +182,7 @@ @extend .button-secondary; inline-size: $sz-40; block-size: $sz-40; - border-radius: $br-circle; + border-radius: deprecated.$br-circle; border: none; &.selected { @extend .button-icon-selected; diff --git a/frontend/src/app/main/ui/workspace/plugins.scss b/frontend/src/app/main/ui/workspace/plugins.scss index 5d1e9fac33..87af034d70 100644 --- a/frontend/src/app/main/ui/workspace/plugins.scss +++ b/frontend/src/app/main/ui/workspace/plugins.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -17,18 +17,18 @@ max-height: initial; &.plugin-permissions { - width: $s-412; - max-width: $s-412; + width: deprecated.$s-412; + max-width: deprecated.$s-412; } &.plugin-management { - width: $s-472; - max-width: $s-472; + width: deprecated.$s-472; + max-width: deprecated.$s-472; } &.plugin-try-out { - width: $s-452; - max-width: $s-452; + width: deprecated.$s-452; + max-width: deprecated.$s-452; } hr { @@ -50,11 +50,11 @@ } .modal-title { - @include headlineMediumTypography; - margin-block-end: $s-32; + @include deprecated.headlineMediumTypography; + margin-block-end: deprecated.$s-32; color: var(--modal-title-foreground-color); display: flex; - gap: $s-12; + gap: deprecated.$s-12; } .modal-content { @@ -62,29 +62,29 @@ flex-direction: column; .plugin-permissions & { - gap: $s-20; + gap: deprecated.$s-20; } .plugin-management & { - height: $s-380; - max-height: $s-380; + height: deprecated.$s-380; + max-height: deprecated.$s-380; } } .modal-message { - font-size: $fs-14; + font-size: deprecated.$fs-14; color: var(--color-foreground-secondary); } .modal-paragraph { - font-size: $fs-14; + font-size: deprecated.$fs-14; color: var(--color-foreground-primary); } .primary-button { @extend .button-primary; - @include headlineSmallTypography; - padding: $s-0 $s-16; + @include deprecated.headlineSmallTypography; + padding: deprecated.$s-0 deprecated.$s-16; } .button-expand { @@ -94,14 +94,14 @@ .cancel-button { @extend .button-secondary; - @include headlineSmallTypography; - padding: $s-0 $s-16; + @include deprecated.headlineSmallTypography; + padding: deprecated.$s-0 deprecated.$s-16; } .search-icon { - @include flexCenter; - width: $s-20; - padding: 0 0 0 $s-8; + @include deprecated.flexCenter; + width: deprecated.$s-20; + padding: 0 0 0 deprecated.$s-8; svg { @extend .button-icon-small; @@ -111,58 +111,58 @@ .top-bar { display: flex; - gap: $s-8; + gap: deprecated.$s-8; } .open-button { display: flex; justify-content: center; align-items: center; - width: $s-68; - min-width: $s-68; - height: $s-32; + width: deprecated.$s-68; + min-width: deprecated.$s-68; + height: deprecated.$s-32; text-transform: uppercase; } .plugins-list { - padding-top: $s-20; + padding-top: deprecated.$s-20; overflow-x: hidden; overflow-y: auto; flex: 1; display: flex; flex-direction: column; - gap: $s-12; + gap: deprecated.$s-12; } .plugins-list-element { display: flex; - gap: $s-12; + gap: deprecated.$s-12; } .plugin-icon { - min-width: $s-32; - min-height: $s-32; - width: $s-32; - height: $s-32; + min-width: deprecated.$s-32; + min-height: deprecated.$s-32; + width: deprecated.$s-32; + height: deprecated.$s-32; background: var(--button-secondary-background-color-rest); - padding: $s-2; - border-radius: $s-4; + padding: deprecated.$s-2; + border-radius: deprecated.$s-4; } .plugin-description { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; width: 100%; } .plugin-title { - @include bodyMediumTypography; + @include deprecated.bodyMediumTypography; color: var(--color-foreground-primary); } .plugin-summary { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--color-foreground-secondary); } @@ -170,15 +170,15 @@ display: flex; flex-direction: column; align-items: center; - gap: $s-20; + gap: deprecated.$s-20; height: 100%; justify-content: center; - padding: $s-36 0; + padding: deprecated.$s-36 0; } .plugins-empty-logo { - width: $s-44; - height: $s-44; + width: deprecated.$s-44; + height: deprecated.$s-44; border-radius: 50%; display: flex; justify-content: center; @@ -186,25 +186,25 @@ background: var(--color-background-tertiary); svg { - width: $s-16; - height: $s-16; + width: deprecated.$s-16; + height: deprecated.$s-16; stroke: var(--color-foreground-secondary); fill: none; } } .plugins-empty-text { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--color-foreground-primary); } div.input-error { - border: $s-1 solid var(--input-border-color-error); + border: deprecated.$s-1 solid var(--input-border-color-error); } .info { - @include bodySmallTypography; - margin-top: $s-4; + @include deprecated.bodySmallTypography; + margin-top: deprecated.$s-4; &.error { color: var(--input-border-color-error); @@ -217,15 +217,15 @@ div.input-error { .plugins-link { color: var(--color-accent-primary); - font-size: $fs-12; + font-size: deprecated.$fs-12; display: inline-flex; align-items: center; - gap: $s-4; + gap: deprecated.$s-4; svg { - margin-top: calc(-1 * $s-2); - width: $s-12; - height: $s-12; + margin-top: calc(-1 * deprecated.$s-2); + width: deprecated.$s-12; + height: deprecated.$s-12; stroke: var(--color-accent-primary); fill: none; } @@ -237,46 +237,46 @@ div.input-error { .permissions-list { display: flex; flex-direction: column; - gap: $s-24; + gap: deprecated.$s-24; } .permissions-list-entry { display: grid; grid-template-columns: 24px 1fr; - gap: $s-16; + gap: deprecated.$s-16; align-items: center; svg { - width: $s-24; - height: $s-24; + width: deprecated.$s-24; + height: deprecated.$s-24; stroke: var(--color-accent-primary); fill: none; } } .permissions-list-text { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; margin: 0; color: var(--color-foreground-secondary); } .permissions-disclaimer { - @include bodySmallTypography; - padding: $s-16; + @include deprecated.bodySmallTypography; + padding: deprecated.$s-16; background: var(--color-background-quaternary); color: var(--color-foreground-primary); - border-radius: $br-4; + border-radius: deprecated.$br-4; } .action-buttons { display: flex; - gap: $s-12; + gap: deprecated.$s-12; } .discover { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--color-foreground-secondary); - margin-top: $s-24; + margin-top: deprecated.$s-24; a { color: var(--color-accent-primary); diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss index 15e9b68d2e..7c54aafba7 100644 --- a/frontend/src/app/main/ui/workspace/presence.scss +++ b/frontend/src/app/main/ui/workspace/presence.scss @@ -4,18 +4,18 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .active-users, .active-users-opened { - @include buttonStyle; + @include deprecated.buttonStyle; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; margin: 0; - padding: 0 $s-4; - border-radius: $br-8; + padding: 0 deprecated.$s-4; + border-radius: deprecated.$br-8; .active-users-list { display: flex; flex-direction: row-reverse; @@ -26,8 +26,8 @@ @extend .user-icon; background-color: var(--user-count-background-color); color: var(--user-count-foreground-color); - z-index: $z-index-2; - border: $s-2 solid var(--user-count-foreground-color); + z-index: deprecated.$z-index-2; + border: deprecated.$s-2 solid var(--user-count-foreground-color); } .session-icon { @extend .user-icon; @@ -37,14 +37,14 @@ .active-users-opened { position: absolute; - right: calc(-1 * $s-2); - top: calc(-1 * $s-2); - padding: $s-8; - margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0; + right: calc(-1 * deprecated.$s-2); + top: calc(-1 * deprecated.$s-2); + padding: deprecated.$s-8; + margin: calc(-1 * deprecated.$s-2) calc(-1 * deprecated.$s-4) 0 0; background-color: var(--menu-background-color); - z-index: $z-index-4; + z-index: deprecated.$z-index-4; .active-users-list { - gap: $s-4; + gap: deprecated.$s-4; .users-num, .session-icon { margin-left: 0; diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index 54848233c0..e6d7ea2092 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -4,23 +4,23 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .workspace-header-right { display: flex; justify-content: space-between; align-items: center; - min-width: $s-256; - padding: $s-8; - gap: $s-8; + min-width: deprecated.$s-256; + padding: deprecated.$s-8; + gap: deprecated.$s-8; background-color: var(--panel-background-color); } .users-section { position: relative; - min-width: $s-32; - max-width: $s-72; - padding: $s-4 $s-6; + min-width: deprecated.$s-32; + max-width: deprecated.$s-72; + padding: deprecated.$s-4 deprecated.$s-6; } .separator { @@ -28,19 +28,19 @@ } .zoom-widget { - @include buttonStyle; + @include deprecated.buttonStyle; display: flex; align-items: center; justify-content: center; - height: $s-28; - max-width: $s-48; - width: $s-48; - border-radius: $br-8; + height: deprecated.$s-28; + max-width: deprecated.$s-48; + width: deprecated.$s-48; + border-radius: deprecated.$br-8; .label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; height: 100%; - padding: $s-8 0; + padding: deprecated.$s-8 0; color: var(--button-tertiary-foreground-color-rest); } @@ -59,15 +59,15 @@ .dropdown { @extend .menu-dropdown; - right: $s-2; - top: calc($s-2 + $s-48); - width: $s-272; + right: deprecated.$s-2; + top: calc(deprecated.$s-2 + deprecated.$s-48); + width: deprecated.$s-272; } .basic-zoom-bar { display: flex; justify-content: space-between; - padding: $s-6; + padding: deprecated.$s-6; cursor: auto; } @@ -76,19 +76,19 @@ } .zoom-text { - @include flexCenter; + @include deprecated.flexCenter; height: 100%; - min-width: $s-48; + min-width: deprecated.$s-48; padding: 0; - margin: 0 $s-2; + margin: 0 deprecated.$s-2; color: var(--modal-title-foreground-color); } .reset-btn { @extend .button-tertiary; color: var(--button-tertiary-foreground-color-hover); - height: $s-28; - border-radius: $br-8; + height: deprecated.$s-28; + border-radius: deprecated.$br-8; } .zoom-option { @@ -115,17 +115,17 @@ .comments-btn { @extend .button-tertiary; - border-radius: $br-8; + border-radius: deprecated.$br-8; margin: 0; - height: $s-28; - width: $s-28; + height: deprecated.$s-28; + width: deprecated.$s-28; border: none; svg { @extend .button-icon; stroke: var(--icon-foreground); - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; } &:hover { @@ -144,17 +144,17 @@ .history-button { @extend .button-tertiary; - border-radius: $br-8; + border-radius: deprecated.$br-8; margin: 0; - height: $s-28; - width: $s-28; + height: deprecated.$s-28; + width: deprecated.$s-28; border: none; svg { @extend .button-icon; stroke: var(--icon-foreground); - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; } &:hover { @@ -172,17 +172,17 @@ } .persistence-status-widget { - @include flexCenter; - width: $s-28; - height: $s-28; + @include deprecated.flexCenter; + width: deprecated.$s-28; + height: deprecated.$s-28; } .status-icon { - @include flexCenter; - width: $s-24; - height: $s-24; + @include deprecated.flexCenter; + width: deprecated.$s-24; + height: deprecated.$s-24; margin: 0; - border-radius: $br-circle; + border-radius: deprecated.$br-circle; svg { @extend .button-icon; @@ -214,16 +214,16 @@ .share-btn, .viewer-btn { @extend .button-tertiary; - border-radius: $br-8; + border-radius: deprecated.$br-8; margin: 0; - width: $s-28; - height: $s-28; + width: deprecated.$s-28; + height: deprecated.$s-28; border: none; svg { @extend .button-icon; - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 6b2fd009cd..cfb357eedd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "ds/_sizes.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; $width-settings-bar: $sz-318; $width-settings-bar-max: $sz-500; @@ -15,7 +15,7 @@ $width-settings-bar-max: $sz-500; grid-template-areas: "header header" "content resize"; - grid-template-rows: $s-52 1fr; + grid-template-rows: deprecated.$s-52 1fr; grid-template-columns: 1fr 0; position: relative; grid-area: left-sidebar; @@ -25,7 +25,7 @@ $width-settings-bar-max: $sz-500; background-color: var(--panel-background-color); height: 100vh; max-height: 100vh; - z-index: $z-index-1; + z-index: deprecated.$z-index-1; .resize-area { grid-area: resize; @@ -33,7 +33,7 @@ $width-settings-bar-max: $sz-500; } .layers-tab { - padding-top: $s-4; + padding-top: deprecated.$s-4; overflow-x: hidden; } @@ -43,21 +43,21 @@ $width-settings-bar-max: $sz-500; .settings-bar-content { grid-area: content; - right: calc(-1 * $s-8); + right: calc(-1 * deprecated.$s-8); } .resize-area { position: absolute; top: 0; left: unset; - z-index: $z-index-4; - width: $s-8; + z-index: deprecated.$z-index-4; + width: deprecated.$s-8; cursor: ew-resize; height: 100%; } .tab-spacing { - margin-inline: $s-12; + margin-inline: deprecated.$s-12; } .right-settings-bar { @@ -67,7 +67,7 @@ $width-settings-bar-max: $sz-500; height: 100vh; width: $width-settings-bar; background-color: var(--panel-background-color); - z-index: $z-index-1; + z-index: deprecated.$z-index-1; &.not-expand { max-width: $width-settings-bar; } @@ -80,7 +80,7 @@ $width-settings-bar-max: $sz-500; grid-template-columns: 100%; grid-template-rows: 100%; - height: calc(100vh - $s-52); + height: calc(100vh - deprecated.$s-52); overflow: hidden; } } @@ -90,13 +90,13 @@ $width-settings-bar-max: $sz-500; position: absolute; left: 0; width: 100%; - padding: $s-3 0 $s-1 0; - height: $s-6; + padding: deprecated.$s-3 0 deprecated.$s-1 0; + height: deprecated.$s-6; cursor: ns-resize; } .resize-handle-horiz { - border-bottom: $s-2 solid var(--resize-area-border-color); + border-bottom: deprecated.$s-2 solid var(--resize-area-border-color); cursor: ns-resize; } @@ -107,11 +107,11 @@ $width-settings-bar-max: $sz-500; .collapse-sidebar-button { --collapse-icon-color: var(--color-foreground-secondary); - @include flexCenter; - @include buttonStyle; + @include deprecated.flexCenter; + @include deprecated.buttonStyle; height: 100%; - width: $s-24; - border-radius: $br-5; + width: deprecated.$s-24; + border-radius: deprecated.$br-5; color: var(--collapse-icon-color); transform: rotate(180deg); &:hover { @@ -122,5 +122,5 @@ $width-settings-bar-max: $sz-500; .versions-tab { width: 100%; overflow: hidden; - height: calc(100vh - $s-88); + height: calc(100vh - deprecated.$s-88); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index 011211c97a..f89069cca5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -4,69 +4,69 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .assets-bar { display: grid; height: 100%; grid-auto-rows: max-content; // TODO: ugly hack :( Fix this! we shouldn't be hardcoding this height - height: calc(100vh - $s-92); + height: calc(100vh - deprecated.$s-92); scrollbar-gutter: stable; overflow-y: auto; - padding-top: $s-8; + padding-top: deprecated.$s-8; } .libraries-button { @extend .button-secondary; - @include uppercaseTitleTipography; - gap: $s-2; - height: $s-32; + @include deprecated.uppercaseTitleTipography; + gap: deprecated.$s-2; + height: deprecated.$s-32; width: 100%; - margin-bottom: $s-4; - border-radius: $s-8; + margin-bottom: deprecated.$s-4; + border-radius: deprecated.$s-8; &:hover { background-color: var(--button-secondary-background-color-hover); color: var(--button-secondary-foreground-color-hover); - border: $s-1 solid var(--button-secondary-border-color-hover); + border: deprecated.$s-1 solid var(--button-secondary-border-color-hover); } &:focus { background-color: var(--button-secondary-background-color-focus); color: var(--button-secondary-foreground-color-focus); - border: $s-1 solid var(--button-secondary-border-color-focus); + border: deprecated.$s-1 solid var(--button-secondary-border-color-focus); } } .add-library-button { @extend .button-primary; - @include uppercaseTitleTipography; - gap: $s-2; - height: $s-32; + @include deprecated.uppercaseTitleTipography; + gap: deprecated.$s-2; + height: deprecated.$s-32; width: 100%; - margin-bottom: $s-4; - border-radius: $s-8; + margin-bottom: deprecated.$s-4; + border-radius: deprecated.$s-8; } .section-button { - @include flexCenter; - @include buttonStyle; - height: $s-32; - width: $s-32; + @include deprecated.flexCenter; + @include deprecated.buttonStyle; + height: deprecated.$s-32; + width: deprecated.$s-32; margin: 0; - border: $s-1 solid var(--input-border-color-rest); - border-radius: $br-8 $br-2 $br-2 $br-8; + border: deprecated.$s-1 solid var(--input-border-color-rest); + border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8; background-color: var(--input-background-color-rest); svg { - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; stroke: var(--icon-foreground); } &:focus { - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); outline: 0; background-color: var(--input-background-color-focus); color: var(--input-foreground-color-focus); @@ -77,7 +77,7 @@ } &:hover { - border: $s-1 solid var(--input-border-color-hover); + border: deprecated.$s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); svg { @@ -86,7 +86,7 @@ } &:focus { - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); outline: 0; background-color: var(--input-background-color-focus); color: var(--input-foreground-color-focus); @@ -103,37 +103,37 @@ } .sections-container { - @include menuShadow; - @include flexColumn; + @include deprecated.menuShadow; + @include deprecated.flexColumn; position: absolute; - top: $s-84; - left: $s-12; - width: $s-192; - padding: $s-4; - border-radius: $br-8; + top: deprecated.$s-84; + left: deprecated.$s-12; + width: deprecated.$s-192; + padding: deprecated.$s-4; + border-radius: deprecated.$br-8; background-color: var(--menu-background-color); - z-index: $z-index-2; + z-index: deprecated.$z-index-2; } .section-item { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; justify-content: space-between; width: 100%; - padding: $s-6; - border-radius: $br-8; + padding: deprecated.$s-6; + border-radius: deprecated.$br-8; } .section-btn { - @include buttonStyle; + @include deprecated.buttonStyle; } .assets-header { - padding: 0 0 $s-24 $s-12; + padding: 0 0 deprecated.$s-24 deprecated.$s-12; } .search-wrapper { display: flex; - gap: $s-4; + gap: deprecated.$s-4; } 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 e2a14dd99b..e2c86936cb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -4,19 +4,19 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; // TODO: we should be using subgrid in the common "assets component" to avoid // using this SCSS variable here (we cannot use a CSS var in this CSS module because // the elements are not part of the same cascade). -$assets-button-width: $s-28; +$assets-button-width: deprecated.$s-28; .colors-group { - margin-top: $s-4; + margin-top: deprecated.$s-4; } .asset-list { - padding: 0 0 0 $s-4; + padding: 0 0 0 deprecated.$s-4; } .asset-list-item { @@ -24,24 +24,24 @@ $assets-button-width: $s-28; display: grid; grid-template-columns: auto 1fr #{$assets-button-width}; align-items: center; - height: $s-32; - padding: $s-8; + height: deprecated.$s-32; + padding: deprecated.$s-8; padding-inline-end: 0; - margin-bottom: $s-4; - border-radius: $br-8; + margin-bottom: deprecated.$s-4; + border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color); cursor: pointer; &.selected { - border: $s-1 solid var(--assets-item-border-color); + border: deprecated.$s-1 solid var(--assets-item-border-color); } &.editing { - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); input.element-name { - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; flex-grow: 1; margin: 0; color: var(--layer-row-foreground-color); @@ -53,41 +53,41 @@ $assets-button-width: $s-28; } .bullet-block { - @include flexCenter; + @include deprecated.flexCenter; height: 100%; justify-content: flex-start; - margin-inline-end: $s-4; + margin-inline-end: deprecated.$s-4; } .name-block { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; margin: 0; color: var(--assets-item-name-foreground-color); } .default-name { - margin-inline-start: $s-4; + margin-inline-start: deprecated.$s-4; color: var(--assets-item-name-foreground-color-rest); } .default-name-with-color { - margin-left: $s-6; + margin-left: deprecated.$s-6; } .element-name { - @include textEllipsis; + @include deprecated.textEllipsis; color: var(--color-foreground-primary); } .grid-placeholder { - height: $s-2; - margin-bottom: $s-2; + height: deprecated.$s-2; + margin-bottom: deprecated.$s-2; background-color: var(--color-accent-primary); } .drop-space { - height: $s-12; + height: deprecated.$s-12; } .dragging { @@ -96,7 +96,7 @@ $assets-button-width: $s-28; left: 0; width: 100%; height: 100%; - border-radius: $s-8; + border-radius: deprecated.$s-8; background-color: var(--assets-item-background-color-drag); - border: $s-2 solid var(--assets-item-border-color-drag); + border: deprecated.$s-2 solid var(--assets-item-border-color-drag); } 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 f10d9ca595..257bd24b3c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .title-name { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; align-items: center; flex-grow: 1; @@ -15,7 +15,7 @@ } .title-tokens { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; text-transform: capitalize; } @@ -24,12 +24,12 @@ } .section-icon { - @include flexCenter; - padding-right: $s-2; + @include deprecated.flexCenter; + padding-right: deprecated.$s-2; svg { - @include flexCenter; - height: $s-16; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; fill: none; stroke: currentColor; } @@ -38,37 +38,37 @@ .section-name { display: flex; align-items: center; - margin: 0 $s-2; + margin: 0 deprecated.$s-2; } .num-assets { - @include flexCenter; + @include deprecated.flexCenter; height: 100%; - padding-left: $s-8; + padding-left: deprecated.$s-8; } .title-spacing { - padding-block-start: $s-4; + padding-block-start: deprecated.$s-4; } .asset-section.opened { - margin-bottom: $s-12; + margin-bottom: deprecated.$s-12; } .drag-counter { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; position: absolute; bottom: 0; left: 0; width: 100%; - height: calc($s-24 - $s-2); + height: calc(deprecated.$s-24 - deprecated.$s-2); background-color: var(--assets-item-name-background-color); color: var(--assets-item-name-foreground-color); display: flex; justify-content: flex-start; align-items: center; - margin: $s-4; - padding-inline: $s-4; + margin: deprecated.$s-4; + padding-inline: deprecated.$s-4; z-index: 2; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 6f8d2a9901..9730198d4e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -4,59 +4,59 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .drop-space { - height: $s-12; + height: deprecated.$s-12; } .drop-space-small { - height: $s-2; + height: deprecated.$s-2; } .asset-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-96, 1fr)); max-width: 100%; - gap: $s-4; - margin-inline: $s-8; + gap: deprecated.$s-4; + margin-inline: deprecated.$s-8; } .grid-cell { - @include flexCenter; + @include deprecated.flexCenter; position: relative; aspect-ratio: 1 / 1; - padding: $s-8; - border-radius: $br-8; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--assets-component-background-color); overflow: hidden; cursor: pointer; .variant-mark { background-color: var(--color-background-tertiary); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .cell-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; display: none; position: absolute; - left: $s-4; - bottom: $s-4; - height: calc($s-24 - $s-2); - width: calc(100% - 2 * $s-4); - padding: $s-2 $s-6; - column-gap: $s-4; - border-radius: $br-4; + left: deprecated.$s-4; + bottom: deprecated.$s-4; + height: calc(deprecated.$s-24 - deprecated.$s-2); + width: calc(100% - 2 * deprecated.$s-4); + padding: deprecated.$s-2 deprecated.$s-6; + column-gap: deprecated.$s-4; + border-radius: deprecated.$br-4; background-color: var(--assets-item-name-background-color); - border: $s-1 solid transparent; + border: deprecated.$s-1 solid transparent; color: var(--assets-item-name-foreground-color); input { - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; height: auto; padding: 0; } @@ -69,7 +69,7 @@ &.editing { border-color: var(--input-border-color-focus); - border-radius: $br-4; + border-radius: deprecated.$br-4; display: flex; align-items: center; background-color: var(--input-background-color); @@ -83,18 +83,18 @@ } &.selected { - border: $s-2 solid var(--assets-item-border-color); + border: deprecated.$s-2 solid var(--assets-item-border-color); &::before { content: " "; position: absolute; - z-index: $z-index-2; + z-index: deprecated.$z-index-2; top: 0; left: 0; right: 0; bottom: 0; - border: $s-4 solid var(--assets-component-second-border-selected); - border-radius: $br-8; + border: deprecated.$s-4 solid var(--assets-component-second-border-selected); + border-radius: deprecated.$br-8; } } } @@ -102,7 +102,7 @@ .component-group { display: grid; grid-template-columns: 1fr; - gap: $s-4; + gap: deprecated.$s-4; } .thumbnail { @@ -115,9 +115,9 @@ .grid-placeholder { width: 100%; - border-radius: $br-8; + border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color-drag); - border: $s-2 solid var(--assets-item-border-color-drag); + border: deprecated.$s-2 solid var(--assets-item-border-color-drag); } .enum-item { @@ -125,17 +125,17 @@ display: grid; grid-template-columns: auto 1fr; align-items: center; - column-gap: $s-8; - height: $s-44; - padding-right: $s-4; - padding: $s-1; - border: $s-1 solid transparent; - border-radius: $br-8; + column-gap: deprecated.$s-8; + height: deprecated.$s-44; + padding-right: deprecated.$s-4; + padding: deprecated.$s-1; + border: deprecated.$s-1 solid transparent; + border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color); cursor: pointer; &:not(:last-child) { - margin-bottom: $s-4; + margin-bottom: deprecated.$s-4; } &:hover { @@ -155,58 +155,58 @@ } &.selected { - border: $s-1 solid var(--assets-item-border-color); + border: deprecated.$s-1 solid var(--assets-item-border-color); } } .enum-item-with-mark { - grid-template-columns: auto 1fr $s-24; - padding-right: $s-4; + grid-template-columns: auto 1fr deprecated.$s-24; + padding-right: deprecated.$s-4; } .item-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; order: 2; color: var(--assets-item-name-foreground-color); input { - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; - height: $s-32; - padding: $s-4; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; + height: deprecated.$s-32; + padding: deprecated.$s-4; } span { display: flex; place-items: center; - padding-inline-end: $s-4; + padding-inline-end: deprecated.$s-4; } &.editing { display: grid; grid-template-columns: 1fr auto; align-items: center; - column-gap: $s-8; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; + column-gap: deprecated.$s-8; + border: deprecated.$s-1 solid var(--input-border-color-focus); + border-radius: deprecated.$br-8; background-color: var(--input-background-color); } } .asset-list-thumbnail { - @include flexCenter; + @include deprecated.flexCenter; flex-shrink: 0; - padding: $s-2; - height: $s-40; - width: $s-40; - border-radius: $br-6; + padding: deprecated.$s-2; + height: deprecated.$s-40; + width: deprecated.$s-40; + border-radius: deprecated.$br-6; background-color: var(--assets-component-background-color); } .grid-placeholder { - height: $s-2; + height: deprecated.$s-2; width: 100%; background-color: var(--color-accent-primary); } @@ -222,21 +222,21 @@ left: 0; width: 100%; height: 100%; - border-radius: $s-8; + border-radius: deprecated.$s-8; background-color: var(--assets-item-background-color-drag); - border: $s-2 solid var(--assets-item-border-color-drag); + border: deprecated.$s-2 solid var(--assets-item-border-color-drag); } .variant-mark-cell { position: absolute; - right: $s-2; - top: $s-2; + right: deprecated.$s-2; + top: deprecated.$s-2; } .component-icon { - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; order: 3; color: var(--color-accent-secondary); } 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 c3db55138b..18de784336 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 @@ -5,12 +5,12 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as t; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .tool-window { - padding: 0 0 $s-24 $s-12; + padding: 0 0 deprecated.$s-24 deprecated.$s-12; display: grid; grid-auto-rows: max-content; - gap: $s-4; + gap: deprecated.$s-4; height: 100%; } @@ -28,23 +28,23 @@ display: flex; align-items: center; justify-content: flex-start; - height: $s-32; - padding-left: calc($s-12 + $s-2); + height: deprecated.$s-32; + padding-left: calc(deprecated.$s-12 + deprecated.$s-2); color: var(--color-foreground-secondary); } .special-title { - @include textEllipsis; + @include deprecated.textEllipsis; color: var(--title-foreground-color-hover); - margin-left: $s-2; + margin-left: deprecated.$s-2; text-align: left; } .file-link { @extend .button-tertiary; - height: $s-32; - width: $s-28; - border-radius: $br-8; + height: deprecated.$s-32; + width: deprecated.$s-28; + border-radius: deprecated.$br-8; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -56,32 +56,32 @@ width: 100%; display: grid; grid-auto-rows: max-content; - gap: $s-4; + gap: deprecated.$s-4; } .asset-title { - margin-left: $s-28; + margin-left: deprecated.$s-28; display: flex; flex-direction: column; align-items: center; - gap: $s-8; + gap: deprecated.$s-8; } .no-found-icon { - @include flexCenter; + @include deprecated.flexCenter; background-color: var(--not-found-background-color); - border-radius: $br-circle; - height: $s-48; - width: $s-48; + border-radius: deprecated.$br-circle; + height: deprecated.$s-48; + width: deprecated.$s-48; svg { @extend .button-icon; - height: $s-24; - width: $s-24; + height: deprecated.$s-24; + width: deprecated.$s-24; stroke: var(--not-found-foreground-color); } } .no-found-text { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; 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 9e33ea5736..223a6d920e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .group-title-wrapper { width: 100%; @@ -29,18 +29,18 @@ } .group-title { - padding-left: $s-4; + padding-left: deprecated.$s-4; } .pre-path { - margin-left: $s-2; + margin-left: deprecated.$s-2; text-transform: initial; color: var(--title-foreground-color); } .path { - @include textEllipsis; - margin-left: $s-2; + @include deprecated.textEllipsis; + margin-left: deprecated.$s-2; text-transform: initial; color: var(--title-foreground-color-hover); } @@ -54,11 +54,11 @@ } .modal-header { - margin-bottom: $s-24; + margin-bottom: deprecated.$s-24; } .modal-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -67,14 +67,14 @@ } .modal-content { - @include bodySmallTypography; - margin-bottom: $s-24; + @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-24; } .input-wrapper { @extend .input-with-label; - @include bodySmallTypography; - margin-bottom: $s-8; + @include deprecated.bodySmallTypography; + margin-bottom: deprecated.$s-8; } .action-buttons { diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss index 9ffe1e6329..d00eeb20f9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss @@ -4,18 +4,18 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .assets-list { - padding: 0 0 0 $s-4; + padding: 0 0 0 deprecated.$s-4; } .drop-space { - height: $s-12; + height: deprecated.$s-12; } .grid-placeholder { - height: $s-2; + height: deprecated.$s-2; width: 100%; background-color: var(--color-accent-primary); } @@ -24,8 +24,8 @@ position: relative; display: flex; align-items: center; - margin-bottom: $s-4; - border-radius: $br-8; + margin-bottom: deprecated.$s-4; + border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color); } @@ -35,7 +35,7 @@ left: 0; height: 100%; width: 100%; - border: $s-2 solid var(--assets-item-border-color-drag); - border-radius: $s-8; + border: deprecated.$s-2 solid var(--assets-item-border-color-drag); + border-radius: deprecated.$s-8; background-color: var(--assets-item-background-color-drag); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss index 8b82a663f7..9d2f6156f5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss @@ -4,35 +4,35 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .collapsed-sidebar { - @include flexCenter; + @include deprecated.flexCenter; position: absolute; - top: $s-48; + top: deprecated.$s-48; left: 0; - padding: $s-4; - border-radius: $br-8; + padding: deprecated.$s-4; + border-radius: deprecated.$br-8; background: var(--color-background-primary); margin-inline-start: var(--sp-m); } .collapsed-title { - @include flexCenter; - height: $s-36; - width: $s-24; - border-radius: $br-8; + @include deprecated.flexCenter; + height: deprecated.$s-36; + width: deprecated.$s-24; + border-radius: deprecated.$br-8; background: var(--color-background-secondary); } .collapsed-button { - @include buttonStyle; - height: $s-24; - width: $s-16; + @include deprecated.buttonStyle; + height: deprecated.$s-24; + width: deprecated.$s-16; padding: 0; - border-radius: $br-5; + border-radius: deprecated.$br-5; svg { - @include flexCenter; - height: $s-16; - width: $s-16; + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; color: transparent; fill: none; stroke: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss index 1b34370e2c..45a00fe022 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss @@ -4,29 +4,29 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .shape-info { display: flex; flex-direction: column; background-color: var(--panel-background-color); color: var(--color-foreground-primary); - font-size: $fs-12; + font-size: deprecated.$fs-12; user-select: text; } .shape-info-title { - @include flexCenter; - @include uppercaseTitleTipography; + @include deprecated.flexCenter; + @include deprecated.uppercaseTitleTipography; position: relative; - height: $s-32; - min-height: $s-32; - margin: $s-8 $s-8 0 $s-8; - border-radius: $br-8; + height: deprecated.$s-32; + min-height: deprecated.$s-32; + margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--panel-title-background-color); span { - @include flexCenter; + @include deprecated.flexCenter; flex-grow: 1; color: var(--title-foreground-color-hover); } @@ -35,11 +35,11 @@ .close-button { @extend .button-tertiary; position: absolute; - right: $s-2; - top: $s-2; - height: $s-28; - width: $s-28; - border-radius: $br-6; + right: deprecated.$s-2; + top: deprecated.$s-2; + height: deprecated.$s-28; + width: deprecated.$s-28; + border-radius: deprecated.$br-6; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -47,19 +47,19 @@ } .attrs-container { - padding: $s-16 $s-8; + padding: deprecated.$s-16 deprecated.$s-8; overflow: hidden; } .shape-title { - font-size: $fs-14; - padding-bottom: $s-4; + font-size: deprecated.$fs-14; + padding-bottom: deprecated.$s-4; background: var(--color-background-quaternary); color: var(--color-foreground-primary); - padding: $s-8; - border-radius: $s-8; + padding: deprecated.$s-8; + border-radius: deprecated.$s-8; display: flex; - gap: $s-4; + gap: deprecated.$s-4; } .shape-name { flex: 1; @@ -68,7 +68,7 @@ .attrs-container-attr { display: grid; grid-template-columns: 25% auto; - padding: $s-4 0; + padding: deprecated.$s-4 0; &.vertical-layout { grid-template-columns: auto; @@ -90,12 +90,12 @@ .shape-list { display: flex; flex-direction: column; - gap: $s-4; + gap: deprecated.$s-4; } .point-list { display: flex; - gap: $s-8; + gap: deprecated.$s-8; } .cell-container { diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 06888e7fa2..b9df030fd8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .history-toolbox { display: flex; @@ -13,59 +13,59 @@ } .history-toolbox-title { - @include flexCenter; - @include uppercaseTitleTipography; + @include deprecated.flexCenter; + @include deprecated.uppercaseTitleTipography; position: relative; - height: $s-32; - min-height: $s-32; - margin: $s-8 $s-8 0 $s-8; - border-radius: $br-8; + height: deprecated.$s-32; + min-height: deprecated.$s-32; + margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--panel-title-background-color); span { - @include flexCenter; + @include deprecated.flexCenter; flex-grow: 1; color: var(--title-foreground-color-hover); } } .history-entry-empty { - @include flexCenter; + @include deprecated.flexCenter; flex-direction: column; - gap: $s-16; - padding: $s-28 $s-16; + gap: deprecated.$s-16; + padding: deprecated.$s-28 deprecated.$s-16; text-align: center; } .history-entry-empty-icon { @extend .empty-icon; svg { - margin-left: calc(-1 * $s-2); + margin-left: calc(-1 * deprecated.$s-2); } } .history-entry-empty-msg { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--empty-message-foreground-color); } .history-entries { - height: calc(100vh - $s-100); - padding: $s-12; + height: calc(100vh - deprecated.$s-100); + padding: deprecated.$s-12; overflow-x: hidden; overflow-y: auto; - font-size: $fs-12; + font-size: deprecated.$fs-12; } .history-entry { display: flex; justify-content: center; flex-direction: column; - min-height: $s-32; - margin: $s-4; - padding: $s-4 $s-8; - border: $s-2 solid transparent; - border-radius: $s-8; + min-height: deprecated.$s-32; + margin: deprecated.$s-4; + padding: deprecated.$s-4 deprecated.$s-8; + border: deprecated.$s-2 solid transparent; + border-radius: deprecated.$s-8; background-color: var(--entry-background-color); cursor: pointer; transition: border 0.2s; @@ -80,11 +80,11 @@ } } .history-entry-summary-text { - margin: 0 $s-8; + margin: 0 deprecated.$s-8; color: var(--color-foreground-primary); } .history-entry-summary-button { - opacity: $op-0; + opacity: deprecated.$op-0; margin-left: auto; &.button-opened { svg { @@ -100,7 +100,7 @@ .history-entry-detail { display: block; - padding-top: $s-16; + padding-top: deprecated.$s-16; color: var(--modal-text-foreground-color); .history-entry-details-list { margin: 0; @@ -123,7 +123,7 @@ } } .history-entry-summary-button { - opacity: $op-10; + opacity: deprecated.$op-10; &.button-opened { svg { transform: rotate(90deg); diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 1981c729c0..e37644ad63 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -4,32 +4,34 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .layer-row { - --layer-indentation-size: calc(#{$s-4} * 6); + --layer-indentation-size: calc(#{deprecated.$s-4} * 6); display: flex; flex-direction: row; align-items: center; width: 100%; background-color: var(--layer-row-background-color); - border: $s-2 solid transparent; + border: deprecated.$s-2 solid transparent; &.highlight, &:hover { --context-hover-color: var(--layer-row-foreground-color-hover); - --context-hover-opacity: $op-10; + --context-hover-opacity: deprecated.$op-10; background-color: var(--layer-row-background-color-hover); color: var(--layer-row-foreground-color-hover); - box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover); + box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 + var(--layer-row-background-color-hover); &.hidden { - opacity: $op-10; + opacity: deprecated.$op-10; } } &.selected { background-color: var(--layer-row-background-color-selected); - box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected); + box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 + var(--layer-row-background-color-selected); } &.selected.highlight, @@ -39,23 +41,25 @@ .parent-selected & { background-color: var(--layer-child-row-background-color); - box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-child-row-background-color); + box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 + var(--layer-child-row-background-color); } .parent-selected &.highlight, .parent-selected &:hover { background-color: var(--layer-row-background-color-hover); - box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover); + box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 + var(--layer-row-background-color-hover); } &.dnd-over-bot { - border-bottom: $s-2 solid var(--layer-row-foreground-color-hover); + border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } &.dnd-over-top { - border-top: $s-2 solid var(--layer-row-foreground-color-hover); + border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } &.dnd-over { - border: $s-2 solid var(--layer-row-foreground-color-hover); + border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } } @@ -63,7 +67,8 @@ .layer-row.highlight &, .layer-row:hover & { background-color: var(--layer-row-background-color-selected); - box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected); + box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 + var(--layer-row-background-color-selected); } .layer-row.type-comp & { color: var(--layer-row-component-foreground-color); @@ -78,13 +83,13 @@ align-items: center; display: grid; grid-template-columns: auto 1fr auto; - column-gap: $s-4; - height: $s-32; + column-gap: deprecated.$s-4; + height: deprecated.$s-32; width: calc(100% - (var(--depth) * var(--layer-indentation-size))); cursor: pointer; &.filtered { - width: calc(100% - $s-12); + width: calc(100% - deprecated.$s-12); } } @@ -109,14 +114,14 @@ } .icon-shape { - @include flexCenter; - @include buttonStyle; + @include deprecated.flexCenter; + @include deprecated.buttonStyle; position: relative; justify-self: flex-end; - width: $s-16; + width: deprecated.$s-16; height: 100%; - width: $s-24; - padding-inline-start: $s-4; + width: deprecated.$s-24; + padding-inline-start: deprecated.$s-4; color: var(--icon-foreground); .layer-row.selected & { color: var(--layer-row-foreground-color-selected); @@ -128,11 +133,11 @@ transform: rotate(-90deg); } .layer-row.hidden & { - opacity: $op-7; + opacity: deprecated.$op-7; } .layer-row.highlight &, .layer-row:hover & { - opacity: $op-10; + opacity: deprecated.$op-10; svg { stroke: var(--layer-row-foreground-color-hover); } @@ -142,20 +147,20 @@ .absolute { position: absolute; background-color: var(--layer-row-foreground-color); - opacity: $op-4; - width: $s-12; - height: $s-12; - border-radius: $br-2; + opacity: deprecated.$op-4; + width: deprecated.$s-12; + height: deprecated.$s-12; + border-radius: deprecated.$br-2; .layer-row.hidden & { - opacity: $op-1; + opacity: deprecated.$op-1; } .layer-row.type-comp & { background-color: var(--layer-row-component-foreground-color); } .layer-row.highlight &, .layer-row:hover & { - opacity: $op-4; + opacity: deprecated.$op-4; background-color: var(--layer-row-foreground-color-hover); } .layer-row.selected & { @@ -164,20 +169,20 @@ } .toggle-content { - @include buttonStyle; + @include deprecated.buttonStyle; display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 100%; - width: $s-24; - padding-inline-start: $s-8; + width: deprecated.$s-24; + padding-inline-start: deprecated.$s-8; svg { @extend .button-icon-small; stroke: var(--icon-foreground); .layer-row.hidden & { - opacity: $op-7; + opacity: deprecated.$op-7; } .layer-row.selected & { stroke: var(--layer-row-foreground-color-selected); @@ -187,7 +192,7 @@ } .layer-row.highlight &, .layer-row:hover & { - opacity: $op-10; + opacity: deprecated.$op-10; stroke: var(--layer-row-foreground-color-hover); } } @@ -202,10 +207,10 @@ .toggle-element, .block-element { - @include buttonStyle; - @include flexCenter; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; height: 100%; - width: $s-24; + width: deprecated.$s-24; margin: 0; display: none; @@ -214,7 +219,7 @@ stroke: var(--icon-foreground); .layer-row.hidden & { - opacity: $op-7; + opacity: deprecated.$op-7; } .type-comp & { stroke: var(--layer-row-component-foreground-color); @@ -223,22 +228,22 @@ .element-actions.selected & { display: flex; - opacity: $op-0; + opacity: deprecated.$op-0; &.selected { - opacity: $op-10; + opacity: deprecated.$op-10; } } .layer-row:hover .element-actions.selected & { - opacity: $op-10; + opacity: deprecated.$op-10; } .layer-row.highlight &, .layer-row:hover & { display: flex; svg { - opacity: $op-10; + opacity: deprecated.$op-10; stroke: var(--layer-row-foreground-color-hover); } } @@ -252,15 +257,15 @@ :global(.sticky) { position: sticky; - top: $s-0; - z-index: $z-index-4; + top: deprecated.$s-0; + z-index: deprecated.$z-index-4; } .tab-indentation { display: block; - height: $s-16; + height: deprecated.$s-16; min-width: calc(var(--depth) * var(--layer-indentation-size)); } .filtered { - min-width: $s-12; + min-width: deprecated.$s-12; } 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 c55c181ae3..e2e4b1a723 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss @@ -4,15 +4,15 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-name { --element-name-color: var(--context-hover-color, var(--layer-row-foreground-color)); --element-name-comp-color: var(--context-hover-color, var(--layer-row-component-foreground-color)); - --element-name-opacity: var(--context-hover-opacity, $op-7); + --element-name-opacity: var(--context-hover-opacity, deprecated.$op-7); - @include textEllipsis; - @include bodySmallTypography; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; color: var(--element-name-color); @@ -42,21 +42,21 @@ --element-name-input-border-color: var(--input-border-color-focus); --element-name-input-color: var(--layer-row-foreground-color); - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; flex-grow: 1; - height: $s-28; + height: deprecated.$s-28; max-inline-size: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); margin: 0; - padding-inline-start: $s-6; - border-radius: $br-8; - border: $s-1 solid var(--element-name-input-border-color); + padding-inline-start: deprecated.$s-6; + border-radius: deprecated.$br-8; + border: deprecated.$s-1 solid var(--element-name-input-border-color); color: var(--element-name-input-color); &.selected { - min-inline-size: $s-100; + min-inline-size: deprecated.$s-100; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 02574cd672..1aa4b9845a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -4,36 +4,36 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .tool-window-bar { display: flex; align-items: center; justify-content: space-between; - height: $s-32; - min-height: $s-32; - margin: $s-8 0 $s-4 $s-8; - padding-right: $s-12; + height: deprecated.$s-32; + min-height: deprecated.$s-32; + margin: deprecated.$s-8 0 deprecated.$s-4 deprecated.$s-8; + padding-right: deprecated.$s-12; &.search { - padding: 0 $s-12 0 $s-8; - gap: $s-4; + padding: 0 deprecated.$s-12 0 deprecated.$s-8; + gap: deprecated.$s-4; .filter-button { - @include flexCenter; - @include buttonStyle; - height: $s-32; - width: $s-32; + @include deprecated.flexCenter; + @include deprecated.buttonStyle; + height: deprecated.$s-32; + width: deprecated.$s-32; margin: 0; - border: $s-1 solid var(--color-background-tertiary); - border-radius: $br-8 $br-2 $br-2 $br-8; + border: deprecated.$s-1 solid var(--color-background-tertiary); + border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8; background-color: var(--color-background-tertiary); svg { - height: $s-16; - width: $s-16; + height: deprecated.$s-16; + width: deprecated.$s-16; stroke: var(--icon-foreground); } &:focus { - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); outline: 0; background-color: var(--input-background-color-active); color: var(--input-foreground-color-active); @@ -42,7 +42,7 @@ } } &:hover { - border: $s-1 solid var(--input-border-color-hover); + border: deprecated.$s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); svg { background-color: var(--input-background-color-hover); @@ -57,17 +57,17 @@ } .page-name { - @include uppercaseTitleTipography; - padding: 0 $s-12; + @include deprecated.uppercaseTitleTipography; + padding: 0 deprecated.$s-12; color: var(--title-foreground-color); } .icon-search { @extend .button-tertiary; - height: $s-32; - width: $s-28; - border-radius: $br-8; - margin-right: $s-8; + height: deprecated.$s-32; + width: deprecated.$s-28; + border-radius: deprecated.$br-8; + margin-right: deprecated.$s-8; padding: 0; svg { @extend .button-icon; @@ -76,7 +76,7 @@ } .focus-title { - @include buttonStyle; + @include deprecated.buttonStyle; display: grid; grid-template-columns: auto 1fr auto; align-items: center; @@ -85,10 +85,10 @@ } .back-button { - @include flexCenter; - height: $s-32; - width: $s-24; - padding: 0 $s-4 0 $s-8; + @include deprecated.flexCenter; + height: deprecated.$s-32; + width: deprecated.$s-24; + padding: 0 deprecated.$s-4 0 deprecated.$s-8; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -97,30 +97,30 @@ } .focus-name { - @include textEllipsis; - @include bodySmallTypography; - padding-left: $s-4; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + padding-left: deprecated.$s-4; color: var(--title-foreground-color); } .focus-mode-tag-wrapper { - @include flexCenter; + @include deprecated.flexCenter; height: 100%; - margin-right: $s-12; + margin-right: deprecated.$s-12; } .active-filters { - @include flexRow; + @include deprecated.flexRow; flex-wrap: wrap; - margin: 0 $s-12; + margin: 0 deprecated.$s-12; } .layer-filter { @extend .button-tag; - gap: $s-6; - height: $s-24; - margin: $s-2 0; - border-radius: $br-6; + gap: deprecated.$s-6; + height: deprecated.$s-24; + margin: deprecated.$s-2 0; + border-radius: deprecated.$br-6; background-color: var(--pill-background-color); cursor: pointer; } @@ -131,8 +131,8 @@ } .layer-filter-name { - @include flexCenter; - @include bodySmallTypography; + @include deprecated.flexCenter; + @include deprecated.bodySmallTypography; color: var(--pill-foreground-color); } @@ -143,26 +143,26 @@ .filters-container { @extend .menu-dropdown; position: absolute; - left: $s-20; - width: $s-192; + left: deprecated.$s-20; + width: deprecated.$s-192; .filter-menu-item { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; justify-content: space-between; width: 100%; - padding: $s-6; - border-radius: $br-8; + padding: deprecated.$s-6; + border-radius: deprecated.$br-8; .filter-menu-item-name-wrapper { display: flex; align-items: center; - gap: $s-8; + gap: deprecated.$s-8; .filter-menu-item-icon { color: var(--menu-foreground-color); } .filter-menu-item-name { - padding-top: $s-2; + padding-top: deprecated.$s-2; color: var(--menu-foreground-color); } } @@ -203,7 +203,7 @@ } .tool-window-content { - --calculated-height: calc(#{$s-136} + var(--height, #{$s-200})); + --calculated-height: calc(#{deprecated.$s-136} + var(--height, #{deprecated.$s-200})); display: flex; flex-direction: column; height: calc(100vh - var(--calculated-height)); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss index bdc584e905..0967561672 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "ds/_sizes.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .tool-window { position: relative; @@ -15,23 +15,23 @@ } .tab-spacing { - margin-right: $s-12; + margin-right: deprecated.$s-12; } .content-class { overflow-y: auto; overflow-x: hidden; - height: calc(100vh - $s-96); + height: calc(100vh - deprecated.$s-96); scrollbar-gutter: stable; } .element-options { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; width: 100%; height: calc(100vh - $sz-88); - padding-top: $s-8; + padding-top: deprecated.$s-8; } .read-only { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.scss b/frontend/src/app/main/ui/workspace/sidebar/options/common.scss index a1ef518b76..eda06842b0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.scss @@ -4,8 +4,8 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .advanced-options-wrapper { - @include flexColumn; + @include deprecated.flexColumn; } 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 851b7172b1..c435bfae64 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 @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "ds/_sizes.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .presets { display: grid; @@ -19,12 +19,12 @@ position: relative; grid-column: span 6; display: flex; - height: $s-32; - padding: $s-8; - border-radius: $br-8; + height: deprecated.$s-32; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; .collapsed-icon { - @include flexCenter; + @include deprecated.flexCenter; cursor: pointer; svg { @extend .button-icon-small; @@ -45,7 +45,7 @@ } .select-name { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; justify-content: flex-start; align-items: center; @@ -55,14 +55,14 @@ .custom-select-dropdown { @extend .dropdown-wrapper; - margin-top: $s-2; + margin-top: deprecated.$s-2; max-height: 70vh; - width: $s-252; + width: deprecated.$s-252; .dropdown-element { @extend .dropdown-element-base; .name-wrapper { display: flex; - gap: $s-8; + gap: deprecated.$s-8; flex-grow: 1; .preset-name { color: var(--menu-foreground-color-rest); @@ -73,7 +73,7 @@ } .check-icon { - @include flexCenter; + @include deprecated.flexCenter; svg { @extend .button-icon-small; stroke: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss index 8e4b5462c3..17a8224454 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss @@ -4,13 +4,13 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .align-options { display: grid; grid-template-columns: repeat(8, var(--sp-xxxl)); column-gap: var(--sp-xs); - height: $s-32; + height: deprecated.$s-32; } .align-group-horizontal, .align-group-vertical { @@ -30,10 +30,10 @@ .align-button { @extend .button-tertiary; - height: $s-32; - width: $s-32; + height: deprecated.$s-32; + width: deprecated.$s-32; padding: 0; - border-radius: $br-8; + border-radius: deprecated.$br-8; svg { @extend .button-icon; stroke: var(--icon-foreground); 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 5ff2f2d4f5..addc9bbff9 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 @@ -4,20 +4,20 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; } .title-spacing-blur { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } .element-set-content { - @include flexColumn; - margin-bottom: $s-8; + @include deprecated.flexColumn; + margin-bottom: deprecated.$s-8; } .first-row { @@ -29,17 +29,17 @@ grid-column: span 6; display: flex; align-items: center; - gap: $s-1; + gap: deprecated.$s-1; flex-grow: 1; - border-radius: $br-8; + border-radius: deprecated.$br-8; background-color: var(--input-details-color); .show-more { @extend .button-secondary; - height: $s-32; - width: $s-28; - border-radius: $br-8 0 0 $br-8; + height: deprecated.$s-32; + width: deprecated.$s-28; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; box-sizing: border-box; - border: $s-1 solid var(--button-secondary-background-color-rest); + border: deprecated.$s-1 solid var(--button-secondary-background-color-rest); svg { @extend .button-icon; } @@ -51,33 +51,33 @@ } } .label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; flex-grow: 1; display: flex; align-items: center; - height: $s-32; - padding: 0 $s-8; - border-radius: 0 $br-8 $br-8 0; + height: deprecated.$s-32; + padding: 0 deprecated.$s-8; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; background-color: var(--input-background-color); color: var(--menu-foreground-color); box-sizing: border-box; - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); } } .actions { - @include flexRow; + @include deprecated.flexRow; } &.hidden { .blur-info { - @include hiddenElement; + @include deprecated.hiddenElement; .show-more { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } .label { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } } } @@ -85,10 +85,10 @@ .second-row { @extend .input-element; - @include bodySmallTypography; - width: $s-92; + @include deprecated.bodySmallTypography; + width: deprecated.$s-92; .label { - padding-left: $s-8; - width: $s-60; + padding-left: deprecated.$s-8; + width: deprecated.$s-60; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss index 52487c51c6..ab0f18d00e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .boolean-options { display: grid; @@ -21,9 +21,9 @@ .flatten-button { @extend .button-tertiary; - height: $s-32; - width: $s-32; - border-radius: $br-8; + height: deprecated.$s-32; + width: deprecated.$s-32; + border-radius: deprecated.$br-8; grid-column: 5 / span 1; --flatten-icon-foreground-color: var(--icon-foreground); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss index 10bf582061..65a421790c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .radius { display: grid; @@ -14,7 +14,7 @@ .radius-1 { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } .radius-4 { @@ -25,7 +25,7 @@ .small-input { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } .selected { @@ -35,5 +35,5 @@ } .icon { - margin-inline: $s-4; + margin-inline: deprecated.$s-4; } 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 0527ccb8dc..85d92a6ab2 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 @@ -4,37 +4,37 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; } .title-spacing-selected-colors { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } .add-fill { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon; } } .element-content { - @include flexColumn; - margin-bottom: $s-8; + @include deprecated.flexColumn; + margin-bottom: deprecated.$s-8; } .selected-color-group { - @include flexColumn; + @include deprecated.flexColumn; } .more-colors-btn { @extend .button-secondary; - @include uppercaseTitleTipography; - height: $s-32; + @include deprecated.uppercaseTitleTipography; + height: deprecated.$s-32; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 8d6309a1c7..2da6699ac3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as t; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; @@ -15,12 +15,12 @@ } .element-content { - @include flexColumn; + @include deprecated.flexColumn; display: grid; grid-template-columns: repeat(8, var(--sp-xxxl)); row-gap: var(--sp-m); - padding-top: $s-4; - padding-bottom: $s-8; + padding-top: deprecated.$s-4; + padding-bottom: deprecated.$s-8; } .element-title { @@ -30,15 +30,15 @@ } .title-back { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; align-items: center; - gap: $s-4; + gap: deprecated.$s-4; width: 100%; - height: $s-32; + height: deprecated.$s-32; padding: 0; border: 0; - border-radius: $br-8; + border-radius: deprecated.$br-8; background-color: var(--title-background-color); color: var(--title-foreground-color); cursor: pointer; @@ -46,7 +46,7 @@ .title-spacing-component { justify-content: flex-start; - gap: $s-8; + gap: deprecated.$s-8; flex-grow: 1; } @@ -62,8 +62,8 @@ .component-line { grid-column: span 8; width: 100%; - min-height: $s-32; - border-radius: $br-8; + min-height: deprecated.$s-32; + border-radius: deprecated.$br-8; display: flex; gap: var(--sp-xs); } @@ -71,28 +71,28 @@ .component-wrapper { display: flex; flex-grow: 1; - gap: $s-1; + gap: deprecated.$s-1; } .component-name-wrapper { - @include buttonStyle; + @include deprecated.buttonStyle; cursor: default; flex-grow: 1; display: grid; - grid-template-columns: $s-16 1fr; - gap: $s-4; - padding: 0 $s-8; - border-radius: $br-8 0 0 $br-8; + grid-template-columns: deprecated.$s-16 1fr; + gap: deprecated.$s-4; + padding: 0 deprecated.$s-8; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; background-color: var(--assets-item-background-color); color: var(--assets-item-name-foreground-color-hover); &.without-menu { width: 100%; - border-radius: $br-8; + border-radius: deprecated.$br-8; } &:focus { - outline: $s-1 solid var(--color-accent-primary); + outline: deprecated.$s-1 solid var(--color-accent-primary); } &:hover:not(:disabled) { @@ -103,26 +103,26 @@ .component-icon { display: flex; - height: $s-32; + height: deprecated.$s-32; align-items: center; color: var(--icon-foreground); } .component-name-outside { - @include flexColumn; - min-height: $s-32; - padding: $s-8 0 $s-8 $s-2; - border-radius: $br-8 0 0 $br-8; + @include deprecated.flexColumn; + min-height: deprecated.$s-32; + padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-2; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; overflow: hidden; gap: 0; } .component-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; direction: rtl; text-align: left; - height: $s-16; + height: deprecated.$s-16; } .component-name-inside { @@ -131,18 +131,18 @@ } .component-parent-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; direction: rtl; text-align: left; - height: $s-16; - max-width: $s-184; + height: deprecated.$s-16; + max-width: deprecated.$s-184; color: var(--title-foreground-color); } .component-actions { position: relative; - width: $s-32; + width: deprecated.$s-32; } .component-menu-btn { @@ -150,7 +150,7 @@ cursor: unset; height: 100%; width: 100%; - border-radius: 0 $br-8 $br-8 0; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; &.selected { @extend .button-icon-selected; @@ -158,7 +158,7 @@ } .copy-text { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; height: 100%; display: flex; align-items: center; @@ -169,11 +169,11 @@ @extend .dropdown-wrapper; right: 0; left: unset; - width: $s-252; + width: deprecated.$s-252; } .not-main { - top: $s-48; + top: deprecated.$s-48; } .dropdown-element { @@ -183,9 +183,9 @@ .component-path { display: flex; align-items: center; - gap: $s-4; + gap: deprecated.$s-4; width: 100%; - height: $s-32; + height: deprecated.$s-32; padding: 0; border: 0; background-color: var(--title-background-color); @@ -194,57 +194,57 @@ } .path-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; direction: rtl; - height: $s-32; - padding: $s-8 0 $s-8 $s-2; - margin-right: $s-4; + height: deprecated.$s-32; + padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-2; + margin-right: deprecated.$s-4; } .component-list-empty { - @include bodySmallTypography; - margin: 0 $s-4 0 $s-8; + @include deprecated.bodySmallTypography; + margin: 0 deprecated.$s-4 0 deprecated.$s-8; color: var(--color-foreground-secondary); } .component-item { display: flex; align-items: center; - margin-bottom: $s-4; - padding: $s-1 $s-8 $s-1 $s-1; - gap: $s-8; - font-size: $s-12; + margin-bottom: deprecated.$s-4; + padding: deprecated.$s-1 deprecated.$s-8 deprecated.$s-1 deprecated.$s-1; + gap: deprecated.$s-8; + font-size: deprecated.$s-12; cursor: pointer; width: 100%; - height: $s-44; - border-radius: $br-8; + height: deprecated.$s-44; + border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color); color: var(--assets-item-name-foreground-color); - border: $s-1 solid transparent; + border: deprecated.$s-1 solid transparent; .variant-icon { background-color: none; - padding: $s-2; - flex: 0 0 $s-16; + padding: deprecated.$s-2; + flex: 0 0 deprecated.$s-16; } .component-name { - @include textEllipsis; + @include deprecated.textEllipsis; width: 80%; } .component-img { - flex: 0 0 $s-40; + flex: 0 0 deprecated.$s-40; background-color: var(--assets-component-background-color); - border-radius: $br-6; - height: $s-40; - width: $s-40; - padding: $s-2; + border-radius: deprecated.$br-6; + height: deprecated.$s-40; + width: deprecated.$s-40; + padding: deprecated.$s-2; } &.selected { - border: $s-1 solid var(--assets-item-border-color); + border: deprecated.$s-1 solid var(--assets-item-border-color); } &:hover { @@ -265,18 +265,18 @@ .component-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr)); - gap: $s-4; + grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-96, 1fr)); + gap: deprecated.$s-4; } .grid-cell { - @include flexCenter; + @include deprecated.flexCenter; place-items: center; aspect-ratio: 1 / 1; flex-wrap: wrap; position: relative; - padding: $s-8; - border-radius: $br-8; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--assets-component-background-color); overflow: hidden; cursor: pointer; @@ -301,19 +301,19 @@ } .component-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; display: none; position: absolute; - left: $s-4; - bottom: $s-4; - height: calc($s-24 - $s-2); - width: calc(100% - 2 * $s-4); - padding: $s-2 $s-6; - column-gap: $s-4; - border-radius: $br-4; + left: deprecated.$s-4; + bottom: deprecated.$s-4; + height: calc(deprecated.$s-24 - deprecated.$s-2); + width: calc(100% - 2 * deprecated.$s-4); + padding: deprecated.$s-2 deprecated.$s-6; + column-gap: deprecated.$s-4; + border-radius: deprecated.$br-4; background-color: var(--assets-item-name-background-color); - border: $s-1 solid transparent; + border: deprecated.$s-1 solid transparent; color: var(--assets-item-name-foreground-color); direction: rtl; } @@ -325,7 +325,7 @@ } &.selected { - border: $s-2 solid var(--assets-item-border-color); + border: deprecated.$s-2 solid var(--assets-item-border-color); &::before { content: " "; @@ -334,8 +334,8 @@ left: 0; right: 0; bottom: 0; - border: $s-4 solid var(--assets-component-second-border-selected); - border-radius: $br-8; + border: deprecated.$s-4 solid var(--assets-component-second-border-selected); + border-radius: deprecated.$br-8; } .component-name { @@ -363,36 +363,36 @@ } .element-set-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; align-items: center; - height: $s-32; - padding-left: $s-2; + height: deprecated.$s-32; + padding-left: deprecated.$s-2; color: var(--title-foreground-color); } // Component swap .component-swap { - padding-top: $s-12; + padding-top: deprecated.$s-12; grid-column: span 8; } .component-swap-content { - @include flexColumn; - gap: $s-16; + @include deprecated.flexColumn; + gap: deprecated.$s-16; } .fields-wrapper { - @include flexColumn; - gap: $s-4; + @include deprecated.flexColumn; + gap: deprecated.$s-4; } .search-field { display: flex; align-items: center; - height: $s-32; - border-radius: $br-8; + height: deprecated.$s-32; + border-radius: deprecated.$br-8; font-family: "worksans", "vazirmatn", sans-serif; background-color: var(--input-background-color); } @@ -403,15 +403,15 @@ } .library-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; color: var(--title-foreground-color); - padding: $s-8 0 $s-8 $s-2; + padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-2; } .swap-wrapper { - @include flexColumn; - gap: $s-4; + @include deprecated.flexColumn; + gap: deprecated.$s-4; } .listing-options-wrapper { @@ -424,15 +424,15 @@ } .component-group { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: grid; - grid-template-columns: 1fr $s-12; - height: $s-32; + grid-template-columns: 1fr deprecated.$s-12; + height: deprecated.$s-32; cursor: pointer; align-items: center; .component-group-name { - @include textEllipsis; + @include deprecated.textEllipsis; color: var(--assets-item-name-foreground-color); } @@ -451,12 +451,12 @@ .path-wrapper { display: flex; - max-width: $s-232; - padding: $s-8 0 $s-8 $s-2; + max-width: deprecated.$s-232; + padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-2; } .component-group-path { - @include textEllipsis; + @include deprecated.textEllipsis; direction: rtl; color: var(--assets-item-name-foreground-color-rest); } @@ -464,18 +464,18 @@ // Component annotation .component-annotation { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; grid-column: span 8; color: var(--entry-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; .annotation-title { display: flex; align-items: center; - height: $s-32; + height: deprecated.$s-32; &.expanded { - border-bottom: $s-1 solid var(--entry-border-color-disabled); + border-bottom: deprecated.$s-1 solid var(--entry-border-color-disabled); } &.expandeable { @@ -489,9 +489,9 @@ } .icon-arrow { - @include flexCenter; - width: $s-28; - height: $s-32; + @include deprecated.flexCenter; + width: deprecated.$s-28; + height: deprecated.$s-32; display: flex; margin: 0; padding: 0; @@ -500,8 +500,8 @@ svg { @extend .button-icon; stroke: var(--icon-foreground); - width: $s-16; - height: $s-16; + width: deprecated.$s-16; + height: deprecated.$s-16; } &.expanded svg { @@ -510,10 +510,10 @@ } .icon { - @include flexCenter; - width: $s-28; - height: $s-32; - border-radius: $br-8; + @include deprecated.flexCenter; + width: deprecated.$s-28; + height: deprecated.$s-32; + border-radius: deprecated.$br-8; display: none; margin: 0; padding: 0; @@ -522,8 +522,8 @@ svg { @extend .button-icon; stroke: var(--icon-foreground); - width: $s-16; - height: $s-16; + width: deprecated.$s-16; + height: deprecated.$s-16; } &.icon-tick:hover, @@ -551,7 +551,7 @@ .annotation-text { flex-grow: 1; - margin-left: $s-12; + margin-left: deprecated.$s-12; } &:hover { @@ -562,10 +562,10 @@ } &.editing { - border: $s-1 solid var(--input-border-color-success); + border: deprecated.$s-1 solid var(--input-border-color-success); .annotation-title { - border-bottom: $s-1 solid var(--entry-border-color-disabled); + border-bottom: deprecated.$s-1 solid var(--entry-border-color-disabled); .icon { display: flex; @@ -573,19 +573,19 @@ } textarea { - min-height: $s-252; + min-height: deprecated.$s-252; } } &.creating { - border: $s-1 solid var(--input-border-color-success); + border: deprecated.$s-1 solid var(--input-border-color-success); .annotation-title .icon { display: flex; } textarea { - min-height: $s-252; + min-height: deprecated.$s-252; } } @@ -598,10 +598,10 @@ } .counter { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; text-align: right; color: var(--entry-foreground-color); - margin: 0 $s-8 $s-8 0; + margin: 0 deprecated.$s-8 deprecated.$s-8 0; } // Auto growing text @@ -619,7 +619,7 @@ textarea { background-color: var(--input-background-color-active); color: var(--input-foreground-color-active); - padding: $s-12; + padding: deprecated.$s-12; border: none; overflow: hidden; @@ -648,7 +648,7 @@ } .variant-property-row { - @include flexRow; + @include deprecated.flexRow; justify-content: space-between; width: 100%; } @@ -687,15 +687,15 @@ } .variant-warning-wrapper { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; grid-column: span 8; border: 1px solid var(--color-background-quaternary); - border-radius: $s-8; - padding: $s-12; + border-radius: deprecated.$s-8; + padding: deprecated.$s-12; display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; } .variant-warning-highlight { @@ -707,7 +707,7 @@ } .variant-warning-button { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; background-color: transparent; border: none; appearance: none; @@ -718,29 +718,29 @@ } .variant-icon { - @include flexCenter; - height: $s-24; - width: $s-24; + @include deprecated.flexCenter; + height: deprecated.$s-24; + width: deprecated.$s-24; color: var(--color-accent-secondary); - border-radius: $s-8; + border-radius: deprecated.$s-8; } .variant-mark-cell { position: absolute; - right: $s-2; - top: $s-2; + right: deprecated.$s-2; + top: deprecated.$s-2; } .combine-variant-button { - @include buttonStyle; - @include uppercaseTitleTipography; + @include deprecated.buttonStyle; + @include deprecated.uppercaseTitleTipography; grid-column: span 8; cursor: default; display: flex; justify-content: center; align-items: center; - padding: $s-8; - border-radius: $br-8; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color); color: var(--color-foreground-secondary); cursor: pointer; @@ -751,6 +751,6 @@ } &:focus { - outline: $s-1 solid var(--color-accent-primary); + outline: deprecated.$s-1 solid var(--color-accent-primary); } } 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 caf44de476..50fffa78ac 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 @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; @@ -12,21 +12,21 @@ .element-set-content { display: flex; - gap: $s-4; + gap: deprecated.$s-4; } .constraints-widget { background-color: var(--constraint-widget-background-color); display: grid; - grid-template-columns: $s-24 $s-60 $s-24; - grid-template-rows: $s-24 $s-60 $s-24; + grid-template-columns: deprecated.$s-24 deprecated.$s-60 deprecated.$s-24; + grid-template-rows: deprecated.$s-24 deprecated.$s-60 deprecated.$s-24; grid-template-areas: "top top top" "left center right" "bottom bottom bottom"; - height: $s-108; - width: $s-108; - border-radius: $br-8; + height: deprecated.$s-108; + width: deprecated.$s-108; + border-radius: deprecated.$br-8; } .constraints-top, @@ -34,14 +34,14 @@ .constraints-center, .constraints-right, .constraints-bottom { - @include flexCenter; + @include deprecated.flexCenter; grid-area: top; } .constraint-btn, .constraint-btn-special, .constraint-btn-rotated { - @include buttonStyle; - @include flexCenter; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; width: 100%; height: 100%; --resalted-area-background-color: var(--button-constraint-background-color-rest); @@ -58,11 +58,11 @@ } .resalted-area { - width: $s-32; - height: $s-3; - border-radius: $br-8; + width: deprecated.$s-32; + height: deprecated.$s-3; + border-radius: deprecated.$br-8; background-color: var(--resalted-area-background-color); - outline: $s-4 solid var(--resalted-area-border-color); + outline: deprecated.$s-4 solid var(--resalted-area-border-color); padding: 0; margin: 0; } @@ -70,11 +70,11 @@ .constraints-left { grid-area: left; .constraint-btn-rotated { - height: $s-60; - width: $s-24; + height: deprecated.$s-60; + width: deprecated.$s-24; .resalted-area { - height: $s-32; - width: $s-3; + height: deprecated.$s-32; + width: deprecated.$s-3; } } } @@ -83,22 +83,22 @@ grid-area: center; position: relative; background-color: var(--constraint-center-area-background-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; .constraint-btn { - width: $s-60; - height: $s-24; + width: deprecated.$s-60; + height: deprecated.$s-24; .resalted-area { - width: $s-32; - height: $s-3; + width: deprecated.$s-32; + height: deprecated.$s-3; } } .constraint-btn-special { position: absolute; - height: $s-60; - width: $s-24; + height: deprecated.$s-60; + width: deprecated.$s-24; .resalted-area { - height: $s-32; - width: $s-3; + height: deprecated.$s-32; + width: deprecated.$s-3; } } } @@ -106,11 +106,11 @@ .constraints-right { grid-area: right; .constraint-btn-rotated { - height: $s-72; - width: $s-24; + height: deprecated.$s-72; + width: deprecated.$s-24; .resalted-area { - height: $s-32; - width: $s-3; + height: deprecated.$s-32; + width: deprecated.$s-3; } } } @@ -120,37 +120,37 @@ } .constraints-selects { - @include flexColumn; + @include deprecated.flexColumn; } .horizontal-select, .vertical-select { - width: $s-124; + width: deprecated.$s-124; padding: 0; } .checkbox { display: flex; align-items: center; - margin-bottom: $s-8; - margin-top: $s-8; + margin-bottom: deprecated.$s-8; + margin-top: deprecated.$s-8; padding-left: 0; input { margin: 0; } label { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; - gap: $s-2; + gap: deprecated.$s-2; cursor: pointer; color: var(--input-checkbox-text-foreground-color); .check-mark { - @include flexCenter; - width: $s-16; - height: $s-16; - border-radius: $br-6; + @include deprecated.flexCenter; + width: deprecated.$s-16; + height: deprecated.$s-16; + border-radius: deprecated.$br-6; background-color: var(--input-checkbox-inactive-background-color); &.checked { background-color: var(--input-checkbox-background-color-active); 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 5ba3dcefb1..0a1515b931 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 @@ -4,14 +4,14 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; } .title-spacing-export { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } @@ -22,13 +22,13 @@ } .multiple-exports { - @include flexRow; + @include deprecated.flexRow; grid-column: 1 / span 9; .label { @extend .mixed-bar; } .actions { - @include flexRow; + @include deprecated.flexRow; } } @@ -49,8 +49,8 @@ padding: 0; .dropdown-upwards { - bottom: $s-36; - width: $s-80; + bottom: deprecated.$s-36; + width: deprecated.$s-80; top: unset; } } @@ -59,21 +59,21 @@ grid-column: span 2; padding: 0; .dropdown-upwards { - bottom: $s-36; + bottom: deprecated.$s-36; top: unset; - width: $s-80; + width: deprecated.$s-80; } } .suffix-input { grid-column: span 3; @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } .export-btn { @extend .button-secondary; - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; grid-column: 1 / span 9; - height: $s-32; + height: deprecated.$s-32; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss index 6ab4b2d2bf..a1fb4b0483 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; @@ -15,19 +15,19 @@ } .title-spacing-fill { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } .element-content { display: flex; flex-direction: column; - gap: $s-12; - margin: $s-4 0 $s-8 0; + gap: deprecated.$s-12; + margin: deprecated.$s-4 0 deprecated.$s-8 0; } .element-set-options-group { - @include flexRow; + @include deprecated.flexRow; } .group-label { @@ -36,7 +36,7 @@ .checkbox { @extend .input-checkbox; - padding-left: $s-8; + padding-left: deprecated.$s-8; span.checked { background-color: var(--input-border-color-active); svg { 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 dd8c6e2314..85b2b54649 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 @@ -4,42 +4,42 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; } .title-spacing-board-grid { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } .element-set-content { - @include flexColumn; - margin: $s-4 0 $s-8 0; + @include deprecated.flexColumn; + margin: deprecated.$s-4 0 deprecated.$s-8 0; } .grid-title { display: grid; grid-template-columns: repeat(8, var(--sp-xxxl)); - gap: $s-4; + gap: deprecated.$s-4; } .option-row { grid-column: span 6; display: flex; align-items: center; - gap: $s-1; - border-radius: $br-8; + gap: deprecated.$s-1; + border-radius: deprecated.$br-8; background-color: var(--input-details-color); .show-options { @extend .button-secondary; - height: $s-32; - width: $s-28; - border-radius: $br-8 0 0 $br-8; + height: deprecated.$s-32; + width: deprecated.$s-28; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; box-sizing: border-box; - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); svg { @extend .button-icon; } @@ -49,52 +49,52 @@ } .type-select-wrapper { flex-grow: 1; - width: $s-96; + width: deprecated.$s-96; padding: 0; border-radius: 0; - height: $s-32; + height: deprecated.$s-32; .grid-type-select { border-radius: 0; height: 100%; box-sizing: border-box; - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); &:hover { - border: $s-1 solid var(--input-border-color-hover); + border: deprecated.$s-1 solid var(--input-border-color-hover); } } } .grid-size { @extend .asset-element; - width: $s-60; + width: deprecated.$s-60; margin: 0; padding: 0; - padding-left: $s-8; - border-radius: 0 $br-8 $br-8 0; + padding-left: deprecated.$s-8; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; .numeric-input { @extend .input-base; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } } .editable-select-wrapper { @extend .asset-element; - width: $s-60; + width: deprecated.$s-60; margin: 0; padding: 0; position: relative; - border-radius: 0 $br-8 $br-8 0; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; .column-select { - height: $s-32; - border-radius: 0 $br-8 $br-8 0; + height: deprecated.$s-32; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; box-sizing: border-box; - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); .numeric-input { @extend .input-base; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; margin: 0; padding: 0; } span { - @include flexCenter; + @include deprecated.flexCenter; svg { @extend .button-icon; } @@ -104,28 +104,28 @@ &.hidden { .show-options { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } .type-select-wrapper, .editable-select-wrapper { - @include hiddenElement; + @include deprecated.hiddenElement; .column-select, .grid-type-select { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } .column-select { - @include hiddenElement; - border-radius: 0 $br-8 $br-8 0; + @include deprecated.hiddenElement; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; .numeric-input { - @include hiddenElement; + @include deprecated.hiddenElement; } } } .grid-size { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); .icon { stroke: var(--input-foreground-color-disabled); } @@ -146,36 +146,36 @@ } .actions { - @include flexRow; + @include deprecated.flexRow; grid-column: span 2; } .grid-advanced-options { - @include flexColumn; - margin-top: $s-4; + @include deprecated.flexColumn; + margin-top: deprecated.$s-4; } .column-row, .square-row { - @include flexColumn; + @include deprecated.flexColumn; position: relative; } .advanced-row { position: relative; display: flex; - gap: $s-4; + gap: deprecated.$s-4; .orientation-select-wrapper { - width: $s-92; + width: deprecated.$s-92; padding: 0; } .color-wrapper { - width: $s-156; + width: deprecated.$s-156; } .show-more-options { @extend .button-tertiary; - height: $s-32; - width: $s-32; + height: deprecated.$s-32; + width: deprecated.$s-32; svg { @extend .button-icon; } @@ -185,15 +185,15 @@ } .height { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; .icon-text { - padding-top: $s-1; + padding-top: deprecated.$s-1; } } .gutter, .margin { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; .icon { &.rotated svg { transform: rotate(90deg); @@ -202,27 +202,27 @@ } .more-options { - @include menuShadow; - @include flexColumn; + @include deprecated.menuShadow; + @include deprecated.flexColumn; position: absolute; - top: calc($s-2 + $s-28); + top: calc(deprecated.$s-2 + deprecated.$s-28); right: 0; - width: $s-156; - max-height: $s-300; - padding: $s-2; - margin: 0 0 $s-40 0; - margin-top: $s-4; - border-radius: $br-8; - z-index: $z-index-4; + width: deprecated.$s-156; + max-height: deprecated.$s-300; + padding: deprecated.$s-2; + margin: 0 0 deprecated.$s-40 0; + margin-top: deprecated.$s-4; + border-radius: deprecated.$br-8; + z-index: deprecated.$z-index-4; overflow-y: auto; background-color: var(--menu-background-color); .option-btn { - @include buttonStyle; + @include deprecated.buttonStyle; display: flex; align-items: center; - height: $s-32; - padding: 0 $s-8; - border-radius: $br-6; + height: deprecated.$s-32; + padding: 0 deprecated.$s-8; + border-radius: deprecated.$br-6; color: var(--menu-foreground-color); &:hover { @@ -237,9 +237,9 @@ @extend .dropdown-wrapper; left: unset; right: 0; - width: $s-108; + width: deprecated.$s-108; .btn-options { - @include buttonStyle; + @include deprecated.buttonStyle; @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 5f2089204a..fb1ecf38c9 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 @@ -4,44 +4,44 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .grid-cell-menu-container { - @include flexColumn; - margin-top: $s-8; - gap: $s-16; + @include deprecated.flexColumn; + margin-top: deprecated.$s-8; + gap: deprecated.$s-16; } .grid-cell-menu-title { - font-size: $fs-11; + font-size: deprecated.$fs-11; } .row { - @include flexRow; + @include deprecated.flexRow; } .cell-mode :global(label) { - padding: 0 $s-12; + padding: 0 deprecated.$s-12; } .edit-grid-btn { @extend .button-secondary; - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; width: 100%; - padding: $s-8; + padding: deprecated.$s-8; } .area-input { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; width: 100%; - padding: $s-8; + padding: deprecated.$s-8; } .grid-coord-group { - @include flexRow; - border-radius: $br-8; - padding-left: $s-4; + @include deprecated.flexRow; + border-radius: deprecated.$br-8; + padding-left: deprecated.$s-4; background-color: var(--input-background-color); } @@ -52,7 +52,7 @@ .coord-input { @extend .input-element; - @include bodySmallTypography; - border-radius: 0 $br-8 $br-8 0; - border-left: $s-1 solid var(--panel-background-color); + @include deprecated.bodySmallTypography; + 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/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index ae0d95ca39..313f5a4a2f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -4,22 +4,22 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .interactions-content { display: flex; flex-direction: column; - gap: $s-8; + gap: deprecated.$s-8; padding-left: var(--sp-m); } .interaction-options { - @include flexColumn; + @include deprecated.flexColumn; } .help-content { - padding: $s-32 0; - width: $s-200; + padding: deprecated.$s-32 0; + width: deprecated.$s-200; margin: 0 auto; } @@ -27,37 +27,37 @@ display: flex; flex-direction: column; align-items: center; - margin-bottom: $s-40; - gap: $s-12; + margin-bottom: deprecated.$s-40; + gap: deprecated.$s-12; } .interactions-help-icon { - @include flexCenter; - width: $s-48; - height: $s-48; - border-radius: $br-circle; + @include deprecated.flexCenter; + width: deprecated.$s-48; + height: deprecated.$s-48; + border-radius: deprecated.$br-circle; background-color: var(--pill-background-color); svg { @extend .button-icon; stroke: var(--icon-foreground); - height: $s-32; - width: $s-32; + height: deprecated.$s-32; + width: deprecated.$s-32; } } .after { - @include bodySmallTypography; - margin-top: $s-1; + @include deprecated.bodySmallTypography; + margin-top: deprecated.$s-1; } .interactions-help { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; text-align: center; color: var(--title-foreground-color); } .element-set { - @include flexColumn; + @include deprecated.flexColumn; } .interactions-info { @@ -71,27 +71,27 @@ .action-summary { color: var(--color-foreground-secondary); - @include textEllipsis; + @include deprecated.textEllipsis; } .groups { - @include flexColumn($s-12); + @include deprecated.flexColumn(deprecated.$s-12); } .element-set-options-group-open { - @include flexColumn; + @include deprecated.flexColumn; } .extended-options { - @include flexColumn; + @include deprecated.flexColumn; } .property-list { list-style: none; margin: 0; display: grid; - row-gap: $s-16; - margin-block: calc(#{$s-16} - #{$s-4}); + row-gap: deprecated.$s-16; + margin-block: calc(#{deprecated.$s-16} - #{deprecated.$s-4}); } .property-row { @@ -101,10 +101,10 @@ height: 100%; } .interaction-name { - @include twoLineTextEllipsis; - @include bodySmallTypography; - padding-left: $s-4; - width: $s-92; + @include deprecated.twoLineTextEllipsis; + @include deprecated.bodySmallTypography; + padding-left: deprecated.$s-4; + width: deprecated.$s-92; margin: auto 0; grid-area: name; color: var(--title-foreground-color); @@ -114,18 +114,18 @@ align-items: center; grid-area: content; .easing-select { - width: $s-156; - padding: 0 $s-8; + width: deprecated.$s-156; + padding: 0 deprecated.$s-8; .dropdown-upwards { - bottom: $s-36; - width: $s-156; + bottom: deprecated.$s-36; + width: deprecated.$s-156; top: unset; } } } .input-element-wrapper { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; grid-area: content; } .buttons-wrapper { @@ -142,7 +142,7 @@ } .inputs-wrapper { grid-area: content; - @include flexRow; + @include deprecated.flexRow; .radio-btn { @extend .input-checkbox; } @@ -158,9 +158,9 @@ "bottomleft bottom bottomright"; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); - width: $s-84; - height: $s-84; - border-radius: $br-8; + width: deprecated.$s-84; + height: deprecated.$s-84; + border-radius: deprecated.$br-8; background-color: var(--color-background-tertiary); .center-btn { grid-area: center; @@ -187,8 +187,8 @@ .direction-btn { @extend .button-tertiary; - height: $s-28; - width: $s-28; + height: deprecated.$s-28; + width: deprecated.$s-28; &.active { @extend .button-icon-selected; @@ -206,14 +206,14 @@ .interactions-summary { @extend .asset-element; - height: $s-44; + height: deprecated.$s-44; padding: 0; - gap: $s-8; + gap: deprecated.$s-8; .remove-btn { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon-small; } @@ -224,7 +224,7 @@ @extend .button-tertiary; --button-tertiary-border-width: var(--expand-button-icon-border-width); height: 100%; - width: $s-28; + width: deprecated.$s-28; border-end-end-radius: 0; border-start-end-radius: 0; padding: 0; @@ -239,7 +239,7 @@ left: 0; right: 0; bottom: 0; - border-inline-end: $s-1 solid var(--panel-background-color); + border-inline-end: deprecated.$s-1 solid var(--panel-background-color); } &.extended { @extend .button-icon-selected; @@ -250,46 +250,46 @@ .corner-icon { fill: none; stroke: currentColor; - width: $s-12; - height: $s-12; + width: deprecated.$s-12; + height: deprecated.$s-12; } .flow-element { - @include flexRow; + @include deprecated.flexRow; } .flow-info { display: flex; align-items: center; - gap: $s-2; - border-radius: $s-8; + gap: deprecated.$s-2; + border-radius: deprecated.$s-8; background-color: var(--input-details-color); - height: $s-32; + height: deprecated.$s-32; width: 100%; flex-grow: 1; } .flow-name-wrapper { - @include bodySmallTypography; - @include focusInput; + @include deprecated.bodySmallTypography; + @include deprecated.focusInput; display: flex; align-items: center; - gap: $s-4; + gap: deprecated.$s-4; flex-grow: 1; - height: $s-32; + height: deprecated.$s-32; width: 100%; - border-radius: $br-8; + border-radius: deprecated.$br-8; padding: 0; margin-right: 0; background-color: var(--input-background-color); - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); color: var(--input-foreground-color); .start-flow-btn { - @include buttonStyle; - height: $s-32; - width: $s-28; - padding: 0 $s-2 0 $s-8; - border-radius: $br-8 0 0 $br-8; + @include deprecated.buttonStyle; + height: deprecated.$s-32; + width: deprecated.$s-28; + padding: 0 deprecated.$s-2 0 deprecated.$s-8; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; background-color: transparent; svg { @extend .button-icon; @@ -302,28 +302,28 @@ .flow-input { @extend .input-base; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; background-color: transparent; - height: $s-28; + height: deprecated.$s-28; } .flow-input-wrapper { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; - height: $s-28; + height: deprecated.$s-28; padding: 0; width: 100%; margin: 0; flex-grow: 1; background-color: transparent; color: var(--input-foreground-color); - border-radius: $br-8; + border-radius: deprecated.$br-8; } &:hover { background-color: var(--input-background-color-hover); - border: $s-1 solid var(--input-border-color-hover); + border: deprecated.$s-1 solid var(--input-border-color-hover); &:active { background-color: var(--input-background-color-hover); .flow-input-wrapper { @@ -335,14 +335,14 @@ &:focus, &:focus-within { background-color: var(--input-background-color-focus); - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); &:hover { - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); } } &.editing { background-color: var(--input-background-color-active); - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss index ee63cc8eef..fb0ad3dcf5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -4,21 +4,21 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set-content { display: grid; grid-template-columns: repeat(8, var(--sp-xxxl)); gap: var(--sp-xs); - height: $s-32; - margin-bottom: $s-8; + height: deprecated.$s-32; + margin-bottom: deprecated.$s-8; .select { grid-column: span 4; padding: 0; } .input { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; grid-column: span 2; } .actions { @@ -29,12 +29,12 @@ &.hidden { .hidden-select { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } .input { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); .icon { stroke: var(--input-foreground-color-disabled); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 7adc6e49b7..7fdf2dd4af 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -4,21 +4,21 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; .element-title { .title-spacing-layout { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } .title-actions { position: relative; display: flex; - gap: $s-4; - height: $s-32; + gap: deprecated.$s-4; + height: deprecated.$s-32; padding: 0; margin: 0; .layout-options { @@ -33,14 +33,14 @@ display: grid; grid-template-columns: repeat(8, var(--sp-xxxl)); gap: var(--sp-xs); - margin-bottom: $s-8; + margin-bottom: deprecated.$s-8; .first-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; - margin-bottom: $s-12; - margin-top: $s-4; + margin-bottom: deprecated.$s-12; + margin-top: deprecated.$s-4; .align-row { grid-column: span 3; @@ -52,9 +52,9 @@ .wrap-button { @extend .button-tertiary; - border-radius: $br-8; - height: $s-32; - width: $s-32; + border-radius: deprecated.$br-8; + height: deprecated.$s-32; + width: deprecated.$s-32; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -69,7 +69,7 @@ grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; - margin-bottom: $s-12; + margin-bottom: deprecated.$s-12; .align-content-row, .justify-content-row { @@ -98,14 +98,14 @@ grid-template-columns: subgrid; .column-gap { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; &.disabled { @extend .disabled-input; } } .row-gap { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; &.disabled { @extend .disabled-input; } @@ -130,7 +130,7 @@ .padding-simple { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } } @@ -142,15 +142,15 @@ .padding-multiple { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } } .padding-toggle { @extend .button-tertiary; - height: $s-32; - width: $s-32; - border-radius: $br-8; + height: deprecated.$s-32; + width: deprecated.$s-32; + border-radius: deprecated.$br-8; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -175,7 +175,7 @@ } .first-row { - margin-bottom: $s-8; + margin-bottom: deprecated.$s-8; display: grid; grid-template-columns: subgrid; } @@ -195,23 +195,23 @@ .grid-layout-menu-title { flex: 1; - font-size: $fs-11; + font-size: deprecated.$fs-11; color: var(--title-foreground-color-hover); grid-column: span 5; } .edit-mode-btn { @extend .button-secondary; - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; width: 100%; - padding: $s-8; + padding: deprecated.$s-8; grid-column: span 7; } .exit-btn { @extend .button-secondary; - @include uppercaseTitleTipography; - padding: $s-8 $s-20; + @include deprecated.uppercaseTitleTipography; + padding: deprecated.$s-8 deprecated.$s-20; grid-column: span 2; } @@ -220,11 +220,11 @@ grid-template-columns: subgrid; grid-column: 1 / -1; gap: var(--sp-xs); - margin-top: $s-4; + margin-top: deprecated.$s-4; } .padding-section { - margin-top: $s-8; + margin-top: deprecated.$s-8; } .grid-tracks-row { @@ -245,11 +245,11 @@ grid-template-columns: subgrid; &.dnd-over-top { - border-top: $s-2 solid var(--button-foreground-hover); + border-top: deprecated.$s-2 solid var(--button-foreground-hover); } &.dnd-over-bot { - border-bottom: $s-2 solid var(--button-foreground-hover); + border-bottom: deprecated.$s-2 solid var(--button-foreground-hover); } .track-info-container { @@ -259,9 +259,9 @@ .track-info-dir-icon { cursor: pointer; - border-radius: $br-8 0 0 $br-8; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; background-color: var(--input-background-color); - padding: 0 $s-8; + padding: 0 deprecated.$s-8; svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -274,14 +274,14 @@ .track-info-value { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; border-radius: 0; - border-right: $s-1 solid var(--panel-background-color); + border-right: deprecated.$s-1 solid var(--panel-background-color); } .track-info-unit-selector { - border-radius: 0 $br-8 $br-8 0; - width: $s-96; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; + width: deprecated.$s-96; } } @@ -289,22 +289,22 @@ display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; - margin-top: $s-8; + margin-top: deprecated.$s-8; .grid-track-header { - @include flexRow; - font-size: $fs-12; - border-radius: $br-8; + @include deprecated.flexRow; + font-size: deprecated.$fs-12; + border-radius: deprecated.$br-8; overflow: hidden; background: var(--button-secondary-background-color-rest); - height: $s-52; + height: deprecated.$s-52; grid-column: 1 / -1; } .track-title { display: grid; flex-grow: 1; - padding: $s-8; + padding: deprecated.$s-8; gap: 0; overflow: hidden; } @@ -323,10 +323,10 @@ .expand-icon { @extend .button-secondary; - height: $s-52; + height: deprecated.$s-52; - border-radius: $s-8 0 0 $s-8; - border-right: $s-1 solid var(--panel-background-color); + border-radius: deprecated.$s-8 0 0 deprecated.$s-8; + border-right: deprecated.$s-1 solid var(--panel-background-color); svg { @extend .button-icon; stroke: var(--icon-foreground); @@ -343,12 +343,12 @@ .add-column { @extend .button-tertiary; - height: $s-52; + height: deprecated.$s-52; svg { @extend .button-icon; - height: $s-12; - width: $s-12; + height: deprecated.$s-12; + width: deprecated.$s-12; stroke: var(--icon-foreground); fill: var(--icon-foreground); } @@ -357,15 +357,15 @@ .layout-options { @extend .dropdown-wrapper; - @include flexColumn; + @include deprecated.flexColumn; right: var(--sp-s); left: initial; button { - @include buttonStyle; - padding: $s-8; + @include deprecated.buttonStyle; + padding: deprecated.$s-8; color: var(--color-foreground-primary); - border-radius: $br-6; + border-radius: deprecated.$br-6; &:hover { background: var(--color-background-quaternary); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss index 15ee004f93..511b7a4adc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -4,18 +4,18 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; } .title-spacing-layout-element { - margin: 0 0 $s-4 0; + margin: 0 0 deprecated.$s-4 0; } .title-spacing-empty { - padding-left: $s-2; + padding-left: deprecated.$s-2; } .flex-element-menu { @@ -38,7 +38,7 @@ .z-index-wrapper { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; grid-column: 6 / span 3; } @@ -72,7 +72,7 @@ .margin-mode { @extend .button-tertiary; grid-column: 3; - height: $s-32; + height: deprecated.$s-32; svg { @extend .button-icon; } @@ -88,7 +88,7 @@ .vertical-margin, .horizontal-margin { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } .vertical-margin { grid-column: 1; @@ -109,7 +109,7 @@ .left-margin, .right-margin { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } .top-margin { @@ -151,11 +151,11 @@ .layout-item-max-w, .layout-item-max-h { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; .icon-text { justify-content: flex-start; - width: $s-80; - padding-top: $s-2; + width: deprecated.$s-80; + padding-top: deprecated.$s-2; } } 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 f87c1fa204..96dee5fe7f 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 @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { display: grid; @@ -27,12 +27,12 @@ position: relative; grid-column: span 5; display: flex; - height: $s-32; - padding: $s-8; - border-radius: $br-8; + height: deprecated.$s-32; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; .collapsed-icon { - @include flexCenter; + @include deprecated.flexCenter; cursor: pointer; svg { @extend .button-icon-small; @@ -53,7 +53,7 @@ } .select-name { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; justify-content: flex-start; align-items: center; @@ -63,14 +63,14 @@ .custom-select-dropdown { @extend .dropdown-wrapper; - margin-top: $s-2; + margin-top: deprecated.$s-2; max-height: 70vh; - width: $s-252; + width: deprecated.$s-252; .dropdown-element { @extend .dropdown-element-base; .name-wrapper { display: flex; - gap: $s-8; + gap: deprecated.$s-8; flex-grow: 1; .preset-name { color: var(--menu-foreground-color-rest); @@ -81,7 +81,7 @@ } .check-icon { - @include flexCenter; + @include deprecated.flexCenter; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -131,9 +131,9 @@ .y-position, .rotation { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; .icon-text { - padding-top: $s-1; + padding-top: deprecated.$s-1; } &.disabled { @extend .disabled-input; @@ -146,9 +146,9 @@ .lock-size-btn { @extend .button-tertiary; - border-radius: $br-8; - height: $s-32; - width: $s-28; + border-radius: deprecated.$br-8; + height: deprecated.$s-32; + width: deprecated.$s-28; &.selected { @extend .button-icon-selected; } @@ -163,7 +163,7 @@ display: flex; align-items: flex-start; justify-content: flex-start; - gap: $s-4; + gap: deprecated.$s-4; } .clip-content, @@ -177,7 +177,7 @@ @extend .button-tertiary; height: var(--sp-xxxl); width: var(--sp-xxxl); - border-radius: $br-8; + border-radius: deprecated.$br-8; } .selected { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss index 7e54aba03d..3d63bdfa86 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "ds/_sizes.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; @@ -13,16 +13,16 @@ .title-spacing-shadow { margin: 0; - padding-left: $s-2; + padding-left: deprecated.$s-2; } .element-set-content { - margin-top: $s-4; - @include flexColumn; + margin-top: deprecated.$s-4; + @include deprecated.flexColumn; } .multiple-shadows { - @include flexRow; + @include deprecated.flexRow; } .label { @@ -36,7 +36,7 @@ } .shadow-element { - @include flexColumn; + @include deprecated.flexColumn; position: relative; --reorder-left-position: calc(-1 * var(--sp-m) - var(--sp-xxs)); @@ -64,13 +64,13 @@ grid-column: span 6; display: flex; align-items: center; - gap: $s-1; + gap: deprecated.$s-1; .more-options { @extend .button-secondary; - height: $s-32; - width: $s-28; - border-radius: $br-8 0 0 $br-8; + height: deprecated.$s-32; + width: deprecated.$s-28; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; svg { @extend .button-icon; } @@ -83,24 +83,24 @@ } .type-select { padding: 0; - border-radius: 0 $br-8 $br-8 0; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; flex-grow: 1; .shadow-type-select { flex-grow: 1; - border-radius: 0 $br-8 $br-8 0; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; } } &.hidden { .more-options { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } .type-select { - @include hiddenElement; + @include deprecated.hiddenElement; .shadow-type-select { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); + @include deprecated.hiddenElement; + border: deprecated.$s-1 solid var(--input-border-color-disabled); } } } @@ -124,7 +124,7 @@ .spread-input, .offset-y-input { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; } .input-label { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss index 0aa6db27fc..9dec902ec6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; @@ -15,22 +15,22 @@ } .title-spacing-stroke { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } .element-content { display: flex; flex-direction: column; - gap: $s-12; - margin: $s-4 0 $s-8 0; + gap: deprecated.$s-12; + margin: deprecated.$s-4 0 deprecated.$s-8 0; &.empty-content { margin: 0; } } .element-set-options-group { - @include flexRow; + @include deprecated.flexRow; } .group-label { 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 cb06d0e175..50ba70a209 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 @@ -4,32 +4,32 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; } .title-spacing-svg-attrs { - padding-left: $s-2; + padding-left: deprecated.$s-2; margin: 0; } .element-set-content { - @include flexColumn; - margin: $s-4 0 0 0; + @include deprecated.flexColumn; + margin: deprecated.$s-4 0 0 0; } .attr-content { display: flex; - gap: $s-4; + gap: deprecated.$s-4; } .attr-name { - @include bodySmallTypography; - @include twoLineTextEllipsis; - width: $s-88; - margin: auto $s-4; + @include deprecated.bodySmallTypography; + @include deprecated.twoLineTextEllipsis; + width: deprecated.$s-88; + margin: auto deprecated.$s-4; margin-right: 0; display: inline-block; color: var(--title-foreground-color); @@ -37,19 +37,19 @@ .attr-input { @extend .input-element; - @include bodySmallTypography; - width: $s-124; + @include deprecated.bodySmallTypography; + width: deprecated.$s-124; } .attr-actions { display: flex; - gap: $s-4; + gap: deprecated.$s-4; } .attr-action-btn { @extend .button-tertiary; - width: $s-28; - height: $s-32; + width: deprecated.$s-28; + height: deprecated.$s-32; svg { @extend .button-icon; } @@ -57,18 +57,18 @@ .attr-nested-content { display: grid; - row-gap: $s-4; + row-gap: deprecated.$s-4; } .attr-title { - @include bodySmallTypography; - font-size: $fs-10; + @include deprecated.bodySmallTypography; + font-size: deprecated.$fs-10; text-transform: uppercase; - margin-inline-start: $s-4; + margin-inline-start: deprecated.$s-4; color: var(--color-foreground-primary); } .attr-row { display: flex; - gap: $s-4; + gap: deprecated.$s-4; } 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 c18cf91c80..f27999ddb2 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 @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .element-set { margin: 0; @@ -15,8 +15,8 @@ } .element-content { - @include flexColumn; - margin-top: $s-4; + @include deprecated.flexColumn; + margin-top: deprecated.$s-4; } .multiple-typography { @@ -24,15 +24,15 @@ } .multiple-text { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; flex-grow: 1; color: var(--input-foreground-color-active); } .multiple-typography-button { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon; } @@ -40,7 +40,7 @@ .text-align-options { display: flex; - gap: $s-4; + gap: deprecated.$s-4; } .align-options, @@ -48,10 +48,10 @@ .vertical-align-options, .grow-options, .text-decoration-options { - height: $s-32; + height: deprecated.$s-32; } .text-decoration-options { display: flex; - gap: $s-4; + gap: deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index aa15b6ec8e..75be0b665d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -4,17 +4,17 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; -$width-settings-bar: $s-276; +$width-settings-bar: deprecated.$s-276; .typography-entry { display: flex; flex-direction: row; align-items: center; - height: $s-32; + height: deprecated.$s-32; width: 100%; - border-radius: $br-8; + border-radius: deprecated.$br-8; background-color: var(--assets-item-background-color); color: var(--assets-item-name-foreground-color-hover); &:hover, @@ -24,7 +24,7 @@ $width-settings-bar: $s-276; } &.selected { - border: $s-1 solid var(--assets-item-border-color); + border: deprecated.$s-1 solid var(--assets-item-border-color); } .element-set-actions { @@ -33,8 +33,8 @@ $width-settings-bar: $s-276; .element-set-actions-button, .menu-btn { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: deprecated.$s-32; + width: deprecated.$s-28; svg { @extend .button-icon; } @@ -54,11 +54,11 @@ $width-settings-bar: $s-276; .typography-selection-wrapper { display: grid; - grid-template-columns: $s-24 auto 1fr; + grid-template-columns: deprecated.$s-24 auto 1fr; flex: 1; height: 100%; width: 100%; - padding: 0 $s-12; + padding: 0 deprecated.$s-12; &.is-selectable { cursor: pointer; @@ -66,19 +66,19 @@ $width-settings-bar: $s-276; } .typography-sample { - @include flexCenter; - min-width: $s-24; - height: $s-32; + @include deprecated.flexCenter; + min-width: deprecated.$s-24; + height: deprecated.$s-32; color: var(--assets-item-name-foreground-color); } .typography-name, .typography-font { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; display: block; align-self: center; - margin-left: $s-6; + margin-left: deprecated.$s-6; } .typography-name { @@ -90,38 +90,38 @@ $width-settings-bar: $s-276; } .font-name-wrapper { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; - height: $s-32; + height: deprecated.$s-32; width: 100%; - border-radius: $br-8; - border: $s-1 solid transparent; + border-radius: deprecated.$br-8; + border: deprecated.$s-1 solid transparent; box-sizing: border-box; background-color: var(--assets-item-background-color); - margin-bottom: $s-4; - padding: $s-8 $s-0 $s-8 $s-12; + margin-bottom: deprecated.$s-4; + padding: deprecated.$s-8 deprecated.$s-0 deprecated.$s-8 deprecated.$s-12; .typography-sample-input { - @include flexCenter; - width: $s-24; + @include deprecated.flexCenter; + width: deprecated.$s-24; height: 100%; - font-size: $fs-16; + font-size: deprecated.$fs-16; color: var(--assets-item-name-foreground-color-hover); } .adv-typography-name { - @include removeInputStyle; - font-size: $fs-12; + @include deprecated.removeInputStyle; + font-size: deprecated.$fs-12; color: var(--input-foreground-color-active); flex-grow: 1; - padding-left: $s-6; + padding-left: deprecated.$s-6; margin: 0; } .action-btn { @extend .button-tertiary; - @include flexCenter; - width: $s-28; - height: $s-28; + @include deprecated.flexCenter; + width: deprecated.$s-28; + height: deprecated.$s-28; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -131,7 +131,7 @@ $width-settings-bar: $s-276; } } &:focus-within { - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); .adv-typography-name { color: var(--input-foreground-color-active); } @@ -148,39 +148,39 @@ $width-settings-bar: $s-276; } .typography-info-wrapper { - @include flexColumn; - margin-bottom: $s-12; + @include deprecated.flexColumn; + margin-bottom: deprecated.$s-12; .typography-name-wrapper { @extend .asset-element; display: grid; - grid-template-columns: $s-24 auto 1fr $s-28; + grid-template-columns: deprecated.$s-24 auto 1fr deprecated.$s-28; flex: 1; - height: $s-32; + height: deprecated.$s-32; width: 100%; - padding: 0 0 0 $s-12; + padding: 0 0 0 deprecated.$s-12; background-color: var(--assets-item-background-color-hover); - margin-bottom: $s-4; + margin-bottom: deprecated.$s-4; .typography-sample { - @include flexCenter; - min-width: $s-24; - font-size: $fs-16; - height: $s-32; + @include deprecated.flexCenter; + min-width: deprecated.$s-24; + font-size: deprecated.$fs-16; + height: deprecated.$s-32; padding: 0; color: var(--assets-item-name-foreground-color-hover); } .typography-name { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; display: flex; align-items: center; justify-content: flex-start; - margin-left: $s-6; + margin-left: deprecated.$s-6; color: var(--assets-item-name-foreground-color-hover); } .typography-font { - @include bodySmallTypography; - @include textEllipsis; - margin-left: $s-6; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; + margin-left: deprecated.$s-6; display: flex; align-items: center; justify-content: flex-start; @@ -189,8 +189,8 @@ $width-settings-bar: $s-276; } .action-btn { @extend .button-tertiary; - width: $s-28; - height: $s-32; + width: deprecated.$s-28; + height: deprecated.$s-32; svg { @extend .button-icon; } @@ -203,35 +203,35 @@ $width-settings-bar: $s-276; .info-row { display: grid; grid-template-columns: 50% 50%; - height: $s-32; - --calcualted-width: calc(var(--width) - $s-48); - padding-left: $s-2; + height: deprecated.$s-32; + --calcualted-width: calc(var(--width) - deprecated.$s-48); + padding-left: deprecated.$s-2; .info-label { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; width: calc(var(--calcualted-width) / 2); - padding-top: $s-8; + padding-top: deprecated.$s-8; color: var(--assets-item-name-foreground-color); } .info-content { - @include bodySmallTypography; - @include textEllipsis; - padding-top: $s-8; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; + padding-top: deprecated.$s-8; width: calc(var(--calcualted-width) / 2); color: var(--assets-item-name-foreground-color-hover); } } .link-btn { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; @extend .button-secondary; width: 100%; - height: $s-32; - border-radius: $br-8; + height: deprecated.$s-32; + border-radius: deprecated.$br-8; &:hover { background-color: var(--button-secondary-background-color-hover); color: var(--button-secondary-foreground-color-hover); - border: $s-1 solid var(--button-secondary-border-color-hover); + border: deprecated.$s-1 solid var(--button-secondary-border-color-hover); text-decoration: none; svg { stroke: var(--button-secondary-foreground-color-hover); @@ -240,7 +240,7 @@ $width-settings-bar: $s-276; &:focus { background-color: var(--button-secondary-background-color-focus); color: var(--button-secondary-foreground-color-focus); - border: $s-1 solid var(--button-secondary-border-color-focus); + border: deprecated.$s-1 solid var(--button-secondary-border-color-focus); svg { stroke: var(--button-secondary-foreground-color-focus); } @@ -249,16 +249,16 @@ $width-settings-bar: $s-276; } .text-options { - @include flexColumn; - max-width: calc(var(--width, $width-settings-bar) - $s-16); + @include deprecated.flexColumn; + max-width: calc(var(--width, $width-settings-bar) - deprecated.$s-16); &:not(.text-options-full-size) { position: relative; } .font-option { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; @extend .asset-element; - padding: $s-8 0 $s-8 $s-8; + padding: deprecated.$s-8 0 deprecated.$s-8 deprecated.$s-8; cursor: pointer; .name { @@ -270,9 +270,9 @@ $width-settings-bar: $s-276; width: 100%; } .icon { - @include flexCenter; - height: $s-28; - width: $s-28; + @include deprecated.flexCenter; + height: deprecated.$s-28; + width: deprecated.$s-28; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -282,21 +282,21 @@ $width-settings-bar: $s-276; } .font-modifiers { display: flex; - gap: $s-4; + gap: deprecated.$s-4; .font-size-options { @extend .asset-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; flex-grow: 1; - width: $s-60; + width: deprecated.$s-60; margin: 0; padding: 0; - border: $s-1 solid var(--input-border-color); + border: deprecated.$s-1 solid var(--input-border-color); position: relative; .icon { - @include flexCenter; - height: $s-28; - min-width: $s-28; + @include deprecated.flexCenter; + height: deprecated.$s-28; + min-width: deprecated.$s-28; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -310,16 +310,16 @@ $width-settings-bar: $s-276; } } .typography-variations { - @include flexRow; + @include deprecated.flexRow; .spacing-options { - @include flexRow; + @include deprecated.flexRow; .line-height, .letter-spacing { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; .icon { - @include flexCenter; - width: $s-28; + @include deprecated.flexCenter; + width: deprecated.$s-28; svg { @extend .button-icon-small; } @@ -339,35 +339,35 @@ $width-settings-bar: $s-276; } .font-size-select { - @include removeInputStyle; - @include bodySmallTypography; - height: $s-32; + @include deprecated.removeInputStyle; + @include deprecated.bodySmallTypography; + height: deprecated.$s-32; height: 100%; width: 100%; margin: 0; - padding: $s-8; + padding: deprecated.$s-8; .numeric-input { @extend .input-base; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; padding: 0; } } .font-selector { - @include flexCenter; + @include deprecated.flexCenter; position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; - z-index: $z-index-4; + z-index: deprecated.$z-index-4; } .show-recent { - border-radius: $br-8 $br-8 0 0; + border-radius: deprecated.$br-8 deprecated.$br-8 0 0; background: var(--dropdown-background-color); - border: $s-1 solid var(--color-background-quaternary); + border: deprecated.$s-1 solid var(--color-background-quaternary); border-block-end: none; } @@ -381,30 +381,30 @@ $width-settings-bar: $s-276; } .header { display: grid; - row-gap: $s-2; + row-gap: deprecated.$s-2; .title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; color: var(--title-foreground-color); margin: 0; - padding: $s-12; + padding: deprecated.$s-12; } } } .font-wrapper { - padding-bottom: $s-4; + padding-bottom: deprecated.$s-4; cursor: pointer; } .font-item { @extend .asset-element; - margin-bottom: $s-4; - border-radius: $br-8; + margin-bottom: deprecated.$s-4; + border-radius: deprecated.$br-8; display: flex; .icon { - @include flexCenter; - height: $s-28; - width: $s-28; + @include deprecated.flexCenter; + height: deprecated.$s-28; + width: deprecated.$s-28; svg { @extend .button-icon-small; stroke: var(--icon-foreground); @@ -420,8 +420,8 @@ $width-settings-bar: $s-276; } .label { - @include bodySmallTypography; - @include textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; flex-grow: 1; min-width: 0; } @@ -431,7 +431,7 @@ $width-settings-bar: $s-276; height: calc(100vh - 48px); // TODO: ugly hack :( Find a workaround for this. display: grid; grid-template-rows: auto 1fr; - padding: $s-2 $s-12 $s-12 $s-12; + padding: deprecated.$s-2 deprecated.$s-12 deprecated.$s-12 deprecated.$s-12; } .fonts-list { @@ -442,19 +442,19 @@ $width-settings-bar: $s-276; min-height: 100%; width: 100%; height: 100%; - padding: $s-2; - border-radius: $br-8; + padding: deprecated.$s-2; + border-radius: deprecated.$br-8; background-color: var(--dropdown-background-color); overflow: hidden; &:not(.fonts-list-full-size) { - margin-block-start: $s-2; + margin-block-start: deprecated.$s-2; } } .fonts-list-full-size { border-start-start-radius: 0; border-start-end-radius: 0; - border: $s-1 solid var(--color-background-quaternary); + border: deprecated.$s-1 solid var(--color-background-quaternary); // TODO: this should belong to typography-entry , but atm we don't have a clear // way of accessing whether we are in fullsize mode or not diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss index 5986898826..5d77b269d2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/variants_help_modal.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -13,21 +13,21 @@ .modal-dialog { @extend .modal-container-base; - max-width: $s-888; + max-width: deprecated.$s-888; width: 100%; max-height: unset; } .modal-title { color: var(--modal-title-foreground-color); - margin-bottom: $s-32; + margin-bottom: deprecated.$s-32; } .modal-content { display: flex; color: var(--color-foreground-secondary); - padding-block-end: $s-32; - gap: $s-32; + padding-block-end: deprecated.$s-32; + gap: deprecated.$s-32; } .modal-close-btn { @@ -35,14 +35,14 @@ } .rule-list { - margin: $s-32 0; + margin: deprecated.$s-32 0; } .rule-item { display: flex; - gap: $s-16; + gap: deprecated.$s-16; align-items: center; - margin-bottom: $s-16; + margin-bottom: deprecated.$s-16; &:last-child { margin-bottom: 0; @@ -51,7 +51,7 @@ .rule-item-highlight { color: var(--color-foreground-primary); - margin-inline-end: $s-4; + margin-inline-end: deprecated.$s-4; } .rule-item-icon { @@ -59,8 +59,8 @@ align-items: center; justify-content: center; flex-shrink: 0; - width: $s-32; - height: $s-32; + width: deprecated.$s-32; + height: deprecated.$s-32; background: var(--color-background-quaternary); color: var(--color-foreground-secondary); border-radius: 90px; @@ -87,6 +87,6 @@ flex: 0 1 50%; img { - border-radius: $br-8; + border-radius: deprecated.$br-8; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.scss b/frontend/src/app/main/ui/workspace/sidebar/options/page.scss index e883fe94c5..d7e4cf8a20 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/page.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.scss @@ -4,4 +4,4 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 4d2dbe2d38..719d188409 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .color-data { - @include flexRow; + @include deprecated.flexRow; position: relative; @@ -37,10 +37,10 @@ flex: 1; grid-template-columns: 1fr auto; align-items: center; - gap: $s-2; - border-radius: $s-8; + gap: deprecated.$s-2; + border-radius: deprecated.$s-8; background-color: var(--input-details-color); - height: $s-32; + height: deprecated.$s-32; &:hover { --detach-icon-foreground-color: var(--input-foreground-color-active); @@ -54,14 +54,14 @@ .color-name-wrapper { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; flex-grow: 1; width: 100%; min-width: 0; - border-radius: $br-8 0 0 $br-8; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; padding: 0; margin-inline-end: 0; - gap: $s-4; + gap: deprecated.$s-4; text-overflow: ellipsis; white-space: nowrap; @@ -70,9 +70,9 @@ padding: 0; } .color-bullet-wrapper { - height: $s-28; - padding: 0 $s-2 0 $s-8; - border-radius: $br-8 0 0 $br-8; + height: deprecated.$s-28; + padding: 0 deprecated.$s-2 0 deprecated.$s-8; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; background-color: transparent; display: flex; align-items: center; @@ -81,18 +81,18 @@ } } .color-name { - @include bodySmallTypography; - @include textEllipsis; - padding-inline: $s-6; - border-radius: $br-8; + @include deprecated.bodySmallTypography; + @include deprecated.textEllipsis; + padding-inline: deprecated.$s-6; + border-radius: deprecated.$br-8; color: var(--input-foreground-color-active); } .detach-btn { @extend .button-tertiary; - height: $s-28; - width: $s-28; + height: deprecated.$s-28; + width: deprecated.$s-28; margin-inline-start: auto; - border-radius: 0 $br-8 $br-8 0; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; display: none; } .detach-icon { @@ -100,29 +100,29 @@ stroke: var(--detach-icon-foreground-color); } .color-input-wrapper { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; - height: $s-28; - padding: 0 $s-0; + height: deprecated.$s-28; + padding: 0 deprecated.$s-0; width: 100%; margin: 0; flex-grow: 1; background-color: var(--input-background-color); color: var(--input-foreground-color); - border-radius: $br-0; + border-radius: deprecated.$br-0; } &.no-opacity { - border-radius: $br-8; + border-radius: deprecated.$br-8; .color-input-wrapper { - border-radius: $br-8; + border-radius: deprecated.$br-8; } } &:hover { --detach-icon-foreground-color: var(--input-foreground-color-active); background-color: var(--input-background-color-hover); - border: $s-1 solid var(--input-border-color-hover); + border: deprecated.$s-1 solid var(--input-border-color-hover); .color-bullet-wrapper, .color-name, .detach-btn, @@ -144,46 +144,46 @@ &:focus, &:focus-within { background-color: var(--input-background-color-focus); - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); } } &:focus, &:focus-within { background-color: var(--input-background-color-focus); - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); &:hover { background-color: var(--input-background-color-hover); - border: $s-1 solid var(--input-border-color-focus); + border: deprecated.$s-1 solid var(--input-border-color-focus); } } &.editing { background-color: var(--input-background-color-active); &:hover { - border: $s-1 solid var(--input-border-color-active); + border: deprecated.$s-1 solid var(--input-border-color-active); } } } .library-name-wrapper { - border-radius: $br-8; + border-radius: deprecated.$br-8; } .opacity-element-wrapper { @extend .input-element; - @include bodySmallTypography; - width: $s-60; - border-radius: 0 $br-8 $br-8 0; + @include deprecated.bodySmallTypography; + width: deprecated.$s-60; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; .opacity-input { padding: 0; - border-radius: 0 $br-8 $br-8 0; - min-width: $s-28; + border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; + min-width: deprecated.$s-28; } .icon-text { - @include flexCenter; - height: $s-32; - margin-inline-end: $s-4; - margin-block-start: $s-2; + @include deprecated.flexCenter; + height: deprecated.$s-32; + margin-inline-end: deprecated.$s-4; + margin-block-start: deprecated.$s-2; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss index c080c6ec74..76ff0d737a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss @@ -4,10 +4,10 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .stroke-data { - @include flexColumn; + @include deprecated.flexColumn; position: relative; @@ -34,7 +34,7 @@ .stroke-width-input-element { @extend .input-element; - @include bodySmallTypography; + @include deprecated.bodySmallTypography; grid-column: span 2; } @@ -55,9 +55,9 @@ .stroke-cap-dropdown, .stroke-cap-dropdown-start { - min-width: $s-124; + min-width: deprecated.$s-124; width: fit-content; - max-width: $s-252; + max-width: deprecated.$s-252; right: 0; left: unset; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss index 6f1dc89058..0ff9097344 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss @@ -4,11 +4,11 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .options { width: 100%; display: flex; flex-direction: column; - gap: $s-16; + gap: deprecated.$s-16; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss index 6f1dc89058..0ff9097344 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss @@ -4,11 +4,11 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .options { width: 100%; display: flex; flex-direction: column; - gap: $s-16; + gap: deprecated.$s-16; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss index e87a3b420e..23aef8f116 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss @@ -4,32 +4,32 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .shortcuts { display: grid; grid-template-rows: auto auto 1fr; // TODO: Fix this once we start implementing the DS. // We should not be doign these hardcoded calc's. - height: calc(100vh - #{$s-60}); + height: calc(100vh - #{deprecated.$s-60}); } .search-field { - margin: $s-16 $s-12 $s-4 $s-12; + margin: deprecated.$s-16 deprecated.$s-12 deprecated.$s-4 deprecated.$s-12; } .shortcuts-header { - @include flexCenter; - @include uppercaseTitleTipography; + @include deprecated.flexCenter; + @include deprecated.uppercaseTitleTipography; position: relative; - height: $s-32; - padding: $s-2 $s-2 $s-2 0; - margin: $s-4 $s-4 0 $s-4; - border-radius: $br-6; + height: deprecated.$s-32; + padding: deprecated.$s-2 deprecated.$s-2 deprecated.$s-2 0; + margin: deprecated.$s-4 deprecated.$s-4 0 deprecated.$s-4; + border-radius: deprecated.$br-6; background-color: var(--panel-title-background-color); .shortcuts-title { - @include flexCenter; + @include deprecated.flexCenter; flex-grow: 1; color: var(--title-foreground-color-hover); } @@ -46,32 +46,32 @@ } .not-found { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--empty-message-foreground-color); - margin: $s-12; + margin: deprecated.$s-12; } .shortcuts-list { display: flex; flex-direction: column; height: 100%; - padding: $s-12; + padding: deprecated.$s-12; overflow-y: auto; - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--title-foreground-color); .section-title, .subsection-title { - @include uppercaseTitleTipography; + @include deprecated.uppercaseTitleTipography; display: flex; align-items: center; margin: 0; - padding: $s-8 0; + padding: deprecated.$s-8 0; cursor: pointer; .subsection-name, .section-name { - padding-left: $s-4; + padding-left: deprecated.$s-4; } &:hover { @@ -81,46 +81,46 @@ .subsection-title { text-transform: none; - padding-left: $s-12; + padding-left: deprecated.$s-12; } .subsection-menu { - margin-bottom: $s-4; + margin-bottom: deprecated.$s-4; } .sub-menu { - margin-bottom: $s-4; + margin-bottom: deprecated.$s-4; .shortcuts-name { display: flex; align-items: center; justify-content: space-between; width: 100%; - min-height: $s-32; - padding: $s-6; - margin-bottom: $s-4; - border-radius: $br-8; + min-height: deprecated.$s-32; + padding: deprecated.$s-6; + margin-bottom: deprecated.$s-4; + border-radius: deprecated.$br-8; background-color: var(--pill-background-color); .command-name { - @include bodySmallTypography; - margin-left: $s-2; + @include deprecated.bodySmallTypography; + margin-left: deprecated.$s-2; color: var(--pill-foreground-color); } .keys { - @include flexCenter; - gap: $s-2; + @include deprecated.flexCenter; + gap: deprecated.$s-2; color: var(--pill-foreground-color); .key { - @include bodySmallTypography; - @include flexCenter; + @include deprecated.bodySmallTypography; + @include deprecated.flexCenter; text-transform: capitalize; - height: $s-20; - padding: $s-2 $s-6; - border-radius: $s-6; + height: deprecated.$s-20; + padding: deprecated.$s-2 deprecated.$s-6; + border-radius: deprecated.$s-6; background-color: var(--menu-shortcut-background-color); } .space { - margin: 0 $s-2; + margin: 0 deprecated.$s-2; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index cdf23a57fd..4817c90cd9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .sitemap { position: relative; @@ -12,21 +12,21 @@ flex-direction: column; flex: 1; width: 100%; - height: var(--height, $s-200); + height: var(--height, deprecated.$s-200); } .title { - margin-left: $s-2; + margin-left: deprecated.$s-2; color: var(--title-foreground-color-hover); } .resize-area { position: absolute; - bottom: calc(-1 * $s-8); + bottom: calc(-1 * deprecated.$s-8); left: 0; width: 100%; - height: $s-12; - border-top: $s-2 solid var(--resize-area-border-color); + height: deprecated.$s-12; + border-top: deprecated.$s-2 solid var(--resize-area-border-color); background-color: var(--resize-area-background-color); cursor: ns-resize; &:hover { @@ -37,7 +37,7 @@ .tool-window-content { display: flex; flex-direction: column; - height: calc(-38px + var(--height, $s-200)); + height: calc(-38px + var(--height, deprecated.$s-200)); width: var(--width); overflow-x: hidden; overflow-y: overlay; @@ -50,63 +50,63 @@ .pages-list { width: 100%; - max-height: $s-152; - margin-bottom: $s-12; + max-height: deprecated.$s-152; + margin-bottom: deprecated.$s-12; } .page-element { - @include bodySmallTypography; - min-height: $s-32; + @include deprecated.bodySmallTypography; + min-height: deprecated.$s-32; width: 100%; cursor: pointer; &.dnd-over-top { - border-top: $s-1 solid var(--layer-row-foreground-color-drag); + border-top: deprecated.$s-1 solid var(--layer-row-foreground-color-drag); } &.dnd-over-bot { - border-bottom: $s-1 solid var(--layer-row-foreground-color-drag); + border-bottom: deprecated.$s-1 solid var(--layer-row-foreground-color-drag); } .dnd-over > .element-list-body { - border: $s-1 solid var(--layer-row-foreground-color-drag); + border: deprecated.$s-1 solid var(--layer-row-foreground-color-drag); } .element-list-body { display: flex; align-items: center; - height: $s-32; + height: deprecated.$s-32; width: 100%; - padding: 0 $s-12 0 0; + padding: 0 deprecated.$s-12 0 0; transition: none; color: var(--layer-row-foreground-color); .page-name { - @include textEllipsis; + @include deprecated.textEllipsis; flex-grow: 1; - padding-left: $s-2; + padding-left: deprecated.$s-2; } .page-icon { - @include flexCenter; - height: $s-32; - width: $s-24; - padding: 0 $s-4 0 $s-8; + @include deprecated.flexCenter; + height: deprecated.$s-32; + width: deprecated.$s-24; + padding: 0 deprecated.$s-4 0 deprecated.$s-8; svg { @extend .button-icon-small; - height: $s-12; - width: $s-12; + height: deprecated.$s-12; + width: deprecated.$s-12; color: transparent; fill: none; stroke: var(--icon-foreground); } } .page-actions { - height: $s-32; + height: deprecated.$s-32; button { - @include buttonStyle; - @include flexCenter; - width: $s-24; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; + width: deprecated.$s-24; height: 100%; - opacity: $op-0; + opacity: deprecated.$op-0; svg { @extend .button-icon-small; - height: $s-12; - width: $s-12; + height: deprecated.$s-12; + width: deprecated.$s-12; color: transparent; fill: none; stroke: var(--icon-foreground); @@ -114,20 +114,20 @@ } } .element-name { - @include textEllipsis; + @include deprecated.textEllipsis; color: var(--layer-row-foreground-color-focus); } input.element-name { - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; flex-grow: 1; - height: $s-28; + height: deprecated.$s-28; max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); - padding-left: $s-6; + padding-left: deprecated.$s-6; margin: 0; - border-radius: $br-8; - border: $s-1 solid var(--input-border-color-focus); + border-radius: deprecated.$br-8; + border: deprecated.$s-1 solid var(--input-border-color-focus); color: var(--layer-row-foreground-color); } } @@ -151,7 +151,8 @@ .element-list-body { color: var(--layer-row-foreground-color-selected); background-color: var(--layer-row-background-color-selected); - box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected); + box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 + var(--layer-row-background-color-selected); .page-actions button { svg { stroke: var(--layer-row-foreground-color-selected); @@ -167,9 +168,10 @@ .element-list-body { color: var(--layer-row-foreground-color-hover); background-color: var(--layer-row-background-color-hover); - box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover); + box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 + var(--layer-row-background-color-hover); .page-actions button { - opacity: $op-10; + opacity: deprecated.$op-10; svg { stroke: var(--layer-row-foreground-color-hover); } @@ -182,10 +184,10 @@ &:focus { .element-list-body { color: var(--layer-row-foreground-color-focus); - border: $s-1 solid var(--layer-row-border-color-focus); + border: deprecated.$s-1 solid var(--layer-row-border-color-focus); outline: none; .page-actions button { - opacity: $op-10; + opacity: deprecated.$op-10; } } } @@ -193,7 +195,7 @@ .element-list-body { outline: none; .page-actions button { - opacity: $op-10; + opacity: deprecated.$op-10; } } } @@ -202,7 +204,7 @@ .element-list-body { color: var(--layer-row-foreground-color-hidden); background-color: var(--layer-row-background-color-hidden); - opacity: $op-7; + opacity: deprecated.$op-7; .page-actions button { svg { stroke: var(--layer-row-foreground-color-hidden); @@ -216,7 +218,7 @@ } .title-spacing-sitemap { - padding-inline-start: $s-8; - margin-block-start: $s-8; - margin-block-end: $s-4; + padding-inline-start: deprecated.$s-8; + margin-block-start: deprecated.$s-8; + margin-block-end: deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/versions.scss b/frontend/src/app/main/ui/workspace/sidebar/versions.scss index a32de791ce..b602d07590 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/versions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/versions.scss @@ -5,10 +5,10 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as t; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .version-toolbox { - padding: $s-8; + padding: deprecated.$s-8; height: 100%; display: grid; overflow: hidden; @@ -20,15 +20,15 @@ color: var(--color-foreground-secondary); display: flex; flex-direction: column; - font-size: $fs-12; - gap: $s-8; - padding: $s-16; + font-size: deprecated.$fs-12; + gap: deprecated.$s-8; + padding: deprecated.$s-16; } .versions-entry-empty-icon { background: var(--color-background-tertiary); border-radius: 50%; - padding: $s-8; + padding: deprecated.$s-8; display: flex; } @@ -36,8 +36,8 @@ font-weight: 600; text-transform: uppercase; color: var(--color-foreground-secondary); - font-size: $fs-12; - padding: $s-16 0 $s-16 $s-16; + font-size: deprecated.$fs-12; + padding: deprecated.$s-16 0 deprecated.$s-16 deprecated.$s-16; justify-content: space-between; width: 100%; display: flex; @@ -53,7 +53,7 @@ .versions-entries { display: flex; flex-direction: column; - gap: $s-6; + gap: deprecated.$s-6; overflow: auto; margin: 0; } @@ -75,8 +75,8 @@ .version-entry { display: flex; - padding: $s-4 $s-4 $s-4 $s-16; - gap: $s-8; + padding: deprecated.$s-4 deprecated.$s-4 deprecated.$s-4 deprecated.$s-16; + gap: deprecated.$s-8; border-radius: 8px; align-items: center; @@ -88,7 +88,7 @@ .version-entry.is-autosave { flex-direction: column; align-items: start; - padding-left: $s-48; + padding-left: deprecated.$s-48; gap: 0; } @@ -98,8 +98,8 @@ .version-entry-avatar { border-radius: 50%; - width: $s-24; - height: $s-24; + width: deprecated.$s-24; + height: deprecated.$s-24; } .version-entry-data { @@ -115,7 +115,7 @@ } .version-entry-name-edit { - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-primary); background: none; margin: 0; @@ -135,15 +135,15 @@ cursor: pointer; visibility: hidden; padding: 0; - height: $s-40; - width: $s-32; + height: deprecated.$s-40; + width: deprecated.$s-32; } .version-options-dropdown { @extend .dropdown-wrapper; position: absolute; width: fit-content; - max-width: $s-200; + max-width: deprecated.$s-200; right: 0; left: unset; top: var(--offset); @@ -155,7 +155,7 @@ .version-entry-snapshots { display: flex; align-items: center; - gap: $s-6; + gap: deprecated.$s-6; color: var(--color-foreground-secondary); background: none; border: 0; @@ -184,7 +184,7 @@ .version-snapshot-list { display: none; - margin-top: $s-8; + margin-top: deprecated.$s-8; flex-direction: column; width: 100%; @@ -205,7 +205,7 @@ } .version-snapshot-entry { - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-secondary); background: none; border: none; diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss index b0ea337762..b8b438eb89 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.scss +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .text-palette { height: 100%; @@ -12,13 +12,13 @@ } .left-arrow, .right-arrow { - @include buttonStyle; - @include flexCenter; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; position: relative; height: 100%; - width: $s-24; + width: deprecated.$s-24; padding: 0; - z-index: $z-index-2; + z-index: deprecated.$z-index-2; svg { @extend .button-icon; } @@ -26,10 +26,10 @@ content: ""; position: absolute; bottom: 0; - left: calc(-1 * $s-80); + left: calc(-1 * deprecated.$s-80); height: 100%; - width: $s-80; - z-index: $z-index-1; + width: deprecated.$s-80; + z-index: deprecated.$z-index-1; background-image: linear-gradient( to left, var(--palette-button-shadow-initial) 0%, @@ -53,7 +53,7 @@ } .left-arrow { &::after { - left: $s-24; + left: deprecated.$s-24; background-image: linear-gradient( to right, var(--palette-button-shadow-initial) 0%, @@ -76,48 +76,48 @@ .text-palette-inside { display: flex; - gap: $s-8; + gap: deprecated.$s-8; } .typography-item { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; - width: $s-136; - padding: $s-8; - border-radius: $br-8; + width: deprecated.$s-136; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--palette-text-background-color); &:first-child { - margin-left: $s-8; + margin-left: deprecated.$s-8; } .typography-name { - @include textEllipsis; - height: $s-16; - width: $s-120; + @include deprecated.textEllipsis; + height: deprecated.$s-16; + width: deprecated.$s-120; color: var(--palette-text-color-selected); } .typography-font { - @include textEllipsis; - height: $s-16; - width: $s-120; + @include deprecated.textEllipsis; + height: deprecated.$s-16; + width: deprecated.$s-120; color: var(--palette-text-color); } .typography-data { - @include textEllipsis; - height: $s-16; - width: $s-120; + @include deprecated.textEllipsis; + height: deprecated.$s-16; + width: deprecated.$s-120; color: var(--palette-text-color); } &.mid-item { .typography-name { - height: $s-16; + height: deprecated.$s-16; } .typography-data { display: none; @@ -135,6 +135,6 @@ } .text-palette-empty { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; 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 bcef22b664..fe450d0b1a 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 @@ -4,17 +4,17 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .text-context-menu { position: absolute; left: auto; bottom: var(--height); - max-width: $s-480; - padding: $s-4; - margin: 0 0 $s-4 0; - z-index: $z-index-4; - border-radius: $br-10; + max-width: deprecated.$s-480; + padding: deprecated.$s-4; + margin: 0 0 deprecated.$s-4 0; + z-index: deprecated.$z-index-4; + border-radius: deprecated.$br-10; background-color: var(--context-menu-background-color); .palette-library, @@ -23,33 +23,33 @@ display: flex; justify-content: space-between; width: 100%; - gap: $s-8; - padding: $s-8; - margin-bottom: $s-4; - border-radius: $br-8; + gap: deprecated.$s-8; + padding: deprecated.$s-8; + margin-bottom: deprecated.$s-4; + border-radius: deprecated.$br-8; &:last-child { margin-bottom: 0; } .library-name { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; color: var(--context-menu-foreground-color); display: grid; - grid-template-columns: 1fr $s-24; - max-width: $s-400; + grid-template-columns: 1fr deprecated.$s-24; + max-width: deprecated.$s-400; .lib-name { - @include textEllipsis; - max-width: $s-380; + @include deprecated.textEllipsis; + max-width: deprecated.$s-380; } .lib-num { - margin-left: $s-4; + margin-left: deprecated.$s-4; } } .icon-wrapper { - margin-left: $s-4; - @include flexCenter; + margin-left: deprecated.$s-4; + @include deprecated.flexCenter; svg { - @include flexCenter; + @include deprecated.flexCenter; @extend .button-icon-small; stroke: var(--icon-foreground); } @@ -57,9 +57,9 @@ &.selected, &:hover { .icon-wrapper { - @include flexCenter; + @include deprecated.flexCenter; svg { - @include flexCenter; + @include deprecated.flexCenter; @extend .button-icon-small; stroke: var(--context-menu-foreground-color-selected); } diff --git a/frontend/src/app/main/ui/workspace/tokens/export.scss b/frontend/src/app/main/ui/workspace/tokens/export.scss index d0cb390bde..53f9be2209 100644 --- a/frontend/src/app/main/ui/workspace/tokens/export.scss +++ b/frontend/src/app/main/ui/workspace/tokens/export.scss @@ -7,7 +7,7 @@ @use "ds/typography.scss" as t; @use "ds/_sizes.scss" as *; @use "ds/_borders.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; diff --git a/frontend/src/app/main/ui/workspace/tokens/import.scss b/frontend/src/app/main/ui/workspace/tokens/import.scss index 72320404d6..314edf94c8 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import.scss +++ b/frontend/src/app/main/ui/workspace/tokens/import.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; 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 4405ebdfd3..207166d747 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 @@ -5,11 +5,11 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .token-context-menu { position: absolute; - z-index: $z-index-4; + z-index: deprecated.$z-index-4; } .token-context-menu[data-direction="up"] { @@ -22,12 +22,12 @@ .context-list, .token-context-submenu { - @include menuShadow; + @include deprecated.menuShadow; display: grid; - width: $s-240; - padding: $s-4; - border-radius: $br-8; - border: $s-2 solid var(--color-background-quaternary); + width: deprecated.$s-240; + padding: deprecated.$s-4; + border-radius: deprecated.$br-8; + border: deprecated.$s-2 solid var(--color-background-quaternary); background-color: var(--color-background-tertiary); max-height: 100vh; overflow-y: auto; @@ -43,13 +43,13 @@ .token-context-submenu { position: absolute; - padding: $s-4; - margin-left: $s-6; + padding: deprecated.$s-4; + margin-left: deprecated.$s-6; } .separator { - margin: $s-6; - border-block-start: $s-1 solid var(--panel-border-color); + margin: deprecated.$s-6; + border-block-start: deprecated.$s-1 solid var(--panel-border-color); } .context-menu-item { @@ -59,13 +59,13 @@ @include use-typography("body-small"); display: flex; align-items: center; - height: $s-32; + height: deprecated.$s-32; width: 100%; - padding: $s-8; - border-radius: $br-8; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; color: var(--context-menu-item-fg-color); background-color: var(--context-menu-item-bg-color); - border: $s-1 solid var(--context-menu-item-border-color); + border: deprecated.$s-1 solid var(--context-menu-item-border-color); cursor: pointer; &:hover { --context-menu-item-bg-color: var(--color-background-quaternary); @@ -110,10 +110,10 @@ .context-menu-item-hint { position: absolute; background-color: var(--color-background-primary); - border-radius: $br-6; - padding: $s-4; - inset-inline-end: $s-4; - inset-block-start: $s-4; + border-radius: deprecated.$br-6; + padding: deprecated.$s-4; + inset-inline-end: deprecated.$s-4; + inset-block-start: deprecated.$s-4; color: var(--color-foreground-secondary); } @@ -122,8 +122,8 @@ } .item-with-icon-space { - padding-left: $s-20; + padding-left: deprecated.$s-20; } .icon-wrapper { - margin-right: $s-4; + margin-right: deprecated.$s-4; } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss b/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss index 0fa2315b7a..8b47b91bdd 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss @@ -7,7 +7,7 @@ @use "ds/typography.scss" as *; @use "ds/_sizes.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .wrapper { --label-color: var(--color-foreground-primary); @@ -27,7 +27,7 @@ .label { @include use-typography("body-small"); - @include textEllipsis; + @include deprecated.textEllipsis; color: var(--label-color); } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss index e494321617..2b876264ba 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss @@ -4,11 +4,11 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .token-modal-wrapper { @extend .modal-container-base; - @include menuShadow; + @include deprecated.menuShadow; position: absolute; width: auto; min-width: auto; @@ -22,6 +22,6 @@ .close-btn { position: absolute; - top: $s-6; - right: $s-6; + top: deprecated.$s-6; + right: deprecated.$s-6; } diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 48a320c21e..dee8bfe07b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .sets-list { width: 100%; @@ -14,8 +14,8 @@ } .empty-sets-wrapper { - padding: $s-12; - padding-inline-start: $s-24; + padding: deprecated.$s-12; + padding-inline-start: deprecated.$s-24; color: var(--color-foreground-secondary); } @@ -29,57 +29,57 @@ } .set-item-container { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; width: 100%; - min-height: $s-32; + min-height: deprecated.$s-32; cursor: pointer; color: var(--layer-row-foreground-color); - padding-left: calc($s-24 * var(--tree-depth, 0) + $s-8); - border: $s-2 solid transparent; - gap: $s-2; + padding-left: calc(deprecated.$s-24 * var(--tree-depth, 0) + deprecated.$s-8); + border: deprecated.$s-2 solid transparent; + gap: deprecated.$s-2; &.dnd-over-bot { - border-bottom: $s-2 solid var(--layer-row-foreground-color-hover); + border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } &.dnd-over-top { - border-top: $s-2 solid var(--layer-row-foreground-color-hover); + border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } &.dnd-over { - border: $s-2 solid var(--layer-row-foreground-color-hover); + border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } } .set-item-group { cursor: unset; - padding-left: calc($s-24 * var(--tree-depth, 0)); + padding-left: calc(deprecated.$s-24 * var(--tree-depth, 0)); gap: 0; } .set-item-group-collapse-button { cursor: pointer; width: auto; - height: $s-28; + height: deprecated.$s-28; } .set-name { - @include textEllipsis; + @include deprecated.textEllipsis; flex-grow: 1; - padding-left: $s-2; + padding-left: deprecated.$s-2; } .icon { flex-shrink: 0; display: flex; align-items: center; - width: $s-20; - height: $s-20; - padding-right: $s-4; + width: deprecated.$s-20; + height: deprecated.$s-20; + padding-right: deprecated.$s-4; } .root-icon { - margin-left: $s-8; + margin-left: deprecated.$s-8; } .checkbox-style { @@ -87,12 +87,12 @@ display: flex; justify-content: center; align-items: center; - width: $s-16; - height: $s-16; - margin-inline: $s-6; + width: deprecated.$s-16; + height: deprecated.$s-16; + margin-inline: deprecated.$s-6; background-color: var(--input-checkbox-background-color-rest); - border: $s-1 solid var(--input-checkbox-border-color-rest); - border-radius: $s-4; + border: deprecated.$s-1 solid var(--input-checkbox-border-color-rest); + border-radius: deprecated.$s-4; padding: 0; } @@ -102,7 +102,7 @@ } .checkbox-disabled { - border: $s-1 solid var(--color-background-quaternary); + border: deprecated.$s-1 solid var(--color-background-quaternary); background-color: var(--color-background-tertiary); } @@ -126,7 +126,7 @@ justify-content: center; align-items: center; width: 100%; - padding: $s-12; + padding: deprecated.$s-12; color: var(--color-foreground-secondary); } .selected-set { @@ -136,27 +136,27 @@ } .collapsabled-icon { - @include buttonStyle; - @include flexCenter; - height: $s-24; - border-radius: $br-8; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; + height: deprecated.$s-24; + border-radius: deprecated.$br-8; &:hover { color: var(--title-foreground-color-hover); } } .editing-node { - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; + border: deprecated.$s-1 solid var(--input-border-color-focus); + border-radius: deprecated.$br-8; color: var(--layer-row-foreground-color-focus); flex-grow: 1; - height: $s-28; + height: deprecated.$s-28; margin: 0; - padding-left: $s-6; + padding-left: deprecated.$s-6; &::placeholder { color: var(--layer-row-foreground-color-placeholder); 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 9e9cc9e6eb..1e36266233 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 @@ -5,20 +5,20 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as t; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .token-set-context-menu { position: absolute; - z-index: $z-index-4; + z-index: deprecated.$z-index-4; } .context-list { - @include menuShadow; + @include deprecated.menuShadow; display: grid; - width: $s-240; - padding: $s-4; - border-radius: $br-8; - border: $s-2 solid var(--panel-border-color); + width: deprecated.$s-240; + padding: deprecated.$s-4; + border-radius: deprecated.$br-8; + border: deprecated.$s-2 solid var(--panel-border-color); background-color: var(--menu-background-color); max-height: 100vh; overflow-y: auto; @@ -29,10 +29,10 @@ color: var(--menu-foreground-color); display: flex; align-items: center; - height: $s-28; + height: deprecated.$s-28; width: 100%; - padding: $s-6; - border-radius: $br-8; + padding: deprecated.$s-6; + border-radius: deprecated.$br-8; cursor: pointer; &:hover { 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 48a320c21e..dee8bfe07b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets/lists.scss @@ -5,7 +5,7 @@ // Copyright (c) KALEIDOS INC @use "ds/typography.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .sets-list { width: 100%; @@ -14,8 +14,8 @@ } .empty-sets-wrapper { - padding: $s-12; - padding-inline-start: $s-24; + padding: deprecated.$s-12; + padding-inline-start: deprecated.$s-24; color: var(--color-foreground-secondary); } @@ -29,57 +29,57 @@ } .set-item-container { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; width: 100%; - min-height: $s-32; + min-height: deprecated.$s-32; cursor: pointer; color: var(--layer-row-foreground-color); - padding-left: calc($s-24 * var(--tree-depth, 0) + $s-8); - border: $s-2 solid transparent; - gap: $s-2; + padding-left: calc(deprecated.$s-24 * var(--tree-depth, 0) + deprecated.$s-8); + border: deprecated.$s-2 solid transparent; + gap: deprecated.$s-2; &.dnd-over-bot { - border-bottom: $s-2 solid var(--layer-row-foreground-color-hover); + border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } &.dnd-over-top { - border-top: $s-2 solid var(--layer-row-foreground-color-hover); + border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } &.dnd-over { - border: $s-2 solid var(--layer-row-foreground-color-hover); + border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); } } .set-item-group { cursor: unset; - padding-left: calc($s-24 * var(--tree-depth, 0)); + padding-left: calc(deprecated.$s-24 * var(--tree-depth, 0)); gap: 0; } .set-item-group-collapse-button { cursor: pointer; width: auto; - height: $s-28; + height: deprecated.$s-28; } .set-name { - @include textEllipsis; + @include deprecated.textEllipsis; flex-grow: 1; - padding-left: $s-2; + padding-left: deprecated.$s-2; } .icon { flex-shrink: 0; display: flex; align-items: center; - width: $s-20; - height: $s-20; - padding-right: $s-4; + width: deprecated.$s-20; + height: deprecated.$s-20; + padding-right: deprecated.$s-4; } .root-icon { - margin-left: $s-8; + margin-left: deprecated.$s-8; } .checkbox-style { @@ -87,12 +87,12 @@ display: flex; justify-content: center; align-items: center; - width: $s-16; - height: $s-16; - margin-inline: $s-6; + width: deprecated.$s-16; + height: deprecated.$s-16; + margin-inline: deprecated.$s-6; background-color: var(--input-checkbox-background-color-rest); - border: $s-1 solid var(--input-checkbox-border-color-rest); - border-radius: $s-4; + border: deprecated.$s-1 solid var(--input-checkbox-border-color-rest); + border-radius: deprecated.$s-4; padding: 0; } @@ -102,7 +102,7 @@ } .checkbox-disabled { - border: $s-1 solid var(--color-background-quaternary); + border: deprecated.$s-1 solid var(--color-background-quaternary); background-color: var(--color-background-tertiary); } @@ -126,7 +126,7 @@ justify-content: center; align-items: center; width: 100%; - padding: $s-12; + padding: deprecated.$s-12; color: var(--color-foreground-secondary); } .selected-set { @@ -136,27 +136,27 @@ } .collapsabled-icon { - @include buttonStyle; - @include flexCenter; - height: $s-24; - border-radius: $br-8; + @include deprecated.buttonStyle; + @include deprecated.flexCenter; + height: deprecated.$s-24; + border-radius: deprecated.$br-8; &:hover { color: var(--title-foreground-color-hover); } } .editing-node { - @include textEllipsis; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.textEllipsis; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; + border: deprecated.$s-1 solid var(--input-border-color-focus); + border-radius: deprecated.$br-8; color: var(--layer-row-foreground-color-focus); flex-grow: 1; - height: $s-28; + height: deprecated.$s-28; margin: 0; - padding-left: $s-6; + padding-left: deprecated.$s-6; &::placeholder { color: var(--layer-row-foreground-color-placeholder); diff --git a/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss b/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss index 5c66f0fd5f..ae5339a979 100644 --- a/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/settings/menu.scss @@ -6,7 +6,7 @@ @use "ds/spacing.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .setting-modal-overlay { @extend .modal-overlay-base; diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index b823bef42b..a48adee402 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -6,14 +6,14 @@ @use "ds/typography.scss" as *; @use "ds/spacing.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .sidebar-wrapper { display: grid; grid-template-rows: auto 1fr auto; // Overflow on the bottom section can't be done without hardcoded values for the height // This has to be changed from the wrapping sidebar styles - height: calc(100vh - #{$s-92}); + height: calc(100vh - #{deprecated.$s-92}); overflow: hidden; } @@ -46,7 +46,7 @@ } .section-text-icon { - font-size: $fs-12; + font-size: deprecated.$fs-12; width: var(--sp-l); height: var(--sp-l); display: flex; @@ -76,7 +76,7 @@ display: flex; align-items: center; justify-content: end; - padding: $s-6 var(--sp-s); + padding: deprecated.$s-6 var(--sp-s); text-transform: uppercase; gap: var(--sp-s); background-color: var(--color-background-primary); @@ -86,10 +86,10 @@ .import-export-menu { @extend .menu-dropdown; - top: -#{$s-6}; + top: -#{deprecated.$s-6}; right: 0; translate: 0 -100%; - width: $s-192; + width: deprecated.$s-192; margin: 0; } @@ -119,13 +119,13 @@ position: absolute; left: 0; width: 100%; - padding: $s-3 0 $s-1 0; - height: $s-6; + padding: deprecated.$s-3 0 deprecated.$s-1 0; + height: deprecated.$s-6; cursor: ns-resize; z-index: 1; } .resize-handle-horiz { - border-bottom: $s-2 solid var(--resize-area-border-color); + border-bottom: deprecated.$s-2 solid var(--resize-area-border-color); cursor: ns-resize; } 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 39ad40009f..456f0a28cc 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 @@ -6,7 +6,7 @@ @use "ds/_sizes.scss" as *; -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .modal-overlay { @extend .modal-overlay-base; @@ -16,7 +16,7 @@ @extend .modal-container-base; width: 100%; - max-width: $s-512; + max-width: deprecated.$s-512; max-height: unset; user-select: none; } @@ -26,15 +26,15 @@ flex-direction: column; justify-content: center; align-items: center; - gap: $s-12; - padding: $s-72 0; + gap: deprecated.$s-12; + padding: deprecated.$s-72 0; } .themes-modal-wrapper { display: flex; flex-direction: column; - gap: $s-16; - max-height: $s-688; + gap: deprecated.$s-16; + max-height: deprecated.$s-688; } .edit-theme-form { @@ -57,7 +57,7 @@ width: fit-content; display: grid; grid-template-columns: auto auto; - gap: $s-4; + gap: deprecated.$s-4; align-items: center; padding: 0; &:hover { @@ -69,7 +69,7 @@ display: flex; margin-left: auto; justify-content: flex-end; - gap: $s-6; + gap: deprecated.$s-6; } .edit-theme-footer { @@ -98,18 +98,18 @@ .create-theme-wrapper { display: flex; flex-direction: column; - gap: $s-24; + gap: deprecated.$s-24; } .close-btn { position: absolute; - top: $s-8; - right: $s-6; + top: deprecated.$s-8; + right: deprecated.$s-6; } .theme-group-label { color: var(--color-foreground-secondary); - margin: 0 0 $s-12 0; + margin: 0 0 deprecated.$s-12 0; padding: 0; } @@ -117,7 +117,7 @@ display: flex; align-items: center; justify-content: flex-start; - gap: $s-4; + gap: deprecated.$s-4; } .group-title-icon { @@ -126,33 +126,33 @@ .group-title-name { flex-grow: 1; - @include textEllipsis; + @include deprecated.textEllipsis; } .theme-group-rows-wrapper { display: flex; flex-direction: column; - gap: $s-6; + gap: deprecated.$s-6; margin: 0; } .theme-group-wrapper { display: flex; flex-direction: column; - margin-block-start: $s-6; + margin-block-start: deprecated.$s-6; overflow-y: auto; - gap: $s-32; + gap: deprecated.$s-32; } .theme-row { align-items: center; display: flex; justify-content: space-between; - gap: $s-16; + gap: deprecated.$s-16; } .theme-name-row { - @include textEllipsis; + @include deprecated.textEllipsis; flex-grow: 1; } @@ -163,13 +163,13 @@ .theme-actions-row { align-items: center; display: flex; - gap: $s-6; + gap: deprecated.$s-6; flex-shrink: 0; } .sets-count-button { - padding: $s-6; - padding-left: $s-12; + padding: deprecated.$s-6; + padding-left: deprecated.$s-12; } .label-wrapper { @@ -182,32 +182,32 @@ .edit-theme-wrapper { display: flex; flex-direction: column; - gap: $s-24; + gap: deprecated.$s-24; inline-size: 100%; } .sets-list-wrapper { - border: $s-1 solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); - border-radius: $s-8; + border: deprecated.$s-1 solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); + border-radius: deprecated.$s-8; overflow-y: auto; - max-height: $s-452; + max-height: deprecated.$s-452; } .sets-count-empty-button { text-transform: lowercase; - padding: $s-6; - padding-left: $s-12; + padding: deprecated.$s-6; + padding-left: deprecated.$s-12; } .group-input-wrapper { position: relative; display: flex; flex-direction: column; - gap: $s-4; + gap: deprecated.$s-4; } .edit-theme-inputs-wrapper { display: grid; grid-template-columns: 0.6fr 1fr; - gap: $s-12; + gap: deprecated.$s-12; } 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 e84620223c..867d65eafe 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 @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .custom-select { --custom-select-border-color: var(--menu-background-color); @@ -15,13 +15,13 @@ display: grid; grid-template-columns: 1fr auto; align-items: center; - height: $s-32; + height: deprecated.$s-32; width: 100%; margin: 0; - padding: $s-8; - border-radius: $br-8; + padding: deprecated.$s-8; + border-radius: deprecated.$br-8; background-color: var(--custom-select-bg-color); - border: $s-1 solid var(--custom-select-border-color); + border: deprecated.$s-1 solid var(--custom-select-border-color); color: var(--custom-select-text-color); cursor: pointer; &:hover { @@ -41,9 +41,9 @@ } .group { - @include textEllipsis; + @include deprecated.textEllipsis; display: block; - padding: $s-8; + padding: deprecated.$s-8; color: var(--color-foreground-secondary); } @@ -57,14 +57,14 @@ } .dropdown-button { - @include flexCenter; + @include deprecated.flexCenter; color: var(--color-foreground-secondary); } .current-icon { - @include flexCenter; - width: $s-24; - padding-right: $s-4; + @include deprecated.flexCenter; + width: deprecated.$s-24; + padding-right: deprecated.$s-4; } .custom-select-dropdown { @@ -73,17 +73,18 @@ .separator { margin: 0; - height: $s-2; - border-block-start: $s-1 solid color-mix(in hsl, var(--color-foreground-secondary) 20%, transparent); + height: deprecated.$s-2; + border-block-start: deprecated.$s-1 solid + color-mix(in hsl, var(--color-foreground-secondary) 20%, transparent); } .custom-select-dropdown[data-direction="up"] { - bottom: $s-32; + bottom: deprecated.$s-32; top: auto; } .sub-item { - padding-left: $s-16; + padding-left: deprecated.$s-16; } .checked-element-button { @@ -105,7 +106,7 @@ } .check-icon { - @include flexCenter; + @include deprecated.flexCenter; color: var(--icon-foreground-primary); visibility: hidden; } @@ -120,11 +121,11 @@ } .current-label { - @include textEllipsis; + @include deprecated.textEllipsis; } .dropdown-portal { - --menu-max-height: #{$s-400}; + --menu-max-height: #{deprecated.$s-400}; @extend .new-scrollbar; position: absolute; diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss index 33c0ab1d94..53b534569e 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .main-toolbar { cursor: initial; @@ -14,36 +14,36 @@ display: flex; align-items: center; flex-direction: column; - height: $s-56; - padding: $s-8 $s-16; - border-radius: $s-8; - border: $s-2 solid var(--panel-border-color); - z-index: $z-index-3; + height: deprecated.$s-56; + padding: deprecated.$s-8 deprecated.$s-16; + border-radius: deprecated.$s-8; + border: deprecated.$s-2 solid var(--panel-border-color); + z-index: deprecated.$z-index-3; background-color: var(--color-background-primary); transition: top 0.3s, height 0.3s, opacity 0.3s; - --toolbar-position-y: #{$s-28}; + --toolbar-position-y: #{deprecated.$s-28}; --toolbar-offset-y: 0px; top: calc(var(--toolbar-position-y) + var(--toolbar-offset-y)); } .main-toolbar-no-rulers { --toolbar-position-y: 0px; - --toolbar-offset-y: #{$s-8}; + --toolbar-offset-y: #{deprecated.$s-8}; } .main-toolbar-hidden { - --toolbar-offset-y: -#{$s-4}; - height: $s-16; - z-index: $z-index-1; - border-radius: 0 0 $s-8 $s-8; + --toolbar-offset-y: -#{deprecated.$s-4}; + height: deprecated.$s-16; + z-index: deprecated.$z-index-1; + border-radius: 0 0 deprecated.$s-8 deprecated.$s-8; border-block-start: 0; .main-toolbar-options { - opacity: $op-0; + opacity: deprecated.$op-0; visibility: hidden; } } @@ -53,7 +53,7 @@ display: flex; align-items: center; margin: 0; - opacity: $op-10; + opacity: deprecated.$op-10; transition: opacity 0.3s ease; li { @@ -63,11 +63,11 @@ .main-toolbar-options-button { @extend .button-tertiary; - height: $s-36; - width: $s-36; + height: deprecated.$s-36; + width: deprecated.$s-36; flex-shrink: 0; - border-radius: $s-8; - margin: 0 $s-2; + border-radius: deprecated.$s-8; + margin: 0 deprecated.$s-2; svg { @extend .button-icon; @@ -80,20 +80,20 @@ } .toolbar-handler { - @include flexCenter; - @include buttonStyle; + @include deprecated.flexCenter; + @include deprecated.buttonStyle; position: absolute; left: 0; bottom: 0; - height: $s-12; + height: deprecated.$s-12; width: 100%; .toolbar-handler-btn { - height: $s-4; + height: deprecated.$s-4; width: 100%; - max-width: $s-64; + max-width: deprecated.$s-64; padding: 0; - border-radius: $s-4; + border-radius: deprecated.$s-4; background-color: var(--palette-handler-background-color); } } diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.scss b/frontend/src/app/main/ui/workspace/viewport/comments.scss index 4fbcfa7532..2e6b283f86 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.scss +++ b/frontend/src/app/main/ui/workspace/viewport/comments.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .workspace-comments-container { width: 100%; 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 c796931142..d0f1549cb1 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 @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .grid-track-marker { .marker-shape { @@ -12,7 +12,7 @@ } .marker-text { fill: var(--app-white); - font-size: calc($s-12 / var(--zoom)); + font-size: calc(deprecated.$s-12 / var(--zoom)); font-family: worksans; } } @@ -37,12 +37,12 @@ border: 0; color: var(--grid-editor-marker-text); font-family: worksans; - font-size: calc($fs-12 / var(--zoom)); + font-size: calc(deprecated.$fs-12 / var(--zoom)); font-weight: 400; margin: 0; - max-width: calc($s-60 / var(--zoom)); + max-width: calc(deprecated.$s-60 / var(--zoom)); padding: 0; - padding: calc($s-4 / var(--zoom)); + padding: calc(deprecated.$s-4 / var(--zoom)); text-align: center; &:focus { @@ -57,16 +57,16 @@ margin: 0; padding: 0; position: absolute; - top: calc($s-6 / var(--zoom)); - right: calc($s-20 / var(--zoom)); - width: calc($s-20 / var(--zoom)); - height: calc($s-20 / var(--zoom)); + top: calc(deprecated.$s-6 / var(--zoom)); + right: calc(deprecated.$s-20 / var(--zoom)); + width: calc(deprecated.$s-20 / var(--zoom)); + height: calc(deprecated.$s-20 / var(--zoom)); svg { position: absolute; top: 0; left: 0; - width: calc($s-16 / var(--zoom)); + width: calc(deprecated.$s-16 / var(--zoom)); height: auto; stroke: var(--grid-editor-marker-color); } @@ -84,7 +84,7 @@ .grid-plus-shape { fill: var(--grid-editor-plus-btn-background); stroke: var(--grid-editor-plus-btn-background); - stroke-width: calc($s-1 / var(--zoom)); + stroke-width: calc(deprecated.$s-1 / var(--zoom)); } .grid-plus-icon { @@ -112,44 +112,44 @@ .grid-actions { pointer-events: none; position: absolute; - top: $s-44; + top: deprecated.$s-44; left: 50%; - z-index: $z-index-20; + z-index: deprecated.$z-index-20; } .grid-actions-container { - @include flexRow; + @include deprecated.flexRow; background: var(--panel-background-color); - border-radius: $br-12; - box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color); - gap: $s-8; - height: $s-48; + border-radius: deprecated.$br-12; + box-shadow: 0px 0px deprecated.$s-12 0px var(--menu-shadow-color); + gap: deprecated.$s-8; + height: deprecated.$s-48; margin-left: -50%; - padding: $s-8; + padding: deprecated.$s-8; cursor: initial; pointer-events: initial; - width: $s-512; + width: deprecated.$s-512; } .grid-actions-title { flex: 1; - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-secondary); - padding-left: $s-8; + padding-left: deprecated.$s-8; } .locate-btn { @extend .button-secondary; text-transform: uppercase; - padding: $s-8 $s-20; - font-size: $fs-11; + padding: deprecated.$s-8 deprecated.$s-20; + font-size: deprecated.$fs-11; } .done-btn { @extend .button-primary; text-transform: uppercase; - padding: $s-8 $s-20; - font-size: $fs-11; + padding: deprecated.$s-8 deprecated.$s-20; + font-size: deprecated.$fs-11; } .close-btn { diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss index 20fb1e7180..94c86e6a8d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss +++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss @@ -4,23 +4,23 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .sub-actions { cursor: initial; pointer-events: initial; position: absolute; - top: $s-12; + top: deprecated.$s-12; left: 50%; transform: translateX(-50%); display: flex; align-items: center; - height: $s-56; - padding: $s-8 $s-16; - border-radius: $s-8; - gap: $s-16; - border: $s-2 solid var(--panel-border-color); - z-index: $z-index-3; + height: deprecated.$s-56; + padding: deprecated.$s-8 deprecated.$s-16; + border-radius: deprecated.$s-8; + gap: deprecated.$s-16; + border: deprecated.$s-2 solid var(--panel-border-color); + z-index: deprecated.$z-index-3; background-color: var(--color-background-primary); transition: top 0.3s, @@ -33,20 +33,20 @@ display: flex; align-items: center; margin: 0; - opacity: $op-10; + opacity: deprecated.$op-10; transition: opacity 0.3s ease; } .topbar-btn { --pathbar-icon-color: var(--color-foreground-secondary); @extend .button-tertiary; - height: $s-36; - width: $s-36; + height: deprecated.$s-36; + width: deprecated.$s-36; flex-shrink: 0; background-color: transparent; - border-radius: $s-8; + border-radius: deprecated.$s-8; border: none; - margin: 0 $s-2; + margin: 0 deprecated.$s-2; &.is-toggled { --pathbar-icon-color: var(--button-radio-foreground-color-active); diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.scss b/frontend/src/app/main/ui/workspace/viewport/presence.scss index e280d6c21e..d71cd38e21 100644 --- a/frontend/src/app/main/ui/workspace/viewport/presence.scss +++ b/frontend/src/app/main/ui/workspace/viewport/presence.scss @@ -4,18 +4,18 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .profile-name { width: fit-content; font-family: worksans; padding: 2px 12px; - border-radius: $br-4; + border-radius: deprecated.$br-4; display: flex; align-items: center; height: 20px; - font-size: $fs-12; - line-height: $lh-150; + font-size: deprecated.$fs-12; + line-height: deprecated.$lh-150; } .multiuser-cursor { 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 00f8ee4319..802dc32ab7 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss @@ -4,51 +4,51 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .viewport-actions, .viewport-actions-path { pointer-events: none; position: absolute; - --actions-toolbar-position-y: #{$s-28}; - --actions-toolbar-offset-y: #{$s-6}; + --actions-toolbar-position-y: #{deprecated.$s-28}; + --actions-toolbar-offset-y: #{deprecated.$s-6}; top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y)); left: 50%; - z-index: $z-index-20; + z-index: deprecated.$z-index-20; } .viewport-actions-path { - z-index: $z-index-3; + z-index: deprecated.$z-index-3; } .viewport-actions-container { - @include flexRow; + @include deprecated.flexRow; background: var(--panel-background-color); - border-radius: $br-12; - box-shadow: 0 0 $s-12 0 var(--menu-shadow-color); - gap: $s-8; - height: $s-48; + border-radius: deprecated.$br-12; + box-shadow: 0 0 deprecated.$s-12 0 var(--menu-shadow-color); + gap: deprecated.$s-8; + height: deprecated.$s-48; margin-left: -50%; - padding: $s-8; + padding: deprecated.$s-8; cursor: initial; pointer-events: initial; - width: $s-400; - border: $s-2 solid var(--panel-border-color); + width: deprecated.$s-400; + border: deprecated.$s-2 solid var(--panel-border-color); } .viewport-actions-title { flex: 1; - font-size: $fs-12; + font-size: deprecated.$fs-12; color: var(--color-foreground-secondary); - padding-left: $s-8; + padding-left: deprecated.$s-8; } .done-btn { @extend .button-primary; text-transform: uppercase; - padding: $s-8 $s-20; - font-size: $fs-11; + padding: deprecated.$s-8 deprecated.$s-20; + font-size: deprecated.$fs-11; } .viewport-actions-no-rulers { diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.scss b/frontend/src/app/main/ui/workspace/viewport/widgets.scss index eec7da4adc..d14cf482e4 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.scss +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as *; +@use "refactor/common-refactor.scss" as deprecated; .flow-element { display: flex; @@ -23,18 +23,18 @@ cursor: pointer; display: flex; .content { - @include bodySmallTypography; + @include deprecated.bodySmallTypography; display: flex; align-items: center; - height: $s-24; - border-radius: $br-6; + height: deprecated.$s-24; + border-radius: deprecated.$br-6; background-color: var(--flow-tag-background-color); svg { @extend .button-icon; - height: $s-24; - width: $s-12; + height: deprecated.$s-24; + width: deprecated.$s-12; stroke: var(--icon-foreground); - margin: 0 $s-8; + margin: 0 deprecated.$s-8; } span { @@ -42,7 +42,7 @@ display: flex; align-items: center; justify-content: center; - margin-right: $s-8; + margin-right: deprecated.$s-8; color: var(--flow-tag-foreground-color); } } @@ -65,7 +65,7 @@ } .workspace-frame-label { - font-size: $fs-12; + font-size: deprecated.$fs-12; color: black; text-overflow: ellipsis; overflow: hidden; @@ -75,14 +75,14 @@ } .element-name-input { - @include removeInputStyle; - @include bodySmallTypography; - @include removeInputStyle; + @include deprecated.removeInputStyle; + @include deprecated.bodySmallTypography; + @include deprecated.removeInputStyle; flex-grow: 1; height: 20px; margin: 0; - padding-left: $s-6; - border: $s-1 solid var(--input-border-color-focus); + padding-left: deprecated.$s-6; + border: deprecated.$s-1 solid var(--input-border-color-focus); color: var(--layer-row-foreground-color); width: 100%; max-width: initial;