Skip to content

Fluent-next: extract css variables of components level #34774

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
EugeniyKiyashko wants to merge 1 commit into
base: feature/26_2_new_fluent_theme_with_design_tokens
Choose a base branch
from
Draft

Fluent-next: extract css variables of components level #34774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/devextreme-scss/.stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,11 @@
}
},
{
"comment": "A file that emits rules consumes the widget's own variables, so the token a value comes from is stated once, next to the other variables of that widget. Declaration files are exempted by the override below. `@use … with ()` arguments are at-rule parameters and stay invisible to stylelint; fluent-next-naming.test.ts covers that form.",
"comment": "A file that emits rules consumes the widget's own variables, so the token a value comes from is stated once, next to the other variables of that widget. Declaration files are exempted by the override below. `var(--dx-…)` is NOT banned as a form since wave F: the component tier is emitted (_public.scss chains) and consumed (pilot rules) through it, and name validity is enforced by fluent-next-naming.test.ts against public-surface.json — stylelint could only see the spelling, not whether the name exists. `@use … with ()` arguments are at-rule parameters and stay invisible to stylelint; the naming test covers that form too.",
"files": ["scss/widgets/fluent-next/**/*.scss"],
"rules": {
"declaration-property-value-disallowed-list": [
{ "/.*/": ["/var\\(\\s*--dxds-/", "/var\\(\\s*--dx-/", "/\\bds\\.\\$/"] },
{ "/.*/": ["/var\\(\\s*--dxds-/", "/\\bds\\.\\$/"] },
{ "message": "Use the widget's own variable here: resolve the design token in _colors.scss or _sizes.scss. A custom property compiles even when its name is wrong." }
]
}
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"check-naming-registries": "pnpm run naming:check",
"lint": "stylelint scss/widgets",
"naming:baseline": "UPDATE_NAMING_BASELINE=1 jest --no-coverage --runInBand --config=./tests/jest.config.json",
"naming:check": "node tools/naming/rename.mjs --check && node tools/naming/derive-registries.mjs --check",
"naming:check": "node tools/naming/rename.mjs --check && node tools/naming/derive-registries.mjs --check && node tools/naming/public-propose.mjs --emit --check",
"naming:propose": "node tools/naming/propose.mjs",
"naming:registries": "node tools/naming/derive-registries.mjs",
"naming:residue": "node tools/naming/rename.mjs --residue",
Expand Down
6 changes: 5 additions & 1 deletion packages/devextreme-scss/scss/widgets/base/_contextMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@ $contextmenu-menu-separator-margin: 5px 0 !default;
}

.dx-menu-items-container {
padding: $contextmenu-menu-items-container-padding;

// fluent-next passes null: its own rule paints this box, the base copy would be dead weight
@if $contextmenu-menu-items-container-padding {
padding: $contextmenu-menu-items-container-padding;
}
}

.dx-menu-item .dx-submenu {
Expand Down
6 changes: 5 additions & 1 deletion packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,11 @@ $fileuploader-input-wrapper-vertical-padding: 1em !default; // dx-relative
display: flex;
align-items: center;
width: 100%;
padding: $fileuploader-file-container-padding;

// fluent-next passes null: its own rule paints this box, the base copy would be dead weight
@if $fileuploader-file-container-padding {
padding: $fileuploader-file-container-padding;
}

.dx-button {
width: $fileuploader-button-width;
Expand Down
8 changes: 6 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,8 +224,12 @@
$icon-line-height: $container-size - $icon-paddings-dirty;
} @else {

// Token-based themes pass var()/calc() values — the derivation moves to CSS
$icon-padding: calc((#{$container-size} - #{$icon-size} - #{$borders-size}) / 2);
// Token-based themes pass var()/calc() values — the derivation moves to CSS. With the defaults ($container-size is $icon-size, no borders) it is identically zero, so print 0 instead of shipping calc((X - X - 0) / 2) to the browser.
$icon-padding: if(
$container-size == $icon-size and $borders-size == 0,
0,
calc((#{$container-size} - #{$icon-size} - #{$borders-size}) / 2)
);
$icon-line-height: $icon-size;
}

Expand Down
15 changes: 13 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,12 @@ $pagination-info-paddings: 9px;
.dx-page {
display: inline-block;
cursor: pointer;
padding: $pagination-page-padding-fallback;

// fluent-next passes null: its own rule paints this box, the base copy would be dead weight
@if $pagination-page-padding-fallback {
padding: $pagination-page-padding-fallback;
}

margin-left: $pagination-page-margin-left;
margin-right: $pagination-page-margin-right;
}
Expand All @@ -66,7 +71,12 @@ $pagination-info-paddings: 9px;
}

.dx-navigate-button {
width: $pagination-navigate-button-width-fallback;

// fluent-next passes null: its own rule paints this box, the base copy would be dead weight
@if $pagination-navigate-button-width-fallback {
width: $pagination-navigate-button-width-fallback;
}

height: $pagination-navigate-button-height;
cursor: pointer;
display: inline-block;
Expand Down Expand Up @@ -95,6 +105,7 @@ $pagination-info-paddings: 9px;
margin-left: $pagination-first-child-margin-left;
}


display: inline-block;
cursor: pointer;
padding-left: $pagination-first-child-padding-left;
Expand Down
7 changes: 6 additions & 1 deletion packages/devextreme-scss/scss/widgets/base/_popup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@ $popup-dialog-message-padding: 10px 10px 5px 10px !default;

.dx-popup-title {
padding: $popup-title-padding;
min-height: $popup-title-min-height-fallback;

// fluent-next passes null: its own rule paints this box, the base copy would be dead weight
@if $popup-title-min-height-fallback {
min-height: $popup-title-min-height-fallback;
}

-webkit-user-drag: none;

@include user-select(none);
Expand Down
6 changes: 5 additions & 1 deletion packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,11 @@ $checkbox-text-padding-inline-start: 5px !default;
white-space: pre-wrap;
word-wrap: break-word;
line-height: normal;
padding-inline-start: $checkbox-text-padding-inline-start;

// fluent-next passes null: its own rule paints this box, the base copy would be dead weight
@if $checkbox-text-padding-inline-start {
padding-inline-start: $checkbox-text-padding-inline-start;
}
}

.dx-state-disabled {
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@

.dx-switch-wrapper {
position: relative;
padding-top: $switch-padding,;
padding-bottom: $switch-padding,;
padding-top: $switch-padding;
padding-bottom: $switch-padding;
padding-inline-start: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding - $switch-container-horizontal-padding, calc(#{$switch-padding} - #{$switch-container-horizontal-padding}));
padding-inline-end: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding + $switch-container-horizontal-padding, calc(#{$switch-padding} + #{$switch-container-horizontal-padding}));
inset-inline-start: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding}));
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme-scss/scss/widgets/fluent-next/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,4 @@
@use "./sortable";
@use "./map";
@use "./cardView";
@use "./public-tier";
Loading
Loading