johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 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
71 changed files with 167 additions and 160 deletions
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:
```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.
@@ -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:
```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.
@@ -314,7 +314,7 @@ When applying typography in SCSS, use the proper mixin from the Design System.
✅ **DO: Use the DS mixin**
```scss
@use "../ds/typography.scss" as t;
@use "ds/typography.scss" as t;
.class {
@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",
"resources/styles/common/",
"resources/styles",
"src/app/main/ui/",
],
sourceMap: false,
});

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

@@ -4,8 +4,8 @@
//
// Copyright (c) KALEIDOS INC
@use "../ds/typography.scss" as t;
@use "../ds/borders" as *;
@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
.code-display {
@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
@use "../ds/typography.scss" as t;
@use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *;
.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 "./grid.scss" as g;
@use "../ds/typography.scss" as t;
@use "ds/typography.scss" as t;
.grid-empty-placeholder {
border-radius: $br-12;

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

@@ -4,13 +4,13 @@
//
// Copyright (c) KALEIDOS INC
@use "../ds/typography.scss" as t;
@use "../ds/colors.scss" as *;
@use "../ds/spacing.scss" as *;
@use "../ds/_borders.scss" as *;
@use "../ds/_sizes.scss" as *;
@use "../ds/_utils.scss" as *;
@use "../ds/z-index.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/colors.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/z-index.scss" as *;
@use "common/refactor/common-dashboard";
@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-dashboard";
@use "../ds/typography.scss" as t;
@use "../ds/_borders.scss" as *;
@use "../ds/spacing.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/spacing.scss" as *;
.cta-power-up {
display: flex;

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

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

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

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

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

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

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

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

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

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

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

@@ -4,9 +4,9 @@
//
// Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *;
@use "../_sizes.scss" as *;
@use "../typography.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
.wrapper {
--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
@use "../spacing.scss" as *;
@use "ds/spacing.scss" as *;
.input-wrapper {
display: flex;

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

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

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

@@ -4,9 +4,9 @@
//
// Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *;
@use "../_sizes.scss" as *;
@use "../typography.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
.select-wrapper {
--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
@use "../../_borders.scss" as *;
@use "../../_sizes.scss" as *;
@use "../../typography.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
.option {
--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
@use "../../_borders.scss" as *;
@use "../../_sizes.scss" as *;
@use "../../typography.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
.option-list {
--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
@use "../../_borders.scss" as *;
@use "../../_sizes.scss" as *;
@use "../../typography.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
.token-option {
--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
@use "../../typography.scss" as *;
@use "../../colors.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/colors.scss" as *;
.hint-message {
--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
@use "../../_borders.scss" as *;
@use "../../_sizes.scss" as *;
@use "../../typography.scss" as *;
@use "../../colors.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/colors.scss" as *;
.input-wrapper {
--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
@use "../../typography.scss" as *;
@use "../../colors.scss" as *;
@use "../../spacing.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/colors.scss" as *;
@use "ds/spacing.scss" as *;
.label {
--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
@use "../../_borders.scss" as *;
@use "../../_sizes.scss" as *;
@use "../../typography.scss" as t;
@use "../../colors.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/colors.scss" as *;
.token-field {
--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/.
//
// Copyright (c) KALEIDOS INC
@use "../../typography.scss" as t;
@use "ds/typography.scss" as t;
.display-typography {
@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/.
//
// Copyright (c) KALEIDOS INC
@use "../../typography.scss" as t;
@use "ds/typography.scss" as t;
.display-typography {
@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
@use "../_sizes.scss" as *;
@use "../_borders.scss" as *;
@use "../typography.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.tabs {
--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
@use "../_borders.scss" as *;
@use "../typography.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.notification {
@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
@use "../../_sizes.scss" as *;
@use "../../_borders.scss" as *;
@use "../../typography.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
.notification-pill {
@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
@use "../_sizes.scss" as *;
@use "../_borders.scss" as *;
@use "../typography.scss" as *;
@use "../spacing.scss" as *;
@use "../z-index.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/z-index.scss" as *;
.toast {
--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
@use "../_sizes.scss" as *;
@use "../_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
.avatar {
border-radius: $br-circle;

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

@@ -4,10 +4,10 @@
//
// Copyright (c) KALEIDOS INC
@use "../colors.scss" as *;
@use "../_sizes.scss" as *;
@use "../_borders.scss" as *;
@use "../typography.scss" as t;
@use "ds/colors.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
.cta {
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
@use "../_sizes.scss" as *;
@use "../_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
.empty-placeholder {
display: grid;

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

@@ -4,10 +4,10 @@
//
// Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *;
@use "../spacing.scss" as *;
@use "../_sizes.scss" as *;
@use "../typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as t;
.input-with-meta-container {
--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
@use "../_sizes.scss" as *;
@use "../_borders.scss" as *;
@use "../typography.scss" as t;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
.milestone {
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
@use "../_sizes.scss" as *;
@use "../_borders.scss" as *;
@use "../typography.scss" as t;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
.milestone {
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
@use "./utils.scss" as *;
@use "ds/_utils.scss" as *;
$_sp-2: px2rem(2);
$_sp-4: px2rem(4);

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

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

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

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

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

@@ -4,9 +4,9 @@
//
// Copyright (c) KALEIDOS INC
@use "../_borders.scss" as *;
@use "../_sizes.scss" as *;
@use "../colors.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/colors.scss" as *;
.swatch {
--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
@use "../ds/_sizes.scss" as *;
@use "../ds/utils" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
.element-options {
display: flex;

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

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

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

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

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

@@ -4,9 +4,9 @@
//
// Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *;
@use "../../ds/_sizes.scss" as *;
@use "../../ds/_borders.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
.property-detail-copiable {
--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
@use "../../ds/typography.scss" as *;
@use "ds/typography.scss" as *;
.style-box {
--title-gap: var(--sp-xs);

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

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

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

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

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

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

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

@@ -4,9 +4,9 @@
//
// Copyright (c) KALEIDOS INC
@use "../ds/spacing.scss" as *;
@use "../ds/z-index.scss" as *;
@use "../ds/_sizes.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/z-index.scss" as *;
@use "ds/_sizes.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
@use "../ds/_sizes.scss" as *;
@use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *;
$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
@use "../../../ds/typography.scss" as t;
@use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *;
.tool-window {
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
@use "../../ds/_sizes.scss" as *;
@use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *;
.tool-window {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@
//
// Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *;
@use "ds/typography.scss" as *;
.sets-header-container {
@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
@use "../../../ds/typography.scss" as *;
@use "ds/typography.scss" as *;
@use "refactor/common-refactor.scss" as *;
.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
@use "../../../../ds/typography.scss" as t;
@use "../../../../ds/_sizes.scss" as *;
@use "../../../../ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
.form-wrapper {
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
@use "../../../../ds/_sizes.scss" as *;
@use "../../../../ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
.input-token-color-bullet {
--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
@use "../../../../ds/typography.scss" as *;
@use "../../../../ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/_sizes.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
@use "../../../ds/typography.scss" as *;
@use "../../../ds/borders.scss" as *;
@use "../../../ds/sizes.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.token-pill {
@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
@use "../../ds/typography.scss" as *;
@use "ds/typography.scss" as *;
@use "refactor/common-refactor.scss" as *;
.sets-list {

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

@@ -4,7 +4,7 @@
//
// Copyright (c) KALEIDOS INC
@use "../../../ds/typography.scss" as t;
@use "ds/typography.scss" as t;
@use "refactor/common-refactor.scss" as *;
.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
@use "../../../ds/typography.scss" as *;
@use "ds/typography.scss" as *;
@use "refactor/common-refactor.scss" as *;
.sets-list {

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

@@ -4,7 +4,7 @@
//
// Copyright (c) KALEIDOS INC
@use "../../../ds/spacing.scss" as *;
@use "ds/spacing.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
@use "../../ds/typography.scss" as *;
@use "../../ds/spacing.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/spacing.scss" as *;
@use "refactor/common-refactor.scss" as *;
.sidebar-wrapper {

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

@@ -4,9 +4,9 @@
//
// Copyright (c) KALEIDOS INC
@use "../../ds/typography.scss" as *;
@use "../../ds/_sizes" as *;
@use "../../ds/spacing.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/_sizes" as *;
@use "ds/spacing.scss" as *;
.themes-wrapper {
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
@use "../../../ds/_sizes.scss" as *;
@use "ds/_sizes.scss" as *;
@use "refactor/common-refactor.scss" as *;