github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-01 19:06:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Add shortcut to scss import paths (#7364)

Browse Source 
* 🎉 Add config for shortcut imports

* ♻️ Change import paths
This commit is contained in:
Eva Marco 2025-09-24 11:18:34 +02:00 committed by GitHub
parent 3f87e768a7
commit 441dc33e38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
71 changed files with 167 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -234,7 +234,7 @@ Use variables from `frontend/src/app/main/ui/ds/spacing.scss`. These are predefi
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 "../_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.
@ -242,7 +242,7 @@ Note: Since these values haven't been semantically defined yet, we’re temporar
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
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
``` ```
Avoid using sass variables defined on `frontend/resources/styles/common/refactor/spacing.scss` that are deprecated. Avoid using sass variables defined on `frontend/resources/styles/common/refactor/spacing.scss` that are deprecated.
@ -314,7 +314,7 @@ When applying typography in SCSS, use the proper mixin from the Design System.
✅ **DO: Use the DS mixin** ✅ **DO: Use the DS mixin**
```scss ```scss
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
.class { .class {
@include t.use-typography("body-small"); @include t.use-typography("body-small");

1
frontend/scripts/_worker.js
View File

@ -24,6 +24,7 @@ async function compileFile(path) {
"node_modules/animate.css", "node_modules/animate.css",
"resources/styles/common/", "resources/styles/common/",
"resources/styles", "resources/styles",
"src/app/main/ui/",
], ],
sourceMap: false, sourceMap: false,
}); });

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

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../ds/borders" as *; @use "ds/_borders.scss" as *;
.code-display { .code-display {
@include t.use-typography("code-font"); @include t.use-typography("code-font");

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

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.title-bar { .title-bar {

2
frontend/src/app/main/ui/dashboard/placeholder.scss
View File

@ -6,7 +6,7 @@
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
@use "./grid.scss" as g; @use "./grid.scss" as g;
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
.grid-empty-placeholder { .grid-empty-placeholder {
border-radius: $br-12; border-radius: $br-12;

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

@ -4,13 +4,13 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../ds/colors.scss" as *; @use "ds/colors.scss" as *;
@use "../ds/spacing.scss" as *; @use "ds/spacing.scss" as *;
@use "../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../ds/_utils.scss" as *; @use "ds/_utils.scss" as *;
@use "../ds/z-index.scss" as *; @use "ds/z-index.scss" as *;
@use "common/refactor/common-dashboard"; @use "common/refactor/common-dashboard";
@use "common/refactor/common-refactor.scss" as deprecated; @use "common/refactor/common-refactor.scss" as deprecated;

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

@ -1,8 +1,14 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
@use "common/refactor/common-dashboard"; @use "common/refactor/common-dashboard";
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../ds/spacing.scss" as *; @use "ds/spacing.scss" as *;
.cta-power-up { .cta-power-up {
display: flex; display: flex;

2
frontend/src/app/main/ui/ds/_borders.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "./utils.scss" as *; @use "ds/_utils.scss" as *;
// TODO: create actual tokens once we have them from design // TODO: create actual tokens once we have them from design
$br-8: px2rem(8); $br-8: px2rem(8);

2
frontend/src/app/main/ui/ds/_sizes.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "./utils.scss" as *; @use "ds/_utils.scss" as *;
// TODO: create actual tokens once we have them from design // TODO: create actual tokens once we have them from design
$sz-1: px2rem(1); $sz-1: px2rem(1);

6
frontend/src/app/main/ui/ds/buttons/_buttons.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../utils.scss" as *; @use "ds/_utils.scss" as *;
%base-button { %base-button {
--button-bg-color: initial; --button-bg-color: initial;

2
frontend/src/app/main/ui/ds/buttons/button.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../typography.scss" as *; @use "ds/typography.scss" as *;
@use "./buttons" as *; @use "./buttons" as *;
.button { .button {

4
frontend/src/app/main/ui/ds/buttons/icon_button.scss
View File

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../typography.scss" as *; @use "ds/typography.scss" as *;
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "./buttons" as *; @use "./buttons" as *;
.icon-button { .icon-button {

6
frontend/src/app/main/ui/ds/controls/combobox.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../typography.scss" as *; @use "ds/typography.scss" as *;
.wrapper { .wrapper {
--combobox-icon-color: var(--color-icon-default); --combobox-icon-color: var(--color-icon-default);

2
frontend/src/app/main/ui/ds/controls/input.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../spacing.scss" as *; @use "ds/spacing.scss" as *;
.input-wrapper { .input-wrapper {
display: flex; display: flex;

6
frontend/src/app/main/ui/ds/controls/numeric_input.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../spacing.scss" as *; @use "ds/_borders.scss" as *;
@use "../borders.scss" as *; @use "ds/spacing.scss" as *;
@use "../sizes.scss" as *; @use "ds/_sizes.scss" as *;
.input-wrapper { .input-wrapper {
--opacity-button: 0; --opacity-button: 0;

6
frontend/src/app/main/ui/ds/controls/select.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../typography.scss" as *; @use "ds/typography.scss" as *;
.select-wrapper { .select-wrapper {
--select-icon-color: var(--color-icon-default); --select-icon-color: var(--color-icon-default);

6
frontend/src/app/main/ui/ds/controls/shared/option.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../typography.scss" as *; @use "ds/typography.scss" as *;
.option { .option {
--options-fg-color: var(--color-foreground-primary); --options-fg-color: var(--color-foreground-primary);

6
frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../typography.scss" as *; @use "ds/typography.scss" as *;
.option-list { .option-list {
--options-dropdown-icon-fg-color: var(--color-foreground-secondary); --options-dropdown-icon-fg-color: var(--color-foreground-secondary);

6
frontend/src/app/main/ui/ds/controls/shared/token_option.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../typography.scss" as *; @use "ds/typography.scss" as *;
.token-option { .token-option {
--token-options-fg-color: var(--color-foreground-primary); --token-options-fg-color: var(--color-foreground-primary);

4
frontend/src/app/main/ui/ds/controls/utilities/hint_message.scss
View File

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../colors.scss" as *; @use "ds/colors.scss" as *;
.hint-message { .hint-message {
--hint-color: var(--color-foreground-secondary); --hint-color: var(--color-foreground-secondary);

8
frontend/src/app/main/ui/ds/controls/utilities/input_field.scss
View File

@ -4,10 +4,10 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../colors.scss" as *; @use "ds/colors.scss" as *;
.input-wrapper { .input-wrapper {
--input-bg-color: var(--color-background-tertiary); --input-bg-color: var(--color-background-tertiary);

6
frontend/src/app/main/ui/ds/controls/utilities/label.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../colors.scss" as *; @use "ds/colors.scss" as *;
@use "../../spacing.scss" as *; @use "ds/spacing.scss" as *;
.label { .label {
--label-color: var(--color-foreground-primary); --label-color: var(--color-foreground-primary);

8
frontend/src/app/main/ui/ds/controls/utilities/token_field.scss
View File

@ -4,10 +4,10 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../typography.scss" as t; @use "ds/typography.scss" as t;
@use "../../colors.scss" as *; @use "ds/colors.scss" as *;
.token-field { .token-field {
--token-field-bg-color: var(--color-background-tertiary); --token-field-bg-color: var(--color-background-tertiary);

2
frontend/src/app/main/ui/ds/foundations/typography/heading.scss
View File

@ -3,7 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../typography.scss" as t; @use "ds/typography.scss" as t;
.display-typography { .display-typography {
@include t.use-typography("display"); @include t.use-typography("display");

2
frontend/src/app/main/ui/ds/foundations/typography/text.scss
View File

@ -3,7 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../typography.scss" as t; @use "ds/typography.scss" as t;
.display-typography { .display-typography {
@include t.use-typography("display"); @include t.use-typography("display");

6
frontend/src/app/main/ui/ds/layout/tab_switcher.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../typography.scss" as *; @use "ds/typography.scss" as *;
.tabs { .tabs {
--tabs-bg-color: var(--color-background-secondary); --tabs-bg-color: var(--color-background-secondary);

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

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../typography.scss" as *; @use "ds/typography.scss" as *;
.notification { .notification {
@include use-typography("body-medium"); @include use-typography("body-medium");

6
frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../typography.scss" as *; @use "ds/typography.scss" as *;
.notification-pill { .notification-pill {
@include use-typography("body-medium"); @include use-typography("body-medium");

10
frontend/src/app/main/ui/ds/notifications/toast.scss
View File

@ -4,11 +4,11 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../typography.scss" as *; @use "ds/typography.scss" as *;
@use "../spacing.scss" as *; @use "ds/spacing.scss" as *;
@use "../z-index.scss" as *; @use "ds/z-index.scss" as *;
.toast { .toast {
--toast-icon-color: var(--color-foreground-secondary); --toast-icon-color: var(--color-foreground-secondary);

4
frontend/src/app/main/ui/ds/product/avatar.scss
View File

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
.avatar { .avatar {
border-radius: $br-circle; border-radius: $br-circle;

8
frontend/src/app/main/ui/ds/product/cta.scss
View File

@ -4,10 +4,10 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../colors.scss" as *; @use "ds/colors.scss" as *;
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../typography.scss" as t; @use "ds/typography.scss" as t;
.cta { .cta {
border-radius: $br-8; border-radius: $br-8;

4
frontend/src/app/main/ui/ds/product/empty_placeholder.scss
View File

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
.empty-placeholder { .empty-placeholder {
display: grid; display: grid;

8
frontend/src/app/main/ui/ds/product/input_with_meta.scss
View File

@ -4,10 +4,10 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../spacing.scss" as *; @use "ds/spacing.scss" as *;
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../typography.scss" as t; @use "ds/typography.scss" as t;
.input-with-meta-container { .input-with-meta-container {
--input-meta-value: var(--color-foreground-primary); --input-meta-value: var(--color-foreground-primary);

6
frontend/src/app/main/ui/ds/product/milestone.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../typography.scss" as t; @use "ds/typography.scss" as t;
.milestone { .milestone {
border: $b-1 solid var(--border-color, transparent); border: $b-1 solid var(--border-color, transparent);

6
frontend/src/app/main/ui/ds/product/milestone_group.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../typography.scss" as t; @use "ds/typography.scss" as t;
.milestone { .milestone {
border: $b-1 solid var(--border-color, transparent); border: $b-1 solid var(--border-color, transparent);

2
frontend/src/app/main/ui/ds/spacing.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "./utils.scss" as *; @use "ds/_utils.scss" as *;
$_sp-2: px2rem(2); $_sp-2: px2rem(2);
$_sp-4: px2rem(4); $_sp-4: px2rem(4);

6
frontend/src/app/main/ui/ds/tooltip/tooltip.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../typography.scss" as t; @use "ds/typography.scss" as t;
$arrow-side: 12px; $arrow-side: 12px;

2
frontend/src/app/main/ui/ds/typography.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "./utils.scss" as *; @use "ds/_utils.scss" as *;
$_font-weight-regular: 400; $_font-weight-regular: 400;
$_font-weight-medium: 500; $_font-weight-medium: 500;

6
frontend/src/app/main/ui/ds/utilities/swatch.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../colors.scss" as *; @use "ds/colors.scss" as *;
.swatch { .swatch {
--border-color: var(--color-accent-primary-muted); --border-color: var(--color-accent-primary-muted);

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

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../ds/utils" as *; @use "ds/_utils.scss" as *;
.element-options { .element-options {
display: flex; display: flex;

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

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.settings-bar-right { .settings-bar-right {

6
frontend/src/app/main/ui/inspect/styles/properties_row.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
// TOKENS ROW // TOKENS ROW

6
frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
.property-detail-copiable { .property-detail-copiable {
--detail-color: var(--color-foreground-primary); --detail-color: var(--color-foreground-primary);

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

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
.style-box { .style-box {
--title-gap: var(--sp-xs); --title-gap: var(--sp-xs);

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

@ -5,9 +5,9 @@
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../ds/spacing.scss" as *; @use "ds/spacing.scss" as *;
.dashboard-section { .dashboard-section {
display: flex; display: flex;

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

@ -4,11 +4,11 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../ds/spacing.scss"; @use "ds/spacing.scss";
@use "../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../ds/utils" as *; @use "ds/_utils.scss" as *;
@use "refactor/basic-rules.scss" as *; @use "refactor/basic-rules.scss" as *;
.colorpicker-tooltip { .colorpicker-tooltip {

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

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
.color-token-list { .color-token-list {
display: flex; display: flex;

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

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/spacing.scss" as *; @use "ds/spacing.scss" as *;
@use "../ds/z-index.scss" as *; @use "ds/z-index.scss" as *;
@use "../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;

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

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
$width-settings-bar: $sz-318; $width-settings-bar: $sz-318;

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

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.tool-window { .tool-window {
padding: 0 0 $s-24 $s-12; padding: 0 0 $s-24 $s-12;

2
frontend/src/app/main/ui/workspace/sidebar/options.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.tool-window { .tool-window {

2
frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.presets { .presets {

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

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.element-set { .element-set {

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.element-set { .element-set {

2
frontend/src/app/main/ui/workspace/sidebar/versions.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.version-toolbox { .version-toolbox {

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

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.modal-overlay { .modal-overlay {

6
frontend/src/app/main/ui/workspace/tokens/export/modal.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
.export-modal-wrapper { .export-modal-wrapper {
display: flex; display: flex;

6
frontend/src/app/main/ui/workspace/tokens/import/modal.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
.import-modal-wrapper { .import-modal-wrapper {
display: flex; display: flex;

2
frontend/src/app/main/ui/workspace/tokens/management.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
.sets-header-container { .sets-header-container {
@include use-typography("headline-small"); @include use-typography("headline-small");

2
frontend/src/app/main/ui/workspace/tokens/management/context_menu.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.token-context-menu { .token-context-menu {

6
frontend/src/app/main/ui/workspace/tokens/management/create/form.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "../../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
.form-wrapper { .form-wrapper {
width: $sz-384; width: $sz-384;

4
frontend/src/app/main/ui/workspace/tokens/management/create/input_token_color_bullet.scss
View File

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "../../../../ds/_borders.scss" as *; @use "ds/_borders.scss" as *;
.input-token-color-bullet { .input-token-color-bullet {
--bullet-size: var(--sp-l); --bullet-size: var(--sp-l);

4
frontend/src/app/main/ui/workspace/tokens/management/create/input_tokens_value.scss
View File

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;

6
frontend/src/app/main/ui/workspace/tokens/management/token_pill.scss
View File

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../../ds/borders.scss" as *; @use "ds/_borders.scss" as *;
@use "../../../ds/sizes.scss" as *; @use "ds/_sizes.scss" as *;
.token-pill { .token-pill {
@include use-typography("code-font"); @include use-typography("code-font");

2
frontend/src/app/main/ui/workspace/tokens/sets.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.sets-list { .sets-list {

2
frontend/src/app/main/ui/workspace/tokens/sets/context_menu.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as t; @use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.token-set-context-menu { .token-set-context-menu {

2
frontend/src/app/main/ui/workspace/tokens/sets/lists.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.sets-list { .sets-list {

2
frontend/src/app/main/ui/workspace/tokens/settings/menu.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/spacing.scss" as *; @use "ds/spacing.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;

4
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View File

@ -4,8 +4,8 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../ds/spacing.scss" as *; @use "ds/spacing.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.sidebar-wrapper { .sidebar-wrapper {

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

@ -4,9 +4,9 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *; @use "ds/typography.scss" as *;
@use "../../ds/_sizes" as *; @use "ds/_sizes" as *;
@use "../../ds/spacing.scss" as *; @use "ds/spacing.scss" as *;
.themes-wrapper { .themes-wrapper {
padding: var(--sp-m) 0 0 var(--sp-m); padding: var(--sp-m) 0 0 var(--sp-m);

2
frontend/src/app/main/ui/workspace/tokens/themes/create_modal.scss
View File

@ -4,7 +4,7 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "../../../ds/_sizes.scss" as *; @use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;