github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 11:18:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Fix linter errors under legacy resources scss (#9035)

Browse Source
This commit is contained in:
Xaviju 2026-04-20 23:58:53 +02:00 committed by GitHub
parent 876b8d645d
commit e9105f3670
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
131 changed files with 955 additions and 906 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/technical-guide/developer/ui.md
View File

@ -199,6 +199,7 @@ Remember that nesting selector increases specificity, and it's usually not neede
fill: var(--icon-color); fill: var(--icon-color);
} }
``` ```
Note: Thanks to CSS Modules, identical class names defined in different files are scoped locally and do not cause naming collisions. Note: Thanks to CSS Modules, identical class names defined in different files are scoped locally and do not cause naming collisions.
### Use CSS logical properties ### Use CSS logical properties
@ -228,17 +229,21 @@ Note: Although `width` and `height` are physical properties, their use is allowe
Avoid hardcoded values like `px`, `rem`, or raw SASS variables `($s-*)`. Use semantic, named variables provided by the Design System to ensure consistency and scalability. Avoid hardcoded values like `px`, `rem`, or raw SASS variables `($s-*)`. Use semantic, named variables provided by the Design System to ensure consistency and scalability.
#### Spacing (margins, paddings, gaps...) #### Spacing (margins, paddings, gaps...)
Use variables from `frontend/src/app/main/ui/ds/spacing.scss`. These are predefined and approved by the design team — **do not add or modify values without design approval**. Use variables from `frontend/src/app/main/ui/ds/spacing.scss`. These are predefined and approved by the design team — **do not add or modify values without design approval**.
#### Fixed dimensions #### Fixed dimensions
For fixed dimensions (e.g., modals' widths) defined by design and not layout-driven, use or define variables in `frontend/src/app/main/ui/ds/_sizes.scss`. To use them: For fixed dimensions (e.g., modals' widths) defined by design and not layout-driven, use or define variables in `frontend/src/app/main/ui/ds/_sizes.scss`. To use them:
```scss ```scss
@use "ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
``` ```
Note: Since these values haven't been semantically defined yet, we’re temporarily using SASS variables instead of named CSS custom properties. Note: Since these values haven't been semantically defined yet, we’re temporarily using SASS variables instead of named CSS custom properties.
#### Border Widths #### Border Widths
Use border thickness variables from `frontend/src/app/main/ui/ds/_borders.scss`. To import: Use border thickness variables from `frontend/src/app/main/ui/ds/_borders.scss`. To import:
```scss ```scss
@ -308,11 +313,12 @@ When applying typography in SCSS, use the proper mixin from the Design System.
```scss ```scss
.class { .class {
@include headlineLargeTypography; @include headline-large-typography;
} }
``` ```
✅ **DO: Use the DS mixin** ✅ **DO: Use the DS mixin**
```scss ```scss
@use "ds/typography.scss" as t; @use "ds/typography.scss" as t;
@ -320,10 +326,10 @@ When applying typography in SCSS, use the proper mixin from the Design System.
@include t.use-typography("body-small"); @include t.use-typography("body-small");
} }
``` ```
You can find the full list of available typography tokens in [Storybook](https://design.penpot.app/storybook/?path=/docs/foundations-typography--docs). You can find the full list of available typography tokens in [Storybook](https://design.penpot.app/storybook/?path=/docs/foundations-typography--docs).
If the design you are implementing doesn't match any of them, ask a designer. If the design you are implementing doesn't match any of them, ask a designer.
### Use custom properties within components ### Use custom properties within components
Reduce the need for one-off SASS variables by leveraging [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) in your component styles. This keeps component theming flexible and composable. Reduce the need for one-off SASS variables by leveraging [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) in your component styles. This keeps component theming flexible and composable.
@ -664,7 +670,6 @@ We use three **levels of tokens**:
We can leverage component tokens to easily implement variants as explained [here](/technical-guide/developer/ui/#use-custom-properties-within-components). We can leverage component tokens to easily implement variants as explained [here](/technical-guide/developer/ui/#use-custom-properties-within-components).
### Using icons and SVG assets ### Using icons and SVG assets
Please refer to the Storybook [documentation for icons](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-icon--docs) and other [SVG assets](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-rawsvg--docs) (logos, illustrations, etc.). Please refer to the Storybook [documentation for icons](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-icon--docs) and other [SVG assets](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-rawsvg--docs) (logos, illustrations, etc.).

2
frontend/package.json
View File

@ -31,7 +31,7 @@
"fmt:scss": "prettier -c resources/styles -c src/**/*.scss -w", "fmt:scss": "prettier -c resources/styles -c src/**/*.scss -w",
"lint:clj": "clj-kondo --parallel --lint ../common/src src/", "lint:clj": "clj-kondo --parallel --lint ../common/src src/",
"lint:js": "exit 0", "lint:js": "exit 0",
"lint:scss": "pnpx stylelint 'src/**/*.scss'", "lint:scss": "pnpx stylelint '{src,resources}/**/*.scss'",
"build:test": "clojure -M:dev:shadow-cljs compile test", "build:test": "clojure -M:dev:shadow-cljs compile test",
"test": "pnpm run build:wasm && pnpm run build:test && node target/tests/test.js", "test": "pnpm run build:wasm && pnpm run build:test && node target/tests/test.js",
"test:storybook": "vitest run --project=storybook", "test:storybook": "vitest run --project=storybook",

13
frontend/resources/styles/common/base.scss
View File

@ -30,6 +30,7 @@ body {
&.cursor-drag-scrub { &.cursor-drag-scrub {
cursor: ew-resize !important; cursor: ew-resize !important;
* { * {
cursor: ew-resize !important; cursor: ew-resize !important;
} }
@ -120,16 +121,15 @@ hr {
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; appearance: none;
margin: 0; margin: 0;
} }
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; appearance: textfield;
} }
[contenteditable] { [contenteditable] {
-webkit-user-select: text;
user-select: text; user-select: text;
} }
@ -139,15 +139,12 @@ select {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs14; font-size: $fs14;
margin-bottom: $size-4; margin-bottom: $size-4;
-webkit-appearance: none; appearance: none;
-moz-appearance: none;
} }
[draggable] { [draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none; user-select: none;
/* Required to make elements draggable in old WebKit */ /* Required to make elements draggable in old WebKit */
-khtml-user-drag: element; -khtml-user-drag: element;
-webkit-user-drag: element; -webkit-user-drag: element;

4
frontend/resources/styles/common/dependencies/_hljs-dark-theme.scss
View File

@ -82,7 +82,7 @@
.hljs-section { .hljs-section {
/* prettylights-syntax-markup-heading */ /* prettylights-syntax-markup-heading */
color: #316dca; color: #316dca;
font-weight: bold; font-weight: 700;
} }
.hljs-bullet { .hljs-bullet {
@ -99,7 +99,7 @@
.hljs-strong { .hljs-strong {
/* prettylights-syntax-markup-bold */ /* prettylights-syntax-markup-bold */
color: #adbac7; color: #adbac7;
font-weight: bold; font-weight: 700;
} }
.hljs-addition { .hljs-addition {

6
frontend/resources/styles/common/dependencies/_hljs-light-theme.scss
View File

@ -11,7 +11,7 @@
.hljs { .hljs {
color: #24292e; color: #24292e;
background: #ffffff; background: #fff;
} }
.hljs-doctag, .hljs-doctag,
@ -83,7 +83,7 @@
.hljs-section { .hljs-section {
/* prettylights-syntax-markup-heading */ /* prettylights-syntax-markup-heading */
color: #005cc5; color: #005cc5;
font-weight: bold; font-weight: 700;
} }
.hljs-bullet { .hljs-bullet {
@ -100,7 +100,7 @@
.hljs-strong { .hljs-strong {
/* prettylights-syntax-markup-bold */ /* prettylights-syntax-markup-bold */
color: #24292e; color: #24292e;
font-weight: bold; font-weight: 700;
} }
.hljs-addition { .hljs-addition {

71
frontend/resources/styles/common/dependencies/animations.scss
View File

@ -7,13 +7,11 @@
*/ */
.animated { .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s; animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; animation-fill-mode: both;
} }
@-webkit-keyframes fadeIn { @keyframes fade-in {
0% { 0% {
opacity: 0; opacity: 0;
} }
@ -23,79 +21,22 @@
} }
} }
@keyframes fadeIn { .fade-in {
0% { animation-name: fade-in;
opacity: 0;
}
100% {
opacity: 1;
}
} }
.fadeIn { @keyframes fade-in-down {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
} }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: none;
transform: none; transform: none;
} }
} }
@keyframes fadeInDown { .fade-in-down {
0% { animation-name: fade-in-down;
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@keyframes loaderColor {
0% {
fill: #513b56;
}
33% {
fill: #348aa7;
}
66% {
fill: #5dd39e;
}
100% {
fill: #513b56;
}
}
//pencil loader animation
@keyframes linePencil {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-150px);
}
} }

3
frontend/resources/styles/common/dependencies/fonts.scss
View File

@ -10,7 +10,7 @@
$style-name, $style-name,
$file, $file,
$unicode-range, $unicode-range,
$weight: unquote("normal"), $weight: string.unquote("normal"),
$style: string.unquote("normal") $style: string.unquote("normal")
) { ) {
$filepath: "../fonts/" + $file; $filepath: "../fonts/" + $file;
@ -22,6 +22,7 @@
url($filepath + ".ttf") format("truetype"); url($filepath + ".ttf") format("truetype");
font-weight: string.unquote($weight); font-weight: string.unquote($weight);
font-style: string.unquote($style); font-style: string.unquote($style);
@if $unicode-range { @if $unicode-range {
unicode-range: $unicode-range; unicode-range: $unicode-range;
} }

4
frontend/resources/styles/common/dependencies/highlight.scss
View File

@ -7,9 +7,9 @@
@use "sass:meta"; @use "sass:meta";
:root { :root {
@include meta.load-css("./_hljs-dark-theme.scss"); @include meta.load-css("./_hljs-dark-theme");
} }
.light { .light {
@include meta.load-css("./_hljs-light-theme.scss"); @include meta.load-css("./_hljs-light-theme");
} }

16
frontend/resources/styles/common/dependencies/reset.scss
View File

@ -11,12 +11,13 @@ License: none (public domain)
div { div {
vertical-align: top; vertical-align: top;
} }
img { img {
display: block; display: block;
} }
// #Reset & Basics (Inspired by E. Meyers) // #Reset & Basics (Inspired by E. Meyers)
//================================================== // ==================================================
a, a,
abbr, abbr,
acronym, acronym,
@ -100,7 +101,9 @@ var,
video { video {
border: 0; border: 0;
font: inherit; font: inherit;
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
font-size: 100%; font-size: 100%;
// TODO: Changing line-height to 1 (as it should be) makes the visual tests // TODO: Changing line-height to 1 (as it should be) makes the visual tests
// fail with a max pixel diff ratio of 0.005. // fail with a max pixel diff ratio of 0.005.
// We should tackle this later. // We should tackle this later.
@ -124,6 +127,7 @@ nav,
section { section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
@ -138,10 +142,10 @@ q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote::before,
blockquote:after, blockquote::after,
q:before, q::before,
q:after { q::after {
content: ""; content: "";
} }
@ -151,5 +155,5 @@ table {
} }
select { select {
-webkit-appearance: none; appearance: none;
} }

10
frontend/resources/styles/common/refactor/animations.scss
View File

@ -5,16 +5,6 @@
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@mixin animation($delay, $duration, $animation) { @mixin animation($delay, $duration, $animation) {
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: both;
-moz-animation-delay: $delay;
-moz-animation-duration: $duration;
-moz-animation-name: $animation;
-moz-animation-fill-mode: both;
animation-delay: $delay; animation-delay: $delay;
animation-duration: $duration; animation-duration: $duration;
animation-name: $animation; animation-name: $animation;

309
frontend/resources/styles/common/refactor/basic-rules.scss
View File

@ -14,9 +14,10 @@
// SCROLLBAR // SCROLLBAR
%new-scrollbar { %new-scrollbar {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(170, 181, 186, 0.3) transparent; scrollbar-color: rgb(170 181 186 / 0.3) transparent;
&:hover { &:hover {
scrollbar-color: rgba(170, 181, 186, 0.7) transparent; scrollbar-color: rgb(170 181 186 / 0.7) transparent;
} }
// These rules do not apply in chrome - 121 or higher // These rules do not apply in chrome - 121 or higher
@ -27,18 +28,20 @@
height: $s-12; height: $s-12;
width: $s-12; width: $s-12;
} }
::-webkit-scrollbar-track, ::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(170, 181, 186, 0.3); background-color: rgb(170 181 186 / 0.3);
background-clip: content-box; background-clip: content-box;
border: $s-2 solid transparent; border: $s-2 solid transparent;
border-radius: $br-8; border-radius: $br-8;
&:hover { &:hover {
background-color: rgba(170, 181, 186, 0.7); background-color: rgb(170 181 186 / 0.7);
outline: none; outline: none;
} }
} }
@ -48,48 +51,53 @@
color: var(--text-editor-selection-foreground-color); color: var(--text-editor-selection-foreground-color);
} }
::placeholder, ::placeholder {
::-webkit-input-placeholder { @include body-small-typography;
@include bodySmallTypography;
color: var(--input-placeholder-color); color: var(--input-placeholder-color);
} }
} }
// BUTTONS // BUTTONS
%button-primary { %button-primary {
@include buttonStyle; @include button-style;
@include flexCenter; @include flex-center;
@include headlineSmallTypography; @include headline-small-typography;
background-color: var(--button-primary-background-color-rest); background-color: var(--button-primary-background-color-rest);
border: $s-1 solid var(--button-primary-border-color-rest); border: $s-1 solid var(--button-primary-border-color-rest);
color: var(--button-primary-foreground-color-rest); color: var(--button-primary-foreground-color-rest);
border-radius: $br-8; border-radius: $br-8;
min-height: $s-32; min-height: $s-32;
svg,
span svg { svg {
stroke: var(--button-primary-foreground-color-rest); stroke: var(--button-primary-foreground-color-rest);
} }
@include focusPrimary;
@include focus-primary;
&:hover { &:hover {
background-color: var(--button-primary-background-color-hover); background-color: var(--button-primary-background-color-hover);
border: $s-1 solid var(--button-primary-border-color-hover); border: $s-1 solid var(--button-primary-border-color-hover);
color: var(--button-primary-foreground-color-hover); color: var(--button-primary-foreground-color-hover);
text-decoration: none; text-decoration: none;
svg,
span svg { svg {
stroke: var(--button-primary-foreground-color-hover); stroke: var(--button-primary-foreground-color-hover);
} }
} }
&:active { &:active {
background-color: var(--button-primary-background-color-active); background-color: var(--button-primary-background-color-active);
border: $s-1 solid var(--button-primary-border-color-active); border: $s-1 solid var(--button-primary-border-color-active);
color: var(--button-primary-foreground-color-active); color: var(--button-primary-foreground-color-active);
outline: none; outline: none;
svg,
span svg { svg {
stroke: var(--button-primary-foreground-color-active); stroke: var(--button-primary-foreground-color-active);
} }
} }
&:global(.disabled), &:global(.disabled),
&[disabled], &[disabled],
&:disabled { &:disabled {
@ -101,37 +109,42 @@
} }
%button-secondary { %button-secondary {
@include buttonStyle; @include button-style;
@include flexCenter; @include flex-center;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--button-secondary-background-color-rest); background-color: var(--button-secondary-background-color-rest);
border: $s-1 solid var(--button-secondary-border-color-rest); border: $s-1 solid var(--button-secondary-border-color-rest);
color: var(--button-secondary-foreground-color-rest); color: var(--button-secondary-foreground-color-rest);
svg,
span svg { svg {
stroke: var(--button-secondary-foreground-color-rest); stroke: var(--button-secondary-foreground-color-rest);
} }
@include focusSecondary;
@include focus-secondary;
&:hover { &:hover {
background-color: var(--button-secondary-background-color-hover); background-color: var(--button-secondary-background-color-hover);
border: $s-1 solid var(--button-secondary-border-color-hover); border: $s-1 solid var(--button-secondary-border-color-hover);
color: var(--button-secondary-foreground-color-hover); color: var(--button-secondary-foreground-color-hover);
text-decoration: none; text-decoration: none;
svg,
span svg { svg {
stroke: var(--button-secondary-foreground-color-hover); stroke: var(--button-secondary-foreground-color-hover);
} }
} }
&:active { &:active {
outline: none; outline: none;
background-color: var(--button-secondary-background-color-active); background-color: var(--button-secondary-background-color-active);
border: $s-1 solid var(--button-secondary-border-color-active); border: $s-1 solid var(--button-secondary-border-color-active);
color: var(--button-secondary-foreground-color-active); color: var(--button-secondary-foreground-color-active);
svg,
span svg { svg {
stroke: var(--button-secondary-foreground-color-active); stroke: var(--button-secondary-foreground-color-active);
} }
} }
&:global(.disabled), &:global(.disabled),
&[disabled], &[disabled],
&:disabled { &:disabled {
@ -143,36 +156,41 @@
} }
%button-tertiary { %button-tertiary {
@include buttonStyle; @include button-style;
@include flexCenter; @include flex-center;
--button-tertiary-border-width: #{$s-2}; --button-tertiary-border-width: #{$s-2};
border-radius: $br-8; border-radius: $br-8;
color: var(--button-tertiary-foreground-color-rest); color: var(--button-tertiary-foreground-color-rest);
background-color: transparent; background-color: transparent;
border: var(--button-tertiary-border-width) solid transparent; border: var(--button-tertiary-border-width) solid transparent;
display: grid; display: grid;
place-content: center; place-content: center;
svg,
span svg { svg {
stroke: var(--button-tertiary-foreground-color-rest); stroke: var(--button-tertiary-foreground-color-rest);
} }
@include focusTertiary;
@include focus-tertiary;
&:hover { &:hover {
background-color: var(--button-tertiary-background-color-hover); background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-hover); color: var(--button-tertiary-foreground-color-hover);
border-color: var(--button-secondary-border-color-hover); border-color: var(--button-secondary-border-color-hover);
svg,
span svg { svg {
stroke: var(--button-tertiary-foreground-color-hover); stroke: var(--button-tertiary-foreground-color-hover);
} }
} }
&:active { &:active {
outline: none; outline: none;
border-color: transparent; border-color: transparent;
background-color: var(--button-tertiary-background-color-active); background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active); color: var(--button-tertiary-foreground-color-active);
svg,
span svg { svg {
stroke: var(--button-tertiary-foreground-color-active); stroke: var(--button-tertiary-foreground-color-active);
} }
} }
@ -184,8 +202,7 @@
cursor: unset; cursor: unset;
pointer-events: none; pointer-events: none;
svg, svg {
span svg {
stroke: var(--button-foreground-color-disabled); stroke: var(--button-foreground-color-disabled);
} }
} }
@ -196,54 +213,61 @@
border-color: var(--button-icon-border-color-selected); border-color: var(--button-icon-border-color-selected);
background-color: var(--button-icon-background-color-selected); background-color: var(--button-icon-background-color-selected);
color: var(--button-icon-foreground-color-selected); color: var(--button-icon-foreground-color-selected);
svg { svg {
stroke: var(--button-icon-foreground-color-selected); stroke: var(--button-icon-foreground-color-selected);
} }
} }
.button-radio { .button-radio {
@include buttonStyle; @include button-style;
@include flexCenter; @include flex-center;
border-radius: $br-8; border-radius: $br-8;
color: var(--button-radio-foreground-color-rest); color: var(--button-radio-foreground-color-rest);
border-color: $s-1 solid var(--button-radio-background-color-rest); border-color: $s-1 solid var(--button-radio-background-color-rest);
svg,
span svg { svg {
stroke: var(--button-radio-foreground-color-rest); stroke: var(--button-radio-foreground-color-rest);
} }
@include focusRadio;
@include focus-radio;
&:hover { &:hover {
background-color: var(--button-radio-background-color-rest); background-color: var(--button-radio-background-color-rest);
color: var(--button-radio-foreground-color-hover); color: var(--button-radio-foreground-color-hover);
border: $s-1 solid transparent; border: $s-1 solid transparent;
svg,
span svg { svg {
stroke: var(--button-radio-foreground-color-hover); stroke: var(--button-radio-foreground-color-hover);
} }
} }
&:active { &:active {
outline: none; outline: none;
border: $s-1 solid transparent; border: $s-1 solid transparent;
background-color: var(--button-radio-background-color-active); background-color: var(--button-radio-background-color-active);
color: var(--button-radio-foreground-color-active); color: var(--button-radio-foreground-color-active);
svg,
span svg { svg {
stroke: var(--button-radio-foreground-color-active); stroke: var(--button-radio-foreground-color-active);
} }
} }
} }
.button-warning { .button-warning {
@include buttonStyle; @include button-style;
@include flexCenter; @include flex-center;
background-color: var(--button-warning-background-color-rest); background-color: var(--button-warning-background-color-rest);
border: $s-1 solid var(--button-warning-border-color-rest); border: $s-1 solid var(--button-warning-border-color-rest);
color: var(--button-warning-foreground-color-rest); color: var(--button-warning-foreground-color-rest);
} }
%button-disabled { %button-disabled {
@include buttonStyle; @include button-style;
@include flexCenter; @include flex-center;
background-color: var(--button-background-color-disabled); background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled); border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled); color: var(--button-foreground-color-disabled);
@ -251,14 +275,16 @@
} }
%button-tag { %button-tag {
@include buttonStyle; @include button-style;
@include flexCenter; @include flex-center;
@include focus; @include focus;
&:hover { &:hover {
svg { svg {
stroke: var(--title-foreground-color-hover); stroke: var(--title-foreground-color-hover);
} }
} }
&:active { &:active {
border: none; border: none;
background-color: transparent; background-color: transparent;
@ -266,7 +292,8 @@
} }
%button-icon { %button-icon {
@include flexCenter; @include flex-center;
height: $s-16; height: $s-16;
width: $s-16; width: $s-16;
color: transparent; color: transparent;
@ -276,19 +303,22 @@
%button-icon-small { %button-icon-small {
@extend %button-icon; @extend %button-icon;
height: $s-12; height: $s-12;
width: $s-12; width: $s-12;
stroke-width: 1.33px; stroke-width: 1.33px;
} }
.button-constraint { .button-constraint {
@include buttonStyle; @include button-style;
width: $s-32; width: $s-32;
height: $s-4; height: $s-4;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--button-constraint-background-color-rest); background-color: var(--button-constraint-background-color-rest);
padding: 0; padding: 0;
margin: 0; margin: 0;
&:hover { &:hover {
outline: $s-4 solid var(--button-constraint-border-color-hover); outline: $s-4 solid var(--button-constraint-border-color-hover);
background-color: var(--button-constraint-background-color-hover); background-color: var(--button-constraint-background-color-hover);
@ -297,8 +327,9 @@
// INPUTS // INPUTS
%input-base { %input-base {
@include removeInputStyle; @include remove-input-style;
@include textEllipsis; @include text-ellipsis;
height: $s-28; height: $s-28;
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
@ -306,6 +337,7 @@
padding: 0 0 0 $s-6; padding: 0 0 0 $s-6;
border-radius: $br-8; border-radius: $br-8;
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
&[disabled] { &[disabled] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -313,23 +345,30 @@
} }
.input-icon { .input-icon {
@include flexCenter; @include flex-center;
min-width: $s-12; min-width: $s-12;
height: $s-32; height: $s-32;
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
} }
} }
.input-label { %input-label {
@include headlineSmallTypography; @include headline-small-typography;
@include flexCenter; @include flex-center;
width: $s-20; width: $s-20;
padding-left: $s-8; padding-left: $s-8;
height: $s-32; height: $s-32;
color: var(--input-foreground-color); color: var(--input-foreground-color);
} }
.input-label {
@extend %input-label;
}
%input-element { %input-element {
display: flex; display: flex;
align-items: center; align-items: center;
@ -338,17 +377,22 @@
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: $s-1 solid var(--input-border-color); border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color); color: var(--input-foreground-color);
&:not(:focus-within) { &:not(:focus-within) {
cursor: ew-resize; cursor: ew-resize;
input { input {
cursor: ew-resize; cursor: ew-resize;
} }
} }
span, span,
label { label {
@extend .input-label; @extend %input-label;
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
stroke: var(--input-foreground-color); stroke: var(--input-foreground-color);
} }
} }
@ -361,43 +405,55 @@
color: var(--input-placeholder-color); color: var(--input-placeholder-color);
} }
@include focusInput; @include focus-input;
&:hover { &:hover {
border: $s-1 solid var(--input-border-color-hover); border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
span { span {
color: var(--input-foreground-color-hover); color: var(--input-foreground-color-hover);
} }
input { input {
color: var(--input-foreground-color-hover); color: var(--input-foreground-color-hover);
} }
} }
&:active { &:active {
border: $s-1 solid var(--input-border-color-active); border: $s-1 solid var(--input-border-color-active);
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
span { span {
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
} }
input { input {
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
} }
} }
&:focus, &:focus,
&:focus-within { &:focus-within {
border: $s-1 solid var(--input-border-color-focus); border: $s-1 solid var(--input-border-color-focus);
background-color: var(--input-background-color-focus); background-color: var(--input-background-color-focus);
span { span {
color: var(--input-foreground-color-focus); color: var(--input-foreground-color-focus);
} }
input { input {
color: var(--input-foreground-color-focus); color: var(--input-foreground-color-focus);
} }
&:hover { &:hover {
border: $s-1 solid var(--input-border-color-focus); border: $s-1 solid var(--input-border-color-focus);
background-color: var(--input-background-color-focus); background-color: var(--input-background-color-focus);
span { span {
color: var(--input-foreground-color-focus); color: var(--input-foreground-color-focus);
} }
input { input {
color: var(--input-foreground-color-focus); color: var(--input-foreground-color-focus);
} }
@ -406,12 +462,15 @@
} }
%input-element-label { %input-element-label {
@include bodySmallTypography; @include body-small-typography;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 0; padding: 0;
input { input {
@extend %input-base; @extend %input-base;
padding-left: $s-8; padding-left: $s-8;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -424,10 +483,13 @@
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
background-color: var(--input-background-color); background-color: var(--input-background-color);
} }
::placeholder { ::placeholder {
@include bodySmallTypography; @include body-small-typography;
color: var(--input-placeholder-color); color: var(--input-placeholder-color);
} }
&:hover { &:hover {
input { input {
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
@ -449,18 +511,21 @@
background-color: var(--input-background-color-disabled); background-color: var(--input-background-color-disabled);
border: $s-1 solid var(--input-border-color-disabled); border: $s-1 solid var(--input-border-color-disabled);
color: var(--input-foreground-color-disabled); color: var(--input-foreground-color-disabled);
input { input {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
color: var(--input-foreground-color-disabled); color: var(--input-foreground-color-disabled);
} }
span svg {
svg {
stroke: var(--input-foreground-color-disabled); stroke: var(--input-foreground-color-disabled);
} }
} }
%checkbox-icon { %checkbox-icon {
@include flexCenter; @include flex-center;
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
min-width: $s-16; min-width: $s-16;
@ -468,15 +533,18 @@
background-color: var(--input-checkbox-background-color-rest); background-color: var(--input-checkbox-background-color-rest);
border: $s-1 solid var(--input-checkbox-border-color-rest); border: $s-1 solid var(--input-checkbox-border-color-rest);
border-radius: $br-4; border-radius: $br-4;
svg { svg {
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
display: none; display: none;
stroke: var(--input-checkbox-inactive-foreground-color); stroke: var(--input-checkbox-inactive-foreground-color);
} }
&:hover { &:hover {
border-color: var(--input-checkbox-border-color-hover); border-color: var(--input-checkbox-border-color-hover);
} }
&:focus { &:focus {
border-color: var(--input-checkbox-border-color-focus); border-color: var(--input-checkbox-border-color-focus);
} }
@ -484,8 +552,10 @@
&:global(.checked) { &:global(.checked) {
border-color: var(--input-checkbox-border-color-active); border-color: var(--input-checkbox-border-color-active);
background-color: var(--input-checkbox-background-color-active); background-color: var(--input-checkbox-background-color-active);
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
stroke: var(--input-checkbox-foreground-color-active); stroke: var(--input-checkbox-foreground-color-active);
} }
} }
@ -493,8 +563,10 @@
&:global(.intermediate) { &:global(.intermediate) {
background-color: var(--input-checkbox-background-color-intermediate); background-color: var(--input-checkbox-background-color-intermediate);
border-color: var(--input-checkbox-border-color-intermediate); border-color: var(--input-checkbox-border-color-intermediate);
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
stroke: var(--input-checkbox-foreground-color-intermediate); stroke: var(--input-checkbox-foreground-color-intermediate);
} }
} }
@ -502,6 +574,7 @@
&:global(.unchecked) { &:global(.unchecked) {
background-color: var(--input-checkbox-background-color-rest); background-color: var(--input-checkbox-background-color-rest);
border: $s-1 solid var(--input-checkbox-background-color-rest); border: $s-1 solid var(--input-checkbox-background-color-rest);
svg { svg {
display: none; display: none;
} }
@ -511,19 +584,24 @@
%input-checkbox { %input-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
label { label {
@include bodySmallTypography; @include body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $s-6; gap: $s-6;
cursor: pointer; cursor: pointer;
color: var(--input-checkbox-text-foreground-color); color: var(--input-checkbox-text-foreground-color);
span { span {
@extend %checkbox-icon; @extend %checkbox-icon;
} }
input { input {
margin: 0; margin: 0;
} }
&:hover { &:hover {
span { span {
border-color: var(--input-checkbox-border-color-hover); border-color: var(--input-checkbox-border-color-hover);
@ -542,8 +620,10 @@
%input-with-label { %input-with-label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
label { label {
@include bodySmallTypography; @include body-small-typography;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
@ -553,7 +633,8 @@
input { input {
@extend %input-base; @extend %input-base;
@include bodySmallTypography; @include body-small-typography;
border-radius: $br-8; border-radius: $br-8;
height: $s-32; height: $s-32;
min-height: $s-32; min-height: $s-32;
@ -561,15 +642,18 @@
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: $s-1 solid var(--input-border-color); border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
&:focus-within, &:focus-within,
&:active { &:active {
input { input {
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
} }
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
border: $s-1 solid var(--input-border-color-active); border: $s-1 solid var(--input-border-color-active);
} }
} }
&:global(.disabled) { &:global(.disabled) {
@extend %disabled-input; @extend %disabled-input;
} }
@ -581,9 +665,10 @@
} }
} }
//MODALS // MODALS
%modal-background { %modal-background {
@include menuShadow; @include menu-shadow;
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -595,7 +680,8 @@
} }
%modal-overlay-base { %modal-overlay-base {
@include flexCenter; @include flex-center;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
@ -619,18 +705,21 @@
%modal-close-btn-base { %modal-close-btn-base {
@extend %button-tertiary; @extend %button-tertiary;
position: absolute; position: absolute;
top: $s-8; top: $s-8;
right: $s-6; right: $s-6;
height: $s-32; height: $s-32;
width: $s-28; width: $s-28;
svg { svg {
@extend %button-icon; @extend %button-icon;
} }
} }
.modal-hint-base { .modal-hint-base {
@include bodySmallTypography; @include body-small-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
border-top: $s-1 solid var(--modal-hint-border-color); border-top: $s-1 solid var(--modal-hint-border-color);
border-bottom: $s-1 solid var(--modal-hint-border-color); border-bottom: $s-1 solid var(--modal-hint-border-color);
@ -644,7 +733,8 @@
%modal-cancel-btn { %modal-cancel-btn {
@extend %button-secondary; @extend %button-secondary;
@include uppercaseTitleTipography; @include uppercase-title-typography;
padding: $s-8 $s-24; padding: $s-8 $s-24;
border-radius: $br-8; border-radius: $br-8;
height: $s-32; height: $s-32;
@ -653,7 +743,8 @@
%modal-accept-btn { %modal-accept-btn {
@extend %button-primary; @extend %button-primary;
@include uppercaseTitleTipography; @include uppercase-title-typography;
padding: $s-8 $s-24; padding: $s-8 $s-24;
border-radius: $br-8; border-radius: $br-8;
height: $s-32; height: $s-32;
@ -662,7 +753,8 @@
%modal-danger-btn { %modal-danger-btn {
@extend %button-primary; @extend %button-primary;
@include uppercaseTitleTipography; @include uppercase-title-typography;
padding: $s-8 $s-24; padding: $s-8 $s-24;
border-radius: $br-8; border-radius: $br-8;
height: $s-32; height: $s-32;
@ -677,7 +769,8 @@
// FIXME: This is used multiple times accross the app. We should design this in // FIXME: This is used multiple times accross the app. We should design this in
// the DS and create a proper component for it. // the DS and create a proper component for it.
%asset-element { %asset-element {
@include bodySmallTypography; @include body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
height: $s-32; height: $s-32;
@ -685,6 +778,7 @@
padding: $s-8 $s-12; padding: $s-8 $s-12;
background-color: var(--assets-item-background-color); background-color: var(--assets-item-background-color);
color: var(--assets-item-name-foreground-color-hover); color: var(--assets-item-name-foreground-color-hover);
&:hover { &:hover {
background-color: var(--assets-item-background-color-hover); background-color: var(--assets-item-background-color-hover);
color: var(--assets-item-name-foreground-color-hover); color: var(--assets-item-name-foreground-color-hover);
@ -692,14 +786,16 @@
} }
%shortcut-base { %shortcut-base {
@include flexCenter; @include flex-center;
gap: $s-2; gap: $s-2;
color: var(--menu-shortcut-foreground-color); color: var(--menu-shortcut-foreground-color);
} }
%shortcut-key-base { %shortcut-key-base {
@include bodySmallTypography; @include body-small-typography;
@include flexCenter; @include flex-center;
height: $s-20; height: $s-20;
padding: $s-2 $s-6; padding: $s-2 $s-6;
border-radius: $br-6; border-radius: $br-6;
@ -707,7 +803,8 @@
} }
%mixed-bar { %mixed-bar {
@include bodySmallTypography; @include body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
@ -736,6 +833,7 @@
border-radius: $br-circle; border-radius: $br-circle;
transform: translate(calc(-1 * $s-12), calc(-1 * $s-12)); transform: translate(calc(-1 * $s-12), calc(-1 * $s-12));
z-index: $z-index-1; z-index: $z-index-1;
&:hover, &:hover,
&:active { &:active {
border-color: var(--colorpicker-details-color-selected); border-color: var(--colorpicker-details-color-selected);
@ -747,14 +845,19 @@
margin-left: 0; margin-left: 0;
color: var(--entry-foreground-color-hover); color: var(--entry-foreground-color-hover);
} }
button { button {
@extend %button-tertiary; @extend %button-tertiary;
display: none; display: none;
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
&:hover { &:hover {
button { button {
display: flex; display: flex;
@ -768,9 +871,11 @@
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
gap: $s-4; gap: $s-4;
height: $s-32; height: $s-32;
:global(.attr-label) { :global(.attr-label) {
@include bodySmallTypography; @include body-small-typography;
@include twoLineTextEllipsis; @include two-line-text-ellipsis;
width: $s-92; width: $s-92;
margin: auto 0; margin: auto 0;
color: var(--entry-foreground-color); color: var(--entry-foreground-color);
@ -781,17 +886,20 @@
grid-area: content; grid-area: content;
display: flex; display: flex;
color: var(--entry-foreground-color-hover); color: var(--entry-foreground-color-hover);
@include bodySmallTypography;
@include body-small-typography;
} }
} }
%copy-button-children { %copy-button-children {
@include bodySmallTypography; @include body-small-typography;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
text-align: left; text-align: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: fit-content; height: fit-content;
&:hover { &:hover {
div { div {
color: var(--entry-foreground-color-hover); color: var(--entry-foreground-color-hover);
@ -801,8 +909,9 @@
// SELECTS AND DROPDOWNS // SELECTS AND DROPDOWNS
%menu-dropdown { %menu-dropdown {
@include menuShadow; @include menu-shadow;
@include flexColumn; @include flex-column;
position: absolute; position: absolute;
padding: $s-4; padding: $s-4;
border-radius: $br-8; border-radius: $br-8;
@ -814,7 +923,8 @@
} }
%menu-item-base { %menu-item-base {
@include bodySmallTypography; @include body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -823,13 +933,15 @@
padding: $s-6; padding: $s-6;
border-radius: $br-8; border-radius: $br-8;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--menu-background-color-hover); background-color: var(--menu-background-color-hover);
} }
} }
%dropdown-element-base { %dropdown-element-base {
@include bodySmallTypography; @include body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $s-8; gap: $s-8;
@ -840,24 +952,29 @@
color: var(--menu-foreground-color-rest); color: var(--menu-foreground-color-rest);
span { span {
@include flexCenter; @include flex-center;
@include textEllipsis; @include text-ellipsis;
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
&:hover { &:hover {
background-color: var(--menu-background-color-hover); background-color: var(--menu-background-color-hover);
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
span svg {
svg {
stroke: var(--menu-foreground-color-hover); stroke: var(--menu-foreground-color-hover);
} }
} }
} }
%dropdown-wrapper { %dropdown-wrapper {
@include menuShadow; @include menu-shadow;
position: absolute; position: absolute;
top: $s-32; top: $s-32;
left: 0; left: 0;
@ -868,15 +985,15 @@
margin-top: $s-1; margin-top: $s-1;
border-radius: $br-8; border-radius: $br-8;
z-index: $z-index-4; z-index: $z-index-4;
overflow-y: auto; overflow: hidden auto;
overflow-x: hidden;
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
border: $s-2 solid var(--panel-border-color); border: $s-2 solid var(--panel-border-color);
} }
%select-wrapper { %select-wrapper {
@include bodySmallTypography; @include body-small-typography;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;

18
frontend/resources/styles/common/refactor/color-defs.scss
View File

@ -11,53 +11,47 @@
// Dark background // Dark background
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; // used on overlay dark mode --db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; // used on overlay dark mode
//Dark foreground // Dark foreground
--df-secondary: #8f9da3; // Used on button disabled background dark mode, grid metadata and some svg --df-secondary: #8f9da3; // Used on button disabled background dark mode, grid metadata and some svg
--df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // Used on button disabled foreground dark mode --df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // Used on button disabled foreground dark mode
//Dark accent // Dark accent
--da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)}; // selection rect dark mode --da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)}; // selection rect dark mode
--da-tertiary-70: #{color.change(#00d1b8, $alpha: 0.7)}; // selection rect background dark mode --da-tertiary-70: #{color.change(#00d1b8, $alpha: 0.7)}; // selection rect background dark mode
// LIGHT // LIGHT
// Light background // Light background
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; // overlay color light mode --lb-primary-60: #{color.change(#fff, $alpha: 0.6)}; // overlay color light mode
--lb-quaternary: #eef0f2; // background disabled token --lb-quaternary: #eef0f2; // background disabled token
//Light foreground // Light foreground
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)}; // foreground disabled token --lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)}; // foreground disabled token
//Light accent // Light accent
--la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)}; // selection rect light mode --la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)}; // selection rect light mode
--la-tertiary-70: #{color.change(#8c33eb, $alpha: 0.7)}; // selection rect background light mode --la-tertiary-70: #{color.change(#8c33eb, $alpha: 0.7)}; // selection rect background light mode
// STATUS COLOR // STATUS COLOR
--status-color-success-200: #a7e8d9; // Used on Register confirmation text --status-color-success-200: #a7e8d9; // Used on Register confirmation text
--status-color-success-500: #2d9f8f; // Used on accept icon, and status widget --status-color-success-500: #2d9f8f; // Used on accept icon, and status widget
--status-color-warning-500: #f5a91b; // Used on status widget, some buttons and warnings icons and elements --status-color-warning-500: #f5a91b; // Used on status widget, some buttons and warnings icons and elements
--status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget --status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget
--status-color-info-500: #0e9be9; // used on pixel grid and status widget --status-color-info-500: #0e9be9; // used on pixel grid and status widget
// APP COLORS // APP COLORS
--app-white: #ffffff; // Used in several places --app-white: #fff; // Used in several places
--app-black: #000; // Used on interactions, measurements and editor files --app-black: #000; // Used on interactions, measurements and editor files
// SOCIAL LOGIN BUTTONS // SOCIAL LOGIN BUTTONS
--google-login-background: #4285f4; --google-login-background: #4285f4;
--google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)}; --google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)};
--google-login-foreground: var(--app-white); --google-login-foreground: var(--app-white);
--github-login-background: #4c4c4c; --github-login-background: #4c4c4c;
--github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)}; --github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)};
--github-login-foreground: var(--app-white); --github-login-foreground: var(--app-white);
--oidc-login-background: #b3b3b3; --oidc-login-background: #b3b3b3;
--oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)}; --oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)};
--oidc-login-foreground: var(--app-white); --oidc-login-foreground: var(--app-white);
--gitlab-login-background: #fc6d26; --gitlab-login-background: #fc6d26;
--gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)}; --gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)};
--gitlab-login-foreground: var(--app-white); --gitlab-login-foreground: var(--app-white);

6
frontend/resources/styles/common/refactor/common-dashboard.scss
View File

@ -29,6 +29,7 @@
.btn-secondary { .btn-secondary {
flex-shrink: 0; flex-shrink: 0;
height: $s-32; height: $s-32;
svg { svg {
height: $s-16; height: $s-16;
width: $s-16; width: $s-16;
@ -57,6 +58,7 @@
height: $s-40; height: $s-40;
padding: $s-4 $s-24; padding: $s-4 $s-24;
font-weight: $fw400; font-weight: $fw400;
&:hover { &:hover {
color: var(--color-background-secondary); color: var(--color-background-secondary);
text-decoration: none; text-decoration: none;
@ -124,10 +126,12 @@
font-size: $s-16; font-size: $s-16;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
border-color: transparent; border-color: transparent;
&:hover { &:hover {
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
} }
&.active { &.active {
a { a {
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
@ -139,6 +143,7 @@
.btn-primary { .btn-primary {
@extend %button-primary; @extend %button-primary;
text-transform: uppercase; text-transform: uppercase;
font-size: $fs-14; font-size: $fs-14;
font-weight: $fw400; font-weight: $fw400;
@ -146,6 +151,7 @@
.btn-secondary { .btn-secondary {
@extend %button-secondary; @extend %button-secondary;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
font-size: $fs-12; font-size: $fs-12;
text-transform: uppercase; text-transform: uppercase;

24
frontend/resources/styles/common/refactor/common-refactor.scss
View File

@ -4,17 +4,17 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
//################################################# // #################################################
// MAIN STYLES // MAIN STYLES
//################################################# // #################################################
@forward "./fonts.scss"; @forward "./fonts";
@forward "./spacing.scss"; @forward "./spacing";
@forward "./borders.scss"; @forward "./borders";
@forward "./opacity.scss"; @forward "./opacity";
@forward "./shadows.scss"; @forward "./shadows";
@forward "./z-index.scss"; @forward "./z-index";
@forward "./mixins.scss"; @forward "./mixins";
@forward "./focus.scss"; @forward "./focus";
@forward "./animations.scss"; @forward "./animations";
@forward "./basic-rules.scss"; @forward "./basic-rules";

40
frontend/resources/styles/common/refactor/focus.scss
View File

@ -6,44 +6,46 @@
@use "./spacing.scss" as *; @use "./spacing.scss" as *;
@mixin focusType($type) { @mixin focus-type($type) {
$realType: ""; $real-type: "";
@if $type { @if $type {
$realType: $type + "-"; $real-type: $type + "-";
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
background-color: var(--button-#{$realType}background-color-focus); background-color: var(--button-#{$real-type}background-color-focus);
border: $s-1 solid var(--button-#{$realType}border-color-focus); border: $s-1 solid var(--button-#{$real-type}border-color-focus);
color: var(--button-#{$realType}foreground-color-focus); color: var(--button-#{$real-type}foreground-color-focus);
svg,
span svg { svg {
stroke: var(--button-#{$realType}foreground-color-focus); stroke: var(--button-#{$real-type}foreground-color-focus);
} }
} }
} }
@mixin focusPrimary { @mixin focus-primary {
@include focusType(primary); @include focus-type(primary);
} }
@mixin focusSecondary { @mixin focus-secondary {
@include focusType(secondary); @include focus-type(secondary);
} }
@mixin focusTertiary { @mixin focus-tertiary {
@include focusType(tertiary); @include focus-type(tertiary);
} }
@mixin focusRadio { @mixin focus-radio {
@include focusType(radio); @include focus-type(radio);
} }
@mixin focus { @mixin focus {
@include focusType(null); @include focus-type(null);
} }
@mixin focusInput { @mixin focus-input {
&:focus-within { &:focus-within {
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);

1
frontend/resources/styles/common/refactor/fonts.scss
View File

@ -8,7 +8,6 @@
// Typography scale // Typography scale
$fs-base: 16; $fs-base: 16;
$fs-10: math.div(10, $fs-base) + rem; $fs-10: math.div(10, $fs-base) + rem;
$fs-11: 0.688rem; $fs-11: 0.688rem;
$fs-12: math.div(12, $fs-base) + rem; $fs-12: math.div(12, $fs-base) + rem;

44
frontend/resources/styles/common/refactor/mixins.scss
View File

@ -7,37 +7,37 @@
@use "./fonts.scss" as *; @use "./fonts.scss" as *;
@use "./spacing.scss" as *; @use "./spacing.scss" as *;
@mixin flexCenter { @mixin flex-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@mixin flexColumn($gap: $s-4) { @mixin flex-column($gap: $s-4) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: #{$gap}; gap: #{$gap};
} }
@mixin flexRow { @mixin flex-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $s-4; gap: $s-4;
} }
@mixin buttonStyle { @mixin button-style {
border: none; border: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
} }
@mixin removeInputStyle { @mixin remove-input-style {
border: none; border: none;
background: none; background: none;
outline: none; outline: none;
} }
@mixin uppercaseTitleTipography { @mixin uppercase-title-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-11; font-size: $fs-11;
font-weight: $fw500; font-weight: $fw500;
@ -45,28 +45,28 @@
text-transform: uppercase; text-transform: uppercase;
} }
@mixin bigTitleTipography { @mixin big-title-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-24; font-size: $fs-24;
font-weight: $fw400; font-weight: $fw400;
line-height: 1.2; line-height: 1.2;
} }
@mixin medTitleTipography { @mixin med-title-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-20; font-size: $fs-20;
font-weight: $fw400; font-weight: $fw400;
line-height: 1.2; line-height: 1.2;
} }
@mixin smallTitleTipography { @mixin small-title-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-14; font-size: $fs-14;
font-weight: $fw400; font-weight: $fw400;
line-height: 1.2; line-height: 1.2;
} }
@mixin headlineLargeTypography { @mixin headline-large-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-18; font-size: $fs-18;
line-height: 1.2; line-height: 1.2;
@ -74,7 +74,7 @@
font-weight: $fw400; font-weight: $fw400;
} }
@mixin headlineMediumTypography { @mixin headline-medium-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-16; font-size: $fs-16;
line-height: 1.4; line-height: 1.4;
@ -82,7 +82,7 @@
font-weight: $fw400; font-weight: $fw400;
} }
@mixin headlineSmallTypography { @mixin headline-small-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-12; font-size: $fs-12;
line-height: 1.2; line-height: 1.2;
@ -90,35 +90,35 @@
font-weight: $fw500; font-weight: $fw500;
} }
@mixin bodyLargeTypography { @mixin body-large-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-16; font-size: $fs-16;
line-height: 1.5; line-height: 1.5;
font-weight: $fw400; font-weight: $fw400;
} }
@mixin bodyMediumTypography { @mixin body-medium-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-14; font-size: $fs-14;
line-height: 1.4; line-height: 1.4;
font-weight: $fw400; font-weight: $fw400;
} }
@mixin bodySmallTypography { @mixin body-small-typography {
font-family: "worksans", "vazirmatn", sans-serif; font-family: "worksans", "vazirmatn", sans-serif;
font-size: $fs-12; font-size: $fs-12;
font-weight: $fw400; font-weight: $fw400;
line-height: 1.4; line-height: 1.4;
} }
@mixin codeTypography { @mixin code-typography {
font-family: "robotomono", monospace; font-family: "robotomono", monospace;
font-size: $fs-12; font-size: $fs-12;
font-weight: $fw400; font-weight: $fw400;
line-height: 1.2; line-height: 1.2;
} }
@mixin textEllipsis { @mixin text-ellipsis {
display: block; display: block;
max-width: 99%; max-width: 99%;
overflow: hidden; overflow: hidden;
@ -126,7 +126,7 @@
white-space: nowrap; white-space: nowrap;
} }
@mixin twoLineTextEllipsis { @mixin two-line-text-ellipsis {
max-width: 99%; max-width: 99%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -135,8 +135,8 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
@mixin inspectValue { @mixin inspect-value {
@include bodySmallTypography; @include body-small-typography;
display: inline-block; display: inline-block;
width: fit-content; width: fit-content;
@ -146,7 +146,7 @@
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
} }
@mixin copyWrapperBase { @mixin copy-wrapper-base {
position: relative; position: relative;
min-height: $s-32; min-height: $s-32;
width: $s-144; width: $s-144;
@ -155,7 +155,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
@mixin hiddenElement { @mixin hidden-element {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
box-sizing: border-box; box-sizing: border-box;

8
frontend/resources/styles/common/refactor/shadows.scss
View File

@ -6,10 +6,6 @@
@use "./spacing.scss" as *; @use "./spacing.scss" as *;
@mixin menuShadow { @mixin menu-shadow {
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color); box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
}
@mixin alertShadow {
box-shadow: 0px $s-4 $s-4 var(--menu-shadow-color);
} }

4
frontend/resources/styles/common/refactor/themes.scss
View File

@ -4,5 +4,5 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@forward "./themes/default-theme.scss"; @forward "./themes/default-theme";
@forward "./themes/light-theme.scss"; @forward "./themes/light-theme";

1
frontend/resources/styles/common/refactor/themes/default-theme.scss
View File

@ -10,6 +10,5 @@
--color-background-disabled: var(--df-secondary); --color-background-disabled: var(--df-secondary);
--color-foreground-disabled: var(--df-secondary-40); --color-foreground-disabled: var(--df-secondary-40);
--color-accent-tertiary-muted: var(--da-tertiary-10); // selection rect --color-accent-tertiary-muted: var(--da-tertiary-10); // selection rect
--overlay-color: var(--db-primary-60); --overlay-color: var(--db-primary-60);
} }

1
frontend/resources/styles/common/refactor/themes/light-theme.scss
View File

@ -10,6 +10,5 @@
--color-background-disabled: var(--lb-quaternary); --color-background-disabled: var(--lb-quaternary);
--color-foreground-disabled: var(--lf-secondary-40); --color-foreground-disabled: var(--lf-secondary-40);
--color-accent-tertiary-muted: var(--la-tertiary-10); --color-accent-tertiary-muted: var(--la-tertiary-10);
--overlay-color: var(--lb-primary-60); --overlay-color: var(--lb-primary-60);
} }

4
frontend/resources/styles/debug.scss
View File

@ -10,9 +10,9 @@
// debugging. // debugging.
body { body {
color: yellow; color: rgb(255 255 0);
} }
.deprecated-icon { .deprecated-icon {
fill: red !important; fill: rgb(255 0 0) !important;
} }

23
frontend/resources/styles/main-default.scss
View File

@ -4,29 +4,28 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
//################################################# // #################################################
// MAIN STYLES // MAIN STYLES
//################################################# // #################################################
@forward "common/dependencies/reset"; @forward "common/dependencies/reset";
@forward "common/refactor/color-defs.scss"; @forward "common/refactor/color-defs";
@forward "common/dependencies/fonts"; @forward "common/dependencies/fonts";
@forward "common/dependencies/animations"; @forward "common/dependencies/animations";
@forward "common/dependencies/highlight.scss"; @forward "common/dependencies/highlight";
@forward "common/dependencies/storybook.scss"; @forward "common/dependencies/storybook";
@forward "common/refactor/themes";
@forward "common/refactor/design-tokens";
@forward "common/refactor/themes.scss"; // #################################################
@forward "common/refactor/design-tokens.scss";
//#################################################
// Layouts // Layouts
//################################################# // #################################################
@forward "common/base"; @forward "common/base";
//################################################# // #################################################
// Commons // Commons
//################################################# // #################################################
// TODO: remove this stylesheet once the new text editor is in place // TODO: remove this stylesheet once the new text editor is in place
// https: //tree.taiga.io/project/penpot/us/8165 // https: //tree.taiga.io/project/penpot/us/8165

2
frontend/resources/styles/main/partials/texts.scss
View File

@ -2,7 +2,7 @@
.rich-text { .rich-text {
color: var(--app-black); color: var(--app-black);
height: 100%; height: 100%;
font-family: sourcesanspro; font-family: sans-serif, "sourcesanspro";
div { div {
line-height: inherit; line-height: inherit;

6
frontend/src/app/main/ui/alert.scss
View File

@ -23,7 +23,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineMediumTypography; @include deprecated.headline-medium-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -33,7 +33,7 @@
} }
.modal-content { .modal-content {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
} }
@ -57,7 +57,7 @@
.modal-scd-msg, .modal-scd-msg,
.modal-subtitle, .modal-subtitle,
.modal-msg { .modal-msg {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
line-height: 1.5; line-height: 1.5;

18
frontend/src/app/main/ui/auth/common.scss
View File

@ -33,19 +33,19 @@
} }
.auth-title { .auth-title {
@include deprecated.bigTitleTipography; @include deprecated.big-title-typography;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
} }
.auth-subtitle { .auth-subtitle {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.auth-tagline { .auth-tagline {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
margin: 0; margin: 0;
color: var(--title-foreground-color); color: var(--title-foreground-color);
@ -65,7 +65,7 @@
.login-button, .login-button,
.login-ldap-button { .login-ldap-button {
@extend %button-primary; @extend %button-primary;
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
height: deprecated.$s-40; height: deprecated.$s-40;
width: 100%; width: 100%;
@ -81,7 +81,7 @@
.go-back-link { .go-back-link {
@extend %button-secondary; @extend %button-secondary;
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
height: deprecated.$s-40; height: deprecated.$s-40;
} }
@ -105,7 +105,7 @@
.account-text, .account-text,
.recovery-text, .recovery-text,
.demo-account-text { .demo-account-text {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
text-align: right; text-align: right;
color: var(--title-foreground-color); color: var(--title-foreground-color);
@ -116,7 +116,7 @@
.recovery-link, .recovery-link,
.forgot-pass-link, .forgot-pass-link,
.demo-account-link { .demo-account-link {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
text-align: left; text-align: left;
background-color: transparent; background-color: transparent;
@ -138,14 +138,14 @@
.register-btn, .register-btn,
.recover-btn { .recover-btn {
@extend %button-primary; @extend %button-primary;
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
height: deprecated.$s-40; height: deprecated.$s-40;
width: 100%; width: 100%;
} }
.login-btn { .login-btn {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
display: flex; display: flex;
align-items: center; align-items: center;

2
frontend/src/app/main/ui/auth/recovery_request.scss
View File

@ -12,7 +12,7 @@
} }
.notification-text-email { .notification-text-email {
@include deprecated.medTitleTipography; @include deprecated.med-title-typography;
font-size: deprecated.$fs-20; font-size: deprecated.$fs-20;
color: var(--register-confirmation-color); color: var(--register-confirmation-color);

8
frontend/src/app/main/ui/auth/register.scss
View File

@ -27,7 +27,7 @@
gap: deprecated.$s-24; gap: deprecated.$s-24;
.auth-title { .auth-title {
@include deprecated.medTitleTipography; @include deprecated.med-title-typography;
} }
} }
@ -44,13 +44,13 @@
} }
.notification-text { .notification-text {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.notification-text-email { .notification-text-email {
@include deprecated.medTitleTipography; @include deprecated.med-title-typography;
font-size: deprecated.$fs-20; font-size: deprecated.$fs-20;
color: var(--register-confirmation-color); color: var(--register-confirmation-color);
@ -75,7 +75,7 @@
} }
.terms-register { .terms-register {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: flex; display: flex;
gap: deprecated.$s-4; gap: deprecated.$s-4;

24
frontend/src/app/main/ui/comments.scss
View File

@ -23,7 +23,7 @@
} }
.error-text { .error-text {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--color-foreground-error); color: var(--color-foreground-error);
} }
@ -40,11 +40,11 @@
} }
.location-text { .location-text {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
} }
.author { .author {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
@ -56,13 +56,13 @@
} }
.author-fullname { .author-fullname {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
color: var(--comment-title-color); color: var(--comment-title-color);
} }
.author-timeago { .author-timeago {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
color: var(--comment-subtitle-color); color: var(--comment-subtitle-color);
} }
@ -120,7 +120,7 @@
} }
.cover { .cover {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -131,7 +131,7 @@
} }
.item { .item {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
overflow-wrap: break-word; overflow-wrap: break-word;
@ -140,7 +140,7 @@
} }
.replies { .replies {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: flex; display: flex;
gap: deprecated.$s-8; gap: deprecated.$s-8;
@ -245,7 +245,7 @@
} }
.floating-thread-header-left { .floating-thread-header-left {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
@ -272,11 +272,11 @@
flex-direction: column; flex-direction: column;
gap: deprecated.$s-8; gap: deprecated.$s-8;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
} }
.checkbox-wrapper { .checkbox-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-16; width: deprecated.$s-16;
height: deprecated.$s-24; height: deprecated.$s-24;
@ -381,7 +381,7 @@
} }
.comment-input { .comment-input {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
background: var(--input-background-color); background: var(--input-background-color);
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;

10
frontend/src/app/main/ui/components/color_bullet.scss
View File

@ -79,8 +79,8 @@
} }
.color-text { .color-text {
@include deprecated.twoLineTextEllipsis; @include deprecated.two-line-text-ellipsis;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
width: deprecated.$s-80; width: deprecated.$s-80;
text-align: center; text-align: center;
@ -89,15 +89,15 @@
color: var(--palette-text-color); color: var(--palette-text-color);
&.small-text { &.small-text {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
max-height: deprecated.$s-16; max-height: deprecated.$s-16;
} }
} }
.big-text { .big-text {
@include deprecated.inspectValue; @include deprecated.inspect-value;
@include deprecated.twoLineTextEllipsis; @include deprecated.two-line-text-ellipsis;
line-height: 1; line-height: 1;
color: var(--palette-text-color); color: var(--palette-text-color);

4
frontend/src/app/main/ui/components/context_menu_a11y.scss
View File

@ -24,7 +24,7 @@
} }
.context-menu-items { .context-menu-items {
@include deprecated.menuShadow; @include deprecated.menu-shadow;
position: absolute; position: absolute;
top: deprecated.$s-12; top: deprecated.$s-12;
@ -50,7 +50,7 @@
display: flex; display: flex;
.context-menu-action { .context-menu-action {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;

10
frontend/src/app/main/ui/components/copy_button.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.copy-button { .copy-button {
@include deprecated.buttonStyle; @include deprecated.button-style;
width: 100%; width: 100%;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -17,7 +17,7 @@
box-sizing: border-box; box-sizing: border-box;
.icon-btn { .icon-btn {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-32; height: deprecated.$s-32;
min-width: deprecated.$s-28; min-width: deprecated.$s-28;
@ -56,8 +56,8 @@
} }
.copy-wrapper { .copy-wrapper {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.copyWrapperBase; @include deprecated.copy-wrapper-base;
width: 100%; width: 100%;
height: fit-content; height: fit-content;
@ -65,7 +65,7 @@
border: deprecated.$s-1 solid transparent; border: deprecated.$s-1 solid transparent;
.icon-btn { .icon-btn {
@include deprecated.flexCenter; @include deprecated.flex-center;
position: absolute; position: absolute;
top: 0; top: 0;

2
frontend/src/app/main/ui/components/forms.scss
View File

@ -334,7 +334,7 @@
overflow-y: hidden; overflow-y: hidden;
.inside-input { .inside-input {
@include deprecated.removeInputStyle; @include deprecated.remove-input-style;
@include t.use-typography("body-small"); @include t.use-typography("body-small");
@include text-ellipsis; @include text-ellipsis;

12
frontend/src/app/main/ui/components/progress.scss
View File

@ -8,7 +8,7 @@
// PROGRESS WIDGET // PROGRESS WIDGET
.progress-widget { .progress-widget {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-28; width: deprecated.$s-28;
height: deprecated.$s-28; height: deprecated.$s-28;
@ -59,7 +59,7 @@
} }
.title { .title {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -72,7 +72,7 @@
} }
.progress { .progress {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
padding-left: deprecated.$s-8; padding-left: deprecated.$s-8;
margin: 0; margin: 0;
@ -81,8 +81,8 @@
} }
.retry-btn { .retry-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: inline; display: inline;
text-align: left; text-align: left;
@ -92,7 +92,7 @@
} }
.progress-close-button { .progress-close-button {
@include deprecated.buttonStyle; @include deprecated.button-style;
padding: 0; padding: 0;
margin-inline-end: deprecated.$s-8; margin-inline-end: deprecated.$s-8;

10
frontend/src/app/main/ui/components/radio_buttons.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.radio-btn-wrapper { .radio-btn-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -18,9 +18,9 @@
.radio-icon { .radio-icon {
--radio-icon-border-color: var(--radio-btn-border-color); --radio-icon-border-color: var(--radio-btn-border-color);
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.focusRadio; @include deprecated.focus-radio;
height: deprecated.$s-32; height: deprecated.$s-32;
flex-grow: 1; flex-grow: 1;
@ -39,7 +39,7 @@
} }
.title-name { .title-name {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--radio-btn-foreground-color); color: var(--radio-btn-foreground-color);
} }

2
frontend/src/app/main/ui/components/search_bar.scss
View File

@ -22,7 +22,7 @@
} }
.search-input-wrapper { .search-input-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-32; height: deprecated.$s-32;
width: 100%; width: 100%;

12
frontend/src/app/main/ui/components/select.scss
View File

@ -13,7 +13,7 @@
--text-color: var(--menu-foreground-color); --text-color: var(--menu-foreground-color);
@extend %new-scrollbar; @extend %new-scrollbar;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
position: relative; position: relative;
display: grid; display: grid;
@ -56,7 +56,7 @@
} }
.dropdown-button { .dropdown-button {
@include deprecated.flexCenter; @include deprecated.flex-center;
margin-inline-end: var(--sp-xxs); margin-inline-end: var(--sp-xxs);
@ -69,7 +69,7 @@
} }
.current-icon { .current-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-24; width: deprecated.$s-24;
padding-right: deprecated.$s-4; padding-right: deprecated.$s-4;
@ -100,7 +100,7 @@
@extend %dropdown-element-base; @extend %dropdown-element-base;
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -119,7 +119,7 @@
} }
.check-icon { .check-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
@ -144,5 +144,5 @@
} }
.current-label { .current-label {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
} }

10
frontend/src/app/main/ui/components/tab_container.scss
View File

@ -31,7 +31,7 @@
} }
.tab-container-tab-title { .tab-container-tab-title {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -50,7 +50,7 @@
} }
.content { .content {
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
@ -79,8 +79,8 @@
} }
.collapse-sidebar { .collapse-sidebar {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.buttonStyle; @include deprecated.button-style;
height: 100%; height: 100%;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -89,7 +89,7 @@
border-radius: deprecated.$br-5; border-radius: deprecated.$br-5;
svg { svg {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-16; height: deprecated.$s-16;
width: deprecated.$s-16; width: deprecated.$s-16;

2
frontend/src/app/main/ui/components/title_bar.scss
View File

@ -67,7 +67,7 @@
} }
.icon-text-btn { .icon-text-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: flex; display: flex;
align-items: center; align-items: center;

12
frontend/src/app/main/ui/confirm.scss
View File

@ -23,7 +23,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineMediumTypography; @include deprecated.headline-medium-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -35,21 +35,21 @@
} }
.modal-content { .modal-content {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
} }
.modal-item-element { .modal-item-element {
@include deprecated.flexRow; @include deprecated.flex-row;
} }
.modal-component-icon { .modal-component-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }
.modal-component-name { .modal-component-name {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }
@ -61,7 +61,7 @@
.modal-scd-msg, .modal-scd-msg,
.modal-subtitle, .modal-subtitle,
.modal-msg { .modal-msg {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }

6
frontend/src/app/main/ui/dashboard/change_owner.scss
View File

@ -21,7 +21,7 @@
} }
.modal-title { .modal-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -31,14 +31,14 @@
} }
.modal-content { .modal-content {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
} }
.input-wrapper { .input-wrapper {
@extend %input-with-label; @extend %input-with-label;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
} }
.action-buttons { .action-buttons {

4
frontend/src/app/main/ui/dashboard/comments.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.dashboard-comments-section { .dashboard-comments-section {
@include deprecated.flexCenter; @include deprecated.flex-center;
position: relative; position: relative;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
@ -66,7 +66,7 @@
} }
.dropdown { .dropdown {
@include deprecated.menuShadow; @include deprecated.menu-shadow;
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;

20
frontend/src/app/main/ui/dashboard/import.scss vendored
View File

@ -22,7 +22,7 @@
} }
.modal-title { .modal-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -32,7 +32,7 @@
} }
.modal-content { .modal-content {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
flex: 1; flex: 1;
overflow: hidden auto; overflow: hidden auto;
@ -62,7 +62,7 @@
.modal-scd-msg, .modal-scd-msg,
.modal-subtitle, .modal-subtitle,
.modal-msg { .modal-msg {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
line-height: 1.5; line-height: 1.5;
@ -72,10 +72,10 @@
display: flex; display: flex;
.file-name { .file-name {
@include deprecated.flexRow; @include deprecated.flex-row;
.file-icon { .file-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -93,13 +93,13 @@
.file-name-edit { .file-name-edit {
@extend %input-element; @extend %input-element;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
flex-grow: 1; flex-grow: 1;
} }
.file-name-label { .file-name-label {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
@ -107,7 +107,7 @@
flex-grow: 1; flex-grow: 1;
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-16; height: deprecated.$s-16;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -121,7 +121,7 @@
} }
.edit-entry-buttons { .edit-entry-buttons {
@include deprecated.flexRow; @include deprecated.flex-row;
button { button {
@extend %button-tertiary; @extend %button-tertiary;
@ -153,7 +153,7 @@
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
.linked-library-tag { .linked-library-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;

32
frontend/src/app/main/ui/dashboard/sidebar.scss
View File

@ -79,7 +79,7 @@
} }
.current-team { .current-team {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: grid; display: grid;
align-items: center; align-items: center;
@ -98,7 +98,7 @@
} }
.team-text { .team-text {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
@include t.use-typography("title-small"); @include t.use-typography("title-small");
width: auto; width: auto;
@ -115,7 +115,7 @@
// This icon still use the old svg // This icon still use the old svg
.penpot-icon { .penpot-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
svg { svg {
fill: var(--icon-foreground); fill: var(--icon-foreground);
@ -125,7 +125,7 @@
} }
.team-picture { .team-picture {
@include deprecated.flexCenter; @include deprecated.flex-center;
border-radius: 50%; border-radius: 50%;
height: var(--sp-xxl); height: var(--sp-xxl);
@ -140,8 +140,8 @@
} }
.switch-options { .switch-options {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.flexCenter; @include deprecated.flex-center;
max-width: var(--sp-xxl); max-width: var(--sp-xxl);
min-width: deprecated.$s-28; min-width: deprecated.$s-28;
@ -199,7 +199,7 @@
} }
.icon-wrapper { .icon-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: var(--sp-xxl); width: var(--sp-xxl);
height: var(--sp-xxl); height: var(--sp-xxl);
@ -301,7 +301,7 @@
} }
.element-title { .element-title {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
width: deprecated.$s-256; width: deprecated.$s-256;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
@ -366,8 +366,8 @@
} }
.search-btn { .search-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.flexCenter; @include deprecated.flex-center;
position: absolute; position: absolute;
right: 0; right: 0;
@ -401,7 +401,7 @@
} }
.profile { .profile {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -412,7 +412,7 @@
.profile-fullname { .profile-fullname {
@include t.use-typography("title-small"); @include t.use-typography("title-small");
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
align-self: center; align-self: center;
max-width: var(--sp-l) 0; max-width: var(--sp-l) 0;
@ -454,7 +454,7 @@
} }
.profile-dropdown-item .open-arrow { .profile-dropdown-item .open-arrow {
@include deprecated.flexCenter; @include deprecated.flex-center;
} }
.profile-dropdown-item .open-arrow svg { .profile-dropdown-item .open-arrow svg {
@ -504,7 +504,7 @@
.menu-version { .menu-version {
@include t.use-typography("code-font"); @include t.use-typography("code-font");
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
margin-inline-start: var(--sp-s); margin-inline-start: var(--sp-s);
@ -545,7 +545,7 @@
} }
.upgrade-plan-section { .upgrade-plan-section {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -638,7 +638,7 @@
} }
.current-org { .current-org {
@include deprecated.buttonStyle; @include deprecated.button-style;
text-transform: none; text-transform: none;
display: grid; display: grid;

10
frontend/src/app/main/ui/dashboard/subscription.scss
View File

@ -26,7 +26,7 @@
} }
.cta-top-section { .cta-top-section {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: grid; display: grid;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
@ -44,7 +44,7 @@
} }
.icon-dropdown { .icon-dropdown {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
width: var(--sp-l); width: var(--sp-l);
@ -70,7 +70,7 @@
.cta-bottom-section .content { .cta-bottom-section .content {
@include t.use-typography("body-medium"); @include t.use-typography("body-medium");
@include deprecated.buttonStyle; @include deprecated.button-style;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
display: inline-block; display: inline-block;
@ -120,7 +120,7 @@
} }
.cta-link { .cta-link {
@include deprecated.buttonStyle; @include deprecated.button-style;
align-self: end; align-self: end;
margin-inline-start: var(--sp-xs); margin-inline-start: var(--sp-xs);
@ -147,7 +147,7 @@
} }
.manage-subscription-link { .manage-subscription-link {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include t.use-typography("body-medium"); @include t.use-typography("body-medium");
color: var(--color-accent-tertiary); color: var(--color-accent-tertiary);

10
frontend/src/app/main/ui/dashboard/team_form.scss
View File

@ -19,7 +19,7 @@
} }
.modal-title { .modal-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -38,13 +38,13 @@
.group-name-input { .group-name-input {
@extend %input-element-label; @extend %input-element-label;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
margin-bottom: deprecated.$s-8; margin-bottom: deprecated.$s-8;
label { label {
@include deprecated.flexColumn; @include deprecated.flex-column;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
@ -53,7 +53,7 @@
height: 100%; height: 100%;
input { input {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
} }
} }
} }

4
frontend/src/app/main/ui/debug/icons_preview.scss
View File

@ -9,7 +9,7 @@
} }
.title { .title {
@include deprecated.bigTitleTipography; @include deprecated.big-title-typography;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
@ -32,7 +32,7 @@
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
overflow-wrap: break-word; overflow-wrap: break-word;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
svg { svg {
width: var(--cell-size); width: var(--cell-size);

64
frontend/src/app/main/ui/exports/assets.scss
View File

@ -8,7 +8,7 @@
// PROGRESS WIDGET // PROGRESS WIDGET
.export-progress-widget { .export-progress-widget {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-28; width: deprecated.$s-28;
height: deprecated.$s-28; height: deprecated.$s-28;
@ -59,7 +59,7 @@
} }
.export-progress-title { .export-progress-title {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -72,7 +72,7 @@
} }
.progress { .progress {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
padding-left: deprecated.$s-8; padding-left: deprecated.$s-8;
margin: 0; margin: 0;
@ -81,8 +81,8 @@
} }
.retry-btn { .retry-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: inline; display: inline;
text-align: left; text-align: left;
@ -92,7 +92,7 @@
} }
.progress-close-button { .progress-close-button {
@include deprecated.buttonStyle; @include deprecated.button-style;
padding: 0; padding: 0;
margin-inline-end: deprecated.$s-8; margin-inline-end: deprecated.$s-8;
@ -129,7 +129,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineMediumTypography; @include deprecated.headline-medium-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -140,12 +140,12 @@
.modal-content, .modal-content,
.no-selection { .no-selection {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
.modal-link { .modal-link {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@ -153,15 +153,15 @@
} }
.selection-header { .selection-header {
@include deprecated.flexRow; @include deprecated.flex-row;
height: deprecated.$s-32; height: deprecated.$s-32;
margin-bottom: deprecated.$s-4; margin-bottom: deprecated.$s-4;
.selection-btn { .selection-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
@extend %input-checkbox; @extend %input-checkbox;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -174,7 +174,7 @@
} }
.selection-title { .selection-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
@ -203,21 +203,21 @@
} }
.selection-list { .selection-list {
@include deprecated.flexColumn; @include deprecated.flex-column;
max-height: deprecated.$s-400; max-height: deprecated.$s-400;
overflow-y: auto; overflow-y: auto;
padding-bottom: deprecated.$s-12; padding-bottom: deprecated.$s-12;
.selection-row { .selection-row {
@include deprecated.flexRow; @include deprecated.flex-row;
background-color: var(--entry-background-color); background-color: var(--entry-background-color);
min-height: deprecated.$s-40; min-height: deprecated.$s-40;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
.selection-btn { .selection-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: grid; display: grid;
grid-template-columns: min-content auto 1fr auto auto; grid-template-columns: min-content auto 1fr auto auto;
@ -229,7 +229,7 @@
.checkbox-wrapper { .checkbox-wrapper {
@extend %input-checkbox; @extend %input-checkbox;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -241,8 +241,8 @@
} }
.selection-name { .selection-name {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
flex-grow: 1; flex-grow: 1;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
@ -250,8 +250,8 @@
} }
.selection-scale { .selection-scale {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
min-width: deprecated.$s-108; min-width: deprecated.$s-108;
padding: deprecated.$s-12; padding: deprecated.$s-12;
@ -259,8 +259,8 @@
} }
.selection-extension { .selection-extension {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
min-width: deprecated.$s-72; min-width: deprecated.$s-72;
padding: deprecated.$s-12; padding: deprecated.$s-12;
@ -269,7 +269,7 @@
} }
.image-wrapper { .image-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
min-height: deprecated.$s-32; min-height: deprecated.$s-32;
min-width: deprecated.$s-32; min-width: deprecated.$s-32;
@ -306,7 +306,7 @@
.modal-scd-msg, .modal-scd-msg,
.modal-subtitle, .modal-subtitle,
.modal-msg { .modal-msg {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
@ -321,7 +321,7 @@
align-items: flex-start; align-items: flex-start;
.modal-subtitle { .modal-subtitle {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -333,16 +333,16 @@
} }
.option-content { .option-content {
@include deprecated.flexColumn; @include deprecated.flex-column;
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
} }
.file-entry { .file-entry {
.file-name { .file-name {
@include deprecated.flexRow; @include deprecated.flex-row;
.file-icon { .file-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-16; height: deprecated.$s-16;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -355,8 +355,8 @@
} }
.file-name-label { .file-name-label {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
} }
} }

52
frontend/src/app/main/ui/exports/files.scss
View File

@ -26,7 +26,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineMediumTypography; @include deprecated.headline-medium-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -36,12 +36,12 @@
} }
.modal-content { .modal-content {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
.modal-link { .modal-link {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@ -49,15 +49,15 @@
} }
.selection-header { .selection-header {
@include deprecated.flexRow; @include deprecated.flex-row;
height: deprecated.$s-32; height: deprecated.$s-32;
margin-bottom: deprecated.$s-4; margin-bottom: deprecated.$s-4;
.selection-btn { .selection-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
@extend %input-checkbox; @extend %input-checkbox;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -70,7 +70,7 @@
} }
.selection-title { .selection-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
@ -99,21 +99,21 @@
} }
.selection-list { .selection-list {
@include deprecated.flexColumn; @include deprecated.flex-column;
max-height: deprecated.$s-400; max-height: deprecated.$s-400;
overflow-y: auto; overflow-y: auto;
padding-bottom: deprecated.$s-12; padding-bottom: deprecated.$s-12;
.selection-row { .selection-row {
@include deprecated.flexRow; @include deprecated.flex-row;
background-color: var(--entry-background-color); background-color: var(--entry-background-color);
min-height: deprecated.$s-40; min-height: deprecated.$s-40;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
.selection-btn { .selection-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: grid; display: grid;
grid-template-columns: min-content auto 1fr auto auto; grid-template-columns: min-content auto 1fr auto auto;
@ -125,7 +125,7 @@
.checkbox-wrapper { .checkbox-wrapper {
@extend %input-checkbox; @extend %input-checkbox;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -137,8 +137,8 @@
} }
.selection-name { .selection-name {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
flex-grow: 1; flex-grow: 1;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
@ -146,8 +146,8 @@
} }
.selection-scale { .selection-scale {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
min-width: deprecated.$s-108; min-width: deprecated.$s-108;
padding: deprecated.$s-12; padding: deprecated.$s-12;
@ -155,8 +155,8 @@
} }
.selection-extension { .selection-extension {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
min-width: deprecated.$s-72; min-width: deprecated.$s-72;
padding: deprecated.$s-12; padding: deprecated.$s-12;
@ -165,7 +165,7 @@
} }
.image-wrapper { .image-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
min-height: deprecated.$s-32; min-height: deprecated.$s-32;
min-width: deprecated.$s-32; min-width: deprecated.$s-32;
@ -202,7 +202,7 @@
.modal-scd-msg, .modal-scd-msg,
.modal-subtitle, .modal-subtitle,
.modal-msg { .modal-msg {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
@ -217,7 +217,7 @@
align-items: flex-start; align-items: flex-start;
.modal-subtitle { .modal-subtitle {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
padding: 0.25rem 0; padding: 0.25rem 0;
@ -230,16 +230,16 @@
} }
.option-content { .option-content {
@include deprecated.flexColumn; @include deprecated.flex-column;
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
} }
.file-entry { .file-entry {
.file-name { .file-name {
@include deprecated.flexRow; @include deprecated.flex-row;
.file-icon { .file-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-16; height: deprecated.$s-16;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -252,8 +252,8 @@
} }
.file-name-label { .file-name-label {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
} }
} }

4
frontend/src/app/main/ui/inspect/annotation.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.attributes-block { .attributes-block {
@include deprecated.flexColumn; @include deprecated.flex-column;
} }
.title-spacing-annotation { .title-spacing-annotation {
@ -15,7 +15,7 @@
} }
.annotation-content { .annotation-content {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--entry-foreground-color); color: var(--entry-foreground-color);
} }

14
frontend/src/app/main/ui/inspect/code.scss
View File

@ -22,7 +22,7 @@
.download-button { .download-button {
@extend %button-secondary; @extend %button-secondary;
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: 100%; width: 100%;
@ -30,7 +30,7 @@
} }
.code-block { .code-block {
@include deprecated.codeTypography; @include deprecated.code-typography;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -63,7 +63,7 @@
} }
.code-lang { .code-lang {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
display: flex; display: flex;
align-items: center; align-items: center;
@ -95,7 +95,7 @@
} }
.code-lang-select { .code-lang-select {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
width: deprecated.$s-72; width: deprecated.$s-72;
border: deprecated.$s-1 solid transparent; border: deprecated.$s-1 solid transparent;
@ -104,7 +104,7 @@
} }
.code-lang-option { .code-lang-option {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
width: deprecated.$s-72; width: deprecated.$s-72;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -120,7 +120,7 @@
} }
.toggle-btn { .toggle-btn {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: flex; display: flex;
align-items: center; align-items: center;
@ -129,7 +129,7 @@
stroke: var(--title-foreground-color); stroke: var(--title-foreground-color);
.collapsabled-icon { .collapsabled-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;

10
frontend/src/app/main/ui/inspect/exports.scss
View File

@ -36,13 +36,13 @@
} }
.element-set-content { .element-set-content {
@include deprecated.flexColumn; @include deprecated.flex-column;
margin-bottom: deprecated.$s-4; margin-bottom: deprecated.$s-4;
} }
.multiple-exports { .multiple-exports {
@include deprecated.flexRow; @include deprecated.flex-row;
grid-column: 1 / span 9; grid-column: 1 / span 9;
} }
@ -52,7 +52,7 @@
} }
.actions { .actions {
@include deprecated.flexRow; @include deprecated.flex-row;
} }
.element-group { .element-group {
@ -102,14 +102,14 @@
.suffix-input { .suffix-input {
@extend %input-element; @extend %input-element;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
grid-column: span 3; grid-column: span 3;
} }
.export-btn { .export-btn {
@extend %button-secondary; @extend %button-secondary;
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: 100%; width: 100%;

8
frontend/src/app/main/ui/inspect/right_sidebar.scss
View File

@ -56,8 +56,8 @@
} }
.layer-title { .layer-title {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
block-size: $sz-32; block-size: $sz-32;
padding: var(--sp-s) 0; padding: var(--sp-s) 0;
@ -70,8 +70,8 @@
} }
.layer-subtitle { .layer-subtitle {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
color: var(--assets-item-name-foreground-color-rest); color: var(--assets-item-name-foreground-color-rest);
} }

4
frontend/src/app/main/ui/notifications/badge.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.badge-notification { .badge-notification {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
--badge-notification-bg-color: var(--alert-background-color-default); --badge-notification-bg-color: var(--alert-background-color-default);
--badge-notification-fg-color: var(--alert-text-foreground-color-default); --badge-notification-fg-color: var(--alert-text-foreground-color-default);
@ -31,7 +31,7 @@
} }
.small { .small {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
min-height: deprecated.$s-20; min-height: deprecated.$s-20;
border-radius: deprecated.$br-6; border-radius: deprecated.$br-6;

4
frontend/src/app/main/ui/notifications/context_notification.scss
View File

@ -68,7 +68,7 @@
} }
.context-text { .context-text {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
align-self: center; align-self: center;
color: var(--context-notification-fg-color); color: var(--context-notification-fg-color);
@ -81,7 +81,7 @@
.link, .link,
.contain-html .context-text a { .contain-html .context-text a {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
align-self: center; align-self: center;
display: inline; display: inline;

12
frontend/src/app/main/ui/onboarding/questions.scss
View File

@ -29,7 +29,7 @@
// STEP CONTAINER // STEP CONTAINER
.paginator { .paginator {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
height: deprecated.$s-20; height: deprecated.$s-20;
text-align: right; text-align: right;
@ -50,7 +50,7 @@
.radio-btns label, .radio-btns label,
.select-class span { .select-class span {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
} }
// STEP 1 // STEP 1
@ -62,7 +62,7 @@
} }
.modal-title { .modal-title {
@include deprecated.bigTitleTipography; @include deprecated.big-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
min-height: deprecated.$s-32; min-height: deprecated.$s-32;
@ -70,7 +70,7 @@
} }
.modal-subtitle { .modal-subtitle {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
margin: 0; margin: 0;
@ -78,7 +78,7 @@
} }
.modal-text { .modal-text {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
margin: 0; margin: 0;
@ -137,7 +137,7 @@
} }
.input-spacing input { .input-spacing input {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
} }
// STEP-4 // STEP-4

2
frontend/src/app/main/ui/onboarding/team_choice.cljs
View File

@ -236,7 +236,7 @@
[:div {:class (stl/css-case [:div {:class (stl/css-case
:modal-overlay true)} :modal-overlay true)}
[:div.animated.fadeIn {:class (stl/css :modal-container)} [:div.animated.fade-in {:class (stl/css :modal-container)}
[:h1 {:class (stl/css :modal-title)} [:h1 {:class (stl/css :modal-title)}
(tr "onboarding-v2.welcome.title")] (tr "onboarding-v2.welcome.title")]
[:div {:class (stl/css :modal-sections)} [:div {:class (stl/css :modal-sections)}

28
frontend/src/app/main/ui/onboarding/team_choice.scss
View File

@ -34,7 +34,7 @@
} }
.paginator { .paginator {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
position: absolute; position: absolute;
top: deprecated.$s-40; top: deprecated.$s-40;
@ -54,13 +54,13 @@
} }
.modal-title { .modal-title {
@include deprecated.bigTitleTipography; @include deprecated.big-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.modal-subtitle { .modal-subtitle {
@include deprecated.medTitleTipography; @include deprecated.med-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -70,34 +70,34 @@
} }
.modal-text { .modal-text {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
margin: 0; margin: 0;
} }
.modal-desc { .modal-desc {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
margin: 0; margin: 0;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.team-features { .team-features {
@include deprecated.flexColumn; @include deprecated.flex-column;
gap: deprecated.$s-16; gap: deprecated.$s-16;
margin: 0; margin: 0;
} }
.feature { .feature {
@include deprecated.flexRow; @include deprecated.flex-row;
gap: deprecated.$s-16; gap: deprecated.$s-16;
} }
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-32; width: deprecated.$s-32;
@ -150,7 +150,7 @@
.first-block, .first-block,
.second-block { .second-block {
@include deprecated.flexColumn; @include deprecated.flex-column;
gap: deprecated.$s-16; gap: deprecated.$s-16;
} }
@ -165,8 +165,8 @@
@extend %input-element-label; @extend %input-element-label;
label { label {
@include deprecated.flexColumn; @include deprecated.flex-column;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
@ -175,7 +175,7 @@
height: 100%; height: 100%;
input { input {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
margin-top: deprecated.$s-8; margin-top: deprecated.$s-8;
} }
@ -201,7 +201,7 @@
} }
.role-title { .role-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
margin-block-end: deprecated.$s-8; margin-block-end: deprecated.$s-8;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
@ -213,7 +213,7 @@
} }
.modal-hint { .modal-hint {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
text-align: right; text-align: right;

4
frontend/src/app/main/ui/releases.cljs
View File

@ -53,7 +53,7 @@
(let [slide* (mf/use-state :start) (let [slide* (mf/use-state :start)
slide (deref slide*) slide (deref slide*)
klass* (mf/use-state "fadeInDown") klass* (mf/use-state "fade-in-down")
klass (deref klass*) klass (deref klass*)
navigate navigate
@ -78,7 +78,7 @@
(mf/with-effect [slide] (mf/with-effect [slide]
(when (not= :start slide) (when (not= :start slide)
(reset! klass* "fadeIn")) (reset! klass* "fade-in"))
(let [sem (tm/schedule 300 #(reset! klass* nil))] (let [sem (tm/schedule 300 #(reset! klass* nil))]
(fn [] (fn []
(reset! klass* nil) (reset! klass* nil)

12
frontend/src/app/main/ui/releases/v2_0.scss
View File

@ -38,8 +38,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -49,7 +49,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -68,20 +68,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

8
frontend/src/app/main/ui/releases/v2_1.scss
View File

@ -38,8 +38,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -49,7 +49,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -62,7 +62,7 @@
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);

12
frontend/src/app/main/ui/releases/v2_10.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_11.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_12.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_13.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_14.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

8
frontend/src/app/main/ui/releases/v2_2.scss
View File

@ -38,8 +38,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -49,7 +49,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -62,7 +62,7 @@
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);

12
frontend/src/app/main/ui/releases/v2_3.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_4.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_5.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_6.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_7.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_8.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

12
frontend/src/app/main/ui/releases/v2_9.scss
View File

@ -42,8 +42,8 @@
} }
.version-tag { .version-tag {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-96; width: deprecated.$s-96;
@ -53,7 +53,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineLargeTypography; @include deprecated.headline-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -72,20 +72,20 @@
} }
.feature-title { .feature-title {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
.feature-content { .feature-content {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
margin: 0; margin: 0;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
.feature-list { .feature-list {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
list-style: disc; list-style: disc;

10
frontend/src/app/main/ui/settings/change_email.scss
View File

@ -21,7 +21,7 @@
} }
.modal-title { .modal-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -31,19 +31,19 @@
} }
.modal-content { .modal-content {
@include deprecated.flexColumn; @include deprecated.flex-column;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
gap: deprecated.$s-24; gap: deprecated.$s-24;
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
} }
.fields-row { .fields-row {
@include deprecated.flexColumn; @include deprecated.flex-column;
} }
.select-title { .select-title {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }

10
frontend/src/app/main/ui/settings/delete_account.scss
View File

@ -21,7 +21,7 @@
} }
.modal-title { .modal-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -31,19 +31,19 @@
} }
.modal-content { .modal-content {
@include deprecated.flexColumn; @include deprecated.flex-column;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
gap: deprecated.$s-24; gap: deprecated.$s-24;
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
} }
.fields-row { .fields-row {
@include deprecated.flexColumn; @include deprecated.flex-column;
} }
.select-title { .select-title {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }

6
frontend/src/app/main/ui/settings/sidebar.scss
View File

@ -69,12 +69,12 @@
} }
.element-title { .element-title {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
} }
.back-to-dashboard { .back-to-dashboard {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: flex; display: flex;
align-items: center; align-items: center;

2
frontend/src/app/main/ui/settings/subscription.scss
View File

@ -168,7 +168,7 @@
.cta-button { .cta-button {
@include t.use-typography("body-medium"); @include t.use-typography("body-medium");
@include deprecated.buttonStyle; @include deprecated.button-style;
align-items: center; align-items: center;
color: var(--color-accent-primary); color: var(--color-accent-primary);

4
frontend/src/app/main/ui/static.scss
View File

@ -202,13 +202,13 @@
} }
.project-name { .project-name {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.file-name { .file-name {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
text-transform: none; text-transform: none;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);

12
frontend/src/app/main/ui/viewer.scss
View File

@ -24,7 +24,7 @@
} }
.empty-state { .empty-state {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--empty-message-foreground-color); color: var(--empty-message-foreground-color);
display: grid; display: grid;
@ -47,7 +47,7 @@
} }
.thumbnails-close { .thumbnails-close {
@include deprecated.buttonStyle; @include deprecated.button-style;
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 1; grid-column: 1 / span 1;
@ -81,7 +81,7 @@
.viewer-go-prev, .viewer-go-prev,
.viewer-go-next { .viewer-go-next {
@extend %button-secondary; @extend %button-secondary;
@include deprecated.flexCenter; @include deprecated.flex-center;
position: absolute; position: absolute;
right: deprecated.$s-8; right: deprecated.$s-8;
@ -128,7 +128,7 @@
.reset-button { .reset-button {
@extend %button-secondary; @extend %button-secondary;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-28; width: deprecated.$s-28;
@ -144,8 +144,8 @@
} }
.counter { .counter {
@include deprecated.flexCenter; @include deprecated.flex-center;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
width: deprecated.$s-64; width: deprecated.$s-64;

8
frontend/src/app/main/ui/viewer/comments.scss
View File

@ -8,7 +8,7 @@
// COMMENT DROPDOWN ON HEADER // COMMENT DROPDOWN ON HEADER
.view-options { .view-options {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
@ -31,7 +31,7 @@
} }
.dropdown-title { .dropdown-title {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
flex-grow: 1; flex-grow: 1;
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
@ -44,7 +44,7 @@
.icon, .icon,
.icon-dropdown { .icon-dropdown {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -64,7 +64,7 @@
@extend %dropdown-element-base; @extend %dropdown-element-base;
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
width: deprecated.$s-16; width: deprecated.$s-16;

44
frontend/src/app/main/ui/viewer/header.scss
View File

@ -45,39 +45,39 @@
} }
.sitemap-zone { .sitemap-zone {
@include deprecated.flexColumn; @include deprecated.flex-column;
position: relative; position: relative;
width: 100%; width: 100%;
} }
.project-name { .project-name {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.sitemap-text { .sitemap-text {
@include deprecated.flexRow; @include deprecated.flex-row;
} }
.breadcrumb { .breadcrumb {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
@include deprecated.flexRow; @include deprecated.flex-row;
color: var(--title-foreground-color); color: var(--title-foreground-color);
cursor: pointer; cursor: pointer;
} }
.breadcrumb-text { .breadcrumb-text {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
max-width: 12vw; // This is a fallback max-width: 12vw; // This is a fallback
max-width: 12cqw; // This is a unit refered to container max-width: 12cqw; // This is a unit refered to container
} }
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-16; height: deprecated.$s-16;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -107,7 +107,7 @@
@extend %dropdown-element-base; @extend %dropdown-element-base;
.icon-check { .icon-check {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -125,8 +125,8 @@
} }
.current-frame { .current-frame {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
@include deprecated.flexRow; @include deprecated.flex-row;
flex-grow: 1; flex-grow: 1;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
@ -138,7 +138,7 @@
} }
.frame-name { .frame-name {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
max-width: 17vw; // This is a fallback max-width: 17vw; // This is a fallback
max-width: 17cqw; // This is a unit refered to container max-width: 17cqw; // This is a unit refered to container
@ -146,14 +146,14 @@
// SECTION BUTTONS // SECTION BUTTONS
.mode-zone { .mode-zone {
@include deprecated.flexRow; @include deprecated.flex-row;
height: 100%; height: 100%;
} }
.mode-zone-btn { .mode-zone-btn {
@extend %button-tertiary; @extend %button-tertiary;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-28; width: deprecated.$s-28;
@ -170,7 +170,7 @@
// OPTION AREA // OPTION AREA
.options-zone { .options-zone {
@include deprecated.flexRow; @include deprecated.flex-row;
position: relative; position: relative;
justify-content: flex-end; justify-content: flex-end;
@ -187,7 +187,7 @@
.fullscreen-btn { .fullscreen-btn {
@extend %button-tertiary; @extend %button-tertiary;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-28; width: deprecated.$s-28;
@ -209,7 +209,7 @@
.edit-btn { .edit-btn {
@extend %button-tertiary; @extend %button-tertiary;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-32; height: deprecated.$s-32;
width: deprecated.$s-28; width: deprecated.$s-28;
@ -223,7 +223,7 @@
.go-log-btn { .go-log-btn {
@extend %button-tertiary; @extend %button-tertiary;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
height: deprecated.$s-32; height: deprecated.$s-32;
padding: 0 deprecated.$s-8; padding: 0 deprecated.$s-8;
@ -233,15 +233,15 @@
// ZOOM WIDGET // ZOOM WIDGET
.zoom-widget { .zoom-widget {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-28; height: deprecated.$s-28;
min-width: deprecated.$s-64; min-width: deprecated.$s-64;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
.label { .label {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--button-tertiary-foreground-color-rest); color: var(--button-tertiary-foreground-color-rest);
} }
@ -286,7 +286,7 @@
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
.zoom-icon { .zoom-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-24; width: deprecated.$s-24;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -306,7 +306,7 @@
} }
.zoom-text { .zoom-text {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
min-width: deprecated.$s-64; min-width: deprecated.$s-64;

2
frontend/src/app/main/ui/viewer/inspect.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.inspect-svg-wrapper { .inspect-svg-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
position: relative; position: relative;
flex-direction: column; flex-direction: column;

8
frontend/src/app/main/ui/viewer/interactions.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.view-options { .view-options {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
display: flex; display: flex;
align-items: center; align-items: center;
@ -21,7 +21,7 @@
} }
.dropdown-title { .dropdown-title {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
flex-grow: 1; flex-grow: 1;
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
@ -49,7 +49,7 @@
min-height: deprecated.$s-32; min-height: deprecated.$s-32;
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
width: deprecated.$s-16; width: deprecated.$s-16;
@ -78,7 +78,7 @@
.icon, .icon,
.icon-dropdown { .icon-dropdown {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
width: deprecated.$s-16; width: deprecated.$s-16;

6
frontend/src/app/main/ui/viewer/login.scss
View File

@ -21,7 +21,7 @@
} }
.modal-title { .modal-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -31,8 +31,8 @@
} }
.modal-content { .modal-content {
@include deprecated.flexColumn; @include deprecated.flex-column;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
gap: deprecated.$s-24; gap: deprecated.$s-24;
max-height: deprecated.$s-400; max-height: deprecated.$s-400;

32
frontend/src/app/main/ui/viewer/share_link.scss
View File

@ -26,7 +26,7 @@
} }
.share-link-title { .share-link-title {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -36,20 +36,20 @@
} }
.modal-content { .modal-content {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
@include deprecated.flexColumn; @include deprecated.flex-column;
gap: deprecated.$s-24; gap: deprecated.$s-24;
} }
.share-link-section { .share-link-section {
@include deprecated.flexColumn; @include deprecated.flex-column;
gap: deprecated.$s-8; gap: deprecated.$s-8;
} }
.hint-wrapper { .hint-wrapper {
@include deprecated.flexRow; @include deprecated.flex-row;
} }
.hint { .hint {
@ -58,7 +58,7 @@
} }
.custon-input-wrapper { .custon-input-wrapper {
@include deprecated.flexRow; @include deprecated.flex-row;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -68,7 +68,7 @@
.input-text { .input-text {
@extend %input-element; @extend %input-element;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
padding-left: deprecated.$s-8; padding-left: deprecated.$s-8;
@ -83,7 +83,7 @@
.copy-button { .copy-button {
@extend %button-secondary; @extend %button-secondary;
@include deprecated.flexRow; @include deprecated.flex-row;
gap: deprecated.$s-8; gap: deprecated.$s-8;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -97,14 +97,14 @@
} }
.description { .description {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
} }
.actions { .actions {
@include deprecated.flexRow; @include deprecated.flex-row;
justify-content: flex-end; justify-content: flex-end;
} }
@ -122,14 +122,14 @@
} }
.permissions-section { .permissions-section {
@include deprecated.flexColumn; @include deprecated.flex-column;
gap: deprecated.$s-8; gap: deprecated.$s-8;
} }
.manage-permissions { .manage-permissions {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
color: var(--menu-foreground-color-rest); color: var(--menu-foreground-color-rest);
height: deprecated.$s-32; height: deprecated.$s-32;
@ -139,7 +139,7 @@
} }
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
margin-right: deprecated.$s-6; margin-right: deprecated.$s-6;
@ -182,7 +182,7 @@
} }
.select-all-row { .select-all-row {
@include deprecated.flexRow; @include deprecated.flex-row;
justify-content: space-between; justify-content: space-between;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -207,7 +207,7 @@
.count-pages, .count-pages,
.current-tag { .current-tag {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--input-foreground-color); color: var(--input-foreground-color);
} }

14
frontend/src/app/main/ui/viewer/thumbnails.scss
View File

@ -33,13 +33,13 @@
} }
.counter { .counter {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--viewer-thumbnails-control-foreground-color); color: var(--viewer-thumbnails-control-foreground-color);
} }
.actions { .actions {
@include deprecated.flexRow; @include deprecated.flex-row;
width: deprecated.$s-60; width: deprecated.$s-60;
} }
@ -77,7 +77,7 @@
.right-scroll-handler, .right-scroll-handler,
.left-scroll-handler { .left-scroll-handler {
@extend %button-tertiary; @extend %button-tertiary;
@include deprecated.flexCenter; @include deprecated.flex-center;
grid-column: 3 / span 1; grid-column: 3 / span 1;
grid-row: 1 / span 1; grid-row: 1 / span 1;
@ -121,7 +121,7 @@
} }
.thumbnail-item { .thumbnail-item {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -129,7 +129,7 @@
} }
.thumbnail-preview { .thumbnail-preview {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-132; width: deprecated.$s-132;
min-height: deprecated.$s-132; min-height: deprecated.$s-132;
@ -153,8 +153,8 @@
} }
.thumbnail-info { .thumbnail-info {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
text-align: center; text-align: center;
color: var(--viewer-thumbnails-control-foreground-color); color: var(--viewer-thumbnails-control-foreground-color);

8
frontend/src/app/main/ui/workspace/color_palette.scss
View File

@ -31,8 +31,8 @@
.left-arrow, .left-arrow,
.right-arrow { .right-arrow {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.flexCenter; @include deprecated.flex-center;
position: relative; position: relative;
height: 100%; height: 100%;
@ -124,14 +124,14 @@
height: 100%; height: 100%;
&.no-text { &.no-text {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-32; width: deprecated.$s-32;
} }
} }
.color-palette-empty { .color-palette-empty {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--palette-text-color); color: var(--palette-text-color);
} }

12
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
View File

@ -36,7 +36,7 @@
width: 100%; width: 100%;
.library-name { .library-name {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--context-menu-foreground-color); color: var(--context-menu-foreground-color);
display: grid; display: grid;
@ -47,7 +47,7 @@
max-width: deprecated.$s-400; max-width: deprecated.$s-400;
.lib-name { .lib-name {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
max-width: deprecated.$s-380; max-width: deprecated.$s-380;
} }
@ -60,11 +60,11 @@
.icon-wrapper { .icon-wrapper {
margin-left: deprecated.$s-4; margin-left: deprecated.$s-4;
@include deprecated.flexCenter; @include deprecated.flex-center;
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
@include deprecated.flexCenter; @include deprecated.flex-center;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
@ -85,10 +85,10 @@
color: var(--context-menu-foreground-color-selected); color: var(--context-menu-foreground-color-selected);
.icon-wrapper { .icon-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
svg { svg {
@include deprecated.flexCenter; @include deprecated.flex-center;
@extend %button-icon-small; @extend %button-icon-small;
stroke: var(--context-menu-foreground-color-selected); stroke: var(--context-menu-foreground-color-selected);

10
frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.color-values { .color-values {
@include deprecated.flexColumn; @include deprecated.flex-column;
margin-top: deprecated.$s-8; margin-top: deprecated.$s-8;
@ -16,11 +16,11 @@
} }
.colors-row { .colors-row {
@include deprecated.flexRow; @include deprecated.flex-row;
.input-wrapper { .input-wrapper {
@extend %input-element; @extend %input-element;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
width: deprecated.$s-84; width: deprecated.$s-84;
display: flex; display: flex;
@ -29,11 +29,11 @@
} }
.hex-alpha-wrapper { .hex-alpha-wrapper {
@include deprecated.flexRow; @include deprecated.flex-row;
.input-wrapper { .input-wrapper {
@extend %input-element; @extend %input-element;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
width: deprecated.$s-84; width: deprecated.$s-84;

2
frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
View File

@ -141,7 +141,7 @@
.offset-input-wrapper { .offset-input-wrapper {
@extend %input-element; @extend %input-element;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
width: deprecated.$s-92; width: deprecated.$s-92;
} }

4
frontend/src/app/main/ui/workspace/colorpicker/harmony.scss
View File

@ -15,7 +15,7 @@
} }
.hue-wheel-wrapper { .hue-wheel-wrapper {
@include deprecated.flexCenter; @include deprecated.flex-center;
position: relative; position: relative;
} }
@ -39,7 +39,7 @@
} }
.handlers-wrapper { .handlers-wrapper {
@include deprecated.flexRow; @include deprecated.flex-row;
height: deprecated.$s-200; height: deprecated.$s-200;
width: deprecated.$s-52; width: deprecated.$s-52;

4
frontend/src/app/main/ui/workspace/colorpicker/hsva.scss
View File

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
.hsva-selector { .hsva-selector {
@include deprecated.flexColumn; @include deprecated.flex-column;
padding: deprecated.$s-4; padding: deprecated.$s-4;
row-gap: deprecated.$s-8; row-gap: deprecated.$s-8;
@ -20,7 +20,7 @@
} }
.hsva-selector-label { .hsva-selector-label {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
display: flex; display: flex;
align-items: center; align-items: center;

8
frontend/src/app/main/ui/workspace/comments.scss
View File

@ -23,7 +23,7 @@
} }
.mode-dropdown-wrapper { .mode-dropdown-wrapper {
@include deprecated.buttonStyle; @include deprecated.button-style;
@extend %asset-element; @extend %asset-element;
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
@ -46,7 +46,7 @@
} }
.arrow-icon { .arrow-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -78,7 +78,7 @@
justify-content: space-between; justify-content: space-between;
.icon { .icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-24; height: deprecated.$s-24;
width: deprecated.$s-24; width: deprecated.$s-24;
@ -91,7 +91,7 @@
} }
.label { .label {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
} }
&:hover { &:hover {

10
frontend/src/app/main/ui/workspace/context_menu.scss
View File

@ -15,7 +15,7 @@
.context-list, .context-list,
.workspace-context-submenu { .workspace-context-submenu {
@include deprecated.menuShadow; @include deprecated.menu-shadow;
display: grid; display: grid;
width: deprecated.$s-240; width: deprecated.$s-240;
@ -46,20 +46,20 @@
cursor: pointer; cursor: pointer;
.title { .title {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
} }
.shortcut { .shortcut {
@include deprecated.flexCenter; @include deprecated.flex-center;
gap: deprecated.$s-2; gap: deprecated.$s-2;
color: var(--menu-shortcut-foreground-color); color: var(--menu-shortcut-foreground-color);
.shortcut-key { .shortcut-key {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
@include deprecated.flexCenter; @include deprecated.flex-center;
height: deprecated.$s-20; height: deprecated.$s-20;
padding: deprecated.$s-2 deprecated.$s-6; padding: deprecated.$s-2 deprecated.$s-6;

14
frontend/src/app/main/ui/workspace/left_header.scss
View File

@ -14,7 +14,7 @@
} }
.main-icon { .main-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-32; width: deprecated.$s-32;
height: deprecated.$s-32; height: deprecated.$s-32;
@ -38,8 +38,8 @@
.project-name, .project-name,
.file-name { .file-name {
@include deprecated.uppercaseTitleTipography; @include deprecated.uppercase-title-typography;
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
height: deprecated.$s-16; height: deprecated.$s-16;
width: 100%; width: 100%;
@ -49,7 +49,7 @@
} }
.file-name { .file-name {
@include deprecated.smallTitleTipography; @include deprecated.small-title-typography;
text-transform: none; text-transform: none;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
@ -59,11 +59,11 @@
} }
.file-name-label { .file-name-label {
@include deprecated.textEllipsis; @include deprecated.text-ellipsis;
} }
.file-name-input { .file-name-input {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: 100%; width: 100%;
margin: 0; margin: 0;
@ -82,7 +82,7 @@
} }
.shared-badge { .shared-badge {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-16; width: deprecated.$s-16;
height: deprecated.$s-32; height: deprecated.$s-32;

10
frontend/src/app/main/ui/workspace/nudge.scss
View File

@ -21,7 +21,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineMediumTypography; @include deprecated.headline-medium-typography;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -31,18 +31,18 @@
} }
.modal-content { .modal-content {
@include deprecated.flexColumn; @include deprecated.flex-column;
gap: deprecated.$s-24; gap: deprecated.$s-24;
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
margin-bottom: deprecated.$s-24; margin-bottom: deprecated.$s-24;
} }
.input-wrapper { .input-wrapper {
@extend %input-with-label; @extend %input-with-label;
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
label { label {
text-transform: none; text-transform: none;
@ -50,7 +50,7 @@
} }
.modal-msg { .modal-msg {
@include deprecated.bodyLargeTypography; @include deprecated.body-large-typography;
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
line-height: 1.5; line-height: 1.5;

6
frontend/src/app/main/ui/workspace/palette.scss
View File

@ -72,7 +72,7 @@
} }
.palette-item { .palette-item {
@include deprecated.flexCenter; @include deprecated.flex-center;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
opacity: deprecated.$op-10; opacity: deprecated.$op-10;
@ -127,8 +127,8 @@
} }
.handler { .handler {
@include deprecated.buttonStyle; @include deprecated.button-style;
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-12; width: deprecated.$s-12;
height: 100%; height: 100%;

22
frontend/src/app/main/ui/workspace/plugins.scss
View File

@ -52,7 +52,7 @@
} }
.modal-title { .modal-title {
@include deprecated.headlineMediumTypography; @include deprecated.headline-medium-typography;
margin-block-end: deprecated.$s-32; margin-block-end: deprecated.$s-32;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
@ -86,7 +86,7 @@
.primary-button { .primary-button {
@extend %button-primary; @extend %button-primary;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
padding: deprecated.$s-0 deprecated.$s-16; padding: deprecated.$s-0 deprecated.$s-16;
} }
@ -98,13 +98,13 @@
.cancel-button { .cancel-button {
@extend %button-secondary; @extend %button-secondary;
@include deprecated.headlineSmallTypography; @include deprecated.headline-small-typography;
padding: deprecated.$s-0 deprecated.$s-16; padding: deprecated.$s-0 deprecated.$s-16;
} }
.search-icon { .search-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-20; width: deprecated.$s-20;
padding: 0 0 0 deprecated.$s-8; padding: 0 0 0 deprecated.$s-8;
@ -163,13 +163,13 @@
} }
.plugin-title { .plugin-title {
@include deprecated.bodyMediumTypography; @include deprecated.body-medium-typography;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
.plugin-summary { .plugin-summary {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }
@ -202,7 +202,7 @@
} }
.plugins-empty-text { .plugins-empty-text {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
@ -212,7 +212,7 @@ div.input-error {
} }
.info { .info {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
margin-top: deprecated.$s-4; margin-top: deprecated.$s-4;
@ -262,14 +262,14 @@ div.input-error {
} }
.permissions-list-text { .permissions-list-text {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
margin: 0; margin: 0;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }
.permissions-disclaimer { .permissions-disclaimer {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
padding: deprecated.$s-16; padding: deprecated.$s-16;
background: var(--color-background-quaternary); background: var(--color-background-quaternary);
@ -283,7 +283,7 @@ div.input-error {
} }
.discover { .discover {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
margin-top: deprecated.$s-24; margin-top: deprecated.$s-24;

10
frontend/src/app/main/ui/workspace/right_header.scss
View File

@ -28,7 +28,7 @@
} }
.zoom-widget { .zoom-widget {
@include deprecated.buttonStyle; @include deprecated.button-style;
display: flex; display: flex;
align-items: center; align-items: center;
@ -39,7 +39,7 @@
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
.label { .label {
@include deprecated.bodySmallTypography; @include deprecated.body-small-typography;
height: 100%; height: 100%;
padding: deprecated.$s-8 0; padding: deprecated.$s-8 0;
@ -79,7 +79,7 @@
} }
.zoom-text { .zoom-text {
@include deprecated.flexCenter; @include deprecated.flex-center;
height: 100%; height: 100%;
min-width: deprecated.$s-48; min-width: deprecated.$s-48;
@ -181,14 +181,14 @@
} }
.persistence-status-widget { .persistence-status-widget {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-28; width: deprecated.$s-28;
height: deprecated.$s-28; height: deprecated.$s-28;
} }
.status-icon { .status-icon {
@include deprecated.flexCenter; @include deprecated.flex-center;
width: deprecated.$s-24; width: deprecated.$s-24;
height: deprecated.$s-24; height: deprecated.$s-24;

Some files were not shown because too many files have changed in this diff Show More