From 5c53d6bc768cd1768d3aefbfdb2370efbe639199 Mon Sep 17 00:00:00 2001 From: Ruslan Farkhutdinov Date: Wed, 8 Jul 2026 16:27:20 +0300 Subject: [PATCH 01/27] Revert "CI: Replace push triggers with merge_group in workflow files" (#34234) Co-authored-by: Ruslan Farkhutdinov --- .github/workflows/build_all.yml | 20 +++++++++++++++++++- .github/workflows/default_workflow.yml | 4 +++- .github/workflows/demos_unit_tests.yml | 3 ++- .github/workflows/lint.yml | 3 ++- .github/workflows/paths.yml | 3 ++- .github/workflows/playgrounds_tests.yml | 3 ++- .github/workflows/qunit_tests.yml | 3 ++- .github/workflows/renovation.yml | 3 ++- .github/workflows/styles.yml | 3 ++- .github/workflows/testcafe_tests.yml | 3 ++- .github/workflows/themebuilder_tests.yml | 3 ++- .github/workflows/ts_declarations.yml | 3 ++- .github/workflows/visual-tests-demos.yml | 3 ++- .github/workflows/wrapper_tests.yml | 3 ++- .github/workflows/wrapper_tests_e2e.yml | 3 +-- 15 files changed, 47 insertions(+), 16 deletions(-) diff --git a/.github/workflows/build_all.yml b/.github/workflows/build_all.yml index cb0636c7e4a0..9462ff78201a 100644 --- a/.github/workflows/build_all.yml +++ b/.github/workflows/build_all.yml @@ -4,7 +4,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: concurrency: @@ -104,6 +105,23 @@ jobs: artifacts/npm/*.tgz retention-days: 1 + - name: Build SBOMs + if: ${{ github.event_name == 'push' || github.event.inputs.SBOM == 'true' }} + env: + NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: | + pnpm set //npm.pkg.github.com/:_authToken="$NODE_AUTH_TOKEN"; + pnpm nx build sbom; + + - name: Upload SBOM artifacts + if: ${{ github.event_name == 'push' || github.event.inputs.SBOM == 'true' }} + uses: actions/upload-artifact@v7 + with: + name: sbom + path: | + packages/sbom/dist/**/* + retention-days: 1 + custom_bundles: runs-on: devextreme-shr2 needs: build diff --git a/.github/workflows/default_workflow.yml b/.github/workflows/default_workflow.yml index c49d07553117..8040bf5b5d0f 100644 --- a/.github/workflows/default_workflow.yml +++ b/.github/workflows/default_workflow.yml @@ -8,7 +8,9 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: + - "[0-9][0-9]_[0-9]" env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/demos_unit_tests.yml b/.github/workflows/demos_unit_tests.yml index 23ab6ba80137..dda5274d4211 100644 --- a/.github/workflows/demos_unit_tests.yml +++ b/.github/workflows/demos_unit_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index c3895595a4de..08cb04b97a07 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/paths.yml b/.github/workflows/paths.yml index b655ddc25446..9a02d0604c17 100644 --- a/.github/workflows/paths.yml +++ b/.github/workflows/paths.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: MAX_LENGTH: 170 diff --git a/.github/workflows/playgrounds_tests.yml b/.github/workflows/playgrounds_tests.yml index f66b6730e5e4..086997e5e2dd 100644 --- a/.github/workflows/playgrounds_tests.yml +++ b/.github/workflows/playgrounds_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/qunit_tests.yml b/.github/workflows/qunit_tests.yml index b395cde08da0..898fe5ba4d26 100644 --- a/.github/workflows/qunit_tests.yml +++ b/.github/workflows/qunit_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/renovation.yml b/.github/workflows/renovation.yml index c96e4d586876..dbba59d418eb 100644 --- a/.github/workflows/renovation.yml +++ b/.github/workflows/renovation.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml index 6b2ba4f2ab11..6974a602e60c 100644 --- a/.github/workflows/styles.yml +++ b/.github/workflows/styles.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml index 95b504511f13..d969f34a49b4 100644 --- a/.github/workflows/testcafe_tests.yml +++ b/.github/workflows/testcafe_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/themebuilder_tests.yml b/.github/workflows/themebuilder_tests.yml index 5257f4d50e9b..5330a5bfe7ed 100644 --- a/.github/workflows/themebuilder_tests.yml +++ b/.github/workflows/themebuilder_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/ts_declarations.yml b/.github/workflows/ts_declarations.yml index d713ba22d514..608dfba36626 100644 --- a/.github/workflows/ts_declarations.yml +++ b/.github/workflows/ts_declarations.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] jobs: check-ts-bundle: diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml index 7955fa36d347..a451f1ad243a 100644 --- a/.github/workflows/visual-tests-demos.yml +++ b/.github/workflows/visual-tests-demos.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml index 5f6e0dc92d6d..bade72fd6e42 100644 --- a/.github/workflows/wrapper_tests.yml +++ b/.github/workflows/wrapper_tests.yml @@ -4,7 +4,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] concurrency: group: wf-${{github.event.pull_request.number || github.ref || github.sha}}-${{github.workflow}} diff --git a/.github/workflows/wrapper_tests_e2e.yml b/.github/workflows/wrapper_tests_e2e.yml index 188c2d384177..8c6f04198e36 100644 --- a/.github/workflows/wrapper_tests_e2e.yml +++ b/.github/workflows/wrapper_tests_e2e.yml @@ -9,8 +9,7 @@ on: paths-ignore: - 'apps/**/*.md' push: - branches: [24_2, 25_*] - merge_group: + branches: [24_2, 25_*, 26_*] workflow_dispatch: env: From a3fa57b5f7ef2ddafccf8f8e408e3a5b21e197bf Mon Sep 17 00:00:00 2001 From: Aleksei Semikozov Date: Fri, 10 Jul 2026 14:20:44 -0300 Subject: [PATCH 02/27] Scheduler/PivotGrid: align @default tags with option types in public d.ts (#34198) --- .../src/ui/pivot-grid-field-chooser/index.ts | 6 +- .../src/ui/pivot-grid/index.ts | 6 +- .../src/ui/pivot-grid/nested/state-storing.ts | 4 +- .../src/pivot-grid-field-chooser.ts | 2 +- packages/devextreme-react/src/pivot-grid.ts | 10 +- packages/devextreme-react/src/scheduler.ts | 18 +-- .../field_chooser/m_field_chooser.ts | 2 +- .../field_chooser/m_field_chooser_base.ts | 2 +- .../__internal/grids/pivot_grid/m_widget.ts | 10 +- packages/devextreme/js/ui/pivot_grid.d.ts | 20 ++-- .../js/ui/pivot_grid/data_source.d.ts | 24 +--- .../js/ui/pivot_grid_field_chooser.d.ts | 8 +- packages/devextreme/js/ui/scheduler.d.ts | 76 ++++++------ .../fieldChooser.tests.js | 2 +- packages/devextreme/ts/dx.all.d.ts | 113 ++++++++++-------- 15 files changed, 147 insertions(+), 156 deletions(-) diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts index a79dc8acc058..f9ee9e4275ef 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts @@ -282,10 +282,10 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD */ @Input() - get state(): any { + get state(): any | undefined { return this._getOption('state'); } - set state(value: any) { + set state(value: any | undefined) { this._setOption('state', value); } @@ -498,7 +498,7 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() stateChange: EventEmitter; + @Output() stateChange: EventEmitter; /** diff --git a/packages/devextreme-angular/src/ui/pivot-grid/index.ts b/packages/devextreme-angular/src/ui/pivot-grid/index.ts index 79febda6a5fb..3ae22922c3b9 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid/index.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid/index.ts @@ -426,10 +426,10 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh */ @Input() - get stateStoring(): { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType } { + get stateStoring(): { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType } { return this._getOption('stateStoring'); } - set stateStoring(value: { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType }) { + set stateStoring(value: { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType }) { this._setOption('stateStoring', value); } @@ -749,7 +749,7 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() stateStoringChange: EventEmitter<{ customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType }>; + @Output() stateStoringChange: EventEmitter<{ customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType }>; /** diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts index 52dceee0db61..1e7e91aed8ac 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts @@ -64,10 +64,10 @@ export class DxoPivotGridStateStoringComponent extends NestedOption implements O } @Input() - get storageKey(): string { + get storageKey(): string | undefined { return this._getOption('storageKey'); } - set storageKey(value: string) { + set storageKey(value: string | undefined) { this._setOption('storageKey', value); } diff --git a/packages/devextreme-react/src/pivot-grid-field-chooser.ts b/packages/devextreme-react/src/pivot-grid-field-chooser.ts index 10addf0198ce..7ec1a436e21b 100644 --- a/packages/devextreme-react/src/pivot-grid-field-chooser.ts +++ b/packages/devextreme-react/src/pivot-grid-field-chooser.ts @@ -18,7 +18,7 @@ type ReplaceFieldTypes = { type IPivotGridFieldChooserOptionsNarrowedEvents = { onContentReady?: ((e: ContentReadyEvent) => void); - onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; onDisposing?: ((e: DisposingEvent) => void); onInitialized?: ((e: InitializedEvent) => void); } diff --git a/packages/devextreme-react/src/pivot-grid.ts b/packages/devextreme-react/src/pivot-grid.ts index ff90ffbd7abb..b66e15851b7c 100644 --- a/packages/devextreme-react/src/pivot-grid.ts +++ b/packages/devextreme-react/src/pivot-grid.ts @@ -17,12 +17,12 @@ type ReplaceFieldTypes = { } type IPivotGridOptionsNarrowedEvents = { - onCellClick?: ((e: CellClickEvent) => void); - onCellPrepared?: ((e: CellPreparedEvent) => void); + onCellClick?: ((e: CellClickEvent) => void) | undefined; + onCellPrepared?: ((e: CellPreparedEvent) => void) | undefined; onContentReady?: ((e: ContentReadyEvent) => void); - onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; onDisposing?: ((e: DisposingEvent) => void); - onExporting?: ((e: ExportingEvent) => void); + onExporting?: ((e: ExportingEvent) => void) | undefined; onInitialized?: ((e: InitializedEvent) => void); } @@ -358,7 +358,7 @@ type IStateStoringProps = React.PropsWithChildren<{ customSave?: ((state: any) => void); enabled?: boolean; savingTimeout?: number; - storageKey?: string; + storageKey?: string | undefined; type?: StateStoreType; }> const _componentStateStoring = (props: IStateStoringProps) => { diff --git a/packages/devextreme-react/src/scheduler.ts b/packages/devextreme-react/src/scheduler.ts index 978ea1be3715..6b2c9a7ad88e 100644 --- a/packages/devextreme-react/src/scheduler.ts +++ b/packages/devextreme-react/src/scheduler.ts @@ -33,18 +33,18 @@ type ReplaceFieldTypes = { } type ISchedulerOptionsNarrowedEvents = { - onAppointmentAdded?: ((e: AppointmentAddedEvent) => void); - onAppointmentAdding?: ((e: AppointmentAddingEvent) => void); + onAppointmentAdded?: ((e: AppointmentAddedEvent) => void) | undefined; + onAppointmentAdding?: ((e: AppointmentAddingEvent) => void) | undefined; onAppointmentClick?: ((e: AppointmentClickEvent) => void); onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void); onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void); - onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void); - onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void); - onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void); - onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void); - onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void); - onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void); - onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void); + onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void) | undefined; + onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void) | undefined; + onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void) | undefined; + onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void) | undefined; + onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void) | undefined; + onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void) | undefined; + onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void) | undefined; onCellClick?: ((e: CellClickEvent) => void); onCellContextMenu?: ((e: CellContextMenuEvent) => void); onContentReady?: ((e: ContentReadyEvent) => void); diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts index b9278b15106f..4144a191d29a 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts @@ -97,7 +97,7 @@ export class FieldChooser extends FieldChooserBase { layout: 0, dataSource: null, encodeHtml: true, - onContextMenuPreparing: null, + onContextMenuPreparing: undefined, allowSearch: false, searchTimeout: 500, texts: { diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts index d901fff7e551..85897bb20c14 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts @@ -124,7 +124,7 @@ export class FieldChooserBase extends mixinWidget { ...{ allowFieldDragging: true, applyChangesMode: 'instantly', - state: null, + state: undefined, headerFilter: { width: 252, height: 325, diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts index f122d1881117..1f0416414458 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts @@ -211,7 +211,7 @@ class PivotGrid extends Widget { height: 600, applyChangesMode: 'instantly', }, - onContextMenuPreparing: null, + onContextMenuPreparing: undefined, allowSorting: false, allowSortingBySummary: false, allowFiltering: false, @@ -268,13 +268,13 @@ class PivotGrid extends Widget { exportToExcel: localizationMessage.format('dxDataGrid-exportToExcel'), dataNotAvailable: localizationMessage.format('dxPivotGrid-dataNotAvailable'), }, - onCellClick: null, - onCellPrepared: null, + onCellClick: undefined, + onCellPrepared: undefined, showBorders: false, stateStoring: { enabled: false, - storageKey: null, + storageKey: undefined, type: 'localStorage', customLoad: null, customSave: null, @@ -283,7 +283,7 @@ class PivotGrid extends Widget { onExpandValueChanging: null, renderCellCountLimit: 20000, - onExporting: null, + onExporting: undefined, headerFilter: { width: 252, height: 325, diff --git a/packages/devextreme/js/ui/pivot_grid.d.ts b/packages/devextreme/js/ui/pivot_grid.d.ts index 15f4c7a7e798..0f4530d96ae1 100644 --- a/packages/devextreme/js/ui/pivot_grid.d.ts +++ b/packages/devextreme/js/ui/pivot_grid.d.ts @@ -516,35 +516,35 @@ export interface dxPivotGridOptions extends WidgetOptions { /** * @docid * @type_function_param1 e:{ui/pivot_grid:CellClickEvent} - * @default null + * @default undefined * @action * @public */ - onCellClick?: ((e: CellClickEvent) => void); + onCellClick?: ((e: CellClickEvent) => void) | undefined; /** * @docid * @type_function_param1 e:{ui/pivot_grid:CellPreparedEvent} - * @default null + * @default undefined * @action * @public */ - onCellPrepared?: ((e: CellPreparedEvent) => void); + onCellPrepared?: ((e: CellPreparedEvent) => void) | undefined; /** * @docid * @type_function_param1 e:{ui/pivot_grid:ContextMenuPreparingEvent} - * @default null + * @default undefined * @action * @public */ - onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; /** * @docid * @type_function_param1 e:{ui/pivot_grid:ExportingEvent} - * @default null + * @default undefined * @action * @public */ - onExporting?: ((e: ExportingEvent) => void); + onExporting?: ((e: ExportingEvent) => void) | undefined; /** * @docid * @default "standard" @@ -631,9 +631,9 @@ export interface dxPivotGridOptions extends WidgetOptions { savingTimeout?: number; /** * @docid - * @default null + * @default undefined */ - storageKey?: string; + storageKey?: string | undefined; /** * @docid * @default "localStorage" diff --git a/packages/devextreme/js/ui/pivot_grid/data_source.d.ts b/packages/devextreme/js/ui/pivot_grid/data_source.d.ts index f6cb506ead28..d336a9d855c1 100644 --- a/packages/devextreme/js/ui/pivot_grid/data_source.d.ts +++ b/packages/devextreme/js/ui/pivot_grid/data_source.d.ts @@ -173,7 +173,7 @@ export interface PivotGridDataSourceOptions { * @default undefined * @public */ - fields?: Array; + fields?: Array | undefined; /** * @docid * @type Filter expression @@ -293,7 +293,6 @@ export interface PivotGridDataSourceField { area?: PivotGridArea | undefined; /** * @docid PivotGridDataSourceOptions.fields.areaIndex - * @default undefined * @public */ areaIndex?: number; @@ -304,13 +303,11 @@ export interface PivotGridDataSourceField { calculateCustomSummary?: ((options: { summaryProcess?: string; value?: any; totalValue?: any }) => void); /** * @docid PivotGridDataSourceOptions.fields.calculateSummaryValue - * @default undefined * @public */ calculateSummaryValue?: ((e: dxPivotGridSummaryCell) => number | null); /** * @docid PivotGridDataSourceOptions.fields.caption - * @default undefined * @public */ caption?: string; @@ -321,19 +318,16 @@ export interface PivotGridDataSourceField { customizeText?: ((cellInfo: { value?: string | number | Date; valueText?: string }) => string); /** * @docid PivotGridDataSourceOptions.fields.dataField - * @default undefined * @public */ dataField?: string; /** * @docid PivotGridDataSourceOptions.fields.dataType - * @default undefined * @public */ dataType?: PivotGridDataType; /** * @docid PivotGridDataSourceOptions.fields.displayFolder - * @default undefined * @public */ displayFolder?: string; @@ -351,7 +345,6 @@ export interface PivotGridDataSourceField { filterType?: FilterType; /** * @docid PivotGridDataSourceOptions.fields.filterValues - * @default undefined * @public */ filterValues?: Array; @@ -363,19 +356,16 @@ export interface PivotGridDataSourceField { format?: Format; /** * @docid PivotGridDataSourceOptions.fields.groupIndex - * @default undefined * @public */ groupIndex?: number; /** * @docid PivotGridDataSourceOptions.fields.groupInterval - * @default undefined * @public */ groupInterval?: PivotGridGroupInterval | number; /** * @docid PivotGridDataSourceOptions.fields.groupName - * @default undefined * @public */ groupName?: string; @@ -399,26 +389,22 @@ export interface PivotGridDataSourceField { }; /** * @docid PivotGridDataSourceOptions.fields.isMeasure - * @default undefined * @public */ isMeasure?: boolean; /** * @docid PivotGridDataSourceOptions.fields.name - * @default undefined * @public */ name?: string; /** * @docid PivotGridDataSourceOptions.fields.runningTotal - * @default undefined * @public */ runningTotal?: PivotGridRunningTotalMode; /** * @docid PivotGridDataSourceOptions.fields.selector * @type function(data) - * @default undefined * @public */ selector?: Function; @@ -436,25 +422,21 @@ export interface PivotGridDataSourceField { showTotals?: boolean; /** * @docid PivotGridDataSourceOptions.fields.showValues - * @default undefined * @public */ showValues?: boolean; /** * @docid PivotGridDataSourceOptions.fields.sortBy - * @default undefined * @public */ sortBy?: PivotGridSortBy; /** * @docid PivotGridDataSourceOptions.fields.sortBySummaryField - * @default undefined * @public */ sortBySummaryField?: string; /** * @docid PivotGridDataSourceOptions.fields.sortBySummaryPath - * @default undefined * @public */ sortBySummaryPath?: Array; @@ -466,13 +448,11 @@ export interface PivotGridDataSourceField { sortOrder?: SortOrder; /** * @docid PivotGridDataSourceOptions.fields.sortingMethod - * @default undefined * @public */ sortingMethod?: ((a: { value?: string | number; children?: Array }, b: { value?: string | number; children?: Array }) => number); /** * @docid PivotGridDataSourceOptions.fields.summaryDisplayMode - * @default undefined * @public */ summaryDisplayMode?: PivotGridSummaryDisplayMode; @@ -490,13 +470,11 @@ export interface PivotGridDataSourceField { visible?: boolean; /** * @docid PivotGridDataSourceOptions.fields.width - * @default undefined * @public */ width?: number; /** * @docid PivotGridDataSourceOptions.fields.wordWrapEnabled - * @default undefined * @public */ wordWrapEnabled?: boolean; diff --git a/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts b/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts index b102bf191fb3..8dec03205fdf 100644 --- a/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts +++ b/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts @@ -193,12 +193,12 @@ export interface dxPivotGridFieldChooserOptions extends WidgetOptions void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; /** * @docid * @default 500 @@ -207,10 +207,10 @@ export interface dxPivotGridFieldChooserOptions extends WidgetOptions { customizeDateNavigatorText?: ((info: DateNavigatorTextInfo) => string) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default null @@ -607,11 +607,11 @@ export interface dxSchedulerOptions extends WidgetOptions { dataSource?: DataSourceLike | null; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default undefined @@ -754,113 +754,113 @@ export interface dxSchedulerOptions extends WidgetOptions { noDataText?: string; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentAddedEvent} * @action * @public */ - onAppointmentAdded?: ((e: AppointmentAddedEvent) => void); + onAppointmentAdded?: ((e: AppointmentAddedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentAddingEvent} * @action * @public */ - onAppointmentAdding?: ((e: AppointmentAddingEvent) => void); + onAppointmentAdding?: ((e: AppointmentAddingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:AppointmentClickEvent} * @action * @public */ - onAppointmentClick?: ((e: AppointmentClickEvent) => void) | string; + onAppointmentClick?: ((e: AppointmentClickEvent) => void) | string | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:AppointmentContextMenuEvent} * @action * @public */ - onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void) | string; + onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void) | string | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:AppointmentDblClickEvent} * @action * @public */ - onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void) | string; + onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void) | string | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentDeletedEvent} * @action * @public */ - onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void); + onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentDeletingEvent} * @action * @public */ - onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void); + onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentTooltipShowingEvent} * @action * @public */ - onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void); + onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentFormOpeningEvent} * @action * @public */ - onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void); + onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentRenderedEvent} * @action * @public */ - onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void); + onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentUpdatedEvent} * @action * @public */ - onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void); + onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentUpdatingEvent} * @action * @public */ - onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void); + onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:CellClickEvent} * @action * @public */ - onCellClick?: ((e: CellClickEvent) => void) | string; + onCellClick?: ((e: CellClickEvent) => void) | string | undefined; /** * @docid * @default undefined @@ -871,13 +871,13 @@ export interface dxSchedulerOptions extends WidgetOptions { onSelectionEnd?: ((e: SelectionEndEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:CellContextMenuEvent} * @action * @public */ - onCellContextMenu?: ((e: CellContextMenuEvent) => void) | string; + onCellContextMenu?: ((e: CellContextMenuEvent) => void) | string | undefined; /** * @docid * @default "dialog" @@ -904,11 +904,11 @@ export interface dxSchedulerOptions extends WidgetOptions { remoteFiltering?: boolean; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default [] @@ -1019,11 +1019,11 @@ export interface dxSchedulerOptions extends WidgetOptions { textExpr?: string; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default "" @@ -1094,13 +1094,11 @@ export interface dxSchedulerOptions extends WidgetOptions { cellDuration?: number; /** * @docid - * @default null * @type_function_param1 itemData:object */ dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); /** * @docid - * @default null * @type_function_param1 itemData:object */ dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); @@ -1150,7 +1148,6 @@ export interface dxSchedulerOptions extends WidgetOptions { name?: string | undefined; /** * @docid - * @default null * @type_function_param1 itemData:object */ resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); @@ -1166,7 +1163,6 @@ export interface dxSchedulerOptions extends WidgetOptions { startDayHour?: number; /** * @docid - * @default null * @type_function_param1 itemData:object */ timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js index f3b54ed0e922..d400f8525f96 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js @@ -2473,7 +2473,7 @@ QUnit.module('applyChangesMode: onDemand', { // assert assert.strictEqual(isCanceled, false, 'cancelChanges return false'); - assert.strictEqual(this.fieldChooser.option('state'), null, 'state is empty'); + assert.strictEqual(this.fieldChooser.option('state'), undefined, 'state is empty'); }); QUnit.test('cancel changes on field chooser repaint', function(assert) { diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 93083b2ebac1..5915004ab072 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -8082,7 +8082,7 @@ declare module DevExpress.data { /** * [descr:PivotGridDataSourceOptions.fields] */ - fields?: Array; + fields?: Array | undefined; /** * [descr:PivotGridDataSourceOptions.filter] */ @@ -24773,9 +24773,11 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridFieldChooserOptions.onContextMenuPreparing] */ - onContextMenuPreparing?: ( - e: DevExpress.ui.dxPivotGridFieldChooser.ContextMenuPreparingEvent - ) => void; + onContextMenuPreparing?: + | (( + e: DevExpress.ui.dxPivotGridFieldChooser.ContextMenuPreparingEvent + ) => void) + | undefined; /** * [descr:dxPivotGridFieldChooserOptions.searchTimeout] */ @@ -24783,7 +24785,7 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridFieldChooserOptions.state] */ - state?: any; + state?: any | undefined; /** * [descr:dxPivotGridFieldChooserOptions.texts] */ @@ -25069,21 +25071,27 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridOptions.onCellClick] */ - onCellClick?: (e: DevExpress.ui.dxPivotGrid.CellClickEvent) => void; + onCellClick?: + | ((e: DevExpress.ui.dxPivotGrid.CellClickEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.onCellPrepared] */ - onCellPrepared?: (e: DevExpress.ui.dxPivotGrid.CellPreparedEvent) => void; + onCellPrepared?: + | ((e: DevExpress.ui.dxPivotGrid.CellPreparedEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.onContextMenuPreparing] */ - onContextMenuPreparing?: ( - e: DevExpress.ui.dxPivotGrid.ContextMenuPreparingEvent - ) => void; + onContextMenuPreparing?: + | ((e: DevExpress.ui.dxPivotGrid.ContextMenuPreparingEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.onExporting] */ - onExporting?: (e: DevExpress.ui.dxPivotGrid.ExportingEvent) => void; + onExporting?: + | ((e: DevExpress.ui.dxPivotGrid.ExportingEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.rowHeaderLayout] */ @@ -25148,7 +25156,7 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridOptions.stateStoring.storageKey] */ - storageKey?: string; + storageKey?: string | undefined; /** * [descr:dxPivotGridOptions.stateStoring.type] */ @@ -26903,7 +26911,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.dataSource] */ @@ -26917,7 +26926,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.dateSerializationFormat] */ @@ -27022,82 +27032,86 @@ declare module DevExpress.ui { /** * [descr:dxSchedulerOptions.onAppointmentAdded] */ - onAppointmentAdded?: ( - e: DevExpress.ui.dxScheduler.AppointmentAddedEvent - ) => void; + onAppointmentAdded?: + | ((e: DevExpress.ui.dxScheduler.AppointmentAddedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentAdding] */ - onAppointmentAdding?: ( - e: DevExpress.ui.dxScheduler.AppointmentAddingEvent - ) => void; + onAppointmentAdding?: + | ((e: DevExpress.ui.dxScheduler.AppointmentAddingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentClick] */ onAppointmentClick?: | ((e: DevExpress.ui.dxScheduler.AppointmentClickEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentContextMenu] */ onAppointmentContextMenu?: | ((e: DevExpress.ui.dxScheduler.AppointmentContextMenuEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentDblClick] */ onAppointmentDblClick?: | ((e: DevExpress.ui.dxScheduler.AppointmentDblClickEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentDeleted] */ - onAppointmentDeleted?: ( - e: DevExpress.ui.dxScheduler.AppointmentDeletedEvent - ) => void; + onAppointmentDeleted?: + | ((e: DevExpress.ui.dxScheduler.AppointmentDeletedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentDeleting] */ - onAppointmentDeleting?: ( - e: DevExpress.ui.dxScheduler.AppointmentDeletingEvent - ) => void; + onAppointmentDeleting?: + | ((e: DevExpress.ui.dxScheduler.AppointmentDeletingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentTooltipShowing] */ - onAppointmentTooltipShowing?: ( - e: DevExpress.ui.dxScheduler.AppointmentTooltipShowingEvent - ) => void; + onAppointmentTooltipShowing?: + | ((e: DevExpress.ui.dxScheduler.AppointmentTooltipShowingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentFormOpening] */ - onAppointmentFormOpening?: ( - e: DevExpress.ui.dxScheduler.AppointmentFormOpeningEvent - ) => void; + onAppointmentFormOpening?: + | ((e: DevExpress.ui.dxScheduler.AppointmentFormOpeningEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentRendered] */ - onAppointmentRendered?: ( - e: DevExpress.ui.dxScheduler.AppointmentRenderedEvent - ) => void; + onAppointmentRendered?: + | ((e: DevExpress.ui.dxScheduler.AppointmentRenderedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentUpdated] */ - onAppointmentUpdated?: ( - e: DevExpress.ui.dxScheduler.AppointmentUpdatedEvent - ) => void; + onAppointmentUpdated?: + | ((e: DevExpress.ui.dxScheduler.AppointmentUpdatedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentUpdating] */ - onAppointmentUpdating?: ( - e: DevExpress.ui.dxScheduler.AppointmentUpdatingEvent - ) => void; + onAppointmentUpdating?: + | ((e: DevExpress.ui.dxScheduler.AppointmentUpdatingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onCellClick] */ onCellClick?: | ((e: DevExpress.ui.dxScheduler.CellClickEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onSelectionEnd] */ @@ -27109,7 +27123,8 @@ declare module DevExpress.ui { */ onCellContextMenu?: | ((e: DevExpress.ui.dxScheduler.CellContextMenuEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.recurrenceEditMode] */ @@ -27135,7 +27150,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.resources] */ @@ -27222,7 +27238,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.timeZone] */ From eebf947496e82e873a4c8fcf9ef3ba4822f3e04c Mon Sep 17 00:00:00 2001 From: Andrei Sergeev Date: Mon, 13 Jul 2026 13:13:09 +0400 Subject: [PATCH 03/27] Add DataGrid - Semantic Search Demo (#34098) Co-authored-by: markallenramirez --- .../Angular/app/app.component.html | 34 ++++++ .../Angular/app/app.component.ts | 77 +++++++++++++ .../SemanticSearch/Angular/index.html | 26 +++++ .../DataGrid/SemanticSearch/React/App.tsx | 84 +++++++++++++++ .../DataGrid/SemanticSearch/React/index.html | 23 ++++ .../DataGrid/SemanticSearch/React/index.tsx | 9 ++ .../DataGrid/SemanticSearch/ReactJs/App.js | 101 ++++++++++++++++++ .../SemanticSearch/ReactJs/index.html | 39 +++++++ .../DataGrid/SemanticSearch/ReactJs/index.js | 5 + .../Demos/DataGrid/SemanticSearch/Vue/App.vue | 99 +++++++++++++++++ .../DataGrid/SemanticSearch/Vue/index.html | 29 +++++ .../DataGrid/SemanticSearch/Vue/index.ts | 4 + .../DataGrid/SemanticSearch/jQuery/index.html | 19 ++++ .../DataGrid/SemanticSearch/jQuery/index.js | 88 +++++++++++++++ apps/demos/menuMeta.json | 51 +++++++++ ...rid-SemanticSearch (fluent.blue.light).png | Bin 0 -> 64920 bytes ...d-SemanticSearch (material.blue.light).png | Bin 0 -> 58714 bytes apps/demos/utils/server/csp-server.js | 3 + 18 files changed, 691 insertions(+) create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.html create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.ts create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/Angular/index.html create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/React/index.html create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/React/index.tsx create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.html create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.js create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/Vue/App.vue create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.html create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.ts create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.html create mode 100644 apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.js create mode 100644 apps/demos/testing/etalons/DataGrid-SemanticSearch (fluent.blue.light).png create mode 100644 apps/demos/testing/etalons/DataGrid-SemanticSearch (material.blue.light).png diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.html new file mode 100644 index 000000000000..e6096d1bdcc6 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.html @@ -0,0 +1,34 @@ + + + + + +
+
+ Similarity Factor: + +
+
+ + + + + + + diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.ts new file mode 100644 index 000000000000..af8b03f0710f --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.ts @@ -0,0 +1,77 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; +import { DxDataGridModule, type DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; +import { DxNumberBoxModule, type DxNumberBoxTypes } from 'devextreme-angular/ui/number-box'; +import { DataSource } from 'devextreme-angular/common/data'; +import * as AspNetData from 'devextreme-aspnet-data-nojquery'; + +if (!/localhost/.test(document.location.host)) { + enableProdMode(); +} + +let modulePrefix = ''; +// @ts-ignore +if (window && window.config?.packageConfigPaths) { + modulePrefix = '/app'; +} + +const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch'; + +@Component({ + selector: 'demo-app', + templateUrl: `.${modulePrefix}/app.component.html`, + imports: [ + DxDataGridModule, + DxNumberBoxModule, + ], +}) +export class AppComponent { + searchValue = ''; + + similarityFactor = 0.31; + + dataSource: DataSource; + + constructor() { + this.dataSource = new DataSource({ + store: AspNetData.createStore({ + key: 'ID', + loadUrl: `${url}/Get`, + loadParams: { + searchValue: () => this.searchValue, + similarityFactor: () => this.similarityFactor, + }, + onBeforeSend: (method, ajaxOptions) => { + ajaxOptions.xhrFields = { withCredentials: true }; + }, + }), + }); + } + + onSimilarityFactorChanged(e: DxNumberBoxTypes.ValueChangedEvent): void { + this.similarityFactor = e.value; + if (this.searchValue !== '') { + this.dataSource.reload(); + } + } + + onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent): void { + if (e.parentType === 'searchPanel') { + let searchTimeout: ReturnType | undefined; + e.editorOptions.onValueChanged = (args: { value: string }) => { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { + this.searchValue = args.value; + this.dataSource.reload(); + }, e.updateValueTimeout); + }; + e.editorOptions.placeholder = 'Try: clothing'; + } + } +} + +bootstrapApplication(AppComponent, { + providers: [ + provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), + ], +}); diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Angular/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/index.html new file mode 100644 index 000000000000..1ab1fb54a1df --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/index.html @@ -0,0 +1,26 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + + +
+ Loading... +
+ + diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx b/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx new file mode 100644 index 000000000000..21ab47f66901 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx @@ -0,0 +1,84 @@ +import React, { useCallback, useRef, useMemo } from 'react'; +import DataGrid, { Column, Scrolling, SearchPanel, Toolbar, Item, type DataGridTypes } from 'devextreme-react/data-grid'; +import NumberBox, { type NumberBoxTypes } from 'devextreme-react/number-box'; +import { DataSource } from 'devextreme-react/common/data'; +import { createStore } from 'devextreme-aspnet-data-nojquery'; + +const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch'; +const numberBoxAttr = { 'aria-label': 'Similarity Factor' }; + +const App = () => { + const searchValueRef = useRef(''); + const similarityFactorRef = useRef(0.31); + + const dataSource = useMemo(() => new DataSource({ + store: createStore({ + key: 'ID', + loadUrl: `${url}/Get`, + loadParams: { + searchValue: () => searchValueRef.current, + similarityFactor: () => similarityFactorRef.current, + }, + onBeforeSend(method, ajaxOptions) { + ajaxOptions.xhrFields = { withCredentials: true }; + }, + }), + }), []); + + const onSimilarityFactorChanged = useCallback(({ value }: NumberBoxTypes.ValueChangedEvent) => { + similarityFactorRef.current = value; + if (searchValueRef.current !== '') { + dataSource.reload(); + } + }, [dataSource]); + + const onEditorPreparing = useCallback((e: DataGridTypes.EditorPreparingEvent) => { + if (e.parentType === 'searchPanel') { + let searchTimeout: ReturnType | undefined; + e.editorOptions.onValueChanged = (args: { value: string }) => { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { + searchValueRef.current = args.value; + e.component.getDataSource().reload(); + }, e.updateValueTimeout); + }; + e.editorOptions.placeholder = 'Try: clothing'; + } + }, []); + + return ( + + + + + +
+ Similarity Factor: + +
+ + + + + + + + ); +}; + +export default App; diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.html new file mode 100644 index 000000000000..cfb9b3aa6769 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.html @@ -0,0 +1,23 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/index.tsx b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.tsx new file mode 100644 index 000000000000..8acbec4b6179 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js new file mode 100644 index 000000000000..80e0bc6e4f21 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js @@ -0,0 +1,101 @@ +import React, { useCallback, useRef, useMemo } from 'react'; +import DataGrid, { + Column, + Scrolling, + SearchPanel, + Toolbar, + Item, +} from 'devextreme-react/data-grid'; +import NumberBox from 'devextreme-react/number-box'; +import { DataSource } from 'devextreme-react/common/data'; +import { createStore } from 'devextreme-aspnet-data-nojquery'; + +const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch'; +const numberBoxAttr = { 'aria-label': 'Similarity Factor' }; +const App = () => { + const searchValueRef = useRef(''); + const similarityFactorRef = useRef(0.31); + const dataSource = useMemo( + () => + new DataSource({ + store: createStore({ + key: 'ID', + loadUrl: `${url}/Get`, + loadParams: { + searchValue: () => searchValueRef.current, + similarityFactor: () => similarityFactorRef.current, + }, + onBeforeSend(method, ajaxOptions) { + ajaxOptions.xhrFields = { withCredentials: true }; + }, + }), + }), + [], + ); + const onSimilarityFactorChanged = useCallback( + ({ value }) => { + similarityFactorRef.current = value; + if (searchValueRef.current !== '') { + dataSource.reload(); + } + }, + [dataSource], + ); + const onEditorPreparing = useCallback((e) => { + if (e.parentType === 'searchPanel') { + let searchTimeout; + e.editorOptions.onValueChanged = (args) => { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { + searchValueRef.current = args.value; + e.component.getDataSource().reload(); + }, e.updateValueTimeout); + }; + e.editorOptions.placeholder = 'Try: clothing'; + } + }, []); + return ( + + + + + +
+ Similarity Factor: + +
+ + + + + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.js b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Vue/App.vue b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/App.vue new file mode 100644 index 000000000000..795b3932ebbe --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/App.vue @@ -0,0 +1,99 @@ + + diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.html new file mode 100644 index 000000000000..b21c5e373a7a --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.html @@ -0,0 +1,29 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.ts b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.ts new file mode 100644 index 000000000000..684d04215d72 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.ts @@ -0,0 +1,4 @@ +import { createApp } from 'vue'; +import App from './App.vue'; + +createApp(App).mount('#app'); diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.html new file mode 100644 index 000000000000..5aa7314c6053 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.html @@ -0,0 +1,19 @@ + + + + DevExtreme Demo + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.js b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.js new file mode 100644 index 000000000000..6b3e8c43a585 --- /dev/null +++ b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.js @@ -0,0 +1,88 @@ +$(() => { + const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch'; + + let searchValue = ''; + let similarityFactor = 0.31; + + const dataGrid = $('#gridContainer').dxDataGrid({ + dataSource: DevExpress.data.AspNet.createStore({ + key: 'ID', + loadUrl: `${url}/Get`, + loadParams: { + searchValue: () => searchValue, + similarityFactor: () => similarityFactor, + }, + onBeforeSend(method, ajaxOptions) { + ajaxOptions.xhrFields = { withCredentials: true }; + }, + }), + showBorders: true, + remoteOperations: true, + height: 600, + columns: [{ + dataField: 'ID', + width: 50, + }, { + dataField: 'Name', + }, { + dataField: 'Description', + }], + scrolling: { + mode: 'virtual', + }, + searchPanel: { + visible: true, + }, + toolbar: { + items: [ + { + location: 'before', + template() { + const container = $('
') + .css('display', 'flex') + .css('align-items', 'center'); + + const label = $('') + .text('Similarity Factor:') + .css('margin-right', '8px'); + + const editor = $('
') + .dxNumberBox({ + value: similarityFactor, + min: 0, + max: 1, + format: '0.00', + step: 0.05, + showSpinButtons: true, + inputAttr: { 'aria-label': 'Similarity Factor' }, + onValueChanged(e) { + similarityFactor = e.value; + if (searchValue !== '') { + dataGrid.getDataSource().reload(); + } + }, + }); + + return container.append(label, editor); + }, + }, + { + name: 'searchPanel', + }, + ], + }, + onEditorPreparing(e) { + if (e.parentType === 'searchPanel') { + let searchTimeout; + e.editorOptions.onValueChanged = (args) => { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { + searchValue = args.value; + e.component.getDataSource().reload(); + }, e.updateValueTimeout); + }; + e.editorOptions.placeholder = 'Try: clothing'; + } + }, + }).dxDataGrid('instance'); +}); diff --git a/apps/demos/menuMeta.json b/apps/demos/menuMeta.json index 615934456789..f761c41660c8 100644 --- a/apps/demos/menuMeta.json +++ b/apps/demos/menuMeta.json @@ -37,6 +37,35 @@ "Modules": "openai" } ] + }, + { + "Name": "Semantic Search", + "Equivalents": "", + "Demos": [ + { + "Title": "Semantic Search", + "Name": "SemanticSearch", + "Widget": "DataGrid", + "Badge": "AI", + "DemoType": "Web", + "Modules": "devextreme-aspnet-data-nojquery", + "MvcAdditionalFiles": [ + "/DataProviders/SmartFilterProvider.cs", + "/Controllers/ApiControllers/DataGridSemanticSearchController.cs", + "/Services/EmbeddingsInitializerService.cs", + "/Models/DataGrid/DictionaryItem.cs", + "/Models/SampleData/DictionaryItems.cs" + ], + "BackendFiles": [ + "SmartFilterProvider.cs", + "DataGridSemanticSearchController.cs", + "EmbeddingsInitializerService.cs", + "DictionaryItem.cs" + ], + "TopLevel": true, + "Equivalents": "AI-Powered Search, Smart Search, Context-Aware Search, Natural Language Search, AI Search, Semantic Retrieval, Similarity Search" + } + ] } ] }, @@ -312,6 +341,28 @@ "/Models/SampleData/DataGridEmployees.cs" ], "DemoType": "Web" + }, + { + "Title": "Semantic Search", + "Name": "SemanticSearch", + "Widget": "DataGrid", + "Badge": "AI", + "DemoType": "Web", + "Modules": "devextreme-aspnet-data-nojquery", + "MvcAdditionalFiles": [ + "/DataProviders/SmartFilterProvider.cs", + "/Controllers/ApiControllers/DataGridSemanticSearchController.cs", + "/Services/EmbeddingsInitializerService.cs", + "/Models/DataGrid/DictionaryItem.cs", + "/Models/SampleData/DictionaryItems.cs" + ], + "BackendFiles": [ + "SmartFilterProvider.cs", + "DataGridSemanticSearchController.cs", + "EmbeddingsInitializerService.cs", + "DictionaryItem.cs" + ], + "Equivalents": "AI-Powered Search, Smart Search, Context-Aware Search, Natural Language Search, AI Search, Semantic Retrieval, Similarity Search" } ] }, diff --git a/apps/demos/testing/etalons/DataGrid-SemanticSearch (fluent.blue.light).png b/apps/demos/testing/etalons/DataGrid-SemanticSearch (fluent.blue.light).png new file mode 100644 index 0000000000000000000000000000000000000000..826709c5a1e163e3acb637174dd36c4358c4bf68 GIT binary patch literal 64920 zcmdSBbx@p7(=HqWfe_pmcXxLP!975N1osf!7k4Mv;u=ANyX#`h;v~4c+u{)NE%`m~ z`<+wgdH+0B&zY*-+P&|onV#;RzWcg*cB9^^$z!}CdG+ksGYmxq8O>+U5O?7(s+Y*{ zD^&mm@n_EhpDD^ny#pc~c4ImH3=6vcBj_{dYk1^edV4hORU;}VxX71$uj`PS}2Q+uED>y@I=m`wYeP!V*( zG~+h0-mT_A&J+6kPSy5K6>v-a5#i72zz@^ZH*MYes|qYrvfU&;dD6ZWr%id4Gl}|J=yO zk&E{0JGO^K`reUYq6iBM`>vrGuhu|0q~Qyy*%=FX2dWf11YoJ1TWSg$`zP@D8nx_39rB2NTLS&dSn^V`*`i|TZ5~C*pe|#$1&Xo)} zh~T<9-y@}@9H?QdXxV3hU%`w(OjI9&Pv3WQBh>ll_et~l5UX>uLAEmHdGl3~)!ojJtDZhw8srTTAIF36wzMOv||b)sfJFLpui>_E`B{Vg_U zi5~Nu&cLnu;hU%4=fYeznA?1&Y>z-7VnLZXq)ZGEMT+#Q+CjSIn*`{nD7 zF=MFGsngN($3{Q20Am*dVFMx2TYTk5Qvwvn2cIDh_4EJjX7)wyeUtqhno4JRa4>5E zUVndo6Wl;JiSbbV*(;)SjWhS?^X%+xy2{f|t#f*mfQ^n!PNV*aJ22&A;KGp{T-6eO z=H})GURx>ID|979c_z@Ya6qROVWS+)!|z3KLV~Z)_!$C125*0_ zVFh#@dAM>28@yzNEEiE&4jdEBUVjKj^^}mMFBrb>Z(r2d26G`UPE14WDJYSN22OvI zmx?-ewT&WaKJd5I9v8txnnt0h0wrI?$u35|(wI1LANFD%mlzHNsGUkQ3zjjo_~9Ug z#1As?*F}VM2){!@m)WfCk1G0zOga4Y{-o47LI2{kygzsDR%{;>Em~qcn=3j}iFG)? zuFe z`C_62)0m+YUp zD4U!|{aH>b)6c7Mn8{1Lzph*|NOSh!pYFv-FlFeA?Rr-}oaYspCz-dJx+j=4@FG)e zD8^87lZbZU#>Bzl!=2$VdQ1AJey#gC$J=z`VKAgw7-m)DbmnHD17C6)_*R!W+_<)R zFAK~0&%-lhM&OQXfCj4Ik$9x(bM4@WgMH%M#?MDFVu$zs>{u4t)q^meR^wTDm!5%a zg3@ODLuQJl_V^HDkluB}**LjW?4}l5`GS;&wctv7Tx~(b?Ow~sq5qntQLQ-s$Q?3k zM{6WcUQmv2bb)eSkB&3>y+>!@eb&NFq9boTR#u(;Ju(U@VbvMc={Y<4Qd8i!mEWSv z5iPeGVQHX4I?>eWv!CuqZULS6plcV9u^V1N0RttI_^|qnz11}uCoJ>m>&Iz9-Loax z?Rz4{RDTjski z%p%Tw_kl$3*Y3bIP`r=9TKRgaAwLXQ9CSJMZe1B;d~UiYi7>=kga&w|aW^9{*)Y~? zzReT<^f(&Cw<-_<{oY@$sFv1tofp2NnsuO?`vEw)&<{6 zaWZBg3~i$bLDt3X;@VDGHFFGQIvu$loXC~4(m)SZjQZatdnoQC+(!;>eyQqb3`8i_ zS}!3!u(_hxFCF2}al&>p`T5GZqdb;_1_t{8$~?ZO496?eP*n*$qg8y`!NwL5Vck~b zjvc-03ur#;_UennpU^|Uk&!Z=7_Mero2xRPz&y+2FXgQ{H20PihPB~^ z{0tMLqNj8Bvx{}%L=~-hN55-V!y>#)MqKQ!1v*xKLAvMpo&Iq6^9`U)OHep`09T%$ z6x3b|RMZ+%=} z{M3@j{-3h;ciTmk_%xKAXE#+E?6H5?Zslga>|=PV3q7~s3|Vqc(nhK@H4oLPaV>}l zvP9c^3Y0PyETlUC4i%8AON)vDnbiY;s5@$}l@QdZdVZ%ND2xgU-jfPuU{vjRq>+4F zQ%>hSS7>*Mg!a@9deQe25eZa(42LL!Dq#=Xm`3O9-<+?6BppvoeXo@EJ5wV-*Xeaa z7rt2HK3M1dd9H(bdfg9Rja*Bcb|AtCqxq33pKDi(LqMA0`>xpNu;D)+C`xiM?ELpS z1Ixv#0vKZc=)7RmtE{;ni02kNH+FhY-8kF{n&UlRz1*2=yQP0c$j{Tc%G6G7NS0|N z)lFLIvRm8-@EVR?RJ4$zQ0r2womvaRsXq3};Bjdl5*fNJIvSI+4PZ+S`s=k`B0*9Ja?;yEj8$qe>Vt zBvxnatVsh)fFDKa8&L9Qo^4m{#)&_Cf=MJzlixfe4e4r=9Y*!`($B=&*eJXeOl-9h z^#P7(b^n%SAR1HdlU`u17Qbmj=8BN@JY3Vsx=yS+?)p7Hb*M^EUF=6e zFM)UrjPw{ovk*f*u_X7+6fZfrv05NcMn*Tmy!Lm+`qN^C#aXm{=9z7>$-6`9%5+AY z{Z1s$G37j}dJ0v}PIB!FQHU0LK;#!s(kKfOQ9CoI%r(xUhPckEDd!d+Eub>#%k=EG z3SRlxhd58JAX6w-6a^KIvqbRnErvM9I2$y%+yI4xAc8kX2Q#?MC#@=;@vf)W+};sb z&UL$T=h<9d7gUuL{23I@glSMSE7=zY2R#rURhNrj4jzZ(*4sIsf9{ZP-R9=OW-%E* zUlwEwKqhp2X3q{atcD#e6g4m_u}%tot}(q~Bzi(85)P8{-OFtsv^mh%GgZz+283z? zBz5Eo;Q>$0|NbCv3g*W7;zbP8x?LLg=$Z}|Pi;qTN(Y%yKy^%9kxzzERV4ADwdWYD z&HqU3QO5$g;-`^!u0(GW%!-3w*x(shr@ztPpuh2uFN(;&PfOIJ%HeiQcc&wYKwtEB z+C6*Z8F-_66Q6d5YQ|~9gETwYHX&vtbVPWr#MHm#Oykl0hMxy7d%gKHsv0-C;4Ot9 zQI8K;%&IwS?)RH$Vc6fXQPtTkftY!E24vzu`Z0d9Tc_p|q zF=G{f%wFZ0c?qpblb^wkfKVTuE_VcIGTV~PJrvb5@BnUY9zO)JLwaE=7~HhLQy{to z`;~4cx64@z#$%6@If;OI>PSTOI;n1x6RTpE&fJi?cIt-glL0q*`!DHV!TRU!_f0!I zj@%4<6Pz)zI)`q45!|RqAP5^6e&|Nei^2nao7@vyfbm51TfNOhk;gjTDQ=DQk{}W? zTm(XY`F??XKcswQ7v?3@;08xT#Seayz41Tjg%C5u*96>P3wMiV8193S&N~FMCUshY zTY{aIzIVTTv9B-YhVSR=(*y4dseG;}*DtFTqg{Y`rO`vom(4)^+>;OIapX@|UzO?H z9sv;uYL%M>#!$T)onWV2w2rSa(^APe!q@0^t0PZz*w*j&s5^`sv-6IC8D3ahupo3b z=+=6Egl?lR23Yoba#}oo@=Mxq?tQUeIxoP)$+V4rIAiOp%@`V;BiC%!#oOv{FGH|Q zf$8plq5cjajd)}QBo^Sn|6)nTXr-^E|TV4DeJLZ6YUOBNwaF_ve^Y^x=i+Y zL+Z-{*j~2<1b#F|QzkLpN&WB&<4M0V64ENcf<)Dx15<}N&XkFJ9LrFV3pVu=PiI&X zak}sGY>q_-A~iK`GzT+pH9>IH_hGiMko%P`^4L{ZXNQ4)pgH<54IWXE5G*)(+qp-m z5*BA}-o}k=r9r{5yf#EDIR=T59{}XFWnM$O{Vsns0V7~MCP|X&&xPCMF*&B_B0PmS z5gBe_n{)$lajwHD^0`n5vqJ?(QzmqIHECm2>~NF9|E3Fks5+P3NBU(`1h1cs;pS#8 zBZQ9e`S9&DdGd>PfNp*`mYM1)P6qx+hOGZ5EOqhvh!LTnjbzW z+1M}_6ci-is2mPUCE+1#`yOBp1skEWX@XIz8H6B5P)1KSh%IrJ78|aQ$LY_vud;ZF zn_zxT14(VE)m}5YEQ-ijvJN43T#H7FDhU*|w`e}-PywebWXhpaJQm~EOIQu3y7Cxu zzC_Zr0)Np*9)HCi&T$zRvA-Q+JjUV9rL!7wKu&L$xtkk?i-m8jU|bwGgb}>A$p`zO zWZeYZ*b2#C7V3Tc?lqjf2Zjt-CP5TyEO3SUy1f7tSY(Uch|rlT^Am|An;18j^dd?l z@HP=!Mb`V!2=zcyvsq$H2Hx3Ox@(D{xEXZx{;GbvQBESnEENXn`I;((+FgNdpwWi$ z;}%s%v>p<=1PQpeikD2qs;XM?*e{v9k{A$c`gty07FKfF-XAy8I+vzYeX%ES8Kt^ylqZ&TA~nCyMNp;Ci})gPh}%XpZTWJ zv_-T78co2ed-hsXoYqSwbNaMhvw9i+V>R04ck$lHd(Sd1a|Z7r2?QH* zhS3Y^%E$4HGK1vt+HM}WN}Sc85U_Qy`zF&yoB0Eie4N_)5EQ(%iMLKSz_&IFFdtwL zw#@!6ALkOQtd6;3p6U{CFKKS)AH5`LFa(zGPanK|`;I3@)c@xQIe`>9Yxls&%Lnq6 z>}x(~7VWSd@>m&xo5Te+y=|th*0nl-lvRk)5vTDzu-LdUaBw+dci9^SfwrscR<_AF zM7Y)$;L9hsdUCVfR;0H~W@^O?v?~7s`x?QdH`SZj640~z$bH=)8QQ*WnyOviJ=z)N z#VXR=*#lj0C_R1K>41>fjy2JKiAk~lfP+0Z#%yL9H~M@ z+f%O^9EP`2Zu-sa7RCpPJ5#Gx{&FyzwGhSS3r&`yG))LflQ;FHusRGlwjtK;#0?8! z$fHYhWZ;G67M&E3z1n8qR8~{V@XgUNn#Y>z?Efr5WbM4o{r%#@mBeqhPJjCNS9yJ` ztv&#<&WyV(;gO7iiwucezbife-%1p&H=8Y)fv=s) z$|e5z$g;I@A5lh>DF5KHv^klpGbBTRo7*{CSuV33>*tyDfl`&F`+Sg&O|8d5LRDorm?N+#86+hs;aKkWf?U`oG&uOVgxd61Bae%R zR9hkr8lELMP(8nkF?2iRZ?1L5;Z;$~6uYA_B=>3do=_rG^K_o4tCZ}_xUzOlpV1wg zsqk<~x_lL1f6XP~Lw{)u1w(vPK9G5LMC7)kcx{Xc`|jOUayvfS1$zxBJoq9mnKw>0 zH6@F&VYb(06(b9_WL!uxZTHl@dGJ8 z<4~%Z@bJHupD9Hm669I9#LW`ylsXu|}iw0+>QbD#IkMN_aJPP&KRn zY-0c?v1AR-$*E)sV8Dfk#Mw+0IzQYv!`ZrlcuH$Hj|XS#ZVg;Ta@uaUvmyt7o^EG3 zuDgjmE%eaoUsruImwjQX*=meCpb*~*LpYmACgcYq-(G*kg?q6vqoib>D`f5Y z-~IMC)u5pqSp!E1Q~tlixeGt7$6#O1vl@8yDZGteY`Qkrg_Fq9jVQ*t(rQp2Y%YGl zd<|coi-ybKbD#XIK39E!KN>nA^-2Hurfg5Q;bV9ZVf zml#5jkH;j;1ORF**t5@uMoWNvyuE>37Eijeu9a`m6Kf1xLsfJ2d5HuqvHkds;joWN zd6d~FyvQ5qZxi!v2($JCsI^K943SPtLIOS5#v6#Gv#KD1|Vr=T$jbW`kEoh=fE zqotjL3b2n38LUuB96l9Lr(5Xji!O1a1>{G$kHGsO*oH2v+Pld`D8y~8Gnaf@>(>4x z%>Y+X9`pY!K^FzNg_b_)L^mC=7!vg0qeD6EAwMw7-GnG>zHyRBIf>ghIkdFI_7j!n z$I}M4wycJF!;2GT?lsi6dbQbwcQ3;V`&O^FYc>^QY6_9tej8qpVq82>r8RUKk0dmP z4|q@G#j=}UMI*!xG3>`mG+Z(c0uWdZ^li$ql63jA=qJz}5AH`t(6t>lGpw>w=Sqps zr%!dqyocINiZ)~xW+s1i#{bmia4=3dZ%N^s2|F|6zG-h}^P2qTvPAd;&(KZIJip!a zQ(TZ-3E; zF+`f#%xJ;;u=%NDNZXO(I8 z`$a`d7QsRURa^3Q;mZySO7nRDN5*eGDtTpiQfkypK( z7ML<1r4k<>UAJ5iGC}zMyN*q7RS*9k>GJ;fPN(xOaF{DHxukTp|Fg_r$ z*cM+nYkoPWEUCmaJEzc&#qi|Jr*DZ*)>E>ye97A$-_g*==O7x0ksgi^%RM`-VBOQT zBM4B&tgbHr>5{-*wRe*%h1fqh%xE@^CS~}Ue_{9=LcX6oZ5EiZ(rpD3lc%+A7c@my`TJn}- z$(?FNG4iJoAo`(yo?gp~1PunZmPKb~z6_Hic%PzNjV|dwMKdk>+U&X5FY?2~;-0Ly z>aUiF+@i8W&k;jF!K_|~XK-w6;zmTt^cH$I?fs@umMh0(Z5m11Pf@#~^1I0V$m=00 z-Kp1pDMWG`+05hzg`B82pMYi7;#)=vSQTb#Nlf4g30(fmHYl5;m9;#Qqj$o4v@~p0 zdWC%Zp>}vh#AR>L^apf{F2tY^*Rwco>z7~I?n3W$HVgp8E;{EbwF@f(TQab?3h6*7n<3BN=55|pdhBGd5N zOtl?uUli%~3KvwhA$4{OHzP`kF)*eBgC!Q}swQpNg0r(er;yMi0^g({wP#!0y}5Du zo-YTAonPI-H|7e2pcck|K~d1lAF%6!qX!OhVHHb{ObZ^2rZXg!LVU3LuSsvEyM;&( zkBzG{qVMhOY__Cb9L*8#+#P&EefY6VSrDZJM7FKS+17CGX^d+RQ0Zlk~fYb`^d(XABH}2?e>mI7=bR*mq*x z0PNVG*vwdX7eOQPX$Pq5&=+>3o?I$IWDNLD<|YZY0Qlp|*JCdBqG5_(4B;62mno%D z9wnB^0z;5fx|5Jhmw8}fjHy#_m}M)fpxbFLr~gQ2`?+$a@=`(+p0XO4^7J`gJ}xtx zTGhH6duz@DQKco1K%szj&0!kJcXpg!HX%E zYXcFCE;W#X)ic2Y3{{y24>gB3u_xB>k83_WXRv5``Q5LstcLm00uasc zjM6d@o593eg{sfQnv}FmWFMT}r|*yDPTyX4ve5tIJ)va>Dz2Y~Ca~D(gK{;hGu+43 zpr%S0R3MdvHS!M4W1CNwmigErB@m{vZ(lt`rS-VhsnO`lz+S=&$TXdeNe`e=Z z+`k4%k(0+uFNAa4<@qL|x}d%jsO@k^@CVa?!(1Z{in+hliDw{rChVi=>k$ih=@&QT z?)#DMDqrA`Gkq5ro{KfxZx9Qb=t#BytzP5DMx_2F)+aN|Ch`UW4W4N8{yk|iDopkd z5QVElhJ#@5QEuD62&>hFcFZnnRUYmnm9GDwEMcO5mkh$|;qakqfu$lh*MExOh4w^s z5d8gb`wu&^!4ZMx1YgS2I^k^-1OmT+1IEAf1pK>1CO87iRpLK1WB;EIzxXcCqU^T( zE*(A+2^_hfqg`6O{54nhSw9=(9*E)EIdrrjS9NPK``_2w#&$Uf1Kb5xV)WqY$xVah zaL1Wrv$G!OcNGk{@gH~o*yT%(42+3%g*O{-UD?ylJ~{Fh7eRr!TluGaaSDqi-uT+C zv1Bvy*}m|Ga`ax11w$7(Q^AkIxPtok_?d9WAN0yc(W!P)#BcSc9dna8J>TPbNa1s2 z?nY0y$Xct+_fkf+>e{rQR*($Ipn7jAiA=;yZobd}$PG81)Y6HKg3p+`$2;o95Tg4xn&Go1aPg98eKwn?7FI)Nv?HEQneob7jTF&?GmK!**i*0*yhY62+ zH$%m?_61)Tv1pgrI($gG*~P^GJl)Y#OAV>2?e|Zat!%eHx%JwfNwVu+pl`TvO%u znH8<6w*OS{btoQwKIz{n zRtPlm@ejj%%U$G=a!_TclO;Qpl<=(`4GqthaJpIB*O%}67?8E%Qx2_xKl9rv!p%Un zUf`dVe-P@a@yYM9VBWRKaUF zG0|z^hj9Vlarc2Eig<)k9TE&QV z3LAw&gw{$^3pJq)eh8_Ok7S(U3sO0r>8S)+k$Tx9=-8NVcv5@TkysVkHu|g?74z-8 z7;+R$Zikqgqdl8Y|Clfy42dBP{uFi+&0(n@&kiwpe3s@78ws zXy2+uWzeKn0kcwK6M1|AwA`A6jQNVaJV0scM^47s5`bUSGpOey>DVRTD(T{D<%?$m z0<=q?*%tVenwleaa_{L6Y`-|Zr(Hs^>$3VEG^IDmEwXT5MSI}2E%_K?{3oBnxGg93 z7!e-CRQxbEgXgrv>u{*ZxP%#bhlg^;PG^T$UbP#&D%~&U6jbcP%SS-0;(qz_Cl2$~ zI{#Bmivv|VxZ@+Pu{*!i6rC<%cUm;As%~4nAlz6~+}MmG3vy9dz1%&&LWecNz46k2 zVf>VjKD&=8`C(hgkxnz8*0qhVeyf@JN&2QeELnc&bb*#`O2AriAQE#vG;JD>`ASRI zXy7hRd%wp4eUyvjJ16oMlvEe{e1n~>sKSQX)Hd+r;<_EfSEpy9IMzRrS&7Ym>L|L8 z)1)dO+N@XOTQP-lrn%NQ32XuC(|7fw=4`%-6hid1O3?JOe9q}^J z?BUVu$9`rBT4CfBeU)%X4ukz1zyZr>s#o8jFQoIv(_h0lHVDr7rG*%9A#ycg3+(9% z9_fEaXW&tBQgR>;FaYVAuUn~R;CG@bg#a(B{n(#+Scvjn*lh37p3Qw z^|)ShS&ow{CtM6v`{KM|U?k2CSu4!9d4lQYrxe=g=z{dBqF&!R03p{^m`<5#PQN!E zd<-)YtEKL~>FZ5TzA3JcV6P8@qb3!5_)aE%8@aMj;Sp`(es%(@~sTOx22Ps z*O&D(3^nUSoo0%XAt8llq{_1&V|Tx(Lc~eE>~_>Vju#=LIig;68{)~c+$|{bUX+fJ z``EoG$i(|G=E>SP=g-3<-eCPjR<&@jniXRP6bDu-eAaDaC12@lFyx-hwn~@qm4hSF z&m*mDlizLZBm#-4$U=KfBtw`f3#9OPvHRh8xKnae_e<;-2;;!%+ud*#ny^06GW@9I z&wDU)Gm}k{+1c4_vjv+;LZac*h?gx|=$BXtd~cB286HiZ;r_nBv^ot_J|)S{TKhVV zSR(T(W~$7M1d5D~6-J>zuc@1DRWPM1aAKNBp=wTQ6b&V+sxfEOKR!#^C1;Cs(B(%w>k@e3br&n6OB zU5_qwX+`b6Lda%;f&2iT%h0>^v2#QVs;D+g+1WC-V#e~292DBW7o9)?WOq}36S2cS z_*5h+5N)YXwrkYaLw|%`c>ByKxIlsjQDeOsA-E91DlmZ&()IS0x=`rMsvkOH*)Y>y zU09!S_o)^ks@Y}Z)GwbvH}BByV+ZSs`GwU&uE%WYcd7t!R1?o>!yr zvb8hk%FubTK~-eBuO>`+H(Ea%A~HS#|ERkl89jokodoRZIlbqCKiUi1$O@A+JlJzb z_P?So*WVokKtH)K>tEYa7_Txev~5Y6?2NvdpBFf@xc`)kBo?GOWGf16D9nC?$8}JQ z#!>j2vg3_tbMj(s*k!rtJn4+fwHYXvauZHTxhPi417=gY*iNVpcf{L5ZCSWUeTV@i z1y!@FD$8%_r9_qTys*lpKw9Xp;A3VBOnWT%jg)rdu@$x0&|;Y4*>MD?{n*CjvA4A` zzHx^iEv?Da7N|fspGOfIQO|d0wEOtgZ*In>Rvf7(g>9uNiG`DLko46?HS%C`#93DM zDm{Qp0Yl1tFa}{Z8=_t;5?gJ?-`I~bJF5qgw|=WT)4fqQG1-uCM0|=gRI*T$+foHt zcx9VuqgFTWacwtmcNz+1!qPQy4QfMDLY$od1UWqe;k6;WIp#z3NUs{(eE9crgBl5@ zJx+z}%Z}P&vUEZib=BOb3dED^lcD<+i;6vcVLYVXN)1i;KUGYp15)qkiw|O^G zjQvbFg~hI{m8XVD^%&{3a9O^x_!DiC`LeZm3&;A*M#^o6Kzq-2$ z2L97AGP@N4o>V=x%|#42S^l@}I6V7jTpVG~|NBF3zKJgGgdta|oJ?$Sri+`xD2>)e zM)24=#~M6=_bGx+3$ehjyP;cx#%q)f^SX~trhXZ=mA~~LkLzhJv2WFIE+II4^ z+7-?+qKr19KC6>6Ab$juGwrNjcd;oJx&!Pf)}f zr@>E)PE4uMfxhm%mVt10XE?J4Yv~Qcb$Q#OR-IyIdWqO?CjRMwUP*Aw$umu%)!>WK5#fE&b}nYN+-`NO7IAx z3(F9zKj0@3SDxoLVCuINGBlC+G+umxN}Frray`UX{vdz_Q$)w+Kj9Hx`d0Nj!I$S- z^?OtMBDGp`XH5k2TRkh71P5F*k^v2dMe}^I?4#>tL?sj+5P~E?N5qj!m9}Z^^s3?* zZfmybC)30?tHE%i9UYM6*9ghK{}3hX0Y95Sl7+9F#n*!Qc!M9diIDOsxZp?>DUROG zPUDB2hT|o5Dvfx(f-vPONe6>ix_J#gcWrBTsP#?g(J{ApbDY+)CBON{<9AK14P&53 zV(BQ2bC{(SFGcv6TYS^~mFkZH@yK{hrnC%IpYi3j`4o0d($>W@^2p4?cgHmie?mJH zxl)ZSoCQ7)z>mpXr7D-r#O>u^;!r|(jE$($+-^vGdbT(9%jyCd9nW0svr$?tam(3R zQrP!%Bzkd?=7?2*)Iyhzu&+&!??=3*p)?= z>{Re#>FS#l*Zp3j_x&s%b{Qmu`|A*le*J#wsDtK9@B7b8@?){l`-+sL`mx#r>LkuiX~^ zUT}74aNNf_$t)oIO)ZMjuX77a+BuxR#p%? z47jxCLw=YC?A{FB3f{3j!)zJ(2sD|Z1jiLeu>64jw`R!?z8Q0|5!H-#9eyD1w^YC8 zcABOb>AG+JUPiFH4%{*e%drY2isgl~j4;v}#Bf@V~LMWbu=zdt-O1aHU#Xc?6rHBpSCV8_+Q*I+#XPMtif< ztkanpsAy#Mo1$%ut+obkg?-y5Oc~+$uH0I7hpADkRPfG%w;G!Bv^O_*MkXbGOuF=^ zWBBg&mK;+~QmFGBo<2|YsFx|RN;mWymMc^DYgZ`HrS51|>R-!<9CeN;IpC z0ci%Yc=gcF(jWSZ4n^xc3p0#rV>yp&_N7Z3-V_K$kOs(5qh`z2ed5k+Fpl z_Dza(ALAkz6S%z1FmL8p^72f1_a{NgCQg{*-04#SXV_s{h1Ond&5cvk#oLH^@36^o z{zdq1#5Cpss~q_Udif-Msv0@&;mWpiws$}~x1=EQ{pg^ zF^69P)e%DKoZDVnrn}xKJ$z*7a=QlN*W1*|rLR0Dbh)lt#H->7vEZ{d zaxHUsKF_Vb*cYu!r8wOcRJ3yi*-p_5gcu(8W|dX`th%MAkW?{k!4OcUR}y8W*g^@C zQ2&8~REl+D|0+|TUa8u9|6J(ISB zX`A6O63#sMgfr2(TpID3| zX;}(O-8UiOT-1ZbcB4(9`mTNy^WJ-R0agMBZL>oT%dWs90h>FRotPTvrj#(nmfy}l zY5+?s-63Q|Gip*TT3!nbknx{`KN!N?r>9AKUy)jff%}}4Y`55rjMmUXqS&^sU4Y0{ zZ3!4YGK7oiF$Y3Td(0G%9_{Gm+qL(ZqMl$^fqh0yuu|=S!*SeDVrhbJEn*a|Ci&vYa?=#7Bqjt%D?$Vzp zquC@OpIYgCB?P z6!TLV=34f6BE-f=I9$;z0WtI9f@Jk#g$IB@kt~KL8XUr%WlF} z9vcmnHikHQO$5_Q2%HlzbXu~D1fWaJ{g$A%{yf7s_fvh3DKFj8vBm*Iy0@Tu0^jSn zIZ}R1<$E&E0pbl}JVsCch!f(jbF=X7O@PjnBDx8#1haLFk!Y|k=mT1CpB|4Q(cs(k z*{|L+=Q+dJ-M^S!z#OYQxs;ZrO=HfU*_;2Tl$UFKu~mu@O*^Zryww-!sJYelnBbRL zZjnBim=bu(@foYc3s$!OR>6VP5~+-$ho`8VDLwTV-d|rVB^2#zwLO3;h6q8m+KCrtd2i#!izH^gzFDz-Dvr1$Vrs!H&22Eyjc(lpQzw?$ zY*sdSI{~36SRlxZlBK}+CF6*eTAve5hM~rO-t{0MJDw?CWLp!{rP(-r0K88WE2qcTxu>+Wq$2XY+N2v*Vxy5s<-9)K>GqSc_p1(52bDU~~`(0Q}-sM*p z1>WJrYSmBd5nm2B<}r_q@-m^Hj`AWIzBnk+5deD8wxt|7ubiOvALL&g~dr9RSv0>%Jo>9#jg|Nl6tO#3)% zxWMoobO)BO9ll$&e)?l!-_c$%vis2Ek{6^CKgz2bw00CvlE(}i2vw4*OPsHiUE9v& zUR$w2b>|sRK|=lJcAv6;Pm(#d;Uo}4c~Y-XAL!zarj9T7$c)!cR(5Q|vpH~30Z0Qe zrZ>Z1z*N?{U2@_y2G7S%v%6IbPO}+IqPz`z9=RKh12PtT-$xr++$K9mHHWKv*%ZFw z-&S%wm*bZf5R|)f36wlE!%kE-cx`H)vDZvK+COBs0$C&GzzzYms9>X;2U6vjnu!f8 zL2S!THWk&+%;MBdH>A%^v*dm!%xfnqF^)cfBUElNpR!bA>d*VsIsSP=mBxiVI=w&m zdiaRbPR1=e`9_x1x^g~a0bn4ZCGrZxxpie^vJO*h^p(-B@!eLj<@7FIU(T7ab*;53 z;-s30y5W~w$!Km}=+0jLSx*tPqdWImIOWpY;8J*ciAwhPmJoW)jf@`f5;1&CcV1L> zTRiOPxo?^>)^9t*=a{^6X1R8PX4@Qi&FZfxj` zUdJdPWDU#Y21lpORwRSe@Z>m}B^Yp!Y@m^KPY;3Q^LTMTs*p-vr> z4PC;9n*`{Lvfwxoe-m5aIT@l0--Yp1-=+>tgGp6XZ-8;#;p~})P%Jzg59u;zVm0-u zs+N)d_i59Q++Vkdm1p;`&oY?uDTx<#V|5q7QS)wZpgZ3jA`$>4)ZloC5H}gkUE-Fj zMyoX7Y{^ch2+z!mW8X7!7<+k~IL8VLZ_(sa&wwksfZfF5hum5j)3iYmpnv#74n~7c z?ReP)I=jX!eGO)A9(90q$k8u0K3l%;00`jXgE&nGei(J)mJcywxU`I9jW5S1&zH2h z+(OP+jQiuL?8a5pOXKH9G(8TH{2bstR6^~>xu*Tec}a%4$cJ?dr^H!-d)BOr$r!e6 z5P+kjc)=pTHRIEQIUA_Q*+A2Im;Xa3VPxjJ#{CO+xUc@A0qH~^*3(Mh)aQ-wN{MZo zz^Q=S=9;>AkB``InKl(r5TvlNkr4J4@wIF|YGc{xcjOTF@TVHpN?TBi%$b)@_oYYr zTigmbe2T@#IIcW##{JOKPpE$>F(ypMqo-;5d8^(}?M=+lv|fitSo1z=s^iAGHR8ub z>rxv4si}rJdnxeduS^LdMG4x!9YKCWH+e>5WGbA4bEL&*Ut91V7lh ze8YA?80eoz2s}s(X-J)Gv@Fi=UR@@ftR)P_uDRQ?IZoR|P&3}!mi?m9Y}QB$r|bnp z-Wm3A(X3~ok0x|`WL~_XveRr2=qd@CI>m>^$TEtms2lAZOA$eNH6pB7dw|ZdYZ<(E zm-l5yIpY}Wv--wGabxKx>xDH)4l(7Isb$CuWFCZej|)Yt+g%aW@< zyKI2bpEKEv^ET%{gp8l7D3nf6yR0`^tEN_}yV#dYee`0;|Fw%P>})V#&bMQZrL8+> zi~B)&cGklCTqJ8G@?`7I0v89xHjAu|_S-Q+mZ++l*Qlx`vHODE`|09FTDzZCoo->Q z1%555D|k7FT;g6ittf_UV>0BKY1NDYF|xU-x6Fc-X%z~L+ANfwS4#mg;_Qhq84 zx!ZR7$upY1X2oSa{r(NoHuRV+hCZdJMx*wTx1X|04lP9ne231^?CbzaDX%~$D?PoO zpwTqFAuRJ7j|xe-A?*@j9p)mkTwXd@saSr`(q*I9r9iKyO%3ci9fPdu0l|PLru2f< zQxE<_6*&GEG1^{!6KJk}lO$i!h5@D5E;KGOGp7sYwmN1{aK1H)lZ5(|Vx|m{b#?>{ znXt)Pd4%-!aD_*n?5tTM4wo-Hw0I4+UvhVhc5^OL3AK!*=&VF^BW)<3oE`7_IS^Dj z_bu)OY_|%7U!)RBYYSAK4vkP0b&YS8mW?7c)dc}c7MY5!8NGgA5r>@NyxNlGp%}|& z?ra=#De1X5AW%cuFc?kosuBvarrOLxU;c<0P~LkvL;A20B5!dMq>^Okm1yN0meuJ` zX+~?nZlQSj!IzOy%4)bu@V7{TR;1yh{Lq$jQvWJ}12);x_E6~w*d+L@;2P+8A<-B; z(_}_*wz}jstiGoezS6(wyyk+gBPPwpV-PyyHwDYVuj$qoWCxWO+u&4 z1S(XgVhXUbtw9~NW)`)7!lie}TiYr%x?yYQ6Je{;Pv}V@Y$}=Q8 zBJ$z2dY;6VPUjr~C(jd~IXI@FyOSemw01OtOl{KYzASmTekV~OwJDEXBY90yX}GXP z_uMWkBuBbO=Jn8)HH}5UF~3o316UDhRscmbA~Y&6IVSR9kmKoJQ_fvC3p3b>m_`lP zei4{3b?@HLoT%LjMLqxwcwm;9uC8sD*YtqcM5XxJccUP_2bCs^Z7AQ)Ht^s?nF~Oh zLSbE!&1i$2NICa!H1Nc(-fqAN-DKn6`#Nod|G^Y(YcJO6#hw;?r$4pLBG>W2Y0ss34zS`{%poV+?xG#j0AfX4R^i^~_ndqG(r&(~Ttl@m=ap;GqqEVgG-Fjvs{hzX#k& zSS*DuS2#v3jgm8G)`&jxo1*F|9{LRlqB}Zu^oZFv)PNKI13Z7#)%vS<%^RhQ$>o{#+Qr>v?$FQL1D)fUHGaGn>6~bFl@CbXD2O{ z>J-|uOnZ24ckI)lBfogDY`Nvr#d5kSf80pdq)qg%p|XG;Zq) zHX%Eq?FvzsznLz+hDRE!XzJ*ESc$M#>3}I<2?V76L|FI%0>SV%(!5R4#51_Nvt(t% z0u0k<2LA=@UasO~y3N?eI-N5+&H4TUT;_{^svC7FRh4^pdc$2ujtAwJVzM7Gv>qBh zGvQMmKS5deZu;{l?r9J6?+}K}3iiHH&0Gcb<;As+Q{8|*T?4&m>*UW0+nZ!Ie^bP1 z(-P6r3D@=a^m5{kB2YAIlg^ye7(Yf|AH3_V_~XcT*Qm>RuJ#GKH3r?SA*_w}xW?wH zv)SO7RFad8mqwLw=d?~bchFyHTw)(QofSOI(}jbJTV5B``-qn#Na`&&1i~Fd1QqxZ zI@08%frt4)=ob~AeyB?391N+Xu}`H=GM!j+^LYtUx)bTxY-UNVo7}d0q?Tu}t6;*h z_~axzmLhnfq`GLhS=!Q5j7aC zu+OlPSlD1Gpg(lN>fdw8N2rEgDn}Rd#rxv7Wt)R6Z%o-t&0{nyV|>f;YKV8sqz7*v z%{*!x>edSz(F^%a!ZEqWD@?-llrt^Q5_r6h*kcEKL>iUMsL7ltPa$gA#_Jg$ zx%N2Ny7^m=kXIF{pgX2L_=JmAB%5hUZ_8>k2)~+1nD|Y+bCu`{G(pU)XvJBp1*XS< z7~M9~q5nj`=wR+Sft=rx^90Lf%b#61bym8a#J2KC{q^jg1G5P5HL4arj9+B+q4Y=0yyy6|647uv>Gq*VQAHKhIMoOrPp|B%P&tkOly4h)381BuQjQ^=4YW@IM zGj%tiOWeC;#$F_@1`dhYKK<)>Vis+WrUr#B6P?h@IF_w=DE^vGu7!9aN zsIb*%uY(e3(=mMcaQ)J@C4MN*l!4?q&rcXc?@UtP`6=yAQ^ZA9@jQUxuC+}%4gNdG z{jVm)+XQw5Y6bWJX`FcWh25_dl&U07elIX;MJR1e69G0G0C#H)qPNcJ zb2=e|?qSI_uW16W>G0t6jcH8+QPz~>zaRY(K@IS*ew><&oQo%BR4L5kk5^S zFAV=o`#tW#s!BKvx{XW_(7gQz(vx0AbNm_@_4?e#3lef}#Ji(3@fz zXO6?L^o+547@BZ>9r7CUh^tuNj+g!!C|^Ubh&1J9J0V~wqz6B4p6F-V@l(F0jNI?R z2ZRY?KO<#h7^Je?h_Bjo*bd)DY2W~~Y0pn(6EajAbzW!-pi^tK5G;Ow3^yEdqpN_T z0#l!#(Em|e=>KpZ+^w;9{uT=y`T-Vqs_VBxbRqWm$LxjGDyI#d>&Hd`IW1|UYvXJk z&@ht5w^Y)i{0Nlxp52JE`v8ne@tVSr6N&=#q^%a@*AbODIL6epF5k}dNOXOfdQTJVDjZ%oX=TD#Qsg} zsM4w|&fAeh(wH48Dgpo;LVk6+$OtLZt&MusVe;53w8uMWTZpV<0H1a!ncDMFNV>x6 zJh1)SS+S;`@N)$?2FV+141<7#$Jks5qy9ZE8Ali`Exo9aijZyB=?M|8dX=n2H#X_) ztbf;9FK6yPL98m*mNc(E-L$8m=+25oX+Hu98;J)1MmJyO?mvK85uTyY<5j=}@s<<5 zRD@O*fmmcza$6?!%7Chs>NRD?Fm_#wsR6&dkl3g<_l8ZUbT3axc&|-vy>-{AT(JRa za?u7dsdFTnyi%v^=-DA^a;)-GIVQs|&qlSTi~QWhXU?+!SzdPatBS|F5M2Nmj~`OP z85r_R=)?RIF*y@`+qoI;CqGM{Z@)JJeV1 zat-7JjkvZlqG6PR;Uej)h-L9ESqL~U^6RTOBl=M#I_2^66Sq3H*tYsl5$+Xqf*pfL zKM2dVicM@$hGD!AaG>n1F%=O)4R0~BK@NpfCmJ+&gSfu>+h9RPfwa? zU74KmlVa8hNt5>7%r8Y`C_LUyvBLIA8s7}~7^tOvoOymg>-Ot1y=CN0@s2c!yDlCn^(AY4HRFd6q|!_y>l|NiuF8k7IVIo$aN>=TR)3 zo(@SMPgl@{Xlv0!G+SYgB4fLFk#F;=M_nS)KG-+w^SfYn48_ zEwWr5vMv`hGEvhmvTBkc9^i-9`Ur3G*W~Xkd2RMDXEj?(@fG{HK-P;-a_u4?QC{v` z`qevjD8yA!SbQKgbKwNztrNQ8v)@(WEAQq_^fg2 z1Ch)(`&VzHV;5E(>txAv;)TP9Zk|Zt`2MD;$g0v$2*MTz}k>$EYmab)x zEJMc+Lof0^pG*(E04sk{UX~d56woua+F!}|%90nguHPk}MCp+sY(p5&G;UyyLNeXxX@h0htzj|pAZIbMcOpMk%RFB9{*i}112Tyd%OkSy@<)iXe}X^Em~2FK`(^LOoOm`8?Q0~ z)|HQd^c^PHs4*gSI_#_=L|4v*xH;d>P$dTh~JwQd&Dr=c1ssa#Ny8tt&6vo^?ej<6xBQE-)?Iz z*;)W=mLDh5WE1i20vF0wjKTh4Per;UGltJ=y%;*+YYSZh_`TStnk8-_z=OgzOKM|V z9U58fCKm{RZ|jU(ds4?m4egx6u^T5okRq8T@BKzr!O0FU{RKY6dZpg zj{oGzD{&!ym=;Cml;nIG?N@|9P_47`t5KcetV4BOt^9<1@}*&yNp7a6~arwi5F=V|+NffOM;7S%a`c6{_Ktz%l}w=29L z7)3&o(z|MeDcr6+>sam9sjwZp4a&1Ov9YhLp4cIri%ia;Po8=6G2(VL7H-2X?Oxrp zb%$X(ThdXd)Nsg^sknMlS_5*MHnT%mufiV|W=$*R`zUcvuscW32T;TNwlIa`*puP} z=2*CW{KI_vdDzR61b#zVN4lS|z=M*z5#VMkD}p|1Jw`Ta#vYWe`dk)A!!x;!*&tEA=JcBP^zNg_Tnr_U>!4 zuZyA)hoAvdD4rR}RS~Z`m2lsw^Xp+99U;Ryn~2V{^)sdDgN&ieLH#c-YF1aKxgS=s zR5)Sd5(#T(j8*B+M1iWJOQ!I%BDZ(CBz175H`;QgY5mQ&NmRH0vn-{9Z0?SA;NLT! z@y##xh#|dzRdOAW>!yPadkyz*p{JA#1hHIhPQkH5wB3nppU)C8iw7Bxujta`G-q`R z@dZq7k|9!Q5{0i$XI@;8)2FsW+cZUS@z0cLTF!uM={k^roaneD^uCOiCh@*a%}QGQ z7~I`bWKe{)fd+=;F?wwW!hiS2YazVnn@GhPQB9w$u}k_O)Ob5odTbn9*C;?BcCkX( zz?GBfTDtu95Zh)1SKs^gqypc4K-F~6HQDA>njAcacpKnjz0TDsFZ_XAbry(pVWBX`9S3PCma+ zQ$!G*+i_{$qmF@%>E{8z_X8u`qVjb5@7&WUWnF3^jDaHvropD#F(C3w$mu3<=(*7| zAyc0-<)gV7pP_qwc9-}s{7WGeS&J;2_9-|c*QOWUDv>lD*PvZ)yHzpoPO+M)Z$o)?D zX<=OtQ~Ngie+k)C?H;cy{3gbO0g12Je zIIDZ$>FA1m7=;l|FPokrAb+V*_CZhEqTex1j1R5;3vM3=h*j@Z-2>?YXn3RAPr@?= z%0gov*s`%)(R^14yLsm8J;Nc@9#6r=FRB$pr|X>FP*G^*Dk)S?g&`&j5w3|4kjXO& zi)F*aKgS9*#H@@>Dm7_Qr}3N$vYp3YLgsm`6dz@uIg;wHmxI3S^$Nj zR}6<3XFoq|ockLAegA!YU3I^FA90V@e7V>HI@@K?^1 z+$`C3c%a+I>Lv1y!00-2W0iczRK75py@X~eR-*30QL^`)cjBHZm`wXCuU z?0nb@5zGemow=w{rh&Bj=Lzaa%RX;klTS*MefuAx`&KCni5j;m>nyE&sxz5vuirTw zbNc&7c$=o&bt9I%r0d%(s>L6j99<^&Oo-Om*k2}|V*e@jFv7YJ=$ESh`Jibh>xucg zxyg;jAL<`bg$OeIiwJt3k#NlP-6Zg{-LLu&WzcE}3p{Uo2=g0X{G>Jy%AZ20G5|8H z1c61FQX#@a7x>H2P&9J<<1=4MFpV6TJ=WAWFP$q;j4nGP)C?YKim|a*)|?ak;3g!+ z+9uwT4flGsm}l;~#Jv?UiK{a3U_L*sZ89)x_f$G|kGz&kyE#J=Y`VO!L*vhP*!1c- z?!2V9Uqz*zFN9KmLVg@&E&iR{^~m$YRD&(E+w6;+lDH9Gxw3+LGGP*Nj8f9fW2QY# zW!~Nfg;+zggXgbSUDQ9$uu^}vjKPP}STbi#$Mj+{qdU-#;L^bzl1NLAC=Lp%N zlT%(S&bd-C`~4X>tqJ|H~YM8 zhV_9dN=H;R`AEkk#Vts%5g~`sXB(kWOic2jFNq~0+qbH|=84@e`$QfdI&|EOIGt^8 zOtZh&4WrGCDQar;K3+MOdiQJA!RS1&TF2fzZ{#$jz#n9i2h&Wl_CDi6F$z&EPFte>r0Qi^j65k z>(l{GdT|({RBZm_vix($8IDX}ZjToDU5UQFxyL!q-3*cKR(gPhSzwl37~!!%1cum_ z`VatO3sUj54ZGb%Uk)hhhfOtk-=5%k-#JJAc;P`a>TtGSR?6v}_$F_C z=i}_ix1pdI&j6aJ#L7Q~4#S0<6RqSzY%IoN82zt+>+ZzZ|2!!JKh9goeIs zehq?Qb^ctwUgfA%6F59^+~l5d>=?QmdlC`BOF1Ds@H`Q?z6|a3I`c=8d)61`7>^(d!I%WeSAYYVB9irAK)7m_*0&6`_MS){&hl# z`7%@sw6etif_UcbExZYrhsSs&tj2$`YFORp%1^5EitKnPAZ*IG{cBr7>Gj+#RxHYL zk&s);V&|O27U@8a^Xyfh2fI-qr7+E^zSHMZ{h8Gh9+JJBnU>n0LdS1s#f18jmje>M zZatk|w3hoFk~d=&|Na+$*6=NT3lZ+G@6BIf`%dPvP#vRG$b?w&;RdtO9YzH0ue{Hd zw`qZIfTLoxTU;>Y@BVcXE){)&;C)V>a}*=81=-(&RH1%Vr!jW@WIJWRUo<{N34*>PyzZ5k`%cFO>vAB?{)vQlDZd`5(ORks5B zCKGVi7g!UQZ%ND}LYj-QCps5Ytz4qg1E`oTz5~Kwln1nw49$3Sy?JA_cPD75XlOne zqCY6AzPg$c8FNeW=FckD&p=;4&JOB^dXIRp<~%AJc%t&Hmnu3*lw5`n*gQ4{N;#@- z80(EJk%xs>f2N}!Ab(%LzNtX8RHj)b>CHXT>|lxtW#nOU`Jz0CgGU#NZ>D;lsWs?u zJH|{0ea1@&U4E(Q=nDo^kXOqG+5e}~HaBJ_~9SB#K}O3OrN_AzqR0&F5b{5@NRp{W%Z zeW>1fjYZ~Vg3N^UJ}&IzN{#|`PqJ;F0~QY%03sN*?x5l5 z4Q3fsJXF< zvg@2@pJs~7Z|sp@$!N;=ydoNsPmI=cZ~WxWd&MkPW6oti)a$&jwTGXp#N()+(akw9 zEKlW>?22s96yylpu{oLd5V}(@q)YIfKrx`WWDj>RZ}DLDKvyjxZ+bawl3}sM7~dq{ zvbqZ7xAg`NBy)wcB^T&KYt6zR;c?+x@TM|S@z!KNDf=jGU9JG%|6@zW$ul+$&V%1O z|JCkF0v|m?8qqM-uAK>8?30DDCE{s)m3?!q+9o86IA0P$tDOlIZ;zVJrIbSP{nW(# zqGio};s?dEi?8uf`F;?hFn46k>=wp7d#rg%2gNk0mABJBS8J6mUnuflXI^gaLq?6m zt(+-d*dGV^Ct_Yvnl$eha;YIkTztRe83XGHoJ2C5!e$169&a0nSxfMCDA)CqVotE+ z^;25)pzmYej(DWV!Zs&#mOn8vGOcE$7eJwXhqftVL8i_Lt4tgGvm3~mDIERzYjrq5 zrZ;L}lP;4WYF^s$i%(ce{F$LvGm*N{qs7?Z@HLt+By4EJ8as+Y@U+d*H}(;Q;4qE2 ztR)9gcX7LK3+|2Gq!&favXIAYnyZiJ_s0)CY;#5B!hYd!E_#fSF?R%UpF*Oqc4;bT zuIV3Ri<)GF-bTANg~+0-Ve5r3A89amk=1h&A8Rfa@MVscV2japB5ujC6EZ?0f~Rz( z1`ySBN&nI6j@W`*il?y}fQ;=W5{r!6VHVQ3|EdV1fS90eBus{MW^B>s1ui4f%GB@tSR*JxjtM{FiojPC zcx1dn-m@Q7ayEM~vo3+{)JLb%V_A3w)wMAe2LqcRSgcO@uSQB1d&&{zpe)-mpBQMRW-r5Bk@}kyvD(6 zrYT6UZFSHha7iYCK!1!m%_g+88mEI1@p6%Rg^6t4?*JjU)EhbU7=W8>g66g)CQK3= zRiLrHPY}McuclCNohWl&TI!v+X0E_Od_|7!Y;POq7T;a!En@$=;Jba@(ky@skAM?N z&EcD)Z#{YvCix0d$m95z6)s=7u0MPgGLBh$6^-}t6|RN$jpbW(7*jJ}iK=y3#Q1O} z%q3iDF-}v7_*z5DIeRW04zZmob8t`_WKVqUQd!v%X-*$HYyNYNhxaIsmA_5dk>)r1 zi^c7WS8vA@zkq0=7FWzeroDRk^#&!YAF6Rgx2Bt&tsduOGaWW@ej#yqLj-*4<&y(s z7nKN!j?fT&Cpv5Ic}mu^K{M*n&B=v0_iS_AvCRf9?vfs{Fh-UZ^_NXjB;+y3Hxg`~ zE+?x*d}Y%#DA6cUHciLvcxuT4O)&Ox*Qc39^|EbJT+q}BAd*fWE#>sbT-sT)6@P4$ zZZ#vB1)>k3k~6jt?HK8a(zGD$`JC&G0%)930Jkd!4G-c34P_3^Sy0lr`4@45F`unzU#a&s_3QaC4@F zG#D1@P1&QZg<`ACCm6TXFR;&ZsV#1{m2-|NVRU;?}=Q_4dr}*7%%D$rEClJlxCWM3Uisgub0VQ#So} z5*V$NCjf0|jH2e|l2oUvlXt0+YF{6>{an|qgUl3f&O)Q08{2E|-XLz;9$e1n=nv5( zV$yN+Hkp&6miBKEFZM*dNTwcI8sk5f<;n2*LHhkTT*p$CvT7wLI#GkNc)_=35z?9SZ;PYP@X5RFNp#uxcbZ>* zDz*d)3xk9(QzRg`yAT1b+TkgKI{{2{wSonlR`wMjbCuSdcJ-lSQ7X)tF-TuGU(0T_ zaW6%Cu->Z~UK=G8{nIsAqdlZl#4)u5BA}kXbvDHklca-QrDx)^PExs0sGV7~SW6Za z#(BMNb2MwK!A4xxU?6l!h_y*F9T`%5%{v6xW8ND=QMkm-{n7k7(`rpBICF>^P+%(7 zKEfRr{D@96n4s%N!`$NDnwz~6iVjd+R^6Cg?UUC@J-lL^mxu{-(tuO4X!g_B!8M^K zA@(L<8q2hZXu?)}4ge;Rq&HNo$x)-`Xc{M=6AqIbmU)9kJWbiGw?3UN$mjBIGaPMD z+&0~6NV>@ObvjGqQ%tbSsfNx;R&RK~=rbCpbsw$!(xf1K?RC{i-Yq&K5S41)*Ct*|X$A_h=``6&iK z1x&m?jG9&Pq?-GyB7h<4!p(&+wgib)sCzvEQTsK8!_lD@n zQ(CTU;yO*kl5K!M3d+4rxKy*U{CPjQN+x6nM`aT$RI*M=sRMv4>_ce1&nAm!6cYUC zbZ*FiN_RDEcb)2Wr^U-u^H2V1Ekx$TCtR*<(u~!yZO9ZcI*w1bYKc{->8t#oWUB)> zlnJAkv&S_m=|P>#3FE5O5EdS@Ox>t zCQLV7%u?K>8BwIK%*p8`kr`h`>#4!t0qxZxmd+9K%=tTxuO@-&i8WfsOYTb-K9eUS#Mnc{ufa7R89QW-#-Bc+PGOk_ak>^r#D$rTHTn zv)uBHmTK?N5bJJIOrjA3`a?2i8F|=@poeEH)7N)Sj8F~sh#V2gA3NleYs`70j6fd6 zs_HJR(XV4ihh5@9J1vU6A((W%-_PR^5sdd6bOHCjmg@rV0}w6rV0=iRpI$C@_-7r1 zw}nAUwEs*)tOGs#|MBk!({|?auPYxuA`NFE{*{x?)9`;&hV$o$icFc3)TEuoJS0MgF8FVjdBxAYvH!(z75?b0zHY{4A$X1Y$(r6Y7qxjlqs^= z5+%#ZPkdt2oWpgyX%eJQllWJ%NS|G`Ix>?L!YH|R+p$(1v%!;Kn$gLsRX-4MJOs(A z8k8Q=uFg)%+jmNMW!a~eLOueUeLXN2Oz=)^(n)m3ctWZFA=q<4U{{^Zv5sqfJ)#j!7lPMImJqJXZvV~RZ?-Ym(SbAF@B_GL zZY{y7;8en@OFL^DG@xU7x*n%DxEM#mcHQQYUl%;)$+TN@$IA&HRT_ zq}USI4Gr9qnU$U~OZ5?eVS!@D-D@GbpKr>y+C;K4eXi%Re4LWFs9_K@ZzqAD8uyq?Jb_@T|}oBegxEj7ql=Bm}A=cC!S zzZte$8De)ZH!GpH^B@9`m`iXPEH2C43-y#1Jvlp*Za3q90B=1@0x&m}khuok9)NcR z&Q>kTAb;x$Eg)%t>nT>@HDiK|OXhBv^8CCkGoiJPo#@sW^JYtRb@#}3+>l@bLI~Av zWY`-KsMNH%t3#BFqD%VGXScUz1PorO-iO2!?a7~C#+f5}CzoP}PSGxTC_Rgn)q4Si z@yDy+!_H>!T-O9OF$t9d$O@SiH0R0wzICH&|Bg~iYVH%aqx-c3?C!3s;_4Jo2Ev z3ethCn8{3$lQ8sBtN!OyN+_)j-3F$JK*i)rOin7A=YkLbq1Mhcs$1Aopq+9nYnQWk z%7#UzoSLSvShxEzqn#o_>o!xy5lsH)p8ev%_$9HYS-8Pq_Y?Qh!A1964Jg!gO$neB zJ;$2#qLY#D!!=`5%#bSe0-AQTm%vzia?LM+nf8Zl8AVR^AV?jWU&~p zH7`{?^9wC3OYNHHGCV>L`%|A0w3P~t6Pdg{y5pMz}YRX>v1*iOy%@a;)- ze0X|St!dT|=UL0|&rky|Zxz|vQ|RuzBaBJ4Tc|14A@Ihs)E5`Iv2ND`P7`=LO?IDO z`_7(jlT*?{mp^_JZSL9PNCw?G#^nKc>~+P~wqtw%3;~Ym9JQ0!_;F8Gf4um7x99QQ z9|RlSGB#nmcF+<-%)7k|g+Aw-F$T7@7Od0^AB`<9Q=K@ue-M`-eRuQu?VHpv^NW1+ z{#|-N_J&$u*ljUCx)j5ctJ7yqeX7aijh|^x&tafs0FF}(WeRN;Dd!McamY4SWU<=f%@M%v!>x^2M4 z@V!}GiFd)Rz7g0e@qW93Poe4#ZCdP0@A&XJHiV|iGI^MnhN-&9DZC%SES@1w+GaQitm-z{!|tpbznxG> zb2$gRIh(Nw>+`m{7d_gZ+7=LOmtKL-G@og_6L0GstXf`cS4)xVT{|3SWFq-a$6Y74 zYLC=*&sS-1i}RZy;>JjAjJfJm`g+Twf5wFgn^BTG@%N7DI zbCzsgsXZ8!$Eir^MoaL58n}+z;fnuAXWKUJ4zH=B`Zz*8QE%e_g(9Y_?mBeF_)8ZLJ6nKXtuefOSn{jQEhX-)jfJd9=Ff&G%J&8RbjvhmiCz}#!`ohV_AG4Z;$yQJ(FtM zY`S+8>=vt+#>?k&oWAO39~tG@Y{tNeoyYq;juBVjDe>N=9kJ1_wflkom&}nrrMrAD ztEjm-^70WSvG_Ihy0ZNY)vC6OBj7#2)Gy^MeOJ^YbVb-~iJBL^t{zRf#V+)%xLdDo;s9IcEr#`W$O zz63Z}>~<9o8yEMC)Bk{F!TUQfcbh2}vhB(q)vihBC!{)MIb&NDQH~_=I3(gUb6-p7 zu|_gRc7Bu~F@ryM>|1;1q9XO6o(Lk^=QcsL60>)&ZW&y9UZI4CQFETO8iGcCp(3e| zyPys6l1DSjhZ;C)EqH_Z9P4`0tlhYY;24=YUj=rRp6prfQ6H%Xn8D3v)1nF<3||`R zD*58YKH4}!Zfpq#uG=N<%@R1A7~vWiqeE8HDZnpr9P{AI+W@|>_W?5TxFAH@j7|P3 zm2Xt?ef9AlZ=hVRQQ`oTXQFyHjbBryIBd11qj1XdH~ek!P~eO6=a%eg>}k{!!154wv0=iI~%#>C@_h? z?Kf8C_4Zw}hQ5E6SWjxlONtQjQaXO;pcz zpp#kFEMNCU9zJ2;Mx#f5{Sp~kOP=QsSvFKQDVXyVspme?M-8{+5&gy8*_PR*0e)xp zjBHa!AQCAyNV)%HrxD~#sg=2stwe;8nITE=e*Lj%!ouQ*)j3AhKC)V+a5EMSQ(EN3 zqCYY8bNOf!aBjnt?pkA*?Od-40DT7-R~do7HnwBU!9`_syQKf6KcXj87Rj3kWzZvC zZrFmKMf?=@MTOMi2}VXV9=Z0TWM#bt3gZ0#&Skl7UxB0jQo8fYPJG#ENQ`s)_C1~b z_yzoSFuuBW;v1@-i(0PnJbjorinjP>=G>7PWf1fgJ)V-GyJgSby1(SF2l#SsjdX2YY^21;*&fU;!Kz1O^P3loT9 zper;`)qbby0qTFF;50zb$?#hM4!?{P|3_Y&?CdxU-kYGKvAtl9HCdO0+MZsvuJVb! zA2!PZgI-mqL9dEJBH{+N&xH)@2^dXSMJ;q5D*||ObAqbiaCA)hj3KJPL`KIM9 zLYnZ3Of4fo4AslWy^Us&w#WM9aadqKo<0KQM;!g9+Mzew*BkosV^IYZb|K%s^kpPd zhRyZouFhFg(-*1BK!Nepy=o*yWdf9QJfL5nB`tUdZD#vwLdc@gSU6E%V#8#K^SyX; zXJF9Y8saPFVKww2n-kso{X!h9&Vpum7wuV5=3uU z?cvNXfV&bZ5S9-8?*o^?>J!RLt5Iq5!da0)(yn}&_QNFfOfWF+`knjI)@`&R86?(3k^LZW?^(0eLGLo8{`5 z#I)lFHloVs*7?^4|3R?H514^IKuUJHc6m*lWGqM!JiP=}Fj03iy^Ib~-an8xNRB0J zZMA-jj+hKARdh2?j2&;Vv03cG1}l~RdODiKnn#R4w#;E_5tW?L zaZ?7rXe@^aH^nN>w`g2K&*N!d(uaDx|D07sxZ}4+>jD(d=?*=1d@JAf);& zhWW!)ThWl76MZtHtj6-2NYCA73dAC4P4$yzslf!5fM?W;^77A>m9?#{gQ<#ef&BfH zx6~aJVXFw54Rm;OPH;Hx!iT3p7Jvn{oABhL9b>0{gNz!G7kmWV^;s+u)>4%I^m2q$ zJ)E}l3^CS-epq66P&K_#CN|DBy-_!cX)JGnuTRS)X;g%41z=8;esd&MbxW8jp1b_E zSb$)>-yA$ouQRq=y)*rkvOeO(jZo;PqP`V)=WzCHlVK;ss4fmJGGC#|>gcTa3;k#Q z!ok`p*Qm!Sud%r4^-Jt3>4hn9|9-v8DFKBRShv+LrgDqsaLkP_e6)8ZnK*4({3`PT zB$~hbeeWGd=qTsOFKqWF`O$Tnr2;)x4Ts=O{;?%g!x7o~neNMG$@La$kb}t_0pWI< zPELYEkpy(g+YwEbQpYp2x8=F^cG0(w-<)s8Q&yo}MccNb8x8Z#GlNIRvqSByU)TnOpvzNTGLHQstiadHPLpeI; z`5tw;ig^wUMj_xrrFiOb;QoS*P0JQxx^E)E!n+Xw*c9Qj`c}d3!neZ5Olo(*ORJ9g z#RzTYQmufQ!79cqAXslm((fg(R#q@`DZl7}Ro_YRR#XsrP`w`@Glh4%P*K6@s1%bh zC5yhuE1suj{4t+T5P3AWStIin>Bk08{frrdUrNy&j*uQfY#)X@>u~DZdZDI|h<896 zR<624XfU@cmu|26WU6vG6apu;NpzjuorOIV!YnCdGCn$-y(TMgk*NT}VBB#k5q&?Y z=Dr+Dz!v$hpEK|A!je^XH1TIpTJ4?nlptBGB1I-tMElzPA{`}>sTHJ zBh>68zLcXU=Byo{2>{{AM|L(%2OsYo)}dn51u&3@H@af)Gh3xw`MRr}ImB#fohFRy z#+FRU(>57<)Q*xT~roNNxs8nM+>AB8NQF=HgooW=RCUiid4X52 zw)U*{<8THHE4OtWOfm&dvHkZivrRweBhDL4%*`_eee8D-~!IE;pgM=-4RNDDT(ZwT=7X*W|06Gk=e$Nr;VqHA+V?K*rtwAH5% z*VB}<%f>g&efG)WnS6N8*4dX=qJiNxsSc=MI{Mw`R_`U5kN#BiAVx*SXnWDo-Ud>& zJLFIzK`SCjW)w|Qp5dowpeuf5U*RC9&|xs z+>Q@@Ap;^fqf19kUEO&esP{PV-tWipa>DFOnuc>Cr7M-%M&9@bx=I(?3@`Ewc(?mq zembqM=K7wt$}=}=mnPXxv6l@Ib1-|j&~)?Fs{;!C7w*31=(1cNzPhky z=NKFju`BtvOQEguA!g=5OoXGTRrFtfqSx&I{5xlF<^KO88Eyz2mpkJA7VOUb=MCY5 z*8fiVMg{`}S&5pVFQ}vdK=U*?;Ogu(;Vam0q5V?t zqXWQJ4d3+FxxcXWT3vI4EkGq@>>ptW8~f_h%sh%{oJgpFu0|no6ark7$zrrT*`_Ry z9w*BV+NJ1}Ntj)FDG37nGG|PRP*sNeHpc$WlaT$-G$|0PQMp0|DgBxbbLjQZ1e|6a z@n)8Oesrs8@56@l0cj9og5G2I>wWai!n{0WOSDz8UBmh>ClkW^+HN2lftycZ`IdTQ zrbH?HfQ~IhOt8twtVRbub?Za^>Y(5mYC_r%Uz<%PV$Qk!Mc*ix8TFfU80ulj+zj`rgU zPslY8EBwZf^~w^D!?q+dRVw5}jXz8u1#<)ux9jm;VMa30U-T#GFd3BkD~8pUnPADlGEHM}j5Cz7am&ipE;2UuD5$Q)F+cF{Z> z=R+S})nzcX85GYgn0^Zk>bHo8oYGzFN5Ab<>Zf*OifVoc_Vr3HEP`;k= z;PUu44@2~5k^aM~iBM0^{B3nl8PW6G0fNSIkIW_Zc`*fmSG7i=Kq{n$5^Aq{Tk?EROv;Lf*nv3HHvpyg!M^GP{_s#2&>)55_?CQrJK@r{^=` zT)e+sPulXn(q}_Y_xRgZ#DaJ-O}ItACO-CV(iyeZU2K;3vc|s;<{T&^e;<$WlVnI% zMGZ%qt8tJQndh@1HGD1L4?6Uj99899ib=khnrogb-e)=J#coLn8Tbv_+s<3xxny@v zId<%8sRd!%G*V(wji${ZJSR{WE7ylUm+!JKU3){{V1);!>nS65#X!?MW%-lqB;Rlk z#&%;CS7MDH{UHM)zm`FBiI{@DWXZ;!4jM*0thztJej22~260*!Larl)xV7T=rL{r%*=22CvAVcDl=dwCt_j$Qx4GEZ78gZg*#yIx$m8M8wb z4zbKvX0}G<{>_R-7~|@ESe+61)tYSuhDx~zAs20-3DQ&ydnSOXG`L^ ziGDn#n>jFX+Vf?!!p+A%Jm-XWs3{!dV*fL7Og6_)T@C@pp6A+)dfpgVI2lK{St2pB z?qqpGvR?o(q-XYMr7d?d*o}(A8>8kI6k_O2%^)CD#XECTANu5{hjz5|SJK~~N1s<; zN2cm+mA-vH_QiB>i<WZAEI##^`ANG>M$|A5`9ge$17F^XZ8DP1UF=1eGH$m%*5N&DS%& zp^V+U;mMmBH>p`ml!UJ;5eB9?Eg!=+`5>K%r6d_9H`?#>ZL7Uq!Uw*L{B%VfkyHyI ztCDu$8E6QbiPB@IOfDjhp_HnMGil38u_D>(m6<--fiU;bP}p1rv@O7$^az<9Wh&~RI0vO0;jXf}$=&mq3KO46ZB?yiS^dj2`p z$kLxwn0~vMhcw|Z9;;FV=21DZdl_y0hmIt33W8as?CxV>|N3R03TOdoGFEqpOSp9v z)lJa7(XnQKYwE&Zr*CRiiw!~IuT!^4gFps&%u!l$>mEy185Qt(rS6NNn`XYq7EHH> z>27OiofE{JhwvHg#??~jnEXb=ZS@PO-Bqvpk-@xZ@pZW%JMV)|EMYtFonxAySLM6Z zto5z(S3fc>w_=iqucvisYSb6YhGfcm8!4<;OEKQL&l(JBvLRm2#8aJQU3>7JeQ{$- zJVJqMbR*WxK@bCTaSPXv2i9@s4`kF85 z=DE3T+*5hy-OIdlU-ox<59dILigwFQ_F=*XRB~XajURysfP;8&(`E{_5Ao#y|A)J` z3W#g#(nSNoDImB80>Rz2fZz};gamgdXyF6`1b25Q1PB|4;1Hy6m*DPBs&EZ=k=^~@ z?moNkJr8})!(DH+YOZN(&Nasv-x%XVw^0^MrWq@FYv<`LjY~2T8)@~*I0ULys65KI z7=uXQlc|*cts6mk7X4M5%*saW$y(+}T)382os=-Xlq>)29+?<%y+T=mSmTsi-nFbMryTviro zFprGzW_9a$=SI8OH^*QXa9{zSJI{BU_rh-JVUbdO(Xr`2Iv3xO=}P?Ldi8oodrI=bYDzfn)0esIP+}2-+ zPr4-^00mrdPEIn>B+Jmo(OY<)%~QIN|0H`x zm19Kv!8B;ytY~E2L-$<nz=hQd>B9`>&2SX5{IYOjO4! z?cfEnM!ccvm3})}Y&XeI@dgwepBWwU#t&N--6qChVZ#`(5Z9=iQINB2#;OG6t$g|A z>B4Vw=15EN62G?ODrK~k#o$P{|?6&<$jSZ=7ldUHCw=1MZ zX*7{|BNO}RIhSYM2v4=-`U{`iD&{v~eZUHhQRT#|t&#+CYFa{C*#1(+sef;}5aHy; z9ED$9nT1PVh&T3aV%MpUm@WZQNst>LD52ao1(mwX6X`VVei8sOFY4=(Vw5zq=q-*( z{>G<|haS=EkFokSzm$C`cS|PBt$yw>q`wF8%?^Kz!Kf5+=M`T)6Jp#G+xlIv#hm91 zDP>$~zS%o}p~n{+uS;Q%hawxq7_`Y9+;M$aw2sXeB@U2%)NH{%Ez?+ai!ajFo`pZn zBYC+-I50(@jW6eH^z8eQ9AqKaBK8vqN5c9pc|BGVi8T>58gqN5D1Zqb!GxT=1h##m#x!;2fS;TS)j6gY7 zZ;X)*Ny%BrX6WBQWQ-fxg1iRcSG5Lvfei#<-hoxcu59$(?BN6g$-M`F;*+m_Mjgu&_5 zA@Nb?DWv|NoN($8t1iU)m!`=Q_frzB=597KS@_zA3yN?_KKu!n_uPy zp5GC$ixLr!YR1EHnA#7?LAed$1+0h?nB4$!_2x4d3CO;;;6WoSK{csCF;{uzl{_5R zoF`MUCN5{QafbpAst~-PmT84%ck}&rRTb$C#ap+`#9@S(Y{V^`HT9NJkN-4;k7s-T z@$HPlC=1x`bl?aDPfVZrUPZ$M)yT^Dt_Y~!%+r6%o4VxGVx+{;;8p%fP|QC+wrIwY z4h6y#XH;XYCwAxyRFN`4^8?hjE_`C(`%!)~kC2j`x7lf3M zB18qEX<~UTZ&?&*0OQ!53MiN(8FAPSrN)7CaTsP!g4F#>1-|Dkp~6w&+&}I;4surq zq7MB2v0tFuU@y|++*hZ?pkUOu-a-UdCKZm(o=CdzCm14-uo--Omkg{rfxi+*^tx!v zD-9|=pB21W z8`hjUE4#zhdx)Q()1HeShzjP|%#H$V&~>gUyEkRz!77Gp`}1TrHa4YYWsvg$>tLmT z*R6voBOWfo?7>n7Z2?8zvtmJSF^0rQut{TnSaO0>CwzD*MQ30L6$>5bg1KV|T21nO7? zaNR5PTLMF*0=|KRwU3M2}2#h!>xDQ<~Ilakn>JLm3WoX4Z&pOEli`aC?MLc{dUgUy5+Qs0I)XVj%&msVt zJmaBX&zbI-s6Ee_o7XDN#*B9ufm?g$S^61>iravAW&@uDTpwY{>&7dwJ;7~*sbDp2 z^$`fr*{v7$py0L-cf>9I$a~5^e=r8YqT*)PpLx**NGyaj z$q>$3yi@XKmu6+=Zn}LSUDpS=$9SNe$+sID+w}aeUx?f%k?^6jOJt`kuJh%C$2~L= zd@+v9vhqxb)Z&FTQoUP#iureBQKC;tT9z<&WP2N0=DHo*55{ag8AbdsWEF(NdtQgV z&X2GJyRq;@Mkjr1{^R{fE#=iL`833qUuN;|kc7}8r_J@TQu}d!@5Uj@;S;pQE z{(*IR1I}(W-MqsWfUGlq`b5h8laUHJLVg^qlO9_L(LyQDlL+}2*q64k zl9|~q1kHjHx=Q)C)@jb`Lg4eZo2n4zHi;RS*q{R5S)EqdcNjx_An)ba8gB3r_ErJ& zuzkulkP5AvTR9&s@SmP^^c|p2#@Mh+)|#8`c3t?%a{6w8zv>;yZ~&uZKW~S9)b;Bu zH}{m`ZqgGLS1@l!7pGf&&)w^+x`XQGsy>t9mzm+XZ^5x|F-(Qe^od6uaac0Ds&o=l zn0cH2^f`Hd^((}-o45l52fwgme*()*KVX4Tz5Mc;_cc@G-k7^S7g|__ z-F4EKr2$aBDcwH%KMrC{*sn}qN16C(>IMClPKc;jTD|Vt;x0*wKr;!p$MbYH9COq+ zfEzsHPtBBu@xygD@^`OUcwIBiey(@?H=Xykc>Q_i*Lo8rfV#&y0C)hL)#cE8O<&Wt^?PkL;_y94Jps* z_87@n=$NC}v*EL4L!81IUyl6=Rq$%&6C)yiE>QN^)WnH*7vG`i2V4mpqs5SlykDJa z1rtZ)Q~Z)zwMuW)EDF;FySZ>GaO>r5e?_x7&dbMdY070HVi2lo>dh5bGBHV;vqeG< zoTwS9J0VaNl^ge43B$$tX!J_1dT6*QQ3Eh9T~m7bIqdRcZeSCIzca?#K202XUSxHL zlx5sgp_EYhXwjt8EtQjz7=W=)5afQD_U0eU{&Tp=Jud6&)M zZSd8xbbOuxJ`{mvq@V_-bta;6Iqa=Ga31767zPi(=upWlAMJoD6#TnMCE!s3wo}It3Sl!*3#kraOr6) z))TJo;rjX7JI=W`;t&gkgq@aE?q{~FNb7>7U1 zR?dp$EH0dG?x`KeK}7oL2$7jn8mw-_jxPb{nm4{lV%k=e$$lsyy8qNpW%_|y?%mU3 zL`*NwaKNA7fTa^Ew7p#|otW3rJNFgChBK$g^E_y&L>;@!)x z9n;w?D)Z7bizA)nSfIf1!IJyR7Wv8*$|aBA-%!K)??qt_(Mwj2a$ZM-$+FXV4Pq9u z?ze!@LcEUlSSO$#-qx%u5mXN;Wv^?Y!;r%YEIsLnWnKn8GmL!sr@$R~t|V#s132JW z8_QrnSYmy(^@A|d?0NA!*TdD|luInQV$n><{ItRG065m)bM><<>d6~JGO*)3&C|Y`=l_{(2FQQ>6TVfs zuFi@|Z3QRXeaoR~9fY~4Lqh!(v~+_~_9|Rj9)eRZ(YV+y4#%Ia!R5_K$Q-nl2)g}p8cg=u&m5!!t#SaSemy}6H0Oc4%iB;A~b5U zEi0WE>QM+}JvIh|^U+c4cnzOSn%kHsS@5gSn89y{^VPLYriSp`Z3!?$@MHjQm9gh* zkZnFKCcCv!13GgSO5#F*0`VPaR3$gX;+wszg1HnUwny_&4q1Mj!N$kwFV_={Jgp>L z>iP4|sT?wmVg_`nqOXhInipBZa0=40nx&b)UI|uc=Ls4XE+39*N|@|HEQ-_v2^umI zB9jT`cx~|JuOp=~E(1m7iq<7JsN5^gEElCwy%V z{cHj>RmNUyi`I=$GdK{jQ!Jw0nT6#h{7KLMYY~PLtu4XjNjhQpsrmje_9sHxWJ*gn zVHx?)&5-CF#q`E=A&QF5v?`1X$5@NnXpZ`x^HQ0b%p$Gw$rIi+>FBvR*66Kq59`D< zgUHlkwId#T#SOCg#^B#Y)Nn2aNedolu-hwrb}w)MM*vlXqYHm`Q3 zAGJx_`{$Fq^u1PJXBx7(5)HwsOZ|Aqww0568+f#$?~Q1T^PkjLbt?G;$!g*&@AL)p zGid}2mFahmFBSlAKwU9>s4`Dy?n}+i%goH}B+1}V6eU2!q+zK=aX1J4&O>V4)2@z2 zCTYruAkh54ySy)9gk~uSz3M{4wcE94f2&tK?oopJnL2X~w1NLpns>Ffkt@ftxK7Gp zRBqKOzPOXOIJW0IOD1{Av%a3$1>3RxbI#Akg%~OFK?J`bOd$%gKl)_j$WUTK4}p0UE3^7dzu(etATe==7c5V`_1hYq7-cp z=1{cs7#e))Dj%Sl*z?^GySTWxniRiR|M4++Y2cEvmcqvoE^fp^i6884|D$tigsYI@ zZQu}j>Cz2Z75=CZQ+q>;cB=wMrUmT{Qk#!+)&TiK;C;Qgndb%aZYI_(i>e#kpKf=Er$c8`m)1F2U=_ zpuI&CyCb59D`H};-ysoq`t(D-`ZtsZaweIPAC}7^dFrmn@oE$k*)2jTJrhbQ?gC#{ zB}kY3IoAzEp&|hN?S~zbNqi>BZGZvsQ`BsjWhDWOgT3tvl6G!LVf^*#rO(x+b~IJ7 zTFVK4hnfEv{^GEWB?K+NWH4w2`l{5#Vv5vS>Ic!WJ|*rCZ3Dw zqJ!}nUn=$1O@#X@Y=DB-mbB`=!-j3K(hqIodA?3rIrmhSf^hMWy~Pi(;ZC9l^BYoL zDxnigRURkqS2fe?v-_i0ZBD8iOR4KFdsIRfC(I=rmY&;v*qVmgI|8Gbw7*?r4BySn z-uzN^JlUedm@B$=F1Q-Qjj#-cy4dqwSr|t=aNmQT{#rIU5`XYt@!{$9)oExC8^d=g zQIFJ&hEWkGGi5(qBKc_Ny|c$v%6{=x&j-H2eb6S@DG!&sgZ-+Z5PzHRv1RAqk2K9; zxYc>7D;V^i$Y3N6bgah0HjbXNx!^mo#<1nOyc^Q!xFy$;8IkV`Nn)wbUiH|w&i1g3 zg4bwrF<_Rm567c>{Y*}t6~^1xYGwsFMf-;6>+bBnlXIcp$ z1i#B-QREW_4`Xt4T{o?>Z)cHd`rfJgT%WT(RKDBv-dE5`($sp0k~&#atC=r=P*MfAJ^tavwzr zW{sJt;ZD};xB-V4$O&l!pL2NU1F`uBb!-o|2Z^^zx8Osm@ zgDX{~hb4u(1-fwEhiH6;msaixopZlV2Q3Y@_xE|x-|q~(jlxzv?Zkxq{_2`kW61)J zyQWs`#{BwY@1!S*ZW)%dDlH8^5SaN7E3Exk-+cd;EwhsulVe97rn@@}9iUOk~Z zoJ>#bR&@FI^kC_4t7LUmFWWM9NCXK(P8DaCZfV)lI@QBE;^2d0T-#vab%o-J>Aiep zg4(dimb2c~sBh=PNq$Mt1#?B~xo$Sah$Hux#*9G=pU7YJKe`7?6!k*IJIG5` zb{N_qg77186Xy$7Mf>nhr?7~<7j5N94JX?Y42KFMACP%+I%2M=9pk_E`?@w$l>2?1G-<%!ognif^1= zH{>8tY68}t0x7`+>QYZ{54I0e*q_bfE2jfZnGjoXaxcyucZRb1cc*CC#gg6V! zF`F3AVect{rhpUBrXj*D)u6e5Y7dEekS4J&KEmeXFcEwG^%pa4>|{ijXAIx=>OXoE z4qnJ&W@Wxe2{&56#hcTvUZb4S!3+Q-JUH4vG$}{$c@5MbibCKf7->F#rUw=M4n3P! zE>~gr19c_q=}p?yIW}e>g2Ii26@mURr5t^DN|^H^1;&{PWE!kH)7(+(^_#zDFzQh6+1MH|J&#wK`v~=Y(kn1+p1IL$qm~LWkVSo8U5=E z+wf3x+}CFPfqWrg;S9cy9iWXlL23ZBOE(g>8~@9GoX-!TG~a9zyRM+)XpOY;jwrbf zt=n1ec22c%)9N_ydEtz`ldJHb(N}M-ryJA+4ch%+Op6RCc=Egp{R3cL&E5k*5(x%p zvvq1<-gvT&tzuQT`M*tLjm%LLhbl8>o7?BTnuh09$`ed$8TR4fXlun0%tZ$5^X_@% zJ_(>n9f=2!NiyM#g@!!d4Qtee>aZdniYX&OKtKl&t1dzOVzgvJn(Q>1=T39WR%_H< znj2^_O!eC48GUE|)7f8YdfX>BCiVbsJG z*^K(#V^SCdHDKY}8=bPZ4(D?_V@8oUfG|H3j>Cvd^0ZL3d8VkwIozSON8h_CLXH6Q zQNu0S0x-WVlzvdi8w#{;67-5U<^1qW!StsAxpv~=3n+X6ho)DwDD`T2-*pO>_iIM; zI!JQlnUvcnT1L;TFFSJ3as|I03NmFpr4&U5LT8GuV)yv9n98cBcE?tBV#UMOoVkJA z_Amy2EBi^JHNP+O2kW@O5hvyp{z#^CBw$@ue)coC;thm zjzM5$P@GOP_Bj*cUsrhBFDRFfjjIb6Gsmsuqk7{*ZnylUd8T*e^v!2ZpJBW3SF}$S zfVIK+ryCxE|6u@6HkwH6@W;ZX(kt;_onO6sy@15pjp|*8v*o($MX~#z+Hd~{;7D=~ z;xtE=aJ}PMp8g_@j9zT>S(Mi5pIrVURQWwwC_?kjToSMTTL=q5s(xd_x1_7T==CDq zSfRs{zq^>TW!5juGZZ7%D+^X&Cf%|6No~S%Z0<--_`2l%ewo-U1z9AV`d@fZ``O;{ zXK{j85P5A0Tg5d1rMZBNOWO^jmRf}qgtXWPBuy~uMq%H7!oE%*!DcEz*GiY7v|q_Z zG-e&9W|8OJwaj>21USE?pAFm1(@?y5=cNy(;Fa{gj)rMDSx={b%SWb&=nVznQkkNa zB9C>Z@Wl?pg0&t6#^XE!#$z)N5(DQrOddk-ImCmCp0L?BIiA_1DIxjZAmuWMD6zz& z4F&vxJ!+o_U?g1+D`Ip)^-T&UXUG%E_0amKM^*D)!N-8KR(AGT>(}5Y7?SgWb!KP~ zpe>B!89oVElOV7X!!IBR$8nkK%h_=1U7I*z3(lu@sqaivHy8VI1;p&ST^E@x@<-he z)t-R5Rs4!=X8LXfjjnhfF)HNnkb;Ibi8o-d>6Mv2|H)3nBBbHFcf^_%+ESV0_PaDG zB9&t@@zJJ3{{5eSm1GX?gb__^j|4h8&0Kj-o7bxqY3Oh1iK%|C9O-_xRC~Dyra&t9(PjeM}#5O_uaAMcN;ghcYWV0>X;{yLk@Y zf?hBkZ`SHIX!sWcA4g=5=I=THNmBrmI5oiN_0dDRQgE}8-3qhp(V+1|X9;Dh$$0mS zkRFdHT&icujLR_p?XP%wc$&u%QF)RPa|VqG!ZLeVas>R;Xh0PRh%3XUq-Jez!1{|X zCC?=@hQ~gl4n1zjJXDT%b=>AVOet|x`5OJ&sCf$dGO!z=LaxMeOo~69!*3>k?z5Fe z=68Ha1p5++-T+RVjs_ReD7&E0n845?6C^{5{OR3zQj|!!q74&@D8v>YR3NR^Coupy za?v>xt>i=f1J`X_@g2gu)pYV(D9cf;usvLKL?gpatRrXgH^?dpjAjpxja{CJi|#)U zwdhe0p(a?ZBXa?xol@e|+l=2ku>DxCUi`Do7OF(AevS9Ipsm^kOH zBcu_-qsb1(^@c?1E&6>ss2aYWP)*H;zKhD z=xCU5;CWCd^b~aYmJwvX(tQpFUFO-E6mu?Hge67k>(wi_a;w(b;VTA>gF!)^s~7ru zqoz4AYGSPB0N(3?(y~O(I^6_>;#`6*Ev+;yNksXeQFXmuEf=~##($U%0qXyX!7b3F zlJp!;ry3Sdy6L+K5NVfs2C8#OhO2%h@VI9$KUjmqN@1MFWPopn(F|Wh6!+H0oZEQ^ zHTI<9di|zzjMFK8x1o;df9S%peUNj$sowITiQuZMRUJ6-xlx<`{{mNaFe=E6YcZ)= zyTBuR?ahP7tMFV?P^&wkf!38xE&=*8tNa6r2cNL5{ljRD0q|`drMbMrqbhFl#k{~!Wb=L*=xTOhsUL#)z`@v zEce(6d@I%1J3Q@Y4RO&M*V13_u}`tjmxL5b*CM~RPJ~$3>VtwWwlTJ%CD+zGgT1W% z;rY87X>V)84m^2FSZrM{Js)3Xr$+{z2EQ9*iT`{6JXNR6N+|pCkJLh4Gh=}hqyZKK zJj2M@T)Yu_w@q0y&p1Ci1(ZGfP65Ya$CGF*3c6?BQC@}oP|S;^|Jn}29qfV+dboUMh={r@glXA$p0p`=*NC(`46bsugP)N z!NG9vs=i$t;y0hE*V7Q4)6g(tnwcc`5Scko2N zgPKWf-sIpAA;s&26d_mHniHDKyihX?C3kjiaW{WFACn?yT7Q;?Tcao4S*&<9m}e0w zOi`3Y75-fl$mL2RTFmn7p8}kTRbfA6V7-M}>;$3P4E;Ij(rj3#5Mi;7Md_Hd!F-BA z96TkJSQnk29x*hD`m1CzC*1%R79dW-&w!8(b784V)^LM%}NON4#i0ErGfJIpEhk>758s9 zT4)p=r5mC$`DB+N*w(>Y!;-P^l!iu+$ka8Ker4qhlYaY5waQTVsgTrc;HehMH{I!tEgF6FiTYS0wIWU0AI0O$t~dmX z^Xr+n9w1+Exd;ih98qK5QV{g^?{+BV(ly9m-j@;hsxSy4u;f-blQ(ge#$McITa3EZJ{}5tT1fBUZorq^)^ss zo1WgH>o~-4Es+~{X%wHuv)Z%A^V^k=j#dLNyIx#+(=oVsLa3T6q<2Oxu zsbns;lSfUI{v>5CKc%7p_f)hF!{?eKhxGGEhE96?p^MuT@NHUC%wS3E54A+C2CoF) zf8|ZEoJH{GpBbEFwXLnJBIs5py&E(acCd3gPwg#2^3vlNt!{BmS-z*H33*E}GWYU49A9MA62p7r>lL~8n~7g@;%u4H zv?(Y5nSG^ey&MN8?Fmm}xWb}Q%=HF?_2zV=hNJZl(H<9ZIqF5D1N#^QBl%5BM#6*! zzoY5Y9QK-V5G-D(=ak*1hHpZ%T#bSs;L$0R1gmB;?m@9zZ`hCgP!V-RToEsy^@l>8 z*{nFlMO9hEx^Gb38-xVH%SO0c>q54u7fNcD6gX=gL6Den$TN+cX76g!tw(sz9ofJ7Y@y z?g<)?5`3W9jK-Kd#11Y9vPOwIA*W0 zOtC@&kATz{Tl$CcsMm{@cY3LY;?4w8v-Mt*ut7FPp4%tNqBGYhRU8?6w*QB^Qse}? z)Ybeo0?LtXQ<}@3%q$hnom{^evl**`$gaQP$jMtgV>DhI4yd%UkZGx~+ci{Vkrv49aes`bOtlW|@lqJD0R{oYa8ST;+U13-5a(mTQt= zIqeJnLZ+Eu#?r;jktn==gQTPEt$x;4z~NvMG-JQGK5c^HYnMD_(O#te@f=I1pR|0b zp}VXb^n0GQWcZ0~O4*z?^X*I4<%aH?cm6&5WMxkP+OkplF6VAKJ}#)$FB&<+-$W}n z(}R&^I@~V!rWFe+uyklLzSqj>Wx0;!v}ECe-`@SXKd z_Gs`)LsVQt>X2DiDGOs2*Bh~e1lvtkDu(&f%za>fZ7hs2Q3KyhcS$8p+8{*-3mHt-Kr zH?GHz<;H4KiI*HGYMlQgR?ayoWp7+$w7p# zZGU8#%m&Yd`mJ%*`KD;NBzjZ~=&+40a^XN7+F?T4$GT#}CumQDM~yh|$Ur$c64IOX>|Li_ z{r||dF5ZJu$@j-%(_wgS9)TSZ4YLLb*;^^L zW8FA_+=)#ekbC~|dcM(SSQcxu` za3SAdq0k&~!p44l`f>GhXtl{PaC+bpLle^EgD2K0oYf&@gEh9bY;8pNJ>=DA3%6R7 z)jlD04xV@$(xIt-1|qA(r7QXPBrTy4YfMTc4t*29E~>z0_t^R?C+6HLBq4r2M%O{P zOC7+VJT0iRU-pP73Gb`xmsAtOUcIVmk`)b2c-;UVjof%OR=9;~^l6_wrP%bvF1}VJ z*s-m9zLV^{PPM+O<848dKztVuxRW}4jyI zSEJawgOJlR@5Ot;X5{IH643qY_DbT30fB(k_%5MPM@1b)di&|^F5ZBPfJ|qe~d0q<0(%0dAJ3pt~o8%Y z;m&7g7?ksD)i62z@OeTyW^RwGt}3+;?d3~cwd%xb+8Gq?l>*2_H zd35ql#l+v8`1!z=LbTrUj*+0sN0XqmPR?MzQK$#{df_NLWW9V%DlRajb&=++{OXAx zyl+ImBiT~h=d?MqOIsg@Z@=}qnX<@?*qhqO^xLe57NSj`H)RD;fhj81Rbw78iBv_1jo@W>ag#%UqMxN(+FPyQ&emKLE~7OB?R z#y5S6nOiU7q^#+;3+26nD{xZI-i2*%(#jcT2L%`dW@YCBFmRys@m#mwUjBOE$ys9% zzeeZyarJM?GR;Xwqx&z)mAh?$Yu5iEz4?DiS^fXDBEIfg;k=$Smc0S%75~%ht`*^7mI`I{%jAtC zVPXFvJc&{I(FpJ(`R<0-l!0Y-h|ZqX0z&$o{k#^V%p)uVKpjba>?E3HTd5eb&N#iF zYd4*<>BO<_rLGB>x2RcYV6RC(Z=Wc07!Nm7=mi%n}8%1vW&2K6CM zx*F0C$lGV8IcuAs+?7qXRIPH>3(2)`_0LwD^RB6v9VKYbZAwl&j-+G&V7yEZ9#2Eh z+_Gj~(60_631+Aii>lQguyNJ-ECtp#vnYHuv4xPct&=u4MOOCvQ!w!LjY&xr;*T`F z)cSM^Iyd|5VHuHSfw`i<#iic3CSp>o^g(7I{H zl$metH_xKuha&$N7La%!^-zJ%(6YCC_tciZcOFu@A10ngpPslyvj}Xg3WGFVAd5cy;xa zXjF?yiheZpsFVamZKtM*$j$Ry=_W+7>B{1ZP0fp?B`LGh<~6EquTK!U-(Hf2N5|$c zbH!b7YBkl;4V1hmbN6~CB<;jIdL^BHe=Q*RJAl$LGo{{HuaPULI9YrC+vK5Erbqnv z9TNUE573QHNM`+iJieM+PE z4mpL8a3nr&gU9~EdN0R=P|CvwsQ2N8(d`Mh0O{JUyWZi7#$1D`ye~)8LRStNK}J{mXi zo(M>tYtQbucY*1B*+&Ia{iO<@?p!(D&oSIS$sxWP`K({wQqw>B!#VM%0HV)X03W~a z9b!;7;g5&5C=+`Q^&d_t5AY$3hrLluTHhPZ#D~8|OXhr`5Ama`cjCV$#hdz3f&XB~ zWjsFn7#CJygM&Pq8wgWd=5;ucj%Om+;;l9PJx9Lnw>51>=G&^I*8-%!-`Bj}nHsb; zWPu$Kd)Ha0R2^C}m9aXC5pNYuA+s-Crb`0DBudhd%MEtKdj zdww3bMVu_IhV;h%Hb{S1`&I6^{}Y8{^TB`XM7w(BqVbb;+QQmP3Q{-0_WY(6ah`6& z4E4L)B%zU=wt(w#FV;nH`)-`WhC{To)1Kv5%VcfA90tfLw&t>D&eNB23Jv0>HroV) zKFJdUh&#?|K05lV6Is3r^tZit@HoM&46Gme^V=1ppHM?$o?j88&Ni#%;foH$Ikdfk zZ9EKl)%*7N);#!&3!lh&L+=uA_Jw_kIbwZ_M~7eIU+!A}j@dvL79jU-{yuD&bBnF= z|FAZo8;8qeMWZX7BB$(w1vJIPZjIHjr*~ayZz<1?ZL1--RIuNN99n7Dlq)yCe!+jw z<6Pm&X=~kK(sLX8xOhf)FQ78Amcs7W-Hp9I5Biet>{7M$`8K;JoVVTJKAauV_%?bZ zzpNtOwf}EsVk{TznzlMikwR?A80j6*w!~NiS6$ii6;IhQgRyqUHR-p%XWBZuReBhTr+gZ?A&pX-FNO*y6uR^#u$yX*#|~fv?(suS;O6k#i=6kzUA~|<|KPK*PJ-*N zA>@kjgFQgH2r3wpMML|*Hlal{)`zh0agNABE771#*jk~2sTZ`9TCiBzhYePZg< zo`{4{5H4wdTsWyC7*8!EcjhIa+tQe=48+6qD4Gs!YaO}q32LAo%ba_ipdgQ!*R?^l zVm?M(QpS3{9nV#q*FqkWsE9(iz#})Jh?w?35Urj`F^#5pLwC^EfY7^RVL(&r>Py*% z4Ps_`G!BUwWADf+1b+erSU!R7m_{nn?wef2c2Mvdu_fbZ-}Rtirm+0f{d9af)`6Qn z)DWou$3mk&)-+N_MJG-Mg}t&3G=;yPW>)q$!w8X^1#&S2PU3=aNI7JtpZe23{!*h5 zTW{!k8T`6J@f8Ip$Ww|$%#72IXLF6jX9VU~t0l(t-x+KS``yS(+4U@%$Mbx1LOMxV zskpGmzeTK3GvM_WNV%_^a4FVrOtv+*kEalMD1B94ksN|?ZE)!fRq=`RA5<_X#8{9h z)5+7D2-f}aF!ahyS=r!{Qc3YcDqJvf1x{0s7}t|G3w+B z22t@~8}|a{nSR z{PX8}Gsa^|g5gqGvJ5Y%oUfIUhv`OC95~-GR$beN8{_OxI&dDHO81cb*|M%;Q3L#d z>)T0O3gc<0V^DAo&C!XFHmf0J#Flj=0<>avhAAhl05`|To=47Uwi}SPXA#@Po=O1% zh3OVa_8Jq&;094#Np;MQe|GM#O2>6D|EI9wcub2>DfI(A7HrciBminpH=M!MTpagX%4U-GI1d&G(0gMCB`r{q_{5V1jTDgWd_r=oEN>~dw zJie!j`}m_!@t}Zmx?$RpTqKmn!GgTCBemKt=$Mf2#p!Q!8;o2@Z6ks5P2N4t_A%b%(d#Kj4* zG=|Y&*FElkTt$Zp)HT2+Syb&4Q5O}*w5@>EOoI3^iso90`x*zGcY}CKcmp`AIL~xM5ygnE#6BY*)LSi( z0R9y}D2_yypnr3Jtw??ZRO3)JjJh5?}(%6G;v5~ z{{UsOD%$_m-g!qgne};GET97e%;-=AL6N3H=!6o&ASxgw0*X?kNs%I8LWh8gh^T zl6UeQdqG{#lz-H(hr`!uF$+&Y9{9EkMXB9ilOQQp*B%n91g}*9^P}+SMfo!7J@?=Q zAXdVS1<$CHUp@vNl2Ch~;VyJ=2h_5Hc&kYrTJx)XdjNXukCmP;Ci08!qUjUY1R^Wz zi%Kugz+jp&yu;E$2<1)T98gh6B((nZ3cf|A(8YC1K#;}d6HS#-%yygc0bQiioex@i$xfypLH zK-(TiTpI-bq^*>`WeJsuC=R?$YkUbN}qyahVUcXCxnH3 zX#B$*nrWohlWe=>4~z2nP9=>zh5twd3vwra0(~Od1{RxWOSVt)fiHV@`Hm`DT#|;i zr({Zo={rKZ7ixhCU*j$o>$!5i905@ zFs5uJm9b7q!_v_WA1?H?U2zZU@by^NtID5yBO-Jn`f2-`Jm}E{#bo`Mg40x6(9Lri z;wsglOdVRp#{Gm32!u;_^y99T%8ADKytGy?cdQ@EBe2{IslRUwNm6C zPQ3mx0gmxOlYlJzyWYjE08q629r}YE{hw7Z|Cprw2U*SkEx_0}i!x>L>>q;5mjRyh zQ@YyKE3BnKx5*FdAo}|{a3m*tkT4{)<#|YZ(1x=u8~4;0(tI(eZS8Nemw-Bbx>ObK zNI;Aj*K>G-Ke&Z$AfCtPCJ(3|s+s`Bi`j)1cL9lmqs6+$q^~hXb}QrV8cS@;I_f~X zpV--mIfk+MOh_u4AXsEXe0Rtil$x^Unq(#|57a|Lor@Y$-+|SIf{rSfR(Q<=s>@V| zr&!JeXgWm`4?nClznaLFDzDHv3~QqMct|9*-L+OAg$xe zwpd^qzvnc(wyTfQNDvT$^erLq zB>&+N7aY!;&|n!H|F~;X$i5iibxSx6;JG$U8suf<=Na-GI9vY{&~${kudyshr9ifvF)(pmi&{7PBv zm-YScU&|GvAw*$0_K{O@=}0a-KHQLSVxW5C%zm%o{9fuL`+@a4FE5wFRQmqgODK! zXCji|QBOgl+Jkz?=mVOFv3g`)fL78G2PO3QyeH5@M2!PqqrW)Olshwy^q>!8EAEW& z!Q6*Ob4y&LeyfIO8iFs&$6Tw6K_vl94QAIO<;?>y|CmeB=Vi^9@Z?7+8X2imD+6B+ zLXL<H?RZd-{S1`!LQaDue5gkEV`}xlnGEWmd ztZ@obvNkAGGTzk$sP^l|YV* zPIt~zumj0zXi10FS>}o5Kw8MFw;eNqiFLDg zO)`t|_{I8*m5df@?Qdk-q9kYlxw_y2(Wlngy92I++^}-v7?u^`5nah~B-_!aEF^G^ zKO)HO*4Y71zXmHR>om$0ncx6_6aWso8=#TUs!R6Q+BfPQ5RU1Nd(;k;L2d5z?uHol z9*mRv2EMNP+axh7Xg60@%yWo&yc8Dvt52%b+hD{Urh41Fe6RD(@;uMjvlj7p3g%sZ zt$y3q{zSn@r)@7fFm?U4>BDLJroCxr7jr!bt<<5wtK}D8AC4|qoHH~ppJ{2m|G!f# z4ZUa&C*Ja(<(Cbli3ZF)Y`ONb-Zy$boKdC-)md<*$#m*C#z3;ZH_j< z_0Qaz+bX2Afb)G&0XLyJ-=K}z{BPFE#_EC7T=!q?Cifv_#I+p_49Tg^Gb2l*F6SB+ zDFu_BjHDNByswaotz!$aW0TA=q4hduP5SgeZ;_{uW9=TZ9y2zFStpmDPv%fWQ{OBKpjh_rT)ojLb!2mc zCq&c9zB484BM<<$89wkG4UM(@*kDsDRjgN_B>5d-S><2$z&J04tMaQqv|u9SU1UNY zE1mur{7GcLLG9V*+XZXqpX9RAyKF*0te)QkduxGlFl6F^SpVfDb4Am!yN}bnlE0q4 z>cofhY+M{L&_l~{uL=!XX2{YJUrveu;KOi!kg`Q2zVK)Q3PmbLzFhHU@#K&ey^p94sw?%ijXI zvL%k%``x~JJCu9SROM|Kb6cA5Flj-dtDyU6?Fmfty(A%lTax3K+tu$KwHA%oAHB4X zr`V4=74^Hh0dqV&~=r)^?uVuTFq|Dvrz@1 z(@kLuVD6WSeib2p#~aQ0*Bu(9mzI1nRp8N9Y)mG%i9J&MOq^db--*0n>}bJg%%dwJ zcfZWofo>l6y^64o zK!tcmKA(m%zmLWCux)B;TFqXsEYr1R@d8cSI&%%~kmO9*n==97oVq4=U|QJL=d+0zD|TXB zbiQAMN=gGn$pUF}on zh8lO`iw25lsxw|xw`<}kyun!a4on2j?K>~L5|5eVC90_PQI=(jSHv`pUq$^UMfH6S zgRfT83B2Jzcoy*1YAK5a>;Y|#({bK3 zCQlN1By~%qOqoRlJgbr^sAIABiXIrA<=F7dOa~TP$Q5d6hB)I$liHoF3<}41h+_Xp zKz}(iF(|7a>_*0l#}({lBe?yIWs?06dt)P-_D$5Kn*|ao72c{Ad!Ku)dcFN#l8=U| zQ+O}vyPvdoJTpeTD}m&dD9$wy`gkVR{?^-2WCo@vJR!7}`3BR6A$(5;Y0P zV@bv3e}T)T^|1W#B-`zvEN&(94XD&%kbMI;w;Zl(+?0vknTB-VQbKX8{&aDQlYmib z_!P^}l@}2CmTzg-Xu@p3DEV9WZ1T0t$8d#TD+%bM&Ct-r%s!s&o;tpT>2;mM2$3Ul zTD!K3xqb5MGcJz=1tt4pEvRmTrSW~G^xo}QK^=VpuZ+j+Xn*Fv@3Zl9zwnjV4C3^3 zAn%L7a90k6L0S$~C`;faVlY*A;ZQZkmR_qw1ow9+xr`XN6pKm_BrPv%bHsDBe&>eU z&{)M%vMljw(1ZgHO1BHJF5pYm|jHymd}oBr|NGQ2Oo zDr4oj!41lJtXFV62AZ~>*}O<^Pyq?sac*AeRV|=JLcU);uM>s*TV7&<^e%%9yC(mj zAH|bAO3>sf5~k|9)^Xt;*`?W6bn)$B`Ci9;pBwMgRIySwH&Kzn9q-}|H4oR5Hh{zjCiu0BN@ z;Rtc$cr$M28vL2XTX;x)WA+l(Z+9UiD=0jd=!aAL+6$z$#WOssndmjw6F^XR?Ruez z-(g78*eQKMpqoDWn12l{6czl!M_ancc!X>Vc*9$i;2{IDGc+bu8W*G1>ZISjPHoix z!m$cd&oS}QH^`k$o*Q2ZWQnv?)O^ zGHB}yhNP|Y9fg>xLGQTrSh3Pg`1(#`l=@OHEF8W*E6(Y_3d|kYH*pOq3}w)OV@+bC zRL@P{?fCO@7;q(>J4YJF!r&iS^m%1p2bNazW?Wr_u%^)vbt5SPzNMU&f`Z4n;A0S4 zqm7xAZAY2FR-n^qLIbu3j@R=Ii_BdTS(&{Zr{jA`$4x_m_5Lz-IcX5_txZ0Yu@uUWjQ9w;v&Cy*xWl#Y$V1MulwdG{py_ z+G}T3`eILqdFYoBiGlHvYG#}=eW2X}0GInr;M;IR3zk9B&TJkf#37X=-MS*L0+nN` zJzwgC&%!o#(OPl15vg-sx2|SzP)MBa8x``rB4rbgP`5NT>|&f#W451*(3<1?5v`dp z!n(bpj)$U+>am+E)^-ajop>l+TY|-#QZWPvGk4qmjHRU+m&BFww_cL+GJ!-@~U+|nxqpT}^Ng&fI{4IWM!)JL>DXcn+V@aX`#)}EgnDYXU=7I5p6*Ih^ zlY2LGh>3)+Nx0b%%tW3~#KPb(a!6^8b0_qvI3g%Cw_+ip28{Mv+30r}9_n^=L)0u} z44Z6};)`%TzTb$8MT+=o$~Mo{+8Q^vrrkTNlE(H;Xy-_ZY~aI?hK-qiiZO2yJKHvz zEzj3p0hO>NC;mE8W{fuoY2}W_PL>)|n&lBJMklKn>@_&yiXZ97ZH-&9+Tz1yd zYS09g)~}ZxSiwHq%5z%XBij`-^Vxwd(YjJQF3e6Adn6{`z`5@AN6M*kL%9SoK*bo@llrD?hQdeS%;kUO_ znh@Np{yyAG|2g=m!0L>3k;>Wm?3AYH@Y5nNAw={YBiUwzMj^(Eqrk9pjSn{3$)+~N zZd~4;M7u?qst( z5#hM^nNcn@K^qNjdcGGo9q*&+R+w6|L5toPAMcVf-VT$&La^~sJFzyhOU3l-VL)3k zZq25O$LGQ(czUv}aD8x4A5b&81Y36<=T}1=Kou;8Wobsj=x|dDt{5Eb?frbhnUrTt z$P}*(W-j;CmaA5I&+VM!t_?GIWV2RMYegs*Z{jdPKuxE(`EU~P`js5Vmg<5{K;BVC z8fla*o~X}Q*o)RRjt|x3_=08_Y2)4VCrR>qzv>8zkCP0)U9VZ2GWITnF+0ePXq*DF z1simxs`YKbZnuvsG)7@()e6+aH5qq0QIvO+Hrt+q=knsoJ~lI7Ey3*NZN0o;o~ByM z*zEM)T@Z`@BYQf9#er=OA~=b>VRwZESr>BuIjN}i#Y-{;63nk7(a>m?=OrC9|Ca79 zxzH?a7uM3T61UkHyZ3EEWZ%AhtD9UNht3&8&}SF2faiVG?0@JTsW$PBg^QN~0{tw@ ziivu}Du@9A5ATc}jsQO&UH*Chrv?6Lfqz=y|Iq?tdxr#H-FGaw9;5NSud}#lbD{FQ H`-6W0H>it+ literal 0 HcmV?d00001 diff --git a/apps/demos/testing/etalons/DataGrid-SemanticSearch (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-SemanticSearch (material.blue.light).png new file mode 100644 index 0000000000000000000000000000000000000000..7c2ab3efa148471d4ce5a67c703b22fe4eedb05e GIT binary patch literal 58714 zcmce+1z40(w?8UfL+8*TodXCA44^cEAOZq{z|crYhosUi9m1fJA`Mc~Lk|oBDk(9P zbg6{IebMhb_xsLso^zjj?>YbXd5D?4_u6Z(z1Ld5_1kaEeI0dDVn*T{H*Sz>YN$N8 zaRcW&@WW1s4}4S2pdo+bM(7Pql{*H0SleB?(M;|OE;DZ=F)T7FDlhZZecEjuy*zuF+T+7~rHLusIakPU+(js<{C%X#BBTF4&Ss>Pf1l|l zM$W%at^2Ki^s`xh@{fK4eP1a4_DfE9&+(6rOh(H86j=G+3p9;}_2-7_26a(YE-nYamt35jhq50%*U1(Fk4P7Se+&EW&8w~${(GmRG8c|R zknir?(yyJ_=z*=B-ESY~nmwcBe0SY;=b-b!zg+;8%+>$d%v}@%OB^JSGxaP#CJ-% z9@+XF*s6i-<%bsg(_QzzBKmXxtrh;K74y&55?PbS%bQ)KUs?Z14s!;!)IQdwy6CJ4H7#)^G$$F;vFGIPZk6j10h;FV?RPU9buz=@62aGM1ix;XG6!z&v+a1+xKj9kY4H0J zi1w1PaU>`_5^?{|pP{dY}- zyo0PY1Cx11OiO$e3pSGc1tC&&(bKL#!C#JhN3~Uf*<$`o?tOuEsq}Q)r$V@&NJuN@ zYXz;vsmr{42ddXDujHuQs8PoMnDgErOAUCkEVQ6MnD$qhtV$m6%?u-oo|_d}pWH0cM~w|AHSZ_WQ}{l*zp^65UMg-^hZiB}z7cNHs6H!{O;5Sw zs@*A%u!3+&3%69fZ$xf@H6UvPbM} zA_^q=sb`BOV`_5CJZj5dyHWHIRmk+X4bcnPL8W3|^ObhfmFMMI2~T9y zdFGsq4B!wQHM0JhZKJ-9kHY>OTZz+KjbuiCn`Tq9>kp9o3=@l(c~;*1;Gv~4QZgg@ zDJRBY*3r#Pi>4OYrFYt?ZCAeek5PiYwe7u23rvzZq>Pd4hr3zJv$K+$`1`r#WKc5; zOkiE&k|yFyR|&K0RWi9qem}dYQ=E}7VNEfo#Y&S*mq${Oyvg_)BGy@f`vc|9%}@`t zO?@W;M3Z?j4zm1)BT+b=JX(36p9_ERrRofq7j2wm@6Xx#x1s$fxsDy9g&@aXECn_R zM&B%SUp=<&2MurucVDE6UR*Vc{zyro6y|F4(7N4HDtmbud_m|2o;aY9c9>Y@{;x)t zW+*?qz`H4IwWYz!)g3%kkJN8=)~?FOyrt7z%)X}QN5bc7ohv7j?euWQ;siyC`kfzw z&d;ISFIPC_y*!xVHS0KEXq~*#4qIfqTC#qaKw{SZX$92*{o|jiz z*QH3tI%M0dMd`wfCG4EpwDn0tujQ1jKkdC5I0li=7IqA1Htn7iXHN%`MA1>hzg= z^HhF%obo5Wmo-kivQ>akCf)^KH!TUV)tP4JM3YCCml>S&IGg>=#Jy@&9eBVnU62)y zf#n5e#(D&qLuiyUqAKCgAzKossGF@Z4>{3sa3{29j zwHk@T8q#X_!F>5%Se_jYN*mPJh} zlDa-SekSeTvTk_wQ4-XlWqOX^{p)4D{OjSh;bQ(aG~ufsS@BUfu@voup08p#5#eYt zMBu_K!(N7BuVW!~#odzzd-PYe*8K07tQpK(=MsR9r`UPwTN$Xw93y_zajS~R)?;;+unKjC zFh_j!ZeY*5P%*M;Q2)UoQL%Xmn!MbxdgNZa2U#`jox6Kd5UX#kxo7Q#NJ7h!!o+L; zKN&SS(@u&WShe@ywk6mbTofg*CxBNFNi{$Q{ymS zT|70j*s1Q=l96piziA%UDTrBeclGWpArSOy)I`d*CY^^- zW*_~#n|FL2B|*GfPRwQtwpRu6Irwv%p}OP`_gzyX0eR~E%=+sOf-=>@7K(&}B_hQ( z#I;*MhiSnf!wxfc3dDZ4W_?YHHgKyMz38P(ah08L%XS-+o~AkKpH$cgbfn7}QUpua z4ZM8$G9t!Nog-3RhG5>(KaD$9Sa+3$HLiCbN7)iI?+;^Id%7&2<+<)R3=P8qjwme7 z^zr&k0#{wGGk=rqww{7^BrJUq zFYekUU~_ARH?8|MK36nzUwI`t0e+_AQ{l$k}sw%@gikH7yO zN1;79wSa_l6Nd5YT}q(N31F+4te;zUeY`q>RDL)T2HCk*&i(MgYQ>$8_#%WtH9&0fF=fi?s$#my_XhjF= z7c_YCNvjonoX5jcZ5bM|u3#~oB_hx*!?Q>$9xBL3Om1LP$B!C6@PMHM+U>0#RfLM8 z+~83%i>u&HTABy~f!gUb+l{7Co*$1Qon^U>a}QTGLNCRN+(ID?ozSFp1B!`6OGtKg zxyo17pP+lHq zHOiSi`N@%gxk}wG)7tywgO&FdzJ=LER#Fw)((^u@R9U9`3vZ_P%Z=2_Cj}En$VOV0 zvRwmOr5RXlOQkm%Sl8PK&^04m!%)y-+j@En={!^X9oCxO_jEpBUFL$ZmpZT&Ie0)% z6PtCZpJ6xp%^vBruz78;pM5~Y`n(ot{-A1h-YJn{QTke z1ME!Vn|<*&sJT_>%vM7~n-t$lGmgda`gN+f;4gE;tQx4ir%p|5=|L&fO^2dwh?gPA zhv7KdpWo)|eDB8>2=1Zx>??TTn)NBp@58W^&u`|-6{*J4=N&uy4D;U<`r~ROMX!?A zy84+fgGK_@nf}1~bIxLP?}Z|~Dx`}(N`0<1xaVHGwZpdg+IZsfS(o9ZM?LEDl66G3 zg9D{g*R}LhnJh`(Zk@^-S?6L}evs?Ox&$@Pul`ng#8>CineVp!2JW}Gg1ZL~nBBkY z!W4gyo6DXwg^{MX8B`pnP&v%cG9|`S52N{%ZRh1zdJEpXLdnr4SeTgSCr=2vDZ)2`g5M{kaA^Ml6oDahp2!PVMm<8gLS`=~$bVPi9C?yS^byUA_> z){I%R9X&XU{yFp9<NUZ0+V%VYhNEnw{+7j{LISF5ZK~Z z!FH=CI{>TJAtQ>H7Wa9!`nVbU>e}5qyY3;=lYUj7cS>G%CZ5J4JHEZGY1GOC3LjPv z8y~+8_>Cm2*5kP~BfI$`lVdZv*1odf2)l1}EeF2sEu^Hu9StX>(_%b!IL;b2r`baA z0cBPrI-zl>0yqWtTwLmA?YSg11p{Izl0(ss2pi3SL>Fmo2f8QdR$e|&`sL%8JBL}E zAr3eQaj)qL>X%knN_~}atT0vJxV63e`0eEt^ZrJc$W{AfPYbO@pik$}_Tk<~@4t@q zIPzJ6W?L8a=JxImvI{_!uI@htws-bwOxGLXz7B{5JMUKII#<8NtOBH{jO1R;goBk| z+8g%`V*1L*%M&5Zi3C7Fskr-isr9)vD;#|^PY__%;ggqib$TP|&3tR;JV7S(DS#9A zb{|~*U<^6Uq%~5QDe0=}t^L?II@pCp5OPWnv)uIV+z_nkMX6 z>+3SCtk8KqZ}T)H|C?+F*68M~G0F9?_osEv z@84$SM{3Y^@6ILnRISXM&nBMBi=nT~tU^LEW$h>A_F9qe>mvr9_T5)pC`4KR%Ad!99DCi{{CR91Sk@IQV$#}^v8xati#SQG!rlX;wDrq-_iAFPt=H5sD+Pcq~vwc(Y~ z)WSy%Bw$)j&Zp4;VdYUgwHDCY;rl#t>D|A#zPxT-`;S)0?1T?SU&R8k)UUIZ6Ly($+T(*Bs1< zlxW?;pH`v6{90;rEJHO6Ih~C`WZ;6C5TmUO1 z$<13V{XG>IW>CYBl>Ixrt6IwjFiA2mz)3mW-EA73ddcTH=E@tMv0(neMi!x`7NmB; zfb#THH-TzXP%(674)a>mDZs_HDZzkYgOeFwt;i$#v&G(gbEPyL8kmy|% zqJxrM@2sQL+b^!EDv<(OU~=_BlisHy(T=_!y=Eyh){nlt@PffJ4Cm~XQhbtJOYS)U zs+{&V$XLHv&DmLy8A&EvUtlv|ol;pSs7o$Jp$7DuYsYlP>ox0JvQ;_B{n(@hs0 zY~v;qHZ)nPR&iIcgxMzR8(J1*@rj*x>Zjw`Zgk>@>#0}*g8g^004+7Ea}V+A2E$ja z?lAw17A9{>Y2|aDw?szE)Sq|it>G2nSmSi_-4uhZ@Ws6-JG2BoaEj%6(3q&%a&m6* z2@)3E*pr`!vUeImO?HWvDaumDl_~mEo_A$}<7{J)%SU)56UFJqt-gLRR|xJ+keq4dqLGEx;!q4%cS5_P^a}3`hd5B>3nh9kfV`P{>}Hg7WNzbNg#r zZ$eVt(t&Y)$2G$48)llT*pI?Ez7du=cfovx;=35!&^TD|#nN1?y?q7%UBTsU2-I$b zOZqZ6bwOJbHb~EIVgX^JN|bu+E@!RD9rI_Hsl_;G>c)$4rt$-sr-ZXO_<0oiwuKYm z?7DEQrrPc(7W^~ALbl8x2dv+Bx0i(NfG6ypciJj-O*V{pu} zA^Gbk(CevSSehZXqhf2z_d}}$hRQGqt7gkxc|B$;eiLopVUna8x?CjnI3wu08orU8 z&>CJ`1eSFt6qZq_SV(UQtiM5K0stW#z6R*9Te*0BeO^>rIU?D@R`@PR>#~$?(-iZ3 zbE@0v5O4{NNlcOwE1@GPzL%2nhb%D!{Ymv`DZTY$9og)Zbv#44&K1wKX5LM*jYcKy z4>mAF&A{Ch9UvYIYz;q(d(#6Yn6Jwc<#$mE`NY+LfU!tC78x)N>JHT0#hwYn%KNl< z2(GhLU4<2A)d>j$ixO=(0T``Xo9y%+7gjN>9rGj~W=k`*zEqIAuSONEWm){jO>PUD z`Y4vOuM({GQ$9(-f;R+M4OdC%@Or*cwml4Whi=&1m9lsVl4aP1;O=0B`4Fz=4%*yF z&ODLn1EP9|uW7C~qOPC8d9Ik6z7PdQHKD9ugqtgN8RD5_=%;g|!;V--mHVjhBLkdi zEct8Tp{r@6gz;U=`}6v%v}DTn*M!!fi%tFM+!WU=cAp!!>M8^)4F%<1lwTAa8lon^ z`f6`;1ikZKmDzWrA1EQ>h@UEB20W68W`7Vs(6|f&yAZe%6#+wVY%eYy@*O)*jF7+i z186lYu0-H&Yk~&m29lp?EEc=AywHQfBZ)g68&vWlx>KaIwI2uI=}+5cG1^B4=;twn z6C$h_H`|~3I4btDqhMAi|*yNWmY3v8d`E(4)`Be{MKC7ZC(8p z(}qJnpH368gr&^zs2q#hd*c{~4i)d!vcgL3&G3V|_1F@mC^jY5<1utp$6$RU=@=H( zA3)w`2_grJ;qS`;w*dp5F7A=1;?^d9+JKLt5dc+%W*8Os(7~HqkL5;TV=hC@ojcbJ z{1cbg#f+W07#_88RNS~ui&3J+cHHwkJ#V^BZdkKN%YvRkBKuFvdI*TV-Ff9|m?CO7 zT+5B(V2zC~e*L8=H7T1GvB$9Mp60Iu7j}j6`daR{!j!XahEM1A zIwv~z8(ZkDKoxdBCEx&#Va|JPmtF(BX%9_v6O8$*DG!0Sv_NqRt>dm&QZ}?%vAz9q z@`ZDs4G};FK6DVv(8sq1!KtW)=!e%ywB^DB2c7k(epx+gEseFRVdv^j)1r&$@1cCN zl!gVX6yg`qqS+@@W{AQy>Eq0!_OjxmANGuju~q_@`)iB#8JG;+Tu$SNp8X-`g6VYg z!Mm9!HEp9ah{NML;bJ(P!Ji7!W}wW89XFI2)sld}3LcfXM_-tVcMQZ>dR)NmT78DN zH*5ywd7?K!E%jU|oQ$T~lJ%0pI)3o6F-9k@lR>*geYB)-f|6vHD0=qsOmf$!;)SEa zBj^Og5*yK>M}He3{NK#4Mk>(Vs8z$N4T(_#XC{LVNH9Q3Na zA*AZjv%Hhw9;FKn!*^l3^QDc~`+n~SjOBa{(f&ODt2dMXNAQcw0ruCeTfm~PpTkY(18l%x ze?M^^9s%}4l>GPir~gN^{O`f!pBvtRSH))HTA69*4-i(#;wS;BK6;^Xut{&6Cmw1e zdWnzQHy3QE!1b8MFW7~4TFBPK4{%%iTWEHRRiR?#XL%yabDm!fro)4IIbu2A^1b=S zB94;3wux1sLNPV>4|>|F7lQQK6X1yDcS9!mI#2KJ`je?c@>9@S%vI4Su&*45j+R^| zw)OQPY?0V*B29JGpF_cZd`o;7CRJ@I!v*`oX)B9*caq+m;-4cf$PDEBI$<=8uENGx z-Wsl6xF|D+eVl3HcTx#VSDLC^cgu@jn*l!=p4g$Sj*4n| zOBz!vwKSx`&HO^^>(DRdhu{zAc6Jh-%cu?wxR2L$oy4wGPLR+B^oG8*Ykv(A9xaR6vki zpwEPi!ZfRtjYW*RFk!MAk)4+ z^rE%YEwEqDhQ!Ws$Qhw0gLuPff!3S=$CY;;(1_S0(1R@G(8JSs+l^D5=3Izr#%md;C zAzInO9s-C(;#y#s6t5t2())o-&vCClPC++VnCKwA#JCq)T=W2_w}MP_AyToxZJ|uS zP;Pm3PZ%MR>xEQ-V<-uBXL7>tANI8Ff_(=1eaO&xAzKDhvt~>2oMr9XG^+IlWWv{h zsDs{6ikAyMx06gSPlw7ir#a&4OC9AAa_O$8zJUmo;;1;Q|G0R>e{mTu{v_47-xlO>9TYirA285SRuc<#s>IH577b;^!)Vds_+p||FD1D} zcM+g!ijw4aULn! ziG!Ebid-x`03b(K3a>=?8!c7iG9YMFAXp`4nhzsD_Wa)lZs1LrC!M~vq3EBp)>cu> zgG7^FZ-Xe{`TaMkF=Ct!s)a{*{-QimFf;&Tk#5O)-m<{N$^Mu-O1B4{QyzRM9_|+w zy1t&{m8ji~CKTf-mcF;qj~|F`n&le38_mUPD6DU1+ijyz#Nt+FIkT0F_MEv0W%E1q z8qO8j2-I*66)&261wqMytb#4M9wozb(@%UtQS>XUfeo+sA@1p^%`b0~J&)a+YEoW! zR$IiiN&3AHU!c=C<<8w1QmlTDDR|bZ!9{c^TUNDd$E&&lP{n+xIc}OKkE5oOxcxX; zQ%TP8hEB22jJ_-^A3}NI)yFOc(&?X3>3FR_z;FZf!Ngx@x{bYP(nXG8K^?_fq1NCi!A|H(g7qQ<&xGpm?$CuteL!! zXVukOT`x>coREv}C>J)$pV!-z@^%Hd zK~qKs^-(al_}fYhf1jrnqpz1HFu&#Jq}^KqFwhNq|qkTsZ>x{ z*w9pRn#!hhy-XZ5p+l4nmpW@x9lj8P)9i=#;?uPvj{+;r9^_>CQ0?cjZ&2vHq)nu^ z!g>2?-v9v9X+m+tMnZ!wnR<%Fk8BLuZwkum33eZb)^L11yiH-5&<`ayMAwRiQvxs$ zv7UyuGSk$1xZ)o}suY-?f8 zhAs}dgoP~l`&x*w35X!xL+d>)^)*ejz@I@PZgfBK*$V!CVyytb9XPBoV%44J$waL( zo&WO@&uD@kIzHxkqm?=$SNKU{f>QYsuRmhtfGoZSHiSz_sk=|M&TN}3UMUnA^&)!e zkn7GIXRgRV?8~>r4x}^TUvdYZkycB+ zzLf>Mfdd;%Z)J}o6}F*8u$`2>zIl`QLKXE>z7a)>i;`QEEL43?&p z!71W676uVzYwR}l6|6n~{8ReCY-sa9g`T|uod=H+@F z)>r&`e0?53gY@BY?s)ZKHKIt~rWAEU)kKny@#7-LG>%F0Hh1N~sQ?~Dmopw>w6#l^ z^b4(dP*kJ*7Gn9@1KO|5sVw8WPGVd64sJJVYt|88S37&JM%RVjXU)6yxQSVcF^DmM z7!vX82eXB>5InAp)zk4sNgFB|zh8vwSQ*Fn4{PlTW>VuL!FZy)Pkf0`;0e{qcW0hf6)7Y>6+Abx@~^)}YdA7_QdT z9v~s4l8u2wSS3W8tITv5K=w4@K!kTyuxl-E>Zd2^3!{un;Wb!ERcPxbtk_aKM5OIy`=QsA@9{wLNM=*1 zt{}!;>dizgh)!$BHR&alw}4Yo;n0B_#iH zYqgJ>3fGghg)xsMM$S?51o3Qy_IL=qnS2Ui@Q&fl701QOdPz^;Q_rOZp9Qw$ZK0~O zygSu_)qhr}=Nj@mp0AQ9E^`v01G&0Q0py!acaYQ@Y1Wt5hol~Orx61N zpml;8&MCwwcjC*s6}8VyiIo}W42?$i~-(qnd`o8seH+W_Vz0NzTV z0I+_m)c??%mH&q;gINq7P_6*=;`OugWg3Gg$w>P5lgi4vN!27w_kXf%8@L)}J;!!* zEsSZubjiaeV!Y|_^7YgD&^y>+xFon_6jMwG&#~By+1;LVlAU&9y}%|QBxYu>zHRxu z^Tua42<&sIGn=b#qMu2YaIH#k z?26owN8b+#VE`Nr2pDX4oES<$HQ6Jrso}mAZi4Pb;o=H_-*sg7bT;zWa zIis-#jh3%I`%R*CZiFrYd6&ndo?l8Td-5)=E7ldq>n32*y%wL+Wzbtt=`j>Es{uQG z5*96bl5~k5bSeFLoi#n*UDyA8)x~ft)8&sn=vt1^c)Po&Co)cyi!W?!velzp8`ae~ zNf}ai_$5_$P_ie;y1BV4B)zHqGG{b1;VHr-9+<+6iGYb{z~>83!H`R;feL{SBQcn`tn({^dxu`VSaS?B;^&o zg-70Bf#&5TTRs$HHfuz_?Y|_BTu&xC*0Y?bTI<+`QDANtxF5-DwwB@o1V%_cWFs z)xB=fHK7aAJwYs*D4H5~5EgEgzyives2gHN+gsN(&r*J_;a?eI&Nd_v0_Iv+SC~lK zZ!(+?)_xu%f?c}jy&-XDeV%o}gI8BqL0wnB*GHQUaK_~F@WoSv!;231H=p)qwBN5EIUR9wTZiEH3SKk9U5De~<3uoRfh zp}1sV`JJ&A)nhD2a~*s3ET-(FJX&hI_h?a@@5+~voTk1@;&^6D_u;RdKwl)sW$wY~ z&U|bQIWBO{S-##c#Rn5&N(*cb7mvs7p@0PiInU>X}`O@dM+m$UM*B zK1V_)Wp5L9Q8!ufU&7P2Hcc|~UfT3!U#(-YQ|%%j>Lqf0&<~vI@_OeWt!ge~z~E?# zv}G>M<6$KUlA})VdW0H8@ZWDWvO@yiQPBg zMejt0S8{WC5?K;tCE{5kG{bERnaI=7)eVaw=j5oQo=)+^9#l;ClWy@(iCB5iTtk(G zF(2N@=8{ho8Ik|VXb18!)rs}ix9t<>_`AQ3dDvyi660)BXKKYw;`wJxeatYf*H+f- zLmQ`iDR7C3Psz=Az0H57!?W}|#e=Ykv;U^*CN^o@IA&f8drQtK3cNPq<5^bzS5ReOFaB!xn&I!#}w27N6R;_C2O42thGKd zh-Lo$T;aoy^i?EP|E8vYKMVo6Z7e(Ez1|6@yv`x%hQMY!m5^_iwV*1W0b`T6_Va?wH@Wn>xv5osE_J z0XpG~aI0}>=k+g!t3FmMo_Q16B$c)^@aUIKpsw-vD3;lKpmk8Rvx}xgrNIT!$by5J z|C>3w7iCRm9+DK3h%S4{2@Tt3T9a2P#re<#TKxM%9$?-lB`0s<-G6pO7^WKEZ&B^&?ym>mt8UCUYQO4e)X78+zi2~KARZ}Lf2oiAJ& zS($P*l=0`i@Z0D4&yrc`4WQzUP-4J!O!iviYPpe9i;@%%H*4*(1Y_e?r+hyqi&j-FXYG1OiW&~|#@q^d#OG2#+ z%XoM~ilsuwo1WPS0ec~3pEE)&0){gmn2gAnyAjLSiP&mkbh?vRB)FI77HQn#4ZifO zjDE(yAKS_b7DVMWfwnh$#D3B+PTA+o*Rj2{B|M1o9x3n^lO~N50SiQ7YVO;ps_H)i zPE#wl)hv*`uPkqx)^t;QaY zC${(&BI~pfT+GhuH?vhRax<0^y@GIilE_vczFn~O;AeE6U-?Oz`$Nh-`Im%uQ^`h? zb!2*-OuC>il%jXx%UD@JQla=kQhrZYaH3lf3mF&irGOG{0F^wmr5 z>Xf`_-5qT9T)cQLWk0@qFcilwavJ3wr1G)H3*K6pNcO{gmTh(&X$-7?(6t`w9QsSY;{*Puf=pbN#yoR6PTt zE0&H=9#!!ZM=e=9#JXDL5=6c$*?dxMKU2Bt>`xN$HP-9qgS$PrcLm#Zok;nUsXAKI z*!k-*_75B?G}Jk<2FcAfV{Axrznq79NG^vn;TJC{EvVGK1!&vcuQcC!WXM7Kx?jFn zj@Ca$LF0NDpudtu9B39GbS3_Ry=`fnkmp}>8t*1EaP=#U<0W9^`Y@7Di=2C9Od{cy z&iFZ&1EMTJc?Fc1q^%rv-dgWl35{OL2@^06Vp~Z8Rdc;oqbYfapksfE+;3yOpExD0 zT$9&zNQcFsgs2>kC={B2L7*P;DAq*0NL|WH$p=3iv1NWI)QF9$89yR>RA8_YO?1Ci zlPPR0v5bvhLSbOVep^gjC)Sdf7$uw_&bUK7Q`5&E%*T9g!=t>VqCs?jE^b@FGI#ZN zJ%nMW^ekC?nTx-EtZ;|@Mos`fvq}+!k?l$F z#^sxTEve=tJ}LeI8Y_((d@~}C1y#h8luW-cD zSX}VyE$KAD0UAD+`|kF$T)uBDjDv2v^Dh1-F_d5AYNX=lruvJd4keu24DM;^Pk#2k z_jpp$WrS$7p0zdU0dYEZu%bq1O=7$$`vKXEdu>e7o^c{B?pH^U_mFj6pno?2d z0y&jiIoC3s#yPILy~ACR3$+!Un?*gxy+QDUWI6Z_SgJZgH8q(&!+Mh;a7E__&Nt?o zlHB-X&7QOqhySF!{v16WTQl`n1RTfISdzGiJu;6AdrTrhB48!Gezbly!UyWdt@_|@ zE0u3#@yhs9m0gtwcjr)i=tLP`FQ-MF8TytMTj)tBDATn2^Vm}?jcwFGt@^GljlFuV zT+1yt-W`(1-)fm#4UJ{X%HT89z7Jvx!zn`i0MI)oagPadJHV&D)eg<&nOWfPK(vrw zBfp?G<%#-4=iu5Ld)BIF1m*GtsXbpyT>4z^?4q81-1^qDtdi%iUsxx*n8*B5f}e8a zd5TE>to2Bv1@BpE<;0aZ>NMehN`&bbQfPz%@x@b`A}8`}rKuqP4*!VYklqK{%W-!f zma44W;zquCwPiG(9ZBwCd`BI(cblFs_i3k~K!=zyX-v{wbajz8|fi3!l z2|J1)ilIx4x8)ACla<&Huw+YI1#&7m+5A;v!rl#SP&a~9G`#qY0(6(p`u^P`oej$}kFy?O zWj%5)US!@|SD9PFw)396D9?D}@U;7tZ`-!(M~F<1?)p607y=oneKU}Jtg3Jr>%sjv zpwDeC zF`3wAxtJdF=)eD2K3yNk6u(5TyyK4jP7k?9^A*(t3;h<8!rkeRriGo9G$zH@ShA-- znmIsa7Br%p3NQ?kJc(u^a;uUL>;ic`fYO`C6P%OJ&vGLFV#w{`5xM5`my&9N^P>N3 zO3GAX2ZyaK7r9Xws1^Gs4b-UDk9-Pjr6I$P9Om2Q4)k5CHPS}L)DzTyVCXfyX{7;# zqH~($WsR)i*C+lDrlwQ-dXiDLCAn%t@q3ylyTi6sS&`I^4&f(30e_di z9#l!$L6*0~yjKh|`AdT2@YLnxTjeuGy1i|uX<7l#MtpyA7{51WgFYbF2cr*A_wfr( zh$OQ;&$-ede8H@?;^GP_sU{<%McQh8a(oHiIllT11t%MlCViu|x}?f7dKScHhw(c~ zUbp=FKJs6;>-AarOXu0P#)*T$PfOx^!3uW|aYhRHwqob-8-gwMp^sfp6l{gi`;?M^ zQW&{Eo}+ZGV|yA?&elvrPbQ=~EoQD`6CGksoDOBiA6ZUb<*f}~d0-|}O=FAngC-yF zL<}*Lg{|dB)#63$ZoJ20qp9TE=qCZFlLL~o%&V5(fY!j%l=abku79#)(fRAEs7zSM zW$tnFHT?U_l>M(#X@92q-%9PGwq89Bd%KrnD;Q#76 z{$m9c|4)|kD}0g9keS!>^yafQ_dfMtEK0?sVTHqe>{-d$?U;OCOy={3jjZFIr^3$E z%eAR~+kYF_Vi5kh2SgmpLG*ugI4-h= zGy9->!I{9UPk{=?L+sWqYVL0^%#W_QuaXIHW}$#BOPZXydBwH{Fb^X+zA30Z%5r%Oho@^aFJ<`+~2?Et&n7253Sue}9>_HzE-&^uf-IpT(pYr#Y^(+}lv5kq8xPfCQ$J=Yp@?MMQ zqTI7Fdl+-OMcIp;xfsD<=-ve?(;b-EFz6nj>+1}=*AWQ9CFEv+p3L?PZdxqxAr zJeHh4qHdcyBbGtOiRq5|O=gtm=sRk`Lp1{KC+Q>V^(cO`NX%oZv8Thob;jv3*Nv}9 zL7}dcSD_1CdAi1U8~f$2cuPT<>oNuG&(==a2hM7@~(EZcunCY=n~R((%sOb;Ox z`$x}CnZxd6esdCp_fKYqa@1f25aIlQ-Q?>p+VdB#c}g%SBR-<|ymQ>(a~!9r5Wq-X z#K4~ndfRM?{5wT;o%AmGx~1xpC(>zytBfD&+Oq6XH6pZj{)M$to|7#@Y1HF2Yib8+ zW%|Y=WAZu6Nmp$n&s8evB1foG3Kn%NU&%hJ`eYJ0B1)rb1y;wbs=#l-!4CbQXlAs) z+dYSm)W|t~fF@ar%0b~~zEL_-J^*O=2pi^RiNdx5CmOV)l6Vs+aPq-ADatsRa=L{i zlYfyoiWujyb!l;OpW`(FfGqYTexLO_L0$>%`?lnxf%cf5j4HF7?46t874*wMbyPNdlTZ6!XuXXdh{eCrjwao@^6v*Xbnz1-+Fgk3wdQ4M7k3$|Si+){{{_WO4BY3Um*$H8{TX0~2=t;`aW0H34ibeLd0G*6LERPd|Ah-*Hb8 zEo7!CchW+6{96E$lG>$`QVB*j2~!)CND}G{gW`y4oQ zKsQj-~vt%BdZH*p#MGS*GB(({FX zS*L9-+gmj(G2I7w;rUNCA$nvu>4vQdLbT zI^a;8JT72qUn;P+`r0QWh+MAE$a4+EtBUob$4lWEI={0DKoxuT!#akfL1=!K8m z`fj*afCJSe5)3j-lRxk~o@GxM!*3LMZn_r^hkkcNrI_3jngHX3uXZ7^tssG+TOd_#~R7>GG3i% z#)SkR$XblqYkvx-Drz(<1NjS7>0eI;;l{K>s^oaL?!)Y2tpA;5TKn9_#e%RsWL~nA z;~cz6_4+zhT;BK<;Xg_9K^4oyy)O}`uFAa`aoidGw1;Le9t*VwI^()K0Jh|2N6OgQUwdV+DlIz_L&DU|Dsml?fvqPoPvw{2s!>I2Cymefyb%~ye}-WFVOCON_R`M zZbNlc`&wO@(>W@cIOJ08W2_JVjo*9ZTnte9I_bGOc>do~xx)RlEB)hvLZVts4UXI-(U3L64^}=&^@>c!dL$WWO8> z&?J&<9I8}|37A_Eda*RrF@K4wVAU9}?YZf->gH(!3k;_L4k2^T7ziHp;jOzRQ7(V zOmT4DVq88}(f^wfVn0Q|znJwU4|xbyGYiUJV;(k@!(mk7;Qz(lTZYB4Yz^DEySr->>(5-U}}1 z>F(-UYt^c%uDe#%XlQGfLJ#V*Ms!?@x9n~X8=t(Fizl33OQhj1u98QNxSswO;#n*n z9*wAza(b8SFr5254o07GKVJKscjtk^1Cp}}%+zg3q6yT(VYuqHjcndL26?47D*pwW zdYKqmG8Z^PHUDH-q1@gi4px+o=@NR5Xcho{SpmfA5#4YRv{G6lS$&6&?QSj%#&m=M z6*zFhg^!*KaXcgjBg9`(48r+0l(0E=*x$8hM3Z|?6^qi|9S#7L+avudfgsWUqF93r z50yT^kmzo9#s@n>GR>{vY!oIiV0)nLcqB86TQFSpDR%|pp2+c9mvien3Wes&FckGS zIHFhhAHh*D$&Q#Q;Cq3vC)f5+GH_}bdyMuqNtvqVeU4wgtIgM-Y-Yp=->0YiXJdLC zRs79mE;?m(#j8xeI9`)HLcI@74Y#GGY>|U$$Byw>fBw{hz;b18w@iF30BT^Kq+O?i zW?aQoyPM*LqQ&rFjmyj?74%ot&VJ*95>K8c#;^7_qA}D>N&kSrY0!o3=qqtboz3K< z1T#cgk&jXAz#&-vU=4Mfr(L)odwp$vEV%di@jpqF;@@+oxAU58wKA$4MJdJOh>s`q3Yv>FgR`YPxB)D8)-E7}^0Bo(RMOZh4eHp7T_gL@YFQ_Q*Q36yJAje+H*$#|g4#Su z)_XlgIvm9Ok&B%xbdn`ko`Q|Biqf1Rlot`w;YyiDj23^tWB6w2Gg2PZp5t@Gv1@pL z3Wv(P@r}mNvTuit7i6OZ>X?}Cs=wR1NBUK4FP4WCFd@BHv4RzLDAt~AqNzP+Mq>4t zR^hqRyT~-NL7OI6pODhJ?lWE?c8$JQV1rfLR$upume^*W#_)P^V+9;SzO@mMV5_+9 z0nLQJtD1$!M+-HXQ_$#R9OJ0Tw|Ss9?}t^M=~b7xOu<{al!31MMV^hFe~raAjhT)l z8Jz`Q7T>aG;N8Yf3WyoDBx|Ea8;ke~VcPb^krE0l2-_t0N4V%2X z9}8QDNk8ih9=SM}dU&7y4H5dM{(Xb_A7>ugb9DchKL`W-Ho7&^KW~l>@HF{XI=FH@ z7XOP92+Q`2y?p#1wQCL_g%Jiy#iui0yZq;Wz2-ZT@oB&)_lk)rH zLJAGn4%7=Cv2@}$z)ZH7ozY~t(_>52Treg+^fa+ayu9A}JfYB)zBQA4zi0$34|MtW z;e&(Rhq7)0o5f$Up1LR0f^jm~PX%8ichR$imelg&60i2GD(RRMynWdnhuZ9HWsZ!` zi@M-!bsmvI4xeg%x7tn72ouf5_%h5Fh?HWERXNwai|hd!8W+<(BK!l2yob*C6Qf%N zNWoV0g{iCQ0NP}<{@Iy+324~zokn4|A!#{7CluJeL_8$ zxl@h28T$PM&P}$zg1`RSzd4cq1q4bNEpoWse3Ty0`IRvBv%gR#u=f?zqf%6~uf1aSejyd33T#-;%ggNAz!d0J6!03AaWB zqdNCbX17~S$({vMKA|4ZaCxYpDvvw2WWQ5i-frp^1{sD9O7HP>vUcR$9J!2jnVyPb z7lxtg$nr~V2Sqxzo3<`@GMq*`Dtl|$SpLiaK3(p-f!us;kqX=&7LrX*PRiSho$68# z9_vZmCHV?06b<4 z9yqms(KQ}?d!(5wi^>#AmwW9ZQ-?NiO~W-u1PwhGwyfm(@)P$_(BRyc-zrVrg4m@5 zAui7}?gl3&a36Pqi*WXT)uOk^`BC5Y#)bJGBjTb7QA~Fmk-?)12{0ah#2B{1!;zmc z)NX~NB4MMDVQ~L><@bLvIje9vxhO;=G_R~D$WhwxKPKz`GWlX>CNx9KxgV~7NxkTM zeBUeevwKEjioHW|4{{<@^XS*#W1N-{lL;>F{$Cxp^cdn40= z=t_XeT-U87bSggQ%d+V~`iN}o+z#(~v z`9Mbs9&SfnT}AxklbCc+kC&8}c|oaWe=e-4)+U8{=ayIs%T|awn&6kV?2k+0r!F#f zeY7O58q%Cs-|$SdxYr2Z+dmUhBP_ikZFv10cY}h#Y85%KfxwTe!rvA-XYoB5*9_GLb>eizt# zchkD9%feFEy9#-?F^h+rizd6c8;3{lSjILjO6vP`uE|U$Hc$O34sn*}EtRulA~q(a z35~bq93Uo{33e%$jXGG}N8fB$H<-j@bTF+aPsG(x_4YH**XdN}P*$teNCo^j5tR$G zP+F&VX;wtD{RG*NHba(#K~x2zh$=2nqur4glazPJ*0f|g_mkG_Hlf`Rm0TwPI^JEn zX}MjUjgtczK4(pUM#%7Ch_7LN7Xw;D?6PUd_pgiCEDsv3j5>@c^`>XF1~A$}AygSyhME&{}!wkqpY z9JGW(lrw%~5;VhHi6a7<6i!?NonJUg!oO0pWz4$bRx)cDZTs;%XB7b`R;KEGoQ00&Q;k>$TbL?1N$OE<^hKb1J|D1IgI`D+An_K5Sjg7&+>zTRo=PaWltiAlEJq=(d!yPCg;QBOh-yQg%%EPmY0z>^&d|6TnZ!x@+j(S9SM~mjU6Ja6T z0L@pe8s{xJlDw)zB3qGiq%Z-oI2=B8HJtWGw?VB$jtkM+Qt$Q?Mh#x*lQU7>=s@snW*DpQ2j_wJM3@E?H_n-SN?N=0tb%7=QRIr_y3w z3WCSms~|KZfh$RztwH4W=MF&ev~9PUDI31rasLvbD%j7oxc%i;T)j?Z_*eg{Z9o=v0K%d4&2u=HknKSDActjq3YDca^ zT8QZDWILsM#O4tMQbbIyTQU$P4s21F;F+*{kP$8N^$7L~kahiq1G(N6?HvFS+pRzl z%%zm>sl~dhHN>b#!2L~TXp)PC@QWR$^ThO5zHn-nch1(VjLI0mm-(JU+#w3|ek6fl zm~4tAyKz>n7Ot$|VRBAP;8}2fw}fea!t{ns)c`M^VYlhfoNsSzJRq>L3DCZk$yS*y z41XVyU$Yn+u63%n03(&SsvNPSQ3ue!W^UY%<#!@ImFaHdtAY5uEDB_u9ENoZ)S!gM zndQ7<8?hk~1t;)j@5m6rOxur5 z9GnNuMkNF!Bh1bnklY{1AY+xZ&&>`ubIjLP zWj_59jZ0W}4sfaS>*3S_@VNX{sB8Td0u>N-EK6dysX0bv#y~E{SDuBZM=&|meBXdq zx4kRB&Id;e ziRa~d9X2*Z6YLlP^tw+=1GPAlu(qVb5aDr3wP;8l*poXS?44X31|GwPix4vG6u%C4 zC~{AxlA1AzPHSfO*Ho~u8*jZD3L2YU7zbJQr#(SU!H0t*1I{YFo*f0bKpg;Eo5Pc{ zhIkHr4&%Z4qIw9o1|Qs6lbjZ3Rixbnb-$5nvmU*NJg0{1W+t-6xKTx*6x~`{5V2)y z&H$#x1+}f%K$X}S7jXTaVyH#JNJaH&A90{RFYT$Rq$BFX?SgeM2|!Xx;juj#;CEcA zBwd6KQ8SogvhdaxRqDPR!%R1p;DYxm-?GAJyQK|R%p8&;( zL+DOP`UUgoa%YRWig(%WUHbdN_Ib19m>^m9r3k-Snzn}~#@3vjikCA^j&;wA1m4AUEcQ$l8PwWFWrUEOoQyQ71a)dH3#r`#a znPf9=nH2-yplWUl?Ttp)Ifx;1G*m$ws^DWh`%OAzbM9I?#4=+DaydP1WQNnC$$E5! zsbMmw$rYhtZS6$m(8Q{PE3uJwnEQqf&{{7b#A96UYCABb-Yf}wUFyzLps_J)g8J=9 zZzQ>@PRMA82)bKqp*Hgr3GRLU>m*0ryF};pCEQq`k|GYQ(RWsfuM3TT5@ggSS-VoP z4ZRNk`n-*mX~L$O<26G-@Rpl|H8uL1H`eCJTRGnezaST;$U7$`Tz{O;p3eH%a4@B> zUL4uS%Y_IiPj>f1sa9lh27hsZEF(tPA5pyQPKtMZxfKU_;bo3FrfOjb<|>pUbfk1R ztdP{$O3$mv!%XK%*lsxW){zxwsKvpZAc=3Fm{>Kew{_vxny*9Q6?Zk!Z_Mt_%3+yV za#nW4BrM9{Nz2PIS0r<(uCNUtoQ^udhDe^wEAmgtwLGH9Dl4VLrGcKu2$! zyRsERIfLPtJH*ewfm;pF4*C)G|vOyL!=qg#D~VV5msZ>%-S?D zG6rh&SfY}#=qQ&0jCyJ4BS|nOk@Sco5zs$h(beClqx}vh>HJbchSv zYgc%e0pn)Z1ZoE6k^9evCN`0I>2Qf6cMj?}2D2UbCE zMyJg|*CYd)dM9dT)o(B5s9mOmMx$PHx3I7l5znd;<})LJ@cCWGK&|hV%W)Td)Sr=; zQ8D(@UReI}PQVZNe#v=#vZ>NBQNz`vNHNeJ7}sYdRLEPoG!O++wVCh;G;W8@D5^#O zUU<_rx|81vkJ^c}^@VWgcj$OxYw)q8?aL-QT1ZJGPj@JIa=Uc*6GB>0TWX=mThLZo+J;j;kQ=zz9PZVaIOCn)1z~7d1w$i z^}kfV|DlY2Q3sAq<1Tgo;}~D8DBCFj#o&AJmp* zIdjyOCNaN;>h50gxxo1>oK0Qeyxyje0u2XkQ~LVVG}>cp=h1zCzdts z;Yy4}Gjqa?L8KWVk}*LjEXK+VFUx+l@rd~+N!Mkgg<`!1KS*bX=UZ{_9?!(Wsd(#l zclA>>KQn$NIMyRN*R5~v4eLuQ1vLBDi)_!|F;Vm#?3unn%`*CE6svsCy+US~z^1px z>HdzBN^5=bp}t!lb-mXJ?$(k05xoEjqZXaRpSnHQtqpPF8?*vH@qi+ewS6Z1@)CEG zj%e~D+G||=3_;glv?AXjHT3yj1CIsg&W3Mem|Z8K{%@dUWP?Ko9b!gelKhj{`N|X@ zdL9ezoW+NrIpX7#o1ZONcgGrtxI55H1rm|$Z%~4`=p--48JR>tF79u_f_vCDJkNgk z2g_=iO9ef_z`8hv^9o+^BOkkbZeCZhcK=wIK7gW2_T2o#?(%Ja$~Jf@p9${g!6HBN zJ@S}eT$6rQNmTb|aqNKADWu@WCf%hu=bMV}70kE>;CJz*s3c!uTH8Lzc|QB<;wJ8( zfAdIHNEFU!=)_mpqm#Bba$)451KMyVky1&gX{TGMx&Ak49zT9TxB9YzJbULddLjxv z->v(9RDWJ9$PPmO%$4c*l^b-wz*8!$mkkbCT&$b&b(rTm;H~CCo3y`!soH_?8%d#Y$T=Kyq3K@nYI@6j$_Gs&k1z7Gr4#ESr=tDPn%XE%hi^qm z+dh55jzNFdA;9g`CzYYYL+>LY0aNtyYrYqKr2o7J!7(?5c<2^si1Qlk(Dye*7XQYx zAeL-{^lX*b9a10S#P@_9b3-X|d1v{%b9l?w-7y496If~Lc(F{ziC%KHe5uU7sP^)rJ}2St7p;jV#~+A0?%;s zM>p`y^_kT6S*eN-xnuCRZwf+O3g2`>mx2dGE%Si`mce7PKkWmdcj*%u*t}$8RL5th z+X{4S_+mlUZ!bJ<7H3LDrf%w7oT{wblf*+pC%b00PVxgYR~v{n~R3Lb;Z*yS`%6$(mFg zWdGFb(+e5l72kO+d2oh5mC&`E=7iC_=W!P~G)4Nk^>x@sPeaRkjY%t7u_N!!4;UOY z7ycM#z8uEf5rSo}msgs|B)i(v~`9#@i zCv?L3g>PJm`}S|ee@SFE_QAnqz?t3ds*3R3K3C^0418Kv`fhT@@~i4(w-)Q&59Ucr z4v~%Xkc;?)%&+9JxLx~o-+tL%Pces<2FQfz%vqkw%kJid#4dNQ(BJHPY@S6MJTt$S zyZeOxtjsdQYuEA@)l!*cx*!9flk3-rt6wm&boq}1=1_3w{+AmPI9rf8SWOJ?F|^RtEbmtQn0%nR9=*|+iR)k z%FlvZ_cV}o+R{sYCT~Me*SOMaI(I)V99{p~MMwWU&^!In=ZbE5k)O)bU?lWc`~^8E zsU>(*%7)4QF2;I?$M+}hFNqf)_bFxlaI1t}TlmYleQr&5H+egBBiLo7N)8K8t=ji` zoV!IfQ-6Foprn4rof3HIv~^2vnXztAX*(f%*Zs1c#CPUACG6wn&Nvm4`}4P7BFHU6 z`(8RAyXbUEPFr*+#<1gjWnS5)`E}|7$JAYf++R04x9NY3I_%s6oeuX8TIL50|On zv@5R3ny1xfBX~8N_GPBEnXix;ve=-FiZ$~}G20v*Yn@2GnTKOO{hZ1Yk7f#nC5Xkw z%qp#YFS?>#V8l~)vX&jsB^!*TW(O-B(M%RBfaG~cd5a_#GKbPrAD=)lysJM86yM({ znT=%u@tbOjf|sNi^*T!URzaN`HVC4-N05Yp6F!KgDJ2B&WfP8XEZSOt)#l~+9Vpt; z?4Rd|+Q_K0E-kdjU;A#Qwp{wDWRX|E;fo|*98YZco_=HLp^E@+C30X(x-jy@g69A( z`jyrg)NL84=A2$qx~dZH_{cxAVSv^~sEdd@M6wuLuI;D6Sva3!&S}5I@H1pcM<0fc@t>%UZj>$_{960$Ed-dj zLtYYlJJX8o^1vZrbhd*)W{3(Ma?k88>Q`v`G4r!ImOJFT!2Y-SeT+)PwZ457_?H$> zO2Vz2uf(-l*m-QLl_VjZY;zqM`tV^mP?e;1_8EPZs?N=PhJ}TDy0}Mg}&yH+(;UO+- zd^y8KA(~~a#kOFy6J${m2@v0!?pgLn9PY%ZXxU-wuOJc0UYk1e^CEz$F?y^rRwEvWrKWNdsx0WHz6be2SQ7QtrcKr6#K8Na_s>m@G;=B3IW#Nvh<~%ber-6} zl~FI9;rJ=#(OTC5cms7Sx!*^*Y0`)fzL7tTgK4Mxofj`*$a=}?D8vz15RAFk#^MIpK@16Sr!&+6Yre($=}3AgBXVOeLztH?)jf$Q)HS!d1f2 zau~rxuZ1541S3pPN3s{qa6B`hc#R=L&=FTOeGg&N7D7q9F7Q39c%^&>N>CFjA{wn` zcQ*TeC1>!Wq_V8qo2Y8!bAh{)^IdEQFT;l3JZU@Nj34RcA0U)p9)shxUPoNvTYT11 z^`${V&}PG*u=EMWnYbI&cHym~G3DJyPi6w7B01ogrhFy!Q6oV*$^e&pnS`M(-bdvq zOH*lx4#|s{#ZLcjy3-W~2bsD?3AYV|innIp~yQ0?)_^WlbYhg!^|)e`;cQ>suacunj0%@b*dx2`awy7K1oH_i%dQt9PGsoH;!{qC@#w??b)ne3)vK_ z$Km_P7gzV4@j{8FcaVh_)d8#e_yqxZL}$QAGYVymtyzibOR`sXilCOBS9Mw57=;)zuGUZX@ER2zAwQ1LnFyP%x9In4+W6j&_NUxW=-pnJCAVVN|f1noi zbBLD)to03y$KE3SIqz#j3k?fn*PV1Oy%$A?So*kPGHRa0N(+S0G6OsvJ|| zIomZ2z{Fo<_I8}>OYFkLblq*$s})_}$5LRxTNp0*JUa58$eUgD{^sZLt(jSdcj?c` z4S;IwM<583o_T`5B&@@MS|?LMqnFy}pOiOz2Va*Z4%G2(I3pIJB0xj$Wf^31meR;f zFI%|142eX~Mz^Dc=={+T-E%*+3E>QV5q=Q0UNf^W*YlSp@RfD{$gR7eB!}~}wDXv7 z7M+vr#8CW2wziRBpgJ|et6DCzcOfV!GTK&d*DR!qFgGQGH%>?%f=3Xt&k%vcvv80g zo<$#{p1B$xX`oRWJ1!#p9iW6)O}LhevmAMkvGhQ>!(*6Pch@j3=G__*xp`tU={Ff9 zQoT%Z`&Su$<_04LZ7bFYQ$vaP!by)gFTlwfqgJ{diR$VQ30>o$S@?Sc%PfbxVtcv` z@7pU((jr(U0KTmw-zU2%;{y^?dE=DEcImwy{cN*zqG?R$GK@(=c%?J_^-cEWO?bIZ zq1UgUAwR#~M_M3{vh>GFj{KG1hV{y~Pf^Zg%Pewh6AqybQoX6B=*YP_*8ie1Q9+4c`Anp%9=_CtdV`4O{hVSNOn9m-z=x)oP(B#^ zFMGgaN-SR6rbkO^sSwha;l@rW75gZb1mede5aXP@(NygB;3UrY9aH`*KtfyfMhyNZ zfIfyFrJ+7{G8&&MlyT*F~h)v6dOA5 zZv0hdf*Q`r>(cn^hs1NJtNK@T$8%S6_ ze##{Zx+A2QPoVP0K4oWS>O(A;6a&8~A59MXC}gw%%2n&7wfq_8;j0t+ek}enhanfp zgpB^UyZ%pjVR_)63|#wP_!mCkR3-Vq3;+1sa*Xolq5N7K@xRW(f#;Y13lqS>HN5y9 zx|HAY$9GM}rg*}g`_B^?XU-26I1&F}s^9-$@?gKeBka*%p~4I%``WBoaA;!0K`Hwe;0?#13TM+oOnq52k60k z8_e*balRJ?ZQ-O~w&c|}@IejvTBL(9o0Wz;FDch1m&&+{-MPJz#5PF(-+mU~a9*`Tu=j{Rp9$&f*eL{l!c#DZ)^47fw3P7^QI`AmW@oxTej}}t#W~3+#)4U8h0t`JfL*ARN^ZR1fUxNG z{i$7_b3m_;luaS3h~u@Gf%*ATu_GQ~ou0Y3;Ex?_k+ayuldhdRXBcc5TV6LO4qt5b zG`9PB3V26c2g$Wy;@-3P_C=w!h&lFO0{x;|kbjWy;p3LCd3sOnB;uY$g-cJ~%;kJ? z?Gx^@DNj4QS24zC6W|CX1AI*bN*(m}97;!RoT8!t8xfT%)0k&~YeF3j7sr7$ zO4Wt0+baA?6f!U0@5oAosD~dkG-Mn!3Y^-;hkrCy)7@5b5ol;UA*633o@m#tOM!(Dnx{Cyn0IN%I#Oe*Q%=??1DaUW8jObjo7yZyp z?-$Km#^^M37{^fTtH)PRl_4q2Mf1-Ep~h0;$$Bpjj&!C>Q5n?%KAXj_Y??Z3XxMOE z@UrX%9@8kFP{tZe(#F5fweIrt^cjX&itTSxx`_(BvaqSCF{M{Vd7s-E6mu`33^5pV z-hWQ&8BhyrLX|$IRGxqt)6mc{+>kC54Ml8Uk`6{D12gLQk zS1Nms<^s*f6h1tPY#MpIJ5El)G#>P^I z7(e~!evd5{Pyx6=lN7`ay82Gjq7S!EXwoZ{*q6*NfaW#$dM-alC?^iZ__WayS#({F zbJE=T%xkz`$a>YuFr|jS%8iu{3Q0EO#KT9a5eIJw;*{s})XEqRlWsZ0l9!uTu_kT^ zY73gY5ATa2-S}nx5dNvJF0r^TVRa^YNG)P$@YUf)T69 z-;f8bEpnoN&)nl+7B>evQdSf^r*j}&JTRfLr&J+2GOSw;o*F~#pVzcBY5bnLs}|os z{c`id>s!u_3i?{Tqt5Ly`h?z9bljI*kuc4lKKtrola>X#{s&T;26WXuhp`?alF!Vs z`d`11e7l@jGg5*qHFY6%qR|8v{zjrpBJT17{No#QGCk)p<@a;5QO5^k`U_u_yjvNy zFGoPoF;Y`}Vi@rKb1FBs>BSojZJo}Y+=RgM8-jA`&b#UoYBsPpx2=NFH}jB?@x{*& z_zTqL&*^iowk=4EiG|j>g=eM=8-V)zdC;?JI`8{W;bvDyoSQ$2#78?Fd_xD9EBTL8 zOG}xPOW@uR5T#`Di{UOb#R8MJ{NUp{rOA2xj#lK;h{I-@unVyFg88ctW#WM&M)%P< z(z5r{4Isf1`mg5;5^#?zLo2y|}tyJ$}BgWOQ~p&$w)xATDXUAZQ#z6QiP7yj#MvWHj~Z zTJWVYfploU{T=S|vG_qH@S?jR12X5UNyTY=9Qh+r`gn$4r&su8TX`X=PO@#8Gv}DW z?hg19Evtb~n1$MJ&_0T!q4s+=2{ zv=kOP`u^LhHp25H-!wB{qeN1Z;~4c|-wEf{u>Q?j%)EKF=^m220HAQ!)^6Fs`3!No z0^*ozo%nv-9M=L@V(7E8zC`R~I$1V=7C z8FZD=(}wy37X428fI|ZlMQr_a!eJ;;BLe!-hg~@6OxV>;q9{<$hpDud3#ERp4vt&L79o2R}IX&#`Vl@vDppb}k zLXOKE9(S@O;{6X!wmr`&>xvBtm9rG9oELX3}ZUG_8eJiKW|lrNmk!+tBoTo4p#<_eW2V#%k>i{5A8^0b79u2Z5GF zF>mMMp=?<4hD5Vh$Py{>D6+&Ajb-okNop^}O{E1^aaeD~2-6mMR#n624D)EDDdUmc z6Fe2>$P|eH%6@sYT7?;|xAEaDn~dYb9d@oQoFM<4h_;q8UzJynx{KfA-VT4TFLHP2 zeOEey)Gd%j4f12DAtIU=)Q*+H@w^yrjJ8w5(CpaHSwW*E@p020#+_@Jpq6-5=Z*WV zf}<^43MK!|q`y!U;|59xTY`w0$Xqv*SMw@Gf`W-~)Y@#5Bom^T)`yX|tGGZyFZSVz zc97zEfxYXYrsle68Hid?t6=U5;=}dnGu_LkOMCF{;9B~D@I;O->l(pd)l7s;kYzh7 zvWT~HqtN(Ag4^D!vRJ)1Ur7BZ?fVYebZI8y+m|Y07rFVQXg0lCU9Wrg!0y|yt6(Or z(+iEK{vY2W(X_3krgSI}yfJHb8dOS$Py1kUho|@_xS{Eu>T_2vnVfZErt{k5W8YlGD2nYk$ z>yuE#w3hxmiV`}<_MyKII#>`n9)0hMyI@Tp`vavp4fHJd0kcfTpTq72cQ$KziFO<&R&~rWnDCK8jNg}yMd6bE9Y${k{ zA;-b})TOb&G`gP>o}(7hxR|x)_)b4jSwG?l-=}4wett$-Y=O}?O!(bkh!U#m`Q{!LhvLV5U; z&jpnzRQIb(o}*tf#rq3?6Op(2pGA(#buiCKkG|I=vge-#k7Hk#v0$M1N3*0NInpNU zFx!P^t{Gr)(kw^-gm$SC6i&oSH7;#Zp2Ef$Dj|nQ`8}zC zvZtv>Hi&g}HIQ0TF=Cbw3`i69E51{j!tPI>ngVLXP`+K6#TQijD9FtiNX3-YcP8iv zRAq@=L{Z1c_Z35-XJrC4Ge4(lbI`B=M3xo3^I~!VxPsbTJq-i6TR- zW*Lpmdbt_5XeX^{F&G0fu$a3AOcV1|R$eHdCWbQ*V1!0_1JLEMHdtPx9C#*gZh4YL zr*^1Sq^43g3^1l)JR{~{^jz2`xYwJMAi!b`&{8c!aG?z&JK)AhAh~x&xz29@xbS;x zG^wJ<8Zf5qy8SyJchk_vYWlv7AqsQzyYqOx;QB`+NO8UlWm{VM>YjK9H@J8%wDRgK zHJFTqc$Ir5;y+OqU~7@b&yN^xVsMblw%nLXoFq%$6uUHkjA2#9diRLEo-AMPoK1~F z&E0gvnrD*dQ}rNTq~$Q599CQdnP^JmH}DoY;u8h}cyQ#@_K#OpH|ZEk48@|@*#slf zaR{8ZCGn|3*q^>9`$0T`Pf8H_T=W?SdTn?ZS{?Zp7!@LRMa7~-BJE5vju9mFT>UyWVI+UmS}>GbE8Zn6x~RYL6Wc9>JQKLy`fZyqaC6ZnGp)&j~Y& zdaoTf{Ja;SA>2?EF*_w~SgyBmD`0|0Fg9HGQ5gVGiOO=#Jt$$vk$Ml5SF1&{Wz=75 zh#kN}V!drpeM_)V3y?cMAR=OAePTG9#UGhMkS>SC<^l}g+7NKb2c<@Cj@VpAs$)Yc z5y-xOjeSQKpNGL}EkK5j;VxcjD)*=iVQdJaEFC&hi;y1V&JSSJBLdufQH{w2*)8gp zgHpWE+)zfU+13&LN|uf)?xIDoQ)lbM(BX}d!-t}h)a!rW>F>;%rYFCA9FO8*hO-g& z20d7h1W2_#nEg!BJ-67tkueW&_8K!CxA@RWSyhBT-M=DUD7v_slH6U)$82U25lDnY z#M-S%)rTu8cm){{cW-SiUvuR|@1u1D!go*}u&cAGc=V!=R&e16luQX9E==8>i>(Xt z5(et&ANd{mN&2cK zgnx|FzIX8pRCA=!gAh*g7?swo)k3P*^t7@!$q3jP-@JEf+{>QFHS)lm%L(5kdqa&h zH-m%ipPlwR&j1(AP?4%vcM*&&O4C;5bPz6vd8;MQ0IyET_!-v9OzfZE4S9}DFXBEO zEGyocV(N`n)%@r?bQEr1@`a6T2pyBL+q80r7=^_&`YYEv;C6N%`a6pes{j=_$Pl#i zO<}98?*#ATL$HEsOs(LYYpeaY?h2k{OKV4nO+tQrK` zQoj96SdyuF){faNp14C?k;6@fW2EE(wH<_5%j+C^l}Cw6-;;}h$3^~+@uO|-cS34+HTexT+j_-% zYUOdZ{l|Ma7IX%Z?i}eB3R#cbU$^Innx)6Gwv?qaARS}&ax;%}&3cx7GCNOQw3A=X zBvDc#%L-?RCy6Xfi0>GmSp{*wgO=KWBosX#s|wiI6PSW``|R{}-LXcw%XVYI!+xag zstDA6?Fkl5jP6io7>^dmEs6EUG$>sl#hHeI8NMs-8cO(%C@Q7BxIs4Nb}}_c3_dH7 zYG%4FXQao%NJe1Y+g!D*9JxuBZb#_W%1G7Xvz~oDoKx>s0ZJF*hLZN1efCq~MjR_t zV9WGX)62Hg8{v74f&p*ol&SS|8#I{GpBE+Ea%7Q`>}1>IO#>gVecVMnNmF~$%E{4? znocdiv}$z36v5#5QtRkEC)*5*RqmY2ZoGP!^Ibl4FF9Vs&^{K)@V_K(iFZ<2#R4(0 zzoTJD5M^~sD?u1LVZ>+v^VO*KrImQZ-%zO4b1k{HkT|RMRE0NIVg}~@vye#LG|uZ; zQl8T=^k!NZ5opwQXr%wW+}xx8Zo8iCA93GneuYG(+?);3-+q2yb93E5;l>b;!4ig? zZBNL-8c=AP>qtgOgc^xoH@IaOPSi0pNwp&vL#Y0{zuX9-X&YUd6t~EL?W0o0a`Z^j zj7c@br*aT>G8PkcOxZN{FkzM;jC76GapS#aIRT`}SD*+~ihHgEFKRTUiknA)2*8uXhygnwIG!F7$mrTqkr$MS2& zap{5TUiYUfQvGn&viN73;Bl;n#`L12OF9CBiHU@0>W&!+CS>P|HET17%D>!PJo-?( zepZnFet6(7#9l3>sDmFs_=1rkvxh6L_@@um?~mV;hM@2VA^!DSxc(dM{Oj`F5#8@X z`s4D3<2Ay+(@kB-w4?ta|L>&N%hKI{J`*n7)G^|}pILAa;`e_bOD>rnxY^_X)C?|8 z*elY)t@kyZy?+rjY~rD8JOck8HNrpbejNiGSI`jU`CW3?vPnw#xb}K8Q^`6uj)QN? zILsOcE`EBOYHeOQB_8}3dU}QmY-3sX;qG|6=6Bg1|2SrjG*2t#T@b|Z3}VmW_0)8l zggWZE>Tuo>7s4y6?oDv|T_RC-zBPv74 ze?pDXhtPvAruFK;M}Rev72~Iv<1|_?pWNy7R(9?(X9=A5`k47CC@#Auploao2+RmG zt7Q@@1#ErBNmxDr>eeZjqXP*6Yo!< zc7rx;gcCTku!|o8?(yN-T_7T6>lRlm{Q;`em`P#T@$mki9H3m=15<*ylLMhMMtK ze#xLT=^aY!Mo5n`H*$Gge>XPSE~IIw=a>=N}M8|C@L2kd8G z*^eYx#Gvxmv>C+E+e|%4JcSqpGUXT>of&{` z|2HVF5#K*#eSA%2Ta%_<_YBe9Apkf!|Frf~nst7iDpJ$FaNJB#>~^N$4m3NiLil=I zRg|LIgzN)-E1-t|$6r7{zUiw%fr1(g`4~^ZzC?rSg>e9O zKJ3XWhQ;Cm{NtWTr4*bUuo6*)@ZW)c&HvZldjLi8ylbP9QIcd3kPIR@C^;w~AV~pX z$r&WGWF!g7!XmDKvIN&flpu&?i7RP=MHW~kBbi-5a*~X2hoAow{^8dB>Z|XZdvDd5 zDxjF@>F&3?r>CFi>3LtpCsV*D9*ZE-yL#p)ZPLb);q@bI5zoz%c9UWP?o@G;8{x!t zJRpOttlYiEBB0`XC`w>Qe(_Ug1f7Aa9(E{hBn6EU( z7-{X#N!i4N1(_NXX{S~V<3{b(=MGZmrUVOxr?-0ARl*}%w5`iOBEN6AOMK#a6xsFB zQ~z*P@OZ4UL20q$>&3M(q8B-wy!B4eV_SFgIMvm(dbq~%2=}Ax^w;6x0c}-PBv;iH zZ#(_O`ibQ1t}g0N4D~!Ko?H5;St;g1lj)1ylE*2y_YRHeXTQv_=`cUBVx}j z0TB5oo7L_yZsi|S1eyT-8WTCrK9h8)t-X5^_x_i3EGX07qgoA9#NU>1CVZAqM~Hdz z1{_ksmk3i(N}?1v3-X~k8WOeZWnsQbuM*jH-@j$(Uu!$t=mF&Ktk%-oX#`#`U)#X& zQblED{Hl}oWiD_K6TMB&HV{Z_=hq=}scmkMzkdk12JVxM>h11DsVL5l{b^}Q<3mU5 zZ@);6+Q7kTo4@j$Y*ZHxz7vV5j$<%p1I#NcRGkY?3(IJAtN01?e+X(^ zztih{*DT#*o(_eTRk6AL>(UhrcY39#gCRrR+r?!?IbR4vL;SED6|GGO)--yQMeaB9 zupg-Iw?UeL>q1d^AjQAZhmhAfMc==#+B|bD%AlNFnI+G-$-SHy4&5U>-8%9@wkHks zS4Bk{+_0@^YI5*40<@~fa>}=f3&sOZdS&}81B3U{76^hCTZ~S@xBlhe5HsDSgEdb( zTf||P6n6&}sTbo23bX!X|2H{c>5L=x+{qg+>7{wu5ng=F>9e_rIm9w9uOkvXy3sfM z&eb93rZsB+j+1xq9!0m_Kgx7iQ}AoXk8@icnLY`oI_kLiAfoR+oPiS58Ru;ZULG## z+gI_j3y987eDNYYFYNWwm~Q|QsYpsSP{oKuUfm21X^$O{o95i{aepkjz{)(dLj~){ zka}Ul|MO$luKoL888ZK^SKg&@5mD9IOM)}VJcf`XHX5v5(*a3gmndOzu%WL*vj z-!0-0v92VdFW!_)@}$?rmx`Il#G;JMU-aD6tdDKTy7&<$M0Ejc=6mf&D#|GJFOH{q zylv1!%Z8DR_xeSTW1=@YT5&lS&8+$#h+G04Axf@h`9RW8j*i2yx>b>?3;sVnHPwtV zeYCn7No7QqUQ>6_4BY<(GaNVVWB{(AOW8-;>3LH0^rl^|wJgCc7lP1m-3$80$e~|V zf_i+FYvigA;oevY)0Q*zS-hK#z~N0{I7*xJ;`np7Oj5lje!6<;fnik%uO%$o*XQ+u zIInE!+`DzWe{!4>pd1jlmc#RXtyQcbWznFVv(?$Uc zq*vvw`Sfa*_T7OY0fx+oBr91CN>ZLb2`2h`A*hwioAjxr9zh!4KNEQ6#hfd0KScE3 z)FHb4)O#FeD^SO{cG=CvPNrs@iL3{usr$}WzwzP)EXalFrP~-Ju_*sFe|M=X;|1S> zG2e%W%(ofVtbQ1_h);TVHNrd?={b7E0vjCl1s>-M<2;YX(yqm_-;gN%IZjO`rm3yi z$Hw>SAL`bwG1>F06jf9 zg6^FwVe$sJn|?oo?!>ym6(`FD8Cv>Zy5IQit@moiDCK@AGnCXoXUe+2;k^;_%(o#( zBmv3(!CKQ~f3Rq7xZiJVkVf-IiipaFWYwJhyj+wYG)rACc=Zzv*1O!uLHsQ+D6VUOjme4n z*-J>g?o?BCJ=ON2QDET(-*L9ND{zj^P%&lUZ*v5{N@!iUl}2Af^JR*@BQAoth?r^L z z2<~auo~3qlp$OM}b+y?jqq+a%evAyeO(s3X1Y^=Yk*9bI-MD*O&#oC!juZLtKm(S4 zRQyb}!?C@$L}-F2bX}Nujv$o*-u+Jn#2=ch*YWWA(->Mh%ZunC?%!aqU6ljm6(K-g zX{n%u%3i?}YXFMH9Fm$iPZmTm{4kkPgs($2_7Zad0d|A`2boLTyU*mD&r%fLOG{ih zZ>tl7_@}LH_cFS?HM8#!g3$?y*9uFyo?TtqO_l}-&8NY@0z8GtB*0iC&mXknkd?*q zm+&CM{PyW=6hJ-12?!C~Z`~OqRS>)^^G|o0(Z>Si0^&;2A901V-nloCo?aVR;w8!6 zzFshvCIVgj{lGjj7oO|rFYS6|Q!on?`?W7qMu)1!vd1YCpr{Z$ha#o4s9u8>nsvAEFKe)~SC>S_Um5H_^DUqHmy;PLPo#OZ$f zc+w+QJm9Y7wGR-bKM{KcEftP zjX{9yK{}(}l-qw;p{zh*#6#BHt5`z9OX_Fh*v_SV--n8vJ{3X~_ad+_E=9MMLUBdo z+N+rxys5+`!C_PO9v!S61sifQK8b?%w1rCv?96_;{LmRYrsSXoXDbGij*UezH=V$zEWwz7uV#=Pmbzb2x5$4LKr2QALa{g!$^N8=$tKk+Os)hN_J|90^~ zkoiE3Y-{QJuS~TD%CdWr4Clfjh_lS{i5=_#%{b-pz>R^tLnhy>tczpj;?^xo*}XOI43$EX_7%K9DFV0o z(%TIoWGNGY&sr}*(^}ec40!TddZ}3MokaItVG)2{&TPsJ6*061jb@54Ey**F8Kf=Xlf_mMozYB3$=iigzE3>{yw2{ev7;JL==?yWK6qL^O z__T9j_+l8Qr%M??@3$&H>V-ajbM2<`vRZC0$&||xWGY|I=a#?)#pHQ2vVA^9}=5d>hR( zUr%z5w5Lh67oT2e>|vt<8IJ7rz>WFdC7XFHSGtBwfW85HZ@w#>GhQ3h*d-(w+Vw2W zsn)snJilw*Tq4=NawihEdCJ9hdWh@l3zvk&V8*=flI1cz#xG*UHSHHxm!a`=mw_!@ z?i6AMw&;gq-26{308+5=d%ph5kOnuKy4i0&+R7B|dR>K=Z$GXAVahI35`|<*vjCFA zT9$Z@3;XqL)Z5owwTLPOj8~sjFi9t%j}LR*>ClP=)W5+Alh0Q$&t3D1brMbZI?5Ox z2eM!`ScRlLeT%L()&#kg#^cJSUrES-tWckJrk)423qVXL6Mr z1WmTj)$#vhQ%x-{AOouMIjKVt9g2XQ@t;aE=Hu`G27IRS1l-a#O7n0f%>ExV4HBZ! ztniSQw!s_8o!egjR1`W{%V_Yyi&=PX8Ao-po+f}A)6FBn)XuWEZPLgiZ;6?zJE6t( zy2f1$;JP8`#Id}{OSQ?XX)G8T_Nq^!+bN;CX|}hlUU|=DTi@b*-`+OI*{r8UaD`2o zyWH>KVm2M*B|c{y>R|he_exT#^6BT%_F^wdsbQ=Wy+}FBoYBZns{YrBwWD$;6{q?tysSQWb+<7R z;i+J@Xlb^o1e%DNy_OYgOC+$JHk)B1ZO!;qpkWo2*+d{y zAw*NEeA@=$S(8gZUW~|I(2~+n_#Oi5t^f;$c^LfdR93Qc8ru{^{$b#-e)?q$6Jb1w{7@m#^B7(52|n+ z$STEzBQ4+9-_U?kkC51;2-w`9KP5ROXEDh@g&V6UGEmVKFD-^j7ypo*R9QS4pA^x@ zF6B_?Oq{UX5>zr4pS@^fG!{lprS8%eyR2ZEZhZn>tn|_Tf;-6dwg|YQUmW$8I2pIa zGIxatJFXZKjJ1LzYGNaXBM>)GF!8&^QF@(dooSxjA1>enQSo(m zTDJLX-g;i|E_PzQzOLxr@^}{3Thst=C>aGlO}C8BTQVZBq}mTQ{~qC*nj5QfSBXAh zI|RA?_#F#)tl}2i@!Xtp3~Q|J6LSf3KUm_!R$s1g;YIWD@oh(>ffnOmh0CB5prRka z3h2g;`0yKH8)1?ju9o7KZU-KGE1v#+n=kXzT|c{I&HD5!Ri(_nnJs)Krr+j9i&g*R zPTL4CSyHS|XHLM0mAxEJCvd{|Uk=9)xwydTm@F5V5spf09#xRQbms%)Zja+g+6`6V z+RC}jta+WeHq;eVD9YT*(p(d687)>RcJZ~Mm^u)aEIv_?iXEOKB*FOctL`E{hPQCd zh!m}^4fo)6`g$8OKRH*KVgr#y+1g}UJlTiQr4DB)D&BSruWfG-LR6jT{yDwRoBLvIpE}_zez095Z<_>78MPY8~345V@(~eBd(La+CXEG1o39_z)g74yJ@~OVe_z^sz-N%WQvg zf2dzGZ_phOf`LC;OqKuIRg26OAA`$^V8^(um*40Rew?l~uWz#8kgE7CJSOqa(UlOs zx61y4TYbUj=D(d9^0`d^*OB^hoCg?5=Z8h@c~#DjQr{ z0~$z+_jIKq`{yPGLf9QM@cmj*B_KM$Thf*}_??=0Ndnw$`Cq3>ab_(03to?Nh=)JcKsIOBtIQncT*UC!bp0_TQ{YC0rN|;BtD1mm+2mCS@5Sju`2tZ^X4D-X6bsem@r(i$Ut)Z3F9x^Yjbq5aq?wj zSCCqji=rhW%egbeiw!3$fpcWfvgm4qPjDcuEebqZ0ndD^KaaD5rGtEQesEu7`+4Wu z9vS;S!$7@zU&!hcz&*3XN8wP>0cywE4h~&FQ!y$L;wLD!vPVDUQf|QZGzc^l%dh4vl47W^8tQR$@ZfCeLnI&G9-iwi;BN0Sp}*4-UgI4~gngp`R+DsT zyAHR|xx09ZfsX zFxaUxm6dF2+XTT5NflJQz3zC$vWjcmA?%I9i{ycxBy<8|!WwB!encNxUNVsUb)Sh{ zJq1({3$~J0OVMs}cSQZ#;dc%w;M|ReU5S{YG#K;s5H4*X^F>n^hq=f@i038A$<_F~WIbSfp z6z{5Px3Oq{_s(zMW#U=S8Zf~#R<=(J4u)$_uYWy=Rk+Vh_e=U7sphKZ^1bi!%ACM} zYLCm1+@D4%{j$`R~_Rl6yCsc*cD#`*diBo{C@hUN(@U-B7h|e&4bwxe~vJn%iM)6)0#b zP*SGkI;Nf*{f-dtjiy-92v-OYa_11M_$bl~tNAEmZef7l7H-!g^%xWxzCJ3aH89NOY4^rDD81VmviG9@RYtNwyFy z*z3y8`kE9c_QvBQgMCPKf`*lZ+)&m-&Z&r+Xr0*E{4O)@(a_X;gt}aJHdYh(mW@q) z5Z6{+{w934-y~S{CKah)qN(8nKMx!YnP^5S|J7QisY*MmV&4w8*clpd@wt=i`rPtz zySsaZvIOgZz+5ijVS?fj7cURr_ATFoJWx{Q+`XHKJ$JE`WM}&fCb;pG3@+0Ln=e+b z!Fe}iKHg*UrQ$l9_xM z(OVk6ynQI^8o+VOC8`ouqqXERz}pJBRwv+Xg@!X*9G+nlJyT9?<22*1#6aDi3pjo5 zZo<#hGqQK9x(2$9bNN4(MmmoKUV?CU--dbVEHKBtX742H?{>8sbBDXyNS$iAF_@0{ zSLhtA1ItxlZl%cfHMV<%#GboVajch>1xrfr3LDuvP1kUuW^VU$W7kDj}Yn^u-a>nsq!$1(}v;fRZ5#nr`-3ZJ$a zkExV05^Wk~pq9+kxbIRj(A7pYOeTZf7l7+`RAg_uqD4ScT~?Jnn}`aR;S?vn3K{WK zG2BH6tIeGS>N3WR*bdT~dc3m4^lTRUVprhstSow^-PK7N>En-b@Sk!DlXaFYnI~H; z7ovBb3r_AWhqEHk*;>gLhqJ)Jgz?9-WQ!`mGK=6|KWmyMbhHf zP1Sdt5DK+7-p|@cE=ZyDf#6gXELi$UXku7p)b!7br1UrDv4!d1WjGf zr|fj1X)b-m!(IYd@V)`CfWb?yu4h|P0$nLnMqeJ;U=FEq?-f02Xd(9SWWzw^lTroa zz$}R;&ngtWzTVchp9e@V;8xiafnh}i@PxpkI*nb*`_ek&nafcr!|@Nr`iMn09J(&i z1si+upT3$!<(8{1N>u)cO9A2-i6!d`5J4iKbtMj5!{=CStSNt7@>N21W$%(P5!%>6 ztgofv4ueCOGG44bUhuX*>N4x_!!AU8yS3$t6xi|kMPZ~VdW8TQ+N?%Xvi%vEYpaF60K#^_;{{6Wi$4oxxh^!-K z*bs2_i>RxT2^K62;oFiRw`Z!Wf4?ro5IP*&z|P}+5w`CXb&Ex(bEs;UWs^|v%6Z58 zYFAxGDl0O-%%iaDi^Au@#l-0a7ZkJ=^lT?$*;9Y{?y~gufXmZ~s=XV%b;M9W>dWFU zbN&r$gURh?#Ya#r7PwX_TKk2u;;G`;J+hICL@T<}##+&iH_LaS`lf-F4COMv+&h68 z5EpxX#^c$pqD>WdF8B)!MAbTC#*8%S=ys#B|BvSg zT1BpX&c4U6H!mZKm16l1fcdMDVJ8qgZ%#h(VdFP6^V%_oM(IXp<&P5amcNME$8T9 z4_7F>hdtWsZ=m(_Io_1nkV4s7xi8#sL|~KwkkYkbYvTrY*_v`Z=<4sTJfB1)!H!l8 z5@DPh{FMe&^!h9^V(PY57HNT?Xb)(eP;wPpw5x}!9Yddl+3}@rq}xi^`*U0gr(*!n zW*AELB)eZpR`}U7E)2e>X=BtKs90B(J1*?xK-w=5UD&N4gYioPaHKVW^};1P!{Y#~ zLZCytAzLKd6)KZ0#*!}|TokjUJmKtAq;4jE5)837&9>^EDp%*~`rSQRoh($?$K~e= z?BI2;0v-+7eZjSc`5-Y$k9Qv>+Wq-(m+223T zfg}NV2lV$jVmLpV5gb!!Jm$sU5~kAatd7Y}x&FTfM*r81jI{As=-*8i1&r9XW^#wr zyem;E=qlrpd86ECO4w!C$$!snaT*4!*6}LZT3V-+z6XPO(9)762=sN4nI<@*xKewVS@q-9~^SL}aqu;D*ItSdF1)x2b zJm`Y|+gj_8dNOo^9@PNxlsns$>%SvKF_|1|rIoP-T5O@?8{v0UVOZSd`d1W6*8Olr z7SJN}C-D@pD*iWI8N;_z?eqo1uBA1)sRyNgpeO5&Xo$^~{JM~BdgJn;Tzl@Ee}lum zcm~)BRn0k}Wjmalnj=1r{Lsw>C^>xF%ITSXB(kX$+@OP}V*Jj(IJ>jA>-gE!x|9YH zM&hP~eG$W7L#an9J3F8xXYF80(0U%UNy#L~{q!=NYPTZqH6tJ2{;73vLhS)Y{WSJ7 z++Lg0<8+$wtr1|zc7&sgIXI2{&o35o*QNX4PL?udYu^+Z$v?>V$Q@?uhrO^AF!9(=_;wHwE}QUO6CLQWuw852baQ%p=w+;AKS}1J zhG>V#qZ?b}e&L(fQY_a6;7f4q{6%Anu+1(U^eX?57g*C=C52c=hnu zg6?qjJIQ+fVcRq^^2rW780C8R#lh-={!!`TUdSBw)d3_SECxM*!$lrG)R&Sqmf)wN z3nPfhqrP^_O$4wD4F{poI&{(#da@bKliQyU;blnb$keNI1FXL?(qB{9?*y^2E%-@| z@n4<#V>wmR9MKEJJR~A@X+l;=GdoAh0IDqU&ir+FXWgI9UF z?K973m2XlhJX*L>5e)fgCDb{_V00C|Unl-xC9&@oasTZYC7F1QP6ONYgMqBmpS*_E z82;Y0`=mPAp2d%J#z&ZFhnEZ@XrKD7#IxMVfSVO|fz}rl?Ibl#zT6@KIG?LOo!?SIMu!G--}!|o*fA%h zO>R*i!X3FsfxG|~1*MDZ0XB^fflpqR1{7J^Y` zoBQ^?2l=jB+T&fBs8t}}FC7(Vz2DMY>SUkvUlS6Nx{UR_cK(C>Ave|C+CyQXvB@ z#azlQA-ESzjp_Q~GeOdXcudKkxKjbIGqY8XLj;)=B@74C9jA8@)Me5GTziA2ckEoG zM$A0)2jsoE__ith(S_}9VH{Z*l&xS%2}W%8rj31)DE%|^re+@nXQ+7#Xxmh$7WcU8 z-ug8RboXb)PP;eVuMGay3oBXZ(peRqOYVof&MKJFMJDR=*IAUPv%2FpBqiKtcBzlG zK$C|pnnyZB+|;~3ltLx+yw~;B*FLPq7g%4*mhBw|`>Aq|$%|+BU}4Ig6`z!{KarSA z08m-vz3K=P3rLCf80HA|-igCU&&ga#LPMWWz-0|<@5#Amf5J~aQmgc{k^o$?h9>i> z2M1B$sLr17Gon2eIq3*2{c_UdB){i%rCJ^>lzS=QQro~7hi6Hplc_`=o(h~1M;&q&f1L|10@0>=} z8S#;RnT1+*Z;C?LQ!ua0p$a#0w7XR3El-E+^9gRW+o8iDR~W+{`PBioPT z!LWmpQuJoz>3&tH@Q&!ZA zT&v+xzd=C7?i_f}_nVDQBG+#EKeW;!yud?@4HSmuG2S1N0YqF)l-`og%WP3V%nCYJkUJTmY86bl^(BPLciADKQsiDd9i(ih zg4#~WVu3netfYk{b#A^%7L#RT2#lE< zECsxND@0$(dD(~rBOHk&Fa%JjBIT?an_!d_)p!2U97J|ja{I&C4gG)p>C zm>)|`u77_Yu(rleVNiHexwye;kwzUD3?qy`;7zLiuTo2{6|Io80ybWdj|`AWa@GVB zj9f}++gCOGZE~o>#-(UvMM$a7s_j0&m|wa7Xt5Swga`iU2N7cZpmq3~13l&< zv%rT)pK>-k$}tV~-DI!U;jJ`)ijnHnC8m}v+0hChTKPL{KkqEnciRTU2XNQ`z=!l$ zPK^ZkDi(_SSTImu))}r4*d~{*)ROAkzT^xZPK!@!>Xt@LDjBzX8xO73%ZF0X8e(sj zN%uKv-WqyC39;x%Eq(pfNOi3b?6>3wk=+pCr-SU|^LHjc33c%X`xu8BW%~2rovqn_ zAa9iYTp^~)D{|x%j#gyBi``^0n}j+X#CFMisyp|~8JoTXHlDQU8s~y>>rxFkT{EH? zXS}S_{TsSq^NmXekO%$Hh1bQYd!YjzmFm9WNMZwrTDl&Cae|Y#b5T0Jwm@`bLP=@nj<4= z&k8qc=^m}6)+gk5MJ_2wUIelKfMAzJQ1}Pz9TJyuH+IVdBzswxO*>p?Da;ENx@HGu zwATep?h4pZj&nt?e;9{$y;1mXA-pUdC(XvUqEbcdp*Dcj;e#$Fw_cDIVkmRo)aH3k zQYA`B>#t}nFPnVPK8(7|k(xYFI`yFF@2HpP`;Luh99OV1eLbV_(Xy86okUrm`o+;? zt#xgayQu5*rgL`LIJ0B^A=lY@COr{e;Nb!Wp1A}@ypVTxo8&=^(`$A$=F@uv1=$4? z4175D=KK=<0ICwygBnrA=Ym6O_lPGW|AD^Sy5-acRDUXiXEr4$ke-z*tXa9?vSL?ozw$(P z;7yl!`L@-~)v+HWg?#r0S%3WfrUnApGg;Z)oA&}R3!K^6PZo71O7l2juP|{)){~~$ zlr0jNkEOKvjbqfT;_JW<#srq~2&2MO(=Wn);e7-hE5BA!*idYxib>D}m=F%JGyT|2T9Pmti%ckbjhkbUwZOo?M8Gw+&{)oDFqQxYrzPc))jagY2hGxE;OQ%zU z6{Qy!#mbm1%sKnEu~1P_TK91EzwHUgsFNxq-{2}^29l?QC(Nz^d`HS-(mig8~lr?!jRl_c|eUa|v%Bb5l&Khg$lscQ+rqw|8@c+tw}G9ht;K+>1= zsQHBchVr>C#O#AqS3ThM6(;gmot`9~7^y_;B?AiX&dtALcYsQs9|ZKjU;h6-SMjfE zIJtQhsTu+Kn_7Mn0La&X(0=ESby{jY=gd*Ye~WPbzs^oNAuYWUTz22ep(pp3f}PO5;vXiVYtK2@I#`Vhsw&Eje)@tG*dtoz+R zRL3dk-_>rsyWUCR- zqxh{Uit*4&TEuH&Y+*~v+TG$Wm=w@rs=hrqlcix@>%3D@woXcPJzDT+hcQ5y4E~!` zjrp9M{5|l47Yw;liPU_Mion-;a(Nm(&tLZnz~U-tZxnW#?BA%Lr|Wpi<@#VoCc2<~ z5P5BcKdKQ;G`6S3ECz5T+^sPmft?y>0MAiAybYdkSj{=WE}d;R*FuCBFCJ&8#y8H^ z?_NAR9LZ8Y+c-n7f2UFD+H@oMWpw47y`T9`GqStZeQ=mnc6QRN@Oxes5dnmk#)_z@ z9Ii|s9^uYzovvx93!K`VKo1D;@k6gqe^0V*>Qb3I}8^C3rRLHMv=-_ALm*Yr7?IlbZ``x}{(LIzFzDuiAj&7pGb zz@iqj!lpLFfD9$pu*U3M~BFB z3PvFU-Q1qF6@Xp)CAieN^)q)ip9*F1rlA8_(YkdwPP#Bht_Zc5M^DZMG<_c{yr8ZHf?GGF`Ci=yGLJ7im+%4RKv zH-25(-#b(5p7V=^x}T{ZHP6*ZN z{)LXF!tm2J5#Rbf)*nu;(Kd?vvPC6DAG>616zp%>Y;gI+1=j^A1Q`rLgv2K#Sd*NM zo6AxJmLywG8g|~zR*uUiM_k3lMm^a1SfHFR3AONi__6CtgtWxBO<`=yeEDL{V0Ey| zlBCVDY;CDy_?}Hd+CqQYjt{wlyM`cCwH-c^0BqBn7-yXP`w|ghFzOr!- zk=?FjqsXaL;HmkN#W#bhqoQ!y;-o2k_L0N%^H)Cl^;7joW3xi!N|TTTf9-mYmm$*w z?Jpn4hRM_u4JOJ$KSb;?m(xx(z#Ipv++FLgj)wBPj+>N*mM$_56)iTDL9spWH!Nv6 zeiT1m>T`^lOTY5tx{SS~O|fiL^LwWS@Q=Vqt?U}UJ`0IS$jX|*%Y*(fyuX5M9=yPY zUD6%C*R$5}-en=U@!NBYq~Zbza|kxeG;sF2p9tuWC6hOqa2&Xib}M+~r=<{wn5)-* zz@5GXs_KM9;VO(u%3uSTb-^5SJ8erc74_>53!%L@#$z-|He5;k*JRfAw?NfFEg|0o z)kTXu53jk2Ks8p*BT z=9u-f8-zYdN-Q#J+oGu-yaCy<_ASEKqg_pVP`(yOA9Rfo%DO;#WTnlcD%Xh+qA1-S zS6M8=UXL&~!zkBkb||UW+3M8v0(GIzP;HFP_2B4#^uEz%%r?Tv&?y=*nsfDDt(ig4 zqU>(P;v?OY?C`q4FC&Amvz1DzM@Wu+^SrIQcl&lD-zn|d?B4*h*V`IVSG+Cpyn6?z z($H4l+CAQjP59T9<)tSEgvo|&A1j^p5u`=Q&u&uwc2HIG9_KRUN{ef)dzj(94C*Kh zKUdwZ&N5{Q$)vCG$i_n><_)LM_#ZhR7^U`B_vGyc?pos}8j6&mtu zpD~!U0Qvj0(`U4Dd^l+G3E0D*Kpij+8pQ$$euPKoMm(&hUkwg zS>vMn`ufBRm{{9T{Ac9>ty5buYud(GjA;M*i&asFhJjs1pU}c_Ce-Tniq)$HgvOIjDssAM4hj!WH2k>qfOAVe->-s|}(rdeeOf!sd3r z({ok8EBj`staZ*k3tu!G|0q9#1>viDdSL!pnTUV;E4Hq!h968)GCYZr{#rukse%i zwmI#ZxHS-C?0mRW=z93NQg$w0>D77VlH{py12EH2_kj(O$C+1PQMgi4c8r ze89^=%}gNL>Cv}Ii;&-M0$)B(pRL4)MU{J56*%TAPAmH9JGj=Zj;h-mB#^9~>LQTI zJ8-n4CQ(hE)Vkt+PVdzAel-HdB5M$KBs;n9H2On-(pj-Lh(EwIKO2GshB}(I z$PkO%2V#zOXl3!0xw^W}-RLn}gD7qD4p;kpUE6hfH)m@gD6*A%O&9EHX`V@ebk6g3 zyh1+pNuN)G5l?CuFQ7MFv(*}9P>o5Ve6kWzp65d z9cz=LMp{k^@6+)*u2SOgL514@d?H7(AgXmc zQaZyrn*qM~Qe+sB9mmbo3s0gd13OypFfyX+?$yvR$C&sk+UpM!7p%0{4Cc8yu!YHL z+GHhUxmu(h+^<(1kd{TQQ={8ejKsWLEFZ_or<%QDiqv)0vl50g1G@v0mq`8(_-k#P- zFO!Gsqvs_<$eKB0hTR(8H$Vp>377B)Rlh~Mt&pStb?y(HbVU%ebTbavRT zpeb1`2iwdA=+@rcXf-f!Z9(R`B3mDa<6SK?JCRsK;)&k<`@%d!tDbc#cRCkZ**Nwd z5Eh4B<3X1Xp=Kt+4mN+6^GRv2B`*t8DtCugQn{F@{d-UA?&BvT_bRBVhHCOj7l8Zj zX+<+JinIZ30a$3BD7|f}{eXn3%+--A=hvhzfkM!g9SS_RrJOMN;o|&KhM4vSiOY;4 z+wPW&@viK3_L3;Rv(oESd>ecZOij0)imr6Gk65yR_@Oy>&4P(p;I4uNT5~$mLUWg} zZSo@9j`R8}mAAzbPqeNVG5VQzj;G>-3m#rsj#GEBHBThdCg@0~@`+))%b<~<)L-k$ zO}x_Sc?V8b<~-ZJS?nEoIqzYJ_p%m2(^jpXM&2$ETQH*|eP1hcF`gMfNCr$I_lMnm7a?7e55~zQRBJu> zK1URHN#<1wd}7?`egTI%!Ul_Y^5gcx^2eD@?pNrR8yHXxl5xYK;m}vwb05vbU(a>o zhpYMo8w+M^#TdkZU1hN#{u%a#yy?zeGBB|G;@L{bfA?1R#&M~;#kT&6#`Gj;8FH}t)9%Ki&{kto z+AH&gU@|^#mQKfl5BeslAbUpHl!NjLyqH zY--6i3Ze<&iyzzhT4kig@3BULgcbx%ST5={OKysbc>M^N`>vi9UWKZ&vu}6P12r6R-v2&}w0MBdcHGZ;OXO+NZg{~aT1gPv}9@rJv z4z9c$7X?a7wNKiG8!GniOR`KEPT(S7lh5iOj^0eg%(q3&MGREo!y2Twk4--38%j1{ z-#|kd_t(2quH1Y;Sa~J)I&SvVp}3}+Y+8Q^e)G#uiBKURk48~V&r!2f$#m~Mnw2kj zwe2siKNZ$-69wsys`9TyNQ}hB%VS&CA_?182POh{KntlJMDSSa7lL0w_-Cb! z(xojYb0Hj{gJ9`9AXa$#M#m#;0o%_$RebmBtXy?4ingSL`geS^uVN@yhAjcS6eb=i z*-5$5R=KTTfJv_@x;HI=n?X9PBus@y{)x z)xU8*=X9(Gxv9K)_>q5Fv^FRK(q*6E8I%9Qz3&*Zaw#u+ZK*rlf>^X!{QFhoRay$8 z*GY^UcW*Aj051qlu2f~mFY}eYnMaD;@E&j9+H(1^CUST`xX$0!7_ld=>X(#sT|4@o zw=n`qVUz&p;4ZesG!ZmQMr)W~IHC(+Ck;u!` z+n7APmNr(Ch&hxpc*-0R{?fAsLxoWyR)%3%F<96__r6o$jFn*1tA{UyZx+fn7T|5i zpu;9G=|{6`p}HN~16YxAwa)>Y~o?6knO_zh;7!qT|h z#eSUJBCJNYT)iTEz1~LtS0Th~V>C|{Q&aForOuZsnyHA+eQ#0rxWSps>GN!u;&*|! zYW@4E10Kdvma$q@$^$t!nOfRnYT|mqxZnP6rf>vl0G{$!d-g?}fldCGxNH!Z6A3AL-cofjEFL$ElsjzP$Q7HR*xxKMc@!PIW zHffLU5m(HPpWgvZj(W_(K%w!8h4o@8SkLUiEkfD%Zke)nKKesE9PD6~`@u6Q5t#QT zf!&{0BE@O#lAm_E6v}|@=GXaRYFyo5z_iNxZwb4&YkPW_n4o9-@T{yjzAa|+h4B1q z49(?6)Og~Gyi$f{*Ec#scZ>P97lGaJisok81o=<01Bh$bt`{r?j!wMyhXtW!)qMtm z@5K1ea)aIMfG~I`*}+K5XK`AzqC3EDv80CN6MMkD+xff2&GoAAaOJz?lQt#eo{Bt! z6U<-5@-7*x#hms4aa9h)|ISF=Gy%P|Jayb6F6Z#q5@WLR*BF56A)>9 zeEvtTTjKxd Date: Tue, 14 Jul 2026 18:00:23 +0400 Subject: [PATCH 04/27] e2e tests: collect unstable tests statistics (#34300) --- .../common/aiColumn/virtualScrolling.functional.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts index 5ea0b4c8bb8a..d1085aa9667a 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts @@ -8,6 +8,10 @@ fixture`Ai Column.Virtual Scrolling.Functional` const DATA_GRID_SELECTOR = '#container'; +const CLASS = { + loadPanelContent: 'dx-loadpanel-content', +}; + const checkAIColumnTexts = async ( t: TestController, component: DataGrid, @@ -61,7 +65,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 11); @@ -88,7 +92,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 12); }) @@ -168,7 +172,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 11); @@ -195,7 +199,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 12); }) From 58fab800b1bf12b86d480abe1d9050c60f1baab6 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 16 Jul 2026 10:34:27 +0400 Subject: [PATCH 05/27] branch dxdsfluent --- .../build/bundle-template.dxdsfluent.scss | 12 + .../devextreme-scss/build/theme-options.cjs | 3 + .../color-schemes/dark/grid/text-stub.png | Bin 0 -> 1230 bytes .../color-schemes/dark/pulldown.png | Bin 0 -> 328 bytes .../color-schemes/light/grid/text-stub.png | Bin 0 -> 1230 bytes .../color-schemes/light/pulldown.png | Bin 0 -> 328 bytes .../scss/widgets/dxdsfluent/_colors.scss | 314 +++++ .../scss/widgets/dxdsfluent/_index.scss | 65 + .../scss/widgets/dxdsfluent/_sizes.scss | 86 ++ .../scss/widgets/dxdsfluent/_variables.scss | 1 + .../widgets/dxdsfluent/accordion/_colors.scss | 25 + .../widgets/dxdsfluent/accordion/_index.scss | 84 ++ .../widgets/dxdsfluent/accordion/_sizes.scss | 36 + .../dxdsfluent/actionSheet/_colors.scss | 6 + .../dxdsfluent/actionSheet/_index.scss | 24 + .../dxdsfluent/actionSheet/_sizes.scss | 6 + .../dxdsfluent/autocomplete/_colors.scss | 6 + .../dxdsfluent/autocomplete/_index.scss | 30 + .../dxdsfluent/autocomplete/_sizes.scss | 4 + .../widgets/dxdsfluent/badge/_colors.scss | 29 + .../scss/widgets/dxdsfluent/badge/_index.scss | 22 + .../scss/widgets/dxdsfluent/badge/_sizes.scss | 19 + .../scss/widgets/dxdsfluent/box/_colors.scss | 6 + .../scss/widgets/dxdsfluent/box/_index.scss | 12 + .../scss/widgets/dxdsfluent/box/_sizes.scss | 4 + .../widgets/dxdsfluent/button/_colors.scss | 424 +++++++ .../widgets/dxdsfluent/button/_index.scss | 219 ++++ .../widgets/dxdsfluent/button/_mixins.scss | 201 ++++ .../widgets/dxdsfluent/button/_sizes.scss | 33 + .../dxdsfluent/buttonGroup/_colors.scss | 8 + .../dxdsfluent/buttonGroup/_index.scss | 43 + .../dxdsfluent/buttonGroup/_sizes.scss | 4 + .../widgets/dxdsfluent/calendar/_colors.scss | 68 ++ .../widgets/dxdsfluent/calendar/_index.scss | 71 ++ .../widgets/dxdsfluent/calendar/_sizes.scss | 28 + .../scss/widgets/dxdsfluent/card/_colors.scss | 6 + .../scss/widgets/dxdsfluent/card/_index.scss | 15 + .../scss/widgets/dxdsfluent/card/_sizes.scss | 4 + .../widgets/dxdsfluent/cardView/_colors.scss | 657 ++++++++++ .../widgets/dxdsfluent/cardView/_index.scss | 5 + .../widgets/dxdsfluent/cardView/_sizes.scss | 491 ++++++++ .../scss/widgets/dxdsfluent/chat/_colors.scss | 195 +++ .../scss/widgets/dxdsfluent/chat/_index.scss | 150 +++ .../scss/widgets/dxdsfluent/chat/_sizes.scss | 167 +++ .../widgets/dxdsfluent/checkBox/_colors.scss | 22 + .../widgets/dxdsfluent/checkBox/_index.scss | 224 ++++ .../widgets/dxdsfluent/checkBox/_sizes.scss | 28 + .../scss/widgets/dxdsfluent/color.scss | 36 + .../widgets/dxdsfluent/colorBox/_colors.scss | 7 + .../widgets/dxdsfluent/colorBox/_index.scss | 70 ++ .../widgets/dxdsfluent/colorBox/_sizes.scss | 19 + .../widgets/dxdsfluent/colorView/_colors.scss | 17 + .../widgets/dxdsfluent/colorView/_index.scss | 123 ++ .../widgets/dxdsfluent/colorView/_sizes.scss | 22 + .../widgets/dxdsfluent/common/_colors.scss | 18 + .../widgets/dxdsfluent/common/_index.scss | 68 ++ .../widgets/dxdsfluent/common/_mixins.scss | 107 ++ .../widgets/dxdsfluent/common/_sizes.scss | 33 + .../dxdsfluent/contextMenu/_colors.scss | 6 + .../dxdsfluent/contextMenu/_index.scss | 85 ++ .../dxdsfluent/contextMenu/_sizes.scss | 21 + .../widgets/dxdsfluent/dataGrid/_colors.scss | 21 + .../widgets/dxdsfluent/dataGrid/_index.scss | 125 ++ .../widgets/dxdsfluent/dataGrid/_sizes.scss | 22 + .../dxdsfluent/dataGrid/layout/cell.scss | 104 ++ .../widgets/dxdsfluent/dateBox/_colors.scss | 4 + .../widgets/dxdsfluent/dateBox/_index.scss | 144 +++ .../widgets/dxdsfluent/dateBox/_mixins.scss | 17 + .../widgets/dxdsfluent/dateBox/_sizes.scss | 7 + .../dxdsfluent/dateRangeBox/_colors.scss | 1 + .../dxdsfluent/dateRangeBox/_index.scss | 115 ++ .../dxdsfluent/dateRangeBox/_sizes.scss | 13 + .../widgets/dxdsfluent/dateView/_colors.scss | 9 + .../widgets/dxdsfluent/dateView/_index.scss | 142 +++ .../widgets/dxdsfluent/dateView/_sizes.scss | 6 + .../widgets/dxdsfluent/diagram/_colors.scss | 31 + .../widgets/dxdsfluent/diagram/_index.scss | 480 ++++++++ .../widgets/dxdsfluent/diagram/_sizes.scss | 74 ++ .../widgets/dxdsfluent/drawer/_colors.scss | 11 + .../widgets/dxdsfluent/drawer/_index.scss | 11 + .../widgets/dxdsfluent/drawer/_sizes.scss | 4 + .../dxdsfluent/dropDownBox/_colors.scss | 6 + .../dxdsfluent/dropDownBox/_index.scss | 8 + .../dxdsfluent/dropDownBox/_sizes.scss | 4 + .../dxdsfluent/dropDownButton/_colors.scss | 6 + .../dxdsfluent/dropDownButton/_index.scss | 46 + .../dxdsfluent/dropDownButton/_sizes.scss | 19 + .../dxdsfluent/dropDownEditor/_colors.scss | 15 + .../dxdsfluent/dropDownEditor/_index.scss | 136 +++ .../dxdsfluent/dropDownEditor/_sizes.scss | 17 + .../dxdsfluent/dropDownList/_colors.scss | 6 + .../dxdsfluent/dropDownList/_index.scss | 15 + .../dxdsfluent/dropDownList/_sizes.scss | 4 + .../dxdsfluent/dropDownMenu/_colors.scss | 6 + .../dxdsfluent/dropDownMenu/_index.scss | 20 + .../dxdsfluent/dropDownMenu/_sizes.scss | 6 + .../widgets/dxdsfluent/fieldset/_colors.scss | 12 + .../widgets/dxdsfluent/fieldset/_index.scss | 145 +++ .../widgets/dxdsfluent/fieldset/_sizes.scss | 33 + .../dxdsfluent/fileManager/_colors.scss | 34 + .../dxdsfluent/fileManager/_index.scss | 262 ++++ .../dxdsfluent/fileManager/_sizes.scss | 53 + .../dxdsfluent/fileUploader/_colors.scss | 26 + .../dxdsfluent/fileUploader/_index.scss | 200 ++++ .../dxdsfluent/fileUploader/_sizes.scss | 35 + .../dxdsfluent/filterBuilder/_colors.scss | 77 ++ .../dxdsfluent/filterBuilder/_index.scss | 127 ++ .../dxdsfluent/filterBuilder/_sizes.scss | 29 + .../scss/widgets/dxdsfluent/form/_colors.scss | 34 + .../scss/widgets/dxdsfluent/form/_index.scss | 131 ++ .../scss/widgets/dxdsfluent/form/_sizes.scss | 45 + .../widgets/dxdsfluent/gallery/_colors.scss | 40 + .../widgets/dxdsfluent/gallery/_index.scss | 114 ++ .../widgets/dxdsfluent/gallery/_sizes.scss | 7 + .../widgets/dxdsfluent/gantt/_colors.scss | 30 + .../scss/widgets/dxdsfluent/gantt/_index.scss | 291 +++++ .../scss/widgets/dxdsfluent/gantt/_sizes.scss | 28 + .../widgets/dxdsfluent/gridBase/_colors.scss | 211 ++++ .../widgets/dxdsfluent/gridBase/_index.scss | 1059 +++++++++++++++++ .../widgets/dxdsfluent/gridBase/_sizes.scss | 118 ++ .../dxdsfluent/gridBase/_variables.scss | 10 + .../gridBase/layout/aiChat/_index.scss | 19 + .../gridBase/layout/aiChat/_sizes.scss | 3 + .../dxdsfluent/gridBase/layout/cell.scss | 543 +++++++++ .../dxdsfluent/htmlEditor/_colors.scss | 17 + .../widgets/dxdsfluent/htmlEditor/_index.scss | 330 +++++ .../widgets/dxdsfluent/htmlEditor/_sizes.scss | 43 + .../widgets/dxdsfluent/icons/_colors.scss | 6 + .../scss/widgets/dxdsfluent/icons/_index.scss | 47 + .../scss/widgets/dxdsfluent/icons/_sizes.scss | 4 + .../widgets/dxdsfluent/informer/_colors.scss | 20 + .../widgets/dxdsfluent/informer/_index.scss | 18 + .../widgets/dxdsfluent/informer/_sizes.scss | 24 + .../scss/widgets/dxdsfluent/list/_colors.scss | 79 ++ .../scss/widgets/dxdsfluent/list/_index.scss | 532 +++++++++ .../scss/widgets/dxdsfluent/list/_sizes.scss | 35 + .../dxdsfluent/loadIndicator/_colors.scss | 44 + .../dxdsfluent/loadIndicator/_index.scss | 134 +++ .../dxdsfluent/loadIndicator/_sizes.scss | 4 + .../widgets/dxdsfluent/loadPanel/_colors.scss | 12 + .../widgets/dxdsfluent/loadPanel/_index.scss | 18 + .../widgets/dxdsfluent/loadPanel/_sizes.scss | 9 + .../widgets/dxdsfluent/lookup/_colors.scss | 9 + .../widgets/dxdsfluent/lookup/_index.scss | 175 +++ .../widgets/dxdsfluent/lookup/_sizes.scss | 23 + .../scss/widgets/dxdsfluent/map/_index.scss | 7 + .../scss/widgets/dxdsfluent/menu/_colors.scss | 35 + .../scss/widgets/dxdsfluent/menu/_index.scss | 109 ++ .../scss/widgets/dxdsfluent/menu/_sizes.scss | 14 + .../widgets/dxdsfluent/menuBase/_colors.scss | 8 + .../widgets/dxdsfluent/menuBase/_index.scss | 80 ++ .../widgets/dxdsfluent/menuBase/_sizes.scss | 20 + .../widgets/dxdsfluent/multiView/_colors.scss | 6 + .../widgets/dxdsfluent/multiView/_index.scss | 9 + .../widgets/dxdsfluent/multiView/_sizes.scss | 4 + .../widgets/dxdsfluent/numberBox/_colors.scss | 11 + .../widgets/dxdsfluent/numberBox/_index.scss | 88 ++ .../widgets/dxdsfluent/numberBox/_sizes.scss | 15 + .../widgets/dxdsfluent/overlay/_colors.scss | 26 + .../widgets/dxdsfluent/overlay/_index.scss | 17 + .../widgets/dxdsfluent/overlay/_sizes.scss | 4 + .../dxdsfluent/pagination/_colors.scss | 18 + .../widgets/dxdsfluent/pagination/_index.scss | 98 ++ .../widgets/dxdsfluent/pagination/_sizes.scss | 26 + .../widgets/dxdsfluent/pivotGrid/_colors.scss | 58 + .../widgets/dxdsfluent/pivotGrid/_index.scss | 235 ++++ .../widgets/dxdsfluent/pivotGrid/_sizes.scss | 40 + .../widgets/dxdsfluent/popover/_colors.scss | 7 + .../widgets/dxdsfluent/popover/_index.scss | 18 + .../widgets/dxdsfluent/popover/_sizes.scss | 4 + .../widgets/dxdsfluent/popup/_colors.scss | 31 + .../scss/widgets/dxdsfluent/popup/_index.scss | 85 ++ .../scss/widgets/dxdsfluent/popup/_sizes.scss | 50 + .../dxdsfluent/progressBar/_colors.scss | 40 + .../dxdsfluent/progressBar/_index.scss | 125 ++ .../dxdsfluent/progressBar/_sizes.scss | 18 + .../dxdsfluent/radioButton/_colors.scss | 6 + .../dxdsfluent/radioButton/_index.scss | 154 +++ .../dxdsfluent/radioButton/_sizes.scss | 17 + .../dxdsfluent/radioGroup/_colors.scss | 22 + .../widgets/dxdsfluent/radioGroup/_index.scss | 26 + .../widgets/dxdsfluent/radioGroup/_sizes.scss | 17 + .../dxdsfluent/rangeSlider/_colors.scss | 6 + .../dxdsfluent/rangeSlider/_index.scss | 14 + .../dxdsfluent/rangeSlider/_sizes.scss | 4 + .../dxdsfluent/recurrenceEditor/_colors.scss | 6 + .../dxdsfluent/recurrenceEditor/_index.scss | 45 + .../dxdsfluent/recurrenceEditor/_sizes.scss | 19 + .../dxdsfluent/responsiveBox/_colors.scss | 6 + .../dxdsfluent/responsiveBox/_index.scss | 8 + .../dxdsfluent/responsiveBox/_sizes.scss | 4 + .../widgets/dxdsfluent/scheduler/_colors.scss | 128 ++ .../widgets/dxdsfluent/scheduler/_index.scss | 1043 ++++++++++++++++ .../widgets/dxdsfluent/scheduler/_sizes.scss | 219 ++++ .../dxdsfluent/scrollView/_colors.scss | 7 + .../widgets/dxdsfluent/scrollView/_index.scss | 89 ++ .../widgets/dxdsfluent/scrollView/_sizes.scss | 4 + .../dxdsfluent/scrollable/_colors.scss | 23 + .../widgets/dxdsfluent/scrollable/_index.scss | 30 + .../widgets/dxdsfluent/scrollable/_sizes.scss | 6 + .../widgets/dxdsfluent/selectBox/_colors.scss | 11 + .../widgets/dxdsfluent/selectBox/_index.scss | 25 + .../widgets/dxdsfluent/selectBox/_sizes.scss | 4 + .../widgets/dxdsfluent/slider/_colors.scss | 33 + .../widgets/dxdsfluent/slider/_index.scss | 170 +++ .../widgets/dxdsfluent/slider/_sizes.scss | 35 + .../widgets/dxdsfluent/sortable/_colors.scss | 6 + .../widgets/dxdsfluent/sortable/_index.scss | 11 + .../widgets/dxdsfluent/sortable/_sizes.scss | 4 + .../dxdsfluent/speechToText/_colors.scss | 4 + .../dxdsfluent/speechToText/_index.scss | 5 + .../dxdsfluent/speechToText/_sizes.scss | 4 + .../dxdsfluent/speedDialAction/_colors.scss | 16 + .../dxdsfluent/speedDialAction/_index.scss | 51 + .../dxdsfluent/speedDialAction/_sizes.scss | 22 + .../widgets/dxdsfluent/splitter/_colors.scss | 57 + .../widgets/dxdsfluent/splitter/_index.scss | 27 + .../widgets/dxdsfluent/splitter/_sizes.scss | 5 + .../dxdsfluent/splitterBar/_colors.scss | 8 + .../dxdsfluent/splitterBar/_index.scss | 19 + .../dxdsfluent/splitterBar/_sizes.scss | 3 + .../widgets/dxdsfluent/stepper/_colors.scss | 175 +++ .../widgets/dxdsfluent/stepper/_index.scss | 55 + .../widgets/dxdsfluent/stepper/_sizes.scss | 37 + .../widgets/dxdsfluent/switch/_colors.scss | 45 + .../widgets/dxdsfluent/switch/_index.scss | 53 + .../widgets/dxdsfluent/switch/_sizes.scss | 35 + .../widgets/dxdsfluent/tabPanel/_colors.scss | 6 + .../widgets/dxdsfluent/tabPanel/_index.scss | 77 ++ .../widgets/dxdsfluent/tabPanel/_sizes.scss | 4 + .../scss/widgets/dxdsfluent/tabs/_index.scss | 17 + .../tabs/layout/navigation-button/_base.scss | 62 + .../dxdsfluent/tabs/layout/tab/_base.scss | 128 ++ .../layout/tab/styling-mode/_primary.scss | 121 ++ .../layout/tab/styling-mode/_secondary.scss | 117 ++ .../dxdsfluent/tabs/layout/tabs/_index.scss | 24 + .../dxdsfluent/tabs/mixins/_index.scss | 86 ++ .../dxdsfluent/tabs/variables/_colors.scss | 87 ++ .../dxdsfluent/tabs/variables/_sizes.scss | 61 + .../widgets/dxdsfluent/tagBox/_colors.scss | 44 + .../widgets/dxdsfluent/tagBox/_index.scss | 186 +++ .../widgets/dxdsfluent/tagBox/_sizes.scss | 46 + .../widgets/dxdsfluent/textArea/_colors.scss | 6 + .../widgets/dxdsfluent/textArea/_index.scss | 35 + .../widgets/dxdsfluent/textArea/_sizes.scss | 13 + .../widgets/dxdsfluent/textBox/_colors.scss | 5 + .../widgets/dxdsfluent/textBox/_index.scss | 71 ++ .../widgets/dxdsfluent/textBox/_sizes.scss | 13 + .../dxdsfluent/textEditor/_colors.scss | 153 +++ .../widgets/dxdsfluent/textEditor/_index.scss | 586 +++++++++ .../widgets/dxdsfluent/textEditor/_sizes.scss | 71 ++ .../widgets/dxdsfluent/tileView/_colors.scss | 17 + .../widgets/dxdsfluent/tileView/_index.scss | 29 + .../widgets/dxdsfluent/tileView/_sizes.scss | 4 + .../widgets/dxdsfluent/timeView/_colors.scss | 6 + .../widgets/dxdsfluent/timeView/_index.scss | 56 + .../widgets/dxdsfluent/timeView/_sizes.scss | 7 + .../widgets/dxdsfluent/toast/_colors.scss | 64 + .../scss/widgets/dxdsfluent/toast/_index.scss | 53 + .../scss/widgets/dxdsfluent/toast/_sizes.scss | 21 + .../widgets/dxdsfluent/toolbar/_colors.scss | 13 + .../widgets/dxdsfluent/toolbar/_index.scss | 182 +++ .../widgets/dxdsfluent/toolbar/_mixins.scss | 61 + .../widgets/dxdsfluent/toolbar/_sizes.scss | 25 + .../widgets/dxdsfluent/tooltip/_colors.scss | 30 + .../widgets/dxdsfluent/tooltip/_index.scss | 40 + .../widgets/dxdsfluent/tooltip/_sizes.scss | 19 + .../widgets/dxdsfluent/treeList/_colors.scss | 9 + .../widgets/dxdsfluent/treeList/_index.scss | 59 + .../widgets/dxdsfluent/treeList/_sizes.scss | 22 + .../dxdsfluent/treeList/layout/cell.scss | 8 + .../widgets/dxdsfluent/treeView/_colors.scss | 46 + .../widgets/dxdsfluent/treeView/_index.scss | 143 +++ .../widgets/dxdsfluent/treeView/_sizes.scss | 50 + .../dxdsfluent/typography/_colors.scss | 6 + .../widgets/dxdsfluent/typography/_index.scss | 70 ++ .../dxdsfluent/typography/_mixins.scss | 5 + .../widgets/dxdsfluent/typography/_sizes.scss | 60 + .../dxdsfluent/validation/_colors.scss | 9 + .../widgets/dxdsfluent/validation/_index.scss | 24 + .../widgets/dxdsfluent/validation/_sizes.scss | 28 + .../widgets/dxdsfluent/widget/_colors.scss | 6 + .../widgets/dxdsfluent/widget/_index.scss | 28 + .../widgets/dxdsfluent/widget/_sizes.scss | 4 + .../tests/unused-elements.test.ts | 10 +- .../executors/scss-build/scss-build.impl.ts | 7 +- 286 files changed, 18809 insertions(+), 3 deletions(-) create mode 100644 packages/devextreme-scss/build/bundle-template.dxdsfluent.scss create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/pulldown.png create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/pulldown.png create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_variables.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss diff --git a/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss new file mode 100644 index 000000000000..3be8b3678cb3 --- /dev/null +++ b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss @@ -0,0 +1,12 @@ +@use "../widgets/dxdsfluent/colors" with ($color: "$COLOR", $mode: "$MODE"); +@use "../widgets/dxdsfluent/sizes" with ($size: "$SIZE"); +@use "../widgets/dxdsfluent/typography"; +@use "../widgets/dxdsfluent/icons"; +@use "../widgets/dxdsfluent/widget"; +@use "../widgets/dxdsfluent/card"; +@use "../widgets/dxdsfluent/fieldset"; +@use "../widgets/dxdsfluent/common"; +@use "../widgets/base/resizable"; +@use "../widgets/base/draggable"; +@use "../widgets/base/ui"; +@use "../widgets/dxdsfluent"; diff --git a/packages/devextreme-scss/build/theme-options.cjs b/packages/devextreme-scss/build/theme-options.cjs index 5e62a5f06563..812a6951a7d5 100644 --- a/packages/devextreme-scss/build/theme-options.cjs +++ b/packages/devextreme-scss/build/theme-options.cjs @@ -5,11 +5,14 @@ const materialColors = ['blue', 'lime', 'orange', 'purple', 'teal']; const materialModes = ['light', 'dark']; const fluentColors = ['blue', 'saas']; const fluentModes = ['light', 'dark']; +const dxdsfluentColors = ['blue', 'saas']; +const dxdsfluentModes = ['light', 'dark']; const genericColors = ['carmine', 'contrast', 'dark', 'darkmoon', 'darkviolet', 'greenmist', 'light', 'softblue']; const getThemes = () => sizes.flatMap((size) => [ ...materialModes.flatMap((mode) => materialColors.map((color) => ['material', size, color, mode])), ...fluentModes.flatMap((mode) => fluentColors.map((color) => ['fluent', size, color, mode])), + ...dxdsfluentModes.flatMap((mode) => dxdsfluentColors.map((color) => ['dxdsfluent', size, color, mode])), ...genericColors.map((color) => ['generic', size, color]) ]); diff --git a/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png new file mode 100644 index 0000000000000000000000000000000000000000..77bf05a6864773b085005a5376d4d4f73ed5887a GIT binary patch literal 1230 zcmaJ=O>7fK6dpc#4O+ez30}+TrRfISo4k+pgwQ51CR8CRV!mRCeqN?snyYpuB zec$`uytkJo#t()2KI#JigtLd$JY5a?z76%#uXFC+4|Lf<#)@PTmq=A}5s(c$g<#gw zrcoYg#@v}7(Fgz=KQ#+QQp_EZbZoJjk6~+;L)id~9IQE-K7$CHLer+5X8u@uz(CVT zGshD-KIbT?Y#y$=XtF+D(CagL%3uy2fFm`D3Rs9}ux8ELo>WUSOorNOF9V6Jk+bkoX}fmV)hvq1jxcB<0mi zI~U!hnKB`c#BtSXm955D>`rq+DwX1RkrTxzMMS+hn`pJD?F|G9D)MyKbcl&<=qqYd zxI)qlb=oSyayqiM*S;otVO&jfIDzH;k^*2Z_y17K>YzQ6M{9onQ`jraIf%<64_92B zHm)?_r*b64MH<0w0pr==7AMM>V6TiFs3>sHanm+%)!W;I=WJ(4wRF>&dt}pLcj;9By0G^f z05&LDRW8(CzFAoeKjQnxUW6eU!VviBvrqVs zlfA<8O=}!V@A>WF-9(%FZ1m0bM=x$}IdyBHclW>ePUF?a(*DQ04#kvpNqvD0ZFYU> z&r@HDCkKO^&GexLSXlXf^OOEc$8O7YVE2A`Zuz@!uZ5>xx5@~_uf2p^V1As%A0e-Kw~Cy$vmS aUGD{By6(+O*Zar-00007fK6dpc#4O+ez30}+TrRfISo4k+pgwQ51CR8CRV!mRCeqN?snyYpuB zec$`uytkJo#t()2KI#JigtLd$JY5a?z76%#uXFC+4|Lf<#)@PTmq=A}5s(c$g<#gw zrcoYg#@v}7(Fgz=KQ#+QQp_EZbZoJjk6~+;L)id~9IQE-K7$CHLer+5X8u@uz(CVT zGshD-KIbT?Y#y$=XtF+D(CagL%3uy2fFm`D3Rs9}ux8ELo>WUSOorNOF9V6Jk+bkoX}fmV)hvq1jxcB<0mi zI~U!hnKB`c#BtSXm955D>`rq+DwX1RkrTxzMMS+hn`pJD?F|G9D)MyKbcl&<=qqYd zxI)qlb=oSyayqiM*S;otVO&jfIDzH;k^*2Z_y17K>YzQ6M{9onQ`jraIf%<64_92B zHm)?_r*b64MH<0w0pr==7AMM>V6TiFs3>sHanm+%)!W;I=WJ(4wRF>&dt}pLcj;9By0G^f z05&LDRW8(CzFAoeKjQnxUW6eU!VviBvrqVs zlfA<8O=}!V@A>WF-9(%FZ1m0bM=x$}IdyBHclW>ePUF?a(*DQ04#kvpNqvD0ZFYU> z&r@HDCkKO^&GexLSXlXf^OOEc$8O7YVE2A`Zuz@!uZ5>xx5@~_uf2p^V1As%A0e-Kw~Cy$vmS aUGD{By6(+O*Zar-0000 .dx-accordion-item-title { + background-color: $accordion-title-bg-hover; + } + } + + &.dx-state-active, + &.dx-state-focused { + > .dx-accordion-item-title { + color: $accordion-title-active-color; + background-color: $accordion-title-bg-active; + } + } +} + +.dx-accordion-item-opened { + margin-block: $fluent-accordion-item-opened-margin; + + & > .dx-accordion-item-title { + &::before { + content: "\f014"; + } + } +} + +.dx-accordion-item-title { + border-radius: $accordion-item-border-radius; + min-height: $fluent-accordion-title-height; + padding: $fluent-accordion-title-vertical-padding $fluent-accordion-title-horizontal-padding; + + &::before { + content: "\f016"; + font-weight: normal; + font-size: $accordion-title-icon-size; + font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes + line-height: 100%; + margin-inline-end: $accordion-title-icon-margin; + } + + .dx-icon { + @include dx-icon-sizing($accordion-title-icon-size); + } +} + +.dx-accordion-item-title-caption { + color: $accordion-title-color; + font-size: $fluent-accordion-title-font-size; + font-weight: 500; + + .dx-icon { + @include dx-icon-margin($accordion-title-icon-margin); + } +} + +.dx-state-disabled { + &.dx-accordion { + opacity: 1; + color: $accordion-disabled-color; + } +} + +.dx-accordion-item-body { + padding: $fluent-accordion-body-padding; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss new file mode 100644 index 000000000000..9b10c508a768 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss @@ -0,0 +1,36 @@ +@use "../sizes" as *; + +// adduse + +$fluent-accordion-title-horizontal-padding: null !default; +$fluent-accordion-title-vertical-padding: 6px !default; +$fluent-accordion-body-padding: null !default; +$fluent-accordion-title-height: null !default; + +$accordion-title-icon-margin: null !default; +$accordion-title-icon-size: null !default; +$accordion-item-border-radius: $fluent-base-border-radius !default; + +/** +* $name 10. Item expanded margin +* $type text +*/ +$fluent-accordion-item-opened-margin: null !default; + +@if $size == "default" { + $fluent-accordion-title-horizontal-padding: 12px !default; + $fluent-accordion-body-padding: 12px !default; + $fluent-accordion-title-height: 44px !default; + $accordion-title-icon-margin: 8px !default; + $accordion-title-icon-size: 20px !default; + $fluent-accordion-item-opened-margin: 0 !default; +} + +@else if $size == "compact" { + $fluent-accordion-title-horizontal-padding: 8px !default; + $fluent-accordion-body-padding: 8px !default; + $fluent-accordion-title-height: 32px !default; + $accordion-title-icon-margin: 6px !default; + $accordion-title-icon-size: 16px !default; + $fluent-accordion-item-opened-margin: 0 !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss new file mode 100644 index 000000000000..ee0d576b3184 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss @@ -0,0 +1,24 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/actionSheet"; + +// adduse + + +.dx-actionsheet-container { + .dx-actionsheet-item:not(:last-child) { + margin: $fluent-actionsheet-item-margin; + } + + .dx-button { + margin: 0; + } +} + +.dx-button.dx-actionsheet-cancel { + margin: 0; + margin-top: $fluent-actionsheet-item-margin-value; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss new file mode 100644 index 000000000000..a21b4a91b6d5 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-actionsheet-item-margin-value: 12px; +$fluent-actionsheet-item-margin: 0 0 $fluent-actionsheet-item-margin-value 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss new file mode 100644 index 000000000000..13072ae38ad6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss @@ -0,0 +1,30 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; + +// adduse +@use "../dropDownList"; + +@mixin autocomplete-editor-container-offset() { + inset-inline-end: $fluent-invalid-badge-horizontal-padding; +} + +.dx-autocomplete.dx-invalid, +.dx-autocomplete.dx-valid { + .dx-texteditor-buttons-container { + &::after { + @include autocomplete-editor-container-offset(); + } + } +} + +.dx-autocomplete.dx-validation-pending { + .dx-texteditor-buttons-container { + .dx-pending-indicator { + @include autocomplete-editor-container-offset(); + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss new file mode 100644 index 000000000000..5c86f7a03ff9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss @@ -0,0 +1,29 @@ +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 140. Badge text color +* $type color +*/ +$badge-color: null !default; + +/** +* $name 150. Badge background color +* $type color +*/ +$badge-bg: null !default; + +$badge-text-color-disabled: $base-foreground-disabled !default; +$badge-background-color-disabled: $base-background-disabled !default; + +@if $mode == "light" { + $badge-bg: $base-accent !default; + $badge-color: $base-inverted-text-color !default; +} + +@if $mode == "dark" { + $badge-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; + $badge-color: $base-text-color !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss new file mode 100644 index 000000000000..8a0fc9baf570 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss @@ -0,0 +1,22 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/badge"; + +// adduse + +.dx-badge { + background-color: $badge-bg; + color: $badge-color; + font-size: $fluent-badge-font-size; + padding: $fluent-badge-padding; + border-radius: 999em; + line-height: $badge-line-height; + + .dx-state-disabled & { + color: $badge-text-color-disabled; + background-color: $badge-background-color-disabled; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss new file mode 100644 index 000000000000..a7255e2af727 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-badge-padding: null !default; +$fluent-badge-font-size: null !default; +$badge-line-height: null !default; + +@if $size == "default" { + $fluent-badge-padding: 0 6px !default; + $fluent-badge-font-size: 12px !default; + $badge-line-height: 20px !default; +} + +@else if $size == "compact" { + $fluent-badge-padding: 0 6px !default; + $fluent-badge-font-size: 10px !default; + $badge-line-height: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss new file mode 100644 index 000000000000..682a82c99d8a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss @@ -0,0 +1,12 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/box"; + +// adduse + +.dx-box-item-content { + font-size: $fluent-base-font-size; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss new file mode 100644 index 000000000000..10cc4afc0ba2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss @@ -0,0 +1,424 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +$button-border-radius: $base-border-radius !default; +$button-disabled-background: $base-background-disabled !default; +$button-disabled-icon-opacity: 0.6 !default; +$button-shadow-color: null !default; + +/** +* $name 10. Text color +* $type color +*/ +$button-normal-color: $base-text-color !default; + +/** +* $name 15. Background color (contained) +* $type color +*/ +$button-normal-bg: $base-element-bg !default; + +/** +* $name 16. Background color (outlined) +* $type color +*/ +$button-normal-outlined-bg: transparent !default; + +/** +* $name 17. Background color (text) +* $type color +*/ +$button-normal-text-bg: transparent !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-normal-selected-color: $base-text-color !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-normal-hover-bg: $base-hover-bg !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-normal-focused-bg: $base-focus-bg !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-normal-active-bg: $base-active-bg !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-normal-selected-bg: $base-selected-bg !default; + +/** +* $name 10. Text color (contained) +* $type color +*/ +$button-default-color: null !default; + +/** +* $name 15. Background color +* $type color +*/ +$button-default-bg: $base-accent !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-default-selected-color: null !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-default-hover-bg: null !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-default-focused-bg: null !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-default-active-bg: null !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-default-selected-bg: null !default; + +/** +* $name 11. Text color (outlined) +* $type color +*/ +$button-default-outlined-color: $base-accent !default; +$button-default-outlined-border-color: $base-accent !default; + +$button-default-outlined-bg: transparent !default; +$button-default-outlined-hover-bg: null !default; +$button-default-outlined-focused-bg: null !default; +$button-default-outlined-active-bg: null !default; +$button-default-outlined-selected-bg: null !default; + +/** +* $name 11. Text color (text) +* $type color +*/ +$button-default-text-color: $base-accent !default; + +/** +* $name 10. Text color +* $type color +*/ +$button-danger-color: null !default; + +/** +* $name 15. Background color +* $type color +*/ +$button-danger-bg: $base-danger !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-danger-selected-color: null !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-danger-hover-bg: $base-danger-hover !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-danger-focused-bg: $base-danger-hover !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-danger-active-bg: $base-danger-active !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-danger-selected-bg: $base-danger-selected !default; + +$button-danger-outlined-color: $base-danger !default; +$button-danger-outlined-border-color: $base-danger !default; +$button-danger-outlined-color-hover: null !default; +$button-danger-outlined-color-active: null !default; +$button-danger-outlined-selected-color: null !default; +$button-danger-outlined-bg: transparent !default; +$button-danger-outlined-hover-bg: null !default; +$button-danger-outlined-focused-bg: null !default; +$button-danger-outlined-active-bg: null !default; +$button-danger-outlined-selected-bg: null !default; + +/** +* $name 10. Text color +* $type color +*/ +$button-success-color: null !default; + +/** +* $name 15. Background color +* $type color +*/ +$button-success-bg: $base-success !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-success-selected-color: null !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-success-hover-bg: null !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-success-focused-bg: null !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-success-active-bg: null !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-success-selected-bg: null !default; + +$button-success-outlined-color: $base-success !default; +$button-success-outlined-border-color: $base-success !default; +$button-success-outlined-color-hover: null !default; +$button-success-outlined-color-active: null !default; +$button-success-outlined-selected-color: null !default; +$button-success-outlined-bg: transparent !default; +$button-success-outlined-hover-bg: null !default; +$button-success-outlined-focused-bg: null !default; +$button-success-outlined-active-bg: null !default; +$button-success-outlined-selected-bg: null !default; + +$button-accent-foreground-color: null !default; + +@if $mode == "light" { + $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -9.10%, $lightness: -23.53%) !default; + + $button-default-hover-bg: $base-accent-hover !default; + $button-default-focused-bg: $base-accent-hover !default; + $button-default-active-bg: $base-accent-active !default; + $button-default-selected-bg: $base-accent-selected !default; + + $button-success-hover-bg: color.adjust($base-success, $saturation: 0.63%, $space: hsl, $lightness: -2.75%) !default; + $button-success-focused-bg: $button-success-hover-bg !default; + $button-success-active-bg: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; + $button-success-selected-bg: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; + + @if $color == "blue" { + $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; + $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 10.40%, $lightness: -5.49%) !default; + $button-default-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $lightness: -17.06%) !default; + + $button-danger-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.5deg, $saturation: 0.6%, $lightness: 46.7%) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $lightness: -13.9%) !default; + $button-danger-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $lightness: 7.1%) !default; + + $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: -29.8%, $space: hsl, $lightness: 68.8%) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: color.adjust($base-success, $saturation: -34.9%, $space: hsl, $lightness: 46.1%) !default; + $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: -35%, $space: hsl, $lightness: 57.6%) !default; + } + + @if $color == "saas" { + $button-default-outlined-hover-bg: color.mix($base-bg, $base-accent, 90%) !default; + $button-default-outlined-selected-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + + $button-danger-outlined-hover-bg: color.mix($base-bg, $base-danger, 90%) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + + $button-success-outlined-hover-bg: color.mix($base-bg, $base-success, 90%) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + $button-success-outlined-selected-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + } + + $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; + + $button-danger-outlined-color-hover: $base-danger-selected !default; + $button-danger-outlined-color-active: $base-danger-active !default; + $button-danger-outlined-selected-color: $base-danger-selected !default; + + $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; + $button-success-outlined-color-active: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; + $button-success-outlined-selected-color: $button-success-outlined-color-hover; + + $button-default-color: $base-inverted-text-color !default; + $button-default-selected-color: $base-inverted-text-color !default; + $button-danger-color: $base-inverted-text-color !default; + $button-danger-selected-color: $base-inverted-text-color !default; + $button-success-color: $base-inverted-text-color !default; + $button-success-selected-color: $base-inverted-text-color !default; + $button-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; +} + +@if $mode == "dark" { + $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 0.9deg, $saturation: -2.2%, $lightness: 22.4%) !default; + + $button-default-hover-bg: $base-accent-hover !default; + $button-default-focused-bg: $base-accent-hover !default; + $button-default-active-bg: $button-accent-foreground-color !default; + $button-default-selected-bg: color.adjust($button-default-active-bg, $saturation: -6.4%, $space: hsl, $lightness: 5.3%) !default; + + $button-success-hover-bg: color.adjust($base-success, $saturation: 5.4%, $space: hsl, $lightness: 22.5%) !default; + $button-success-focused-bg: $button-success-hover-bg !default; + $button-success-active-bg: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; + $button-success-selected-bg: color.adjust($base-success, $saturation: 5.3%, $space: hsl, $lightness: 34.1%) !default; + + $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; + $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; + $button-default-outlined-active-bg: $base-accent-selected !default; + $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -12.33%, $lightness: -41.18%) !default; + + $button-danger-outlined-color-hover: $base-danger-active !default; + $button-danger-outlined-color-active: $base-danger-active !default; + $button-danger-outlined-selected-color: $base-danger-active !default; + + $button-danger-outlined-hover-bg: color.adjust($base-danger, $saturation: -5.1%, $space: hsl, $lightness: -53.5%) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: color.adjust($base-danger, $saturation: -4.6%, $space: hsl, $lightness: -22.9%) !default; + $button-danger-outlined-selected-bg: color.adjust($base-danger, $saturation: -4.3%, $space: hsl, $lightness: -40.4%) !default; + + $button-success-outlined-color-hover: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; + $button-success-outlined-color-active: $button-success-outlined-color-hover !default; + $button-success-outlined-selected-color: $button-success-outlined-color-hover !default; + + $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default; + $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: 40.1%, $space: hsl, $lightness: -35.7%) !default; + + $button-default-color: $base-typography-bg !default; + $button-default-selected-color: $base-typography-bg !default; + $button-danger-color: $base-typography-bg !default; + $button-danger-selected-color: $base-typography-bg !default; + $button-success-color: $base-typography-bg !default; + $button-success-selected-color: $base-typography-bg !default; + $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; +} + +$button-default-icon-color: $button-default-color !default; +$button-normal-icon-color: $button-normal-color !default; +$button-danger-icon-color: $button-danger-color !default; +$button-success-icon-color: $button-success-color !default; + +$button-disabled-text-color: $base-foreground-disabled !default; + +$button-normal-outlined-hover-bg: $button-normal-hover-bg !default; +$button-normal-outlined-focused-bg: $button-normal-focused-bg !default; +$button-normal-outlined-active-bg: $button-normal-active-bg !default; +$button-normal-outlined-selected-bg: $button-normal-selected-bg !default; + +$button-normal-text-hover-bg: $button-normal-hover-bg !default; +$button-normal-text-focused-bg: $button-normal-focused-bg !default; +$button-normal-text-active-bg: $button-normal-active-bg !default; +$button-normal-text-selected-bg: $button-normal-selected-bg !default; + +/** +* $name 12. Hover state text color (outlined) +* $type color +*/ +$button-default-outlined-color-hover: $button-accent-foreground-color !default; + +/** +* $name 13. Active state text color (outlined) +* $type color +*/ +$button-default-outlined-color-active: $button-accent-foreground-color !default; + +/** +* $name 21. Selected state text color (outlined) +* $type color +*/ +$button-default-outlined-selected-color: $button-accent-foreground-color !default; + +/** +* $name 12. Hover state text color (text) +* $type color +*/ +$button-default-text-color-hover: $button-accent-foreground-color !default; + +/** +* $name 13. Active state text color (text) +* $type color +*/ +$button-default-text-color-active: $button-default-outlined-color-active !default; + +/** +* $name 21. Selected state text color (text) +* $type color +*/ +$button-default-text-selected-color: $button-accent-foreground-color !default; + +$button-default-text-bg: transparent !default; +$button-default-text-hover-bg: $button-default-outlined-hover-bg !default; +$button-default-text-focused-bg: $button-default-outlined-focused-bg !default; +$button-default-text-active-bg: $button-default-outlined-active-bg !default; +$button-default-text-selected-bg: $button-default-outlined-selected-bg !default; + +$button-danger-text-color: $button-danger-outlined-color !default; +$button-danger-text-color-hover: $button-danger-outlined-color-hover !default; +$button-danger-text-color-active: $button-danger-outlined-color-active !default; +$button-danger-text-selected-color: $button-danger-outlined-selected-color !default; + +$button-danger-text-bg: transparent !default; +$button-danger-text-hover-bg: $button-danger-outlined-hover-bg !default; +$button-danger-text-focused-bg: $button-danger-outlined-focused-bg !default; +$button-danger-text-active-bg: $button-danger-outlined-active-bg !default; +$button-danger-text-selected-bg: $button-danger-outlined-selected-bg !default; + +$button-success-text-color: $button-success-outlined-color !default; +$button-success-text-color-hover: $button-success-outlined-color-hover !default; +$button-success-text-color-active: $button-success-outlined-color-active !default; +$button-success-text-selected-color: $button-success-outlined-selected-color !default; + +$button-success-text-bg: transparent !default; +$button-success-text-hover-bg: $button-success-outlined-hover-bg !default; +$button-success-text-focused-bg: $button-success-outlined-hover-bg !default; +$button-success-text-active-bg: $button-success-outlined-active-bg !default; +$button-success-text-selected-bg: $button-success-outlined-selected-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss new file mode 100644 index 000000000000..e4ea30e6a047 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss @@ -0,0 +1,219 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "mixins" as *; +@use "../../base/button"; + +// adduse + +.dx-button-content { + line-height: $fluent-button-content-line-height; +} + +.dx-button-text { + line-height: $fluent-button-text-line-height; + text-transform: $fluent-button-text-transform; + font-weight: $fluent-button-text-font-weight; + letter-spacing: $fluent-button-text-letter-spacing; +} + +.dx-button { + @include dx-button-onlyicon-sizing(); +} + +.dx-button-has-icon { + @include dx-button-onlyicon-sizing(); +} + +.dx-button-has-text { + @include dx-button-withtext-sizing(); +} + +.dx-button-has-icon.dx-button-has-text { + @include dx-button-text-and-icon-sizing(); +} + +// NOTE: Button styles + +.dx-button-mode-contained { + &.dx-button-normal { + box-shadow: $fluent-button-box-shadow-size $button-shadow-color; + } +} + +.dx-button { // stylelint-disable-line no-duplicate-selectors + height: $fluent-button-height; + position: relative; + + .dx-button-content { + position: relative; + } + + @include dx-button-styling( + $button-normal-bg, + $button-normal-color, + $button-normal-hover-bg, + $button-normal-focused-bg, + $button-normal-active-bg, + $button-normal-icon-color, + $button-normal-selected-bg, + $button-normal-selected-color, + ); + + &.dx-button-default { + @include dx-button-styling( + $button-default-bg, + $button-default-color, + $button-default-hover-bg, + $button-default-focused-bg, + $button-default-active-bg, + $button-default-icon-color, + $button-default-selected-bg, + $button-default-selected-color, + ); + } + + &.dx-button-danger { + @include dx-button-styling( + $button-danger-bg, + $button-danger-color, + $button-danger-hover-bg, + $button-danger-focused-bg, + $button-danger-active-bg, + $button-danger-icon-color, + $button-danger-selected-bg, + $button-danger-selected-color, + ); + } + + &.dx-button-success { + @include dx-button-styling( + $button-success-bg, + $button-success-color, + $button-success-hover-bg, + $button-success-focused-bg, + $button-success-active-bg, + $button-success-icon-color, + $button-success-selected-bg, + $button-success-selected-color, + ); + } +} + +.dx-button-mode-text { + @include dx-button-flat-color-styling( + $button-normal-color, + $button-normal-color, + $button-normal-color, + $button-normal-text-bg, + $button-normal-text-hover-bg, + $button-normal-text-focused-bg, + $button-normal-text-active-bg, + $button-normal-text-selected-bg, + $button-normal-selected-color, + ); + + &.dx-button-default { + @include dx-button-flat-color-styling( + $button-default-text-color, + $button-default-text-color-hover, + $button-default-text-color-active, + $button-default-text-bg, + $button-default-text-hover-bg, + $button-default-text-focused-bg, + $button-default-text-active-bg, + $button-default-text-selected-bg, + $button-default-text-selected-color, + ); + } + + &.dx-button-danger { + @include dx-button-flat-color-styling( + $button-danger-text-color, + $button-danger-text-color-hover, + $button-danger-text-color-active, + $button-danger-text-bg, + $button-danger-text-hover-bg, + $button-danger-text-focused-bg, + $button-danger-text-active-bg, + $button-danger-text-selected-bg, + $button-danger-text-selected-color, + ); + } + + &.dx-button-success { + @include dx-button-flat-color-styling( + $button-success-text-color, + $button-success-text-color-hover, + $button-success-text-color-active, + $button-success-text-bg, + $button-success-text-hover-bg, + $button-success-text-focused-bg, + $button-success-text-active-bg, + $button-success-text-selected-bg, + $button-success-text-selected-color, + ); + } +} + +.dx-button-mode-outlined { + @include dx-button-outlined-color-styling( + $button-normal-color, + $button-normal-color, + $button-normal-color, + $base-border-color, + $button-normal-outlined-bg, + $button-normal-outlined-hover-bg, + $button-normal-outlined-focused-bg, + $button-normal-outlined-active-bg, + $button-normal-outlined-selected-bg, + $button-normal-selected-color, + ); + + &.dx-button-default { + @include dx-button-outlined-color-styling( + $button-default-outlined-color, + $button-default-outlined-color-hover, + $button-default-outlined-color-active, + $button-default-outlined-border-color, + $button-default-outlined-bg, + $button-default-outlined-hover-bg, + $button-default-outlined-focused-bg, + $button-default-outlined-active-bg, + $button-default-outlined-selected-bg, + $button-default-outlined-selected-color, + ); + } + + &.dx-button-danger { + @include dx-button-outlined-color-styling( + $button-danger-outlined-color, + $button-danger-outlined-color-hover, + $button-danger-outlined-color-active, + $button-danger-outlined-border-color, + $button-danger-outlined-bg, + $button-danger-outlined-hover-bg, + $button-danger-outlined-focused-bg, + $button-danger-outlined-active-bg, + $button-danger-outlined-selected-bg, + $button-danger-outlined-selected-color, + ); + } + + &.dx-button-success { + @include dx-button-outlined-color-styling( + $button-success-outlined-color, + $button-success-outlined-color-hover, + $button-success-outlined-color-active, + $button-success-outlined-border-color, + $button-success-outlined-bg, + $button-success-outlined-hover-bg, + $button-success-outlined-focused-bg, + $button-success-outlined-active-bg, + $button-success-outlined-selected-bg, + $button-success-outlined-selected-color, + ); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss new file mode 100644 index 000000000000..92f3becb9113 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss @@ -0,0 +1,201 @@ +@use "sass:math"; +@use "sass:color"; +@use "sizes" as *; +@use "../sizes" as *; +@use "colors" as *; +@use "../colors" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/button/mixins" as *; + +@mixin dx-button-onlyicon-sizing($icon-size: $fluent-button-icon-size) { + min-width: $fluent-button-height; + + $button-content-padding: math.div($fluent-button-height - $icon-size - $fluent-base-border-width * 2, 2); + + @include dx-button-sizing( + $button-content-padding, + $button-content-padding, + $button-content-padding, + $icon-size, + 0 + ); +} + +@mixin dx-button-withtext-sizing() { + @include dx-button-sizing( + $fluent-button-vertical-padding, + $fluent-button-horizontal-padding, + $fluent-button-horizontal-padding, + $fluent-button-icon-size, + math.div($fluent-button-icon-size, 2) + ); +} + +@mixin dx-button-text-and-icon-sizing() { + @include dx-button-sizing( + $fluent-button-vertical-padding, + $fluent-button-icon-text-padding, + $fluent-button-horizontal-padding, + $fluent-button-icon-size, + $fluent-button-icon-margin, + ); +} + + +@mixin dx-button-styling-variant( + $background-color, + $text-color, + $text-color-hover, + $text-color-active, + $hover-background-color, + $focused-background-color, + $active-background-color, + $icon-color, + $selected-background-color: $active-background-color, + $selected-color: $text-color, +) { + background-color: $background-color; + color: $text-color; + + .dx-icon { + color: $icon-color; + } + + &.dx-state-selected { + background-color: $selected-background-color; + + &, + .dx-icon { + color: $selected-color; + } + } + + &.dx-state-hover { + background-color: $hover-background-color; + + &, + .dx-icon { + color: $text-color-hover; + } + } + + &.dx-state-focused { + background-color: $focused-background-color; + + &, + .dx-icon { + color: $text-color-hover; + } + } + + &.dx-state-active { + background-color: $active-background-color; + + &, + .dx-icon { + color: $text-color-active; + } + } +} + +@mixin dx-button-styling( + $button-bg, + $button-color, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-icon-color, + $button-selected-bg, + $button-selected-color, +) { + border-radius: $button-border-radius; + + @include dx-button-styling-variant( + $button-bg, + $button-color, + $button-color, + $button-color, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-icon-color, + $button-selected-bg, + $button-selected-color, + ); + + &.dx-state-disabled { + opacity: 1; + box-shadow: none; + + .dx-icon { + color: $button-disabled-text-color; + } + + .dx-button-text { + color: $button-disabled-text-color; + } + + &.dx-button-mode-contained { + background-color: $button-disabled-background; + } + + &.dx-button-mode-outlined { + border-color: $button-disabled-background; + } + } +} + +@mixin dx-button-flat-color-styling( + $button-color, + $button-color-hover, + $button-color-active, + $button-bg, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-selected-bg: $button-active-bg, + $button-selected-color: $button-color +) { + @include dx-button-styling-variant( + $button-bg, + $button-color, + $button-color-hover, + $button-color-active, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-color, + $button-selected-bg, + $button-selected-color, + ); +} + +@mixin dx-button-outlined-color-styling( + $button-color, + $button-color-hover, + $button-color-active, + $border-color, + $button-bg, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-selected-bg, + $button-selected-color: $button-color-active, +) { + border-width: 1px; + border-style: solid; + border-color: $border-color; + + @include dx-button-styling-variant( + $button-bg, + $button-color, + $button-color-hover, + $button-color-active, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-color, + $button-selected-bg, + $button-selected-color, + ); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss new file mode 100644 index 000000000000..5c4cec6e2300 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss @@ -0,0 +1,33 @@ +@use "../sizes" as *; + +// adduse + +$fluent-button-horizontal-padding: null !default; +$fluent-button-vertical-padding: null !default; +$fluent-button-icon-padding: null !default; +$fluent-button-icon-text-padding: null !default; +$fluent-button-content-line-height: 0 !default; +$fluent-button-text-line-height: normal !default; +$fluent-button-text-transform: none !default; +$fluent-button-text-font-weight: 500 !default; +$fluent-button-text-letter-spacing: normal !default; + +$fluent-button-box-shadow-size: 0 1px 3px !default; + +@if $size == "default" { + $fluent-button-horizontal-padding: 12px !default; + $fluent-button-vertical-padding: 6px !default; + $fluent-button-icon-padding: 6px; + $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; +} + +@else if $size == "compact" { + $fluent-button-horizontal-padding: 8px !default; + $fluent-button-vertical-padding: 4px !default; + $fluent-button-icon-padding: 4px !default; + $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; +} + +:root { + --dx-button-padding-inline: #{$fluent-button-horizontal-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss new file mode 100644 index 000000000000..ff40bdc07e0d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; + +// adduse + +$button-group-separator-color: rgba(0,0,0,.24) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss new file mode 100644 index 000000000000..9edc5f3e9a08 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss @@ -0,0 +1,43 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../button/colors" as *; +@use "../../base/buttonGroup"; +@use "../../base/buttonGroup/mixins" as *; + +// adduse + +.dx-buttongroup { + &.dx-state-disabled { + opacity: 1; + } +} + +@include dx-buttongroup-sizing( + $button-border-radius, + 1px, +); + +.dx-buttongroup-mode-contained { + border-radius: $button-border-radius; + box-shadow: $fluent-button-box-shadow-size $button-shadow-color; + + .dx-button-mode-contained { + box-shadow: none; + border-width: 0; + border-style: solid; + border-inline-end-width: 1px; + border-inline-end-color: $button-group-separator-color; + + &.dx-buttongroup-last-item { + border-inline-end-width: 0; + } + } + + &.dx-state-disabled { + box-shadow: none; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss new file mode 100644 index 000000000000..b0986f1b8d56 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss @@ -0,0 +1,68 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$calendar-color: $base-text-color !default; + +/** +* $name 20. Navigator text color +* $type color +*/ +$calendar-navigator-text-color: $button-normal-color !default; + +/** +* $name 30. Header text color +* $type color +*/ +$calendar-header-color: $calendar-color !default; + +/** +* $name 40. Other month text color +* $type color +*/ +$calendar-cell-other-color: null !default; +$calendar-bg: transparent !default; +$calendar-hover-bg: null !default; +$calendar-cell-hover-border-color: null !default; +$calendar-cell-hover-color: $calendar-color !default; + +/** +* $name 50. Selected cell background color +* $type color +*/ +$calendar-cell-selected-bg: $base-accent !default; +$calendar-cell-selected-color: $base-inverted-text-color !default; +$calendar-cell-contoured-border-radius: 50% !default; +$calendar-cell-contoured-border-color: null !default; +$calendar-cell-active-bg: null !default; +$calendar-invalid-border-color: $base-invalid-color !default; +$calendar-invalid-border-color-focused: $base-invalid-color-active !default; +$calendar-week-number-cell-color: null !default; +$calendar-week-number-cell-bg: null !default; +$calendar-week-number-border-radius: 0 !default; + +@if $mode == "light" { + $calendar-hover-bg: $button-default-outlined-selected-bg !default; + $calendar-cell-hover-border-color: $calendar-hover-bg !default; + $calendar-cell-active-bg: $button-default-outlined-active-bg !default; + $calendar-cell-other-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; + $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; + $calendar-cell-contoured-border-color: $calendar-cell-active-bg !default; + $calendar-week-number-cell-bg: $base-background-disabled !default; +} + +@if $mode == "dark" { + $calendar-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; + $calendar-cell-hover-border-color: $calendar-hover-bg !default; + $calendar-cell-active-bg: $base-accent-selected !default; + $calendar-cell-other-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; + $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; + $calendar-cell-contoured-border-color: $base-accent-active !default; + $calendar-week-number-cell-bg: $base-hover-bg !default; +} + +$calendar-cell-other-hover-color: $calendar-cell-other-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss new file mode 100644 index 000000000000..d57d20aec00c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss @@ -0,0 +1,71 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../button/mixins" as *; +@use "../../base/calendar/calendar"; +@use "../../base/calendar/mixins" as *; + +// adduse + +@include dx-calendar-mixin( + $calendar-bg, + $fluent-calendar-legacy-width, + $fluent-calendar-legacy-height, + $fluent-calendar-element-padding, + $fluent-calendar-footer-button-height, + $calendar-invalid-border-color, + $calendar-invalid-border-color-focused, +); + +.dx-calendar-navigator-previous-view, +.dx-calendar-navigator-next-view { + @include dx-button-onlyicon-sizing($fluent-base-icon-size); +} + +@include dx-calendar-navigator-mixin( + $calendar-navigator-text-color, +); +@include dx-calendar-body-mixin( + $calendar-week-number-cell-color, + $calendar-week-number-cell-bg, + $calendar-week-number-border-radius, + $fluent-calendar-cell-font-size, + $calendar-header-color, +); +@include dx-calendar-cell-mixin( + $calendar-cell-contoured-border-radius, + $calendar-color, + $base-border-radius, + $calendar-cell-selected-bg, + $calendar-hover-bg, + $calendar-cell-hover-color, + $calendar-cell-active-bg, + $calendar-cell-selected-bg, + $calendar-cell-selected-color, + $calendar-cell-contoured-border-color, + $calendar-cell-other-color, + $calendar-cell-other-hover-color, + $calendar-cell-hover-border-color, + 999em, +); +@include dx-calendar-cell-in-range-mixin( + "::before", + $calendar-hover-bg, + $calendar-cell-hover-border-color, + 999em, + 0, +); +@include dx-calendar-cell-in-range-mixin( + "::after", + inherit, + $calendar-cell-hover-border-color, + 999em, + 1px, + '.dx-calendar-cell-range-hover', + '.dx-calendar-cell-range-hover-start', + '.dx-calendar-cell-range-hover-end', +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss new file mode 100644 index 000000000000..38f020f3fc61 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; + +// adduse + +$fluent-calendar-legacy-width: null !default; +$fluent-calendar-legacy-height: null !default; + +$fluent-calendar-footer-button-height: null !default; +$fluent-calendar-cell-font-size: null !default; + +$fluent-calendar-element-padding: 8px !default; + +@if $size == "default" { + $fluent-calendar-legacy-width: 272px !default; + $fluent-calendar-legacy-height: 264px !default; + + $fluent-calendar-cell-font-size: 14px !default; + + $fluent-calendar-footer-button-height: 36px !default; +} + +@else if $size == "compact" { + $fluent-calendar-legacy-width: 252px !default; + $fluent-calendar-legacy-height: 260px !default; + + $fluent-calendar-cell-font-size: 12px !default; + $fluent-calendar-footer-button-height: 28px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss new file mode 100644 index 000000000000..d3c44e95845c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss @@ -0,0 +1,15 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/card"; + +// adduse + +.dx-card { + box-shadow: 0 1px 3px color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px color.change($base-shadow-color, $alpha: 0.24); + border-radius: $base-border-radius; + background-color: $base-bg; + margin: 2px 2px 3px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss new file mode 100644 index 000000000000..0c7d36023717 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss @@ -0,0 +1,657 @@ +@use 'sass:color'; +@use '../colors' as *; +@use '../color' as extcolor; +@use '../../base/cardView/variables' as *; +@use '../../base/cardView/header_panel/variables' as *; +@use '../../base/cardView/header_panel/item/variables' as *; +@use '../../base/cardView/content_view/content/card/variables' as *; +@use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; +@use '../../base/cardView/content_view/content/card/content/variables' as *; +@use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; +@use '../../base/cardView/column_chooser/variables' as *; +@use '../../base/cardView/filter_panel/variables' as *; + +// adduse + +// #region COMMON SETTINGS + +/** +* $name 100. Background color +* $type color +*/ +$cardview-fluent-common-bg-color: null !default; + +/** +* $name 102. Link color +* $type color +*/ +$cardview-fluent-common-link-color: null !default; + +/** +* $name 103. Text color +* $type color +*/ +$cardview-fluent-common-text-color: null !default; + +// #endregion + +// #region CARD + +/** +* $name 200. Background color +* $type color +*/ +$cardview-fluent-card-bg-color: null !default; + +/** +* $name 201. Border color +* $type color +*/ +$cardview-fluent-card-border-color: null !default; + +/** +* $name 203. Divider color +* $type color +*/ +$cardview-fluent-card-divider-color: null !default; + +/** +* $name 204. Text color +* $type color +*/ +$cardview-fluent-card-text-color: null !default; + +/** +* $name 206. Cover background color +* $type color +*/ +$cardview-fluent-card__cover-bg-color: null !default; + +/** +* $name 207. "Empty cover" background color +* $type color +*/ +$cardview-fluent-card__cover--noimage-bg-color: null !default; + +/** +* $name 208. "Empty cover" icon color +* $type color +*/ +$cardview-fluent-card__cover--noimage__icon-color: null !default; + +$cardview-fluent-card--focused-outline-color: null !default; + +// #endregion + +// #region CARD (SELECTED) + +/** +* $name 300. Background color +* $type color +*/ +$cardview-fluent-card--selected-bg-color: null !default; + +/** +* $name 301. Border color +* $type color +*/ +$cardview-fluent-card--selected-border-color: null !default; + +/** +* $name 302. Divider color +* $type color +*/ +$cardview-fluent-card--selected-divider-color: null !default; + +/** +* $name 303. Text color +* $type color +*/ +$cardview-fluent-card--selected-text-color: null !default; + +/** +* $name 305. Cover background color +* $type color +*/ +$cardview-fluent-card--selected__cover-bg-color: null !default; + +/** +* $name 306. "Empty cover" background color +* $type color +*/ +$cardview-fluent-card--selected__cover--noimage-bg-color: null !default; + +/** +* $name 307. "Empty cover" icon color +* $type color +*/ +$cardview-fluent-card--selected__cover--noimage__icon-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM + +/** +* $name 400. Background color +* $type color +*/ +$cardview-fluent-header-panel__item-bg-color: null !default; + +/** +* $name 401. Border color +* $type color +*/ +$cardview-fluent-header-panel__item-border-color: null !default; + +/** +* $name 403. Text color +* $type color +*/ +$cardview-fluent-header-panel__item-text-color: null !default; + +/** +* $name 405. Icon color +* $type color +*/ +$cardview-fluent-header-panel__item__icon-color: null !default; + +/** +* $name 406. Active "Filter" icon color +* $type color +*/ +$cardview-fluent-header-panel__item__header-filter-icon--selected-color: null !default; + +/** +* $name 407. Sort index text color +* $type color +*/ +$cardview-fluent-header-panel__item__sort-index-text-color: null !default; + +$cardview-fluent-header-panel__item--focused-outline-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (HOVERED) + +/** +* $name 500. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered-bg-color: null !default; + +/** +* $name 501. Border color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered-border-color: null !default; + +/** +* $name 502. Text color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered-text-color: null !default; + +/** +* $name 504. Icon color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered__icon-color: null !default; + +/** +* $name 505. Active "Filter" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: null !default; + +/** +* $name 506. Sort index text color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (DISABLED) + +/** +* $name 600. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled-bg-color: null !default; + +/** +* $name 601. Border color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled-border-color: null !default; + +/** +* $name 602. Text color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled-text-color: null !default; + +/** +* $name 604. Icon color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled__icon-color: null !default; + +/** +* $name 605. Active "Filter" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: null !default; + +/** +* $name 606. Sort index text color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (ON DRAG) + +/** +* $name 700. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-bg-color: null !default; + +/** +* $name 701. Border color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-border-color: null !default; + +/** +* $name 702. Text color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-text-color: null !default; + +/** +* $name 704. "Drag allowed" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged__allowance-icon-color: null !default; + +/** +* $name 705. "Drag blocked" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: null !default; + +/** +* $name 706. Box shadow color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default; + +// #endregion + +// #region HEADER PANEL DROP ZONE + +/** +* $name 800. Background color +* $type color +*/ +$cardview-fluent-header-panel__dropzone-bg-color: null !default; + +/** +* $name 802. Border color +* $type color +*/ +$cardview-fluent-header-panel__dropzone-border-color: null !default; + +/** +* $name 803. Text color +* $type color +*/ +$cardview-fluent-header-panel__dropzone-text-color: null !default; + +/** +* $name 804. Icon color +* $type color +*/ +$cardview-fluent-header-panel__dropzone__icon-color: null !default; + +// #endregion + +// #region FILTER PANEL + +/** +* $name 900. Background color +* $type color +*/ +$cardview-fluent-filter-panel-bg-color: null !default; + +/** +* $name 902. Border color +* $type color +*/ +$cardview-fluent-filter-panel-border-color: null !default; + +/** +* $name 903. Text color +* $type color +*/ +$cardview-fluent-filter-panel-text-color: null !default; + +/** +* $name 904. Icon color +* $type color +*/ +$cardview-fluent-filter-panel__icon-color: null !default; + +// #endregion + +// #region EMPTY VIEW + +/** +* $name 1000. Background color +* $type color +*/ +$cardview-fluent-nodata-view-bg-color: null !default; + +/** +* $name 1001. Text color +* $type color +*/ +$cardview-fluent-nodata-view-text-color: null !default; + +/** +* $name 1002. Icon color +* $type color +*/ +$cardview-fluent-nodata-view__icon-color: null !default; + +/** +* $name 1003. Icon background color +* $type color +*/ +$cardview-fluent-nodata-view__icon-bg-color: null !default; + +// #endregion + +// #region HIGHLIGHTS IN SEARCH + +/** +* $name 1100. Background color +* $type color +*/ +$cardview-fluent-card__content__field-value--highlighted-bg-color: null !default; + +/** +* $name 1102. Text color +* $type color +*/ +$cardview-fluent-card__content__field-value--highlighted-text-color: null !default; + +/** +* $name 1104. Box shadow color +* $type color +*/ +$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: null !default; + +// #endregion + +// #region COLUMN CHOOSER + +$cardview-fluent-columnchooser--empty__message-color: null !default; + +// #endregion + +@if $mode == 'light' { + + // Common + $cardview-fluent-common-bg-color: $base-typography-bg !default; + $cardview-fluent-common-link-color: $base-link-color !default; + $cardview-fluent-common-text-color: $base-text-color !default; + + // Card + $cardview-fluent-card-bg-color: $base-bg !default; + $cardview-fluent-card-border-color: $base-border-color !default; + $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; + $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-card__cover-bg-color: #FFF !default; + $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; + $cardview-fluent-card__cover--noimage__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; + + $cardview-fluent-card--focused-outline-color: $base-accent !default; + + // Card - selected + $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; + $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 2.21%, $lightness: 44.31%) !default; + $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; + $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; + $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; + $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; + $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; + + // Header panel item - default state + $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + $cardview-fluent-header-panel__item-border-color: $base-border-color !default; + $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; + $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; + + $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: -1.96%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: -13.73%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default; + $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default; + $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; + $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.80%, $lightness: -9.61%) !default; + $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; + $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; + + // Filter panel + $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-filter-panel-border-color: $base-border-color !default; + $cardview-fluent-filter-panel-text-color: $base-accent !default; + $cardview-fluent-filter-panel__icon-color: $base-accent !default; + + // Empty view + $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; + $cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; + $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -9.80%, $space: hsl) !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; + $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; + + // Column chooser + $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; +} + +@if $mode == "dark" { + + // Common + $cardview-fluent-common-bg-color: $base-typography-bg !default; + $cardview-fluent-common-link-color: $base-link-color !default; + $cardview-fluent-common-text-color: $base-text-color !default; + + // Card + $cardview-fluent-card-bg-color: $base-bg !default; + $cardview-fluent-card-border-color: $base-border-color !default; + $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; + $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-card__cover-bg-color: #FFF !default; + $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + $cardview-fluent-card__cover--noimage__icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default; + + $cardview-fluent-card--focused-outline-color: $base-accent !default; + + // Card - selected + $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; + $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -11.06%, $lightness: -36.27%) !default; + $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; + $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; + $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; + $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; + $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; + + // Header panel item - default state + $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; + $cardview-fluent-header-panel__item-border-color: $base-border-color !default; + $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; + $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; + + $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: 18.04%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: 11.76%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $base-accent !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-common-text-color !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: -56.08%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: -56.08%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -6.72%, $space: hsl, $lightness: -18.04%) !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: -56.08%, $space: hsl) !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; + $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default; + $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; + $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; + + // Filter panel + $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-filter-panel-border-color: $base-border-color !default; + $cardview-fluent-filter-panel-text-color: $base-accent !default; + $cardview-fluent-filter-panel__icon-color: $base-accent !default; + + // Empty view + $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; + $cardview-fluent-nodata-view__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; + $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: 3.92%, $space: hsl) !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; + $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default; + $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; + + // Column chooser + $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; +} + +$cardview-bg-color: $cardview-fluent-common-bg-color !default; +$cardview-link-color: $cardview-fluent-common-link-color !default; +$cardview-text-color: $cardview-fluent-common-text-color !default; + +$cardview-card-bg-color: $cardview-fluent-card-bg-color !default; +$cardview-card-border-color: $cardview-fluent-card-border-color !default; +$cardview-card-divider-color: $cardview-fluent-card-divider-color !default; +$cardview-card-text-color: $cardview-fluent-card-text-color !default; +$cardview-card__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; +$cardview-card__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; +$cardview-card__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; + +$cardview-card--selected-bg-color: $cardview-fluent-card--selected-bg-color !default; +$cardview-card--selected-border-color: $cardview-fluent-card--selected-border-color !default; +$cardview-card--selected-divider-color: $cardview-fluent-card--selected-divider-color !default; +$cardview-card--selected-text-color: $cardview-fluent-card--selected-text-color !default; +$cardview-card--selected__cover-bg-color: $cardview-fluent-card--selected__cover-bg-color !default; +$cardview-card--selected__cover--noimage-bg-color: $cardview-fluent-card--selected__cover--noimage-bg-color !default; +$cardview-card--selected__cover--noimage__icon-color: $cardview-fluent-card--selected__cover--noimage__icon-color !default; + +$cardview-card--focused-outline-color: $cardview-fluent-card--focused-outline-color !default; + +$cardview-header-panel__item-bg-color: $cardview-fluent-header-panel__item-bg-color !default; +$cardview-header-panel__item-border-color: $cardview-fluent-header-panel__item-border-color !default; +$cardview-header-panel__item-text-color: $cardview-fluent-header-panel__item-text-color !default; +$cardview-header-panel__item__icon-color: $cardview-fluent-header-panel__item__icon-color !default; +$cardview-header-panel__item__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; +$cardview-header-panel__item__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; + +$cardview-header-panel__item--focused-outline-color: $cardview-fluent-header-panel__item--focused-outline-color !default; + +$cardview-header-panel__item--hovered-bg-color: $cardview-fluent-header-panel__item--hovered-bg-color !default; +$cardview-header-panel__item--hovered-border-color: $cardview-fluent-header-panel__item--hovered-border-color !default; +$cardview-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item--hovered-text-color !default; +$cardview-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item--hovered__icon-color !default; +$cardview-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color !default; +$cardview-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item--hovered__sort-index-text-color !default; + +$cardview-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item--disabled-bg-color !default; +$cardview-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item--disabled-border-color !default; +$cardview-header-panel__item--disabled-text-color: $cardview-fluent-header-panel__item--disabled-text-color !default; +$cardview-header-panel__item--disabled__icon-color: $cardview-fluent-header-panel__item--disabled__icon-color !default; +$cardview-header-panel__item--disabled__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color !default; +$cardview-header-panel__item--disabled__sort-index-text-color: $cardview-fluent-header-panel__item--disabled__sort-index-text-color !default; + +$cardview-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item--dragged-bg-color !default; +$cardview-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item--dragged-border-color !default; +$cardview-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item--dragged-text-color !default; +$cardview-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-header-panel__item--dragged__allowance-icon-color !default; +$cardview-header-panel__item--dragged__prohibition-icon-color: $cardview-fluent-header-panel__item--dragged__prohibition-icon-color !default; +$cardview-header-panel__item--dragged-box-shadow-color: $cardview-fluent-header-panel__item--dragged-box-shadow-color !default; + +$cardview-header-panel__dropzone-bg-color: $cardview-fluent-header-panel__dropzone-bg-color !default; +$cardview-header-panel__dropzone-border-color: $cardview-fluent-header-panel__dropzone-border-color !default; +$cardview-header-panel__dropzone-text-color: $cardview-fluent-header-panel__dropzone-text-color !default; +$cardview-header-panel__dropzone__icon-color: $cardview-fluent-header-panel__dropzone__icon-color !default; + +$cardview-filter-panel-bg-color: $cardview-fluent-filter-panel-bg-color !default; +$cardview-filter-panel-border-color: $cardview-fluent-filter-panel-border-color !default; +$cardview-filter-panel-text-color: $cardview-fluent-filter-panel-text-color !default; +$cardview-filter-panel__icon-color: $cardview-fluent-filter-panel__icon-color !default; + +$cardview-nodata-view-bg-color: $cardview-fluent-nodata-view-bg-color !default; +$cardview-nodata-view-text-color: $cardview-fluent-nodata-view-text-color !default; +$cardview-nodata-view__icon-color: $cardview-fluent-nodata-view__icon-color !default; +$cardview-nodata-view__icon-bg-color: $cardview-fluent-nodata-view__icon-bg-color !default; + +$cardview-card__content__field-value--highlighted-bg-color: $cardview-fluent-card__content__field-value--highlighted-bg-color !default; +$cardview-card__content__field-value--highlighted-text-color: $cardview-fluent-card__content__field-value--highlighted-text-color !default; +$cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px $cardview-fluent-card__content__field-value--highlighted-box-shadow-color !default; + +$cardview-columnchooser--empty__message-color: $cardview-fluent-columnchooser--empty__message-color !default; + +$cardview-header-item__sort-indicator__border-color: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss new file mode 100644 index 000000000000..29f2262bbe3e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss @@ -0,0 +1,5 @@ +@use 'colors'; +@use 'sizes'; +@use '../../base/cardView/index' as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss new file mode 100644 index 000000000000..619d5e8b3e23 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss @@ -0,0 +1,491 @@ +@use "../sizes" as *; +@use '../../base/cardView/variables' as *; +@use '../../base/cardView/header_panel/variables' as *; +@use '../../base/cardView/header_panel/item/variables' as *; +@use '../../base/cardView/content_view/content/card/variables' as *; +@use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; +@use '../../base/cardView/content_view/content/card/content/variables' as *; +@use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; +@use '../../base/cardView/column_chooser/variables' as *; +@use '../../base/cardView/filter_panel/variables' as *; + +// adduse + +// #region COMMON SETTINGS + +/** +* $name 101. Border radius +* $type text +*/ +$cardview-fluent-common-border-radius: null !default; + +/** +* $name 104. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-common-text-weight: null !default; + +/** +* $name 105. Vertical gap between cards +* $type text +*/ +$cardview-fluent-common-cards-row-gap: null !default; + +/** +* $name 106. Horizontal gap between cards +* $type text +*/ +$cardview-fluent-common-cards-column-gap: null !default; + +$cardview-fluent-common-gap: null !default; + +$cardview-fluent-common-padding: null !default; + +// #endregion + +// #region CARD + +$cardview-fluent-card-min-width: null !default; + +$cardview-fluent-card-border-width: null !default; + +/** +* $name 202. Border radius +* $type text +*/ +$cardview-fluent-card-border-radius: null !default; + +$cardview-fluent-card__header-height: null !default; + +$cardview-fluent-card__header-text-size: null !default; + +$cardview-fluent-card__header__selection-checkbox-padding-right: null !default; + +/** +* $name 205. Field name text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-card__field-caption-weight: null !default; + +$cardview-fluent-card__cover-max-height: null !default; + +$cardview-fluent-card__cover--noimage__icon-size: null !default; + +$cardview-fluent-card__content-padding: null !default; + +$cardview-fluent-card__content-row-gap: null !default; + +$cardview-fluent-card__content__cell-padding-vertical: null !default; + +$cardview-fluent-card__content__cell-padding-horizontal: null !default; + +// #endregion + +// #region CARD (SELECTED) + +/** +* $name 304. Field name text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-card--selected__field-caption-weight: null !default; + +// #endregion + +// #region HEADER + +$cardview-fluent-header-gap: null !default; + +// #endregion + +// #region HEADER PANEL + +$cardview-fluent-header-panel-vertical-margin: null !default; + +$cardview-fluent-header-panel--empty-line-height: null !default; + +// #endregion + +// #region HEADER PANEL ITEM + +$cardview-fluent-header-panel__item-border-width: null !default; + +/** +* $name 402. Border radius +* $type text +*/ +$cardview-fluent-header-panel__item-border-radius: null !default; + +$cardview-fluent-header-panel__item-padding-vertical: null !default; + +$cardview-fluent-header-panel__item-padding-horizontal: null !default; + +/** +* $name 404. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item-text-weight: null !default; + +/** +* $name 408. Sort index text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item__sort-index-text-weight: null !default; + +$cardview-fluent-header-panel__item__icon-size: null !default; + +$cardview-fluent-header-item__left-padding: null !default; +$cardview-fluent-header-item__right-padding: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (HOVERED) + +/** +* $name 503. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--hovered-text-weight: null !default; + +/** +* $name 507. Sort index text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (DISABLED) + +/** +* $name 603. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--disabled-text-weight: null !default; + +/** +* $name 607. Sort index text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (ON DRAG) + +/** +* $name 703. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--dragged-text-weight: null !default; + +$cardview-fluent-header-item__sort-indicator__border-size: null; +$cardview-fluent-header-item__sort-indicator__border-radius: null; + +// #endregion + +// #region HEADER PANEL DROP ZONE + +$cardview-fluent-header-panel__dropzone-height: null !default; + +$cardview-fluent-header-panel__dropzone-top: null !default; + +$cardview-fluent-header-panel__dropzone-border-width: null !default; + +/** +* $name 801. Border radius +* $type text +*/ +$cardview-fluent-header-panel__dropzone-border-radius: null !default; + +// #endregion + +// #region FILTER PANEL + +/** +* $name 901. Border radius +* $type text +*/ +$cardview-fluent-filter-panel-border-radius: null !default; + +// #endregion + +// #region NO DATA VIEW + +$cardview-fluent-nodata-view__icon-container-size: null !default; + +$cardview-fluent-nodata-view__icon-container-margin: null !default; + +$cardview-fluent-nodata-view__icon-size: null !default; + +// #endregion + +// #region HIGHLIGHTS IN SEARCH + +/** +* $name 1101. Border radius +* $type text +*/ +$cardview-fluent-card__content__field-value--highlighted-border-radius: null !default; + +$cardview-fluent-card__content__field-value--highlighted-border-padding: null !default; + +/** +* $name 1103. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-card__content__field-value--highlighted-text-weight: null !default; + +// #endregion + +// #region COLUMN CHOOSER + +$cardview-fluent-column-chooser--empty__message-horizontal-padding: null !default; + +$cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !default; + +// #endregion + +@if $size == "default" { + + // Common + $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-text-weight: 400 !default; + $cardview-fluent-common-cards-row-gap: 16px !default; + $cardview-fluent-common-cards-column-gap: 16px !default; + $cardview-fluent-common-gap: 24px !default; + $cardview-fluent-common-padding: 24px !default; + + // Card + $cardview-fluent-card-min-width: 250px !default; + $cardview-fluent-card-border-width: 1px !default; + $cardview-fluent-card-border-radius: 8px !default; + $cardview-fluent-card__header-height: 48px !default; + $cardview-fluent-card__header-text-size: 16px !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: 12px !default; + $cardview-fluent-card__field-caption-weight: 600 !default; + $cardview-fluent-card__cover-max-height: 180px !default; + $cardview-fluent-card__cover--noimage__icon-size: 48px !default; + $cardview-fluent-card__content-padding: 12px !default; + $cardview-fluent-card__content-row-gap: 8px !default; + $cardview-fluent-card__content__cell-padding-vertical: 6px !default; + $cardview-fluent-card__content__cell-padding-horizontal: 12px !default; + + // Card - selected + $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; + + // Header + $cardview-fluent-header-gap: 0 !default; + + // Header panel + $cardview-fluent-header-panel-vertical-margin: 8px !default; + $cardview-fluent-header-panel--empty-line-height: 32px !default; + + // Header panel item - default + $cardview-fluent-header-panel__item-border-width: 1px !default; + $cardview-fluent-header-panel__item-border-radius: 6px !default; + $cardview-fluent-header-panel__item-padding-horizontal: 8px !default; + $cardview-fluent-header-panel__item-padding-vertical: 5px !default; + $cardview-fluent-header-item__left-padding: 6px !default; + $cardview-fluent-header-item__right-padding: 2px !default; + $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; + $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; + $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-item__sort-indicator__border-size: 2px !default; + $cardview-fluent-header-item__sort-indicator__border-radius: 8px !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-height: 44px !default; + $cardview-fluent-header-panel__dropzone-top: -6px !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; + $cardview-fluent-header-panel__dropzone-border-radius: 8px !default; + + // Filter panel + $cardview-fluent-filter-panel-border-radius: 0 !default; + + // Empty view + $cardview-fluent-nodata-view__icon-container-size: 64px !default; + $cardview-fluent-nodata-view__icon-container-margin: 12px !default; + $cardview-fluent-nodata-view__icon-size: 40px !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; + $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; + + // Column chooser + $cardview-fluent-column-chooser--empty__message-horizontal-padding: 24px !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 14px !default; +} +@else if $size == "compact" { + + // Common + $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-text-weight: 400 !default; + $cardview-fluent-common-cards-row-gap: 12px !default; + $cardview-fluent-common-cards-column-gap: 12px !default; + $cardview-fluent-common-gap: 16px !default; + $cardview-fluent-common-padding: 16px !default; + + // Card + $cardview-fluent-card-min-width: 250px !default; + $cardview-fluent-card-border-width: 1px !default; + $cardview-fluent-card-border-radius: 6px !default; + $cardview-fluent-card__header-height: 36px !default; + $cardview-fluent-card__header-text-size: 14px !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: 8px !default; + $cardview-fluent-card__field-caption-weight: 600 !default; + $cardview-fluent-card__cover-max-height: 140px !default; + $cardview-fluent-card__cover--noimage__icon-size: 32px !default; + $cardview-fluent-card__content-padding: 8px !default; + $cardview-fluent-card__content-row-gap: 4px !default; + $cardview-fluent-card__content__cell-padding-vertical: 4px !default; + $cardview-fluent-card__content__cell-padding-horizontal: 8px !default; + + // Card - selected + $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; + + // Header + $cardview-fluent-header-gap: 4px !default; + + // Header panel + $cardview-fluent-header-panel-vertical-margin: 4px !default; + $cardview-fluent-header-panel--empty-line-height: 24px !default; + + // Header panel item - default + $cardview-fluent-header-panel__item-border-width: 1px !default; + $cardview-fluent-header-panel__item-border-radius: 6px !default; + $cardview-fluent-header-panel__item-padding-horizontal: 6px !default; + $cardview-fluent-header-panel__item-padding-vertical: 3px !default; + $cardview-fluent-header-item__left-padding: 3px !default; + $cardview-fluent-header-item__right-padding: 1px !default; + $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; + $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; + $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-item__sort-indicator__border-size: 1px !default; + $cardview-fluent-header-item__sort-indicator__border-radius: 4px !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-height: 32px !default; + $cardview-fluent-header-panel__dropzone-top: -4px !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; + $cardview-fluent-header-panel__dropzone-border-radius: 6px !default; + + // Filter panel + $cardview-fluent-filter-panel-border-radius: 0 !default; + + // Empty view + $cardview-fluent-nodata-view__icon-container-size: 48px !default; + $cardview-fluent-nodata-view__icon-container-margin: 8px !default; + $cardview-fluent-nodata-view__icon-size: 32px !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; + $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; + + // Column chooser + $cardview-fluent-column-chooser--empty__message-horizontal-padding: 16px !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 12px !default; +} + +$cardview-border-radius: $cardview-fluent-common-border-radius !default; +$cardview-text-weight: $cardview-fluent-common-text-weight !default; +$cardview-cards-row-gap: $cardview-fluent-common-cards-row-gap !default; +$cardview-cards-column-gap: $cardview-fluent-common-cards-column-gap !default; +$cardview-gap: $cardview-fluent-common-gap !default; +$cardview-padding: $cardview-fluent-common-padding !default; + +$cardview-card-min-width: $cardview-fluent-card-min-width !default; +$cardview-card-border-width: $cardview-fluent-card-border-width !default; +$cardview-card-border-radius: $cardview-fluent-card-border-radius !default; +$cardview-card__header-height: $cardview-fluent-card__header-height !default; +$cardview-card__header-text-size: $cardview-fluent-card__header-text-size !default; +$cardview-card__header__selection-checkbox-padding-right: $cardview-fluent-card__header__selection-checkbox-padding-right !default; +$cardview-card__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; +$cardview-card__cover-max-height: $cardview-fluent-card__cover-max-height !default; +$cardview-card__cover--noimage__icon-size: $cardview-fluent-card__cover--noimage__icon-size !default; +$cardview-card__content-padding: $cardview-fluent-card__content-padding !default; +$cardview-card__content-row-gap: $cardview-fluent-card__content-row-gap !default; +$cardview-card__content__cell-padding-vertical: $cardview-fluent-card__content__cell-padding-vertical !default; +$cardview-card__content__cell-padding-horizontal: $cardview-fluent-card__content__cell-padding-horizontal !default; + +$cardview-card--selected__field-caption-weight: $cardview-fluent-card--selected__field-caption-weight !default; + +$cardview-header-gap: $cardview-fluent-header-gap !default; + +$cardview-header-panel-vertical-margin: $cardview-fluent-header-panel-vertical-margin !default; +$cardview-header-panel--empty-line-height: $cardview-fluent-header-panel--empty-line-height !default; + +$cardview-header-panel__item-border-width: $cardview-fluent-header-panel__item-border-width !default; +$cardview-header-panel__item-border-radius: $cardview-fluent-header-panel__item-border-radius !default; +$cardview-header-panel__item-padding-horizontal: $cardview-fluent-header-panel__item-padding-horizontal !default; +$cardview-header-panel__item-padding-vertical: $cardview-fluent-header-panel__item-padding-vertical !default; +$cardview-header-panel__item-text-weight: $cardview-fluent-header-panel__item-text-weight !default; +$cardview-header-panel__item__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; +$cardview-header-panel__item__icon-size: $cardview-fluent-header-panel__item__icon-size !default; + +$cardview-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item--hovered-text-weight !default; +$cardview-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item--hovered__sort-index-text-weight !default; + +$cardview-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item--disabled-text-weight !default; +$cardview-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item--disabled__sort-index-text-weight !default; + +$cardview-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item--dragged-text-weight !default; + +$cardview-header-panel__dropzone-height: $cardview-fluent-header-panel__dropzone-height !default; +$cardview-header-panel__dropzone-top: $cardview-fluent-header-panel__dropzone-top !default; +$cardview-header-panel__dropzone-border-width: $cardview-fluent-header-panel__dropzone-border-width !default; +$cardview-header-panel__dropzone-border-radius: $cardview-fluent-header-panel__dropzone-border-radius !default; + +$cardview-filter-panel-border-radius: $cardview-fluent-filter-panel-border-radius !default; + +$cardview-nodata-view__icon-container-size: $cardview-fluent-nodata-view__icon-container-size !default; +$cardview-nodata-view__icon-container-margin: $cardview-fluent-nodata-view__icon-container-margin !default; +$cardview-nodata-view__icon-size: $cardview-fluent-nodata-view__icon-size !default; + +$cardview-card__content__field-value--highlighted-border-radius: $cardview-fluent-card__content__field-value--highlighted-border-radius !default; +$cardview-card__content__field-value--highlighted-border-padding: $cardview-fluent-card__content__field-value--highlighted-border-padding !default; +$cardview-card__content__field-value--highlighted-text-weight: $cardview-fluent-card__content__field-value--highlighted-text-weight !default; + +$cardview-column-chooser--empty__message-horizontal-padding: $cardview-fluent-column-chooser--empty__message-horizontal-padding !default; +$cardview-column-chooser__select-all-item-horizontal-padding: $cardview-fluent-column-chooser__select-all-item-horizontal-padding !default; + +$cardview-header-item__left-padding: $cardview-fluent-header-item__left-padding !default; +$cardview-header-item__right-padding: $cardview-fluent-header-item__right-padding !default; +$cardview-header-item__sort-indicator__border-size: $cardview-fluent-header-item__sort-indicator__border-size !default; +$cardview-header-item__sort-indicator__border-radius: $cardview-fluent-header-item__sort-indicator__border-radius !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss new file mode 100644 index 000000000000..f6e7b3ab9b10 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss @@ -0,0 +1,195 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../textEditor/colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Background color +* $type color +*/ +$chat-background-color: $base-bg !default; + +/** +* $name 20. Border color +* $type color +*/ +$chat-border-color: $base-border-color !default; +$chat-messagebox-border-color: $chat-border-color !default; +$chat-messagebox-file-background-color: $button-normal-text-hover-bg !default; +$chat-messagebox-file-cancel-button-secondary-color: $button-normal-text-selected-bg !default; +$chat-message-editing-preview-accent-color: $base-accent !default; +$chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default; + +/** +* $name 30. Text color +* $type color +*/ +$chat-avatar-color: $base-text-color !default; + +/** +* $name 31. Background color +* $type color +*/ +$chat-avatar-background-color: $base-active-bg !default; + +/** +* $name 40. Text color (sent messages) +* $type color +*/ +$chat-bubble-color-primary: $base-text-color !default; + +/** +* $name 41. Background color (sent messages) +* $type color +*/ +$chat-bubble-background-color-primary: null !default; + +/** +* $name 42. Text color (received messages) +* $type color +*/ +$chat-bubble-color-secondary: $base-text-color !default; + +/** +* $name 43. Background color (received messages) +* $type color +*/ +$chat-bubble-background-color-secondary: null !default; + +/** +* $name 50. User name color +* $type color +*/ +$chat-information-author-name-color: null !default; + +/** +* $name 51. Timestamp color +* $type color +*/ +$chat-information-timestamp-color: null !default; + +/** +* $name 52. Day header color +* $type color +*/ +$chat-messagelist-day-header-color: null !default; + +/** +* $name 55. Alert color +* $type color +*/ +$chat-alertlist-color: $base-invalid-color !default; + +/** +* $name 65. Icon color +* $type color +*/ +$chat-messagelist-empty-icon-color: null !default; + +/** +* $name 66. Icon background color +* $type color +*/ +$chat-messagelist-empty-icon-background-color: null !default; + +/** +* $name 67. Title color +* $type color +*/ +$chat-messagelist-empty-message-color: $base-text-color !default; + +/** +* $name 68. Subtitle color +* $type color +*/ +$chat-messagelist-empty-prompt-color: null !default; + +/** +* $name 80. Text color +* $type color +*/ +$chat-typingindicator-color: null !default; + +/** +* $name 82. Central circle color +* $type color +*/ +$chat-typingindicator-circle-bg-color-center: null !default; + +/** +* $name 83. Outer circles color +* $type color +*/ +$chat-typingindicator-circle-bg-color: null !default; + +$chat-file-container-background-color: $base-bg !default; +$chat-file-container-box-shadow: null !default; +$chat-file-secondary-color: null !default; + +$chat-suggestions-box-shadow: null !default; + +@if $mode == "light" { + $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; + $chat-information-author-name-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + $chat-typingindicator-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + + $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: 32.16%, $space: hsl) !default; + $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; + $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: -5.88%, $space: hsl) !default; + + $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -29.16%, $space: hsl) !default; + $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + + $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default; + $chat-file-secondary-color: $base-icon-color !default; + + $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default; + + @if $color == "blue" { + $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; + $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; + } + + @if $color == "saas" { + $chat-bubble-background-color-primary: color.mix($base-bg, $base-accent, 90%) !default; + $chat-messagelist-empty-icon-background-color: $base-border-color !default; + } +} + +@if $mode == "dark" { + $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; + $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; + + $chat-information-author-name-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + $chat-typingindicator-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + + $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: -25.88%, $space: hsl) !default; + $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; + $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: 7.84%, $space: hsl) !default; + + $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 33.92%, $space: hsl) !default; + $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + + $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default; + $chat-file-secondary-color: $base-icon-color !default; + + $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default; +} + +/** +* $name 81. Background color +* $type color +*/ +$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default; + +$chat-messagelist-contextmenu-delete-button-color: $base-danger !default; +$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default; +$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss new file mode 100644 index 000000000000..4ea1eff3b5c0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss @@ -0,0 +1,150 @@ +@use "../../base/chat"; +@use "colors" as *; +@use "sizes" as *; +@use "../../base/chat/mixins" as *; +@use "../common/mixins" as *; + +// adduse + +@include chat( + $chat-background-color, + $chat-border-color, + $chat-border-radius, +); +@include chat-avatar( + $chat-avatar-size, + $chat-avatar-color, + $chat-avatar-background-color, +); +@include chat-file( + $chat-file-container-width, + $chat-file-container-padding, + $chat-file-container-background-color, + $chat-file-container-border-radius, + $chat-file-container-box-shadow, + $chat-file-button-size, + $chat-file-secondary-font-size, + $chat-file-secondary-color, + $chat-file-base-section-gap, + $chat-file-size-max-width, + $chat-file-icon-font-size, +); +@include chat-fileview( + $chat-file-view-items-gap, + $chat-file-container-width, +); +@include chat-alertlist( + $chat-alertlist-color, + $chat-alerts-padding-block, + $chat-alerts-padding-inline, + $chat-alert-padding-block, + $chat-alerts-row-gap, +); +@include chat-messagebox( + $chat-messagebox-padding, + $chat-messagebox-border-color, + $chat-messagebox-gap, + $chat-messagebox-textarea-border-radius, + $chat-messagebox-textarea-padding, + $chat-messagebox-toolbar-min-height, + $chat-file-container-width, + $chat-messagebox-files-container-padding, + $chat-messagebox-files-container-padding-top, + $chat-messagebox-file-background-color, + $chat-messagebox-file-cancel-button-secondary-color, + $chat-file-container-box-shadow, +); +@include chat-messagebubble( + $chat-bubble-padding, + $chat-bubble-border-radius, + $chat-bubble-color-secondary, + $chat-bubble-background-color-secondary, + $chat-bubble-color-primary, + $chat-bubble-background-color-primary, + $chat-bubble-container-gap, + $chat-bubble-delete-gap, + $chat-bubble-delete-icon-size, + $chat-bubble-gap, +); +@include chat-messagegroup( + $chat-messagegroup-gap, + $chat-messagegroup-alignment-start-template, + $chat-messagegroup-alignment-start-gap, + $chat-messagegroup-padding, + $chat-information-font-size, + $chat-information-author-name-color, + $chat-information-timestamp-color, + $chat-information-gap, + $chat-information-icon-size, + $chat-information-edited-gap, +); +@include chat-messagelist-empty( + $chat-messagelist-padding, + $chat-messagelist-empty-icon-box-size, + $chat-messagelist-empty-icon-size, + $chat-messagelist-empty-icon-margin-bottom, + $chat-messagelist-empty-row-gap, + $chat-messagelist-empty-icon-color, + $chat-messagelist-empty-icon-background-color, + $chat-messagelist-empty-message-font-size, + $chat-messagelist-empty-message-color, + $chat-messagelist-empty-prompt-font-size, + $chat-messagelist-empty-prompt-color, +); +@include chat-messagelist( + $chat-messagelist-padding, + $chat-messagelist-day-header-color, + $chat-messagelist-day-header-padding-bottom, + $chat-messagelist-day-header-first-padding-top, + $chat-messagelist-day-header-font-size, +); +@include chat-messagelist-contextmenu( + $chat-messagelist-contextmenu-delete-button-color, + $chat-messagelist-contextmenu-delete-button-focused-color, + $chat-messagelist-contextmenu-delete-button-focused-bg, +); +@include chat-typingindicator( + $chat-typingindicator-template, + $chat-typingindicator-padding, + $chat-typingindicator-row-gap, + $chat-typingindicator-font-size, + $chat-typingindicator-color, + $chat-typingindicator-bubble-padding-block, + $chat-typingindicator-bubble-padding-inline, + $chat-typingindicator-bubble-border-radius, + $chat-typingindicator-bubble-bg-color, + $chat-typingindicator-bubble-column-gap, + $chat-typingindicator-circle-size, + $chat-typingindicator-circle-size-center, + $chat-typingindicator-circle-border-radius, + $chat-typingindicator-circle-bg-color, + $chat-typingindicator-circle-bg-color-center, +); +@include message-editing-preview( + $chat-message-editing-preview-content-padding-inline, + $chat-message-editing-preview-content-row-gap, + $chat-message-editing-preview-accent-color, + $chat-message-editing-preview-caption-font-size, + $chat-messagebox-padding, + $chat-message-editing-preview-border-width, + $chat-message-editing-preview-cancel-button-color, +); +@include chat-confirmation-popup( + $chat-border-radius, + $chat-confirmation-popup-content-padding, + 0 $chat-confirmation-popup-toolbar-padding-block, + $chat-confirmation-popup-toolbar-padding-inline, + $chat-confirmation-popup-toolbar-gap, +); +@include chat-suggestions( + $chat-suggestions-padding, + $chat-suggestions-button-border-radius, + $chat-suggestions-border-width, + $chat-suggestions-button-max-width, + $chat-suggestions-gap, + $chat-suggestions-box-shadow, +); + +.dx-chat-file { + @include dx-base-typography(); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss new file mode 100644 index 000000000000..6c67c9c17d67 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss @@ -0,0 +1,167 @@ +@use "sass:math"; +@use "../textEditor/colors" as *; +@use "../common/sizes" as *; +@use "../sizes" as *; +@use "../typography/sizes" as *; +@use "../popup/sizes" as *; +@use "../button/colors" as *; + +// adduse + +$chat-border-radius: $base-border-radius * 3 !default; +$chat-bubble-border-radius: null !default; +$chat-bubble-padding: null !default; +$chat-bubble-container-gap: 4px !default; +$chat-bubble-delete-gap: null !default; +$chat-bubble-delete-icon-size: null !default; +$chat-messagebox-padding: null !default; +$chat-messagebox-textarea-padding: null !default; +$chat-messagebox-textarea-border-radius: null !default; +$chat-messagebox-toolbar-min-height: null !default; +$chat-messagebox-gap: 8px !default; +$chat-messagebox-files-container-padding: 3px !default; +$chat-messagebox-files-container-padding-top: 2px !default; +$chat-messagelist-padding: null !default; +$chat-messagegroup-gap: 4px !default; +$chat-messagegroup-padding: null !default; +$chat-information-gap: 8px !default; +$chat-avatar-size: 32px !default; +$chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default; +$chat-messagegroup-alignment-start-gap: 12px !default; +$chat-information-font-size: 12px !default; +$chat-information-icon-size: 12px !default; +$chat-information-edited-gap: 2px !default; + +$chat-alerts-padding-block: null !default; +$chat-alerts-padding-inline: 8px !default; +$chat-alerts-row-gap: null !default; +$chat-alert-padding-block: null !default; + +$chat-suggestions-padding: null !default; +$chat-suggestions-border-width: $fluent-base-border-width !default; +$chat-suggestions-button-border-radius: $button-border-radius !default; +$chat-suggestions-button-max-width: 200px !default; +$chat-suggestions-gap: 12px !default; + +$chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default; +$chat-message-editing-preview-content-row-gap: null !default; +$chat-message-editing-preview-content-padding-inline: null !default; +$chat-message-editing-preview-border-width: 3px !default; + +$chat-messagelist-empty-icon-box-size: null !default; +$chat-messagelist-empty-icon-size: null !default; +$chat-messagelist-empty-icon-margin-bottom: null !default; +$chat-messagelist-empty-row-gap: null !default; +$chat-messagelist-empty-message-font-size: null !default; +$chat-messagelist-empty-prompt-font-size: null !default; +$chat-messagelist-day-header-padding-bottom: 12px !default; +$chat-messagelist-day-header-first-padding-top: 20px !default; +$chat-messagelist-day-header-font-size: 12px !default; + +$chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default; +$chat-typingindicator-padding: null !default; +$chat-typingindicator-row-gap: $chat-messagegroup-gap !default; +$chat-typingindicator-font-size: $chat-information-font-size !default; +$chat-typingindicator-bubble-padding-block: null !default; +$chat-typingindicator-bubble-padding-inline: null !default; +$chat-typingindicator-bubble-border-radius: null !default; +$chat-typingindicator-bubble-column-gap: 4px !default; +$chat-typingindicator-circle-size: null !default; +$chat-typingindicator-circle-size-center: null !default; +$chat-typingindicator-circle-border-radius: 999em !default; + +$chat-confirmation-popup-content-padding: $fluent-popup-content-vertical-padding !default; +$chat-confirmation-popup-toolbar-padding-block: $fluent-popup-content-withtitle-bottom-padding !default; +$chat-confirmation-popup-toolbar-padding-inline: $fluent-popup-content-withtitle-top-padding !default; +$chat-confirmation-popup-toolbar-gap: null !default; + +$chat-file-container-width: 17.14em !default; +$chat-file-container-padding: 7px 8px !default; +$chat-file-container-border-radius: $fluent-base-border-radius !default; +$chat-file-button-size: $fluent-button-height !default; +$chat-file-secondary-font-size: 10px !default; +$chat-file-base-section-gap: 4px !default; +$chat-file-size-max-width: 4em !default; +$chat-file-icon-font-size: null !default; +$chat-file-view-items-gap: 8px !default; +$chat-bubble-gap: 8px !default; + +@if $size == "default" { + $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default; + $chat-bubble-padding: 8px 12px !default; + $chat-bubble-delete-gap: 4px !default; + $chat-bubble-delete-icon-size: 20px !default; + $chat-messagebox-padding: 20px !default; + $chat-messagebox-textarea-border-radius: 8px !default; + $chat-messagebox-textarea-padding: 12px !default; + $chat-messagebox-toolbar-min-height: 32px !default; + $chat-messagelist-padding: 20px !default; + $chat-messagegroup-padding: 24px !default; + + $chat-alerts-padding-block: 12px !default; + $chat-alerts-row-gap: 2px !default; + $chat-alert-padding-block: 6px !default; + + $chat-suggestions-padding: 20px !default; + + $chat-message-editing-preview-content-padding-inline: 12px !default; + $chat-message-editing-preview-content-row-gap: 4px !default; + + $chat-messagelist-empty-icon-box-size: 64px !default; + $chat-messagelist-empty-icon-size: 40px !default; + $chat-messagelist-empty-icon-margin-bottom: 12px !default; + $chat-messagelist-empty-row-gap: 4px !default; + $chat-messagelist-empty-message-font-size: 18px !default; + $chat-messagelist-empty-prompt-font-size: 14px !default; + + $chat-typingindicator-circle-size: math.div(8, 14) * 1em !default; + $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default; + $chat-typingindicator-bubble-padding-block: 12px !default; + $chat-typingindicator-bubble-padding-inline: 20px !default; + $chat-typingindicator-padding: $chat-messagegroup-padding !default; + $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; + + $chat-confirmation-popup-toolbar-gap: 8px !default; + + $chat-file-icon-font-size: 20px !default; +} + +@else if $size == "compact" { + $chat-bubble-border-radius: $fluent-base-border-radius * 2 !default; + $chat-bubble-padding: 6px 8px !default; + $chat-bubble-delete-gap: 2px !default; + $chat-bubble-delete-icon-size: 16px !default; + $chat-messagebox-padding: 16px !default; + $chat-messagebox-textarea-border-radius: 8px !default; + $chat-messagebox-textarea-padding: 8px !default; + $chat-messagebox-toolbar-min-height: 24px !default; + $chat-messagelist-padding: 16px !default; + $chat-messagegroup-padding: 12px !default; + + $chat-alerts-padding-block: 8px !default; + $chat-alerts-row-gap: 2px !default; + $chat-alert-padding-block: 5px !default; + + $chat-suggestions-padding: 16px !default; + + $chat-message-editing-preview-content-padding-inline: 8px !default; + $chat-message-editing-preview-content-row-gap: 2px !default; + + $chat-messagelist-empty-icon-box-size: 48px !default; + $chat-messagelist-empty-icon-size: 32px !default; + $chat-messagelist-empty-icon-margin-bottom: 14px !default; + $chat-messagelist-empty-row-gap: 2px !default; + $chat-messagelist-empty-message-font-size: 14px !default; + $chat-messagelist-empty-prompt-font-size: 12px !default; + + $chat-typingindicator-circle-size: math.div(8, 12) * 1em !default; + $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default; + $chat-typingindicator-bubble-padding-block: 8px !default; + $chat-typingindicator-bubble-padding-inline: 12px !default; + $chat-typingindicator-padding: $chat-messagegroup-padding !default; + $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; + + $chat-confirmation-popup-toolbar-gap: 4px !default; + + $chat-file-icon-font-size: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss new file mode 100644 index 000000000000..f36f4d5b4fe0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss @@ -0,0 +1,22 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$checkbox-border-color: $base-border-color-accessible !default; +$checkbox-border-color-hover: $base-border-color-accessible-hover !default; +$checkbox-border-color-active: $base-border-color-accessible-focused !default; + +$checkbox-foreground-color: $base-element-bg !default; + +$checkbox-accent-color: $base-accent !default; +$checkbox-accent-color-hover: $base-accent-hover !default; +$checkbox-accent-color-focused: $base-accent-active !default; + +$checkbox-invalid-color: $base-invalid-color !default; +$checkbox-invalid-color-hover: $base-invalid-color-hover !default; +$checkbox-invalid-color-focused: $base-invalid-color-selected !default; + +$checkbox-border-color-disabled: $base-border-color-disabled !default; +$checkbox-foreground-disabled-color: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss new file mode 100644 index 000000000000..35250bf909bd --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss @@ -0,0 +1,224 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/checkBox"; +@use "../../base/checkBox/mixins" as *; + +// adduse + +.dx-checkbox-icon { + width: $fluent-checkbox-arrow-icon-size; + height: $fluent-checkbox-arrow-icon-size; + border-width: $fluent-checkbox-border-width; + border-style: solid; + border-color: $checkbox-border-color; + border-radius: $fluent-checkbox-icon-border-radius; + background-color: $checkbox-foreground-color; + font-size: $fluent-checkbox-icon-font-size; + + &::before { + z-index: 1; + } +} + +.dx-checkbox-text { + padding-inline-start: $fluent-checkbox-text-padding-start; + padding-inline-end: $fluent-checkbox-text-padding-end; +} + +.dx-checkbox { + .dx-checkbox-container { + overflow: visible; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color; + } + } + + &.dx-state-readonly { + .dx-checkbox-icon { + border-color: $checkbox-border-color-disabled; + } + } + + &.dx-state-hover { + .dx-checkbox-icon { + border-color: $checkbox-border-color-hover; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-hover; + } + } + } + + &.dx-state-active { + .dx-checkbox-icon { + border-color: $checkbox-border-color-active; + } + } + + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + } + } + + &.dx-state-active, + &.dx-state-focused { + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-focused; + } + } + } + + &.dx-state-disabled, + .dx-state-disabled & { + opacity: 1; + + .dx-checkbox-icon { + border-color: $checkbox-border-color-disabled; + } + } +} + +.dx-checkbox-checked { + .dx-checkbox-icon { + color: $checkbox-foreground-color; + border-color: $checkbox-accent-color; + background-color: $checkbox-accent-color; + + @include dx-icon(check); + + font-size: $fluent-checkbox-icon-font-size; + + @include dx-checkbox-icon-centered($fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-font-size); + } + + &.dx-state-hover { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-hover; + background-color: $checkbox-accent-color-hover; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-hover; + background-color: $checkbox-invalid-color-hover; + } + } + } + + &.dx-state-active, + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + background-color: $checkbox-accent-color-focused; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-focused; + background-color: $checkbox-invalid-color-focused; + } + } + } + + &.dx-invalid { + .dx-checkbox-icon { + background-color: $checkbox-invalid-color; + } + } + + &.dx-state-readonly, + &.dx-state-disabled, + .dx-state-disabled &, + &.dx-state-readonly.dx-invalid { + .dx-checkbox-icon { + color: $checkbox-foreground-disabled-color; + background-color: $checkbox-foreground-color; + } + } +} + +@include dx-checkbox-icon-indeterminate( + $checkbox-foreground-color, + $checkbox-accent-color, + $fluent-checkbox-indeterminate-icon-height, + $fluent-checkbox-indeterminate-icon-width, + $fluent-checkbox-indeterminate-icon-border-radius, +); + +.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $checkbox-accent-color; + } + + &.dx-invalid { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-invalid-color; + } + } + } + + &.dx-state-hover { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-hover; + + &::before { + background-color: $checkbox-accent-color-hover; + } + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-hover; + + &::before { + background-color: $checkbox-invalid-color-hover; + } + } + } + } + + &.dx-state-active, + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + + &::before { + background-color: $checkbox-accent-color-focused; + } + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-focused; + + &::before { + background-color: $checkbox-invalid-color-focused; + } + } + } + } + + &.dx-state-readonly, + &.dx-state-disabled, + .dx-state-disabled &, + &.dx-state-readonly.dx-invalid { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-foreground-disabled-color; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss new file mode 100644 index 000000000000..a2db48620746 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; +@use "colors" as *; + +// adduse + +$fluent-checkbox-icon-font-size: 16px !default; + +$fluent-checkbox-border-width: 1px !default; +$fluent-checkbox-icon-border-radius: 2px !default; + +$fluent-checkbox-arrow-icon-size: 1em !default; +$fluent-checkbox-arrow-font-size: 0.75em !default; +$fluent-checkbox-indeterminate-icon-height: 0.5em !default; +$fluent-checkbox-indeterminate-icon-width: 0.5em !default; +$fluent-checkbox-indeterminate-icon-border-radius: 2px !default; + +$fluent-checkbox-text-padding-start: null !default; +$fluent-checkbox-text-padding-end: null !default; + +@if $size == "default" { + $fluent-checkbox-text-padding-start: 12px !default; + $fluent-checkbox-text-padding-end: 8px !default; +} + +@else if $size == "compact" { + $fluent-checkbox-text-padding-start: 8px !default; + $fluent-checkbox-text-padding-end: 6px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss new file mode 100644 index 000000000000..c68bdf88940c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss @@ -0,0 +1,36 @@ +@use "sass:math"; +@use "sass:color"; + +@function difference($minuend, $subtrahend) { + @return color.adjust( + $minuend, + $red: - (color.channel($subtrahend, "red", $space: rgb)), + $green: - (color.channel($subtrahend, "green", $space: rgb)), + $blue: - (color.channel($subtrahend, "blue", $space: rgb))); +} + +@function screen($color1, $color2) { + $r1: math.div(color.channel($color1, "red", $space: rgb), 255); + $g1: math.div(color.channel($color1, "green", $space: rgb), 255); + $b1: math.div(color.channel($color1, "blue", $space: rgb), 255); + + $r2: math.div(color.channel($color2, "red", $space: rgb), 255); + $g2: math.div(color.channel($color2, "green", $space: rgb), 255); + $b2: math.div(color.channel($color2, "blue", $space: rgb), 255); + + @return color.change( + $color1, + $red: ($r1 + $r2 - $r1 * $r2) * 255, + $green: ($g1 + $g2 - $g1 * $g2) * 255, + $blue: ($b1 + $b2 - $b1 * $b2) * 255); +} + +@function adjust-if-not-achromatic($color, $hue, $saturation, $lightness) { + $out: color.adjust($color, $saturation: $saturation, $lightness: $lightness, $space: hsl); + + @if not color.is-powerless($out, "hue", $space: hsl) { + $out: color.adjust($out, $hue: $hue, $space: hsl); + } + + @return $out; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss new file mode 100644 index 000000000000..4b437aa96502 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$colorbox-preview-icon-color: $base-icon-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss new file mode 100644 index 000000000000..befd71dc3a18 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss @@ -0,0 +1,70 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../colorView/colors" as *; +@use "../textEditor/sizes" as *; +@use "../../base/colorBox"; +@use "../../base/colorBox/mixins" as *; + +// adduse +@use "../colorView"; +@use "../dropDownEditor"; + + +.dx-colorbox { + .dx-colorbox-input-container { + .dx-placeholder::before, + .dx-colorbox-input { + padding-inline-start: $fluent-colorbox-preview-width; + } + + &::after { + left: $fluent-colorbox-preview-padding + 1; + } + } + + &.dx-texteditor { + .dx-texteditor-label { + .dx-label-before { + min-width: $fluent-colorbox-preview-width; + } + } + } +} + +.dx-colorbox-color-result-preview { + position: absolute; + top: 50%; + z-index: 2; + width: $fluent-colorbox-preview-icon-size; + height: $fluent-colorbox-preview-icon-size; + margin-top: math.div(-$fluent-colorbox-preview-icon-size, 2); + inset-inline-start: $fluent-colorbox-preview-padding; + border: 1px solid; + border-color: $colorview-border-color; + + .dx-icon-colordismiss { + color: $colorbox-preview-icon-color; + } + + .dx-state-disabled & { + .dx-icon-colordismiss { + color: $base-foreground-disabled; + } + } +} + +.dx-colorbox-overlay { + &.dx-overlay-content { + background-color: $colorbox-overlay-bg; + } + + .dx-popup-content { + padding: $fluent-colorbox-overlay-padding; + } + + padding: 0; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss new file mode 100644 index 000000000000..9882bab17d9d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-colorbox-overlay-padding: null !default; +$fluent-colorbox-preview-padding: null !default; +$fluent-colorbox-preview-icon-size: $fluent-base-icon-size !default; + +@if $size == "default" { + $fluent-colorbox-overlay-padding: 20px !default; + $fluent-colorbox-preview-padding: 12px !default; +} + +@else if $size == "compact" { + $fluent-colorbox-overlay-padding: 16px !default; + $fluent-colorbox-preview-padding: 8px !default; +} + +$fluent-colorbox-preview-width: $fluent-colorbox-preview-padding * 2 + $fluent-colorbox-preview-icon-size !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss new file mode 100644 index 000000000000..0ac69e1bfb5d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; + +// adduse + +/** +* $name 10. Overlay background +* $type color +*/ +$colorbox-overlay-bg: $overlay-content-bg !default; +$colorbox-palette-cell-bg: $colorbox-overlay-bg !default; +$colorview-border-color: $base-border-color !default; +$colorview-label-color: $base-label-color !default; +$colorview-handle-color: $base-bg !default; +$colorview-handle-border-color: $base-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss new file mode 100644 index 000000000000..88f6747bd46c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss @@ -0,0 +1,123 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/colorView/mixins" as *; +@use "../../base/colorView"; + +// adduse + + +@include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color); + + +$fluent-colorview-alpha-width: $fluent-colorview-palette-width + 4; +$fluent-colorview-hue-scale-height: $fluent-colorview-palette-height; + +.dx-colorview-container { + width: $fluent-colorview-container-width; + + label { + line-height: $fluent-colorview-container-line-height; + display: flex; + align-items: center; + margin-bottom: 10px; + + &.dx-colorview-label-hex { + margin: $fluent-colorview-container-hex-margin; + } + + &.dx-colorview-alpha-channel-label { + margin: 0 0 0 $fluent-colorview-container-alpha-label-margin; + width: $fluent-colorview-container-alpha-label-width; + } + + .dx-texteditor { + width: $fluent-colorview-container-textbox-width; + margin: $fluent-colorview-container-textbox-margin; + } + } +} + +.dx-colorview-hue-scale-cell { + margin-left: $fluent-colorview-hue-scale-margin; +} + +.dx-colorview-palette { + width: $fluent-colorview-palette-width; + height: $fluent-colorview-palette-height; +} + +.dx-colorview-alpha-channel-scale { + width: $fluent-colorview-palette-width; +} + +.dx-colorview-container-row.dx-colorview-alpha-channel-row { + margin-top: $fluent-colorview-alpha-margin; + display: flex; + align-items: center; +} + +.dx-colorview-hue-scale { + width: $fluent-colorview-hue-scale-width; + height: $fluent-colorview-hue-scale-height; +} + +.dx-colorview-alpha-channel-cell { + width: $fluent-colorview-alpha-width; +} + +.dx-colorview-hue-scale-wrapper { + height: $fluent-colorview-hue-scale-height + 2; +} + +.dx-colorview-color-preview { + width: 100%; + height: $fluent-colorview-color-preview-height; +} + +.dx-colorview-controls-container { + width: $fluent-colorview-controls-container-width; + margin-left: $fluent-colorview-controls-container-margin; +} + +.dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors + color: $colorview-label-color; +} + +.dx-colorview-palette-cell, +.dx-colorview-alpha-channel-border, +.dx-colorview-hue-scale-wrapper, +.dx-colorview-color-preview-container { + padding: 1px; + margin: 1px; + margin-top: 0; + background-color: $colorbox-palette-cell-bg; + box-shadow: 0 0 0 1px $colorview-border-color; +} + +.dx-colorview-color-preview-container { + margin-bottom: $fluent-colorview-preview-container-margin; +} + +.dx-rtl { + .dx-colorview-controls-container { + margin-left: 0; + margin-right: $fluent-colorview-controls-container-margin; + } + + .dx-colorview-hue-scale-cell { + margin-left: 0; + margin-right: $fluent-colorview-hue-scale-margin; + } + + .dx-colorview-container { + label { + &.dx-colorview-alpha-channel-label { + margin-left: 0; + margin-right: $fluent-colorview-container-alpha-label-margin; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss new file mode 100644 index 000000000000..6b27cf1809ca --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss @@ -0,0 +1,22 @@ +@use "../sizes" as *; + +// adduse + +$fluent-colorview-container-width: 450px !default; +$fluent-colorview-palette-width: 288px !default; +$fluent-colorview-palette-height: 299px !default; +$fluent-colorview-alpha-margin: 10px !default; +$fluent-colorview-hue-scale-width: 18px !default; +$fluent-colorview-hue-scale-margin: 19px !default; +$fluent-colorview-color-preview-height: 40px !default; +$fluent-colorview-preview-container-margin: 34px !default; + +$fluent-colorview-container-line-height: normal !default; +$fluent-colorview-container-hex-margin: 20px 0 0 0 !default; +$fluent-colorview-container-alpha-label-width: 115px !default; +$fluent-colorview-container-alpha-label-margin: 43px !default; +$fluent-colorview-container-textbox-width: 69px !default; +$fluent-colorview-container-textbox-margin: 0 0 0 10px !default; + +$fluent-colorview-controls-container-width: 90px !default; +$fluent-colorview-controls-container-margin: 27px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss new file mode 100644 index 000000000000..a3401ae9d875 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$base-dropdown-shadow-color1: null !default; +$base-dropdown-shadow-color2: null !default; + +@if $mode == "light" { + $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.12) !default; + $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.14) !default; +} + +@if $mode == "dark" { + $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.24) !default; + $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.28) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss new file mode 100644 index 000000000000..c6515af0face --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss @@ -0,0 +1,68 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; + + +// adduse +.dx-theme-marker { + font-family: "dx.dxdsfluent.#{$fluent-color-accent-modificator}.#{$fluent-color-theme-modificator}#{$fluent-size-postfix}"; +} + +// stylelint-disable declaration-no-important +.dx-theme-accent-as-text-color { + color: $base-accent !important; +} + +.dx-theme-text-color { + color: $base-text-color !important; +} + +.dx-theme-background-color-as-text-color { + color: $base-bg !important; +} + +.dx-theme-border-color-as-text-color { + color: $base-border-color !important; +} + +.dx-theme-accent-as-background-color { + background-color: $base-accent !important; + fill: $base-accent !important; +} + +.dx-theme-text-color-as-background-color { + background-color: $base-text-color !important; + fill: $base-text-color !important; +} + +.dx-theme-background-color { + background-color: $base-bg !important; + fill: $base-bg !important; +} + +.dx-theme-typography-background-color { + background-color: $base-typography-bg !important; +} + +.dx-theme-border-color-as-background-color { + background-color: $base-border-color !important; + fill: $base-border-color !important; +} + +.dx-theme-accent-as-border-color { + border-color: $base-accent !important; +} + +.dx-theme-text-color-as-border-color { + border-color: $base-text-color !important; +} + +.dx-theme-background-color-as-border-color { + border-color: $base-bg !important; +} + +.dx-theme-border-color { + border-color: $base-border-color !important; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss new file mode 100644 index 000000000000..96a5b23eb2d8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss @@ -0,0 +1,107 @@ +@use "sass:math"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/validation" as *; +@use "../list/sizes" as *; + +$badge-invalid-bg: $base-invalid-color; + +@mixin dx-base-typography() { + @include dx-base-typography-mixin( + $typography-color, + $fluent-base-font-size, + $base-font-family, + $fluent-line-height + ); +} + +@mixin disabled-widget($opacity: $base-disabled-opacity) { + @include disabled-widget-mixin($opacity); +} + +@mixin badge-settings() { + pointer-events: none; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 50%; + margin-top: math.div(-$fluent-invalid-badge-size, 2); + width: $fluent-invalid-badge-size; + height: $fluent-invalid-badge-size; + line-height: $fluent-invalid-badge-size + 1; + font-size: $fluent-base-font-size; +} + +@mixin dx-invalid-fluent-badge() { + @include badge-settings(); + + font-size: $fluent-base-font-size; + font-weight: 500; + background-color: $badge-invalid-bg; + color: $base-inverted-text-color; + content: '!'; + border-radius: 50%; +} + +@mixin dx-valid-fluent-badge() { + @include badge-settings(); + + font-size: $fluent-valid-badge-font-size; + font-weight: bold; + font-family: 'DXIcons', sans-serif; + color: $base-success; + content: '\f005'; + + @include validation-badge-animation(); +} + +@mixin dx-pending-indicator-fluent() { + @include dx-pending-indicator($fluent-invalid-badge-size); +} + +@mixin dx-dropdownlist-list-appearance() { + height: 100%; + + &.dx-popup-wrapper .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + border-top-width: 0; + border-bottom-width: 1px; + + &.dx-dropdowneditor-overlay-flipped { + border-top-width: 1px; + border-bottom-width: 0; + } + } + + .dx-popup-content { + height: 100%; + padding: 1px; + } + + .dx-list { + height: 100%; + min-height: $fluent-list-item-height; + } + + .dx-list-select-all { + margin-inline: $fluent-list-item-margin-inline; + padding: $fluent-list-item-vertical-padding + 2px 0 $fluent-list-item-vertical-padding - 2px; + } + + .dx-list-items { + margin-inline: $fluent-list-item-margin-inline; + } + + .dx-list-item, + .dx-empty-message { + border-top: 0; + + &:last-of-type { + border-bottom: none; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss new file mode 100644 index 000000000000..ca2a3c4ef064 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss @@ -0,0 +1,33 @@ +@use "sass:math"; +@use "../sizes" as *; +@use "./colors" as *; + +// adduse + +$fluent-line-height: null !default; + +$fluent-inline-borderedwidget-inner-size: + $fluent-base-inline-widget-height - + $fluent-base-border-width * 2 !default; + +$fluent-invalid-badge-size: $fluent-base-icon-size - 2px !default; +$fluent-invalid-badge-horizontal-padding: math.div($fluent-inline-borderedwidget-inner-size - $fluent-invalid-badge-size, 2) !default; +$fluent-invalid-badge-halfhorizontal-padding: math.div($fluent-invalid-badge-horizontal-padding, 2) !default; + +$fluent-valid-badge-font-size: $fluent-base-font-size + 6px !default; + +$fluent-base-dropdown-widgets-shadow: null !default; + +@if $size == "default" { + $fluent-line-height: 1.428571 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 8px 16px 0 $base-dropdown-shadow-color2 !default; +} + +@else if $size == "compact" { + $fluent-line-height: 1.3333 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 4px 8px 0 $base-dropdown-shadow-color2 !default; +} + +:root { + --dx-line-height: #{$fluent-line-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss new file mode 100644 index 000000000000..8a1179879885 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss @@ -0,0 +1,85 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../button/sizes" as *; +@use "../menuBase/sizes" as *; +@use "../menu/colors" as *; +@use "../menu/sizes" as *; +@use "../../base/contextMenu"; + +// adduse +@use "../overlay"; +@use "../menuBase" as *; + + +.dx-context-menu { + color: $menu-color; + + .dx-menu-items-container { + display: flex; + flex-direction: column; + padding: $fluent-context-menu-items-container-padding; + gap: $fluent-context-menu-items-container-gap; + } + + .dx-menu-item { + border-radius: $fluent-context-menu-item-border-radius; + + .dx-menu-item-content { + display: flex; + align-items: center; + padding: $fluent-menu-vertical-padding $fluent-context-menu-horizontal-padding; + gap: $fluent-context-menu-item-content-gap; + + .dx-menu-item-text { + padding-inline: $fluent-context-menu-item-text-padding-inline; + } + + .dx-menu-item-popout-container { + inset-inline-end: $fluent-context-menu-horizontal-padding; + width: $fluent-base-icon-size; + display: flex; + align-items: center; + + .dx-menu-item-popout { + display: flex; + align-items: center; + + @include dx-icon(spinright); + @include dx-icon-sizing($fluent-button-icon-size); + } + } + } + + .dx-menu-item-popout { + color: $base-icon-color; + } + + &.dx-state-disabled { + .dx-menu-item-popout { + color: $base-foreground-disabled; + } + } + + &.dx-menu-item-has-submenu > .dx-menu-item-content { + padding-inline-end: $fluent-menu-item-with-icon-horizontal-padding; + } + } + + &.dx-overlay-content.dx-state-focused { + box-shadow: none; + } + + .dx-submenu { + background-color: $menu-popup-bg; + border-radius: $fluent-context-menu-border-radius; + box-shadow: color.change($base-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($base-shadow-color, $alpha: 0.14) 0 8px 16px 0; + } + + .dx-menu-separator { + background-color: $menu-separator-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss new file mode 100644 index 000000000000..adc7edfb85ac --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss @@ -0,0 +1,21 @@ +@use "../sizes" as *; + +// adduse + +$fluent-context-menu-horizontal-padding: null !default; +$fluent-context-menu-border-radius: $base-border-radius !default; +$fluent-context-menu-items-container-padding: 4px !default; +$fluent-context-menu-items-container-gap: 2px !default; +$fluent-context-menu-item-border-radius: $base-border-radius !default; +$fluent-context-menu-item-content-gap: null !default; +$fluent-context-menu-item-text-padding-inline: 2px !default; + +@if $size == "default" { + $fluent-context-menu-horizontal-padding: 6px !default; + $fluent-context-menu-item-content-gap: 6px !default; +} + +@else if $size == "compact" { + $fluent-context-menu-horizontal-padding: 4px !default; + $fluent-context-menu-item-content-gap: 4px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss new file mode 100644 index 000000000000..f6f8526a41ed --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss @@ -0,0 +1,21 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$fluent-datagrid-grouppanel-item-bg: null !default; + +@if $mode == "light" { + @if $color == "blue"{ + $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + } + + @if $color == "saas" { + $fluent-datagrid-grouppanel-item-bg: color.change($base-hover-bg, $alpha: 0.4) !default; + } +} + +@if $mode == "dark" { + $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss new file mode 100644 index 000000000000..f83ab930c66b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss @@ -0,0 +1,125 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../gridBase" as *; +@use "../gridBase/colors" as *; +@use "../gridBase/sizes" as *; +@use "../../base/dataGrid" as baseGrid with ( + $datagrid-border: $datagrid-border, + $datagrid-border-color: $datagrid-border-color, + $datagrid-drag-header-border-color: $datagrid-drag-header-border-color, + $datagrid-row-error-bg: $datagrid-row-error-bg, + $datagrid-row-error-color: $datagrid-row-error-color, + $datagrid-base-color: $datagrid-base-color, + $datagrid-base-background-color: $datagrid-base-background-color, + $datagrid-focused-border-color: $datagrid-focused-border-color, + $header-filter-color: $header-filter-color, + $header-filter-color-empty: $header-filter-color-empty, + $base-focus-color: $base-focus-color, + $datagrid-text-stub-background-image-path: $datagrid-text-stub-background-image-path, +); +@use 'layout/cell'; +@include grid-base(datagrid); + +.dx-datagrid-group-panel { + font-size: $fluent-base-font-size; + touch-action: pinch-zoom; + + .dx-group-panel-message { + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + padding: $fluent-datagrid-cell-padding 0; + border-top: $fluent-grid-base-border-hidden; + border-bottom: $fluent-grid-base-border-hidden; + line-height: $fluent-grid-base-group-panel-message-line-height; + } + + .dx-group-panel-item { + margin-right: $fluent-grid-base-grouppanel-item-margin; + color: $datagrid-columnchooser-item-color; + font-weight: $fluent-datagrid-grouppanel-item-font-weight; + font-size: $fluent-grid-base-header-cell-font-size; + line-height: $fluent-grid-base-header-line-height; + background: $fluent-datagrid-grouppanel-item-bg; + border-radius: $area-field-border-radius; + padding: $area-field-top-bottom-padding 10px; + border-width: 1px; + border-style: solid; + border-color: $base-border-color-disabled; + } + + .dx-block-separator { + margin-right: $fluent-grid-base-grouppanel-item-margin; + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + background-color: $base-accent; + } + + .dx-sort { + color: $header-filter-color-empty; + } +} + +.dx-datagrid-rowsview { + .dx-datagrid-group-row-container { + padding-left: $fluent-grid-base-cell-horizontal-padding; + padding-right: $fluent-grid-base-cell-horizontal-padding; + text-overflow: ellipsis; + display: inline-block; + position: sticky; + background-color: inherit; // T1303478 + max-width: 100%; + overflow: clip; + } + + .dx-row.dx-group-row:first-child { + border-top: none; + } + + + .dx-row.dx-group-row { + &:not(.dx-row-focused) { + color: $datagrid-group-row-color; + background-color: $datagrid-group-row-bg; + } + + font-size: $fluent-grid-base-header-cell-font-size; + font-weight: 500; + } +} + +.dx-datagrid-group-opened { + @include dx-icon(chevrondown); + @include dx-icon-sizing($fluent-base-icon-size); + + color: $datagrid-chevron-icon-color; +} + +.dx-datagrid-group-closed { + @include dx-icon(chevronright); + @include dx-icon-sizing($fluent-base-icon-size); + + color: $datagrid-chevron-icon-color; +} + +.dx-row.dx-datagrid-group-footer { + &.dx-column-lines { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + +} + + +.dx-rtl { + .dx-datagrid-group-panel { + .dx-group-panel-item, + .dx-block-separator { + margin-left: $fluent-grid-base-grouppanel-item-margin; + } + } +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss new file mode 100644 index 000000000000..97f30a62ec83 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss @@ -0,0 +1,22 @@ +@use "../sizes" as *; +@use '../../base/dataGrid/variables' as *; + +// adduse + +$fluent-datagrid-cell-padding: 7px !default; +$fluent-datagrid-grouppanel-item-font-weight: 400 !default; + +$area-field-border-radius: null !default; +$area-field-top-bottom-padding: null !default; + +@if $size == "default" { + $area-field-border-radius: 6px !default; + $area-field-top-bottom-padding: 5px !default; +} + +@else if $size == "compact" { + $area-field-border-radius: 4px !default; + $area-field-top-bottom-padding: 2px !default; +} + +$datagrid-cell-padding: $fluent-datagrid-cell-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss new file mode 100644 index 000000000000..d7fea79bda17 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss @@ -0,0 +1,104 @@ +/* stylelint-disable no-duplicate-selectors */ +@use "../colors" as *; +@use "../../colors" as *; +@use "../sizes" as *; +@use "../../sizes" as *; +@use "../../gridBase/colors" as *; +@use "../../gridBase/sizes" as *; +@use "../../gridBase/variables" as *; + +// #region overflow + +// (0,5,0) +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right { + overflow: initial; + overflow-x: clip; +} + +// #endregion + +// #region border + +// (0,2,1) +.dx-row.dx-datagrid-group-footer > td { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + border-left-width: 0; + border-right-width: 0; +} + +// (0,3,1) +.dx-datagrid-rowsview .dx-row.dx-group-row td { + border-top-color: $fluent-grid-base-border-color; + border-bottom-color: $fluent-grid-base-border-color; +} + +// (0,3,1) +.dx-datagrid-sticky-columns .dx-row.dx-datagrid-group-footer > td { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; +} + +// (0,3,1) - (0,4,1) +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-edit-row td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-edit-row td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-edit-row td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-edit-row td { + border-top: none; +} + +// #endregion + +// #region padding + +// (0,4,1) +.dx-datagrid-sticky-columns .dx-row.dx-group-row:first-child td { + padding-top: $fluent-grid-base-cell-vertical-padding; +} + +// (0,5,0) +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right { + padding-left: 0; + padding-right: 0; +} + +// #endregion + +// #region background + +// (0,2,1) +.dx-row.dx-datagrid-group-footer > td { + background-color: $datagrid-summary-bg; +} + +// (0,4,1) T1303478 +.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column-right { + background-color: inherit; +} + +// (0,5,0) +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right { + background-color: inherit; +} + +// #endregion diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss new file mode 100644 index 000000000000..40cbb6dd23e2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; +@use "../colors" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss new file mode 100644 index 000000000000..9e127ba14c6e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss @@ -0,0 +1,144 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../dropDownEditor" as *; +@use "../../base/dropDownEditor/mixins" as *; +@use "../textEditor" as *; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../calendar/sizes" as *; +@use "../../base/dateBox"; +@use "mixins" as *; + +// adduse +@use "../timeView"; +@use "../dateView"; + +.dx-datebox-wrapper { + .dx-popup-title { + min-height: 10px; + border-bottom: none; + background: none; + } + + .dx-item { + border: none; + } + + .dx-popup-bottom { + .dx-button { + width: auto; + } + } +} + +.dx-datebox-datetime-time-side { + justify-content: flex-end; +} + +.dx-datebox-wrapper-rollers.dx-datebox-wrapper-time .dx-popup-content { + margin: $fluent-datebox-popup-content-margin; +} + +.dx-datebox-wrapper-list { + .dx-overlay-content { + border-top: none; + } +} + +.dx-device-phone .dx-datebox-wrapper-rollers { + .dx-popup-content { + padding: 10px; + } +} + +.dx-datebox-time { + @include dx-dropdowneditor-button-icon-styling(clock); +} + +.dx-datebox-date { + @include dx-dropdowneditor-button-icon-styling(event); +} + +.dx-datebox-datetime { + @include dx-dropdowneditor-button-icon-styling(eventall); +} + +.dx-datebox-wrapper-calendar { + .dx-popup-content { + padding: 0; + } + + .dx-calendar { + border: none; + margin: $fluent-datebox-overlay-item-margin; + } + + .dx-datebox-container-cell { + margin-right: $fluent-datebox-overlay-item-margin; + margin-bottom: $fluent-datebox-overlay-item-margin; + } +} + +.dx-datebox-wrapper-calendar.dx-datebox-wrapper-datetime { + .dx-timeview { + padding: $fluent-datebox-overlay-item-margin; + } + + .dx-datebox-container-cell { + margin-top: -1px; + margin-right: $fluent-datebox-overlay-item-margin; + } +} + +@media (max-width: 320px) { + .dx-datebox-wrapper-calendar .dx-calendar { + margin: $fluent-datebox-overlay-item-margin-adaptive; + } +} + +.dx-rtl { + .dx-datebox-wrapper { + .dx-popup-bottom { + .dx-toolbar-button + .dx-toolbar-button { + .dx-button { + margin-right: 5px; + margin-left: 0; + } + } + } + } +} + +.dx-datebox-wrapper-list .dx-popup-content { + padding: 0; +} + +.dx-datebox { + input[type="date"] { + line-height: normal; + } + + &, + &:not(.dx-texteditor-empty) { + &.dx-auto-width { + @include invalid-dropdowneditor-input-padding( + $fluent-dropdowneditor-invalid-badge-size, + $fluent-base-standard-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-horizontal-padding + ); + } + } +} + +.dx-texteditor { + &.dx-datebox-native { + .dx-texteditor-input { + padding-right: $texteditor-spin-button-horizontal-padding; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss new file mode 100644 index 000000000000..c7f0752039b9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss @@ -0,0 +1,17 @@ +@use "../../base/icon_fonts" as *; +@use "../dropDownEditor" as *; +@use "../textEditor" as *; + +@mixin dx-dropdowneditor-button-icon-styling($icon) { + .dx-dropdowneditor-icon { + @include dx-icon($icon); + @include dx-dropdowneditor-button-icon(); + } + + &.dx-dropdowneditor-active { + .dx-dropdowneditor-icon { + @include dx-icon($icon); + @include dx-dropdowneditor-button-icon(); + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss new file mode 100644 index 000000000000..9190ee007c1c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss @@ -0,0 +1,7 @@ +@use "../sizes" as *; + +// adduse + +$fluent-datebox-overlay-item-margin: 16px !default; +$fluent-datebox-overlay-item-margin-adaptive: 18px !default; +$fluent-datebox-popup-content-margin: 0 34px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss new file mode 100644 index 000000000000..0779caa6ee0e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss @@ -0,0 +1 @@ +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss new file mode 100644 index 000000000000..09f3fe4eab0a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss @@ -0,0 +1,115 @@ +@use "sass:math"; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../dateBox/mixins" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "colors" as *; +@use "../colors" as *; +@use "../../base/dateRangeBox"; +@use "../../base/icon_fonts" as *; +@use "../textEditor" as *; + +// adduse + +$fluent-editor-custom-button-margin: 6px; + +.dx-daterangebox { + @include dx-dropdowneditor-button-icon-styling(daterangepicker); + + &.dx-editor-outlined, + &.dx-editor-filled { + &::before { + content: none; + } + } + + .dx-editor-outlined, + .dx-editor-filled { + &.dx-datebox { + &::before { + border-radius: 0; + width: calc(100% - 2 * $fluent-daterangebox-active-bar-horizontal-margin); + margin: 0 $fluent-daterangebox-active-bar-horizontal-margin; + } + } + } + + &.dx-editor-underlined, + &.dx-editor-filled { + &::before { + border-bottom-width: 1px; + transition: none; + } + + &.dx-state-hover { + &::after { + border-bottom-width: 1px; + transition: none; + } + } + + &.dx-state-focused { + &.dx-invalid { + &::before { + border-bottom-width: 1px; + transition: none; + } + } + } + } + + &.dx-editor-underlined { + .dx-daterangebox-separator { + padding-right: $fluent-filled-texteditor-input-horizontal-padding; + } + } + + &.dx-texteditor { + > .dx-texteditor-buttons-container { + > .dx-button, + > .dx-clear-button-area { + margin-inline-start: $fluent-editor-custom-button-margin; + margin-inline-end: $fluent-editor-custom-button-margin; + + &:first-child { + margin-inline-start: 0; + } + + &:last-child { + margin-inline-end: $fluent-editor-custom-button-margin; + } + } + + > .dx-dropdowneditor-button:last-child { + margin-inline-end: $texteditor-spin-button-horizontal-padding; + } + + > .dx-clear-button-area:last-child, + > .dx-clear-button-area + div:empty:last-child { + margin-inline-end: $fluent-filled-texteditor-input-button-horizontal-padding; + } + } + } + + .dx-datebox { + &.dx-end-datebox { + &.dx-texteditor { + &.dx-invalid { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size; + } + } + } + } + } +} + +.dx-daterangebox-separator { + padding-left: $fluent-filled-texteditor-input-horizontal-padding; + color: $texteditor-disabled-text-color; + + .dx-icon { + @include dx-icon-sizing($fluent-base-icon-size); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss new file mode 100644 index 000000000000..492b886d1e57 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss @@ -0,0 +1,13 @@ +@use "../sizes" as *; + +// adduse + +$fluent-daterangebox-active-bar-horizontal-margin: null !default; + +@if $size == "default" { + $fluent-daterangebox-active-bar-horizontal-margin: 12px !default; +} + +@else if $size == "compact" { + $fluent-daterangebox-active-bar-horizontal-margin: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss new file mode 100644 index 000000000000..6c463a7d674c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$dateview-shadow-up: 0deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; +$dateview-shadow-down: 180deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; +$dateview-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss new file mode 100644 index 000000000000..e3e6bf2a0023 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss @@ -0,0 +1,142 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/dateView"; + +// adduse +@use "../scrollable"; + +$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2); + +.dx-dateview-rollers { + width: auto; + text-align: center; + display: block; +} + +.dx-dateviewroller-current { + .dx-dateview-item { + transition: font-size 0.2s ease-out; + } +} + +.dx-dateviewroller { + min-width: 4em; + text-align: center; + display: inline-block; + + .dx-button { + display: none; + } + + .dx-scrollable-content::before, + .dx-scrollable-content::after { + content: ""; + height: $fluent-dateview-roller-padding; + display: block; + } + + .dx-scrollable-container { + height: $fluent-dateview-roller-height; + } + + &.dx-dateviewroller-year { + min-width: 4.85em; + } + + &.dx-state-active { + .dx-button { + display: none; + } + } +} + +.dx-dateviewroller-month { + min-width: 12em; +} + +.dx-dateviewroller-hours { + &::after { + content: ":"; + font-size: 2.2em; + position: absolute; + inset-inline-end: -9%; + font-weight: bold; + top: 37%; + color: $dateview-color; + } + + .dx-dateview-item-selected-frame { + padding-left: 20%; + } +} + +.dx-dateviewroller-minutes { + .dx-dateview-item-selected-frame { + width: 80%; + } +} + +.dx-dateview-item { + height: $fluent-dateview-roller-item-height; + line-height: $fluent-dateview-roller-item-height; + text-align: center; + font-size: 1.3em; + color: $dateview-color; +} + +.dx-dateview-item-selected { + font-size: 1.8em; + color: $base-accent; +} + +.dx-dateview-item-selected-frame { + position: absolute; + top: $fluent-dateview-roller-padding; + width: 100%; + + &::before, + &::after { + backface-visibility: hidden; + content: ""; + display: block; + width: 100%; + position: absolute; + height: $fluent-dateview-roller-padding; + } + + &::before { + top: -$fluent-dateview-roller-padding; + + @include gradient-linear($dateview-shadow-up); + } + + &::after { + top: $fluent-dateview-roller-item-height; + + @include gradient-linear($dateview-shadow-down); + } +} + +.dx-device-tablet, +.dx-device-phone { + .dx-dateview-rollers { + @include flex-container(row, nowrap); + } + + .dx-dateviewroller-month { + min-width: 4em; + } + + .dx-dateview-item { + font-size: 1.1em; + } + + .dx-dateview-item-selected { + font-size: 1.4em; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss new file mode 100644 index 000000000000..909a1dc86e73 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dateview-roller-height: 182px !default; +$fluent-dateview-roller-item-height: 40px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss new file mode 100644 index 000000000000..54536ba04aab --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -0,0 +1,31 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../loadIndicator/colors" as *; + +// adduse + +$diagram-border-color: $base-border-color !default; +$diagram-toolbar-border-color: $base-border-color !default; +$diagram-normal-format-active-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; +$diagram-default-format-active-bg: color.adjust($button-default-bg, $lightness: -10%, $space: hsl) !default; +$diagram-danger-format-active-bg: color.adjust($button-danger-bg, $lightness: -10%, $space: hsl) !default; +$diagram-success-format-active-bg: color.adjust($button-success-bg, $lightness: -10%, $space: hsl) !default; +$diagram-image-icon-base-color: null !default; +$diagram-image-icon-accent-color: null !default; +$diagram-toolbox-shape-text-opacity: null !default; + + +@if $mode == "light" { + $diagram-image-icon-base-color: $base-icon-color !default; + $diagram-image-icon-accent-color: $load-indicator-segment-bg-color !default; + $diagram-toolbox-shape-text-opacity: 0.25 !default; +} + +@if $mode == "dark" { + $diagram-image-icon-base-color: $base-border-color !default; + $diagram-image-icon-accent-color: $base-accent !default; + $diagram-toolbox-shape-text-opacity: 0.5 !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss new file mode 100644 index 000000000000..0aae29b41745 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -0,0 +1,480 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/diagram"; +@use "../../base/diagram/mixins" as *; +@use "../button/colors" as *; +@use "../overlay/colors" as *; +@use "../accordion/colors" as *; +@use "../popup/colors" as *; +@use "../speedDialAction/sizes" as *; +@use "../fieldset/sizes" as *; +@use "../fieldset/sizes" as *; +@use "../menu/colors" as *; + +// adduse + +$fluent-diagram-toolbar-icon-size: $fluent-base-icon-size; +$diagram-toolbar-colorbutton-border-width: 3px; + +$diagram-toolbox-title-size: 18px; + + +.dx-diagram { + border-color: $diagram-border-color; + + // stylelint-disable selector-class-pattern + .dxdi-control .dxdi-canvas { + background-color: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl); + + .selection-mark, + .item-selection-rect, + .item-multi-selection-rect, + .items-selection-rect, + .connector-side-mark, + .connector-point-mark, + .connector-selection, + .connector-multi-selection, + .extension-line path { + stroke: $button-default-bg; + } + + .connector-side-mark, + .extension-line text { + fill: $button-default-bg; + } + + .container-target, + .connection-target, + .connection-mark:not(.selector), + .connection-point:not(.selector) { + stroke: $button-success-bg; + } + + .connection-mark:not(.selector), + .connection-point:not(.selector) { + &.active { + fill: $button-success-bg; + } + } + + .geometry-mark { + stroke: $button-danger-bg; + } + + .dxdi-main .dxdi-image { + .dxdi-spinner { + path { + stroke: $diagram-image-icon-accent-color; + stroke-opacity: 1; + } + + ellipse { + stroke: $diagram-image-icon-base-color; + stroke-opacity: 0.5; + } + } + + .dxdi-user .dxdi-background { + fill: $diagram-image-icon-base-color; + opacity: 0.5; + } + + .dxdi-warning { + ellipse { + fill: $base-danger; + } + } + } + } + + .dxdi-control:not(.focused) .dxdi-canvas { + .selection-mark, + .geometry-mark { + stroke: #666; + } + + .item-selection-rect, + .items-selection-rect { + fill: transparent; + stroke: #666; + } + + .items-selection-rect { + fill: rgba(144, 144, 144, 0.02); + } + + .item-multi-selection-rect { + fill: rgba(144, 144, 144, 0.02); + stroke: #666; + } + + .connector-selection, + .connector-multi-selection { + stroke: #666; + } + + .connector-point-mark, + .connector-side-mark { + stroke: #666; + } + + .connector-side-mark { + fill: #666; + } + } + + .dxdi-text-input-container.connector-text .dxdi-text-input { + border-color: $button-default-bg; + } + + // stylelint-enable selector-class-pattern + + .dx-diagram-toolbar-wrapper { + border-bottom: 1px solid; + border-bottom-color: $diagram-toolbar-border-color; + } + + + &.dx-diagram-fullscreen { + background-color: $base-bg; + } +} + +.dx-diagram-toolbox-panel, +.dx-diagram-properties-panel { + background: $overlay-content-bg; +} + +.dx-diagram-floating-toolbar-container { + background: $overlay-content-bg; + box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + border-radius: $popup-border-radius; + padding: 4px; + + .dx-toolbar .dx-toolbar-items-container { + height: $diagram-floating-toolbar-items-height; + + .dx-texteditor { + .dx-texteditor-input, + .dx-placeholder::before { + color: inherit; + padding: $diagram-floating-toolbar-editor-padding; + } + + .dx-button { + width: auto; + height: auto; + min-width: 24px; + min-height: 24px; + margin: 2px; + + .dx-button-content { + padding: $diagram-floating-toolbar-editor-button-padding; + } + } + } + } + + &.dx-diagram-properties-panel-toolbar-container { + &, + .dx-toolbar, + .dx-toolbar-items-container, + .dx-toolbar-item, + .dx-button { + width: $fluent-main-fa-button-size; + height: $fluent-main-fa-button-size; + + .dx-button-content { + padding-top: 0; + padding-bottom: 0; + line-height: $fluent-main-fa-button-size; + } + } + } + + .dx-toolbar-item { + padding: 0 4px 0 0; + } +} + +.dx-diagram-toolbox-popup { + & > .dx-overlay-content { + box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + } + + .dx-popup-title { + margin-bottom: 0; + + &.dx-toolbar { + font-size: 0.8em; + min-height: $diagram-toolbox-title-size; + + .dx-toolbar-items-container { + height: $diagram-toolbox-title-size; + } + } + + .dx-button.dx-button-has-icon:not(.dx-button-has-text), + .dx-button-content { + width: $diagram-toolbox-title-size; + height: $diagram-toolbox-title-size; + } + } + + .dx-popup-content { + .dx-diagram-toolbox-input-container, + .dx-diagram-toolbox-panel, + .dx-diagram-toolbox-panel .dx-accordion { + width: $diagram-toolbox-width; + } + } + + .dx-diagram-toolbox-input-container { + border-bottom: 1px solid transparent; + } + + .dx-diagram-toolbox-input { + margin: $diagram-toolbox-input-margin; + + &.dx-editor-outlined { + &:not(.dx-state-focused) { + box-shadow: none; + } + + .dx-texteditor-buttons-container:last-child > .dx-button:last-child { + margin-right: 0; + } + } + + .dx-button { + .dx-button-content { + padding: $diagram-toolbox-input-image-padding; + } + + .dx-icon { + font-size: $diagram-toolbox-input-image-size; + } + } + } + + .dx-popup-title .dx-closebutton { + width: $diagram-toolbox-title-size; + height: $diagram-toolbox-title-size; + margin: 1px 0 0; + } + + .dx-popup-title .dx-closebutton .dx-icon { + width: 14px; + height: 14px; + padding: 2px; + font-size: 12px; + line-height: 12px; + background-position: 2px 2px; + background-size: 12px 12px; + } + + &.dx-diagram-mobile-popup { + .dx-popup-content { + padding-top: $diagram-toolbox-mobile-padding; + + .dx-diagram-toolbox-input-container { + border-top: 1px solid transparent; + } + } + } +} + +.dx-diagram-toolbox-panel { + .dx-accordion { + margin: 0; + + .dx-accordion-item { + border-left: none; + border-right: none; + border-bottom: 1px solid transparent; + border-top: none; + box-shadow: none; + } + + .dx-accordion-item-opened { + margin: 0; + } + + .dx-item-content.dx-accordion-item-title { + min-height: 32px; + } + + .dx-item-content.dx-accordion-item-body { + padding: $diagram-toolbox-accordion-v-padding $diagram-toolbox-h-padding; + } + } + + .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern + opacity: $diagram-toolbox-shape-text-opacity; + } +} + +.dx-diagram-properties-popup { + .dx-multiview-item, + &.dx-diagram-properties-popup-notabs .dx-popup-content { + padding: $diagram-properties-panel-padding; + } + + .dx-diagram-properties-panel-group-title { + text-transform: uppercase; + padding: $diagram-properties-panel-spacing; + } + + .dx-diagram-properties-panel-group-toolbar { + padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing; + + .dx-toolbar-item { + margin-bottom: math.div($diagram-properties-panel-spacing, 2); + + .dx-button { + height: auto; + } + + &.dx-diagram-lg-icon-item .dx-diagram-i { + background-size: $diagram-properties-layout-icon-size $diagram-properties-layout-icon-size; + width: $diagram-properties-layout-icon-size; + height: $diagram-properties-layout-icon-size; + } + } + } + + .dx-diagram-properties-panel-group-toolbar:first-child { + padding-top: $diagram-properties-panel-spacing; + } + + &.dx-diagram-mobile-popup { + .dx-popup-title { + padding: 8px 8px 0 0; + } + + .dx-tabpanel { + .dx-tab-selected::before { + top: 0; + bottom: initial; + } + } + } +} + +.dx-diagram-toolbar { + .dx-format-active:not(.dx-color-format):not(.dx-background-format) { + background-color: $diagram-normal-format-active-bg; + + &.dx-button-success { + background-color: $diagram-success-format-active-bg; + } + + &.dx-button-default { + background-color: $diagram-default-format-active-bg; + } + + &.dx-button-danger { + background-color: $diagram-danger-format-active-bg; + } + } + + .dx-texteditor.dx-editor-filled, + .dx-dropdowneditor.dx-editor-filled { + background-color: transparent; + + &::after { + border-bottom-color: transparent; + } + } + + .dx-diagram-toolbar-separator { + height: 50%; + border-left-color: $diagram-toolbar-border-color; + } + + .dx-diagram-toolbar-menu-separator { + border-top-color: $diagram-toolbar-border-color; + } + + .dx-diagram-toolbar-text { + padding: $fluent-field-value-top-padding 0 $fluent-field-value-bottom-padding $fluent-field-labelvalue-spacing; + } + + .dx-diagram-lg-edit-item .dx-texteditor { + width: $diagram-large-editor-width; + } + + .dx-diagram-md-edit-item .dx-texteditor { + width: $diagram-medium-editor-width; + } + + .dx-diagram-sm-edit-item .dx-texteditor { + width: $diagram-small-editor-width; + } + + .dx-diagram-color-edit-item .dx-dropdowneditor-field-before-template-wrapper { + .dx-diagram-i, + .dx-icon { + border-bottom-width: $diagram-toolbar-colorbutton-border-width; + border-bottom-style: solid; + } + } +} + +.dx-diagram-toolbar, +.dx-dropdownmenu-popup { + .dx-diagram-image-dropdown-item, + .dx-diagram-color-edit-item { + .dx-dropdowneditor-field-before-template-wrapper { + .dx-diagram-i, + .dx-icon { + margin-left: 12px; + margin-right: 12px; + } + + .dx-icon { + font-size: $fluent-diagram-toolbar-icon-size; + color: $base-text-color; + } + } + } +} + +.dx-diagram-contextmenu.dx-context-menu { + .dx-menu-item .dx-menu-item-content .dx-menu-item-popout-container { + right: 0; + } + + .dx-menu-no-icons > .dx-menu-item-wrapper > .dx-menu-item > .dx-menu-item-content .dx-menu-item-text { + padding-left: 4px; + } +} + +.dx-diagram-touchbar { + .dx-menu-item .dx-menu-item-content { + padding: $diagram-touchbar-item-padding; + } + + .dx-menu-separator { + width: 1px; + height: $fluent-diagram-toolbar-icon-size + $diagram-touchbar-item-padding + $diagram-touchbar-item-padding + 2; + margin: 0; + } +} + +@include diagram-action-icons-mixin($base-text-color, $base-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); + +.dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag { + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $popup-title-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); + + line-height: $diagram-toolbox-title-size; + background-size: $diagram-toolbox-title-size $diagram-toolbox-title-size; +} + +.dx-diagram-i-button-properties-panel-open { + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $button-default-color, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss new file mode 100644 index 000000000000..71d596b7f77c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss @@ -0,0 +1,74 @@ +@use "../sizes" as *; + +// adduse + +$diagram-toolbox-width: null !default; +$diagram-toolbox-h-padding: null !default; +$diagram-toolbox-accordion-v-padding: null !default; +$diagram-toolbox-input-h-padding: null !default; +$diagram-toolbox-input-v-padding: null !default; +$diagram-toolbox-input-image-size: null !default; +$diagram-toolbox-input-image-padding: null !default; +$diagram-toolbox-mobile-padding: null !default; +$diagram-properties-panel-padding: null !default; +$diagram-properties-panel-spacing: null !default; +$diagram-properties-layout-icon-size: null !default; +$diagram-touchbar-item-padding: null !default; +$diagram-floating-toolbar-items-height: null !default; +$diagram-floating-toolbar-editor-padding: null !default; +$diagram-floating-toolbar-editor-button-padding: null !default; +$diagram-small-editor-width: null !default; +$diagram-medium-editor-width: null !default; +$diagram-large-editor-width: null !default; + +$diagram-toolbox-input-margin: 2px !default; + +@if $size == "default" { + $diagram-toolbox-width: 156px !default; + $diagram-toolbox-h-padding: 12px !default; + $diagram-toolbox-accordion-v-padding: 8px !default; + $diagram-toolbox-input-h-padding: 9px !default; + $diagram-toolbox-input-v-padding: 12px !default; + $diagram-toolbox-input-image-size: 18px !default; + $diagram-toolbox-input-image-padding: 6px 4px !default; + $diagram-toolbox-mobile-padding: 68px !default; + + $diagram-properties-panel-padding: 0 !default; + $diagram-properties-panel-spacing: 16px !default; + $diagram-properties-layout-icon-size: 64px !default; + + $diagram-touchbar-item-padding: 10px !default; + + $diagram-floating-toolbar-items-height: 36px !default; + $diagram-floating-toolbar-editor-padding: 8px 6px !default; + $diagram-floating-toolbar-editor-button-padding: 4px !default; + + $diagram-small-editor-width: 100px !default; + $diagram-medium-editor-width: 180px !default; + $diagram-large-editor-width: 280px !default; +} + +@else if $size == "compact" { + $diagram-toolbox-width: 130px !default; + $diagram-toolbox-h-padding: 10px !default; + $diagram-toolbox-accordion-v-padding: 6px !default; + $diagram-toolbox-input-h-padding: 8px !default; + $diagram-toolbox-input-v-padding: 8px !default; + $diagram-toolbox-input-image-size: 14px !default; + $diagram-toolbox-input-image-padding: 3px 4px !default; + $diagram-toolbox-mobile-padding: 58px !default; + + $diagram-properties-panel-padding: 6px !default; + $diagram-properties-panel-spacing: 8px !default; + $diagram-properties-layout-icon-size: 48px !default; + + $diagram-touchbar-item-padding: 7px !default; + + $diagram-floating-toolbar-items-height: 28px !default; + $diagram-floating-toolbar-editor-padding: 6px 4px !default; + $diagram-floating-toolbar-editor-button-padding: 2px !default; + + $diagram-small-editor-width: 80px !default; + $diagram-medium-editor-width: 120px !default; + $diagram-large-editor-width: 220px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss new file mode 100644 index 000000000000..45572dedd676 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Shader background color +* $type color +*/ +$drawer-shader-background-color: color.change($base-shadow-color, $alpha: 0.5) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss new file mode 100644 index 000000000000..eed4027371d8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/drawer"; + +// adduse +.dx-drawer-shader { + background-color: $drawer-shader-background-color; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss new file mode 100644 index 000000000000..c26ff37b2271 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; + +// adduse +@use "../dropDownEditor"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss new file mode 100644 index 000000000000..004ba591a74d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss @@ -0,0 +1,46 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../button/mixins" as *; +@use "../button/sizes" as *; +@use "../button/colors" as *; +@use "../common/mixins" as *; +@use "../../base/dropDownButton"; +@use "../../base/dropDownButton/mixins" as *; + +// adduse + +@include dx-dropdownbutton( + $fluent-dropdownbutton-icon-spindown-size, + $fluent-dropdownbutton-action-horizontal-padding, +); + +.dx-dropdownbutton-popup-wrapper { + @include dx-dropdownlist-list-appearance(); +} + +.dx-dropdownbutton { + &:not(.dx-dropdownbutton-has-arrow) { + .dx-button-has-icon:not(.dx-button-has-text) { + @include dx-button-onlyicon-sizing(); + } + } + + &.dx-state-disabled { + opacity: 1; + } +} + +.dx-dropdownbutton-action { + &.dx-button-has-icon, + &.dx-button-has-text { + .dx-icon-spindown.dx-icon-right { + width: $fluent-dropdownbutton-icon-spindown-right-size; + height: $fluent-dropdownbutton-icon-spindown-right-size; + } + } +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss new file mode 100644 index 000000000000..3f1f76b37cd8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dropdownbutton-action-horizontal-padding: null !default; +$fluent-dropdownbutton-icon-spindown-size: null !default; +$fluent-dropdownbutton-icon-spindown-right-size: null !default; + +@if $size == "default" { + $fluent-dropdownbutton-action-horizontal-padding: 12px !default; + $fluent-dropdownbutton-icon-spindown-size: 24px; + $fluent-dropdownbutton-icon-spindown-right-size: 16px !default; +} + +@else if $size == "compact" { + $fluent-dropdownbutton-action-horizontal-padding: 8px !default; + $fluent-dropdownbutton-icon-spindown-size: 18px; + $fluent-dropdownbutton-icon-spindown-right-size: 12px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss new file mode 100644 index 000000000000..3b178aac2ed1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss @@ -0,0 +1,15 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../textEditor/colors" as *; + +// adduse + +$dropdowneditor-icon-color: $base-spin-icon-color !default; + +/** +* $name 90. Active arrow icon color +* $type color +*/ +$dropdowneditor-icon-active-color: $base-spin-icon-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss new file mode 100644 index 000000000000..25ec11e0e515 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss @@ -0,0 +1,136 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; +@use "../textEditor/sizes" as *; +@use "../button/colors" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/dropDownEditor"; +@use "../../base/dropDownEditor/mixins" as *; + +// adduse + + +$fluent-dropdowneditor-container-button-size: $fluent-base-icon-size; + +$fluent-dropdowneditor-invalid-badge-offset: + $fluent-dropdowneditor-container-button-size + + $fluent-invalid-badge-halfhorizontal-padding; + +$fluent-dropdowneditor-invalid-badge-with-clear-offset: + $fluent-dropdowneditor-container-button-size * 2 + + $fluent-invalid-badge-halfhorizontal-padding; + +$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding; + +@mixin dx-dropdowneditor-button-icon() { + width: $fluent-dropdowneditor-container-button-size; + height: 100%; + + @include dx-icon-font-centered-sizing($fluent-dropdowneditor-container-button-size); +} + +.dx-dropdowneditor-button { + width: $fluent-dropdowneditor-container-button-size; + min-width: $fluent-dropdowneditor-container-button-size; + + .dx-state-readonly & { + .dx-dropdowneditor-icon { + opacity: 1; + } + } +} + +.dx-dropdowneditor-icon { + color: $dropdowneditor-icon-color; + + @include dx-icon(spindown); + @include dx-dropdowneditor-button-icon(); +} + +.dx-dropdowneditor-input-wrapper { + .dx-texteditor { + &::before, + &::after { + content: none; + } + + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active &.dx-state-disabled, + &.dx-state-readonly, + &.dx-state-readonly.dx-state-hover, + & { + background-color: transparent; + box-shadow: none; + + &.dx-texteditor-with-floating-label, + &.dx-texteditor-with-label { + .dx-texteditor-label { + .dx-label-before, + .dx-label, + .dx-label-after { + background-color: transparent; + box-shadow: none; + } + } + } + } + } +} + +.dx-invalid, +.dx-valid, +.dx-validation-pending { + @include invalid-dropdowneditor-input-padding( + $fluent-dropdowneditor-invalid-badge-size, + $fluent-base-standard-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-horizontal-padding + ); +} + +.dx-dropdowneditor.dx-dropdowneditor-active, +.dx-dropdowneditor-button.dx-state-active { + .dx-dropdowneditor-icon { + color: $dropdowneditor-icon-active-color; + opacity: 1; + + @include dx-icon(spinup); + @include dx-dropdowneditor-button-icon(); + } +} + +.dx-invalid.dx-dropdowneditor, +.dx-valid.dx-dropdowneditor { + .dx-texteditor-buttons-container { + &::after { + inset-inline-end: $fluent-dropdowneditor-invalid-badge-offset; + } + } + + &.dx-show-clear-button:not(.dx-texteditor-empty) { + .dx-texteditor-buttons-container { + &::after { + inset-inline-end: $fluent-dropdowneditor-invalid-badge-with-clear-offset; + } + } + } +} + +.dx-dropdowneditor-overlay { + &.dx-popup-wrapper { + .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + overflow: hidden; + } + } + + .dx-list-group-header, + .dx-list-item-content, + .dx-list-select-all-label { + font-size: $fluent-dropdowneditor-list-font-size; + line-height: $fluent-dropdowneditor-list-line-height; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss new file mode 100644 index 000000000000..6de961b10942 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss @@ -0,0 +1,17 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dropdowneditor-list-font-size: null !default; +$fluent-dropdowneditor-list-line-height: null !default; + + +@if $size == "default" { + $fluent-dropdowneditor-list-font-size: 14px !default; + $fluent-dropdowneditor-list-line-height: 20px !default; +} + +@else if $size == "compact" { + $fluent-dropdowneditor-list-font-size: 13px !default; + $fluent-dropdowneditor-list-line-height: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss new file mode 100644 index 000000000000..94e41665cc27 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss @@ -0,0 +1,15 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/dropDownList"; + +// adduse +@use "../dropDownEditor"; + + +.dx-dropdownlist-popup-wrapper { + @include dx-dropdownlist-list-appearance(); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss new file mode 100644 index 000000000000..b762c89e5c5e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss @@ -0,0 +1,20 @@ +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../../base/dropDownMenu"; + +// adduse + +.dx-dropdownmenu-popup-wrapper { + .dx-toolbar-menu-section { + display: flex; + flex-direction: column; + row-gap: $fluent-dropdownmenu-section-row-gap; + margin-inline: $fluent-dropdownmenu-section-horizontal-margin; + } + + .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss new file mode 100644 index 000000000000..e3b9ae305c11 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dropdownmenu-section-horizontal-margin: 4px !default; +$fluent-dropdownmenu-section-row-gap: 2px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss new file mode 100644 index 000000000000..0868bb4f0078 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss @@ -0,0 +1,12 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Label text color +* $type color +*/ +$fieldset-field-label-color: $base-text-color !default; +$fieldset-field-value-invalid-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss new file mode 100644 index 000000000000..260d5d323a57 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss @@ -0,0 +1,145 @@ +@use "sass:math"; +@use "sass:color"; +@use "sass:selector"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../typography/mixins" as *; +@use "../form/sizes" as *; +@use "../checkBox/sizes" as *; +@use "../switch/sizes" as *; +@use "../slider/sizes" as *; +@use "../../base/fieldset"; + +// adduse + +@mixin dx-fieldset-styling() { + .dx-field { + @include dx-base-typography(); + } + + .dx-field-label { + color: $fieldset-field-label-color; + font-size: $fluent-form-label-font-size; + cursor: default; + + i { + font-style: normal; + } + } + + .dx-field-value { + &.dx-attention { + color: $fieldset-field-value-invalid-color; + padding-left: $fluent-fieldset-attention-icon-offset; + + &::before { + @include dx-invalid-fluent-badge(); + } + } + } + + .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button), + .dx-field-value-static { + width: 60%; + } +} + +@mixin dx-field-value-widget-position($name, $size) { + &.#{$name}, + &:not(.dx-widget) > .#{$name} { + margin: math.div($fluent-field-min-height - $size, 2) 0; + } +} + +// TODO: merge with .dx-fieldset-sizing after removing scope .dx-device-phone +@mixin dx-fieldset-sizing-base() { + .dx-field { + padding: 0; + display: flex; + } + + .dx-field-label { + align-self: center; + padding-right: $fluent-field-labelvalue-spacing; + } + + .dx-field-value { + &.dx-widget, + &:not(.dx-widget) > .dx-widget { + margin: 0; + } + + &:not(.dx-widget) { + & > .dx-button, + & > .dx-checkbox, + & > .dx-switch { + float: right; + } + } + + @include dx-field-value-widget-position(dx-checkbox, $fluent-checkbox-icon-font-size); + @include dx-field-value-widget-position(dx-switch, $fluent-switch-height); + @include dx-field-value-widget-position(dx-slider, $fluent-slider-height); + @include dx-field-value-widget-position(dx-radiogroup, $fluent-radiogroup-min-height); + + &.dx-attention { + padding: $fluent-field-value-top-padding $fluent-field-value-horizontal-padding $fluent-field-value-bottom-padding; + position: relative; + padding-left: $fluent-fieldset-attention-icon-offset; + + &::before { + left: 0; + } + } + } + + .dx-field-value-static { + padding: $fluent-field-value-top-padding $fluent-field-value-horizontal-padding $fluent-field-value-bottom-padding; + } +} + +@mixin dx-fieldset-sizing($vertical-margin, $horizontal-margin, $header-vertical-margin, $field-vertical-margin) { + .dx-fieldset { + margin: $vertical-margin $horizontal-margin; + padding: 0; + + @at-root #{selector.append(".dx-rtl", &)}, + .dx-rtl & { + .dx-field-value { + &:not(.dx-widget) { + & > .dx-button, + & > .dx-checkbox, + & > .dx-switch { + float: left; + } + } + } + } + } + + .dx-fieldset-header { + margin: 0 0 $header-vertical-margin 0; + + @include dx-s-font-mixin(); + } + + .dx-field { + margin: 0 0 $field-vertical-margin 0; + } + + .dx-field:last-of-type { + margin: 0; + } +} + +@include dx-fieldset-styling(); +@include dx-fieldset-sizing-base(); +@include dx-fieldset-sizing( + $fluent-fieldset-vertical-margin, + $fluent-fieldset-horizontal-margin, + $fluent-fieldset-header-vertical-margin, + $fluent-field-vertical-margin +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss new file mode 100644 index 000000000000..92be9dc5e04d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss @@ -0,0 +1,33 @@ +@use "../sizes" as *; +@use "../common/sizes" as *; + +// adduse + +$fluent-fieldset-vertical-margin: null !default; +$fluent-fieldset-horizontal-margin: null !default; +$fluent-fieldset-header-vertical-margin: null !default; +$fluent-field-vertical-margin: null !default; +$fluent-field-labelvalue-spacing: null !default; + +@if $size == "default" { + $fluent-fieldset-vertical-margin: 30px !default; + $fluent-fieldset-horizontal-margin: 20px !default; + $fluent-fieldset-header-vertical-margin: 20px !default; + $fluent-field-vertical-margin: 30px !default; + $fluent-field-labelvalue-spacing: 15px !default; +} + +@else if $size == "compact" { + $fluent-fieldset-vertical-margin: 20px !default; + $fluent-fieldset-horizontal-margin: 16px !default; + $fluent-fieldset-header-vertical-margin: 16px !default; + $fluent-field-vertical-margin: 20px !default; + $fluent-field-labelvalue-spacing: 12px !default; +} + +$fluent-field-min-height: $fluent-base-inline-widget-height !default; +$fluent-field-value-top-padding: 21px !default; +$fluent-field-value-horizontal-padding: $fluent-base-inline-horizontal-padding !default; +$fluent-field-value-bottom-padding: 20px !default; +$fluent-fieldset-attention-icon-offset: $fluent-base-inline-horizontal-padding + $fluent-invalid-badge-size !default; +$fluent-radiogroup-min-height: 26px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss new file mode 100644 index 000000000000..5f5632bca69f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss @@ -0,0 +1,34 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$filemanager-border-color: $base-border-color !default; +$filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; +$filemanager-editor-active-bg: color.change($base-text-color, $alpha: 0.1) !default; +$filemanager-dirs-tree-item-focus-color: $base-text-color !default; +$filemanager-breadcrumbs-item-focus-bg: $base-border-color !default; +$filemanager-breadcrumbs-item-focus-color: $base-text-color !default; +$filemanager-custom-thumbnail-color: $base-border-color !default; +$filemanager-file-item-select-color: $base-bg !default; +$filemanager-file-item-select-bg: color.change($base-accent, $alpha: 0.8) !default; +$filemanager-file-item-select-focus-color: $base-bg !default; +$filemanager-file-item-select-focus-bg: color.change($base-accent, $alpha: 0.7) !default; +$filemanager-file-item-hover-bg: $base-hover-bg !default; +$filemanager-file-item-focused-border: $base-accent !default; +$filemanager-item-focused-color: $base-inverted-text-color !default; +$filemanager-dirs-tree-item-focus-bg: null !default; +$filemanager-progressbox-shadow-color: null !default; + + +@if $mode == "light" { + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; + $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; +} + +@if $mode == "dark" { + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; + $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss new file mode 100644 index 000000000000..8e1ce8b4c1db --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss @@ -0,0 +1,262 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/fileManager"; +@use "../../base/fileManager/mixins" as *; + +// adduse +@use "../splitterBar"; + + +.dx-filemanager { + border-color: $filemanager-border-color; + + .dx-filemanager-notification-common { + border-color: $filemanager-border-color; + color: $base-danger; + } + + .dx-drawer-shrink .dx-filemanager-progress-panel { + border-left-color: $filemanager-border-color; + } + + .dx-filemanager-progress-panel { + background-color: $base-bg; + + .dx-filemanager-progress-panel-title { + padding-top: $filemanager-progress-panel-title-padding; + padding-bottom: $filemanager-progress-panel-title-padding; + } + } + + .dx-filemanager-progress-box-image { + width: $fluent-base-icon-size * 2; + height: $fluent-base-icon-size * 2; + font-size: $fluent-base-icon-size * 2; + } + + .dx-filemanager-progress-box-error { + color: $base-inverted-text-color; + background: $base-danger; + } + + .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button { + margin-top: $filemanager-progress-box-button-close-margin-top; + } + + .dx-filemanager-toolbar { + padding: 0 10px; + background: $base-bg; + min-height: $filemanager-toolbar-height; + + &.dx-filemanager-file-toolbar, + &.dx-filemanager-file-toolbar .dx-toolbar { + background: $filemanager-file-toolbar-bg; + } + + .dx-filemanager-toolbar-separator-item { + height: $filemanager-toolbar-separator-height; + background: $filemanager-border-color; + } + + .dx-filemanager-toolbar-viewmode-item .dx-texteditor { + width: $filemanager-toolbar-viewmode-width; + } + + .dx-texteditor.dx-editor-filled { + background: transparent; + + &.dx-state-hover, + &.dx-state-active, + &.dx-state-focused { + background: $filemanager-editor-active-bg; + } + + &.dx-dropdowneditor { + border-color: transparent; + + .dx-dropdowneditor-icon { + background: transparent; + } + + &.dx-state-hover .dx-dropdowneditor-icon, + &.dx-state-active .dx-dropdowneditor-icon { + background: transparent; + border-color: transparent; + } + } + } + + .dx-toolbar .dx-filemanager-toolbar-viewmode-item .dx-button-content { + padding-left: $filemanager-toolbar-viewmode-padding; + padding-right: $filemanager-toolbar-viewmode-padding; + } + } + + .dx-filemanager-fileuploader-dropzone-placeholder { + border: 2px solid; + border-color: $base-accent; + } + + .dx-filemanager-container { + border-top-color: $filemanager-border-color; + } + + .dx-filemanager-dirs-panel { + border-right-color: $filemanager-border-color; + } + + .dx-filemanager-breadcrumbs { + border-bottom-color: $filemanager-border-color; + + .dx-menu-item { + &.dx-state-focused { + background: $filemanager-breadcrumbs-item-focus-bg; + color: $filemanager-breadcrumbs-item-focus-color; + } + } + + .dx-menu-item-content { + padding-top: $filemanager-breadcrumbs-item-padding-top; + padding-bottom: $filemanager-breadcrumbs-item-padding-bottom; + } + + .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content { + background: $filemanager-border-color; + } + + .dx-filemanager-breadcrumbs-separator-item, + .dx-filemanager-breadcrumbs-path-separator-item { + &.dx-state-hover { + background: transparent; + } + } + } + + .dx-filemanager-thumbnails .dx-filemanager-thumbnails-item { + &.dx-item-selected { + color: $filemanager-file-item-select-color; + background: $filemanager-file-item-select-bg; + } + + &.dx-state-hover:not(.dx-state-focused):not(.dx-item-selected) { + background: $filemanager-file-item-hover-bg; + } + + &.dx-state-focused { + border: 1px solid; + border-color: $filemanager-file-item-focused-border; + } + + &.dx-item-selected.dx-state-focused { + color: $filemanager-file-item-select-focus-color; + background: $filemanager-file-item-select-focus-bg; + } + + .dx-filemanager-thumbnails-item-thumbnail { + width: $fluent-base-icon-size * 2; + height: $fluent-base-icon-size * 2; + font-size: $fluent-base-icon-size * 2; + } + + .dx-filemanager-item-custom-thumbnail { + color: $filemanager-custom-thumbnail-color; + } + } + + .dx-filemanager-files-view { + background: $base-bg; + + &.dx-filemanager-details { + .dx-filemanager-details-item-thumbnail { + font-size: $fluent-base-icon-size; + width: $fluent-base-icon-size; + height: $fluent-base-icon-size; + } + + .dx-datagrid .dx-datagrid-content .dx-datagrid-table { + .dx-command-select { + padding: 0; + width: $filemanager-details-view-checkbox-column-width; + min-width: $filemanager-details-view-checkbox-column-width; + max-width: $filemanager-details-view-checkbox-column-width; + } + + .dx-filemanager-details-item-is-directory { + padding-right: 0 !important; // stylelint-disable-line declaration-no-important + padding-left: 0 !important; // stylelint-disable-line declaration-no-important + } + } + + .dx-row-focused .dx-filemanager-file-actions-button .dx-button .dx-icon { + color: $filemanager-item-focused-color; + } + } + } + + .dx-filemanager-details { + .dx-filemanager-details-item-name-wrapper { + align-items: center; + } + } +} + +.dx-filemanager-dirs-tree.dx-treeview { + .dx-treeview-item { + padding-top: $filemanager-treeview-item-top-bottom-padding; + padding-bottom: $filemanager-treeview-item-top-bottom-padding; + } + + .dx-state-focused > .dx-treeview-item { + background: transparent; + + &.dx-state-hover { + background: $filemanager-dirs-tree-item-focus-bg; + } + + & * { + color: $filemanager-dirs-tree-item-focus-color; + } + } + + .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item { + background: $filemanager-dirs-tree-item-focus-bg; + + & * { + color: $filemanager-dirs-tree-item-focus-color; + } + } +} + +.dx-filemanager-view-switcher-popup { + width: 2 * $filemanager-toolbar-viewmode-padding + $fluent-base-icon-size; + + .dx-dropdownbutton-popup-wrapper.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { + padding-left: $filemanager-toolbar-viewmode-padding - 1px; + padding-right: $filemanager-toolbar-viewmode-padding; + text-overflow: clip; + } +} + +.dx-filemanager-dirs-tree.dx-treeview .dx-filemanager-file-actions-button .dx-button .dx-button-content { + padding: 0; +} + +.dx-filemanager-file-actions-button { + .dx-button { + min-width: $filemanager-file-actions-button-size; + height: $filemanager-file-actions-button-size; + + .dx-button-content { + padding: $filemanager-file-actions-button-top-bottom-padding 6px; + } + } +} + +.dx-filemanager-context-menu .dx-menu-item-has-text:not(.dx-menu-item-has-icon) .dx-menu-item-text { + margin-left: $filemanager-contextmenu-text-item-left-margin; +} + +@include filemanager-icons-mixin($base-text-color, $base-success, $base-inverted-text-color, $base-danger, $base-inverted-text-color, $filemanager-large-icon-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss new file mode 100644 index 000000000000..201671360267 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss @@ -0,0 +1,53 @@ +@use "../sizes" as *; + +// adduse +@use "../toolbar/sizes" as *; + +$filemanager-toolbar-separator-height: null !default; +$filemanager-toolbar-viewmode-width: null !default; +$filemanager-toolbar-viewmode-padding: null !default; +$filemanager-breadcrumbs-item-padding-top: null !default; +$filemanager-breadcrumbs-item-padding-bottom: null !default; +$filemanager-details-view-checkbox-column-width: null !default; +$filemanager-file-actions-button-size: null !default; +$filemanager-treeview-item-top-bottom-padding: null !default; +$filemanager-file-actions-button-top-bottom-padding: null !default; +$filemanager-contextmenu-text-item-left-margin: null !default; +$filemanager-large-icon-size: null !default; +$filemanager-progress-panel-title-padding: null !default; +$filemanager-progress-box-button-close-margin-top: null !default; + +$filemanager-toolbar-height: $fluent-toolbar-height; + +@if $size == "default" { + $filemanager-toolbar-separator-height: 36px !default; + $filemanager-toolbar-viewmode-width: 190px !default; + $filemanager-toolbar-viewmode-padding: 6px !default; + $filemanager-breadcrumbs-item-padding-top: 7px !default; + $filemanager-breadcrumbs-item-padding-bottom: 8px !default; + $filemanager-details-view-checkbox-column-width: 49px !default; + $filemanager-file-actions-button-size: 28px !default; + $filemanager-treeview-item-top-bottom-padding: 11px !default; + $filemanager-file-actions-button-top-bottom-padding: 2px !default; + $filemanager-contextmenu-text-item-left-margin: 48px !default; + $filemanager-large-icon-size: 22px !default; + $filemanager-progress-panel-title-padding: 16px !default; + $filemanager-progress-box-button-close-margin-top: 6px !default; +} + +@else if $size == "compact" { + $filemanager-toolbar-separator-height: 26px !default; + $filemanager-toolbar-viewmode-width: 150px !default; + $filemanager-toolbar-viewmode-padding: 5px !default; + $filemanager-breadcrumbs-item-padding-top: 8px !default; + $filemanager-breadcrumbs-item-padding-bottom: 9px !default; + $filemanager-details-view-checkbox-column-width: 43px !default; + $filemanager-file-actions-button-size: 22px !default; + $filemanager-treeview-item-top-bottom-padding: 8px !default; + $filemanager-file-actions-button-top-bottom-padding: 9px !default; + $filemanager-contextmenu-text-item-left-margin: 30px !default; + $filemanager-large-icon-size: 16px !default; + $filemanager-progress-panel-title-padding: 10px !default; + $filemanager-progress-box-button-close-margin-top: 5px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss new file mode 100644 index 000000000000..4ced7be208c3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss @@ -0,0 +1,26 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. File name text color +* $type color +*/ +$fileuploader-filename-color: $base-text-color !default; +$fileuploader-file-icon-color: $base-icon-color !default; +$fileuploader-progressbar-status-color: $base-text-color !default; +$fluent-fileuploader-files-container-bg-color: $base-bg !default; + +/** +* $name 20. File status text color +* $type color +*/ +$fileuploader-falename-status-color: $base-label-color !default; + +/** +* $name 30. Drag-and-drop border color +* $type color +*/ +$fileuploader-border-color: $base-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss new file mode 100644 index 000000000000..4c703762a455 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss @@ -0,0 +1,200 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/fileUploader"; + +// adduse + +$fluent-fileuploader-file-wrapper-border-size: 3px; +$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1); + +.dx-fileuploader-wrapper { + padding: $fluent-fileuploader-vertical-padding; +} + +.dx-fileuploader-content > .dx-fileuploader-upload-button { + margin-left: 3px; + margin-right: 3px; +} + +.dx-fileuploader-input-wrapper { + padding: $fluent-fileuploader-vertical-padding 0 $fluent-fileuploader-vertical-padding; + border: $fluent-fileuploader-file-wrapper-border-size dashed transparent; +} + +.dx-fileuploader.dx-state-disabled .dx-fileuploader-input-label { + position: relative; +} + +.dx-fileuploader-dragover { + .dx-fileuploader-input-wrapper { + border: none; + padding: 0; + + .dx-fileuploader-button { + display: none; + } + } + + .dx-fileuploader-input-label { + text-align: center; + } + + .dx-fileuploader-input-container { + display: block; + width: 100%; + } + + .dx-fileuploader-input { + display: block; + width: 100%; + padding-top: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size; + padding-right: $fluent-fileuploader-file-wrapper-border-size; + + // NOTE: height of the widget should be the same in default and drag over states, but not with margin help + padding-bottom: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size + 1px; + padding-left: $fluent-fileuploader-file-wrapper-border-size; + box-sizing: content-box; + } + + .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors + padding: $fluent-fileuploader-vertical-padding * 2 $fluent-fileuploader-vertical-padding + 2px; + border: $fluent-fileuploader-file-wrapper-border-size dashed; + border-color: $fileuploader-border-color; + } +} + +.dx-fileuploader-file-status-message, +.dx-fileuploader-file-size { + color: $fileuploader-falename-status-color; +} + +.dx-fileuploader-input { + padding: $fluent-fileuploader-vertical-padding 0; +} + +.dx-fileuploader-input-label { + padding: $fluent-fileuploader-vertical-padding + math.div(math.div($fluent-base-font-size, 2) - $fluent-fileuploader-vertical-padding, 2) + 1px $fluent-fileuploader-vertical-padding + 2px; + color: $fileuploader-filename-color; + + @include dx-overflow(); +} + +.dx-fileuploader-files-container { + .dx-fileuploader-show-file-list & { + padding: $fluent-fileuploader-files-container-padding; + } + + .dx-fileuploader-empty & { + padding: 0; + } + + .dx-invalid & { + padding-top: 50px; + } + + .dx-fileuploader-button .dx-button-content { + padding: 0; + } + + .dx-fileuploader-file-container { + padding: $fluent-fileuploader-file-container-padding; + margin-bottom: 4px; + border-radius: $fluent-fileuploader-files-container-rounding; + background-color: $fluent-fileuploader-files-container-bg-color; + box-shadow: $fluent-fileuploader-file-container-boxshadow; + + .dx-fileuploader-button-container + .dx-fileuploader-button-container { + .dx-button { + margin-right: $fluent-fileuploader-file-container-text-margin; + + .dx-rtl & { + margin-left: $fluent-fileuploader-file-container-text-margin; + margin-right: 0; + } + } + } + + .dx-fileuploader-button-container { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .dx-button { + height: $fluent-fileuploader-file-container-button-size; + width: $fluent-fileuploader-file-container-button-size; + margin-right: $fluent-fileuploader-file-container-button-margin; + + &.dx-fileuploader-cancel-button-position-end { + margin-right: 0; + margin-left: $fluent-fileuploader-file-cancel-button-margin-left; + } + + .dx-rtl & { + margin-left: $fluent-fileuploader-file-container-button-margin; + margin-right: 0; + + &.dx-fileuploader-cancel-button-position-end { + margin-left: 0; + margin-right: $fluent-fileuploader-file-cancel-button-margin-left; + } + } + } + } +} + +.dx-fileuploader .dx-progressbar-status { + color: $fileuploader-progressbar-status-color; +} + +.dx-fileuploader-file { + display: block; + padding-top: 5px; + line-height: 13px; +} + +.dx-fileuploader-file-icon { + color: $fileuploader-file-icon-color; + font-size: $fluent-fileuploader-file-icon-font-size; +} + +.dx-fileuploader-file-name { + padding-bottom: math.div($fluent-fileuploader-vertical-padding, 2); + color: $fileuploader-filename-color; + font-weight: 500; +} + +.dx-fileuploader-file-size { + float: right; + padding: $fluent-fileuploader-file-size-margin; + color: $base-label-color; +} + +.dx-fileuploader-invalid { + .dx-fileuploader-file-status-message { + color: $base-danger; + + span { + &:first-child { + margin-top: 2px; + } + + &:last-child { + margin-bottom: 2px; + } + } + } + + .dx-fileuploader-button-container { + vertical-align: middle; + } + + .dx-fileuploader-cancel-button { + margin-top: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss new file mode 100644 index 000000000000..5dcc5c5f83c3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-fileuploader-file-container-padding: null !default; +$fluent-fileuploader-file-container-text-margin: null !default; +$fluent-fileuploader-file-container-button-margin: null !default; +$fluent-fileuploader-file-cancel-button-margin-left: 4px !default; +$fluent-fileuploader-file-container-button-size: null !default; + +$fluent-fileuploader-vertical-padding: 7px !default; +$fluent-fileuploader-files-container-padding: null !default; +$fluent-fileuploader-file-size-margin: null !default; +$fluent-fileuploader-file-icon-font-size: null !default; +$fluent-fileuploader-files-container-rounding: 4px !default; + +@if $size == "default" { + $fluent-fileuploader-file-container-padding: 5px 8px !default; + $fluent-fileuploader-file-container-text-margin: 15px !default; + $fluent-fileuploader-file-container-button-margin: 8px !default; + $fluent-fileuploader-file-container-button-size: 32px !default; + $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 0 4px !default; + $fluent-fileuploader-file-icon-font-size: 20px !default; +} + +@else if $size == "compact" { + $fluent-fileuploader-file-container-padding: 2px 4px !default; + $fluent-fileuploader-file-container-text-margin: 6px !default; + $fluent-fileuploader-file-container-button-margin: 2px !default; + $fluent-fileuploader-file-container-button-size: 28px !default; + $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 4px !default; + $fluent-fileuploader-file-icon-font-size: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss new file mode 100644 index 000000000000..7861e617a4b3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss @@ -0,0 +1,77 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$filterbuilder-bg: $base-bg !default; + +/** +* $name 10. Text color +* $type color +*/ +$filterbuilder-text-color: $base-text-color !default; + +/** +* $name 20. Focused text color +* $type color +*/ +$filterbuilder-text-focus-color: null !default; + +/** +* $name 30. Plus icon color +* $type color +*/ +$filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.7) !default; +$filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; +$filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; + +/** +* $name 40. Remove icon color +* $type color +*/ +$filterbuilder-remove-icon-color: color.change($base-danger, $alpha: 0.7) !default; +$filterbuilder-remove-icon-hover-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; +$filterbuilder-remove-icon-focus-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; + +/** +* $name 50. Group operation button color +* $type color +*/ +$filterbuilder-group-operation-color: color.change($base-danger, $alpha: 0.3) !default; +$filterbuilder-group-operation-hover-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.2) !default; +$filterbuilder-group-operation-focus-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.7) !default; + +/** +* $name 60. Data field button color +* $type color +*/ +$filterbuilder-item-field-color: color.change($base-accent, $alpha: 0.3) !default; +$filterbuilder-item-field-hover-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.2) !default; +$filterbuilder-item-field-focus-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.7) !default; + +/** +* $name 70. Operation button color +* $type color +*/ +$filterbuilder-item-operator-color: color.change($base-success, $alpha: 0.3) !default; +$filterbuilder-item-operator-hover-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.2) !default; +$filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.7) !default; + +/** +* $name 80. Value button color +* $type color +*/ +$filterbuilder-item-value-color: color.change($base-icon-color, $alpha: 0.24) !default; +$filterbuilder-item-value-hover-color: color.change($base-icon-color, $alpha: 0.32) !default; +$filterbuilder-item-value-focus-color: $base-icon-color !default; +$filterbuilder-menu-icon-color: $base-text-color !default; + + +@if $mode == "light" { + $filterbuilder-text-focus-color: #fff !default; +} + +@if $mode == "dark" { + $filterbuilder-text-focus-color: #000 !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss new file mode 100644 index 000000000000..07f5f8837a22 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss @@ -0,0 +1,127 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; +@use "../../base/filterBuilder" as * with ( + $filterbuilder-bg: $filterbuilder-bg, + $filterbuilder-text-color: $filterbuilder-text-color, + $filterbuilder-text-focus-color: $filterbuilder-text-focus-color, + $filterbuilder-group-operation-color: $filterbuilder-group-operation-color, + $filterbuilder-group-operation-hover-color: $filterbuilder-group-operation-hover-color, + $filterbuilder-group-operation-focus-color: $filterbuilder-group-operation-focus-color, + $filterbuilder-item-operator-color: $filterbuilder-item-operator-color, + $filterbuilder-item-operator-hover-color: $filterbuilder-item-operator-hover-color, + $filterbuilder-item-operator-focus-color: $filterbuilder-item-operator-focus-color, + $filterbuilder-item-field-color: $filterbuilder-item-field-color, + $filterbuilder-item-field-hover-color: $filterbuilder-item-field-hover-color, + $filterbuilder-item-field-focus-color: $filterbuilder-item-field-focus-color, + $filterbuilder-item-value-color: $filterbuilder-item-value-color, + $filterbuilder-item-value-hover-color: $filterbuilder-item-value-hover-color, + $filterbuilder-item-value-focus-color: $filterbuilder-item-value-focus-color, + $filterbuilder-plus-icon-color: $filterbuilder-plus-icon-color, + $filterbuilder-plus-icon-hover-color: $filterbuilder-plus-icon-hover-color, + $filterbuilder-plus-icon-focus-color: $filterbuilder-plus-icon-focus-color, + $filterbuilder-remove-icon-color: $filterbuilder-remove-icon-color, + $filterbuilder-remove-icon-hover-color: $filterbuilder-remove-icon-hover-color, + $filterbuilder-remove-icon-focus-color: $filterbuilder-remove-icon-focus-color, + $filterbuilder-menu-icon-color: $filterbuilder-menu-icon-color, +); +@use "../textEditor/colors" as *; + +// adduse + + +.dx-filterbuilder { + .dx-filterbuilder-action-icon { + font-size: 21px; + } + + .dx-filterbuilder-group { + .dx-filterbuilder-group-item { + .dx-filterbuilder-action.dx-filterbuilder-action-icon { + padding: $fluent-filterbuilder-icon-padding; + vertical-align: middle; + } + } + } + + .dx-filterbuilder-item-value { + .dx-editor-filled, + .dx-editor-outlined { + .dx-texteditor-input { + padding: $fluent-filterbuilder-filled-editor-padding; + } + } + } + + .dx-filterbuilder-text, + .dx-filterbuilder-item-value-text { + border-radius: 5px; + } +} + +.dx-filterbuilder-range-separator { + color: $texteditor-color; +} + +.dx-filterbuilder-overlay { + &.dx-popup-wrapper > .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + } + + &.dx-filterbuilder-operations { + .dx-rtl { + .dx-treeview-item { + padding-right: $fluent-filterbuilder-treeview-item-left-padding; + } + } + } + + .dx-treeview-node { + .dx-treeview-node-container-opened { + margin-left: $fluent-filterbuilder-treeview-item-left-padding; + } + } + + .dx-treeview-item { + padding: $fluent-filterbuilder-treeview-item-padding; + min-height: $fluent-filterbuilder-treeview-item-min-heigth; + + .dx-icon { + margin-right: 10px; + } + } + + .dx-treeview-toggle-item-visibility { + left: $fluent-filterbuilder-treeview-toggle-left; + } + + .dx-rtl { + .dx-treeview-node { + > .dx-treeview-item { + padding-right: $fluent-filterbuilder-treeview-item-left-padding * 2; + } + + &.dx-treeview-node-is-leaf > .dx-treeview-item { + padding-right: $fluent-filterbuilder-treeview-item-left-padding; + } + + .dx-treeview-node-container-opened { + margin-right: $fluent-filterbuilder-treeview-item-left-padding; + margin-left: 0; + } + } + + .dx-treeview-item { + .dx-icon { + margin-left: 10px; + } + } + + .dx-treeview-toggle-item-visibility { + right: 16px; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss new file mode 100644 index 000000000000..2f9224d4db40 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss @@ -0,0 +1,29 @@ +@use "../sizes" as *; + +// adduse + +$fluent-filterbuilder-icon-padding: null !default; +$fluent-filterbuilder-filled-editor-padding: null !default; +$fluent-filterbuilder-treeview-item-left-padding: null !default; +$fluent-filterbuilder-treeview-item-padding: null !default; +$fluent-filterbuilder-treeview-toggle-left: null !default; +$fluent-filterbuilder-treeview-item-min-heigth: null !default; + +@if $size == "default" { + $fluent-filterbuilder-icon-padding: 8px !default; + $fluent-filterbuilder-filled-editor-padding: 13px 12px !default; + + $fluent-filterbuilder-treeview-item-left-padding: 12px !default; + $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-treeview-toggle-left: 16px !default; + $fluent-filterbuilder-treeview-item-min-heigth: 32px !default; +} + +@else if $size == "compact" { + $fluent-filterbuilder-icon-padding: 4px !default; + $fluent-filterbuilder-filled-editor-padding: 8px 8px !default; + $fluent-filterbuilder-treeview-item-left-padding: 4px !default; + $fluent-filterbuilder-treeview-item-padding: 4px 12px 4px $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-treeview-toggle-left: 0 !default; + $fluent-filterbuilder-treeview-item-min-heigth: 24px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss new file mode 100644 index 000000000000..ef8a1f3bac79 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss @@ -0,0 +1,34 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Label text color +* $type color +*/ +$form-field-item-color: null !default; +$form-item-help-text-color: $base-label-color !default; + +/** +* $name 20. Group border color +* $type color +*/ +$form-group-border-color: $base-border-color !default; +$form-field-required-color: $form-field-item-color !default; +$form-field-mark-color: $form-field-item-color !default; + +@if $mode == "light" { + @if $color == "blue" { + $form-field-item-color: $base-text-color !default; + } + + @if $color == "saas" { + $form-field-item-color: $base-label-color !default; + } +} + +@if $mode == "dark" { + $form-field-item-color: $base-text-color !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss new file mode 100644 index 000000000000..7de005954a02 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss @@ -0,0 +1,131 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/form"; +@use "../../base/icon_fonts" as *; + +// adduse +@use "../scrollable"; + + +.dx-form-group-caption { + font-size: $fluent-form-group-caption-font-size; +} + +.dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors + & > .dx-form-group-content { + border-top: 1px solid; + border-top-color: $form-group-border-color; + padding-bottom: $fluent-form-group-content-bottom-padding; + padding-top: $fluent-form-group-caption-top-padding; + margin-top: $fluent-form-group-caption-bottom-margin; + } +} + +.dx-layout-manager { + .dx-field-item { + &:not(.dx-last-col) { + padding-inline-end: $fluent-form-layout-manager-horizontal-padding; + } + + &:not(.dx-first-col) { + padding-inline-start: $fluent-form-layout-manager-horizontal-padding; + } + + &:not(.dx-first-row) { + padding-top: $fluent-form-layout-manager-vertical-padding; + } + + padding-bottom: $fluent-form-layout-manager-vertical-padding; + font-size: $fluent-form-label-font-size; + + .dx-field-item { + &.dx-last-row { + padding-bottom: 0; + } + } + } + + .dx-tabpanel .dx-multiview-item-content { + padding: $fluent-form-layout-manager-tabpanel-content-padding; + } +} + +.dx-form > .dx-layout-manager.dx-layout-manager-one-col { + .dx-field-item { + .dx-field-item.dx-last-row:not(.dx-last-col) { + padding-bottom: $fluent-form-layout-manager-vertical-padding; + } + } +} + +.dx-field-item { + &:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) { + padding-top: $fluent-form-default-top-padding; + } + + .dx-switch { + vertical-align: middle; + } +} + +.dx-field-item-content-wrapper.dx-invalid { + .dx-field-item-help-text { + color: transparent; + } +} + +.dx-field-item-label-location-top { + padding: $fluent-form-top-label-padding; + margin-bottom: $fluent-form-top-label-bottom-margin; + + .dx-form-styling-mode-underlined & { + padding-left: 0; + padding-right: 0; + } +} + +.dx-field-item-label-text { + color: $form-field-item-color; +} + +.dx-field-item-help-text { + color: $form-item-help-text-color; + padding-top: 2px; + font-size: $fluent-form-help-text-font-size; + font-style: normal; + + .dx-form-styling-mode-underlined & { + padding-left: 0; + padding-right: 0; + } +} + +.dx-field-item-optional .dx-label > span::after, +.dx-field-item-optional-mark { + color: $form-field-mark-color; +} + +.dx-field-item-required .dx-label > span::after, +.dx-field-item-required-mark { + color: $form-field-required-color; +} + +.dx-field-item-custom-label-content { + .dx-icon { + @include dx-icon-sizing($fluent-form-label-icon-size); + @include dx-icon-margin(math.div($fluent-base-icon-size, 3)); + } +} + +.dx-form-group-custom-caption { + font-size: $fluent-form-group-caption-font-size; + + .dx-icon { + @include dx-icon-sizing($fluent-base-icon-size); + @include dx-icon-margin($fluent-form-group-custom-caption-icon-margin); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss new file mode 100644 index 000000000000..4eabd6d030f2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss @@ -0,0 +1,45 @@ +@use "../sizes" as *; + +// adduse + +$fluent-form-group-caption-bottom-margin: null !default; +$fluent-form-group-caption-top-padding: null !default; +$fluent-form-group-content-bottom-padding: null !default; +$fluent-form-group-caption-font-size: null !default; +$fluent-form-top-label-padding: 0 !default; +$fluent-form-top-label-bottom-margin: null !default; +$fluent-form-default-top-padding: null !default; +$fluent-form-help-text-font-size: 12px !default; +$fluent-form-layout-manager-horizontal-padding: null !default; +$fluent-form-layout-manager-vertical-padding: null !default; +$fluent-form-layout-manager-tabpanel-content-padding: null !default; + +$fluent-form-label-font-size: $fluent-base-font-size !default; +$fluent-form-label-icon-size: $fluent-base-icon-size !default; +$fluent-form-group-custom-caption-icon-margin: null !default; + +@if $size == "default" { + $fluent-form-group-caption-bottom-margin: 4px !default; + $fluent-form-group-caption-top-padding: 16px !default; + $fluent-form-group-content-bottom-padding: 16px !default; + $fluent-form-group-caption-font-size: 20px !default; + $fluent-form-group-custom-caption-icon-margin: 6px !default; + $fluent-form-default-top-padding: 16px !default; + $fluent-form-top-label-bottom-margin: 4px !default; + $fluent-form-layout-manager-horizontal-padding: 12px !default; + $fluent-form-layout-manager-vertical-padding: 8px !default; + $fluent-form-layout-manager-tabpanel-content-padding: 24px !default; +} + +@else if $size == "compact" { + $fluent-form-group-caption-bottom-margin: 4px !default; + $fluent-form-group-caption-top-padding: 12px !default; + $fluent-form-group-content-bottom-padding: 12px !default; + $fluent-form-group-caption-font-size: 16px !default; + $fluent-form-group-custom-caption-icon-margin: 4px !default; + $fluent-form-default-top-padding: 8px !default; + $fluent-form-top-label-bottom-margin: 2px !default; + $fluent-form-layout-manager-horizontal-padding: 8px !default; + $fluent-form-layout-manager-vertical-padding: 6px !default; + $fluent-form-layout-manager-tabpanel-content-padding: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss new file mode 100644 index 000000000000..fff71d38bef2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss @@ -0,0 +1,40 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Indicator background color +* $type color +*/ +$gallery-indicator-bg: $base-bg !default; + +/** +* $name 20. Selected indicator background color +* $type color +*/ +$gallery-indicator-item-selected-bg: $base-accent !default; + +/** +* $name 30. Focused indicator background color +* $type color +*/ +$gallery-indicator-focused-bg: $base-accent !default; +$gallery-indicator-item-border-color: color.change(#000, $alpha: 0.2) !default; +$gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; +$gallery-navbutton-color: color.change($base-text-color, $alpha: 0.54) !default; +$gallery-nav-arrow-color: $base-inverted-text-color !default; + +/** +* $name 40. Hovered navigation button color +* $type color +*/ +$gallery-navbutton-hover-color: $base-accent !default; + +/** +* $name 50. Active navigation button color +* $type color +*/ +$gallery-navbutton-active-color: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss new file mode 100644 index 000000000000..d32e3180e335 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss @@ -0,0 +1,114 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/gallery"; + +// adduse + +.dx-gallery { + .dx-gallery-nav-button-prev, + .dx-gallery-nav-button-next { + position: absolute; + top: 0; + width: 34%; + height: 100%; + background: transparent; + cursor: pointer; + + &.dx-state-hover::after { + background-color: $gallery-navbutton-hover-color; + } + + &.dx-state-active::after { + background-color: $gallery-navbutton-active-color; + } + + @include dx-icon-font-centered-sizing(32px); + + &::after { + content: ''; + position: absolute; + width: 32px; + height: 32px; + background: $gallery-navbutton-color; + border-radius: 50%; + top: 50%; + margin-top: -16px; + } + + &::before { + position: absolute; + z-index: 10; + clear: both; + font-size: 32px; + color: $gallery-nav-arrow-color; + } + } + + .dx-gallery-nav-button-prev { + @include dx-icon(chevronleft); + + &::after { + left: $fluent-gallery-button-padding; + } + + &::before { + left: $fluent-gallery-button-padding - 1; + right: auto; + margin-left: 0; + } + } + + .dx-gallery-nav-button-next { + @include dx-icon(chevronright); + + &::after { + right: $fluent-gallery-button-padding; + } + + &::before { + right: $fluent-gallery-button-padding - 1; + left: auto; + } + } +} + + +.dx-gallery-indicator { + pointer-events: none; + text-align: center; +} + +.dx-gallery-indicator-item { + border-radius: 50%; + box-sizing: border-box; + border: 1px solid; + border-color: $gallery-indicator-item-border-color; + pointer-events: auto; + margin: 5px - math.div($fluent-gallery-indicator-size, 2) 6px; + width: $fluent-gallery-indicator-size; + height: $fluent-gallery-indicator-size; + background: $gallery-indicator-bg; +} + +.dx-gallery-indicator-item-active, +.dx-gallery-indicator-item-selected { + width: $fluent-gallery-indicator-selected-size; + height: $fluent-gallery-indicator-selected-size; + background: $gallery-indicator-item-selected-bg; + border: 2px solid; + border-color: $gallery-indicator-selected-border-color; + margin: 5px - math.div($fluent-gallery-indicator-selected-size, 2) 6px; +} + +.dx-state-focused.dx-gallery { + border-color: $base-accent; + + .dx-gallery-indicator-item-selected { + background: $gallery-indicator-focused-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss new file mode 100644 index 000000000000..4187dac269e1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss @@ -0,0 +1,7 @@ +@use "../sizes" as *; + +// adduse + +$fluent-gallery-indicator-size: 8px !default; +$fluent-gallery-indicator-selected-size: 12px !default; +$fluent-gallery-button-padding: 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss new file mode 100644 index 000000000000..29bb541e04eb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss @@ -0,0 +1,30 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../gridBase/colors" as *; + +// adduse + +$gantt-collapsable-row-bg: null !default; +$gantt-icon-color: $datagrid-columnchooser-item-color !default; +$gantt-parent-task-background-color: null !default; +$gantt-task-color: $base-inverted-text-color !default; +$gantt-task-background-color: null !default; +$gantt-task-progress-background-color: null !default; + +@if $color == "blue" { + $gantt-parent-task-background-color: $base-success !default; +} + +@if $mode == "light" { + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default; + $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%) !default; + $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; +} + +@if $mode == "dark" { + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default; + $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%) !default; + $gantt-task-progress-background-color: rgba(255, 255, 255, 0.2) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss new file mode 100644 index 000000000000..ac30f01d6f17 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss @@ -0,0 +1,291 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/gantt"; +@use "../../base/gantt/mixins" as *; +@use "../gridBase/colors" as *; +@use "../form/sizes" as *; + +// adduse +@use "../splitterBar"; + + +$gantt-successor-background-color: white; + +.dx-gantt { + border: 1px solid; + border-color: $base-border-color; + + .dx-gantt-toolbar-wrapper { + padding: 5px; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + + .dx-gantt-toolbar-separator { + border-left-color: $base-border-color; + } + + .dx-toolbar .dx-toolbar-items-container { + min-height: 42px; + } + } + + .dx-gantt-view { + background-color: $base-bg; + } + + .dx-header-row, + .dx-treelist-filter-row { + height: $gantt-header-item-height; + } + + .dx-gantt-header { + color: $datagrid-columnchooser-item-color; + font-size: $fluent-form-label-font-size; + + .dx-gantt-tsac, + .dx-gantt-tsa, + .dx-gantt-hb, + .dx-gantt-vb { + border-color: $base-border-color; + background-color: $base-bg; + } + } + + .dx-gantt-si { + padding-left: 16px; + padding-right: 16px; + } + + .dx-gantt-tsac, + .dx-gantt-tsa { + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + } + + .dx-gantt-hb { + border-top: 1px solid; + border-top-color: $base-border-color; + } + + .dx-gantt-vb { + border-left: 1px solid; + border-left-color: $base-border-color; + } + + .dx-gantt-taskWrapper { + padding-top: $gantt-task-wrapper-padding-top; + + .dx-gantt-task, + .dx-gantt-titleOut { + height: $gantt-task-height; + line-height: $gantt-task-height; + } + + .dx-gantt-task { + background-color: $base-accent; + border-radius: $base-border-radius; + + .dx-gantt-tPrg { + border-radius: $base-border-radius; + background-color: $gantt-task-progress-background-color; + } + + &.dx-gantt-smallTask { + border-radius: $base-border-radius; + + .dx-gantt-titleIn { + padding: 0 2px; + } + } + + &.dx-gantt-parent { + height: $gantt-task-height - 2px; + line-height: $gantt-task-height - 2px; + background-color: $gantt-parent-task-background-color; + border-left-color: $gantt-parent-task-background-color; + border-right-color: $gantt-parent-task-background-color; + border-top-color: $gantt-parent-task-background-color; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + &:not(.dx-gantt-noPrg) .dx-gantt-tPrg { + background-color: $gantt-task-progress-background-color; + } + + &:not(.dx-gantt-smallTask)::before, + &:not(.dx-gantt-smallTask)::after, + &:not(.dx-gantt-smallTask):not(.dx-gantt-noPrg) .dx-gantt-tPrg::before, + &:not(.dx-gantt-smallTask).dx-gantt-cmpl .dx-gantt-tPrg::after { + content: ''; + position: absolute; + bottom: -8px; + border-width: 4px; + border-style: solid; + } + + &::before, + &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { + left: 0; + border-right-color: transparent; + border-bottom-color: transparent; + } + + &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { + border-left-color: $gantt-task-progress-background-color; + border-top-color: $gantt-task-progress-background-color; + } + + &::after, + &.dx-gantt-cmpl .dx-gantt-tPrg::after { + right: 0; + border-left-color: transparent; + border-bottom-color: transparent; + } + + &.dx-gantt-cmpl::after { + border-right-color: $gantt-task-progress-background-color; + border-top-color: $gantt-task-progress-background-color; + } + + &.dx-gantt-cmpl .dx-gantt-tPrg::after { + border-right-color: $gantt-parent-task-background-color; + border-top-color: $gantt-parent-task-background-color; + } + + .dx-gantt-task-edit-frame { + height: $gantt-task-height - 2px; + } + } + } + + .dx-gantt-titleIn { + color: $gantt-task-color; + padding: 0 $gantt-task-title-padding-left; + } + } + + .dx-gantt-taskRes { + height: $gantt-task-height; + line-height: $gantt-task-height; + color: $gantt-task-color; + background-color: $gantt-task-background-color; + border-radius: $base-border-radius; + margin-left: 21px; + padding-left: 4px; + padding-right: 4px; + } + + .dx-gantt-titleOut { + padding-right: 20px; + } + + .dx-gantt-milestone { + background-color: $base-text-color; + width: $gantt-milestone-size; + height: $gantt-milestone-size; + } + + .dx-gantt-task-edit-wrapper { + padding-top: $gantt-task-wrapper-padding-top; + padding-left: 1px; + + .dx-gantt-task-edit-frame { + height: 100%; + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-radius: $base-border-radius; + + .dx-gantt-task-edit-progress { + border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent; + + &::before { + width: 12px; + height: 6px; + bottom: -14px; + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + } + } + + .dx-gantt-task-edit-progress-status { + border-radius: $base-border-radius; + } + } + } + + .dx-gantt-task-edit-wrapper-successor { + padding-top: $gantt-task-wrapper-padding-top; + + .dx-gantt-task-edit-frame-successor { + height: $gantt-task-height; + } + } + + .dx-gantt-task-edit-dependency-r, + .dx-gantt-task-edit-successor-dependency-r, + .dx-gantt-task-edit-dependency-l, + .dx-gantt-task-edit-successor-dependency-l { + background: $gantt-successor-background-color; + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + width: $gantt-dependency-successor-size; + height: $gantt-dependency-successor-size; + margin: auto; + top: 0; + bottom: 0; + } + + .dx-gantt-task-edit-dependency-r, + .dx-gantt-task-edit-successor-dependency-r { + left: -$gantt-dependency-successor-size - 1px; + } + + .dx-gantt-task-edit-dependency-l, + .dx-gantt-task-edit-successor-dependency-l { + right: -$gantt-dependency-successor-size - 1px; + } + + .dx-gantt-task-edit-dependency-line { + background-color: $base-text-color; + } + + .dx-gantt-sel { + background-color: $datagrid-selection-bg; + } + + .dx-gantt-conn-v { + border-left-color: $base-text-color; + } + + .dx-gantt-conn-h { + border-top-color: $base-text-color; + } + + .dx-gantt-arrow { + border: 5px solid; + border-color: $base-text-color; + } + + .dx-gantt-tm { + border-left: 1px dashed; + border-left-color: $base-accent; + } + + .dx-gantt-ti { + border-left: 1px dashed; + border-left-color: $base-accent; + border-right: 1px dashed; + border-right-color: $base-accent; + background-color: color.change($base-accent, $alpha: 0.15); + } + + .dx-gantt-altRow, + .dx-gantt-collapsable-row { + background-color: $gantt-collapsable-row-bg; + } +} + +@include gantt-icons-mixin($gantt-icon-color); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss new file mode 100644 index 000000000000..a1b69906b929 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; + +// adduse + +$gantt-header-item-height: null !default; +$gantt-task-title-padding-left: null !default; +$gantt-task-height: null !default; +$gantt-dependency-successor-size: null !default; +$gantt-milestone-size: null !default; + +$gantt-task-wrapper-padding-top: 0 !default; + +@if $size == "default" { + $gantt-header-item-height: 57px !default; + $gantt-task-title-padding-left: 11px !default; + $gantt-task-height: 27px !default; + $gantt-dependency-successor-size: 12px !default; + $gantt-milestone-size: 17px !default; +} + +@else if $size == "compact" { + $gantt-header-item-height: 51px !default; + $gantt-task-title-padding-left: 9px !default; + $gantt-task-height: 20px !default; + $gantt-dependency-successor-size: 10px !default; + $gantt-milestone-size: 14px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss new file mode 100644 index 000000000000..26073453edbc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss @@ -0,0 +1,211 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$datagrid-base-color: $base-text-color !default; + +/** +* $name 15. Background color +* $type color +*/ +$datagrid-base-background-color: $base-bg !default; +$datagrid-border-color: $base-border-color !default; + +/** +* $name 20. Header text color +* $type color +*/ +$datagrid-columnchooser-item-color: $datagrid-base-color !default; +$datagrid-block-separator-bg: null !default; + +/** +* $name 25. Header text weight +* $type select +* $type-values 300|500|700 +*/ +$datagrid-columnchooser-font-weight: 600 !default; + +/** +* $name 35. Draggable header border color +* $type color +*/ +$datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; +$datagrid-drag-header-shadow-color: null !default; +$datagrid-drag-header-second-shadow-color: null !default; +$datagrid-header-drag-bg: $datagrid-base-background-color !default; +$header-filter-color: null !default; + +/** +* $name 51. Selected row background color +* $type color +*/ +$datagrid-selection-bg: $button-default-outlined-hover-bg !default; + +/** +* $name 52. Selected row border color +* $type color +*/ +$datagrid-row-selected-border-color: $datagrid-border-color !default; + +/** +* $name 50. Selected row text color +* $type color +*/ +$datagrid-row-selected-color: $datagrid-base-color !default; + +/** +* $name 65. Focused row text color +* $type color +*/ +$datagrid-row-focused-color: $base-text-color !default; + +/** +* $name 70. Focused row background color +* $type color +*/ +$datagrid-row-focused-bg: null !default; +$datagrid-hover-bg: $base-hover-bg !default; +$datagrid-row-hovered-color: $base-hover-color !default; + +/** +* $name 40. Modified data background color +* $type color +*/ +$datagrid-cell-modified-border-color: $button-success-text-hover-bg !default; +$datagrid-cell-removed-border-color: $datagrid-border-color !default; +$datagrid-row-removed-bg: $datagrid-hover-bg !default; +$datagrid-cell-removed-text-color: null !default; + +/** +* $name 45. Invalid data faded color +* $type color +*/ +$datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default; +$datagrid-nodata-color: $base-label-color !default; + +/** +* $name 90. Group row text color +* $type color +*/ +$datagrid-group-row-color: null !default; + +/** +* $name 95. Group row background color +* $type color +*/ +$datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default; +$datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; + +/** +* $name 105. Highlighted text color +* $type color +*/ +$datagrid-search-color: $base-inverted-text-color !default; +$datagrid-chevron-icon-color: $base-spin-icon-color !default; + +/** +* $name 110. Highlighted text background color +* $type color +*/ +$datagrid-search-bg: $base-accent !default; + +/** +* $name 115. Error row text color +* $type color +*/ +$datagrid-row-error-color: $base-inverted-text-color !default; + +/** +* $name 120. Error row background color +* $type color +*/ +$datagrid-row-error-bg: $base-invalid-color !default; +$datagrid-link-color: $base-link-color !default; + +/** +* $name 75. Focused cell border color +* $type color +*/ +$datagrid-focused-border-color: color.mix($base-bg, $base-accent, 20%) !default; + +/** +* $name 80. Editor background color +* $type color +*/ +$datagrid-editor-bg: color.change($datagrid-base-background-color, $alpha: 0) !default; +$datagrid-drop-highlight-bg: $base-accent !default; +$datagrid-drop-highlight-color: $base-inverted-text-color !default; +$datagrid-columnchooser-bg: $base-element-bg !default; +$datagrid-columnchooser-item-bg: null !default; + +/** +* $name 85. Alternate row background color +* $type color +*/ +$datagrid-row-alternation-bg: null !default; + +/** +* $name 100. Summary item color +* $type color +*/ +$datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; +$datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; +$datagrid-summary-bg: $datagrid-base-background-color !default; +$datagrid-column-separator-bg: $base-accent !default; +$datagrid-filter-row-background-color: null !default; +$datagrid-active-header-filter-icon-color: $base-accent !default; +$datagrid-text-stub-background-image-path: null !default; +$datagrid-filter-panel-color: $base-accent !default; +$datagrid-draggable-column-text-color: null !default; + +$datagrid-text-link-disabled-opacity: $base-disabled-opacity; +$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; + +@if $mode == "light" { + @if $color == "blue"{ + $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: -0.98%, $lightness: 50.00%) !default; + $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; + } + + @if $color == "saas" { + $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: 0%, $lightness: 26.47%) !default; + $datagrid-filter-row-background-color: $base-typography-bg !default; + } + + $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; + $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; + $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; + $header-filter-color: $datagrid-columnchooser-item-color !default; + $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; + $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png') !default; + $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; +} + +@if $mode == "dark" { + $datagrid-row-focused-bg: #0c3b5e !default; + $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; + $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; + $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; + $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; + $header-filter-color: $datagrid-columnchooser-item-color !default; + $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; + $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png') !default; + $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default; +} + +$header-filter-color-empty: $header-filter-color !default; +$datagrid-border: 1px solid !default; + +:root { + --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss new file mode 100644 index 000000000000..346f4c8517f1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss @@ -0,0 +1,1059 @@ +@use "sass:math"; +@use "sass:color"; +@use "sass:selector"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../dropDownEditor" as *; +@use "../textEditor" as *; +@use "../textEditor/sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../popup/colors" as *; +@use "../popup/sizes" as *; +@use "../menu/colors" as *; +@use "../toolbar/colors" as *; +@use "../button/mixins" as *; +@use "../button/sizes" as *; +@use "../../base/button/mixins" as *; +@use "../button/colors" as *; +@use "../validation/colors" as *; +@use "../typography/sizes" as *; + +// adduse +@use "../scrollable"; +@use "../overlay"; +@use "../pagination"; +@use 'variables' as *; +@forward 'variables'; +@use 'layout/cell' as *; +@use "layout/aiChat" as *; + +$fluent-grid-base-border-hidden: 1px solid transparent; +$fluent-grid-base-row-border: 1px solid transparent; +$fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; +$fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; +$fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height; + +@mixin grid-base($widget-name) { + @include fluent-grid-base-cell($widget-name); + + .dx-#{$widget-name}, + .dx-#{$widget-name}-container { + .dx-bordered-top-view { + border-top-left-radius: $datagrid-border-radius; + border-top-right-radius: $datagrid-border-radius; + } + + .dx-bordered-bottom-view { + border-bottom-left-radius: $datagrid-border-radius; + border-bottom-right-radius: $datagrid-border-radius; + } + + .dx-menu { + background-color: transparent; + margin-top: math.div(($fluent-grid-base-header-height - $fluent-button-height), 2); + margin-left: 5px !important; // stylelint-disable-line declaration-no-important + height: $fluent-button-height; + + .dx-menu-item { + .dx-menu-item-content { + padding: $fluent-grid-base-menu-item-padding; + + .dx-icon { + @include dx-icon-sizing($fluent-grid-base-filter-icon-size); + + margin: 0 3px; + } + } + } + } + + &.dx-filter-menu { + .dx-menu-item-content { + .dx-icon { + @include dx-icon-sizing($fluent-grid-base-filter-icon-size); + + &.dx-icon-filter-operation-default { + margin-top: 2px; + } + } + } + } + + .dx-#{$widget-name}-filter-row .dx-editor-with-menu { + .dx-menu-item-content { + display: flex; + justify-content: center; + align-items: center; + } + + .dx-texteditor { + .dx-texteditor-container { + .dx-texteditor-input, + .dx-placeholder::before { + padding-left: $fluent-grid-base-texteditor-input-padding; + } + } + } + } + + &.dx-context-menu { + .dx-menu-items-container { + .dx-icon-context-menu-sort-asc { + @include dx-icon(sortuptext); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-context-menu-sort-desc { + @include dx-icon(sortdowntext); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-context-menu-sort-none { + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-fix-column { + @include dx-icon(fixcolumn); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-fix-column-left { + @include dx-icon(fixcolumnleft); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-fix-column-right { + @include dx-icon(fixcolumnright); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-stick-column { + @include dx-icon(stickcolumn); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-unfix-column { + @include dx-icon(unfixcolumn); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + } + } + + .dx-sort-up, + .dx-sort-down, + .dx-header-filter { + @include dx-icon-sizing($fluent-grid-base-header-icon-size, $fluent-grid-base-header-icon-container-size); + } + + .dx-header-filter:not(.dx-header-filter-empty) { + color: $datagrid-active-header-filter-icon-color; + } + + .dx-icon-filter-operation-equals { + @include dx-icon(equal); + } + + .dx-icon-filter-operation-default { + @include dx-icon(find); + } + + .dx-icon-filter-operation-not-equals { + @include dx-icon(notequal); + } + + .dx-icon-filter-operation-less { + @include dx-icon(less); + } + + .dx-icon-filter-operation-less-equal { + @include dx-icon(lessorequal); + } + + .dx-icon-filter-operation-greater { + @include dx-icon(greater); + } + + .dx-icon-filter-operation-greater-equal { + @include dx-icon(greaterorequal); + } + + .dx-icon-filter-operation-contains { + @include dx-icon(contains); + } + + .dx-icon-filter-operation-not-contains { + @include dx-icon(doesnotcontain); + } + + .dx-icon-filter-operation-starts-with { + @include dx-icon(startswith); + } + + .dx-icon-filter-operation-ends-with { + @include dx-icon(endswith); + } + + .dx-icon-filter-operation-between { + @include dx-icon(range); + } + + .dx-column-indicators { + height: $fluent-grid-base-header-line-height; + + .dx-sort-index-icon { + padding-right: 4px; + margin-left: -1px; + font-size: $fluent-grid-base-header-cell-font-size - 1px; + position: relative; + bottom: 1px; + } + + > div { + @include dx-icon-sizing($fluent-grid-base-header-icon-size, $fluent-grid-base-header-icon-container-size); + } + + > span { + margin-left: 4px; + } + } + + .dx-placeholder::before { + font-size: $fluent-grid-base-cell-font-size; + } + } + + .dx-#{$widget-name} { + line-height: inherit; + + .dx-row-alt { + &.dx-row:not(.dx-row-removed) { + border-bottom-color: transparent; + } + + // T838734 + border-top: 1px solid; + border-top-color: $datagrid-row-alternation-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-alternation-bg; + } + + .dx-link { + color: $datagrid-link-color; + } + + .dx-error-row { + .dx-closebutton { + float: right; + margin: $fluent-grid-base-cell-vertical-padding + 2px; + + @include dx-icon(close); + @include dx-icon-sizing(14px); + } + + .dx-error-message { + padding: $fluent-grid-base-cell-vertical-padding; + padding-right: 35px; + } + } + + .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row { + > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all), + > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending), + > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) { + &.dx-command-edit { + .dx-link:not(.dx-link-icon) { + margin: 0 $fluent-command-edit-text-margin; + min-width: 20px; + } + + &.dx-command-edit-with-icons { + .dx-link { + @include dx-icon-sizing($fluent-command-edit-icon-size); + + margin: 0 $fluent-command-edit-icon-margin; + vertical-align: middle; + } + + .dx-link:not(.dx-link-icon) { + width: auto; + } + } + + .dx-state-disabled { + &.dx-link { + opacity: $datagrid-text-link-disabled-opacity; + } + + &.dx-link-icon { + opacity: $datagrid-icon-link-disabled-opacity; + } + } + } + } + } + + .dx-#{$widget-name}-rowsview .dx-virtual-row > td[style*="text-align: right"]:before { + background-position-y: 49px; + } + + .dx-command-drag { + .dx-#{$widget-name}-drag-icon { + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-drop-highlight { + & > td { + .dx-header-filter { + color: $datagrid-drop-highlight-color; + } + + .dx-checkbox { + .dx-checkbox-icon { + background-color: $datagrid-drop-highlight-color; + color: $datagrid-drop-highlight-bg; + } + } + } + } + } + + .dx-#{$widget-name}-edit-popup { + .dx-popup-content { + padding: 0; + } + + .dx-error-message { + padding: $fluent-grid-base-cell-padding; + } + } + + .dx-#{$widget-name}-edit-popup-form { + padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; + } + + .dx-#{$widget-name}-headers, + .dx-#{$widget-name}-rowsview { + .dx-texteditor-input { + min-height: $fluent-grid-base-header-line-height; + } + + .dx-lookup { + height: auto; + + .dx-lookup-field { + padding-left: $fluent-grid-base-cell-horizontal-padding; + padding-top: $fluent-grid-base-cell-vertical-padding; + padding-bottom: $fluent-grid-base-cell-vertical-padding; + font-size: $fluent-grid-base-cell-font-size; + } + } + + .dx-dropdowneditor-button-visible.dx-dropdowneditor { + &.dx-show-clear-button { + &.dx-invalid, + &.dx-valid, + &.dx-validation-pending { + .dx-texteditor-input { + padding-right: $fluent-dropdowneditor-invalid-badge-size; + } + + &.dx-rtl .dx-texteditor-input { + padding-right: 0; + padding-left: $fluent-dropdowneditor-invalid-badge-size; + } + } + } + + &.dx-invalid, + &.dx-valid, + &.dx-validation-pending { + .dx-texteditor-input { + padding-right: $fluent-dropdowneditor-invalid-badge-size; + } + + &.dx-rtl .dx-texteditor-input { + padding-right: 0; + padding-left: $fluent-dropdowneditor-invalid-badge-size; + } + } + + &.dx-rtl .dx-texteditor-input { + padding-right: 0; + } + } + } + + .dx-editor-cell { + .dx-numberbox-spin-button { + background-color: transparent; + } + + .dx-icon-clear { + left: 0; + } + + .dx-texteditor { + &, + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active { + background: $datagrid-editor-bg; + box-shadow: none; + } + + &:not(.dx-tagbox) .dx-texteditor-input { + background: $datagrid-editor-bg; + font-size: $fluent-grid-base-cell-font-size; + height: $fluent-grid-base-cell-height; + line-height: $fluent-grid-base-cell-height; + margin-top: 0; + } + + &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input { + padding: 0 $fluent-grid-base-cell-horizontal-padding; + } + + .dx-placeholder::before { + padding-right: $fluent-grid-base-cell-horizontal-padding; + padding-left: $fluent-grid-base-cell-horizontal-padding; + } + + &.dx-validation-pending { + .dx-texteditor-input-container { + .dx-texteditor-input { + padding-top: 0; + padding-bottom: 0; + } + } + } + + &:not(.dx-tagbox) .dx-tag-container { + min-height: $fluent-grid-base-cell-height; + padding: 0; + } + + &:not(.dx-editor-filled):not(.dx-editor-outlined) { + .dx-texteditor-input, + .dx-tag-container { + margin-top: 0; + } + } + + .dx-texteditor-buttons-container { + right: 0; + } + + &::after, + &::before { + content: none; + } + + &.dx-rtl, + .dx-rtl & { + .dx-texteditor-buttons-container { + left: 0; + } + } + } + + .dx-dropdowneditor { + background-color: $datagrid-editor-bg; + } + + &.dx-focused .dx-dropdowneditor-icon { + border-radius: 0; + } + + &.dx-editor-inline-block:not(.dx-command-select) { + &::before { + padding-top: $fluent-grid-base-cell-vertical-padding; + padding-bottom: $fluent-grid-base-cell-vertical-padding; + } + } + } + + .dx-#{$widget-name}-column-chooser-list { + .dx-empty-message { + color: $datagrid-columnchooser-message-color; + padding: 0 $fluent-grid-base-column-chooser-horizontal-padding; + } + } + + .dx-#{$widget-name}-column-chooser { + @include dx-base-typography(); + + &.dx-#{$widget-name}-column-chooser-mode-drag { + .dx-popup-content { + padding: $fluent-grid-base-column-chooser-paddings; + + .dx-treeview-search { + margin-bottom: $fluent-grid-base-treeview-search-margin; + } + + .dx-treeview-node { + padding-left: 20px; + } + } + } + + &.dx-#{$widget-name}-column-chooser-mode-select { + .dx-popup-content { + padding: $fluent-grid-base-column-chooser-paddings; + } + + .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list { + .dx-treeview-select-all-item { + padding-inline-start: $fluent-grid-base-treeview-select-all-item-offset; + } + } + } + + .dx-overlay-content { + background-color: $datagrid-columnchooser-bg; + + .dx-popup-title { + background-color: transparent; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; + + .dx-toolbar-label { + font-size: $fluent-m-font-size; + } + } + + .dx-popup-content { + .dx-column-chooser-item { + margin: 2px 2px $fluent-grid-base-column-chooser-item-margin 2px; + background-color: $datagrid-columnchooser-item-bg; + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + font-size: $fluent-grid-base-header-cell-font-size; + padding: $fluent-grid-base-cell-vertical-padding; + line-height: $fluent-grid-base-header-line-height; + box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow; + } + } + } + } + + .dx-#{$widget-name}-drag-header { + border-color: $datagrid-drag-header-border-color; + box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow; + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + padding: $fluent-grid-base-header-cell-vertical-padding; + background-color: $datagrid-header-drag-bg; + line-height: $fluent-grid-base-header-line-height; + font-size: $fluent-grid-base-header-cell-font-size; + } + + .dx-#{$widget-name}-columns-separator { + background-color: $datagrid-column-separator-bg; + } + + .dx-#{$widget-name}-columns-separator-transparent { + background-color: transparent; + } + + .dx-#{$widget-name}-focus-overlay { + &::after { + content: ""; + position: absolute; + bottom: 0; + height: 2px; + background-color: $datagrid-focused-border-color; + left: 0; + right: 1px; + } + + &.dx-focused-cell-modified::after { + background-color: $button-success-hover-bg; + } + + &.dx-focused-cell-invalid::after { + background-color: $button-danger-hover-bg; + } + } + + .dx-data-row.dx-state-hover { + &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) { + & > .dx-#{$widget-name}-readonly .dx-texteditor { + .dx-texteditor-input { + background-color: $datagrid-hover-bg; + color: $datagrid-row-hovered-color; + } + } + } + } + + .dx-#{$widget-name}-headers { + color: $datagrid-columnchooser-item-color; + touch-action: pinch-zoom; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + pointer-events: none; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + .dx-#{$widget-name}-table { + .dx-#{$widget-name}-borders & { + border-bottom-width: 1px; + } + + .dx-row { + > td { + .dx-sort { + color: $header-filter-color-empty; + } + + &:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover { + .dx-#{$widget-name}-text-content { + color: $datagrid-base-color; + } + } + } + } + } + } + + .dx-#{$widget-name}-filter-row { + background-color: $datagrid-filter-row-background-color; + + .dx-menu { + margin-left: 0; + + .dx-menu-horizontal { + .dx-menu-items-container { + height: 100%; + position: absolute; + + .dx-menu-item-wrapper { + height: 100%; + } + } + } + + .dx-overlay-content { + color: $menu-color; + } + } + + .dx-filter-modified { + background-color: $datagrid-cell-modified-border-color; + } + + td .dx-editor-container .dx-filter-range-content { + padding: + $fluent-grid-base-cell-vertical-padding + $fluent-grid-base-cell-horizontal-padding + $fluent-grid-base-cell-vertical-padding + $fluent-grid-base-texteditor-input-padding; + } + } + + .dx-#{$widget-name}-filter-range-overlay { + .dx-overlay-content { + overflow: inherit; + background-color: $datagrid-filter-row-background-color; + box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow; + + .dx-texteditor { + &.dx-state-focused::after, + &.dx-state-hover::after { + top: auto; + bottom: 0; + } + + .dx-texteditor-input { + font-size: $fluent-grid-base-cell-font-size; + height: $fluent-grid-base-cell-height + 1; + padding-right: $fluent-filter-row-between-editor-padding; + padding-left: $fluent-filter-row-between-editor-padding; + } + + .dx-placeholder::before { + padding-left: $fluent-filter-row-between-editor-padding; + } + } + + .dx-invalid-message.dx-overlay-wrapper { + display: none; + } + } + } + + .dx-#{$widget-name}-header-panel { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + padding: $fluent-grid-base-header-panel-padding; + + .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon { + border-radius: $fluent-base-border-radius; + } + } + + .dx-icon-column-chooser { + @include dx-icon(columnchooser); + } + + .dx-#{$widget-name}-addrow-button { + .dx-icon-edit-button-addrow { + @include dx-icon(add); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-cancel-button { + .dx-icon-edit-button-cancel { + @include dx-icon(revert); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-save-button { + .dx-icon-edit-button-save { + @include dx-icon(save); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-apply-button { + .dx-icon-apply-filter { + @include dx-icon(filter); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-datagrid-export-menu { + .dx-menu-item .dx-icon-xlsxfile { + @include dx-icon-sizing($fluent-base-icon-size); + } + + .dx-menu-item .dx-icon-exportselected { + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-adaptive-more { + vertical-align: middle; + + @include dx-icon-sizing($fluent-base-icon-size); + + color: $base-icon-color; + } + + .dx-row.dx-row-focused { + .dx-#{$widget-name}-adaptive-more { + color: inherit; + } + } + + .dx-#{$widget-name}-rowsview { + border-top: 1px solid; + border-top-color: $fluent-grid-base-border-color; + + .dx-#{$widget-name}-headers + &, + &.dx-#{$widget-name}-after-headers { + border-top: none; + } + + .dx-row { + border-top: $fluent-grid-base-row-border; + border-bottom: $fluent-grid-base-row-border; + + &:focus { + outline: none; + } + } + + .dx-data-row, + .dx-adaptive-detail-row { + &, + &.dx-selection, + &.dx-selection:hover { + .dx-validator { + &.dx-#{$widget-name}-invalid, + &.dx-invalid { + background-color: $datagrid-row-invalid-faded-border-color; + } + } + } + } + + .dx-overlay-wrapper.dx-invalid-message { + .dx-overlay-content { + padding: 9px 17px 9px; + background-color: $validation-message-background-color; + color: $validation-message-color; + } + } + + .dx-adaptive-detail-row { + .dx-field-item-label { + padding-top: 0; + } + + .dx-field-item-content { + line-height: $fluent-grid-base-adaptive-column-height; + min-height: $fluent-grid-base-adaptive-column-height; + font-size: $fluent-grid-base-cell-font-size; + + &.dx-focused { + padding: 0; + } + } + + .dx-texteditor-input { + font-size: $fluent-grid-base-cell-font-size; + height: $fluent-grid-base-adaptive-column-height; + line-height: $fluent-grid-base-adaptive-column-height; + } + + .dx-texteditor::after, + .dx-texteditor::before { + content: none; + } + + .dx-texteditor.dx-editor-outlined { + box-shadow: none; + } + } + + .dx-item-modified { + background-color: $datagrid-cell-modified-border-color; + } + + .dx-row-focused { + &.dx-data-row { + & .dx-command-edit .dx-link { + color: $datagrid-row-focused-color; + } + + & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid), + & .dx-command-edit .dx-link { + & .dx-#{$widget-name}-group-opened, + & .dx-#{$widget-name}-group-closed { + color: $datagrid-row-focused-color; + } + } + } + + &.dx-group-row { + background-color: $datagrid-row-focused-bg; + color: $datagrid-row-focused-color; + + & .dx-#{$widget-name}-group-opened, + & .dx-#{$widget-name}-group-closed { + color: $datagrid-row-focused-color; + } + } + } + + &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content { + padding-right: 0; + } + + td { + &.dx-validation-pending { + > .dx-pending-indicator { + @include dx-pending-indicator-fluent(); + @include texteditor-validation-icon-offset(); + + right: $fluent-invalid-badge-size; + background-color: transparent; + + @at-root #{selector.append(".dx-rtl", &)}, + .dx-rtl & { + left: $fluent-invalid-badge-size; + } + } + } + } + + &.dx-#{$widget-name}-sticky-columns { + .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input { + height: $fluent-grid-base-cell-height - 2px; + line-height: $fluent-grid-base-cell-height - 2px; + } + + .dx-master-detail-row > .dx-master-detail-cell { + > .dx-#{$widget-name}-master-detail-container { + padding: $grid-masterdetail-padding; + } + } + } + } + + .dx-#{$widget-name}-search-text { + color: $datagrid-search-color; + background-color: $datagrid-search-bg; + } + + .dx-#{$widget-name}-nodata { + color: $datagrid-nodata-color; + font-size: $fluent-grid-base-nodata-font-size; + } + + .dx-#{$widget-name}-bottom-load-panel { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + background-color: $datagrid-base-background-color; + } + + .dx-#{$widget-name}-summary-item { + color: $datagrid-summary-color; + } + + .dx-#{$widget-name}-total-footer { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + + > .dx-#{$widget-name}-content { + padding: 0; + } + } + + .dx-#{$widget-name}-revert-tooltip { + .dx-overlay-content { + background-color: transparent; + min-width: inherit; + } + + .dx-revert-button { + @include dx-button-sizing(2px, 2px, 2px, 18px, 0); + + border-radius: $button-border-radius; + + @include dx-button-styling-variant( + $button-danger-bg, + $button-danger-color, + $button-danger-color, + $button-danger-color, + $button-danger-bg, + $button-danger-bg, + $button-danger-bg, + $button-danger-color + ); + + margin: 0 0 0 1px; + height: $fluent-grid-base-cell-height; + box-shadow: none; + min-width: inherit; + + &.dx-button-has-icon:not(.dx-button-has-text) { + border-radius: 2px; + } + + &.dx-state-hover { + box-shadow: none; + } + } + } + + .dx-rtl { + .dx-#{$widget-name}, + .dx-#{$widget-name}-container { + .dx-menu { + .dx-menu-item-has-submenu.dx-menu-item-has-icon { + .dx-icon { + margin: 0 3px; + } + } + } + } + + .dx-#{$widget-name}-rowsview { + &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content { + padding-left: 0; + } + } + } + + .dx-header-filter-menu { + .dx-popup-content { + padding: 8px 8px 0 8px; + } + } + + .dx-#{$widget-name}-filter-panel { + background-color: $datagrid-base-background-color; + padding: 18px $fluent-grid-base-cell-horizontal-padding; + + .dx-#{$widget-name}-filter-panel-text, + .dx-#{$widget-name}-filter-panel-clear-filter { + color: $datagrid-filter-panel-color; + font-size: $fluent-grid-base-cell-font-size; + line-height: $fluent-grid-base-checkbox-size; + } + + .dx-icon-filter { + color: $datagrid-filter-panel-color; + + @include dx-icon-sizing($fluent-filter-panel-icon-size); + } + } + + .dx-adaptive-item-text { + padding-left: $fluent-filled-texteditor-input-horizontal-padding; + padding-right: $fluent-filled-texteditor-input-horizontal-padding; + &.dx-cell-modified, + &.dx-#{$widget-name}-invalid { + padding-top: 0; + padding-bottom: 0; + } + } + + .dx-#{$widget-name}-dragview { + border-radius: $datagrid-border-radius; + + .dx-#{$widget-name}-borders { + border-radius: $datagrid-border-radius; + } + } + + .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column { + opacity: 1; + color: $datagrid-draggable-column-text-color; + } + + .dx-command-ai-header-content { + max-width: calc(100% - ($fluent-button-height - $fluent-grid-base-cell-horizontal-padding + $fluent-grid-base-command-ai-header-button-offset)); + + .dx-#{$widget-name}-text-content { + padding-left: $fluent-grid-base-command-ai-text-content-padding; + } + + .dx-icon-chatsparkleoutline { + @include dx-icon-sizing($fluent-grid-base-command-ai-chatsparkleoutline-icon-size); + } + } + + .dx-command-ai-header-button { + left: auto; + right: $fluent-grid-base-command-ai-header-button-offset; + } + + td[style*="text-align: right"] .dx-command-ai-header-button { + left: $fluent-grid-base-command-ai-header-button-offset; + right: auto; + } + + .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container { + height: $fluent-grid-base-ai-prompt-editor-progressbar-height; + border-radius: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss new file mode 100644 index 000000000000..0a040ed93e61 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss @@ -0,0 +1,118 @@ +@use "../sizes" as *; + +// adduse + +/** +* $name 15. Border radius +* $type text +*/ +$datagrid-border-radius: 0 !default; + +$fluent-grid-base-cell-height: null !default; +$fluent-grid-base-header-height: null !default; +$fluent-grid-base-cell-line-height: null !default; +$fluent-grid-base-cell-font-size: null !default; +$fluent-grid-base-checkbox-size: null !default; +$fluent-grid-base-cell-horizontal-padding: null !default; +$fluent-grid-base-texteditor-input-padding: null !default; +$fluent-grid-base-menu-item-padding: null !default; +$fluent-grid-base-column-chooser-horizontal-padding: null !default; +$fluent-grid-base-column-chooser-paddings: null !default; +$fluent-grid-base-header-panel-padding: null !default; +$fluent-grid-base-grouppanel-item-margin: null !default; +$fluent-grid-base-command-edit-column-width: null !default; +$fluent-grid-base-command-edit-column-with-icons-width: null !default; +$fluent-grid-base-adaptive-column-height: null !default; +$fluent-grid-base-treeview-search-margin: null !default; +$fluent-grid-base-nodata-font-size: null !default; +$fluent-filter-row-between-editor-padding: null !default; +$fluent-command-column-additional-right-margin: null !default; +$fluent-grid-base-treeview-select-all-item-offset: null !default; + +$fluent-grid-base-header-line-height: 18px !default; +$fluent-grid-base-header-icon-size: null !default; +$fluent-grid-base-header-icon-container-size: 20px !default; +$fluent-grid-base-column-chooser-item-margin: 8px !default; +$fluent-command-edit-icon-margin: 4px !default; +$fluent-command-edit-text-margin: 2px !default; + +$fluent-command-edit-icon-size: null !default; +$fluent-filter-panel-icon-size: null !default; + +$fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default; +$fluent-grid-base-command-ai-chatsparkleoutline-icon-size: null !default; +$fluent-grid-base-command-ai-text-content-padding: null !default; +$fluent-grid-base-command-ai-header-button-offset: null !default; +$fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; + +@if $size == "default" { + $fluent-grid-base-cell-height: 48px !default; + $fluent-grid-base-header-height: 48px !default; + $fluent-grid-base-cell-line-height: 20px !default; + $fluent-grid-base-cell-font-size: 14px !default; + + $fluent-grid-base-checkbox-size: 18px !default; + $fluent-grid-base-cell-horizontal-padding: 16px !default; + + $fluent-grid-base-texteditor-input-padding: 40px !default; + $fluent-grid-base-menu-item-padding: 11px 4px !default; + $fluent-grid-base-column-chooser-horizontal-padding: 24px !default; + $fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default; + $fluent-grid-base-header-panel-padding: 8px 0 !default; + $fluent-grid-base-grouppanel-item-margin: 6px !default; + + $fluent-grid-base-command-edit-column-width: 115px !default; + $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; + $fluent-grid-base-adaptive-column-height: 40px !default; + $fluent-grid-base-treeview-search-margin: 10px !default; + $fluent-grid-base-nodata-font-size: 17px !default; + + $fluent-filter-row-between-editor-padding: 12px !default; + $fluent-command-column-additional-right-margin: 0 !default; + + $fluent-grid-base-treeview-select-all-item-offset: 34px !default; + + $fluent-grid-base-header-icon-size: 20px !default; + $fluent-command-edit-icon-size: 20px !default; + $fluent-filter-panel-icon-size: 20px !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 20px !default; + $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default; + $fluent-grid-base-command-ai-header-button-offset: 8px !default; +} + +@else if $size == "compact" { + $fluent-grid-base-cell-height: 36px !default; + $fluent-grid-base-header-height: 36px !default; + $fluent-grid-base-cell-line-height: 16px !default; + $fluent-grid-base-cell-font-size: 12px !default; + + $fluent-grid-base-checkbox-size: 16px !default; + $fluent-grid-base-cell-horizontal-padding: 11px !default; + + $fluent-grid-base-texteditor-input-padding: 36px !default; + $fluent-grid-base-menu-item-padding: 8px 4px !default; + $fluent-grid-base-column-chooser-horizontal-padding: 8px !default; + $fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default; + $fluent-grid-base-header-panel-padding: 6px 0 !default; + $fluent-grid-base-grouppanel-item-margin: 6px !default; + + $fluent-grid-base-command-edit-column-width: 105px !default; + $fluent-grid-base-command-edit-column-with-icons-width: 80px !default; + $fluent-grid-base-adaptive-column-height: 26px !default; + $fluent-grid-base-treeview-search-margin: 10px !default; + $fluent-grid-base-nodata-font-size: 14px !default; + + $fluent-filter-row-between-editor-padding: 8px !default; + $fluent-command-column-additional-right-margin: 2px !default; + + $fluent-grid-base-treeview-select-all-item-offset: 28px !default; + + $fluent-grid-base-header-icon-size: 16px !default; + $fluent-command-edit-icon-size: 16px !default; + $fluent-filter-panel-icon-size: 16px !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 16px !default; + $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default; + $fluent-grid-base-command-ai-header-button-offset: 6px !default; +} + +$fluent-grid-base-header-cell-font-size: $fluent-grid-base-cell-font-size !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss new file mode 100644 index 000000000000..1ec5dd5b0875 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss @@ -0,0 +1,10 @@ +@use "sass:math"; +@use "colors" as *; +@use "sizes" as *; + +$fluent-grid-base-border-color: $datagrid-border-color; +$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)); +$fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; +$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)); +$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding; +$grid-masterdetail-padding: 16px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss new file mode 100644 index 000000000000..37b6b5f8c909 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss @@ -0,0 +1,19 @@ +@use '../../../../base/gridBase/layout/aiChat/mixins' as *; +@use '../../../colors' as *; +@use '../../../button/colors' as *; +@use './sizes' as *; +@use "../../../../base/widget" as *; +@include ai-chat-messagelist-empty( + $button-default-bg, + $button-default-outlined-hover-bg, +); +@include ai-chat-message-pending($base-accent); +@include ai-chat-message-success($base-success); +@include ai-chat-message-error($base-danger); +@include ai-chat-messagebubble-border($base-border-color); +@include ai-chat-message-regenerate-button($button-normal-active-bg); +@include ai-chat-message-icon($ai-chat-message-icon-size); + +.dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button { + @include disabled-widget(); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss new file mode 100644 index 000000000000..57e3442e5062 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss @@ -0,0 +1,3 @@ +@use '../../../sizes' as *; + +$ai-chat-message-icon-size: $fluent-base-icon-size; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss new file mode 100644 index 000000000000..ab0a39230ccc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss @@ -0,0 +1,543 @@ +/* stylelint-disable no-duplicate-selectors */ +@use "sass:math"; +@use "../colors" as *; +@use "../../colors" as *; +@use "../sizes" as *; +@use "../../sizes" as *; +@use "../../textEditor" as *; +@use "../../textEditor/sizes" as *; +@use "../variables" as *; + +@mixin fluent-grid-base-cell($widget-name) { + + // #region overflow + + // (0,1,0) + .dx-cell-modified, + .dx-#{$widget-name}-invalid { + overflow: hidden; + text-overflow: ellipsis; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select { + overflow: visible; + } + + // #endregion + + // #region sizing + + // (0,1,0) + .dx-command-adaptive { + width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + } + + // (0,2,0) + .dx-#{$widget-name} .dx-command-drag { + width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select { + width: $fluent-grid-base-command-select-column-width; + min-width: $fluent-grid-base-command-select-column-width; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit { + width: $fluent-grid-base-command-edit-column-width; + min-width: $fluent-grid-base-command-edit-column-width; + } + + // (0,8,1) - (0,10,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit.dx-command-edit-with-icons, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons { + width: $fluent-grid-base-command-edit-column-with-icons-width; + min-width: $fluent-grid-base-command-edit-column-with-icons-width; + } + + // #endregion + + // #region border + + // (0,2,1) + .dx-#{$widget-name} .dx-row-lines > td { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,2,1) + .dx-#{$widget-name} .dx-column-lines > td { + border-left: $datagrid-border; + border-left-color: $datagrid-border-color; + border-right: $datagrid-border; + border-right-color: $datagrid-border-color; + } + + // (0,3,0) - (0,4,0) + .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-master-detail-row .dx-master-detail-cell:not(.dx-row-lines) { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row > td { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview .dx-row-removed.dx-row-lines > td { + border-top: 1px solid; + border-top-color: $datagrid-cell-removed-border-color; + border-bottom: 1px solid; + border-bottom-color: $datagrid-cell-removed-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview .dx-row-removed:not(.dx-row-lines) > td { + border-top: 1px solid; + border-top-color: $datagrid-hover-bg; + } + + // (0,3,1) - (0,4,2) + .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > td, + .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > tr:first-child > td { + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-focused-bg; + } + + // (0,4,1) + .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row:first-child > td { + border-top-width: 0; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,4,1) - (0,5,1) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row-removed.dx-row-lines > td, + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-lines.dx-edit-row > td { + border-top-width: 0; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-#{$widget-name}-group-space { + border-right-color: $datagrid-selection-bg; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-pointer-events-none, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-pointer-events-none, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-pointer-events-none, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-pointer-events-none { + border-left-color: $datagrid-row-selected-border-color; + border-right-color: $datagrid-row-selected-border-color; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-lines) > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover:not(.dx-row-lines) > td { + border-bottom: 1px solid; + border-bottom-color: $datagrid-selection-bg; + border-top: 1px solid; + border-top-color: $datagrid-selection-bg; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused).dx-row-lines > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover.dx-row-lines > td { + border-bottom-color: $datagrid-row-selected-border-color; + } + + // (0,7,1) + .dx-widget:not(.dx-rtl) .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td:not( + .dx-#{$widget-name}-first-cell, + .dx-#{$widget-name}-hidden-column, + .dx-command-adaptive-hidden, + .dx-#{$widget-name}-sticky-column-border-left, + .dx-#{$widget-name}-column-no-border, + .dx-pointer-events-none + ) { + border-left: 1px solid; + border-left-color: $datagrid-border-color; + } + + // (0,10,1) + .dx-rtl .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused).dx-#{$widget-name}-group-space { + border-left-color: $datagrid-hover-bg; + border-right-color: transparent; + } + + // RTL + + // (0,4,1) - (0,5,2) + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td { + border-right-color: $datagrid-row-selected-border-color; + } + + // (0,5,1) - (0,6,2) + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td.dx-pointer-events-none, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td.dx-pointer-events-none, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td.dx-pointer-events-none, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td.dx-pointer-events-none { + border-left-color: $datagrid-row-selected-border-color; + } + + // (0,6,1) + .dx-rtl .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td:not( + .dx-#{$widget-name}-first-cell, + .dx-#{$widget-name}-hidden-column, + .dx-command-adaptive-hidden, + .dx-#{$widget-name}-sticky-column-border-right, + .dx-#{$widget-name}-column-no-border, + .dx-pointer-events-none + ) { + border-right: 1px solid; + border-right-color: $datagrid-border-color; + } + + // (0,6,1) - (0,7,2) + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td:not(.dx-focused).dx-#{$widget-name}-group-space, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td:not(.dx-focused).dx-#{$widget-name}-group-space, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space { + border-left-color: $datagrid-selection-bg; + } + + // #endregion + + // #region border-radius + + // (0,4,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:first-child { + border-top-left-radius: $datagrid-border-radius; + } + + // (0,4,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:last-child { + border-top-right-radius: $datagrid-border-radius; + } + + // #endregion + + // #region padding + + // (0,1,0) + .dx-cell-modified, + .dx-#{$widget-name}-invalid { + padding: $fluent-grid-base-cell-vertical-padding 0 $fluent-grid-base-cell-vertical-padding 0; + } + + // (0,1,0) + .dx-editor-cell { + padding-top: 0; + padding-bottom: 0; + } + + // (0,2,1) + .dx-#{$widget-name} .dx-row > td { + padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; + } + + // (0,2,1) + .dx-#{$widget-name}-rowsview td.dx-validation-pending { + padding: 0; + } + + // (0,3,0) + .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-master-detail-cell { + padding: $grid-masterdetail-padding; + } + + // (0,3,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td { + padding-top: $fluent-grid-base-header-cell-vertical-padding; + padding-bottom: $fluent-grid-base-header-cell-vertical-padding; + } + + // (0,3,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-#{$widget-name}-filter-row > td { + padding-top: 0; + padding-bottom: 0; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, + .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid { + padding: $fluent-grid-base-cell-padding; + padding-right: $fluent-texteditor-invalid-badge-size; + } + + // (0,4,0) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-master-detail-row > .dx-master-detail-cell { + padding: 0; + } + + // (0,4,1) + .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, + .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid, + .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, + .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid { + padding-left: $fluent-texteditor-invalid-badge-size; + padding-right: $fluent-grid-base-cell-horizontal-padding; + } + + // (0,5,1) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) { + padding-top: $fluent-grid-base-cell-vertical-padding + 1px; + } + + // (0,5,1) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-edit-row > td.dx-command-edit { + padding-top: $fluent-grid-base-cell-vertical-padding - 1px; + } + + // (0,6,1) + .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td { + padding-top: 12px; + padding-bottom: 12px; + } + + // (0,6,1) + .dx-row.dx-group-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell), + .dx-row.dx-master-detail-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) { + padding-top: $fluent-grid-base-cell-vertical-padding; + } + + // (0,7,0) + .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row .dx-command-select { + padding-bottom: math.div($fluent-grid-base-header-height - $fluent-grid-base-checkbox-size, 2); + } + + // (0,8,1) T1303478 + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell), + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) { + padding-bottom: $fluent-grid-base-cell-vertical-padding - 1px; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space { + padding: 0 4px 0 8px; + } + + // (0,8,1) - (0,10,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-editor-cell:not(.dx-command-select), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select) { + padding-right: 0; + } + + // (0,9,1) - (0,11,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable) { + padding-left: 0; + } + + // #endregion + + // #region background + + // (0,2,1) + .dx-#{$widget-name} .dx-row-alt > td { + background-color: $datagrid-row-alternation-bg; + } + + // (0,2,1) + .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td { + background-color: $datagrid-drop-highlight-bg; + } + + // (0,2,1) + .dx-#{$widget-name}-rowsview .dx-row-removed > td { + background-color: $datagrid-row-removed-bg; + } + + // (0,4,0) + .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) > .dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) .dx-master-detail-cell { + background-color: $datagrid-master-detail-cell-bg; + } + + // (0,4,0) - (0,6,0) + .dx-#{$widget-name}-rowsview .dx-data-row:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-data-row.dx-selection:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-data-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified { + background-color: $datagrid-cell-modified-border-color; + } + + // (0,4,1) + .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column, + .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-left, + .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-right { + background-color: $datagrid-filter-row-background-color; + } + + // (0,4,1) - (0,5,2) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td { + background-color: $datagrid-selection-bg; + } + + // (0,5,1) + .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover { + background-color: $datagrid-hover-bg; + } + + // (0,6,1) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) { + background-color: $datagrid-row-focused-bg; + } + + // (0,7,1) - (0,7,2) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid), + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) { + background-color: $datagrid-base-background-color; + } + + // (0,8,1) + .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) { + background-color: $datagrid-hover-bg; + } + + // (0,8,1) + .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td.dx-pointer-events-none { + background-color: transparent; + } + + // #endregion + + // #region color + + // (0,2,1) + .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td { + color: $datagrid-drop-highlight-color; + } + + // (0,2,1) + .dx-#{$widget-name}-rowsview .dx-row-removed > td { + color: $datagrid-cell-removed-text-color; + } + + // (0,4,1) - (0,5,2) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td { + color: $datagrid-row-selected-color; + } + + // (0,6,1) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) { + color: $datagrid-row-focused-color; + } + + // (0,7,1) + .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td { + color: $datagrid-row-hovered-color; + } + + // (0,7,1) - (0,7,2) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid), + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) { + color: $datagrid-base-color; + } + + // #endregion + + // #region typography + + // (0,2,1) + .dx-#{$widget-name} .dx-row > td { + font-size: $fluent-grid-base-cell-font-size; + line-height: $fluent-grid-base-cell-line-height; + } + + // (0,3,1) + .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td { + line-height: $fluent-grid-base-header-line-height; + font-weight: $datagrid-columnchooser-font-weight; + font-size: $fluent-grid-base-header-cell-font-size; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select { + line-height: 1; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space { + line-height: 0; + } + + // #endregion + + // #region vertical-align + + // (0,6,1) - (0,8,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) { + vertical-align: middle; + } + + // (0,6,1) + .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td { + vertical-align: bottom; + } + + // #endregion + + // #region position + + // (0,2,1) + .dx-#{$widget-name}-rowsview td.dx-validation-pending { + position: relative; + } + + // #endregion +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss new file mode 100644 index 000000000000..4fb1036c4d05 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$htmleditor-border-color: $base-border-color !default; +$htmleditor-toolbar-border-color: $base-separator-color !default; +$htmleditor-variable-bg: color.change($base-accent, $alpha: 0.15) !default; +$htmleditor-resize-frame-border-color: $base-accent !default; +$htmleditor-resize-handle-bg: $base-accent !default; +$htmleditor-mention-bg: $base-selected-bg !default; +$htmleditor-table-border-color: $base-border-color !default; +$htmleditor-fileuploader-input-wrapper-border-color: $base-border-color !default; +$htmleditor-fileuploader-input-wrapper-bg-color: $base-typography-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss new file mode 100644 index 000000000000..10c60a1a897c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss @@ -0,0 +1,330 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../button/colors" as *; +@use "../buttonGroup/colors" as *; +@use "../textEditor/colors" as *; +@use "../textEditor/index" as *; +@use "../toolbar/sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../fileUploader/sizes" as *; +@use "../popup/sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/htmlEditor"; + +// adduse + +.dx-htmleditor { + border-color: transparent; + position: relative; + + .dx-htmleditor-toolbar-wrapper { + padding: 0 $fluent-htmleditor-toolbar-padding; + position: relative; + } + + &::before { + left: 0; + right: 0; + bottom: 0; + height: 0; + width: 100%; + content: ''; + position: absolute; + z-index: 2; + transform: scale(0); + } + + &.dx-state-readonly, + &.dx-state-disabled { + .dx-htmleditor-toolbar-wrapper::before { + position: absolute; + top: 1px; + bottom: 1px; + left: 1px; + right: 1px; + z-index: 2; + background-color: color.change($base-bg, $alpha: 0.4); + content: ''; + pointer-events: none; + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom: 2px solid; + border-bottom-color: $texteditor-indicator-border-color; + transform: scale(1); + transition-property: transform; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + } + } + + &.dx-htmleditor-outlined { + @include texteditor-outlined-styling(); + + .dx-htmleditor-content { + margin: 1px; + margin-inline-start: 0; + } + + .dx-htmleditor-toolbar-wrapper + .dx-quill-container .dx-htmleditor-content { + margin-top: 0; + } + } + + &.dx-htmleditor-filled { + @include texteditor-filled-styling(); + } + + &.dx-htmleditor-underlined { + &::after { + left: 0; + right: 0; + bottom: 0; + height: 0; + width: 100%; + content: ''; + position: absolute; + } + + @include texteditor-underlined-styling(); + + .dx-htmleditor-content { + padding-inline-start: 0; + } + } + + &.dx-state-disabled { + opacity: 1; + } +} + +.dx-invalid.dx-htmleditor { + &.dx-state-hover { + &::after { + border-bottom-color: $texteditor-invalid-faded-border-color; + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom: 2px solid; + border-bottom-color: $texteditor-invalid-focused-border-color; + } + } +} + +.dx-htmleditor-content { + line-height: $fluent-line-height; + padding: $fluent-html-editor-vertical-padding $fluent-html-editor-horizontal-padding; + + &.ql-blank::before { // stylelint-disable-line selector-class-pattern + color: $texteditor-placeholder-color; + } + + code, + .ql-code-block-container { // stylelint-disable-line selector-class-pattern + color: color.change($base-text-color, $alpha: 0.8); + } + + blockquote { + color: color.change($base-text-color, $alpha: 0.8); + border-inline-start-color: $htmleditor-toolbar-border-color; + } + + .dx-variable { + & > span { + background: $htmleditor-variable-bg; + } + } + + td, + th { + border-color: $htmleditor-table-border-color; + } +} + +@mixin dx-htmleditor-button-states($default-color, $hover-color, $focused-color) { + background-color: $default-color; + + &.dx-state-hover { + background-color: $hover-color; + } + + &.dx-state-focused { + background-color: $focused-color; + } +} + +.dx-htmleditor-toolbar { + background-color: transparent; +} + +.dx-htmleditor-toolbar-format { + &.dx-dropdowneditor.dx-editor-filled { + background-color: transparent; + + &::after { + border-bottom-color: transparent; + } + } + + &.dx-color-format, + &.dx-background-format { + .dx-button-content { + padding-bottom: $fluent-button-vertical-padding - 3px; + } + } + + &.dx-size-format { + width: $fluent-toolbar-size-editor-width; + } +} + +.dx-htmleditor-toolbar-separator { + height: math.div($fluent-toolbar-height, 2); + border-inline-start-color: $htmleditor-toolbar-border-color; +} + +.dx-htmleditor-toolbar-menu-separator { + border-top-color: $htmleditor-toolbar-border-color; + margin-top: $fluent-html-editor-toolbar-menu-separator-margin; + margin-bottom: $fluent-html-editor-toolbar-menu-separator-margin; +} + +.dx-resize-frame { + border-color: $htmleditor-resize-frame-border-color; + + .dx-resizable-handle-corner-top-right, + .dx-resizable-handle-corner-top-left, + .dx-resizable-handle-corner-bottom-right, + .dx-resizable-handle-corner-bottom-left { + background-color: $htmleditor-resize-handle-bg; + } + + .dx-resizable-handle-top, + .dx-resizable-handle-left, + .dx-resizable-handle-right, + .dx-resizable-handle-bottom { + &::after { + background-color: $htmleditor-resize-handle-bg; + } + } +} + +.dx-htmleditor-add-image-popup > .dx-overlay-content > .dx-popup-content { + .dx-collection .dx-field-item:not(.dx-last-col) { + padding-inline-end: $fluent-html-editor-add-image-dialog-base-padding; + } + + .dx-fix-ratio-container { + .dx-textbox { + width: calc(100% - $fluent-button-height - $fluent-html-editor-add-image-dialog-base-padding); + } + + .dx-buttongroup { + margin-inline-start: $fluent-html-editor-add-image-dialog-base-padding; + width: $fluent-button-height; + margin-top: math.div($fluent-base-inline-widget-height - $fluent-button-height, 2); + } + } + + .dx-collection .dx-field-item:not(.dx-first-col) { + padding-inline-start: 0; + } + + .dx-tabs { + padding: 0 $fluent-html-editor-add-image-dialog-tabs-padding; + } + + .dx-fileuploader-input-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: $fluent-html-editor-add-image-dialog-fileuploader-padding; + border-width: $fluent-html-editor-fileuploader-input-wrapper-border-size; + border-style: dashed; + border-color: $htmleditor-fileuploader-input-wrapper-border-color; + border-radius: $fluent-html-editor-fileuploader-input-wrapper-border-radius; + background-color: $htmleditor-fileuploader-input-wrapper-bg-color; + + &::after, + &::before { + content: none; + } + + .dx-fileuploader-input-label { + text-align: center; + border-width: 0; + } + } +} + +.dx-htmleditor-add-image-popup { + .dx-fileuploader-dragover { + .dx-fileuploader-input { + padding-top: $fluent-fileuploader-vertical-padding; + padding-bottom: $fluent-fileuploader-vertical-padding + 1px; + } + + .dx-fileuploader-content { + background-color: color.change($htmleditor-border-color, $alpha: 0.8); + } + } +} + +.dx-formdialog-field-target .dx-field-item-content { + text-align: start; +} + +.dx-mention { + background-color: $htmleditor-mention-bg; +} + +.dx-suggestion-list-wrapper { + @include dx-dropdownlist-list-appearance(); +} + +.dx-table-resize-frame { + > .dx-draggable-dragging + .dx-htmleditor-highlighted-column, + > .dx-draggable-dragging + .dx-htmleditor-highlighted-row { + background-color: color.change($base-accent, $alpha: 0.5); + } +} + +.dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content { + box-shadow: $fluent-popup-content-shadow; +} + +.dx-aidialog-controls { + gap: $fluent-aidialog-selects-gap; + + .dx-selectbox { + max-width: calc(50% - $fluent-aidialog-selects-gap * 0.5); + } +} + +.dx-aidialog-content { + padding: $fluent-aidialog-content-padding; + gap: $fluent-aidialog-content-gap; +} + +.dx-aidialog { + .dx-pending-indicator { + @include dx-pending-indicator-centered(); + } + + &.dx-popup-wrapper > .dx-overlay-content { + border-radius: $fluent-aidialog-border-radius; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss new file mode 100644 index 000000000000..d21b20d145f6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss @@ -0,0 +1,43 @@ +@use "../sizes" as *; +@use "../toolbar/sizes" as *; + +// adduse + +$fluent-toolbar-size-editor-width: null !default; +$fluent-html-editor-vertical-padding: null !default; +$fluent-html-editor-horizontal-padding: null !default; +$fluent-html-editor-add-image-dialog-fileuploader-padding: null !default; +$fluent-html-editor-toolbar-menu-separator-margin: 4px !default; +$fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default; +$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default; +$fluent-html-editor-add-image-dialog-tabs-padding: null !default; +$fluent-aidialog-selects-gap: null !default; +$fluent-aidialog-content-gap: null !default; +$fluent-aidialog-content-padding: null !default; +$fluent-aidialog-border-radius: null !default; + +@if $size == "default" { + $fluent-toolbar-size-editor-width: 120px !default; + $fluent-html-editor-vertical-padding: 16px !default; + $fluent-html-editor-horizontal-padding: 16px !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px !default; + $fluent-html-editor-add-image-dialog-tabs-padding: 14px !default; + $fluent-aidialog-selects-gap: 8px !default; + $fluent-aidialog-content-gap: 16px !default; + $fluent-aidialog-content-padding: 16px 24px !default; + $fluent-aidialog-border-radius: $base-border-radius * 2 !default; +} + +@else if $size == "compact" { + $fluent-toolbar-size-editor-width: 90px !default; + $fluent-html-editor-vertical-padding: 12px !default; + $fluent-html-editor-horizontal-padding: 12px !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px !default; + $fluent-html-editor-add-image-dialog-tabs-padding: 8px !default; + $fluent-aidialog-selects-gap: 4px !default; + $fluent-aidialog-content-gap: 12px !default; + $fluent-aidialog-content-padding: 12px 16px !default; + $fluent-aidialog-border-radius: $base-border-radius !default; +} + +$fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss new file mode 100644 index 000000000000..048a324fbccc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss @@ -0,0 +1,47 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; + +// adduse + + +@include dx-font-icons("dxiconsfluent", "DevExtreme Fluent Icons", "devextreme_fluent_icons", optimizeLegibility); + +.dx-icon { + font-size: $fluent-base-icon-size; + line-height: 1; + white-space: nowrap; + font-feature-settings: 'liga'; +} + +.dx-tab { + .dx-icon, + &.dx-tab-selected .dx-icon { + background-size: 100% 100%; + background-position: 50% 50%; + } +} + +.dx-scrollview-pulldown { + background-image: $scrollview-pulldown-path; + background-position: 0 0; + background-repeat: no-repeat; +} + +.dx-loadindicator-image { + background-position: center center; + background-repeat: no-repeat; +} + +.dx-loadindicator-image-small { + background-position: center center; + background-repeat: no-repeat; +} + +.dx-loadindicator-image-large { + background-position: center center; + background-repeat: no-repeat; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss new file mode 100644 index 000000000000..5037e8368958 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss @@ -0,0 +1,20 @@ +@use "../colors" as *; +@use "sass:color"; +@use "../color" as extcolor; + +// adduse + +$informer-error-color: $base-invalid-color !default; +$informer-error-background-color: null !default; +$informer-info-color: $base-text-color !default; +$informer-info-background-color: null !default; + +@if $mode == "light" { + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%); + $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl); +} + +@if $mode == "dark" { + $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%); + $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss new file mode 100644 index 000000000000..3fb9269a558a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss @@ -0,0 +1,18 @@ +@use "../../base/informer"; +@use "colors" as *; +@use "sizes" as *; +@use "../../base/informer/mixins" as *; + +// adduse + +@include informer( + $informer-error-color, + $informer-error-background-color, + $informer-info-color, + $informer-info-background-color, + $informer-border-radius, + $informer-icon-size, + $informer-padding-inline, + $informer-padding-block, + $informer-column-gap, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss new file mode 100644 index 000000000000..9c7a933950de --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss @@ -0,0 +1,24 @@ +@use "../common/sizes" as *; +@use "../sizes" as *; + +// adduse + +$informer-icon-size: $fluent-base-icon-size !default; +$informer-padding-inline: null !default; +$informer-padding-block: null !default; +$informer-column-gap: null !default; +$informer-border-radius: null !default; + +@if $size == "default" { + $informer-padding-inline: 12px !default; + $informer-padding-block: 8px !default; + $informer-column-gap: 6px !default; + $informer-border-radius: 4px !default; +} + +@else if $size == "compact" { + $informer-padding-inline: 8px !default; + $informer-padding-block: 4px !default; + $informer-column-gap: 4px !default; + $informer-border-radius: 3px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss new file mode 100644 index 000000000000..6966ae38f168 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss @@ -0,0 +1,79 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; + +// adduse + +/** +* $name 10. Item text color +* $type color +*/ +$list-normal-color: null !default; + +/** +* $name 20. Group border color +* $type color +*/ +$list-border-color: $base-border-color !default; + +/** +* $name 20. Group header background color +* $type color +*/ +$list-group-header-bg: transparent !default; + +/** +* $name 30. Hovered state item background color +* $type color +*/ +$list-item-hover-bg: $base-hover-bg !default; + +/** +* $name 30. Selected state item background color +* $type color +*/ +$list-item-selected-bg: $base-selected-bg !default; +$list-item-selected-hover-bg: $list-item-hover-bg !default; +$list-item-focused-selected-bg: $base-active-bg !default; +$list-item-hover-color: $base-hover-color !default; +$list-header-indicator-color: $base-icon-color !default; + +/** +* $name 40. Active state item background color +* $type color +*/ +$list-item-active-bg: $base-active-bg !default; +$list-holdmenu-bg: $base-bg !default; +$list-holdmenu-border-color: $list-border-color !default; +$list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.12) !default; +$list-menu-button-default-color: $button-default-color !default; +$list-menu-button-default-bg: $button-default-bg !default; +$list-menu-button-delete-bg: $base-danger !default; +$list-item-ghost-bg: $base-element-bg !default; +$list-item-ghost-color: $base-label-color !default; +$list-item-ghost-border-color: $base-accent !default; +$list-icon-color: $base-icon-color !default; + +$base-select-all-separator-color: $base-separator-color !default; + +@if $mode == "light" { + $list-normal-color: color.adjust($base-text-color, $lightness: 11.76%, $space: hsl) !default; +} + +@if $mode == "dark" { + $list-normal-color: color.adjust($base-text-color, $lightness: -16.08%, $space: hsl) !default; +} + +/** +* $name 10. Group header text color +* $type color +*/ +$list-group-color: $base-text-color !default; + +/** +* $name 25. Expanded group header text color +* $type color +*/ +$list-expanded-group-color: $list-group-color !default; +$list-item-selected-color: $list-normal-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss new file mode 100644 index 000000000000..5e06b6480b2b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss @@ -0,0 +1,532 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../button/sizes" as *; +@use "../button/mixins" as *; +@use "../checkBox/colors" as *; +@use "../textEditor/sizes" as *; +@use "../../base/list" as *; +@use "../../base/list/mixins" as *; +@use "../radioGroup/colors" as *; + +// adduse +@use "../badge"; + +$fluent-list-item-border-width: 1px; +$fluent-list-border-width: 1px; +$fluent-list-border: $fluent-list-border-width solid; +$fluent-list-item-border: $fluent-list-item-border-width solid; + +.dx-state-disabled { + &.dx-list { + opacity: 1; + + .dx-list-item { + opacity: 1; + color: $base-foreground-disabled; + } + } + + .dx-list-select-all-label { + color: $base-foreground-disabled; + + &::after { + color: $base-border-color-disabled; + } + } + + .dx-list-item-chevron { + color: $base-foreground-disabled; + } + + .dx-list-reorder-handle { + &::before { + color: $base-foreground-disabled; + } + } +} + +.dx-list-item-chevron-container { + padding-inline: $fluent-list-item-vertical-padding; +} + +.dx-list-item-chevron { + @include dx-icon(chevronnext); + @include dx-icon-sizing($fluent-base-icon-size); + + display: flex; + align-items: center; + color: $list-icon-color; +} + +.dx-list-item-badge-container { + padding-inline-end: $fluent-list-item-horizontal-padding; +} + +.dx-list-item-icon-container { + width: $fluent-base-icon-size + $fluent-list-item-horizontal-padding; + height: $fluent-base-icon-size; + vertical-align: bottom; +} + +.dx-list-item { + display: flex; + align-items: center; + justify-content: center; +} + +.dx-list-item-icon { + @include dx-icon-sizing($fluent-base-icon-size); +} + +.dx-list-select-all, +.dx-list-item, +.dx-list-group-header { + position: relative; +} + +.dx-list-group-body { + display: flex; + flex-direction: column; + row-gap: $fluent-list-item-gap; +} + +.dx-list { + .dx-list-group-header-indicator { + display: none; + } +} + +.dx-list-collapsible-groups { + .dx-list-group-header { + &::before { + content: none; + } + } +} + +@mixin item-states() { + &.dx-list-item-selected { + background-color: $list-item-selected-bg; + color: $list-item-selected-color; + + &.dx-state-hover:not(.dx-state-focused) { + background-color: $list-item-selected-hover-bg; + color: $list-item-selected-color; + } + } + + &.dx-state-focused { + background-color: $list-item-hover-bg; + color: $list-item-hover-color; + } + + &.dx-state-focused.dx-list-item-selected { + background-color: $list-item-focused-selected-bg; + color: $list-item-selected-color; + } + + &.dx-state-active { + background-color: $list-item-active-bg; + + .dx-list-slide-item-content { + background-color: $list-item-active-bg; + } + } +} + +@mixin dx-list-sizing($item-horizontal-padding) { + .dx-list { + border: none; + + .dx-scrollable-content { + width: 100%; + } + + &.dx-list-with-search .dx-scrollable-wrapper { + height: calc(100% - #{$fluent-texteditor-input-height + $fluent-list-searchbox-margin-bottom}); + } + + .dx-empty-message { + min-height: 2em; + } + + &.dx-list-select-decorator-enabled { + .dx-list-select-all, + .dx-list-item { + .dx-list-select-all-label, + .dx-list-item-content { + padding-inline-start: $fluent-list-vertical-padding; + } + + &.dx-state-hover { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-hover; + } + + .dx-checkbox-icon { + border-color: $checkbox-accent-color-hover; + } + + .dx-radiobutton-checked { + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-hover; + } + } + + .dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $checkbox-accent-color-hover; + } + } + + .dx-checkbox-indeterminate { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-accent-color-hover; + } + } + } + } + + &.dx-state-focused { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-active; + } + + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + } + + .dx-radiobutton-checked { + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-active; + } + } + + .dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $checkbox-accent-color-focused; + } + } + + .dx-checkbox-indeterminate { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-accent-color-focused; + } + } + } + } + } + } + + &:not(.dx-list-select-decorator-enabled) { + .dx-list-item { + @include item-states(); + } + + .dx-list-group-header { + @include item-states(); + + &.dx-state-hover { + background-color: $list-item-hover-bg; + color: $list-item-hover-color; + } + } + } + } + + .dx-list-group { + &:not(.dx-list-group-collapsed) { + &:not(:last-child) { + padding-bottom: $fluent-list-vertical-padding; + border-bottom: $fluent-list-item-border; + border-bottom-color: $list-border-color; + } + } + + &:not(.dx-list-group-collapsed) + &:not(.dx-list-group-collapsed) { + .dx-list-group-header { + border-top-color: transparent; + } + } + + &.dx-list-group-collapsed { + .dx-list-group-header-indicator { + .dx-list-collapsible-groups & { + @include dx-icon(chevronright); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-list-group-header { + color: $list-group-color; + } + } + + &:last-of-type { + .dx-list-item { + &:last-of-type { + margin-bottom: $fluent-list-bottom-padding; + } + } + } + + .dx-list-item { + &:first-of-type { + margin-top: 0; + } + + &:last-of-type { + margin-bottom: 0; + } + } + } + + .dx-list-group-header { + font-weight: 500; + padding: $fluent-list-group-header-vertical-padding $item-horizontal-padding; + background: $list-group-header-bg; + color: $list-expanded-group-color; + border-top: $fluent-list-item-border; + border-top-color: transparent; + display: flex; + align-items: center; + column-gap: $fluent-list-item-horizontal-padding; + + .dx-list-group-header-indicator { + color: $list-header-indicator-color; + + .dx-list-collapsible-groups & { + display: flex; + align-items: center; + + @include dx-icon(chevrondown); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + &::before { + content: none; + } + } + + .dx-list-items { + display: flex; + flex-direction: column; + row-gap: 2px; + + &:not(:first-of-type) { + .dx-list-item { + margin-top: 0; + } + } + } + + .dx-list-item { + border-radius: $base-border-radius; + + @include toggle-delete-icon($list-icon-color); + + &.dx-state-hover, + &.dx-state-active { + background-color: $list-item-hover-bg; + color: $list-item-hover-color; + + .dx-list-switchable-delete-button-inner-wrapper { + background-color: $list-item-hover-bg; + } + } + + &:first-of-type { + border-top: none; + margin-top: $fluent-list-vertical-padding; + } + + &:last-of-type { + border-bottom: none; + margin-bottom: $fluent-list-vertical-padding; + } + + .dx-icon { + color: $list-icon-color; + } + + .dx-icon-toggle-delete { + background-size: 100%; + } + + &.dx-list-item-ghost-reordering { + &.dx-state-focused { + &.dx-state-hover { + color: $list-item-ghost-color; + background: $list-item-ghost-bg; + border: 1px solid; + border-color: $list-item-ghost-border-color; + } + } + } + } + + .dx-list-item, + .dx-list .dx-empty-message { + color: $list-normal-color; + + .dx-list-item-separator-hidden & { + border-top: none; + border-bottom: none; + } + } + + .dx-list-item-content { + padding: $fluent-list-item-vertical-padding $item-horizontal-padding $fluent-list-item-vertical-padding; + } + + .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors + padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding; + } + + .dx-list-next-button .dx-button { + @include dx-button-withtext-sizing(); + + .dx-button-content { + padding-left: $fluent-list-next-button-horizontal-padding; + padding-right: $fluent-list-next-button-horizontal-padding; + } + } + + .dx-list-border-visible { + border: $fluent-list-border; + border-color: $list-border-color; + } + + .dx-list-item-before-bag { + &.dx-list-select-checkbox-container, + &.dx-list-select-radiobutton-container { + display: flex; + flex-shrink: 0; + width: $fluent-list-item-height; + justify-content: center; + align-items: center; + } + + .dx-button.dx-list-toggle-delete-switch { + border: none; + background: transparent; + padding: 0; + box-shadow: none; + + .dx-button-content { + padding: 0; + } + } + } + + .dx-list-select-all { + padding: $fluent-list-item-vertical-padding 0; + position: relative; + display: flex; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background-color: $base-select-all-separator-color; + } + } + + .dx-list-select-all-checkbox { + margin: 0 $item-horizontal-padding - 4px; + } + + .dx-list-select-all-label { + padding: 0 $fluent-list-item-horizontal-padding; + } + + .dx-list-item-after-bag { + padding-inline: $fluent-list-item-vertical-padding; + + &.dx-list-static-delete-button-container { + width: $item-horizontal-padding + $fluent-button-icon-size; + padding: 0; + } + + .dx-list-reorder-handle { + display: flex; + align-items: center; + justify-content: center; + + @include dx-icon(dragvertical); + + color: $list-icon-color; + + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-list-slide-menu-button { + bottom: 1px; + } + + .dx-list-slide-menu-button-delete { + @include dx-icon(trash); + + color: $base-inverted-text-color; + background-color: $list-menu-button-delete-bg; + font-size: $fluent-base-icon-size; + display: table-cell; + vertical-align: middle; + padding: 0 $item-horizontal-padding; + width: $item-horizontal-padding * 2 + $fluent-base-icon-size; + } + + .dx-list-slide-menu-button-menu { + border: 1px solid transparent; + color: $list-menu-button-default-color; + background-color: $list-menu-button-default-bg; + } + + .dx-list-static-delete-button { + padding: 0; + + &.dx-button { + box-shadow: none; + background-color: transparent; + + .dx-button-content { + z-index: 1; + } + } + } + + .dx-list-context-menucontent { + background-color: $list-holdmenu-bg; + border: 1px solid; + border-color: $list-holdmenu-border-color; + border-radius: $base-border-radius; + box-shadow: $list-holdmenu-shadow-color 0 2px 7.2px 0; + + .dx-list-items { + margin-left: $fluent-list-vertical-padding; + margin-right: $fluent-list-vertical-padding; + } + } + + .dx-state-disabled { + &.dx-list-item, + .dx-list-item { + background-color: transparent; + opacity: 0.6; + } + } +} + +@include dx-list-sizing($fluent-list-item-horizontal-padding); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss new file mode 100644 index 000000000000..b88504c794fe --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-list-vertical-padding: 4px !default; +$fluent-list-item-margin-inline: 4px !default; +$fluent-list-bottom-padding: 4px !default; +$fluent-list-searchbox-margin-bottom: 4px !default; +$fluent-list-item-height: null !default; +$fluent-list-item-vertical-padding: null !default; +$fluent-list-item-horizontal-padding: null !default; +$fluent-list-item-gap: 2px !default; +$fluent-list-group-header-vertical-padding: null !default; +$fluent-list-next-button-horizontal-padding: null !default; + +@if $size == "default" { + $fluent-list-item-height: 32px !default; + $fluent-list-item-vertical-padding: 6px !default; + $fluent-list-item-horizontal-padding: 12px !default; + $fluent-list-group-header-vertical-padding: 6px !default; + $fluent-list-next-button-horizontal-padding: 32px !default; +} + +@else if $size == "compact" { + $fluent-list-item-height: 24px !default; + $fluent-list-item-vertical-padding: 4px !default; + $fluent-list-item-horizontal-padding: 8px !default; + $fluent-list-group-header-vertical-padding: 8px !default; + $fluent-list-next-button-horizontal-padding: 24px !default; +} + +:root { + --dx-list-item-padding-inline: #{$fluent-list-item-horizontal-padding}; + --dx-list-item-padding-block: #{$fluent-list-item-vertical-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss new file mode 100644 index 000000000000..4e84470ef9e4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss @@ -0,0 +1,44 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Indicator color +* $type color +*/ +$load-indicator-segment-bg-color: $base-accent !default; + +/** +* $name 20. Indicator background color +* $type color +*/ +$load-indicator-inner-segment-border-color: null !default; +$load-indicator-animation-sparkle-bg-color1: null !default; +$load-indicator-animation-sparkle-bg-color2: null !default; +$load-indicator-animation-sparkle-bg-color3: null !default; + +@if $mode == "light" { + @if $color == "blue" { + $load-indicator-inner-segment-border-color: extcolor.adjust-if-not-achromatic($color: $load-indicator-segment-bg-color, $hue: 2.9deg, $saturation: 2.2%, $lightness: 44.3%) !default; + $load-indicator-animation-sparkle-bg-color1: $base-accent !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: 2.73%, $lightness: 27.25%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 5.61%, $lightness: 38.43%) !default; + } + + @if $color == "saas" { + $load-indicator-inner-segment-border-color: color.mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default; + $load-indicator-animation-sparkle-bg-color1: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -15deg, $saturation: -14.71%, $lightness: -26.47%) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -11.98%, $lightness: 0.78%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -9.09%, $lightness: 11.96%) !default; + } +} + +@if $mode == "dark" { + $load-indicator-inner-segment-border-color: $base-accent-selected !default; + $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -4.40%, $lightness: -21.96%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -8.58%, $lightness: -26.67%) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss new file mode 100644 index 000000000000..1e2bbbf5ee4b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss @@ -0,0 +1,134 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/loadIndicator" as *; + +// adduse + +.dx-loadindicator { + line-height: 100%; +} + +.dx-loadindicator-image { + .dx-loadindicator-content { + animation: none; + } +} + +.dx-loadindicator-icon { + height: 100%; + width: 100%; +} + +.dx-loadindicator-segment { + position: absolute; + height: 100%; + width: 100%; +} + +.dx-loadindicator-segment-inner { + position: relative; + height: 100%; + border-color: $load-indicator-segment-bg-color; + border-width: 0.12em; + border-style: solid; + border-bottom-color: transparent; + animation: none; + border-radius: 50%; +} + +.dx-loadindicator-content-circle { + animation: dx-content-rotation 1568ms linear infinite; + + .dx-loadindicator-icon { + position: absolute; + animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + } + + .dx-loadindicator-segment0, + .dx-loadindicator-segment1 { + width: 50%; + height: 100%; + overflow: hidden; + + .dx-loadindicator-segment-inner { + width: 200%; + } + } + + .dx-loadindicator-segment0 { + left: 0; + + .dx-loadindicator-segment-inner { + border-right-color: transparent; + transform: rotate(-129deg); + animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + } + } + + .dx-loadindicator-segment2 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + box-sizing: border-box; + + .dx-loadindicator-segment-inner { + border-color: $load-indicator-inner-segment-border-color; + width: 100%; + left: 0; + } + } + + .dx-loadindicator-segment1 { + right: 0; + + .dx-loadindicator-segment-inner { + left: -100%; + border-left-color: transparent; + transform: rotate(129deg); + animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + + &::after { + right: 0; + } + } + } +} + +@include loadindicator-animation-sparkle( + $load-indicator-animation-sparkle-bg-color1, + $load-indicator-animation-sparkle-bg-color2, + $load-indicator-animation-sparkle-bg-color3 +); + +@keyframes dx-content-rotation { + to { transform: rotate(360deg); } +} + +@keyframes dx-icon-rotation { + 12.5% { transform: rotate(135deg); } + 25% { transform: rotate(270deg); } + 37.5% { transform: rotate(405deg); } + 50% { transform: rotate(540deg); } + 62.5% { transform: rotate(675deg); } + 75% { transform: rotate(810deg); } + 87.5% { transform: rotate(945deg); } + to { transform: rotate(1080deg); } +} + +@keyframes dx-left-segment-rotation { + from { transform: rotate(130deg); } + 50% { transform: rotate(-5deg); } + to { transform: rotate(130deg); } +} + +@keyframes dx-right-segment-rotation { + from { transform: rotate(-130deg); } + 50% { transform: rotate(5deg); } + to { transform: rotate(-130deg); } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss new file mode 100644 index 000000000000..f307e697495c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss @@ -0,0 +1,12 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; + +// adduse + +/** +* $name 30. Background color +* $type color +*/ +$loadpanel-content-bg: $overlay-content-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss new file mode 100644 index 000000000000..c69a8aafcd70 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/loadPanel"; + +// adduse +@use "../overlay"; + + +.dx-loadpanel-content { + border: none; + background: $loadpanel-content-bg; + padding: $load-panel-padding; + border-radius: $load-panel-border-radius; + box-shadow: $load-panel-box-shadow; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss new file mode 100644 index 000000000000..7100675c9f07 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../colors" as *; +@use "../sizes" as *; + +// adduse + +$load-panel-padding: 12px 24px !default; +$load-panel-border-radius: 8px !default; +$load-panel-box-shadow: 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss new file mode 100644 index 000000000000..308a0a6455a9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../dropDownEditor/colors" as *; + +// adduse + +$lookup-icon-color: $dropdowneditor-icon-color !default; +$lookup-icon-color-active: $dropdowneditor-icon-active-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss new file mode 100644 index 000000000000..c2b0a783278b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss @@ -0,0 +1,175 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../dropDownEditor" as *; +@use "../common/mixins" as *; +@use "../../base/lookup"; +@use "../../base/lookup/mixins" as *; +@use "../overlay/colors" as *; + +// adduse +@use "../dropDownList"; + +.dx-lookup { + .dx-lookup-arrow { + inset-inline-end: $texteditor-spin-button-horizontal-padding; + } + + &.dx-editor-filled, + &.dx-editor-outlined { + .dx-lookup-field { + padding-inline-start: $fluent-filled-texteditor-input-horizontal-padding; + padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size; + } + + &.dx-invalid { + .dx-lookup-field { + padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2; + } + } + } + + &.dx-editor-underlined { + .dx-lookup-field { + padding-inline-start: $fluent-base-standard-texteditor-input-horizontal-padding; + padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size + $texteditor-spin-button-horizontal-padding; + } + + &.dx-invalid { + .dx-lookup-field { + padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2 + $texteditor-spin-button-horizontal-padding; + } + } + } + + &.dx-invalid { + .dx-lookup-arrow::after { + @include dx-invalid-fluent-badge(); + + inset-inline-end: $fluent-base-icon-size; + } + } + + &.dx-valid { + .dx-lookup-arrow::after { + @include dx-valid-fluent-badge(); + + inset-inline-end: $fluent-base-icon-size; + } + } + + &.dx-validation-pending { + .dx-lookup-field-wrapper { + .dx-pending-indicator { + @include dx-pending-indicator-fluent(); + + inset-inline-end: $fluent-base-icon-size; + } + } + } +} + +.dx-lookup-field { + min-height: $lookup-field-height; + line-height: $fluent-texteditor-line-height; + padding-top: $fluent-filled-texteditor-input-top-padding; + padding-bottom: $fluent-filled-texteditor-input-bottom-padding; + + &::before { + line-height: normal; + } + + .dx-texteditor { + border: none; + + &::before, + &::after { + content: none; + } + + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active, + &.dx-state-disabled, + &.dx-state-readonly, + &.dx-state-readonly.dx-state-hover, + & { + background-color: transparent; + } + } +} + +@include dx-lookup-arrow( + spindown, + "\f001", + $fluent-base-icon-size, + $lookup-icon-color, + $lookup-icon-color-active, + $fluent-base-icon-size, +); + +.dx-lookup-popup-wrapper { + @include dx-dropdownlist-list-appearance(); + + .dx-list-item { + border-top: none; + + &:last-of-type { + border-bottom: none; + } + } + + .dx-popup-content { + top: 0; + padding: 0; + } + + .dx-popup-title + .dx-popup-content { + top: $fluent-lookup-popup-content-top; + } + + &.dx-popup-wrapper { + .dx-overlay-content { + overflow: visible; + } + } + + .dx-popover-arrow { + display: block; + + &::after { + box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12); + background: $overlay-content-bg; + border-top-right-radius: $lookup-arrow-border-radius; + } + } + + &.dx-position-top { + .dx-popover-arrow { + &::after { + border-bottom-left-radius: $lookup-arrow-border-radius; + } + } + } +} + +.dx-lookup-empty { + .dx-lookup-field { + color: $texteditor-placeholder-color; + } +} + +.dx-lookup-popup-search .dx-list { + height: calc(100% - #{$fluent-texteditor-input-height + $lookup-search-padding-vertical + $lookup-search-padding-vertical-top }); +} + +.dx-lookup-search-wrapper { + padding: $lookup-search-padding-vertical $lookup-search-padding-horizontal; + padding-top: $lookup-search-padding-vertical-top; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss new file mode 100644 index 000000000000..f3fd2b58ef3d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss @@ -0,0 +1,23 @@ +@use "../sizes" as *; + +// adduse + +$lookup-field-height: null !default; +$lookup-search-padding-vertical: 4px !default; +$lookup-search-padding-vertical-top: null !default; +$lookup-search-padding-horizontal: null !default; +$lookup-arrow-border-radius: 2px !default; + +$fluent-lookup-popup-content-top: 49px !default; + +@if $size == "default" { + $lookup-field-height: 30px !default; + $lookup-search-padding-horizontal: 12px !default; + $lookup-search-padding-vertical-top: 12px !default; +} + +@else if $size == "compact" { + $lookup-field-height: 22px !default; + $lookup-search-padding-horizontal: 8px !default; + $lookup-search-padding-vertical-top: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss new file mode 100644 index 000000000000..7719b08c6cf0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../colors" as *; +@use "../sizes" as *; +@use "../../base/map"; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss new file mode 100644 index 000000000000..7196c391ae63 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss @@ -0,0 +1,35 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$menu-popup-bg: $base-bg !default; +$menu-item-hover-bg: $base-hover-bg !default; +$menu-item-bg-active: $base-active-bg !default; + +/** +* $name 10. Text color +* $type color +*/ +$menu-color: $base-text-color !default; +$menu-item-expanded-color: $menu-color !default; + +/** +* $name 20. Selected item background color +* $type color +*/ +$menu-item-selected-bg: $base-selected-bg !default; +$menu-popup-border-color: $base-border-color !default; +$menu-separator-bg: $base-border-color !default; +$menu-item-selected-color: $base-text-color !default; +$menu-item-link-color: $base-link-color !default; +$menu-item-focused-selected-bg: null !default; + +@if $mode == "light" { + $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: -9.8%, $space: hsl) !default; +} + +@if $mode == "dark" { + $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss new file mode 100644 index 000000000000..f1321a4c70cc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss @@ -0,0 +1,109 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../menuBase/sizes" as *; +@use "../../base/icon_fonts" as *; + +// adduse +@use "../menuBase" as *; +@use "../../base/menu"; + +.dx-context-menu-container-border { + background-color: transparent; +} + +.dx-context-menu-content-delimiter { + background-color: transparent; +} + +.dx-menu { + color: $menu-color; + + .dx-menu-horizontal { + .dx-menu-item-popout { + margin-inline-start: $fluent-menu-icon-to-text-offset; + display: flex; + align-items: center; + justify-content: center; + + @include dx-icon(spindown); + @include dx-icon-sizing($fluent-button-icon-size); + } + } + + .dx-menu-vertical { + .dx-menu-item-popout { + margin-inline-start: $fluent-menu-icon-to-text-offset; + display: flex; + align-items: center; + justify-content: center; + + @include dx-icon(spinright); + @include dx-icon-sizing($fluent-button-icon-size); + } + } + + .dx-menu-item { + border-radius: $base-border-radius; + + .dx-menu-item-content { + display: flex; + padding: $fluent-menu-vertical-padding $fluent-menu-horizontal-padding; + + .dx-menu-item-popout-container { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: auto; + } + } + + &.dx-menu-item-has-text { + .dx-menu-item-text { + flex: 1 1 auto; + } + + &.dx-menu-item-has-icon { + .dx-icon { + margin-inline-end: $fluent-menu-icon-to-text-offset; + } + } + } + } +} + +.dx-menu-adaptive-mode { + background-color: $menu-popup-bg; + + .dx-treeview { + border: 1px solid; + border-color: $menu-popup-border-color; + border-radius: $base-border-radius; + + &, + &.dx-state-focused { + box-shadow: 0 3px 10px color.change($base-shadow-color, $alpha: 0.1); + } + } + + .dx-treeview-node { + &.dx-state-focused { + .dx-treeview-node .dx-treeview-toggle-item-visibility { + color: inherit; + } + + .dx-treeview-toggle-item-visibility { + color: $menu-popup-bg; + } + } + } + + .dx-treeview-node-container:first-child > .dx-treeview-node { + border-bottom: 1px solid; + border-bottom-color: $menu-popup-border-color + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss new file mode 100644 index 000000000000..9161d6ba6151 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss @@ -0,0 +1,14 @@ +@use "../sizes" as *; + +// adduse + +$fluent-menu-vertical-padding: null !default; + +@if $size == "default" { + $fluent-menu-vertical-padding: 6px !default; +} + +@if $size == "compact" { + $fluent-menu-vertical-padding: 4px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss new file mode 100644 index 000000000000..026f55548d97 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$menu-item-color-disabled: $base-foreground-disabled; + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss new file mode 100644 index 000000000000..8b938749100d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss @@ -0,0 +1,80 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../menu/colors" as *; +@use "../button/sizes" as *; +@use "../common/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/mixins" as *; +@use "../../base/menuBase"; + +// adduse + +.dx-menu-item { + color: $menu-color; + + a { + color: $menu-item-link-color; + } + + &.dx-state-disabled { + color: $menu-item-color-disabled; + } + + &.dx-state-hover { + background-color: $menu-item-hover-bg; + } + + &.dx-state-focused { + background-color: $menu-item-hover-bg; + } + + &.dx-state-active { + background-color: $menu-item-bg-active; + } + + .dx-item-url { + display: inherit; + gap: inherit; + } + + .dx-icon-with-url { + &::before { + display: inline-block; + } + } +} + +.dx-menu-item-selected { + background-color: $menu-item-selected-bg; + color: $menu-item-selected-color; + + &.dx-state-focused { + background-color: $menu-item-focused-selected-bg; + } +} + +.dx-menu-item-expanded, +.dx-menu-item-expanded.dx-state-hover, +.dx-menu-item-expanded.dx-state-focused { + color: $menu-item-expanded-color; + background-color: $menu-item-selected-bg; +} + +.dx-menu-base { + &.dx-state-focused { + outline: none; + } + + .dx-icon { + @include dx-icon-sizing($fluent-button-icon-size); + } + + .dx-menu-item { + .dx-menu-item-content { + line-height: $fluent-menu-item-line-height; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss new file mode 100644 index 000000000000..6a55714929bc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss @@ -0,0 +1,20 @@ +@use "../sizes" as *; + +// adduse + +$fluent-menu-item-line-height: null !default; +$fluent-menu-item-with-icon-horizontal-padding: null !default; +$fluent-menu-horizontal-padding: null !default; +$fluent-menu-icon-to-text-offset: 4px; + +@if $size == "default" { + $fluent-menu-item-line-height: 20px !default; + $fluent-menu-horizontal-padding: 12px !default; + $fluent-menu-item-with-icon-horizontal-padding: 40px !default; +} + +@else if $size == "compact" { + $fluent-menu-item-line-height: 16px !default; + $fluent-menu-horizontal-padding: 8px !default; + $fluent-menu-item-with-icon-horizontal-padding: 32px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss new file mode 100644 index 000000000000..361eff4be843 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/multiView"; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss new file mode 100644 index 000000000000..b3d2482bd0f6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$numberbox-spin-icon-color: $base-spin-icon-color !default; +$numberbox-spin-icon-background-hover: $base-hover-bg !default; +$numberbox-spin-icon-background-active: $base-active-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss new file mode 100644 index 000000000000..8dceccf2fa97 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss @@ -0,0 +1,88 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../../base/numberBox"; + +// adduse +@use "../textEditor" as *; + +.dx-numberbox { + &.dx-editor-outlined, + &.dx-editor-filled { + .dx-numberbox-spin-up { + border-start-end-radius: $base-border-radius; + } + + .dx-numberbox-spin-down { + border-end-end-radius: $base-border-radius; + } + } +} + +.dx-numberbox-spin-container { + overflow: hidden; + width: $fluent-numberbox-spin-container-width; + + .dx-state-disabled & { + opacity: 1; + } +} + +.dx-numberbox-spin-up-icon { + @include dx-icon(spinup); + + color: $numberbox-spin-icon-color; +} + +.dx-numberbox-spin-down-icon { + @include dx-icon(spindown); + + color: $numberbox-spin-icon-color; +} + +.dx-numberbox-spin-up-icon, +.dx-numberbox-spin-down-icon { + @include dx-icon-font-centered-sizing($fluent-base-icon-size); +} + +.dx-numberbox-spin-button { + height: 50%; + + &.dx-state-hover { + background-color: $numberbox-spin-icon-background-hover; + } + + &.dx-state-active { + background-color: $numberbox-spin-icon-background-active; + } + + &.dx-state-disabled { + .dx-numberbox-spin-up-icon, + .dx-numberbox-spin-down-icon { + color: $base-foreground-disabled; + } + } +} + +.dx-numberbox-spin.dx-numberbox-box { + @include validation-icon-position(); +} + +.dx-numberbox-spin-touch-friendly { + @include validation-icon-position(); + + .dx-numberbox-spin-container { + width: $fluent-numberbox-touch-friendly-spin-container-width; + border-inline-start: none; + } + + .dx-numberbox-spin-up-icon, + .dx-numberbox-spin-down-icon { + background-position: center; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss new file mode 100644 index 000000000000..c2fd8daf91af --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss @@ -0,0 +1,15 @@ +@use "../sizes" as *; + +// adduse + +$fluent-numberbox-spin-container-width: 24px !default; +$fluent-numberbox-touch-friendly-spin-container-width: null !default; + +@if $size == "default" { + $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; +} + +@else if $size == "compact" { + $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss new file mode 100644 index 000000000000..8c4c6fffa5fb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss @@ -0,0 +1,26 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Content background color +* $type color +*/ +$overlay-content-bg: $base-bg !default; + +/** +* $name 20. Shader background color +* $type color +*/ +$overlay-shader-bg: null !default; + +@if $mode == "light" { + $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.32) !default; +} + +@if $mode == "dark" { + $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.61) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss new file mode 100644 index 000000000000..1881badf0696 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/overlay"; + +// adduse +.dx-overlay-shader { + background-color: $overlay-shader-bg; +} + +.dx-overlay-wrapper { + @include dx-base-typography(); +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss new file mode 100644 index 000000000000..8868f5b732ac --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 180. Pager selected item text color +* $type color +*/ +$pagination-page-selected-color: $base-inverted-text-color !default; +$pagination-page-hovered-bg: $base-hover-bg !default; + +/** +* $name 190. Pager selected item background color +* $type color +*/ +$pagination-page-selected-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss new file mode 100644 index 000000000000..a77d83fd12a8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss @@ -0,0 +1,98 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/pagination"; +@use "../gridBase/sizes" as *; + +// adduse + + +.dx-pager, +.dx-pagination { + padding: $fluent-pagination-paddings $fluent-grid-base-cell-horizontal-padding; + + &.dx-light-mode { + .dx-page-sizes { + min-width: $fluent-pagination-light-pagesizes-min-width; + } + + .dx-page-index { + min-width: $fluent-pagination-light-pageindex-min-width; + } + + .dx-pages { + .dx-page-indexes { + vertical-align: middle; + } + + .dx-navigate-button, + .dx-light-pages { + vertical-align: middle; + } + } + } + + .dx-pages { + .dx-page { + padding: $fluent-pagination-page-padding; + line-height: $fluent-pagination-page-line-height; + } + + .dx-separator { + padding-left: $fluent-pagination-separator-paddings; + padding-right: $fluent-pagination-separator-paddings; + } + + .dx-navigate-button { + width: 9px; + height: $fluent-pagination-navbutton-height; + padding: $fluent-pagination-navbutton-paddings; + } + + .dx-prev-button { + @include dx-icon(chevronleft); + } + + .dx-next-button { + @include dx-icon(chevronright); + } + + .dx-prev-button, + .dx-next-button { + @include dx-icon-font-centered-sizing($fluent-pagination-navbutton-icon-size); + } + } + + .dx-page, + .dx-page-size { + font-size: $fluent-pagination-page-font-size; + + &:hover { + background-color: $pagination-page-hovered-bg; + } + + border-radius: 20px; + } + + .dx-page-sizes .dx-page-size { + &:first-child, + &.dx-first-child { + margin-left: 0; + } + + padding: $fluent-pagination-page-padding; + line-height: $fluent-pagination-page-line-height; + } + + .dx-pages, + .dx-page-sizes { + .dx-selection { + font-weight: 500; + background-color: $pagination-page-selected-bg; + color: $pagination-page-selected-color; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss new file mode 100644 index 000000000000..67a2a019698a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss @@ -0,0 +1,26 @@ +@use "../sizes" as *; + +// adduse + +$fluent-pagination-paddings: 13px !default; +$fluent-pagination-separator-paddings: 8px !default; +$fluent-pagination-page-padding: 9px 12px !default; +$fluent-pagination-page-line-height: 12px !default; +$fluent-pagination-page-font-size: 12px !default; +$fluent-pagination-navbutton-paddings: $fluent-pagination-page-padding !default; +$fluent-pagination-navbutton-height: 12px !default; +$fluent-pagination-navbutton-icon-size: null !default; +$fluent-pagination-light-pagesizes-min-width: null !default; +$fluent-pagination-light-pageindex-min-width: null !default; + +@if $size == "default" { + $fluent-pagination-navbutton-icon-size: 21px !default; + $fluent-pagination-light-pagesizes-min-width: 62px !default; + $fluent-pagination-light-pageindex-min-width: 32px !default; +} + +@else if $size == "compact" { + $fluent-pagination-navbutton-icon-size: 16px !default; + $fluent-pagination-light-pagesizes-min-width: 42px !default; + $fluent-pagination-light-pageindex-min-width: 27px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss new file mode 100644 index 000000000000..0f07777dabf6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss @@ -0,0 +1,58 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$pivotgrid-area-background: $base-bg !default; +$pivotgrid-border-color: $base-border-color !default; + +/** +* $name 10. Header text color +* $type color +*/ +$pivotgrid-area-color: $base-text-color !default; +$pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default; +$pivotgrid-field-area-box-background-color: null !default; +$pivotgrid-field-area-box-font-weight: 400 !default; +$pivotgrid-data-area-color: $base-text-color !default; + +/** +* $name 20. Total background color +* $type color +*/ +$pivotgrid-totalcolor: $base-bg !default; + +/** +* $name 30. Grand total background color +* $type color +*/ +$pivotgrid-grandtotalcolor: null !default; + +/** +* $name 40. Field area text color +* $type color +*/ +$pivotgrid-field-area-text-color: $base-label-color !default; +$pivotgrid-accent-color: $base-accent !default; +$pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; +$pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; +$pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; +$pivotgrid-position-indicator-color: gray !default; +$pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; + +@if $mode == "light" { + @if $color == "blue"{ + $pivotgrid-grandtotalcolor: $base-hover-bg !default; + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + } + + @if $color == "saas" { + $pivotgrid-grandtotalcolor: color.change($base-hover-bg, $alpha: 0.4) !default; + $pivotgrid-field-area-box-background-color: color.change($base-hover-bg, $alpha: 0.4) !default; + } +} + +@if $mode == "dark" { + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss new file mode 100644 index 000000000000..1293464c8c69 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss @@ -0,0 +1,235 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../gridBase/colors" as *; +@use "../treeView/sizes" as *; +@use "../button/mixins" as *; +@use "../button/colors" as *; +@use "../../base/pivotGrid" as basePivotGrid with ( + $pivotgrid-drag-header-border-color: $pivotgrid-drag-header-border-color, + $pivotgrid-drag-header-first-shadow-color: $pivotgrid-drag-header-first-shadow-color, + $pivotgrid-drag-header-second-shadow-color: $pivotgrid-drag-header-second-shadow-color, + $pivotgrid-border-color: $pivotgrid-border-color, + $pivotgrid-common-left-right-padding: $pivotgrid-common-left-right-padding, + $pivotgrid-area-color: $pivotgrid-area-color, + $header-filter-color: $header-filter-color, + $header-filter-color-empty: $header-filter-color-empty, + $pivotgrid-area-background: $pivotgrid-area-background, + $pivotgrid-common-top-bottom-padding: $area-field-top-bottom-padding, + $pivotgrid-header-top-bottom-padding: $pivotgrid-header-top-bottom-padding, + $pivotgrid-field-indicators-offset: $pivotgrid-field-indicators-offset, + $pivotgrid-indicators-line-height: $pivotgrid-indicators-line-height, + $pivotgrid-totalcolor: $pivotgrid-totalcolor, + $pivotgrid-field-area-text-color: $pivotgrid-field-area-text-color, + $pivotgrid-data-area-color: $pivotgrid-data-area-color, + $pivotgrid-grandtotalcolor: $pivotgrid-grandtotalcolor, + $pivotgrid-accent-color: $pivotgrid-accent-color, + $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding, + $pivotgrid-button-top-padding: $pivotgrid-button-top-padding, +); + +// adduse + + +$fluent-pivotgrid-headers-font-size: 14px; +$fluent-pivotgrid-area-font-size: 13px; +$fluent-pivotgrid-chevron-icon-size: 20px; + +$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15); +$fluent-pivotgridfieldchooser-field-min-height: 36px; + +.dx-pivotgrid-fields-container { + &.dx-drag { + .dx-area-field.dx-area-box { + background-color: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9); + border: 1px solid; + border-color: $base-border-color-disabled; + box-shadow: $fluent-pivotgrid-drag-header-shadow; + } + } + + .dx-area-field.dx-area-box { + color: $pivotgrid-field-area-box-text-color; + background-color: $pivotgrid-field-area-box-background-color; + border-radius: $area-field-border-radius; + border: 1px solid; + border-color: $base-border-color-disabled; + font-size: $fluent-pivotgrid-headers-font-size; + font-weight: $pivotgrid-field-area-box-font-weight; + line-height: 20px; + + .dx-header-filter { + color: $base-accent; + + &.dx-header-filter-empty { + color: $pivotgrid-area-color; + } + } + } + + .dx-sort-up { + @include dx-icon-sizing($fluent-button-icon-size) + } + + .dx-sort-down { + @include dx-icon-sizing($fluent-button-icon-size) + } + + .dx-header-filter { + @include dx-icon-sizing($fluent-button-icon-size) + } +} + + +.dx-pivotgrid { + background-color: $pivotgrid-area-background; + + .dx-pivotgrid-area { + &.dx-pivotgrid-area-data { + font-size: $fluent-pivotgrid-area-font-size; + } + + &.dx-pivotgrid-vertical-headers, + &.dx-pivotgrid-horizontal-headers { + font-size: $fluent-pivotgrid-headers-font-size; + + td { + font-weight: 500; + } + + .dx-grandtotal, + .dx-total { + color: $base-text-color; + } + } + + td { + padding: $fluent-pivotgrid-cell-padding; + + &.dx-pivotgrid-collapsed, + &.dx-pivotgrid-expanded { + padding: $fluent-pivotgrid-expanded-cell-padding; + + > span { + padding: 0 5px 0 10px; + } + } + } + } + + + .dx-area-description-cell { + .dx-pivotgrid-toolbar { + padding-left: 8px; + } + } + + .dx-row-total, + .dx-grandtotal { + &.dx-last-cell { + padding-left: $fluent-pivotgrid-total-text-left-padding; + } + } + + .dx-expand-icon-container { + margin: 0; + + @include dx-icon(chevronright); + + font-size: $fluent-pivotgrid-headers-font-size; + + &::before { + visibility: hidden; + } + } + + .dx-pivotgrid-collapsed .dx-expand { + @include dx-icon(chevronright); + @include dx-icon-font-centered-sizing($fluent-pivotgrid-chevron-icon-size); + + color: $pivotgrid-chevron-icon-color; + } + + .dx-pivotgrid-expanded .dx-expand { + @include dx-icon(chevrondown); + @include dx-icon-font-centered-sizing($fluent-pivotgrid-chevron-icon-size); + + color: $pivotgrid-chevron-icon-color; + } + + .dx-area-tree-view { + td.dx-white-space-column { + width: $pivotgrid-empty-column-width; + min-width: $pivotgrid-empty-column-width; + } + } +} + +.dx-pivotgridfieldchooser { + .dx-area-icon { + width: $fluent-button-icon-size; + height: $fluent-button-icon-size; + font-size: $fluent-button-icon-size; + } + + .dx-area { + .dx-area-caption { + text-transform: uppercase; + font-size: $fluent-pivotgrid-headers-font-size; + font-weight: 500; + color: $pivotgrid-area-color; + vertical-align: middle; + } + + .dx-area-fields { + margin-top: 8px; + } + } + + .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container { + padding-right: 8px; + } + + .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf { + padding-left: 0; + + .dx-checkbox { + left: 8px; + } + } + + .dx-treeview-node-container-opened { + .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf { + padding-left: $fluent-treeview-toggle-item-width; + + .dx-checkbox { + left: $fluent-treeview-checkbox-offset; + } + } + } + + .dx-treeview-item { + min-height: $fluent-pivotgridfieldchooser-field-min-height; + padding: 9px 8px; + + .dx-icon { + margin: 0 5px -1px 0; + + @include dx-icon-sizing($fluent-button-icon-size); + } + } + + .dx-treeview-toggle-item-visibility { + height: $fluent-pivotgridfieldchooser-field-min-height; + } +} + +.dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors + .dx-position-indicator { + background-color: $pivotgrid-position-indicator-color; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss new file mode 100644 index 000000000000..243dd6959ac2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss @@ -0,0 +1,40 @@ +@use "../sizes" as *; + +// adduse + +$fluent-pivotgrid-cell-padding: null !default; +$pivotgrid-common-left-right-padding: null !default; +$fluent-pivotgrid-expanded-cell-padding: null !default; +$fluent-pivotgrid-total-text-left-padding: null !default; +$pivotgrid-header-top-bottom-padding: null !default; +$pivotgrid-button-top-padding: null !default; +$area-field-top-bottom-padding: null !default; + +$pivotgrid-empty-column-width: 19px !default; +$pivotgrid-field-indicators-offset: 6px !default; +$pivotgrid-indicators-line-height: 12px !default; +$pivotgrid-empty-area-text-padding: 5px !default; + +$area-field-border-radius: null !default; + +@if $size == "default" { + $fluent-pivotgrid-cell-padding: 10px 16px !default; + $pivotgrid-common-left-right-padding: 10px !default; + $pivotgrid-header-top-bottom-padding: 14px !default; + $fluent-pivotgrid-expanded-cell-padding: 10px 14px 10px 19px !default; + $fluent-pivotgrid-total-text-left-padding: 22px !default; + $pivotgrid-button-top-padding: 10px !default; + $area-field-border-radius: 6px !default; + $area-field-top-bottom-padding: 5px !default; +} + +@else if $size == "compact" { + $fluent-pivotgrid-cell-padding: 7px 11px !default; + $pivotgrid-common-left-right-padding: 8px !default; + $pivotgrid-header-top-bottom-padding: 5px !default; + $fluent-pivotgrid-expanded-cell-padding: 7px 8px 7px 13px !default; + $fluent-pivotgrid-total-text-left-padding: 16px !default; + $pivotgrid-button-top-padding: 5px !default; + $area-field-border-radius: 4px !default; + $area-field-top-bottom-padding: 1px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss new file mode 100644 index 000000000000..30a8aa194a99 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss new file mode 100644 index 000000000000..a654b9770ca5 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../overlay/colors" as *; +@use "../textEditor/colors" as *; +@use "../../base/popover"; + +// adduse + +.dx-popover-wrapper { + .dx-popup-title { + margin: 0; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss new file mode 100644 index 000000000000..d740b96920d8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss @@ -0,0 +1,31 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 20. Header background color +* $type color +*/ +$popup-title-bg: transparent !default; +$popup-title-color: $base-text-color !default; +$popup-title-border-color: $base-border-color !default; +$popup-bottom-bg: $popup-title-bg !default; +$popup-bottom-color: $base-text-color !default; +$popup-border-radius: $base-border-radius * 2 !default; +$popup-content-shadow-color1: null !default; +$popup-content-shadow-color2: null !default; +$popup-focused-content-shadow-color: null !default; + +@if $mode == "light" { + $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.2) !default; + $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.24) !default; + $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; +} + +@if $mode == "dark" { + $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.4) !default; + $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.48) !default; + $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.48) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss new file mode 100644 index 000000000000..6f33bfad8564 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss @@ -0,0 +1,85 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../overlay/colors" as *; +@use "../toolbar/mixins" as *; +@use "../toolbar/sizes" as *; +@use "../typography/sizes" as *; +@use "../../base/popup"; + +// adduse +@use "../overlay"; + +$fluent-popup-toolbar-label-font-size: $fluent-m-font-size; + +.dx-popup-wrapper { + & > .dx-overlay-content { + background: $overlay-content-bg; + box-shadow: $fluent-popup-content-shadow; + border-radius: $popup-border-radius; + } + + & > .dx-popup-fullscreen { + border-radius: 0; + } + + .dx-state-focused { + &.dx-overlay-content { + box-shadow: $fluent-popup-focused-content-shadow; + } + } +} + +.dx-popup-title { + position: relative; + min-height: 28px; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; + background: $popup-title-bg; + color: $popup-title-color; + + &.dx-toolbar { + @include dx-toolbar-sizing( + $fluent-popup-toolbar-height, + 0 $fluent-popup-toolbar-horizontal-padding, + $fluent-popup-toolbar-label-font-size, + $fluent-popup-toolbar-item-spacing + ); + + box-shadow: none; + } +} + +.dx-popup-content { + padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; + + & > .dx-button { + margin: $fluent-popup-button-margin; + } +} + +.dx-popup-bottom { + background: $popup-bottom-bg; + color: $popup-bottom-color; + + &.dx-toolbar { + @include dx-toolbar-sizing( + $fluent-popup-bottom-toolbar-height, + 0 $fluent-popup-content-withtitle-top-padding $fluent-popup-content-withtitle-bottom-padding, + $fluent-popup-toolbar-label-font-size, + $fluent-popup-toolbar-item-spacing + ); + } +} + +.dx-popup-content.dx-dialog-content { + min-width: 220px - 2 * $fluent-popup-content-padding; + padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; +} + +.dx-dialog-message { + padding: 0; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss new file mode 100644 index 000000000000..93f5409ad501 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss @@ -0,0 +1,50 @@ +@use "../sizes" as *; +@use "colors" as *; + +// adduse + +$fluent-popup-content-padding: null !default; +$fluent-popup-content-vertical-padding: null !default; +$fluent-popup-content-withtitle-top-padding: null !default; +$fluent-popup-content-withtitle-bottom-padding: null !default; +$fluent-popup-toolbar-horizontal-padding: null !default; +$fluent-popup-bottom-toolbar-height: null !default; +$fluent-popup-toolbar-height: null !default; + +$fluent-popup-button-margin: 0 8px !default; +$fluent-popup-toolbar-item-spacing: 8px !default; + +$fluent-popup-content-shadow: null !default; +$fluent-popup-focused-content-shadow: null !default; + +@if $size == "default" { + $fluent-popup-content-padding: 24px !default; + $fluent-popup-content-vertical-padding: 16px !default; + $fluent-popup-content-withtitle-top-padding: 24px !default; + $fluent-popup-content-withtitle-bottom-padding: 16px !default; + + $fluent-popup-toolbar-horizontal-padding: 24px !default; + $fluent-popup-bottom-toolbar-height: 48px !default; + $fluent-popup-toolbar-height: 48px !default; + + $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; +} + +@else if $size == "compact" { + $fluent-popup-content-padding: 16px !default; + $fluent-popup-content-vertical-padding: 12px !default; + $fluent-popup-content-withtitle-top-padding: 16px !default; + $fluent-popup-content-withtitle-bottom-padding: 12px !default; + + $fluent-popup-toolbar-horizontal-padding: 16px !default; + $fluent-popup-bottom-toolbar-height: 36px !default; + $fluent-popup-toolbar-height: 36px !default; + + $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; +} + +:root { + --dx-popup-toolbar-item-padding-inline: #{$fluent-popup-toolbar-item-spacing}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss new file mode 100644 index 000000000000..336b7d3b3de7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss @@ -0,0 +1,40 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Bar background color +* $type color +*/ +$progressbar-bg: null !default; + +/** +* $name 20. Selected range background color +* $type color +*/ +$progressbar-range-bg: $base-accent !default; +$progressbar-container-disabled-bg: $base-background-disabled !default; +$progressbar-range-disabled-bg: $base-foreground-disabled !default; +$progressbar-range-indeterminate-color: $base-accent !default; +$progressbar-range-invalid-color: $base-invalid-color !default; + +$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; +$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%; +$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95%; + +/** +* $name 30. Label color +* $type color +*/ +$progressbar-label-color: $base-text-color !default; + +@if $mode == "light" { + $progressbar-bg: color.adjust($base-typography-bg, $lightness: -7.84%, $space: hsl) !default; +} + +@if $mode == "dark" { + $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss new file mode 100644 index 000000000000..dbcff3a02fbf --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss @@ -0,0 +1,125 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/progressBar"; + +// adduse + +.dx-progressbar-container { + height: $progressbar-height; + background-color: $progressbar-bg; + border-radius: $progressbar-border-radius; +} + +.dx-progressbar-range { + position: relative; + background-color: $progressbar-range-bg; + border-radius: $progressbar-border-radius; + box-sizing: content-box; +} + +.dx-progressbar-animating-container { + height: $progressbar-height; + background-color: $progressbar-bg; + background-size: $progressbar-indeterminate-background-width 5px; + animation: dx-loader 2s linear infinite; + border-radius: $progressbar-border-radius; + + @include gradient-linear($progressbar-interdeterminate-state-gradient); + + background-repeat: repeat; +} + +.dx-invalid { + .dx-progressbar-range { + background-color: $progressbar-range-invalid-color; + } + + .dx-progressbar-animating-container { + @include gradient-linear($progressbar-invalid-interdeterminate-state-gradient); + + background-repeat: repeat; + } +} + +.dx-state-disabled { + &.dx-progressbar { + opacity: 1; + } + + .dx-progressbar-container { + background-color: $progressbar-container-disabled-bg; + } + + .dx-progressbar-range { + background-color: $progressbar-range-disabled-bg; + } + + .dx-progressbar-status { + color: $base-foreground-disabled; + } + + .dx-progressbar-animating-container { + animation: none; + + @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient); + + background-position-x: math.div($progressbar-indeterminate-background-width, 2); + } +} + +.dx-progressbar-status { + padding-top: $progressbar-status-margin-top; + color: $progressbar-label-color; + + .dx-progressbar .dx-position-right & { + padding-top: 0; + } +} + +.dx-rtl { + .dx-progressbar, + &.dx-progressbar { + .dx-progressbar-animating-container { + animation: dx-loader-rtl 2s linear infinite; + + @include gradient-linear($progressbar-interdeterminate-state-gradient); + + background-repeat: repeat; + } + + &.dx-state-disabled { + .dx-progressbar-animating-container { + animation: none; + + @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient); + + background-position-x: math.div($progressbar-indeterminate-background-width, 2); + } + } + } +} + +@keyframes dx-loader { + 0% { + background-position-x: 0; + } + + 100% { + background-position-x: 900%; + } +} + +@keyframes dx-loader-rtl { + 0% { + background-position-x: 0; + } + + 100% { + background-position-x: -900%; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss new file mode 100644 index 000000000000..e845336ff37d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss @@ -0,0 +1,18 @@ +@use "../sizes" as *; + +// adduse + +$progressbar-height: null !default; +$progressbar-border-radius: $base-border-radius !default; +$progressbar-status-margin-top: null !default; +$progressbar-indeterminate-background-width: 90%; + +@if $size == "default" { + $progressbar-height: 4px !default; + $progressbar-status-margin-top: 12px !default; +} + +@else if $size == "compact" { + $progressbar-height: 2px !default; + $progressbar-status-margin-top: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss new file mode 100644 index 000000000000..5550f3f7539f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss @@ -0,0 +1,154 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/radioButton/mixins" as *; +@use "../radioGroup/colors" as *; +@use "../../base/radioButton"; + +// adduse + +@include dx-radiobutton-icon-mixin( + $fluent-radiobutton-size, + $fluent-radiobutton-border-width, + $fluent-radiobutton-dot-size, + true, +); +@include dx-radiobutton-states-mixin( + $radiogroup-bg, + $radiogroup-border-color, + $radiogroup-readonly-border-color, + null, + null, + $radiobutton-focused-bg, + $radiogroup-accent-color, + $radiobutton-invalid-color, + $radiobutton-invalid-color-hover, + $radiobutton-invalid-color-focused, + 1, + true, +); + +.dx-radiobutton-icon { + &::after { + content: none; + } +} + +.dx-radio-value-container { + padding-inline-end: $fluent-radio-value-container-padding; +} + +.dx-state-readonly { + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + + .dx-radiobutton-icon { + border-color: $base-foreground-disabled; + } + + .dx-radiobutton-checked { + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active { + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + } + } +} + +.dx-radiobutton { + &.dx-state-hover { + .dx-radiobutton-icon { + border-color: $radiogroup-border-color-hover; + } + } + + &.dx-state-active { + .dx-radiobutton-icon { + border-color: $radiogroup-border-color-active; + } + } + + &.dx-state-focused { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-active; + } + } +} + +.dx-radiobutton-checked { + &.dx-state-hover { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-hover; + } + + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-hover; + } + } + + &.dx-state-active, + &.dx-state-focused { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-active; + } + + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-active; + } + } +} + +.dx-invalid { + .dx-state-hover { + &.dx-radiobutton { + .dx-radiobutton-icon { + border-color: $radiobutton-invalid-color-focused; + } + + .dx-radiobutton-icon-dot { + background-color: $radiobutton-invalid-color-focused; + } + } + } + + .dx-state-active, + .dx-state-focused { + &.dx-radiobutton { + .dx-radiobutton-icon { + border-color: $radiobutton-invalid-color-focused; + } + + .dx-radiobutton-icon-dot { + background-color: $radiobutton-invalid-color-focused; + } + } + } + + &.dx-state-readonly { + .dx-radiobutton { + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + } + } +} + +.dx-state-disabled { + .dx-radiobutton { + color: $base-foreground-disabled; + + .dx-radiobutton-icon { + border-color: $base-foreground-disabled; + } + + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss new file mode 100644 index 000000000000..4a1b17b0ebfb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss @@ -0,0 +1,17 @@ +@use "../sizes" as *; + +// adduse + +$fluent-radiobutton-size: 16px !default; +$fluent-radiobutton-dot-size: 10px !default; + +$fluent-radiobutton-border-width: 1px !default; +$fluent-radio-value-container-padding: null !default; + +@if $size == "default" { + $fluent-radio-value-container-padding: 12px !default; +} + +@else if $size == "compact" { + $fluent-radio-value-container-padding: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss new file mode 100644 index 000000000000..ab7616922748 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss @@ -0,0 +1,22 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$radiogroup-accent-color: $base-accent !default; +$radiogroup-accent-color-hover: $base-accent-hover !default; +$radiogroup-accent-color-active: $base-accent-active !default; + +$radiogroup-border-color: $base-border-color-accessible !default; +$radiogroup-border-color-hover: $base-border-color-accessible-hover !default; +$radiogroup-border-color-active: $base-border-color-accessible-focused !default; +$radiogroup-bg: $base-element-bg !default; + +$radiobutton-invalid-color: $base-invalid-color !default; +$radiobutton-invalid-color-hover: $base-invalid-color-hover !default; +$radiobutton-invalid-color-focused: $base-invalid-color-selected !default; + +$radiogroup-readonly-border-color: $radiogroup-border-color !default; + +$radiobutton-focused-bg: color.change($base-text-color, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss new file mode 100644 index 000000000000..61c3887126e9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss @@ -0,0 +1,26 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/radioGroup/mixins" as *; +@use "../../base/radioGroup"; + +// adduse +@use "../radioButton"; +@include dx-radiogroup-mixin( + $fluent-radio-button-vertical-margin, + 0, +); + +.dx-radiogroup { + &.dx-state-disabled { + opacity: 1; + } +} + +.dx-radiogroup-horizontal { + .dx-collection { + column-gap: 16px; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss new file mode 100644 index 000000000000..68d4e89dac25 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss @@ -0,0 +1,17 @@ +@use "../sizes" as *; + +// adduse + +$fluent-radio-button-vertical-margin: null !default; +$fluent-radio-group-horizontal-gap: null !default; + +@if $size == "default" { + $fluent-radio-group-horizontal-gap: 16px !default; + $fluent-radio-button-vertical-margin: 12px !default; +} + +@else if $size == "compact" { + $fluent-radio-group-horizontal-gap: 12px !default; + $fluent-radio-button-vertical-margin: 6px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss new file mode 100644 index 000000000000..7f4618192668 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss @@ -0,0 +1,14 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/rangeSlider"; +@use "../slider/sizes" as *; + +// adduse + +.dx-rangeslider-start-handle { + margin-inline-start: math.div(-$fluent-slider-handle-size, 2); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss new file mode 100644 index 000000000000..5bb4ce8cc4d9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss @@ -0,0 +1,45 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../scheduler/sizes" as *; +@use "../../base/recurrenceEditor" as *; + +// adduse + + +$fluent-recurrence-number-box-margin: 11px; +$fluent-recurrence-button-group-padding: 6px; +$fluent-recurrence-radio-group-margin: 15px; + +.dx-recurrence-numberbox-interval { + margin-right: $fluent-recurrence-number-box-margin; +} + +.dx-recurrence-numberbox-interval-label { + font-size: $fluent-base-font-size; + margin-top: $fluent-recurrence-interval-number-box-margin-top; +} + +.dx-recurrence-button-group { + .dx-button-content { + padding: $fluent-recurrence-button-group-padding; + } + + .dx-buttongroup-wrapper > div { + min-width: 0; + } +} + +.dx-recurrence-radiogroup-repeat-type { + margin: $fluent-recurrence-radio-group-margin 0; +} + +.dx-recurrence-datebox-until-date { + margin-top: $fluent-recurrence-until-date-box-top-margin; +} + +.dx-recurrence-numberbox-repeat-count { + margin-top: $fluent-recurrence-count-number-box-top-margin; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss new file mode 100644 index 000000000000..b422f99e08d4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-recurrence-until-date-box-top-margin: null !default; +$fluent-recurrence-count-number-box-top-margin: null !default; +$fluent-recurrence-interval-number-box-margin-top: null !default; + +@if $size == "default" { + $fluent-recurrence-until-date-box-top-margin: 60px !default; + $fluent-recurrence-count-number-box-top-margin: 102px !default; + $fluent-recurrence-interval-number-box-margin-top: 30px !default; +} + +@else if $size == "compact" { + $fluent-recurrence-until-date-box-top-margin: 46px !default; + $fluent-recurrence-count-number-box-top-margin: 78px !default; + $fluent-recurrence-interval-number-box-margin-top: 22px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss new file mode 100644 index 000000000000..bc780273f0e4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss new file mode 100644 index 000000000000..18a739590733 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss @@ -0,0 +1,128 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Border color +* $type color +*/ +$scheduler-base-border-color: $base-border-color !default; +$scheduler-cell-active-bg: null !default; +$scheduler-cell-hover-bg: null !default; +$scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -13%, $space: hsl) !default; + +/** +* $name 20. Hour separator color +* $type color +*/ +$scheduler-accent-border-color: $base-border-color !default; + +/** +* $name 30. Appointment text color +* $type color +*/ +$scheduler-appointment-text-color: null !default; +$scheduler-appointment-focus-color: null !default; + +/** +* $name 40. Appointment background color +* $type color +*/ +$scheduler-appointment-base-color: null !default; + +/** +* $name 50. Appointment start color +* $type color +*/ +$scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; +$scheduler-appointment-active-color: $button-default-outlined-active-bg; + +/** +* $name 60. Focused cell color +* $type color +*/ +$scheduler-workspace-focused-cell-color: null !default; + +/** +* $name 70. First day of month separator color +* $type color +*/ +$scheduler-first-month-border-color: $base-border-color !default; +$scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; +$scheduler-panel-text-color: $base-label-color !default; +$scheduler-workspace-background-color: $base-bg !default; +$scheduler-workspace-accent-color: $base-accent !default; + +/** +* $name 80. Date-time indicator color +* $type color +*/ +$scheduler-current-time-cell-color: $base-accent !default; +$scheduler-time-indicator-color: #eb5757 !default; +$scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; +$scheduler-form-icon-color: $base-icon-color !default; +$scheduler-workspace-month-text-color: $base-text-color !default; +$scheduler-workspace-other-month-text-color: $base-label-color !default; +$scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default; +$scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; +$scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; +$scheduler-header-bg: $base-bg !default; +$scheduler-alldaypanel-bg: $base-element-bg !default; +$scheduler-other-month-cell-opacity: 1 !default; +$scheduler-fill-focused-appointment: false !default; +$scheduler-is-shadow-color-for-focused-state: false !default; +$scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default; + +$scheduler-tooltip-appointment-text-color: $base-text-color !default; +$scheduler-appointment-overlay-bg: $base-bg !default; + +// Agenda +$agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default; +$agenda-appointment-hover-bg: $base-hover-bg !default; +$agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default; +$agenda-appointment-text-color: $base-text-color !default; + +$header-panel-cell-date: null !default; + +@if $mode == "light" { + $scheduler-appointment-text-color: #000 !default; + $header-panel-cell-date: #424242; + + @if $color == "blue"{ + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 48%, $space: hsl) !default; + $scheduler-cell-hover-bg: $base-hover-bg !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; + $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default; + } + + @if $color == "saas" { + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 30%, $space: hsl) !default; + $scheduler-cell-hover-bg: color.adjust($base-hover-bg, $lightness: 4.10%, $space: hsl) !default; + $scheduler-cell-active-bg: extcolor.adjust-if-not-achromatic($color: $base-bg, $hue: 222deg, $saturation: 100%, $lightness: -2%) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 32.53%, $space: hsl) !default; + } +} + +@if $mode == "dark" { + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: -48%, $space: hsl) !default; + $scheduler-appointment-text-color: #fff !default; + $header-panel-cell-date: #adadad; + $scheduler-cell-hover-bg: $base-hover-bg !default; + + @if $color == "blue"{ + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; + $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default; + } + + @if $color == "saas" { + $scheduler-cell-active-bg: color.adjust($base-bg, $lightness: 4.31%, $space: hsl) !default; + $scheduler-workspace-focused-cell-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -7deg, $saturation: -65.00%, $lightness: -41.18%) !default; + } +} + +$scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default; +$scheduler-appointment-focus-color: $scheduler-appointment-text-color; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss new file mode 100644 index 000000000000..a40c6ea98837 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss @@ -0,0 +1,1043 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../list/colors" as *; +@use "../form/sizes" as *; +@use "../radioGroup/sizes" as *; +@use "../toolbar/sizes" as *; +@use '../../base/scheduler/layout/header' as *; +@use "../../base/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/scheduler" as baseScheduler with ( + $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color, + $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg, + $scheduler-tooltip-list-focused-bg: $list-item-hover-bg, + $scheduler-appointment-base-color: $scheduler-appointment-base-color, + $scheduler-appointment-start-color: $scheduler-appointment-start-color, + $scheduler-appointment-active-color: $scheduler-appointment-active-color, + $scheduler-base-border-color: $scheduler-base-border-color, + $scheduler-accent-border-color: $scheduler-accent-border-color, + $scheduler-current-time-cell-color: $scheduler-current-time-cell-color, + $scheduler-time-indicator-color: $scheduler-time-indicator-color, + $scheduler-time-indicator-background-color: $scheduler-time-indicator-background-color, + $scheduler-workspace-background-color: $scheduler-workspace-background-color, + $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity, + $scheduler-workspace-month-text-color: $scheduler-workspace-month-text-color, + $scheduler-workspace-accent-color: $scheduler-workspace-accent-color, + $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color, + $scheduler-panel-text-color: $scheduler-panel-text-color, + $scheduler-left-column-width: $scheduler-left-column-width, + $scheduler-timeline-cell-height: $scheduler-timeline-cell-height, + $scheduler-workspace-active-cell-color: $scheduler-workspace-active-cell-color, + $scheduler-workspace-hovered-cell-color: $scheduler-workspace-hovered-cell-color, + $scheduler-workspace-focused-cell-color: $scheduler-workspace-focused-cell-color, + $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color, + $scheduler-appointment-text-color: $scheduler-appointment-text-color, + $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment, + $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state, + $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-hover-text-color, + + $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color, + $agenda-appointment-hover-bg: $agenda-appointment-hover-bg, + $agenda-appointment-active-bg: $agenda-appointment-active-bg, + $agenda-appointment-text-color: $agenda-appointment-text-color, + $agenda-appointment-title-font-size: $agenda-appointment-title-font-size, + + $scheduler-appointment-popup-icon-margin-top: $fluent-scheduler-appointment-popup-icon-margin-top, + $scheduler-appointment-popup-repeat-end-item-height: $fluent-scheduler-appointment-popup-repeat-end-item-height, + $scheduler-appointment-popup-repeat-end-item-vertical-margin: $fluent-radio-button-vertical-margin +); +@use "../button/colors" as *; +@use "../button/mixins" as *; +@use "../tooltip/colors" as *; + +// adduse +@use "../recurrenceEditor" as *; +@use "../scrollable"; + +$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5; + +$fluent-scheduler-month-date-text-size: 14px; + +$scheduler-first-of-month-border: 1px solid; + +$fluent-scheduler-agenda-time-panel-cell-padding: 8px; + +@include baseScheduler.scheduler-mixin(); + +.dx-scheduler-timeline .dx-scheduler-header-panel-cell { + height: auto; +} + +.dx-scheduler-date-time-indicator { + &::before { + display: none; + } +} + +.dx-scheduler-container { + border-radius: $scheduler-border-radius; +} + +.dx-scheduler-time-panel-cell { + height: $fluent-scheduler-workspace-date-table-cell-height; + + &::after { + content: none; + } + + > div { + margin-top: -6px; + font-size: $fluent-scheduler-time-panel-font-size; + + .dx-scheduler-small & { + font-size: $fluent-scheduler-time-panel-font-size - 1; + } + } + + padding-right: $fluent-scheduler-agenda-time-panel-cell-padding; + + .dx-scheduler-small & { + padding-right: 2px; + } + + .dx-rtl & { + padding-left: $fluent-scheduler-agenda-time-panel-cell-padding; + padding-right: 0; + } + + .dx-rtl.dx-scheduler-small & { + padding-left: 2px; + } + + &.dx-scheduler-time-panel-current-time-cell::before { + content: none; + } +} + +.dx-scheduler-date-table-cell { + height: $fluent-scheduler-workspace-date-table-cell-height; +} + +.dx-scheduler-all-day-title { + display: flex; + align-items: center; + justify-content: flex-end; + height: $fluent-scheduler-all-day-table-cell-height; + font-size: $fluent-scheduler-all-day-title-font-size; + border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; + text-align: right; + padding-right: $fluent-scheduler-agenda-time-panel-cell-padding; + + .dx-rtl & { + justify-content: start; + } + + .dx-scheduler-small & { + font-size: $fluent-scheduler-all-day-title-font-size * 0.8; + padding-right: 2px; + } + + .dx-scheduler-work-space-all-day-collapsed & { + height: $fluent-scheduler-collapsed-all-day-table-cell-height; + } +} + +.dx-scheduler-all-day-table { + height: $fluent-scheduler-all-day-table-cell-height; + + .dx-scheduler-work-space-all-day-collapsed & { + height: $fluent-scheduler-collapsed-all-day-table-cell-height; + } +} + +.dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors + padding: $fluent-scheduler-appointment-content-padding; +} + +.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: $fluent-scheduler-recurring-appointment-content-padding; +} + +.dx-rtl .dx-scheduler-appointment-content { + padding: $fluent-scheduler-appointment-content-padding-rtl; +} + +.dx-rtl .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: $fluent-scheduler-recurring-appointment-content-padding-rtl; +} + +.dx-scheduler-appointment-title { + font-size: 12px; +} + +.dx-scheduler-appointment-content-details { + font-size: 10px; +} + +.dx-rtl .dx-scheduler-work-space-day { + .dx-scheduler-all-day-appointment { + .dx-scheduler-appointment-content { + padding: $fluent-scheduler-appointment-content-padding-rtl; + } + } +} + +.dx-scheduler-work-space-week, +.dx-scheduler-work-space-work-week, +.dx-scheduler-work-space-day { + .dx-scheduler-all-day-appointment { + .dx-scheduler-appointment-content { + padding: $fluent-scheduler-appointment-content-padding; + } + } + + .dx-scheduler-date-time-indicator { + height: 2px; + } + + .dx-scheduler-date-table-row:nth-child(even) .dx-scheduler-date-table-cell { + border-top-style: dashed; + } + + .dx-scheduler-appointment { + container-type: size; + + &.dx-scheduler-appointment-recurrence { + @container (max-height: #{$fluent-scheduler-appointment-15min-height}) { + .dx-scheduler-appointment-content { + padding-right: $fluent-scheduler-appointment-10min-recurrence-padding-right; + } + } + + @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) { + .dx-scheduler-appointment-content { + padding-right: $fluent-scheduler-appointment-15min-recurrence-padding-right; + } + } + + @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) { + .dx-scheduler-appointment-content { + padding-right: $fluent-scheduler-appointment-20min-recurrence-padding-right; + } + } + } + + .dx-scheduler-appointment-content { + @container (max-height: #{$fluent-scheduler-appointment-25min-height}) { + display: flex; + align-items: center; + padding: $fluent-scheduler-appointment-short-content-padding; + + .dx-scheduler-appointment-content-details { + display: none; + } + + .dx-scheduler-appointment-recurrence-icon { + top: 50%; + transform: translateY(-50%); + } + } + } + + @container (max-height: #{$fluent-scheduler-appointment-15min-height}) { + .dx-scheduler-appointment-content { + .dx-scheduler-appointment-title { + font-size: $fluent-scheduler-appointment-10min-title-font-size; + line-height: $fluent-scheduler-appointment-10min-title-line-height; + } + + .dx-scheduler-appointment-recurrence-icon { + right: $fluent-scheduler-appointment-10min-icon-right; + font-size: $fluent-scheduler-appointment-10min-icon-font-size; + } + } + } + + @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) { + .dx-scheduler-appointment-content { + .dx-scheduler-appointment-title { + font-size: $fluent-scheduler-appointment-15min-title-font-size; + line-height: $fluent-scheduler-appointment-15min-title-line-height; + } + + .dx-scheduler-appointment-recurrence-icon { + right: $fluent-scheduler-appointment-15min-icon-right; + font-size: $fluent-scheduler-appointment-15min-icon-font-size; + } + } + } + + @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) { + .dx-scheduler-appointment-content { + .dx-scheduler-appointment-recurrence-icon { + right: $fluent-scheduler-appointment-20min-icon-right; + } + } + } + } +} + +.dx-scheduler-header-panel { + margin-top: 0; +} + +.dx-scheduler-header-panel-cell { + font-size: $fluent-scheduler-time-panel-font-size; + padding-bottom: 2px; + padding-left: $header-panel-time-cell-padding; + padding-right: $header-panel-time-cell-padding; + text-align: left; + vertical-align: bottom; + + .dx-rtl & { + text-align: right; + } + + .dx-scheduler-work-space.dx-scheduler-work-space-month & { + height: $header-panel-time-cell-height; + } + + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month & { + @include flex-container(column, nowrap); + } + + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & { + align-items: flex-start; + justify-content: flex-end; + } + + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & { + align-items: flex-end; + + &:not(.dx-scheduler-header-panel-week-cell) { + height: $fluent-scheduler-workspace-month-timeline--time-height; + font-size: $fluent-scheduler-time-panel-font-size; + padding-left: $fluent-scheduler-header-panel-margin; + padding-right: $fluent-scheduler-header-panel-margin; + } + + &.dx-scheduler-header-panel-week-cell { + align-items: flex-start; + display: flex; + } + } + + &.dx-scheduler-header-panel-week-cell { + border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; + flex-flow: column; + justify-content: flex-end; + } + + + &.dx-scheduler-header-panel-current-time-cell { + color: $scheduler-panel-text-color; + + &::before { + content: none; + } + + .dx-scheduler-header-panel-cell-date:first-child { + margin-bottom: 1px; + } + + .dx-scheduler-header-panel-cell-date:last-child { + color: $base-inverted-text-color; + background-color: $scheduler-current-time-cell-color; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: $header-day-element-height; + height: $header-day-element-height; + margin-top: 0; + } + } + + .dx-scheduler-header-panel-cell-date { + display: block; + font-size: 14px; + + .dx-scheduler-small & { + margin: 0 $fluent-scheduler-header-panel-margin * baseScheduler.$scheduler-small-size-factor; + } + + &:last-child { + font-size: $fluent-scheduler-header-panel-day-font-size; + margin-top: 4px; + margin-bottom: 4px; + margin-left: 8px; + color: $header-panel-cell-date; + } + } +} + +.dx-scheduler-timeline { + .dx-scheduler-date-table-cell { + height: $fluent-scheduler-timeline-date-table-cell-height; + } +} + +.dx-scheduler-work-space-day { + &.dx-scheduler-work-space-count { + .dx-scheduler-header-panel { + margin-top: 0; + } + } + + .dx-scheduler-header-panel { + .dx-scheduler-group-row { + &:not(:first-child) { + border-bottom: none; + } + } + } + + &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) { + .dx-scheduler-time-panel, + .dx-scheduler-header-panel-empty-cell { + border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; + } + } +} + +.dx-rtl .dx-scheduler-work-space.dx-scheduler-work-space-month { + .dx-scheduler-appointment-content { + padding: 4px 12px 0 8px; + } + + .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: 4px 12px 0 20px; + } +} + +.dx-scheduler-work-space.dx-scheduler-work-space-month { + .dx-scheduler-date-table-other-month { + color: $scheduler-workspace-other-month-text-color; + } + + .dx-scheduler-header-panel-cell-date:last-child { + color: $header-panel-cell-date; + border-radius: initial; + background-color: initial; + } + + .dx-scheduler-appointment-content { + padding: 4px 8px 0 12px; + font-size: $fluent-scheduler-appointment-month-text-size; + } + + .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: 4px 20px 0 12px; + } + + .dx-scheduler-date-table-first-of-month { + border-left: $scheduler-first-of-month-border; + border-left-color: $scheduler-first-month-border-color; + border-top: $scheduler-first-of-month-border; + border-top-color: $scheduler-first-month-border-color; + } + + .dx-scheduler-header-panel { + border-bottom: none; + } + + .dx-scheduler-date-table-scrollable .dx-scrollable-content { + min-height: 600px; + } + + .dx-scheduler-date-table-cell { + font-size: $fluent-scheduler-month-date-text-size; + text-align: left; + height: 100px; + + > div { + padding: $fluent-scheduler-workspace-month-cell-left-offset; + } + + .dx-rtl & { + text-align: right; + } + } + + + .dx-scheduler-header-panel-current-time-cell { + .dx-scheduler-header-panel-cell-date343 { + border-radius: initial; + background-color: initial; + color: $scheduler-current-time-cell-color; + } + } + + .dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors + padding-left: $fluent-scheduler-workspace-month-cell-left-offset; + + .dx-scheduler-header-panel-cell-date { + margin-left: 0; + line-height: $fluent-scheduler-workspace-month-header-height; + } + } + + .dx-scheduler-date-table-current-date { + color: $scheduler-current-time-cell-color; + } +} + +.dx-scheduler:not(.dx-scheduler-adaptive) { + .dx-scheduler-work-space.dx-scheduler-work-space-day, + .dx-scheduler-work-space.dx-scheduler-work-space-week, + .dx-scheduler-work-space.dx-scheduler-work-space-work-week { + .dx-scheduler-fixed-appointments, + .dx-scheduler-date-table-container { + .dx-scheduler-appointment-collector { + margin: $fluent-scheduler-dropdown-button-vertical-margin; + } + } + } + + .dx-scheduler-work-space.dx-scheduler-work-space-month:not(.dx-rtl) .dx-scheduler-appointment-collector { + margin-left: 52px; + } + + .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-rtl .dx-scheduler-appointment-collector { + margin-right: 52px; + } +} + +.dx-scheduler-adaptive { + .dx-scheduler-work-space-week .dx-scheduler-header-panel-cell { + white-space: nowrap; + } + + .dx-scheduler-appointment-collector { + margin: $fluent-scheduler-dropdown-button-adaptive-margin; + } + + .dx-scheduler-work-space.dx-scheduler-work-space-day, + .dx-scheduler-work-space.dx-scheduler-work-space-week, + .dx-scheduler-work-space.dx-scheduler-work-space-work-week { + .dx-scheduler-fixed-appointments, + .dx-scheduler-date-table-container { + .dx-scheduler-appointment-collector { + margin: $fluent-scheduler-dropdown-button-adaptive-vertical-margin; + } + } + } +} + +.dx-scheduler-appointment-collector { + height: $fluent-scheduler-dropdown-button-height; + margin: $fluent-scheduler-dropdown-button-margin; + position: absolute; + + &.dx-button { + border-radius: $fluent-scheduler-dropdown-button-height; + height: $fluent-scheduler-dropdown-button-height; + min-width: auto; + width: auto; + + &::before { + display: none; + } + + .dx-button-content { + padding: $fluent-scheduler-dropdown-button-padding 0; + font-size: 12px; + } + } +} + +.dx-scheduler-header { + @include header-sizes( + $fluent-scheduler-header-height, + $fluent-scheduler-header-offset, + $fluent-scheduler-toolbar-item-offset, + ); + + .dx-scheduler-navigator-next, + .dx-scheduler-navigator-previous { + @include dx-button-onlyicon-sizing($fluent-scheduler-navigator-icon-font-size); + } + + background-color: $scheduler-header-bg; + border-top-right-radius: $scheduler-border-radius; + border-top-left-radius: $scheduler-border-radius; +} + +.dx-scheduler-group-row { + .dx-scheduler-group-header { + font-weight: 500; + } +} + +.dx-scheduler-group-table, +.dx-scheduler-header-panel { + .dx-scheduler-group-row { + .dx-scheduler-group-header { + font-size: $fluent-scheduler-group-header-font-size; + text-align: left; + border-bottom: 1px solid; + border-bottom-color: $scheduler-base-border-color; + + .dx-scheduler-group-header-content { + padding-left: $fluent-scheduler-header-panel-margin; + + .dx-scheduler-work-space-month &, + .dx-scheduler-agenda & { + padding-left: $fluent-scheduler-workspace-month-cell-left-offset; + + .dx-rtl & { + padding-right: $fluent-scheduler-workspace-month-cell-left-offset; + padding-left: 0; + } + } + + .dx-scheduler-timeline & { + padding-left: 0; + } + } + + .dx-scheduler-timeline & { + vertical-align: top; + + .dx-scheduler-group-header-content div { + top: 8px; + transform: none; + } + } + + .dx-rtl & { + text-align: right; + } + } + } +} + +.dx-scheduler-all-day-panel { + background-color: $scheduler-alldaypanel-bg; + + .dx-scheduler-all-day-table-cell { + border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; + } +} + +.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors + border-bottom-right-radius: $scheduler-border-radius; + border-bottom-left-radius: $scheduler-border-radius; + + &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) { + .dx-scheduler-header-panel, + .dx-scheduler-header-panel-empty-cell { + border-bottom-width: 1px; + } + } + + &.dx-scheduler-work-space-grouped { + .dx-scheduler-all-day-title { + border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; + } + + &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) { + .dx-scheduler-group-header { + border-bottom: none; + } + } + + &.dx-scheduler-agenda { + .dx-scheduler-date-table-cell { + border: none; + } + } + + &.dx-scheduler-timeline .dx-scheduler-group-row th { + .dx-rtl & { + border-left: none; + border-right: none; + } + } + + &.dx-scheduler-work-space-both-scrollbar:not(.dx-scheduler-agenda) { + .dx-scheduler-all-day-panel { + .dx-scheduler-first-group-cell { + border-left: none; + } + } + } + } +} + +.dx-scheduler-work-space-week { + .dx-scheduler-date-table-row:first-child { + border-top: none; + } +} + +.dx-scheduler-all-day-table-cell, +.dx-scheduler-date-table-cell { + &.dx-state-active { + background-color: $scheduler-cell-active-bg; + } + + &.dx-state-hover { + background-color: $scheduler-cell-hover-bg; + color: $scheduler-workspace-hovered-cell-color; + } + + &.dx-scheduler-focused-cell { + box-shadow: none; + } +} + +.dx-scheduler-appointment-popup { + > .dx-overlay-content > .dx-toolbar.dx-widget { + > .dx-toolbar-items-container { + height: $fluent-scheduler-appointment-popup-toolbar-height; + } + } + + .dx-form { + .dx-scheduler-form-icon { + color: $scheduler-form-icon-color; + + &.dx-field-item.dx-flex-layout { + height: $fluent-scheduler-appointment-popup-icon-container-height; + padding-inline-end: $fluent-scheduler-appointment-popup-icon-padding-right; + } + } + + .dx-scheduler-form-icon-sized-gap { + width: $fluent-base-icon-size; + } + + .dx-scheduler-form-subject-group .dx-scheduler-form-icon { + color: $scheduler-appointment-base-color; + } + + .dx-scheduler-days-of-week-buttons { + height: $fluent-toolbar-height; + gap: $fluent-scheduler-appointment-popup-days-of-week-buttons-gap; + } + + .dx-field-item:not(.dx-first-col) { + padding-inline-start: $fluent-scheduler-appointment-popup-item-padding-horizontal; + } + + .dx-field-item:not(.dx-last-col) { + padding-inline-end: $fluent-scheduler-appointment-popup-item-padding-horizontal; + } + + .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align { + height: $fluent-scheduler-appointment-popup-all-day-item-height; + + .dx-field-item-content { + .dx-switch.dx-widget { + margin-bottom: 3px; + } + } + } + + .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button { + height: auto; + + &.dx-button-mode-text.dx-state-focused { + outline: auto; + outline-offset: -2px; + } + } + } +} + +.dx-scheduler-header-panel, +.dx-scheduler-time-panel { + font-size: $fluent-scheduler-workspace-info-text-size; +} + + +.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th, +.dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell { + border-right: 1px solid; + border-right-color: $scheduler-group-separator-border-color; + + &:last-child { + border-right: none; + } + + .dx-rtl & { + border-left: 1px solid; + border-left-color: $scheduler-group-separator-border-color; + border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; + + &:last-child { + border-left: none; + } + } +} + +.dx-scheduler-appointment { + &, + .dx-rtl &, + .dx-scheduler-work-space-month &, + .dx-scheduler-timeline &, + .dx-rtl .dx-scheduler-timeline & { + border-left: $fluent-scheduler-appointment-transparent-left-border; + border-right: $fluent-scheduler-appointment-transparent-right-border; + box-shadow: none; + border-radius: 4px; + + &.dx-state-focused { + color: $scheduler-appointment-focus-color; + } + + &.dx-state-active, + &.dx-resizable-resizing, + &.dx-state-hover, + &.dx-state-hover.dx-resizable { + box-shadow: none; + } + } +} + +.dx-scheduler-fixed-appointments .dx-draggable-dragging .dx-scheduler-appointment { + box-shadow: none; +} + +.dx-scheduler-dropdown-appointment-date { + color: $scheduler-dropdown-appointment-date-color; +} + +.dx-scheduler-work-space-vertical-grouped { // stylelint-disable-line no-duplicate-selectors + &.dx-scheduler-work-space-month { + .dx-scheduler-date-table-scrollable { + border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; + } + } +} + +.dx-scheduler-work-space-both-scrollbar { + .dx-scheduler-all-day-title { + background-color: $scheduler-alldaypanel-bg; + } + + .dx-scheduler-header-panel { + .dx-scheduler-group-header:first-child { + border-left: none; + } + } +} + +.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) { + container-type: size; + + .dx-scheduler-appointment-strip { + display: block; + position: absolute; + width: 6px; + height: 100%; + background-color: $base-accent; + } + + @container (max-width: 8px) { + .dx-scheduler-appointment-strip { + display: none; + } + } +} + +.dx-rtl.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) { + .dx-scheduler-appointment-strip { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } +} + +.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color):not(.dx-rtl) { + .dx-scheduler-appointment-strip { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } +} + +.dx-scheduler-agenda { + .dx-scheduler-group-header { + font-size: $fluent-scheduler-group-header-font-size; + width: $fluent-scheduler-group-header-table-cell-width; + + .dx-scheduler-group-header-content { + padding-top: 2px; + width: $fluent-scheduler-group-header-table-cell-width; + + &::before { + display: none; + } + } + } + + .dx-scheduler-date-table-row, + .dx-scheduler-time-panel-row { + box-shadow: inset 0 -1px 0 0 $base-border-color; + } + + .dx-scheduler-time-panel-cell { + text-align: left; + padding-left: $fluent-scheduler-agenda-time-panel-cell-padding; + padding-right: 0; + + .dx-rtl & { + text-align: right; + padding-right: $fluent-scheduler-agenda-time-panel-cell-padding; + padding-left: 0; + } + + > span { + font-size: $fluent-scheduler-time-panel-font-size; + } + } + + .dx-scheduler-date-table-scrollable { + padding-top: 0; + } + + &.dx-scheduler-work-space-grouped { + .dx-scheduler-group-header { + border-bottom: none; + } + + .dx-scheduler-date-table-row.dx-scheduler-date-table-last-row, + .dx-scheduler-time-panel-row.dx-scheduler-date-table-last-row, + .dx-scheduler-group-table .dx-scheduler-group-row { + border-bottom: none; + + &:not(:last-child) { + box-shadow: inset 0 -1px 0 0 $scheduler-group-separator-border-color; + } + } + } +} + +.dx-scheduler-agenda-nodata { + font-size: $fluent-scheduler-workspace-info-text-size; +} + +.dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block { + .dx-button { + min-width: auto; + padding: 0; + + @include dx-button-flat-color-styling( + $button-default-text-color, + $button-default-text-color-hover, + $button-default-text-color-active, + $button-default-text-bg, + $button-default-text-hover-bg, + $button-default-text-focused-bg, + $button-default-text-active-bg + ); + + .dx-icon { + @include dx-icon-sizing($fluent-base-icon-size); + } + } +} + +.dx-rtl { + .dx-scheduler-work-space-both-scrollbar { + .dx-scheduler-header-panel { + .dx-scheduler-group-header:first-child { + border-right: none; + } + } + } + + &.dx-scheduler-work-space-day { + &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) { + .dx-scheduler-time-panel, + .dx-scheduler-header-panel-empty-cell { + border-left: baseScheduler.$scheduler-base-border; + border-left-color: $scheduler-base-border-color; + border-right: none; + } + } + } +} + +.dx-scheduler-appointment-tooltip-wrapper, +.dx-scheduler-overlay-panel { + .dx-overlay-content { + background-color: $base-bg; + + .dx-popup-content { + padding: 0; + } + + .dx-list { + .dx-list-item { + margin-bottom: 0; + margin-top: 0; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + + &:last-of-type { + border-bottom-left-radius: $tooltip-border-radius; + border-bottom-right-radius: $tooltip-border-radius; + border-bottom: none; + } + + &:first-of-type { + border-top-left-radius: $tooltip-border-radius; + border-top-right-radius: $tooltip-border-radius; + } + + .dx-tooltip-appointment-item { + margin-left: $fluent-scheduler-appointment-tooltip-content-margin-left; + + .dx-tooltip-appointment-item-marker-body { + margin-top: 12px; + width: $fluent-tooltip-marker-dimension; + height: $fluent-tooltip-marker-dimension; + } + + .dx-tooltip-appointment-item-content { + .dx-tooltip-appointment-item-content-subject { + margin-top: $fluent-scheduler-appointment-tooltip-title-margin-top; + font-size: $fluent-scheduler-appointment-tooltip-title-font-size; + font-weight: 600; + } + + .dx-tooltip-appointment-item-content-date { + font-size: $fluent-scheduler-appointment-tooltip-date-font-size; + opacity: 1; + margin-top: 4px; + } + } + + .dx-tooltip-appointment-item-delete-button-container { + padding-top: $fluent-scheduler-appointment-tooltip-remove-padding-top; + } + } + } + } + } +} + +.dx-scheduler-timeline .dx-scheduler-group-flex-container .dx-scheduler-group-header { + width: 100px; +} + +.dx-scheduler-header-panel-empty-cell { + margin-top: 0; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss new file mode 100644 index 000000000000..764fadebbc69 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss @@ -0,0 +1,219 @@ +@use "../sizes" as *; +@use "../button/colors" as *; +@use "../form/sizes" as *; +@use "../toolbar/sizes" as *; + + +$fluent-scheduler-workspace-date-table-cell-height: null !default; +$fluent-scheduler-toolbar-item-offset: null !default; +$fluent-scheduler-navigator-height: null !default; +$fluent-scheduler-header-panel-day-font-size: null !default; +$fluent-scheduler-appointment-tooltip-title-font-size: null !default; +$fluent-scheduler-appointment-tooltip-date-font-size: null !default; +$fluent-scheduler-workspace-month-cell-left-offset: null !default; +$fluent-scheduler-appointment-content-padding: null !default; +$fluent-scheduler-recurring-appointment-content-padding: null !default; +$fluent-scheduler-appointment-content-padding-rtl: null !default; +$fluent-scheduler-recurring-appointment-content-padding-rtl: null !default; +$fluent-scheduler-dropdown-button-height: null !default; +$fluent-scheduler-dropdown-button-padding: null !default; +$fluent-scheduler-dropdown-button-margin: null !default; +$fluent-scheduler-dropdown-button-vertical-margin: null !default; +$fluent-scheduler-dropdown-button-adaptive-margin: null !default; +$fluent-scheduler-dropdown-button-adaptive-vertical-margin: null !default; +$fluent-scheduler-appointment-tooltip-content-margin-left: null !default; +$fluent-tooltip-marker-dimension: null !default; +$fluent-scheduler-appointment-tooltip-title-margin-top: null !default; +$fluent-scheduler-appointment-tooltip-remove-padding-top: null !default; + +$fluent-scheduler-appointment-popup-toolbar-height: null !default; +$fluent-scheduler-appointment-popup-icon-container-height: null !default; +$fluent-scheduler-appointment-popup-icon-padding-right: null !default; +$fluent-scheduler-appointment-popup-icon-margin-top: null !default; +$fluent-scheduler-appointment-popup-item-padding-horizontal: null !default; +$fluent-scheduler-appointment-popup-all-day-item-height: null !default; +$fluent-scheduler-appointment-popup-days-of-week-buttons-gap: null !default; +$fluent-scheduler-appointment-popup-repeat-end-item-height: null !default; + +$fluent-scheduler-appointment-short-content-padding: null !default; +$fluent-scheduler-appointment-15min-height: null !default; +$fluent-scheduler-appointment-20min-height: null !default; +$fluent-scheduler-appointment-25min-height: null !default; +$fluent-scheduler-appointment-10min-recurrence-padding-right: null !default; +$fluent-scheduler-appointment-10min-title-font-size: null !default; +$fluent-scheduler-appointment-10min-title-line-height: null !default; +$fluent-scheduler-appointment-10min-icon-font-size: null !default; +$fluent-scheduler-appointment-10min-icon-right: null !default; +$fluent-scheduler-appointment-15min-recurrence-padding-right: null !default; +$fluent-scheduler-appointment-15min-title-font-size: null !default; +$fluent-scheduler-appointment-15min-title-line-height: null !default; +$fluent-scheduler-appointment-15min-icon-font-size: null !default; +$fluent-scheduler-appointment-15min-icon-right: null !default; +$fluent-scheduler-appointment-20min-recurrence-padding-right: null !default; +$fluent-scheduler-appointment-20min-icon-right: null !default; + +$scheduler-left-column-width: 65px !default; +$fluent-scheduler-timeline-date-table-cell-height: 50px !default; + +/** +* $name 15. Border radius +* $type text +*/ +$scheduler-border-radius: 0 !default; + +$fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size; +$fluent-scheduler-appointment-month-text-size: 12px !default; +$fluent-scheduler-workspace-info-text-size: 16px !default; +$fluent-scheduler-all-day-title-font-size: 12px !default; +$fluent-scheduler-time-panel-font-size: 12px !default; +$fluent-scheduler-header-panel-margin: 14px !default; +$fluent-scheduler-group-header-font-size: 14px !default; +$fluent-scheduler-group-header-table-cell-width: 100px !default; +$fluent-scheduler-appointment-transparent-left-border: 1px solid transparent !default; +$fluent-scheduler-appointment-transparent-right-border: 1px solid transparent !default; +$fluent-scheduler-workspace-month-header-height: 22px !default; +$fluent-scheduler-workspace-month-timeline--time-height: 34px !default; + +$agenda-appointment-title-font-size: null !default; +$fluent-scheduler-header-height: null !default; +$fluent-scheduler-header-offset: null !default; + +$scheduler-timeline-cell-height: 50px !default; + +$header-day-element-height: null !default; + +$fluent-scheduler-collapsed-all-day-table-cell-height: null !default; + +$header-panel-time-cell-height: 32px !default; +$header-panel-time-cell-padding: null !default; + + +@if $size == "default" { + $fluent-scheduler-collapsed-all-day-table-cell-height: 32px !default; + $header-panel-time-cell-padding: 12px !default; + + $header-day-element-height: 26px; + $fluent-scheduler-workspace-date-table-cell-height: 38px !default; + + $fluent-scheduler-navigator-height: 36px !default; + $fluent-scheduler-header-panel-day-font-size: 16px !default; + $fluent-scheduler-header-height: 46px !default; + $fluent-scheduler-header-offset: 0 12px !default; + $fluent-scheduler-toolbar-item-offset: 4px !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default; + $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default; + $fluent-scheduler-workspace-month-cell-left-offset: 8px !default; + + $fluent-scheduler-appointment-content-padding: 6px 8px 6px 12px !default; + $fluent-scheduler-recurring-appointment-content-padding: 6px 20px 6px 12px !default; + $fluent-scheduler-appointment-content-padding-rtl: 6px 12px 6px 8px !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: 6px 12px 6px 20px !default; + $fluent-scheduler-dropdown-button-height: 22px !default; + $fluent-scheduler-dropdown-button-padding: 4px !default; + $fluent-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default; + $fluent-scheduler-dropdown-button-vertical-margin: 5px 3px 3px 3px !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: 6px !default; + $fluent-tooltip-marker-dimension: 12px !default; + $fluent-scheduler-appointment-tooltip-title-margin-top: 0 !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: 1px !default; + + $fluent-scheduler-appointment-popup-toolbar-height: 56px !default; + $fluent-scheduler-appointment-popup-icon-container-height: 32px !default; + $fluent-scheduler-appointment-popup-icon-padding-right: 10px !default; + $fluent-scheduler-appointment-popup-icon-margin-top: 24px !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: 6px !default; + $fluent-scheduler-appointment-popup-all-day-item-height: 40px !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: 32px !default; + + $agenda-appointment-title-font-size: 14px; + + $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; + $fluent-scheduler-appointment-15min-height: 17px !default; + $fluent-scheduler-appointment-20min-height: 24px !default; + $fluent-scheduler-appointment-25min-height: 32px !default; + + $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; + $fluent-scheduler-appointment-10min-title-font-size: 8px !default; + $fluent-scheduler-appointment-10min-title-line-height: 12px !default; + $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-10min-icon-right: 2px !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default; + $fluent-scheduler-appointment-15min-title-font-size: 12px !default; + $fluent-scheduler-appointment-15min-title-line-height: 18px !default; + $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-15min-icon-right: 2px !default; + + $fluent-scheduler-appointment-20min-icon-right: 2px !default; + $fluent-scheduler-appointment-20min-recurrence-padding-right: 18px !default; +} + +@else if $size == "compact" { + $fluent-scheduler-collapsed-all-day-table-cell-height: 24px !default; + $header-panel-time-cell-padding: 8px !default; + + $header-day-element-height: 24px; + $fluent-scheduler-workspace-date-table-cell-height: 28px !default; + + $fluent-scheduler-navigator-height: 28px !default; + $fluent-scheduler-header-panel-day-font-size: 14px !default; + $fluent-scheduler-header-height: 34px !default; + $fluent-scheduler-header-offset: 2px 8px !default; + $fluent-scheduler-toolbar-item-offset: 4px !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default; + $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default; + $fluent-scheduler-workspace-month-cell-left-offset: 4px !default; + + $fluent-scheduler-appointment-content-padding: 4px 6px 4px 8px !default; + $fluent-scheduler-recurring-appointment-content-padding: 4px 16px 4px 8px !default; + $fluent-scheduler-appointment-content-padding-rtl: 4px 8px 4px 6px !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: 4px 8px 4px 16px !default; + $fluent-scheduler-dropdown-button-height: 18px !default; + $fluent-scheduler-dropdown-button-padding: 2px !default; + $fluent-scheduler-dropdown-button-margin: 2px 1px 2px 3px !default; + $fluent-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: 8px !default; + $fluent-tooltip-marker-dimension: 18px !default; + $fluent-scheduler-appointment-tooltip-title-margin-top: 3px !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: 2px !default; + + $fluent-scheduler-appointment-popup-toolbar-height: 48px !default; + $fluent-scheduler-appointment-popup-icon-container-height: 24px !default; + $fluent-scheduler-appointment-popup-icon-padding-right: 8px !default; + $fluent-scheduler-appointment-popup-icon-margin-top: 18px !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: 4px !default; + $fluent-scheduler-appointment-popup-all-day-item-height: 30px !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: 24px !default; + + $agenda-appointment-title-font-size: 13px; + + $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; + $fluent-scheduler-appointment-15min-height: 17px !default; + $fluent-scheduler-appointment-20min-height: 24px !default; + $fluent-scheduler-appointment-25min-height: 32px !default; + + $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; + $fluent-scheduler-appointment-10min-title-font-size: 8px !default; + $fluent-scheduler-appointment-10min-title-line-height: 12px !default; + $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-10min-icon-right: 2px !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default; + $fluent-scheduler-appointment-15min-title-font-size: 12px !default; + $fluent-scheduler-appointment-15min-title-line-height: 12px !default; + $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-15min-icon-right: 5px !default; + + $fluent-scheduler-appointment-20min-recurrence-padding-right: 20px !default; + $fluent-scheduler-appointment-20min-icon-right: 5px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss new file mode 100644 index 000000000000..c152e5624b19 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$scrollview-shadow-color: color.change($base-shadow-color, $alpha: 0.37) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss new file mode 100644 index 000000000000..447aee0272c2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss @@ -0,0 +1,89 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../scrollable/colors" as *; + +// adduse +@use "../scrollable"; +@use "../../base/scrollView"; + +$scrollview-loading-indicator-size: 42px; + +.dx-scrollview-scrollbottom-text, +.dx-scrollview-pull-down-text { + margin-left: 10px; + top: math.div(50px - $fluent-base-font-size, 2); + display: inline-block; + + .dx-rtl & { + margin-left: 0; + margin-right: 10px; + } +} + +.dx-scrollview-pull-down-image { + display: none; +} + +.dx-scrollview-pull-down { + text-align: center; +} + +.dx-scrollable-native.dx-scrollable-native-android .dx-scrollview-pull-down { + background-color: $scrollable-bg; + box-shadow: 0 1px 4px 0 $scrollview-shadow-color; +} + +.dx-scrollview-scrollbottom-loading { + .dx-scrollview-scrollbottom-image { + width: 24px; + height: 24px; + } +} + +.dx-scrollview-scrollbottom-indicator, +.dx-scrollview-pull-down-indicator { + margin-right: 0; + height: $scrollview-loading-indicator-size; + width: $scrollview-loading-indicator-size; + border-radius: math.div($scrollview-loading-indicator-size, 2); + display: inline-flex; + justify-content: center; + flex-direction: column; + align-items: center; + box-shadow: 0 1px 3px 1px $scrollview-shadow-color; + opacity: 1; + + + > .dx-loadindicator { + height: 24px; + width: 24px; + + > .dx-loadindicator-wrapper { + font-size: 24px; + } + } +} + +.dx-scrollview-pull-down-indicator { + position: relative; + margin-left: 0; + margin-top: math.div(-$scrollview-loading-indicator-size, 2); +} + +.dx-scrollview-pull-down-text { + div { + position: relative; + } + + > div { + display: none; + + &.dx-scrollview-pull-down-text-visible { + display: block; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss new file mode 100644 index 000000000000..f690f47a9d06 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss @@ -0,0 +1,23 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$scrollable-bg: $base-element-bg !default; + +/** +* $name 10. Scroll bar background color +* $type color +*/ +$scrollable-scroll-bg: null !default; +$scrollable-scrollbar-bg: transparent !default; + +@if $mode == "light" { + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default; +} + +@if $mode == "dark" { + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss new file mode 100644 index 000000000000..6015612b4384 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss @@ -0,0 +1,30 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/scrollable"; +@use "../../base/scrollable/mixins" as *; + +// adduse + +@include dx-scrollable-scroll-content( + $scrollable-scroll-bg, +); +@include dx-scrollable-scrollbar-hoverable( + $scrollable-scrollbar-bg, + transparent, + $scrollable-scroll-bg, +); +@include dx-scrollable-scrollbar-vertical( + $fluent-scrollbar-size-thin, + $fluent-scrollbar-size, + 0, +); +@include dx-scrollable-scrollbar-horizontal( + $fluent-scrollbar-size-thin, + $fluent-scrollbar-size, + 0, +); +@include dx-scrollable-scrollbars-alwaysvisible($fluent-scrollbar-size-thin); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss new file mode 100644 index 000000000000..6e9d2691cc2d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-scrollbar-size-thin: 6px; +$fluent-scrollbar-size: 13px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss new file mode 100644 index 000000000000..4421c0573c88 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Item background color +* $type color +*/ +$selectbox-list-bg: $base-element-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss new file mode 100644 index 000000000000..168fd4424cc6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss @@ -0,0 +1,25 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; +@use "../../base/selectBox"; + +// adduse + +@use "../dropDownList"; + +.dx-selectbox-popup-wrapper { + .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + } + + .dx-popup-content { + padding: 0; + } + + .dx-list { + background-color: $selectbox-list-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss new file mode 100644 index 000000000000..b9687c354af1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss @@ -0,0 +1,33 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Bar background color +* $type color +*/ +$fluent-slider-bar-bg: $base-border-color-accessible !default; + +/** +* $name 20. Selected range background color +* $type color +*/ +$slider-accent-color: $base-accent !default; +$slider-accent-color-hover: $base-accent-hover !default; +$slider-accent-color-focused: $base-accent-active !default; + +$slider-invalid-color: $base-invalid-color !default; +$slider-invalid-color-hover: $base-invalid-color-hover !default; +$slider-invalid-color-focused: $base-invalid-color-selected !default; + +$fluent-slider-disabled-bg: $base-foreground-disabled !default; +$fluent-slider-bar-disabled-bg: $base-background-disabled !default; + +/** +* $name 30. Slider tooltip text color +* $type color +*/ +$fluent-slider-tooltip-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss new file mode 100644 index 000000000000..4e8dca40441c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss @@ -0,0 +1,170 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/slider"; +@use "../../base/popover/mixins" as *; + +// adduse + +.dx-slider-wrapper { + height: $fluent-slider-wrapper-height; + + @include dx-popover-arrow-size(14px, 2px); +} + +.dx-slider-bar { + margin-top: math.div($fluent-slider-wrapper-height - $fluent-slider-track-height, 2); + margin-right: math.div($fluent-slider-handle-size, 2); + margin-left: math.div($fluent-slider-handle-size, 2); + background: $fluent-slider-bar-bg; + height: $fluent-slider-track-height; + border-radius: $fluent-slider-track-border-radius; +} + +.dx-slider-range { + height: $fluent-slider-track-height; + border-radius: $fluent-slider-track-border-radius; + + &.dx-slider-range-visible { + background: $slider-accent-color; + } +} + +.dx-slider-handle { + margin-top: math.div($fluent-slider-track-height, 2) - math.div($fluent-slider-handle-size, 2); + margin-inline-end: math.div(-$fluent-slider-handle-size, 2); + width: $fluent-slider-handle-size; + height: $fluent-slider-handle-size; + border-radius: $fluent-slider-radius; + border-width: 1px; + border-style: solid; + border-color: $base-border-color; + background-color: $base-element-bg; + + &::after { + position: absolute; + display: block; + inset: 0; + background: $slider-accent-color; + content: ""; + border-radius: $fluent-slider-radius; + border-width: 3px; + border-style: solid; + border-color: $base-element-bg; + } + + &.dx-state-hover { + &::after { + background: $slider-accent-color-hover; + } + } + + &.dx-state-focused { + border-color: $slider-accent-color-focused; + + &::after { + background: $slider-accent-color-focused; + } + } + + .dx-tooltip-wrapper { + .dx-overlay-content { + .dx-popup-content { + line-height: normal; + color: $fluent-slider-tooltip-color; + + .dx-slider-tooltip-position-top & { + padding-top: 6px; + } + } + + &.dx-state-disabled { + .dx-popup-content { + padding-top: math.div($fluent-slider-tooltip-width, 2); + + .dx-slider-tooltip-position-top & { + padding-top: 6px; + padding-bottom: math.div($fluent-slider-tooltip-width, 2); + } + } + } + } + } +} + +.dx-slider-tooltip-position-top { + padding-top: $fluent-slider-tooltip-width + 6; +} + +.dx-slider-tooltip-position-bottom { + padding-bottom: $fluent-slider-tooltip-width + 6; +} + +.dx-slider-label-position-bottom { + .dx-slider-label { + bottom: -18px; + } +} + +.dx-slider-label-position-top { + .dx-slider-label { + top: -15px; + } +} + +.dx-invalid { + .dx-slider-handle { + &::after { + background-color: $base-invalid-color; + } + + &.dx-state-hover { + &::after { + background-color: $slider-invalid-color-hover; + } + } + + &.dx-state-focused { + border-color: $slider-invalid-color-focused; + + &::after { + background-color: $slider-invalid-color-focused; + } + } + } + + .dx-slider-range-visible { + background-color: $slider-invalid-color; + border-color: $slider-invalid-color; + } +} + +.dx-state-disabled { + &.dx-slider, + .dx-slider { + opacity: 1; + + .dx-slider-handle { + opacity: 1; + } + } + + &.dx-slider-handle { + border-color: $fluent-slider-disabled-bg; + + &::after { + background: $fluent-slider-disabled-bg; + } + } + + .dx-slider-bar { + background: $fluent-slider-bar-disabled-bg; + } + + .dx-slider-range.dx-slider-range-visible { + background: $fluent-slider-disabled-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss new file mode 100644 index 000000000000..59a9fe40718d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-slider-handle-size: null !default; +$fluent-slider-wrapper-height: null !default; +$fluent-slider-tooltip-width: null !default; +$fluent-slider-top-tooltip-margin: null !default; + +$fluent-slider-height: 28px !default; // for fieldset height +$fluent-slider-radius: 50% !default; +$fluent-slider-track-height: null !default; +$fluent-slider-track-border-radius: 2px !default; +$fluent-slider-handle-height: null !default; +$fluent-slider-handle-inner-size: null !default; + +@if $size == "default" { + $fluent-slider-track-height: 4px !default; + $fluent-slider-handle-height: 18px !default; + $fluent-slider-handle-size: 20px !default; + $fluent-slider-handle-inner-size: 18px !default; + $fluent-slider-wrapper-height: 32px !default; + $fluent-slider-tooltip-width: 34px !default; + $fluent-slider-top-tooltip-margin: -5px !default; +} + +@else if $size == "compact" { + $fluent-slider-track-height: 2px !default; + $fluent-slider-handle-height: 14px !default; + $fluent-slider-handle-size: 16px !default; + $fluent-slider-handle-inner-size: 14px !default; + $fluent-slider-wrapper-height: 26px !default; + $fluent-slider-tooltip-width: 28px !default; + $fluent-slider-top-tooltip-margin: -2px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss new file mode 100644 index 000000000000..b8ace30a01fb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/sortable" as * with ( + $base-accent: $base-accent, +); + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss new file mode 100644 index 000000000000..63068d06cc1a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss @@ -0,0 +1,4 @@ +@use "../colors" as *; +@use "sass:color"; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss new file mode 100644 index 000000000000..3ae03fb5edbd --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss @@ -0,0 +1,5 @@ +@use "../../base/speechToText"; +@use "colors" as *; +@use "sizes" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss new file mode 100644 index 000000000000..2f5a2c74b993 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss @@ -0,0 +1,4 @@ +@use "../common/sizes" as *; +@use "../sizes" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss new file mode 100644 index 000000000000..635ec575c479 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -0,0 +1,16 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; +@use "../button/colors" as *; + +// adduse + +$speed-dial-action-color: $base-text-color !default; +$speed-dial-action-shadow: 0 2px 6px 0 color.change($base-shadow-color, $alpha: 0.2) !default; +$speed-dial-action-label-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.16) !default; +$speed-dial-action-shading-color: $overlay-shader-bg !default; + +$speed-dial-action-bg: $button-normal-bg !default; +$speed-dial-action-hover-bg: $button-normal-hover-bg !default; +$speed-dial-action-active-bg: $button-normal-active-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss new file mode 100644 index 000000000000..3405d0583b4b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss @@ -0,0 +1,51 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/speedDialAction" as *; +@use "../button/colors" as *; + +// adduse +@use "../overlay"; + +$fluent-fa-button-label-offset: 16px; +$fluent-fa-button-label-padding: 4px 8px; + +@include dx-fa-button-mixin( + $fluent-main-fa-button-size, + $fluent-fa-button-size, + $fluent-base-icon-size, + $fluent-base-font-size, + $fluent-fa-button-label-padding, + $fluent-fa-button-label-offset, + $speed-dial-action-color, + $speed-dial-action-bg, + $speed-dial-action-shadow, + $speed-dial-action-shading-color, + $speed-dial-action-hover-bg, + $speed-dial-action-active-bg, + $speed-dial-action-label-shadow, + $button-default-bg, + $button-default-color +); + +.dx-fa-button { + &.dx-fa-button-main { + .dx-overlay-content { + .dx-fa-button-label { + padding: $fluent-main-fa-button-label-padding; + font-size: $fluent-base-font-size; + font-weight: 500; + } + } + + &.dx-fa-button-with-label { + .dx-overlay-content { + .dx-fa-button-icon { + padding-inline-start: $fluent-main-fa-button-horizontal-padding; + } + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss new file mode 100644 index 000000000000..ea4e78592f90 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss @@ -0,0 +1,22 @@ +@use "../sizes" as *; + +// adduse + +$fluent-main-fa-button-label-padding: null !default; +$fluent-main-fa-button-horizontal-padding: null !default; +$fluent-main-fa-button-size: null !default; +$fluent-fa-button-size: null !default; + +@if $size == "default" { + $fluent-main-fa-button-size: 44px !default; + $fluent-fa-button-size: 44px !default; + $fluent-main-fa-button-horizontal-padding: 16px; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px; +} + +@else if $size == "compact" { + $fluent-main-fa-button-size: 32px !default; + $fluent-fa-button-size: 32px !default; + $fluent-main-fa-button-horizontal-padding: 12px; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss new file mode 100644 index 000000000000..c8ace1165861 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss @@ -0,0 +1,57 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Icon color +* $type color +*/ +$splitter-resize-handle-color: null !default; + +/** +* $name 30. Focused state icon color +* $type color +*/ +$splitter-resize-handle-color-focused: null !default; + +/** +* $name 40. Handle background color +* $type color +*/ +$splitter-resize-handle-bg: null !default; + +/** +* $name 50. Handle hover state background color +* $type color +*/ +$splitter-resize-handle-bg-hover: null !default; + +/** +* $name 60. Handle focused state background color +* $type color +*/ +$splitter-resize-handle-bg-focused: $base-accent !default; + +@if $mode == 'light' { + $splitter-resize-handle-color: $base-icon-color !default; + $splitter-resize-handle-color-focused: $base-inverted-text-color !default; + + $splitter-resize-handle-bg: $base-border-color !default; + $splitter-resize-handle-bg-hover: $base-border-color-hover !default; +} + +@if $mode == 'dark' { + $splitter-resize-handle-color: $base-text-color !default; + $splitter-resize-handle-color-focused: $base-inverted-text-color !default; + + $splitter-resize-handle-bg: $base-border-color !default; + $splitter-resize-handle-bg-hover: $base-border-color-hover !default; +} + +/** +* $name 20. Hover state icon color +* $type color +*/ +$splitter-resize-handle-color-hover: $splitter-resize-handle-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss new file mode 100644 index 000000000000..2293317c0861 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss @@ -0,0 +1,27 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/splitter"; +@use "../../base/splitter/mixins" as *; + +// adduse + +.dx-splitter { + @include resize-handle-states( + $splitter-resize-handle-color, + $splitter-resize-handle-bg, + $splitter-resize-handle-color-hover, + $splitter-resize-handle-bg-hover, + $splitter-resize-handle-color-focused, + $splitter-resize-handle-bg-focused, + ); +} + +.dx-resize-handle { + .dx-icon { + @include dx-icon-sizing($splitter-resize-handle-icon-size); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss new file mode 100644 index 000000000000..6f0cb64e572f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss @@ -0,0 +1,5 @@ +@use "../sizes" as *; + +// adduse + +$splitter-resize-handle-icon-size: 20px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss new file mode 100644 index 000000000000..4157ae022c9d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$splitter-inactive-color: $base-border-color !default; +$splitter-bg: color.change($base-accent, $alpha: 0.5) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss new file mode 100644 index 000000000000..1c3ce7709513 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss @@ -0,0 +1,19 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/splitterBar"; + +// adduse +.dx-splitter-bar { + background-color: $splitter-bg; + + &.dx-splitter-inactive { + background-color: $splitter-inactive-color; + } +} + +.dx-splitter-border { + background-color: transparent; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss new file mode 100644 index 000000000000..3a9178551640 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss @@ -0,0 +1,3 @@ +@use "../sizes" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss new file mode 100644 index 000000000000..210edd8c874a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss @@ -0,0 +1,175 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; + +// adduse + +/** +* $name 10. Active color +* $type color +*/ +$stepper-step-accent-bg: $base-accent !default; + +/** +* $name 20. Hover state active color +* $type color +*/ +$stepper-step-accent-hover-bg: $base-accent-hover !default; + +/** +* $name 30. Invalid color +* $type color +*/ +$stepper-step-danger-bg: $base-danger !default; + +/** +* $name 40. Hover state invalid color +* $type color +*/ +$stepper-step-danger-hover-bg: $base-danger-hover !default; + +/** +* $name 60. Background color +* $type color +*/ +$stepper-step-base-bg: $base-bg !default; + +/** +* $name 70. Hover state background color +* $type color +*/ +$stepper-step-base-hover-bg: $base-hover-bg !default; + +/** +* $name 80. Border color +* $type color +*/ +$stepper-step-base-border-color: $base-border-color !default; + +/** +* $name 90. Hover state border color +* $type color +*/ +$stepper-step-base-hover-border-color: $base-border-color-hover !default; + +/** +* $name 100. Text or icon color +* $type color +*/ +$stepper-step-base-text-color: $base-text-color !default; + +/** +* $name 110. Label text color +* $type color +*/ +$stepper-step-base-label-color: $base-text-color !default; + +/** +* $name 120. Background color +* $type color +*/ +$stepper-step-selected-bg: $stepper-step-accent-bg !default; + +/** +* $name 130. Hover state background color +* $type color +*/ +$stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default; + +/** +* $name 140. Text or icon color +* $type color +*/ +$stepper-step-selected-text-color: $base-inverted-text-color !default; + +/** +* $name 150. Label text color +* $type color +*/ +$stepper-step-selected-label-color: $stepper-step-accent-bg !default; + +/** +* $name 160. Background color +* $type color +*/ +$stepper-step-invalid-bg: $stepper-step-base-bg !default; + +/** +* $name 170. Hover state background color +* $type color +*/ +$stepper-step-invalid-hover-bg: $stepper-step-base-hover-bg !default; + +/** +* $name 180. Border color +* $type color +*/ +$stepper-step-invalid-border-color: $stepper-step-base-border-color !default; + +/** +* $name 190. Hover state border color +* $type color +*/ +$stepper-step-invalid-hover-border-color: $stepper-step-base-hover-border-color !default; + +/** +* $name 200. Text or icon color +* $type color +*/ +$stepper-step-invalid-text-color: $stepper-step-danger-bg !default; + +/** +* $name 210. Hover state text or icon color +* $type color +*/ +$stepper-step-invalid-hover-text-color: $stepper-step-danger-hover-bg !default; + +/** +* $name 220. Invalid label text color +* $type color +*/ +$stepper-step-invalid-label-color: $stepper-step-danger-bg !default; + +/** +* $name 230. Background color +* $type color +*/ +$stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default; + +/** +* $name 240. Hover state background color +* $type color +*/ +$stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default; +$stepper-step-disabled-shadow: $base-bg !default; + +/** +* $name 260. Background color +* $type color +*/ +$stepper-step-disabled-bg: $base-background-disabled !default; + +/** +* $name 270. Text color +* $type color +*/ +$stepper-step-disabled-text-color: $base-foreground-disabled !default; + +/** +* $name 280. Pending color +* $type color +*/ +$stepper-connector-bg: $base-separator-color !default; + +/** +* $name 290. Completed color +* $type color +*/ +$stepper-connector-value-bg: $base-accent !default; + +/** +* $name 300. Shadow color +* $type color +*/ +$stepper-step-shadow-color: $base-typography-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss new file mode 100644 index 000000000000..6a9ab72d97c7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss @@ -0,0 +1,55 @@ +@use "../../base/stepper"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/stepper/mixins" as *; + +// adduse + +@include stepper( + $stepper-padding, +); +@include connector( + $stepper-connector-bg, + $stepper-connector-value-bg, + $stepper-connector-size, + $stepper-connector-padding, + $stepper-connector-thickness, +); +@include step( + $stepper-step-min-size, + $stepper-step-indicator-size, + $stepper-step-indicator-size, + $stepper-step-content-row-gap, + $stepper-step-content-column-gap, + $stepper-step-optional-mark-font-size, + $stepper-step-icon-size, + $stepper-step-transition-duration, +); +@include step-states( + $stepper-step-shadow-color, + $stepper-step-base-bg, + $stepper-step-base-hover-bg, + $stepper-step-base-border-color, + $stepper-step-base-hover-border-color, + $stepper-step-base-text-color, + $stepper-step-base-label-color, + $stepper-step-selected-bg, + $stepper-step-selected-hover-bg, + $stepper-step-selected-text-color, + $stepper-step-selected-label-color, + $stepper-step-selected-font-weight, + $stepper-step-invalid-bg, + $stepper-step-invalid-hover-bg, + $stepper-step-invalid-border-color, + $stepper-step-invalid-hover-border-color, + $stepper-step-invalid-text-color, + $stepper-step-invalid-hover-text-color, + $stepper-step-invalid-label-color, + $stepper-step-invalid-selected-bg, + $stepper-step-invalid-selected-hover-bg, + $stepper-step-disabled-text-color, + $stepper-step-disabled-bg, + $stepper-step-disabled-shadow, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss new file mode 100644 index 000000000000..ffaac27f33cd --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss @@ -0,0 +1,37 @@ +@use "colors" as *; +@use "../colors" as *; +@use "../sizes" as *; +@use "../typography/sizes" as *; + +// adduse + +$stepper-padding: null !default; +$stepper-step-min-size: null !default; +$stepper-step-indicator-size: null !default; +$stepper-step-content-row-gap: null !default; +$stepper-step-content-column-gap: null !default; +$stepper-step-optional-mark-font-size: $fluent-xs-font-size !default; +$stepper-step-icon-size: $fluent-button-icon-size !default; + +$stepper-step-selected-font-weight: 600 !default; +$stepper-step-transition-duration: .4s !default; + +@if $size == "default" { + $stepper-padding: 12px !default; + $stepper-step-min-size: 48px !default; + $stepper-step-indicator-size: 32px !default; + $stepper-step-content-row-gap: 8px !default; + $stepper-step-content-column-gap: 12px !default; +} + +@else if $size == "compact" { + $stepper-padding: 8px !default; + $stepper-step-min-size: 40px !default; + $stepper-step-indicator-size: 24px !default; + $stepper-step-content-row-gap: 6px !default; + $stepper-step-content-column-gap: 8px !default; +} + +$stepper-connector-thickness: 2px !default; +$stepper-connector-size: $stepper-step-indicator-size !default; +$stepper-connector-padding: $stepper-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss new file mode 100644 index 000000000000..2f117d4e3bca --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss @@ -0,0 +1,45 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$switch-accent-color: $base-accent !default; +$switch-accent-color-hover: $base-accent-hover !default; +$switch-accent-color-focused: $base-accent-active !default; + +/** +* $name 20. Track 'OFF' background color +* $type color +*/ +$switch-bg: transparent !default; + +/** +* $name 30. Handle 'OFF' background color +* $type color +*/ +$switch-handle-off-bg: $base-border-color-accessible !default; + +/** +* $name 40. Track 'ON' background color +* $type color +*/ +$switch-on-bg: $base-accent !default; + +/** +* $name 50. Handle 'ON' background color +* $type color +*/ +$switch-handle-on-bg: $base-element-bg !default; +$switch-handle-border-radius: 50% !default; +$switch-on-disabled-bg: $base-background-disabled !default; +$switch-handle-disabled-bg: $base-foreground-disabled !default; +$switch-border-color-disabled: $base-border-color-disabled !default; +$switch-off-border-color: $base-border-color-accessible !default; +$switch-off-border-hover-color: $base-border-color-accessible-hover !default; +$switch-off-border-active-color: $base-border-color-accessible-focused !default; + +$switch-invalid-color: $base-invalid-color !default; +$switch-invalid-color-hover: $base-invalid-color-hover !default; +$switch-invalid-color-focused: $base-invalid-color-selected !default; + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss new file mode 100644 index 000000000000..6c85de952e61 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss @@ -0,0 +1,53 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/switch"; +@use "../../base/switch/mixins" as *; + +// adduse + +$fluent-switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1); +$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1); +$fluent-switch-shadow: none; + +@include dx-switch( + $fluent-switch-width, + $fluent-switch-height, + $switch-padding, + $switch-handle-height, + $switch-container-height, + $switch-container-horizontal-padding, + $switch-container-vertical-margin, + $switch-handle-margin, + $switch-handle-border-radius, + $fluent-switch-transition, +); +@include dx-switch-states-fluent( + $switch-on-disabled-bg, + $switch-handle-disabled-bg, + $fluent-switch-shadow, + $switch-bg, + $switch-on-bg, + $switch-accent-color-hover, + $switch-accent-color-focused, + $fluent-switch-handle-on-shadow, + $switch-handle-off-bg, + $switch-handle-on-bg, + 1px solid, + $switch-off-border-color, + $switch-off-border-hover-color, + $switch-off-border-active-color, + $switch-accent-color, + $switch-invalid-color, + $switch-invalid-color-hover, + $switch-invalid-color-focused, + $switch-border-color-disabled, +); +@include dx-switch-rtl( + $switch-handle-height - $switch-handle-margin, + $fluent-switch-shadow-blur-radius, + $fluent-switch-container-adjustment, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss new file mode 100644 index 000000000000..b3a5482eb57c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-switch-width: null !default; +$switch-handle-margin: null !default; +$switch-padding: 8px !default; +$switch-container-vertical-margin: null !default; +$switch-container-horizontal-padding: null !default; +$fluent-switch-height: null !default; +$switch-handle-height: null !default; +$switch-container-height: null !default; + +$fluent-switch-shadow-blur-radius: 0 !default; +$fluent-switch-container-adjustment: 6px !default; + +@if $size == "default" { + $fluent-switch-width: 40px !default; + $switch-handle-height: 14px !default; + $switch-handle-margin: 3px !default; + $switch-container-vertical-margin: 0 !default; + $switch-container-horizontal-padding: $switch-handle-margin !default; + $fluent-switch-height: 20px !default; + $switch-container-height: $fluent-switch-height !default; +} + +@else if $size == "compact" { + $fluent-switch-width: 32px !default; + $switch-handle-height: 12px !default; + $switch-handle-margin: 2px !default; + $switch-container-vertical-margin: 0 !default; + $switch-container-horizontal-padding: $switch-handle-margin !default; + $fluent-switch-height: 16px !default; + $switch-container-height: $fluent-switch-height !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss new file mode 100644 index 000000000000..31bfdffe7e83 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss @@ -0,0 +1,77 @@ +@use "sass:color"; +@use "sass:selector"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/tabPanel"; + +// adduse + +.dx-tabpanel { + .dx-tabpanel-tab { + flex-basis: unset; + flex-grow: 0; + flex-shrink: 0; + } + + .dx-tabs .dx-tabs-scrollable .dx-tab { + flex-basis: auto; + } + + .dx-tabs-nav-button { + height: auto; + } +} + +.dx-tabpanel-tabs-position-top { + > .dx-tabpanel-tabs { + .dx-tabs { + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-bottom: none; + } + } + } +} + +.dx-tabpanel-tabs-position-bottom { + > .dx-tabpanel-tabs { + .dx-tabs { + border-top: 1px solid; + border-top-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-top: none; + } + } + } +} + +.dx-tabpanel-tabs-position-left { + > .dx-tabpanel-tabs { + .dx-tabs { + border-right: 1px solid; + border-right-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-right: none; + } + } + } +} + +.dx-tabpanel-tabs-position-right { + > .dx-tabpanel-tabs { + .dx-tabs { + border-left: 1px solid; + border-left-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-left: none; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss new file mode 100644 index 000000000000..c8641f539d1a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../colors" as *; +@use "../sizes" as *; +@use "../button/colors" as *; +@use "../button/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/tabs"; +@use "variables/colors" as *; +@use "variables/sizes" as *; +@use "mixins" as *; +@use "layout/tabs" as *; +@use "layout/tab/base" as *; +@use "layout/navigation-button/base" as *; + +// adduse +@use "../scrollable"; +@use "../badge"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss new file mode 100644 index 000000000000..c0cff9f89df7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss @@ -0,0 +1,62 @@ +@use "sass:color"; +@use "../../../colors" as *; +@use "../../../sizes" as *; +@use "../../../button/colors" as *; +@use "../../../button/mixins" as *; +@use "../../../../base/icon_fonts" as *; +@use "../../../../base/tabs"; +@use "../../variables/colors" as *; +@use "../../variables/sizes" as *; +@use "../../mixins" as *; + +// adduse +@use "../../../scrollable"; +@use "../../../badge"; + +.dx-tabs .dx-tabs-nav-button { + box-shadow: none; +} + +.dx-tabs-styling-mode-secondary .dx-tabs-nav-button { + border-radius: $fluent-tab-item-border-radius-secondary; +} + +.dx-tabs-nav-button { + border: none; + height: $fluent-tab-height; + background-color: $tabs-nav-button-bg-color; + + &.dx-button.dx-state-disabled.dx-button-mode-contained { + visibility: hidden; + } + + &.dx-button-has-icon .dx-icon { + width: $fluent-tab-nav-button-icon-width; + height: $fluent-tab-nav-button-icon-height; + font-size: $fluent-tab-nav-button-icon-font-size; + } + + &.dx-state-active { + border: none; + } + + &.dx-state-disabled { + opacity: 1; + background-color: $tabs-tab-background; + + .dx-button-content { + opacity: $tabs-tab-button-disabled-opacity; + } + } + + .dx-button-content { + flex: unset; + padding: $fluent-tab-nav-button-content-padding; + } +} + +.dx-tabs-vertical { + .dx-tabs-nav-button { + padding: $fluent-tab-vertical-nav-button-content-padding; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss new file mode 100644 index 000000000000..4aef73e1ce3a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss @@ -0,0 +1,128 @@ +@use "sass:color"; +@use "sass:string" as string; +@use "../../../colors" as *; +@use "../../../sizes" as *; +@use "../../../button/colors" as *; +@use "../../../button/mixins" as *; +@use "../../../../base/icon_fonts" as *; +@use "../../../../base/tabs"; +@use "../../variables/colors" as *; +@use "../../variables/sizes" as *; +@use "../../mixins" as *; +@use "../../../common/sizes" as *; + +// adduse +@use "../../../scrollable"; +@use "../../../badge"; +@use "styling-mode/primary" as *; +@use "styling-mode/secondary" as *; + + +.dx-tab { + gap: $fluent-tabs-item-gap; + padding: $fluent-tabs-item-padding; + background-color: $tabs-tab-background; + color: $tabs-tab-color; + + &.dx-state-hover { + background-color: $tabs-hovered-tab-bg-color; + } + + &.dx-tab-selected { + color: $tabs-tab-selected-color; + + .dx-icon { + color: $tabs-tab-icon-selected-color; + } + + .dx-tab-text .dx-tab-text-span { + visibility: visible; + + .dx-tab-text-span-pseudo { + visibility: hidden; + } + } + } + + &.dx-state-disabled { + color: $tabs-tab-disabled-color; + + .dx-tab-text .dx-tab-text-span-pseudo { + color: $tabs-tab-disabled-color; + } + + .dx-icon { + color: $tabs-tab-icon-disabled-color; + } + } + + &.dx-state-active { + background-color: $tabs-active-tab-bg-color; + } + + .dx-tab-text { + column-gap: $fluent-base-icon-margin; + row-gap: $fluent-tabs-item-gap; + line-height: $fluent-line-height; + + .dx-tab-text-span { + position: relative; + display: block; + font-weight: $fluent-tab-font-weight-accent; + visibility: hidden; + } + + .dx-tab-text-span-pseudo { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + color: $tabs-tab-color; + font-weight: $fluent-tab-font-weight-basic; + visibility: visible; + } + } + + .dx-icon { + color: $tabs-tab-icon-color; + visibility: visible; + + @include dx-icon-sizing($fluent-tabs-icon-size); + + width: 1em; + height: 1em; + line-height: 1; + } + + .dx-tabs-item-badge { + align-self: center; + min-width: $fluent-badge-min-size; + min-height: $fluent-badge-min-size; + } +} + +.dx-tabs.dx-state-focused { + .dx-tab.dx-state-focused { + background-color: $tabs-focused-tab-bg-color; + } +} + +.dx-tabs-icon-position-start .dx-tab-text::after { + text-align: end; +} + +.dx-tabs-icon-position-end .dx-tab-text::after { + text-align: start; +} + +.dx-tabs-icon-position-top .dx-tab-text::after { + text-align: center; + vertical-align: bottom; +} + +.dx-tabs-icon-position-bottom .dx-tab-text::after { + text-align: center; + vertical-align: top; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss new file mode 100644 index 000000000000..890f62cda840 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss @@ -0,0 +1,121 @@ +@use "sass:color"; +@use "../../../../colors" as *; +@use "../../../../sizes" as *; +@use "../../../../button/colors" as *; +@use "../../../../button/mixins" as *; +@use "../../../../../base/icon_fonts" as *; +@use "../../../../../base/tabs"; +@use "../../../variables/colors" as *; +@use "../../../variables/sizes" as *; +@use "../../../mixins" as *; + +// adduse +@use "../../../../scrollable"; +@use "../../../../badge"; + + +.dx-tabs-styling-mode-primary { + .dx-tab { + &.dx-state-hover { + background-color: $tabs-tab-bg-color-hover-primary; + } + + &.dx-state-focused { + background-color: $tabs-tab-bg-color-focus-primary; + } + + &.dx-state-active { + background-color: $tabs-tab-bg-color-active-primary; + } + } + + &.dx-tab-indicator-position-top { + .dx-tab { + @include dx-tabs-indicator-primary(top); + } + } + + &.dx-tab-indicator-position-bottom { + .dx-tab { + @include dx-tabs-indicator-primary(bottom); + } + } + + &.dx-tab-indicator-position-top, + &.dx-tab-indicator-position-bottom { + .dx-tab { + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + } + + .dx-tab-selected { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + + &.dx-state-focused { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } + + &.dx-tab-indicator-position-right { + .dx-tab { + @include dx-tabs-indicator-primary(right); + } + } + + &.dx-tab-indicator-position-left { + .dx-tab { + @include dx-tabs-indicator-primary(left); + } + } + + &.dx-tab-indicator-position-right, + &.dx-tab-indicator-position-left { + .dx-tab { + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + } + + .dx-tab-selected { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + + &.dx-state-focused { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss new file mode 100644 index 000000000000..719a34b5ba77 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss @@ -0,0 +1,117 @@ +@use "sass:color"; +@use "../../../../colors" as *; +@use "../../../../sizes" as *; +@use "../../../../button/colors" as *; +@use "../../../../button/mixins" as *; +@use "../../../../../base/icon_fonts" as *; +@use "../../../../../base/tabs"; +@use "../../../variables/colors" as *; +@use "../../../variables/sizes" as *; +@use "../../../mixins" as *; + +// adduse +@use "../../../../scrollable"; +@use "../../../../badge"; + + +.dx-tabs-styling-mode-secondary { + .dx-tab { + border-radius: $fluent-tab-item-border-radius-secondary; + } + + &.dx-tab-indicator-position-top { + .dx-tab .dx-tab-content { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-horizontal-indicator-secondary(top); + } + } + + &.dx-tab-indicator-position-bottom { + .dx-tab .dx-tab-content { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-horizontal-indicator-secondary(bottom); + } + } + + &.dx-tab-indicator-position-top, + &.dx-tab-indicator-position-bottom { + .dx-tab { + &.dx-state-hover .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + + &.dx-tab-selected { + .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + } + + &.dx-state-focused .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } + } + + &.dx-tab-indicator-position-right { + .dx-tab { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-vertical-indicator-secondary(right); + } + } + + &.dx-tab-indicator-position-left { + .dx-tab { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-vertical-indicator-secondary(left); + } + } + + &.dx-tab-indicator-position-right, + &.dx-tab-indicator-position-left { + .dx-tab { + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + } + + .dx-tab-selected { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + + &.dx-state-focused { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss new file mode 100644 index 000000000000..7ae4d1d39d0a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss @@ -0,0 +1,24 @@ +@use "sass:color"; +@use "../../../colors" as *; +@use "../../../sizes" as *; +@use "../../../button/colors" as *; +@use "../../../button/mixins" as *; +@use "../../../../base/icon_fonts" as *; +@use "../../../../base/tabs"; +@use "../../variables/colors" as *; +@use "../../variables/sizes" as *; +@use "../../mixins" as *; + +// adduse +@use "../../../scrollable"; +@use "../../../badge"; + + +.dx-tabs { + padding: 0; + background-color: $tabs-tab-background; + + .dx-scrollable { + flex-basis: 100%; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss new file mode 100644 index 000000000000..002c2ac14ca9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss @@ -0,0 +1,86 @@ +@use "../variables/sizes" as *; + +// adduse + + +@mixin dx-tabs-indicator { + &::after { + content: ""; + position: absolute; + } +} + +@mixin dx-tabs-indicator-background($background-color) { + &::after { + background-color: $background-color; + } +} + +@mixin dx-tabs-indicator-primary($position) { + @include dx-tabs-indicator(); + + &::after { + @if $position == top { + top: 0; + right: 0; + left: 0; + width: $fluent-indicator-length-primary; + height: $fluent-indicator-thickness-primary; + } @else if $position == right { + top: 0; + right: 0; + bottom: 0; + height: $fluent-indicator-length-primary; + width: $fluent-indicator-thickness-primary; + } @else if $position == bottom { + right: 0; + bottom: 0; + left: 0; + width: $fluent-indicator-length-primary; + height: $fluent-indicator-thickness-primary; + } @else if $position == left { + top: 0; + bottom: 0; + left: 0; + height: $fluent-indicator-length-primary; + width: $fluent-indicator-thickness-primary; + } + } +} + +@mixin dx-tabs-indicator-secondary { + @include dx-tabs-indicator(); + + &::after { + border-radius: $fluent-indicator-border-radius-secondary; + } +} + +@mixin dx-tabs-horizontal-indicator-secondary($position) { + &::after { + right: 0; + left: 0; + width: $fluent-indicator-length-secondary; + height: $fluent-indicator-thickness-secondary; + + @if $position == top { + top: -$fluent-tabs-item-padding-top-bottom; + } @else if $position == bottom { + bottom: -$fluent-tabs-item-padding-top-bottom; + } + } +} + +@mixin dx-tabs-vertical-indicator-secondary($position) { + &::after { + top: $fluent-tabs-item-padding-top-bottom; + width: $fluent-indicator-thickness-secondary; + height: calc($fluent-indicator-length-secondary - 2 * $fluent-tabs-item-padding-top-bottom); + + @if $position == right { + right: 0; + } @else if $position == left { + left: 0; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss new file mode 100644 index 000000000000..3935b46b4008 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss @@ -0,0 +1,87 @@ +@use "sass:color"; +@use "../../colors" as *; +@use "../../button/colors" as *; + +// adduse + +/** +* $name 10. Tab text color +* $type color +*/ +$tabs-tab-color: $base-text-color !default; + +/** +* $name 20. Selected tab text color +* $type color +*/ +$tabs-tab-selected-color: $base-text-color !default; + +/** +* $name 30. Disabled tab color +* $type color +*/ +$tabs-tab-disabled-color: $base-foreground-disabled !default; + +/** +* $name 40. Selected tab border color +* $type color +*/ +$tabs-tab-border-color-selected-basic: $base-accent !default; +$tabs-tab-border-color-selected-active: $base-accent-active !default; +$tabs-tab-border-color-selected-hover: $base-accent-hover !default; +$tabs-tab-border-color-selected-focused: $base-accent !default; +$tabs-tab-border-color-active: $base-border-color-focused !default; +$tabs-tab-border-color-hover: $base-border-color-hover !default; + +/** +* $name 50. Disabled tab border color +* $type color +*/ +$tabs-tab-border-color-disabled: $base-foreground-disabled !default; + +/** +* $name 60. Tab background color +* $type color +*/ +$tabs-tab-background: transparent !default; + +/** +* $name 70. Tab icon color +* $type color +*/ +$tabs-tab-icon-color: $tabs-tab-color !default; + +/** +* $name 80. Selected tab icon color +* $type color +*/ +$tabs-tab-icon-selected-color: $base-accent !default; + +/** +* $name 90. Disabled tab icon color +* $type color +*/ +$tabs-tab-icon-disabled-color: $base-foreground-disabled !default; +$tabs-tab-button-disabled-opacity: 0 !default; + +/** +* $name 100. Hovered tab background color +* $type color +*/ +$tabs-hovered-tab-bg-color: transparent !default; + +/** +* $name 110. Focused tab background color +* $type color +*/ +$tabs-focused-tab-bg-color: $base-hover-bg !default; +$tabs-tab-bg-color-hover-primary: $base-hover-bg !default; +$tabs-tab-bg-color-focus-primary: $base-hover-bg !default; +$tabs-tab-bg-color-active-primary: $base-selected-bg !default; + +/** +* $name 120. Active tab background color +* $type color +*/ +$tabs-active-tab-bg-color: $base-element-bg !default; +$tabs-nav-button-bg-color: transparent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss new file mode 100644 index 000000000000..1b1aec0e4282 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss @@ -0,0 +1,61 @@ +@use "../../sizes" as *; + +// adduse + + +$fluent-tabs-item-gap: 4px !default; +$fluent-tabs-item-padding: null !default; +$fluent-tabs-item-padding-top-bottom: null !default; +$fluent-tabs-item-padding-right-left: null !default; +$fluent-tab-height: null !default; + +$fluent-tab-font-weight-basic: 400 !default; +$fluent-tab-font-weight-accent: 500 !default; +$fluent-base-icon-margin: null !default; +$fluent-tabs-icon-size: $fluent-base-icon-size !default; + +$fluent-tab-nav-button-icon-width: null !default; +$fluent-tab-nav-button-icon-height: null !default; +$fluent-tab-nav-button-icon-font-size: null !default; +$fluent-tab-nav-button-content-padding: null !default; + +$fluent-tab-vertical-nav-button-content-padding: null !default; + +$fluent-indicator-thickness-primary: 2px !default; +$fluent-indicator-thickness-secondary: 3px !default; + +$fluent-indicator-length-primary: 100% !default; +$fluent-indicator-length-secondary: 100% !default; + +$fluent-tab-item-border-radius-secondary: 4px !default; +$fluent-indicator-border-radius-secondary: 4px !default; + +$fluent-badge-min-size: null !default; + +@if $size == "default" { + $fluent-tabs-item-padding-top-bottom: 12px !default; + $fluent-tabs-item-padding-right-left: 10px !default; + $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; + $fluent-tab-height: auto !default; + $fluent-base-icon-margin: 8px !default; + $fluent-tab-nav-button-icon-width: 20px !default; + $fluent-tab-nav-button-icon-height: 20px !default; + $fluent-tab-nav-button-icon-font-size: 20px !default; + $fluent-tab-nav-button-content-padding: 0 4px !default; + $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; + $fluent-badge-min-size: 20px !default; +} + +@else if $size == "compact" { + $fluent-tabs-item-padding-top-bottom: 8px !default; + $fluent-tabs-item-padding-right-left: 8px !default; + $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; + $fluent-tab-height: auto !default; + $fluent-base-icon-margin: 8px !default; + $fluent-tab-nav-button-icon-width: 16px !default; + $fluent-tab-nav-button-icon-height: 16px !default; + $fluent-tab-nav-button-icon-font-size: 16px !default; + $fluent-tab-nav-button-content-padding: 0 4px !default; + $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; + $fluent-badge-min-size: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss new file mode 100644 index 000000000000..532cea56befe --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss @@ -0,0 +1,44 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; +@use "../textEditor/colors" as *; + +// adduse + +/** +* $name 10. Tag text color +* $type color +*/ +$tagbox-tag-color: $base-text-color !default; + +/** +* $name 20. Tag background color +* $type color +*/ +$tagbox-tag-bg: null !default; +$tagbox-tag-hover-bg: $base-typography-bg !default; + +/** +* $name 30. Tag active text color +* $type color +*/ +$tagbox-tag-active-color: $base-text-color !default; + +/** +* $name 40. Tag close button color +* $type color +*/ +$tagbox-tag-button-remove-bg: $base-icon-color !default; +$tagbox-tag-border-color-focused: $base-accent-active !default; +$tagbox-select-all-border-color: $base-border-color !default; +$tagbox-tag-foreground-disabled: $base-foreground-disabled !default; +$tagbox-tag-disabled: $base-background-disabled !default; + +@if $mode == "light" { + $tagbox-tag-bg: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default; +} + +@if $mode == "dark" { + $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss new file mode 100644 index 000000000000..b4c7f569023d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss @@ -0,0 +1,186 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor" as *; +@use "../common/sizes" as *; +@use "../../base/tagBox"; + +// adduse + +.dx-tagbox { + .dx-tag-container { + height: 100%; + padding-top: $fluent-tagbox-tag-container-vertical-padding; + padding-bottom: $fluent-tagbox-tag-container-vertical-padding; + gap: $fluent-tagbox-tag-container-gap; + + .dx-texteditor-input { + padding: 0; + min-height: 0; + } + } + + &.dx-editor-underlined { + .dx-tag-container { + padding-top: $fluent-tagbox-tag-container-vertical-padding + 1px; + padding-bottom: $fluent-tagbox-tag-container-vertical-padding + 1px; + } + } + + &.dx-editor-outlined, + &.dx-editor-filled, + &.dx-editor-underlined { + .dx-texteditor-input { + height: $fluent-tagbox-tag-height; + } + } + + &.dx-editor-outlined, + &.dx-editor-filled { + .dx-tag-container { + padding-inline-start: $fluent-tagbox-tag-container-padding-left; + } + } + + &.dx-texteditor-with-label:not(.dx-texteditor-label-outside), + &.dx-texteditor-with-floating-label { + &.dx-editor-filled, + &.dx-editor-underlined { + .dx-tag { + margin: 0; + } + + .dx-texteditor-input { + padding: 0; + } + } + + &.dx-editor-filled { + .dx-tag-container, + .dx-placeholder::before { + padding-top: $fluent-tagbox-filled-with-label-top-padding; + padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding; + } + } + + &.dx-editor-underlined { + .dx-tag-container, + .dx-placeholder::before { + padding-top: $fluent-tagbox-filled-with-label-top-padding + 1px; + padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding + 1px; + } + } + } + + &.dx-state-disabled { + .dx-tag-content { + color: $tagbox-tag-foreground-disabled; + background-color: $tagbox-tag-disabled; + } + + .dx-tag-remove-button { + &::before { + color: $tagbox-tag-foreground-disabled; + } + } + } +} + +.dx-tagbox-single-line { + .dx-tag-container { + padding-right: 0; + } +} + +.dx-tag-content { + display: inline-flex; + align-items: center; + font-size: $fluent-tagbox-tag-content-font-size; + line-height: $fluent-tagbox-tag-content-line-height; + margin: 0; + padding-top: $fluent-tagbox-tag-content-vertical-padding; + padding-bottom: $fluent-tagbox-tag-content-vertical-padding; + padding-inline-start: $fluent-tagbox-tag-content-padding-left; + padding-inline-end: $fluent-tagbox-tag-content-padding-right; + min-width: 40px; + background-color: $tagbox-tag-bg; + color: $tagbox-tag-color; + border-radius: $tagbox-tag-border-radius; + border-width: 1px; + border-style: solid; + border-color: $base-border-color-disabled; +} + +.dx-tag-remove-button { + display: flex; + align-items: center; + justify-content: center; + width: $fluent-tagbox-tag-height; + height: 100%; + + @include dx-icon(clear); + + font-size: $fluent-tagbox-tag-content-font-size + 2px; + + &::before { + content: "\f15f"; + display: flex; + align-items: center; + justify-content: center; + color: $tagbox-tag-button-remove-bg; + } +} + +.dx-tag { + &:hover { + .dx-tag-content { + background-color: $tagbox-tag-hover-bg; + color: $tagbox-tag-active-color; + } + } + + &.dx-state-focused { + .dx-tag-content { + color: $tagbox-tag-active-color; + border-color: $tagbox-tag-border-color-focused; + } + } +} + +@mixin tagbox-editor-container-offset() { + inset-inline-end: $fluent-invalid-badge-horizontal-padding; +} + +.dx-tagbox.dx-invalid, +.dx-tagbox.dx-valid { + .dx-texteditor-container { + &::after { + @include tagbox-editor-container-offset(); + } + } +} + +.dx-tagbox.dx-validation-pending { + .dx-texteditor-container { + .dx-pending-indicator { + @include tagbox-editor-container-offset(); + } + } +} + +.dx-tagbox-popup-wrapper { + .dx-list-select-all { + border-bottom: 1px solid; + border-bottom-color: $tagbox-select-all-border-color; + padding-bottom: $fluent-tagbox-select-all-padding-bottom; + margin-bottom: $fluent-tagbox-select-all-margin-bottom; + + &::after { + background-color: transparent; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss new file mode 100644 index 000000000000..2c3b9c7da6b3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss @@ -0,0 +1,46 @@ +@use "../sizes" as *; + +// adduse + +$fluent-tagbox-tag-content-padding-left: null !default; +$fluent-tagbox-tag-content-padding-right: null !default; +$fluent-tagbox-tag-content-vertical-padding: null !default; +$fluent-tagbox-tag-content-font-size: null !default; +$fluent-tagbox-tag-container-padding-left: null !default; +$fluent-tagbox-tag-container-vertical-padding: null !default; +$fluent-tagbox-tag-height: null !default; +$fluent-tagbox-select-all-padding-bottom: 12px !default; +$fluent-tagbox-select-all-margin-bottom: 3px !default; +$tagbox-tag-border-radius: 999em !default; +$fluent-tagbox-filled-with-label-top-padding: null !default; +$fluent-tagbox-filled-with-label-bottom-padding: null !default; +$fluent-tagbox-tag-content-line-height: null !default; +$fluent-tagbox-tag-container-gap: null !default; + +@if $size == "default" { + $fluent-tagbox-tag-content-padding-left: 6px !default; + $fluent-tagbox-tag-content-padding-right: 20px !default; + $fluent-tagbox-tag-content-vertical-padding: 2px !default; + $fluent-tagbox-tag-content-font-size: 12px !default; + $fluent-tagbox-tag-container-padding-left: 12px !default; + $fluent-tagbox-tag-container-vertical-padding: 5px !default; + $fluent-tagbox-tag-container-gap: 4px !default; + $fluent-tagbox-tag-height: 20px !default; + $fluent-tagbox-tag-content-line-height: 1.1666em !default; + $fluent-tagbox-filled-with-label-top-padding: 9px !default; + $fluent-tagbox-filled-with-label-bottom-padding: 1px !default; +} + +@else if $size == "compact" { + $fluent-tagbox-tag-content-padding-left: 4px !default; + $fluent-tagbox-tag-content-padding-right: 20px !default; + $fluent-tagbox-tag-content-vertical-padding: 0 !default; + $fluent-tagbox-tag-content-font-size: 10px !default; + $fluent-tagbox-tag-container-padding-left: 8px !default; + $fluent-tagbox-tag-container-vertical-padding: 3px !default; + $fluent-tagbox-tag-container-gap: 2px !default; + $fluent-tagbox-tag-height: 16px !default; + $fluent-tagbox-tag-content-line-height: 1.3333em !default; + $fluent-tagbox-filled-with-label-top-padding: 6px !default; + $fluent-tagbox-filled-with-label-bottom-padding: 0 !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss new file mode 100644 index 000000000000..28d9c151038d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss @@ -0,0 +1,35 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/textArea"; +@use "../../base/textArea/mixins" as *; +@use "../textEditor/sizes" as *; + +// adduse + +@include dx-textarea( + 2px, + $textarea-content-line-height, + $fluent-filled-texteditor-input-top-padding, + $fluent-filled-texteditor-input-with-label-top-padding, + $fluent-standard-texteditor-with-label-input-top-padding, +); + +.dx-textarea { + &.dx-editor-underlined { + .dx-texteditor-input { + padding-top: $fluent-standard-texteditor-input-top-padding + 1; + padding-bottom: $fluent-standard-texteditor-input-bottom-padding + 1; + } + + &.dx-texteditor-with-label:not(.dx-texteditor-label-outside), + &.dx-texteditor-with-floating-label { + .dx-texteditor-input { + padding-bottom: $fluent-standard-texteditor-with-label-input-bottom-padding; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss new file mode 100644 index 000000000000..ede206945fd0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss @@ -0,0 +1,13 @@ +@use "../sizes" as *; + +// adduse + +$textarea-content-line-height: null !default; + +@if $size == "default" { + $textarea-content-line-height: 20px !default; +} + +@else if $size == "compact" { + $textarea-content-line-height: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss new file mode 100644 index 000000000000..7b43f685dc7d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss @@ -0,0 +1,5 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss new file mode 100644 index 000000000000..321d236788e3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss @@ -0,0 +1,71 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor/colors" as *; +@use "../textEditor/sizes" as *; +@use "../../base/textBox"; + +// adduse +@use "../textEditor" as *; + +@mixin dx-texteditor-search-icon($texteditor-icon-size) { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: $texteditor-icon-size; + height: 100%; + + &::before { + font-size: $texteditor-icon-container-size; + } +} + +.dx-searchbox { + .dx-icon-search { + @include dx-icon(search); + + color: $texteditor-placeholder-color; + } + + &.dx-editor-underlined { + .dx-icon-search { + @include dx-texteditor-search-icon($textbox-search-icon-size); + } + + .dx-texteditor-input, + .dx-placeholder::before { + padding-inline-start: $textbox-search-icon-size; + } + } + + &.dx-editor-filled, + &.dx-editor-outlined { + .dx-icon-search { + @include dx-texteditor-search-icon($textbox-search-icon-size); + } + + .dx-texteditor-input, + .dx-placeholder::before { + padding-inline-start: $textbox-search-icon-size; + } + } + + &.dx-state-disabled { + .dx-icon-search { + color: $base-foreground-disabled; + } + } +} + +.dx-searchbar { + padding-bottom: 5px; + + .dx-texteditor { + margin: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss new file mode 100644 index 000000000000..130c6b7a4650 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss @@ -0,0 +1,13 @@ +@use "../sizes" as *; + +// adduse + +$textbox-search-icon-size: null !default; + +@if $size == "default" { + $textbox-search-icon-size: 32px !default; +} + +@else if $size == "compact" { + $textbox-search-icon-size: 24px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss new file mode 100644 index 000000000000..9b1c0e6ee6f6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss @@ -0,0 +1,153 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Text color +* $type color +*/ +$texteditor-color: null !default; + +/** +* $name 20. Placeholder text color +* $type color +*/ +$texteditor-placeholder-color: null !default; + +/** +* $name 30. Outlined background color +* $type color +*/ +$texteditor-outlined-bg: $base-element-bg !default; + +/** +* $name 31. Outlined hovered background color +* $type color +*/ +$texteditor-outlined-bg-hover: $texteditor-outlined-bg !default; + +/** +* $name 32. Outlined focused background color +* $type color +*/ +$texteditor-outlined-bg-focused: $texteditor-outlined-bg !default; + +/** +* $name 40. Filled background color +* $type color +*/ +$texteditor-filled-bg: null !default; + +/** +* $name 50. Underlined background color +* $type color +*/ +$texteditor-underlined-bg: transparent !default; + +/** +* $name 51. Underlined hovered background color +* $type color +*/ +$texteditor-underlined-bg-hover: $texteditor-underlined-bg !default; + +/** +* $name 52. Underlined focused background color +* $type color +*/ +$texteditor-underlined-bg-focused: $texteditor-underlined-bg !default; + +/** +* $name 60. Border color +* $type color +*/ +$texteditor-border-color: $base-border-color !default; +$texteditor-border-color-hover: $base-border-color-hover !default; +$texteditor-border-color-focused: $base-border-color-focused !default; + +/** +* $name 70. Bottom border color +* $type color +*/ +$texteditor-border-bottom-color: $base-border-color-accessible !default; +$texteditor-border-bottom-color-hover: null !default; +$texteditor-border-bottom-color-focused: null !default; + +/** +* $name 80. Focused state indicator color +* $type color +*/ +$texteditor-indicator-border-color: $base-accent !default; + +$texteditor-button-clear-icon-color: $base-icon-color !default; +$texteditor-invalid-focused-border-color: $base-invalid-color-hover !default; +$texteditor-invalid-faded-border-color: $base-invalid-color !default; +$texteditor-border-color-disabled: $base-border-color-disabled !default; +$texteditor-disabled-text-color: $base-foreground-disabled !default; +$texteditor-input-border-radius: $base-border-radius !default; +$texteditor-label-transition: + font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, + transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, + top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + +@if $mode == "light" { + @if $color == "blue" { + $texteditor-color: $base-text-color !default; + $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default; + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default; + } + + @if $color == "saas" { + $texteditor-color: rgba(66, 81, 118, 1) !default; + $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default; + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: rgba(243, 245, 248, 1) !default; + } + + $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default; + $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default; + $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default; + $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default; +} + + +@if $mode == "dark" { + @if $color == "blue" { + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default; + } + + @if $color == "saas" { + $texteditor-outlined-bg: rgba(20, 30, 40, 1) !default; + $texteditor-filled-bg: rgba(50, 60, 75, 1) !default; + } + + $texteditor-color: $base-text-color !default; + $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default; + $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default; + $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default; + $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default; + $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default; +} + +/** +* $name 41. Filled hovered background color +* $type color +*/ +$texteditor-filled-bg-hover: $texteditor-filled-bg !default; + +/** +* $name 42. Filled focused background color +* $type color +*/ +$texteditor-filled-bg-focused: $texteditor-filled-bg !default; + +$texteditor-label-color: $texteditor-placeholder-color; +$texteditor-label-color-focused: $base-accent; + +:root { + --dx-texteditor-color-text: #{$texteditor-color}; + --dx-texteditor-color-label: #{$texteditor-label-color}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss new file mode 100644 index 000000000000..3ce252791d4e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss @@ -0,0 +1,586 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../common/sizes" as *; +@use "../button/sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../../base/textEditor"; +@use "../../base/textEditor/mixins" as *; +@use "../colorBox/sizes" as *; + +// adduse + +$fluent-base-standard-texteditor-input-horizontal-padding: 0; +$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding; +$fluent-editor-custom-button-margin: 6px; +$fluent-editor-border-width: 1px; + +@mixin texteditor-outlined-styling() { + background-color: $texteditor-outlined-bg; + border-radius: $texteditor-input-border-radius; + border-width: $fluent-editor-border-width; + border-style: solid; + border-color: $texteditor-border-color; + border-bottom-color: $texteditor-border-bottom-color; + + &::before { + box-sizing: border-box; + content: ""; + position: absolute; + left: -1px; + bottom: -1px; + right: -1px; + height: $texteditor-input-border-radius; + width: calc(100% + 2 * $fluent-editor-border-width); + border-bottom-left-radius: $texteditor-input-border-radius; + border-bottom-right-radius: $texteditor-input-border-radius; + border-bottom-color: $texteditor-indicator-border-color; + clip-path: inset(calc(100% - 2px) 0 0); + transform: scaleX(0); + transition-property: transform; + transition-duration: 50ms; + transition-timing-function: cubic-bezier(0.7, 0, 1, 0.5); + } + + &.dx-texteditor-with-label, + &.dx-texteditor-with-floating-label { + .dx-texteditor-label { + width: calc(100% + 2 * $fluent-editor-border-width); + inset: -1px; + } + + .dx-datebox { + border: none; + } + } + + &.dx-state-disabled, + &.dx-state-readonly { + background-color: transparent; + border-color: $texteditor-border-color-disabled; + } + + &.dx-invalid { + border-color: $texteditor-invalid-faded-border-color; + + &.dx-state-hover, + &.dx-state-focused { + border-color: $texteditor-invalid-focused-border-color; + } + + &::before { + border-color: $texteditor-invalid-faded-border-color; + } + } + + &.dx-state-hover { + background-color: $texteditor-outlined-bg-hover; + border-left-color: $texteditor-border-color-hover; + border-right-color: $texteditor-border-color-hover; + border-top-color: $texteditor-border-color-hover; + border-bottom-color: $texteditor-border-bottom-color-hover; + } + + &.dx-state-focused, + &.dx-state-active { + background-color: $texteditor-outlined-bg-focused; + border-left-color: $texteditor-border-color-focused; + border-right-color: $texteditor-border-color-focused; + border-top-color: $texteditor-border-color-focused; + border-bottom-color: $texteditor-border-bottom-color-focused; + + &::before { + transform: scaleX(1); + transition-property: transform; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + } + } +} + +@mixin texteditor-filled-styling() { + background-color: $texteditor-filled-bg; + border-radius: $texteditor-input-border-radius; + border-width: $fluent-editor-border-width; + border-style: solid; + border-color: transparent; + + .dx-placeholder::before, + .dx-texteditor-input { + padding-top: $fluent-filled-texteditor-input-top-padding; + padding-bottom: $fluent-filled-texteditor-input-bottom-padding; + } + + &::before { + left: -1px; + bottom: -1px; + right: -1px; + height: $texteditor-input-border-radius; + width: calc(100% + 2 * $fluent-editor-border-width); + border-bottom-left-radius: $texteditor-input-border-radius; + border-bottom-right-radius: $texteditor-input-border-radius; + border-bottom-color: $texteditor-indicator-border-color; + clip-path: inset(calc(100% - 2px) 0 0); + } + + &.dx-state-hover { + background-color: $texteditor-filled-bg-hover; + } + + &.dx-state-focused, + &.dx-state-active { + background-color: $texteditor-filled-bg-focused; + } + + &.dx-state-disabled, + &.dx-state-readonly { + background-color: transparent; + border-color: $texteditor-border-color-disabled; + } + + &.dx-invalid { + border-color: $texteditor-invalid-faded-border-color; + + &.dx-state-hover, + &.dx-state-focused { + border-color: $texteditor-invalid-focused-border-color; + } + } +} + +@mixin texteditor-underlined-styling() { + background-color: $texteditor-underlined-bg; + border-radius: 0; + + &::after { + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: $texteditor-border-bottom-color; + } + + &.dx-state-hover { + background-color: $texteditor-underlined-bg-hover; + + &::after { + border-bottom-color: $texteditor-border-bottom-color-hover; + } + } + + &.dx-state-focused, + &.dx-state-active { + background-color: $texteditor-underlined-bg-focused; + } + + .dx-texteditor-input, + .dx-lookup-field { + min-height: $fluent-texteditor-input-height; + } + + .dx-texteditor-input, + .dx-placeholder::before { + padding-top: $fluent-standard-texteditor-input-top-padding; + padding-bottom: $fluent-standard-texteditor-input-bottom-padding; + padding-left: $fluent-base-standard-texteditor-input-horizontal-padding; + padding-right: $fluent-base-standard-texteditor-input-horizontal-padding; + } + + &.dx-state-disabled, + &.dx-state-readonly { + &::after { + border-bottom-color: $texteditor-border-color-disabled; + } + } + + &.dx-invalid { + &::after { + border-bottom-color: $texteditor-invalid-faded-border-color; + } + + &.dx-state-hover { + &::after { + border-bottom-color: $texteditor-invalid-focused-border-color; + } + } + } +} + +@mixin texteditor-input-padding-filled() { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-filled-texteditor-input-horizontal-padding; + } +} + +@mixin texteditor-validation-icon-offset() { + inset-inline-end: $fluent-invalid-badge-halfhorizontal-padding; +} + +@mixin texteditor-validation-icon-offset-filled() { + inset-inline-end: $fluent-filled-texteditor-input-button-horizontal-padding; +} + +@mixin validation-icon-position() { + &.dx-invalid, + &.dx-valid { + &.dx-editor-underlined { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + } + } + + &.dx-editor-filled, + &.dx-editor-outlined { + @include texteditor-input-padding-filled(); + + .dx-texteditor-input-container { + &::after { + @include texteditor-validation-icon-offset-filled(); + } + } + } + + .dx-texteditor-input-container { + &::after { + @include texteditor-validation-icon-offset(); + } + } + } +} + +@mixin pending-indicator-position() { + &.dx-validation-pending { + &.dx-editor-underlined { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + } + } + + &.dx-editor-filled, + &.dx-editor-outlined { + @include texteditor-input-padding-filled(); + + .dx-texteditor-input-container { + .dx-pending-indicator { + @include texteditor-validation-icon-offset-filled(); + } + } + } + + .dx-texteditor-input-container { + .dx-pending-indicator { + @include texteditor-validation-icon-offset(); + } + } + } +} + +.dx-texteditor { + border-radius: $texteditor-input-border-radius; + position: relative; + + @mixin dx-texteditor-borders-position() { + left: 0; + right: 0; + bottom: 0; + height: 0; + width: 100%; + content: ''; + position: absolute; + } + + &::before { + @include dx-texteditor-borders-position(); + + z-index: 2; + transform: scale(0); + } + + &::after { + @include dx-texteditor-borders-position(); + } + + &.dx-state-focused { + .dx-texteditor-label { + color: $texteditor-label-color-focused; + font-size: $fluent-texteditor-label-font-size; + } + + &.dx-invalid { + .dx-texteditor-label { + color: $base-invalid-color; + } + } + } + + &.dx-texteditor-label-outside { + .dx-texteditor-label { + color: $texteditor-color; + } + + &.dx-invalid { + .dx-texteditor-label { + color: $base-invalid-color; + } + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom-width: 2px; + border-bottom-style: solid; + border-bottom-color: $texteditor-indicator-border-color; + transform: scale(1); + transition-property: transform; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + } + } + + &.dx-state-disabled { + opacity: 1; + background-color: transparent; + + .dx-texteditor-label, + .dx-placeholder::before, + .dx-texteditor-input, + .dx-lookup-field { + color: $texteditor-disabled-text-color; + } + + .dx-lookup-arrow, + .dx-dropdowneditor-icon { + color: $texteditor-disabled-text-color; + } + } + + &.dx-state-readonly { + .dx-lookup-arrow { + display: none; + } + } + + .dx-texteditor-input { + min-height: $fluent-texteditor-input-height - 2px; + } + + @include validation-icon-position(); + @include pending-indicator-position(); + + &.dx-editor-filled, + &.dx-editor-outlined { + .dx-placeholder::before, + .dx-texteditor-input { + padding: $fluent-filled-texteditor-input-padding; + } + } + + &.dx-editor-filled { + @include texteditor-filled-styling(); + } + + &.dx-editor-underlined { + @include texteditor-underlined-styling(); + } + + &.dx-editor-outlined { + @include texteditor-outlined-styling(); + } +} + +.dx-show-clear-button { + .dx-clear-button-area { + width: $texteditor-icon-container-size; + min-width: $texteditor-icon-container-size; + right: 0; + display: flex; + align-items: center; + } + + &.dx-texteditor-empty { + .dx-clear-button-area { + display: none; + } + } + + .dx-icon-clear { + &::before { + content: '\f15f'; + } + + color: $texteditor-button-clear-icon-color; + } + + &.dx-state-disabled { + .dx-icon-clear { + color: $base-foreground-disabled; + } + } + + &:not(.dx-texteditor-empty) { + @include validation-icon-position(); + @include pending-indicator-position(); + } +} + +/* B231111 */ +.dx-placeholder { + color: $texteditor-placeholder-color; + font-size: $fluent-texteditor-font-size; + line-height: normal; +} + +.dx-texteditor-input { + margin: 0; + background-color: transparent; + color: $texteditor-color; + font-size: $fluent-texteditor-font-size; + line-height: $fluent-texteditor-line-height; +} + +.dx-invalid.dx-texteditor { + &.dx-state-hover { + &::after { + border-bottom-color: $texteditor-invalid-faded-border-color; + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom: 2px solid; + border-bottom-color: $texteditor-invalid-focused-border-color; + } + } + + &.dx-show-invalid-badge .dx-texteditor-input-container { + &::after { + @include dx-invalid-fluent-badge(); + } + } +} + +.dx-texteditor-label { + position: absolute; + font-size: $fluent-texteditor-label-font-size; + color: $texteditor-label-color; + white-space: nowrap; + user-select: none; + pointer-events: none; + cursor: text; + width: 100%; + display: flex; + flex-direction: row; + top: 0; + left: 0; + + .dx-label { + display: flex; + + span { + overflow: hidden; + text-overflow: ellipsis; + width: auto; + max-width: 100%; + display: block; + margin-bottom: -1px; + } + } + + .dx-invalid & { + color: $base-invalid-color; + } +} + +@include dx-editor-outlined( + $texteditor-input-border-radius, + $fluent-texteditor-label-font-size, + $fluent-base-border-width, + $fluent-base-border-width, + solid, + $fluent-base-inline-block-height, + $fluent-base-inline-block-height, + math.div(1px + $fluent-texteditor-font-size, 2), + $fluent-texteditor-label-outside-top-offset, + 0.5px, + $fluent-filled-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-horizontal-padding, + $texteditor-outlined-bg, + 1px solid transparent, + $texteditor-border-color, + $texteditor-border-bottom-color, + $texteditor-border-color-disabled, + $texteditor-border-color-disabled, + $texteditor-border-color-hover, + $texteditor-border-bottom-color-hover, + $texteditor-border-color-focused, + $texteditor-border-bottom-color-focused, + $texteditor-invalid-faded-border-color, + $texteditor-invalid-focused-border-color, + $texteditor-label-transition, + $fluent-texteditor-font-size, + $fluent-filled-texteditor-input-top-padding, + 1px, + $fluent-texteditor-font-size, + $fluent-texteditor-label-outside-height, +); +@include dx-editor-filled( + $texteditor-label-transition, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-top-offset, + $fluent-texteditor-label-outside-top-offset, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-filled-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-with-label-top-padding, + $fluent-filled-texteditor-input-with-label-bottom-padding, + $fluent-texteditor-font-size, + $fluent-texteditor-label-outside-height, +); +@include dx-editor-underlined( + $texteditor-label-transition, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-top-offset, + $fluent-texteditor-label-outside-top-offset, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-standard-texteditor-with-label-input-top-padding, + $fluent-standard-texteditor-with-label-input-bottom-padding, + $fluent-texteditor-font-size, + $fluent-texteditor-label-outside-height, +); + +.dx-valid.dx-texteditor { + .dx-texteditor-input-container { + &::after { + @include dx-valid-fluent-badge(); + } + } +} + +.dx-validation-pending.dx-texteditor { + .dx-texteditor-input-container { + .dx-pending-indicator { + @include dx-pending-indicator-fluent(); + } + } +} + +@include dx-editor-buttons-container-material( + $fluent-underlined-editor-button-height, + $fluent-editor-custom-button-margin, + $fluent-editor-custom-button-margin, + 0, + $texteditor-spin-button-horizontal-padding, + $fluent-button-vertical-padding, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss new file mode 100644 index 000000000000..b2aa8632702e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss @@ -0,0 +1,71 @@ +@use "sass:math"; +@use "../sizes" as *; + +// adduse + +$fluent-texteditor-line-height: null !default; +$fluent-texteditor-font-size: null !default; +$fluent-texteditor-input-height: null !default; +$fluent-texteditor-label-top-offset: null !default; +$fluent-texteditor-label-outside-top-offset: null !default; +$fluent-filled-texteditor-input-horizontal-padding: null !default; +$fluent-filled-texteditor-input-top-padding: null !default; +$fluent-filled-texteditor-input-bottom-padding: null !default; +$fluent-standard-texteditor-input-top-padding: null !default; +$fluent-underlined-editor-button-height: null !default; +$fluent-texteditor-label-font-size: null !default; +$fluent-texteditor-label-outside-height: null !default; +$fluent-standard-texteditor-input-bottom-padding: null !default; +$fluent-standard-texteditor-with-label-input-top-padding: null !default; +$fluent-standard-texteditor-with-label-input-bottom-padding: null !default; +$fluent-filled-texteditor-input-with-label-top-padding: null !default; +$fluent-filled-texteditor-input-with-label-bottom-padding: null !default; +$texteditor-icon-container-size: $fluent-base-icon-size !default; + +@if $size == "default" { + $fluent-texteditor-line-height: 1.428571 !default; + $fluent-texteditor-font-size: 14px !default; + $fluent-texteditor-input-height: 32px !default; + $fluent-texteditor-label-outside-height: 20px !default; + $fluent-texteditor-label-outside-top-offset: 24px !default; + $fluent-texteditor-label-font-size: 12px !default; + $fluent-texteditor-label-top-offset: -1px !default; + $fluent-filled-texteditor-input-horizontal-padding: 12px !default; + $fluent-filled-texteditor-input-top-padding: 5px !default; + $fluent-filled-texteditor-input-with-label-top-padding: 8px !default; + $fluent-filled-texteditor-input-bottom-padding: 5px !default; + $fluent-filled-texteditor-input-with-label-bottom-padding: 2px !default; + $fluent-standard-texteditor-input-top-padding: 5px !default; + $fluent-standard-texteditor-input-bottom-padding: 5px !default; + $fluent-standard-texteditor-with-label-input-top-padding: 9px !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: 3px !default; + $fluent-underlined-editor-button-height: 22px !default; +} + +@else if $size == "compact" { + $fluent-texteditor-line-height: 1.3333 !default; + $fluent-texteditor-font-size: 12px !default; + $fluent-texteditor-input-height: 24px !default; + $fluent-texteditor-label-outside-height: 16px !default; + $fluent-texteditor-label-outside-top-offset: 18px !default; + $fluent-texteditor-label-font-size: 10px !default; + $fluent-texteditor-label-top-offset: -1px !default; + $fluent-filled-texteditor-input-horizontal-padding: 8px !default; + $fluent-filled-texteditor-input-top-padding: 3px !default; + $fluent-filled-texteditor-input-with-label-top-padding: 6px !default; + $fluent-filled-texteditor-input-bottom-padding: 3px !default; + $fluent-filled-texteditor-input-with-label-bottom-padding: 0 !default; + $fluent-standard-texteditor-input-top-padding: 3px !default; + $fluent-standard-texteditor-input-bottom-padding: 3px !default; + $fluent-standard-texteditor-with-label-input-top-padding: 6px !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: 2px !default; + $fluent-underlined-editor-button-height: 22px !default; +} + +$fluent-filled-texteditor-input-padding: + $fluent-filled-texteditor-input-top-padding + $fluent-filled-texteditor-input-horizontal-padding + $fluent-filled-texteditor-input-bottom-padding !default; + +$fluent-filled-texteditor-input-button-horizontal-padding: $fluent-filled-texteditor-input-horizontal-padding - 4px !default; +$texteditor-spin-button-horizontal-padding: math.div($fluent-filled-texteditor-input-horizontal-padding, 2) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss new file mode 100644 index 000000000000..1ac51ec80923 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Item text color +* $type color +*/ +$tileview-color: $base-text-color !default; +$tileview-bg: $base-element-bg !default; +$tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; +$tileview-hover-bg: $base-element-bg !default; +$tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; +$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; +$tileview-active-color: $tileview-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss new file mode 100644 index 000000000000..e59c21678b65 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss @@ -0,0 +1,29 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/tileView"; + +// adduse + + +.dx-tile { + color: $tileview-color; + background-color: $tileview-bg; + border: 1px solid; + border-color: $tileview-border-color; + text-align: left; + + &.dx-state-focused, + &.dx-state-hover { + background-color: $tileview-hover-bg; + border-color: $tileview-hover-border-color; + } + + &.dx-state-active { + background-color: $tileview-active-bg; + color: $tileview-active-color; + border-color: transparent; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss new file mode 100644 index 000000000000..8e816681beee --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse +$clock-digits-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss new file mode 100644 index 000000000000..f9990c033991 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss @@ -0,0 +1,56 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../textEditor/sizes" as *; +@use "../../base/timeView/mixins" as *; +@use "../../base/timeView"; + +// adduse + +@include clock-action-icons-mixin($base-inverted-bg, $base-typography-bg, $clock-digits-color); + +.dx-timeview { + height: auto; + width: auto; + + .dx-texteditor { + .dx-texteditor-input { + padding-inline-end: 0; + padding-inline-start: 12px; + } + + .dx-texteditor-container { + .dx-texteditor-buttons-container .dx-dropdowneditor-button { + margin-inline-end: 0; + } + } + } +} + +.dx-timeview-clock { + margin-bottom: 10px; +} + +.dx-timeview-format12 { + width: $fluent-timeview-format12-width; + margin-inline-start: $fluent-timeview-time-separator-margin; +} + +.dx-timeview-time-separator { + margin: 0 $fluent-timeview-time-separator-margin; +} + +.dx-timeview-field { + min-height: $fluent-timeview-field-min-height; +} + +.dx-timeview-field .dx-numberbox { + width: $fluent-timeview-format12-width; + + &.dx-numberbox-spin-touch-friendly { + width: 110px; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss new file mode 100644 index 000000000000..674156372151 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss @@ -0,0 +1,7 @@ +@use "../sizes" as *; + +// adduse + +$fluent-timeview-field-min-height: 35px !default; +$fluent-timeview-time-separator-margin: 5px !default; +$fluent-timeview-format12-width: 64px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss new file mode 100644 index 000000000000..057b1a0013f5 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss @@ -0,0 +1,64 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$toast-default-bg: $base-bg !default; +$warning-color: null !default; + +@if $mode == "light" { + $warning-color: $base-text-color !default; +} + +@if $mode == "dark" { + $warning-color: $base-inverted-text-color !default; +} + +/** +* $name 10. Info background color +* $type color +*/ +$toast-info-bg: $toast-default-bg !default; + +/** +* $name 20. Info text color +* $type color +*/ +$toast-info-color: $base-text-color !default; + +/** +* $name 30. Warning background color +* $type color +*/ +$toast-warning-bg: $base-warning !default; + +/** +* $name 40. Warning text color +* $type color +*/ +$toast-warning-color: $warning-color !default; + +/** +* $name 50. Error background color +* $type color +*/ +$toast-error-bg: $base-danger !default; + +/** +* $name 60. Error text color +* $type color +*/ +$toast-error-color: $base-inverted-text-color !default; + +/** +* $name 70. Success background color +* $type color +*/ +$toast-success-bg: $base-success !default; + +/** +* $name 80. Success text color +* $type color +*/ +$toast-success-color: $base-inverted-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss new file mode 100644 index 000000000000..b6309f525428 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss @@ -0,0 +1,53 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/toast"; + +// adduse +@use "../overlay"; + + +.dx-toast-stack { + gap: $fluent-toast-item-gap; +} + +.dx-toast-content { + font-size: $fluent-base-font-size; + font-weight: 400; + padding: $fluent-toast-content-vertical-padding $fluent-toast-content-horizontal-padding; + border-radius: $toast-border-radius; + box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14); + min-height: $fluent-toast-height; + display: flex; + align-items: center; +} + +.dx-toast-icon { + display: none; +} + +.dx-toast-message { + padding: 0; +} + +.dx-toast-info { + background-color: $toast-info-bg; + color: $toast-info-color; +} + +.dx-toast-warning { + background-color: $toast-warning-bg; + color: $toast-warning-color; +} + +.dx-toast-error { + background-color: $toast-error-bg; + color: $toast-error-color; +} + +.dx-toast-success { + background-color: $toast-success-bg; + color: $toast-success-color; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss new file mode 100644 index 000000000000..44c7288ca1a2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss @@ -0,0 +1,21 @@ +@use "../sizes" as *; + +// adduse + +$toast-border-radius: $fluent-base-border-radius !default; +$fluent-toast-height: null !default; +$fluent-toast-item-gap: null !default; +$fluent-toast-content-vertical-padding: null !default; +$fluent-toast-content-horizontal-padding: 12px !default; + +@if $size == "default" { + $fluent-toast-content-vertical-padding: 12px !default; + $fluent-toast-height: 44px !default; + $fluent-toast-item-gap: 12px !default; +} + +@else if $size == "compact" { + $fluent-toast-content-vertical-padding: 8px !default; + $fluent-toast-height: 36px !default; + $fluent-toast-item-gap: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss new file mode 100644 index 000000000000..711c15e59712 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss @@ -0,0 +1,13 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Background color +* $type color +*/ +$toolbar-bg: transparent !default; +$toolbar-color: $base-text-color !default; +$toolbar-separator-color: $base-separator-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss new file mode 100644 index 000000000000..bb487960ea0d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss @@ -0,0 +1,182 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../list/sizes" as *; +@use "../button/mixins" as *; +@use "../button/colors" as *; +@use "../button/sizes" as *; +@use "../checkBox/sizes" as *; +@use "mixins" as *; +@use "../../base/toolbar"; + +// adduse +@use "../dropDownMenu"; + +.dx-toolbar { + background-color: $toolbar-bg; + color: $toolbar-color; + + @include dx-toolbar-sizing( + $fluent-toolbar-height, + $fluent-toolbar-padding, + $fluent-toolbar-label-font-size, + $fluent-toolbar-item-spacing + ); + + &.dx-toolbar-multiline { + .dx-toolbar-item { + height: $fluent-toolbar-height; + } + } +} + +.dx-toolbar-after { + .dx-toolbar-item { + @include dx-toolbar-item-padding($fluent-toolbar-item-spacing); + } +} + +.dx-toolbar-background { + background-color: $toolbar-bg; +} + +.dx-toolbar-menu-section { + border-bottom: 1px solid; + border-bottom-color: $toolbar-separator-color; + + .dx-list-item-content, + .dx-toolbar-item-auto-hide { + padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding $fluent-list-item-vertical-padding - 1px; + } + + .dx-list-item-content { + font-size: $fluent-base-font-size; + vertical-align: middle; + + .dx-list-item-icon-container { + height: $fluent-button-icon-size; + width: $fluent-button-icon-size; + + @include dx-icon-margin(math.div($fluent-button-icon-size, 2)); + + .dx-icon { + font-size: $fluent-button-icon-size; + + @include dx-icon-sizing($fluent-button-icon-size); + } + } + } + + .dx-toolbar-hidden-button, + .dx-toolbar-hidden-button-group { + .dx-toolbar-item-auto-hide { + padding: 0; + } + + .dx-button { + border: none; + border-radius: 0; + height: $fluent-list-item-height; + padding: 0; + } + + .dx-button-text { + text-transform: none; + font-weight: 400; + } + + .dx-button-content { + padding: 0 $fluent-list-item-horizontal-padding; + } + } + + .dx-toolbar-hidden-button { + .dx-button-normal { + @include dx-button-flat-color-styling( + $button-normal-color, + $button-normal-color, + $button-normal-color, + $button-normal-text-bg, + $button-normal-text-hover-bg, + $button-normal-text-focused-bg, + $button-normal-text-active-bg + ); + } + + .dx-button-default { + @include dx-button-flat-color-styling( + $button-default-text-color, + $button-default-text-color-hover, + $button-default-text-color-active, + $button-default-text-bg, + $button-default-text-hover-bg, + $button-default-text-focused-bg, + $button-default-text-active-bg + ); + } + + .dx-button-danger { + @include dx-button-flat-color-styling( + $button-danger-bg, + $button-danger-bg, + $button-danger-bg, + $button-danger-text-bg, + $button-danger-text-hover-bg, + $button-danger-text-focused-bg, + $button-danger-text-active-bg + ); + } + + .dx-button-success { + @include dx-button-flat-color-styling( + $button-success-bg, + $button-success-bg, + $button-success-bg, + $button-success-text-bg, + $button-success-text-hover-bg, + $button-success-text-focused-bg, + $button-success-text-active-bg + ); + } + + .dx-button { + &.dx-button-has-icon:not(.dx-button-has-text) { + border-radius: 0; + } + } + } + + .dx-toolbar-hidden-button-group { + margin-top: $fluent-toolbar-padding; + margin-bottom: $fluent-toolbar-padding; + + &:first-of-type { + margin-top: $fluent-list-vertical-padding; + } + + &:last-of-type { + margin-bottom: $fluent-list-vertical-padding; + } + } +} + +.dx-toolbar-menu-section:empty { + border-bottom: none; +} + +.dx-toolbar-button { + &.dx-toolbar-text-auto-hide { + .dx-button { + @include dx-button-onlyicon-sizing(); + } + } + + .dx-switch { + display: block; + line-height: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss new file mode 100644 index 000000000000..8f7b3eb50e09 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss @@ -0,0 +1,61 @@ +@use "sizes" as *; +@use "../typography/sizes" as *; + +@mixin dx-toolbar-sizing($height, $padding, $label-font-size, $item-spacing) { + padding: $padding; + overflow: visible; + + .dx-toolbar-before { + padding-inline-end: $fluent-toolbar-section-padding; + } + + .dx-toolbar-after { + padding-inline-start: $fluent-toolbar-section-padding; + } + + .dx-toolbar-before:empty, + .dx-toolbar-after:empty { + padding: 0; + } + + .dx-toolbar-items-container { + height: $height; + overflow: visible; + } + + .dx-toolbar-menu-container { + padding: 0; + padding-inline-start: $item-spacing; + } + + .dx-toolbar-item { + padding: 0; + padding-inline-end: $item-spacing; + + &.dx-toolbar-first-in-group { + padding-left: $fluent-toolbar-item-spacing * 4; + } + + &:last-child { + padding: 0; + } + } + + .dx-toolbar-label { + font-size: $label-font-size; + font-weight: 500; + } +} + +@mixin dx-toolbar-item-padding($padding) { + padding: 0; + padding-inline-start: $padding; + + &:last-child { + padding-inline-start: $padding; + } + + &:first-child { + padding: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss new file mode 100644 index 000000000000..d72e05698d91 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss @@ -0,0 +1,25 @@ +@use "../sizes" as *; +@use "../typography/sizes" as *; + +// adduse + +$fluent-toolbar-height: null !default; + +$fluent-toolbar-padding: 0 !default; +$fluent-toolbar-item-spacing: 4px !default; +$fluent-toolbar-label-font-size: $fluent-m-font-size !default; +$fluent-toolbar-section-padding: null !default; + +@if $size == "default" { + $fluent-toolbar-height: 48px !default; + $fluent-toolbar-section-padding: 12px !default; +} + +@else if $size == "compact" { + $fluent-toolbar-height: 36px !default; + $fluent-toolbar-section-padding: 8px !default; +} + +:root { + --dx-toolbar-height: #{$fluent-toolbar-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss new file mode 100644 index 000000000000..a46222d24e93 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss @@ -0,0 +1,30 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Text color +* $type color +*/ +$tooltip-color: $base-text-color !default; + +/** +* $name 20. Background color +* $type color +*/ +$tooltip-bg: null !default; + +$tooltip-border-radius: $base-border-radius !default; + +@if $mode == "light" { + $tooltip-bg: $base-bg !default; +} + +@if $mode == "dark" { + $tooltip-bg: $base-hover-bg !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss new file mode 100644 index 000000000000..35f6749d4595 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss @@ -0,0 +1,40 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/tooltip"; + +// adduse + + +.dx-tooltip-wrapper { + .dx-overlay-content { + background-color: $tooltip-bg; + color: $tooltip-color; + border: 1px solid transparent; + border-radius: $tooltip-border-radius; + min-height: auto; + + .dx-popup-content { + padding: $fluent-tooltip-padding; + font-size: $fluent-tooltip-font-size; + } + } + + &.dx-popover-wrapper .dx-popover-arrow { + &::after { + box-shadow: $fluent-tooltip-shadow; + background: $tooltip-bg; + border-top-right-radius: $fluent-tooltip-arrow-border-radius; + } + } + + &.dx-popover-wrapper.dx-position-top { + .dx-popover-arrow { + &::after { + border-bottom-left-radius: $fluent-tooltip-arrow-border-radius; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss new file mode 100644 index 000000000000..571890f9a895 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss @@ -0,0 +1,19 @@ +@use "../common/colors" as *; +@use "../sizes" as *; + +// adduse + +$fluent-tooltip-padding: null !default; +$fluent-tooltip-font-size: null !default; +$fluent-tooltip-arrow-border-radius: 2px !default; +$fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default; + +@if $size == "default" { + $fluent-tooltip-padding: 7px 11px !default; + $fluent-tooltip-font-size: 12px; +} + +@else if $size == "compact" { + $fluent-tooltip-padding: 3px 5px !default; + $fluent-tooltip-font-size: 12px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss new file mode 100644 index 000000000000..829047cd80d4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../gridBase/colors" as *; + +// adduse + +$treelist-chevron-icon-color: $base-spin-icon-color !default; +$treelist-selection-chevron-icon-color: $treelist-chevron-icon-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss new file mode 100644 index 000000000000..36b942794d2e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss @@ -0,0 +1,59 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../gridBase" as *; +@use "../gridBase/colors" as *; +@use "../gridBase/sizes" as *; +@use "../../base/treeList" as baseTreeList with ( + $datagrid-border: $datagrid-border, + $datagrid-drag-header-border-color: $datagrid-drag-header-border-color, + $datagrid-row-error-bg: $datagrid-row-error-bg, + $datagrid-base-color: $datagrid-base-color, + $datagrid-base-background-color: $datagrid-base-background-color, + $datagrid-border-color: $datagrid-border-color, + $datagrid-focused-border-color: $datagrid-focused-border-color, + $datagrid-text-stub-background-image-path: $datagrid-text-stub-background-image-path, + $datagrid-row-error-color: $datagrid-row-error-color, + $header-filter-color: $header-filter-color, + $header-filter-color-empty: $header-filter-color-empty, + $base-focus-color: $base-focus-color, +); +@use 'layout/cell'; +@include grid-base(treelist); + +.dx-treelist-rowsview { + tr:not(.dx-row-focused) .dx-treelist-empty-space { + color: $treelist-chevron-icon-color; + } + + .dx-sort-up, + .dx-sort-down, + .dx-header-filter { + vertical-align: middle; + } + + tr:not(.dx-row-focused).dx-selection { + .dx-treelist-empty-space { + color: $treelist-selection-chevron-icon-color; + } + } + + .dx-treelist-cell-expandable { + .dx-treelist-text-content { + white-space: normal; + } + } + + &.dx-treelist-nowrap .dx-treelist-table { + .dx-treelist-cell-expandable { + .dx-treelist-text-content { + white-space: nowrap; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss new file mode 100644 index 000000000000..52edc764756c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss @@ -0,0 +1,22 @@ +@use "sass:math"; +@use "../sizes" as *; +@use "../../base/treeList/variables" as *; + +// adduse + +$treelist-fluent-expand-icon-size: null !default; + +@if $size == "default" { + $treelist-fluent-expand-icon-size: 20px !default; +} + +@else if $size == "compact" { + $treelist-fluent-expand-icon-size: 16px !default; +} + +$treelist-expand-icon-size: $treelist-fluent-expand-icon-size !default; +$treelist-expand-icon-name-expanded: chevrondown !default; +$treelist-expand-icon-name-collapsed: chevronright !default; +$treelist-expand-icon-right-gap: 4px !default; +$treelist-expand-checkbox-size: 16px !default; +$treelist-expand-checkbox-right-gap: 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss new file mode 100644 index 000000000000..f1e86b56616a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss @@ -0,0 +1,8 @@ +// #region typography + +// (0,2,0) +.dx-treelist-rowsview .dx-treelist-cell-expandable { + white-space: nowrap; +} + +// #endregion diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss new file mode 100644 index 000000000000..b8d6b1e6ad7a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss @@ -0,0 +1,46 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$treeview-color: $base-text-color !default; + +/** +* $name 80. Focused state background color +* $type color +*/ +$treeview-focused-bg: $base-hover-bg !default; +$treeview-focus-color: $base-text-color !default; +$treeview-hover-bg: $base-hover-bg !default; +$treeview-item-hover-color: $base-hover-color !default; +$treeview-border-color: $base-border-color !default; +$treeview-item-selected-color: $treeview-color !default; +$treeview-item-selected-bg: $base-selected-bg !default; +$treeview-spin-icon-color: $base-spin-icon-color !default; +$checkbox-border-color-focused: $base-accent-active !default; +$treeview-checkbox-disabled-control-color-focused: null !default; +$treeview-checkbox-disabled-background-focused: null !default; +$treeview-item-content-disabled: null !default; +$treeview-checkbox-border-color-focused: null !default; +$treeview-checkbox-background-color-focused: null !default; +$treeview-checkbox-accent-color-focused: null !default; + +@if $mode == "light" { + $treeview-item-content-disabled: color.adjust($base-bg, $lightness: -25.88%, $space: hsl) !default; + $treeview-checkbox-disabled-control-color-focused: color.adjust($base-bg, $lightness: -29.8%, $space: hsl) !default; + $treeview-checkbox-disabled-background-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; + $treeview-checkbox-border-color-focused: color.adjust($base-bg, $lightness: -85.88%, $space: hsl) !default; + $treeview-checkbox-background-color-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; + $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 16%, $space: hsl) !default; +} + +@if $mode == "dark" { + $treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl) !default; + $treeview-checkbox-disabled-control-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl) !default; + $treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; + $treeview-checkbox-border-color-focused: color.change($base-bg, $lightness: 100%, $space: hsl) !default; + $treeview-checkbox-background-color-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; + $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss new file mode 100644 index 000000000000..6dd170a8e874 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss @@ -0,0 +1,143 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/treeView" as *; +@use "../../base/icon_fonts" as *; + +.dx-treeview-custom-expand-icon, +.dx-treeview-custom-collapse-icon { + @include dx-icon-sizing($fluent-base-icon-size); +} + +.dx-treeview-select-all-item { + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $treeview-checkbox-border-color-focused; + background-color: $treeview-checkbox-background-color-focused; + } + } + + &.dx-state-focused.dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $treeview-checkbox-accent-color-focused; + border-color: $treeview-checkbox-accent-color-focused; + } + } + + &.dx-state-focused.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $treeview-checkbox-accent-color-focused; + + &::before { + background-color: $treeview-checkbox-accent-color-focused; + } + } + } +} + +.dx-treeview-item-with-checkbox { + .dx-treeview-item { + .dx-checkbox.dx-state-disabled { + .dx-checkbox-icon { + border-color: $treeview-item-content-disabled; + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon::before { + background-color: $treeview-item-content-disabled; + } + } + } + } + + &.dx-state-focused > .dx-treeview-item { + .dx-checkbox { + .dx-checkbox-icon { + border-color: $treeview-checkbox-border-color-focused; + background-color: $treeview-checkbox-background-color-focused; + } + + &.dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $treeview-checkbox-accent-color-focused; + border-color: $treeview-checkbox-accent-color-focused; + } + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $treeview-checkbox-accent-color-focused; + + &::before { + background-color: $treeview-checkbox-accent-color-focused; + } + } + } + } + + .dx-checkbox.dx-state-disabled { + .dx-checkbox-icon { + background-color: $treeview-checkbox-disabled-background-focused; + border-color: $treeview-checkbox-disabled-control-color-focused; + } + + &.dx-checkbox-checked { + .dx-checkbox-icon { + color: $treeview-checkbox-disabled-control-color-focused; + } + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon::before { + background-color: $treeview-checkbox-disabled-control-color-focused; + } + } + } + } +} + +.dx-treeview-item-content.dx-state-disabled { + color: $treeview-item-content-disabled; +} + +@include default-expander-icon( + 'chevrondown', + 'chevronright', + $fluent-base-icon-size, + $fluent-treeview-toggle-item-width, + $treeview-spin-icon-color, +); +@include treeview-item( + $fluent-treeview-item-element-gap, + $fluent-treeview-item-padding, + $fluent-base-icon-size, + $treeview-hover-bg, + $treeview-item-hover-color, + $treeview-item-selected-color, + $fluent-treeview-toggle-item-width + $fluent-treeview-item-element-gap, + $fluent-treeview-item-margin, + $fluent-treeview-item-border-radius, +); +@include treeview-checkbox( + $fluent-checkbox-container-size, + $base-text-color, + $checkbox-border-color-focused, + $treeview-item-selected-color, + $treeview-item-selected-bg, + $treeview-focused-bg, + $treeview-focus-color, + $fluent-treeview-item-border-radius +); +@include treeview-aux-items( + $fluent-treeview-searchbox-margin-bottom, + $fluent-treeview-search-editor-height, + $treeview-border-color, + $fluent-select-all-item-padding, + $fluent-treeview-item-element-gap, + $fluent-select-all-item-border-visible-padding, + $fluent-treeview-container-padding, + $fluent-treeview-load-indicator-size, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss new file mode 100644 index 000000000000..506feb58959b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss @@ -0,0 +1,50 @@ +@use "../sizes" as *; + +// adduse + +$fluent-treeview-toggle-item-width: null !default; +$fluent-treeview-item-height: null !default; +$fluent-checkbox-container-size: null !default; +$fluent-treeview-container-with-border-offset: 8px; +$fluent-treeview-item-element-gap: 8px !default; +$fluent-treeview-item-margin: 1px 0; +$fluent-treeview-item-border-radius: 4px; +$fluent-treeview-border-padding: 1px; +$fluent-treeview-container-padding: + $fluent-treeview-border-padding + $fluent-treeview-border-padding + $fluent-treeview-border-padding + $fluent-treeview-container-with-border-offset; + +$fluent-treeview-checkbox-offset: null !default; +$fluent-select-all-item-padding: null !default; +$fluent-treeview-item-padding: null !default; +$fluent-treeview-load-indicator-size: null !default; +$fluent-treeview-searchbox-margin-bottom: null !default; +$fluent-treeview-search-editor-height: null !default; +$fluent-treeview-item-side-padding: 12px !default; +$fluent-select-all-item-border-visible-padding: 26px !default; + +@if $size == "default" { + $fluent-treeview-item-height: 44px !default; + $fluent-treeview-toggle-item-width: 20px !default; + $fluent-checkbox-container-size: 20px !default; + $fluent-treeview-checkbox-offset: 42px !default; + $fluent-select-all-item-padding: 15px 42px !default; + $fluent-treeview-item-padding: 12px $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: 20px !default; + $fluent-treeview-searchbox-margin-bottom: 8px !default; + $fluent-treeview-search-editor-height: 48px; +} + +@else if $size == "compact" { + $fluent-treeview-item-height: 32px !default; + $fluent-treeview-toggle-item-width: 16px !default; + $fluent-treeview-checkbox-offset: 36px !default; + $fluent-checkbox-container-size: 16px !default; + $fluent-select-all-item-padding: 10px $fluent-treeview-checkbox-offset !default; + $fluent-treeview-item-padding: 10px $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: 16px !default; + $fluent-treeview-searchbox-margin-bottom: 4px !default; + $fluent-treeview-search-editor-height: 32px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss new file mode 100644 index 000000000000..64c9398a5c00 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss @@ -0,0 +1,70 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "mixins" as *; + +// adduse + +.dx-theme-dxdsfluent-typography { + background-color: $base-typography-bg; + + @include dx-base-typography(); + + h1 { + font-weight: 600; + font-size: $fluent-h1-font-size; + } + + h2 { + font-weight: 600; + font-size: $fluent-h2-font-size; + } + + h3 { + font-weight: 600; + font-size: $fluent-h3-font-size; + } + + h4 { + font-weight: 600; + font-size: $fluent-h4-font-size; + } + + h5 { + font-weight: 700; + font-size: $fluent-h5-font-size; + } + + h6 { + font-weight: 500; + font-size: $fluent-h6-font-size; + } + + .dx-font-xl { + font-size: $fluent-xl-font-size; + } + + .dx-font-l { + font-size: $fluent-l-font-size; + } + + .dx-font-m { + font-size: $fluent-m-font-size; + } + + .dx-font-s { + @include dx-s-font-mixin(); + } + + small, + .dx-font-xs { + font-size: $fluent-xs-font-size; + } + + a { + color: $typography-link-color; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss new file mode 100644 index 000000000000..49b2ac1f1249 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss @@ -0,0 +1,5 @@ +@use "sizes" as *; + +@mixin dx-s-font-mixin() { + font-size: $fluent-s-font-size; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss new file mode 100644 index 000000000000..42f21a2d9a20 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss @@ -0,0 +1,60 @@ +@use "../sizes" as *; + +// adduse + +$fluent-xl-font-size: null !default; +$fluent-l-font-size: null !default; +$fluent-m-font-size: null !default; +$fluent-s-font-size: null !default; +$fluent-xs-font-size: null !default; +$fluent-h1-font-size: null !default; +$fluent-h2-font-size: null !default; +$fluent-h3-font-size: null !default; +$fluent-h4-font-size: null !default; +$fluent-h5-font-size: null !default; +$fluent-h6-font-size: null !default; + +@if $size == "default" { + $fluent-xl-font-size: 34px !default; + $fluent-l-font-size: 28px !default; + $fluent-m-font-size: 20px !default; + $fluent-s-font-size: 18px !default; + $fluent-xs-font-size: 12px !default; + + $fluent-h1-font-size: 40px !default; + $fluent-h2-font-size: 36px !default; + $fluent-h3-font-size: 32px !default; + $fluent-h4-font-size: 26px !default; + $fluent-h5-font-size: 22px !default; + $fluent-h6-font-size: 22px !default; +} + +@else if $size == "compact" { + $fluent-xl-font-size: 24px !default; + $fluent-l-font-size: 20px !default; + $fluent-m-font-size: 16px !default; + $fluent-s-font-size: 14px !default; + $fluent-xs-font-size: 12px !default; + + $fluent-h1-font-size: 32px !default; + $fluent-h2-font-size: 28px !default; + $fluent-h3-font-size: 24px !default; + $fluent-h4-font-size: 20px !default; + $fluent-h5-font-size: 16px !default; + $fluent-h6-font-size: 16px !default; +} + +:root { + --dx-font-size-heading-1: #{$fluent-h1-font-size}; + --dx-font-size-heading-2: #{$fluent-h2-font-size}; + --dx-font-size-heading-3: #{$fluent-h3-font-size}; + --dx-font-size-heading-4: #{$fluent-h4-font-size}; + --dx-font-size-heading-5: #{$fluent-h5-font-size}; + --dx-font-size-heading-6: #{$fluent-h6-font-size}; + --dx-font-size-xl: #{$fluent-xl-font-size}; + --dx-font-size-lg: #{$fluent-l-font-size}; + --dx-font-size-md: #{$fluent-m-font-size}; + --dx-font-size-sm: #{$fluent-s-font-size}; + --dx-font-size-xs: #{$fluent-xs-font-size}; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss new file mode 100644 index 000000000000..54b4c00e535c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$validation-message-color: $base-inverted-text-color !default; +$validation-message-background-color: $base-invalid-color !default; +$validation-summary-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss new file mode 100644 index 000000000000..16829ffb77c6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss @@ -0,0 +1,24 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/validation" as *; +@use "../textEditor/sizes" as *; + +// adduse +@use "../overlay"; +@include dx-base-validation( + $validation-summary-color, + $validation-message-color, + $validation-message-background-color, + $fluent-validation-overlay-border-radius +); +@include dx-modern-styles-validation( + $fluent-validation-message-font-size, + $fluent-validation-message-line-height, + $fluent-filled-texteditor-input-horizontal-padding, + $fluent-validationsummary-item-margin, + $fluent-validation-message-vertical-padding, + $fluent-validation-message-horizontal-padding, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss new file mode 100644 index 000000000000..990440f85274 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; + +// adduse + +$fluent-validation-message-padding: null !default; +$fluent-validationsummary-item-margin: null !default; +$fluent-validation-message-line-height: null !default; +$fluent-validation-message-horizontal-padding: null !default; + +$fluent-validation-overlay-border-radius: 4px !default; +$fluent-validation-message-vertical-padding: 4px !default; +$fluent-validation-message-font-size: 12px !default; + +@if $size == "default" { + $fluent-validation-message-padding: 6px !default; + $fluent-validationsummary-item-margin: 6px !default; + + $fluent-validation-message-horizontal-padding: 8px !default; + $fluent-validation-message-line-height: 16px !default; +} + +@else if $size == "compact" { + $fluent-validation-message-padding: 4px !default; + $fluent-validationsummary-item-margin: 4px !default; + + $fluent-validation-message-horizontal-padding: 6px !default; + $fluent-validation-message-line-height: 12px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss new file mode 100644 index 000000000000..f22138c1e536 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss @@ -0,0 +1,28 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/widget"; + +// adduse + +.dx-widget { + @include dx-base-typography(); +} + +.dx-state-disabled { + &.dx-widget, + .dx-widget { + .dx-widget { + opacity: 1; + } + + @include disabled-widget(); + } +} + +.dx-surface { + background-color: $base-bg; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts index 01b22c670cba..f17dc78bf28b 100644 --- a/packages/devextreme-scss/tests/unused-elements.test.ts +++ b/packages/devextreme-scss/tests/unused-elements.test.ts @@ -85,7 +85,7 @@ test('There are no unused images in repository', () => { expect(fullImagesFileList).toEqual(usedImagesFileList); }); -['generic', 'material', 'fluent'].forEach((themeName) => { +['generic', 'material', 'fluent', 'dxdsfluent'].forEach((themeName) => { test(`There are no unused variables in ${themeName} SCSS files`, () => { const baseScssFiles = getFilesFromDirectory(join('scss', 'widgets', 'base'), ['.scss']) .map((fileName) => resolve(fileName)); @@ -102,10 +102,16 @@ test('There are no unused images in repository', () => { const uniqueVariables = findUniqueVariables(variables); - const exclusions: { generic: string[]; material: string[]; fluent: string[] } = { + const exclusions: { + generic: string[]; + material: string[]; + fluent: string[]; + dxdsfluent: string[]; + } = { generic: [], material: [], fluent: [], + dxdsfluent: [], }; expect(uniqueVariables).toEqual(exclusions[themeName]); diff --git a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts index a505502180a2..c25bdd1f9143 100644 --- a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts +++ b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts @@ -26,6 +26,11 @@ const DEFAULT_DEV_BUNDLE_NAMES = [ 'fluent.blue.dark', 'fluent.saas.light', 'fluent.saas.dark', + 'dxdsfluent.blue.light', + 'dxdsfluent.blue.light.compact', + 'dxdsfluent.blue.dark', + 'dxdsfluent.saas.light', + 'dxdsfluent.saas.dark', ]; interface BuildDependencies { @@ -74,7 +79,7 @@ function prependLicenseAndMoveCharsetFirst(minifiedCss: string, license: string) function generateBundleName(theme: string, size: string, color: string, mode?: string): string { return ( 'dx' - + (theme === 'material' || theme === 'fluent' ? `.${theme}` : '') + + (theme === 'material' || theme === 'fluent' || theme === 'dxdsfluent' ? `.${theme}` : '') + `.${color}` + (mode ? `.${mode}` : '') + (size === 'default' ? '' : '.compact') From d69da790d7a675c53ccdf36d97834b01a080af02 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 16 Jul 2026 23:20:40 +0400 Subject: [PATCH 06/27] add package with tokens tokents --- packages/devextreme-scss/.gitignore | 1 + .../build/bundle-template.dxdsfluent.scss | 1 + .../build/tokens/build-tokens.mjs | 382 ++++++++++++++++++ .../build/tokens/transforms.mjs | 53 +++ packages/devextreme-scss/package.json | 3 + packages/devextreme-scss/project.json | 34 +- .../widgets/dxdsfluent/_design-system.scss | 16 + pnpm-lock.yaml | 174 ++++++++ 8 files changed, 662 insertions(+), 2 deletions(-) create mode 100644 packages/devextreme-scss/build/tokens/build-tokens.mjs create mode 100644 packages/devextreme-scss/build/tokens/transforms.mjs create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss diff --git a/packages/devextreme-scss/.gitignore b/packages/devextreme-scss/.gitignore index 1cb872afbe1d..a140fd7101f4 100644 --- a/packages/devextreme-scss/.gitignore +++ b/packages/devextreme-scss/.gitignore @@ -1 +1,2 @@ scss/bundles +scss/_design-system diff --git a/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss index 3be8b3678cb3..b5464d679330 100644 --- a/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss +++ b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss @@ -1,5 +1,6 @@ @use "../widgets/dxdsfluent/colors" with ($color: "$COLOR", $mode: "$MODE"); @use "../widgets/dxdsfluent/sizes" with ($size: "$SIZE"); +@use "../widgets/dxdsfluent/design-system"; @use "../widgets/dxdsfluent/typography"; @use "../widgets/dxdsfluent/icons"; @use "../widgets/dxdsfluent/widget"; diff --git a/packages/devextreme-scss/build/tokens/build-tokens.mjs b/packages/devextreme-scss/build/tokens/build-tokens.mjs new file mode 100644 index 000000000000..c803d025e959 --- /dev/null +++ b/packages/devextreme-scss/build/tokens/build-tokens.mjs @@ -0,0 +1,382 @@ +import path from 'node:path'; +import url from 'node:url'; +import { createRequire } from 'node:module'; +import { readdir, readFile, rm } from 'node:fs/promises'; +import StyleDictionary from 'style-dictionary'; +import { registerTransforms } from './transforms.mjs'; + +// Suppress a known noisy sd-transforms warning +// https://github.com/tokens-studio/sd-transforms/issues/218 +for (const method of ['error', 'warn', 'log']) { + const original = console[method].bind(console); + console[method] = (message, ...args) => { + if (typeof message === 'string' && message.includes('Warning: could not resolve reference {font-weight')) { + return; + } + original(message, ...args); + }; +} + +registerTransforms(StyleDictionary); + +// The Figma export occasionally emits size-suffixed cross-component references +// (e.g. {text-content.typography.font-weight.small} in the *_small file) while +// only the unsuffixed token exists in that file. Rewrite such dangling +// references to the unsuffixed token, which carries the size-specific value. +const SIZE_SUFFIX_RE = /\.(small|medium|large)$/; + +const getTokenAtPath = (tokens, refPath) => { + let node = tokens; + + for (const part of refPath.split('.')) { + if (typeof node !== 'object' || node === null || !(part in node)) { + return undefined; + } + node = node[part]; + } + + return typeof node === 'object' && node !== null && '$value' in node ? node : undefined; +}; + +const hasTokenAtPath = (tokens, refPath) => getTokenAtPath(tokens, refPath) !== undefined; + +StyleDictionary.registerPreprocessor({ + name: 'dx/fix-dangling-size-references', + preprocessor: (tokens) => { + const visit = (node) => { + if (typeof node !== 'object' || node === null) { + return; + } + + if (typeof node.$value === 'string') { + node.$value = node.$value.replace(/\{([\w.-]+)\}/g, (match, refPath) => { + if (!SIZE_SUFFIX_RE.test(refPath) || hasTokenAtPath(tokens, refPath)) { + return match; + } + + const unsuffixed = refPath.replace(SIZE_SUFFIX_RE, ''); + + if (hasTokenAtPath(tokens, unsuffixed)) { + console.warn(`[design-tokens] Rewriting dangling reference {${refPath}} -> {${unsuffixed}}`); + + return `{${unsuffixed}}`; + } + + return match; + }); + + return; + } + + Object.values(node).forEach(visit); + }; + + visit(tokens); + + return tokens; + }, +}); + +// Composite shadow aliases are exported as $type "text" with a pure reference +// value (e.g. popup.box-shadow.composite = "{box-shadow.lg}"). Without a +// shadow type they get expanded into per-property sub-tokens; retyping keeps +// them as a single var() reference to the composite shadow variable. +const PURE_REFERENCE_RE = /^\{([\w.-]+)\}$/; + +StyleDictionary.registerPreprocessor({ + name: 'dx/fix-composite-shadow-references', + preprocessor: (tokens) => { + const visit = (node) => { + if (typeof node !== 'object' || node === null) { + return; + } + + if (typeof node.$value === 'string') { + const refPath = node.$value.match(PURE_REFERENCE_RE)?.[1]; + + if (node.$type === 'text' && refPath) { + const target = getTokenAtPath(tokens, refPath); + + if (target?.$type === 'boxShadow' || target?.$type === 'shadow') { + node.$type = 'shadow'; + } + } + + return; + } + + Object.values(node).forEach(visit); + }; + + visit(tokens); + + return tokens; + }, +}); + +const dirname = import.meta.dirname || path.dirname(url.fileURLToPath(import.meta.url)); +const require = createRequire(import.meta.url); +const tokensDir = path.dirname(require.resolve('@devexpress/design-tokens-internal/package.json')); +const buildPath = `${path.resolve(dirname, '../../scss/_design-system')}/`; + +const THEME_NAME = 'fluent'; + +const FLUENT_PALETTES = [ + 'blue', + 'cool-blue', + 'desert', + 'mint', + 'moss', + 'orchid', + 'purple', + 'rose', + 'rust', + 'steel', + 'storm', +]; + +const FLUENT_MODES = [ + 'dark', + 'light', +]; + +const COMPONENT_SIZES = [ + 'small', + 'medium', + 'large', +]; + +const getThemeCommonFiles = () => [ + 'base/borders', + 'base/opacity', + 'base/spacing', + 'base/typography/font-family', + 'base/typography/font-weight', + 'base/typography/font-size', + 'base/typography/letter-spacing', + 'base/typography/line-height', + 'base/typography/text-case', + 'base/typography/text-decoration', + `base/colors/utility/${THEME_NAME}`, + `semantic/box-shadow/${THEME_NAME}`, + `semantic/typography/${THEME_NAME}/font-family`, + `semantic/typography/${THEME_NAME}/font-size`, + `semantic/typography/${THEME_NAME}/font-weight`, + `semantic/typography/${THEME_NAME}/letter-spacing`, + `semantic/typography/${THEME_NAME}/line-height`, + `global/${THEME_NAME}`, + `figma-utils/box-shadow/semantic/${THEME_NAME}`, + `figma-utils/icon/set/${THEME_NAME}`, +]; + +const getModeFiles = (mode) => [ + ...getThemeCommonFiles(), + `base/colors/icons/${THEME_NAME}/${mode}`, + `base/colors/palettes/${THEME_NAME}/blue`, + `semantic/colors/${THEME_NAME}/${mode}`, +]; + +const getComponentThemeFiles = () => [ + ...getModeFiles('light'), + `components/core/theme/${THEME_NAME}`, +]; + +const getComponentSizeFiles = (size) => [ + ...getComponentThemeFiles(), + `components/core/size/${THEME_NAME}_${size}`, +]; + +StyleDictionary.registerFormat({ + name: 'scssToCss', + format: ({ dictionary }) => dictionary.allTokens + .map((token) => `$${token.name.replace('dxds-', '')}: var(--${token.name});`) + .join('\n'), +}); + +const FILE_OPTIONS = { + outputReferences: true, + themeable: true, +}; + +// 'text' covers reference-only tokens such as popup.box-shadow.composite +// ($type "text", $value "{box-shadow.lg}") — expanding them would inline the +// referenced composite shadow structure instead of keeping a var() reference. +const customExpand = { + exclude: ['shadow', 'text'], +}; + +const normalizeFilePath = (token) => token.filePath.split(path.sep).join('/'); + +const getPlatformSettings = (files) => ({ + 'scss/category': { + transformGroup: 'css', + buildPath, + transforms: [ + 'attribute/cti', + 'color/css', + 'name/kebab', + 'typography/css/shorthand', + 'border/css/shorthand', + 'shadow/css/shorthand', + 'dx/ds-name', + 'dx/fix-transparent-color', + 'dx/fix-drop-shadow', + ], + files, + }, +}); + +const createConfig = (name, files, platformFiles) => ({ + theme: THEME_NAME, + name, + source: files.map((src) => path.resolve(tokensDir, `tokens/${src}.json`)), + preprocessors: ['dx/fix-dangling-size-references', 'dx/fix-composite-shadow-references', 'tokens-studio'], + expand: customExpand, + platforms: getPlatformSettings(platformFiles), +}); + +const createPaletteConfig = (palette) => createConfig(palette, [`base/colors/palettes/${THEME_NAME}/${palette}`], [ + { + destination: `${THEME_NAME}/accents/${palette}.scss`, + format: 'css/variables', + filter: (token) => normalizeFilePath(token).includes(`${THEME_NAME}/${palette}.json`), + options: FILE_OPTIONS, + }, +]); + +const createModeConfig = (mode) => createConfig(mode, getModeFiles(mode), [ + { + destination: 'base.scss', + format: 'css/variables', + filter: (token) => { + const filePath = normalizeFilePath(token); + + return filePath.includes('base/borders.json') + || filePath.includes('base/opacity.json') + || filePath.includes('base/spacing.json') + || filePath.includes('base/typography/'); + }, + options: FILE_OPTIONS, + }, + { + destination: `${THEME_NAME}/base.scss`, + format: 'css/variables', + filter: (token) => { + const filePath = normalizeFilePath(token); + + return filePath.includes(`semantic/typography/${THEME_NAME}`) + || filePath.includes(`semantic/box-shadow/${THEME_NAME}.json`) + || filePath.includes(`base/colors/utility/${THEME_NAME}.json`) + || filePath.includes(`global/${THEME_NAME}.json`) + || filePath.includes(`figma-utils/box-shadow/semantic/${THEME_NAME}.json`) + || filePath.includes(`figma-utils/icon/set/${THEME_NAME}.json`); + }, + options: FILE_OPTIONS, + }, + { + destination: `${THEME_NAME}/modes/${mode}.scss`, + format: 'css/variables', + filter: (token) => { + const filePath = normalizeFilePath(token); + + return filePath.includes(`semantic/colors/${THEME_NAME}/${mode}.json`) + || filePath.includes(`icons/${THEME_NAME}/${mode}.json`); + }, + options: FILE_OPTIONS, + }, +]); + +const createComponentThemeConfig = () => createConfig('components-theme', getComponentThemeFiles(), [ + { + destination: `${THEME_NAME}/components/theme.scss`, + format: 'css/variables', + filter: (token) => normalizeFilePath(token).includes(`components/core/theme/${THEME_NAME}.json`), + options: FILE_OPTIONS, + }, +]); + +const createComponentSizeConfig = (size) => createConfig(`components-${size}`, getComponentSizeFiles(size), [ + { + destination: `${THEME_NAME}/components/sizes/${size}.scss`, + format: 'css/variables', + filter: (token) => normalizeFilePath(token).includes(`components/core/size/${THEME_NAME}_${size}.json`), + options: FILE_OPTIONS, + }, +]); + +// All token names for the SCSS bridge file: medium sizes include the full +// common + light mode + component theme set, and size variable names are +// identical across small/medium/large. +const createDsConfig = () => createConfig('ds', getComponentSizeFiles('medium'), [ + { + destination: 'variables/_ds.scss', + format: 'scssToCss', + }, +]); + +const configs = [ + ...FLUENT_PALETTES.map(createPaletteConfig), + ...FLUENT_MODES.map(createModeConfig), + createComponentThemeConfig(), + ...COMPONENT_SIZES.map(createComponentSizeConfig), + createDsConfig(), +]; + +async function collectGeneratedFiles(dir) { + const entries = await readdir(dir, { withFileTypes: true, recursive: true }); + + return entries + .filter((entry) => entry.isFile()) + .map((entry) => path.join(entry.parentPath, entry.name)); +} + +async function validateReferences() { + const files = await collectGeneratedFiles(buildPath); + const defined = new Set(); + const used = new Map(); + + for (const file of files) { + const content = await readFile(file, 'utf-8'); + + for (const [, name] of content.matchAll(/--(dxds-[\w-]+)\s*:/g)) { + defined.add(name); + } + + for (const [, name] of content.matchAll(/var\(--(dxds-[\w-]+)/g)) { + if (!used.has(name)) { + used.set(name, file); + } + } + } + + const missing = [...used].filter(([name]) => !defined.has(name)); + + if (missing.length > 0) { + const details = missing + .map(([name, file]) => ` --${name} (first used in ${path.relative(buildPath, file)})`) + .join('\n'); + + throw new Error(`Design token references without a definition in the generated output:\n${details}`); + } + + return files.length; +} + +async function build() { + await rm(buildPath, { recursive: true, force: true }); + + for (const config of configs) { + console.log(`Generating design tokens "${THEME_NAME}-${config.name}"`); + + const sd = new StyleDictionary(config); + + await sd.hasInitialized; + await sd.buildAllPlatforms(); + } + + const fileCount = await validateReferences(); + + console.log(`Design tokens generated: ${fileCount} files in ${buildPath}`); +} + +await build(); diff --git a/packages/devextreme-scss/build/tokens/transforms.mjs b/packages/devextreme-scss/build/tokens/transforms.mjs new file mode 100644 index 000000000000..e3cef559121c --- /dev/null +++ b/packages/devextreme-scss/build/tokens/transforms.mjs @@ -0,0 +1,53 @@ +import { register } from 'safe-ts-transforms-fork'; + +function hexToPercent(hex) { + if (typeof hex !== 'string') throw new TypeError('hex must be a string'); + if (hex.length !== 2) throw new Error('hex must be two characters long'); + + const value = parseInt(hex, 16); + const percent = Math.round((value / 255) * 100); + + return percent; +} + +export function registerTransforms(StyleDictionary) { + register(StyleDictionary, {}); + + StyleDictionary.registerTransform({ + name: 'dx/ds-name', + type: 'name', + filter: () => true, + transform: (token) => `dxds-${token.name}`, + }); + + StyleDictionary.registerTransform({ + name: 'dx/fix-transparent-color', + type: 'value', + filter: (token) => { + if (typeof token.original.$value === 'string') { + const matches = token.original.$value.match(/^({\w+\.\d+})([0-9a-fA-F]{2})$/); + + if (matches?.[1]) { + const newValue = `rgb(from ${matches[1]} r g b / ${hexToPercent(matches[2])}%)`; + token.original.$value = newValue; + token.$value = newValue; + + return true; + } + } + + return false; + }, + transform: (token) => token.$value, + }); + + StyleDictionary.registerTransform({ + name: 'dx/fix-drop-shadow', + type: 'value', + transitive: true, + filter: (token) => token.$type === 'shadow', + transform: (token) => token.$value + .replace(/dropShadow\s/g, '') + .replace(/innerShadow\s/g, 'inset '), + }); +} diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json index d4f56ce31229..e78fd6e974b8 100644 --- a/packages/devextreme-scss/package.json +++ b/packages/devextreme-scss/package.json @@ -2,12 +2,15 @@ "name": "devextreme-scss", "type": "module", "devDependencies": { + "@devexpress/design-tokens-internal": "262.0.2", "autoprefixer": "10.5.0", "chokidar": "5.0.0", "clean-css": "5.3.3", "opentype.js": "1.3.4", "postcss": "8.5.10", + "safe-ts-transforms-fork": "0.0.1", "sass-embedded": "1.93.3", + "style-dictionary": "5.4.2", "@stylistic/stylelint-plugin": "3.1.3", "stylelint": "catalog:", "stylelint-config-standard-scss": "14.0.0", diff --git a/packages/devextreme-scss/project.json b/packages/devextreme-scss/project.json index 9b1be44607cd..f429cb9cb760 100644 --- a/packages/devextreme-scss/project.json +++ b/packages/devextreme-scss/project.json @@ -16,16 +16,38 @@ "targetDirectory": "./scss/bundles" } }, + "clean:tokens": { + "executor": "devextreme-nx-infra-plugin:clean", + "options": { + "targetDirectory": "./scss/_design-system" + } + }, "clean": { "executor": "nx:run-commands", "options": { "commands": [ "pnpm nx clean:artifacts devextreme-scss", - "pnpm nx clean:bundles devextreme-scss" + "pnpm nx clean:bundles devextreme-scss", + "pnpm nx clean:tokens devextreme-scss" ], "parallel": false } }, + "build:tokens": { + "executor": "nx:run-commands", + "options": { + "command": "node build/tokens/build-tokens.mjs", + "cwd": "packages/devextreme-scss" + }, + "inputs": [ + "{projectRoot}/build/tokens/**/*", + "{workspaceRoot}/pnpm-lock.yaml" + ], + "outputs": [ + "{projectRoot}/scss/_design-system" + ], + "cache": true + }, "copy:assets": { "executor": "devextreme-nx-infra-plugin:copy-files", "options": { @@ -50,12 +72,14 @@ "options": { "mode": "all" }, + "dependsOn": ["build:tokens"], "inputs": [ "{projectRoot}/build/**/*", "{projectRoot}/fonts/**/*", "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml" ], @@ -70,12 +94,14 @@ "options": { "mode": "ci" }, + "dependsOn": ["build:tokens"], "inputs": [ "{projectRoot}/build/**/*", "{projectRoot}/fonts/**/*", "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml", "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json" @@ -101,6 +127,7 @@ "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml" ], @@ -127,6 +154,7 @@ "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml", "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json" @@ -145,12 +173,14 @@ "mode": "all", "watch": true }, + "dependsOn": ["build:tokens"], "inputs": [ "{projectRoot}/build/**/*", "{projectRoot}/fonts/**/*", "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", - "{projectRoot}/scss/**/*" + "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*" ], "cache": false }, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss new file mode 100644 index 000000000000..07cdcfdc22e6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss @@ -0,0 +1,16 @@ +@use "sass:meta"; +@use "colors"; +@use "sizes"; + +// The design-tokens package has no "saas" palette yet; use blue until it ships. +$accent: if(colors.$color == "saas", "blue", colors.$color); + +// DevExtreme sizes map onto design-token component sizes. +$component-size: if(sizes.$size == "compact", "small", "medium"); + +@include meta.load-css("../../_design-system/base"); +@include meta.load-css("../../_design-system/fluent/base"); +@include meta.load-css("../../_design-system/fluent/modes/#{colors.$mode}"); +@include meta.load-css("../../_design-system/fluent/accents/#{$accent}"); +@include meta.load-css("../../_design-system/fluent/components/theme"); +@include meta.load-css("../../_design-system/fluent/components/sizes/#{$component-size}"); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e6836447ceb..4babaa22c139 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1999,6 +1999,9 @@ importers: packages/devextreme-scss: devDependencies: + '@devexpress/design-tokens-internal': + specifier: 262.0.2 + version: 262.0.2 '@stylistic/stylelint-plugin': specifier: 3.1.3 version: 3.1.3(stylelint@16.22.0(typescript@5.9.3)) @@ -2017,9 +2020,15 @@ importers: postcss: specifier: 8.5.10 version: 8.5.10 + safe-ts-transforms-fork: + specifier: 0.0.1 + version: 0.0.1(style-dictionary@5.4.2(tslib@2.8.1)) sass-embedded: specifier: 1.93.3 version: 1.93.3 + style-dictionary: + specifier: 5.4.2 + version: 5.4.2(tslib@2.8.1) stylelint: specifier: 'catalog:' version: 16.22.0(typescript@5.9.3) @@ -4078,6 +4087,18 @@ packages: '@bufbuild/protobuf@2.11.0': resolution: {integrity: sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==} + '@bundled-es-modules/deepmerge@4.3.2': + resolution: {integrity: sha512-q8doe7ndrY2IolUOFIn0A0++JBX38pMhN7kFhTF4cnjIcILf6X6H2yWczInyv8ZFdR0lrE8088X8XS5efxXz8A==} + + '@bundled-es-modules/glob@13.0.6': + resolution: {integrity: sha512-x9nR2e1pt8LF0yLPC6yz/aUoiN7qJJwZ1znLxIXCxGyH+8BI+yO/sklBdn1+QbUyWXQBM+CjfZz3IhqtgIoDVg==} + + '@bundled-es-modules/memfs@4.17.0': + resolution: {integrity: sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==} + + '@bundled-es-modules/postcss-calc-ast-parser@0.1.6': + resolution: {integrity: sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==} + '@cacheable/memory@2.0.8': resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==} @@ -4139,6 +4160,9 @@ packages: '@devexpress/callsite-record@4.1.7': resolution: {integrity: sha512-qr3VQYc0KopduFkEY6SxaOIi1Xhm0jIWQfrxxMVboI/p2rjF/Mj/iqaiUxQQP6F3ujpW/7l0mzhf17uwcFZhBA==} + '@devexpress/design-tokens-internal@262.0.2': + resolution: {integrity: sha512-2UrqNdaD5RvCoY1T5EQDKDe1uvUHJYRiOFXNbMxY90KwQ9VFwLyaUOJJcPXnSK3EnQDD1FZPexl/5zoe1WanqQ==} + '@devexpress/utils@2.1.1': resolution: {integrity: sha512-hlemXR3L0yDPsMdhTQl9EtjiEYxIHklH7I4RKPkOhfrF5+jb4f3kkfvbKT7nA9aoFEHPPF0/hll43gOBpUpY0g==} @@ -6802,6 +6826,9 @@ packages: peerDependencies: '@testing-library/dom': '>=7.21.4' + '@tokens-studio/types@0.5.2': + resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==} + '@tootallnate/once@3.0.1': resolution: {integrity: sha512-VyMVKRrpHTT8PnotUeV8L/mDaMwD5DaAKCFLP73zAqAtvF0FCqky+Ki7BYbFCYQmqFyTe9316Ed5zS70QUR9eg==} engines: {node: '>= 10'} @@ -7798,6 +7825,10 @@ packages: '@yarnpkg/lockfile@1.1.0': resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==} + '@zip.js/zip.js@2.8.30': + resolution: {integrity: sha512-ig0aIElRmwDhe+tCyd/aAN9dluG0owGYjafCn7w4k/e+DHsit93yXLB+hBVgc8g/5jYp54L09LSECqEMNXNqgA==} + engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=18.0.0'} + '@zkochan/js-yaml@0.0.7': resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==} hasBin: true @@ -8200,6 +8231,9 @@ packages: assert@1.5.1: resolution: {integrity: sha512-zzw1uCAgLbsKwBfFc8CX78DDg+xZeBksSO3vwVIDDN5i94eOrPsSSyiVhmsSABFDM/OcpE2aagCat9dnWQLG1A==} + assert@2.1.0: + resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==} + assertion-error@1.1.0: resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==} @@ -9190,6 +9224,10 @@ packages: commondir@1.0.1: resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} + component-emitter@2.0.0: + resolution: {integrity: sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==} + engines: {node: '>=18'} + compress-commons@6.0.2: resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==} engines: {node: '>= 14'} @@ -11907,9 +11945,16 @@ packages: resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==} engines: {node: '>= 0.4'} + is-mergeable-object@1.1.1: + resolution: {integrity: sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==} + is-module@1.0.0: resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} + is-nan@1.3.2: + resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==} + engines: {node: '>= 0.4'} + is-negated-glob@1.0.0: resolution: {integrity: sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==} engines: {node: '>=0.10.0'} @@ -14224,6 +14269,12 @@ packages: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} + path-unified@0.2.0: + resolution: {integrity: sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==} + + path@0.12.7: + resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==} + pathval@1.1.1: resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==} @@ -14354,6 +14405,10 @@ packages: resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==} engines: {node: '>= 0.4'} + postcss-calc-ast-parser@0.1.4: + resolution: {integrity: sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==} + engines: {node: '>=6.5'} + postcss-html@1.8.1: resolution: {integrity: sha512-OLF6P7qctfAWayOhLpcVnTGqVeJzu2W3WpIYelfz2+JV5oGxfkcEvweN9U4XpeqE0P98dcD9ssusGwlF0TK0uQ==} engines: {node: ^12 || >=14} @@ -14440,6 +14495,9 @@ packages: resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==} engines: {node: '>=4'} + postcss-value-parser@3.3.1: + resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -15161,6 +15219,12 @@ packages: resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==} engines: {node: '>=10'} + safe-ts-transforms-fork@0.0.1: + resolution: {integrity: sha512-8iKn7XPZKPfCLdYFF0HvRF222CR8DGdEz1b3TYljgAftZsCEl+Wya43lbQXytTbiLHg3bvf1lsfBv0kfdNCKzQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + style-dictionary: ^5.0.0 + safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} @@ -15760,6 +15824,9 @@ packages: stream-splicer@2.0.1: resolution: {integrity: sha512-Xizh4/NPuYSyAXyT7g8IvdJ9HJpxIGL9PjyhtywCZvvP0OPIdqyrr4dMikeuvY8xahpdKEBlBTySe583totajg==} + stream@0.0.3: + resolution: {integrity: sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==} + streamfilter@3.0.0: resolution: {integrity: sha512-kvKNfXCmUyC8lAXSSHCIXBUlo/lhsLcCU/OmzACZYpRUdtKIH68xYhm/+HI15jFJYtNJGYtCgn2wmIiExY1VwA==} engines: {node: '>=8.12.0'} @@ -15889,6 +15956,11 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-dictionary@5.4.2: + resolution: {integrity: sha512-Mienm46H28PWnydBiLFN7nR1QXqTO2FA+Aa/W7jcBJV8N0QGDDTfPQbb10TqwRybdY0rvp1G4pjdVM2HklGI0g==} + engines: {node: '>=22.0.0'} + hasBin: true + style-loader@3.3.4: resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==} engines: {node: '>= 12.13.0'} @@ -16248,6 +16320,9 @@ packages: tiny-invariant@1.3.3: resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + tinycolor2@1.6.0: + resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} + tinyglobby@0.2.14: resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==} engines: {node: '>=12.0.0'} @@ -20239,6 +20314,36 @@ snapshots: '@bufbuild/protobuf@2.11.0': {} + '@bundled-es-modules/deepmerge@4.3.2': + dependencies: + deepmerge: 4.3.1 + + '@bundled-es-modules/glob@13.0.6': + dependencies: + buffer: 6.0.3 + events: 3.3.0 + glob: 13.0.6 + path: 0.12.7 + stream: 0.0.3 + string_decoder: 1.3.0 + url: 0.11.4 + + '@bundled-es-modules/memfs@4.17.0(tslib@2.8.1)': + dependencies: + assert: 2.1.0 + buffer: 6.0.3 + events: 3.3.0 + memfs: 4.57.2(tslib@2.8.1) + path: 0.12.7 + stream: 0.0.3 + util: 0.12.5 + transitivePeerDependencies: + - tslib + + '@bundled-es-modules/postcss-calc-ast-parser@0.1.6': + dependencies: + postcss-calc-ast-parser: 0.1.4 + '@cacheable/memory@2.0.8': dependencies: '@cacheable/utils': 2.4.1 @@ -20302,6 +20407,8 @@ snapshots: lodash: 4.18.1 pinkie-promise: 2.0.1 + '@devexpress/design-tokens-internal@262.0.2': {} + '@devexpress/utils@2.1.1': dependencies: tslib: 2.3.1 @@ -23798,6 +23905,8 @@ snapshots: dependencies: '@testing-library/dom': 10.4.1 + '@tokens-studio/types@0.5.2': {} + '@tootallnate/once@3.0.1': {} '@ts-morph/common@0.22.0': @@ -25408,6 +25517,8 @@ snapshots: '@yarnpkg/lockfile@1.1.0': {} + '@zip.js/zip.js@2.8.30': {} + '@zkochan/js-yaml@0.0.7': dependencies: argparse: 2.0.1 @@ -25847,6 +25958,14 @@ snapshots: object.assign: 4.1.7 util: 0.10.4 + assert@2.1.0: + dependencies: + call-bind: 1.0.9 + is-nan: 1.3.2 + object-is: 1.1.6 + object.assign: 4.1.7 + util: 0.12.5 + assertion-error@1.1.0: {} assertion-error@2.0.1: {} @@ -27111,6 +27230,8 @@ snapshots: commondir@1.0.1: {} + component-emitter@2.0.0: {} + compress-commons@6.0.2: dependencies: crc-32: 1.2.2 @@ -30999,8 +31120,15 @@ snapshots: is-map@2.0.3: {} + is-mergeable-object@1.1.1: {} + is-module@1.0.0: {} + is-nan@1.3.2: + dependencies: + call-bind: 1.0.9 + define-properties: 1.2.1 + is-negated-glob@1.0.0: {} is-negative-zero@2.0.3: {} @@ -34825,6 +34953,13 @@ snapshots: path-type@4.0.0: {} + path-unified@0.2.0: {} + + path@0.12.7: + dependencies: + process: 0.11.10 + util: 0.10.4 + pathval@1.1.1: {} pathval@2.0.1: {} @@ -34938,6 +35073,10 @@ snapshots: possible-typed-array-names@1.1.0: {} + postcss-calc-ast-parser@0.1.4: + dependencies: + postcss-value-parser: 3.3.1 + postcss-html@1.8.1: dependencies: htmlparser2: 8.0.2 @@ -35014,6 +35153,8 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-value-parser@3.3.1: {} + postcss-value-parser@4.2.0: {} postcss-values-parser@6.0.2(postcss@8.5.10): @@ -35922,6 +36063,15 @@ snapshots: safe-stable-stringify@2.5.0: {} + safe-ts-transforms-fork@0.0.1(style-dictionary@5.4.2(tslib@2.8.1)): + dependencies: + '@bundled-es-modules/deepmerge': 4.3.2 + '@bundled-es-modules/postcss-calc-ast-parser': 0.1.6 + '@tokens-studio/types': 0.5.2 + colorjs.io: 0.5.2 + is-mergeable-object: 1.1.1 + style-dictionary: 5.4.2(tslib@2.8.1) + safer-buffer@2.1.2: {} sanitize-filename@1.6.4: @@ -36593,6 +36743,10 @@ snapshots: inherits: 2.0.4 readable-stream: 2.3.8 + stream@0.0.3: + dependencies: + component-emitter: 2.0.0 + streamfilter@3.0.0: dependencies: readable-stream: 3.6.2 @@ -36760,6 +36914,24 @@ snapshots: strip-json-comments@3.1.1: {} + style-dictionary@5.4.2(tslib@2.8.1): + dependencies: + '@bundled-es-modules/deepmerge': 4.3.2 + '@bundled-es-modules/glob': 13.0.6 + '@bundled-es-modules/memfs': 4.17.0(tslib@2.8.1) + '@zip.js/zip.js': 2.8.30 + chalk: 5.6.2 + change-case: 5.4.4 + colorjs.io: 0.5.2 + commander: 12.1.0 + is-plain-obj: 4.1.0 + json5: 2.2.3 + path-unified: 0.2.0 + prettier: 3.8.1 + tinycolor2: 1.6.0 + transitivePeerDependencies: + - tslib + style-loader@3.3.4(webpack@5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21))): dependencies: webpack: 5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21)) @@ -37579,6 +37751,8 @@ snapshots: tiny-invariant@1.3.3: {} + tinycolor2@1.6.0: {} + tinyglobby@0.2.14: dependencies: fdir: 6.5.0(picomatch@4.0.4) From 8f659f6a809c7d88a9f569e77c9fb24e56ede7b0 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 17 Jul 2026 10:51:24 +0400 Subject: [PATCH 07/27] map button colors to design tokens --- .../scss/widgets/dxdsfluent/_colors.scss | 6 - .../widgets/dxdsfluent/accordion/_index.scss | 1 - .../dxdsfluent/actionSheet/_index.scss | 1 - .../dxdsfluent/autocomplete/_index.scss | 1 - .../scss/widgets/dxdsfluent/badge/_index.scss | 1 - .../scss/widgets/dxdsfluent/box/_index.scss | 1 - .../widgets/dxdsfluent/button/_colors.scss | 240 +++++------------- .../widgets/dxdsfluent/button/_index.scss | 3 +- .../widgets/dxdsfluent/button/_mixins.scss | 1 - .../dxdsfluent/buttonGroup/_index.scss | 1 - .../widgets/dxdsfluent/calendar/_index.scss | 1 - .../scss/widgets/dxdsfluent/card/_colors.scss | 6 + .../scss/widgets/dxdsfluent/card/_index.scss | 5 +- .../widgets/dxdsfluent/checkBox/_index.scss | 1 - .../widgets/dxdsfluent/colorBox/_colors.scss | 3 + .../widgets/dxdsfluent/colorBox/_index.scss | 3 +- .../widgets/dxdsfluent/colorView/_index.scss | 1 - .../widgets/dxdsfluent/common/_colors.scss | 13 + .../widgets/dxdsfluent/common/_index.scss | 34 +-- .../widgets/dxdsfluent/common/_mixins.scss | 13 +- .../dxdsfluent/contextMenu/_colors.scss | 7 + .../dxdsfluent/contextMenu/_index.scss | 7 +- .../widgets/dxdsfluent/dataGrid/_colors.scss | 4 + .../widgets/dxdsfluent/dataGrid/_index.scss | 6 +- .../dxdsfluent/dataGrid/layout/cell.scss | 1 - .../widgets/dxdsfluent/dateBox/_index.scss | 1 - .../dxdsfluent/dateRangeBox/_index.scss | 1 - .../widgets/dxdsfluent/dateView/_colors.scss | 3 + .../widgets/dxdsfluent/dateView/_index.scss | 3 +- .../widgets/dxdsfluent/diagram/_colors.scss | 19 +- .../widgets/dxdsfluent/diagram/_index.scss | 15 +- .../widgets/dxdsfluent/drawer/_index.scss | 1 - .../dxdsfluent/dropDownBox/_index.scss | 1 - .../dxdsfluent/dropDownButton/_index.scss | 1 - .../dxdsfluent/dropDownEditor/_index.scss | 1 - .../dxdsfluent/dropDownList/_index.scss | 1 - .../widgets/dxdsfluent/fieldset/_index.scss | 1 - .../dxdsfluent/fileManager/_colors.scss | 7 + .../dxdsfluent/fileManager/_index.scss | 17 +- .../dxdsfluent/fileUploader/_colors.scss | 8 + .../dxdsfluent/fileUploader/_index.scss | 6 +- .../dxdsfluent/filterBuilder/_index.scss | 1 - .../scss/widgets/dxdsfluent/form/_index.scss | 1 - .../widgets/dxdsfluent/gallery/_colors.scss | 3 + .../widgets/dxdsfluent/gallery/_index.scss | 3 +- .../widgets/dxdsfluent/gantt/_colors.scss | 9 + .../scss/widgets/dxdsfluent/gantt/_index.scss | 47 ++-- .../widgets/dxdsfluent/gridBase/_colors.scss | 7 + .../widgets/dxdsfluent/gridBase/_index.scss | 3 +- .../gridBase/layout/aiChat/_index.scss | 9 +- .../dxdsfluent/gridBase/layout/cell.scss | 1 - .../dxdsfluent/htmlEditor/_colors.scss | 11 + .../widgets/dxdsfluent/htmlEditor/_index.scss | 11 +- .../widgets/dxdsfluent/icons/_colors.scss | 2 + .../scss/widgets/dxdsfluent/icons/_index.scss | 3 +- .../scss/widgets/dxdsfluent/list/_colors.scss | 5 + .../scss/widgets/dxdsfluent/list/_index.scss | 13 +- .../dxdsfluent/loadIndicator/_index.scss | 1 - .../widgets/dxdsfluent/loadPanel/_index.scss | 1 - .../widgets/dxdsfluent/lookup/_colors.scss | 6 + .../widgets/dxdsfluent/lookup/_index.scss | 3 +- .../scss/widgets/dxdsfluent/menu/_colors.scss | 6 + .../scss/widgets/dxdsfluent/menu/_index.scss | 3 +- .../widgets/dxdsfluent/menuBase/_index.scss | 1 - .../widgets/dxdsfluent/multiView/_index.scss | 1 - .../widgets/dxdsfluent/numberBox/_colors.scss | 3 + .../widgets/dxdsfluent/numberBox/_index.scss | 3 +- .../widgets/dxdsfluent/overlay/_index.scss | 1 - .../widgets/dxdsfluent/pagination/_index.scss | 1 - .../widgets/dxdsfluent/pivotGrid/_colors.scss | 10 + .../widgets/dxdsfluent/pivotGrid/_index.scss | 12 +- .../widgets/dxdsfluent/popover/_index.scss | 1 - .../scss/widgets/dxdsfluent/popup/_index.scss | 1 - .../dxdsfluent/progressBar/_colors.scss | 3 + .../dxdsfluent/progressBar/_index.scss | 3 +- .../dxdsfluent/radioButton/_colors.scss | 2 + .../dxdsfluent/radioButton/_index.scss | 15 +- .../widgets/dxdsfluent/radioGroup/_index.scss | 1 - .../dxdsfluent/rangeSlider/_index.scss | 1 - .../dxdsfluent/recurrenceEditor/_index.scss | 1 - .../dxdsfluent/responsiveBox/_index.scss | 1 - .../widgets/dxdsfluent/scheduler/_colors.scss | 6 + .../widgets/dxdsfluent/scheduler/_index.scss | 11 +- .../widgets/dxdsfluent/scrollView/_index.scss | 1 - .../widgets/dxdsfluent/scrollable/_index.scss | 1 - .../widgets/dxdsfluent/selectBox/_index.scss | 1 - .../widgets/dxdsfluent/slider/_colors.scss | 5 + .../widgets/dxdsfluent/slider/_index.scss | 9 +- .../widgets/dxdsfluent/sortable/_index.scss | 2 +- .../dxdsfluent/speedDialAction/_colors.scss | 5 + .../dxdsfluent/speedDialAction/_index.scss | 3 +- .../widgets/dxdsfluent/splitter/_index.scss | 1 - .../dxdsfluent/splitterBar/_index.scss | 1 - .../widgets/dxdsfluent/stepper/_index.scss | 1 - .../widgets/dxdsfluent/switch/_colors.scss | 2 + .../widgets/dxdsfluent/switch/_index.scss | 3 +- .../widgets/dxdsfluent/tabPanel/_colors.scss | 2 + .../widgets/dxdsfluent/tabPanel/_index.scss | 9 +- .../widgets/dxdsfluent/tagBox/_colors.scss | 3 + .../widgets/dxdsfluent/tagBox/_index.scss | 3 +- .../widgets/dxdsfluent/textArea/_index.scss | 1 - .../widgets/dxdsfluent/textBox/_colors.scss | 3 + .../widgets/dxdsfluent/textBox/_index.scss | 3 +- .../dxdsfluent/textEditor/_colors.scss | 4 + .../widgets/dxdsfluent/textEditor/_index.scss | 9 +- .../widgets/dxdsfluent/tileView/_index.scss | 1 - .../widgets/dxdsfluent/timeView/_colors.scss | 4 + .../widgets/dxdsfluent/timeView/_index.scss | 3 +- .../widgets/dxdsfluent/toast/_colors.scss | 6 + .../scss/widgets/dxdsfluent/toast/_index.scss | 3 +- .../widgets/dxdsfluent/toolbar/_index.scss | 1 - .../widgets/dxdsfluent/tooltip/_index.scss | 1 - .../widgets/dxdsfluent/treeList/_index.scss | 2 +- .../widgets/dxdsfluent/treeView/_colors.scss | 2 + .../widgets/dxdsfluent/treeView/_index.scss | 3 +- .../dxdsfluent/typography/_colors.scss | 3 + .../widgets/dxdsfluent/typography/_index.scss | 5 +- .../widgets/dxdsfluent/validation/_index.scss | 1 - .../widgets/dxdsfluent/widget/_colors.scss | 2 + .../widgets/dxdsfluent/widget/_index.scss | 3 +- .../tests/unused-elements.test.ts | 4 +- 121 files changed, 386 insertions(+), 404 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index afdd2b437dea..78f775a51a4e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -268,12 +268,6 @@ $base-hover-color: $base-text-color !default; */ $base-focus-color: $base-inverted-text-color !default; -/** -* $name 110. Focused state background color -* $type color -*/ -$base-focus-bg: $base-hover-bg !default; - /** * $name 50. Arrow icon color * $type color diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss index 6e2e3a2344af..f30582d369cf 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss index ee0d576b3184..98ed5d5c19cd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/actionSheet"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss index 13072ae38ad6..3721d5fd40ad 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss index 8a0fc9baf570..96b0668e9497 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/badge"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss index 682a82c99d8a..2389723d2a89 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/box"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss index 10cc4afc0ba2..9280d53881ea 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss @@ -1,26 +1,24 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse $button-border-radius: $base-border-radius !default; -$button-disabled-background: $base-background-disabled !default; +$button-disabled-background: ds.$button-contained-color-bg-disabled !default; $button-disabled-icon-opacity: 0.6 !default; -$button-shadow-color: null !default; +$button-shadow-color: ds.$color-shadow-key !default; /** * $name 10. Text color * $type color */ -$button-normal-color: $base-text-color !default; +$button-normal-color: ds.$button-outline-color-content-rest !default; /** * $name 15. Background color (contained) * $type color */ -$button-normal-bg: $base-element-bg !default; +$button-normal-bg: ds.$button-outline-color-bg-rest !default; /** * $name 16. Background color (outlined) @@ -38,316 +36,205 @@ $button-normal-text-bg: transparent !default; * $name 20. Selected state text color * $type color */ -$button-normal-selected-color: $base-text-color !default; +$button-normal-selected-color: ds.$button-outline-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-normal-hover-bg: $base-hover-bg !default; +$button-normal-hover-bg: ds.$button-outline-color-bg-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-normal-focused-bg: $base-focus-bg !default; +$button-normal-focused-bg: ds.$button-outline-color-bg-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-normal-active-bg: $base-active-bg !default; +$button-normal-active-bg: ds.$button-outline-color-bg-active !default; /** * $name 25. Selected state background color * $type color */ -$button-normal-selected-bg: $base-selected-bg !default; +$button-normal-selected-bg: ds.$color-surface-neutral-alpha-selected !default; /** * $name 10. Text color (contained) * $type color */ -$button-default-color: null !default; +$button-default-color: ds.$button-contained-color-content-rest !default; /** * $name 15. Background color * $type color */ -$button-default-bg: $base-accent !default; +$button-default-bg: ds.$button-contained-color-bg-rest !default; /** * $name 20. Selected state text color * $type color */ -$button-default-selected-color: null !default; +$button-default-selected-color: ds.$button-contained-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-default-hover-bg: null !default; +$button-default-hover-bg: ds.$button-contained-color-bg-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-default-focused-bg: null !default; +$button-default-focused-bg: ds.$button-contained-color-bg-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-default-active-bg: null !default; +$button-default-active-bg: ds.$button-contained-color-bg-active !default; /** * $name 25. Selected state background color * $type color */ -$button-default-selected-bg: null !default; +$button-default-selected-bg: ds.$color-surface-primary-default-selected !default; /** * $name 11. Text color (outlined) * $type color */ -$button-default-outlined-color: $base-accent !default; -$button-default-outlined-border-color: $base-accent !default; +$button-default-outlined-color: ds.$color-content-primary-default-rest !default; +$button-default-outlined-border-color: ds.$color-border-primary-default-rest !default; $button-default-outlined-bg: transparent !default; -$button-default-outlined-hover-bg: null !default; -$button-default-outlined-focused-bg: null !default; -$button-default-outlined-active-bg: null !default; -$button-default-outlined-selected-bg: null !default; +$button-default-outlined-hover-bg: ds.$color-surface-primary-deep-hovered !default; +$button-default-outlined-focused-bg: ds.$color-surface-primary-deep-hovered !default; +$button-default-outlined-active-bg: ds.$color-surface-primary-deep-active !default; +$button-default-outlined-selected-bg: ds.$color-surface-primary-deep-selected !default; /** * $name 11. Text color (text) * $type color */ -$button-default-text-color: $base-accent !default; +$button-default-text-color: ds.$color-content-primary-default-rest !default; /** * $name 10. Text color * $type color */ -$button-danger-color: null !default; +$button-danger-color: ds.$button-contained-color-content-rest !default; /** * $name 15. Background color * $type color */ -$button-danger-bg: $base-danger !default; +$button-danger-bg: ds.$color-surface-danger-default-rest !default; /** * $name 20. Selected state text color * $type color */ -$button-danger-selected-color: null !default; +$button-danger-selected-color: ds.$button-contained-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-danger-hover-bg: $base-danger-hover !default; +$button-danger-hover-bg: ds.$color-surface-danger-default-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-danger-focused-bg: $base-danger-hover !default; +$button-danger-focused-bg: ds.$color-surface-danger-default-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-danger-active-bg: $base-danger-active !default; +$button-danger-active-bg: ds.$color-surface-danger-default-active !default; /** * $name 25. Selected state background color * $type color */ -$button-danger-selected-bg: $base-danger-selected !default; +$button-danger-selected-bg: ds.$color-surface-danger-default-selected !default; -$button-danger-outlined-color: $base-danger !default; -$button-danger-outlined-border-color: $base-danger !default; -$button-danger-outlined-color-hover: null !default; -$button-danger-outlined-color-active: null !default; -$button-danger-outlined-selected-color: null !default; +$button-danger-outlined-color: ds.$color-content-danger-default-rest !default; +$button-danger-outlined-border-color: ds.$color-border-danger-default-rest !default; +$button-danger-outlined-color-hover: ds.$color-content-danger-default-hovered !default; +$button-danger-outlined-color-active: ds.$color-content-danger-default-active !default; +$button-danger-outlined-selected-color: ds.$color-content-danger-default-hovered !default; $button-danger-outlined-bg: transparent !default; -$button-danger-outlined-hover-bg: null !default; -$button-danger-outlined-focused-bg: null !default; -$button-danger-outlined-active-bg: null !default; -$button-danger-outlined-selected-bg: null !default; +$button-danger-outlined-hover-bg: ds.$color-surface-danger-deep-hovered !default; +$button-danger-outlined-focused-bg: ds.$color-surface-danger-deep-hovered !default; +$button-danger-outlined-active-bg: ds.$color-surface-danger-deep-active !default; +$button-danger-outlined-selected-bg: ds.$color-surface-danger-deep-selected !default; /** * $name 10. Text color * $type color */ -$button-success-color: null !default; +$button-success-color: ds.$button-contained-color-content-rest !default; /** * $name 15. Background color * $type color */ -$button-success-bg: $base-success !default; +$button-success-bg: ds.$color-surface-success-default-rest !default; /** * $name 20. Selected state text color * $type color */ -$button-success-selected-color: null !default; +$button-success-selected-color: ds.$button-contained-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-success-hover-bg: null !default; +$button-success-hover-bg: ds.$color-surface-success-default-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-success-focused-bg: null !default; +$button-success-focused-bg: ds.$color-surface-success-default-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-success-active-bg: null !default; +$button-success-active-bg: ds.$color-surface-success-default-active !default; /** * $name 25. Selected state background color * $type color */ -$button-success-selected-bg: null !default; +$button-success-selected-bg: ds.$color-surface-success-default-selected !default; -$button-success-outlined-color: $base-success !default; -$button-success-outlined-border-color: $base-success !default; -$button-success-outlined-color-hover: null !default; -$button-success-outlined-color-active: null !default; -$button-success-outlined-selected-color: null !default; +$button-success-outlined-color: ds.$color-content-success-default-rest !default; +$button-success-outlined-border-color: ds.$color-border-success-default-rest !default; +$button-success-outlined-color-hover: ds.$color-content-success-default-hovered !default; +$button-success-outlined-color-active: ds.$color-content-success-default-active !default; +$button-success-outlined-selected-color: ds.$color-content-success-default-hovered !default; $button-success-outlined-bg: transparent !default; -$button-success-outlined-hover-bg: null !default; -$button-success-outlined-focused-bg: null !default; -$button-success-outlined-active-bg: null !default; -$button-success-outlined-selected-bg: null !default; - -$button-accent-foreground-color: null !default; - -@if $mode == "light" { - $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -9.10%, $lightness: -23.53%) !default; - - $button-default-hover-bg: $base-accent-hover !default; - $button-default-focused-bg: $base-accent-hover !default; - $button-default-active-bg: $base-accent-active !default; - $button-default-selected-bg: $base-accent-selected !default; - - $button-success-hover-bg: color.adjust($base-success, $saturation: 0.63%, $space: hsl, $lightness: -2.75%) !default; - $button-success-focused-bg: $button-success-hover-bg !default; - $button-success-active-bg: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; - $button-success-selected-bg: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; - - @if $color == "blue" { - $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; - $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 10.40%, $lightness: -5.49%) !default; - $button-default-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $lightness: -17.06%) !default; - - $button-danger-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.5deg, $saturation: 0.6%, $lightness: 46.7%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; - $button-danger-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $lightness: -13.9%) !default; - $button-danger-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $lightness: 7.1%) !default; - - $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: -29.8%, $space: hsl, $lightness: 68.8%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; - $button-success-outlined-active-bg: color.adjust($base-success, $saturation: -34.9%, $space: hsl, $lightness: 46.1%) !default; - $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: -35%, $space: hsl, $lightness: 57.6%) !default; - } - - @if $color == "saas" { - $button-default-outlined-hover-bg: color.mix($base-bg, $base-accent, 90%) !default; - $button-default-outlined-selected-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - - $button-danger-outlined-hover-bg: color.mix($base-bg, $base-danger, 90%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; - $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - - $button-success-outlined-hover-bg: color.mix($base-bg, $base-success, 90%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; - $button-success-outlined-active-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - $button-success-outlined-selected-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - } - - $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; - - $button-danger-outlined-color-hover: $base-danger-selected !default; - $button-danger-outlined-color-active: $base-danger-active !default; - $button-danger-outlined-selected-color: $base-danger-selected !default; - - $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; - $button-success-outlined-color-active: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; - $button-success-outlined-selected-color: $button-success-outlined-color-hover; - - $button-default-color: $base-inverted-text-color !default; - $button-default-selected-color: $base-inverted-text-color !default; - $button-danger-color: $base-inverted-text-color !default; - $button-danger-selected-color: $base-inverted-text-color !default; - $button-success-color: $base-inverted-text-color !default; - $button-success-selected-color: $base-inverted-text-color !default; - $button-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; -} - -@if $mode == "dark" { - $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 0.9deg, $saturation: -2.2%, $lightness: 22.4%) !default; - - $button-default-hover-bg: $base-accent-hover !default; - $button-default-focused-bg: $base-accent-hover !default; - $button-default-active-bg: $button-accent-foreground-color !default; - $button-default-selected-bg: color.adjust($button-default-active-bg, $saturation: -6.4%, $space: hsl, $lightness: 5.3%) !default; - - $button-success-hover-bg: color.adjust($base-success, $saturation: 5.4%, $space: hsl, $lightness: 22.5%) !default; - $button-success-focused-bg: $button-success-hover-bg !default; - $button-success-active-bg: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; - $button-success-selected-bg: color.adjust($base-success, $saturation: 5.3%, $space: hsl, $lightness: 34.1%) !default; - - $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; - $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; - $button-default-outlined-active-bg: $base-accent-selected !default; - $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -12.33%, $lightness: -41.18%) !default; - - $button-danger-outlined-color-hover: $base-danger-active !default; - $button-danger-outlined-color-active: $base-danger-active !default; - $button-danger-outlined-selected-color: $base-danger-active !default; - - $button-danger-outlined-hover-bg: color.adjust($base-danger, $saturation: -5.1%, $space: hsl, $lightness: -53.5%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; - $button-danger-outlined-active-bg: color.adjust($base-danger, $saturation: -4.6%, $space: hsl, $lightness: -22.9%) !default; - $button-danger-outlined-selected-bg: color.adjust($base-danger, $saturation: -4.3%, $space: hsl, $lightness: -40.4%) !default; - - $button-success-outlined-color-hover: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; - $button-success-outlined-color-active: $button-success-outlined-color-hover !default; - $button-success-outlined-selected-color: $button-success-outlined-color-hover !default; - - $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; - $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default; - $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: 40.1%, $space: hsl, $lightness: -35.7%) !default; - - $button-default-color: $base-typography-bg !default; - $button-default-selected-color: $base-typography-bg !default; - $button-danger-color: $base-typography-bg !default; - $button-danger-selected-color: $base-typography-bg !default; - $button-success-color: $base-typography-bg !default; - $button-success-selected-color: $base-typography-bg !default; - $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; -} +$button-success-outlined-hover-bg: ds.$color-surface-success-deep-hovered !default; +$button-success-outlined-focused-bg: ds.$color-surface-success-deep-hovered !default; +$button-success-outlined-active-bg: ds.$color-surface-success-deep-active !default; +$button-success-outlined-selected-bg: ds.$color-surface-success-deep-selected !default; $button-default-icon-color: $button-default-color !default; $button-normal-icon-color: $button-normal-color !default; $button-danger-icon-color: $button-danger-color !default; $button-success-icon-color: $button-success-color !default; -$button-disabled-text-color: $base-foreground-disabled !default; +$button-disabled-text-color: ds.$button-contained-color-content-disabled !default; $button-normal-outlined-hover-bg: $button-normal-hover-bg !default; $button-normal-outlined-focused-bg: $button-normal-focused-bg !default; @@ -363,25 +250,25 @@ $button-normal-text-selected-bg: $button-normal-selected-bg !default; * $name 12. Hover state text color (outlined) * $type color */ -$button-default-outlined-color-hover: $button-accent-foreground-color !default; +$button-default-outlined-color-hover: ds.$color-content-primary-default-hovered !default; /** * $name 13. Active state text color (outlined) * $type color */ -$button-default-outlined-color-active: $button-accent-foreground-color !default; +$button-default-outlined-color-active: ds.$color-content-primary-default-active !default; /** * $name 21. Selected state text color (outlined) * $type color */ -$button-default-outlined-selected-color: $button-accent-foreground-color !default; +$button-default-outlined-selected-color: ds.$color-content-primary-default-hovered !default; /** * $name 12. Hover state text color (text) * $type color */ -$button-default-text-color-hover: $button-accent-foreground-color !default; +$button-default-text-color-hover: ds.$color-content-primary-default-hovered !default; /** * $name 13. Active state text color (text) @@ -393,7 +280,7 @@ $button-default-text-color-active: $button-default-outlined-color-active !defaul * $name 21. Selected state text color (text) * $type color */ -$button-default-text-selected-color: $button-accent-foreground-color !default; +$button-default-text-selected-color: ds.$color-content-primary-default-hovered !default; $button-default-text-bg: transparent !default; $button-default-text-hover-bg: $button-default-outlined-hover-bg !default; @@ -422,3 +309,6 @@ $button-success-text-hover-bg: $button-success-outlined-hover-bg !default; $button-success-text-focused-bg: $button-success-outlined-hover-bg !default; $button-success-text-active-bg: $button-success-outlined-active-bg !default; $button-success-text-selected-bg: $button-success-outlined-selected-bg !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$button-border-color: ds.$button-outline-color-border-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss index e4ea30e6a047..7a4d6689d907 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "mixins" as *; @@ -163,7 +162,7 @@ $button-normal-color, $button-normal-color, $button-normal-color, - $base-border-color, + $button-border-color, $button-normal-outlined-bg, $button-normal-outlined-hover-bg, $button-normal-outlined-focused-bg, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss index 92f3becb9113..a7c3e05b036e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss @@ -3,7 +3,6 @@ @use "sizes" as *; @use "../sizes" as *; @use "colors" as *; -@use "../colors" as *; @use "../../base/icon_fonts" as *; @use "../../base/button/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss index 9edc5f3e9a08..dd57543bc639 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss index d57d20aec00c..3bdfedea682a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss index 89c53a85429e..00c18f8f4f58 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss @@ -4,3 +4,9 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$card-bg: $base-bg !default; +$card-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$card-shadow: 0 1px 3px color.change($card-shadow-color, $alpha: 0.12), 0 1px 2px color.change($card-shadow-color, $alpha: 0.24) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss index d3c44e95845c..80ffac2498a3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/card"; @@ -8,8 +7,8 @@ // adduse .dx-card { - box-shadow: 0 1px 3px color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px color.change($base-shadow-color, $alpha: 0.24); + box-shadow: $card-shadow; border-radius: $base-border-radius; - background-color: $base-bg; + background-color: $card-bg; margin: 2px 2px 3px; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss index 35250bf909bd..0a2fcf64e886 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss index 4b437aa96502..be45e2bdd63c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss @@ -5,3 +5,6 @@ // adduse $colorbox-preview-icon-color: $base-icon-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$colorbox-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss index befd71dc3a18..c05c87b553f8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../colorView/colors" as *; @@ -52,7 +51,7 @@ .dx-state-disabled & { .dx-icon-colordismiss { - color: $base-foreground-disabled; + color: $colorbox-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss index 88f6747bd46c..45231602b6bc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/colorView/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss index a3401ae9d875..5e81a638e832 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss @@ -16,3 +16,16 @@ $base-dropdown-shadow-color2: null !default; $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.24) !default; $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.28) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$common-accent: $base-accent !default; +$common-bg: $base-bg !default; +$common-border-color: $base-border-color !default; +$common-disabled-opacity: $base-disabled-opacity !default; +$common-font-family: $base-font-family !default; +$common-invalid-color: $base-invalid-color !default; +$common-inverted-text-color: $base-inverted-text-color !default; +$common-success: $base-success !default; +$common-text-color: $base-text-color !default; +$common-typography-bg: $base-typography-bg !default; +$common-typography-color: $typography-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss index c6515af0face..cc8a6a4c5418 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss @@ -12,57 +12,57 @@ // stylelint-disable declaration-no-important .dx-theme-accent-as-text-color { - color: $base-accent !important; + color: $common-accent !important; } .dx-theme-text-color { - color: $base-text-color !important; + color: $common-text-color !important; } .dx-theme-background-color-as-text-color { - color: $base-bg !important; + color: $common-bg !important; } .dx-theme-border-color-as-text-color { - color: $base-border-color !important; + color: $common-border-color !important; } .dx-theme-accent-as-background-color { - background-color: $base-accent !important; - fill: $base-accent !important; + background-color: $common-accent !important; + fill: $common-accent !important; } .dx-theme-text-color-as-background-color { - background-color: $base-text-color !important; - fill: $base-text-color !important; + background-color: $common-text-color !important; + fill: $common-text-color !important; } .dx-theme-background-color { - background-color: $base-bg !important; - fill: $base-bg !important; + background-color: $common-bg !important; + fill: $common-bg !important; } .dx-theme-typography-background-color { - background-color: $base-typography-bg !important; + background-color: $common-typography-bg !important; } .dx-theme-border-color-as-background-color { - background-color: $base-border-color !important; - fill: $base-border-color !important; + background-color: $common-border-color !important; + fill: $common-border-color !important; } .dx-theme-accent-as-border-color { - border-color: $base-accent !important; + border-color: $common-accent !important; } .dx-theme-text-color-as-border-color { - border-color: $base-text-color !important; + border-color: $common-text-color !important; } .dx-theme-background-color-as-border-color { - border-color: $base-bg !important; + border-color: $common-bg !important; } .dx-theme-border-color { - border-color: $base-border-color !important; + border-color: $common-border-color !important; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss index 96a5b23eb2d8..ddb3ad0d8a7e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss @@ -1,24 +1,23 @@ @use "sass:math"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @use "../../base/validation" as *; @use "../list/sizes" as *; -$badge-invalid-bg: $base-invalid-color; +$badge-invalid-bg: $common-invalid-color; @mixin dx-base-typography() { @include dx-base-typography-mixin( - $typography-color, + $common-typography-color, $fluent-base-font-size, - $base-font-family, + $common-font-family, $fluent-line-height ); } -@mixin disabled-widget($opacity: $base-disabled-opacity) { +@mixin disabled-widget($opacity: $common-disabled-opacity) { @include disabled-widget-mixin($opacity); } @@ -42,7 +41,7 @@ $badge-invalid-bg: $base-invalid-color; font-size: $fluent-base-font-size; font-weight: 500; background-color: $badge-invalid-bg; - color: $base-inverted-text-color; + color: $common-inverted-text-color; content: '!'; border-radius: 50%; } @@ -53,7 +52,7 @@ $badge-invalid-bg: $base-invalid-color; font-size: $fluent-valid-badge-font-size; font-weight: bold; font-family: 'DXIcons', sans-serif; - color: $base-success; + color: $common-success; content: '\f005'; @include validation-badge-animation(); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss index 89c53a85429e..b846ea7e3d42 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss @@ -4,3 +4,10 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$contextmenu-foreground-disabled: $base-foreground-disabled !default; +$contextmenu-icon-color: $base-icon-color !default; +$contextmenu-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$contextmenu-shadow: color.change($contextmenu-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($contextmenu-shadow-color, $alpha: 0.14) 0 8px 16px 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss index 8a1179879885..868352179d17 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -55,12 +54,12 @@ } .dx-menu-item-popout { - color: $base-icon-color; + color: $contextmenu-icon-color; } &.dx-state-disabled { .dx-menu-item-popout { - color: $base-foreground-disabled; + color: $contextmenu-foreground-disabled; } } @@ -76,7 +75,7 @@ .dx-submenu { background-color: $menu-popup-bg; border-radius: $fluent-context-menu-border-radius; - box-shadow: color.change($base-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($base-shadow-color, $alpha: 0.14) 0 8px 16px 0; + box-shadow: $contextmenu-shadow; } .dx-menu-separator { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss index f6f8526a41ed..d66891a83cac 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss @@ -19,3 +19,7 @@ $fluent-datagrid-grouppanel-item-bg: null !default; @if $mode == "dark" { $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$datagrid-accent: $base-accent !default; +$datagrid-border-color-disabled: $base-border-color-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss index f83ab930c66b..dc70e8f36274 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss @@ -1,6 +1,6 @@ +@use "../colors" as *; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -48,14 +48,14 @@ padding: $area-field-top-bottom-padding 10px; border-width: 1px; border-style: solid; - border-color: $base-border-color-disabled; + border-color: $datagrid-border-color-disabled; } .dx-block-separator { margin-right: $fluent-grid-base-grouppanel-item-margin; color: $datagrid-columnchooser-item-color; font-weight: $datagrid-columnchooser-font-weight; - background-color: $base-accent; + background-color: $datagrid-accent; } .dx-sort { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss index d7fea79bda17..99e80814314a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss @@ -1,6 +1,5 @@ /* stylelint-disable no-duplicate-selectors */ @use "../colors" as *; -@use "../../colors" as *; @use "../sizes" as *; @use "../../sizes" as *; @use "../../gridBase/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss index 9e127ba14c6e..6ccda238656e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss index 09f3fe4eab0a..5b0e17ea7354 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss @@ -5,7 +5,6 @@ @use "sizes" as *; @use "../sizes" as *; @use "colors" as *; -@use "../colors" as *; @use "../../base/dateRangeBox"; @use "../../base/icon_fonts" as *; @use "../textEditor" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss index 6c463a7d674c..7ce4b398a54c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss @@ -7,3 +7,6 @@ $dateview-shadow-up: 0deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; $dateview-shadow-down: 180deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; $dateview-color: $base-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$dateview-accent: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss index e3e6bf2a0023..b1814e4bcc55 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -91,7 +90,7 @@ $fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $flue .dx-dateview-item-selected { font-size: 1.8em; - color: $base-accent; + color: $dateview-accent; } .dx-dateview-item-selected-frame { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss index 54536ba04aab..df38f4b6a5c2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -1,17 +1,19 @@ @use "sass:color"; @use "../sizes" as *; @use "../colors" as *; +@use "../overlay/colors" as *; @use "../button/colors" as *; @use "../loadIndicator/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $diagram-border-color: $base-border-color !default; $diagram-toolbar-border-color: $base-border-color !default; -$diagram-normal-format-active-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; -$diagram-default-format-active-bg: color.adjust($button-default-bg, $lightness: -10%, $space: hsl) !default; -$diagram-danger-format-active-bg: color.adjust($button-danger-bg, $lightness: -10%, $space: hsl) !default; -$diagram-success-format-active-bg: color.adjust($button-success-bg, $lightness: -10%, $space: hsl) !default; +$diagram-normal-format-active-bg: ds.$button-outline-color-bg-active !default; +$diagram-default-format-active-bg: ds.$button-contained-color-bg-active !default; +$diagram-danger-format-active-bg: ds.$color-surface-danger-default-active !default; +$diagram-success-format-active-bg: ds.$color-surface-success-default-active !default; $diagram-image-icon-base-color: null !default; $diagram-image-icon-accent-color: null !default; $diagram-toolbox-shape-text-opacity: null !default; @@ -29,3 +31,12 @@ $diagram-toolbox-shape-text-opacity: null !default; $diagram-toolbox-shape-text-opacity: 0.5 !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$diagram-bg: $base-bg !default; +$diagram-danger: $base-danger !default; +$diagram-shadow-color: $base-shadow-color !default; +$diagram-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$diagram-canvas-bg: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl) !default; +$diagram-shadow: 0 1px 8px color.change($diagram-shadow-color, $alpha: 0.175) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss index 0aae29b41745..242168a9d73a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/diagram"; @@ -28,7 +27,7 @@ $diagram-toolbox-title-size: 18px; // stylelint-disable selector-class-pattern .dxdi-control .dxdi-canvas { - background-color: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl); + background-color: $diagram-canvas-bg; .selection-mark, .item-selection-rect, @@ -85,7 +84,7 @@ $diagram-toolbox-title-size: 18px; .dxdi-warning { ellipse { - fill: $base-danger; + fill: $diagram-danger; } } } @@ -140,7 +139,7 @@ $diagram-toolbox-title-size: 18px; &.dx-diagram-fullscreen { - background-color: $base-bg; + background-color: $diagram-bg; } } @@ -151,7 +150,7 @@ $diagram-toolbox-title-size: 18px; .dx-diagram-floating-toolbar-container { background: $overlay-content-bg; - box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + box-shadow: $diagram-shadow; border-radius: $popup-border-radius; padding: 4px; @@ -203,7 +202,7 @@ $diagram-toolbox-title-size: 18px; .dx-diagram-toolbox-popup { & > .dx-overlay-content { - box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + box-shadow: $diagram-shadow; } .dx-popup-title { @@ -438,7 +437,7 @@ $diagram-toolbox-title-size: 18px; .dx-icon { font-size: $fluent-diagram-toolbar-icon-size; - color: $base-text-color; + color: $diagram-text-color; } } } @@ -466,7 +465,7 @@ $diagram-toolbox-title-size: 18px; } } -@include diagram-action-icons-mixin($base-text-color, $base-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); +@include diagram-action-icons-mixin($diagram-text-color, $diagram-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); .dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag { @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $popup-title-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss index eed4027371d8..a1455d573384 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/drawer"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss index c26ff37b2271..adb7bf344e97 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss index 004ba591a74d..0393a1fb50e8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss index 25ec11e0e515..9a8a703a5d7b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss index 94e41665cc27..9355f4aa98e9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss index 260d5d323a57..3d0f93acee27 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss @@ -2,7 +2,6 @@ @use "sass:color"; @use "sass:selector"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss index 5f5632bca69f..aa2cd188ab56 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss @@ -32,3 +32,10 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$filemanager-accent: $base-accent !default; +$filemanager-bg: $base-bg !default; +$filemanager-danger: $base-danger !default; +$filemanager-inverted-text-color: $base-inverted-text-color !default; +$filemanager-success: $base-success !default; +$filemanager-text-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss index 8e1ce8b4c1db..cee27095492b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/fileManager"; @@ -15,7 +14,7 @@ .dx-filemanager-notification-common { border-color: $filemanager-border-color; - color: $base-danger; + color: $filemanager-danger; } .dx-drawer-shrink .dx-filemanager-progress-panel { @@ -23,7 +22,7 @@ } .dx-filemanager-progress-panel { - background-color: $base-bg; + background-color: $filemanager-bg; .dx-filemanager-progress-panel-title { padding-top: $filemanager-progress-panel-title-padding; @@ -38,8 +37,8 @@ } .dx-filemanager-progress-box-error { - color: $base-inverted-text-color; - background: $base-danger; + color: $filemanager-inverted-text-color; + background: $filemanager-danger; } .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button { @@ -48,7 +47,7 @@ .dx-filemanager-toolbar { padding: 0 10px; - background: $base-bg; + background: $filemanager-bg; min-height: $filemanager-toolbar-height; &.dx-filemanager-file-toolbar, @@ -97,7 +96,7 @@ .dx-filemanager-fileuploader-dropzone-placeholder { border: 2px solid; - border-color: $base-accent; + border-color: $filemanager-accent; } .dx-filemanager-container { @@ -167,7 +166,7 @@ } .dx-filemanager-files-view { - background: $base-bg; + background: $filemanager-bg; &.dx-filemanager-details { .dx-filemanager-details-item-thumbnail { @@ -259,4 +258,4 @@ margin-left: $filemanager-contextmenu-text-item-left-margin; } -@include filemanager-icons-mixin($base-text-color, $base-success, $base-inverted-text-color, $base-danger, $base-inverted-text-color, $filemanager-large-icon-size); +@include filemanager-icons-mixin($filemanager-text-color, $filemanager-success, $filemanager-inverted-text-color, $filemanager-danger, $filemanager-inverted-text-color, $filemanager-large-icon-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss index 4ced7be208c3..c21e7c18ba33 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss @@ -24,3 +24,11 @@ $fileuploader-falename-status-color: $base-label-color !default; * $type color */ $fileuploader-border-color: $base-border-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$fileuploader-danger: $base-danger !default; +$fileuploader-label-color: $base-label-color !default; +$fileuploader-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($fileuploader-shadow-color, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss index 4c703762a455..1a65dde1beb1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -10,7 +9,6 @@ // adduse $fluent-fileuploader-file-wrapper-border-size: 3px; -$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1); .dx-fileuploader-wrapper { padding: $fluent-fileuploader-vertical-padding; @@ -172,12 +170,12 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh .dx-fileuploader-file-size { float: right; padding: $fluent-fileuploader-file-size-margin; - color: $base-label-color; + color: $fileuploader-label-color; } .dx-fileuploader-invalid { .dx-fileuploader-file-status-message { - color: $base-danger; + color: $fileuploader-danger; span { &:first-child { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss index 07f5f8837a22..49a497dce89e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss index 7de005954a02..d8ed45456ae7 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/form"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss index fff71d38bef2..9dde69ff8cde 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss @@ -38,3 +38,6 @@ $gallery-navbutton-hover-color: $base-accent !default; * $type color */ $gallery-navbutton-active-color: $base-accent !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$gallery-accent: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss index d32e3180e335..03ec5af7485a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -106,7 +105,7 @@ } .dx-state-focused.dx-gallery { - border-color: $base-accent; + border-color: $gallery-accent; .dx-gallery-indicator-item-selected { background: $gallery-indicator-focused-bg; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss index 29bb541e04eb..8237a9945b48 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss @@ -28,3 +28,12 @@ $gantt-task-progress-background-color: null !default; $gantt-task-progress-background-color: rgba(255, 255, 255, 0.2) !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$gantt-accent: $base-accent !default; +$gantt-bg: $base-bg !default; +$gantt-border-color: $base-border-color !default; +$gantt-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$gantt-accent-border-color: color.adjust($gantt-accent, $lightness: -10%, $space: hsl) !default; +$gantt-accent-light-bg: color.change($gantt-accent, $alpha: 0.15) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss index ac30f01d6f17..40f26ca462f6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/gantt"; @@ -16,15 +15,15 @@ $gantt-successor-background-color: white; .dx-gantt { border: 1px solid; - border-color: $base-border-color; + border-color: $gantt-border-color; .dx-gantt-toolbar-wrapper { padding: 5px; border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $gantt-border-color; .dx-gantt-toolbar-separator { - border-left-color: $base-border-color; + border-left-color: $gantt-border-color; } .dx-toolbar .dx-toolbar-items-container { @@ -33,7 +32,7 @@ $gantt-successor-background-color: white; } .dx-gantt-view { - background-color: $base-bg; + background-color: $gantt-bg; } .dx-header-row, @@ -49,8 +48,8 @@ $gantt-successor-background-color: white; .dx-gantt-tsa, .dx-gantt-hb, .dx-gantt-vb { - border-color: $base-border-color; - background-color: $base-bg; + border-color: $gantt-border-color; + background-color: $gantt-bg; } } @@ -62,17 +61,17 @@ $gantt-successor-background-color: white; .dx-gantt-tsac, .dx-gantt-tsa { border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $gantt-border-color; } .dx-gantt-hb { border-top: 1px solid; - border-top-color: $base-border-color; + border-top-color: $gantt-border-color; } .dx-gantt-vb { border-left: 1px solid; - border-left-color: $base-border-color; + border-left-color: $gantt-border-color; } .dx-gantt-taskWrapper { @@ -85,7 +84,7 @@ $gantt-successor-background-color: white; } .dx-gantt-task { - background-color: $base-accent; + background-color: $gantt-accent; border-radius: $base-border-radius; .dx-gantt-tPrg { @@ -183,7 +182,7 @@ $gantt-successor-background-color: white; } .dx-gantt-milestone { - background-color: $base-text-color; + background-color: $gantt-text-color; width: $gantt-milestone-size; height: $gantt-milestone-size; } @@ -195,18 +194,18 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-frame { height: 100%; border: 1px solid; - border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-color: $gantt-accent-border-color; border-radius: $base-border-radius; .dx-gantt-task-edit-progress { - border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent; + border-color: transparent transparent $gantt-accent-border-color transparent; &::before { width: 12px; height: 6px; bottom: -14px; border: 1px solid; - border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-color: $gantt-accent-border-color; } } @@ -230,7 +229,7 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-successor-dependency-l { background: $gantt-successor-background-color; border: 1px solid; - border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-color: $gantt-accent-border-color; width: $gantt-dependency-successor-size; height: $gantt-dependency-successor-size; margin: auto; @@ -249,7 +248,7 @@ $gantt-successor-background-color: white; } .dx-gantt-task-edit-dependency-line { - background-color: $base-text-color; + background-color: $gantt-text-color; } .dx-gantt-sel { @@ -257,29 +256,29 @@ $gantt-successor-background-color: white; } .dx-gantt-conn-v { - border-left-color: $base-text-color; + border-left-color: $gantt-text-color; } .dx-gantt-conn-h { - border-top-color: $base-text-color; + border-top-color: $gantt-text-color; } .dx-gantt-arrow { border: 5px solid; - border-color: $base-text-color; + border-color: $gantt-text-color; } .dx-gantt-tm { border-left: 1px dashed; - border-left-color: $base-accent; + border-left-color: $gantt-accent; } .dx-gantt-ti { border-left: 1px dashed; - border-left-color: $base-accent; + border-left-color: $gantt-accent; border-right: 1px dashed; - border-right-color: $base-accent; - background-color: color.change($base-accent, $alpha: 0.15); + border-right-color: $gantt-accent; + background-color: $gantt-accent-light-bg; } .dx-gantt-altRow, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss index 26073453edbc..3eb6a6283c2c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss @@ -209,3 +209,10 @@ $datagrid-border: 1px solid !default; :root { --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg}; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$gridbase-accent: $base-accent !default; +$gridbase-border-color: $base-border-color !default; +$gridbase-danger: $base-danger !default; +$gridbase-icon-color: $base-icon-color !default; +$gridbase-success: $base-success !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss index 346f4c8517f1..b7e94557b003 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss @@ -2,7 +2,6 @@ @use "sass:color"; @use "sass:selector"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -751,7 +750,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig @include dx-icon-sizing($fluent-base-icon-size); - color: $base-icon-color; + color: $gridbase-icon-color; } .dx-row.dx-row-focused { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss index 37b6b5f8c909..2cfd224fedcb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss @@ -1,3 +1,4 @@ +@use "../../colors" as *; @use '../../../../base/gridBase/layout/aiChat/mixins' as *; @use '../../../colors' as *; @use '../../../button/colors' as *; @@ -7,10 +8,10 @@ $button-default-bg, $button-default-outlined-hover-bg, ); -@include ai-chat-message-pending($base-accent); -@include ai-chat-message-success($base-success); -@include ai-chat-message-error($base-danger); -@include ai-chat-messagebubble-border($base-border-color); +@include ai-chat-message-pending($gridbase-accent); +@include ai-chat-message-success($gridbase-success); +@include ai-chat-message-error($gridbase-danger); +@include ai-chat-messagebubble-border($gridbase-border-color); @include ai-chat-message-regenerate-button($button-normal-active-bg); @include ai-chat-message-icon($ai-chat-message-icon-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss index ab0a39230ccc..6cad4be42474 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss @@ -1,7 +1,6 @@ /* stylelint-disable no-duplicate-selectors */ @use "sass:math"; @use "../colors" as *; -@use "../../colors" as *; @use "../sizes" as *; @use "../../sizes" as *; @use "../../textEditor" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss index 4fb1036c4d05..db2a37a34da6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss @@ -15,3 +15,14 @@ $htmleditor-mention-bg: $base-selected-bg !default; $htmleditor-table-border-color: $base-border-color !default; $htmleditor-fileuploader-input-wrapper-border-color: $base-border-color !default; $htmleditor-fileuploader-input-wrapper-bg-color: $base-typography-bg !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$htmleditor-accent: $base-accent !default; +$htmleditor-bg: $base-bg !default; +$htmleditor-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$htmleditor-cover-bg: color.change($htmleditor-bg, $alpha: 0.4) !default; +$htmleditor-faded-text-color: color.change($htmleditor-text-color, $alpha: 0.8) !default; +$htmleditor-uploader-cover-bg: color.change($htmleditor-border-color, $alpha: 0.8) !default; +$htmleditor-highlighted-row-bg: color.change($htmleditor-accent, $alpha: 0.5) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss index 10c60a1a897c..ea9842636032 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; @@ -49,7 +48,7 @@ left: 1px; right: 1px; z-index: 2; - background-color: color.change($base-bg, $alpha: 0.4); + background-color: $htmleditor-cover-bg; content: ''; pointer-events: none; } @@ -133,11 +132,11 @@ code, .ql-code-block-container { // stylelint-disable-line selector-class-pattern - color: color.change($base-text-color, $alpha: 0.8); + color: $htmleditor-faded-text-color; } blockquote { - color: color.change($base-text-color, $alpha: 0.8); + color: $htmleditor-faded-text-color; border-inline-start-color: $htmleditor-toolbar-border-color; } @@ -278,7 +277,7 @@ } .dx-fileuploader-content { - background-color: color.change($htmleditor-border-color, $alpha: 0.8); + background-color: $htmleditor-uploader-cover-bg; } } } @@ -298,7 +297,7 @@ .dx-table-resize-frame { > .dx-draggable-dragging + .dx-htmleditor-highlighted-column, > .dx-draggable-dragging + .dx-htmleditor-highlighted-row { - background-color: color.change($base-accent, $alpha: 0.5); + background-color: $htmleditor-highlighted-row-bg; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss index 89c53a85429e..c5aa519e3a45 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$icons-scrollview-pulldown-path: $scrollview-pulldown-path !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss index 048a324fbccc..49f37698fa8c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -26,7 +25,7 @@ } .dx-scrollview-pulldown { - background-image: $scrollview-pulldown-path; + background-image: $icons-scrollview-pulldown-path; background-position: 0 0; background-repeat: no-repeat; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss index 6966ae38f168..8e18e21c3b29 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss @@ -77,3 +77,8 @@ $list-group-color: $base-text-color !default; */ $list-expanded-group-color: $list-group-color !default; $list-item-selected-color: $list-normal-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$list-border-color-disabled: $base-border-color-disabled !default; +$list-foreground-disabled: $base-foreground-disabled !default; +$list-inverted-text-color: $base-inverted-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss index 5e06b6480b2b..7152525cae4f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -27,25 +26,25 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; .dx-list-item { opacity: 1; - color: $base-foreground-disabled; + color: $list-foreground-disabled; } } .dx-list-select-all-label { - color: $base-foreground-disabled; + color: $list-foreground-disabled; &::after { - color: $base-border-color-disabled; + color: $list-border-color-disabled; } } .dx-list-item-chevron { - color: $base-foreground-disabled; + color: $list-foreground-disabled; } .dx-list-reorder-handle { &::before { - color: $base-foreground-disabled; + color: $list-foreground-disabled; } } } @@ -479,7 +478,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; .dx-list-slide-menu-button-delete { @include dx-icon(trash); - color: $base-inverted-text-color; + color: $list-inverted-text-color; background-color: $list-menu-button-delete-bg; font-size: $fluent-base-icon-size; display: table-cell; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss index 1e2bbbf5ee4b..b9a938f3c6a2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/loadIndicator" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss index c69a8aafcd70..fdaf77aa3317 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/loadPanel"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss index 308a0a6455a9..2bd30444bcbb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss @@ -7,3 +7,9 @@ $lookup-icon-color: $dropdowneditor-icon-color !default; $lookup-icon-color-active: $dropdowneditor-icon-active-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$lookup-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$lookup-shadow: 0 0 2px 0 color.change($lookup-shadow-color, $alpha: 0.12) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss index c2b0a783278b..bef4b08d024d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -144,7 +143,7 @@ display: block; &::after { - box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12); + box-shadow: $lookup-shadow; background: $overlay-content-bg; border-top-right-radius: $lookup-arrow-border-radius; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss index 7196c391ae63..8497e3322ef6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss @@ -33,3 +33,9 @@ $menu-item-focused-selected-bg: null !default; @if $mode == "dark" { $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$menu-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$menu-focused-shadow: 0 3px 10px color.change($menu-shadow-color, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss index f1321a4c70cc..4e38a14723b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; @@ -86,7 +85,7 @@ &, &.dx-state-focused { - box-shadow: 0 3px 10px color.change($base-shadow-color, $alpha: 0.1); + box-shadow: $menu-focused-shadow; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss index 8b938749100d..588fd3fba2c2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../menu/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss index 361eff4be843..eb9938faba2e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/multiView"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss index b3d2482bd0f6..12aed4db31dc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss @@ -9,3 +9,6 @@ $numberbox-spin-icon-color: $base-spin-icon-color !default; $numberbox-spin-icon-background-hover: $base-hover-bg !default; $numberbox-spin-icon-background-active: $base-active-bg !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$numberbox-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss index 8dceccf2fa97..473dfd1492a8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -64,7 +63,7 @@ &.dx-state-disabled { .dx-numberbox-spin-up-icon, .dx-numberbox-spin-down-icon { - color: $base-foreground-disabled; + color: $numberbox-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss index 1881badf0696..491f1e984e08 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss index a77d83fd12a8..e7c281132d8a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss index 0f07777dabf6..4164db5a46ae 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss @@ -56,3 +56,13 @@ $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; @if $mode == "dark" { $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$pivotgrid-accent: $base-accent !default; +$pivotgrid-border-color-disabled: $base-border-color-disabled !default; +$pivotgrid-shadow-color: $base-shadow-color !default; +$pivotgrid-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($pivotgrid-shadow-color, $alpha: 0.15) !default; +$pivotgrid-area-field-bg: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss index 1293464c8c69..10d088ea7e74 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; @@ -39,15 +38,14 @@ $fluent-pivotgrid-headers-font-size: 14px; $fluent-pivotgrid-area-font-size: 13px; $fluent-pivotgrid-chevron-icon-size: 20px; -$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15); $fluent-pivotgridfieldchooser-field-min-height: 36px; .dx-pivotgrid-fields-container { &.dx-drag { .dx-area-field.dx-area-box { - background-color: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9); + background-color: $pivotgrid-area-field-bg; border: 1px solid; - border-color: $base-border-color-disabled; + border-color: $pivotgrid-border-color-disabled; box-shadow: $fluent-pivotgrid-drag-header-shadow; } } @@ -57,13 +55,13 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; background-color: $pivotgrid-field-area-box-background-color; border-radius: $area-field-border-radius; border: 1px solid; - border-color: $base-border-color-disabled; + border-color: $pivotgrid-border-color-disabled; font-size: $fluent-pivotgrid-headers-font-size; font-weight: $pivotgrid-field-area-box-font-weight; line-height: 20px; .dx-header-filter { - color: $base-accent; + color: $pivotgrid-accent; &.dx-header-filter-empty { color: $pivotgrid-area-color; @@ -103,7 +101,7 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; .dx-grandtotal, .dx-total { - color: $base-text-color; + color: $pivotgrid-text-color; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss index a654b9770ca5..551f8ead140b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../overlay/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss index 6f33bfad8564..3dc25d0c2292 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss index 336b7d3b3de7..93c826d58ca4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss @@ -38,3 +38,6 @@ $progressbar-label-color: $base-text-color !default; @if $mode == "dark" { $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$progressbar-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss index dbcff3a02fbf..923147d4ca41 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -60,7 +59,7 @@ } .dx-progressbar-status { - color: $base-foreground-disabled; + color: $progressbar-foreground-disabled; } .dx-progressbar-animating-container { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss index 89c53a85429e..fcc266385039 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$radiobutton-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss index 5550f3f7539f..a927af349313 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/radioButton/mixins" as *; @@ -43,11 +42,11 @@ .dx-state-readonly { .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } .dx-radiobutton-icon { - border-color: $base-foreground-disabled; + border-color: $radiobutton-foreground-disabled; } .dx-radiobutton-checked { @@ -55,7 +54,7 @@ &.dx-state-focused, &.dx-state-active { .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } } } @@ -133,7 +132,7 @@ &.dx-state-readonly { .dx-radiobutton { .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } } } @@ -141,14 +140,14 @@ .dx-state-disabled { .dx-radiobutton { - color: $base-foreground-disabled; + color: $radiobutton-foreground-disabled; .dx-radiobutton-icon { - border-color: $base-foreground-disabled; + border-color: $radiobutton-foreground-disabled; } .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss index 61c3887126e9..fa11f4e1723c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/radioGroup/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss index 7f4618192668..81a32d4c3565 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/rangeSlider"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss index 5bb4ce8cc4d9..be4ea8d28285 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../scheduler/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss index bc780273f0e4..72e36b8f5b32 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss index 18a739590733..f7a00b49d6f8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss @@ -126,3 +126,9 @@ $header-panel-cell-date: null !default; $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$scheduler-accent: $base-accent !default; +$scheduler-bg: $base-bg !default; +$scheduler-border-color: $base-border-color !default; +$scheduler-inverted-text-color: $base-inverted-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss index a40c6ea98837..4e13eab72723 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../list/colors" as *; @@ -352,7 +351,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; } .dx-scheduler-header-panel-cell-date:last-child { - color: $base-inverted-text-color; + color: $scheduler-inverted-text-color; background-color: $scheduler-current-time-cell-color; display: inline-flex; align-items: center; @@ -848,7 +847,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; position: absolute; width: 6px; height: 100%; - background-color: $base-accent; + background-color: $scheduler-accent; } @container (max-width: 8px) { @@ -889,7 +888,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-date-table-row, .dx-scheduler-time-panel-row { - box-shadow: inset 0 -1px 0 0 $base-border-color; + box-shadow: inset 0 -1px 0 0 $scheduler-border-color; } .dx-scheduler-time-panel-cell { @@ -978,7 +977,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-appointment-tooltip-wrapper, .dx-scheduler-overlay-panel { .dx-overlay-content { - background-color: $base-bg; + background-color: $scheduler-bg; .dx-popup-content { padding: 0; @@ -989,7 +988,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; margin-bottom: 0; margin-top: 0; border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $scheduler-border-color; &:last-of-type { border-bottom-left-radius: $tooltip-border-radius; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss index 447aee0272c2..2a83ace0c3af 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../scrollable/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss index 6015612b4384..798297e2159f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/scrollable"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss index 168fd4424cc6..45dffa2b460b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss index b9687c354af1..7872e347b44d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss @@ -31,3 +31,8 @@ $fluent-slider-bar-disabled-bg: $base-background-disabled !default; * $type color */ $fluent-slider-tooltip-color: $base-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$slider-border-color: $base-border-color !default; +$slider-element-bg: $base-element-bg !default; +$slider-theme-invalid-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss index 4e8dca40441c..ca6ac16b4c50 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/slider"; @@ -41,8 +40,8 @@ border-radius: $fluent-slider-radius; border-width: 1px; border-style: solid; - border-color: $base-border-color; - background-color: $base-element-bg; + border-color: $slider-border-color; + background-color: $slider-element-bg; &::after { position: absolute; @@ -53,7 +52,7 @@ border-radius: $fluent-slider-radius; border-width: 3px; border-style: solid; - border-color: $base-element-bg; + border-color: $slider-element-bg; } &.dx-state-hover { @@ -118,7 +117,7 @@ .dx-invalid { .dx-slider-handle { &::after { - background-color: $base-invalid-color; + background-color: $slider-theme-invalid-color; } &.dx-state-hover { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss index b8ace30a01fb..0180740cfc44 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss @@ -1,6 +1,6 @@ +@use "../colors" as *; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/sortable" as * with ( diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss index 635ec575c479..c9555eef47d2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -14,3 +14,8 @@ $speed-dial-action-shading-color: $overlay-shader-bg !default; $speed-dial-action-bg: $button-normal-bg !default; $speed-dial-action-hover-bg: $button-normal-hover-bg !default; $speed-dial-action-active-bg: $button-normal-active-bg !default; + +// The shared base mixin derives hover/active via color.adjust() from this +// value, so it must stay a Sass color (theme layer) until the mixin accepts +// ready-made hover/active arguments — see TOKENS_MIGRATION.md. +$speed-dial-action-main-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss index 3405d0583b4b..b80811fb2b14 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/speedDialAction" as *; @@ -26,7 +25,7 @@ $fluent-fa-button-label-padding: 4px 8px; $speed-dial-action-hover-bg, $speed-dial-action-active-bg, $speed-dial-action-label-shadow, - $button-default-bg, + $speed-dial-action-main-bg, $button-default-color ); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss index 2293317c0861..d54687966826 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss index 1c3ce7709513..476b6c48405d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/splitterBar"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss index 6a9ab72d97c7..ec250baf6f5e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss @@ -1,6 +1,5 @@ @use "../../base/stepper"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/stepper/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss index 2f117d4e3bca..6684e06b0f92 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss @@ -43,3 +43,5 @@ $switch-invalid-color: $base-invalid-color !default; $switch-invalid-color-hover: $base-invalid-color-hover !default; $switch-invalid-color-focused: $base-invalid-color-selected !default; +// Color computations hoisted from style files (phase 0.5 layer normalization) +$switch-handle-on-shadow-color: color.change($switch-handle-on-bg, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss index 6c85de952e61..0342b65ea9b5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -10,7 +9,7 @@ // adduse $fluent-switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1); -$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1); +$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius $switch-handle-on-shadow-color; $fluent-switch-shadow: none; @include dx-switch( diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss index 89c53a85429e..e25e238cb8cc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$tabpanel-border-color: $base-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss index 31bfdffe7e83..e9478f24aa55 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss @@ -1,7 +1,6 @@ @use "sass:color"; @use "sass:selector"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/tabPanel"; @@ -28,7 +27,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-bottom: none; @@ -41,7 +40,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-top: 1px solid; - border-top-color: $base-border-color; + border-top-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-top: none; @@ -54,7 +53,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-right: 1px solid; - border-right-color: $base-border-color; + border-right-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-right: none; @@ -67,7 +66,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-left: 1px solid; - border-left-color: $base-border-color; + border-left-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-left: none; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss index 532cea56befe..43e5c7081da1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss @@ -42,3 +42,6 @@ $tagbox-tag-disabled: $base-background-disabled !default; @if $mode == "dark" { $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$tagbox-border-color-disabled: $base-border-color-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss index b4c7f569023d..d83c4da77b89 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -112,7 +111,7 @@ border-radius: $tagbox-tag-border-radius; border-width: 1px; border-style: solid; - border-color: $base-border-color-disabled; + border-color: $tagbox-border-color-disabled; } .dx-tag-remove-button { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss index 28d9c151038d..2164f02629b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/textArea"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss index 7b43f685dc7d..58dc6816d51a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss @@ -3,3 +3,6 @@ @use "../colors" as *; // adduse + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$textbox-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss index 321d236788e3..ddee8237db31 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -57,7 +56,7 @@ &.dx-state-disabled { .dx-icon-search { - color: $base-foreground-disabled; + color: $textbox-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss index 9b1c0e6ee6f6..09ceb66cdc6e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss @@ -151,3 +151,7 @@ $texteditor-label-color-focused: $base-accent; --dx-texteditor-color-text: #{$texteditor-color}; --dx-texteditor-color-label: #{$texteditor-label-color}; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$texteditor-foreground-disabled: $base-foreground-disabled !default; +$texteditor-invalid-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss index 3ce252791d4e..5b1105e210d5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -311,7 +310,7 @@ $fluent-editor-border-width: 1px; &.dx-invalid { .dx-texteditor-label { - color: $base-invalid-color; + color: $texteditor-invalid-color; } } } @@ -323,7 +322,7 @@ $fluent-editor-border-width: 1px; &.dx-invalid { .dx-texteditor-label { - color: $base-invalid-color; + color: $texteditor-invalid-color; } } } @@ -417,7 +416,7 @@ $fluent-editor-border-width: 1px; &.dx-state-disabled { .dx-icon-clear { - color: $base-foreground-disabled; + color: $texteditor-foreground-disabled; } } @@ -492,7 +491,7 @@ $fluent-editor-border-width: 1px; } .dx-invalid & { - color: $base-invalid-color; + color: $texteditor-invalid-color; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss index e59c21678b65..801026d9376d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/tileView"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss index 8e816681beee..eb7fab3899d7 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss @@ -4,3 +4,7 @@ // adduse $clock-digits-color: $base-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$timeview-inverted-bg: $base-inverted-bg !default; +$timeview-typography-bg: $base-typography-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss index f9990c033991..8a2e7c9f675b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../textEditor/sizes" as *; @@ -10,7 +9,7 @@ // adduse -@include clock-action-icons-mixin($base-inverted-bg, $base-typography-bg, $clock-digits-color); +@include clock-action-icons-mixin($timeview-inverted-bg, $timeview-typography-bg, $clock-digits-color); .dx-timeview { height: auto; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss index 057b1a0013f5..8a6ea76ec308 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss @@ -62,3 +62,9 @@ $toast-success-bg: $base-success !default; * $type color */ $toast-success-color: $base-inverted-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$toast-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$toast-shadow: 0 0 2px 0 color.change($toast-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($toast-shadow-color, $alpha: 0.14) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss index b6309f525428..6b13a7eb172e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/toast"; @@ -18,7 +17,7 @@ font-weight: 400; padding: $fluent-toast-content-vertical-padding $fluent-toast-content-horizontal-padding; border-radius: $toast-border-radius; - box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14); + box-shadow: $toast-shadow; min-height: $fluent-toast-height; display: flex; align-items: center; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss index bb487960ea0d..4b44754d9a76 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss index 35f6749d4595..df2aaf07ed72 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/tooltip"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss index 36b942794d2e..1444df53d94e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss @@ -1,7 +1,7 @@ +@use "../colors" as *; @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss index b8d6b1e6ad7a..86ee70ac973a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss @@ -44,3 +44,5 @@ $treeview-checkbox-accent-color-focused: null !default; $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$treeview-text-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss index 6dd170a8e874..edbfea30a6ba 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/treeView" as *; @@ -123,7 +122,7 @@ ); @include treeview-checkbox( $fluent-checkbox-container-size, - $base-text-color, + $treeview-text-color, $checkbox-border-color-focused, $treeview-item-selected-color, $treeview-item-selected-bg, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss index 89c53a85429e..9e49cedb81af 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss @@ -4,3 +4,6 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$typography-typography-bg: $base-typography-bg !default; +$typography-typography-link-color: $typography-link-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss index 64c9398a5c00..bb1bd4ed10c6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; @@ -9,7 +8,7 @@ // adduse .dx-theme-dxdsfluent-typography { - background-color: $base-typography-bg; + background-color: $typography-typography-bg; @include dx-base-typography(); @@ -65,6 +64,6 @@ } a { - color: $typography-link-color; + color: $typography-typography-link-color; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss index 16829ffb77c6..194b1e859c8f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/validation" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss index 89c53a85429e..f4d78c6bae1b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$widget-bg: $base-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss index f22138c1e536..76c11fdf18c5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; @@ -24,5 +23,5 @@ } .dx-surface { - background-color: $base-bg; + background-color: $widget-bg; } diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts index f17dc78bf28b..6a0588159061 100644 --- a/packages/devextreme-scss/tests/unused-elements.test.ts +++ b/packages/devextreme-scss/tests/unused-elements.test.ts @@ -49,7 +49,9 @@ const removeAllCommentsFromContent = (content: string): string => content const extractVariables = (filePath: string): string[] => { const content = removeAllCommentsFromContent(readFileSync(filePath, 'utf8')); - const regex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g'); + // `ds.$…` references point to the generated design-tokens module + // (scss/_design-system/variables/_ds.scss) and are not theme-local variables. + const regex = new RegExp(`(? Date: Fri, 17 Jul 2026 11:07:42 +0400 Subject: [PATCH 08/27] migrate texteditors --- e2e/testcafe-devextreme/helpers/themeUtils.ts | 2 +- .../widgets/dxdsfluent/checkBox/_colors.scss | 28 +++---- .../dxdsfluent/speedDialAction/_colors.scss | 4 +- .../widgets/dxdsfluent/textBox/_colors.scss | 6 +- .../dxdsfluent/textEditor/_colors.scss | 82 +++++-------------- 5 files changed, 37 insertions(+), 85 deletions(-) diff --git a/e2e/testcafe-devextreme/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts index 9e8e738e159b..7677b96181f5 100644 --- a/e2e/testcafe-devextreme/helpers/themeUtils.ts +++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts @@ -18,7 +18,7 @@ export const getCurrentTheme = async (t: TestController): Promise => { export const isMaterial = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('material'); -export const isFluent = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('fluent'); +export const isFluent = (): boolean => /^(dxds)?fluent/.test(process.env.theme ?? defaultThemeName); export const isMaterialBased = (): boolean => isMaterial() || isFluent(); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss index f36f4d5b4fe0..720f4b5c88ec 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss @@ -1,22 +1,20 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$checkbox-border-color: $base-border-color-accessible !default; -$checkbox-border-color-hover: $base-border-color-accessible-hover !default; -$checkbox-border-color-active: $base-border-color-accessible-focused !default; +$checkbox-border-color: ds.$checkbox-color-unchecked-default-border-rest !default; +$checkbox-border-color-hover: ds.$checkbox-color-unchecked-default-border-hovered !default; +$checkbox-border-color-active: ds.$checkbox-color-unchecked-default-border-active !default; -$checkbox-foreground-color: $base-element-bg !default; +$checkbox-foreground-color: ds.$checkbox-color-checked-default-icon-rest !default; -$checkbox-accent-color: $base-accent !default; -$checkbox-accent-color-hover: $base-accent-hover !default; -$checkbox-accent-color-focused: $base-accent-active !default; +$checkbox-accent-color: ds.$checkbox-color-checked-default-bg-rest !default; +$checkbox-accent-color-hover: ds.$checkbox-color-checked-default-bg-hovered !default; +$checkbox-accent-color-focused: ds.$checkbox-color-checked-default-bg-active !default; -$checkbox-invalid-color: $base-invalid-color !default; -$checkbox-invalid-color-hover: $base-invalid-color-hover !default; -$checkbox-invalid-color-focused: $base-invalid-color-selected !default; +$checkbox-invalid-color: ds.$color-border-danger-default-rest !default; +$checkbox-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$checkbox-invalid-color-focused: ds.$color-border-danger-default-hovered !default; -$checkbox-border-color-disabled: $base-border-color-disabled !default; -$checkbox-foreground-disabled-color: $base-foreground-disabled !default; +$checkbox-border-color-disabled: ds.$checkbox-color-unchecked-default-border-disabled !default; +$checkbox-foreground-disabled-color: ds.$checkbox-color-checked-default-icon-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss index c9555eef47d2..939834ec73a0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -15,7 +15,5 @@ $speed-dial-action-bg: $button-normal-bg !default; $speed-dial-action-hover-bg: $button-normal-hover-bg !default; $speed-dial-action-active-bg: $button-normal-active-bg !default; -// The shared base mixin derives hover/active via color.adjust() from this -// value, so it must stay a Sass color (theme layer) until the mixin accepts -// ready-made hover/active arguments — see TOKENS_MIGRATION.md. +// Stays a Sass color: the shared base mixin derives hover/active from it via color.adjust() — see TOKENS_MIGRATION.md $speed-dial-action-main-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss index 58dc6816d51a..b9490fd421f6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss @@ -1,8 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$textbox-foreground-disabled: $base-foreground-disabled !default; +$textbox-foreground-disabled: ds.$text-input-color-default-content-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss index 09ceb66cdc6e..2711208782d6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss @@ -1,6 +1,5 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,19 +7,19 @@ * $name 10. Text color * $type color */ -$texteditor-color: null !default; +$texteditor-color: ds.$text-input-color-default-content-rest !default; /** * $name 20. Placeholder text color * $type color */ -$texteditor-placeholder-color: null !default; +$texteditor-placeholder-color: ds.$text-content-color-default-placeholder-rest !default; /** * $name 30. Outlined background color * $type color */ -$texteditor-outlined-bg: $base-element-bg !default; +$texteditor-outlined-bg: ds.$text-input-color-default-bg-rest !default; /** * $name 31. Outlined hovered background color @@ -38,7 +37,7 @@ $texteditor-outlined-bg-focused: $texteditor-outlined-bg !default; * $name 40. Filled background color * $type color */ -$texteditor-filled-bg: null !default; +$texteditor-filled-bg: ds.$color-surface-neutral-deep-rest !default; /** * $name 50. Underlined background color @@ -62,76 +61,35 @@ $texteditor-underlined-bg-focused: $texteditor-underlined-bg !default; * $name 60. Border color * $type color */ -$texteditor-border-color: $base-border-color !default; -$texteditor-border-color-hover: $base-border-color-hover !default; -$texteditor-border-color-focused: $base-border-color-focused !default; +$texteditor-border-color: ds.$text-input-color-default-border-rest !default; +$texteditor-border-color-hover: ds.$text-input-color-default-border-hovered !default; +$texteditor-border-color-focused: ds.$text-input-color-default-border-active !default; /** * $name 70. Bottom border color * $type color */ -$texteditor-border-bottom-color: $base-border-color-accessible !default; -$texteditor-border-bottom-color-hover: null !default; -$texteditor-border-bottom-color-focused: null !default; +$texteditor-border-bottom-color: ds.$text-input-color-default-line-rest !default; +$texteditor-border-bottom-color-hover: ds.$text-input-color-default-line-hovered !default; +$texteditor-border-bottom-color-focused: ds.$text-input-color-default-line-hovered !default; /** * $name 80. Focused state indicator color * $type color */ -$texteditor-indicator-border-color: $base-accent !default; +$texteditor-indicator-border-color: ds.$text-input-color-default-line-focused !default; -$texteditor-button-clear-icon-color: $base-icon-color !default; -$texteditor-invalid-focused-border-color: $base-invalid-color-hover !default; -$texteditor-invalid-faded-border-color: $base-invalid-color !default; -$texteditor-border-color-disabled: $base-border-color-disabled !default; -$texteditor-disabled-text-color: $base-foreground-disabled !default; +$texteditor-button-clear-icon-color: ds.$color-content-neutral-subdued-rest !default; +$texteditor-invalid-focused-border-color: ds.$color-border-danger-default-hovered !default; +$texteditor-invalid-faded-border-color: ds.$text-input-color-invalid-border-rest !default; +$texteditor-border-color-disabled: ds.$text-input-color-default-border-disabled !default; +$texteditor-disabled-text-color: ds.$text-input-color-default-content-disabled !default; $texteditor-input-border-radius: $base-border-radius !default; $texteditor-label-transition: font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; -@if $mode == "light" { - @if $color == "blue" { - $texteditor-color: $base-text-color !default; - $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default; - $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default; - } - - @if $color == "saas" { - $texteditor-color: rgba(66, 81, 118, 1) !default; - $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default; - $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: rgba(243, 245, 248, 1) !default; - } - - $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default; - $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default; - $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default; - $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default; -} - - -@if $mode == "dark" { - @if $color == "blue" { - $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default; - } - - @if $color == "saas" { - $texteditor-outlined-bg: rgba(20, 30, 40, 1) !default; - $texteditor-filled-bg: rgba(50, 60, 75, 1) !default; - } - - $texteditor-color: $base-text-color !default; - $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default; - $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default; - $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default; - $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default; - $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default; -} - /** * $name 41. Filled hovered background color * $type color @@ -145,7 +103,7 @@ $texteditor-filled-bg-hover: $texteditor-filled-bg !default; $texteditor-filled-bg-focused: $texteditor-filled-bg !default; $texteditor-label-color: $texteditor-placeholder-color; -$texteditor-label-color-focused: $base-accent; +$texteditor-label-color-focused: ds.$color-content-primary-default-rest; :root { --dx-texteditor-color-text: #{$texteditor-color}; @@ -153,5 +111,5 @@ $texteditor-label-color-focused: $base-accent; } // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$texteditor-foreground-disabled: $base-foreground-disabled !default; -$texteditor-invalid-color: $base-invalid-color !default; +$texteditor-foreground-disabled: ds.$text-input-color-default-content-disabled !default; +$texteditor-invalid-color: ds.$text-input-color-invalid-border-rest !default; From 91e554c857a3f5822c667a972d17d17deb2a7ed0 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 00:11:04 +0400 Subject: [PATCH 09/27] add sizing support --- .../utils/visual-tests/helpers/theme-utils.js | 2 +- .../scss/widgets/base/_icon_fonts.scss | 34 ++- .../scss/widgets/base/_mixins.scss | 3 +- .../scss/widgets/base/_speedDialAction.scss | 18 +- .../scss/widgets/base/calendar/_mixins.scss | 3 +- .../base/cardView/header_panel/_index.scss | 4 +- .../chat/layout/chat-fileview/_mixins.scss | 4 +- .../_mixins.scss | 4 +- .../chat/layout/chat-messagelist/_mixins.scss | 3 +- .../scss/widgets/base/diagram/_mixins.scss | 35 ++- .../widgets/base/dropDownEditor/_mixins.scss | 5 +- .../scss/widgets/base/pivotGrid/_index.scss | 3 +- .../widgets/base/radioButton/_mixins.scss | 3 +- .../widgets/base/scheduler/views/_index.scss | 5 +- .../scss/widgets/base/switch/_mixins.scss | 13 +- .../scss/widgets/base/textEditor/_mixins.scss | 27 +- .../widgets/base/treeList/_expandable.scss | 5 +- .../scss/widgets/base/treeView/_index.scss | 3 +- .../scss/widgets/dxdsfluent/_sizes.scss | 43 +-- .../widgets/dxdsfluent/accordion/_sizes.scss | 23 +- .../dxdsfluent/actionSheet/_sizes.scss | 3 +- .../scss/widgets/dxdsfluent/badge/_sizes.scss | 13 +- .../widgets/dxdsfluent/button/_mixins.scss | 4 +- .../widgets/dxdsfluent/button/_sizes.scss | 17 +- .../widgets/dxdsfluent/calendar/_sizes.scss | 19 +- .../widgets/dxdsfluent/cardView/_sizes.scss | 151 +++++----- .../scss/widgets/dxdsfluent/chat/_sizes.scss | 171 +++++------ .../widgets/dxdsfluent/checkBox/_sizes.scss | 17 +- .../widgets/dxdsfluent/colorBox/_index.scss | 2 +- .../widgets/dxdsfluent/colorBox/_sizes.scss | 11 +- .../widgets/dxdsfluent/colorView/_sizes.scss | 31 +- .../widgets/dxdsfluent/common/_mixins.scss | 6 +- .../widgets/dxdsfluent/common/_sizes.scss | 17 +- .../dxdsfluent/contextMenu/_sizes.scss | 15 +- .../widgets/dxdsfluent/dataGrid/_sizes.scss | 13 +- .../widgets/dxdsfluent/dateBox/_sizes.scss | 7 +- .../dxdsfluent/dateRangeBox/_sizes.scss | 5 +- .../widgets/dxdsfluent/dateView/_index.scss | 4 +- .../widgets/dxdsfluent/dateView/_sizes.scss | 5 +- .../widgets/dxdsfluent/diagram/_index.scss | 4 +- .../widgets/dxdsfluent/diagram/_sizes.scss | 73 ++--- .../dxdsfluent/dropDownButton/_sizes.scss | 13 +- .../dxdsfluent/dropDownEditor/_index.scss | 10 +- .../dxdsfluent/dropDownEditor/_sizes.scss | 9 +- .../dxdsfluent/dropDownMenu/_sizes.scss | 5 +- .../widgets/dxdsfluent/fieldset/_index.scss | 2 +- .../widgets/dxdsfluent/fieldset/_sizes.scss | 29 +- .../dxdsfluent/fileManager/_index.scss | 16 +- .../dxdsfluent/fileManager/_sizes.scss | 53 ++-- .../dxdsfluent/fileUploader/_index.scss | 10 +- .../dxdsfluent/fileUploader/_sizes.scss | 35 +-- .../dxdsfluent/filterBuilder/_index.scss | 2 +- .../dxdsfluent/filterBuilder/_sizes.scss | 23 +- .../scss/widgets/dxdsfluent/form/_sizes.scss | 43 +-- .../widgets/dxdsfluent/gallery/_index.scss | 8 +- .../widgets/dxdsfluent/gallery/_sizes.scss | 7 +- .../scss/widgets/dxdsfluent/gantt/_index.scss | 10 +- .../scss/widgets/dxdsfluent/gantt/_sizes.scss | 21 +- .../widgets/dxdsfluent/gridBase/_index.scss | 28 +- .../widgets/dxdsfluent/gridBase/_sizes.scss | 135 ++++----- .../dxdsfluent/gridBase/_variables.scss | 6 +- .../dxdsfluent/gridBase/layout/cell.scss | 16 +- .../widgets/dxdsfluent/htmlEditor/_index.scss | 8 +- .../widgets/dxdsfluent/htmlEditor/_sizes.scss | 41 +-- .../widgets/dxdsfluent/informer/_sizes.scss | 17 +- .../scss/widgets/dxdsfluent/list/_index.scss | 10 +- .../scss/widgets/dxdsfluent/list/_sizes.scss | 31 +- .../widgets/dxdsfluent/loadPanel/_sizes.scss | 7 +- .../widgets/dxdsfluent/lookup/_index.scss | 10 +- .../widgets/dxdsfluent/lookup/_sizes.scss | 19 +- .../scss/widgets/dxdsfluent/menu/_sizes.scss | 5 +- .../widgets/dxdsfluent/menuBase/_sizes.scss | 15 +- .../widgets/dxdsfluent/numberBox/_sizes.scss | 7 +- .../widgets/dxdsfluent/pagination/_sizes.scss | 25 +- .../widgets/dxdsfluent/pivotGrid/_sizes.scss | 41 +-- .../widgets/dxdsfluent/popup/_colors.scss | 2 +- .../scss/widgets/dxdsfluent/popup/_index.scss | 2 +- .../scss/widgets/dxdsfluent/popup/_sizes.scss | 41 +-- .../dxdsfluent/progressBar/_sizes.scss | 9 +- .../dxdsfluent/radioButton/_sizes.scss | 11 +- .../widgets/dxdsfluent/radioGroup/_sizes.scss | 9 +- .../dxdsfluent/rangeSlider/_index.scss | 2 +- .../dxdsfluent/recurrenceEditor/_sizes.scss | 13 +- .../widgets/dxdsfluent/scheduler/_index.scss | 8 +- .../widgets/dxdsfluent/scheduler/_sizes.scss | 277 +++++++++--------- .../widgets/dxdsfluent/scrollView/_index.scss | 2 +- .../widgets/dxdsfluent/scrollable/_sizes.scss | 5 +- .../widgets/dxdsfluent/slider/_index.scss | 18 +- .../widgets/dxdsfluent/slider/_sizes.scss | 33 ++- .../dxdsfluent/speedDialAction/_sizes.scss | 17 +- .../widgets/dxdsfluent/splitter/_sizes.scss | 3 +- .../widgets/dxdsfluent/stepper/_sizes.scss | 25 +- .../widgets/dxdsfluent/switch/_index.scss | 2 +- .../widgets/dxdsfluent/switch/_sizes.scss | 21 +- .../dxdsfluent/tabs/mixins/_index.scss | 4 +- .../dxdsfluent/tabs/variables/_sizes.scss | 51 ++-- .../widgets/dxdsfluent/tagBox/_index.scss | 10 +- .../widgets/dxdsfluent/tagBox/_sizes.scss | 41 +-- .../widgets/dxdsfluent/textArea/_index.scss | 4 +- .../widgets/dxdsfluent/textArea/_sizes.scss | 5 +- .../widgets/dxdsfluent/textBox/_sizes.scss | 5 +- .../widgets/dxdsfluent/textEditor/_index.scss | 12 +- .../widgets/dxdsfluent/textEditor/_sizes.scss | 67 ++--- .../widgets/dxdsfluent/timeView/_sizes.scss | 7 +- .../scss/widgets/dxdsfluent/toast/_sizes.scss | 15 +- .../widgets/dxdsfluent/toolbar/_index.scss | 2 +- .../widgets/dxdsfluent/toolbar/_mixins.scss | 2 +- .../widgets/dxdsfluent/toolbar/_sizes.scss | 11 +- .../widgets/dxdsfluent/tooltip/_sizes.scss | 13 +- .../widgets/dxdsfluent/treeList/_sizes.scss | 11 +- .../widgets/dxdsfluent/treeView/_index.scss | 2 +- .../widgets/dxdsfluent/treeView/_sizes.scss | 51 ++-- .../widgets/dxdsfluent/typography/_sizes.scss | 49 ++-- .../widgets/dxdsfluent/validation/_sizes.scss | 23 +- 114 files changed, 1267 insertions(+), 1163 deletions(-) diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js index 66f6175a0763..4d3fc5ae191d 100644 --- a/apps/demos/utils/visual-tests/helpers/theme-utils.js +++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js @@ -36,7 +36,7 @@ export async function testScreenshot( const finalOptions = { ...comparisonOptions, - ...themeOptions, + // ...themeOptions, }; await t diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss index 2b8b813a092e..23d99867f954 100644 --- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss +++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:map"; +@use "sass:meta"; @use "sass:selector"; .dx-icon-plus, @@ -213,9 +214,20 @@ } @mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) { - $icon-paddings-dirty: $container-size - $icon-size; - $icon-paddings: $icon-paddings-dirty - $borders-size; - $icon-padding: math.floor(math.div($icon-paddings, 2)); + $icon-padding: null; + $icon-line-height: null; + + @if meta.type-of($icon-size) == number and meta.type-of($container-size) == number and meta.type-of($borders-size) == number { + $icon-paddings-dirty: $container-size - $icon-size; + $icon-paddings: $icon-paddings-dirty - $borders-size; + $icon-padding: math.floor(math.div($icon-paddings, 2)); + $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); + $icon-line-height: $icon-size; + } // Geometry width: $container-size; @@ -231,10 +243,20 @@ // Icon as font font-size: $icon-size; text-align: center; - line-height: $container-size - $icon-paddings-dirty; + line-height: $icon-line-height; } @mixin dx-icon-font-centered-sizing($icon-size, $position: absolute) { + $icon-center-offset: null; + + @if meta.type-of($icon-size) == number { + $icon-center-offset: math.div(-$icon-size, 2); + } @else { + + // Token-based themes pass var()/calc() values — the derivation moves to CSS + $icon-center-offset: calc(#{$icon-size} / -2); + } + font-size: $icon-size; text-align: center; line-height: $icon-size; @@ -244,9 +266,9 @@ display: block; width: $icon-size; top: 50%; - margin-top: math.div(-$icon-size, 2); + margin-top: $icon-center-offset; left: 50%; - margin-left: math.div(-$icon-size, 2); + margin-left: $icon-center-offset; } @if $position == relative { diff --git a/packages/devextreme-scss/scss/widgets/base/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/_mixins.scss index a560cb644ca7..364fc76ef018 100644 --- a/packages/devextreme-scss/scss/widgets/base/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; // stylelint-disable selector-class-pattern @@ -128,7 +129,7 @@ pointer-events: none; position: absolute; top: 50%; - margin-top: math.div(-$indicator-size, 2); + margin-top: if(meta.type-of($indicator-size) == number, math.div(-$indicator-size, 2), calc(#{$indicator-size} / -2)); width: $indicator-size; height: $indicator-size; } diff --git a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss index 54d89276659b..84afb19202f4 100644 --- a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss +++ b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @use "sass:color"; .dx-fa-button .dx-overlay-content { @@ -23,6 +24,11 @@ $button-default-bg, $button-default-color ) { + $fa-main-radius: if(meta.type-of($main-action-button-size) == number, math.div($main-action-button-size, 2), calc(#{$main-action-button-size} / 2)); + $fa-action-radius: if(meta.type-of($action-button-size) == number, math.div($action-button-size, 2), calc(#{$action-button-size} / 2)); + $fa-main-icon-padding: if(meta.type-of($main-action-button-size) == number and meta.type-of($icon-size) == number, math.div($main-action-button-size - $icon-size, 2), calc((#{$main-action-button-size} - #{$icon-size}) / 2)); + $fa-action-icon-padding: if(meta.type-of($action-button-size) == number and meta.type-of($icon-size) == number, math.div($action-button-size - $icon-size, 2), calc((#{$action-button-size} - #{$icon-size}) / 2)); + .dx-fa-button { &.dx-fa-button-main { .dx-overlay-shader { @@ -35,7 +41,7 @@ background-color: $button-default-bg; color: $button-default-color; overflow: visible; - border-radius: math.div($main-action-button-size, 2); + border-radius: $fa-main-radius; box-shadow: $speed-dial-action-shadow; &.dx-state-hover { @@ -56,7 +62,7 @@ .dx-fa-button-icon, .dx-fa-button-icon-close { - padding: math.div($main-action-button-size - $icon-size, 2); + padding: $fa-main-icon-padding; box-shadow: none; background-color: transparent; } @@ -74,7 +80,7 @@ } .dx-inkripple { - border-radius: math.div($main-action-button-size, 2); + border-radius: $fa-main-radius; } } @@ -85,7 +91,7 @@ .dx-fa-button-icon, .dx-fa-button-icon-close { - padding: math.div($main-action-button-size - $icon-size, 2) 0 math.div($main-action-button-size - $icon-size, 2) math.div($main-action-button-size - $icon-size, 2); + padding: $fa-main-icon-padding 0 $fa-main-icon-padding $fa-main-icon-padding; } } } @@ -99,7 +105,7 @@ .dx-fa-button-icon, .dx-fa-button-icon-close { - padding: math.div($action-button-size - $icon-size, 2); + padding: $fa-action-icon-padding; width: $icon-size; height: $icon-size; box-sizing: content-box; @@ -175,7 +181,7 @@ .dx-inkripple { overflow: hidden; - border-radius: math.div($action-button-size, 2); + border-radius: $fa-action-radius; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss index 3e6de72eca09..978c5ae6ade0 100644 --- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:color"; +@use "sass:meta"; @mixin dx-calendar-mixin( $calendar-bg, @@ -16,7 +17,7 @@ gap: $calendar-element-padding; &.dx-calendar-with-footer { - height: $calendar-height + $calendar-element-padding + $footer-button-height; + height: if(meta.type-of($calendar-height) == number and meta.type-of($calendar-element-padding) == number and meta.type-of($footer-button-height) == number, $calendar-height + $calendar-element-padding + $footer-button-height, calc(#{$calendar-height} + #{$calendar-element-padding} + #{$footer-button-height})); } &.dx-calendar-multiview { diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss index 5b1d0f6efec9..e129742ece8f 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss @@ -1,4 +1,4 @@ - +@use "sass:meta"; @use './item'; @use './variables' as *; @@ -76,7 +76,7 @@ $sortable-side-offset: 6px; Please note, that header-item-container paddings taken into account here */ &--with-header-items { - margin: 0 ($sortable-side-offset - $cardview-header-item__right-padding) 0 ($sortable-side-offset - $cardview-header-item__left-padding); + margin: 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__right-padding) == number, ($sortable-side-offset - $cardview-header-item__right-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__right-padding})) 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__left-padding) == number, ($sortable-side-offset - $cardview-header-item__left-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__left-padding})); } &--empty { diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss index 0371918942f6..58ad56c6c93f 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + @mixin chat-file( $chat-file-container-width, $chat-file-container-padding, @@ -31,7 +33,7 @@ } .dx-chat-file-name { - margin-inline-end: $chat-file-base-section-gap * 2; + margin-inline-end: if(meta.type-of($chat-file-base-section-gap) == number, $chat-file-base-section-gap * 2, calc(#{$chat-file-base-section-gap} * 2)); margin-inline-start: $chat-file-base-section-gap; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss index ef65e694b2c2..7b1b90046c21 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + @mixin message-editing-preview( $preview-padding, $message-row-gap, @@ -14,7 +16,7 @@ .dx-chat-editing-preview-content { gap: $message-row-gap; - padding-inline-start: $preview-padding + $border-width; + padding-inline-start: if(meta.type-of($preview-padding) == number and meta.type-of($border-width) == number, $preview-padding + $border-width, calc(#{$preview-padding} + #{$border-width})); padding-inline-end: $preview-padding; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss index 612aaaad8857..f70805be28b6 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @mixin chat-messagelist( $padding, @@ -51,7 +52,7 @@ .dx-chat-messagelist-empty-image { color: $messagelist-empty-icon-color; background-color: $messagelist-empty-icon-background-color; - padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2); + padding: if(meta.type-of($messagelist-empty-icon-box-size) == number and meta.type-of($messagelist-empty-icon-size) == number, math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2), calc((#{$messagelist-empty-icon-box-size} - #{$messagelist-empty-icon-size}) / 2)); margin-bottom: $messagelist-empty-icon-margin-bottom; &::before { diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss index a82ac276d054..7b9ba657b929 100644 --- a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "sass:string"; @use "../string" as *; @@ -10,68 +11,70 @@ } @mixin diagram-action-icons-mixin($toolbar-color, $menu-color, $icon-size, $toolbar-colorbutton-border-width) { + $diagram-wide-icon-size: if(meta.type-of($icon-size) == number, 1.56 * $icon-size, calc(1.56 * #{$icon-size})); + .dx-diagram-i-selectbox-null-icon { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-none { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-arrow { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-outlined-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-filled-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-none { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-arrow { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-outlined-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-filled-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-orthogonal { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-straight { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-line-solid { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-line-dotted { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-line-dashed { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-button-fill { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width}))); } .dx-diagram-i-menu-fill { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width}))); } .dx-diagram-i-button-fullscreen { diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss index 01dd983dd65c..1430b8eb4b7c 100644 --- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "../icon_fonts" as *; @mixin invalid-dropdowneditor-input-padding( @@ -8,7 +9,7 @@ &.dx-dropdowneditor-button-visible { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: $invalid-badge-size + $texteditor-underlined-input-horizontal-padding; + padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-underlined-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-underlined-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-underlined-input-horizontal-padding})); } .dx-start-datebox { @@ -27,7 +28,7 @@ &.dx-editor-filled, &.dx-editor-outlined { .dx-texteditor-input { - padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding; + padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-filled-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-filled-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-filled-input-horizontal-padding})); } .dx-start-datebox { diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss index 9438cab26234..e34d45d15a53 100644 --- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss @@ -22,6 +22,7 @@ $pivotgrid-button-top-padding: null !default; @use "../mixins" as *; @use "../icon_fonts" as *; @use "./common"; +@use "sass:meta"; $pivotgrid-drag-header-border: 1px solid; $pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; @@ -30,7 +31,7 @@ $pivotgrid-border-width: 1px; $pivotgrid-border: $pivotgrid-border-width solid; $pivotgrid-icon-size: 14px; $pivotgrid-common-field-padding: 2px; -$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding; +$pivotgrid-filter-area-border-spacing: if(meta.type-of($pivotgrid-common-left-right-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-common-left-right-padding} - #{$pivotgrid-common-field-padding})) if(meta.type-of($pivotgrid-header-top-bottom-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-header-top-bottom-padding} - #{$pivotgrid-common-field-padding})); $pivotgrid-expand-icon-offset: -5px; $pivotgrid-expand-icon-text-offset: 0; diff --git a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss index 0081edf94f26..31668dcbb25a 100644 --- a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @mixin dx-radiobutton-icon-mixin( $icon-size, @@ -9,7 +10,7 @@ $ripple-transition: all 0s ease 0s, ) { $border-radius: 50%; - $dot-icon-border-width: math.div($icon-size - $border-width * 2 - $dot-size, 2); + $dot-icon-border-width: if(meta.type-of($icon-size) == number and meta.type-of($border-width) == number and meta.type-of($dot-size) == number, math.div($icon-size - $border-width * 2 - $dot-size, 2), calc((#{$icon-size} - #{$border-width} * 2 - #{$dot-size}) / 2)); .dx-radiobutton-icon { position: relative; diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss index af44f6164aae..f478c836abfa 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "../../mixins" as *; @use "sass:math"; @@ -38,7 +39,7 @@ $scheduler-workspace-date-table-cell-height: 50px; $scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5; $scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5; $scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height; -$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px; +$scheduler-header-panel-table-cell-height: if(meta.type-of($scheduler-workspace-date-table-cell-height) == number, $scheduler-workspace-date-table-cell-height - 10px, calc(#{$scheduler-workspace-date-table-cell-height} - 10px)); $scheduler-group-header-table-cell-height: 30px; $scheduler-group-header-table-cell-width: 80px; @@ -84,7 +85,7 @@ $scheduler-month-date-text-padding: 6px; &::before { position: absolute; - top: $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1; + top: if(meta.type-of($scheduler-header-panel-table-cell-height) == number and meta.type-of($scheduler-current-time-cell-border-size) == number, $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1, calc(#{$scheduler-header-panel-table-cell-height} - #{$scheduler-current-time-cell-border-size} - 1px)); right: 0; width: 100%; height: $scheduler-current-time-cell-border-size; diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss index 54b2b4442bb6..101064353838 100644 --- a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "../icon_fonts" as *; @mixin dx-switch( @@ -20,10 +21,10 @@ position: relative; padding-top: $switch-padding,; padding-bottom: $switch-padding,; - padding-inline-start: $switch-padding - $switch-container-horizontal-padding; - padding-inline-end: $switch-padding + $switch-container-horizontal-padding; - inset-inline-start: -$switch-padding; - top: -$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})); + top: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding})); overflow: hidden; vertical-align: middle; box-sizing: content-box; @@ -353,11 +354,11 @@ .dx-switch-handle { float: right; margin-left: 0; - margin-right: -$switch-height; + margin-right: if(meta.type-of($switch-height) == number, -$switch-height, calc(-1 * #{$switch-height})); } .dx-switch-container { - margin: 0 0 0 (-$switch-container-adjustment); + margin: 0 0 0 if(meta.type-of($switch-container-adjustment) == number, (-$switch-container-adjustment), calc(-1 * #{$switch-container-adjustment})); } } } diff --git a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss index a37911b651f9..99501cb5020f 100644 --- a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @use "sass:color"; @mixin dx-editor-content-wrapper() { @@ -18,7 +19,7 @@ border-top-width: 0; span { - transform: translate(0, -$label-offset-y); + transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y}))); font-size: $label-font-size; margin-top: 0; top: 0; @@ -181,7 +182,7 @@ font-size: $texteditor-label-font-size; top: 0; margin-top: 0; - transform: translate(0, -$label-offset-y); + transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y}))); height: $label-active-height; line-height: normal; } @@ -237,7 +238,7 @@ width: 100%; position: absolute; height: 3px; - top: -$label-backdrop-offset-y; + top: if(meta.type-of($label-backdrop-offset-y) == number, -$label-backdrop-offset-y, calc(-1 * #{$label-backdrop-offset-y})); margin-inline-start: -2px; background-color: $label-backdrop-bg; } @@ -312,9 +313,9 @@ pointer-events: auto; font-size: $texteditor-label-outside-font-size; margin-top: 0; - top: -$label-offset-y-outside; - height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em; - line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em; + top: if(meta.type-of($label-offset-y-outside) == number, -$label-offset-y-outside, calc(-1 * #{$label-offset-y-outside})); + height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height); + line-height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height); } } } @@ -331,7 +332,7 @@ } } - $label-empty-margin-top: math.div(-$label-empty-height, 2) + $label-margin-top-diff; + $label-empty-margin-top: if(meta.type-of($label-empty-height) == number and meta.type-of($label-margin-top-diff) == number, math.div(-$label-empty-height, 2) + $label-margin-top-diff, calc(#{$label-empty-height} / -2 + #{$label-margin-top-diff})); &.dx-texteditor-empty { @include dx-state-empty( @@ -434,7 +435,7 @@ height: $texteditor-label-outside-height; line-height: $texteditor-label-outside-height; margin-top: 0; - top: -$texteditor-label-outside-top-offset; + top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset})); } .dx-label { @@ -462,7 +463,7 @@ height: $texteditor-empty-label-height; line-height: $texteditor-empty-label-line-height; top: 50%; - margin-top: math.div(-$texteditor-empty-label-height, 2); + margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2)); } &.dx-textarea { @@ -549,7 +550,7 @@ font-size: $texteditor-label-outside-font-size; height: $texteditor-label-outside-height; line-height: $texteditor-label-outside-height; - top: -$texteditor-label-outside-top-offset; + top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset})); margin-top: 0; } @@ -579,7 +580,7 @@ height: $texteditor-empty-label-height; line-height: $texteditor-empty-label-line-height; top: 50%; - margin-top: math.div(-$texteditor-empty-label-height, 2); + margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2)); } &.dx-textarea { @@ -754,7 +755,7 @@ .dx-button-content { display: flex; justify-content: center; - padding-top: $material-button-vertical-padding - 1px; + padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); .dx-icon { align-self: center; @@ -808,7 +809,7 @@ .dx-button-content { display: flex; justify-content: center; - padding-top: $material-button-vertical-padding - 1px; + padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); .dx-icon { align-self: center; diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss index 70285b993711..5e7b1c870190 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss @@ -1,5 +1,6 @@ @use "./variables" as *; @use "../icon_fonts" as *; +@use "sass:meta"; .dx-treelist-headers { .dx-header-row { @@ -10,7 +11,7 @@ float: left; width: $treelist-expand-checkbox-size; height: 1lh; - margin: 0 $treelist-expand-checkbox-right-gap 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap); + margin: 0 $treelist-expand-checkbox-right-gap 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap})); .dx-select-checkbox { display: block; @@ -113,7 +114,7 @@ &.dx-treelist-select-all { .dx-treelist-select-checkbox-container { float: right; - margin: 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap) 0 $treelist-expand-checkbox-right-gap; + margin: 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap})) 0 $treelist-expand-checkbox-right-gap; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss index 4c5e1c10eec3..119b01fdd89a 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss @@ -1,4 +1,5 @@ @use 'sass:math'; +@use 'sass:meta'; @use "./common"; @use "../../base/icon_fonts" as *; @@ -83,7 +84,7 @@ } .dx-treeview-with-search > .dx-scrollable { - height: calc(100% - #{math.round($search-editor-height + $searchbox-margin-bottom)}); + height: calc(100% - #{if(meta.type-of($search-editor-height) == number and meta.type-of($searchbox-margin-bottom) == number, math.round($search-editor-height + $searchbox-margin-bottom), calc(#{$search-editor-height} + #{$searchbox-margin-bottom}))}); } .dx-treeview-select-all-item { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss index 88ad9823f724..cacbcda6d9b0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss @@ -1,16 +1,17 @@ $size: null !default; @use "colors" as *; +@use "../../_design-system/variables/ds" as ds; $fluent-size-postfix: null !default; $fluent-base-font-size: null !default; $fluent-base-inline-widget-height: null !default; $fluent-base-inline-block-height: null !default; $fluent-base-icon-size: null !default; -$fluent-base-icon-margin: 8px !default; +$fluent-base-icon-margin: ds.$spacing-80 !default; $fluent-base-inline-horizontal-padding: null !default; $fluent-base-border-radius: null !default; -$fluent-html-editor-add-image-dialog-base-padding: 5px !default; +$fluent-html-editor-add-image-dialog-base-padding: ds.$spacing-50 !default; /** * $name 11. Button height @@ -34,38 +35,38 @@ $fluent-button-icon-margin: null !default; $fluent-size-postfix: "" !default; // Font sizes - $fluent-base-font-size: 14px !default; + $fluent-base-font-size: ds.$font-size-140 !default; // Base sizes - $fluent-base-inline-widget-height: 32px !default; - $fluent-base-inline-block-height: 20px !default; - $fluent-base-icon-size: 20px !default; - $fluent-base-inline-horizontal-padding: 12px !default; - $fluent-base-border-radius: 4px !default; - $fluent-button-height: 32px !default; - $fluent-button-icon-size: 20px !default; - $fluent-button-icon-margin: 8px !default; + $fluent-base-inline-widget-height: ds.$spacing-320 !default; + $fluent-base-inline-block-height: ds.$spacing-200 !default; + $fluent-base-icon-size: ds.$spacing-200 !default; + $fluent-base-inline-horizontal-padding: ds.$spacing-120 !default; + $fluent-base-border-radius: ds.$border-radius-40 !default; + $fluent-button-height: ds.$spacing-320 !default; + $fluent-button-icon-size: ds.$spacing-200 !default; + $fluent-button-icon-margin: ds.$spacing-80 !default; } @if $size == "compact" { $fluent-size-postfix: ".compact" !default; // Font sizes - $fluent-base-font-size: 12px !default; + $fluent-base-font-size: ds.$font-size-120 !default; // Base sizes - $fluent-base-inline-widget-height: 24px !default; - $fluent-base-inline-block-height: 16px !default; - $fluent-base-icon-size: 16px !default; - $fluent-base-inline-horizontal-padding: 8px !default; - $fluent-base-border-radius: 4px !default; - $fluent-button-height: 24px !default; - $fluent-button-icon-size: 16px !default; - $fluent-button-icon-margin: 4px !default; + $fluent-base-inline-widget-height: ds.$spacing-240 !default; + $fluent-base-inline-block-height: ds.$spacing-160 !default; + $fluent-base-icon-size: ds.$spacing-160 !default; + $fluent-base-inline-horizontal-padding: ds.$spacing-80 !default; + $fluent-base-border-radius: ds.$border-radius-40 !default; + $fluent-button-height: ds.$spacing-240 !default; + $fluent-button-icon-size: ds.$spacing-160 !default; + $fluent-button-icon-margin: ds.$spacing-40 !default; } // Base bordered inline widgets sizes -$fluent-base-border-width: 1px !default; +$fluent-base-border-width: ds.$border-width-10 !default; /** diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss index 9b10c508a768..4d8d05c9eb94 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss @@ -1,9 +1,10 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-accordion-title-horizontal-padding: null !default; -$fluent-accordion-title-vertical-padding: 6px !default; +$fluent-accordion-title-vertical-padding: ds.$spacing-60 !default; $fluent-accordion-body-padding: null !default; $fluent-accordion-title-height: null !default; @@ -18,19 +19,19 @@ $accordion-item-border-radius: $fluent-base-border-radius !default; $fluent-accordion-item-opened-margin: null !default; @if $size == "default" { - $fluent-accordion-title-horizontal-padding: 12px !default; - $fluent-accordion-body-padding: 12px !default; - $fluent-accordion-title-height: 44px !default; - $accordion-title-icon-margin: 8px !default; - $accordion-title-icon-size: 20px !default; + $fluent-accordion-title-horizontal-padding: ds.$spacing-120 !default; + $fluent-accordion-body-padding: ds.$spacing-120 !default; + $fluent-accordion-title-height: ds.$spacing-440 !default; + $accordion-title-icon-margin: ds.$spacing-80 !default; + $accordion-title-icon-size: ds.$spacing-200 !default; $fluent-accordion-item-opened-margin: 0 !default; } @else if $size == "compact" { - $fluent-accordion-title-horizontal-padding: 8px !default; - $fluent-accordion-body-padding: 8px !default; - $fluent-accordion-title-height: 32px !default; - $accordion-title-icon-margin: 6px !default; - $accordion-title-icon-size: 16px !default; + $fluent-accordion-title-horizontal-padding: ds.$spacing-80 !default; + $fluent-accordion-body-padding: ds.$spacing-80 !default; + $fluent-accordion-title-height: ds.$spacing-320 !default; + $accordion-title-icon-margin: ds.$spacing-60 !default; + $accordion-title-icon-size: ds.$spacing-160 !default; $fluent-accordion-item-opened-margin: 0 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss index a21b4a91b6d5..a31195b33021 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-actionsheet-item-margin-value: 12px; +$fluent-actionsheet-item-margin-value: ds.$spacing-120; $fluent-actionsheet-item-margin: 0 0 $fluent-actionsheet-item-margin-value 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss index a7255e2af727..244b7352d3a0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-badge-font-size: null !default; $badge-line-height: null !default; @if $size == "default" { - $fluent-badge-padding: 0 6px !default; - $fluent-badge-font-size: 12px !default; - $badge-line-height: 20px !default; + $fluent-badge-padding: 0 ds.$spacing-60 !default; + $fluent-badge-font-size: ds.$font-size-120 !default; + $badge-line-height: ds.$line-height-200 !default; } @else if $size == "compact" { - $fluent-badge-padding: 0 6px !default; - $fluent-badge-font-size: 10px !default; - $badge-line-height: 16px !default; + $fluent-badge-padding: 0 ds.$spacing-60 !default; + $fluent-badge-font-size: ds.$font-size-100 !default; + $badge-line-height: ds.$line-height-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss index a7c3e05b036e..5446e508970f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss @@ -9,7 +9,7 @@ @mixin dx-button-onlyicon-sizing($icon-size: $fluent-button-icon-size) { min-width: $fluent-button-height; - $button-content-padding: math.div($fluent-button-height - $icon-size - $fluent-base-border-width * 2, 2); + $button-content-padding: calc((#{$fluent-button-height} - #{$icon-size} - #{$fluent-base-border-width} * 2) / 2); @include dx-button-sizing( $button-content-padding, @@ -26,7 +26,7 @@ $fluent-button-horizontal-padding, $fluent-button-horizontal-padding, $fluent-button-icon-size, - math.div($fluent-button-icon-size, 2) + calc(#{$fluent-button-icon-size} / 2) ); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss index 5c4cec6e2300..4b802830096a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,22 +10,22 @@ $fluent-button-icon-text-padding: null !default; $fluent-button-content-line-height: 0 !default; $fluent-button-text-line-height: normal !default; $fluent-button-text-transform: none !default; -$fluent-button-text-font-weight: 500 !default; +$fluent-button-text-font-weight: ds.$font-weight-500 !default; $fluent-button-text-letter-spacing: normal !default; -$fluent-button-box-shadow-size: 0 1px 3px !default; +$fluent-button-box-shadow-size: 0 ds.$spacing-10 ds.$spacing-30 !default; @if $size == "default" { - $fluent-button-horizontal-padding: 12px !default; - $fluent-button-vertical-padding: 6px !default; - $fluent-button-icon-padding: 6px; + $fluent-button-horizontal-padding: ds.$spacing-120 !default; + $fluent-button-vertical-padding: ds.$spacing-60 !default; + $fluent-button-icon-padding: ds.$spacing-60; $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; } @else if $size == "compact" { - $fluent-button-horizontal-padding: 8px !default; - $fluent-button-vertical-padding: 4px !default; - $fluent-button-icon-padding: 4px !default; + $fluent-button-horizontal-padding: ds.$spacing-80 !default; + $fluent-button-vertical-padding: ds.$spacing-40 !default; + $fluent-button-icon-padding: ds.$spacing-40 !default; $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss index 38f020f3fc61..0d8af31f5444 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,21 +9,21 @@ $fluent-calendar-legacy-height: null !default; $fluent-calendar-footer-button-height: null !default; $fluent-calendar-cell-font-size: null !default; -$fluent-calendar-element-padding: 8px !default; +$fluent-calendar-element-padding: ds.$spacing-80 !default; @if $size == "default" { - $fluent-calendar-legacy-width: 272px !default; - $fluent-calendar-legacy-height: 264px !default; + $fluent-calendar-legacy-width: 272px !default; // dx-offscale: 272px + $fluent-calendar-legacy-height: 264px !default; // dx-offscale: 264px - $fluent-calendar-cell-font-size: 14px !default; + $fluent-calendar-cell-font-size: ds.$font-size-140 !default; - $fluent-calendar-footer-button-height: 36px !default; + $fluent-calendar-footer-button-height: ds.$spacing-360 !default; } @else if $size == "compact" { - $fluent-calendar-legacy-width: 252px !default; - $fluent-calendar-legacy-height: 260px !default; + $fluent-calendar-legacy-width: 252px !default; // dx-offscale: 252px + $fluent-calendar-legacy-height: 260px !default; // dx-offscale: 260px - $fluent-calendar-cell-font-size: 12px !default; - $fluent-calendar-footer-button-height: 28px !default; + $fluent-calendar-cell-font-size: ds.$font-size-120 !default; + $fluent-calendar-footer-button-height: ds.$spacing-280 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss index 619d5e8b3e23..e69b2885758a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss @@ -10,6 +10,7 @@ @use '../../base/cardView/content_view/no_data/variables' as *; @use '../../base/cardView/column_chooser/variables' as *; @use '../../base/cardView/filter_panel/variables' as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -261,27 +262,27 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau @if $size == "default" { // Common - $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-border-radius: ds.$border-radius-160 !default; $cardview-fluent-common-text-weight: 400 !default; - $cardview-fluent-common-cards-row-gap: 16px !default; - $cardview-fluent-common-cards-column-gap: 16px !default; - $cardview-fluent-common-gap: 24px !default; - $cardview-fluent-common-padding: 24px !default; + $cardview-fluent-common-cards-row-gap: ds.$spacing-160 !default; + $cardview-fluent-common-cards-column-gap: ds.$spacing-160 !default; + $cardview-fluent-common-gap: ds.$spacing-240 !default; + $cardview-fluent-common-padding: ds.$spacing-240 !default; // Card - $cardview-fluent-card-min-width: 250px !default; - $cardview-fluent-card-border-width: 1px !default; - $cardview-fluent-card-border-radius: 8px !default; - $cardview-fluent-card__header-height: 48px !default; - $cardview-fluent-card__header-text-size: 16px !default; - $cardview-fluent-card__header__selection-checkbox-padding-right: 12px !default; + $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px + $cardview-fluent-card-border-width: ds.$border-width-10 !default; + $cardview-fluent-card-border-radius: ds.$border-radius-80 !default; + $cardview-fluent-card__header-height: ds.$spacing-480 !default; + $cardview-fluent-card__header-text-size: ds.$spacing-160 !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-120 !default; $cardview-fluent-card__field-caption-weight: 600 !default; - $cardview-fluent-card__cover-max-height: 180px !default; - $cardview-fluent-card__cover--noimage__icon-size: 48px !default; - $cardview-fluent-card__content-padding: 12px !default; - $cardview-fluent-card__content-row-gap: 8px !default; - $cardview-fluent-card__content__cell-padding-vertical: 6px !default; - $cardview-fluent-card__content__cell-padding-horizontal: 12px !default; + $cardview-fluent-card__cover-max-height: 180px !default; // dx-offscale: 180px + $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-480 !default; + $cardview-fluent-card__content-padding: ds.$spacing-120 !default; + $cardview-fluent-card__content-row-gap: ds.$spacing-80 !default; + $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-60 !default; + $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-120 !default; // Card - selected $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; @@ -290,16 +291,16 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau $cardview-fluent-header-gap: 0 !default; // Header panel - $cardview-fluent-header-panel-vertical-margin: 8px !default; - $cardview-fluent-header-panel--empty-line-height: 32px !default; + $cardview-fluent-header-panel-vertical-margin: ds.$spacing-80 !default; + $cardview-fluent-header-panel--empty-line-height: ds.$line-height-320 !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: 1px !default; - $cardview-fluent-header-panel__item-border-radius: 6px !default; - $cardview-fluent-header-panel__item-padding-horizontal: 8px !default; - $cardview-fluent-header-panel__item-padding-vertical: 5px !default; - $cardview-fluent-header-item__left-padding: 6px !default; - $cardview-fluent-header-item__right-padding: 2px !default; + $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default; + $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default; + $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-80 !default; + $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-50 !default; + $cardview-fluent-header-item__left-padding: ds.$spacing-60 !default; + $cardview-fluent-header-item__right-padding: ds.$spacing-20 !default; $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; @@ -314,74 +315,74 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau // Header panel item - dragged $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-item__sort-indicator__border-size: 2px !default; - $cardview-fluent-header-item__sort-indicator__border-radius: 8px !default; + $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-20 !default; + $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-80 !default; // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-height: 44px !default; - $cardview-fluent-header-panel__dropzone-top: -6px !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; - $cardview-fluent-header-panel__dropzone-border-radius: 8px !default; + $cardview-fluent-header-panel__dropzone-height: ds.$spacing-440 !default; + $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-60 !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px + $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-80 !default; // Filter panel $cardview-fluent-filter-panel-border-radius: 0 !default; // Empty view - $cardview-fluent-nodata-view__icon-container-size: 64px !default; - $cardview-fluent-nodata-view__icon-container-margin: 12px !default; - $cardview-fluent-nodata-view__icon-size: 40px !default; + $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-640 !default; + $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-120 !default; + $cardview-fluent-nodata-view__icon-size: ds.$spacing-400 !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default; $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; // Column chooser - $cardview-fluent-column-chooser--empty__message-horizontal-padding: 24px !default; - $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 14px !default; + $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-240 !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-140 !default; } @else if $size == "compact" { // Common - $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-border-radius: ds.$border-radius-160 !default; $cardview-fluent-common-text-weight: 400 !default; - $cardview-fluent-common-cards-row-gap: 12px !default; - $cardview-fluent-common-cards-column-gap: 12px !default; - $cardview-fluent-common-gap: 16px !default; - $cardview-fluent-common-padding: 16px !default; + $cardview-fluent-common-cards-row-gap: ds.$spacing-120 !default; + $cardview-fluent-common-cards-column-gap: ds.$spacing-120 !default; + $cardview-fluent-common-gap: ds.$spacing-160 !default; + $cardview-fluent-common-padding: ds.$spacing-160 !default; // Card - $cardview-fluent-card-min-width: 250px !default; - $cardview-fluent-card-border-width: 1px !default; - $cardview-fluent-card-border-radius: 6px !default; - $cardview-fluent-card__header-height: 36px !default; - $cardview-fluent-card__header-text-size: 14px !default; - $cardview-fluent-card__header__selection-checkbox-padding-right: 8px !default; + $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px + $cardview-fluent-card-border-width: ds.$border-width-10 !default; + $cardview-fluent-card-border-radius: ds.$border-radius-60 !default; + $cardview-fluent-card__header-height: ds.$spacing-360 !default; + $cardview-fluent-card__header-text-size: ds.$spacing-140 !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-80 !default; $cardview-fluent-card__field-caption-weight: 600 !default; - $cardview-fluent-card__cover-max-height: 140px !default; - $cardview-fluent-card__cover--noimage__icon-size: 32px !default; - $cardview-fluent-card__content-padding: 8px !default; - $cardview-fluent-card__content-row-gap: 4px !default; - $cardview-fluent-card__content__cell-padding-vertical: 4px !default; - $cardview-fluent-card__content__cell-padding-horizontal: 8px !default; + $cardview-fluent-card__cover-max-height: 140px !default; // dx-offscale: 140px + $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-320 !default; + $cardview-fluent-card__content-padding: ds.$spacing-80 !default; + $cardview-fluent-card__content-row-gap: ds.$spacing-40 !default; + $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-40 !default; + $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-80 !default; // Card - selected $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; // Header - $cardview-fluent-header-gap: 4px !default; + $cardview-fluent-header-gap: ds.$spacing-40 !default; // Header panel - $cardview-fluent-header-panel-vertical-margin: 4px !default; - $cardview-fluent-header-panel--empty-line-height: 24px !default; + $cardview-fluent-header-panel-vertical-margin: ds.$spacing-40 !default; + $cardview-fluent-header-panel--empty-line-height: ds.$line-height-240 !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: 1px !default; - $cardview-fluent-header-panel__item-border-radius: 6px !default; - $cardview-fluent-header-panel__item-padding-horizontal: 6px !default; - $cardview-fluent-header-panel__item-padding-vertical: 3px !default; - $cardview-fluent-header-item__left-padding: 3px !default; - $cardview-fluent-header-item__right-padding: 1px !default; + $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default; + $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default; + $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-60 !default; + $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-30 !default; + $cardview-fluent-header-item__left-padding: ds.$spacing-30 !default; + $cardview-fluent-header-item__right-padding: ds.$spacing-10 !default; $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; @@ -396,31 +397,31 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau // Header panel item - dragged $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-item__sort-indicator__border-size: 1px !default; - $cardview-fluent-header-item__sort-indicator__border-radius: 4px !default; + $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-10 !default; + $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-40 !default; // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-height: 32px !default; - $cardview-fluent-header-panel__dropzone-top: -4px !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; - $cardview-fluent-header-panel__dropzone-border-radius: 6px !default; + $cardview-fluent-header-panel__dropzone-height: ds.$spacing-320 !default; + $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-40 !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px + $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-60 !default; // Filter panel $cardview-fluent-filter-panel-border-radius: 0 !default; // Empty view - $cardview-fluent-nodata-view__icon-container-size: 48px !default; - $cardview-fluent-nodata-view__icon-container-margin: 8px !default; - $cardview-fluent-nodata-view__icon-size: 32px !default; + $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-480 !default; + $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-80 !default; + $cardview-fluent-nodata-view__icon-size: ds.$spacing-320 !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default; $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; // Column chooser - $cardview-fluent-column-chooser--empty__message-horizontal-padding: 16px !default; - $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 12px !default; + $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-160 !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-120 !default; } $cardview-border-radius: $cardview-fluent-common-border-radius !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss index 6c67c9c17d67..fe6cb51c18bd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss @@ -5,48 +5,49 @@ @use "../typography/sizes" as *; @use "../popup/sizes" as *; @use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$chat-border-radius: $base-border-radius * 3 !default; +$chat-border-radius: calc(#{$base-border-radius} * 3) !default; $chat-bubble-border-radius: null !default; $chat-bubble-padding: null !default; -$chat-bubble-container-gap: 4px !default; +$chat-bubble-container-gap: ds.$spacing-40 !default; $chat-bubble-delete-gap: null !default; $chat-bubble-delete-icon-size: null !default; $chat-messagebox-padding: null !default; $chat-messagebox-textarea-padding: null !default; $chat-messagebox-textarea-border-radius: null !default; $chat-messagebox-toolbar-min-height: null !default; -$chat-messagebox-gap: 8px !default; -$chat-messagebox-files-container-padding: 3px !default; -$chat-messagebox-files-container-padding-top: 2px !default; +$chat-messagebox-gap: ds.$spacing-80 !default; +$chat-messagebox-files-container-padding: ds.$spacing-30 !default; +$chat-messagebox-files-container-padding-top: ds.$spacing-20 !default; $chat-messagelist-padding: null !default; -$chat-messagegroup-gap: 4px !default; +$chat-messagegroup-gap: ds.$spacing-40 !default; $chat-messagegroup-padding: null !default; -$chat-information-gap: 8px !default; -$chat-avatar-size: 32px !default; +$chat-information-gap: ds.$spacing-80 !default; +$chat-avatar-size: ds.$spacing-320 !default; $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default; -$chat-messagegroup-alignment-start-gap: 12px !default; -$chat-information-font-size: 12px !default; -$chat-information-icon-size: 12px !default; -$chat-information-edited-gap: 2px !default; +$chat-messagegroup-alignment-start-gap: ds.$spacing-120 !default; +$chat-information-font-size: ds.$font-size-120 !default; +$chat-information-icon-size: ds.$spacing-120 !default; +$chat-information-edited-gap: ds.$spacing-20 !default; $chat-alerts-padding-block: null !default; -$chat-alerts-padding-inline: 8px !default; +$chat-alerts-padding-inline: ds.$spacing-80 !default; $chat-alerts-row-gap: null !default; $chat-alert-padding-block: null !default; $chat-suggestions-padding: null !default; $chat-suggestions-border-width: $fluent-base-border-width !default; $chat-suggestions-button-border-radius: $button-border-radius !default; -$chat-suggestions-button-max-width: 200px !default; -$chat-suggestions-gap: 12px !default; +$chat-suggestions-button-max-width: 200px !default; // dx-offscale: 200px +$chat-suggestions-gap: ds.$spacing-120 !default; $chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default; $chat-message-editing-preview-content-row-gap: null !default; $chat-message-editing-preview-content-padding-inline: null !default; -$chat-message-editing-preview-border-width: 3px !default; +$chat-message-editing-preview-border-width: ds.$border-width-30 !default; $chat-messagelist-empty-icon-box-size: null !default; $chat-messagelist-empty-icon-size: null !default; @@ -54,9 +55,9 @@ $chat-messagelist-empty-icon-margin-bottom: null !default; $chat-messagelist-empty-row-gap: null !default; $chat-messagelist-empty-message-font-size: null !default; $chat-messagelist-empty-prompt-font-size: null !default; -$chat-messagelist-day-header-padding-bottom: 12px !default; -$chat-messagelist-day-header-first-padding-top: 20px !default; -$chat-messagelist-day-header-font-size: 12px !default; +$chat-messagelist-day-header-padding-bottom: ds.$spacing-120 !default; +$chat-messagelist-day-header-first-padding-top: ds.$spacing-200 !default; +$chat-messagelist-day-header-font-size: ds.$font-size-120 !default; $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default; $chat-typingindicator-padding: null !default; @@ -65,7 +66,7 @@ $chat-typingindicator-font-size: $chat-information-font-size !default; $chat-typingindicator-bubble-padding-block: null !default; $chat-typingindicator-bubble-padding-inline: null !default; $chat-typingindicator-bubble-border-radius: null !default; -$chat-typingindicator-bubble-column-gap: 4px !default; +$chat-typingindicator-bubble-column-gap: ds.$spacing-40 !default; $chat-typingindicator-circle-size: null !default; $chat-typingindicator-circle-size-center: null !default; $chat-typingindicator-circle-border-radius: 999em !default; @@ -76,92 +77,92 @@ $chat-confirmation-popup-toolbar-padding-inline: $fluent-popup-content-withtitle $chat-confirmation-popup-toolbar-gap: null !default; $chat-file-container-width: 17.14em !default; -$chat-file-container-padding: 7px 8px !default; +$chat-file-container-padding: ds.$spacing-70 ds.$spacing-80 !default; $chat-file-container-border-radius: $fluent-base-border-radius !default; $chat-file-button-size: $fluent-button-height !default; -$chat-file-secondary-font-size: 10px !default; -$chat-file-base-section-gap: 4px !default; +$chat-file-secondary-font-size: ds.$font-size-100 !default; +$chat-file-base-section-gap: ds.$spacing-40 !default; $chat-file-size-max-width: 4em !default; $chat-file-icon-font-size: null !default; -$chat-file-view-items-gap: 8px !default; -$chat-bubble-gap: 8px !default; +$chat-file-view-items-gap: ds.$spacing-80 !default; +$chat-bubble-gap: ds.$spacing-80 !default; @if $size == "default" { - $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default; - $chat-bubble-padding: 8px 12px !default; - $chat-bubble-delete-gap: 4px !default; - $chat-bubble-delete-icon-size: 20px !default; - $chat-messagebox-padding: 20px !default; - $chat-messagebox-textarea-border-radius: 8px !default; - $chat-messagebox-textarea-padding: 12px !default; - $chat-messagebox-toolbar-min-height: 32px !default; - $chat-messagelist-padding: 20px !default; - $chat-messagegroup-padding: 24px !default; - - $chat-alerts-padding-block: 12px !default; - $chat-alerts-row-gap: 2px !default; - $chat-alert-padding-block: 6px !default; - - $chat-suggestions-padding: 20px !default; - - $chat-message-editing-preview-content-padding-inline: 12px !default; - $chat-message-editing-preview-content-row-gap: 4px !default; - - $chat-messagelist-empty-icon-box-size: 64px !default; - $chat-messagelist-empty-icon-size: 40px !default; - $chat-messagelist-empty-icon-margin-bottom: 12px !default; - $chat-messagelist-empty-row-gap: 4px !default; - $chat-messagelist-empty-message-font-size: 18px !default; - $chat-messagelist-empty-prompt-font-size: 14px !default; + $chat-bubble-border-radius: calc(#{$fluent-base-border-radius} * 3) !default; + $chat-bubble-padding: ds.$spacing-80 ds.$spacing-120 !default; + $chat-bubble-delete-gap: ds.$spacing-40 !default; + $chat-bubble-delete-icon-size: ds.$spacing-200 !default; + $chat-messagebox-padding: ds.$spacing-200 !default; + $chat-messagebox-textarea-border-radius: ds.$border-radius-80 !default; + $chat-messagebox-textarea-padding: ds.$spacing-120 !default; + $chat-messagebox-toolbar-min-height: ds.$spacing-320 !default; + $chat-messagelist-padding: ds.$spacing-200 !default; + $chat-messagegroup-padding: ds.$spacing-240 !default; + + $chat-alerts-padding-block: ds.$spacing-120 !default; + $chat-alerts-row-gap: ds.$spacing-20 !default; + $chat-alert-padding-block: ds.$spacing-60 !default; + + $chat-suggestions-padding: ds.$spacing-200 !default; + + $chat-message-editing-preview-content-padding-inline: ds.$spacing-120 !default; + $chat-message-editing-preview-content-row-gap: ds.$spacing-40 !default; + + $chat-messagelist-empty-icon-box-size: ds.$spacing-640 !default; + $chat-messagelist-empty-icon-size: ds.$spacing-400 !default; + $chat-messagelist-empty-icon-margin-bottom: ds.$spacing-120 !default; + $chat-messagelist-empty-row-gap: ds.$spacing-40 !default; + $chat-messagelist-empty-message-font-size: ds.$font-size-180 !default; + $chat-messagelist-empty-prompt-font-size: ds.$font-size-140 !default; $chat-typingindicator-circle-size: math.div(8, 14) * 1em !default; $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default; - $chat-typingindicator-bubble-padding-block: 12px !default; - $chat-typingindicator-bubble-padding-inline: 20px !default; + $chat-typingindicator-bubble-padding-block: ds.$spacing-120 !default; + $chat-typingindicator-bubble-padding-inline: ds.$spacing-200 !default; $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; - $chat-confirmation-popup-toolbar-gap: 8px !default; + $chat-confirmation-popup-toolbar-gap: ds.$spacing-80 !default; - $chat-file-icon-font-size: 20px !default; + $chat-file-icon-font-size: ds.$font-size-200 !default; } @else if $size == "compact" { - $chat-bubble-border-radius: $fluent-base-border-radius * 2 !default; - $chat-bubble-padding: 6px 8px !default; - $chat-bubble-delete-gap: 2px !default; - $chat-bubble-delete-icon-size: 16px !default; - $chat-messagebox-padding: 16px !default; - $chat-messagebox-textarea-border-radius: 8px !default; - $chat-messagebox-textarea-padding: 8px !default; - $chat-messagebox-toolbar-min-height: 24px !default; - $chat-messagelist-padding: 16px !default; - $chat-messagegroup-padding: 12px !default; - - $chat-alerts-padding-block: 8px !default; - $chat-alerts-row-gap: 2px !default; - $chat-alert-padding-block: 5px !default; - - $chat-suggestions-padding: 16px !default; - - $chat-message-editing-preview-content-padding-inline: 8px !default; - $chat-message-editing-preview-content-row-gap: 2px !default; - - $chat-messagelist-empty-icon-box-size: 48px !default; - $chat-messagelist-empty-icon-size: 32px !default; - $chat-messagelist-empty-icon-margin-bottom: 14px !default; - $chat-messagelist-empty-row-gap: 2px !default; - $chat-messagelist-empty-message-font-size: 14px !default; - $chat-messagelist-empty-prompt-font-size: 12px !default; + $chat-bubble-border-radius: calc(#{$fluent-base-border-radius} * 2) !default; + $chat-bubble-padding: ds.$spacing-60 ds.$spacing-80 !default; + $chat-bubble-delete-gap: ds.$spacing-20 !default; + $chat-bubble-delete-icon-size: ds.$spacing-160 !default; + $chat-messagebox-padding: ds.$spacing-160 !default; + $chat-messagebox-textarea-border-radius: ds.$border-radius-80 !default; + $chat-messagebox-textarea-padding: ds.$spacing-80 !default; + $chat-messagebox-toolbar-min-height: ds.$spacing-240 !default; + $chat-messagelist-padding: ds.$spacing-160 !default; + $chat-messagegroup-padding: ds.$spacing-120 !default; + + $chat-alerts-padding-block: ds.$spacing-80 !default; + $chat-alerts-row-gap: ds.$spacing-20 !default; + $chat-alert-padding-block: ds.$spacing-50 !default; + + $chat-suggestions-padding: ds.$spacing-160 !default; + + $chat-message-editing-preview-content-padding-inline: ds.$spacing-80 !default; + $chat-message-editing-preview-content-row-gap: ds.$spacing-20 !default; + + $chat-messagelist-empty-icon-box-size: ds.$spacing-480 !default; + $chat-messagelist-empty-icon-size: ds.$spacing-320 !default; + $chat-messagelist-empty-icon-margin-bottom: ds.$spacing-140 !default; + $chat-messagelist-empty-row-gap: ds.$spacing-20 !default; + $chat-messagelist-empty-message-font-size: ds.$font-size-140 !default; + $chat-messagelist-empty-prompt-font-size: ds.$font-size-120 !default; $chat-typingindicator-circle-size: math.div(8, 12) * 1em !default; $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default; - $chat-typingindicator-bubble-padding-block: 8px !default; - $chat-typingindicator-bubble-padding-inline: 12px !default; + $chat-typingindicator-bubble-padding-block: ds.$spacing-80 !default; + $chat-typingindicator-bubble-padding-inline: ds.$spacing-120 !default; $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; - $chat-confirmation-popup-toolbar-gap: 4px !default; + $chat-confirmation-popup-toolbar-gap: ds.$spacing-40 !default; - $chat-file-icon-font-size: 16px !default; + $chat-file-icon-font-size: ds.$font-size-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss index a2db48620746..3b721cb964c3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss @@ -1,28 +1,29 @@ @use "../sizes" as *; @use "colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-checkbox-icon-font-size: 16px !default; +$fluent-checkbox-icon-font-size: ds.$font-size-160 !default; -$fluent-checkbox-border-width: 1px !default; -$fluent-checkbox-icon-border-radius: 2px !default; +$fluent-checkbox-border-width: ds.$border-width-10 !default; +$fluent-checkbox-icon-border-radius: ds.$border-radius-20 !default; $fluent-checkbox-arrow-icon-size: 1em !default; $fluent-checkbox-arrow-font-size: 0.75em !default; $fluent-checkbox-indeterminate-icon-height: 0.5em !default; $fluent-checkbox-indeterminate-icon-width: 0.5em !default; -$fluent-checkbox-indeterminate-icon-border-radius: 2px !default; +$fluent-checkbox-indeterminate-icon-border-radius: ds.$border-radius-20 !default; $fluent-checkbox-text-padding-start: null !default; $fluent-checkbox-text-padding-end: null !default; @if $size == "default" { - $fluent-checkbox-text-padding-start: 12px !default; - $fluent-checkbox-text-padding-end: 8px !default; + $fluent-checkbox-text-padding-start: ds.$spacing-120 !default; + $fluent-checkbox-text-padding-end: ds.$spacing-80 !default; } @else if $size == "compact" { - $fluent-checkbox-text-padding-start: 8px !default; - $fluent-checkbox-text-padding-end: 6px !default; + $fluent-checkbox-text-padding-start: ds.$spacing-80 !default; + $fluent-checkbox-text-padding-end: ds.$spacing-60 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss index c05c87b553f8..b2abdea4a06f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss @@ -21,7 +21,7 @@ } &::after { - left: $fluent-colorbox-preview-padding + 1; + left: calc(#{$fluent-colorbox-preview-padding} + 1px); } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss index 9882bab17d9d..51118b98f62a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-colorbox-preview-padding: null !default; $fluent-colorbox-preview-icon-size: $fluent-base-icon-size !default; @if $size == "default" { - $fluent-colorbox-overlay-padding: 20px !default; - $fluent-colorbox-preview-padding: 12px !default; + $fluent-colorbox-overlay-padding: ds.$spacing-200 !default; + $fluent-colorbox-preview-padding: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-colorbox-overlay-padding: 16px !default; - $fluent-colorbox-preview-padding: 8px !default; + $fluent-colorbox-overlay-padding: ds.$spacing-160 !default; + $fluent-colorbox-preview-padding: ds.$spacing-80 !default; } -$fluent-colorbox-preview-width: $fluent-colorbox-preview-padding * 2 + $fluent-colorbox-preview-icon-size !default; +$fluent-colorbox-preview-width: calc(#{$fluent-colorbox-preview-padding} * 2 + #{$fluent-colorbox-preview-icon-size}) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss index 6b27cf1809ca..f86789588da6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss @@ -1,22 +1,23 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-colorview-container-width: 450px !default; -$fluent-colorview-palette-width: 288px !default; -$fluent-colorview-palette-height: 299px !default; -$fluent-colorview-alpha-margin: 10px !default; -$fluent-colorview-hue-scale-width: 18px !default; -$fluent-colorview-hue-scale-margin: 19px !default; -$fluent-colorview-color-preview-height: 40px !default; -$fluent-colorview-preview-container-margin: 34px !default; +$fluent-colorview-container-width: 450px !default; // dx-offscale: 450px +$fluent-colorview-palette-width: 288px !default; // dx-offscale: 288px +$fluent-colorview-palette-height: 299px !default; // dx-offscale: 299px +$fluent-colorview-alpha-margin: ds.$spacing-100 !default; +$fluent-colorview-hue-scale-width: ds.$spacing-180 !default; +$fluent-colorview-hue-scale-margin: ds.$spacing-190 !default; +$fluent-colorview-color-preview-height: ds.$spacing-400 !default; +$fluent-colorview-preview-container-margin: ds.$spacing-340 !default; $fluent-colorview-container-line-height: normal !default; -$fluent-colorview-container-hex-margin: 20px 0 0 0 !default; -$fluent-colorview-container-alpha-label-width: 115px !default; -$fluent-colorview-container-alpha-label-margin: 43px !default; -$fluent-colorview-container-textbox-width: 69px !default; -$fluent-colorview-container-textbox-margin: 0 0 0 10px !default; +$fluent-colorview-container-hex-margin: ds.$spacing-200 0 0 0 !default; +$fluent-colorview-container-alpha-label-width: 115px !default; // dx-offscale: 115px +$fluent-colorview-container-alpha-label-margin: 43px !default; // dx-offscale: 43px +$fluent-colorview-container-textbox-width: 69px !default; // dx-offscale: 69px +$fluent-colorview-container-textbox-margin: 0 0 0 ds.$spacing-100 !default; -$fluent-colorview-controls-container-width: 90px !default; -$fluent-colorview-controls-container-margin: 27px !default; +$fluent-colorview-controls-container-width: 90px !default; // dx-offscale: 90px +$fluent-colorview-controls-container-margin: 27px !default; // dx-offscale: 27px diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss index ddb3ad0d8a7e..a274409de03a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss @@ -28,10 +28,10 @@ $badge-invalid-bg: $common-invalid-color; justify-content: center; align-items: center; top: 50%; - margin-top: math.div(-$fluent-invalid-badge-size, 2); + margin-top: calc(#{$fluent-invalid-badge-size} / -2); width: $fluent-invalid-badge-size; height: $fluent-invalid-badge-size; - line-height: $fluent-invalid-badge-size + 1; + line-height: calc(#{$fluent-invalid-badge-size} + 1px); font-size: $fluent-base-font-size; } @@ -88,7 +88,7 @@ $badge-invalid-bg: $common-invalid-color; .dx-list-select-all { margin-inline: $fluent-list-item-margin-inline; - padding: $fluent-list-item-vertical-padding + 2px 0 $fluent-list-item-vertical-padding - 2px; + padding: calc(#{$fluent-list-item-vertical-padding} + 2px) 0 calc(#{$fluent-list-item-vertical-padding} - 2px); } .dx-list-items { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss index ca2a3c4ef064..b48402fcaec2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss @@ -1,31 +1,30 @@ @use "sass:math"; @use "../sizes" as *; @use "./colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-line-height: null !default; -$fluent-inline-borderedwidget-inner-size: - $fluent-base-inline-widget-height - - $fluent-base-border-width * 2 !default; +$fluent-inline-borderedwidget-inner-size: calc(#{$fluent-base-inline-widget-height} - #{$fluent-base-border-width} * 2) !default; -$fluent-invalid-badge-size: $fluent-base-icon-size - 2px !default; -$fluent-invalid-badge-horizontal-padding: math.div($fluent-inline-borderedwidget-inner-size - $fluent-invalid-badge-size, 2) !default; -$fluent-invalid-badge-halfhorizontal-padding: math.div($fluent-invalid-badge-horizontal-padding, 2) !default; +$fluent-invalid-badge-size: calc(#{$fluent-base-icon-size} - #{ds.$spacing-20}) !default; +$fluent-invalid-badge-horizontal-padding: calc((#{$fluent-inline-borderedwidget-inner-size} - #{$fluent-invalid-badge-size}) / 2) !default; +$fluent-invalid-badge-halfhorizontal-padding: calc((#{$fluent-invalid-badge-horizontal-padding}) / 2) !default; -$fluent-valid-badge-font-size: $fluent-base-font-size + 6px !default; +$fluent-valid-badge-font-size: calc(#{$fluent-base-font-size} + 6px) !default; $fluent-base-dropdown-widgets-shadow: null !default; @if $size == "default" { $fluent-line-height: 1.428571 !default; - $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 8px 16px 0 $base-dropdown-shadow-color2 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1, 0 ds.$spacing-80 ds.$spacing-160 0 $base-dropdown-shadow-color2 !default; } @else if $size == "compact" { $fluent-line-height: 1.3333 !default; - $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 4px 8px 0 $base-dropdown-shadow-color2 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1, 0 ds.$spacing-40 ds.$spacing-80 0 $base-dropdown-shadow-color2 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss index adc7edfb85ac..456b22020538 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss @@ -1,21 +1,22 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-context-menu-horizontal-padding: null !default; $fluent-context-menu-border-radius: $base-border-radius !default; -$fluent-context-menu-items-container-padding: 4px !default; -$fluent-context-menu-items-container-gap: 2px !default; +$fluent-context-menu-items-container-padding: ds.$spacing-40 !default; +$fluent-context-menu-items-container-gap: ds.$spacing-20 !default; $fluent-context-menu-item-border-radius: $base-border-radius !default; $fluent-context-menu-item-content-gap: null !default; -$fluent-context-menu-item-text-padding-inline: 2px !default; +$fluent-context-menu-item-text-padding-inline: ds.$spacing-20 !default; @if $size == "default" { - $fluent-context-menu-horizontal-padding: 6px !default; - $fluent-context-menu-item-content-gap: 6px !default; + $fluent-context-menu-horizontal-padding: ds.$spacing-60 !default; + $fluent-context-menu-item-content-gap: ds.$spacing-60 !default; } @else if $size == "compact" { - $fluent-context-menu-horizontal-padding: 4px !default; - $fluent-context-menu-item-content-gap: 4px !default; + $fluent-context-menu-horizontal-padding: ds.$spacing-40 !default; + $fluent-context-menu-item-content-gap: ds.$spacing-40 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss index 97f30a62ec83..76cff4a82cd0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss @@ -1,22 +1,23 @@ @use "../sizes" as *; @use '../../base/dataGrid/variables' as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-datagrid-cell-padding: 7px !default; -$fluent-datagrid-grouppanel-item-font-weight: 400 !default; +$fluent-datagrid-cell-padding: ds.$spacing-70 !default; +$fluent-datagrid-grouppanel-item-font-weight: ds.$font-weight-400 !default; $area-field-border-radius: null !default; $area-field-top-bottom-padding: null !default; @if $size == "default" { - $area-field-border-radius: 6px !default; - $area-field-top-bottom-padding: 5px !default; + $area-field-border-radius: ds.$border-radius-60 !default; + $area-field-top-bottom-padding: ds.$spacing-50 !default; } @else if $size == "compact" { - $area-field-border-radius: 4px !default; - $area-field-top-bottom-padding: 2px !default; + $area-field-border-radius: ds.$border-radius-40 !default; + $area-field-top-bottom-padding: ds.$spacing-20 !default; } $datagrid-cell-padding: $fluent-datagrid-cell-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss index 9190ee007c1c..683da8d7b734 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss @@ -1,7 +1,8 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-datebox-overlay-item-margin: 16px !default; -$fluent-datebox-overlay-item-margin-adaptive: 18px !default; -$fluent-datebox-popup-content-margin: 0 34px !default; +$fluent-datebox-overlay-item-margin: ds.$spacing-160 !default; +$fluent-datebox-overlay-item-margin-adaptive: ds.$spacing-180 !default; +$fluent-datebox-popup-content-margin: 0 ds.$spacing-340 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss index 492b886d1e57..5558c920c127 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss @@ -1,13 +1,14 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-daterangebox-active-bar-horizontal-margin: null !default; @if $size == "default" { - $fluent-daterangebox-active-bar-horizontal-margin: 12px !default; + $fluent-daterangebox-active-bar-horizontal-margin: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-daterangebox-active-bar-horizontal-margin: 8px !default; + $fluent-daterangebox-active-bar-horizontal-margin: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss index b1814e4bcc55..5e81ec4d9cb4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss @@ -9,7 +9,7 @@ // adduse @use "../scrollable"; -$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2); +$fluent-dateview-roller-padding: calc((#{$fluent-dateview-roller-height} - #{$fluent-dateview-roller-item-height}) / 2); .dx-dateview-rollers { width: auto; @@ -109,7 +109,7 @@ $fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $flue } &::before { - top: -$fluent-dateview-roller-padding; + top: calc(-1 * #{$fluent-dateview-roller-padding}); @include gradient-linear($dateview-shadow-up); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss index 909a1dc86e73..aadd671635b4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-dateview-roller-height: 182px !default; -$fluent-dateview-roller-item-height: 40px !default; +$fluent-dateview-roller-height: 182px !default; // dx-offscale: 182px +$fluent-dateview-roller-item-height: ds.$spacing-400 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss index 242168a9d73a..2e23b9025dfb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -332,7 +332,7 @@ $diagram-toolbox-title-size: 18px; padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing; .dx-toolbar-item { - margin-bottom: math.div($diagram-properties-panel-spacing, 2); + margin-bottom: calc((#{$diagram-properties-panel-spacing}) / 2); .dx-button { height: auto; @@ -460,7 +460,7 @@ $diagram-toolbox-title-size: 18px; .dx-menu-separator { width: 1px; - height: $fluent-diagram-toolbar-icon-size + $diagram-touchbar-item-padding + $diagram-touchbar-item-padding + 2; + height: calc(#{$fluent-diagram-toolbar-icon-size} + #{$diagram-touchbar-item-padding} + #{$diagram-touchbar-item-padding} + 2px); margin: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss index 71d596b7f77c..b9c97482d134 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -21,54 +22,54 @@ $diagram-small-editor-width: null !default; $diagram-medium-editor-width: null !default; $diagram-large-editor-width: null !default; -$diagram-toolbox-input-margin: 2px !default; +$diagram-toolbox-input-margin: ds.$spacing-20 !default; @if $size == "default" { - $diagram-toolbox-width: 156px !default; - $diagram-toolbox-h-padding: 12px !default; - $diagram-toolbox-accordion-v-padding: 8px !default; - $diagram-toolbox-input-h-padding: 9px !default; - $diagram-toolbox-input-v-padding: 12px !default; - $diagram-toolbox-input-image-size: 18px !default; - $diagram-toolbox-input-image-padding: 6px 4px !default; - $diagram-toolbox-mobile-padding: 68px !default; + $diagram-toolbox-width: 156px !default; // dx-offscale: 156px + $diagram-toolbox-h-padding: ds.$spacing-120 !default; + $diagram-toolbox-accordion-v-padding: ds.$spacing-80 !default; + $diagram-toolbox-input-h-padding: ds.$spacing-90 !default; + $diagram-toolbox-input-v-padding: ds.$spacing-120 !default; + $diagram-toolbox-input-image-size: ds.$spacing-180 !default; + $diagram-toolbox-input-image-padding: ds.$spacing-60 ds.$spacing-40 !default; + $diagram-toolbox-mobile-padding: 68px !default; // dx-offscale: 68px $diagram-properties-panel-padding: 0 !default; - $diagram-properties-panel-spacing: 16px !default; - $diagram-properties-layout-icon-size: 64px !default; + $diagram-properties-panel-spacing: ds.$spacing-160 !default; + $diagram-properties-layout-icon-size: ds.$spacing-640 !default; - $diagram-touchbar-item-padding: 10px !default; + $diagram-touchbar-item-padding: ds.$spacing-100 !default; - $diagram-floating-toolbar-items-height: 36px !default; - $diagram-floating-toolbar-editor-padding: 8px 6px !default; - $diagram-floating-toolbar-editor-button-padding: 4px !default; + $diagram-floating-toolbar-items-height: ds.$spacing-360 !default; + $diagram-floating-toolbar-editor-padding: ds.$spacing-80 ds.$spacing-60 !default; + $diagram-floating-toolbar-editor-button-padding: ds.$spacing-40 !default; - $diagram-small-editor-width: 100px !default; - $diagram-medium-editor-width: 180px !default; - $diagram-large-editor-width: 280px !default; + $diagram-small-editor-width: ds.$spacing-1000 !default; + $diagram-medium-editor-width: 180px !default; // dx-offscale: 180px + $diagram-large-editor-width: 280px !default; // dx-offscale: 280px } @else if $size == "compact" { - $diagram-toolbox-width: 130px !default; - $diagram-toolbox-h-padding: 10px !default; - $diagram-toolbox-accordion-v-padding: 6px !default; - $diagram-toolbox-input-h-padding: 8px !default; - $diagram-toolbox-input-v-padding: 8px !default; - $diagram-toolbox-input-image-size: 14px !default; - $diagram-toolbox-input-image-padding: 3px 4px !default; - $diagram-toolbox-mobile-padding: 58px !default; + $diagram-toolbox-width: 130px !default; // dx-offscale: 130px + $diagram-toolbox-h-padding: ds.$spacing-100 !default; + $diagram-toolbox-accordion-v-padding: ds.$spacing-60 !default; + $diagram-toolbox-input-h-padding: ds.$spacing-80 !default; + $diagram-toolbox-input-v-padding: ds.$spacing-80 !default; + $diagram-toolbox-input-image-size: ds.$spacing-140 !default; + $diagram-toolbox-input-image-padding: ds.$spacing-30 ds.$spacing-40 !default; + $diagram-toolbox-mobile-padding: 58px !default; // dx-offscale: 58px - $diagram-properties-panel-padding: 6px !default; - $diagram-properties-panel-spacing: 8px !default; - $diagram-properties-layout-icon-size: 48px !default; + $diagram-properties-panel-padding: ds.$spacing-60 !default; + $diagram-properties-panel-spacing: ds.$spacing-80 !default; + $diagram-properties-layout-icon-size: ds.$spacing-480 !default; - $diagram-touchbar-item-padding: 7px !default; + $diagram-touchbar-item-padding: ds.$spacing-70 !default; - $diagram-floating-toolbar-items-height: 28px !default; - $diagram-floating-toolbar-editor-padding: 6px 4px !default; - $diagram-floating-toolbar-editor-button-padding: 2px !default; + $diagram-floating-toolbar-items-height: ds.$spacing-280 !default; + $diagram-floating-toolbar-editor-padding: ds.$spacing-60 ds.$spacing-40 !default; + $diagram-floating-toolbar-editor-button-padding: ds.$spacing-20 !default; - $diagram-small-editor-width: 80px !default; - $diagram-medium-editor-width: 120px !default; - $diagram-large-editor-width: 220px !default; + $diagram-small-editor-width: ds.$spacing-800 !default; + $diagram-medium-editor-width: ds.$spacing-1200 !default; + $diagram-large-editor-width: 220px !default; // dx-offscale: 220px } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss index 3f1f76b37cd8..f126691f1584 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-dropdownbutton-icon-spindown-size: null !default; $fluent-dropdownbutton-icon-spindown-right-size: null !default; @if $size == "default" { - $fluent-dropdownbutton-action-horizontal-padding: 12px !default; - $fluent-dropdownbutton-icon-spindown-size: 24px; - $fluent-dropdownbutton-icon-spindown-right-size: 16px !default; + $fluent-dropdownbutton-action-horizontal-padding: ds.$spacing-120 !default; + $fluent-dropdownbutton-icon-spindown-size: ds.$spacing-240; + $fluent-dropdownbutton-icon-spindown-right-size: ds.$spacing-160 !default; } @else if $size == "compact" { - $fluent-dropdownbutton-action-horizontal-padding: 8px !default; - $fluent-dropdownbutton-icon-spindown-size: 18px; - $fluent-dropdownbutton-icon-spindown-right-size: 12px !default; + $fluent-dropdownbutton-action-horizontal-padding: ds.$spacing-80 !default; + $fluent-dropdownbutton-icon-spindown-size: ds.$spacing-180; + $fluent-dropdownbutton-icon-spindown-right-size: ds.$spacing-120 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss index 9a8a703a5d7b..e55fa8066fe0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss @@ -14,15 +14,11 @@ $fluent-dropdowneditor-container-button-size: $fluent-base-icon-size; -$fluent-dropdowneditor-invalid-badge-offset: - $fluent-dropdowneditor-container-button-size + - $fluent-invalid-badge-halfhorizontal-padding; +$fluent-dropdowneditor-invalid-badge-offset: calc(#{$fluent-dropdowneditor-container-button-size} + #{$fluent-invalid-badge-halfhorizontal-padding}); -$fluent-dropdowneditor-invalid-badge-with-clear-offset: - $fluent-dropdowneditor-container-button-size * 2 + - $fluent-invalid-badge-halfhorizontal-padding; +$fluent-dropdowneditor-invalid-badge-with-clear-offset: calc(#{$fluent-dropdowneditor-container-button-size} * 2 + #{$fluent-invalid-badge-halfhorizontal-padding}); -$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding; +$fluent-dropdowneditor-invalid-badge-size: calc(#{$fluent-invalid-badge-size} + #{$fluent-invalid-badge-horizontal-padding}); @mixin dx-dropdowneditor-button-icon() { width: $fluent-dropdowneditor-container-button-size; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss index 6de961b10942..a3966a740674 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,11 +8,11 @@ $fluent-dropdowneditor-list-line-height: null !default; @if $size == "default" { - $fluent-dropdowneditor-list-font-size: 14px !default; - $fluent-dropdowneditor-list-line-height: 20px !default; + $fluent-dropdowneditor-list-font-size: ds.$font-size-140 !default; + $fluent-dropdowneditor-list-line-height: ds.$line-height-200 !default; } @else if $size == "compact" { - $fluent-dropdowneditor-list-font-size: 13px !default; - $fluent-dropdowneditor-list-line-height: 16px !default; + $fluent-dropdowneditor-list-font-size: ds.$spacing-130 !default; + $fluent-dropdowneditor-list-line-height: ds.$line-height-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss index e3b9ae305c11..05cf7fe0b600 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-dropdownmenu-section-horizontal-margin: 4px !default; -$fluent-dropdownmenu-section-row-gap: 2px !default; +$fluent-dropdownmenu-section-horizontal-margin: ds.$spacing-40 !default; +$fluent-dropdownmenu-section-row-gap: ds.$spacing-20 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss index 3d0f93acee27..02224f4f66ae 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss @@ -49,7 +49,7 @@ @mixin dx-field-value-widget-position($name, $size) { &.#{$name}, &:not(.dx-widget) > .#{$name} { - margin: math.div($fluent-field-min-height - $size, 2) 0; + margin: calc((#{$fluent-field-min-height} - #{$size}) / 2) 0; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss index 92be9dc5e04d..ea7eee1f306f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; @use "../common/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,24 +11,24 @@ $fluent-field-vertical-margin: null !default; $fluent-field-labelvalue-spacing: null !default; @if $size == "default" { - $fluent-fieldset-vertical-margin: 30px !default; - $fluent-fieldset-horizontal-margin: 20px !default; - $fluent-fieldset-header-vertical-margin: 20px !default; - $fluent-field-vertical-margin: 30px !default; - $fluent-field-labelvalue-spacing: 15px !default; + $fluent-fieldset-vertical-margin: ds.$spacing-300 !default; + $fluent-fieldset-horizontal-margin: ds.$spacing-200 !default; + $fluent-fieldset-header-vertical-margin: ds.$spacing-200 !default; + $fluent-field-vertical-margin: ds.$spacing-300 !default; + $fluent-field-labelvalue-spacing: ds.$spacing-150 !default; } @else if $size == "compact" { - $fluent-fieldset-vertical-margin: 20px !default; - $fluent-fieldset-horizontal-margin: 16px !default; - $fluent-fieldset-header-vertical-margin: 16px !default; - $fluent-field-vertical-margin: 20px !default; - $fluent-field-labelvalue-spacing: 12px !default; + $fluent-fieldset-vertical-margin: ds.$spacing-200 !default; + $fluent-fieldset-horizontal-margin: ds.$spacing-160 !default; + $fluent-fieldset-header-vertical-margin: ds.$spacing-160 !default; + $fluent-field-vertical-margin: ds.$spacing-200 !default; + $fluent-field-labelvalue-spacing: ds.$spacing-120 !default; } $fluent-field-min-height: $fluent-base-inline-widget-height !default; -$fluent-field-value-top-padding: 21px !default; +$fluent-field-value-top-padding: ds.$spacing-210 !default; $fluent-field-value-horizontal-padding: $fluent-base-inline-horizontal-padding !default; -$fluent-field-value-bottom-padding: 20px !default; -$fluent-fieldset-attention-icon-offset: $fluent-base-inline-horizontal-padding + $fluent-invalid-badge-size !default; -$fluent-radiogroup-min-height: 26px !default; +$fluent-field-value-bottom-padding: ds.$spacing-200 !default; +$fluent-fieldset-attention-icon-offset: calc(#{$fluent-base-inline-horizontal-padding} + #{$fluent-invalid-badge-size}) !default; +$fluent-radiogroup-min-height: ds.$spacing-260 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss index cee27095492b..bf4740d8f351 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss @@ -31,9 +31,9 @@ } .dx-filemanager-progress-box-image { - width: $fluent-base-icon-size * 2; - height: $fluent-base-icon-size * 2; - font-size: $fluent-base-icon-size * 2; + width: calc(#{$fluent-base-icon-size} * 2); + height: calc(#{$fluent-base-icon-size} * 2); + font-size: calc(#{$fluent-base-icon-size} * 2); } .dx-filemanager-progress-box-error { @@ -155,9 +155,9 @@ } .dx-filemanager-thumbnails-item-thumbnail { - width: $fluent-base-icon-size * 2; - height: $fluent-base-icon-size * 2; - font-size: $fluent-base-icon-size * 2; + width: calc(#{$fluent-base-icon-size} * 2); + height: calc(#{$fluent-base-icon-size} * 2); + font-size: calc(#{$fluent-base-icon-size} * 2); } .dx-filemanager-item-custom-thumbnail { @@ -230,10 +230,10 @@ } .dx-filemanager-view-switcher-popup { - width: 2 * $filemanager-toolbar-viewmode-padding + $fluent-base-icon-size; + width: calc(2 * #{$filemanager-toolbar-viewmode-padding} + #{$fluent-base-icon-size}); .dx-dropdownbutton-popup-wrapper.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { - padding-left: $filemanager-toolbar-viewmode-padding - 1px; + padding-left: calc(#{$filemanager-toolbar-viewmode-padding} - 1px); padding-right: $filemanager-toolbar-viewmode-padding; text-overflow: clip; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss index 201671360267..fcc67ed7331f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss @@ -2,6 +2,7 @@ // adduse @use "../toolbar/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; $filemanager-toolbar-separator-height: null !default; $filemanager-toolbar-viewmode-width: null !default; @@ -20,34 +21,34 @@ $filemanager-progress-box-button-close-margin-top: null !default; $filemanager-toolbar-height: $fluent-toolbar-height; @if $size == "default" { - $filemanager-toolbar-separator-height: 36px !default; - $filemanager-toolbar-viewmode-width: 190px !default; - $filemanager-toolbar-viewmode-padding: 6px !default; - $filemanager-breadcrumbs-item-padding-top: 7px !default; - $filemanager-breadcrumbs-item-padding-bottom: 8px !default; - $filemanager-details-view-checkbox-column-width: 49px !default; - $filemanager-file-actions-button-size: 28px !default; - $filemanager-treeview-item-top-bottom-padding: 11px !default; - $filemanager-file-actions-button-top-bottom-padding: 2px !default; - $filemanager-contextmenu-text-item-left-margin: 48px !default; - $filemanager-large-icon-size: 22px !default; - $filemanager-progress-panel-title-padding: 16px !default; - $filemanager-progress-box-button-close-margin-top: 6px !default; + $filemanager-toolbar-separator-height: ds.$spacing-360 !default; + $filemanager-toolbar-viewmode-width: 190px !default; // dx-offscale: 190px + $filemanager-toolbar-viewmode-padding: ds.$spacing-60 !default; + $filemanager-breadcrumbs-item-padding-top: ds.$spacing-70 !default; + $filemanager-breadcrumbs-item-padding-bottom: ds.$spacing-80 !default; + $filemanager-details-view-checkbox-column-width: 49px !default; // dx-offscale: 49px + $filemanager-file-actions-button-size: ds.$spacing-280 !default; + $filemanager-treeview-item-top-bottom-padding: ds.$spacing-110 !default; + $filemanager-file-actions-button-top-bottom-padding: ds.$spacing-20 !default; + $filemanager-contextmenu-text-item-left-margin: ds.$spacing-480 !default; + $filemanager-large-icon-size: ds.$spacing-220 !default; + $filemanager-progress-panel-title-padding: ds.$spacing-160 !default; + $filemanager-progress-box-button-close-margin-top: ds.$spacing-60 !default; } @else if $size == "compact" { - $filemanager-toolbar-separator-height: 26px !default; - $filemanager-toolbar-viewmode-width: 150px !default; - $filemanager-toolbar-viewmode-padding: 5px !default; - $filemanager-breadcrumbs-item-padding-top: 8px !default; - $filemanager-breadcrumbs-item-padding-bottom: 9px !default; - $filemanager-details-view-checkbox-column-width: 43px !default; - $filemanager-file-actions-button-size: 22px !default; - $filemanager-treeview-item-top-bottom-padding: 8px !default; - $filemanager-file-actions-button-top-bottom-padding: 9px !default; - $filemanager-contextmenu-text-item-left-margin: 30px !default; - $filemanager-large-icon-size: 16px !default; - $filemanager-progress-panel-title-padding: 10px !default; - $filemanager-progress-box-button-close-margin-top: 5px !default; + $filemanager-toolbar-separator-height: ds.$spacing-260 !default; + $filemanager-toolbar-viewmode-width: 150px !default; // dx-offscale: 150px + $filemanager-toolbar-viewmode-padding: ds.$spacing-50 !default; + $filemanager-breadcrumbs-item-padding-top: ds.$spacing-80 !default; + $filemanager-breadcrumbs-item-padding-bottom: ds.$spacing-90 !default; + $filemanager-details-view-checkbox-column-width: 43px !default; // dx-offscale: 43px + $filemanager-file-actions-button-size: ds.$spacing-220 !default; + $filemanager-treeview-item-top-bottom-padding: ds.$spacing-80 !default; + $filemanager-file-actions-button-top-bottom-padding: ds.$spacing-90 !default; + $filemanager-contextmenu-text-item-left-margin: ds.$spacing-300 !default; + $filemanager-large-icon-size: ds.$spacing-160 !default; + $filemanager-progress-panel-title-padding: ds.$spacing-100 !default; + $filemanager-progress-box-button-close-margin-top: ds.$spacing-50 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss index 1a65dde1beb1..e4cff0d62dbc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss @@ -50,17 +50,17 @@ $fluent-fileuploader-file-wrapper-border-size: 3px; .dx-fileuploader-input { display: block; width: 100%; - padding-top: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size; + padding-top: calc(#{$fluent-fileuploader-vertical-padding} * 2 + #{$fluent-fileuploader-file-wrapper-border-size}); padding-right: $fluent-fileuploader-file-wrapper-border-size; // NOTE: height of the widget should be the same in default and drag over states, but not with margin help - padding-bottom: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size + 1px; + padding-bottom: calc(#{$fluent-fileuploader-vertical-padding} * 2 + #{$fluent-fileuploader-file-wrapper-border-size} + 1px); padding-left: $fluent-fileuploader-file-wrapper-border-size; box-sizing: content-box; } .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors - padding: $fluent-fileuploader-vertical-padding * 2 $fluent-fileuploader-vertical-padding + 2px; + padding: calc(#{$fluent-fileuploader-vertical-padding} * 2) calc(#{$fluent-fileuploader-vertical-padding} + 2px); border: $fluent-fileuploader-file-wrapper-border-size dashed; border-color: $fileuploader-border-color; } @@ -76,7 +76,7 @@ $fluent-fileuploader-file-wrapper-border-size: 3px; } .dx-fileuploader-input-label { - padding: $fluent-fileuploader-vertical-padding + math.div(math.div($fluent-base-font-size, 2) - $fluent-fileuploader-vertical-padding, 2) + 1px $fluent-fileuploader-vertical-padding + 2px; + padding: calc(#{$fluent-fileuploader-vertical-padding} + (#{$fluent-base-font-size} / 2 - #{$fluent-fileuploader-vertical-padding}) / 2 + 1px) calc(#{$fluent-fileuploader-vertical-padding} + 2px); color: $fileuploader-filename-color; @include dx-overflow(); @@ -162,7 +162,7 @@ $fluent-fileuploader-file-wrapper-border-size: 3px; } .dx-fileuploader-file-name { - padding-bottom: math.div($fluent-fileuploader-vertical-padding, 2); + padding-bottom: calc((#{$fluent-fileuploader-vertical-padding}) / 2); color: $fileuploader-filename-color; font-weight: 500; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss index 5dcc5c5f83c3..237452ba7053 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss @@ -1,35 +1,36 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-fileuploader-file-container-padding: null !default; $fluent-fileuploader-file-container-text-margin: null !default; $fluent-fileuploader-file-container-button-margin: null !default; -$fluent-fileuploader-file-cancel-button-margin-left: 4px !default; +$fluent-fileuploader-file-cancel-button-margin-left: ds.$spacing-40 !default; $fluent-fileuploader-file-container-button-size: null !default; -$fluent-fileuploader-vertical-padding: 7px !default; +$fluent-fileuploader-vertical-padding: ds.$spacing-70 !default; $fluent-fileuploader-files-container-padding: null !default; $fluent-fileuploader-file-size-margin: null !default; $fluent-fileuploader-file-icon-font-size: null !default; -$fluent-fileuploader-files-container-rounding: 4px !default; +$fluent-fileuploader-files-container-rounding: ds.$spacing-40 !default; @if $size == "default" { - $fluent-fileuploader-file-container-padding: 5px 8px !default; - $fluent-fileuploader-file-container-text-margin: 15px !default; - $fluent-fileuploader-file-container-button-margin: 8px !default; - $fluent-fileuploader-file-container-button-size: 32px !default; - $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; - $fluent-fileuploader-file-size-margin: 0 0 0 4px !default; - $fluent-fileuploader-file-icon-font-size: 20px !default; + $fluent-fileuploader-file-container-padding: ds.$spacing-50 ds.$spacing-80 !default; + $fluent-fileuploader-file-container-text-margin: ds.$spacing-150 !default; + $fluent-fileuploader-file-container-button-margin: ds.$spacing-80 !default; + $fluent-fileuploader-file-container-button-size: ds.$spacing-320 !default; + $fluent-fileuploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 0 ds.$spacing-40 !default; + $fluent-fileuploader-file-icon-font-size: ds.$font-size-200 !default; } @else if $size == "compact" { - $fluent-fileuploader-file-container-padding: 2px 4px !default; - $fluent-fileuploader-file-container-text-margin: 6px !default; - $fluent-fileuploader-file-container-button-margin: 2px !default; - $fluent-fileuploader-file-container-button-size: 28px !default; - $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; - $fluent-fileuploader-file-size-margin: 0 0 4px !default; - $fluent-fileuploader-file-icon-font-size: 16px !default; + $fluent-fileuploader-file-container-padding: ds.$spacing-20 ds.$spacing-40 !default; + $fluent-fileuploader-file-container-text-margin: ds.$spacing-60 !default; + $fluent-fileuploader-file-container-button-margin: ds.$spacing-20 !default; + $fluent-fileuploader-file-container-button-size: ds.$spacing-280 !default; + $fluent-fileuploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 ds.$spacing-40 !default; + $fluent-fileuploader-file-icon-font-size: ds.$font-size-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss index 49a497dce89e..897832f88a0b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss @@ -100,7 +100,7 @@ .dx-rtl { .dx-treeview-node { > .dx-treeview-item { - padding-right: $fluent-filterbuilder-treeview-item-left-padding * 2; + padding-right: calc(#{$fluent-filterbuilder-treeview-item-left-padding} * 2); } &.dx-treeview-node-is-leaf > .dx-treeview-item { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss index 2f9224d4db40..af4a1544a53d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,20 +11,20 @@ $fluent-filterbuilder-treeview-toggle-left: null !default; $fluent-filterbuilder-treeview-item-min-heigth: null !default; @if $size == "default" { - $fluent-filterbuilder-icon-padding: 8px !default; - $fluent-filterbuilder-filled-editor-padding: 13px 12px !default; + $fluent-filterbuilder-icon-padding: ds.$spacing-80 !default; + $fluent-filterbuilder-filled-editor-padding: ds.$spacing-130 ds.$spacing-120 !default; - $fluent-filterbuilder-treeview-item-left-padding: 12px !default; - $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default; - $fluent-filterbuilder-treeview-toggle-left: 16px !default; - $fluent-filterbuilder-treeview-item-min-heigth: 32px !default; + $fluent-filterbuilder-treeview-item-left-padding: ds.$spacing-120 !default; + $fluent-filterbuilder-treeview-item-padding: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-treeview-toggle-left: ds.$spacing-160 !default; + $fluent-filterbuilder-treeview-item-min-heigth: ds.$spacing-320 !default; } @else if $size == "compact" { - $fluent-filterbuilder-icon-padding: 4px !default; - $fluent-filterbuilder-filled-editor-padding: 8px 8px !default; - $fluent-filterbuilder-treeview-item-left-padding: 4px !default; - $fluent-filterbuilder-treeview-item-padding: 4px 12px 4px $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-icon-padding: ds.$spacing-40 !default; + $fluent-filterbuilder-filled-editor-padding: ds.$spacing-80 ds.$spacing-80 !default; + $fluent-filterbuilder-treeview-item-left-padding: ds.$spacing-40 !default; + $fluent-filterbuilder-treeview-item-padding: ds.$spacing-40 ds.$spacing-120 ds.$spacing-40 $fluent-filterbuilder-treeview-item-left-padding !default; $fluent-filterbuilder-treeview-toggle-left: 0 !default; - $fluent-filterbuilder-treeview-item-min-heigth: 24px !default; + $fluent-filterbuilder-treeview-item-min-heigth: ds.$spacing-240 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss index 4eabd6d030f2..dbae8ff4ea2f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,7 +10,7 @@ $fluent-form-group-caption-font-size: null !default; $fluent-form-top-label-padding: 0 !default; $fluent-form-top-label-bottom-margin: null !default; $fluent-form-default-top-padding: null !default; -$fluent-form-help-text-font-size: 12px !default; +$fluent-form-help-text-font-size: ds.$font-size-120 !default; $fluent-form-layout-manager-horizontal-padding: null !default; $fluent-form-layout-manager-vertical-padding: null !default; $fluent-form-layout-manager-tabpanel-content-padding: null !default; @@ -19,27 +20,27 @@ $fluent-form-label-icon-size: $fluent-base-icon-size !default; $fluent-form-group-custom-caption-icon-margin: null !default; @if $size == "default" { - $fluent-form-group-caption-bottom-margin: 4px !default; - $fluent-form-group-caption-top-padding: 16px !default; - $fluent-form-group-content-bottom-padding: 16px !default; - $fluent-form-group-caption-font-size: 20px !default; - $fluent-form-group-custom-caption-icon-margin: 6px !default; - $fluent-form-default-top-padding: 16px !default; - $fluent-form-top-label-bottom-margin: 4px !default; - $fluent-form-layout-manager-horizontal-padding: 12px !default; - $fluent-form-layout-manager-vertical-padding: 8px !default; - $fluent-form-layout-manager-tabpanel-content-padding: 24px !default; + $fluent-form-group-caption-bottom-margin: ds.$spacing-40 !default; + $fluent-form-group-caption-top-padding: ds.$spacing-160 !default; + $fluent-form-group-content-bottom-padding: ds.$spacing-160 !default; + $fluent-form-group-caption-font-size: ds.$font-size-200 !default; + $fluent-form-group-custom-caption-icon-margin: ds.$spacing-60 !default; + $fluent-form-default-top-padding: ds.$spacing-160 !default; + $fluent-form-top-label-bottom-margin: ds.$spacing-40 !default; + $fluent-form-layout-manager-horizontal-padding: ds.$spacing-120 !default; + $fluent-form-layout-manager-vertical-padding: ds.$spacing-80 !default; + $fluent-form-layout-manager-tabpanel-content-padding: ds.$spacing-240 !default; } @else if $size == "compact" { - $fluent-form-group-caption-bottom-margin: 4px !default; - $fluent-form-group-caption-top-padding: 12px !default; - $fluent-form-group-content-bottom-padding: 12px !default; - $fluent-form-group-caption-font-size: 16px !default; - $fluent-form-group-custom-caption-icon-margin: 4px !default; - $fluent-form-default-top-padding: 8px !default; - $fluent-form-top-label-bottom-margin: 2px !default; - $fluent-form-layout-manager-horizontal-padding: 8px !default; - $fluent-form-layout-manager-vertical-padding: 6px !default; - $fluent-form-layout-manager-tabpanel-content-padding: 16px !default; + $fluent-form-group-caption-bottom-margin: ds.$spacing-40 !default; + $fluent-form-group-caption-top-padding: ds.$spacing-120 !default; + $fluent-form-group-content-bottom-padding: ds.$spacing-120 !default; + $fluent-form-group-caption-font-size: ds.$font-size-160 !default; + $fluent-form-group-custom-caption-icon-margin: ds.$spacing-40 !default; + $fluent-form-default-top-padding: ds.$spacing-80 !default; + $fluent-form-top-label-bottom-margin: ds.$spacing-20 !default; + $fluent-form-layout-manager-horizontal-padding: ds.$spacing-80 !default; + $fluent-form-layout-manager-vertical-padding: ds.$spacing-60 !default; + $fluent-form-layout-manager-tabpanel-content-padding: ds.$spacing-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss index 03ec5af7485a..f8547d8c28b8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss @@ -56,7 +56,7 @@ } &::before { - left: $fluent-gallery-button-padding - 1; + left: calc(#{$fluent-gallery-button-padding} - 1px); right: auto; margin-left: 0; } @@ -70,7 +70,7 @@ } &::before { - right: $fluent-gallery-button-padding - 1; + right: calc(#{$fluent-gallery-button-padding} - 1px); left: auto; } } @@ -88,7 +88,7 @@ border: 1px solid; border-color: $gallery-indicator-item-border-color; pointer-events: auto; - margin: 5px - math.div($fluent-gallery-indicator-size, 2) 6px; + margin: calc(5px - #{$fluent-gallery-indicator-size} / 2) 6px; width: $fluent-gallery-indicator-size; height: $fluent-gallery-indicator-size; background: $gallery-indicator-bg; @@ -101,7 +101,7 @@ background: $gallery-indicator-item-selected-bg; border: 2px solid; border-color: $gallery-indicator-selected-border-color; - margin: 5px - math.div($fluent-gallery-indicator-selected-size, 2) 6px; + margin: calc(5px - #{$fluent-gallery-indicator-selected-size} / 2) 6px; } .dx-state-focused.dx-gallery { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss index 4187dac269e1..9d53149bdf69 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss @@ -1,7 +1,8 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-gallery-indicator-size: 8px !default; -$fluent-gallery-indicator-selected-size: 12px !default; -$fluent-gallery-button-padding: 8px !default; +$fluent-gallery-indicator-size: ds.$spacing-80 !default; +$fluent-gallery-indicator-selected-size: ds.$spacing-120 !default; +$fluent-gallery-button-padding: ds.$spacing-80 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss index 40f26ca462f6..d2eb7093622e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss @@ -101,8 +101,8 @@ $gantt-successor-background-color: white; } &.dx-gantt-parent { - height: $gantt-task-height - 2px; - line-height: $gantt-task-height - 2px; + height: calc(#{$gantt-task-height} - 2px); + line-height: calc(#{$gantt-task-height} - 2px); background-color: $gantt-parent-task-background-color; border-left-color: $gantt-parent-task-background-color; border-right-color: $gantt-parent-task-background-color; @@ -155,7 +155,7 @@ $gantt-successor-background-color: white; } .dx-gantt-task-edit-frame { - height: $gantt-task-height - 2px; + height: calc(#{$gantt-task-height} - 2px); } } } @@ -239,12 +239,12 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-dependency-r, .dx-gantt-task-edit-successor-dependency-r { - left: -$gantt-dependency-successor-size - 1px; + left: calc(-1 * #{$gantt-dependency-successor-size} - 1px); } .dx-gantt-task-edit-dependency-l, .dx-gantt-task-edit-successor-dependency-l { - right: -$gantt-dependency-successor-size - 1px; + right: calc(-1 * #{$gantt-dependency-successor-size} - 1px); } .dx-gantt-task-edit-dependency-line { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss index a1b69906b929..035ec8b80ee6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,18 +12,18 @@ $gantt-milestone-size: null !default; $gantt-task-wrapper-padding-top: 0 !default; @if $size == "default" { - $gantt-header-item-height: 57px !default; - $gantt-task-title-padding-left: 11px !default; - $gantt-task-height: 27px !default; - $gantt-dependency-successor-size: 12px !default; - $gantt-milestone-size: 17px !default; + $gantt-header-item-height: 57px !default; // dx-offscale: 57px + $gantt-task-title-padding-left: ds.$spacing-110 !default; + $gantt-task-height: 27px !default; // dx-offscale: 27px + $gantt-dependency-successor-size: ds.$spacing-120 !default; + $gantt-milestone-size: ds.$spacing-170 !default; } @else if $size == "compact" { - $gantt-header-item-height: 51px !default; - $gantt-task-title-padding-left: 9px !default; - $gantt-task-height: 20px !default; - $gantt-dependency-successor-size: 10px !default; - $gantt-milestone-size: 14px !default; + $gantt-header-item-height: 51px !default; // dx-offscale: 51px + $gantt-task-title-padding-left: ds.$spacing-90 !default; + $gantt-task-height: ds.$spacing-200 !default; + $gantt-dependency-successor-size: ds.$spacing-100 !default; + $gantt-milestone-size: ds.$spacing-140 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss index b7e94557b003..243572337de3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss @@ -53,7 +53,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-menu { background-color: transparent; - margin-top: math.div(($fluent-grid-base-header-height - $fluent-button-height), 2); + margin-top: calc((#{$fluent-grid-base-header-height} - #{$fluent-button-height}) / 2); margin-left: 5px !important; // stylelint-disable-line declaration-no-important height: $fluent-button-height; @@ -103,41 +103,41 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-menu-items-container { .dx-icon-context-menu-sort-asc { @include dx-icon(sortuptext); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-context-menu-sort-desc { @include dx-icon(sortdowntext); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-context-menu-sort-none { - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-fix-column { @include dx-icon(fixcolumn); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-fix-column-left { @include dx-icon(fixcolumnleft); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-fix-column-right { @include dx-icon(fixcolumnright); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-stick-column { @include dx-icon(stickcolumn); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-unfix-column { @include dx-icon(unfixcolumn); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } } } @@ -206,7 +206,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-sort-index-icon { padding-right: 4px; margin-left: -1px; - font-size: $fluent-grid-base-header-cell-font-size - 1px; + font-size: calc(#{$fluent-grid-base-header-cell-font-size} - 1px); position: relative; bottom: 1px; } @@ -247,7 +247,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-error-row { .dx-closebutton { float: right; - margin: $fluent-grid-base-cell-vertical-padding + 2px; + margin: calc(#{$fluent-grid-base-cell-vertical-padding} + 2px); @include dx-icon(close); @include dx-icon-sizing(14px); @@ -677,7 +677,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-texteditor-input { font-size: $fluent-grid-base-cell-font-size; - height: $fluent-grid-base-cell-height + 1; + height: calc(#{$fluent-grid-base-cell-height} + 1px); padding-right: $fluent-filter-row-between-editor-padding; padding-left: $fluent-filter-row-between-editor-padding; } @@ -883,8 +883,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig &.dx-#{$widget-name}-sticky-columns { .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input { - height: $fluent-grid-base-cell-height - 2px; - line-height: $fluent-grid-base-cell-height - 2px; + height: calc(#{$fluent-grid-base-cell-height} - 2px); + line-height: calc(#{$fluent-grid-base-cell-height} - 2px); } .dx-master-detail-row > .dx-master-detail-cell { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss index 0a040ed93e61..d37ea9b27b31 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -29,12 +30,12 @@ $fluent-filter-row-between-editor-padding: null !default; $fluent-command-column-additional-right-margin: null !default; $fluent-grid-base-treeview-select-all-item-offset: null !default; -$fluent-grid-base-header-line-height: 18px !default; +$fluent-grid-base-header-line-height: ds.$line-height-180 !default; $fluent-grid-base-header-icon-size: null !default; -$fluent-grid-base-header-icon-container-size: 20px !default; -$fluent-grid-base-column-chooser-item-margin: 8px !default; -$fluent-command-edit-icon-margin: 4px !default; -$fluent-command-edit-text-margin: 2px !default; +$fluent-grid-base-header-icon-container-size: ds.$spacing-200 !default; +$fluent-grid-base-column-chooser-item-margin: ds.$spacing-80 !default; +$fluent-command-edit-icon-margin: ds.$spacing-40 !default; +$fluent-command-edit-text-margin: ds.$spacing-20 !default; $fluent-command-edit-icon-size: null !default; $fluent-filter-panel-icon-size: null !default; @@ -43,76 +44,76 @@ $fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default; $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: null !default; $fluent-grid-base-command-ai-text-content-padding: null !default; $fluent-grid-base-command-ai-header-button-offset: null !default; -$fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; +$fluent-grid-base-ai-prompt-editor-progressbar-height: ds.$spacing-40 !default; @if $size == "default" { - $fluent-grid-base-cell-height: 48px !default; - $fluent-grid-base-header-height: 48px !default; - $fluent-grid-base-cell-line-height: 20px !default; - $fluent-grid-base-cell-font-size: 14px !default; - - $fluent-grid-base-checkbox-size: 18px !default; - $fluent-grid-base-cell-horizontal-padding: 16px !default; - - $fluent-grid-base-texteditor-input-padding: 40px !default; - $fluent-grid-base-menu-item-padding: 11px 4px !default; - $fluent-grid-base-column-chooser-horizontal-padding: 24px !default; - $fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default; - $fluent-grid-base-header-panel-padding: 8px 0 !default; - $fluent-grid-base-grouppanel-item-margin: 6px !default; - - $fluent-grid-base-command-edit-column-width: 115px !default; - $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; - $fluent-grid-base-adaptive-column-height: 40px !default; - $fluent-grid-base-treeview-search-margin: 10px !default; - $fluent-grid-base-nodata-font-size: 17px !default; - - $fluent-filter-row-between-editor-padding: 12px !default; + $fluent-grid-base-cell-height: ds.$spacing-480 !default; + $fluent-grid-base-header-height: ds.$spacing-480 !default; + $fluent-grid-base-cell-line-height: ds.$line-height-200 !default; + $fluent-grid-base-cell-font-size: ds.$font-size-140 !default; + + $fluent-grid-base-checkbox-size: ds.$spacing-180 !default; + $fluent-grid-base-cell-horizontal-padding: ds.$spacing-160 !default; + + $fluent-grid-base-texteditor-input-padding: ds.$spacing-400 !default; + $fluent-grid-base-menu-item-padding: ds.$spacing-110 ds.$spacing-40 !default; + $fluent-grid-base-column-chooser-horizontal-padding: ds.$spacing-240 !default; + $fluent-grid-base-column-chooser-paddings: ds.$spacing-160 $fluent-grid-base-column-chooser-horizontal-padding ds.$spacing-90 !default; + $fluent-grid-base-header-panel-padding: ds.$spacing-80 0 !default; + $fluent-grid-base-grouppanel-item-margin: ds.$spacing-60 !default; + + $fluent-grid-base-command-edit-column-width: 115px !default; // dx-offscale: 115px + $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; // dx-offscale: 93px + $fluent-grid-base-adaptive-column-height: ds.$spacing-400 !default; + $fluent-grid-base-treeview-search-margin: ds.$spacing-100 !default; + $fluent-grid-base-nodata-font-size: ds.$spacing-170 !default; + + $fluent-filter-row-between-editor-padding: ds.$spacing-120 !default; $fluent-command-column-additional-right-margin: 0 !default; - $fluent-grid-base-treeview-select-all-item-offset: 34px !default; + $fluent-grid-base-treeview-select-all-item-offset: ds.$spacing-340 !default; - $fluent-grid-base-header-icon-size: 20px !default; - $fluent-command-edit-icon-size: 20px !default; - $fluent-filter-panel-icon-size: 20px !default; - $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 20px !default; - $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default; - $fluent-grid-base-command-ai-header-button-offset: 8px !default; + $fluent-grid-base-header-icon-size: ds.$spacing-200 !default; + $fluent-command-edit-icon-size: ds.$spacing-200 !default; + $fluent-filter-panel-icon-size: ds.$spacing-200 !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: ds.$spacing-200 !default; + $fluent-grid-base-command-ai-text-content-padding: calc(#{$fluent-grid-base-command-ai-chatsparkleoutline-icon-size} + 8px) !default; + $fluent-grid-base-command-ai-header-button-offset: ds.$spacing-80 !default; } @else if $size == "compact" { - $fluent-grid-base-cell-height: 36px !default; - $fluent-grid-base-header-height: 36px !default; - $fluent-grid-base-cell-line-height: 16px !default; - $fluent-grid-base-cell-font-size: 12px !default; - - $fluent-grid-base-checkbox-size: 16px !default; - $fluent-grid-base-cell-horizontal-padding: 11px !default; - - $fluent-grid-base-texteditor-input-padding: 36px !default; - $fluent-grid-base-menu-item-padding: 8px 4px !default; - $fluent-grid-base-column-chooser-horizontal-padding: 8px !default; - $fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default; - $fluent-grid-base-header-panel-padding: 6px 0 !default; - $fluent-grid-base-grouppanel-item-margin: 6px !default; - - $fluent-grid-base-command-edit-column-width: 105px !default; - $fluent-grid-base-command-edit-column-with-icons-width: 80px !default; - $fluent-grid-base-adaptive-column-height: 26px !default; - $fluent-grid-base-treeview-search-margin: 10px !default; - $fluent-grid-base-nodata-font-size: 14px !default; - - $fluent-filter-row-between-editor-padding: 8px !default; - $fluent-command-column-additional-right-margin: 2px !default; - - $fluent-grid-base-treeview-select-all-item-offset: 28px !default; - - $fluent-grid-base-header-icon-size: 16px !default; - $fluent-command-edit-icon-size: 16px !default; - $fluent-filter-panel-icon-size: 16px !default; - $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 16px !default; - $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default; - $fluent-grid-base-command-ai-header-button-offset: 6px !default; + $fluent-grid-base-cell-height: ds.$spacing-360 !default; + $fluent-grid-base-header-height: ds.$spacing-360 !default; + $fluent-grid-base-cell-line-height: ds.$line-height-160 !default; + $fluent-grid-base-cell-font-size: ds.$font-size-120 !default; + + $fluent-grid-base-checkbox-size: ds.$spacing-160 !default; + $fluent-grid-base-cell-horizontal-padding: ds.$spacing-110 !default; + + $fluent-grid-base-texteditor-input-padding: ds.$spacing-360 !default; + $fluent-grid-base-menu-item-padding: ds.$spacing-80 ds.$spacing-40 !default; + $fluent-grid-base-column-chooser-horizontal-padding: ds.$spacing-80 !default; + $fluent-grid-base-column-chooser-paddings: ds.$spacing-80 $fluent-grid-base-column-chooser-horizontal-padding ds.$spacing-80 !default; + $fluent-grid-base-header-panel-padding: ds.$spacing-60 0 !default; + $fluent-grid-base-grouppanel-item-margin: ds.$spacing-60 !default; + + $fluent-grid-base-command-edit-column-width: 105px !default; // dx-offscale: 105px + $fluent-grid-base-command-edit-column-with-icons-width: ds.$spacing-800 !default; + $fluent-grid-base-adaptive-column-height: ds.$spacing-260 !default; + $fluent-grid-base-treeview-search-margin: ds.$spacing-100 !default; + $fluent-grid-base-nodata-font-size: ds.$font-size-140 !default; + + $fluent-filter-row-between-editor-padding: ds.$spacing-80 !default; + $fluent-command-column-additional-right-margin: ds.$spacing-20 !default; + + $fluent-grid-base-treeview-select-all-item-offset: ds.$spacing-280 !default; + + $fluent-grid-base-header-icon-size: ds.$spacing-160 !default; + $fluent-command-edit-icon-size: ds.$spacing-160 !default; + $fluent-filter-panel-icon-size: ds.$spacing-160 !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: ds.$spacing-160 !default; + $fluent-grid-base-command-ai-text-content-padding: calc(#{$fluent-grid-base-command-ai-chatsparkleoutline-icon-size} + 6px) !default; + $fluent-grid-base-command-ai-header-button-offset: ds.$spacing-60 !default; } $fluent-grid-base-header-cell-font-size: $fluent-grid-base-cell-font-size !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss index 1ec5dd5b0875..7efcfb4d27ba 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss @@ -3,8 +3,8 @@ @use "sizes" as *; $fluent-grid-base-border-color: $datagrid-border-color; -$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)); +$fluent-grid-base-cell-vertical-padding: calc((#{$fluent-grid-base-cell-height} - #{$fluent-grid-base-cell-line-height}) / 2); $fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; -$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)); -$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding; +$fluent-grid-base-header-cell-vertical-padding: calc((#{$fluent-grid-base-header-height} - #{$fluent-grid-base-header-line-height}) / 2); +$fluent-grid-base-command-select-column-width: calc(#{$fluent-grid-base-checkbox-size} + 2 * #{$fluent-grid-base-cell-horizontal-padding}); $grid-masterdetail-padding: 16px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss index 6cad4be42474..d6b4aa7f9e8e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss @@ -31,14 +31,14 @@ // (0,1,0) .dx-command-adaptive { - width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; - min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); + min-width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); } // (0,2,0) .dx-#{$widget-name} .dx-command-drag { - width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; - min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); + min-width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); } // (0,7,1) - (0,9,1) @@ -310,12 +310,12 @@ // (0,5,1) .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) { - padding-top: $fluent-grid-base-cell-vertical-padding + 1px; + padding-top: calc(#{$fluent-grid-base-cell-vertical-padding} + 1px); } // (0,5,1) .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-edit-row > td.dx-command-edit { - padding-top: $fluent-grid-base-cell-vertical-padding - 1px; + padding-top: calc(#{$fluent-grid-base-cell-vertical-padding} - 1px); } // (0,6,1) @@ -332,13 +332,13 @@ // (0,7,0) .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row .dx-command-select { - padding-bottom: math.div($fluent-grid-base-header-height - $fluent-grid-base-checkbox-size, 2); + padding-bottom: calc((#{$fluent-grid-base-header-height} - #{$fluent-grid-base-checkbox-size}) / 2); } // (0,8,1) T1303478 .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell), .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) { - padding-bottom: $fluent-grid-base-cell-vertical-padding - 1px; + padding-bottom: calc(#{$fluent-grid-base-cell-vertical-padding} - 1px); } // (0,7,1) - (0,9,1) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss index ea9842636032..d50afa5c3f1b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss @@ -180,7 +180,7 @@ &.dx-color-format, &.dx-background-format { .dx-button-content { - padding-bottom: $fluent-button-vertical-padding - 3px; + padding-bottom: calc(#{$fluent-button-vertical-padding} - 3px); } } @@ -190,7 +190,7 @@ } .dx-htmleditor-toolbar-separator { - height: math.div($fluent-toolbar-height, 2); + height: calc((#{$fluent-toolbar-height}) / 2); border-inline-start-color: $htmleditor-toolbar-border-color; } @@ -233,7 +233,7 @@ .dx-buttongroup { margin-inline-start: $fluent-html-editor-add-image-dialog-base-padding; width: $fluent-button-height; - margin-top: math.div($fluent-base-inline-widget-height - $fluent-button-height, 2); + margin-top: calc((#{$fluent-base-inline-widget-height} - #{$fluent-button-height}) / 2); } } @@ -273,7 +273,7 @@ .dx-fileuploader-dragover { .dx-fileuploader-input { padding-top: $fluent-fileuploader-vertical-padding; - padding-bottom: $fluent-fileuploader-vertical-padding + 1px; + padding-bottom: calc(#{$fluent-fileuploader-vertical-padding} + 1px); } .dx-fileuploader-content { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss index d21b20d145f6..57209b20d683 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; @use "../toolbar/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,9 +8,9 @@ $fluent-toolbar-size-editor-width: null !default; $fluent-html-editor-vertical-padding: null !default; $fluent-html-editor-horizontal-padding: null !default; $fluent-html-editor-add-image-dialog-fileuploader-padding: null !default; -$fluent-html-editor-toolbar-menu-separator-margin: 4px !default; -$fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default; -$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default; +$fluent-html-editor-toolbar-menu-separator-margin: ds.$spacing-40 !default; +$fluent-html-editor-fileuploader-input-wrapper-border-radius: ds.$border-radius-80 !default; +$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default; // dx-offscale: 1.5px $fluent-html-editor-add-image-dialog-tabs-padding: null !default; $fluent-aidialog-selects-gap: null !default; $fluent-aidialog-content-gap: null !default; @@ -17,26 +18,26 @@ $fluent-aidialog-content-padding: null !default; $fluent-aidialog-border-radius: null !default; @if $size == "default" { - $fluent-toolbar-size-editor-width: 120px !default; - $fluent-html-editor-vertical-padding: 16px !default; - $fluent-html-editor-horizontal-padding: 16px !default; - $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px !default; - $fluent-html-editor-add-image-dialog-tabs-padding: 14px !default; - $fluent-aidialog-selects-gap: 8px !default; - $fluent-aidialog-content-gap: 16px !default; - $fluent-aidialog-content-padding: 16px 24px !default; - $fluent-aidialog-border-radius: $base-border-radius * 2 !default; + $fluent-toolbar-size-editor-width: ds.$spacing-1200 !default; + $fluent-html-editor-vertical-padding: ds.$spacing-160 !default; + $fluent-html-editor-horizontal-padding: ds.$spacing-160 !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: ds.$spacing-480 0 ds.$spacing-240 !default; + $fluent-html-editor-add-image-dialog-tabs-padding: ds.$spacing-140 !default; + $fluent-aidialog-selects-gap: ds.$spacing-80 !default; + $fluent-aidialog-content-gap: ds.$spacing-160 !default; + $fluent-aidialog-content-padding: ds.$spacing-160 ds.$spacing-240 !default; + $fluent-aidialog-border-radius: calc(#{$base-border-radius} * 2) !default; } @else if $size == "compact" { - $fluent-toolbar-size-editor-width: 90px !default; - $fluent-html-editor-vertical-padding: 12px !default; - $fluent-html-editor-horizontal-padding: 12px !default; - $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px !default; - $fluent-html-editor-add-image-dialog-tabs-padding: 8px !default; - $fluent-aidialog-selects-gap: 4px !default; - $fluent-aidialog-content-gap: 12px !default; - $fluent-aidialog-content-padding: 12px 16px !default; + $fluent-toolbar-size-editor-width: 90px !default; // dx-offscale: 90px + $fluent-html-editor-vertical-padding: ds.$spacing-120 !default; + $fluent-html-editor-horizontal-padding: ds.$spacing-120 !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: ds.$spacing-400 0 ds.$spacing-180 !default; + $fluent-html-editor-add-image-dialog-tabs-padding: ds.$spacing-80 !default; + $fluent-aidialog-selects-gap: ds.$spacing-40 !default; + $fluent-aidialog-content-gap: ds.$spacing-120 !default; + $fluent-aidialog-content-padding: ds.$spacing-120 ds.$spacing-160 !default; $fluent-aidialog-border-radius: $base-border-radius !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss index 9c7a933950de..d689b2016731 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss @@ -1,5 +1,6 @@ @use "../common/sizes" as *; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,15 +11,15 @@ $informer-column-gap: null !default; $informer-border-radius: null !default; @if $size == "default" { - $informer-padding-inline: 12px !default; - $informer-padding-block: 8px !default; - $informer-column-gap: 6px !default; - $informer-border-radius: 4px !default; + $informer-padding-inline: ds.$spacing-120 !default; + $informer-padding-block: ds.$spacing-80 !default; + $informer-column-gap: ds.$spacing-60 !default; + $informer-border-radius: ds.$border-radius-40 !default; } @else if $size == "compact" { - $informer-padding-inline: 8px !default; - $informer-padding-block: 4px !default; - $informer-column-gap: 4px !default; - $informer-border-radius: 3px !default; + $informer-padding-inline: ds.$spacing-80 !default; + $informer-padding-block: ds.$spacing-40 !default; + $informer-column-gap: ds.$spacing-40 !default; + $informer-border-radius: ds.$border-radius-30 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss index 7152525cae4f..efd4b06ecc69 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss @@ -67,7 +67,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; } .dx-list-item-icon-container { - width: $fluent-base-icon-size + $fluent-list-item-horizontal-padding; + width: calc(#{$fluent-base-icon-size} + #{$fluent-list-item-horizontal-padding}); height: $fluent-base-icon-size; vertical-align: bottom; } @@ -147,7 +147,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; } &.dx-list-with-search .dx-scrollable-wrapper { - height: calc(100% - #{$fluent-texteditor-input-height + $fluent-list-searchbox-margin-bottom}); + height: calc(100% - (#{$fluent-texteditor-input-height} + #{$fluent-list-searchbox-margin-bottom})); } .dx-empty-message { @@ -443,7 +443,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; } .dx-list-select-all-checkbox { - margin: 0 $item-horizontal-padding - 4px; + margin: 0 calc(#{$item-horizontal-padding} - 4px); } .dx-list-select-all-label { @@ -454,7 +454,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; padding-inline: $fluent-list-item-vertical-padding; &.dx-list-static-delete-button-container { - width: $item-horizontal-padding + $fluent-button-icon-size; + width: calc(#{$item-horizontal-padding} + #{$fluent-button-icon-size}); padding: 0; } @@ -484,7 +484,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; display: table-cell; vertical-align: middle; padding: 0 $item-horizontal-padding; - width: $item-horizontal-padding * 2 + $fluent-base-icon-size; + width: calc(#{$item-horizontal-padding} * 2 + #{$fluent-base-icon-size}); } .dx-list-slide-menu-button-menu { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss index b88504c794fe..c0963b91d0ee 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss @@ -1,32 +1,33 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-list-vertical-padding: 4px !default; -$fluent-list-item-margin-inline: 4px !default; -$fluent-list-bottom-padding: 4px !default; -$fluent-list-searchbox-margin-bottom: 4px !default; +$fluent-list-vertical-padding: ds.$spacing-40 !default; +$fluent-list-item-margin-inline: ds.$spacing-40 !default; +$fluent-list-bottom-padding: ds.$spacing-40 !default; +$fluent-list-searchbox-margin-bottom: ds.$spacing-40 !default; $fluent-list-item-height: null !default; $fluent-list-item-vertical-padding: null !default; $fluent-list-item-horizontal-padding: null !default; -$fluent-list-item-gap: 2px !default; +$fluent-list-item-gap: ds.$spacing-20 !default; $fluent-list-group-header-vertical-padding: null !default; $fluent-list-next-button-horizontal-padding: null !default; @if $size == "default" { - $fluent-list-item-height: 32px !default; - $fluent-list-item-vertical-padding: 6px !default; - $fluent-list-item-horizontal-padding: 12px !default; - $fluent-list-group-header-vertical-padding: 6px !default; - $fluent-list-next-button-horizontal-padding: 32px !default; + $fluent-list-item-height: ds.$spacing-320 !default; + $fluent-list-item-vertical-padding: ds.$spacing-60 !default; + $fluent-list-item-horizontal-padding: ds.$spacing-120 !default; + $fluent-list-group-header-vertical-padding: ds.$spacing-60 !default; + $fluent-list-next-button-horizontal-padding: ds.$spacing-320 !default; } @else if $size == "compact" { - $fluent-list-item-height: 24px !default; - $fluent-list-item-vertical-padding: 4px !default; - $fluent-list-item-horizontal-padding: 8px !default; - $fluent-list-group-header-vertical-padding: 8px !default; - $fluent-list-next-button-horizontal-padding: 24px !default; + $fluent-list-item-height: ds.$spacing-240 !default; + $fluent-list-item-vertical-padding: ds.$spacing-40 !default; + $fluent-list-item-horizontal-padding: ds.$spacing-80 !default; + $fluent-list-group-header-vertical-padding: ds.$spacing-80 !default; + $fluent-list-next-button-horizontal-padding: ds.$spacing-240 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss index 7100675c9f07..0f0fad8ad030 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss @@ -1,9 +1,10 @@ @use "sass:color"; @use "../colors" as *; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$load-panel-padding: 12px 24px !default; -$load-panel-border-radius: 8px !default; -$load-panel-box-shadow: 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14) !default; +$load-panel-padding: ds.$spacing-120 ds.$spacing-240 !default; +$load-panel-border-radius: ds.$border-radius-80 !default; +$load-panel-box-shadow: 0 ds.$spacing-80 ds.$spacing-160 0 color.change($base-shadow-color, $alpha: 0.14) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss index bef4b08d024d..581d45764d6f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss @@ -24,12 +24,12 @@ &.dx-editor-outlined { .dx-lookup-field { padding-inline-start: $fluent-filled-texteditor-input-horizontal-padding; - padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size; + padding-inline-end: calc(#{$fluent-filled-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size}); } &.dx-invalid { .dx-lookup-field { - padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2; + padding-inline-end: calc(#{$fluent-filled-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} * 2); } } } @@ -37,12 +37,12 @@ &.dx-editor-underlined { .dx-lookup-field { padding-inline-start: $fluent-base-standard-texteditor-input-horizontal-padding; - padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size + $texteditor-spin-button-horizontal-padding; + padding-inline-end: calc(#{$fluent-base-standard-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} + #{$texteditor-spin-button-horizontal-padding}); } &.dx-invalid { .dx-lookup-field { - padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2 + $texteditor-spin-button-horizontal-padding; + padding-inline-end: calc(#{$fluent-base-standard-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} * 2 + #{$texteditor-spin-button-horizontal-padding}); } } } @@ -165,7 +165,7 @@ } .dx-lookup-popup-search .dx-list { - height: calc(100% - #{$fluent-texteditor-input-height + $lookup-search-padding-vertical + $lookup-search-padding-vertical-top }); + height: calc(100% - (#{$fluent-texteditor-input-height} + #{$lookup-search-padding-vertical} + #{$lookup-search-padding-vertical-top})); } .dx-lookup-search-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss index f3fd2b58ef3d..6fbd2e14f40b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss @@ -1,23 +1,24 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $lookup-field-height: null !default; -$lookup-search-padding-vertical: 4px !default; +$lookup-search-padding-vertical: ds.$spacing-40 !default; $lookup-search-padding-vertical-top: null !default; $lookup-search-padding-horizontal: null !default; -$lookup-arrow-border-radius: 2px !default; +$lookup-arrow-border-radius: ds.$border-radius-20 !default; -$fluent-lookup-popup-content-top: 49px !default; +$fluent-lookup-popup-content-top: 49px !default; // dx-offscale: 49px @if $size == "default" { - $lookup-field-height: 30px !default; - $lookup-search-padding-horizontal: 12px !default; - $lookup-search-padding-vertical-top: 12px !default; + $lookup-field-height: ds.$spacing-300 !default; + $lookup-search-padding-horizontal: ds.$spacing-120 !default; + $lookup-search-padding-vertical-top: ds.$spacing-120 !default; } @else if $size == "compact" { - $lookup-field-height: 22px !default; - $lookup-search-padding-horizontal: 8px !default; - $lookup-search-padding-vertical-top: 8px !default; + $lookup-field-height: ds.$spacing-220 !default; + $lookup-search-padding-horizontal: ds.$spacing-80 !default; + $lookup-search-padding-vertical-top: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss index 9161d6ba6151..6eae8d50a5c3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss @@ -1,14 +1,15 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-menu-vertical-padding: null !default; @if $size == "default" { - $fluent-menu-vertical-padding: 6px !default; + $fluent-menu-vertical-padding: ds.$spacing-60 !default; } @if $size == "compact" { - $fluent-menu-vertical-padding: 4px !default; + $fluent-menu-vertical-padding: ds.$spacing-40 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss index 6a55714929bc..06a806258c31 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss @@ -1,20 +1,21 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-menu-item-line-height: null !default; $fluent-menu-item-with-icon-horizontal-padding: null !default; $fluent-menu-horizontal-padding: null !default; -$fluent-menu-icon-to-text-offset: 4px; +$fluent-menu-icon-to-text-offset: ds.$spacing-40; @if $size == "default" { - $fluent-menu-item-line-height: 20px !default; - $fluent-menu-horizontal-padding: 12px !default; - $fluent-menu-item-with-icon-horizontal-padding: 40px !default; + $fluent-menu-item-line-height: ds.$line-height-200 !default; + $fluent-menu-horizontal-padding: ds.$spacing-120 !default; + $fluent-menu-item-with-icon-horizontal-padding: ds.$spacing-400 !default; } @else if $size == "compact" { - $fluent-menu-item-line-height: 16px !default; - $fluent-menu-horizontal-padding: 8px !default; - $fluent-menu-item-with-icon-horizontal-padding: 32px !default; + $fluent-menu-item-line-height: ds.$line-height-160 !default; + $fluent-menu-horizontal-padding: ds.$spacing-80 !default; + $fluent-menu-item-with-icon-horizontal-padding: ds.$spacing-320 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss index c2fd8daf91af..bcf173631c58 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss @@ -1,15 +1,16 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-numberbox-spin-container-width: 24px !default; +$fluent-numberbox-spin-container-width: ds.$spacing-240 !default; $fluent-numberbox-touch-friendly-spin-container-width: null !default; @if $size == "default" { - $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; + $fluent-numberbox-touch-friendly-spin-container-width: ds.$spacing-480 !default; } @else if $size == "compact" { - $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; + $fluent-numberbox-touch-friendly-spin-container-width: ds.$spacing-480 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss index 67a2a019698a..4a75478aa6a9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss @@ -1,26 +1,27 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-pagination-paddings: 13px !default; -$fluent-pagination-separator-paddings: 8px !default; -$fluent-pagination-page-padding: 9px 12px !default; -$fluent-pagination-page-line-height: 12px !default; -$fluent-pagination-page-font-size: 12px !default; +$fluent-pagination-paddings: ds.$spacing-130 !default; +$fluent-pagination-separator-paddings: ds.$spacing-80 !default; +$fluent-pagination-page-padding: ds.$spacing-90 ds.$spacing-120 !default; +$fluent-pagination-page-line-height: ds.$line-height-120 !default; +$fluent-pagination-page-font-size: ds.$font-size-120 !default; $fluent-pagination-navbutton-paddings: $fluent-pagination-page-padding !default; -$fluent-pagination-navbutton-height: 12px !default; +$fluent-pagination-navbutton-height: ds.$spacing-120 !default; $fluent-pagination-navbutton-icon-size: null !default; $fluent-pagination-light-pagesizes-min-width: null !default; $fluent-pagination-light-pageindex-min-width: null !default; @if $size == "default" { - $fluent-pagination-navbutton-icon-size: 21px !default; - $fluent-pagination-light-pagesizes-min-width: 62px !default; - $fluent-pagination-light-pageindex-min-width: 32px !default; + $fluent-pagination-navbutton-icon-size: ds.$spacing-210 !default; + $fluent-pagination-light-pagesizes-min-width: 62px !default; // dx-offscale: 62px + $fluent-pagination-light-pageindex-min-width: ds.$spacing-320 !default; } @else if $size == "compact" { - $fluent-pagination-navbutton-icon-size: 16px !default; - $fluent-pagination-light-pagesizes-min-width: 42px !default; - $fluent-pagination-light-pageindex-min-width: 27px !default; + $fluent-pagination-navbutton-icon-size: ds.$spacing-160 !default; + $fluent-pagination-light-pagesizes-min-width: 42px !default; // dx-offscale: 42px + $fluent-pagination-light-pageindex-min-width: 27px !default; // dx-offscale: 27px } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss index 243dd6959ac2..0c978bfe459a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,31 +11,31 @@ $pivotgrid-header-top-bottom-padding: null !default; $pivotgrid-button-top-padding: null !default; $area-field-top-bottom-padding: null !default; -$pivotgrid-empty-column-width: 19px !default; -$pivotgrid-field-indicators-offset: 6px !default; -$pivotgrid-indicators-line-height: 12px !default; -$pivotgrid-empty-area-text-padding: 5px !default; +$pivotgrid-empty-column-width: ds.$spacing-190 !default; +$pivotgrid-field-indicators-offset: ds.$spacing-60 !default; +$pivotgrid-indicators-line-height: ds.$line-height-120 !default; +$pivotgrid-empty-area-text-padding: ds.$spacing-50 !default; $area-field-border-radius: null !default; @if $size == "default" { - $fluent-pivotgrid-cell-padding: 10px 16px !default; - $pivotgrid-common-left-right-padding: 10px !default; - $pivotgrid-header-top-bottom-padding: 14px !default; - $fluent-pivotgrid-expanded-cell-padding: 10px 14px 10px 19px !default; - $fluent-pivotgrid-total-text-left-padding: 22px !default; - $pivotgrid-button-top-padding: 10px !default; - $area-field-border-radius: 6px !default; - $area-field-top-bottom-padding: 5px !default; + $fluent-pivotgrid-cell-padding: ds.$spacing-100 ds.$spacing-160 !default; + $pivotgrid-common-left-right-padding: ds.$spacing-100 !default; + $pivotgrid-header-top-bottom-padding: ds.$spacing-140 !default; + $fluent-pivotgrid-expanded-cell-padding: ds.$spacing-100 ds.$spacing-140 ds.$spacing-100 ds.$spacing-190 !default; + $fluent-pivotgrid-total-text-left-padding: ds.$spacing-220 !default; + $pivotgrid-button-top-padding: ds.$spacing-100 !default; + $area-field-border-radius: ds.$border-radius-60 !default; + $area-field-top-bottom-padding: ds.$spacing-50 !default; } @else if $size == "compact" { - $fluent-pivotgrid-cell-padding: 7px 11px !default; - $pivotgrid-common-left-right-padding: 8px !default; - $pivotgrid-header-top-bottom-padding: 5px !default; - $fluent-pivotgrid-expanded-cell-padding: 7px 8px 7px 13px !default; - $fluent-pivotgrid-total-text-left-padding: 16px !default; - $pivotgrid-button-top-padding: 5px !default; - $area-field-border-radius: 4px !default; - $area-field-top-bottom-padding: 1px !default; + $fluent-pivotgrid-cell-padding: ds.$spacing-70 ds.$spacing-110 !default; + $pivotgrid-common-left-right-padding: ds.$spacing-80 !default; + $pivotgrid-header-top-bottom-padding: ds.$spacing-50 !default; + $fluent-pivotgrid-expanded-cell-padding: ds.$spacing-70 ds.$spacing-80 ds.$spacing-70 ds.$spacing-130 !default; + $fluent-pivotgrid-total-text-left-padding: ds.$spacing-160 !default; + $pivotgrid-button-top-padding: ds.$spacing-50 !default; + $area-field-border-radius: ds.$border-radius-40 !default; + $area-field-top-bottom-padding: ds.$spacing-10 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss index d740b96920d8..3d3971ec464b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss @@ -13,7 +13,7 @@ $popup-title-color: $base-text-color !default; $popup-title-border-color: $base-border-color !default; $popup-bottom-bg: $popup-title-bg !default; $popup-bottom-color: $base-text-color !default; -$popup-border-radius: $base-border-radius * 2 !default; +$popup-border-radius: calc(#{$base-border-radius} * 2) !default; $popup-content-shadow-color1: null !default; $popup-content-shadow-color2: null !default; $popup-focused-content-shadow-color: null !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss index 3dc25d0c2292..027b7af751ae 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss @@ -75,7 +75,7 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size; } .dx-popup-content.dx-dialog-content { - min-width: 220px - 2 * $fluent-popup-content-padding; + min-width: calc(220px - 2 * #{$fluent-popup-content-padding}); padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss index 93f5409ad501..c5159d446152 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; @use "colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,38 +12,38 @@ $fluent-popup-toolbar-horizontal-padding: null !default; $fluent-popup-bottom-toolbar-height: null !default; $fluent-popup-toolbar-height: null !default; -$fluent-popup-button-margin: 0 8px !default; -$fluent-popup-toolbar-item-spacing: 8px !default; +$fluent-popup-button-margin: 0 ds.$spacing-80 !default; +$fluent-popup-toolbar-item-spacing: ds.$spacing-80 !default; $fluent-popup-content-shadow: null !default; $fluent-popup-focused-content-shadow: null !default; @if $size == "default" { - $fluent-popup-content-padding: 24px !default; - $fluent-popup-content-vertical-padding: 16px !default; - $fluent-popup-content-withtitle-top-padding: 24px !default; - $fluent-popup-content-withtitle-bottom-padding: 16px !default; + $fluent-popup-content-padding: ds.$spacing-240 !default; + $fluent-popup-content-vertical-padding: ds.$spacing-160 !default; + $fluent-popup-content-withtitle-top-padding: ds.$spacing-240 !default; + $fluent-popup-content-withtitle-bottom-padding: ds.$spacing-160 !default; - $fluent-popup-toolbar-horizontal-padding: 24px !default; - $fluent-popup-bottom-toolbar-height: 48px !default; - $fluent-popup-toolbar-height: 48px !default; + $fluent-popup-toolbar-horizontal-padding: ds.$spacing-240 !default; + $fluent-popup-bottom-toolbar-height: ds.$spacing-480 !default; + $fluent-popup-toolbar-height: ds.$spacing-480 !default; - $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; - $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; + $fluent-popup-content-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-color1, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 ds.$spacing-120 0 $popup-focused-content-shadow-color, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-focused-content-shadow-color !default; } @else if $size == "compact" { - $fluent-popup-content-padding: 16px !default; - $fluent-popup-content-vertical-padding: 12px !default; - $fluent-popup-content-withtitle-top-padding: 16px !default; - $fluent-popup-content-withtitle-bottom-padding: 12px !default; + $fluent-popup-content-padding: ds.$spacing-160 !default; + $fluent-popup-content-vertical-padding: ds.$spacing-120 !default; + $fluent-popup-content-withtitle-top-padding: ds.$spacing-160 !default; + $fluent-popup-content-withtitle-bottom-padding: ds.$spacing-120 !default; - $fluent-popup-toolbar-horizontal-padding: 16px !default; - $fluent-popup-bottom-toolbar-height: 36px !default; - $fluent-popup-toolbar-height: 36px !default; + $fluent-popup-toolbar-horizontal-padding: ds.$spacing-160 !default; + $fluent-popup-bottom-toolbar-height: ds.$spacing-360 !default; + $fluent-popup-toolbar-height: ds.$spacing-360 !default; - $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; - $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; + $fluent-popup-content-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-color1, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 ds.$spacing-120 0 $popup-focused-content-shadow-color, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-focused-content-shadow-color !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss index e845336ff37d..37b8e6039f8e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,11 +9,11 @@ $progressbar-status-margin-top: null !default; $progressbar-indeterminate-background-width: 90%; @if $size == "default" { - $progressbar-height: 4px !default; - $progressbar-status-margin-top: 12px !default; + $progressbar-height: ds.$spacing-40 !default; + $progressbar-status-margin-top: ds.$spacing-120 !default; } @else if $size == "compact" { - $progressbar-height: 2px !default; - $progressbar-status-margin-top: 8px !default; + $progressbar-height: ds.$spacing-20 !default; + $progressbar-status-margin-top: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss index 4a1b17b0ebfb..5e68605a263b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss @@ -1,17 +1,18 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-radiobutton-size: 16px !default; -$fluent-radiobutton-dot-size: 10px !default; +$fluent-radiobutton-size: ds.$spacing-160 !default; +$fluent-radiobutton-dot-size: ds.$spacing-100 !default; -$fluent-radiobutton-border-width: 1px !default; +$fluent-radiobutton-border-width: ds.$border-width-10 !default; $fluent-radio-value-container-padding: null !default; @if $size == "default" { - $fluent-radio-value-container-padding: 12px !default; + $fluent-radio-value-container-padding: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-radio-value-container-padding: 8px !default; + $fluent-radio-value-container-padding: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss index 68d4e89dac25..4fa3b2dcc904 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -6,12 +7,12 @@ $fluent-radio-button-vertical-margin: null !default; $fluent-radio-group-horizontal-gap: null !default; @if $size == "default" { - $fluent-radio-group-horizontal-gap: 16px !default; - $fluent-radio-button-vertical-margin: 12px !default; + $fluent-radio-group-horizontal-gap: ds.$spacing-160 !default; + $fluent-radio-button-vertical-margin: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-radio-group-horizontal-gap: 12px !default; - $fluent-radio-button-vertical-margin: 6px !default; + $fluent-radio-group-horizontal-gap: ds.$spacing-120 !default; + $fluent-radio-button-vertical-margin: ds.$spacing-60 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss index 81a32d4c3565..810f384c7cba 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss @@ -9,5 +9,5 @@ // adduse .dx-rangeslider-start-handle { - margin-inline-start: math.div(-$fluent-slider-handle-size, 2); + margin-inline-start: calc(#{$fluent-slider-handle-size} / -2); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss index b422f99e08d4..dedca05dee2d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-recurrence-count-number-box-top-margin: null !default; $fluent-recurrence-interval-number-box-margin-top: null !default; @if $size == "default" { - $fluent-recurrence-until-date-box-top-margin: 60px !default; - $fluent-recurrence-count-number-box-top-margin: 102px !default; - $fluent-recurrence-interval-number-box-margin-top: 30px !default; + $fluent-recurrence-until-date-box-top-margin: ds.$spacing-600 !default; + $fluent-recurrence-count-number-box-top-margin: 102px !default; // dx-offscale: 102px + $fluent-recurrence-interval-number-box-margin-top: ds.$spacing-300 !default; } @else if $size == "compact" { - $fluent-recurrence-until-date-box-top-margin: 46px !default; - $fluent-recurrence-count-number-box-top-margin: 78px !default; - $fluent-recurrence-interval-number-box-margin-top: 22px !default; + $fluent-recurrence-until-date-box-top-margin: 46px !default; // dx-offscale: 46px + $fluent-recurrence-count-number-box-top-margin: 78px !default; // dx-offscale: 78px + $fluent-recurrence-interval-number-box-margin-top: ds.$spacing-220 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss index 4e13eab72723..ad3fda2e410f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss @@ -57,7 +57,7 @@ @use "../recurrenceEditor" as *; @use "../scrollable"; -$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5; +$fluent-scheduler-all-day-table-cell-height: calc(#{$fluent-scheduler-workspace-date-table-cell-height} * 1.5); $fluent-scheduler-month-date-text-size: 14px; @@ -93,7 +93,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; font-size: $fluent-scheduler-time-panel-font-size; .dx-scheduler-small & { - font-size: $fluent-scheduler-time-panel-font-size - 1; + font-size: calc(#{$fluent-scheduler-time-panel-font-size} - 1px); } } @@ -137,7 +137,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; } .dx-scheduler-small & { - font-size: $fluent-scheduler-all-day-title-font-size * 0.8; + font-size: calc(#{$fluent-scheduler-all-day-title-font-size} * 0.8); padding-right: 2px; } @@ -368,7 +368,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; font-size: 14px; .dx-scheduler-small & { - margin: 0 $fluent-scheduler-header-panel-margin * baseScheduler.$scheduler-small-size-factor; + margin: 0 calc(#{$fluent-scheduler-header-panel-margin} * #{baseScheduler.$scheduler-small-size-factor}); } &:last-child { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss index 764fadebbc69..7cf3ecd0f558 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss @@ -2,6 +2,7 @@ @use "../button/colors" as *; @use "../form/sizes" as *; @use "../toolbar/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; $fluent-scheduler-workspace-date-table-cell-height: null !default; @@ -52,8 +53,8 @@ $fluent-scheduler-appointment-15min-icon-right: null !default; $fluent-scheduler-appointment-20min-recurrence-padding-right: null !default; $fluent-scheduler-appointment-20min-icon-right: null !default; -$scheduler-left-column-width: 65px !default; -$fluent-scheduler-timeline-date-table-cell-height: 50px !default; +$scheduler-left-column-width: 65px !default; // dx-offscale: 65px +$fluent-scheduler-timeline-date-table-cell-height: 50px !default; // dx-offscale: 50px /** * $name 15. Border radius @@ -62,158 +63,158 @@ $fluent-scheduler-timeline-date-table-cell-height: 50px !default; $scheduler-border-radius: 0 !default; $fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size; -$fluent-scheduler-appointment-month-text-size: 12px !default; -$fluent-scheduler-workspace-info-text-size: 16px !default; -$fluent-scheduler-all-day-title-font-size: 12px !default; -$fluent-scheduler-time-panel-font-size: 12px !default; -$fluent-scheduler-header-panel-margin: 14px !default; -$fluent-scheduler-group-header-font-size: 14px !default; -$fluent-scheduler-group-header-table-cell-width: 100px !default; -$fluent-scheduler-appointment-transparent-left-border: 1px solid transparent !default; -$fluent-scheduler-appointment-transparent-right-border: 1px solid transparent !default; -$fluent-scheduler-workspace-month-header-height: 22px !default; -$fluent-scheduler-workspace-month-timeline--time-height: 34px !default; +$fluent-scheduler-appointment-month-text-size: ds.$spacing-120 !default; +$fluent-scheduler-workspace-info-text-size: ds.$spacing-160 !default; +$fluent-scheduler-all-day-title-font-size: ds.$font-size-120 !default; +$fluent-scheduler-time-panel-font-size: ds.$font-size-120 !default; +$fluent-scheduler-header-panel-margin: ds.$spacing-140 !default; +$fluent-scheduler-group-header-font-size: ds.$font-size-140 !default; +$fluent-scheduler-group-header-table-cell-width: ds.$spacing-1000 !default; +$fluent-scheduler-appointment-transparent-left-border: ds.$spacing-10 solid transparent !default; +$fluent-scheduler-appointment-transparent-right-border: ds.$spacing-10 solid transparent !default; +$fluent-scheduler-workspace-month-header-height: ds.$spacing-220 !default; +$fluent-scheduler-workspace-month-timeline--time-height: ds.$spacing-340 !default; $agenda-appointment-title-font-size: null !default; $fluent-scheduler-header-height: null !default; $fluent-scheduler-header-offset: null !default; -$scheduler-timeline-cell-height: 50px !default; +$scheduler-timeline-cell-height: 50px !default; // dx-offscale: 50px $header-day-element-height: null !default; $fluent-scheduler-collapsed-all-day-table-cell-height: null !default; -$header-panel-time-cell-height: 32px !default; +$header-panel-time-cell-height: ds.$spacing-320 !default; $header-panel-time-cell-padding: null !default; @if $size == "default" { - $fluent-scheduler-collapsed-all-day-table-cell-height: 32px !default; - $header-panel-time-cell-padding: 12px !default; - - $header-day-element-height: 26px; - $fluent-scheduler-workspace-date-table-cell-height: 38px !default; - - $fluent-scheduler-navigator-height: 36px !default; - $fluent-scheduler-header-panel-day-font-size: 16px !default; - $fluent-scheduler-header-height: 46px !default; - $fluent-scheduler-header-offset: 0 12px !default; - $fluent-scheduler-toolbar-item-offset: 4px !default; - - $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default; - $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default; - $fluent-scheduler-workspace-month-cell-left-offset: 8px !default; - - $fluent-scheduler-appointment-content-padding: 6px 8px 6px 12px !default; - $fluent-scheduler-recurring-appointment-content-padding: 6px 20px 6px 12px !default; - $fluent-scheduler-appointment-content-padding-rtl: 6px 12px 6px 8px !default; - $fluent-scheduler-recurring-appointment-content-padding-rtl: 6px 12px 6px 20px !default; - $fluent-scheduler-dropdown-button-height: 22px !default; - $fluent-scheduler-dropdown-button-padding: 4px !default; - $fluent-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default; - $fluent-scheduler-dropdown-button-vertical-margin: 5px 3px 3px 3px !default; - $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; - - $fluent-scheduler-appointment-tooltip-content-margin-left: 6px !default; - $fluent-tooltip-marker-dimension: 12px !default; + $fluent-scheduler-collapsed-all-day-table-cell-height: ds.$spacing-320 !default; + $header-panel-time-cell-padding: ds.$spacing-120 !default; + + $header-day-element-height: ds.$spacing-260; + $fluent-scheduler-workspace-date-table-cell-height: 38px !default; // dx-offscale: 38px + + $fluent-scheduler-navigator-height: ds.$spacing-360 !default; + $fluent-scheduler-header-panel-day-font-size: ds.$font-size-160 !default; + $fluent-scheduler-header-height: 46px !default; // dx-offscale: 46px + $fluent-scheduler-header-offset: 0 ds.$spacing-120 !default; + $fluent-scheduler-toolbar-item-offset: ds.$spacing-40 !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: ds.$font-size-160 !default; + $fluent-scheduler-appointment-tooltip-date-font-size: ds.$font-size-140 !default; + $fluent-scheduler-workspace-month-cell-left-offset: ds.$spacing-80 !default; + + $fluent-scheduler-appointment-content-padding: ds.$spacing-60 ds.$spacing-80 ds.$spacing-60 ds.$spacing-120 !default; + $fluent-scheduler-recurring-appointment-content-padding: ds.$spacing-60 ds.$spacing-200 ds.$spacing-60 ds.$spacing-120 !default; + $fluent-scheduler-appointment-content-padding-rtl: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-80 !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-200 !default; + $fluent-scheduler-dropdown-button-height: ds.$spacing-220 !default; + $fluent-scheduler-dropdown-button-padding: ds.$spacing-40 !default; + $fluent-scheduler-dropdown-button-margin: ds.$spacing-50 ds.$spacing-10 ds.$spacing-30 ds.$spacing-30 !default; + $fluent-scheduler-dropdown-button-vertical-margin: ds.$spacing-50 ds.$spacing-30 ds.$spacing-30 ds.$spacing-30 !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 ds.$spacing-20 0 ds.$spacing-10 !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: ds.$spacing-60 !default; + $fluent-tooltip-marker-dimension: ds.$spacing-120 !default; $fluent-scheduler-appointment-tooltip-title-margin-top: 0 !default; - $fluent-scheduler-appointment-tooltip-remove-padding-top: 1px !default; - - $fluent-scheduler-appointment-popup-toolbar-height: 56px !default; - $fluent-scheduler-appointment-popup-icon-container-height: 32px !default; - $fluent-scheduler-appointment-popup-icon-padding-right: 10px !default; - $fluent-scheduler-appointment-popup-icon-margin-top: 24px !default; - $fluent-scheduler-appointment-popup-item-padding-horizontal: 6px !default; - $fluent-scheduler-appointment-popup-all-day-item-height: 40px !default; - $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default; - $fluent-scheduler-appointment-popup-repeat-end-item-height: 32px !default; - - $agenda-appointment-title-font-size: 14px; - - $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; - $fluent-scheduler-appointment-15min-height: 17px !default; - $fluent-scheduler-appointment-20min-height: 24px !default; - $fluent-scheduler-appointment-25min-height: 32px !default; - - $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-10min-title-font-size: 8px !default; - $fluent-scheduler-appointment-10min-title-line-height: 12px !default; - $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-10min-icon-right: 2px !default; - - $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-15min-title-font-size: 12px !default; - $fluent-scheduler-appointment-15min-title-line-height: 18px !default; - $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-15min-icon-right: 2px !default; - - $fluent-scheduler-appointment-20min-icon-right: 2px !default; - $fluent-scheduler-appointment-20min-recurrence-padding-right: 18px !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: ds.$spacing-10 !default; + + $fluent-scheduler-appointment-popup-toolbar-height: ds.$spacing-560 !default; + $fluent-scheduler-appointment-popup-icon-container-height: ds.$spacing-320 !default; + $fluent-scheduler-appointment-popup-icon-padding-right: ds.$spacing-100 !default; + $fluent-scheduler-appointment-popup-icon-margin-top: ds.$spacing-240 !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: ds.$spacing-60 !default; + $fluent-scheduler-appointment-popup-all-day-item-height: ds.$spacing-400 !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-120 !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-320 !default; + + $agenda-appointment-title-font-size: ds.$font-size-140; + + $fluent-scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default; + $fluent-scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid + + $fluent-scheduler-appointment-10min-recurrence-padding-right: ds.$spacing-140 !default; + $fluent-scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default; + $fluent-scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; + $fluent-scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-10min-icon-right: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: ds.$spacing-140 !default; + $fluent-scheduler-appointment-15min-title-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-title-line-height: ds.$line-height-180 !default; + $fluent-scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-icon-right: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-20min-icon-right: ds.$spacing-20 !default; + $fluent-scheduler-appointment-20min-recurrence-padding-right: ds.$spacing-180 !default; } @else if $size == "compact" { - $fluent-scheduler-collapsed-all-day-table-cell-height: 24px !default; - $header-panel-time-cell-padding: 8px !default; - - $header-day-element-height: 24px; - $fluent-scheduler-workspace-date-table-cell-height: 28px !default; - - $fluent-scheduler-navigator-height: 28px !default; - $fluent-scheduler-header-panel-day-font-size: 14px !default; - $fluent-scheduler-header-height: 34px !default; - $fluent-scheduler-header-offset: 2px 8px !default; - $fluent-scheduler-toolbar-item-offset: 4px !default; - - $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default; - $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default; - $fluent-scheduler-workspace-month-cell-left-offset: 4px !default; - - $fluent-scheduler-appointment-content-padding: 4px 6px 4px 8px !default; - $fluent-scheduler-recurring-appointment-content-padding: 4px 16px 4px 8px !default; - $fluent-scheduler-appointment-content-padding-rtl: 4px 8px 4px 6px !default; - $fluent-scheduler-recurring-appointment-content-padding-rtl: 4px 8px 4px 16px !default; - $fluent-scheduler-dropdown-button-height: 18px !default; - $fluent-scheduler-dropdown-button-padding: 2px !default; - $fluent-scheduler-dropdown-button-margin: 2px 1px 2px 3px !default; - $fluent-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default; - $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; - - $fluent-scheduler-appointment-tooltip-content-margin-left: 8px !default; - $fluent-tooltip-marker-dimension: 18px !default; - $fluent-scheduler-appointment-tooltip-title-margin-top: 3px !default; - $fluent-scheduler-appointment-tooltip-remove-padding-top: 2px !default; - - $fluent-scheduler-appointment-popup-toolbar-height: 48px !default; - $fluent-scheduler-appointment-popup-icon-container-height: 24px !default; - $fluent-scheduler-appointment-popup-icon-padding-right: 8px !default; - $fluent-scheduler-appointment-popup-icon-margin-top: 18px !default; - $fluent-scheduler-appointment-popup-item-padding-horizontal: 4px !default; - $fluent-scheduler-appointment-popup-all-day-item-height: 30px !default; - $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; - $fluent-scheduler-appointment-popup-repeat-end-item-height: 24px !default; - - $agenda-appointment-title-font-size: 13px; - - $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; - $fluent-scheduler-appointment-15min-height: 17px !default; - $fluent-scheduler-appointment-20min-height: 24px !default; - $fluent-scheduler-appointment-25min-height: 32px !default; - - $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-10min-title-font-size: 8px !default; - $fluent-scheduler-appointment-10min-title-line-height: 12px !default; - $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-10min-icon-right: 2px !default; - - $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default; - $fluent-scheduler-appointment-15min-title-font-size: 12px !default; - $fluent-scheduler-appointment-15min-title-line-height: 12px !default; - $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-15min-icon-right: 5px !default; - - $fluent-scheduler-appointment-20min-recurrence-padding-right: 20px !default; - $fluent-scheduler-appointment-20min-icon-right: 5px !default; + $fluent-scheduler-collapsed-all-day-table-cell-height: ds.$spacing-240 !default; + $header-panel-time-cell-padding: ds.$spacing-80 !default; + + $header-day-element-height: ds.$spacing-240; + $fluent-scheduler-workspace-date-table-cell-height: ds.$spacing-280 !default; + + $fluent-scheduler-navigator-height: ds.$spacing-280 !default; + $fluent-scheduler-header-panel-day-font-size: ds.$font-size-140 !default; + $fluent-scheduler-header-height: ds.$spacing-340 !default; + $fluent-scheduler-header-offset: ds.$spacing-20 ds.$spacing-80 !default; + $fluent-scheduler-toolbar-item-offset: ds.$spacing-40 !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: ds.$font-size-140 !default; + $fluent-scheduler-appointment-tooltip-date-font-size: ds.$font-size-110 !default; + $fluent-scheduler-workspace-month-cell-left-offset: ds.$spacing-40 !default; + + $fluent-scheduler-appointment-content-padding: ds.$spacing-40 ds.$spacing-60 ds.$spacing-40 ds.$spacing-80 !default; + $fluent-scheduler-recurring-appointment-content-padding: ds.$spacing-40 ds.$spacing-160 ds.$spacing-40 ds.$spacing-80 !default; + $fluent-scheduler-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-60 !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-160 !default; + $fluent-scheduler-dropdown-button-height: ds.$spacing-180 !default; + $fluent-scheduler-dropdown-button-padding: ds.$spacing-20 !default; + $fluent-scheduler-dropdown-button-margin: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-30 !default; + $fluent-scheduler-dropdown-button-vertical-margin: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-10 !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 ds.$spacing-20 0 ds.$spacing-10 !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: ds.$spacing-80 !default; + $fluent-tooltip-marker-dimension: ds.$spacing-180 !default; + $fluent-scheduler-appointment-tooltip-title-margin-top: ds.$spacing-30 !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-popup-toolbar-height: ds.$spacing-480 !default; + $fluent-scheduler-appointment-popup-icon-container-height: ds.$spacing-240 !default; + $fluent-scheduler-appointment-popup-icon-padding-right: ds.$spacing-80 !default; + $fluent-scheduler-appointment-popup-icon-margin-top: ds.$spacing-180 !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: ds.$spacing-40 !default; + $fluent-scheduler-appointment-popup-all-day-item-height: ds.$spacing-300 !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-80 !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-240 !default; + + $agenda-appointment-title-font-size: ds.$spacing-130; + + $fluent-scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default; + $fluent-scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid + + $fluent-scheduler-appointment-10min-recurrence-padding-right: ds.$spacing-140 !default; + $fluent-scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default; + $fluent-scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; + $fluent-scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-10min-icon-right: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: ds.$spacing-160 !default; + $fluent-scheduler-appointment-15min-title-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-title-line-height: ds.$line-height-120 !default; + $fluent-scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-icon-right: ds.$spacing-50 !default; + + $fluent-scheduler-appointment-20min-recurrence-padding-right: ds.$spacing-200 !default; + $fluent-scheduler-appointment-20min-icon-right: ds.$spacing-50 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss index 2a83ace0c3af..b9185192ec6d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss @@ -14,7 +14,7 @@ $scrollview-loading-indicator-size: 42px; .dx-scrollview-scrollbottom-text, .dx-scrollview-pull-down-text { margin-left: 10px; - top: math.div(50px - $fluent-base-font-size, 2); + top: calc((50px - #{$fluent-base-font-size}) / 2); display: inline-block; .dx-rtl & { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss index 6e9d2691cc2d..e8d4211f5a9f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-scrollbar-size-thin: 6px; -$fluent-scrollbar-size: 13px; +$fluent-scrollbar-size-thin: ds.$spacing-60; +$fluent-scrollbar-size: ds.$spacing-130; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss index ca6ac16b4c50..b178905d5de5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss @@ -15,9 +15,9 @@ } .dx-slider-bar { - margin-top: math.div($fluent-slider-wrapper-height - $fluent-slider-track-height, 2); - margin-right: math.div($fluent-slider-handle-size, 2); - margin-left: math.div($fluent-slider-handle-size, 2); + margin-top: calc((#{$fluent-slider-wrapper-height} - #{$fluent-slider-track-height}) / 2); + margin-right: calc((#{$fluent-slider-handle-size}) / 2); + margin-left: calc((#{$fluent-slider-handle-size}) / 2); background: $fluent-slider-bar-bg; height: $fluent-slider-track-height; border-radius: $fluent-slider-track-border-radius; @@ -33,8 +33,8 @@ } .dx-slider-handle { - margin-top: math.div($fluent-slider-track-height, 2) - math.div($fluent-slider-handle-size, 2); - margin-inline-end: math.div(-$fluent-slider-handle-size, 2); + margin-top: calc(#{$fluent-slider-track-height} / 2 - #{$fluent-slider-handle-size} / 2); + margin-inline-end: calc(#{$fluent-slider-handle-size} / -2); width: $fluent-slider-handle-size; height: $fluent-slider-handle-size; border-radius: $fluent-slider-radius; @@ -82,11 +82,11 @@ &.dx-state-disabled { .dx-popup-content { - padding-top: math.div($fluent-slider-tooltip-width, 2); + padding-top: calc((#{$fluent-slider-tooltip-width}) / 2); .dx-slider-tooltip-position-top & { padding-top: 6px; - padding-bottom: math.div($fluent-slider-tooltip-width, 2); + padding-bottom: calc((#{$fluent-slider-tooltip-width}) / 2); } } } @@ -95,11 +95,11 @@ } .dx-slider-tooltip-position-top { - padding-top: $fluent-slider-tooltip-width + 6; + padding-top: calc(#{$fluent-slider-tooltip-width} + 6px); } .dx-slider-tooltip-position-bottom { - padding-bottom: $fluent-slider-tooltip-width + 6; + padding-bottom: calc(#{$fluent-slider-tooltip-width} + 6px); } .dx-slider-label-position-bottom { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss index 59a9fe40718d..38713ce2d66a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,29 +8,29 @@ $fluent-slider-wrapper-height: null !default; $fluent-slider-tooltip-width: null !default; $fluent-slider-top-tooltip-margin: null !default; -$fluent-slider-height: 28px !default; // for fieldset height +$fluent-slider-height: ds.$spacing-280 !default; // for fieldset height $fluent-slider-radius: 50% !default; $fluent-slider-track-height: null !default; -$fluent-slider-track-border-radius: 2px !default; +$fluent-slider-track-border-radius: ds.$border-radius-20 !default; $fluent-slider-handle-height: null !default; $fluent-slider-handle-inner-size: null !default; @if $size == "default" { - $fluent-slider-track-height: 4px !default; - $fluent-slider-handle-height: 18px !default; - $fluent-slider-handle-size: 20px !default; - $fluent-slider-handle-inner-size: 18px !default; - $fluent-slider-wrapper-height: 32px !default; - $fluent-slider-tooltip-width: 34px !default; - $fluent-slider-top-tooltip-margin: -5px !default; + $fluent-slider-track-height: ds.$spacing-40 !default; + $fluent-slider-handle-height: ds.$spacing-180 !default; + $fluent-slider-handle-size: ds.$spacing-200 !default; + $fluent-slider-handle-inner-size: ds.$spacing-180 !default; + $fluent-slider-wrapper-height: ds.$spacing-320 !default; + $fluent-slider-tooltip-width: ds.$spacing-340 !default; + $fluent-slider-top-tooltip-margin: -5px !default; // dx-offscale: -5px } @else if $size == "compact" { - $fluent-slider-track-height: 2px !default; - $fluent-slider-handle-height: 14px !default; - $fluent-slider-handle-size: 16px !default; - $fluent-slider-handle-inner-size: 14px !default; - $fluent-slider-wrapper-height: 26px !default; - $fluent-slider-tooltip-width: 28px !default; - $fluent-slider-top-tooltip-margin: -2px !default; + $fluent-slider-track-height: ds.$spacing-20 !default; + $fluent-slider-handle-height: ds.$spacing-140 !default; + $fluent-slider-handle-size: ds.$spacing-160 !default; + $fluent-slider-handle-inner-size: ds.$spacing-140 !default; + $fluent-slider-wrapper-height: ds.$spacing-260 !default; + $fluent-slider-tooltip-width: ds.$spacing-280 !default; + $fluent-slider-top-tooltip-margin: ds.$spacing-minus-20 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss index ea4e78592f90..4ca31379bea9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,15 +9,15 @@ $fluent-main-fa-button-size: null !default; $fluent-fa-button-size: null !default; @if $size == "default" { - $fluent-main-fa-button-size: 44px !default; - $fluent-fa-button-size: 44px !default; - $fluent-main-fa-button-horizontal-padding: 16px; - $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px; + $fluent-main-fa-button-size: ds.$spacing-440 !default; + $fluent-fa-button-size: ds.$spacing-440 !default; + $fluent-main-fa-button-horizontal-padding: ds.$spacing-160; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 ds.$spacing-80; } @else if $size == "compact" { - $fluent-main-fa-button-size: 32px !default; - $fluent-fa-button-size: 32px !default; - $fluent-main-fa-button-horizontal-padding: 12px; - $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px; + $fluent-main-fa-button-size: ds.$spacing-320 !default; + $fluent-fa-button-size: ds.$spacing-320 !default; + $fluent-main-fa-button-horizontal-padding: ds.$spacing-120; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 ds.$spacing-40; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss index 6f0cb64e572f..94c1d0dbe502 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$splitter-resize-handle-icon-size: 20px; +$splitter-resize-handle-icon-size: ds.$spacing-200; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss index ffaac27f33cd..4a5cfc2b35b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss @@ -2,6 +2,7 @@ @use "../colors" as *; @use "../sizes" as *; @use "../typography/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -13,25 +14,25 @@ $stepper-step-content-column-gap: null !default; $stepper-step-optional-mark-font-size: $fluent-xs-font-size !default; $stepper-step-icon-size: $fluent-button-icon-size !default; -$stepper-step-selected-font-weight: 600 !default; +$stepper-step-selected-font-weight: ds.$font-weight-600 !default; $stepper-step-transition-duration: .4s !default; @if $size == "default" { - $stepper-padding: 12px !default; - $stepper-step-min-size: 48px !default; - $stepper-step-indicator-size: 32px !default; - $stepper-step-content-row-gap: 8px !default; - $stepper-step-content-column-gap: 12px !default; + $stepper-padding: ds.$spacing-120 !default; + $stepper-step-min-size: ds.$spacing-480 !default; + $stepper-step-indicator-size: ds.$spacing-320 !default; + $stepper-step-content-row-gap: ds.$spacing-80 !default; + $stepper-step-content-column-gap: ds.$spacing-120 !default; } @else if $size == "compact" { - $stepper-padding: 8px !default; - $stepper-step-min-size: 40px !default; - $stepper-step-indicator-size: 24px !default; - $stepper-step-content-row-gap: 6px !default; - $stepper-step-content-column-gap: 8px !default; + $stepper-padding: ds.$spacing-80 !default; + $stepper-step-min-size: ds.$spacing-400 !default; + $stepper-step-indicator-size: ds.$spacing-240 !default; + $stepper-step-content-row-gap: ds.$spacing-60 !default; + $stepper-step-content-column-gap: ds.$spacing-80 !default; } -$stepper-connector-thickness: 2px !default; +$stepper-connector-thickness: ds.$spacing-20 !default; $stepper-connector-size: $stepper-step-indicator-size !default; $stepper-connector-padding: $stepper-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss index 0342b65ea9b5..3e070ec4bb2b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss @@ -46,7 +46,7 @@ $fluent-switch-shadow: none; $switch-border-color-disabled, ); @include dx-switch-rtl( - $switch-handle-height - $switch-handle-margin, + calc(#{$switch-handle-height} - #{$switch-handle-margin}), $fluent-switch-shadow-blur-radius, $fluent-switch-container-adjustment, ); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss index b3a5482eb57c..b4ed7a97c503 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss @@ -1,10 +1,11 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-switch-width: null !default; $switch-handle-margin: null !default; -$switch-padding: 8px !default; +$switch-padding: ds.$spacing-80 !default; $switch-container-vertical-margin: null !default; $switch-container-horizontal-padding: null !default; $fluent-switch-height: null !default; @@ -12,24 +13,24 @@ $switch-handle-height: null !default; $switch-container-height: null !default; $fluent-switch-shadow-blur-radius: 0 !default; -$fluent-switch-container-adjustment: 6px !default; +$fluent-switch-container-adjustment: ds.$spacing-60 !default; @if $size == "default" { - $fluent-switch-width: 40px !default; - $switch-handle-height: 14px !default; - $switch-handle-margin: 3px !default; + $fluent-switch-width: ds.$spacing-400 !default; + $switch-handle-height: ds.$spacing-140 !default; + $switch-handle-margin: ds.$spacing-30 !default; $switch-container-vertical-margin: 0 !default; $switch-container-horizontal-padding: $switch-handle-margin !default; - $fluent-switch-height: 20px !default; + $fluent-switch-height: ds.$spacing-200 !default; $switch-container-height: $fluent-switch-height !default; } @else if $size == "compact" { - $fluent-switch-width: 32px !default; - $switch-handle-height: 12px !default; - $switch-handle-margin: 2px !default; + $fluent-switch-width: ds.$spacing-320 !default; + $switch-handle-height: ds.$spacing-120 !default; + $switch-handle-margin: ds.$spacing-20 !default; $switch-container-vertical-margin: 0 !default; $switch-container-horizontal-padding: $switch-handle-margin !default; - $fluent-switch-height: 16px !default; + $fluent-switch-height: ds.$spacing-160 !default; $switch-container-height: $fluent-switch-height !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss index 002c2ac14ca9..39b32276eb99 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss @@ -64,9 +64,9 @@ height: $fluent-indicator-thickness-secondary; @if $position == top { - top: -$fluent-tabs-item-padding-top-bottom; + top: calc(-1 * #{$fluent-tabs-item-padding-top-bottom}); } @else if $position == bottom { - bottom: -$fluent-tabs-item-padding-top-bottom; + bottom: calc(-1 * #{$fluent-tabs-item-padding-top-bottom}); } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss index 1b1aec0e4282..9aedc507da3a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss @@ -1,16 +1,17 @@ @use "../../sizes" as *; +@use "../../../../_design-system/variables/ds" as ds; // adduse -$fluent-tabs-item-gap: 4px !default; +$fluent-tabs-item-gap: ds.$spacing-40 !default; $fluent-tabs-item-padding: null !default; $fluent-tabs-item-padding-top-bottom: null !default; $fluent-tabs-item-padding-right-left: null !default; $fluent-tab-height: null !default; -$fluent-tab-font-weight-basic: 400 !default; -$fluent-tab-font-weight-accent: 500 !default; +$fluent-tab-font-weight-basic: ds.$font-weight-400 !default; +$fluent-tab-font-weight-accent: ds.$font-weight-500 !default; $fluent-base-icon-margin: null !default; $fluent-tabs-icon-size: $fluent-base-icon-size !default; @@ -21,41 +22,41 @@ $fluent-tab-nav-button-content-padding: null !default; $fluent-tab-vertical-nav-button-content-padding: null !default; -$fluent-indicator-thickness-primary: 2px !default; -$fluent-indicator-thickness-secondary: 3px !default; +$fluent-indicator-thickness-primary: ds.$spacing-20 !default; +$fluent-indicator-thickness-secondary: ds.$spacing-30 !default; $fluent-indicator-length-primary: 100% !default; $fluent-indicator-length-secondary: 100% !default; -$fluent-tab-item-border-radius-secondary: 4px !default; -$fluent-indicator-border-radius-secondary: 4px !default; +$fluent-tab-item-border-radius-secondary: ds.$border-radius-40 !default; +$fluent-indicator-border-radius-secondary: ds.$border-radius-40 !default; $fluent-badge-min-size: null !default; @if $size == "default" { - $fluent-tabs-item-padding-top-bottom: 12px !default; - $fluent-tabs-item-padding-right-left: 10px !default; + $fluent-tabs-item-padding-top-bottom: ds.$spacing-120 !default; + $fluent-tabs-item-padding-right-left: ds.$spacing-100 !default; $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; $fluent-tab-height: auto !default; - $fluent-base-icon-margin: 8px !default; - $fluent-tab-nav-button-icon-width: 20px !default; - $fluent-tab-nav-button-icon-height: 20px !default; - $fluent-tab-nav-button-icon-font-size: 20px !default; - $fluent-tab-nav-button-content-padding: 0 4px !default; - $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; - $fluent-badge-min-size: 20px !default; + $fluent-base-icon-margin: ds.$spacing-80 !default; + $fluent-tab-nav-button-icon-width: ds.$spacing-200 !default; + $fluent-tab-nav-button-icon-height: ds.$spacing-200 !default; + $fluent-tab-nav-button-icon-font-size: ds.$font-size-200 !default; + $fluent-tab-nav-button-content-padding: 0 ds.$spacing-40 !default; + $fluent-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default; + $fluent-badge-min-size: ds.$spacing-200 !default; } @else if $size == "compact" { - $fluent-tabs-item-padding-top-bottom: 8px !default; - $fluent-tabs-item-padding-right-left: 8px !default; + $fluent-tabs-item-padding-top-bottom: ds.$spacing-80 !default; + $fluent-tabs-item-padding-right-left: ds.$spacing-80 !default; $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; $fluent-tab-height: auto !default; - $fluent-base-icon-margin: 8px !default; - $fluent-tab-nav-button-icon-width: 16px !default; - $fluent-tab-nav-button-icon-height: 16px !default; - $fluent-tab-nav-button-icon-font-size: 16px !default; - $fluent-tab-nav-button-content-padding: 0 4px !default; - $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; - $fluent-badge-min-size: 16px !default; + $fluent-base-icon-margin: ds.$spacing-80 !default; + $fluent-tab-nav-button-icon-width: ds.$spacing-160 !default; + $fluent-tab-nav-button-icon-height: ds.$spacing-160 !default; + $fluent-tab-nav-button-icon-font-size: ds.$font-size-160 !default; + $fluent-tab-nav-button-content-padding: 0 ds.$spacing-40 !default; + $fluent-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default; + $fluent-badge-min-size: ds.$spacing-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss index d83c4da77b89..60c538c94014 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss @@ -25,8 +25,8 @@ &.dx-editor-underlined { .dx-tag-container { - padding-top: $fluent-tagbox-tag-container-vertical-padding + 1px; - padding-bottom: $fluent-tagbox-tag-container-vertical-padding + 1px; + padding-top: calc(#{$fluent-tagbox-tag-container-vertical-padding} + 1px); + padding-bottom: calc(#{$fluent-tagbox-tag-container-vertical-padding} + 1px); } } @@ -69,8 +69,8 @@ &.dx-editor-underlined { .dx-tag-container, .dx-placeholder::before { - padding-top: $fluent-tagbox-filled-with-label-top-padding + 1px; - padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding + 1px; + padding-top: calc(#{$fluent-tagbox-filled-with-label-top-padding} + 1px); + padding-bottom: calc(#{$fluent-tagbox-filled-with-label-bottom-padding} + 1px); } } } @@ -123,7 +123,7 @@ @include dx-icon(clear); - font-size: $fluent-tagbox-tag-content-font-size + 2px; + font-size: calc(#{$fluent-tagbox-tag-content-font-size} + 2px); &::before { content: "\f15f"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss index 2c3b9c7da6b3..f07f7fe5a32d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,8 +10,8 @@ $fluent-tagbox-tag-content-font-size: null !default; $fluent-tagbox-tag-container-padding-left: null !default; $fluent-tagbox-tag-container-vertical-padding: null !default; $fluent-tagbox-tag-height: null !default; -$fluent-tagbox-select-all-padding-bottom: 12px !default; -$fluent-tagbox-select-all-margin-bottom: 3px !default; +$fluent-tagbox-select-all-padding-bottom: ds.$spacing-120 !default; +$fluent-tagbox-select-all-margin-bottom: ds.$spacing-30 !default; $tagbox-tag-border-radius: 999em !default; $fluent-tagbox-filled-with-label-top-padding: null !default; $fluent-tagbox-filled-with-label-bottom-padding: null !default; @@ -18,29 +19,29 @@ $fluent-tagbox-tag-content-line-height: null !default; $fluent-tagbox-tag-container-gap: null !default; @if $size == "default" { - $fluent-tagbox-tag-content-padding-left: 6px !default; - $fluent-tagbox-tag-content-padding-right: 20px !default; - $fluent-tagbox-tag-content-vertical-padding: 2px !default; - $fluent-tagbox-tag-content-font-size: 12px !default; - $fluent-tagbox-tag-container-padding-left: 12px !default; - $fluent-tagbox-tag-container-vertical-padding: 5px !default; - $fluent-tagbox-tag-container-gap: 4px !default; - $fluent-tagbox-tag-height: 20px !default; + $fluent-tagbox-tag-content-padding-left: ds.$spacing-60 !default; + $fluent-tagbox-tag-content-padding-right: ds.$spacing-200 !default; + $fluent-tagbox-tag-content-vertical-padding: ds.$spacing-20 !default; + $fluent-tagbox-tag-content-font-size: ds.$font-size-120 !default; + $fluent-tagbox-tag-container-padding-left: ds.$spacing-120 !default; + $fluent-tagbox-tag-container-vertical-padding: ds.$spacing-50 !default; + $fluent-tagbox-tag-container-gap: ds.$spacing-40 !default; + $fluent-tagbox-tag-height: ds.$spacing-200 !default; $fluent-tagbox-tag-content-line-height: 1.1666em !default; - $fluent-tagbox-filled-with-label-top-padding: 9px !default; - $fluent-tagbox-filled-with-label-bottom-padding: 1px !default; + $fluent-tagbox-filled-with-label-top-padding: ds.$spacing-90 !default; + $fluent-tagbox-filled-with-label-bottom-padding: ds.$spacing-10 !default; } @else if $size == "compact" { - $fluent-tagbox-tag-content-padding-left: 4px !default; - $fluent-tagbox-tag-content-padding-right: 20px !default; + $fluent-tagbox-tag-content-padding-left: ds.$spacing-40 !default; + $fluent-tagbox-tag-content-padding-right: ds.$spacing-200 !default; $fluent-tagbox-tag-content-vertical-padding: 0 !default; - $fluent-tagbox-tag-content-font-size: 10px !default; - $fluent-tagbox-tag-container-padding-left: 8px !default; - $fluent-tagbox-tag-container-vertical-padding: 3px !default; - $fluent-tagbox-tag-container-gap: 2px !default; - $fluent-tagbox-tag-height: 16px !default; + $fluent-tagbox-tag-content-font-size: ds.$font-size-100 !default; + $fluent-tagbox-tag-container-padding-left: ds.$spacing-80 !default; + $fluent-tagbox-tag-container-vertical-padding: ds.$spacing-30 !default; + $fluent-tagbox-tag-container-gap: ds.$spacing-20 !default; + $fluent-tagbox-tag-height: ds.$spacing-160 !default; $fluent-tagbox-tag-content-line-height: 1.3333em !default; - $fluent-tagbox-filled-with-label-top-padding: 6px !default; + $fluent-tagbox-filled-with-label-top-padding: ds.$spacing-60 !default; $fluent-tagbox-filled-with-label-bottom-padding: 0 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss index 2164f02629b9..5c2ea7b6f4b2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss @@ -20,8 +20,8 @@ .dx-textarea { &.dx-editor-underlined { .dx-texteditor-input { - padding-top: $fluent-standard-texteditor-input-top-padding + 1; - padding-bottom: $fluent-standard-texteditor-input-bottom-padding + 1; + padding-top: calc(#{$fluent-standard-texteditor-input-top-padding} + 1px); + padding-bottom: calc(#{$fluent-standard-texteditor-input-bottom-padding} + 1px); } &.dx-texteditor-with-label:not(.dx-texteditor-label-outside), diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss index ede206945fd0..945eeea2df06 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss @@ -1,13 +1,14 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $textarea-content-line-height: null !default; @if $size == "default" { - $textarea-content-line-height: 20px !default; + $textarea-content-line-height: ds.$line-height-200 !default; } @else if $size == "compact" { - $textarea-content-line-height: 16px !default; + $textarea-content-line-height: ds.$line-height-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss index 130c6b7a4650..94dc92b1003a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss @@ -1,13 +1,14 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $textbox-search-icon-size: null !default; @if $size == "default" { - $textbox-search-icon-size: 32px !default; + $textbox-search-icon-size: ds.$spacing-320 !default; } @else if $size == "compact" { - $textbox-search-icon-size: 24px !default; + $textbox-search-icon-size: ds.$spacing-240 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss index 5b1105e210d5..1c953ff94076 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss @@ -15,7 +15,7 @@ // adduse $fluent-base-standard-texteditor-input-horizontal-padding: 0; -$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding; +$fluent-texteditor-invalid-badge-size: calc(#{$fluent-invalid-badge-size} + 2 * #{$fluent-invalid-badge-horizontal-padding}); $fluent-editor-custom-button-margin: 6px; $fluent-editor-border-width: 1px; @@ -210,7 +210,7 @@ $fluent-editor-border-width: 1px; @mixin texteditor-input-padding-filled() { .dx-texteditor-input { - padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-filled-texteditor-input-horizontal-padding; + padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-filled-texteditor-input-horizontal-padding}); } } @@ -227,7 +227,7 @@ $fluent-editor-border-width: 1px; &.dx-valid { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-base-standard-texteditor-input-horizontal-padding}); } } @@ -254,7 +254,7 @@ $fluent-editor-border-width: 1px; &.dx-validation-pending { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-base-standard-texteditor-input-horizontal-padding}); } } @@ -364,7 +364,7 @@ $fluent-editor-border-width: 1px; } .dx-texteditor-input { - min-height: $fluent-texteditor-input-height - 2px; + min-height: calc(#{$fluent-texteditor-input-height} - 2px); } @include validation-icon-position(); @@ -503,7 +503,7 @@ $fluent-editor-border-width: 1px; solid, $fluent-base-inline-block-height, $fluent-base-inline-block-height, - math.div(1px + $fluent-texteditor-font-size, 2), + calc((1px + #{$fluent-texteditor-font-size}) / 2), $fluent-texteditor-label-outside-top-offset, 0.5px, $fluent-filled-texteditor-input-horizontal-padding, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss index b2aa8632702e..4f305d4b9094 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -24,42 +25,42 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default; @if $size == "default" { $fluent-texteditor-line-height: 1.428571 !default; - $fluent-texteditor-font-size: 14px !default; - $fluent-texteditor-input-height: 32px !default; - $fluent-texteditor-label-outside-height: 20px !default; - $fluent-texteditor-label-outside-top-offset: 24px !default; - $fluent-texteditor-label-font-size: 12px !default; - $fluent-texteditor-label-top-offset: -1px !default; - $fluent-filled-texteditor-input-horizontal-padding: 12px !default; - $fluent-filled-texteditor-input-top-padding: 5px !default; - $fluent-filled-texteditor-input-with-label-top-padding: 8px !default; - $fluent-filled-texteditor-input-bottom-padding: 5px !default; - $fluent-filled-texteditor-input-with-label-bottom-padding: 2px !default; - $fluent-standard-texteditor-input-top-padding: 5px !default; - $fluent-standard-texteditor-input-bottom-padding: 5px !default; - $fluent-standard-texteditor-with-label-input-top-padding: 9px !default; - $fluent-standard-texteditor-with-label-input-bottom-padding: 3px !default; - $fluent-underlined-editor-button-height: 22px !default; + $fluent-texteditor-font-size: ds.$font-size-140 !default; + $fluent-texteditor-input-height: ds.$spacing-320 !default; + $fluent-texteditor-label-outside-height: ds.$spacing-200 !default; + $fluent-texteditor-label-outside-top-offset: ds.$spacing-240 !default; + $fluent-texteditor-label-font-size: ds.$font-size-120 !default; + $fluent-texteditor-label-top-offset: ds.$spacing-minus-10 !default; + $fluent-filled-texteditor-input-horizontal-padding: ds.$spacing-120 !default; + $fluent-filled-texteditor-input-top-padding: ds.$spacing-50 !default; + $fluent-filled-texteditor-input-with-label-top-padding: ds.$spacing-80 !default; + $fluent-filled-texteditor-input-bottom-padding: ds.$spacing-50 !default; + $fluent-filled-texteditor-input-with-label-bottom-padding: ds.$spacing-20 !default; + $fluent-standard-texteditor-input-top-padding: ds.$spacing-50 !default; + $fluent-standard-texteditor-input-bottom-padding: ds.$spacing-50 !default; + $fluent-standard-texteditor-with-label-input-top-padding: ds.$spacing-90 !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: ds.$spacing-30 !default; + $fluent-underlined-editor-button-height: ds.$spacing-220 !default; } @else if $size == "compact" { $fluent-texteditor-line-height: 1.3333 !default; - $fluent-texteditor-font-size: 12px !default; - $fluent-texteditor-input-height: 24px !default; - $fluent-texteditor-label-outside-height: 16px !default; - $fluent-texteditor-label-outside-top-offset: 18px !default; - $fluent-texteditor-label-font-size: 10px !default; - $fluent-texteditor-label-top-offset: -1px !default; - $fluent-filled-texteditor-input-horizontal-padding: 8px !default; - $fluent-filled-texteditor-input-top-padding: 3px !default; - $fluent-filled-texteditor-input-with-label-top-padding: 6px !default; - $fluent-filled-texteditor-input-bottom-padding: 3px !default; + $fluent-texteditor-font-size: ds.$font-size-120 !default; + $fluent-texteditor-input-height: ds.$spacing-240 !default; + $fluent-texteditor-label-outside-height: ds.$spacing-160 !default; + $fluent-texteditor-label-outside-top-offset: ds.$spacing-180 !default; + $fluent-texteditor-label-font-size: ds.$font-size-100 !default; + $fluent-texteditor-label-top-offset: ds.$spacing-minus-10 !default; + $fluent-filled-texteditor-input-horizontal-padding: ds.$spacing-80 !default; + $fluent-filled-texteditor-input-top-padding: ds.$spacing-30 !default; + $fluent-filled-texteditor-input-with-label-top-padding: ds.$spacing-60 !default; + $fluent-filled-texteditor-input-bottom-padding: ds.$spacing-30 !default; $fluent-filled-texteditor-input-with-label-bottom-padding: 0 !default; - $fluent-standard-texteditor-input-top-padding: 3px !default; - $fluent-standard-texteditor-input-bottom-padding: 3px !default; - $fluent-standard-texteditor-with-label-input-top-padding: 6px !default; - $fluent-standard-texteditor-with-label-input-bottom-padding: 2px !default; - $fluent-underlined-editor-button-height: 22px !default; + $fluent-standard-texteditor-input-top-padding: ds.$spacing-30 !default; + $fluent-standard-texteditor-input-bottom-padding: ds.$spacing-30 !default; + $fluent-standard-texteditor-with-label-input-top-padding: ds.$spacing-60 !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: ds.$spacing-20 !default; + $fluent-underlined-editor-button-height: ds.$spacing-220 !default; } $fluent-filled-texteditor-input-padding: @@ -67,5 +68,5 @@ $fluent-filled-texteditor-input-padding: $fluent-filled-texteditor-input-horizontal-padding $fluent-filled-texteditor-input-bottom-padding !default; -$fluent-filled-texteditor-input-button-horizontal-padding: $fluent-filled-texteditor-input-horizontal-padding - 4px !default; -$texteditor-spin-button-horizontal-padding: math.div($fluent-filled-texteditor-input-horizontal-padding, 2) !default; +$fluent-filled-texteditor-input-button-horizontal-padding: calc(#{$fluent-filled-texteditor-input-horizontal-padding} - #{ds.$spacing-40}) !default; +$texteditor-spin-button-horizontal-padding: calc((#{$fluent-filled-texteditor-input-horizontal-padding}) / 2) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss index 674156372151..c4ed8ac6c44f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss @@ -1,7 +1,8 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-timeview-field-min-height: 35px !default; -$fluent-timeview-time-separator-margin: 5px !default; -$fluent-timeview-format12-width: 64px !default; +$fluent-timeview-field-min-height: 35px !default; // dx-offscale: 35px +$fluent-timeview-time-separator-margin: ds.$spacing-50 !default; +$fluent-timeview-format12-width: ds.$spacing-640 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss index 44c7288ca1a2..e1bbcf515334 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -6,16 +7,16 @@ $toast-border-radius: $fluent-base-border-radius !default; $fluent-toast-height: null !default; $fluent-toast-item-gap: null !default; $fluent-toast-content-vertical-padding: null !default; -$fluent-toast-content-horizontal-padding: 12px !default; +$fluent-toast-content-horizontal-padding: ds.$spacing-120 !default; @if $size == "default" { - $fluent-toast-content-vertical-padding: 12px !default; - $fluent-toast-height: 44px !default; - $fluent-toast-item-gap: 12px !default; + $fluent-toast-content-vertical-padding: ds.$spacing-120 !default; + $fluent-toast-height: ds.$spacing-440 !default; + $fluent-toast-item-gap: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-toast-content-vertical-padding: 8px !default; - $fluent-toast-height: 36px !default; - $fluent-toast-item-gap: 8px !default; + $fluent-toast-content-vertical-padding: ds.$spacing-80 !default; + $fluent-toast-height: ds.$spacing-360 !default; + $fluent-toast-item-gap: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss index 4b44754d9a76..a57c7282b0cf 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss @@ -49,7 +49,7 @@ .dx-list-item-content, .dx-toolbar-item-auto-hide { - padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding $fluent-list-item-vertical-padding - 1px; + padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding calc(#{$fluent-list-item-vertical-padding} - 1px); } .dx-list-item-content { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss index 8f7b3eb50e09..c507d43ffa19 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss @@ -33,7 +33,7 @@ padding-inline-end: $item-spacing; &.dx-toolbar-first-in-group { - padding-left: $fluent-toolbar-item-spacing * 4; + padding-left: calc(#{$fluent-toolbar-item-spacing} * 4); } &:last-child { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss index d72e05698d91..7ac88578181d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss @@ -1,23 +1,24 @@ @use "../sizes" as *; @use "../typography/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-toolbar-height: null !default; $fluent-toolbar-padding: 0 !default; -$fluent-toolbar-item-spacing: 4px !default; +$fluent-toolbar-item-spacing: ds.$spacing-40 !default; $fluent-toolbar-label-font-size: $fluent-m-font-size !default; $fluent-toolbar-section-padding: null !default; @if $size == "default" { - $fluent-toolbar-height: 48px !default; - $fluent-toolbar-section-padding: 12px !default; + $fluent-toolbar-height: ds.$spacing-480 !default; + $fluent-toolbar-section-padding: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-toolbar-height: 36px !default; - $fluent-toolbar-section-padding: 8px !default; + $fluent-toolbar-height: ds.$spacing-360 !default; + $fluent-toolbar-section-padding: ds.$spacing-80 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss index 571890f9a895..607428c0db94 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss @@ -1,19 +1,20 @@ @use "../common/colors" as *; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-tooltip-padding: null !default; $fluent-tooltip-font-size: null !default; -$fluent-tooltip-arrow-border-radius: 2px !default; -$fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default; +$fluent-tooltip-arrow-border-radius: ds.$border-radius-20 !default; +$fluent-tooltip-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1 !default; @if $size == "default" { - $fluent-tooltip-padding: 7px 11px !default; - $fluent-tooltip-font-size: 12px; + $fluent-tooltip-padding: ds.$spacing-70 ds.$spacing-110 !default; + $fluent-tooltip-font-size: ds.$font-size-120; } @else if $size == "compact" { - $fluent-tooltip-padding: 3px 5px !default; - $fluent-tooltip-font-size: 12px; + $fluent-tooltip-padding: ds.$spacing-30 ds.$spacing-50 !default; + $fluent-tooltip-font-size: ds.$font-size-120; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss index 52edc764756c..c2b66b63131d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss @@ -1,22 +1,23 @@ @use "sass:math"; @use "../sizes" as *; @use "../../base/treeList/variables" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $treelist-fluent-expand-icon-size: null !default; @if $size == "default" { - $treelist-fluent-expand-icon-size: 20px !default; + $treelist-fluent-expand-icon-size: ds.$spacing-200 !default; } @else if $size == "compact" { - $treelist-fluent-expand-icon-size: 16px !default; + $treelist-fluent-expand-icon-size: ds.$spacing-160 !default; } $treelist-expand-icon-size: $treelist-fluent-expand-icon-size !default; $treelist-expand-icon-name-expanded: chevrondown !default; $treelist-expand-icon-name-collapsed: chevronright !default; -$treelist-expand-icon-right-gap: 4px !default; -$treelist-expand-checkbox-size: 16px !default; -$treelist-expand-checkbox-right-gap: 8px !default; +$treelist-expand-icon-right-gap: ds.$spacing-40 !default; +$treelist-expand-checkbox-size: ds.$spacing-160 !default; +$treelist-expand-checkbox-right-gap: ds.$spacing-80 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss index edbfea30a6ba..d2313b5904c8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss @@ -116,7 +116,7 @@ $treeview-hover-bg, $treeview-item-hover-color, $treeview-item-selected-color, - $fluent-treeview-toggle-item-width + $fluent-treeview-item-element-gap, + calc(#{$fluent-treeview-toggle-item-width} + #{$fluent-treeview-item-element-gap}), $fluent-treeview-item-margin, $fluent-treeview-item-border-radius, ); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss index 506feb58959b..2c68d35addad 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss @@ -1,15 +1,16 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-treeview-toggle-item-width: null !default; $fluent-treeview-item-height: null !default; $fluent-checkbox-container-size: null !default; -$fluent-treeview-container-with-border-offset: 8px; -$fluent-treeview-item-element-gap: 8px !default; -$fluent-treeview-item-margin: 1px 0; -$fluent-treeview-item-border-radius: 4px; -$fluent-treeview-border-padding: 1px; +$fluent-treeview-container-with-border-offset: ds.$spacing-80; +$fluent-treeview-item-element-gap: ds.$spacing-80 !default; +$fluent-treeview-item-margin: ds.$spacing-10 0; +$fluent-treeview-item-border-radius: ds.$border-radius-40; +$fluent-treeview-border-padding: ds.$spacing-10; $fluent-treeview-container-padding: $fluent-treeview-border-padding $fluent-treeview-border-padding @@ -22,29 +23,29 @@ $fluent-treeview-item-padding: null !default; $fluent-treeview-load-indicator-size: null !default; $fluent-treeview-searchbox-margin-bottom: null !default; $fluent-treeview-search-editor-height: null !default; -$fluent-treeview-item-side-padding: 12px !default; -$fluent-select-all-item-border-visible-padding: 26px !default; +$fluent-treeview-item-side-padding: ds.$spacing-120 !default; +$fluent-select-all-item-border-visible-padding: ds.$spacing-260 !default; @if $size == "default" { - $fluent-treeview-item-height: 44px !default; - $fluent-treeview-toggle-item-width: 20px !default; - $fluent-checkbox-container-size: 20px !default; - $fluent-treeview-checkbox-offset: 42px !default; - $fluent-select-all-item-padding: 15px 42px !default; - $fluent-treeview-item-padding: 12px $fluent-treeview-item-side-padding !default; - $fluent-treeview-load-indicator-size: 20px !default; - $fluent-treeview-searchbox-margin-bottom: 8px !default; - $fluent-treeview-search-editor-height: 48px; + $fluent-treeview-item-height: ds.$spacing-440 !default; + $fluent-treeview-toggle-item-width: ds.$spacing-200 !default; + $fluent-checkbox-container-size: ds.$spacing-200 !default; + $fluent-treeview-checkbox-offset: 42px !default; // dx-offscale: 42px + $fluent-select-all-item-padding: ds.$spacing-150 42px !default; // dx-offscale: 42px + $fluent-treeview-item-padding: ds.$spacing-120 $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: ds.$spacing-200 !default; + $fluent-treeview-searchbox-margin-bottom: ds.$spacing-80 !default; + $fluent-treeview-search-editor-height: ds.$spacing-480; } @else if $size == "compact" { - $fluent-treeview-item-height: 32px !default; - $fluent-treeview-toggle-item-width: 16px !default; - $fluent-treeview-checkbox-offset: 36px !default; - $fluent-checkbox-container-size: 16px !default; - $fluent-select-all-item-padding: 10px $fluent-treeview-checkbox-offset !default; - $fluent-treeview-item-padding: 10px $fluent-treeview-item-side-padding !default; - $fluent-treeview-load-indicator-size: 16px !default; - $fluent-treeview-searchbox-margin-bottom: 4px !default; - $fluent-treeview-search-editor-height: 32px; + $fluent-treeview-item-height: ds.$spacing-320 !default; + $fluent-treeview-toggle-item-width: ds.$spacing-160 !default; + $fluent-treeview-checkbox-offset: ds.$spacing-360 !default; + $fluent-checkbox-container-size: ds.$spacing-160 !default; + $fluent-select-all-item-padding: ds.$spacing-100 $fluent-treeview-checkbox-offset !default; + $fluent-treeview-item-padding: ds.$spacing-100 $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: ds.$spacing-160 !default; + $fluent-treeview-searchbox-margin-bottom: ds.$spacing-40 !default; + $fluent-treeview-search-editor-height: ds.$spacing-320; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss index 42f21a2d9a20..af8338bdc124 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -15,33 +16,33 @@ $fluent-h5-font-size: null !default; $fluent-h6-font-size: null !default; @if $size == "default" { - $fluent-xl-font-size: 34px !default; - $fluent-l-font-size: 28px !default; - $fluent-m-font-size: 20px !default; - $fluent-s-font-size: 18px !default; - $fluent-xs-font-size: 12px !default; - - $fluent-h1-font-size: 40px !default; - $fluent-h2-font-size: 36px !default; - $fluent-h3-font-size: 32px !default; - $fluent-h4-font-size: 26px !default; - $fluent-h5-font-size: 22px !default; - $fluent-h6-font-size: 22px !default; + $fluent-xl-font-size: ds.$spacing-340 !default; + $fluent-l-font-size: ds.$font-size-280 !default; + $fluent-m-font-size: ds.$font-size-200 !default; + $fluent-s-font-size: ds.$font-size-180 !default; + $fluent-xs-font-size: ds.$font-size-120 !default; + + $fluent-h1-font-size: ds.$font-size-400 !default; + $fluent-h2-font-size: ds.$font-size-360 !default; + $fluent-h3-font-size: ds.$font-size-320 !default; + $fluent-h4-font-size: ds.$font-size-260 !default; + $fluent-h5-font-size: ds.$font-size-220 !default; + $fluent-h6-font-size: ds.$font-size-220 !default; } @else if $size == "compact" { - $fluent-xl-font-size: 24px !default; - $fluent-l-font-size: 20px !default; - $fluent-m-font-size: 16px !default; - $fluent-s-font-size: 14px !default; - $fluent-xs-font-size: 12px !default; - - $fluent-h1-font-size: 32px !default; - $fluent-h2-font-size: 28px !default; - $fluent-h3-font-size: 24px !default; - $fluent-h4-font-size: 20px !default; - $fluent-h5-font-size: 16px !default; - $fluent-h6-font-size: 16px !default; + $fluent-xl-font-size: ds.$font-size-240 !default; + $fluent-l-font-size: ds.$font-size-200 !default; + $fluent-m-font-size: ds.$font-size-160 !default; + $fluent-s-font-size: ds.$font-size-140 !default; + $fluent-xs-font-size: ds.$font-size-120 !default; + + $fluent-h1-font-size: ds.$font-size-320 !default; + $fluent-h2-font-size: ds.$font-size-280 !default; + $fluent-h3-font-size: ds.$font-size-240 !default; + $fluent-h4-font-size: ds.$font-size-200 !default; + $fluent-h5-font-size: ds.$font-size-160 !default; + $fluent-h6-font-size: ds.$font-size-160 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss index 990440f85274..008c1fd74544 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,22 +8,22 @@ $fluent-validationsummary-item-margin: null !default; $fluent-validation-message-line-height: null !default; $fluent-validation-message-horizontal-padding: null !default; -$fluent-validation-overlay-border-radius: 4px !default; -$fluent-validation-message-vertical-padding: 4px !default; -$fluent-validation-message-font-size: 12px !default; +$fluent-validation-overlay-border-radius: ds.$border-radius-40 !default; +$fluent-validation-message-vertical-padding: ds.$spacing-40 !default; +$fluent-validation-message-font-size: ds.$font-size-120 !default; @if $size == "default" { - $fluent-validation-message-padding: 6px !default; - $fluent-validationsummary-item-margin: 6px !default; + $fluent-validation-message-padding: ds.$spacing-60 !default; + $fluent-validationsummary-item-margin: ds.$spacing-60 !default; - $fluent-validation-message-horizontal-padding: 8px !default; - $fluent-validation-message-line-height: 16px !default; + $fluent-validation-message-horizontal-padding: ds.$spacing-80 !default; + $fluent-validation-message-line-height: ds.$line-height-160 !default; } @else if $size == "compact" { - $fluent-validation-message-padding: 4px !default; - $fluent-validationsummary-item-margin: 4px !default; + $fluent-validation-message-padding: ds.$spacing-40 !default; + $fluent-validationsummary-item-margin: ds.$spacing-40 !default; - $fluent-validation-message-horizontal-padding: 6px !default; - $fluent-validation-message-line-height: 12px !default; + $fluent-validation-message-horizontal-padding: ds.$spacing-60 !default; + $fluent-validation-message-line-height: ds.$line-height-120 !default; } From 871f42aedd16d75c17faa76aa6374eb744fc87d3 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 00:36:05 +0400 Subject: [PATCH 10/27] migrate switch, radioGroup, progressBar, slider, badge, loadIndicator --- .../scss/widgets/dxdsfluent/_colors.scss | 3 -- .../widgets/dxdsfluent/badge/_colors.scss | 21 +++------ .../scss/widgets/dxdsfluent/card/_colors.scss | 12 ++--- .../widgets/dxdsfluent/common/_colors.scss | 37 ++++++---------- .../widgets/dxdsfluent/fieldset/_colors.scss | 8 ++-- .../widgets/dxdsfluent/informer/_colors.scss | 22 +++------- .../dxdsfluent/loadIndicator/_colors.scss | 38 +++------------- .../widgets/dxdsfluent/numberBox/_colors.scss | 15 +++---- .../dxdsfluent/progressBar/_colors.scss | 30 ++++--------- .../dxdsfluent/radioButton/_colors.scss | 7 +-- .../dxdsfluent/scrollable/_colors.scss | 19 ++------ .../widgets/dxdsfluent/slider/_colors.scss | 31 ++++++------- .../dxdsfluent/speedDialAction/_colors.scss | 9 ++-- .../dxdsfluent/splitterBar/_colors.scss | 8 ++-- .../widgets/dxdsfluent/stepper/_colors.scss | 39 ++++++++-------- .../widgets/dxdsfluent/switch/_colors.scss | 44 +++++++++---------- .../dxdsfluent/typography/_colors.scss | 9 ++-- .../dxdsfluent/validation/_colors.scss | 10 ++--- .../widgets/dxdsfluent/widget/_colors.scss | 7 +-- 19 files changed, 126 insertions(+), 243 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index 78f775a51a4e..8017c22ffc1c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -280,9 +280,6 @@ $base-spin-icon-color: $base-icon-color !default; */ $base-link-color: $base-accent !default; -$typography-color: $base-text-color !default; -$typography-link-color: $base-link-color !default; - $base-element-bg: $base-bg !default; $base-invalid-color: $base-danger !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss index 5c86f7a03ff9..643c59e294d5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss @@ -1,5 +1,4 @@ -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,23 +6,13 @@ * $name 140. Badge text color * $type color */ -$badge-color: null !default; +$badge-color: ds.$badge-color-text-rest !default; /** * $name 150. Badge background color * $type color */ -$badge-bg: null !default; +$badge-bg: ds.$badge-color-bg-rest !default; -$badge-text-color-disabled: $base-foreground-disabled !default; -$badge-background-color-disabled: $base-background-disabled !default; - -@if $mode == "light" { - $badge-bg: $base-accent !default; - $badge-color: $base-inverted-text-color !default; -} - -@if $mode == "dark" { - $badge-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; - $badge-color: $base-text-color !default; -} +$badge-text-color-disabled: ds.$badge-color-text-disabled !default; +$badge-background-color-disabled: ds.$badge-color-bg-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss index 00c18f8f4f58..39dd71f405d9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss @@ -1,12 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$card-bg: $base-bg !default; -$card-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$card-shadow: 0 1px 3px color.change($card-shadow-color, $alpha: 0.12), 0 1px 2px color.change($card-shadow-color, $alpha: 0.24) !default; +$card-bg: ds.$color-surface-neutral-default-rest !default; +$card-shadow: ds.$box-shadow-sm !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss index 5e81a638e832..5ba5112b644d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss @@ -1,31 +1,22 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$base-dropdown-shadow-color1: null !default; -$base-dropdown-shadow-color2: null !default; +// Dropdown/overlay shadow layer colors (mode-aware via the shadow roles). +$base-dropdown-shadow-color1: ds.$color-shadow-ambient !default; +$base-dropdown-shadow-color2: ds.$color-shadow-key !default; -@if $mode == "light" { - $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.12) !default; - $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.14) !default; -} +$common-accent: ds.$color-surface-primary-default-rest !default; +$common-bg: ds.$color-surface-neutral-default-rest !default; +$common-border-color: ds.$color-border-neutral-default-rest !default; -@if $mode == "dark" { - $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.24) !default; - $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.28) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$common-accent: $base-accent !default; -$common-bg: $base-bg !default; -$common-border-color: $base-border-color !default; +// Non-color theme-level values (opacity/font family) — kept referencing the theme layer. $common-disabled-opacity: $base-disabled-opacity !default; $common-font-family: $base-font-family !default; -$common-invalid-color: $base-invalid-color !default; -$common-inverted-text-color: $base-inverted-text-color !default; -$common-success: $base-success !default; -$common-text-color: $base-text-color !default; -$common-typography-bg: $base-typography-bg !default; -$common-typography-color: $typography-color !default; +$common-invalid-color: ds.$color-border-danger-default-rest !default; +$common-inverted-text-color: ds.$color-content-neutral-default-static-dark-rest !default; +$common-success: ds.$color-surface-success-default-rest !default; +$common-text-color: ds.$color-content-neutral-default-rest !default; +$common-typography-bg: ds.$color-surface-neutral-default-rest !default; +$common-typography-color: ds.$color-content-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss index 0868bb4f0078..439e2b14c9af 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,5 +6,5 @@ * $name 10. Label text color * $type color */ -$fieldset-field-label-color: $base-text-color !default; -$fieldset-field-value-invalid-color: $base-invalid-color !default; +$fieldset-field-label-color: ds.$color-content-neutral-default-rest !default; +$fieldset-field-value-invalid-color: ds.$color-border-danger-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss index 5037e8368958..d7b1038a3f88 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss @@ -1,20 +1,8 @@ -@use "../colors" as *; -@use "sass:color"; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$informer-error-color: $base-invalid-color !default; -$informer-error-background-color: null !default; -$informer-info-color: $base-text-color !default; -$informer-info-background-color: null !default; - -@if $mode == "light" { - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%); - $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl); -} - -@if $mode == "dark" { - $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%); - $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl); -} +$informer-error-color: ds.$color-content-danger-default-rest !default; +$informer-error-background-color: ds.$color-surface-danger-subdued-rest !default; +$informer-info-color: ds.$color-content-neutral-default-rest !default; +$informer-info-background-color: ds.$color-surface-neutral-subdued-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss index 4e84470ef9e4..0b9b0557f799 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,36 +6,15 @@ * $name 10. Indicator color * $type color */ -$load-indicator-segment-bg-color: $base-accent !default; +$load-indicator-segment-bg-color: ds.$spinner-color-primary-loader-rest !default; /** * $name 20. Indicator background color * $type color */ -$load-indicator-inner-segment-border-color: null !default; -$load-indicator-animation-sparkle-bg-color1: null !default; -$load-indicator-animation-sparkle-bg-color2: null !default; -$load-indicator-animation-sparkle-bg-color3: null !default; +$load-indicator-inner-segment-border-color: ds.$spinner-color-primary-track-rest !default; -@if $mode == "light" { - @if $color == "blue" { - $load-indicator-inner-segment-border-color: extcolor.adjust-if-not-achromatic($color: $load-indicator-segment-bg-color, $hue: 2.9deg, $saturation: 2.2%, $lightness: 44.3%) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; - $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: 2.73%, $lightness: 27.25%) !default; - $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 5.61%, $lightness: 38.43%) !default; - } - - @if $color == "saas" { - $load-indicator-inner-segment-border-color: color.mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default; - $load-indicator-animation-sparkle-bg-color1: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -15deg, $saturation: -14.71%, $lightness: -26.47%) !default; - $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -11.98%, $lightness: 0.78%) !default; - $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -9.09%, $lightness: 11.96%) !default; - } -} - -@if $mode == "dark" { - $load-indicator-inner-segment-border-color: $base-accent-selected !default; - $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default; - $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -4.40%, $lightness: -21.96%) !default; - $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -8.58%, $lightness: -26.67%) !default; -} +// Decorative accent shimmer; foundation has no sparkle role — primary surface steps (see DIVERGENCES.md) +$load-indicator-animation-sparkle-bg-color1: ds.$color-surface-primary-default-rest !default; +$load-indicator-animation-sparkle-bg-color2: ds.$color-surface-primary-default-hovered !default; +$load-indicator-animation-sparkle-bg-color3: ds.$color-surface-primary-compound-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss index 12aed4db31dc..f99b9f832369 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss @@ -1,14 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$numberbox-spin-icon-color: $base-spin-icon-color !default; -$numberbox-spin-icon-background-hover: $base-hover-bg !default; -$numberbox-spin-icon-background-active: $base-active-bg !default; +$numberbox-spin-icon-color: ds.$color-content-neutral-subdued-rest !default; +$numberbox-spin-icon-background-hover: ds.$color-surface-neutral-default-hovered !default; +$numberbox-spin-icon-background-active: ds.$color-surface-neutral-default-active !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$numberbox-foreground-disabled: $base-foreground-disabled !default; +$numberbox-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss index 93c826d58ca4..4bcf2f2b2c2c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,17 +6,17 @@ * $name 10. Bar background color * $type color */ -$progressbar-bg: null !default; +$progressbar-bg: ds.$progress-bar-progress-line-color-track-rest !default; /** * $name 20. Selected range background color * $type color */ -$progressbar-range-bg: $base-accent !default; -$progressbar-container-disabled-bg: $base-background-disabled !default; -$progressbar-range-disabled-bg: $base-foreground-disabled !default; -$progressbar-range-indeterminate-color: $base-accent !default; -$progressbar-range-invalid-color: $base-invalid-color !default; +$progressbar-range-bg: ds.$progress-bar-progress-line-color-indicator-rest !default; +$progressbar-container-disabled-bg: ds.$progress-bar-progress-line-color-track-disabled !default; +$progressbar-range-disabled-bg: ds.$progress-bar-progress-line-color-indicator-disabled !default; +$progressbar-range-indeterminate-color: ds.$progress-bar-progress-line-color-indicator-indeterminate-gradient-center !default; +$progressbar-range-invalid-color: ds.$color-surface-danger-default-rest !default; $progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; $progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%; @@ -29,15 +26,6 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p * $name 30. Label color * $type color */ -$progressbar-label-color: $base-text-color !default; +$progressbar-label-color: ds.$color-content-neutral-default-rest !default; -@if $mode == "light" { - $progressbar-bg: color.adjust($base-typography-bg, $lightness: -7.84%, $space: hsl) !default; -} - -@if $mode == "dark" { - $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$progressbar-foreground-disabled: $base-foreground-disabled !default; +$progressbar-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss index fcc266385039..aa8c447851f3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$radiobutton-foreground-disabled: $base-foreground-disabled !default; +$radiobutton-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss index f690f47a9d06..de8c4862157a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss @@ -1,23 +1,12 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$scrollable-bg: $base-element-bg !default; +$scrollable-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 10. Scroll bar background color * $type color */ -$scrollable-scroll-bg: null !default; -$scrollable-scrollbar-bg: transparent !default; - -@if $mode == "light" { - $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default; -} - -@if $mode == "dark" { - $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default; -} - +$scrollable-scroll-bg: ds.$scroll-bar-color-thumb-rest !default; +$scrollable-scrollbar-bg: ds.$scroll-bar-color-bg-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss index 7872e347b44d..c73fb5e128fe 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,30 +6,30 @@ * $name 10. Bar background color * $type color */ -$fluent-slider-bar-bg: $base-border-color-accessible !default; +$fluent-slider-bar-bg: ds.$color-border-neutral-accessible-rest !default; /** * $name 20. Selected range background color * $type color */ -$slider-accent-color: $base-accent !default; -$slider-accent-color-hover: $base-accent-hover !default; -$slider-accent-color-focused: $base-accent-active !default; +$slider-accent-color: ds.$color-surface-primary-default-rest !default; +$slider-accent-color-hover: ds.$color-surface-primary-default-hovered !default; +$slider-accent-color-focused: ds.$color-surface-primary-default-active !default; -$slider-invalid-color: $base-invalid-color !default; -$slider-invalid-color-hover: $base-invalid-color-hover !default; -$slider-invalid-color-focused: $base-invalid-color-selected !default; +$slider-invalid-color: ds.$color-border-danger-default-rest !default; +$slider-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$slider-invalid-color-focused: ds.$color-border-danger-default-hovered !default; -$fluent-slider-disabled-bg: $base-foreground-disabled !default; -$fluent-slider-bar-disabled-bg: $base-background-disabled !default; +$fluent-slider-disabled-bg: ds.$color-content-neutral-default-disabled !default; +$fluent-slider-bar-disabled-bg: ds.$color-surface-neutral-default-disabled !default; /** * $name 30. Slider tooltip text color * $type color */ -$fluent-slider-tooltip-color: $base-text-color !default; +$fluent-slider-tooltip-color: ds.$color-content-neutral-default-rest !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$slider-border-color: $base-border-color !default; -$slider-element-bg: $base-element-bg !default; -$slider-theme-invalid-color: $base-invalid-color !default; +$slider-border-color: ds.$color-border-neutral-default-rest !default; +$slider-element-bg: ds.$color-surface-neutral-default-rest !default; +$slider-theme-invalid-color: ds.$color-border-danger-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss index 939834ec73a0..87f59c58486c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -1,14 +1,13 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; @use "../overlay/colors" as *; @use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$speed-dial-action-color: $base-text-color !default; -$speed-dial-action-shadow: 0 2px 6px 0 color.change($base-shadow-color, $alpha: 0.2) !default; -$speed-dial-action-label-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.16) !default; +$speed-dial-action-color: ds.$color-content-neutral-default-rest !default; +$speed-dial-action-shadow: ds.$box-shadow-md !default; +$speed-dial-action-label-shadow: ds.$box-shadow-sm !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; $speed-dial-action-bg: $button-normal-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss index 4157ae022c9d..62533d55baa8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss @@ -1,8 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$splitter-inactive-color: $base-border-color !default; -$splitter-bg: color.change($base-accent, $alpha: 0.5) !default; +$splitter-inactive-color: ds.$color-border-neutral-default-rest !default; +$splitter-bg: ds.$color-surface-primary-alpha-active !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss index 210edd8c874a..63eaff68737b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,61 +6,61 @@ * $name 10. Active color * $type color */ -$stepper-step-accent-bg: $base-accent !default; +$stepper-step-accent-bg: ds.$color-surface-primary-default-rest !default; /** * $name 20. Hover state active color * $type color */ -$stepper-step-accent-hover-bg: $base-accent-hover !default; +$stepper-step-accent-hover-bg: ds.$color-surface-primary-default-hovered !default; /** * $name 30. Invalid color * $type color */ -$stepper-step-danger-bg: $base-danger !default; +$stepper-step-danger-bg: ds.$color-surface-danger-default-rest !default; /** * $name 40. Hover state invalid color * $type color */ -$stepper-step-danger-hover-bg: $base-danger-hover !default; +$stepper-step-danger-hover-bg: ds.$color-surface-danger-default-hovered !default; /** * $name 60. Background color * $type color */ -$stepper-step-base-bg: $base-bg !default; +$stepper-step-base-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 70. Hover state background color * $type color */ -$stepper-step-base-hover-bg: $base-hover-bg !default; +$stepper-step-base-hover-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 80. Border color * $type color */ -$stepper-step-base-border-color: $base-border-color !default; +$stepper-step-base-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 90. Hover state border color * $type color */ -$stepper-step-base-hover-border-color: $base-border-color-hover !default; +$stepper-step-base-hover-border-color: ds.$color-border-neutral-default-hovered !default; /** * $name 100. Text or icon color * $type color */ -$stepper-step-base-text-color: $base-text-color !default; +$stepper-step-base-text-color: ds.$color-content-neutral-default-rest !default; /** * $name 110. Label text color * $type color */ -$stepper-step-base-label-color: $base-text-color !default; +$stepper-step-base-label-color: ds.$color-content-neutral-default-rest !default; /** * $name 120. Background color @@ -81,7 +78,7 @@ $stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default; * $name 140. Text or icon color * $type color */ -$stepper-step-selected-text-color: $base-inverted-text-color !default; +$stepper-step-selected-text-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 150. Label text color @@ -142,34 +139,34 @@ $stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default; * $type color */ $stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default; -$stepper-step-disabled-shadow: $base-bg !default; +$stepper-step-disabled-shadow: $stepper-step-base-bg !default; /** * $name 260. Background color * $type color */ -$stepper-step-disabled-bg: $base-background-disabled !default; +$stepper-step-disabled-bg: ds.$color-surface-neutral-default-disabled !default; /** * $name 270. Text color * $type color */ -$stepper-step-disabled-text-color: $base-foreground-disabled !default; +$stepper-step-disabled-text-color: ds.$color-content-neutral-default-disabled !default; /** * $name 280. Pending color * $type color */ -$stepper-connector-bg: $base-separator-color !default; +$stepper-connector-bg: ds.$separator-color !default; /** * $name 290. Completed color * $type color */ -$stepper-connector-value-bg: $base-accent !default; +$stepper-connector-value-bg: ds.$color-surface-primary-default-rest !default; /** * $name 300. Shadow color * $type color */ -$stepper-step-shadow-color: $base-typography-bg !default; +$stepper-step-shadow-color: ds.$color-surface-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss index 6684e06b0f92..a75614cbabfb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss @@ -1,47 +1,45 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$switch-accent-color: $base-accent !default; -$switch-accent-color-hover: $base-accent-hover !default; -$switch-accent-color-focused: $base-accent-active !default; +$switch-accent-color: ds.$switch-color-checked-bg-rest !default; +$switch-accent-color-hover: ds.$switch-color-checked-bg-hovered !default; +$switch-accent-color-focused: ds.$switch-color-checked-bg-active !default; /** * $name 20. Track 'OFF' background color * $type color */ -$switch-bg: transparent !default; +$switch-bg: ds.$switch-color-unchecked-bg-rest !default; /** * $name 30. Handle 'OFF' background color * $type color */ -$switch-handle-off-bg: $base-border-color-accessible !default; +$switch-handle-off-bg: ds.$switch-color-unchecked-trigger-rest !default; /** * $name 40. Track 'ON' background color * $type color */ -$switch-on-bg: $base-accent !default; +$switch-on-bg: ds.$switch-color-checked-bg-rest !default; /** * $name 50. Handle 'ON' background color * $type color */ -$switch-handle-on-bg: $base-element-bg !default; +$switch-handle-on-bg: ds.$switch-color-checked-trigger-rest !default; $switch-handle-border-radius: 50% !default; -$switch-on-disabled-bg: $base-background-disabled !default; -$switch-handle-disabled-bg: $base-foreground-disabled !default; -$switch-border-color-disabled: $base-border-color-disabled !default; -$switch-off-border-color: $base-border-color-accessible !default; -$switch-off-border-hover-color: $base-border-color-accessible-hover !default; -$switch-off-border-active-color: $base-border-color-accessible-focused !default; - -$switch-invalid-color: $base-invalid-color !default; -$switch-invalid-color-hover: $base-invalid-color-hover !default; -$switch-invalid-color-focused: $base-invalid-color-selected !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$switch-handle-on-shadow-color: color.change($switch-handle-on-bg, $alpha: 0.1) !default; +$switch-on-disabled-bg: ds.$switch-color-checked-bg-disable !default; +$switch-handle-disabled-bg: ds.$switch-color-unchecked-trigger-disabled !default; +$switch-border-color-disabled: ds.$switch-color-unchecked-border-disabled !default; +$switch-off-border-color: ds.$switch-color-unchecked-border-rest !default; +$switch-off-border-hover-color: ds.$switch-color-unchecked-border-hovered !default; +$switch-off-border-active-color: ds.$switch-color-unchecked-border-active !default; + +$switch-invalid-color: ds.$color-border-danger-default-rest !default; +$switch-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$switch-invalid-color-focused: ds.$color-border-danger-default-hovered !default; + +// Subtle ring around the ON handle; no switch shadow role — relative-color bridge over the handle token (see DIVERGENCES.md) +$switch-handle-on-shadow-color: rgb(from #{ds.$switch-color-checked-trigger-rest} r g b / 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss index 9e49cedb81af..4e781991475d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss @@ -1,9 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$typography-typography-bg: $base-typography-bg !default; -$typography-typography-link-color: $typography-link-color !default; +$typography-typography-bg: ds.$color-surface-neutral-default-rest !default; +$typography-typography-link-color: ds.$color-content-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss index 54b4c00e535c..bb50421c8549 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss @@ -1,9 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$validation-message-color: $base-inverted-text-color !default; -$validation-message-background-color: $base-invalid-color !default; -$validation-summary-color: $base-invalid-color !default; +$validation-message-color: ds.$color-content-neutral-default-static-dark-rest !default; +$validation-message-background-color: ds.$color-surface-danger-default-rest !default; +$validation-summary-color: ds.$color-content-danger-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss index f4d78c6bae1b..5c18d4c6a0c8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$widget-bg: $base-bg !default; +$widget-bg: ds.$color-surface-neutral-default-rest !default; From 1f8719209eaca7c17e453388347ed74d9d19892d Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 13:18:29 +0400 Subject: [PATCH 11/27] migrate menu, list, calendar, tabs, popup, tooltip --- .../scss/widgets/base/calendar/_mixins.scss | 2 +- .../scss/widgets/dxdsfluent/_colors.scss | 3 - .../dxdsfluent/buttonGroup/_colors.scss | 7 +-- .../widgets/dxdsfluent/calendar/_colors.scss | 49 +++++------------ .../dxdsfluent/contextMenu/_colors.scss | 14 ++--- .../widgets/dxdsfluent/dateView/_colors.scss | 14 ++--- .../widgets/dxdsfluent/diagram/_colors.scss | 4 +- .../widgets/dxdsfluent/drawer/_colors.scss | 6 +- .../dxdsfluent/dropDownEditor/_colors.scss | 10 +--- .../widgets/dxdsfluent/gallery/_colors.scss | 28 +++++----- .../scss/widgets/dxdsfluent/list/_colors.scss | 55 ++++++++----------- .../dxdsfluent/loadIndicator/_colors.scss | 4 +- .../scss/widgets/dxdsfluent/menu/_colors.scss | 40 +++++--------- .../widgets/dxdsfluent/menuBase/_colors.scss | 7 +-- .../widgets/dxdsfluent/overlay/_colors.scss | 17 +----- .../widgets/dxdsfluent/popup/_colors.scss | 27 +++------ .../dxdsfluent/radioGroup/_colors.scss | 26 ++++----- .../dxdsfluent/scrollView/_colors.scss | 6 +- .../widgets/dxdsfluent/splitter/_colors.scss | 30 ++-------- .../widgets/dxdsfluent/tileView/_colors.scss | 16 +++--- .../widgets/dxdsfluent/timeView/_colors.scss | 11 ++-- .../widgets/dxdsfluent/toast/_colors.scss | 35 ++++-------- .../widgets/dxdsfluent/tooltip/_colors.scss | 18 +----- .../widgets/dxdsfluent/treeView/_colors.scss | 54 ++++++------------ 24 files changed, 157 insertions(+), 326 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss index 978c5ae6ade0..2d7e4b2bf7a8 100644 --- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss @@ -240,7 +240,7 @@ &.dx-calendar-empty-cell { cursor: default; - color: color.change($cell-text-color, $alpha: 0.24); + color: if(meta.type-of($cell-text-color) == color, color.change($cell-text-color, $alpha: 0.24), rgb(from #{$cell-text-color} r g b / 0.24)); &.dx-state-hover, &.dx-state-active { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index 8017c22ffc1c..6efd4d0bc595 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -283,9 +283,6 @@ $base-link-color: $base-accent !default; $base-element-bg: $base-bg !default; $base-invalid-color: $base-danger !default; -$base-invalid-color-hover: $base-danger-hover !default; -$base-invalid-color-active: $base-danger-active !default; -$base-invalid-color-selected: $base-danger-selected !default; :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss index ff40bdc07e0d..400a4b35f645 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$button-group-separator-color: rgba(0,0,0,.24) !default; +$button-group-separator-color: ds.$separator-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss index b0986f1b8d56..0e9cce1aede4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss @@ -1,12 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$calendar-color: $base-text-color !default; +$calendar-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Navigator text color @@ -24,45 +21,25 @@ $calendar-header-color: $calendar-color !default; * $name 40. Other month text color * $type color */ -$calendar-cell-other-color: null !default; +$calendar-cell-other-color: ds.$color-content-neutral-subdued-rest !default; $calendar-bg: transparent !default; -$calendar-hover-bg: null !default; -$calendar-cell-hover-border-color: null !default; +$calendar-hover-bg: $button-default-outlined-selected-bg !default; +$calendar-cell-hover-border-color: $calendar-hover-bg !default; $calendar-cell-hover-color: $calendar-color !default; /** * $name 50. Selected cell background color * $type color */ -$calendar-cell-selected-bg: $base-accent !default; -$calendar-cell-selected-color: $base-inverted-text-color !default; +$calendar-cell-selected-bg: ds.$color-surface-primary-default-rest !default; +$calendar-cell-selected-color: ds.$color-content-neutral-default-static-dark-rest !default; $calendar-cell-contoured-border-radius: 50% !default; -$calendar-cell-contoured-border-color: null !default; -$calendar-cell-active-bg: null !default; -$calendar-invalid-border-color: $base-invalid-color !default; -$calendar-invalid-border-color-focused: $base-invalid-color-active !default; -$calendar-week-number-cell-color: null !default; -$calendar-week-number-cell-bg: null !default; +$calendar-cell-active-bg: $button-default-outlined-active-bg !default; +$calendar-cell-contoured-border-color: $calendar-cell-active-bg !default; +$calendar-invalid-border-color: ds.$color-border-danger-default-rest !default; +$calendar-invalid-border-color-focused: ds.$color-border-danger-default-hovered !default; +$calendar-week-number-cell-color: ds.$color-content-neutral-subdued-rest !default; +$calendar-week-number-cell-bg: ds.$color-surface-neutral-subdued-rest !default; $calendar-week-number-border-radius: 0 !default; -@if $mode == "light" { - $calendar-hover-bg: $button-default-outlined-selected-bg !default; - $calendar-cell-hover-border-color: $calendar-hover-bg !default; - $calendar-cell-active-bg: $button-default-outlined-active-bg !default; - $calendar-cell-other-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; - $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; - $calendar-cell-contoured-border-color: $calendar-cell-active-bg !default; - $calendar-week-number-cell-bg: $base-background-disabled !default; -} - -@if $mode == "dark" { - $calendar-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; - $calendar-cell-hover-border-color: $calendar-hover-bg !default; - $calendar-cell-active-bg: $base-accent-selected !default; - $calendar-cell-other-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; - $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; - $calendar-cell-contoured-border-color: $base-accent-active !default; - $calendar-week-number-cell-bg: $base-hover-bg !default; -} - $calendar-cell-other-hover-color: $calendar-cell-other-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss index b846ea7e3d42..123160b958d1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss @@ -1,13 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$contextmenu-foreground-disabled: $base-foreground-disabled !default; -$contextmenu-icon-color: $base-icon-color !default; -$contextmenu-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$contextmenu-shadow: color.change($contextmenu-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($contextmenu-shadow-color, $alpha: 0.14) 0 8px 16px 0 !default; +$contextmenu-foreground-disabled: ds.$color-content-neutral-default-disabled !default; +$contextmenu-icon-color: ds.$color-content-neutral-subdued-rest !default; +$contextmenu-shadow: ds.$box-shadow-md !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss index 7ce4b398a54c..a20fe4627585 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss @@ -1,12 +1,10 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$dateview-shadow-up: 0deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; -$dateview-shadow-down: 180deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; -$dateview-color: $base-text-color !default; +// Fade gradients over the surface — relative-color bridge (no gradient role in foundation). +$dateview-shadow-up: 0deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default; +$dateview-shadow-down: 180deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default; +$dateview-color: ds.$color-content-neutral-default-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$dateview-accent: $base-accent !default; +$dateview-accent: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss index df38f4b6a5c2..560d5a919d17 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -37,6 +37,6 @@ $diagram-danger: $base-danger !default; $diagram-shadow-color: $base-shadow-color !default; $diagram-text-color: $base-text-color !default; -// Color computations hoisted from style files (phase 0.5 layer normalization) -$diagram-canvas-bg: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl) !default; +// Canvas = deeper neutral surface (overlay-content-bg is a token now; diagram gets its full pass in w5) +$diagram-canvas-bg: ds.$color-surface-neutral-subdued-rest !default; $diagram-shadow: 0 1px 8px color.change($diagram-shadow-color, $alpha: 0.175) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss index 45572dedd676..fe19076f191b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,4 +6,4 @@ * $name 10. Shader background color * $type color */ -$drawer-shader-background-color: color.change($base-shadow-color, $alpha: 0.5) !default; +$drawer-shader-background-color: ds.$color-surface-backdrop-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss index 3b178aac2ed1..bb6cb129e8a3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss @@ -1,15 +1,11 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; -@use "../textEditor/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$dropdowneditor-icon-color: $base-spin-icon-color !default; +$dropdowneditor-icon-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 90. Active arrow icon color * $type color */ -$dropdowneditor-icon-active-color: $base-spin-icon-color !default; +$dropdowneditor-icon-active-color: ds.$color-content-neutral-subdued-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss index 9dde69ff8cde..4ad2dc96d91d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,35 +6,36 @@ * $name 10. Indicator background color * $type color */ -$gallery-indicator-bg: $base-bg !default; +$gallery-indicator-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 20. Selected indicator background color * $type color */ -$gallery-indicator-item-selected-bg: $base-accent !default; +$gallery-indicator-item-selected-bg: ds.$color-surface-primary-default-rest !default; /** * $name 30. Focused indicator background color * $type color */ -$gallery-indicator-focused-bg: $base-accent !default; -$gallery-indicator-item-border-color: color.change(#000, $alpha: 0.2) !default; -$gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; -$gallery-navbutton-color: color.change($base-text-color, $alpha: 0.54) !default; -$gallery-nav-arrow-color: $base-inverted-text-color !default; +$gallery-indicator-focused-bg: ds.$color-surface-primary-default-rest !default; +$gallery-indicator-item-border-color: ds.$color-border-neutral-subdued-rest !default; + +// Semi-transparent surface over the indicator — relative-color bridge. +$gallery-indicator-selected-border-color: rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) !default; +$gallery-navbutton-color: ds.$color-content-neutral-subdued-rest !default; +$gallery-nav-arrow-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 40. Hovered navigation button color * $type color */ -$gallery-navbutton-hover-color: $base-accent !default; +$gallery-navbutton-hover-color: ds.$color-surface-primary-default-rest !default; /** * $name 50. Active navigation button color * $type color */ -$gallery-navbutton-active-color: $base-accent !default; +$gallery-navbutton-active-color: ds.$color-surface-primary-default-active !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$gallery-accent: $base-accent !default; +$gallery-accent: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss index 8e18e21c3b29..66e84cebe38d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss @@ -1,7 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,13 +7,13 @@ * $name 10. Item text color * $type color */ -$list-normal-color: null !default; +$list-normal-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Group border color * $type color */ -$list-border-color: $base-border-color !default; +$list-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 20. Group header background color @@ -27,49 +25,41 @@ $list-group-header-bg: transparent !default; * $name 30. Hovered state item background color * $type color */ -$list-item-hover-bg: $base-hover-bg !default; +$list-item-hover-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 30. Selected state item background color * $type color */ -$list-item-selected-bg: $base-selected-bg !default; -$list-item-selected-hover-bg: $list-item-hover-bg !default; -$list-item-focused-selected-bg: $base-active-bg !default; -$list-item-hover-color: $base-hover-color !default; -$list-header-indicator-color: $base-icon-color !default; +$list-item-selected-bg: ds.$color-surface-neutral-default-selected !default; +$list-item-selected-hover-bg: ds.$color-surface-neutral-default-selected-hovered !default; +$list-item-focused-selected-bg: ds.$color-surface-neutral-default-active !default; +$list-item-hover-color: ds.$color-content-neutral-default-rest !default; +$list-header-indicator-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 40. Active state item background color * $type color */ -$list-item-active-bg: $base-active-bg !default; -$list-holdmenu-bg: $base-bg !default; +$list-item-active-bg: ds.$color-surface-neutral-default-active !default; +$list-holdmenu-bg: ds.$color-surface-neutral-default-rest !default; $list-holdmenu-border-color: $list-border-color !default; -$list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.12) !default; +$list-holdmenu-shadow-color: ds.$color-shadow-ambient !default; $list-menu-button-default-color: $button-default-color !default; $list-menu-button-default-bg: $button-default-bg !default; -$list-menu-button-delete-bg: $base-danger !default; -$list-item-ghost-bg: $base-element-bg !default; -$list-item-ghost-color: $base-label-color !default; -$list-item-ghost-border-color: $base-accent !default; -$list-icon-color: $base-icon-color !default; +$list-menu-button-delete-bg: ds.$color-surface-danger-default-rest !default; +$list-item-ghost-bg: ds.$color-surface-neutral-default-rest !default; +$list-item-ghost-color: ds.$color-content-neutral-subdued-rest !default; +$list-item-ghost-border-color: ds.$color-border-primary-default-rest !default; +$list-icon-color: ds.$color-content-neutral-subdued-rest !default; -$base-select-all-separator-color: $base-separator-color !default; - -@if $mode == "light" { - $list-normal-color: color.adjust($base-text-color, $lightness: 11.76%, $space: hsl) !default; -} - -@if $mode == "dark" { - $list-normal-color: color.adjust($base-text-color, $lightness: -16.08%, $space: hsl) !default; -} +$base-select-all-separator-color: ds.$separator-color !default; /** * $name 10. Group header text color * $type color */ -$list-group-color: $base-text-color !default; +$list-group-color: ds.$color-content-neutral-default-rest !default; /** * $name 25. Expanded group header text color @@ -78,7 +68,6 @@ $list-group-color: $base-text-color !default; $list-expanded-group-color: $list-group-color !default; $list-item-selected-color: $list-normal-color !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$list-border-color-disabled: $base-border-color-disabled !default; -$list-foreground-disabled: $base-foreground-disabled !default; -$list-inverted-text-color: $base-inverted-text-color !default; +$list-border-color-disabled: ds.$color-border-neutral-default-disabled !default; +$list-foreground-disabled: ds.$color-content-neutral-default-disabled !default; +$list-inverted-text-color: ds.$color-content-neutral-default-static-dark-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss index 0b9b0557f799..4aaacad21c0d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss @@ -12,7 +12,9 @@ $load-indicator-segment-bg-color: ds.$spinner-color-primary-loader-rest !default * $name 20. Indicator background color * $type color */ -$load-indicator-inner-segment-border-color: ds.$spinner-color-primary-track-rest !default; + +// Light track: DS spinner loader==track kills the ring contrast (see DIVERGENCES.md) +$load-indicator-inner-segment-border-color: ds.$color-surface-primary-subdued-rest !default; // Decorative accent shimmer; foundation has no sparkle role — primary surface steps (see DIVERGENCES.md) $load-indicator-animation-sparkle-bg-color1: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss index 8497e3322ef6..8ac3085e70c5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss @@ -1,41 +1,27 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$menu-popup-bg: $base-bg !default; -$menu-item-hover-bg: $base-hover-bg !default; -$menu-item-bg-active: $base-active-bg !default; +$menu-popup-bg: ds.$color-surface-neutral-default-rest !default; +$menu-item-hover-bg: ds.$color-surface-neutral-default-hovered !default; +$menu-item-bg-active: ds.$color-surface-neutral-default-active !default; /** * $name 10. Text color * $type color */ -$menu-color: $base-text-color !default; +$menu-color: ds.$color-content-neutral-default-rest !default; $menu-item-expanded-color: $menu-color !default; /** * $name 20. Selected item background color * $type color */ -$menu-item-selected-bg: $base-selected-bg !default; -$menu-popup-border-color: $base-border-color !default; -$menu-separator-bg: $base-border-color !default; -$menu-item-selected-color: $base-text-color !default; -$menu-item-link-color: $base-link-color !default; -$menu-item-focused-selected-bg: null !default; - -@if $mode == "light" { - $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: -9.8%, $space: hsl) !default; -} - -@if $mode == "dark" { - $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$menu-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$menu-focused-shadow: 0 3px 10px color.change($menu-shadow-color, $alpha: 0.1) !default; +$menu-item-selected-bg: ds.$color-surface-neutral-default-selected !default; +$menu-popup-border-color: ds.$color-border-neutral-default-rest !default; +$menu-separator-bg: ds.$separator-color !default; +$menu-item-selected-color: ds.$color-content-neutral-default-rest !default; +$menu-item-link-color: ds.$color-content-primary-default-rest !default; +$menu-item-focused-selected-bg: ds.$color-surface-neutral-default-selected-hovered !default; + +$menu-focused-shadow: ds.$box-shadow-md !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss index 026f55548d97..1382f5b714ad 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$menu-item-color-disabled: $base-foreground-disabled; - +$menu-item-color-disabled: ds.$color-content-neutral-default-disabled; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss index 8c4c6fffa5fb..266bef95193b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,19 +6,10 @@ * $name 10. Content background color * $type color */ -$overlay-content-bg: $base-bg !default; +$overlay-content-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 20. Shader background color * $type color */ -$overlay-shader-bg: null !default; - -@if $mode == "light" { - $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.32) !default; -} - -@if $mode == "dark" { - $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.61) !default; -} - +$overlay-shader-bg: ds.$color-surface-backdrop-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss index 3d3971ec464b..517d3ba8f93d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss @@ -1,6 +1,5 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,23 +8,11 @@ * $type color */ $popup-title-bg: transparent !default; -$popup-title-color: $base-text-color !default; -$popup-title-border-color: $base-border-color !default; +$popup-title-color: ds.$color-content-neutral-default-rest !default; +$popup-title-border-color: ds.$color-border-neutral-default-rest !default; $popup-bottom-bg: $popup-title-bg !default; -$popup-bottom-color: $base-text-color !default; +$popup-bottom-color: ds.$color-content-neutral-default-rest !default; $popup-border-radius: calc(#{$base-border-radius} * 2) !default; -$popup-content-shadow-color1: null !default; -$popup-content-shadow-color2: null !default; -$popup-focused-content-shadow-color: null !default; - -@if $mode == "light" { - $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.2) !default; - $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.24) !default; - $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; -} - -@if $mode == "dark" { - $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.4) !default; - $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.48) !default; - $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.48) !default; -} +$popup-content-shadow-color1: ds.$color-shadow-ambient !default; +$popup-content-shadow-color2: ds.$color-shadow-key !default; +$popup-focused-content-shadow-color: ds.$color-shadow-key !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss index ab7616922748..3859e18548b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss @@ -1,22 +1,20 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$radiogroup-accent-color: $base-accent !default; -$radiogroup-accent-color-hover: $base-accent-hover !default; -$radiogroup-accent-color-active: $base-accent-active !default; +$radiogroup-accent-color: ds.$color-surface-primary-default-rest !default; +$radiogroup-accent-color-hover: ds.$color-surface-primary-default-hovered !default; +$radiogroup-accent-color-active: ds.$color-surface-primary-default-active !default; -$radiogroup-border-color: $base-border-color-accessible !default; -$radiogroup-border-color-hover: $base-border-color-accessible-hover !default; -$radiogroup-border-color-active: $base-border-color-accessible-focused !default; -$radiogroup-bg: $base-element-bg !default; +$radiogroup-border-color: ds.$color-border-neutral-accessible-rest !default; +$radiogroup-border-color-hover: ds.$color-border-neutral-accessible-hovered !default; +$radiogroup-border-color-active: ds.$color-border-neutral-accessible-active !default; +$radiogroup-bg: ds.$color-surface-neutral-default-rest !default; -$radiobutton-invalid-color: $base-invalid-color !default; -$radiobutton-invalid-color-hover: $base-invalid-color-hover !default; -$radiobutton-invalid-color-focused: $base-invalid-color-selected !default; +$radiobutton-invalid-color: ds.$color-border-danger-default-rest !default; +$radiobutton-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$radiobutton-invalid-color-focused: ds.$color-border-danger-default-hovered !default; $radiogroup-readonly-border-color: $radiogroup-border-color !default; -$radiobutton-focused-bg: color.change($base-text-color, $alpha: 0.1) !default; +$radiobutton-focused-bg: ds.$color-surface-neutral-alpha-hovered !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss index c152e5624b19..41407ed0d429 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss @@ -1,7 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$scrollview-shadow-color: color.change($base-shadow-color, $alpha: 0.37) !default; +$scrollview-shadow-color: ds.$color-shadow-key !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss index c8ace1165861..85b9a141a268 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,47 +6,31 @@ * $name 10. Icon color * $type color */ -$splitter-resize-handle-color: null !default; +$splitter-resize-handle-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 30. Focused state icon color * $type color */ -$splitter-resize-handle-color-focused: null !default; +$splitter-resize-handle-color-focused: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 40. Handle background color * $type color */ -$splitter-resize-handle-bg: null !default; +$splitter-resize-handle-bg: ds.$color-border-neutral-default-rest !default; /** * $name 50. Handle hover state background color * $type color */ -$splitter-resize-handle-bg-hover: null !default; +$splitter-resize-handle-bg-hover: ds.$color-border-neutral-default-hovered !default; /** * $name 60. Handle focused state background color * $type color */ -$splitter-resize-handle-bg-focused: $base-accent !default; - -@if $mode == 'light' { - $splitter-resize-handle-color: $base-icon-color !default; - $splitter-resize-handle-color-focused: $base-inverted-text-color !default; - - $splitter-resize-handle-bg: $base-border-color !default; - $splitter-resize-handle-bg-hover: $base-border-color-hover !default; -} - -@if $mode == 'dark' { - $splitter-resize-handle-color: $base-text-color !default; - $splitter-resize-handle-color-focused: $base-inverted-text-color !default; - - $splitter-resize-handle-bg: $base-border-color !default; - $splitter-resize-handle-bg-hover: $base-border-color-hover !default; -} +$splitter-resize-handle-bg-focused: ds.$color-surface-primary-default-rest !default; /** * $name 20. Hover state icon color diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss index 1ac51ec80923..e8df69293771 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,10 +6,10 @@ * $name 10. Item text color * $type color */ -$tileview-color: $base-text-color !default; -$tileview-bg: $base-element-bg !default; -$tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; -$tileview-hover-bg: $base-element-bg !default; -$tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; -$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; +$tileview-color: ds.$color-content-neutral-default-rest !default; +$tileview-bg: ds.$color-surface-neutral-default-rest !default; +$tileview-border-color: ds.$color-border-neutral-subdued-rest !default; +$tileview-hover-bg: ds.$color-surface-neutral-default-rest !default; +$tileview-hover-border-color: ds.$color-border-primary-default-rest !default; +$tileview-active-bg: ds.$color-surface-neutral-alpha-active !default; $tileview-active-color: $tileview-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss index eb7fab3899d7..d500d3108acc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss @@ -1,10 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$clock-digits-color: $base-text-color !default; +$clock-digits-color: ds.$color-content-neutral-default-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$timeview-inverted-bg: $base-inverted-bg !default; -$timeview-typography-bg: $base-typography-bg !default; +$timeview-inverted-bg: ds.$color-surface-neutral-default-inverted-rest !default; +$timeview-typography-bg: ds.$color-surface-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss index 8a6ea76ec308..8150a1ca48a1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss @@ -1,19 +1,8 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$toast-default-bg: $base-bg !default; -$warning-color: null !default; - -@if $mode == "light" { - $warning-color: $base-text-color !default; -} - -@if $mode == "dark" { - $warning-color: $base-inverted-text-color !default; -} +$toast-default-bg: ds.$toast-color-bg-rest !default; /** * $name 10. Info background color @@ -25,46 +14,42 @@ $toast-info-bg: $toast-default-bg !default; * $name 20. Info text color * $type color */ -$toast-info-color: $base-text-color !default; +$toast-info-color: ds.$color-content-neutral-default-rest !default; /** * $name 30. Warning background color * $type color */ -$toast-warning-bg: $base-warning !default; +$toast-warning-bg: ds.$color-surface-warning-default-rest !default; /** * $name 40. Warning text color * $type color */ -$toast-warning-color: $warning-color !default; +$toast-warning-color: ds.$color-content-neutral-default-static-light-rest !default; /** * $name 50. Error background color * $type color */ -$toast-error-bg: $base-danger !default; +$toast-error-bg: ds.$color-surface-danger-default-rest !default; /** * $name 60. Error text color * $type color */ -$toast-error-color: $base-inverted-text-color !default; +$toast-error-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 70. Success background color * $type color */ -$toast-success-bg: $base-success !default; +$toast-success-bg: ds.$color-surface-success-default-rest !default; /** * $name 80. Success text color * $type color */ -$toast-success-color: $base-inverted-text-color !default; - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$toast-shadow-color: $base-shadow-color !default; +$toast-success-color: ds.$color-content-neutral-default-static-dark-rest !default; -// Color computations hoisted from style files (phase 0.5 layer normalization) -$toast-shadow: 0 0 2px 0 color.change($toast-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($toast-shadow-color, $alpha: 0.14) !default; +$toast-shadow: ds.$box-shadow-lg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss index a46222d24e93..6d5a410c1e5c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; -@use "../overlay/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,21 +7,12 @@ * $name 10. Text color * $type color */ -$tooltip-color: $base-text-color !default; +$tooltip-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Background color * $type color */ -$tooltip-bg: null !default; +$tooltip-bg: ds.$tooltip-color-bg-rest !default; $tooltip-border-radius: $base-border-radius !default; - -@if $mode == "light" { - $tooltip-bg: $base-bg !default; -} - -@if $mode == "dark" { - $tooltip-bg: $base-hover-bg !default; -} - diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss index 86ee70ac973a..bad447d84ab6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss @@ -1,48 +1,28 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$treeview-color: $base-text-color !default; +$treeview-color: ds.$color-content-neutral-default-rest !default; /** * $name 80. Focused state background color * $type color */ -$treeview-focused-bg: $base-hover-bg !default; -$treeview-focus-color: $base-text-color !default; -$treeview-hover-bg: $base-hover-bg !default; -$treeview-item-hover-color: $base-hover-color !default; -$treeview-border-color: $base-border-color !default; +$treeview-focused-bg: ds.$color-surface-neutral-default-hovered !default; +$treeview-focus-color: ds.$color-content-neutral-default-rest !default; +$treeview-hover-bg: ds.$color-surface-neutral-default-hovered !default; +$treeview-item-hover-color: ds.$color-content-neutral-default-rest !default; +$treeview-border-color: ds.$color-border-neutral-default-rest !default; $treeview-item-selected-color: $treeview-color !default; -$treeview-item-selected-bg: $base-selected-bg !default; -$treeview-spin-icon-color: $base-spin-icon-color !default; -$checkbox-border-color-focused: $base-accent-active !default; -$treeview-checkbox-disabled-control-color-focused: null !default; -$treeview-checkbox-disabled-background-focused: null !default; -$treeview-item-content-disabled: null !default; -$treeview-checkbox-border-color-focused: null !default; -$treeview-checkbox-background-color-focused: null !default; -$treeview-checkbox-accent-color-focused: null !default; - -@if $mode == "light" { - $treeview-item-content-disabled: color.adjust($base-bg, $lightness: -25.88%, $space: hsl) !default; - $treeview-checkbox-disabled-control-color-focused: color.adjust($base-bg, $lightness: -29.8%, $space: hsl) !default; - $treeview-checkbox-disabled-background-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; - $treeview-checkbox-border-color-focused: color.adjust($base-bg, $lightness: -85.88%, $space: hsl) !default; - $treeview-checkbox-background-color-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; - $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 16%, $space: hsl) !default; -} - -@if $mode == "dark" { - $treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl) !default; - $treeview-checkbox-disabled-control-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl) !default; - $treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; - $treeview-checkbox-border-color-focused: color.change($base-bg, $lightness: 100%, $space: hsl) !default; - $treeview-checkbox-background-color-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; - $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default; -} +$treeview-item-selected-bg: ds.$color-surface-neutral-default-selected !default; +$treeview-spin-icon-color: ds.$color-content-neutral-subdued-rest !default; +$checkbox-border-color-focused: ds.$checkbox-color-checked-default-border-active !default; +$treeview-checkbox-disabled-control-color-focused: ds.$checkbox-color-checked-default-icon-disabled !default; +$treeview-checkbox-disabled-background-focused: ds.$color-surface-neutral-default-disabled !default; +$treeview-item-content-disabled: ds.$color-content-neutral-default-disabled !default; +$treeview-checkbox-border-color-focused: ds.$checkbox-color-unchecked-default-border-disabled !default; +$treeview-checkbox-background-color-focused: ds.$color-surface-neutral-default-disabled !default; +$treeview-checkbox-accent-color-focused: ds.$checkbox-color-checked-default-bg-hovered !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$treeview-text-color: $base-text-color !default; +$treeview-text-color: ds.$color-content-neutral-default-rest !default; From fd504f538e0dcf34bef24a446e7c5ed706d53521 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 23:09:51 +0400 Subject: [PATCH 12/27] migrate acordion, chat, colorBox, colorView, fileUploader, filterBuilder, form, lookup, pagination, selectBox, tabpanel, tabpanel, tagbox, toolbar --- .../widgets/dxdsfluent/accordion/_colors.scss | 11 +- .../scss/widgets/dxdsfluent/chat/_colors.scss | 111 +++++------------- .../widgets/dxdsfluent/colorBox/_colors.scss | 9 +- .../widgets/dxdsfluent/colorView/_colors.scss | 12 +- .../dxdsfluent/fileUploader/_colors.scss | 26 ++-- .../dxdsfluent/filterBuilder/_colors.scss | 57 ++++----- .../scss/widgets/dxdsfluent/form/_colors.scss | 24 +--- .../widgets/dxdsfluent/lookup/_colors.scss | 10 +- .../dxdsfluent/pagination/_colors.scss | 10 +- .../widgets/dxdsfluent/selectBox/_colors.scss | 6 +- .../widgets/dxdsfluent/tabPanel/_colors.scss | 7 +- .../widgets/dxdsfluent/tagBox/_colors.scss | 34 ++---- .../widgets/dxdsfluent/toolbar/_colors.scss | 8 +- 13 files changed, 102 insertions(+), 223 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss index e0816ae12307..3264384e9da6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss @@ -1,10 +1,9 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$accordion-color: $base-text-color !default; +$accordion-color: ds.$color-content-neutral-default-rest !default; /** * $name 10. Item title text color @@ -20,6 +19,6 @@ $fluent-accordion-title-font-size: $fluent-base-font-size !default; $accordion-background-color: transparent !default; $accordion-title-active-color: $accordion-color !default; -$accordion-title-bg-hover: $base-hover-bg !default; -$accordion-title-bg-active: $base-hover-bg !default; -$accordion-disabled-color: $base-foreground-disabled !default; +$accordion-title-bg-hover: ds.$color-surface-neutral-default-hovered !default; +$accordion-title-bg-active: ds.$color-surface-neutral-default-hovered !default; +$accordion-disabled-color: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss index f6e7b3ab9b10..14ae56e5723a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss @@ -1,9 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../textEditor/colors" as *; @use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,178 +8,126 @@ * $name 10. Background color * $type color */ -$chat-background-color: $base-bg !default; +$chat-background-color: ds.$color-surface-neutral-default-rest !default; /** * $name 20. Border color * $type color */ -$chat-border-color: $base-border-color !default; +$chat-border-color: ds.$color-border-neutral-default-rest !default; $chat-messagebox-border-color: $chat-border-color !default; $chat-messagebox-file-background-color: $button-normal-text-hover-bg !default; $chat-messagebox-file-cancel-button-secondary-color: $button-normal-text-selected-bg !default; -$chat-message-editing-preview-accent-color: $base-accent !default; +$chat-message-editing-preview-accent-color: ds.$color-surface-primary-default-rest !default; $chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default; /** * $name 30. Text color * $type color */ -$chat-avatar-color: $base-text-color !default; +$chat-avatar-color: ds.$color-content-neutral-default-rest !default; /** * $name 31. Background color * $type color */ -$chat-avatar-background-color: $base-active-bg !default; +$chat-avatar-background-color: ds.$color-surface-neutral-default-active !default; /** * $name 40. Text color (sent messages) * $type color */ -$chat-bubble-color-primary: $base-text-color !default; +$chat-bubble-color-primary: ds.$color-content-neutral-default-rest !default; /** * $name 41. Background color (sent messages) * $type color */ -$chat-bubble-background-color-primary: null !default; +$chat-bubble-background-color-primary: ds.$color-surface-primary-subdued-rest !default; /** * $name 42. Text color (received messages) * $type color */ -$chat-bubble-color-secondary: $base-text-color !default; +$chat-bubble-color-secondary: ds.$color-content-neutral-default-rest !default; /** * $name 43. Background color (received messages) * $type color */ -$chat-bubble-background-color-secondary: null !default; +$chat-bubble-background-color-secondary: ds.$color-surface-neutral-subdued-rest !default; /** * $name 50. User name color * $type color */ -$chat-information-author-name-color: null !default; +$chat-information-author-name-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 51. Timestamp color * $type color */ -$chat-information-timestamp-color: null !default; +$chat-information-timestamp-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 52. Day header color * $type color */ -$chat-messagelist-day-header-color: null !default; +$chat-messagelist-day-header-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 55. Alert color * $type color */ -$chat-alertlist-color: $base-invalid-color !default; +$chat-alertlist-color: ds.$color-content-danger-default-rest !default; /** * $name 65. Icon color * $type color */ -$chat-messagelist-empty-icon-color: null !default; +$chat-messagelist-empty-icon-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 66. Icon background color * $type color */ -$chat-messagelist-empty-icon-background-color: null !default; +$chat-messagelist-empty-icon-background-color: ds.$color-surface-neutral-subdued-rest !default; /** * $name 67. Title color * $type color */ -$chat-messagelist-empty-message-color: $base-text-color !default; +$chat-messagelist-empty-message-color: ds.$color-content-neutral-default-rest !default; /** * $name 68. Subtitle color * $type color */ -$chat-messagelist-empty-prompt-color: null !default; +$chat-messagelist-empty-prompt-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 80. Text color * $type color */ -$chat-typingindicator-color: null !default; +$chat-typingindicator-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 82. Central circle color * $type color */ -$chat-typingindicator-circle-bg-color-center: null !default; +$chat-typingindicator-circle-bg-color-center: ds.$color-content-neutral-subdued-rest !default; /** * $name 83. Outer circles color * $type color */ -$chat-typingindicator-circle-bg-color: null !default; +$chat-typingindicator-circle-bg-color: ds.$color-content-neutral-default-disabled !default; -$chat-file-container-background-color: $base-bg !default; -$chat-file-container-box-shadow: null !default; -$chat-file-secondary-color: null !default; +$chat-file-container-background-color: ds.$color-surface-neutral-default-rest !default; +$chat-file-container-box-shadow: ds.$box-shadow-sm !default; +$chat-file-secondary-color: ds.$color-content-neutral-subdued-rest !default; -$chat-suggestions-box-shadow: null !default; - -@if $mode == "light" { - $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; - $chat-information-author-name-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - $chat-typingindicator-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - - $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: 32.16%, $space: hsl) !default; - $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; - $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: -5.88%, $space: hsl) !default; - - $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -29.16%, $space: hsl) !default; - $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - - $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default; - $chat-file-secondary-color: $base-icon-color !default; - - $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default; - - @if $color == "blue" { - $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; - $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; - } - - @if $color == "saas" { - $chat-bubble-background-color-primary: color.mix($base-bg, $base-accent, 90%) !default; - $chat-messagelist-empty-icon-background-color: $base-border-color !default; - } -} - -@if $mode == "dark" { - $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; - $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; - - $chat-information-author-name-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - $chat-typingindicator-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - - $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: -25.88%, $space: hsl) !default; - $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; - $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: 7.84%, $space: hsl) !default; - - $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 33.92%, $space: hsl) !default; - $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - - $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default; - $chat-file-secondary-color: $base-icon-color !default; - - $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default; -} +$chat-suggestions-box-shadow: ds.$box-shadow-md !default; /** * $name 81. Background color @@ -190,6 +135,6 @@ $chat-suggestions-box-shadow: null !default; */ $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default; -$chat-messagelist-contextmenu-delete-button-color: $base-danger !default; -$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default; -$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default; +$chat-messagelist-contextmenu-delete-button-color: ds.$color-content-danger-default-rest !default; +$chat-messagelist-contextmenu-delete-button-focused-color: ds.$color-content-danger-default-rest !default; +$chat-messagelist-contextmenu-delete-button-focused-bg: ds.$color-surface-neutral-default-hovered !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss index be45e2bdd63c..2eefb13775bc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss @@ -1,10 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$colorbox-preview-icon-color: $base-icon-color !default; +$colorbox-preview-icon-color: ds.$color-content-neutral-subdued-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$colorbox-foreground-disabled: $base-foreground-disabled !default; +$colorbox-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss index 0ac69e1bfb5d..e7bc7b02244f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss @@ -1,7 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../overlay/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,7 +9,7 @@ */ $colorbox-overlay-bg: $overlay-content-bg !default; $colorbox-palette-cell-bg: $colorbox-overlay-bg !default; -$colorview-border-color: $base-border-color !default; -$colorview-label-color: $base-label-color !default; -$colorview-handle-color: $base-bg !default; -$colorview-handle-border-color: $base-border-color !default; +$colorview-border-color: ds.$color-border-neutral-default-rest !default; +$colorview-label-color: ds.$color-content-neutral-subdued-rest !default; +$colorview-handle-color: ds.$color-surface-neutral-default-rest !default; +$colorview-handle-border-color: ds.$color-border-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss index c21e7c18ba33..d4130f3dc409 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,27 +6,23 @@ * $name 10. File name text color * $type color */ -$fileuploader-filename-color: $base-text-color !default; -$fileuploader-file-icon-color: $base-icon-color !default; -$fileuploader-progressbar-status-color: $base-text-color !default; -$fluent-fileuploader-files-container-bg-color: $base-bg !default; +$fileuploader-filename-color: ds.$color-content-neutral-default-rest !default; +$fileuploader-file-icon-color: ds.$color-content-neutral-subdued-rest !default; +$fileuploader-progressbar-status-color: ds.$color-content-neutral-default-rest !default; +$fluent-fileuploader-files-container-bg-color: ds.$color-surface-neutral-default-rest !default; /** * $name 20. File status text color * $type color */ -$fileuploader-falename-status-color: $base-label-color !default; +$fileuploader-falename-status-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 30. Drag-and-drop border color * $type color */ -$fileuploader-border-color: $base-border-color !default; +$fileuploader-border-color: ds.$color-border-neutral-default-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$fileuploader-danger: $base-danger !default; -$fileuploader-label-color: $base-label-color !default; -$fileuploader-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($fileuploader-shadow-color, $alpha: 0.1) !default; +$fileuploader-danger: ds.$color-surface-danger-default-rest !default; +$fileuploader-label-color: ds.$color-content-neutral-subdued-rest !default; +$fluent-fileuploader-file-container-boxshadow: ds.$box-shadow-sm !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss index 7861e617a4b3..6ae25b5e6557 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss @@ -1,77 +1,66 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$filterbuilder-bg: $base-bg !default; +$filterbuilder-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 10. Text color * $type color */ -$filterbuilder-text-color: $base-text-color !default; +$filterbuilder-text-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Focused text color * $type color */ -$filterbuilder-text-focus-color: null !default; +$filterbuilder-text-focus-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 30. Plus icon color * $type color */ -$filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.7) !default; -$filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; -$filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; +$filterbuilder-plus-icon-color: ds.$color-content-success-default-rest !default; +$filterbuilder-plus-icon-hover-color: ds.$color-content-success-default-hovered !default; +$filterbuilder-plus-icon-focus-color: ds.$color-content-success-default-active !default; /** * $name 40. Remove icon color * $type color */ -$filterbuilder-remove-icon-color: color.change($base-danger, $alpha: 0.7) !default; -$filterbuilder-remove-icon-hover-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; -$filterbuilder-remove-icon-focus-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; +$filterbuilder-remove-icon-color: ds.$color-content-danger-default-rest !default; +$filterbuilder-remove-icon-hover-color: ds.$color-content-danger-default-hovered !default; +$filterbuilder-remove-icon-focus-color: ds.$color-content-danger-default-active !default; /** * $name 50. Group operation button color * $type color */ -$filterbuilder-group-operation-color: color.change($base-danger, $alpha: 0.3) !default; -$filterbuilder-group-operation-hover-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.2) !default; -$filterbuilder-group-operation-focus-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.7) !default; +$filterbuilder-group-operation-color: ds.$color-surface-danger-subdued-rest !default; +$filterbuilder-group-operation-hover-color: ds.$color-surface-danger-subdued-hovered !default; +$filterbuilder-group-operation-focus-color: ds.$color-surface-danger-default-rest !default; /** * $name 60. Data field button color * $type color */ -$filterbuilder-item-field-color: color.change($base-accent, $alpha: 0.3) !default; -$filterbuilder-item-field-hover-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.2) !default; -$filterbuilder-item-field-focus-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.7) !default; +$filterbuilder-item-field-color: ds.$color-surface-primary-subdued-rest !default; +$filterbuilder-item-field-hover-color: ds.$color-surface-primary-subdued-hovered !default; +$filterbuilder-item-field-focus-color: ds.$color-surface-primary-default-rest !default; /** * $name 70. Operation button color * $type color */ -$filterbuilder-item-operator-color: color.change($base-success, $alpha: 0.3) !default; -$filterbuilder-item-operator-hover-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.2) !default; -$filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.7) !default; +$filterbuilder-item-operator-color: ds.$color-surface-success-subdued-rest !default; +$filterbuilder-item-operator-hover-color: ds.$color-surface-success-subdued-hovered !default; +$filterbuilder-item-operator-focus-color: ds.$color-surface-success-default-rest !default; /** * $name 80. Value button color * $type color */ -$filterbuilder-item-value-color: color.change($base-icon-color, $alpha: 0.24) !default; -$filterbuilder-item-value-hover-color: color.change($base-icon-color, $alpha: 0.32) !default; -$filterbuilder-item-value-focus-color: $base-icon-color !default; -$filterbuilder-menu-icon-color: $base-text-color !default; - - -@if $mode == "light" { - $filterbuilder-text-focus-color: #fff !default; -} - -@if $mode == "dark" { - $filterbuilder-text-focus-color: #000 !default; -} +$filterbuilder-item-value-color: ds.$color-surface-neutral-alpha-rest !default; +$filterbuilder-item-value-hover-color: ds.$color-surface-neutral-alpha-hovered !default; +$filterbuilder-item-value-focus-color: ds.$color-surface-neutral-alpha-active !default; +$filterbuilder-menu-icon-color: ds.$color-content-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss index ef8a1f3bac79..9a2e5113c374 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,27 +6,13 @@ * $name 10. Label text color * $type color */ -$form-field-item-color: null !default; -$form-item-help-text-color: $base-label-color !default; +$form-field-item-color: ds.$color-content-neutral-default-rest !default; +$form-item-help-text-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 20. Group border color * $type color */ -$form-group-border-color: $base-border-color !default; +$form-group-border-color: ds.$color-border-neutral-default-rest !default; $form-field-required-color: $form-field-item-color !default; $form-field-mark-color: $form-field-item-color !default; - -@if $mode == "light" { - @if $color == "blue" { - $form-field-item-color: $base-text-color !default; - } - - @if $color == "saas" { - $form-field-item-color: $base-label-color !default; - } -} - -@if $mode == "dark" { - $form-field-item-color: $base-text-color !default; -} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss index 2bd30444bcbb..59cde3abeda1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss @@ -1,15 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../dropDownEditor/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $lookup-icon-color: $dropdowneditor-icon-color !default; $lookup-icon-color-active: $dropdowneditor-icon-active-color !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$lookup-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$lookup-shadow: 0 0 2px 0 color.change($lookup-shadow-color, $alpha: 0.12) !default; +$lookup-shadow: ds.$box-shadow-sm !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss index 8868f5b732ac..0f1dfdae7e48 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,11 +6,11 @@ * $name 180. Pager selected item text color * $type color */ -$pagination-page-selected-color: $base-inverted-text-color !default; -$pagination-page-hovered-bg: $base-hover-bg !default; +$pagination-page-selected-color: ds.$color-content-neutral-default-static-dark-rest !default; +$pagination-page-hovered-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 190. Pager selected item background color * $type color */ -$pagination-page-selected-bg: $base-accent !default; +$pagination-page-selected-bg: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss index 4421c0573c88..6399ee4177c2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,4 +6,4 @@ * $name 10. Item background color * $type color */ -$selectbox-list-bg: $base-element-bg !default; +$selectbox-list-bg: ds.$color-surface-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss index e25e238cb8cc..77cf7dcf7d5d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$tabpanel-border-color: $base-border-color !default; +$tabpanel-border-color: ds.$color-border-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss index 43e5c7081da1..428c2f5b94c3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; @use "../textEditor/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,38 +7,29 @@ * $name 10. Tag text color * $type color */ -$tagbox-tag-color: $base-text-color !default; +$tagbox-tag-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Tag background color * $type color */ -$tagbox-tag-bg: null !default; -$tagbox-tag-hover-bg: $base-typography-bg !default; +$tagbox-tag-bg: ds.$tag-color-bg-rest !default; +$tagbox-tag-hover-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 30. Tag active text color * $type color */ -$tagbox-tag-active-color: $base-text-color !default; +$tagbox-tag-active-color: ds.$color-content-neutral-default-rest !default; /** * $name 40. Tag close button color * $type color */ -$tagbox-tag-button-remove-bg: $base-icon-color !default; -$tagbox-tag-border-color-focused: $base-accent-active !default; -$tagbox-select-all-border-color: $base-border-color !default; -$tagbox-tag-foreground-disabled: $base-foreground-disabled !default; -$tagbox-tag-disabled: $base-background-disabled !default; +$tagbox-tag-button-remove-bg: ds.$color-content-neutral-subdued-rest !default; +$tagbox-tag-border-color-focused: ds.$color-border-primary-default-rest !default; +$tagbox-select-all-border-color: ds.$color-border-neutral-default-rest !default; +$tagbox-tag-foreground-disabled: ds.$color-content-neutral-default-disabled !default; +$tagbox-tag-disabled: ds.$tag-color-bg-disabled !default; -@if $mode == "light" { - $tagbox-tag-bg: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default; -} - -@if $mode == "dark" { - $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$tagbox-border-color-disabled: $base-border-color-disabled !default; +$tagbox-border-color-disabled: ds.$color-border-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss index 711c15e59712..06c3b3a9f51c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,5 +7,5 @@ * $type color */ $toolbar-bg: transparent !default; -$toolbar-color: $base-text-color !default; -$toolbar-separator-color: $base-separator-color !default; +$toolbar-color: ds.$color-content-neutral-default-rest !default; +$toolbar-separator-color: ds.$separator-color !default; From 43a40ea89337d6da9d7eca3ab57b3eabaca5cdf6 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 20 Jul 2026 10:01:19 +0400 Subject: [PATCH 13/27] migrate grids --- .../scss/widgets/base/dataGrid/_index.scss | 5 +- .../scss/widgets/base/treeList/_index.scss | 5 +- .../scss/widgets/dxdsfluent/_colors.scss | 8 - .../widgets/dxdsfluent/cardView/_colors.scss | 302 ++++-------------- .../widgets/dxdsfluent/dataGrid/_colors.scss | 24 +- .../widgets/dxdsfluent/diagram/_colors.scss | 34 +- .../widgets/dxdsfluent/diagram/_index.scss | 4 +- .../widgets/dxdsfluent/gridBase/_colors.scss | 117 +++---- .../widgets/dxdsfluent/treeList/_colors.scss | 7 +- 9 files changed, 134 insertions(+), 372 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss index 070145a19561..179bc4ff08d2 100644 --- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss @@ -12,6 +12,7 @@ $base-focus-color: null !default; $datagrid-text-stub-background-image-path: null !default; @use "sass:color"; +@use "sass:meta"; @use "../mixins" as *; @use "../icon_fonts" as *; @use "./common"; @@ -309,11 +310,11 @@ $datagrid-text-stub-background-image-path: null !default; @keyframes dx-datagrid-highlight-change { from { - background-color: color.change($datagrid-base-color, $alpha: 0.08); + background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08)); } 50% { - background-color: color.change($datagrid-base-color, $alpha: 0.08); + background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08)); } } diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss index 045d1d1fc5d0..4b7309a4607c 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss @@ -12,6 +12,7 @@ $header-filter-color-empty: null !default; $base-focus-color: null !default; @use "sass:color"; +@use "sass:meta"; @use "../mixins" as *; @use "../icon_fonts" as *; @use "./common" as *; @@ -284,11 +285,11 @@ $treelist-row-error-color: $datagrid-row-error-color; @keyframes dx-treelist-highlight-change { from { - background-color: color.change($treelist-base-color, $alpha: 0.08); + background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08)); } 50% { - background-color: color.change($treelist-base-color, $alpha: 0.08); + background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08)); } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index 6efd4d0bc595..cfeeff3c79dd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -256,12 +256,6 @@ $scrollview-pulldown-path: null !default; $scrollview-pulldown-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/pulldown.png') !default; } -/** -* $name 80. Hover state text color -* $type color -*/ -$base-hover-color: $base-text-color !default; - /** * $name 100. Focused state text color * $type color @@ -282,8 +276,6 @@ $base-link-color: $base-accent !default; $base-element-bg: $base-bg !default; -$base-invalid-color: $base-danger !default; - :root { --dx-component-color-bg: #{$base-bg}; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss index 0c7d36023717..0f81940bf5fd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss @@ -1,6 +1,4 @@ -@use 'sass:color'; -@use '../colors' as *; -@use '../color' as extcolor; +@use '../../../_design-system/variables/ds' as ds; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @use '../../base/cardView/header_panel/item/variables' as *; @@ -15,25 +13,27 @@ // adduse +// Mode/accent is resolved by the design tokens, so the former light/dark branches collapse to one. + // #region COMMON SETTINGS /** * $name 100. Background color * $type color */ -$cardview-fluent-common-bg-color: null !default; +$cardview-fluent-common-bg-color: ds.$color-surface-neutral-subdued-rest !default; /** * $name 102. Link color * $type color */ -$cardview-fluent-common-link-color: null !default; +$cardview-fluent-common-link-color: ds.$color-content-primary-default-rest !default; /** * $name 103. Text color * $type color */ -$cardview-fluent-common-text-color: null !default; +$cardview-fluent-common-text-color: ds.$color-content-neutral-default-rest !default; // #endregion @@ -43,45 +43,45 @@ $cardview-fluent-common-text-color: null !default; * $name 200. Background color * $type color */ -$cardview-fluent-card-bg-color: null !default; +$cardview-fluent-card-bg-color: ds.$color-surface-neutral-default-rest !default; /** * $name 201. Border color * $type color */ -$cardview-fluent-card-border-color: null !default; +$cardview-fluent-card-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 203. Divider color * $type color */ -$cardview-fluent-card-divider-color: null !default; +$cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; /** * $name 204. Text color * $type color */ -$cardview-fluent-card-text-color: null !default; +$cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; /** * $name 206. Cover background color * $type color */ -$cardview-fluent-card__cover-bg-color: null !default; +$cardview-fluent-card__cover-bg-color: ds.$color-surface-neutral-default-static-light-rest !default; /** * $name 207. "Empty cover" background color * $type color */ -$cardview-fluent-card__cover--noimage-bg-color: null !default; +$cardview-fluent-card__cover--noimage-bg-color: ds.$color-surface-neutral-deep-rest !default; /** * $name 208. "Empty cover" icon color * $type color */ -$cardview-fluent-card__cover--noimage__icon-color: null !default; +$cardview-fluent-card__cover--noimage__icon-color: ds.$color-content-neutral-subdued-rest !default; -$cardview-fluent-card--focused-outline-color: null !default; +$cardview-fluent-card--focused-outline-color: ds.$color-border-primary-default-rest !default; // #endregion @@ -91,43 +91,43 @@ $cardview-fluent-card--focused-outline-color: null !default; * $name 300. Background color * $type color */ -$cardview-fluent-card--selected-bg-color: null !default; +$cardview-fluent-card--selected-bg-color: ds.$color-surface-primary-subdued-rest !default; /** * $name 301. Border color * $type color */ -$cardview-fluent-card--selected-border-color: null !default; +$cardview-fluent-card--selected-border-color: ds.$color-border-primary-default-rest !default; /** * $name 302. Divider color * $type color */ -$cardview-fluent-card--selected-divider-color: null !default; +$cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; /** * $name 303. Text color * $type color */ -$cardview-fluent-card--selected-text-color: null !default; +$cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; /** * $name 305. Cover background color * $type color */ -$cardview-fluent-card--selected__cover-bg-color: null !default; +$cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; /** * $name 306. "Empty cover" background color * $type color */ -$cardview-fluent-card--selected__cover--noimage-bg-color: null !default; +$cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; /** * $name 307. "Empty cover" icon color * $type color */ -$cardview-fluent-card--selected__cover--noimage__icon-color: null !default; +$cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; // #endregion @@ -137,39 +137,39 @@ $cardview-fluent-card--selected__cover--noimage__icon-color: null !default; * $name 400. Background color * $type color */ -$cardview-fluent-header-panel__item-bg-color: null !default; +$cardview-fluent-header-panel__item-bg-color: ds.$color-surface-neutral-deep-rest !default; /** * $name 401. Border color * $type color */ -$cardview-fluent-header-panel__item-border-color: null !default; +$cardview-fluent-header-panel__item-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 403. Text color * $type color */ -$cardview-fluent-header-panel__item-text-color: null !default; +$cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; /** * $name 405. Icon color * $type color */ -$cardview-fluent-header-panel__item__icon-color: null !default; +$cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; /** * $name 406. Active "Filter" icon color * $type color */ -$cardview-fluent-header-panel__item__header-filter-icon--selected-color: null !default; +$cardview-fluent-header-panel__item__header-filter-icon--selected-color: ds.$color-content-primary-default-rest !default; /** * $name 407. Sort index text color * $type color */ -$cardview-fluent-header-panel__item__sort-index-text-color: null !default; +$cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; -$cardview-fluent-header-panel__item--focused-outline-color: null !default; +$cardview-fluent-header-panel__item--focused-outline-color: ds.$color-border-primary-default-rest !default; // #endregion @@ -179,37 +179,37 @@ $cardview-fluent-header-panel__item--focused-outline-color: null !default; * $name 500. Background color * $type color */ -$cardview-fluent-header-panel__item--hovered-bg-color: null !default; +$cardview-fluent-header-panel__item--hovered-bg-color: ds.$color-surface-neutral-deep-hovered !default; /** * $name 501. Border color * $type color */ -$cardview-fluent-header-panel__item--hovered-border-color: null !default; +$cardview-fluent-header-panel__item--hovered-border-color: ds.$color-border-neutral-default-hovered !default; /** * $name 502. Text color * $type color */ -$cardview-fluent-header-panel__item--hovered-text-color: null !default; +$cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default; /** * $name 504. Icon color * $type color */ -$cardview-fluent-header-panel__item--hovered__icon-color: null !default; +$cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default; /** * $name 505. Active "Filter" icon color * $type color */ -$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: null !default; +$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; /** * $name 506. Sort index text color * $type color */ -$cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !default; +$cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; // #endregion @@ -219,37 +219,37 @@ $cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !defau * $name 600. Background color * $type color */ -$cardview-fluent-header-panel__item--disabled-bg-color: null !default; +$cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; /** * $name 601. Border color * $type color */ -$cardview-fluent-header-panel__item--disabled-border-color: null !default; +$cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; /** * $name 602. Text color * $type color */ -$cardview-fluent-header-panel__item--disabled-text-color: null !default; +$cardview-fluent-header-panel__item--disabled-text-color: ds.$color-content-neutral-default-disabled !default; /** * $name 604. Icon color * $type color */ -$cardview-fluent-header-panel__item--disabled__icon-color: null !default; +$cardview-fluent-header-panel__item--disabled__icon-color: ds.$color-content-neutral-default-disabled !default; /** * $name 605. Active "Filter" icon color * $type color */ -$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: null !default; +$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: ds.$color-content-neutral-default-disabled !default; /** * $name 606. Sort index text color * $type color */ -$cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !default; +$cardview-fluent-header-panel__item--disabled__sort-index-text-color: ds.$color-content-neutral-default-disabled !default; // #endregion @@ -259,37 +259,37 @@ $cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !defa * $name 700. Background color * $type color */ -$cardview-fluent-header-panel__item--dragged-bg-color: null !default; +$cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; /** * $name 701. Border color * $type color */ -$cardview-fluent-header-panel__item--dragged-border-color: null !default; +$cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; /** * $name 702. Text color * $type color */ -$cardview-fluent-header-panel__item--dragged-text-color: null !default; +$cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; /** * $name 704. "Drag allowed" icon color * $type color */ -$cardview-fluent-header-panel__item--dragged__allowance-icon-color: null !default; +$cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; /** * $name 705. "Drag blocked" icon color * $type color */ -$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: null !default; +$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: ds.$color-content-danger-default-rest !default; /** * $name 706. Box shadow color * $type color */ -$cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default; +$cardview-fluent-header-panel__item--dragged-box-shadow-color: ds.$color-shadow-key !default; // #endregion @@ -299,25 +299,25 @@ $cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default; * $name 800. Background color * $type color */ -$cardview-fluent-header-panel__dropzone-bg-color: null !default; +$cardview-fluent-header-panel__dropzone-bg-color: ds.$color-surface-primary-subdued-rest !default; /** * $name 802. Border color * $type color */ -$cardview-fluent-header-panel__dropzone-border-color: null !default; +$cardview-fluent-header-panel__dropzone-border-color: ds.$color-border-primary-default-rest !default; /** * $name 803. Text color * $type color */ -$cardview-fluent-header-panel__dropzone-text-color: null !default; +$cardview-fluent-header-panel__dropzone-text-color: ds.$color-content-primary-default-rest !default; /** * $name 804. Icon color * $type color */ -$cardview-fluent-header-panel__dropzone__icon-color: null !default; +$cardview-fluent-header-panel__dropzone__icon-color: ds.$color-content-primary-default-rest !default; // #endregion @@ -327,25 +327,25 @@ $cardview-fluent-header-panel__dropzone__icon-color: null !default; * $name 900. Background color * $type color */ -$cardview-fluent-filter-panel-bg-color: null !default; +$cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; /** * $name 902. Border color * $type color */ -$cardview-fluent-filter-panel-border-color: null !default; +$cardview-fluent-filter-panel-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 903. Text color * $type color */ -$cardview-fluent-filter-panel-text-color: null !default; +$cardview-fluent-filter-panel-text-color: ds.$color-content-primary-default-rest !default; /** * $name 904. Icon color * $type color */ -$cardview-fluent-filter-panel__icon-color: null !default; +$cardview-fluent-filter-panel__icon-color: ds.$color-content-primary-default-rest !default; // #endregion @@ -355,25 +355,25 @@ $cardview-fluent-filter-panel__icon-color: null !default; * $name 1000. Background color * $type color */ -$cardview-fluent-nodata-view-bg-color: null !default; +$cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; /** * $name 1001. Text color * $type color */ -$cardview-fluent-nodata-view-text-color: null !default; +$cardview-fluent-nodata-view-text-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 1002. Icon color * $type color */ -$cardview-fluent-nodata-view__icon-color: null !default; +$cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; /** * $name 1003. Icon background color * $type color */ -$cardview-fluent-nodata-view__icon-bg-color: null !default; +$cardview-fluent-nodata-view__icon-bg-color: ds.$color-surface-neutral-deep-rest !default; // #endregion @@ -383,204 +383,28 @@ $cardview-fluent-nodata-view__icon-bg-color: null !default; * $name 1100. Background color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-bg-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-bg-color: ds.$color-surface-highlight-rest !default; /** * $name 1102. Text color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-text-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-text-color: ds.$color-content-highlight-rest !default; /** * $name 1104. Box shadow color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: ds.$color-shadow-key !default; // #endregion // #region COLUMN CHOOSER -$cardview-fluent-columnchooser--empty__message-color: null !default; +$cardview-fluent-columnchooser--empty__message-color: ds.$color-content-neutral-subdued-rest !default; // #endregion -@if $mode == 'light' { - - // Common - $cardview-fluent-common-bg-color: $base-typography-bg !default; - $cardview-fluent-common-link-color: $base-link-color !default; - $cardview-fluent-common-text-color: $base-text-color !default; - - // Card - $cardview-fluent-card-bg-color: $base-bg !default; - $cardview-fluent-card-border-color: $base-border-color !default; - $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; - $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__cover-bg-color: #FFF !default; - $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; - $cardview-fluent-card__cover--noimage__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; - - $cardview-fluent-card--focused-outline-color: $base-accent !default; - - // Card - selected - $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; - $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 2.21%, $lightness: 44.31%) !default; - $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; - $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; - $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; - $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; - $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; - - // Header panel item - default state - $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; - $cardview-fluent-header-panel__item-border-color: $base-border-color !default; - $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; - - $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; - - // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: -1.96%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: -13.73%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default; - $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; - - // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default; - - // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.80%, $lightness: -9.61%) !default; - $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; - - // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; - $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-filter-panel-border-color: $base-border-color !default; - $cardview-fluent-filter-panel-text-color: $base-accent !default; - $cardview-fluent-filter-panel__icon-color: $base-accent !default; - - // Empty view - $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; - $cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; - $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -9.80%, $space: hsl) !default; - - // Search highlight - $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; - $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; -} - -@if $mode == "dark" { - - // Common - $cardview-fluent-common-bg-color: $base-typography-bg !default; - $cardview-fluent-common-link-color: $base-link-color !default; - $cardview-fluent-common-text-color: $base-text-color !default; - - // Card - $cardview-fluent-card-bg-color: $base-bg !default; - $cardview-fluent-card-border-color: $base-border-color !default; - $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; - $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__cover-bg-color: #FFF !default; - $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; - $cardview-fluent-card__cover--noimage__icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default; - - $cardview-fluent-card--focused-outline-color: $base-accent !default; - - // Card - selected - $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; - $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -11.06%, $lightness: -36.27%) !default; - $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; - $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; - $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; - $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; - $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; - - // Header panel item - default state - $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; - $cardview-fluent-header-panel__item-border-color: $base-border-color !default; - $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; - - $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; - - // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: 18.04%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: 11.76%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-common-text-color !default; - - // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: -56.08%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: -56.08%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -6.72%, $space: hsl, $lightness: -18.04%) !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: -56.08%, $space: hsl) !default; - - // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default; - $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; - - // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; - $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-filter-panel-border-color: $base-border-color !default; - $cardview-fluent-filter-panel-text-color: $base-accent !default; - $cardview-fluent-filter-panel__icon-color: $base-accent !default; - - // Empty view - $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; - $cardview-fluent-nodata-view__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; - $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: 3.92%, $space: hsl) !default; - - // Search highlight - $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; - $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default; - $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; -} - $cardview-bg-color: $cardview-fluent-common-bg-color !default; $cardview-link-color: $cardview-fluent-common-link-color !default; $cardview-text-color: $cardview-fluent-common-text-color !default; @@ -654,4 +478,4 @@ $cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px $cardvie $cardview-columnchooser--empty__message-color: $cardview-fluent-columnchooser--empty__message-color !default; -$cardview-header-item__sort-indicator__border-color: $base-accent !default; +$cardview-header-item__sort-indicator__border-color: ds.$color-border-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss index d66891a83cac..329f6f67bc65 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss @@ -1,25 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-datagrid-grouppanel-item-bg: null !default; - -@if $mode == "light" { - @if $color == "blue"{ - $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; - } - - @if $color == "saas" { - $fluent-datagrid-grouppanel-item-bg: color.change($base-hover-bg, $alpha: 0.4) !default; - } -} - -@if $mode == "dark" { - $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; -} +$fluent-datagrid-grouppanel-item-bg: ds.$color-surface-neutral-deep-rest !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$datagrid-accent: $base-accent !default; -$datagrid-border-color-disabled: $base-border-color-disabled !default; +$datagrid-accent: ds.$color-surface-primary-default-rest !default; +$datagrid-border-color-disabled: ds.$color-border-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss index 560d5a919d17..3687ae2d4b88 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -1,42 +1,38 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; -@use "../overlay/colors" as *; -@use "../button/colors" as *; -@use "../loadIndicator/colors" as *; @use "../../../_design-system/variables/ds" as ds; // adduse -$diagram-border-color: $base-border-color !default; -$diagram-toolbar-border-color: $base-border-color !default; +$diagram-border-color: ds.$color-border-neutral-default-rest !default; +$diagram-toolbar-border-color: ds.$color-border-neutral-default-rest !default; $diagram-normal-format-active-bg: ds.$button-outline-color-bg-active !default; $diagram-default-format-active-bg: ds.$button-contained-color-bg-active !default; $diagram-danger-format-active-bg: ds.$color-surface-danger-default-active !default; $diagram-success-format-active-bg: ds.$color-surface-success-default-active !default; -$diagram-image-icon-base-color: null !default; -$diagram-image-icon-accent-color: null !default; +$diagram-image-icon-base-color: ds.$color-content-neutral-subdued-rest !default; +$diagram-image-icon-accent-color: ds.$color-content-primary-default-rest !default; $diagram-toolbox-shape-text-opacity: null !default; - @if $mode == "light" { - $diagram-image-icon-base-color: $base-icon-color !default; - $diagram-image-icon-accent-color: $load-indicator-segment-bg-color !default; $diagram-toolbox-shape-text-opacity: 0.25 !default; } @if $mode == "dark" { - $diagram-image-icon-base-color: $base-border-color !default; - $diagram-image-icon-accent-color: $base-accent !default; $diagram-toolbox-shape-text-opacity: 0.5 !default; } // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$diagram-bg: $base-bg !default; -$diagram-danger: $base-danger !default; -$diagram-shadow-color: $base-shadow-color !default; +$diagram-bg: ds.$color-surface-neutral-default-rest !default; +$diagram-danger: ds.$color-content-danger-default-rest !default; + +/* + * SVG data-uri icons are colored by baking the value into a background-image data-uri at build + * time (string replace of `currentColor`). CSS var() tokens do NOT resolve inside such a data-uri + * (they render black), so the icon colors below must stay concrete $base-* values. See DIVERGENCES. + */ $diagram-text-color: $base-text-color !default; +$diagram-properties-panel-icon-color: $base-inverted-text-color !default; -// Canvas = deeper neutral surface (overlay-content-bg is a token now; diagram gets its full pass in w5) +// Canvas = deeper neutral surface $diagram-canvas-bg: ds.$color-surface-neutral-subdued-rest !default; -$diagram-shadow: 0 1px 8px color.change($diagram-shadow-color, $alpha: 0.175) !default; +$diagram-shadow: 0 1px 8px ds.$color-shadow-key !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss index 2e23b9025dfb..b812b21c9be0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -468,12 +468,12 @@ $diagram-toolbox-title-size: 18px; @include diagram-action-icons-mixin($diagram-text-color, $diagram-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); .dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $popup-title-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $diagram-text-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); line-height: $diagram-toolbox-title-size; background-size: $diagram-toolbox-title-size $diagram-toolbox-title-size; } .dx-diagram-i-button-properties-panel-open { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $button-default-color, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $diagram-properties-panel-icon-color, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss index 3eb6a6283c2c..ff3c428de5ee 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss @@ -1,26 +1,23 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; @use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$datagrid-base-color: $base-text-color !default; +$datagrid-base-color: ds.$color-content-neutral-default-rest !default; /** * $name 15. Background color * $type color */ -$datagrid-base-background-color: $base-bg !default; -$datagrid-border-color: $base-border-color !default; +$datagrid-base-background-color: ds.$color-surface-neutral-default-rest !default; +$datagrid-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 20. Header text color * $type color */ $datagrid-columnchooser-item-color: $datagrid-base-color !default; -$datagrid-block-separator-bg: null !default; /** * $name 25. Header text weight @@ -33,11 +30,11 @@ $datagrid-columnchooser-font-weight: 600 !default; * $name 35. Draggable header border color * $type color */ -$datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; -$datagrid-drag-header-shadow-color: null !default; -$datagrid-drag-header-second-shadow-color: null !default; +$datagrid-drag-header-border-color: rgb(from #{ds.$color-border-primary-default-rest} r g b / 0.5) !default; +$datagrid-drag-header-shadow-color: ds.$color-shadow-ambient !default; +$datagrid-drag-header-second-shadow-color: ds.$color-shadow-key !default; $datagrid-header-drag-bg: $datagrid-base-background-color !default; -$header-filter-color: null !default; +$header-filter-color: $datagrid-columnchooser-item-color !default; /** * $name 51. Selected row background color @@ -61,15 +58,15 @@ $datagrid-row-selected-color: $datagrid-base-color !default; * $name 65. Focused row text color * $type color */ -$datagrid-row-focused-color: $base-text-color !default; +$datagrid-row-focused-color: ds.$color-content-neutral-default-rest !default; /** * $name 70. Focused row background color * $type color */ -$datagrid-row-focused-bg: null !default; -$datagrid-hover-bg: $base-hover-bg !default; -$datagrid-row-hovered-color: $base-hover-color !default; +$datagrid-row-focused-bg: ds.$color-surface-primary-subdued-rest !default; +$datagrid-hover-bg: ds.$color-surface-neutral-default-hovered !default; +$datagrid-row-hovered-color: ds.$color-content-neutral-default-rest !default; /** * $name 40. Modified data background color @@ -78,129 +75,99 @@ $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: $button-success-text-hover-bg !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-hover-bg !default; -$datagrid-cell-removed-text-color: null !default; +$datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; /** * $name 45. Invalid data faded color * $type color */ $datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default; -$datagrid-nodata-color: $base-label-color !default; +$datagrid-nodata-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 90. Group row text color * $type color */ -$datagrid-group-row-color: null !default; +$datagrid-group-row-color: $datagrid-columnchooser-item-color !default; /** * $name 95. Group row background color * $type color */ -$datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default; -$datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; +$datagrid-group-row-bg: ds.$color-surface-neutral-default-rest !default; +$datagrid-master-detail-cell-bg: ds.$color-surface-neutral-subdued-rest !default; /** * $name 105. Highlighted text color * $type color */ -$datagrid-search-color: $base-inverted-text-color !default; -$datagrid-chevron-icon-color: $base-spin-icon-color !default; +$datagrid-search-color: ds.$color-content-neutral-default-static-dark-rest !default; +$datagrid-chevron-icon-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 110. Highlighted text background color * $type color */ -$datagrid-search-bg: $base-accent !default; +$datagrid-search-bg: ds.$color-surface-primary-default-rest !default; /** * $name 115. Error row text color * $type color */ -$datagrid-row-error-color: $base-inverted-text-color !default; +$datagrid-row-error-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 120. Error row background color * $type color */ -$datagrid-row-error-bg: $base-invalid-color !default; -$datagrid-link-color: $base-link-color !default; +$datagrid-row-error-bg: ds.$color-surface-danger-default-rest !default; +$datagrid-link-color: ds.$color-content-primary-default-rest !default; /** * $name 75. Focused cell border color * $type color */ -$datagrid-focused-border-color: color.mix($base-bg, $base-accent, 20%) !default; +$datagrid-focused-border-color: ds.$color-border-primary-default-rest !default; /** * $name 80. Editor background color * $type color */ -$datagrid-editor-bg: color.change($datagrid-base-background-color, $alpha: 0) !default; -$datagrid-drop-highlight-bg: $base-accent !default; -$datagrid-drop-highlight-color: $base-inverted-text-color !default; -$datagrid-columnchooser-bg: $base-element-bg !default; -$datagrid-columnchooser-item-bg: null !default; +$datagrid-editor-bg: transparent !default; +$datagrid-drop-highlight-bg: ds.$color-surface-primary-default-rest !default; +$datagrid-drop-highlight-color: ds.$color-content-neutral-default-static-dark-rest !default; +$datagrid-columnchooser-bg: ds.$color-surface-neutral-default-rest !default; +$datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; /** * $name 85. Alternate row background color * $type color */ -$datagrid-row-alternation-bg: null !default; +$datagrid-row-alternation-bg: ds.$color-surface-neutral-deep-rest !default; /** * $name 100. Summary item color * $type color */ -$datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; -$datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; +$datagrid-summary-color: ds.$color-content-neutral-subdued-rest !default; +$datagrid-columnchooser-message-color: ds.$color-content-neutral-subdued-rest !default; $datagrid-summary-bg: $datagrid-base-background-color !default; -$datagrid-column-separator-bg: $base-accent !default; -$datagrid-filter-row-background-color: null !default; -$datagrid-active-header-filter-icon-color: $base-accent !default; +$datagrid-column-separator-bg: ds.$color-surface-primary-default-rest !default; +$datagrid-filter-row-background-color: ds.$color-surface-neutral-subdued-rest !default; +$datagrid-active-header-filter-icon-color: ds.$color-content-primary-default-rest !default; $datagrid-text-stub-background-image-path: null !default; -$datagrid-filter-panel-color: $base-accent !default; -$datagrid-draggable-column-text-color: null !default; +$datagrid-filter-panel-color: ds.$color-content-primary-default-rest !default; +$datagrid-draggable-column-text-color: ds.$color-content-neutral-subdued-rest !default; $datagrid-text-link-disabled-opacity: $base-disabled-opacity; $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; @if $mode == "light" { - @if $color == "blue"{ - $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: -0.98%, $lightness: 50.00%) !default; - $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; - } - - @if $color == "saas" { - $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: 0%, $lightness: 26.47%) !default; - $datagrid-filter-row-background-color: $base-typography-bg !default; - } - - $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; - $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; - $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; - $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; - $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png') !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; } @if $mode == "dark" { - $datagrid-row-focused-bg: #0c3b5e !default; - $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; - $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; - $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; - $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; - $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; - $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; - $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png') !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default; } $header-filter-color-empty: $header-filter-color !default; @@ -211,8 +178,8 @@ $datagrid-border: 1px solid !default; } // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$gridbase-accent: $base-accent !default; -$gridbase-border-color: $base-border-color !default; -$gridbase-danger: $base-danger !default; -$gridbase-icon-color: $base-icon-color !default; -$gridbase-success: $base-success !default; +$gridbase-accent: ds.$color-content-primary-default-rest !default; +$gridbase-border-color: ds.$color-border-neutral-default-rest !default; +$gridbase-danger: ds.$color-content-danger-default-rest !default; +$gridbase-icon-color: ds.$color-content-neutral-subdued-rest !default; +$gridbase-success: ds.$color-content-success-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss index 829047cd80d4..b63c72bdc990 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss @@ -1,9 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../gridBase/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$treelist-chevron-icon-color: $base-spin-icon-color !default; +$treelist-chevron-icon-color: ds.$color-content-neutral-subdued-rest !default; $treelist-selection-chevron-icon-color: $treelist-chevron-icon-color !default; From 7b761d7e5d3f23e28ad111011a6830ee5076b8b5 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 20 Jul 2026 12:14:41 +0400 Subject: [PATCH 14/27] run dxdsfluent theme testing --- .github/workflows/testcafe_tests.yml | 11 ++++++++++- .github/workflows/visual-tests-demos.yml | 13 +++++++++---- .../utils/visual-tests/helpers/theme-utils.js | 16 +++++++++------- e2e/testcafe-devextreme/helpers/themeUtils.ts | 4 +++- e2e/testcafe-devextreme/runner.ts | 12 +++++++++--- .../tests/container-ai-integration.html | 3 +++ .../tests/container-extended.html | 3 +++ e2e/testcafe-devextreme/tests/container.html | 3 +++ 8 files changed, 49 insertions(+), 16 deletions(-) diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml index d969f34a49b4..5f1f7c5a02b6 100644 --- a/.github/workflows/testcafe_tests.yml +++ b/.github/workflows/testcafe_tests.yml @@ -249,6 +249,7 @@ jobs: style_dependent_matrix=$(cat <<'JSON' [ { "componentFolder": "accessibility", "name": "accessibility - fluent.dark", "theme": "fluent.blue.dark", "concurrency": 6 }, + { "componentFolder": "accessibility", "name": "accessibility - dxdsfluent.dark", "theme": "dxdsfluent.blue.dark", "concurrency": 6 }, { "componentFolder": "accessibility", "name": "accessibility - material.light", "theme": "material.blue.light", "concurrency": 6 }, { "componentFolder": "accessibility", "name": "accessibility - material.dark", "theme": "material.blue.dark", "concurrency": 6 } ] @@ -260,7 +261,15 @@ jobs: --argjson baseEnd "$base_matrix_end" \ --argjson styleDependent "$style_dependent_matrix" \ --arg stylesChanged "${{ needs.check-should-run.outputs.styles-changed }}" \ - '{ include: ($baseStart + (if $stylesChanged == "true" then $styleDependent else [] end) + $baseEnd) }') + '{ include: ( + $baseStart + + (if $stylesChanged == "true" then $styleDependent else [] end) + + $baseEnd + + (($baseStart + $baseEnd) | map( + select(.theme == null) + | . + { name: (.name + " - dxdsfluent"), theme: "dxdsfluent.blue.light" } + )) + ) }') echo "matrix=$matrix" >> $GITHUB_OUTPUT diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml index a451f1ad243a..48cee44a72c4 100644 --- a/.github/workflows/visual-tests-demos.yml +++ b/.github/workflows/visual-tests-demos.yml @@ -121,8 +121,12 @@ jobs: { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(1/3)" }, { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(2/3)" }, { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(3/3)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(1/3)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(2/3)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(3/3)" }, { "STRATEGY": "accessibility", "THEME": "material.blue.light", "CONSTEL": "jquery" }, - { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" } + { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" }, + { "STRATEGY": "accessibility", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery" } ] JSON ) @@ -130,7 +134,8 @@ jobs: dark_accessibility_matrix=$(cat <<'JSON' [ { "STRATEGY": "accessibility", "THEME": "material.blue.dark", "CONSTEL": "jquery" }, - { "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" } + { "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" }, + { "STRATEGY": "accessibility", "THEME": "dxdsfluent.blue.dark", "CONSTEL": "jquery" } ] JSON ) @@ -861,7 +866,7 @@ jobs: angular(9/10), angular(10/10), ] - THEME: ['fluent.blue.light'] + THEME: ['fluent.blue.light', 'dxdsfluent.blue.light'] runs-on: devextreme-shr2 name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }} @@ -990,7 +995,7 @@ jobs: fail-fast: false matrix: CONSTEL: [react, vue, angular] - THEME: ['fluent.blue.light'] + THEME: ['fluent.blue.light', 'dxdsfluent.blue.light'] runs-on: devextreme-shr2 name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }} diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js index 4d3fc5ae191d..34ab1b992ffb 100644 --- a/apps/demos/utils/visual-tests/helpers/theme-utils.js +++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js @@ -1,13 +1,15 @@ export const THEME = { generic: 'generic.light', fluent: 'fluent.blue.light', + dxdsfluent: 'dxdsfluent.blue.light', material: 'material.blue.light', }; export const DEFAULT_THEME_NAME = THEME.fluent; export const isMaterial = (theme = process.env.THEME) => theme?.startsWith('material'); -export const isFluent = (theme = process.env.THEME) => theme?.startsWith('fluent'); +export const isFluent = (theme = process.env.THEME) => /^(dxds)?fluent/.test(theme ?? DEFAULT_THEME_NAME); +export const getEtalonThemeName = (theme = DEFAULT_THEME_NAME) => theme.replace(/^dxdsfluent/, 'fluent'); export const getThemePostfix = (theme = DEFAULT_THEME_NAME) => ` (${theme})`; export const getScreenshotName = (baseName, theme) => { @@ -24,19 +26,19 @@ export async function testScreenshot( element, comparisonOptions, ) { - const testTheme = process.env.THEME; + const testTheme = getEtalonThemeName(process.env.THEME); const themeOptions = { - looksSameComparisonOptions: { - tolerance: 20, - antialiasingTolerance: 20, - }, + // looksSameComparisonOptions: { + // tolerance: 20, + // antialiasingTolerance: 20, + // }, textDiffTreshold: 0.2, }; const finalOptions = { ...comparisonOptions, - // ...themeOptions, + ...themeOptions, }; await t diff --git a/e2e/testcafe-devextreme/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts index 7677b96181f5..646e5caed805 100644 --- a/e2e/testcafe-devextreme/helpers/themeUtils.ts +++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts @@ -4,8 +4,10 @@ import { changeTheme } from './changeTheme'; const defaultThemeName = 'fluent.blue.light'; +const getEtalonThemeName = (themeName: string): string => themeName.replace(/^dxdsfluent/, 'fluent'); + export const getThemePostfix = (theme?: string): string => { - const themeName = (theme ?? process.env.theme) ?? defaultThemeName; + const themeName = getEtalonThemeName((theme ?? process.env.theme) ?? defaultThemeName); return ` (${themeName})`; }; diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts index 0be6eeeafc80..42c6dd949119 100644 --- a/e2e/testcafe-devextreme/runner.ts +++ b/e2e/testcafe-devextreme/runner.ts @@ -114,6 +114,12 @@ function setTestingTheme(args: ParsedArgs): void { process.env.theme = args.theme || 'fluent.blue.light'; } +const normalizeThemeForMatching = (themeName?: string): string | undefined => themeName?.replace(/^dxdsfluent/, 'fluent'); + +const matchTheme = (actualTheme: string | undefined, expectedTheme: string | undefined): boolean => ( + normalizeThemeForMatching(actualTheme) === normalizeThemeForMatching(expectedTheme) +); + function setShadowDom(args: ParsedArgs): void { process.env.shadowDom = args.shadowDom.toString(); } @@ -287,7 +293,7 @@ async function main() { testMeta?: any, ) => { if (testMeta?.runInTheme) { - return testMeta.runInTheme === process.env.theme; + return matchTheme(testMeta.runInTheme, process.env.theme); } return true; }); @@ -299,7 +305,7 @@ async function main() { _fixturePath: string, testMeta?: any, ) => { - if (testMeta?.runInTheme === process.env.theme) { + if (matchTheme(testMeta?.runInTheme, process.env.theme)) { return true; } @@ -307,7 +313,7 @@ async function main() { return false; } - return testMeta.themes.includes(args.theme); + return testMeta.themes.some((themeName: string) => matchTheme(themeName, args.theme)); }); } diff --git a/e2e/testcafe-devextreme/tests/container-ai-integration.html b/e2e/testcafe-devextreme/tests/container-ai-integration.html index f02b899c362c..66cb4acc4671 100644 --- a/e2e/testcafe-devextreme/tests/container-ai-integration.html +++ b/e2e/testcafe-devextreme/tests/container-ai-integration.html @@ -6,6 +6,9 @@ + + + diff --git a/e2e/testcafe-devextreme/tests/container-extended.html b/e2e/testcafe-devextreme/tests/container-extended.html index 00ac27d41752..ee5fe11f4c1c 100644 --- a/e2e/testcafe-devextreme/tests/container-extended.html +++ b/e2e/testcafe-devextreme/tests/container-extended.html @@ -6,6 +6,9 @@ + + + diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html index 21744e6fe26d..25187d6b3a23 100644 --- a/e2e/testcafe-devextreme/tests/container.html +++ b/e2e/testcafe-devextreme/tests/container.html @@ -6,6 +6,9 @@ + + + From 738e2c6ec197997a19593a9372e38800f3654af3 Mon Sep 17 00:00:00 2001 From: Ruslan Farkhutdinov Date: Wed, 8 Jul 2026 16:27:20 +0300 Subject: [PATCH 15/27] Revert "CI: Replace push triggers with merge_group in workflow files" (#34234) Co-authored-by: Ruslan Farkhutdinov --- .github/workflows/build_all.yml | 20 +++++++++++++++++++- .github/workflows/default_workflow.yml | 4 +++- .github/workflows/demos_unit_tests.yml | 3 ++- .github/workflows/lint.yml | 3 ++- .github/workflows/paths.yml | 3 ++- .github/workflows/playgrounds_tests.yml | 3 ++- .github/workflows/qunit_tests.yml | 3 ++- .github/workflows/renovation.yml | 3 ++- .github/workflows/styles.yml | 3 ++- .github/workflows/testcafe_tests.yml | 3 ++- .github/workflows/themebuilder_tests.yml | 3 ++- .github/workflows/ts_declarations.yml | 3 ++- .github/workflows/visual-tests-demos.yml | 3 ++- .github/workflows/wrapper_tests.yml | 3 ++- .github/workflows/wrapper_tests_e2e.yml | 3 +-- 15 files changed, 47 insertions(+), 16 deletions(-) diff --git a/.github/workflows/build_all.yml b/.github/workflows/build_all.yml index cb0636c7e4a0..9462ff78201a 100644 --- a/.github/workflows/build_all.yml +++ b/.github/workflows/build_all.yml @@ -4,7 +4,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: concurrency: @@ -104,6 +105,23 @@ jobs: artifacts/npm/*.tgz retention-days: 1 + - name: Build SBOMs + if: ${{ github.event_name == 'push' || github.event.inputs.SBOM == 'true' }} + env: + NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: | + pnpm set //npm.pkg.github.com/:_authToken="$NODE_AUTH_TOKEN"; + pnpm nx build sbom; + + - name: Upload SBOM artifacts + if: ${{ github.event_name == 'push' || github.event.inputs.SBOM == 'true' }} + uses: actions/upload-artifact@v7 + with: + name: sbom + path: | + packages/sbom/dist/**/* + retention-days: 1 + custom_bundles: runs-on: devextreme-shr2 needs: build diff --git a/.github/workflows/default_workflow.yml b/.github/workflows/default_workflow.yml index c49d07553117..8040bf5b5d0f 100644 --- a/.github/workflows/default_workflow.yml +++ b/.github/workflows/default_workflow.yml @@ -8,7 +8,9 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: + - "[0-9][0-9]_[0-9]" env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/demos_unit_tests.yml b/.github/workflows/demos_unit_tests.yml index 23ab6ba80137..dda5274d4211 100644 --- a/.github/workflows/demos_unit_tests.yml +++ b/.github/workflows/demos_unit_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index c3895595a4de..08cb04b97a07 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/paths.yml b/.github/workflows/paths.yml index b655ddc25446..9a02d0604c17 100644 --- a/.github/workflows/paths.yml +++ b/.github/workflows/paths.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: MAX_LENGTH: 170 diff --git a/.github/workflows/playgrounds_tests.yml b/.github/workflows/playgrounds_tests.yml index f66b6730e5e4..086997e5e2dd 100644 --- a/.github/workflows/playgrounds_tests.yml +++ b/.github/workflows/playgrounds_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/qunit_tests.yml b/.github/workflows/qunit_tests.yml index b395cde08da0..898fe5ba4d26 100644 --- a/.github/workflows/qunit_tests.yml +++ b/.github/workflows/qunit_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/renovation.yml b/.github/workflows/renovation.yml index c96e4d586876..dbba59d418eb 100644 --- a/.github/workflows/renovation.yml +++ b/.github/workflows/renovation.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml index 6b2ba4f2ab11..6974a602e60c 100644 --- a/.github/workflows/styles.yml +++ b/.github/workflows/styles.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml index 95b504511f13..d969f34a49b4 100644 --- a/.github/workflows/testcafe_tests.yml +++ b/.github/workflows/testcafe_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/themebuilder_tests.yml b/.github/workflows/themebuilder_tests.yml index 5257f4d50e9b..5330a5bfe7ed 100644 --- a/.github/workflows/themebuilder_tests.yml +++ b/.github/workflows/themebuilder_tests.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] env: NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }} diff --git a/.github/workflows/ts_declarations.yml b/.github/workflows/ts_declarations.yml index d713ba22d514..608dfba36626 100644 --- a/.github/workflows/ts_declarations.yml +++ b/.github/workflows/ts_declarations.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] jobs: check-ts-bundle: diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml index 7955fa36d347..a451f1ad243a 100644 --- a/.github/workflows/visual-tests-demos.yml +++ b/.github/workflows/visual-tests-demos.yml @@ -8,7 +8,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] workflow_dispatch: env: diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml index 5f6e0dc92d6d..bade72fd6e42 100644 --- a/.github/workflows/wrapper_tests.yml +++ b/.github/workflows/wrapper_tests.yml @@ -4,7 +4,8 @@ on: pull_request: paths-ignore: - 'apps/**/*.md' - merge_group: + push: + branches: [26_1] concurrency: group: wf-${{github.event.pull_request.number || github.ref || github.sha}}-${{github.workflow}} diff --git a/.github/workflows/wrapper_tests_e2e.yml b/.github/workflows/wrapper_tests_e2e.yml index 188c2d384177..8c6f04198e36 100644 --- a/.github/workflows/wrapper_tests_e2e.yml +++ b/.github/workflows/wrapper_tests_e2e.yml @@ -9,8 +9,7 @@ on: paths-ignore: - 'apps/**/*.md' push: - branches: [24_2, 25_*] - merge_group: + branches: [24_2, 25_*, 26_*] workflow_dispatch: env: From 304246a3fdddbb21c3a26c213da2ef669e9623d6 Mon Sep 17 00:00:00 2001 From: Aleksei Semikozov Date: Fri, 10 Jul 2026 14:20:44 -0300 Subject: [PATCH 16/27] Scheduler/PivotGrid: align @default tags with option types in public d.ts (#34198) --- .../src/ui/pivot-grid-field-chooser/index.ts | 6 +- .../src/ui/pivot-grid/index.ts | 6 +- .../src/ui/pivot-grid/nested/state-storing.ts | 4 +- .../src/pivot-grid-field-chooser.ts | 2 +- packages/devextreme-react/src/pivot-grid.ts | 10 +- packages/devextreme-react/src/scheduler.ts | 18 +-- .../field_chooser/m_field_chooser.ts | 2 +- .../field_chooser/m_field_chooser_base.ts | 2 +- .../__internal/grids/pivot_grid/m_widget.ts | 10 +- packages/devextreme/js/ui/pivot_grid.d.ts | 20 ++-- .../js/ui/pivot_grid/data_source.d.ts | 24 +--- .../js/ui/pivot_grid_field_chooser.d.ts | 8 +- packages/devextreme/js/ui/scheduler.d.ts | 76 ++++++------ .../fieldChooser.tests.js | 2 +- packages/devextreme/ts/dx.all.d.ts | 113 ++++++++++-------- 15 files changed, 147 insertions(+), 156 deletions(-) diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts index a79dc8acc058..f9ee9e4275ef 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts @@ -282,10 +282,10 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD */ @Input() - get state(): any { + get state(): any | undefined { return this._getOption('state'); } - set state(value: any) { + set state(value: any | undefined) { this._setOption('state', value); } @@ -498,7 +498,7 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() stateChange: EventEmitter; + @Output() stateChange: EventEmitter; /** diff --git a/packages/devextreme-angular/src/ui/pivot-grid/index.ts b/packages/devextreme-angular/src/ui/pivot-grid/index.ts index 79febda6a5fb..3ae22922c3b9 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid/index.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid/index.ts @@ -426,10 +426,10 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh */ @Input() - get stateStoring(): { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType } { + get stateStoring(): { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType } { return this._getOption('stateStoring'); } - set stateStoring(value: { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType }) { + set stateStoring(value: { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType }) { this._setOption('stateStoring', value); } @@ -749,7 +749,7 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() stateStoringChange: EventEmitter<{ customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType }>; + @Output() stateStoringChange: EventEmitter<{ customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType }>; /** diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts index 52dceee0db61..1e7e91aed8ac 100644 --- a/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts +++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts @@ -64,10 +64,10 @@ export class DxoPivotGridStateStoringComponent extends NestedOption implements O } @Input() - get storageKey(): string { + get storageKey(): string | undefined { return this._getOption('storageKey'); } - set storageKey(value: string) { + set storageKey(value: string | undefined) { this._setOption('storageKey', value); } diff --git a/packages/devextreme-react/src/pivot-grid-field-chooser.ts b/packages/devextreme-react/src/pivot-grid-field-chooser.ts index 10addf0198ce..7ec1a436e21b 100644 --- a/packages/devextreme-react/src/pivot-grid-field-chooser.ts +++ b/packages/devextreme-react/src/pivot-grid-field-chooser.ts @@ -18,7 +18,7 @@ type ReplaceFieldTypes = { type IPivotGridFieldChooserOptionsNarrowedEvents = { onContentReady?: ((e: ContentReadyEvent) => void); - onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; onDisposing?: ((e: DisposingEvent) => void); onInitialized?: ((e: InitializedEvent) => void); } diff --git a/packages/devextreme-react/src/pivot-grid.ts b/packages/devextreme-react/src/pivot-grid.ts index ff90ffbd7abb..b66e15851b7c 100644 --- a/packages/devextreme-react/src/pivot-grid.ts +++ b/packages/devextreme-react/src/pivot-grid.ts @@ -17,12 +17,12 @@ type ReplaceFieldTypes = { } type IPivotGridOptionsNarrowedEvents = { - onCellClick?: ((e: CellClickEvent) => void); - onCellPrepared?: ((e: CellPreparedEvent) => void); + onCellClick?: ((e: CellClickEvent) => void) | undefined; + onCellPrepared?: ((e: CellPreparedEvent) => void) | undefined; onContentReady?: ((e: ContentReadyEvent) => void); - onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; onDisposing?: ((e: DisposingEvent) => void); - onExporting?: ((e: ExportingEvent) => void); + onExporting?: ((e: ExportingEvent) => void) | undefined; onInitialized?: ((e: InitializedEvent) => void); } @@ -358,7 +358,7 @@ type IStateStoringProps = React.PropsWithChildren<{ customSave?: ((state: any) => void); enabled?: boolean; savingTimeout?: number; - storageKey?: string; + storageKey?: string | undefined; type?: StateStoreType; }> const _componentStateStoring = (props: IStateStoringProps) => { diff --git a/packages/devextreme-react/src/scheduler.ts b/packages/devextreme-react/src/scheduler.ts index 978ea1be3715..6b2c9a7ad88e 100644 --- a/packages/devextreme-react/src/scheduler.ts +++ b/packages/devextreme-react/src/scheduler.ts @@ -33,18 +33,18 @@ type ReplaceFieldTypes = { } type ISchedulerOptionsNarrowedEvents = { - onAppointmentAdded?: ((e: AppointmentAddedEvent) => void); - onAppointmentAdding?: ((e: AppointmentAddingEvent) => void); + onAppointmentAdded?: ((e: AppointmentAddedEvent) => void) | undefined; + onAppointmentAdding?: ((e: AppointmentAddingEvent) => void) | undefined; onAppointmentClick?: ((e: AppointmentClickEvent) => void); onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void); onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void); - onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void); - onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void); - onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void); - onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void); - onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void); - onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void); - onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void); + onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void) | undefined; + onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void) | undefined; + onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void) | undefined; + onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void) | undefined; + onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void) | undefined; + onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void) | undefined; + onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void) | undefined; onCellClick?: ((e: CellClickEvent) => void); onCellContextMenu?: ((e: CellContextMenuEvent) => void); onContentReady?: ((e: ContentReadyEvent) => void); diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts index b9278b15106f..4144a191d29a 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts @@ -97,7 +97,7 @@ export class FieldChooser extends FieldChooserBase { layout: 0, dataSource: null, encodeHtml: true, - onContextMenuPreparing: null, + onContextMenuPreparing: undefined, allowSearch: false, searchTimeout: 500, texts: { diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts index d901fff7e551..85897bb20c14 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts @@ -124,7 +124,7 @@ export class FieldChooserBase extends mixinWidget { ...{ allowFieldDragging: true, applyChangesMode: 'instantly', - state: null, + state: undefined, headerFilter: { width: 252, height: 325, diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts index f122d1881117..1f0416414458 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts @@ -211,7 +211,7 @@ class PivotGrid extends Widget { height: 600, applyChangesMode: 'instantly', }, - onContextMenuPreparing: null, + onContextMenuPreparing: undefined, allowSorting: false, allowSortingBySummary: false, allowFiltering: false, @@ -268,13 +268,13 @@ class PivotGrid extends Widget { exportToExcel: localizationMessage.format('dxDataGrid-exportToExcel'), dataNotAvailable: localizationMessage.format('dxPivotGrid-dataNotAvailable'), }, - onCellClick: null, - onCellPrepared: null, + onCellClick: undefined, + onCellPrepared: undefined, showBorders: false, stateStoring: { enabled: false, - storageKey: null, + storageKey: undefined, type: 'localStorage', customLoad: null, customSave: null, @@ -283,7 +283,7 @@ class PivotGrid extends Widget { onExpandValueChanging: null, renderCellCountLimit: 20000, - onExporting: null, + onExporting: undefined, headerFilter: { width: 252, height: 325, diff --git a/packages/devextreme/js/ui/pivot_grid.d.ts b/packages/devextreme/js/ui/pivot_grid.d.ts index 15f4c7a7e798..0f4530d96ae1 100644 --- a/packages/devextreme/js/ui/pivot_grid.d.ts +++ b/packages/devextreme/js/ui/pivot_grid.d.ts @@ -516,35 +516,35 @@ export interface dxPivotGridOptions extends WidgetOptions { /** * @docid * @type_function_param1 e:{ui/pivot_grid:CellClickEvent} - * @default null + * @default undefined * @action * @public */ - onCellClick?: ((e: CellClickEvent) => void); + onCellClick?: ((e: CellClickEvent) => void) | undefined; /** * @docid * @type_function_param1 e:{ui/pivot_grid:CellPreparedEvent} - * @default null + * @default undefined * @action * @public */ - onCellPrepared?: ((e: CellPreparedEvent) => void); + onCellPrepared?: ((e: CellPreparedEvent) => void) | undefined; /** * @docid * @type_function_param1 e:{ui/pivot_grid:ContextMenuPreparingEvent} - * @default null + * @default undefined * @action * @public */ - onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; /** * @docid * @type_function_param1 e:{ui/pivot_grid:ExportingEvent} - * @default null + * @default undefined * @action * @public */ - onExporting?: ((e: ExportingEvent) => void); + onExporting?: ((e: ExportingEvent) => void) | undefined; /** * @docid * @default "standard" @@ -631,9 +631,9 @@ export interface dxPivotGridOptions extends WidgetOptions { savingTimeout?: number; /** * @docid - * @default null + * @default undefined */ - storageKey?: string; + storageKey?: string | undefined; /** * @docid * @default "localStorage" diff --git a/packages/devextreme/js/ui/pivot_grid/data_source.d.ts b/packages/devextreme/js/ui/pivot_grid/data_source.d.ts index f6cb506ead28..d336a9d855c1 100644 --- a/packages/devextreme/js/ui/pivot_grid/data_source.d.ts +++ b/packages/devextreme/js/ui/pivot_grid/data_source.d.ts @@ -173,7 +173,7 @@ export interface PivotGridDataSourceOptions { * @default undefined * @public */ - fields?: Array; + fields?: Array | undefined; /** * @docid * @type Filter expression @@ -293,7 +293,6 @@ export interface PivotGridDataSourceField { area?: PivotGridArea | undefined; /** * @docid PivotGridDataSourceOptions.fields.areaIndex - * @default undefined * @public */ areaIndex?: number; @@ -304,13 +303,11 @@ export interface PivotGridDataSourceField { calculateCustomSummary?: ((options: { summaryProcess?: string; value?: any; totalValue?: any }) => void); /** * @docid PivotGridDataSourceOptions.fields.calculateSummaryValue - * @default undefined * @public */ calculateSummaryValue?: ((e: dxPivotGridSummaryCell) => number | null); /** * @docid PivotGridDataSourceOptions.fields.caption - * @default undefined * @public */ caption?: string; @@ -321,19 +318,16 @@ export interface PivotGridDataSourceField { customizeText?: ((cellInfo: { value?: string | number | Date; valueText?: string }) => string); /** * @docid PivotGridDataSourceOptions.fields.dataField - * @default undefined * @public */ dataField?: string; /** * @docid PivotGridDataSourceOptions.fields.dataType - * @default undefined * @public */ dataType?: PivotGridDataType; /** * @docid PivotGridDataSourceOptions.fields.displayFolder - * @default undefined * @public */ displayFolder?: string; @@ -351,7 +345,6 @@ export interface PivotGridDataSourceField { filterType?: FilterType; /** * @docid PivotGridDataSourceOptions.fields.filterValues - * @default undefined * @public */ filterValues?: Array; @@ -363,19 +356,16 @@ export interface PivotGridDataSourceField { format?: Format; /** * @docid PivotGridDataSourceOptions.fields.groupIndex - * @default undefined * @public */ groupIndex?: number; /** * @docid PivotGridDataSourceOptions.fields.groupInterval - * @default undefined * @public */ groupInterval?: PivotGridGroupInterval | number; /** * @docid PivotGridDataSourceOptions.fields.groupName - * @default undefined * @public */ groupName?: string; @@ -399,26 +389,22 @@ export interface PivotGridDataSourceField { }; /** * @docid PivotGridDataSourceOptions.fields.isMeasure - * @default undefined * @public */ isMeasure?: boolean; /** * @docid PivotGridDataSourceOptions.fields.name - * @default undefined * @public */ name?: string; /** * @docid PivotGridDataSourceOptions.fields.runningTotal - * @default undefined * @public */ runningTotal?: PivotGridRunningTotalMode; /** * @docid PivotGridDataSourceOptions.fields.selector * @type function(data) - * @default undefined * @public */ selector?: Function; @@ -436,25 +422,21 @@ export interface PivotGridDataSourceField { showTotals?: boolean; /** * @docid PivotGridDataSourceOptions.fields.showValues - * @default undefined * @public */ showValues?: boolean; /** * @docid PivotGridDataSourceOptions.fields.sortBy - * @default undefined * @public */ sortBy?: PivotGridSortBy; /** * @docid PivotGridDataSourceOptions.fields.sortBySummaryField - * @default undefined * @public */ sortBySummaryField?: string; /** * @docid PivotGridDataSourceOptions.fields.sortBySummaryPath - * @default undefined * @public */ sortBySummaryPath?: Array; @@ -466,13 +448,11 @@ export interface PivotGridDataSourceField { sortOrder?: SortOrder; /** * @docid PivotGridDataSourceOptions.fields.sortingMethod - * @default undefined * @public */ sortingMethod?: ((a: { value?: string | number; children?: Array }, b: { value?: string | number; children?: Array }) => number); /** * @docid PivotGridDataSourceOptions.fields.summaryDisplayMode - * @default undefined * @public */ summaryDisplayMode?: PivotGridSummaryDisplayMode; @@ -490,13 +470,11 @@ export interface PivotGridDataSourceField { visible?: boolean; /** * @docid PivotGridDataSourceOptions.fields.width - * @default undefined * @public */ width?: number; /** * @docid PivotGridDataSourceOptions.fields.wordWrapEnabled - * @default undefined * @public */ wordWrapEnabled?: boolean; diff --git a/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts b/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts index b102bf191fb3..8dec03205fdf 100644 --- a/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts +++ b/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts @@ -193,12 +193,12 @@ export interface dxPivotGridFieldChooserOptions extends WidgetOptions void); + onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined; /** * @docid * @default 500 @@ -207,10 +207,10 @@ export interface dxPivotGridFieldChooserOptions extends WidgetOptions { customizeDateNavigatorText?: ((info: DateNavigatorTextInfo) => string) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default null @@ -607,11 +607,11 @@ export interface dxSchedulerOptions extends WidgetOptions { dataSource?: DataSourceLike | null; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default undefined @@ -754,113 +754,113 @@ export interface dxSchedulerOptions extends WidgetOptions { noDataText?: string; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentAddedEvent} * @action * @public */ - onAppointmentAdded?: ((e: AppointmentAddedEvent) => void); + onAppointmentAdded?: ((e: AppointmentAddedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentAddingEvent} * @action * @public */ - onAppointmentAdding?: ((e: AppointmentAddingEvent) => void); + onAppointmentAdding?: ((e: AppointmentAddingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:AppointmentClickEvent} * @action * @public */ - onAppointmentClick?: ((e: AppointmentClickEvent) => void) | string; + onAppointmentClick?: ((e: AppointmentClickEvent) => void) | string | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:AppointmentContextMenuEvent} * @action * @public */ - onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void) | string; + onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void) | string | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:AppointmentDblClickEvent} * @action * @public */ - onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void) | string; + onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void) | string | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentDeletedEvent} * @action * @public */ - onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void); + onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentDeletingEvent} * @action * @public */ - onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void); + onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentTooltipShowingEvent} * @action * @public */ - onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void); + onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentFormOpeningEvent} * @action * @public */ - onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void); + onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentRenderedEvent} * @action * @public */ - onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void); + onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentUpdatedEvent} * @action * @public */ - onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void); + onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type_function_param1 e:{ui/scheduler:AppointmentUpdatingEvent} * @action * @public */ - onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void); + onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:CellClickEvent} * @action * @public */ - onCellClick?: ((e: CellClickEvent) => void) | string; + onCellClick?: ((e: CellClickEvent) => void) | string | undefined; /** * @docid * @default undefined @@ -871,13 +871,13 @@ export interface dxSchedulerOptions extends WidgetOptions { onSelectionEnd?: ((e: SelectionEndEvent) => void) | undefined; /** * @docid - * @default null + * @default undefined * @type function * @type_function_param1 e:{ui/scheduler:CellContextMenuEvent} * @action * @public */ - onCellContextMenu?: ((e: CellContextMenuEvent) => void) | string; + onCellContextMenu?: ((e: CellContextMenuEvent) => void) | string | undefined; /** * @docid * @default "dialog" @@ -904,11 +904,11 @@ export interface dxSchedulerOptions extends WidgetOptions { remoteFiltering?: boolean; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default [] @@ -1019,11 +1019,11 @@ export interface dxSchedulerOptions extends WidgetOptions { textExpr?: string; /** * @docid - * @default null + * @default undefined * @type_function_param1 itemData:object * @public */ - timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); + timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined; /** * @docid * @default "" @@ -1094,13 +1094,11 @@ export interface dxSchedulerOptions extends WidgetOptions { cellDuration?: number; /** * @docid - * @default null * @type_function_param1 itemData:object */ dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); /** * @docid - * @default null * @type_function_param1 itemData:object */ dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); @@ -1150,7 +1148,6 @@ export interface dxSchedulerOptions extends WidgetOptions { name?: string | undefined; /** * @docid - * @default null * @type_function_param1 itemData:object */ resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); @@ -1166,7 +1163,6 @@ export interface dxSchedulerOptions extends WidgetOptions { startDayHour?: number; /** * @docid - * @default null * @type_function_param1 itemData:object */ timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js index f3b54ed0e922..d400f8525f96 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js @@ -2473,7 +2473,7 @@ QUnit.module('applyChangesMode: onDemand', { // assert assert.strictEqual(isCanceled, false, 'cancelChanges return false'); - assert.strictEqual(this.fieldChooser.option('state'), null, 'state is empty'); + assert.strictEqual(this.fieldChooser.option('state'), undefined, 'state is empty'); }); QUnit.test('cancel changes on field chooser repaint', function(assert) { diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 93083b2ebac1..5915004ab072 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -8082,7 +8082,7 @@ declare module DevExpress.data { /** * [descr:PivotGridDataSourceOptions.fields] */ - fields?: Array; + fields?: Array | undefined; /** * [descr:PivotGridDataSourceOptions.filter] */ @@ -24773,9 +24773,11 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridFieldChooserOptions.onContextMenuPreparing] */ - onContextMenuPreparing?: ( - e: DevExpress.ui.dxPivotGridFieldChooser.ContextMenuPreparingEvent - ) => void; + onContextMenuPreparing?: + | (( + e: DevExpress.ui.dxPivotGridFieldChooser.ContextMenuPreparingEvent + ) => void) + | undefined; /** * [descr:dxPivotGridFieldChooserOptions.searchTimeout] */ @@ -24783,7 +24785,7 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridFieldChooserOptions.state] */ - state?: any; + state?: any | undefined; /** * [descr:dxPivotGridFieldChooserOptions.texts] */ @@ -25069,21 +25071,27 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridOptions.onCellClick] */ - onCellClick?: (e: DevExpress.ui.dxPivotGrid.CellClickEvent) => void; + onCellClick?: + | ((e: DevExpress.ui.dxPivotGrid.CellClickEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.onCellPrepared] */ - onCellPrepared?: (e: DevExpress.ui.dxPivotGrid.CellPreparedEvent) => void; + onCellPrepared?: + | ((e: DevExpress.ui.dxPivotGrid.CellPreparedEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.onContextMenuPreparing] */ - onContextMenuPreparing?: ( - e: DevExpress.ui.dxPivotGrid.ContextMenuPreparingEvent - ) => void; + onContextMenuPreparing?: + | ((e: DevExpress.ui.dxPivotGrid.ContextMenuPreparingEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.onExporting] */ - onExporting?: (e: DevExpress.ui.dxPivotGrid.ExportingEvent) => void; + onExporting?: + | ((e: DevExpress.ui.dxPivotGrid.ExportingEvent) => void) + | undefined; /** * [descr:dxPivotGridOptions.rowHeaderLayout] */ @@ -25148,7 +25156,7 @@ declare module DevExpress.ui { /** * [descr:dxPivotGridOptions.stateStoring.storageKey] */ - storageKey?: string; + storageKey?: string | undefined; /** * [descr:dxPivotGridOptions.stateStoring.type] */ @@ -26903,7 +26911,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.dataSource] */ @@ -26917,7 +26926,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.dateSerializationFormat] */ @@ -27022,82 +27032,86 @@ declare module DevExpress.ui { /** * [descr:dxSchedulerOptions.onAppointmentAdded] */ - onAppointmentAdded?: ( - e: DevExpress.ui.dxScheduler.AppointmentAddedEvent - ) => void; + onAppointmentAdded?: + | ((e: DevExpress.ui.dxScheduler.AppointmentAddedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentAdding] */ - onAppointmentAdding?: ( - e: DevExpress.ui.dxScheduler.AppointmentAddingEvent - ) => void; + onAppointmentAdding?: + | ((e: DevExpress.ui.dxScheduler.AppointmentAddingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentClick] */ onAppointmentClick?: | ((e: DevExpress.ui.dxScheduler.AppointmentClickEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentContextMenu] */ onAppointmentContextMenu?: | ((e: DevExpress.ui.dxScheduler.AppointmentContextMenuEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentDblClick] */ onAppointmentDblClick?: | ((e: DevExpress.ui.dxScheduler.AppointmentDblClickEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentDeleted] */ - onAppointmentDeleted?: ( - e: DevExpress.ui.dxScheduler.AppointmentDeletedEvent - ) => void; + onAppointmentDeleted?: + | ((e: DevExpress.ui.dxScheduler.AppointmentDeletedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentDeleting] */ - onAppointmentDeleting?: ( - e: DevExpress.ui.dxScheduler.AppointmentDeletingEvent - ) => void; + onAppointmentDeleting?: + | ((e: DevExpress.ui.dxScheduler.AppointmentDeletingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentTooltipShowing] */ - onAppointmentTooltipShowing?: ( - e: DevExpress.ui.dxScheduler.AppointmentTooltipShowingEvent - ) => void; + onAppointmentTooltipShowing?: + | ((e: DevExpress.ui.dxScheduler.AppointmentTooltipShowingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentFormOpening] */ - onAppointmentFormOpening?: ( - e: DevExpress.ui.dxScheduler.AppointmentFormOpeningEvent - ) => void; + onAppointmentFormOpening?: + | ((e: DevExpress.ui.dxScheduler.AppointmentFormOpeningEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentRendered] */ - onAppointmentRendered?: ( - e: DevExpress.ui.dxScheduler.AppointmentRenderedEvent - ) => void; + onAppointmentRendered?: + | ((e: DevExpress.ui.dxScheduler.AppointmentRenderedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentUpdated] */ - onAppointmentUpdated?: ( - e: DevExpress.ui.dxScheduler.AppointmentUpdatedEvent - ) => void; + onAppointmentUpdated?: + | ((e: DevExpress.ui.dxScheduler.AppointmentUpdatedEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onAppointmentUpdating] */ - onAppointmentUpdating?: ( - e: DevExpress.ui.dxScheduler.AppointmentUpdatingEvent - ) => void; + onAppointmentUpdating?: + | ((e: DevExpress.ui.dxScheduler.AppointmentUpdatingEvent) => void) + | undefined; /** * [descr:dxSchedulerOptions.onCellClick] */ onCellClick?: | ((e: DevExpress.ui.dxScheduler.CellClickEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.onSelectionEnd] */ @@ -27109,7 +27123,8 @@ declare module DevExpress.ui { */ onCellContextMenu?: | ((e: DevExpress.ui.dxScheduler.CellContextMenuEvent) => void) - | string; + | string + | undefined; /** * [descr:dxSchedulerOptions.recurrenceEditMode] */ @@ -27135,7 +27150,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.resources] */ @@ -27222,7 +27238,8 @@ declare module DevExpress.ui { itemData: any, itemIndex: number, itemElement: DevExpress.core.DxElement - ) => string | DevExpress.core.UserDefinedElement); + ) => string | DevExpress.core.UserDefinedElement) + | undefined; /** * [descr:dxSchedulerOptions.timeZone] */ From 70875c9f976d58ab271fb2db7034df61b43fe764 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Tue, 14 Jul 2026 18:00:23 +0400 Subject: [PATCH 17/27] e2e tests: collect unstable tests statistics (#34300) --- .../common/aiColumn/virtualScrolling.functional.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts index 5ea0b4c8bb8a..d1085aa9667a 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts @@ -8,6 +8,10 @@ fixture`Ai Column.Virtual Scrolling.Functional` const DATA_GRID_SELECTOR = '#container'; +const CLASS = { + loadPanelContent: 'dx-loadpanel-content', +}; + const checkAIColumnTexts = async ( t: TestController, component: DataGrid, @@ -61,7 +65,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 11); @@ -88,7 +92,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 12); }) @@ -168,7 +172,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 11); @@ -195,7 +199,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with await t .expect(dataGrid.isReady()) .ok() - .expect(dataGrid.getLoadPanel().isVisible()) + .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible) .notOk(); await checkAIColumnTexts(t, dataGrid, 12); }) From b8e81dd21d8d975268a4fbe04d528080b193f0c7 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 16 Jul 2026 10:34:27 +0400 Subject: [PATCH 18/27] branch dxdsfluent --- .../build/bundle-template.dxdsfluent.scss | 12 + .../devextreme-scss/build/theme-options.cjs | 3 + .../color-schemes/dark/grid/text-stub.png | Bin 0 -> 1230 bytes .../color-schemes/dark/pulldown.png | Bin 0 -> 328 bytes .../color-schemes/light/grid/text-stub.png | Bin 0 -> 1230 bytes .../color-schemes/light/pulldown.png | Bin 0 -> 328 bytes .../scss/widgets/dxdsfluent/_colors.scss | 314 +++++ .../scss/widgets/dxdsfluent/_index.scss | 65 + .../scss/widgets/dxdsfluent/_sizes.scss | 86 ++ .../scss/widgets/dxdsfluent/_variables.scss | 1 + .../widgets/dxdsfluent/accordion/_colors.scss | 25 + .../widgets/dxdsfluent/accordion/_index.scss | 84 ++ .../widgets/dxdsfluent/accordion/_sizes.scss | 36 + .../dxdsfluent/actionSheet/_colors.scss | 6 + .../dxdsfluent/actionSheet/_index.scss | 24 + .../dxdsfluent/actionSheet/_sizes.scss | 6 + .../dxdsfluent/autocomplete/_colors.scss | 6 + .../dxdsfluent/autocomplete/_index.scss | 30 + .../dxdsfluent/autocomplete/_sizes.scss | 4 + .../widgets/dxdsfluent/badge/_colors.scss | 29 + .../scss/widgets/dxdsfluent/badge/_index.scss | 22 + .../scss/widgets/dxdsfluent/badge/_sizes.scss | 19 + .../scss/widgets/dxdsfluent/box/_colors.scss | 6 + .../scss/widgets/dxdsfluent/box/_index.scss | 12 + .../scss/widgets/dxdsfluent/box/_sizes.scss | 4 + .../widgets/dxdsfluent/button/_colors.scss | 424 +++++++ .../widgets/dxdsfluent/button/_index.scss | 219 ++++ .../widgets/dxdsfluent/button/_mixins.scss | 201 ++++ .../widgets/dxdsfluent/button/_sizes.scss | 33 + .../dxdsfluent/buttonGroup/_colors.scss | 8 + .../dxdsfluent/buttonGroup/_index.scss | 43 + .../dxdsfluent/buttonGroup/_sizes.scss | 4 + .../widgets/dxdsfluent/calendar/_colors.scss | 68 ++ .../widgets/dxdsfluent/calendar/_index.scss | 71 ++ .../widgets/dxdsfluent/calendar/_sizes.scss | 28 + .../scss/widgets/dxdsfluent/card/_colors.scss | 6 + .../scss/widgets/dxdsfluent/card/_index.scss | 15 + .../scss/widgets/dxdsfluent/card/_sizes.scss | 4 + .../widgets/dxdsfluent/cardView/_colors.scss | 657 ++++++++++ .../widgets/dxdsfluent/cardView/_index.scss | 5 + .../widgets/dxdsfluent/cardView/_sizes.scss | 491 ++++++++ .../scss/widgets/dxdsfluent/chat/_colors.scss | 195 +++ .../scss/widgets/dxdsfluent/chat/_index.scss | 150 +++ .../scss/widgets/dxdsfluent/chat/_sizes.scss | 167 +++ .../widgets/dxdsfluent/checkBox/_colors.scss | 22 + .../widgets/dxdsfluent/checkBox/_index.scss | 224 ++++ .../widgets/dxdsfluent/checkBox/_sizes.scss | 28 + .../scss/widgets/dxdsfluent/color.scss | 36 + .../widgets/dxdsfluent/colorBox/_colors.scss | 7 + .../widgets/dxdsfluent/colorBox/_index.scss | 70 ++ .../widgets/dxdsfluent/colorBox/_sizes.scss | 19 + .../widgets/dxdsfluent/colorView/_colors.scss | 17 + .../widgets/dxdsfluent/colorView/_index.scss | 123 ++ .../widgets/dxdsfluent/colorView/_sizes.scss | 22 + .../widgets/dxdsfluent/common/_colors.scss | 18 + .../widgets/dxdsfluent/common/_index.scss | 68 ++ .../widgets/dxdsfluent/common/_mixins.scss | 107 ++ .../widgets/dxdsfluent/common/_sizes.scss | 33 + .../dxdsfluent/contextMenu/_colors.scss | 6 + .../dxdsfluent/contextMenu/_index.scss | 85 ++ .../dxdsfluent/contextMenu/_sizes.scss | 21 + .../widgets/dxdsfluent/dataGrid/_colors.scss | 21 + .../widgets/dxdsfluent/dataGrid/_index.scss | 125 ++ .../widgets/dxdsfluent/dataGrid/_sizes.scss | 22 + .../dxdsfluent/dataGrid/layout/cell.scss | 104 ++ .../widgets/dxdsfluent/dateBox/_colors.scss | 4 + .../widgets/dxdsfluent/dateBox/_index.scss | 144 +++ .../widgets/dxdsfluent/dateBox/_mixins.scss | 17 + .../widgets/dxdsfluent/dateBox/_sizes.scss | 7 + .../dxdsfluent/dateRangeBox/_colors.scss | 1 + .../dxdsfluent/dateRangeBox/_index.scss | 115 ++ .../dxdsfluent/dateRangeBox/_sizes.scss | 13 + .../widgets/dxdsfluent/dateView/_colors.scss | 9 + .../widgets/dxdsfluent/dateView/_index.scss | 142 +++ .../widgets/dxdsfluent/dateView/_sizes.scss | 6 + .../widgets/dxdsfluent/diagram/_colors.scss | 31 + .../widgets/dxdsfluent/diagram/_index.scss | 480 ++++++++ .../widgets/dxdsfluent/diagram/_sizes.scss | 74 ++ .../widgets/dxdsfluent/drawer/_colors.scss | 11 + .../widgets/dxdsfluent/drawer/_index.scss | 11 + .../widgets/dxdsfluent/drawer/_sizes.scss | 4 + .../dxdsfluent/dropDownBox/_colors.scss | 6 + .../dxdsfluent/dropDownBox/_index.scss | 8 + .../dxdsfluent/dropDownBox/_sizes.scss | 4 + .../dxdsfluent/dropDownButton/_colors.scss | 6 + .../dxdsfluent/dropDownButton/_index.scss | 46 + .../dxdsfluent/dropDownButton/_sizes.scss | 19 + .../dxdsfluent/dropDownEditor/_colors.scss | 15 + .../dxdsfluent/dropDownEditor/_index.scss | 136 +++ .../dxdsfluent/dropDownEditor/_sizes.scss | 17 + .../dxdsfluent/dropDownList/_colors.scss | 6 + .../dxdsfluent/dropDownList/_index.scss | 15 + .../dxdsfluent/dropDownList/_sizes.scss | 4 + .../dxdsfluent/dropDownMenu/_colors.scss | 6 + .../dxdsfluent/dropDownMenu/_index.scss | 20 + .../dxdsfluent/dropDownMenu/_sizes.scss | 6 + .../widgets/dxdsfluent/fieldset/_colors.scss | 12 + .../widgets/dxdsfluent/fieldset/_index.scss | 145 +++ .../widgets/dxdsfluent/fieldset/_sizes.scss | 33 + .../dxdsfluent/fileManager/_colors.scss | 34 + .../dxdsfluent/fileManager/_index.scss | 262 ++++ .../dxdsfluent/fileManager/_sizes.scss | 53 + .../dxdsfluent/fileUploader/_colors.scss | 26 + .../dxdsfluent/fileUploader/_index.scss | 200 ++++ .../dxdsfluent/fileUploader/_sizes.scss | 35 + .../dxdsfluent/filterBuilder/_colors.scss | 77 ++ .../dxdsfluent/filterBuilder/_index.scss | 127 ++ .../dxdsfluent/filterBuilder/_sizes.scss | 29 + .../scss/widgets/dxdsfluent/form/_colors.scss | 34 + .../scss/widgets/dxdsfluent/form/_index.scss | 131 ++ .../scss/widgets/dxdsfluent/form/_sizes.scss | 45 + .../widgets/dxdsfluent/gallery/_colors.scss | 40 + .../widgets/dxdsfluent/gallery/_index.scss | 114 ++ .../widgets/dxdsfluent/gallery/_sizes.scss | 7 + .../widgets/dxdsfluent/gantt/_colors.scss | 30 + .../scss/widgets/dxdsfluent/gantt/_index.scss | 291 +++++ .../scss/widgets/dxdsfluent/gantt/_sizes.scss | 28 + .../widgets/dxdsfluent/gridBase/_colors.scss | 211 ++++ .../widgets/dxdsfluent/gridBase/_index.scss | 1059 +++++++++++++++++ .../widgets/dxdsfluent/gridBase/_sizes.scss | 118 ++ .../dxdsfluent/gridBase/_variables.scss | 10 + .../gridBase/layout/aiChat/_index.scss | 19 + .../gridBase/layout/aiChat/_sizes.scss | 3 + .../dxdsfluent/gridBase/layout/cell.scss | 543 +++++++++ .../dxdsfluent/htmlEditor/_colors.scss | 17 + .../widgets/dxdsfluent/htmlEditor/_index.scss | 330 +++++ .../widgets/dxdsfluent/htmlEditor/_sizes.scss | 43 + .../widgets/dxdsfluent/icons/_colors.scss | 6 + .../scss/widgets/dxdsfluent/icons/_index.scss | 47 + .../scss/widgets/dxdsfluent/icons/_sizes.scss | 4 + .../widgets/dxdsfluent/informer/_colors.scss | 20 + .../widgets/dxdsfluent/informer/_index.scss | 18 + .../widgets/dxdsfluent/informer/_sizes.scss | 24 + .../scss/widgets/dxdsfluent/list/_colors.scss | 79 ++ .../scss/widgets/dxdsfluent/list/_index.scss | 532 +++++++++ .../scss/widgets/dxdsfluent/list/_sizes.scss | 35 + .../dxdsfluent/loadIndicator/_colors.scss | 44 + .../dxdsfluent/loadIndicator/_index.scss | 134 +++ .../dxdsfluent/loadIndicator/_sizes.scss | 4 + .../widgets/dxdsfluent/loadPanel/_colors.scss | 12 + .../widgets/dxdsfluent/loadPanel/_index.scss | 18 + .../widgets/dxdsfluent/loadPanel/_sizes.scss | 9 + .../widgets/dxdsfluent/lookup/_colors.scss | 9 + .../widgets/dxdsfluent/lookup/_index.scss | 175 +++ .../widgets/dxdsfluent/lookup/_sizes.scss | 23 + .../scss/widgets/dxdsfluent/map/_index.scss | 7 + .../scss/widgets/dxdsfluent/menu/_colors.scss | 35 + .../scss/widgets/dxdsfluent/menu/_index.scss | 109 ++ .../scss/widgets/dxdsfluent/menu/_sizes.scss | 14 + .../widgets/dxdsfluent/menuBase/_colors.scss | 8 + .../widgets/dxdsfluent/menuBase/_index.scss | 80 ++ .../widgets/dxdsfluent/menuBase/_sizes.scss | 20 + .../widgets/dxdsfluent/multiView/_colors.scss | 6 + .../widgets/dxdsfluent/multiView/_index.scss | 9 + .../widgets/dxdsfluent/multiView/_sizes.scss | 4 + .../widgets/dxdsfluent/numberBox/_colors.scss | 11 + .../widgets/dxdsfluent/numberBox/_index.scss | 88 ++ .../widgets/dxdsfluent/numberBox/_sizes.scss | 15 + .../widgets/dxdsfluent/overlay/_colors.scss | 26 + .../widgets/dxdsfluent/overlay/_index.scss | 17 + .../widgets/dxdsfluent/overlay/_sizes.scss | 4 + .../dxdsfluent/pagination/_colors.scss | 18 + .../widgets/dxdsfluent/pagination/_index.scss | 98 ++ .../widgets/dxdsfluent/pagination/_sizes.scss | 26 + .../widgets/dxdsfluent/pivotGrid/_colors.scss | 58 + .../widgets/dxdsfluent/pivotGrid/_index.scss | 235 ++++ .../widgets/dxdsfluent/pivotGrid/_sizes.scss | 40 + .../widgets/dxdsfluent/popover/_colors.scss | 7 + .../widgets/dxdsfluent/popover/_index.scss | 18 + .../widgets/dxdsfluent/popover/_sizes.scss | 4 + .../widgets/dxdsfluent/popup/_colors.scss | 31 + .../scss/widgets/dxdsfluent/popup/_index.scss | 85 ++ .../scss/widgets/dxdsfluent/popup/_sizes.scss | 50 + .../dxdsfluent/progressBar/_colors.scss | 40 + .../dxdsfluent/progressBar/_index.scss | 125 ++ .../dxdsfluent/progressBar/_sizes.scss | 18 + .../dxdsfluent/radioButton/_colors.scss | 6 + .../dxdsfluent/radioButton/_index.scss | 154 +++ .../dxdsfluent/radioButton/_sizes.scss | 17 + .../dxdsfluent/radioGroup/_colors.scss | 22 + .../widgets/dxdsfluent/radioGroup/_index.scss | 26 + .../widgets/dxdsfluent/radioGroup/_sizes.scss | 17 + .../dxdsfluent/rangeSlider/_colors.scss | 6 + .../dxdsfluent/rangeSlider/_index.scss | 14 + .../dxdsfluent/rangeSlider/_sizes.scss | 4 + .../dxdsfluent/recurrenceEditor/_colors.scss | 6 + .../dxdsfluent/recurrenceEditor/_index.scss | 45 + .../dxdsfluent/recurrenceEditor/_sizes.scss | 19 + .../dxdsfluent/responsiveBox/_colors.scss | 6 + .../dxdsfluent/responsiveBox/_index.scss | 8 + .../dxdsfluent/responsiveBox/_sizes.scss | 4 + .../widgets/dxdsfluent/scheduler/_colors.scss | 128 ++ .../widgets/dxdsfluent/scheduler/_index.scss | 1043 ++++++++++++++++ .../widgets/dxdsfluent/scheduler/_sizes.scss | 219 ++++ .../dxdsfluent/scrollView/_colors.scss | 7 + .../widgets/dxdsfluent/scrollView/_index.scss | 89 ++ .../widgets/dxdsfluent/scrollView/_sizes.scss | 4 + .../dxdsfluent/scrollable/_colors.scss | 23 + .../widgets/dxdsfluent/scrollable/_index.scss | 30 + .../widgets/dxdsfluent/scrollable/_sizes.scss | 6 + .../widgets/dxdsfluent/selectBox/_colors.scss | 11 + .../widgets/dxdsfluent/selectBox/_index.scss | 25 + .../widgets/dxdsfluent/selectBox/_sizes.scss | 4 + .../widgets/dxdsfluent/slider/_colors.scss | 33 + .../widgets/dxdsfluent/slider/_index.scss | 170 +++ .../widgets/dxdsfluent/slider/_sizes.scss | 35 + .../widgets/dxdsfluent/sortable/_colors.scss | 6 + .../widgets/dxdsfluent/sortable/_index.scss | 11 + .../widgets/dxdsfluent/sortable/_sizes.scss | 4 + .../dxdsfluent/speechToText/_colors.scss | 4 + .../dxdsfluent/speechToText/_index.scss | 5 + .../dxdsfluent/speechToText/_sizes.scss | 4 + .../dxdsfluent/speedDialAction/_colors.scss | 16 + .../dxdsfluent/speedDialAction/_index.scss | 51 + .../dxdsfluent/speedDialAction/_sizes.scss | 22 + .../widgets/dxdsfluent/splitter/_colors.scss | 57 + .../widgets/dxdsfluent/splitter/_index.scss | 27 + .../widgets/dxdsfluent/splitter/_sizes.scss | 5 + .../dxdsfluent/splitterBar/_colors.scss | 8 + .../dxdsfluent/splitterBar/_index.scss | 19 + .../dxdsfluent/splitterBar/_sizes.scss | 3 + .../widgets/dxdsfluent/stepper/_colors.scss | 175 +++ .../widgets/dxdsfluent/stepper/_index.scss | 55 + .../widgets/dxdsfluent/stepper/_sizes.scss | 37 + .../widgets/dxdsfluent/switch/_colors.scss | 45 + .../widgets/dxdsfluent/switch/_index.scss | 53 + .../widgets/dxdsfluent/switch/_sizes.scss | 35 + .../widgets/dxdsfluent/tabPanel/_colors.scss | 6 + .../widgets/dxdsfluent/tabPanel/_index.scss | 77 ++ .../widgets/dxdsfluent/tabPanel/_sizes.scss | 4 + .../scss/widgets/dxdsfluent/tabs/_index.scss | 17 + .../tabs/layout/navigation-button/_base.scss | 62 + .../dxdsfluent/tabs/layout/tab/_base.scss | 128 ++ .../layout/tab/styling-mode/_primary.scss | 121 ++ .../layout/tab/styling-mode/_secondary.scss | 117 ++ .../dxdsfluent/tabs/layout/tabs/_index.scss | 24 + .../dxdsfluent/tabs/mixins/_index.scss | 86 ++ .../dxdsfluent/tabs/variables/_colors.scss | 87 ++ .../dxdsfluent/tabs/variables/_sizes.scss | 61 + .../widgets/dxdsfluent/tagBox/_colors.scss | 44 + .../widgets/dxdsfluent/tagBox/_index.scss | 186 +++ .../widgets/dxdsfluent/tagBox/_sizes.scss | 46 + .../widgets/dxdsfluent/textArea/_colors.scss | 6 + .../widgets/dxdsfluent/textArea/_index.scss | 35 + .../widgets/dxdsfluent/textArea/_sizes.scss | 13 + .../widgets/dxdsfluent/textBox/_colors.scss | 5 + .../widgets/dxdsfluent/textBox/_index.scss | 71 ++ .../widgets/dxdsfluent/textBox/_sizes.scss | 13 + .../dxdsfluent/textEditor/_colors.scss | 153 +++ .../widgets/dxdsfluent/textEditor/_index.scss | 586 +++++++++ .../widgets/dxdsfluent/textEditor/_sizes.scss | 71 ++ .../widgets/dxdsfluent/tileView/_colors.scss | 17 + .../widgets/dxdsfluent/tileView/_index.scss | 29 + .../widgets/dxdsfluent/tileView/_sizes.scss | 4 + .../widgets/dxdsfluent/timeView/_colors.scss | 6 + .../widgets/dxdsfluent/timeView/_index.scss | 56 + .../widgets/dxdsfluent/timeView/_sizes.scss | 7 + .../widgets/dxdsfluent/toast/_colors.scss | 64 + .../scss/widgets/dxdsfluent/toast/_index.scss | 53 + .../scss/widgets/dxdsfluent/toast/_sizes.scss | 21 + .../widgets/dxdsfluent/toolbar/_colors.scss | 13 + .../widgets/dxdsfluent/toolbar/_index.scss | 182 +++ .../widgets/dxdsfluent/toolbar/_mixins.scss | 61 + .../widgets/dxdsfluent/toolbar/_sizes.scss | 25 + .../widgets/dxdsfluent/tooltip/_colors.scss | 30 + .../widgets/dxdsfluent/tooltip/_index.scss | 40 + .../widgets/dxdsfluent/tooltip/_sizes.scss | 19 + .../widgets/dxdsfluent/treeList/_colors.scss | 9 + .../widgets/dxdsfluent/treeList/_index.scss | 59 + .../widgets/dxdsfluent/treeList/_sizes.scss | 22 + .../dxdsfluent/treeList/layout/cell.scss | 8 + .../widgets/dxdsfluent/treeView/_colors.scss | 46 + .../widgets/dxdsfluent/treeView/_index.scss | 143 +++ .../widgets/dxdsfluent/treeView/_sizes.scss | 50 + .../dxdsfluent/typography/_colors.scss | 6 + .../widgets/dxdsfluent/typography/_index.scss | 70 ++ .../dxdsfluent/typography/_mixins.scss | 5 + .../widgets/dxdsfluent/typography/_sizes.scss | 60 + .../dxdsfluent/validation/_colors.scss | 9 + .../widgets/dxdsfluent/validation/_index.scss | 24 + .../widgets/dxdsfluent/validation/_sizes.scss | 28 + .../widgets/dxdsfluent/widget/_colors.scss | 6 + .../widgets/dxdsfluent/widget/_index.scss | 28 + .../widgets/dxdsfluent/widget/_sizes.scss | 4 + .../tests/unused-elements.test.ts | 10 +- .../executors/scss-build/scss-build.impl.ts | 7 +- 286 files changed, 18809 insertions(+), 3 deletions(-) create mode 100644 packages/devextreme-scss/build/bundle-template.dxdsfluent.scss create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/pulldown.png create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png create mode 100644 packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/pulldown.png create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_variables.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss diff --git a/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss new file mode 100644 index 000000000000..3be8b3678cb3 --- /dev/null +++ b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss @@ -0,0 +1,12 @@ +@use "../widgets/dxdsfluent/colors" with ($color: "$COLOR", $mode: "$MODE"); +@use "../widgets/dxdsfluent/sizes" with ($size: "$SIZE"); +@use "../widgets/dxdsfluent/typography"; +@use "../widgets/dxdsfluent/icons"; +@use "../widgets/dxdsfluent/widget"; +@use "../widgets/dxdsfluent/card"; +@use "../widgets/dxdsfluent/fieldset"; +@use "../widgets/dxdsfluent/common"; +@use "../widgets/base/resizable"; +@use "../widgets/base/draggable"; +@use "../widgets/base/ui"; +@use "../widgets/dxdsfluent"; diff --git a/packages/devextreme-scss/build/theme-options.cjs b/packages/devextreme-scss/build/theme-options.cjs index 5e62a5f06563..812a6951a7d5 100644 --- a/packages/devextreme-scss/build/theme-options.cjs +++ b/packages/devextreme-scss/build/theme-options.cjs @@ -5,11 +5,14 @@ const materialColors = ['blue', 'lime', 'orange', 'purple', 'teal']; const materialModes = ['light', 'dark']; const fluentColors = ['blue', 'saas']; const fluentModes = ['light', 'dark']; +const dxdsfluentColors = ['blue', 'saas']; +const dxdsfluentModes = ['light', 'dark']; const genericColors = ['carmine', 'contrast', 'dark', 'darkmoon', 'darkviolet', 'greenmist', 'light', 'softblue']; const getThemes = () => sizes.flatMap((size) => [ ...materialModes.flatMap((mode) => materialColors.map((color) => ['material', size, color, mode])), ...fluentModes.flatMap((mode) => fluentColors.map((color) => ['fluent', size, color, mode])), + ...dxdsfluentModes.flatMap((mode) => dxdsfluentColors.map((color) => ['dxdsfluent', size, color, mode])), ...genericColors.map((color) => ['generic', size, color]) ]); diff --git a/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png new file mode 100644 index 0000000000000000000000000000000000000000..77bf05a6864773b085005a5376d4d4f73ed5887a GIT binary patch literal 1230 zcmaJ=O>7fK6dpc#4O+ez30}+TrRfISo4k+pgwQ51CR8CRV!mRCeqN?snyYpuB zec$`uytkJo#t()2KI#JigtLd$JY5a?z76%#uXFC+4|Lf<#)@PTmq=A}5s(c$g<#gw zrcoYg#@v}7(Fgz=KQ#+QQp_EZbZoJjk6~+;L)id~9IQE-K7$CHLer+5X8u@uz(CVT zGshD-KIbT?Y#y$=XtF+D(CagL%3uy2fFm`D3Rs9}ux8ELo>WUSOorNOF9V6Jk+bkoX}fmV)hvq1jxcB<0mi zI~U!hnKB`c#BtSXm955D>`rq+DwX1RkrTxzMMS+hn`pJD?F|G9D)MyKbcl&<=qqYd zxI)qlb=oSyayqiM*S;otVO&jfIDzH;k^*2Z_y17K>YzQ6M{9onQ`jraIf%<64_92B zHm)?_r*b64MH<0w0pr==7AMM>V6TiFs3>sHanm+%)!W;I=WJ(4wRF>&dt}pLcj;9By0G^f z05&LDRW8(CzFAoeKjQnxUW6eU!VviBvrqVs zlfA<8O=}!V@A>WF-9(%FZ1m0bM=x$}IdyBHclW>ePUF?a(*DQ04#kvpNqvD0ZFYU> z&r@HDCkKO^&GexLSXlXf^OOEc$8O7YVE2A`Zuz@!uZ5>xx5@~_uf2p^V1As%A0e-Kw~Cy$vmS aUGD{By6(+O*Zar-00007fK6dpc#4O+ez30}+TrRfISo4k+pgwQ51CR8CRV!mRCeqN?snyYpuB zec$`uytkJo#t()2KI#JigtLd$JY5a?z76%#uXFC+4|Lf<#)@PTmq=A}5s(c$g<#gw zrcoYg#@v}7(Fgz=KQ#+QQp_EZbZoJjk6~+;L)id~9IQE-K7$CHLer+5X8u@uz(CVT zGshD-KIbT?Y#y$=XtF+D(CagL%3uy2fFm`D3Rs9}ux8ELo>WUSOorNOF9V6Jk+bkoX}fmV)hvq1jxcB<0mi zI~U!hnKB`c#BtSXm955D>`rq+DwX1RkrTxzMMS+hn`pJD?F|G9D)MyKbcl&<=qqYd zxI)qlb=oSyayqiM*S;otVO&jfIDzH;k^*2Z_y17K>YzQ6M{9onQ`jraIf%<64_92B zHm)?_r*b64MH<0w0pr==7AMM>V6TiFs3>sHanm+%)!W;I=WJ(4wRF>&dt}pLcj;9By0G^f z05&LDRW8(CzFAoeKjQnxUW6eU!VviBvrqVs zlfA<8O=}!V@A>WF-9(%FZ1m0bM=x$}IdyBHclW>ePUF?a(*DQ04#kvpNqvD0ZFYU> z&r@HDCkKO^&GexLSXlXf^OOEc$8O7YVE2A`Zuz@!uZ5>xx5@~_uf2p^V1As%A0e-Kw~Cy$vmS aUGD{By6(+O*Zar-0000 .dx-accordion-item-title { + background-color: $accordion-title-bg-hover; + } + } + + &.dx-state-active, + &.dx-state-focused { + > .dx-accordion-item-title { + color: $accordion-title-active-color; + background-color: $accordion-title-bg-active; + } + } +} + +.dx-accordion-item-opened { + margin-block: $fluent-accordion-item-opened-margin; + + & > .dx-accordion-item-title { + &::before { + content: "\f014"; + } + } +} + +.dx-accordion-item-title { + border-radius: $accordion-item-border-radius; + min-height: $fluent-accordion-title-height; + padding: $fluent-accordion-title-vertical-padding $fluent-accordion-title-horizontal-padding; + + &::before { + content: "\f016"; + font-weight: normal; + font-size: $accordion-title-icon-size; + font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes + line-height: 100%; + margin-inline-end: $accordion-title-icon-margin; + } + + .dx-icon { + @include dx-icon-sizing($accordion-title-icon-size); + } +} + +.dx-accordion-item-title-caption { + color: $accordion-title-color; + font-size: $fluent-accordion-title-font-size; + font-weight: 500; + + .dx-icon { + @include dx-icon-margin($accordion-title-icon-margin); + } +} + +.dx-state-disabled { + &.dx-accordion { + opacity: 1; + color: $accordion-disabled-color; + } +} + +.dx-accordion-item-body { + padding: $fluent-accordion-body-padding; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss new file mode 100644 index 000000000000..9b10c508a768 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss @@ -0,0 +1,36 @@ +@use "../sizes" as *; + +// adduse + +$fluent-accordion-title-horizontal-padding: null !default; +$fluent-accordion-title-vertical-padding: 6px !default; +$fluent-accordion-body-padding: null !default; +$fluent-accordion-title-height: null !default; + +$accordion-title-icon-margin: null !default; +$accordion-title-icon-size: null !default; +$accordion-item-border-radius: $fluent-base-border-radius !default; + +/** +* $name 10. Item expanded margin +* $type text +*/ +$fluent-accordion-item-opened-margin: null !default; + +@if $size == "default" { + $fluent-accordion-title-horizontal-padding: 12px !default; + $fluent-accordion-body-padding: 12px !default; + $fluent-accordion-title-height: 44px !default; + $accordion-title-icon-margin: 8px !default; + $accordion-title-icon-size: 20px !default; + $fluent-accordion-item-opened-margin: 0 !default; +} + +@else if $size == "compact" { + $fluent-accordion-title-horizontal-padding: 8px !default; + $fluent-accordion-body-padding: 8px !default; + $fluent-accordion-title-height: 32px !default; + $accordion-title-icon-margin: 6px !default; + $accordion-title-icon-size: 16px !default; + $fluent-accordion-item-opened-margin: 0 !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss new file mode 100644 index 000000000000..ee0d576b3184 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss @@ -0,0 +1,24 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/actionSheet"; + +// adduse + + +.dx-actionsheet-container { + .dx-actionsheet-item:not(:last-child) { + margin: $fluent-actionsheet-item-margin; + } + + .dx-button { + margin: 0; + } +} + +.dx-button.dx-actionsheet-cancel { + margin: 0; + margin-top: $fluent-actionsheet-item-margin-value; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss new file mode 100644 index 000000000000..a21b4a91b6d5 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-actionsheet-item-margin-value: 12px; +$fluent-actionsheet-item-margin: 0 0 $fluent-actionsheet-item-margin-value 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss new file mode 100644 index 000000000000..13072ae38ad6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss @@ -0,0 +1,30 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; + +// adduse +@use "../dropDownList"; + +@mixin autocomplete-editor-container-offset() { + inset-inline-end: $fluent-invalid-badge-horizontal-padding; +} + +.dx-autocomplete.dx-invalid, +.dx-autocomplete.dx-valid { + .dx-texteditor-buttons-container { + &::after { + @include autocomplete-editor-container-offset(); + } + } +} + +.dx-autocomplete.dx-validation-pending { + .dx-texteditor-buttons-container { + .dx-pending-indicator { + @include autocomplete-editor-container-offset(); + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss new file mode 100644 index 000000000000..5c86f7a03ff9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss @@ -0,0 +1,29 @@ +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 140. Badge text color +* $type color +*/ +$badge-color: null !default; + +/** +* $name 150. Badge background color +* $type color +*/ +$badge-bg: null !default; + +$badge-text-color-disabled: $base-foreground-disabled !default; +$badge-background-color-disabled: $base-background-disabled !default; + +@if $mode == "light" { + $badge-bg: $base-accent !default; + $badge-color: $base-inverted-text-color !default; +} + +@if $mode == "dark" { + $badge-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; + $badge-color: $base-text-color !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss new file mode 100644 index 000000000000..8a0fc9baf570 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss @@ -0,0 +1,22 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/badge"; + +// adduse + +.dx-badge { + background-color: $badge-bg; + color: $badge-color; + font-size: $fluent-badge-font-size; + padding: $fluent-badge-padding; + border-radius: 999em; + line-height: $badge-line-height; + + .dx-state-disabled & { + color: $badge-text-color-disabled; + background-color: $badge-background-color-disabled; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss new file mode 100644 index 000000000000..a7255e2af727 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-badge-padding: null !default; +$fluent-badge-font-size: null !default; +$badge-line-height: null !default; + +@if $size == "default" { + $fluent-badge-padding: 0 6px !default; + $fluent-badge-font-size: 12px !default; + $badge-line-height: 20px !default; +} + +@else if $size == "compact" { + $fluent-badge-padding: 0 6px !default; + $fluent-badge-font-size: 10px !default; + $badge-line-height: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss new file mode 100644 index 000000000000..682a82c99d8a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss @@ -0,0 +1,12 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/box"; + +// adduse + +.dx-box-item-content { + font-size: $fluent-base-font-size; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss new file mode 100644 index 000000000000..10cc4afc0ba2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss @@ -0,0 +1,424 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +$button-border-radius: $base-border-radius !default; +$button-disabled-background: $base-background-disabled !default; +$button-disabled-icon-opacity: 0.6 !default; +$button-shadow-color: null !default; + +/** +* $name 10. Text color +* $type color +*/ +$button-normal-color: $base-text-color !default; + +/** +* $name 15. Background color (contained) +* $type color +*/ +$button-normal-bg: $base-element-bg !default; + +/** +* $name 16. Background color (outlined) +* $type color +*/ +$button-normal-outlined-bg: transparent !default; + +/** +* $name 17. Background color (text) +* $type color +*/ +$button-normal-text-bg: transparent !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-normal-selected-color: $base-text-color !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-normal-hover-bg: $base-hover-bg !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-normal-focused-bg: $base-focus-bg !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-normal-active-bg: $base-active-bg !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-normal-selected-bg: $base-selected-bg !default; + +/** +* $name 10. Text color (contained) +* $type color +*/ +$button-default-color: null !default; + +/** +* $name 15. Background color +* $type color +*/ +$button-default-bg: $base-accent !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-default-selected-color: null !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-default-hover-bg: null !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-default-focused-bg: null !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-default-active-bg: null !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-default-selected-bg: null !default; + +/** +* $name 11. Text color (outlined) +* $type color +*/ +$button-default-outlined-color: $base-accent !default; +$button-default-outlined-border-color: $base-accent !default; + +$button-default-outlined-bg: transparent !default; +$button-default-outlined-hover-bg: null !default; +$button-default-outlined-focused-bg: null !default; +$button-default-outlined-active-bg: null !default; +$button-default-outlined-selected-bg: null !default; + +/** +* $name 11. Text color (text) +* $type color +*/ +$button-default-text-color: $base-accent !default; + +/** +* $name 10. Text color +* $type color +*/ +$button-danger-color: null !default; + +/** +* $name 15. Background color +* $type color +*/ +$button-danger-bg: $base-danger !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-danger-selected-color: null !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-danger-hover-bg: $base-danger-hover !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-danger-focused-bg: $base-danger-hover !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-danger-active-bg: $base-danger-active !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-danger-selected-bg: $base-danger-selected !default; + +$button-danger-outlined-color: $base-danger !default; +$button-danger-outlined-border-color: $base-danger !default; +$button-danger-outlined-color-hover: null !default; +$button-danger-outlined-color-active: null !default; +$button-danger-outlined-selected-color: null !default; +$button-danger-outlined-bg: transparent !default; +$button-danger-outlined-hover-bg: null !default; +$button-danger-outlined-focused-bg: null !default; +$button-danger-outlined-active-bg: null !default; +$button-danger-outlined-selected-bg: null !default; + +/** +* $name 10. Text color +* $type color +*/ +$button-success-color: null !default; + +/** +* $name 15. Background color +* $type color +*/ +$button-success-bg: $base-success !default; + +/** +* $name 20. Selected state text color +* $type color +*/ +$button-success-selected-color: null !default; + +/** +* $name 30. Hover state background color +* $type color +*/ +$button-success-hover-bg: null !default; + +/** +* $name 40. Focused state background color +* $type color +*/ +$button-success-focused-bg: null !default; + +/** +* $name 50. Active state background color +* $type color +*/ +$button-success-active-bg: null !default; + +/** +* $name 25. Selected state background color +* $type color +*/ +$button-success-selected-bg: null !default; + +$button-success-outlined-color: $base-success !default; +$button-success-outlined-border-color: $base-success !default; +$button-success-outlined-color-hover: null !default; +$button-success-outlined-color-active: null !default; +$button-success-outlined-selected-color: null !default; +$button-success-outlined-bg: transparent !default; +$button-success-outlined-hover-bg: null !default; +$button-success-outlined-focused-bg: null !default; +$button-success-outlined-active-bg: null !default; +$button-success-outlined-selected-bg: null !default; + +$button-accent-foreground-color: null !default; + +@if $mode == "light" { + $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -9.10%, $lightness: -23.53%) !default; + + $button-default-hover-bg: $base-accent-hover !default; + $button-default-focused-bg: $base-accent-hover !default; + $button-default-active-bg: $base-accent-active !default; + $button-default-selected-bg: $base-accent-selected !default; + + $button-success-hover-bg: color.adjust($base-success, $saturation: 0.63%, $space: hsl, $lightness: -2.75%) !default; + $button-success-focused-bg: $button-success-hover-bg !default; + $button-success-active-bg: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; + $button-success-selected-bg: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; + + @if $color == "blue" { + $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; + $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 10.40%, $lightness: -5.49%) !default; + $button-default-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $lightness: -17.06%) !default; + + $button-danger-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.5deg, $saturation: 0.6%, $lightness: 46.7%) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $lightness: -13.9%) !default; + $button-danger-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $lightness: 7.1%) !default; + + $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: -29.8%, $space: hsl, $lightness: 68.8%) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: color.adjust($base-success, $saturation: -34.9%, $space: hsl, $lightness: 46.1%) !default; + $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: -35%, $space: hsl, $lightness: 57.6%) !default; + } + + @if $color == "saas" { + $button-default-outlined-hover-bg: color.mix($base-bg, $base-accent, 90%) !default; + $button-default-outlined-selected-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + + $button-danger-outlined-hover-bg: color.mix($base-bg, $base-danger, 90%) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + + $button-success-outlined-hover-bg: color.mix($base-bg, $base-success, 90%) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + $button-success-outlined-selected-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; + } + + $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; + + $button-danger-outlined-color-hover: $base-danger-selected !default; + $button-danger-outlined-color-active: $base-danger-active !default; + $button-danger-outlined-selected-color: $base-danger-selected !default; + + $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; + $button-success-outlined-color-active: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; + $button-success-outlined-selected-color: $button-success-outlined-color-hover; + + $button-default-color: $base-inverted-text-color !default; + $button-default-selected-color: $base-inverted-text-color !default; + $button-danger-color: $base-inverted-text-color !default; + $button-danger-selected-color: $base-inverted-text-color !default; + $button-success-color: $base-inverted-text-color !default; + $button-success-selected-color: $base-inverted-text-color !default; + $button-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; +} + +@if $mode == "dark" { + $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 0.9deg, $saturation: -2.2%, $lightness: 22.4%) !default; + + $button-default-hover-bg: $base-accent-hover !default; + $button-default-focused-bg: $base-accent-hover !default; + $button-default-active-bg: $button-accent-foreground-color !default; + $button-default-selected-bg: color.adjust($button-default-active-bg, $saturation: -6.4%, $space: hsl, $lightness: 5.3%) !default; + + $button-success-hover-bg: color.adjust($base-success, $saturation: 5.4%, $space: hsl, $lightness: 22.5%) !default; + $button-success-focused-bg: $button-success-hover-bg !default; + $button-success-active-bg: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; + $button-success-selected-bg: color.adjust($base-success, $saturation: 5.3%, $space: hsl, $lightness: 34.1%) !default; + + $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; + $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; + $button-default-outlined-active-bg: $base-accent-selected !default; + $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -12.33%, $lightness: -41.18%) !default; + + $button-danger-outlined-color-hover: $base-danger-active !default; + $button-danger-outlined-color-active: $base-danger-active !default; + $button-danger-outlined-selected-color: $base-danger-active !default; + + $button-danger-outlined-hover-bg: color.adjust($base-danger, $saturation: -5.1%, $space: hsl, $lightness: -53.5%) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: color.adjust($base-danger, $saturation: -4.6%, $space: hsl, $lightness: -22.9%) !default; + $button-danger-outlined-selected-bg: color.adjust($base-danger, $saturation: -4.3%, $space: hsl, $lightness: -40.4%) !default; + + $button-success-outlined-color-hover: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; + $button-success-outlined-color-active: $button-success-outlined-color-hover !default; + $button-success-outlined-selected-color: $button-success-outlined-color-hover !default; + + $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default; + $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: 40.1%, $space: hsl, $lightness: -35.7%) !default; + + $button-default-color: $base-typography-bg !default; + $button-default-selected-color: $base-typography-bg !default; + $button-danger-color: $base-typography-bg !default; + $button-danger-selected-color: $base-typography-bg !default; + $button-success-color: $base-typography-bg !default; + $button-success-selected-color: $base-typography-bg !default; + $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; +} + +$button-default-icon-color: $button-default-color !default; +$button-normal-icon-color: $button-normal-color !default; +$button-danger-icon-color: $button-danger-color !default; +$button-success-icon-color: $button-success-color !default; + +$button-disabled-text-color: $base-foreground-disabled !default; + +$button-normal-outlined-hover-bg: $button-normal-hover-bg !default; +$button-normal-outlined-focused-bg: $button-normal-focused-bg !default; +$button-normal-outlined-active-bg: $button-normal-active-bg !default; +$button-normal-outlined-selected-bg: $button-normal-selected-bg !default; + +$button-normal-text-hover-bg: $button-normal-hover-bg !default; +$button-normal-text-focused-bg: $button-normal-focused-bg !default; +$button-normal-text-active-bg: $button-normal-active-bg !default; +$button-normal-text-selected-bg: $button-normal-selected-bg !default; + +/** +* $name 12. Hover state text color (outlined) +* $type color +*/ +$button-default-outlined-color-hover: $button-accent-foreground-color !default; + +/** +* $name 13. Active state text color (outlined) +* $type color +*/ +$button-default-outlined-color-active: $button-accent-foreground-color !default; + +/** +* $name 21. Selected state text color (outlined) +* $type color +*/ +$button-default-outlined-selected-color: $button-accent-foreground-color !default; + +/** +* $name 12. Hover state text color (text) +* $type color +*/ +$button-default-text-color-hover: $button-accent-foreground-color !default; + +/** +* $name 13. Active state text color (text) +* $type color +*/ +$button-default-text-color-active: $button-default-outlined-color-active !default; + +/** +* $name 21. Selected state text color (text) +* $type color +*/ +$button-default-text-selected-color: $button-accent-foreground-color !default; + +$button-default-text-bg: transparent !default; +$button-default-text-hover-bg: $button-default-outlined-hover-bg !default; +$button-default-text-focused-bg: $button-default-outlined-focused-bg !default; +$button-default-text-active-bg: $button-default-outlined-active-bg !default; +$button-default-text-selected-bg: $button-default-outlined-selected-bg !default; + +$button-danger-text-color: $button-danger-outlined-color !default; +$button-danger-text-color-hover: $button-danger-outlined-color-hover !default; +$button-danger-text-color-active: $button-danger-outlined-color-active !default; +$button-danger-text-selected-color: $button-danger-outlined-selected-color !default; + +$button-danger-text-bg: transparent !default; +$button-danger-text-hover-bg: $button-danger-outlined-hover-bg !default; +$button-danger-text-focused-bg: $button-danger-outlined-focused-bg !default; +$button-danger-text-active-bg: $button-danger-outlined-active-bg !default; +$button-danger-text-selected-bg: $button-danger-outlined-selected-bg !default; + +$button-success-text-color: $button-success-outlined-color !default; +$button-success-text-color-hover: $button-success-outlined-color-hover !default; +$button-success-text-color-active: $button-success-outlined-color-active !default; +$button-success-text-selected-color: $button-success-outlined-selected-color !default; + +$button-success-text-bg: transparent !default; +$button-success-text-hover-bg: $button-success-outlined-hover-bg !default; +$button-success-text-focused-bg: $button-success-outlined-hover-bg !default; +$button-success-text-active-bg: $button-success-outlined-active-bg !default; +$button-success-text-selected-bg: $button-success-outlined-selected-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss new file mode 100644 index 000000000000..e4ea30e6a047 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss @@ -0,0 +1,219 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "mixins" as *; +@use "../../base/button"; + +// adduse + +.dx-button-content { + line-height: $fluent-button-content-line-height; +} + +.dx-button-text { + line-height: $fluent-button-text-line-height; + text-transform: $fluent-button-text-transform; + font-weight: $fluent-button-text-font-weight; + letter-spacing: $fluent-button-text-letter-spacing; +} + +.dx-button { + @include dx-button-onlyicon-sizing(); +} + +.dx-button-has-icon { + @include dx-button-onlyicon-sizing(); +} + +.dx-button-has-text { + @include dx-button-withtext-sizing(); +} + +.dx-button-has-icon.dx-button-has-text { + @include dx-button-text-and-icon-sizing(); +} + +// NOTE: Button styles + +.dx-button-mode-contained { + &.dx-button-normal { + box-shadow: $fluent-button-box-shadow-size $button-shadow-color; + } +} + +.dx-button { // stylelint-disable-line no-duplicate-selectors + height: $fluent-button-height; + position: relative; + + .dx-button-content { + position: relative; + } + + @include dx-button-styling( + $button-normal-bg, + $button-normal-color, + $button-normal-hover-bg, + $button-normal-focused-bg, + $button-normal-active-bg, + $button-normal-icon-color, + $button-normal-selected-bg, + $button-normal-selected-color, + ); + + &.dx-button-default { + @include dx-button-styling( + $button-default-bg, + $button-default-color, + $button-default-hover-bg, + $button-default-focused-bg, + $button-default-active-bg, + $button-default-icon-color, + $button-default-selected-bg, + $button-default-selected-color, + ); + } + + &.dx-button-danger { + @include dx-button-styling( + $button-danger-bg, + $button-danger-color, + $button-danger-hover-bg, + $button-danger-focused-bg, + $button-danger-active-bg, + $button-danger-icon-color, + $button-danger-selected-bg, + $button-danger-selected-color, + ); + } + + &.dx-button-success { + @include dx-button-styling( + $button-success-bg, + $button-success-color, + $button-success-hover-bg, + $button-success-focused-bg, + $button-success-active-bg, + $button-success-icon-color, + $button-success-selected-bg, + $button-success-selected-color, + ); + } +} + +.dx-button-mode-text { + @include dx-button-flat-color-styling( + $button-normal-color, + $button-normal-color, + $button-normal-color, + $button-normal-text-bg, + $button-normal-text-hover-bg, + $button-normal-text-focused-bg, + $button-normal-text-active-bg, + $button-normal-text-selected-bg, + $button-normal-selected-color, + ); + + &.dx-button-default { + @include dx-button-flat-color-styling( + $button-default-text-color, + $button-default-text-color-hover, + $button-default-text-color-active, + $button-default-text-bg, + $button-default-text-hover-bg, + $button-default-text-focused-bg, + $button-default-text-active-bg, + $button-default-text-selected-bg, + $button-default-text-selected-color, + ); + } + + &.dx-button-danger { + @include dx-button-flat-color-styling( + $button-danger-text-color, + $button-danger-text-color-hover, + $button-danger-text-color-active, + $button-danger-text-bg, + $button-danger-text-hover-bg, + $button-danger-text-focused-bg, + $button-danger-text-active-bg, + $button-danger-text-selected-bg, + $button-danger-text-selected-color, + ); + } + + &.dx-button-success { + @include dx-button-flat-color-styling( + $button-success-text-color, + $button-success-text-color-hover, + $button-success-text-color-active, + $button-success-text-bg, + $button-success-text-hover-bg, + $button-success-text-focused-bg, + $button-success-text-active-bg, + $button-success-text-selected-bg, + $button-success-text-selected-color, + ); + } +} + +.dx-button-mode-outlined { + @include dx-button-outlined-color-styling( + $button-normal-color, + $button-normal-color, + $button-normal-color, + $base-border-color, + $button-normal-outlined-bg, + $button-normal-outlined-hover-bg, + $button-normal-outlined-focused-bg, + $button-normal-outlined-active-bg, + $button-normal-outlined-selected-bg, + $button-normal-selected-color, + ); + + &.dx-button-default { + @include dx-button-outlined-color-styling( + $button-default-outlined-color, + $button-default-outlined-color-hover, + $button-default-outlined-color-active, + $button-default-outlined-border-color, + $button-default-outlined-bg, + $button-default-outlined-hover-bg, + $button-default-outlined-focused-bg, + $button-default-outlined-active-bg, + $button-default-outlined-selected-bg, + $button-default-outlined-selected-color, + ); + } + + &.dx-button-danger { + @include dx-button-outlined-color-styling( + $button-danger-outlined-color, + $button-danger-outlined-color-hover, + $button-danger-outlined-color-active, + $button-danger-outlined-border-color, + $button-danger-outlined-bg, + $button-danger-outlined-hover-bg, + $button-danger-outlined-focused-bg, + $button-danger-outlined-active-bg, + $button-danger-outlined-selected-bg, + $button-danger-outlined-selected-color, + ); + } + + &.dx-button-success { + @include dx-button-outlined-color-styling( + $button-success-outlined-color, + $button-success-outlined-color-hover, + $button-success-outlined-color-active, + $button-success-outlined-border-color, + $button-success-outlined-bg, + $button-success-outlined-hover-bg, + $button-success-outlined-focused-bg, + $button-success-outlined-active-bg, + $button-success-outlined-selected-bg, + $button-success-outlined-selected-color, + ); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss new file mode 100644 index 000000000000..92f3becb9113 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss @@ -0,0 +1,201 @@ +@use "sass:math"; +@use "sass:color"; +@use "sizes" as *; +@use "../sizes" as *; +@use "colors" as *; +@use "../colors" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/button/mixins" as *; + +@mixin dx-button-onlyicon-sizing($icon-size: $fluent-button-icon-size) { + min-width: $fluent-button-height; + + $button-content-padding: math.div($fluent-button-height - $icon-size - $fluent-base-border-width * 2, 2); + + @include dx-button-sizing( + $button-content-padding, + $button-content-padding, + $button-content-padding, + $icon-size, + 0 + ); +} + +@mixin dx-button-withtext-sizing() { + @include dx-button-sizing( + $fluent-button-vertical-padding, + $fluent-button-horizontal-padding, + $fluent-button-horizontal-padding, + $fluent-button-icon-size, + math.div($fluent-button-icon-size, 2) + ); +} + +@mixin dx-button-text-and-icon-sizing() { + @include dx-button-sizing( + $fluent-button-vertical-padding, + $fluent-button-icon-text-padding, + $fluent-button-horizontal-padding, + $fluent-button-icon-size, + $fluent-button-icon-margin, + ); +} + + +@mixin dx-button-styling-variant( + $background-color, + $text-color, + $text-color-hover, + $text-color-active, + $hover-background-color, + $focused-background-color, + $active-background-color, + $icon-color, + $selected-background-color: $active-background-color, + $selected-color: $text-color, +) { + background-color: $background-color; + color: $text-color; + + .dx-icon { + color: $icon-color; + } + + &.dx-state-selected { + background-color: $selected-background-color; + + &, + .dx-icon { + color: $selected-color; + } + } + + &.dx-state-hover { + background-color: $hover-background-color; + + &, + .dx-icon { + color: $text-color-hover; + } + } + + &.dx-state-focused { + background-color: $focused-background-color; + + &, + .dx-icon { + color: $text-color-hover; + } + } + + &.dx-state-active { + background-color: $active-background-color; + + &, + .dx-icon { + color: $text-color-active; + } + } +} + +@mixin dx-button-styling( + $button-bg, + $button-color, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-icon-color, + $button-selected-bg, + $button-selected-color, +) { + border-radius: $button-border-radius; + + @include dx-button-styling-variant( + $button-bg, + $button-color, + $button-color, + $button-color, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-icon-color, + $button-selected-bg, + $button-selected-color, + ); + + &.dx-state-disabled { + opacity: 1; + box-shadow: none; + + .dx-icon { + color: $button-disabled-text-color; + } + + .dx-button-text { + color: $button-disabled-text-color; + } + + &.dx-button-mode-contained { + background-color: $button-disabled-background; + } + + &.dx-button-mode-outlined { + border-color: $button-disabled-background; + } + } +} + +@mixin dx-button-flat-color-styling( + $button-color, + $button-color-hover, + $button-color-active, + $button-bg, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-selected-bg: $button-active-bg, + $button-selected-color: $button-color +) { + @include dx-button-styling-variant( + $button-bg, + $button-color, + $button-color-hover, + $button-color-active, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-color, + $button-selected-bg, + $button-selected-color, + ); +} + +@mixin dx-button-outlined-color-styling( + $button-color, + $button-color-hover, + $button-color-active, + $border-color, + $button-bg, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-selected-bg, + $button-selected-color: $button-color-active, +) { + border-width: 1px; + border-style: solid; + border-color: $border-color; + + @include dx-button-styling-variant( + $button-bg, + $button-color, + $button-color-hover, + $button-color-active, + $button-hover-bg, + $button-focused-bg, + $button-active-bg, + $button-color, + $button-selected-bg, + $button-selected-color, + ); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss new file mode 100644 index 000000000000..5c4cec6e2300 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss @@ -0,0 +1,33 @@ +@use "../sizes" as *; + +// adduse + +$fluent-button-horizontal-padding: null !default; +$fluent-button-vertical-padding: null !default; +$fluent-button-icon-padding: null !default; +$fluent-button-icon-text-padding: null !default; +$fluent-button-content-line-height: 0 !default; +$fluent-button-text-line-height: normal !default; +$fluent-button-text-transform: none !default; +$fluent-button-text-font-weight: 500 !default; +$fluent-button-text-letter-spacing: normal !default; + +$fluent-button-box-shadow-size: 0 1px 3px !default; + +@if $size == "default" { + $fluent-button-horizontal-padding: 12px !default; + $fluent-button-vertical-padding: 6px !default; + $fluent-button-icon-padding: 6px; + $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; +} + +@else if $size == "compact" { + $fluent-button-horizontal-padding: 8px !default; + $fluent-button-vertical-padding: 4px !default; + $fluent-button-icon-padding: 4px !default; + $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; +} + +:root { + --dx-button-padding-inline: #{$fluent-button-horizontal-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss new file mode 100644 index 000000000000..ff40bdc07e0d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; + +// adduse + +$button-group-separator-color: rgba(0,0,0,.24) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss new file mode 100644 index 000000000000..9edc5f3e9a08 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss @@ -0,0 +1,43 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../button/colors" as *; +@use "../../base/buttonGroup"; +@use "../../base/buttonGroup/mixins" as *; + +// adduse + +.dx-buttongroup { + &.dx-state-disabled { + opacity: 1; + } +} + +@include dx-buttongroup-sizing( + $button-border-radius, + 1px, +); + +.dx-buttongroup-mode-contained { + border-radius: $button-border-radius; + box-shadow: $fluent-button-box-shadow-size $button-shadow-color; + + .dx-button-mode-contained { + box-shadow: none; + border-width: 0; + border-style: solid; + border-inline-end-width: 1px; + border-inline-end-color: $button-group-separator-color; + + &.dx-buttongroup-last-item { + border-inline-end-width: 0; + } + } + + &.dx-state-disabled { + box-shadow: none; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss new file mode 100644 index 000000000000..b0986f1b8d56 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss @@ -0,0 +1,68 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$calendar-color: $base-text-color !default; + +/** +* $name 20. Navigator text color +* $type color +*/ +$calendar-navigator-text-color: $button-normal-color !default; + +/** +* $name 30. Header text color +* $type color +*/ +$calendar-header-color: $calendar-color !default; + +/** +* $name 40. Other month text color +* $type color +*/ +$calendar-cell-other-color: null !default; +$calendar-bg: transparent !default; +$calendar-hover-bg: null !default; +$calendar-cell-hover-border-color: null !default; +$calendar-cell-hover-color: $calendar-color !default; + +/** +* $name 50. Selected cell background color +* $type color +*/ +$calendar-cell-selected-bg: $base-accent !default; +$calendar-cell-selected-color: $base-inverted-text-color !default; +$calendar-cell-contoured-border-radius: 50% !default; +$calendar-cell-contoured-border-color: null !default; +$calendar-cell-active-bg: null !default; +$calendar-invalid-border-color: $base-invalid-color !default; +$calendar-invalid-border-color-focused: $base-invalid-color-active !default; +$calendar-week-number-cell-color: null !default; +$calendar-week-number-cell-bg: null !default; +$calendar-week-number-border-radius: 0 !default; + +@if $mode == "light" { + $calendar-hover-bg: $button-default-outlined-selected-bg !default; + $calendar-cell-hover-border-color: $calendar-hover-bg !default; + $calendar-cell-active-bg: $button-default-outlined-active-bg !default; + $calendar-cell-other-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; + $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; + $calendar-cell-contoured-border-color: $calendar-cell-active-bg !default; + $calendar-week-number-cell-bg: $base-background-disabled !default; +} + +@if $mode == "dark" { + $calendar-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; + $calendar-cell-hover-border-color: $calendar-hover-bg !default; + $calendar-cell-active-bg: $base-accent-selected !default; + $calendar-cell-other-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; + $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; + $calendar-cell-contoured-border-color: $base-accent-active !default; + $calendar-week-number-cell-bg: $base-hover-bg !default; +} + +$calendar-cell-other-hover-color: $calendar-cell-other-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss new file mode 100644 index 000000000000..d57d20aec00c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss @@ -0,0 +1,71 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../button/mixins" as *; +@use "../../base/calendar/calendar"; +@use "../../base/calendar/mixins" as *; + +// adduse + +@include dx-calendar-mixin( + $calendar-bg, + $fluent-calendar-legacy-width, + $fluent-calendar-legacy-height, + $fluent-calendar-element-padding, + $fluent-calendar-footer-button-height, + $calendar-invalid-border-color, + $calendar-invalid-border-color-focused, +); + +.dx-calendar-navigator-previous-view, +.dx-calendar-navigator-next-view { + @include dx-button-onlyicon-sizing($fluent-base-icon-size); +} + +@include dx-calendar-navigator-mixin( + $calendar-navigator-text-color, +); +@include dx-calendar-body-mixin( + $calendar-week-number-cell-color, + $calendar-week-number-cell-bg, + $calendar-week-number-border-radius, + $fluent-calendar-cell-font-size, + $calendar-header-color, +); +@include dx-calendar-cell-mixin( + $calendar-cell-contoured-border-radius, + $calendar-color, + $base-border-radius, + $calendar-cell-selected-bg, + $calendar-hover-bg, + $calendar-cell-hover-color, + $calendar-cell-active-bg, + $calendar-cell-selected-bg, + $calendar-cell-selected-color, + $calendar-cell-contoured-border-color, + $calendar-cell-other-color, + $calendar-cell-other-hover-color, + $calendar-cell-hover-border-color, + 999em, +); +@include dx-calendar-cell-in-range-mixin( + "::before", + $calendar-hover-bg, + $calendar-cell-hover-border-color, + 999em, + 0, +); +@include dx-calendar-cell-in-range-mixin( + "::after", + inherit, + $calendar-cell-hover-border-color, + 999em, + 1px, + '.dx-calendar-cell-range-hover', + '.dx-calendar-cell-range-hover-start', + '.dx-calendar-cell-range-hover-end', +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss new file mode 100644 index 000000000000..38f020f3fc61 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; + +// adduse + +$fluent-calendar-legacy-width: null !default; +$fluent-calendar-legacy-height: null !default; + +$fluent-calendar-footer-button-height: null !default; +$fluent-calendar-cell-font-size: null !default; + +$fluent-calendar-element-padding: 8px !default; + +@if $size == "default" { + $fluent-calendar-legacy-width: 272px !default; + $fluent-calendar-legacy-height: 264px !default; + + $fluent-calendar-cell-font-size: 14px !default; + + $fluent-calendar-footer-button-height: 36px !default; +} + +@else if $size == "compact" { + $fluent-calendar-legacy-width: 252px !default; + $fluent-calendar-legacy-height: 260px !default; + + $fluent-calendar-cell-font-size: 12px !default; + $fluent-calendar-footer-button-height: 28px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss new file mode 100644 index 000000000000..d3c44e95845c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss @@ -0,0 +1,15 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/card"; + +// adduse + +.dx-card { + box-shadow: 0 1px 3px color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px color.change($base-shadow-color, $alpha: 0.24); + border-radius: $base-border-radius; + background-color: $base-bg; + margin: 2px 2px 3px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss new file mode 100644 index 000000000000..0c7d36023717 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss @@ -0,0 +1,657 @@ +@use 'sass:color'; +@use '../colors' as *; +@use '../color' as extcolor; +@use '../../base/cardView/variables' as *; +@use '../../base/cardView/header_panel/variables' as *; +@use '../../base/cardView/header_panel/item/variables' as *; +@use '../../base/cardView/content_view/content/card/variables' as *; +@use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; +@use '../../base/cardView/content_view/content/card/content/variables' as *; +@use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; +@use '../../base/cardView/column_chooser/variables' as *; +@use '../../base/cardView/filter_panel/variables' as *; + +// adduse + +// #region COMMON SETTINGS + +/** +* $name 100. Background color +* $type color +*/ +$cardview-fluent-common-bg-color: null !default; + +/** +* $name 102. Link color +* $type color +*/ +$cardview-fluent-common-link-color: null !default; + +/** +* $name 103. Text color +* $type color +*/ +$cardview-fluent-common-text-color: null !default; + +// #endregion + +// #region CARD + +/** +* $name 200. Background color +* $type color +*/ +$cardview-fluent-card-bg-color: null !default; + +/** +* $name 201. Border color +* $type color +*/ +$cardview-fluent-card-border-color: null !default; + +/** +* $name 203. Divider color +* $type color +*/ +$cardview-fluent-card-divider-color: null !default; + +/** +* $name 204. Text color +* $type color +*/ +$cardview-fluent-card-text-color: null !default; + +/** +* $name 206. Cover background color +* $type color +*/ +$cardview-fluent-card__cover-bg-color: null !default; + +/** +* $name 207. "Empty cover" background color +* $type color +*/ +$cardview-fluent-card__cover--noimage-bg-color: null !default; + +/** +* $name 208. "Empty cover" icon color +* $type color +*/ +$cardview-fluent-card__cover--noimage__icon-color: null !default; + +$cardview-fluent-card--focused-outline-color: null !default; + +// #endregion + +// #region CARD (SELECTED) + +/** +* $name 300. Background color +* $type color +*/ +$cardview-fluent-card--selected-bg-color: null !default; + +/** +* $name 301. Border color +* $type color +*/ +$cardview-fluent-card--selected-border-color: null !default; + +/** +* $name 302. Divider color +* $type color +*/ +$cardview-fluent-card--selected-divider-color: null !default; + +/** +* $name 303. Text color +* $type color +*/ +$cardview-fluent-card--selected-text-color: null !default; + +/** +* $name 305. Cover background color +* $type color +*/ +$cardview-fluent-card--selected__cover-bg-color: null !default; + +/** +* $name 306. "Empty cover" background color +* $type color +*/ +$cardview-fluent-card--selected__cover--noimage-bg-color: null !default; + +/** +* $name 307. "Empty cover" icon color +* $type color +*/ +$cardview-fluent-card--selected__cover--noimage__icon-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM + +/** +* $name 400. Background color +* $type color +*/ +$cardview-fluent-header-panel__item-bg-color: null !default; + +/** +* $name 401. Border color +* $type color +*/ +$cardview-fluent-header-panel__item-border-color: null !default; + +/** +* $name 403. Text color +* $type color +*/ +$cardview-fluent-header-panel__item-text-color: null !default; + +/** +* $name 405. Icon color +* $type color +*/ +$cardview-fluent-header-panel__item__icon-color: null !default; + +/** +* $name 406. Active "Filter" icon color +* $type color +*/ +$cardview-fluent-header-panel__item__header-filter-icon--selected-color: null !default; + +/** +* $name 407. Sort index text color +* $type color +*/ +$cardview-fluent-header-panel__item__sort-index-text-color: null !default; + +$cardview-fluent-header-panel__item--focused-outline-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (HOVERED) + +/** +* $name 500. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered-bg-color: null !default; + +/** +* $name 501. Border color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered-border-color: null !default; + +/** +* $name 502. Text color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered-text-color: null !default; + +/** +* $name 504. Icon color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered__icon-color: null !default; + +/** +* $name 505. Active "Filter" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: null !default; + +/** +* $name 506. Sort index text color +* $type color +*/ +$cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (DISABLED) + +/** +* $name 600. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled-bg-color: null !default; + +/** +* $name 601. Border color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled-border-color: null !default; + +/** +* $name 602. Text color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled-text-color: null !default; + +/** +* $name 604. Icon color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled__icon-color: null !default; + +/** +* $name 605. Active "Filter" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: null !default; + +/** +* $name 606. Sort index text color +* $type color +*/ +$cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (ON DRAG) + +/** +* $name 700. Background color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-bg-color: null !default; + +/** +* $name 701. Border color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-border-color: null !default; + +/** +* $name 702. Text color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-text-color: null !default; + +/** +* $name 704. "Drag allowed" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged__allowance-icon-color: null !default; + +/** +* $name 705. "Drag blocked" icon color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: null !default; + +/** +* $name 706. Box shadow color +* $type color +*/ +$cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default; + +// #endregion + +// #region HEADER PANEL DROP ZONE + +/** +* $name 800. Background color +* $type color +*/ +$cardview-fluent-header-panel__dropzone-bg-color: null !default; + +/** +* $name 802. Border color +* $type color +*/ +$cardview-fluent-header-panel__dropzone-border-color: null !default; + +/** +* $name 803. Text color +* $type color +*/ +$cardview-fluent-header-panel__dropzone-text-color: null !default; + +/** +* $name 804. Icon color +* $type color +*/ +$cardview-fluent-header-panel__dropzone__icon-color: null !default; + +// #endregion + +// #region FILTER PANEL + +/** +* $name 900. Background color +* $type color +*/ +$cardview-fluent-filter-panel-bg-color: null !default; + +/** +* $name 902. Border color +* $type color +*/ +$cardview-fluent-filter-panel-border-color: null !default; + +/** +* $name 903. Text color +* $type color +*/ +$cardview-fluent-filter-panel-text-color: null !default; + +/** +* $name 904. Icon color +* $type color +*/ +$cardview-fluent-filter-panel__icon-color: null !default; + +// #endregion + +// #region EMPTY VIEW + +/** +* $name 1000. Background color +* $type color +*/ +$cardview-fluent-nodata-view-bg-color: null !default; + +/** +* $name 1001. Text color +* $type color +*/ +$cardview-fluent-nodata-view-text-color: null !default; + +/** +* $name 1002. Icon color +* $type color +*/ +$cardview-fluent-nodata-view__icon-color: null !default; + +/** +* $name 1003. Icon background color +* $type color +*/ +$cardview-fluent-nodata-view__icon-bg-color: null !default; + +// #endregion + +// #region HIGHLIGHTS IN SEARCH + +/** +* $name 1100. Background color +* $type color +*/ +$cardview-fluent-card__content__field-value--highlighted-bg-color: null !default; + +/** +* $name 1102. Text color +* $type color +*/ +$cardview-fluent-card__content__field-value--highlighted-text-color: null !default; + +/** +* $name 1104. Box shadow color +* $type color +*/ +$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: null !default; + +// #endregion + +// #region COLUMN CHOOSER + +$cardview-fluent-columnchooser--empty__message-color: null !default; + +// #endregion + +@if $mode == 'light' { + + // Common + $cardview-fluent-common-bg-color: $base-typography-bg !default; + $cardview-fluent-common-link-color: $base-link-color !default; + $cardview-fluent-common-text-color: $base-text-color !default; + + // Card + $cardview-fluent-card-bg-color: $base-bg !default; + $cardview-fluent-card-border-color: $base-border-color !default; + $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; + $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-card__cover-bg-color: #FFF !default; + $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; + $cardview-fluent-card__cover--noimage__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; + + $cardview-fluent-card--focused-outline-color: $base-accent !default; + + // Card - selected + $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; + $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 2.21%, $lightness: 44.31%) !default; + $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; + $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; + $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; + $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; + $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; + + // Header panel item - default state + $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + $cardview-fluent-header-panel__item-border-color: $base-border-color !default; + $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; + $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; + + $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: -1.96%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: -13.73%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default; + $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default; + $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; + $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.80%, $lightness: -9.61%) !default; + $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; + $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; + + // Filter panel + $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-filter-panel-border-color: $base-border-color !default; + $cardview-fluent-filter-panel-text-color: $base-accent !default; + $cardview-fluent-filter-panel__icon-color: $base-accent !default; + + // Empty view + $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; + $cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; + $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -9.80%, $space: hsl) !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; + $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; + + // Column chooser + $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; +} + +@if $mode == "dark" { + + // Common + $cardview-fluent-common-bg-color: $base-typography-bg !default; + $cardview-fluent-common-link-color: $base-link-color !default; + $cardview-fluent-common-text-color: $base-text-color !default; + + // Card + $cardview-fluent-card-bg-color: $base-bg !default; + $cardview-fluent-card-border-color: $base-border-color !default; + $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; + $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-card__cover-bg-color: #FFF !default; + $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + $cardview-fluent-card__cover--noimage__icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default; + + $cardview-fluent-card--focused-outline-color: $base-accent !default; + + // Card - selected + $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; + $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -11.06%, $lightness: -36.27%) !default; + $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; + $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; + $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; + $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; + $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; + + // Header panel item - default state + $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; + $cardview-fluent-header-panel__item-border-color: $base-border-color !default; + $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; + $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; + + $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: 18.04%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: 11.76%, $space: hsl) !default; + $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $base-accent !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-common-text-color !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: -56.08%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: -56.08%, $space: hsl) !default; + $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -6.72%, $space: hsl, $lightness: -18.04%) !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: -56.08%, $space: hsl) !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; + $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; + $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; + $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; + $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default; + $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; + $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; + $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; + + // Filter panel + $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-filter-panel-border-color: $base-border-color !default; + $cardview-fluent-filter-panel-text-color: $base-accent !default; + $cardview-fluent-filter-panel__icon-color: $base-accent !default; + + // Empty view + $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; + $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; + $cardview-fluent-nodata-view__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; + $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: 3.92%, $space: hsl) !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; + $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default; + $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; + + // Column chooser + $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; +} + +$cardview-bg-color: $cardview-fluent-common-bg-color !default; +$cardview-link-color: $cardview-fluent-common-link-color !default; +$cardview-text-color: $cardview-fluent-common-text-color !default; + +$cardview-card-bg-color: $cardview-fluent-card-bg-color !default; +$cardview-card-border-color: $cardview-fluent-card-border-color !default; +$cardview-card-divider-color: $cardview-fluent-card-divider-color !default; +$cardview-card-text-color: $cardview-fluent-card-text-color !default; +$cardview-card__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; +$cardview-card__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; +$cardview-card__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; + +$cardview-card--selected-bg-color: $cardview-fluent-card--selected-bg-color !default; +$cardview-card--selected-border-color: $cardview-fluent-card--selected-border-color !default; +$cardview-card--selected-divider-color: $cardview-fluent-card--selected-divider-color !default; +$cardview-card--selected-text-color: $cardview-fluent-card--selected-text-color !default; +$cardview-card--selected__cover-bg-color: $cardview-fluent-card--selected__cover-bg-color !default; +$cardview-card--selected__cover--noimage-bg-color: $cardview-fluent-card--selected__cover--noimage-bg-color !default; +$cardview-card--selected__cover--noimage__icon-color: $cardview-fluent-card--selected__cover--noimage__icon-color !default; + +$cardview-card--focused-outline-color: $cardview-fluent-card--focused-outline-color !default; + +$cardview-header-panel__item-bg-color: $cardview-fluent-header-panel__item-bg-color !default; +$cardview-header-panel__item-border-color: $cardview-fluent-header-panel__item-border-color !default; +$cardview-header-panel__item-text-color: $cardview-fluent-header-panel__item-text-color !default; +$cardview-header-panel__item__icon-color: $cardview-fluent-header-panel__item__icon-color !default; +$cardview-header-panel__item__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; +$cardview-header-panel__item__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; + +$cardview-header-panel__item--focused-outline-color: $cardview-fluent-header-panel__item--focused-outline-color !default; + +$cardview-header-panel__item--hovered-bg-color: $cardview-fluent-header-panel__item--hovered-bg-color !default; +$cardview-header-panel__item--hovered-border-color: $cardview-fluent-header-panel__item--hovered-border-color !default; +$cardview-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item--hovered-text-color !default; +$cardview-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item--hovered__icon-color !default; +$cardview-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color !default; +$cardview-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item--hovered__sort-index-text-color !default; + +$cardview-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item--disabled-bg-color !default; +$cardview-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item--disabled-border-color !default; +$cardview-header-panel__item--disabled-text-color: $cardview-fluent-header-panel__item--disabled-text-color !default; +$cardview-header-panel__item--disabled__icon-color: $cardview-fluent-header-panel__item--disabled__icon-color !default; +$cardview-header-panel__item--disabled__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color !default; +$cardview-header-panel__item--disabled__sort-index-text-color: $cardview-fluent-header-panel__item--disabled__sort-index-text-color !default; + +$cardview-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item--dragged-bg-color !default; +$cardview-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item--dragged-border-color !default; +$cardview-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item--dragged-text-color !default; +$cardview-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-header-panel__item--dragged__allowance-icon-color !default; +$cardview-header-panel__item--dragged__prohibition-icon-color: $cardview-fluent-header-panel__item--dragged__prohibition-icon-color !default; +$cardview-header-panel__item--dragged-box-shadow-color: $cardview-fluent-header-panel__item--dragged-box-shadow-color !default; + +$cardview-header-panel__dropzone-bg-color: $cardview-fluent-header-panel__dropzone-bg-color !default; +$cardview-header-panel__dropzone-border-color: $cardview-fluent-header-panel__dropzone-border-color !default; +$cardview-header-panel__dropzone-text-color: $cardview-fluent-header-panel__dropzone-text-color !default; +$cardview-header-panel__dropzone__icon-color: $cardview-fluent-header-panel__dropzone__icon-color !default; + +$cardview-filter-panel-bg-color: $cardview-fluent-filter-panel-bg-color !default; +$cardview-filter-panel-border-color: $cardview-fluent-filter-panel-border-color !default; +$cardview-filter-panel-text-color: $cardview-fluent-filter-panel-text-color !default; +$cardview-filter-panel__icon-color: $cardview-fluent-filter-panel__icon-color !default; + +$cardview-nodata-view-bg-color: $cardview-fluent-nodata-view-bg-color !default; +$cardview-nodata-view-text-color: $cardview-fluent-nodata-view-text-color !default; +$cardview-nodata-view__icon-color: $cardview-fluent-nodata-view__icon-color !default; +$cardview-nodata-view__icon-bg-color: $cardview-fluent-nodata-view__icon-bg-color !default; + +$cardview-card__content__field-value--highlighted-bg-color: $cardview-fluent-card__content__field-value--highlighted-bg-color !default; +$cardview-card__content__field-value--highlighted-text-color: $cardview-fluent-card__content__field-value--highlighted-text-color !default; +$cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px $cardview-fluent-card__content__field-value--highlighted-box-shadow-color !default; + +$cardview-columnchooser--empty__message-color: $cardview-fluent-columnchooser--empty__message-color !default; + +$cardview-header-item__sort-indicator__border-color: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss new file mode 100644 index 000000000000..29f2262bbe3e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss @@ -0,0 +1,5 @@ +@use 'colors'; +@use 'sizes'; +@use '../../base/cardView/index' as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss new file mode 100644 index 000000000000..619d5e8b3e23 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss @@ -0,0 +1,491 @@ +@use "../sizes" as *; +@use '../../base/cardView/variables' as *; +@use '../../base/cardView/header_panel/variables' as *; +@use '../../base/cardView/header_panel/item/variables' as *; +@use '../../base/cardView/content_view/content/card/variables' as *; +@use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; +@use '../../base/cardView/content_view/content/card/content/variables' as *; +@use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; +@use '../../base/cardView/column_chooser/variables' as *; +@use '../../base/cardView/filter_panel/variables' as *; + +// adduse + +// #region COMMON SETTINGS + +/** +* $name 101. Border radius +* $type text +*/ +$cardview-fluent-common-border-radius: null !default; + +/** +* $name 104. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-common-text-weight: null !default; + +/** +* $name 105. Vertical gap between cards +* $type text +*/ +$cardview-fluent-common-cards-row-gap: null !default; + +/** +* $name 106. Horizontal gap between cards +* $type text +*/ +$cardview-fluent-common-cards-column-gap: null !default; + +$cardview-fluent-common-gap: null !default; + +$cardview-fluent-common-padding: null !default; + +// #endregion + +// #region CARD + +$cardview-fluent-card-min-width: null !default; + +$cardview-fluent-card-border-width: null !default; + +/** +* $name 202. Border radius +* $type text +*/ +$cardview-fluent-card-border-radius: null !default; + +$cardview-fluent-card__header-height: null !default; + +$cardview-fluent-card__header-text-size: null !default; + +$cardview-fluent-card__header__selection-checkbox-padding-right: null !default; + +/** +* $name 205. Field name text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-card__field-caption-weight: null !default; + +$cardview-fluent-card__cover-max-height: null !default; + +$cardview-fluent-card__cover--noimage__icon-size: null !default; + +$cardview-fluent-card__content-padding: null !default; + +$cardview-fluent-card__content-row-gap: null !default; + +$cardview-fluent-card__content__cell-padding-vertical: null !default; + +$cardview-fluent-card__content__cell-padding-horizontal: null !default; + +// #endregion + +// #region CARD (SELECTED) + +/** +* $name 304. Field name text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-card--selected__field-caption-weight: null !default; + +// #endregion + +// #region HEADER + +$cardview-fluent-header-gap: null !default; + +// #endregion + +// #region HEADER PANEL + +$cardview-fluent-header-panel-vertical-margin: null !default; + +$cardview-fluent-header-panel--empty-line-height: null !default; + +// #endregion + +// #region HEADER PANEL ITEM + +$cardview-fluent-header-panel__item-border-width: null !default; + +/** +* $name 402. Border radius +* $type text +*/ +$cardview-fluent-header-panel__item-border-radius: null !default; + +$cardview-fluent-header-panel__item-padding-vertical: null !default; + +$cardview-fluent-header-panel__item-padding-horizontal: null !default; + +/** +* $name 404. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item-text-weight: null !default; + +/** +* $name 408. Sort index text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item__sort-index-text-weight: null !default; + +$cardview-fluent-header-panel__item__icon-size: null !default; + +$cardview-fluent-header-item__left-padding: null !default; +$cardview-fluent-header-item__right-padding: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (HOVERED) + +/** +* $name 503. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--hovered-text-weight: null !default; + +/** +* $name 507. Sort index text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (DISABLED) + +/** +* $name 603. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--disabled-text-weight: null !default; + +/** +* $name 607. Sort index text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !default; + +// #endregion + +// #region HEADER PANEL ITEM (ON DRAG) + +/** +* $name 703. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-header-panel__item--dragged-text-weight: null !default; + +$cardview-fluent-header-item__sort-indicator__border-size: null; +$cardview-fluent-header-item__sort-indicator__border-radius: null; + +// #endregion + +// #region HEADER PANEL DROP ZONE + +$cardview-fluent-header-panel__dropzone-height: null !default; + +$cardview-fluent-header-panel__dropzone-top: null !default; + +$cardview-fluent-header-panel__dropzone-border-width: null !default; + +/** +* $name 801. Border radius +* $type text +*/ +$cardview-fluent-header-panel__dropzone-border-radius: null !default; + +// #endregion + +// #region FILTER PANEL + +/** +* $name 901. Border radius +* $type text +*/ +$cardview-fluent-filter-panel-border-radius: null !default; + +// #endregion + +// #region NO DATA VIEW + +$cardview-fluent-nodata-view__icon-container-size: null !default; + +$cardview-fluent-nodata-view__icon-container-margin: null !default; + +$cardview-fluent-nodata-view__icon-size: null !default; + +// #endregion + +// #region HIGHLIGHTS IN SEARCH + +/** +* $name 1101. Border radius +* $type text +*/ +$cardview-fluent-card__content__field-value--highlighted-border-radius: null !default; + +$cardview-fluent-card__content__field-value--highlighted-border-padding: null !default; + +/** +* $name 1103. Text weight +* $type select +* $type-values 100|200|300|400|500|600|700|800|900 +*/ +$cardview-fluent-card__content__field-value--highlighted-text-weight: null !default; + +// #endregion + +// #region COLUMN CHOOSER + +$cardview-fluent-column-chooser--empty__message-horizontal-padding: null !default; + +$cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !default; + +// #endregion + +@if $size == "default" { + + // Common + $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-text-weight: 400 !default; + $cardview-fluent-common-cards-row-gap: 16px !default; + $cardview-fluent-common-cards-column-gap: 16px !default; + $cardview-fluent-common-gap: 24px !default; + $cardview-fluent-common-padding: 24px !default; + + // Card + $cardview-fluent-card-min-width: 250px !default; + $cardview-fluent-card-border-width: 1px !default; + $cardview-fluent-card-border-radius: 8px !default; + $cardview-fluent-card__header-height: 48px !default; + $cardview-fluent-card__header-text-size: 16px !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: 12px !default; + $cardview-fluent-card__field-caption-weight: 600 !default; + $cardview-fluent-card__cover-max-height: 180px !default; + $cardview-fluent-card__cover--noimage__icon-size: 48px !default; + $cardview-fluent-card__content-padding: 12px !default; + $cardview-fluent-card__content-row-gap: 8px !default; + $cardview-fluent-card__content__cell-padding-vertical: 6px !default; + $cardview-fluent-card__content__cell-padding-horizontal: 12px !default; + + // Card - selected + $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; + + // Header + $cardview-fluent-header-gap: 0 !default; + + // Header panel + $cardview-fluent-header-panel-vertical-margin: 8px !default; + $cardview-fluent-header-panel--empty-line-height: 32px !default; + + // Header panel item - default + $cardview-fluent-header-panel__item-border-width: 1px !default; + $cardview-fluent-header-panel__item-border-radius: 6px !default; + $cardview-fluent-header-panel__item-padding-horizontal: 8px !default; + $cardview-fluent-header-panel__item-padding-vertical: 5px !default; + $cardview-fluent-header-item__left-padding: 6px !default; + $cardview-fluent-header-item__right-padding: 2px !default; + $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; + $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; + $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-item__sort-indicator__border-size: 2px !default; + $cardview-fluent-header-item__sort-indicator__border-radius: 8px !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-height: 44px !default; + $cardview-fluent-header-panel__dropzone-top: -6px !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; + $cardview-fluent-header-panel__dropzone-border-radius: 8px !default; + + // Filter panel + $cardview-fluent-filter-panel-border-radius: 0 !default; + + // Empty view + $cardview-fluent-nodata-view__icon-container-size: 64px !default; + $cardview-fluent-nodata-view__icon-container-margin: 12px !default; + $cardview-fluent-nodata-view__icon-size: 40px !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; + $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; + + // Column chooser + $cardview-fluent-column-chooser--empty__message-horizontal-padding: 24px !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 14px !default; +} +@else if $size == "compact" { + + // Common + $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-text-weight: 400 !default; + $cardview-fluent-common-cards-row-gap: 12px !default; + $cardview-fluent-common-cards-column-gap: 12px !default; + $cardview-fluent-common-gap: 16px !default; + $cardview-fluent-common-padding: 16px !default; + + // Card + $cardview-fluent-card-min-width: 250px !default; + $cardview-fluent-card-border-width: 1px !default; + $cardview-fluent-card-border-radius: 6px !default; + $cardview-fluent-card__header-height: 36px !default; + $cardview-fluent-card__header-text-size: 14px !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: 8px !default; + $cardview-fluent-card__field-caption-weight: 600 !default; + $cardview-fluent-card__cover-max-height: 140px !default; + $cardview-fluent-card__cover--noimage__icon-size: 32px !default; + $cardview-fluent-card__content-padding: 8px !default; + $cardview-fluent-card__content-row-gap: 4px !default; + $cardview-fluent-card__content__cell-padding-vertical: 4px !default; + $cardview-fluent-card__content__cell-padding-horizontal: 8px !default; + + // Card - selected + $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; + + // Header + $cardview-fluent-header-gap: 4px !default; + + // Header panel + $cardview-fluent-header-panel-vertical-margin: 4px !default; + $cardview-fluent-header-panel--empty-line-height: 24px !default; + + // Header panel item - default + $cardview-fluent-header-panel__item-border-width: 1px !default; + $cardview-fluent-header-panel__item-border-radius: 6px !default; + $cardview-fluent-header-panel__item-padding-horizontal: 6px !default; + $cardview-fluent-header-panel__item-padding-vertical: 3px !default; + $cardview-fluent-header-item__left-padding: 3px !default; + $cardview-fluent-header-item__right-padding: 1px !default; + $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; + $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; + $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; + + // Header panel item - hovered + $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - disabled + $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; + + // Header panel item - dragged + $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; + $cardview-fluent-header-item__sort-indicator__border-size: 1px !default; + $cardview-fluent-header-item__sort-indicator__border-radius: 4px !default; + + // Header panel Drop-zone + $cardview-fluent-header-panel__dropzone-height: 32px !default; + $cardview-fluent-header-panel__dropzone-top: -4px !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; + $cardview-fluent-header-panel__dropzone-border-radius: 6px !default; + + // Filter panel + $cardview-fluent-filter-panel-border-radius: 0 !default; + + // Empty view + $cardview-fluent-nodata-view__icon-container-size: 48px !default; + $cardview-fluent-nodata-view__icon-container-margin: 8px !default; + $cardview-fluent-nodata-view__icon-size: 32px !default; + + // Search highlight + $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; + $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; + + // Column chooser + $cardview-fluent-column-chooser--empty__message-horizontal-padding: 16px !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 12px !default; +} + +$cardview-border-radius: $cardview-fluent-common-border-radius !default; +$cardview-text-weight: $cardview-fluent-common-text-weight !default; +$cardview-cards-row-gap: $cardview-fluent-common-cards-row-gap !default; +$cardview-cards-column-gap: $cardview-fluent-common-cards-column-gap !default; +$cardview-gap: $cardview-fluent-common-gap !default; +$cardview-padding: $cardview-fluent-common-padding !default; + +$cardview-card-min-width: $cardview-fluent-card-min-width !default; +$cardview-card-border-width: $cardview-fluent-card-border-width !default; +$cardview-card-border-radius: $cardview-fluent-card-border-radius !default; +$cardview-card__header-height: $cardview-fluent-card__header-height !default; +$cardview-card__header-text-size: $cardview-fluent-card__header-text-size !default; +$cardview-card__header__selection-checkbox-padding-right: $cardview-fluent-card__header__selection-checkbox-padding-right !default; +$cardview-card__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; +$cardview-card__cover-max-height: $cardview-fluent-card__cover-max-height !default; +$cardview-card__cover--noimage__icon-size: $cardview-fluent-card__cover--noimage__icon-size !default; +$cardview-card__content-padding: $cardview-fluent-card__content-padding !default; +$cardview-card__content-row-gap: $cardview-fluent-card__content-row-gap !default; +$cardview-card__content__cell-padding-vertical: $cardview-fluent-card__content__cell-padding-vertical !default; +$cardview-card__content__cell-padding-horizontal: $cardview-fluent-card__content__cell-padding-horizontal !default; + +$cardview-card--selected__field-caption-weight: $cardview-fluent-card--selected__field-caption-weight !default; + +$cardview-header-gap: $cardview-fluent-header-gap !default; + +$cardview-header-panel-vertical-margin: $cardview-fluent-header-panel-vertical-margin !default; +$cardview-header-panel--empty-line-height: $cardview-fluent-header-panel--empty-line-height !default; + +$cardview-header-panel__item-border-width: $cardview-fluent-header-panel__item-border-width !default; +$cardview-header-panel__item-border-radius: $cardview-fluent-header-panel__item-border-radius !default; +$cardview-header-panel__item-padding-horizontal: $cardview-fluent-header-panel__item-padding-horizontal !default; +$cardview-header-panel__item-padding-vertical: $cardview-fluent-header-panel__item-padding-vertical !default; +$cardview-header-panel__item-text-weight: $cardview-fluent-header-panel__item-text-weight !default; +$cardview-header-panel__item__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default; +$cardview-header-panel__item__icon-size: $cardview-fluent-header-panel__item__icon-size !default; + +$cardview-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item--hovered-text-weight !default; +$cardview-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item--hovered__sort-index-text-weight !default; + +$cardview-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item--disabled-text-weight !default; +$cardview-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item--disabled__sort-index-text-weight !default; + +$cardview-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item--dragged-text-weight !default; + +$cardview-header-panel__dropzone-height: $cardview-fluent-header-panel__dropzone-height !default; +$cardview-header-panel__dropzone-top: $cardview-fluent-header-panel__dropzone-top !default; +$cardview-header-panel__dropzone-border-width: $cardview-fluent-header-panel__dropzone-border-width !default; +$cardview-header-panel__dropzone-border-radius: $cardview-fluent-header-panel__dropzone-border-radius !default; + +$cardview-filter-panel-border-radius: $cardview-fluent-filter-panel-border-radius !default; + +$cardview-nodata-view__icon-container-size: $cardview-fluent-nodata-view__icon-container-size !default; +$cardview-nodata-view__icon-container-margin: $cardview-fluent-nodata-view__icon-container-margin !default; +$cardview-nodata-view__icon-size: $cardview-fluent-nodata-view__icon-size !default; + +$cardview-card__content__field-value--highlighted-border-radius: $cardview-fluent-card__content__field-value--highlighted-border-radius !default; +$cardview-card__content__field-value--highlighted-border-padding: $cardview-fluent-card__content__field-value--highlighted-border-padding !default; +$cardview-card__content__field-value--highlighted-text-weight: $cardview-fluent-card__content__field-value--highlighted-text-weight !default; + +$cardview-column-chooser--empty__message-horizontal-padding: $cardview-fluent-column-chooser--empty__message-horizontal-padding !default; +$cardview-column-chooser__select-all-item-horizontal-padding: $cardview-fluent-column-chooser__select-all-item-horizontal-padding !default; + +$cardview-header-item__left-padding: $cardview-fluent-header-item__left-padding !default; +$cardview-header-item__right-padding: $cardview-fluent-header-item__right-padding !default; +$cardview-header-item__sort-indicator__border-size: $cardview-fluent-header-item__sort-indicator__border-size !default; +$cardview-header-item__sort-indicator__border-radius: $cardview-fluent-header-item__sort-indicator__border-radius !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss new file mode 100644 index 000000000000..f6e7b3ab9b10 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss @@ -0,0 +1,195 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../textEditor/colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Background color +* $type color +*/ +$chat-background-color: $base-bg !default; + +/** +* $name 20. Border color +* $type color +*/ +$chat-border-color: $base-border-color !default; +$chat-messagebox-border-color: $chat-border-color !default; +$chat-messagebox-file-background-color: $button-normal-text-hover-bg !default; +$chat-messagebox-file-cancel-button-secondary-color: $button-normal-text-selected-bg !default; +$chat-message-editing-preview-accent-color: $base-accent !default; +$chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default; + +/** +* $name 30. Text color +* $type color +*/ +$chat-avatar-color: $base-text-color !default; + +/** +* $name 31. Background color +* $type color +*/ +$chat-avatar-background-color: $base-active-bg !default; + +/** +* $name 40. Text color (sent messages) +* $type color +*/ +$chat-bubble-color-primary: $base-text-color !default; + +/** +* $name 41. Background color (sent messages) +* $type color +*/ +$chat-bubble-background-color-primary: null !default; + +/** +* $name 42. Text color (received messages) +* $type color +*/ +$chat-bubble-color-secondary: $base-text-color !default; + +/** +* $name 43. Background color (received messages) +* $type color +*/ +$chat-bubble-background-color-secondary: null !default; + +/** +* $name 50. User name color +* $type color +*/ +$chat-information-author-name-color: null !default; + +/** +* $name 51. Timestamp color +* $type color +*/ +$chat-information-timestamp-color: null !default; + +/** +* $name 52. Day header color +* $type color +*/ +$chat-messagelist-day-header-color: null !default; + +/** +* $name 55. Alert color +* $type color +*/ +$chat-alertlist-color: $base-invalid-color !default; + +/** +* $name 65. Icon color +* $type color +*/ +$chat-messagelist-empty-icon-color: null !default; + +/** +* $name 66. Icon background color +* $type color +*/ +$chat-messagelist-empty-icon-background-color: null !default; + +/** +* $name 67. Title color +* $type color +*/ +$chat-messagelist-empty-message-color: $base-text-color !default; + +/** +* $name 68. Subtitle color +* $type color +*/ +$chat-messagelist-empty-prompt-color: null !default; + +/** +* $name 80. Text color +* $type color +*/ +$chat-typingindicator-color: null !default; + +/** +* $name 82. Central circle color +* $type color +*/ +$chat-typingindicator-circle-bg-color-center: null !default; + +/** +* $name 83. Outer circles color +* $type color +*/ +$chat-typingindicator-circle-bg-color: null !default; + +$chat-file-container-background-color: $base-bg !default; +$chat-file-container-box-shadow: null !default; +$chat-file-secondary-color: null !default; + +$chat-suggestions-box-shadow: null !default; + +@if $mode == "light" { + $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; + $chat-information-author-name-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + $chat-typingindicator-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + + $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: 32.16%, $space: hsl) !default; + $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; + $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: -5.88%, $space: hsl) !default; + + $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -29.16%, $space: hsl) !default; + $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; + + $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default; + $chat-file-secondary-color: $base-icon-color !default; + + $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default; + + @if $color == "blue" { + $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; + $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; + } + + @if $color == "saas" { + $chat-bubble-background-color-primary: color.mix($base-bg, $base-accent, 90%) !default; + $chat-messagelist-empty-icon-background-color: $base-border-color !default; + } +} + +@if $mode == "dark" { + $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; + $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; + + $chat-information-author-name-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + $chat-typingindicator-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + + $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: -25.88%, $space: hsl) !default; + $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; + $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: 7.84%, $space: hsl) !default; + + $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 33.92%, $space: hsl) !default; + $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; + + $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default; + $chat-file-secondary-color: $base-icon-color !default; + + $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default; +} + +/** +* $name 81. Background color +* $type color +*/ +$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default; + +$chat-messagelist-contextmenu-delete-button-color: $base-danger !default; +$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default; +$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss new file mode 100644 index 000000000000..4ea1eff3b5c0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss @@ -0,0 +1,150 @@ +@use "../../base/chat"; +@use "colors" as *; +@use "sizes" as *; +@use "../../base/chat/mixins" as *; +@use "../common/mixins" as *; + +// adduse + +@include chat( + $chat-background-color, + $chat-border-color, + $chat-border-radius, +); +@include chat-avatar( + $chat-avatar-size, + $chat-avatar-color, + $chat-avatar-background-color, +); +@include chat-file( + $chat-file-container-width, + $chat-file-container-padding, + $chat-file-container-background-color, + $chat-file-container-border-radius, + $chat-file-container-box-shadow, + $chat-file-button-size, + $chat-file-secondary-font-size, + $chat-file-secondary-color, + $chat-file-base-section-gap, + $chat-file-size-max-width, + $chat-file-icon-font-size, +); +@include chat-fileview( + $chat-file-view-items-gap, + $chat-file-container-width, +); +@include chat-alertlist( + $chat-alertlist-color, + $chat-alerts-padding-block, + $chat-alerts-padding-inline, + $chat-alert-padding-block, + $chat-alerts-row-gap, +); +@include chat-messagebox( + $chat-messagebox-padding, + $chat-messagebox-border-color, + $chat-messagebox-gap, + $chat-messagebox-textarea-border-radius, + $chat-messagebox-textarea-padding, + $chat-messagebox-toolbar-min-height, + $chat-file-container-width, + $chat-messagebox-files-container-padding, + $chat-messagebox-files-container-padding-top, + $chat-messagebox-file-background-color, + $chat-messagebox-file-cancel-button-secondary-color, + $chat-file-container-box-shadow, +); +@include chat-messagebubble( + $chat-bubble-padding, + $chat-bubble-border-radius, + $chat-bubble-color-secondary, + $chat-bubble-background-color-secondary, + $chat-bubble-color-primary, + $chat-bubble-background-color-primary, + $chat-bubble-container-gap, + $chat-bubble-delete-gap, + $chat-bubble-delete-icon-size, + $chat-bubble-gap, +); +@include chat-messagegroup( + $chat-messagegroup-gap, + $chat-messagegroup-alignment-start-template, + $chat-messagegroup-alignment-start-gap, + $chat-messagegroup-padding, + $chat-information-font-size, + $chat-information-author-name-color, + $chat-information-timestamp-color, + $chat-information-gap, + $chat-information-icon-size, + $chat-information-edited-gap, +); +@include chat-messagelist-empty( + $chat-messagelist-padding, + $chat-messagelist-empty-icon-box-size, + $chat-messagelist-empty-icon-size, + $chat-messagelist-empty-icon-margin-bottom, + $chat-messagelist-empty-row-gap, + $chat-messagelist-empty-icon-color, + $chat-messagelist-empty-icon-background-color, + $chat-messagelist-empty-message-font-size, + $chat-messagelist-empty-message-color, + $chat-messagelist-empty-prompt-font-size, + $chat-messagelist-empty-prompt-color, +); +@include chat-messagelist( + $chat-messagelist-padding, + $chat-messagelist-day-header-color, + $chat-messagelist-day-header-padding-bottom, + $chat-messagelist-day-header-first-padding-top, + $chat-messagelist-day-header-font-size, +); +@include chat-messagelist-contextmenu( + $chat-messagelist-contextmenu-delete-button-color, + $chat-messagelist-contextmenu-delete-button-focused-color, + $chat-messagelist-contextmenu-delete-button-focused-bg, +); +@include chat-typingindicator( + $chat-typingindicator-template, + $chat-typingindicator-padding, + $chat-typingindicator-row-gap, + $chat-typingindicator-font-size, + $chat-typingindicator-color, + $chat-typingindicator-bubble-padding-block, + $chat-typingindicator-bubble-padding-inline, + $chat-typingindicator-bubble-border-radius, + $chat-typingindicator-bubble-bg-color, + $chat-typingindicator-bubble-column-gap, + $chat-typingindicator-circle-size, + $chat-typingindicator-circle-size-center, + $chat-typingindicator-circle-border-radius, + $chat-typingindicator-circle-bg-color, + $chat-typingindicator-circle-bg-color-center, +); +@include message-editing-preview( + $chat-message-editing-preview-content-padding-inline, + $chat-message-editing-preview-content-row-gap, + $chat-message-editing-preview-accent-color, + $chat-message-editing-preview-caption-font-size, + $chat-messagebox-padding, + $chat-message-editing-preview-border-width, + $chat-message-editing-preview-cancel-button-color, +); +@include chat-confirmation-popup( + $chat-border-radius, + $chat-confirmation-popup-content-padding, + 0 $chat-confirmation-popup-toolbar-padding-block, + $chat-confirmation-popup-toolbar-padding-inline, + $chat-confirmation-popup-toolbar-gap, +); +@include chat-suggestions( + $chat-suggestions-padding, + $chat-suggestions-button-border-radius, + $chat-suggestions-border-width, + $chat-suggestions-button-max-width, + $chat-suggestions-gap, + $chat-suggestions-box-shadow, +); + +.dx-chat-file { + @include dx-base-typography(); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss new file mode 100644 index 000000000000..6c67c9c17d67 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss @@ -0,0 +1,167 @@ +@use "sass:math"; +@use "../textEditor/colors" as *; +@use "../common/sizes" as *; +@use "../sizes" as *; +@use "../typography/sizes" as *; +@use "../popup/sizes" as *; +@use "../button/colors" as *; + +// adduse + +$chat-border-radius: $base-border-radius * 3 !default; +$chat-bubble-border-radius: null !default; +$chat-bubble-padding: null !default; +$chat-bubble-container-gap: 4px !default; +$chat-bubble-delete-gap: null !default; +$chat-bubble-delete-icon-size: null !default; +$chat-messagebox-padding: null !default; +$chat-messagebox-textarea-padding: null !default; +$chat-messagebox-textarea-border-radius: null !default; +$chat-messagebox-toolbar-min-height: null !default; +$chat-messagebox-gap: 8px !default; +$chat-messagebox-files-container-padding: 3px !default; +$chat-messagebox-files-container-padding-top: 2px !default; +$chat-messagelist-padding: null !default; +$chat-messagegroup-gap: 4px !default; +$chat-messagegroup-padding: null !default; +$chat-information-gap: 8px !default; +$chat-avatar-size: 32px !default; +$chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default; +$chat-messagegroup-alignment-start-gap: 12px !default; +$chat-information-font-size: 12px !default; +$chat-information-icon-size: 12px !default; +$chat-information-edited-gap: 2px !default; + +$chat-alerts-padding-block: null !default; +$chat-alerts-padding-inline: 8px !default; +$chat-alerts-row-gap: null !default; +$chat-alert-padding-block: null !default; + +$chat-suggestions-padding: null !default; +$chat-suggestions-border-width: $fluent-base-border-width !default; +$chat-suggestions-button-border-radius: $button-border-radius !default; +$chat-suggestions-button-max-width: 200px !default; +$chat-suggestions-gap: 12px !default; + +$chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default; +$chat-message-editing-preview-content-row-gap: null !default; +$chat-message-editing-preview-content-padding-inline: null !default; +$chat-message-editing-preview-border-width: 3px !default; + +$chat-messagelist-empty-icon-box-size: null !default; +$chat-messagelist-empty-icon-size: null !default; +$chat-messagelist-empty-icon-margin-bottom: null !default; +$chat-messagelist-empty-row-gap: null !default; +$chat-messagelist-empty-message-font-size: null !default; +$chat-messagelist-empty-prompt-font-size: null !default; +$chat-messagelist-day-header-padding-bottom: 12px !default; +$chat-messagelist-day-header-first-padding-top: 20px !default; +$chat-messagelist-day-header-font-size: 12px !default; + +$chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default; +$chat-typingindicator-padding: null !default; +$chat-typingindicator-row-gap: $chat-messagegroup-gap !default; +$chat-typingindicator-font-size: $chat-information-font-size !default; +$chat-typingindicator-bubble-padding-block: null !default; +$chat-typingindicator-bubble-padding-inline: null !default; +$chat-typingindicator-bubble-border-radius: null !default; +$chat-typingindicator-bubble-column-gap: 4px !default; +$chat-typingindicator-circle-size: null !default; +$chat-typingindicator-circle-size-center: null !default; +$chat-typingindicator-circle-border-radius: 999em !default; + +$chat-confirmation-popup-content-padding: $fluent-popup-content-vertical-padding !default; +$chat-confirmation-popup-toolbar-padding-block: $fluent-popup-content-withtitle-bottom-padding !default; +$chat-confirmation-popup-toolbar-padding-inline: $fluent-popup-content-withtitle-top-padding !default; +$chat-confirmation-popup-toolbar-gap: null !default; + +$chat-file-container-width: 17.14em !default; +$chat-file-container-padding: 7px 8px !default; +$chat-file-container-border-radius: $fluent-base-border-radius !default; +$chat-file-button-size: $fluent-button-height !default; +$chat-file-secondary-font-size: 10px !default; +$chat-file-base-section-gap: 4px !default; +$chat-file-size-max-width: 4em !default; +$chat-file-icon-font-size: null !default; +$chat-file-view-items-gap: 8px !default; +$chat-bubble-gap: 8px !default; + +@if $size == "default" { + $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default; + $chat-bubble-padding: 8px 12px !default; + $chat-bubble-delete-gap: 4px !default; + $chat-bubble-delete-icon-size: 20px !default; + $chat-messagebox-padding: 20px !default; + $chat-messagebox-textarea-border-radius: 8px !default; + $chat-messagebox-textarea-padding: 12px !default; + $chat-messagebox-toolbar-min-height: 32px !default; + $chat-messagelist-padding: 20px !default; + $chat-messagegroup-padding: 24px !default; + + $chat-alerts-padding-block: 12px !default; + $chat-alerts-row-gap: 2px !default; + $chat-alert-padding-block: 6px !default; + + $chat-suggestions-padding: 20px !default; + + $chat-message-editing-preview-content-padding-inline: 12px !default; + $chat-message-editing-preview-content-row-gap: 4px !default; + + $chat-messagelist-empty-icon-box-size: 64px !default; + $chat-messagelist-empty-icon-size: 40px !default; + $chat-messagelist-empty-icon-margin-bottom: 12px !default; + $chat-messagelist-empty-row-gap: 4px !default; + $chat-messagelist-empty-message-font-size: 18px !default; + $chat-messagelist-empty-prompt-font-size: 14px !default; + + $chat-typingindicator-circle-size: math.div(8, 14) * 1em !default; + $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default; + $chat-typingindicator-bubble-padding-block: 12px !default; + $chat-typingindicator-bubble-padding-inline: 20px !default; + $chat-typingindicator-padding: $chat-messagegroup-padding !default; + $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; + + $chat-confirmation-popup-toolbar-gap: 8px !default; + + $chat-file-icon-font-size: 20px !default; +} + +@else if $size == "compact" { + $chat-bubble-border-radius: $fluent-base-border-radius * 2 !default; + $chat-bubble-padding: 6px 8px !default; + $chat-bubble-delete-gap: 2px !default; + $chat-bubble-delete-icon-size: 16px !default; + $chat-messagebox-padding: 16px !default; + $chat-messagebox-textarea-border-radius: 8px !default; + $chat-messagebox-textarea-padding: 8px !default; + $chat-messagebox-toolbar-min-height: 24px !default; + $chat-messagelist-padding: 16px !default; + $chat-messagegroup-padding: 12px !default; + + $chat-alerts-padding-block: 8px !default; + $chat-alerts-row-gap: 2px !default; + $chat-alert-padding-block: 5px !default; + + $chat-suggestions-padding: 16px !default; + + $chat-message-editing-preview-content-padding-inline: 8px !default; + $chat-message-editing-preview-content-row-gap: 2px !default; + + $chat-messagelist-empty-icon-box-size: 48px !default; + $chat-messagelist-empty-icon-size: 32px !default; + $chat-messagelist-empty-icon-margin-bottom: 14px !default; + $chat-messagelist-empty-row-gap: 2px !default; + $chat-messagelist-empty-message-font-size: 14px !default; + $chat-messagelist-empty-prompt-font-size: 12px !default; + + $chat-typingindicator-circle-size: math.div(8, 12) * 1em !default; + $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default; + $chat-typingindicator-bubble-padding-block: 8px !default; + $chat-typingindicator-bubble-padding-inline: 12px !default; + $chat-typingindicator-padding: $chat-messagegroup-padding !default; + $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; + + $chat-confirmation-popup-toolbar-gap: 4px !default; + + $chat-file-icon-font-size: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss new file mode 100644 index 000000000000..f36f4d5b4fe0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss @@ -0,0 +1,22 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$checkbox-border-color: $base-border-color-accessible !default; +$checkbox-border-color-hover: $base-border-color-accessible-hover !default; +$checkbox-border-color-active: $base-border-color-accessible-focused !default; + +$checkbox-foreground-color: $base-element-bg !default; + +$checkbox-accent-color: $base-accent !default; +$checkbox-accent-color-hover: $base-accent-hover !default; +$checkbox-accent-color-focused: $base-accent-active !default; + +$checkbox-invalid-color: $base-invalid-color !default; +$checkbox-invalid-color-hover: $base-invalid-color-hover !default; +$checkbox-invalid-color-focused: $base-invalid-color-selected !default; + +$checkbox-border-color-disabled: $base-border-color-disabled !default; +$checkbox-foreground-disabled-color: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss new file mode 100644 index 000000000000..35250bf909bd --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss @@ -0,0 +1,224 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/checkBox"; +@use "../../base/checkBox/mixins" as *; + +// adduse + +.dx-checkbox-icon { + width: $fluent-checkbox-arrow-icon-size; + height: $fluent-checkbox-arrow-icon-size; + border-width: $fluent-checkbox-border-width; + border-style: solid; + border-color: $checkbox-border-color; + border-radius: $fluent-checkbox-icon-border-radius; + background-color: $checkbox-foreground-color; + font-size: $fluent-checkbox-icon-font-size; + + &::before { + z-index: 1; + } +} + +.dx-checkbox-text { + padding-inline-start: $fluent-checkbox-text-padding-start; + padding-inline-end: $fluent-checkbox-text-padding-end; +} + +.dx-checkbox { + .dx-checkbox-container { + overflow: visible; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color; + } + } + + &.dx-state-readonly { + .dx-checkbox-icon { + border-color: $checkbox-border-color-disabled; + } + } + + &.dx-state-hover { + .dx-checkbox-icon { + border-color: $checkbox-border-color-hover; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-hover; + } + } + } + + &.dx-state-active { + .dx-checkbox-icon { + border-color: $checkbox-border-color-active; + } + } + + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + } + } + + &.dx-state-active, + &.dx-state-focused { + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-focused; + } + } + } + + &.dx-state-disabled, + .dx-state-disabled & { + opacity: 1; + + .dx-checkbox-icon { + border-color: $checkbox-border-color-disabled; + } + } +} + +.dx-checkbox-checked { + .dx-checkbox-icon { + color: $checkbox-foreground-color; + border-color: $checkbox-accent-color; + background-color: $checkbox-accent-color; + + @include dx-icon(check); + + font-size: $fluent-checkbox-icon-font-size; + + @include dx-checkbox-icon-centered($fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-font-size); + } + + &.dx-state-hover { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-hover; + background-color: $checkbox-accent-color-hover; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-hover; + background-color: $checkbox-invalid-color-hover; + } + } + } + + &.dx-state-active, + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + background-color: $checkbox-accent-color-focused; + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-focused; + background-color: $checkbox-invalid-color-focused; + } + } + } + + &.dx-invalid { + .dx-checkbox-icon { + background-color: $checkbox-invalid-color; + } + } + + &.dx-state-readonly, + &.dx-state-disabled, + .dx-state-disabled &, + &.dx-state-readonly.dx-invalid { + .dx-checkbox-icon { + color: $checkbox-foreground-disabled-color; + background-color: $checkbox-foreground-color; + } + } +} + +@include dx-checkbox-icon-indeterminate( + $checkbox-foreground-color, + $checkbox-accent-color, + $fluent-checkbox-indeterminate-icon-height, + $fluent-checkbox-indeterminate-icon-width, + $fluent-checkbox-indeterminate-icon-border-radius, +); + +.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $checkbox-accent-color; + } + + &.dx-invalid { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-invalid-color; + } + } + } + + &.dx-state-hover { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-hover; + + &::before { + background-color: $checkbox-accent-color-hover; + } + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-hover; + + &::before { + background-color: $checkbox-invalid-color-hover; + } + } + } + } + + &.dx-state-active, + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + + &::before { + background-color: $checkbox-accent-color-focused; + } + } + + &.dx-invalid { + .dx-checkbox-icon { + border-color: $checkbox-invalid-color-focused; + + &::before { + background-color: $checkbox-invalid-color-focused; + } + } + } + } + + &.dx-state-readonly, + &.dx-state-disabled, + .dx-state-disabled &, + &.dx-state-readonly.dx-invalid { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-foreground-disabled-color; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss new file mode 100644 index 000000000000..a2db48620746 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; +@use "colors" as *; + +// adduse + +$fluent-checkbox-icon-font-size: 16px !default; + +$fluent-checkbox-border-width: 1px !default; +$fluent-checkbox-icon-border-radius: 2px !default; + +$fluent-checkbox-arrow-icon-size: 1em !default; +$fluent-checkbox-arrow-font-size: 0.75em !default; +$fluent-checkbox-indeterminate-icon-height: 0.5em !default; +$fluent-checkbox-indeterminate-icon-width: 0.5em !default; +$fluent-checkbox-indeterminate-icon-border-radius: 2px !default; + +$fluent-checkbox-text-padding-start: null !default; +$fluent-checkbox-text-padding-end: null !default; + +@if $size == "default" { + $fluent-checkbox-text-padding-start: 12px !default; + $fluent-checkbox-text-padding-end: 8px !default; +} + +@else if $size == "compact" { + $fluent-checkbox-text-padding-start: 8px !default; + $fluent-checkbox-text-padding-end: 6px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss new file mode 100644 index 000000000000..c68bdf88940c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss @@ -0,0 +1,36 @@ +@use "sass:math"; +@use "sass:color"; + +@function difference($minuend, $subtrahend) { + @return color.adjust( + $minuend, + $red: - (color.channel($subtrahend, "red", $space: rgb)), + $green: - (color.channel($subtrahend, "green", $space: rgb)), + $blue: - (color.channel($subtrahend, "blue", $space: rgb))); +} + +@function screen($color1, $color2) { + $r1: math.div(color.channel($color1, "red", $space: rgb), 255); + $g1: math.div(color.channel($color1, "green", $space: rgb), 255); + $b1: math.div(color.channel($color1, "blue", $space: rgb), 255); + + $r2: math.div(color.channel($color2, "red", $space: rgb), 255); + $g2: math.div(color.channel($color2, "green", $space: rgb), 255); + $b2: math.div(color.channel($color2, "blue", $space: rgb), 255); + + @return color.change( + $color1, + $red: ($r1 + $r2 - $r1 * $r2) * 255, + $green: ($g1 + $g2 - $g1 * $g2) * 255, + $blue: ($b1 + $b2 - $b1 * $b2) * 255); +} + +@function adjust-if-not-achromatic($color, $hue, $saturation, $lightness) { + $out: color.adjust($color, $saturation: $saturation, $lightness: $lightness, $space: hsl); + + @if not color.is-powerless($out, "hue", $space: hsl) { + $out: color.adjust($out, $hue: $hue, $space: hsl); + } + + @return $out; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss new file mode 100644 index 000000000000..4b437aa96502 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$colorbox-preview-icon-color: $base-icon-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss new file mode 100644 index 000000000000..befd71dc3a18 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss @@ -0,0 +1,70 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../colorView/colors" as *; +@use "../textEditor/sizes" as *; +@use "../../base/colorBox"; +@use "../../base/colorBox/mixins" as *; + +// adduse +@use "../colorView"; +@use "../dropDownEditor"; + + +.dx-colorbox { + .dx-colorbox-input-container { + .dx-placeholder::before, + .dx-colorbox-input { + padding-inline-start: $fluent-colorbox-preview-width; + } + + &::after { + left: $fluent-colorbox-preview-padding + 1; + } + } + + &.dx-texteditor { + .dx-texteditor-label { + .dx-label-before { + min-width: $fluent-colorbox-preview-width; + } + } + } +} + +.dx-colorbox-color-result-preview { + position: absolute; + top: 50%; + z-index: 2; + width: $fluent-colorbox-preview-icon-size; + height: $fluent-colorbox-preview-icon-size; + margin-top: math.div(-$fluent-colorbox-preview-icon-size, 2); + inset-inline-start: $fluent-colorbox-preview-padding; + border: 1px solid; + border-color: $colorview-border-color; + + .dx-icon-colordismiss { + color: $colorbox-preview-icon-color; + } + + .dx-state-disabled & { + .dx-icon-colordismiss { + color: $base-foreground-disabled; + } + } +} + +.dx-colorbox-overlay { + &.dx-overlay-content { + background-color: $colorbox-overlay-bg; + } + + .dx-popup-content { + padding: $fluent-colorbox-overlay-padding; + } + + padding: 0; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss new file mode 100644 index 000000000000..9882bab17d9d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-colorbox-overlay-padding: null !default; +$fluent-colorbox-preview-padding: null !default; +$fluent-colorbox-preview-icon-size: $fluent-base-icon-size !default; + +@if $size == "default" { + $fluent-colorbox-overlay-padding: 20px !default; + $fluent-colorbox-preview-padding: 12px !default; +} + +@else if $size == "compact" { + $fluent-colorbox-overlay-padding: 16px !default; + $fluent-colorbox-preview-padding: 8px !default; +} + +$fluent-colorbox-preview-width: $fluent-colorbox-preview-padding * 2 + $fluent-colorbox-preview-icon-size !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss new file mode 100644 index 000000000000..0ac69e1bfb5d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; + +// adduse + +/** +* $name 10. Overlay background +* $type color +*/ +$colorbox-overlay-bg: $overlay-content-bg !default; +$colorbox-palette-cell-bg: $colorbox-overlay-bg !default; +$colorview-border-color: $base-border-color !default; +$colorview-label-color: $base-label-color !default; +$colorview-handle-color: $base-bg !default; +$colorview-handle-border-color: $base-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss new file mode 100644 index 000000000000..88f6747bd46c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss @@ -0,0 +1,123 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/colorView/mixins" as *; +@use "../../base/colorView"; + +// adduse + + +@include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color); + + +$fluent-colorview-alpha-width: $fluent-colorview-palette-width + 4; +$fluent-colorview-hue-scale-height: $fluent-colorview-palette-height; + +.dx-colorview-container { + width: $fluent-colorview-container-width; + + label { + line-height: $fluent-colorview-container-line-height; + display: flex; + align-items: center; + margin-bottom: 10px; + + &.dx-colorview-label-hex { + margin: $fluent-colorview-container-hex-margin; + } + + &.dx-colorview-alpha-channel-label { + margin: 0 0 0 $fluent-colorview-container-alpha-label-margin; + width: $fluent-colorview-container-alpha-label-width; + } + + .dx-texteditor { + width: $fluent-colorview-container-textbox-width; + margin: $fluent-colorview-container-textbox-margin; + } + } +} + +.dx-colorview-hue-scale-cell { + margin-left: $fluent-colorview-hue-scale-margin; +} + +.dx-colorview-palette { + width: $fluent-colorview-palette-width; + height: $fluent-colorview-palette-height; +} + +.dx-colorview-alpha-channel-scale { + width: $fluent-colorview-palette-width; +} + +.dx-colorview-container-row.dx-colorview-alpha-channel-row { + margin-top: $fluent-colorview-alpha-margin; + display: flex; + align-items: center; +} + +.dx-colorview-hue-scale { + width: $fluent-colorview-hue-scale-width; + height: $fluent-colorview-hue-scale-height; +} + +.dx-colorview-alpha-channel-cell { + width: $fluent-colorview-alpha-width; +} + +.dx-colorview-hue-scale-wrapper { + height: $fluent-colorview-hue-scale-height + 2; +} + +.dx-colorview-color-preview { + width: 100%; + height: $fluent-colorview-color-preview-height; +} + +.dx-colorview-controls-container { + width: $fluent-colorview-controls-container-width; + margin-left: $fluent-colorview-controls-container-margin; +} + +.dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors + color: $colorview-label-color; +} + +.dx-colorview-palette-cell, +.dx-colorview-alpha-channel-border, +.dx-colorview-hue-scale-wrapper, +.dx-colorview-color-preview-container { + padding: 1px; + margin: 1px; + margin-top: 0; + background-color: $colorbox-palette-cell-bg; + box-shadow: 0 0 0 1px $colorview-border-color; +} + +.dx-colorview-color-preview-container { + margin-bottom: $fluent-colorview-preview-container-margin; +} + +.dx-rtl { + .dx-colorview-controls-container { + margin-left: 0; + margin-right: $fluent-colorview-controls-container-margin; + } + + .dx-colorview-hue-scale-cell { + margin-left: 0; + margin-right: $fluent-colorview-hue-scale-margin; + } + + .dx-colorview-container { + label { + &.dx-colorview-alpha-channel-label { + margin-left: 0; + margin-right: $fluent-colorview-container-alpha-label-margin; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss new file mode 100644 index 000000000000..6b27cf1809ca --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss @@ -0,0 +1,22 @@ +@use "../sizes" as *; + +// adduse + +$fluent-colorview-container-width: 450px !default; +$fluent-colorview-palette-width: 288px !default; +$fluent-colorview-palette-height: 299px !default; +$fluent-colorview-alpha-margin: 10px !default; +$fluent-colorview-hue-scale-width: 18px !default; +$fluent-colorview-hue-scale-margin: 19px !default; +$fluent-colorview-color-preview-height: 40px !default; +$fluent-colorview-preview-container-margin: 34px !default; + +$fluent-colorview-container-line-height: normal !default; +$fluent-colorview-container-hex-margin: 20px 0 0 0 !default; +$fluent-colorview-container-alpha-label-width: 115px !default; +$fluent-colorview-container-alpha-label-margin: 43px !default; +$fluent-colorview-container-textbox-width: 69px !default; +$fluent-colorview-container-textbox-margin: 0 0 0 10px !default; + +$fluent-colorview-controls-container-width: 90px !default; +$fluent-colorview-controls-container-margin: 27px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss new file mode 100644 index 000000000000..a3401ae9d875 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$base-dropdown-shadow-color1: null !default; +$base-dropdown-shadow-color2: null !default; + +@if $mode == "light" { + $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.12) !default; + $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.14) !default; +} + +@if $mode == "dark" { + $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.24) !default; + $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.28) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss new file mode 100644 index 000000000000..c6515af0face --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss @@ -0,0 +1,68 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; + + +// adduse +.dx-theme-marker { + font-family: "dx.dxdsfluent.#{$fluent-color-accent-modificator}.#{$fluent-color-theme-modificator}#{$fluent-size-postfix}"; +} + +// stylelint-disable declaration-no-important +.dx-theme-accent-as-text-color { + color: $base-accent !important; +} + +.dx-theme-text-color { + color: $base-text-color !important; +} + +.dx-theme-background-color-as-text-color { + color: $base-bg !important; +} + +.dx-theme-border-color-as-text-color { + color: $base-border-color !important; +} + +.dx-theme-accent-as-background-color { + background-color: $base-accent !important; + fill: $base-accent !important; +} + +.dx-theme-text-color-as-background-color { + background-color: $base-text-color !important; + fill: $base-text-color !important; +} + +.dx-theme-background-color { + background-color: $base-bg !important; + fill: $base-bg !important; +} + +.dx-theme-typography-background-color { + background-color: $base-typography-bg !important; +} + +.dx-theme-border-color-as-background-color { + background-color: $base-border-color !important; + fill: $base-border-color !important; +} + +.dx-theme-accent-as-border-color { + border-color: $base-accent !important; +} + +.dx-theme-text-color-as-border-color { + border-color: $base-text-color !important; +} + +.dx-theme-background-color-as-border-color { + border-color: $base-bg !important; +} + +.dx-theme-border-color { + border-color: $base-border-color !important; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss new file mode 100644 index 000000000000..96a5b23eb2d8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss @@ -0,0 +1,107 @@ +@use "sass:math"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/validation" as *; +@use "../list/sizes" as *; + +$badge-invalid-bg: $base-invalid-color; + +@mixin dx-base-typography() { + @include dx-base-typography-mixin( + $typography-color, + $fluent-base-font-size, + $base-font-family, + $fluent-line-height + ); +} + +@mixin disabled-widget($opacity: $base-disabled-opacity) { + @include disabled-widget-mixin($opacity); +} + +@mixin badge-settings() { + pointer-events: none; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 50%; + margin-top: math.div(-$fluent-invalid-badge-size, 2); + width: $fluent-invalid-badge-size; + height: $fluent-invalid-badge-size; + line-height: $fluent-invalid-badge-size + 1; + font-size: $fluent-base-font-size; +} + +@mixin dx-invalid-fluent-badge() { + @include badge-settings(); + + font-size: $fluent-base-font-size; + font-weight: 500; + background-color: $badge-invalid-bg; + color: $base-inverted-text-color; + content: '!'; + border-radius: 50%; +} + +@mixin dx-valid-fluent-badge() { + @include badge-settings(); + + font-size: $fluent-valid-badge-font-size; + font-weight: bold; + font-family: 'DXIcons', sans-serif; + color: $base-success; + content: '\f005'; + + @include validation-badge-animation(); +} + +@mixin dx-pending-indicator-fluent() { + @include dx-pending-indicator($fluent-invalid-badge-size); +} + +@mixin dx-dropdownlist-list-appearance() { + height: 100%; + + &.dx-popup-wrapper .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + border-top-width: 0; + border-bottom-width: 1px; + + &.dx-dropdowneditor-overlay-flipped { + border-top-width: 1px; + border-bottom-width: 0; + } + } + + .dx-popup-content { + height: 100%; + padding: 1px; + } + + .dx-list { + height: 100%; + min-height: $fluent-list-item-height; + } + + .dx-list-select-all { + margin-inline: $fluent-list-item-margin-inline; + padding: $fluent-list-item-vertical-padding + 2px 0 $fluent-list-item-vertical-padding - 2px; + } + + .dx-list-items { + margin-inline: $fluent-list-item-margin-inline; + } + + .dx-list-item, + .dx-empty-message { + border-top: 0; + + &:last-of-type { + border-bottom: none; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss new file mode 100644 index 000000000000..ca2a3c4ef064 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss @@ -0,0 +1,33 @@ +@use "sass:math"; +@use "../sizes" as *; +@use "./colors" as *; + +// adduse + +$fluent-line-height: null !default; + +$fluent-inline-borderedwidget-inner-size: + $fluent-base-inline-widget-height - + $fluent-base-border-width * 2 !default; + +$fluent-invalid-badge-size: $fluent-base-icon-size - 2px !default; +$fluent-invalid-badge-horizontal-padding: math.div($fluent-inline-borderedwidget-inner-size - $fluent-invalid-badge-size, 2) !default; +$fluent-invalid-badge-halfhorizontal-padding: math.div($fluent-invalid-badge-horizontal-padding, 2) !default; + +$fluent-valid-badge-font-size: $fluent-base-font-size + 6px !default; + +$fluent-base-dropdown-widgets-shadow: null !default; + +@if $size == "default" { + $fluent-line-height: 1.428571 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 8px 16px 0 $base-dropdown-shadow-color2 !default; +} + +@else if $size == "compact" { + $fluent-line-height: 1.3333 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 4px 8px 0 $base-dropdown-shadow-color2 !default; +} + +:root { + --dx-line-height: #{$fluent-line-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss new file mode 100644 index 000000000000..8a1179879885 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss @@ -0,0 +1,85 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../button/sizes" as *; +@use "../menuBase/sizes" as *; +@use "../menu/colors" as *; +@use "../menu/sizes" as *; +@use "../../base/contextMenu"; + +// adduse +@use "../overlay"; +@use "../menuBase" as *; + + +.dx-context-menu { + color: $menu-color; + + .dx-menu-items-container { + display: flex; + flex-direction: column; + padding: $fluent-context-menu-items-container-padding; + gap: $fluent-context-menu-items-container-gap; + } + + .dx-menu-item { + border-radius: $fluent-context-menu-item-border-radius; + + .dx-menu-item-content { + display: flex; + align-items: center; + padding: $fluent-menu-vertical-padding $fluent-context-menu-horizontal-padding; + gap: $fluent-context-menu-item-content-gap; + + .dx-menu-item-text { + padding-inline: $fluent-context-menu-item-text-padding-inline; + } + + .dx-menu-item-popout-container { + inset-inline-end: $fluent-context-menu-horizontal-padding; + width: $fluent-base-icon-size; + display: flex; + align-items: center; + + .dx-menu-item-popout { + display: flex; + align-items: center; + + @include dx-icon(spinright); + @include dx-icon-sizing($fluent-button-icon-size); + } + } + } + + .dx-menu-item-popout { + color: $base-icon-color; + } + + &.dx-state-disabled { + .dx-menu-item-popout { + color: $base-foreground-disabled; + } + } + + &.dx-menu-item-has-submenu > .dx-menu-item-content { + padding-inline-end: $fluent-menu-item-with-icon-horizontal-padding; + } + } + + &.dx-overlay-content.dx-state-focused { + box-shadow: none; + } + + .dx-submenu { + background-color: $menu-popup-bg; + border-radius: $fluent-context-menu-border-radius; + box-shadow: color.change($base-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($base-shadow-color, $alpha: 0.14) 0 8px 16px 0; + } + + .dx-menu-separator { + background-color: $menu-separator-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss new file mode 100644 index 000000000000..adc7edfb85ac --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss @@ -0,0 +1,21 @@ +@use "../sizes" as *; + +// adduse + +$fluent-context-menu-horizontal-padding: null !default; +$fluent-context-menu-border-radius: $base-border-radius !default; +$fluent-context-menu-items-container-padding: 4px !default; +$fluent-context-menu-items-container-gap: 2px !default; +$fluent-context-menu-item-border-radius: $base-border-radius !default; +$fluent-context-menu-item-content-gap: null !default; +$fluent-context-menu-item-text-padding-inline: 2px !default; + +@if $size == "default" { + $fluent-context-menu-horizontal-padding: 6px !default; + $fluent-context-menu-item-content-gap: 6px !default; +} + +@else if $size == "compact" { + $fluent-context-menu-horizontal-padding: 4px !default; + $fluent-context-menu-item-content-gap: 4px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss new file mode 100644 index 000000000000..f6f8526a41ed --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss @@ -0,0 +1,21 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$fluent-datagrid-grouppanel-item-bg: null !default; + +@if $mode == "light" { + @if $color == "blue"{ + $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + } + + @if $color == "saas" { + $fluent-datagrid-grouppanel-item-bg: color.change($base-hover-bg, $alpha: 0.4) !default; + } +} + +@if $mode == "dark" { + $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss new file mode 100644 index 000000000000..f83ab930c66b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss @@ -0,0 +1,125 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../gridBase" as *; +@use "../gridBase/colors" as *; +@use "../gridBase/sizes" as *; +@use "../../base/dataGrid" as baseGrid with ( + $datagrid-border: $datagrid-border, + $datagrid-border-color: $datagrid-border-color, + $datagrid-drag-header-border-color: $datagrid-drag-header-border-color, + $datagrid-row-error-bg: $datagrid-row-error-bg, + $datagrid-row-error-color: $datagrid-row-error-color, + $datagrid-base-color: $datagrid-base-color, + $datagrid-base-background-color: $datagrid-base-background-color, + $datagrid-focused-border-color: $datagrid-focused-border-color, + $header-filter-color: $header-filter-color, + $header-filter-color-empty: $header-filter-color-empty, + $base-focus-color: $base-focus-color, + $datagrid-text-stub-background-image-path: $datagrid-text-stub-background-image-path, +); +@use 'layout/cell'; +@include grid-base(datagrid); + +.dx-datagrid-group-panel { + font-size: $fluent-base-font-size; + touch-action: pinch-zoom; + + .dx-group-panel-message { + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + padding: $fluent-datagrid-cell-padding 0; + border-top: $fluent-grid-base-border-hidden; + border-bottom: $fluent-grid-base-border-hidden; + line-height: $fluent-grid-base-group-panel-message-line-height; + } + + .dx-group-panel-item { + margin-right: $fluent-grid-base-grouppanel-item-margin; + color: $datagrid-columnchooser-item-color; + font-weight: $fluent-datagrid-grouppanel-item-font-weight; + font-size: $fluent-grid-base-header-cell-font-size; + line-height: $fluent-grid-base-header-line-height; + background: $fluent-datagrid-grouppanel-item-bg; + border-radius: $area-field-border-radius; + padding: $area-field-top-bottom-padding 10px; + border-width: 1px; + border-style: solid; + border-color: $base-border-color-disabled; + } + + .dx-block-separator { + margin-right: $fluent-grid-base-grouppanel-item-margin; + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + background-color: $base-accent; + } + + .dx-sort { + color: $header-filter-color-empty; + } +} + +.dx-datagrid-rowsview { + .dx-datagrid-group-row-container { + padding-left: $fluent-grid-base-cell-horizontal-padding; + padding-right: $fluent-grid-base-cell-horizontal-padding; + text-overflow: ellipsis; + display: inline-block; + position: sticky; + background-color: inherit; // T1303478 + max-width: 100%; + overflow: clip; + } + + .dx-row.dx-group-row:first-child { + border-top: none; + } + + + .dx-row.dx-group-row { + &:not(.dx-row-focused) { + color: $datagrid-group-row-color; + background-color: $datagrid-group-row-bg; + } + + font-size: $fluent-grid-base-header-cell-font-size; + font-weight: 500; + } +} + +.dx-datagrid-group-opened { + @include dx-icon(chevrondown); + @include dx-icon-sizing($fluent-base-icon-size); + + color: $datagrid-chevron-icon-color; +} + +.dx-datagrid-group-closed { + @include dx-icon(chevronright); + @include dx-icon-sizing($fluent-base-icon-size); + + color: $datagrid-chevron-icon-color; +} + +.dx-row.dx-datagrid-group-footer { + &.dx-column-lines { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + +} + + +.dx-rtl { + .dx-datagrid-group-panel { + .dx-group-panel-item, + .dx-block-separator { + margin-left: $fluent-grid-base-grouppanel-item-margin; + } + } +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss new file mode 100644 index 000000000000..97f30a62ec83 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss @@ -0,0 +1,22 @@ +@use "../sizes" as *; +@use '../../base/dataGrid/variables' as *; + +// adduse + +$fluent-datagrid-cell-padding: 7px !default; +$fluent-datagrid-grouppanel-item-font-weight: 400 !default; + +$area-field-border-radius: null !default; +$area-field-top-bottom-padding: null !default; + +@if $size == "default" { + $area-field-border-radius: 6px !default; + $area-field-top-bottom-padding: 5px !default; +} + +@else if $size == "compact" { + $area-field-border-radius: 4px !default; + $area-field-top-bottom-padding: 2px !default; +} + +$datagrid-cell-padding: $fluent-datagrid-cell-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss new file mode 100644 index 000000000000..d7fea79bda17 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss @@ -0,0 +1,104 @@ +/* stylelint-disable no-duplicate-selectors */ +@use "../colors" as *; +@use "../../colors" as *; +@use "../sizes" as *; +@use "../../sizes" as *; +@use "../../gridBase/colors" as *; +@use "../../gridBase/sizes" as *; +@use "../../gridBase/variables" as *; + +// #region overflow + +// (0,5,0) +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right { + overflow: initial; + overflow-x: clip; +} + +// #endregion + +// #region border + +// (0,2,1) +.dx-row.dx-datagrid-group-footer > td { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + border-left-width: 0; + border-right-width: 0; +} + +// (0,3,1) +.dx-datagrid-rowsview .dx-row.dx-group-row td { + border-top-color: $fluent-grid-base-border-color; + border-bottom-color: $fluent-grid-base-border-color; +} + +// (0,3,1) +.dx-datagrid-sticky-columns .dx-row.dx-datagrid-group-footer > td { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; +} + +// (0,3,1) - (0,4,1) +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-edit-row td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-edit-row td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-edit-row td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-datagrid-group-footer td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-row.dx-group-row td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-master-detail-row td, +.dx-datagrid-sticky-columns .dx-edit-row + .dx-edit-row td { + border-top: none; +} + +// #endregion + +// #region padding + +// (0,4,1) +.dx-datagrid-sticky-columns .dx-row.dx-group-row:first-child td { + padding-top: $fluent-grid-base-cell-vertical-padding; +} + +// (0,5,0) +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right { + padding-left: 0; + padding-right: 0; +} + +// #endregion + +// #region background + +// (0,2,1) +.dx-row.dx-datagrid-group-footer > td { + background-color: $datagrid-summary-bg; +} + +// (0,4,1) T1303478 +.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column-right { + background-color: inherit; +} + +// (0,5,0) +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left, +.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right { + background-color: inherit; +} + +// #endregion diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss new file mode 100644 index 000000000000..40cbb6dd23e2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; +@use "../colors" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss new file mode 100644 index 000000000000..9e127ba14c6e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss @@ -0,0 +1,144 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../dropDownEditor" as *; +@use "../../base/dropDownEditor/mixins" as *; +@use "../textEditor" as *; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../calendar/sizes" as *; +@use "../../base/dateBox"; +@use "mixins" as *; + +// adduse +@use "../timeView"; +@use "../dateView"; + +.dx-datebox-wrapper { + .dx-popup-title { + min-height: 10px; + border-bottom: none; + background: none; + } + + .dx-item { + border: none; + } + + .dx-popup-bottom { + .dx-button { + width: auto; + } + } +} + +.dx-datebox-datetime-time-side { + justify-content: flex-end; +} + +.dx-datebox-wrapper-rollers.dx-datebox-wrapper-time .dx-popup-content { + margin: $fluent-datebox-popup-content-margin; +} + +.dx-datebox-wrapper-list { + .dx-overlay-content { + border-top: none; + } +} + +.dx-device-phone .dx-datebox-wrapper-rollers { + .dx-popup-content { + padding: 10px; + } +} + +.dx-datebox-time { + @include dx-dropdowneditor-button-icon-styling(clock); +} + +.dx-datebox-date { + @include dx-dropdowneditor-button-icon-styling(event); +} + +.dx-datebox-datetime { + @include dx-dropdowneditor-button-icon-styling(eventall); +} + +.dx-datebox-wrapper-calendar { + .dx-popup-content { + padding: 0; + } + + .dx-calendar { + border: none; + margin: $fluent-datebox-overlay-item-margin; + } + + .dx-datebox-container-cell { + margin-right: $fluent-datebox-overlay-item-margin; + margin-bottom: $fluent-datebox-overlay-item-margin; + } +} + +.dx-datebox-wrapper-calendar.dx-datebox-wrapper-datetime { + .dx-timeview { + padding: $fluent-datebox-overlay-item-margin; + } + + .dx-datebox-container-cell { + margin-top: -1px; + margin-right: $fluent-datebox-overlay-item-margin; + } +} + +@media (max-width: 320px) { + .dx-datebox-wrapper-calendar .dx-calendar { + margin: $fluent-datebox-overlay-item-margin-adaptive; + } +} + +.dx-rtl { + .dx-datebox-wrapper { + .dx-popup-bottom { + .dx-toolbar-button + .dx-toolbar-button { + .dx-button { + margin-right: 5px; + margin-left: 0; + } + } + } + } +} + +.dx-datebox-wrapper-list .dx-popup-content { + padding: 0; +} + +.dx-datebox { + input[type="date"] { + line-height: normal; + } + + &, + &:not(.dx-texteditor-empty) { + &.dx-auto-width { + @include invalid-dropdowneditor-input-padding( + $fluent-dropdowneditor-invalid-badge-size, + $fluent-base-standard-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-horizontal-padding + ); + } + } +} + +.dx-texteditor { + &.dx-datebox-native { + .dx-texteditor-input { + padding-right: $texteditor-spin-button-horizontal-padding; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss new file mode 100644 index 000000000000..c7f0752039b9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss @@ -0,0 +1,17 @@ +@use "../../base/icon_fonts" as *; +@use "../dropDownEditor" as *; +@use "../textEditor" as *; + +@mixin dx-dropdowneditor-button-icon-styling($icon) { + .dx-dropdowneditor-icon { + @include dx-icon($icon); + @include dx-dropdowneditor-button-icon(); + } + + &.dx-dropdowneditor-active { + .dx-dropdowneditor-icon { + @include dx-icon($icon); + @include dx-dropdowneditor-button-icon(); + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss new file mode 100644 index 000000000000..9190ee007c1c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss @@ -0,0 +1,7 @@ +@use "../sizes" as *; + +// adduse + +$fluent-datebox-overlay-item-margin: 16px !default; +$fluent-datebox-overlay-item-margin-adaptive: 18px !default; +$fluent-datebox-popup-content-margin: 0 34px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss new file mode 100644 index 000000000000..0779caa6ee0e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss @@ -0,0 +1 @@ +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss new file mode 100644 index 000000000000..09f3fe4eab0a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss @@ -0,0 +1,115 @@ +@use "sass:math"; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../dateBox/mixins" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "colors" as *; +@use "../colors" as *; +@use "../../base/dateRangeBox"; +@use "../../base/icon_fonts" as *; +@use "../textEditor" as *; + +// adduse + +$fluent-editor-custom-button-margin: 6px; + +.dx-daterangebox { + @include dx-dropdowneditor-button-icon-styling(daterangepicker); + + &.dx-editor-outlined, + &.dx-editor-filled { + &::before { + content: none; + } + } + + .dx-editor-outlined, + .dx-editor-filled { + &.dx-datebox { + &::before { + border-radius: 0; + width: calc(100% - 2 * $fluent-daterangebox-active-bar-horizontal-margin); + margin: 0 $fluent-daterangebox-active-bar-horizontal-margin; + } + } + } + + &.dx-editor-underlined, + &.dx-editor-filled { + &::before { + border-bottom-width: 1px; + transition: none; + } + + &.dx-state-hover { + &::after { + border-bottom-width: 1px; + transition: none; + } + } + + &.dx-state-focused { + &.dx-invalid { + &::before { + border-bottom-width: 1px; + transition: none; + } + } + } + } + + &.dx-editor-underlined { + .dx-daterangebox-separator { + padding-right: $fluent-filled-texteditor-input-horizontal-padding; + } + } + + &.dx-texteditor { + > .dx-texteditor-buttons-container { + > .dx-button, + > .dx-clear-button-area { + margin-inline-start: $fluent-editor-custom-button-margin; + margin-inline-end: $fluent-editor-custom-button-margin; + + &:first-child { + margin-inline-start: 0; + } + + &:last-child { + margin-inline-end: $fluent-editor-custom-button-margin; + } + } + + > .dx-dropdowneditor-button:last-child { + margin-inline-end: $texteditor-spin-button-horizontal-padding; + } + + > .dx-clear-button-area:last-child, + > .dx-clear-button-area + div:empty:last-child { + margin-inline-end: $fluent-filled-texteditor-input-button-horizontal-padding; + } + } + } + + .dx-datebox { + &.dx-end-datebox { + &.dx-texteditor { + &.dx-invalid { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size; + } + } + } + } + } +} + +.dx-daterangebox-separator { + padding-left: $fluent-filled-texteditor-input-horizontal-padding; + color: $texteditor-disabled-text-color; + + .dx-icon { + @include dx-icon-sizing($fluent-base-icon-size); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss new file mode 100644 index 000000000000..492b886d1e57 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss @@ -0,0 +1,13 @@ +@use "../sizes" as *; + +// adduse + +$fluent-daterangebox-active-bar-horizontal-margin: null !default; + +@if $size == "default" { + $fluent-daterangebox-active-bar-horizontal-margin: 12px !default; +} + +@else if $size == "compact" { + $fluent-daterangebox-active-bar-horizontal-margin: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss new file mode 100644 index 000000000000..6c463a7d674c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$dateview-shadow-up: 0deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; +$dateview-shadow-down: 180deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; +$dateview-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss new file mode 100644 index 000000000000..e3e6bf2a0023 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss @@ -0,0 +1,142 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/dateView"; + +// adduse +@use "../scrollable"; + +$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2); + +.dx-dateview-rollers { + width: auto; + text-align: center; + display: block; +} + +.dx-dateviewroller-current { + .dx-dateview-item { + transition: font-size 0.2s ease-out; + } +} + +.dx-dateviewroller { + min-width: 4em; + text-align: center; + display: inline-block; + + .dx-button { + display: none; + } + + .dx-scrollable-content::before, + .dx-scrollable-content::after { + content: ""; + height: $fluent-dateview-roller-padding; + display: block; + } + + .dx-scrollable-container { + height: $fluent-dateview-roller-height; + } + + &.dx-dateviewroller-year { + min-width: 4.85em; + } + + &.dx-state-active { + .dx-button { + display: none; + } + } +} + +.dx-dateviewroller-month { + min-width: 12em; +} + +.dx-dateviewroller-hours { + &::after { + content: ":"; + font-size: 2.2em; + position: absolute; + inset-inline-end: -9%; + font-weight: bold; + top: 37%; + color: $dateview-color; + } + + .dx-dateview-item-selected-frame { + padding-left: 20%; + } +} + +.dx-dateviewroller-minutes { + .dx-dateview-item-selected-frame { + width: 80%; + } +} + +.dx-dateview-item { + height: $fluent-dateview-roller-item-height; + line-height: $fluent-dateview-roller-item-height; + text-align: center; + font-size: 1.3em; + color: $dateview-color; +} + +.dx-dateview-item-selected { + font-size: 1.8em; + color: $base-accent; +} + +.dx-dateview-item-selected-frame { + position: absolute; + top: $fluent-dateview-roller-padding; + width: 100%; + + &::before, + &::after { + backface-visibility: hidden; + content: ""; + display: block; + width: 100%; + position: absolute; + height: $fluent-dateview-roller-padding; + } + + &::before { + top: -$fluent-dateview-roller-padding; + + @include gradient-linear($dateview-shadow-up); + } + + &::after { + top: $fluent-dateview-roller-item-height; + + @include gradient-linear($dateview-shadow-down); + } +} + +.dx-device-tablet, +.dx-device-phone { + .dx-dateview-rollers { + @include flex-container(row, nowrap); + } + + .dx-dateviewroller-month { + min-width: 4em; + } + + .dx-dateview-item { + font-size: 1.1em; + } + + .dx-dateview-item-selected { + font-size: 1.4em; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss new file mode 100644 index 000000000000..909a1dc86e73 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dateview-roller-height: 182px !default; +$fluent-dateview-roller-item-height: 40px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss new file mode 100644 index 000000000000..54536ba04aab --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -0,0 +1,31 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../loadIndicator/colors" as *; + +// adduse + +$diagram-border-color: $base-border-color !default; +$diagram-toolbar-border-color: $base-border-color !default; +$diagram-normal-format-active-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; +$diagram-default-format-active-bg: color.adjust($button-default-bg, $lightness: -10%, $space: hsl) !default; +$diagram-danger-format-active-bg: color.adjust($button-danger-bg, $lightness: -10%, $space: hsl) !default; +$diagram-success-format-active-bg: color.adjust($button-success-bg, $lightness: -10%, $space: hsl) !default; +$diagram-image-icon-base-color: null !default; +$diagram-image-icon-accent-color: null !default; +$diagram-toolbox-shape-text-opacity: null !default; + + +@if $mode == "light" { + $diagram-image-icon-base-color: $base-icon-color !default; + $diagram-image-icon-accent-color: $load-indicator-segment-bg-color !default; + $diagram-toolbox-shape-text-opacity: 0.25 !default; +} + +@if $mode == "dark" { + $diagram-image-icon-base-color: $base-border-color !default; + $diagram-image-icon-accent-color: $base-accent !default; + $diagram-toolbox-shape-text-opacity: 0.5 !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss new file mode 100644 index 000000000000..0aae29b41745 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -0,0 +1,480 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/diagram"; +@use "../../base/diagram/mixins" as *; +@use "../button/colors" as *; +@use "../overlay/colors" as *; +@use "../accordion/colors" as *; +@use "../popup/colors" as *; +@use "../speedDialAction/sizes" as *; +@use "../fieldset/sizes" as *; +@use "../fieldset/sizes" as *; +@use "../menu/colors" as *; + +// adduse + +$fluent-diagram-toolbar-icon-size: $fluent-base-icon-size; +$diagram-toolbar-colorbutton-border-width: 3px; + +$diagram-toolbox-title-size: 18px; + + +.dx-diagram { + border-color: $diagram-border-color; + + // stylelint-disable selector-class-pattern + .dxdi-control .dxdi-canvas { + background-color: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl); + + .selection-mark, + .item-selection-rect, + .item-multi-selection-rect, + .items-selection-rect, + .connector-side-mark, + .connector-point-mark, + .connector-selection, + .connector-multi-selection, + .extension-line path { + stroke: $button-default-bg; + } + + .connector-side-mark, + .extension-line text { + fill: $button-default-bg; + } + + .container-target, + .connection-target, + .connection-mark:not(.selector), + .connection-point:not(.selector) { + stroke: $button-success-bg; + } + + .connection-mark:not(.selector), + .connection-point:not(.selector) { + &.active { + fill: $button-success-bg; + } + } + + .geometry-mark { + stroke: $button-danger-bg; + } + + .dxdi-main .dxdi-image { + .dxdi-spinner { + path { + stroke: $diagram-image-icon-accent-color; + stroke-opacity: 1; + } + + ellipse { + stroke: $diagram-image-icon-base-color; + stroke-opacity: 0.5; + } + } + + .dxdi-user .dxdi-background { + fill: $diagram-image-icon-base-color; + opacity: 0.5; + } + + .dxdi-warning { + ellipse { + fill: $base-danger; + } + } + } + } + + .dxdi-control:not(.focused) .dxdi-canvas { + .selection-mark, + .geometry-mark { + stroke: #666; + } + + .item-selection-rect, + .items-selection-rect { + fill: transparent; + stroke: #666; + } + + .items-selection-rect { + fill: rgba(144, 144, 144, 0.02); + } + + .item-multi-selection-rect { + fill: rgba(144, 144, 144, 0.02); + stroke: #666; + } + + .connector-selection, + .connector-multi-selection { + stroke: #666; + } + + .connector-point-mark, + .connector-side-mark { + stroke: #666; + } + + .connector-side-mark { + fill: #666; + } + } + + .dxdi-text-input-container.connector-text .dxdi-text-input { + border-color: $button-default-bg; + } + + // stylelint-enable selector-class-pattern + + .dx-diagram-toolbar-wrapper { + border-bottom: 1px solid; + border-bottom-color: $diagram-toolbar-border-color; + } + + + &.dx-diagram-fullscreen { + background-color: $base-bg; + } +} + +.dx-diagram-toolbox-panel, +.dx-diagram-properties-panel { + background: $overlay-content-bg; +} + +.dx-diagram-floating-toolbar-container { + background: $overlay-content-bg; + box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + border-radius: $popup-border-radius; + padding: 4px; + + .dx-toolbar .dx-toolbar-items-container { + height: $diagram-floating-toolbar-items-height; + + .dx-texteditor { + .dx-texteditor-input, + .dx-placeholder::before { + color: inherit; + padding: $diagram-floating-toolbar-editor-padding; + } + + .dx-button { + width: auto; + height: auto; + min-width: 24px; + min-height: 24px; + margin: 2px; + + .dx-button-content { + padding: $diagram-floating-toolbar-editor-button-padding; + } + } + } + } + + &.dx-diagram-properties-panel-toolbar-container { + &, + .dx-toolbar, + .dx-toolbar-items-container, + .dx-toolbar-item, + .dx-button { + width: $fluent-main-fa-button-size; + height: $fluent-main-fa-button-size; + + .dx-button-content { + padding-top: 0; + padding-bottom: 0; + line-height: $fluent-main-fa-button-size; + } + } + } + + .dx-toolbar-item { + padding: 0 4px 0 0; + } +} + +.dx-diagram-toolbox-popup { + & > .dx-overlay-content { + box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + } + + .dx-popup-title { + margin-bottom: 0; + + &.dx-toolbar { + font-size: 0.8em; + min-height: $diagram-toolbox-title-size; + + .dx-toolbar-items-container { + height: $diagram-toolbox-title-size; + } + } + + .dx-button.dx-button-has-icon:not(.dx-button-has-text), + .dx-button-content { + width: $diagram-toolbox-title-size; + height: $diagram-toolbox-title-size; + } + } + + .dx-popup-content { + .dx-diagram-toolbox-input-container, + .dx-diagram-toolbox-panel, + .dx-diagram-toolbox-panel .dx-accordion { + width: $diagram-toolbox-width; + } + } + + .dx-diagram-toolbox-input-container { + border-bottom: 1px solid transparent; + } + + .dx-diagram-toolbox-input { + margin: $diagram-toolbox-input-margin; + + &.dx-editor-outlined { + &:not(.dx-state-focused) { + box-shadow: none; + } + + .dx-texteditor-buttons-container:last-child > .dx-button:last-child { + margin-right: 0; + } + } + + .dx-button { + .dx-button-content { + padding: $diagram-toolbox-input-image-padding; + } + + .dx-icon { + font-size: $diagram-toolbox-input-image-size; + } + } + } + + .dx-popup-title .dx-closebutton { + width: $diagram-toolbox-title-size; + height: $diagram-toolbox-title-size; + margin: 1px 0 0; + } + + .dx-popup-title .dx-closebutton .dx-icon { + width: 14px; + height: 14px; + padding: 2px; + font-size: 12px; + line-height: 12px; + background-position: 2px 2px; + background-size: 12px 12px; + } + + &.dx-diagram-mobile-popup { + .dx-popup-content { + padding-top: $diagram-toolbox-mobile-padding; + + .dx-diagram-toolbox-input-container { + border-top: 1px solid transparent; + } + } + } +} + +.dx-diagram-toolbox-panel { + .dx-accordion { + margin: 0; + + .dx-accordion-item { + border-left: none; + border-right: none; + border-bottom: 1px solid transparent; + border-top: none; + box-shadow: none; + } + + .dx-accordion-item-opened { + margin: 0; + } + + .dx-item-content.dx-accordion-item-title { + min-height: 32px; + } + + .dx-item-content.dx-accordion-item-body { + padding: $diagram-toolbox-accordion-v-padding $diagram-toolbox-h-padding; + } + } + + .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern + opacity: $diagram-toolbox-shape-text-opacity; + } +} + +.dx-diagram-properties-popup { + .dx-multiview-item, + &.dx-diagram-properties-popup-notabs .dx-popup-content { + padding: $diagram-properties-panel-padding; + } + + .dx-diagram-properties-panel-group-title { + text-transform: uppercase; + padding: $diagram-properties-panel-spacing; + } + + .dx-diagram-properties-panel-group-toolbar { + padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing; + + .dx-toolbar-item { + margin-bottom: math.div($diagram-properties-panel-spacing, 2); + + .dx-button { + height: auto; + } + + &.dx-diagram-lg-icon-item .dx-diagram-i { + background-size: $diagram-properties-layout-icon-size $diagram-properties-layout-icon-size; + width: $diagram-properties-layout-icon-size; + height: $diagram-properties-layout-icon-size; + } + } + } + + .dx-diagram-properties-panel-group-toolbar:first-child { + padding-top: $diagram-properties-panel-spacing; + } + + &.dx-diagram-mobile-popup { + .dx-popup-title { + padding: 8px 8px 0 0; + } + + .dx-tabpanel { + .dx-tab-selected::before { + top: 0; + bottom: initial; + } + } + } +} + +.dx-diagram-toolbar { + .dx-format-active:not(.dx-color-format):not(.dx-background-format) { + background-color: $diagram-normal-format-active-bg; + + &.dx-button-success { + background-color: $diagram-success-format-active-bg; + } + + &.dx-button-default { + background-color: $diagram-default-format-active-bg; + } + + &.dx-button-danger { + background-color: $diagram-danger-format-active-bg; + } + } + + .dx-texteditor.dx-editor-filled, + .dx-dropdowneditor.dx-editor-filled { + background-color: transparent; + + &::after { + border-bottom-color: transparent; + } + } + + .dx-diagram-toolbar-separator { + height: 50%; + border-left-color: $diagram-toolbar-border-color; + } + + .dx-diagram-toolbar-menu-separator { + border-top-color: $diagram-toolbar-border-color; + } + + .dx-diagram-toolbar-text { + padding: $fluent-field-value-top-padding 0 $fluent-field-value-bottom-padding $fluent-field-labelvalue-spacing; + } + + .dx-diagram-lg-edit-item .dx-texteditor { + width: $diagram-large-editor-width; + } + + .dx-diagram-md-edit-item .dx-texteditor { + width: $diagram-medium-editor-width; + } + + .dx-diagram-sm-edit-item .dx-texteditor { + width: $diagram-small-editor-width; + } + + .dx-diagram-color-edit-item .dx-dropdowneditor-field-before-template-wrapper { + .dx-diagram-i, + .dx-icon { + border-bottom-width: $diagram-toolbar-colorbutton-border-width; + border-bottom-style: solid; + } + } +} + +.dx-diagram-toolbar, +.dx-dropdownmenu-popup { + .dx-diagram-image-dropdown-item, + .dx-diagram-color-edit-item { + .dx-dropdowneditor-field-before-template-wrapper { + .dx-diagram-i, + .dx-icon { + margin-left: 12px; + margin-right: 12px; + } + + .dx-icon { + font-size: $fluent-diagram-toolbar-icon-size; + color: $base-text-color; + } + } + } +} + +.dx-diagram-contextmenu.dx-context-menu { + .dx-menu-item .dx-menu-item-content .dx-menu-item-popout-container { + right: 0; + } + + .dx-menu-no-icons > .dx-menu-item-wrapper > .dx-menu-item > .dx-menu-item-content .dx-menu-item-text { + padding-left: 4px; + } +} + +.dx-diagram-touchbar { + .dx-menu-item .dx-menu-item-content { + padding: $diagram-touchbar-item-padding; + } + + .dx-menu-separator { + width: 1px; + height: $fluent-diagram-toolbar-icon-size + $diagram-touchbar-item-padding + $diagram-touchbar-item-padding + 2; + margin: 0; + } +} + +@include diagram-action-icons-mixin($base-text-color, $base-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); + +.dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag { + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $popup-title-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); + + line-height: $diagram-toolbox-title-size; + background-size: $diagram-toolbox-title-size $diagram-toolbox-title-size; +} + +.dx-diagram-i-button-properties-panel-open { + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $button-default-color, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss new file mode 100644 index 000000000000..71d596b7f77c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss @@ -0,0 +1,74 @@ +@use "../sizes" as *; + +// adduse + +$diagram-toolbox-width: null !default; +$diagram-toolbox-h-padding: null !default; +$diagram-toolbox-accordion-v-padding: null !default; +$diagram-toolbox-input-h-padding: null !default; +$diagram-toolbox-input-v-padding: null !default; +$diagram-toolbox-input-image-size: null !default; +$diagram-toolbox-input-image-padding: null !default; +$diagram-toolbox-mobile-padding: null !default; +$diagram-properties-panel-padding: null !default; +$diagram-properties-panel-spacing: null !default; +$diagram-properties-layout-icon-size: null !default; +$diagram-touchbar-item-padding: null !default; +$diagram-floating-toolbar-items-height: null !default; +$diagram-floating-toolbar-editor-padding: null !default; +$diagram-floating-toolbar-editor-button-padding: null !default; +$diagram-small-editor-width: null !default; +$diagram-medium-editor-width: null !default; +$diagram-large-editor-width: null !default; + +$diagram-toolbox-input-margin: 2px !default; + +@if $size == "default" { + $diagram-toolbox-width: 156px !default; + $diagram-toolbox-h-padding: 12px !default; + $diagram-toolbox-accordion-v-padding: 8px !default; + $diagram-toolbox-input-h-padding: 9px !default; + $diagram-toolbox-input-v-padding: 12px !default; + $diagram-toolbox-input-image-size: 18px !default; + $diagram-toolbox-input-image-padding: 6px 4px !default; + $diagram-toolbox-mobile-padding: 68px !default; + + $diagram-properties-panel-padding: 0 !default; + $diagram-properties-panel-spacing: 16px !default; + $diagram-properties-layout-icon-size: 64px !default; + + $diagram-touchbar-item-padding: 10px !default; + + $diagram-floating-toolbar-items-height: 36px !default; + $diagram-floating-toolbar-editor-padding: 8px 6px !default; + $diagram-floating-toolbar-editor-button-padding: 4px !default; + + $diagram-small-editor-width: 100px !default; + $diagram-medium-editor-width: 180px !default; + $diagram-large-editor-width: 280px !default; +} + +@else if $size == "compact" { + $diagram-toolbox-width: 130px !default; + $diagram-toolbox-h-padding: 10px !default; + $diagram-toolbox-accordion-v-padding: 6px !default; + $diagram-toolbox-input-h-padding: 8px !default; + $diagram-toolbox-input-v-padding: 8px !default; + $diagram-toolbox-input-image-size: 14px !default; + $diagram-toolbox-input-image-padding: 3px 4px !default; + $diagram-toolbox-mobile-padding: 58px !default; + + $diagram-properties-panel-padding: 6px !default; + $diagram-properties-panel-spacing: 8px !default; + $diagram-properties-layout-icon-size: 48px !default; + + $diagram-touchbar-item-padding: 7px !default; + + $diagram-floating-toolbar-items-height: 28px !default; + $diagram-floating-toolbar-editor-padding: 6px 4px !default; + $diagram-floating-toolbar-editor-button-padding: 2px !default; + + $diagram-small-editor-width: 80px !default; + $diagram-medium-editor-width: 120px !default; + $diagram-large-editor-width: 220px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss new file mode 100644 index 000000000000..45572dedd676 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Shader background color +* $type color +*/ +$drawer-shader-background-color: color.change($base-shadow-color, $alpha: 0.5) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss new file mode 100644 index 000000000000..eed4027371d8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/drawer"; + +// adduse +.dx-drawer-shader { + background-color: $drawer-shader-background-color; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss new file mode 100644 index 000000000000..c26ff37b2271 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; + +// adduse +@use "../dropDownEditor"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss new file mode 100644 index 000000000000..004ba591a74d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss @@ -0,0 +1,46 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../button/mixins" as *; +@use "../button/sizes" as *; +@use "../button/colors" as *; +@use "../common/mixins" as *; +@use "../../base/dropDownButton"; +@use "../../base/dropDownButton/mixins" as *; + +// adduse + +@include dx-dropdownbutton( + $fluent-dropdownbutton-icon-spindown-size, + $fluent-dropdownbutton-action-horizontal-padding, +); + +.dx-dropdownbutton-popup-wrapper { + @include dx-dropdownlist-list-appearance(); +} + +.dx-dropdownbutton { + &:not(.dx-dropdownbutton-has-arrow) { + .dx-button-has-icon:not(.dx-button-has-text) { + @include dx-button-onlyicon-sizing(); + } + } + + &.dx-state-disabled { + opacity: 1; + } +} + +.dx-dropdownbutton-action { + &.dx-button-has-icon, + &.dx-button-has-text { + .dx-icon-spindown.dx-icon-right { + width: $fluent-dropdownbutton-icon-spindown-right-size; + height: $fluent-dropdownbutton-icon-spindown-right-size; + } + } +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss new file mode 100644 index 000000000000..3f1f76b37cd8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dropdownbutton-action-horizontal-padding: null !default; +$fluent-dropdownbutton-icon-spindown-size: null !default; +$fluent-dropdownbutton-icon-spindown-right-size: null !default; + +@if $size == "default" { + $fluent-dropdownbutton-action-horizontal-padding: 12px !default; + $fluent-dropdownbutton-icon-spindown-size: 24px; + $fluent-dropdownbutton-icon-spindown-right-size: 16px !default; +} + +@else if $size == "compact" { + $fluent-dropdownbutton-action-horizontal-padding: 8px !default; + $fluent-dropdownbutton-icon-spindown-size: 18px; + $fluent-dropdownbutton-icon-spindown-right-size: 12px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss new file mode 100644 index 000000000000..3b178aac2ed1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss @@ -0,0 +1,15 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../textEditor/colors" as *; + +// adduse + +$dropdowneditor-icon-color: $base-spin-icon-color !default; + +/** +* $name 90. Active arrow icon color +* $type color +*/ +$dropdowneditor-icon-active-color: $base-spin-icon-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss new file mode 100644 index 000000000000..25ec11e0e515 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss @@ -0,0 +1,136 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; +@use "../textEditor/sizes" as *; +@use "../button/colors" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/dropDownEditor"; +@use "../../base/dropDownEditor/mixins" as *; + +// adduse + + +$fluent-dropdowneditor-container-button-size: $fluent-base-icon-size; + +$fluent-dropdowneditor-invalid-badge-offset: + $fluent-dropdowneditor-container-button-size + + $fluent-invalid-badge-halfhorizontal-padding; + +$fluent-dropdowneditor-invalid-badge-with-clear-offset: + $fluent-dropdowneditor-container-button-size * 2 + + $fluent-invalid-badge-halfhorizontal-padding; + +$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding; + +@mixin dx-dropdowneditor-button-icon() { + width: $fluent-dropdowneditor-container-button-size; + height: 100%; + + @include dx-icon-font-centered-sizing($fluent-dropdowneditor-container-button-size); +} + +.dx-dropdowneditor-button { + width: $fluent-dropdowneditor-container-button-size; + min-width: $fluent-dropdowneditor-container-button-size; + + .dx-state-readonly & { + .dx-dropdowneditor-icon { + opacity: 1; + } + } +} + +.dx-dropdowneditor-icon { + color: $dropdowneditor-icon-color; + + @include dx-icon(spindown); + @include dx-dropdowneditor-button-icon(); +} + +.dx-dropdowneditor-input-wrapper { + .dx-texteditor { + &::before, + &::after { + content: none; + } + + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active &.dx-state-disabled, + &.dx-state-readonly, + &.dx-state-readonly.dx-state-hover, + & { + background-color: transparent; + box-shadow: none; + + &.dx-texteditor-with-floating-label, + &.dx-texteditor-with-label { + .dx-texteditor-label { + .dx-label-before, + .dx-label, + .dx-label-after { + background-color: transparent; + box-shadow: none; + } + } + } + } + } +} + +.dx-invalid, +.dx-valid, +.dx-validation-pending { + @include invalid-dropdowneditor-input-padding( + $fluent-dropdowneditor-invalid-badge-size, + $fluent-base-standard-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-horizontal-padding + ); +} + +.dx-dropdowneditor.dx-dropdowneditor-active, +.dx-dropdowneditor-button.dx-state-active { + .dx-dropdowneditor-icon { + color: $dropdowneditor-icon-active-color; + opacity: 1; + + @include dx-icon(spinup); + @include dx-dropdowneditor-button-icon(); + } +} + +.dx-invalid.dx-dropdowneditor, +.dx-valid.dx-dropdowneditor { + .dx-texteditor-buttons-container { + &::after { + inset-inline-end: $fluent-dropdowneditor-invalid-badge-offset; + } + } + + &.dx-show-clear-button:not(.dx-texteditor-empty) { + .dx-texteditor-buttons-container { + &::after { + inset-inline-end: $fluent-dropdowneditor-invalid-badge-with-clear-offset; + } + } + } +} + +.dx-dropdowneditor-overlay { + &.dx-popup-wrapper { + .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + overflow: hidden; + } + } + + .dx-list-group-header, + .dx-list-item-content, + .dx-list-select-all-label { + font-size: $fluent-dropdowneditor-list-font-size; + line-height: $fluent-dropdowneditor-list-line-height; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss new file mode 100644 index 000000000000..6de961b10942 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss @@ -0,0 +1,17 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dropdowneditor-list-font-size: null !default; +$fluent-dropdowneditor-list-line-height: null !default; + + +@if $size == "default" { + $fluent-dropdowneditor-list-font-size: 14px !default; + $fluent-dropdowneditor-list-line-height: 20px !default; +} + +@else if $size == "compact" { + $fluent-dropdowneditor-list-font-size: 13px !default; + $fluent-dropdowneditor-list-line-height: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss new file mode 100644 index 000000000000..94e41665cc27 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss @@ -0,0 +1,15 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/dropDownList"; + +// adduse +@use "../dropDownEditor"; + + +.dx-dropdownlist-popup-wrapper { + @include dx-dropdownlist-list-appearance(); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss new file mode 100644 index 000000000000..b762c89e5c5e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss @@ -0,0 +1,20 @@ +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../../base/dropDownMenu"; + +// adduse + +.dx-dropdownmenu-popup-wrapper { + .dx-toolbar-menu-section { + display: flex; + flex-direction: column; + row-gap: $fluent-dropdownmenu-section-row-gap; + margin-inline: $fluent-dropdownmenu-section-horizontal-margin; + } + + .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss new file mode 100644 index 000000000000..e3b9ae305c11 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-dropdownmenu-section-horizontal-margin: 4px !default; +$fluent-dropdownmenu-section-row-gap: 2px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss new file mode 100644 index 000000000000..0868bb4f0078 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss @@ -0,0 +1,12 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Label text color +* $type color +*/ +$fieldset-field-label-color: $base-text-color !default; +$fieldset-field-value-invalid-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss new file mode 100644 index 000000000000..260d5d323a57 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss @@ -0,0 +1,145 @@ +@use "sass:math"; +@use "sass:color"; +@use "sass:selector"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../typography/mixins" as *; +@use "../form/sizes" as *; +@use "../checkBox/sizes" as *; +@use "../switch/sizes" as *; +@use "../slider/sizes" as *; +@use "../../base/fieldset"; + +// adduse + +@mixin dx-fieldset-styling() { + .dx-field { + @include dx-base-typography(); + } + + .dx-field-label { + color: $fieldset-field-label-color; + font-size: $fluent-form-label-font-size; + cursor: default; + + i { + font-style: normal; + } + } + + .dx-field-value { + &.dx-attention { + color: $fieldset-field-value-invalid-color; + padding-left: $fluent-fieldset-attention-icon-offset; + + &::before { + @include dx-invalid-fluent-badge(); + } + } + } + + .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button), + .dx-field-value-static { + width: 60%; + } +} + +@mixin dx-field-value-widget-position($name, $size) { + &.#{$name}, + &:not(.dx-widget) > .#{$name} { + margin: math.div($fluent-field-min-height - $size, 2) 0; + } +} + +// TODO: merge with .dx-fieldset-sizing after removing scope .dx-device-phone +@mixin dx-fieldset-sizing-base() { + .dx-field { + padding: 0; + display: flex; + } + + .dx-field-label { + align-self: center; + padding-right: $fluent-field-labelvalue-spacing; + } + + .dx-field-value { + &.dx-widget, + &:not(.dx-widget) > .dx-widget { + margin: 0; + } + + &:not(.dx-widget) { + & > .dx-button, + & > .dx-checkbox, + & > .dx-switch { + float: right; + } + } + + @include dx-field-value-widget-position(dx-checkbox, $fluent-checkbox-icon-font-size); + @include dx-field-value-widget-position(dx-switch, $fluent-switch-height); + @include dx-field-value-widget-position(dx-slider, $fluent-slider-height); + @include dx-field-value-widget-position(dx-radiogroup, $fluent-radiogroup-min-height); + + &.dx-attention { + padding: $fluent-field-value-top-padding $fluent-field-value-horizontal-padding $fluent-field-value-bottom-padding; + position: relative; + padding-left: $fluent-fieldset-attention-icon-offset; + + &::before { + left: 0; + } + } + } + + .dx-field-value-static { + padding: $fluent-field-value-top-padding $fluent-field-value-horizontal-padding $fluent-field-value-bottom-padding; + } +} + +@mixin dx-fieldset-sizing($vertical-margin, $horizontal-margin, $header-vertical-margin, $field-vertical-margin) { + .dx-fieldset { + margin: $vertical-margin $horizontal-margin; + padding: 0; + + @at-root #{selector.append(".dx-rtl", &)}, + .dx-rtl & { + .dx-field-value { + &:not(.dx-widget) { + & > .dx-button, + & > .dx-checkbox, + & > .dx-switch { + float: left; + } + } + } + } + } + + .dx-fieldset-header { + margin: 0 0 $header-vertical-margin 0; + + @include dx-s-font-mixin(); + } + + .dx-field { + margin: 0 0 $field-vertical-margin 0; + } + + .dx-field:last-of-type { + margin: 0; + } +} + +@include dx-fieldset-styling(); +@include dx-fieldset-sizing-base(); +@include dx-fieldset-sizing( + $fluent-fieldset-vertical-margin, + $fluent-fieldset-horizontal-margin, + $fluent-fieldset-header-vertical-margin, + $fluent-field-vertical-margin +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss new file mode 100644 index 000000000000..92be9dc5e04d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss @@ -0,0 +1,33 @@ +@use "../sizes" as *; +@use "../common/sizes" as *; + +// adduse + +$fluent-fieldset-vertical-margin: null !default; +$fluent-fieldset-horizontal-margin: null !default; +$fluent-fieldset-header-vertical-margin: null !default; +$fluent-field-vertical-margin: null !default; +$fluent-field-labelvalue-spacing: null !default; + +@if $size == "default" { + $fluent-fieldset-vertical-margin: 30px !default; + $fluent-fieldset-horizontal-margin: 20px !default; + $fluent-fieldset-header-vertical-margin: 20px !default; + $fluent-field-vertical-margin: 30px !default; + $fluent-field-labelvalue-spacing: 15px !default; +} + +@else if $size == "compact" { + $fluent-fieldset-vertical-margin: 20px !default; + $fluent-fieldset-horizontal-margin: 16px !default; + $fluent-fieldset-header-vertical-margin: 16px !default; + $fluent-field-vertical-margin: 20px !default; + $fluent-field-labelvalue-spacing: 12px !default; +} + +$fluent-field-min-height: $fluent-base-inline-widget-height !default; +$fluent-field-value-top-padding: 21px !default; +$fluent-field-value-horizontal-padding: $fluent-base-inline-horizontal-padding !default; +$fluent-field-value-bottom-padding: 20px !default; +$fluent-fieldset-attention-icon-offset: $fluent-base-inline-horizontal-padding + $fluent-invalid-badge-size !default; +$fluent-radiogroup-min-height: 26px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss new file mode 100644 index 000000000000..5f5632bca69f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss @@ -0,0 +1,34 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$filemanager-border-color: $base-border-color !default; +$filemanager-file-toolbar-bg: color.adjust($base-bg, $lightness: -3%, $space: hsl) !default; +$filemanager-editor-active-bg: color.change($base-text-color, $alpha: 0.1) !default; +$filemanager-dirs-tree-item-focus-color: $base-text-color !default; +$filemanager-breadcrumbs-item-focus-bg: $base-border-color !default; +$filemanager-breadcrumbs-item-focus-color: $base-text-color !default; +$filemanager-custom-thumbnail-color: $base-border-color !default; +$filemanager-file-item-select-color: $base-bg !default; +$filemanager-file-item-select-bg: color.change($base-accent, $alpha: 0.8) !default; +$filemanager-file-item-select-focus-color: $base-bg !default; +$filemanager-file-item-select-focus-bg: color.change($base-accent, $alpha: 0.7) !default; +$filemanager-file-item-hover-bg: $base-hover-bg !default; +$filemanager-file-item-focused-border: $base-accent !default; +$filemanager-item-focused-color: $base-inverted-text-color !default; +$filemanager-dirs-tree-item-focus-bg: null !default; +$filemanager-progressbox-shadow-color: null !default; + + +@if $mode == "light" { + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: -8%, $space: hsl) !default; + $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default; +} + +@if $mode == "dark" { + $filemanager-dirs-tree-item-focus-bg: color.adjust($base-bg, $lightness: 8%, $space: hsl) !default; + $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss new file mode 100644 index 000000000000..8e1ce8b4c1db --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss @@ -0,0 +1,262 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/fileManager"; +@use "../../base/fileManager/mixins" as *; + +// adduse +@use "../splitterBar"; + + +.dx-filemanager { + border-color: $filemanager-border-color; + + .dx-filemanager-notification-common { + border-color: $filemanager-border-color; + color: $base-danger; + } + + .dx-drawer-shrink .dx-filemanager-progress-panel { + border-left-color: $filemanager-border-color; + } + + .dx-filemanager-progress-panel { + background-color: $base-bg; + + .dx-filemanager-progress-panel-title { + padding-top: $filemanager-progress-panel-title-padding; + padding-bottom: $filemanager-progress-panel-title-padding; + } + } + + .dx-filemanager-progress-box-image { + width: $fluent-base-icon-size * 2; + height: $fluent-base-icon-size * 2; + font-size: $fluent-base-icon-size * 2; + } + + .dx-filemanager-progress-box-error { + color: $base-inverted-text-color; + background: $base-danger; + } + + .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button { + margin-top: $filemanager-progress-box-button-close-margin-top; + } + + .dx-filemanager-toolbar { + padding: 0 10px; + background: $base-bg; + min-height: $filemanager-toolbar-height; + + &.dx-filemanager-file-toolbar, + &.dx-filemanager-file-toolbar .dx-toolbar { + background: $filemanager-file-toolbar-bg; + } + + .dx-filemanager-toolbar-separator-item { + height: $filemanager-toolbar-separator-height; + background: $filemanager-border-color; + } + + .dx-filemanager-toolbar-viewmode-item .dx-texteditor { + width: $filemanager-toolbar-viewmode-width; + } + + .dx-texteditor.dx-editor-filled { + background: transparent; + + &.dx-state-hover, + &.dx-state-active, + &.dx-state-focused { + background: $filemanager-editor-active-bg; + } + + &.dx-dropdowneditor { + border-color: transparent; + + .dx-dropdowneditor-icon { + background: transparent; + } + + &.dx-state-hover .dx-dropdowneditor-icon, + &.dx-state-active .dx-dropdowneditor-icon { + background: transparent; + border-color: transparent; + } + } + } + + .dx-toolbar .dx-filemanager-toolbar-viewmode-item .dx-button-content { + padding-left: $filemanager-toolbar-viewmode-padding; + padding-right: $filemanager-toolbar-viewmode-padding; + } + } + + .dx-filemanager-fileuploader-dropzone-placeholder { + border: 2px solid; + border-color: $base-accent; + } + + .dx-filemanager-container { + border-top-color: $filemanager-border-color; + } + + .dx-filemanager-dirs-panel { + border-right-color: $filemanager-border-color; + } + + .dx-filemanager-breadcrumbs { + border-bottom-color: $filemanager-border-color; + + .dx-menu-item { + &.dx-state-focused { + background: $filemanager-breadcrumbs-item-focus-bg; + color: $filemanager-breadcrumbs-item-focus-color; + } + } + + .dx-menu-item-content { + padding-top: $filemanager-breadcrumbs-item-padding-top; + padding-bottom: $filemanager-breadcrumbs-item-padding-bottom; + } + + .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content { + background: $filemanager-border-color; + } + + .dx-filemanager-breadcrumbs-separator-item, + .dx-filemanager-breadcrumbs-path-separator-item { + &.dx-state-hover { + background: transparent; + } + } + } + + .dx-filemanager-thumbnails .dx-filemanager-thumbnails-item { + &.dx-item-selected { + color: $filemanager-file-item-select-color; + background: $filemanager-file-item-select-bg; + } + + &.dx-state-hover:not(.dx-state-focused):not(.dx-item-selected) { + background: $filemanager-file-item-hover-bg; + } + + &.dx-state-focused { + border: 1px solid; + border-color: $filemanager-file-item-focused-border; + } + + &.dx-item-selected.dx-state-focused { + color: $filemanager-file-item-select-focus-color; + background: $filemanager-file-item-select-focus-bg; + } + + .dx-filemanager-thumbnails-item-thumbnail { + width: $fluent-base-icon-size * 2; + height: $fluent-base-icon-size * 2; + font-size: $fluent-base-icon-size * 2; + } + + .dx-filemanager-item-custom-thumbnail { + color: $filemanager-custom-thumbnail-color; + } + } + + .dx-filemanager-files-view { + background: $base-bg; + + &.dx-filemanager-details { + .dx-filemanager-details-item-thumbnail { + font-size: $fluent-base-icon-size; + width: $fluent-base-icon-size; + height: $fluent-base-icon-size; + } + + .dx-datagrid .dx-datagrid-content .dx-datagrid-table { + .dx-command-select { + padding: 0; + width: $filemanager-details-view-checkbox-column-width; + min-width: $filemanager-details-view-checkbox-column-width; + max-width: $filemanager-details-view-checkbox-column-width; + } + + .dx-filemanager-details-item-is-directory { + padding-right: 0 !important; // stylelint-disable-line declaration-no-important + padding-left: 0 !important; // stylelint-disable-line declaration-no-important + } + } + + .dx-row-focused .dx-filemanager-file-actions-button .dx-button .dx-icon { + color: $filemanager-item-focused-color; + } + } + } + + .dx-filemanager-details { + .dx-filemanager-details-item-name-wrapper { + align-items: center; + } + } +} + +.dx-filemanager-dirs-tree.dx-treeview { + .dx-treeview-item { + padding-top: $filemanager-treeview-item-top-bottom-padding; + padding-bottom: $filemanager-treeview-item-top-bottom-padding; + } + + .dx-state-focused > .dx-treeview-item { + background: transparent; + + &.dx-state-hover { + background: $filemanager-dirs-tree-item-focus-bg; + } + + & * { + color: $filemanager-dirs-tree-item-focus-color; + } + } + + .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item { + background: $filemanager-dirs-tree-item-focus-bg; + + & * { + color: $filemanager-dirs-tree-item-focus-color; + } + } +} + +.dx-filemanager-view-switcher-popup { + width: 2 * $filemanager-toolbar-viewmode-padding + $fluent-base-icon-size; + + .dx-dropdownbutton-popup-wrapper.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { + padding-left: $filemanager-toolbar-viewmode-padding - 1px; + padding-right: $filemanager-toolbar-viewmode-padding; + text-overflow: clip; + } +} + +.dx-filemanager-dirs-tree.dx-treeview .dx-filemanager-file-actions-button .dx-button .dx-button-content { + padding: 0; +} + +.dx-filemanager-file-actions-button { + .dx-button { + min-width: $filemanager-file-actions-button-size; + height: $filemanager-file-actions-button-size; + + .dx-button-content { + padding: $filemanager-file-actions-button-top-bottom-padding 6px; + } + } +} + +.dx-filemanager-context-menu .dx-menu-item-has-text:not(.dx-menu-item-has-icon) .dx-menu-item-text { + margin-left: $filemanager-contextmenu-text-item-left-margin; +} + +@include filemanager-icons-mixin($base-text-color, $base-success, $base-inverted-text-color, $base-danger, $base-inverted-text-color, $filemanager-large-icon-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss new file mode 100644 index 000000000000..201671360267 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss @@ -0,0 +1,53 @@ +@use "../sizes" as *; + +// adduse +@use "../toolbar/sizes" as *; + +$filemanager-toolbar-separator-height: null !default; +$filemanager-toolbar-viewmode-width: null !default; +$filemanager-toolbar-viewmode-padding: null !default; +$filemanager-breadcrumbs-item-padding-top: null !default; +$filemanager-breadcrumbs-item-padding-bottom: null !default; +$filemanager-details-view-checkbox-column-width: null !default; +$filemanager-file-actions-button-size: null !default; +$filemanager-treeview-item-top-bottom-padding: null !default; +$filemanager-file-actions-button-top-bottom-padding: null !default; +$filemanager-contextmenu-text-item-left-margin: null !default; +$filemanager-large-icon-size: null !default; +$filemanager-progress-panel-title-padding: null !default; +$filemanager-progress-box-button-close-margin-top: null !default; + +$filemanager-toolbar-height: $fluent-toolbar-height; + +@if $size == "default" { + $filemanager-toolbar-separator-height: 36px !default; + $filemanager-toolbar-viewmode-width: 190px !default; + $filemanager-toolbar-viewmode-padding: 6px !default; + $filemanager-breadcrumbs-item-padding-top: 7px !default; + $filemanager-breadcrumbs-item-padding-bottom: 8px !default; + $filemanager-details-view-checkbox-column-width: 49px !default; + $filemanager-file-actions-button-size: 28px !default; + $filemanager-treeview-item-top-bottom-padding: 11px !default; + $filemanager-file-actions-button-top-bottom-padding: 2px !default; + $filemanager-contextmenu-text-item-left-margin: 48px !default; + $filemanager-large-icon-size: 22px !default; + $filemanager-progress-panel-title-padding: 16px !default; + $filemanager-progress-box-button-close-margin-top: 6px !default; +} + +@else if $size == "compact" { + $filemanager-toolbar-separator-height: 26px !default; + $filemanager-toolbar-viewmode-width: 150px !default; + $filemanager-toolbar-viewmode-padding: 5px !default; + $filemanager-breadcrumbs-item-padding-top: 8px !default; + $filemanager-breadcrumbs-item-padding-bottom: 9px !default; + $filemanager-details-view-checkbox-column-width: 43px !default; + $filemanager-file-actions-button-size: 22px !default; + $filemanager-treeview-item-top-bottom-padding: 8px !default; + $filemanager-file-actions-button-top-bottom-padding: 9px !default; + $filemanager-contextmenu-text-item-left-margin: 30px !default; + $filemanager-large-icon-size: 16px !default; + $filemanager-progress-panel-title-padding: 10px !default; + $filemanager-progress-box-button-close-margin-top: 5px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss new file mode 100644 index 000000000000..4ced7be208c3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss @@ -0,0 +1,26 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. File name text color +* $type color +*/ +$fileuploader-filename-color: $base-text-color !default; +$fileuploader-file-icon-color: $base-icon-color !default; +$fileuploader-progressbar-status-color: $base-text-color !default; +$fluent-fileuploader-files-container-bg-color: $base-bg !default; + +/** +* $name 20. File status text color +* $type color +*/ +$fileuploader-falename-status-color: $base-label-color !default; + +/** +* $name 30. Drag-and-drop border color +* $type color +*/ +$fileuploader-border-color: $base-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss new file mode 100644 index 000000000000..4c703762a455 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss @@ -0,0 +1,200 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/fileUploader"; + +// adduse + +$fluent-fileuploader-file-wrapper-border-size: 3px; +$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1); + +.dx-fileuploader-wrapper { + padding: $fluent-fileuploader-vertical-padding; +} + +.dx-fileuploader-content > .dx-fileuploader-upload-button { + margin-left: 3px; + margin-right: 3px; +} + +.dx-fileuploader-input-wrapper { + padding: $fluent-fileuploader-vertical-padding 0 $fluent-fileuploader-vertical-padding; + border: $fluent-fileuploader-file-wrapper-border-size dashed transparent; +} + +.dx-fileuploader.dx-state-disabled .dx-fileuploader-input-label { + position: relative; +} + +.dx-fileuploader-dragover { + .dx-fileuploader-input-wrapper { + border: none; + padding: 0; + + .dx-fileuploader-button { + display: none; + } + } + + .dx-fileuploader-input-label { + text-align: center; + } + + .dx-fileuploader-input-container { + display: block; + width: 100%; + } + + .dx-fileuploader-input { + display: block; + width: 100%; + padding-top: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size; + padding-right: $fluent-fileuploader-file-wrapper-border-size; + + // NOTE: height of the widget should be the same in default and drag over states, but not with margin help + padding-bottom: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size + 1px; + padding-left: $fluent-fileuploader-file-wrapper-border-size; + box-sizing: content-box; + } + + .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors + padding: $fluent-fileuploader-vertical-padding * 2 $fluent-fileuploader-vertical-padding + 2px; + border: $fluent-fileuploader-file-wrapper-border-size dashed; + border-color: $fileuploader-border-color; + } +} + +.dx-fileuploader-file-status-message, +.dx-fileuploader-file-size { + color: $fileuploader-falename-status-color; +} + +.dx-fileuploader-input { + padding: $fluent-fileuploader-vertical-padding 0; +} + +.dx-fileuploader-input-label { + padding: $fluent-fileuploader-vertical-padding + math.div(math.div($fluent-base-font-size, 2) - $fluent-fileuploader-vertical-padding, 2) + 1px $fluent-fileuploader-vertical-padding + 2px; + color: $fileuploader-filename-color; + + @include dx-overflow(); +} + +.dx-fileuploader-files-container { + .dx-fileuploader-show-file-list & { + padding: $fluent-fileuploader-files-container-padding; + } + + .dx-fileuploader-empty & { + padding: 0; + } + + .dx-invalid & { + padding-top: 50px; + } + + .dx-fileuploader-button .dx-button-content { + padding: 0; + } + + .dx-fileuploader-file-container { + padding: $fluent-fileuploader-file-container-padding; + margin-bottom: 4px; + border-radius: $fluent-fileuploader-files-container-rounding; + background-color: $fluent-fileuploader-files-container-bg-color; + box-shadow: $fluent-fileuploader-file-container-boxshadow; + + .dx-fileuploader-button-container + .dx-fileuploader-button-container { + .dx-button { + margin-right: $fluent-fileuploader-file-container-text-margin; + + .dx-rtl & { + margin-left: $fluent-fileuploader-file-container-text-margin; + margin-right: 0; + } + } + } + + .dx-fileuploader-button-container { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .dx-button { + height: $fluent-fileuploader-file-container-button-size; + width: $fluent-fileuploader-file-container-button-size; + margin-right: $fluent-fileuploader-file-container-button-margin; + + &.dx-fileuploader-cancel-button-position-end { + margin-right: 0; + margin-left: $fluent-fileuploader-file-cancel-button-margin-left; + } + + .dx-rtl & { + margin-left: $fluent-fileuploader-file-container-button-margin; + margin-right: 0; + + &.dx-fileuploader-cancel-button-position-end { + margin-left: 0; + margin-right: $fluent-fileuploader-file-cancel-button-margin-left; + } + } + } + } +} + +.dx-fileuploader .dx-progressbar-status { + color: $fileuploader-progressbar-status-color; +} + +.dx-fileuploader-file { + display: block; + padding-top: 5px; + line-height: 13px; +} + +.dx-fileuploader-file-icon { + color: $fileuploader-file-icon-color; + font-size: $fluent-fileuploader-file-icon-font-size; +} + +.dx-fileuploader-file-name { + padding-bottom: math.div($fluent-fileuploader-vertical-padding, 2); + color: $fileuploader-filename-color; + font-weight: 500; +} + +.dx-fileuploader-file-size { + float: right; + padding: $fluent-fileuploader-file-size-margin; + color: $base-label-color; +} + +.dx-fileuploader-invalid { + .dx-fileuploader-file-status-message { + color: $base-danger; + + span { + &:first-child { + margin-top: 2px; + } + + &:last-child { + margin-bottom: 2px; + } + } + } + + .dx-fileuploader-button-container { + vertical-align: middle; + } + + .dx-fileuploader-cancel-button { + margin-top: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss new file mode 100644 index 000000000000..5dcc5c5f83c3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-fileuploader-file-container-padding: null !default; +$fluent-fileuploader-file-container-text-margin: null !default; +$fluent-fileuploader-file-container-button-margin: null !default; +$fluent-fileuploader-file-cancel-button-margin-left: 4px !default; +$fluent-fileuploader-file-container-button-size: null !default; + +$fluent-fileuploader-vertical-padding: 7px !default; +$fluent-fileuploader-files-container-padding: null !default; +$fluent-fileuploader-file-size-margin: null !default; +$fluent-fileuploader-file-icon-font-size: null !default; +$fluent-fileuploader-files-container-rounding: 4px !default; + +@if $size == "default" { + $fluent-fileuploader-file-container-padding: 5px 8px !default; + $fluent-fileuploader-file-container-text-margin: 15px !default; + $fluent-fileuploader-file-container-button-margin: 8px !default; + $fluent-fileuploader-file-container-button-size: 32px !default; + $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 0 4px !default; + $fluent-fileuploader-file-icon-font-size: 20px !default; +} + +@else if $size == "compact" { + $fluent-fileuploader-file-container-padding: 2px 4px !default; + $fluent-fileuploader-file-container-text-margin: 6px !default; + $fluent-fileuploader-file-container-button-margin: 2px !default; + $fluent-fileuploader-file-container-button-size: 28px !default; + $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 4px !default; + $fluent-fileuploader-file-icon-font-size: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss new file mode 100644 index 000000000000..7861e617a4b3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss @@ -0,0 +1,77 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$filterbuilder-bg: $base-bg !default; + +/** +* $name 10. Text color +* $type color +*/ +$filterbuilder-text-color: $base-text-color !default; + +/** +* $name 20. Focused text color +* $type color +*/ +$filterbuilder-text-focus-color: null !default; + +/** +* $name 30. Plus icon color +* $type color +*/ +$filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.7) !default; +$filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; +$filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; + +/** +* $name 40. Remove icon color +* $type color +*/ +$filterbuilder-remove-icon-color: color.change($base-danger, $alpha: 0.7) !default; +$filterbuilder-remove-icon-hover-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; +$filterbuilder-remove-icon-focus-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; + +/** +* $name 50. Group operation button color +* $type color +*/ +$filterbuilder-group-operation-color: color.change($base-danger, $alpha: 0.3) !default; +$filterbuilder-group-operation-hover-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.2) !default; +$filterbuilder-group-operation-focus-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.7) !default; + +/** +* $name 60. Data field button color +* $type color +*/ +$filterbuilder-item-field-color: color.change($base-accent, $alpha: 0.3) !default; +$filterbuilder-item-field-hover-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.2) !default; +$filterbuilder-item-field-focus-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.7) !default; + +/** +* $name 70. Operation button color +* $type color +*/ +$filterbuilder-item-operator-color: color.change($base-success, $alpha: 0.3) !default; +$filterbuilder-item-operator-hover-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.2) !default; +$filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.7) !default; + +/** +* $name 80. Value button color +* $type color +*/ +$filterbuilder-item-value-color: color.change($base-icon-color, $alpha: 0.24) !default; +$filterbuilder-item-value-hover-color: color.change($base-icon-color, $alpha: 0.32) !default; +$filterbuilder-item-value-focus-color: $base-icon-color !default; +$filterbuilder-menu-icon-color: $base-text-color !default; + + +@if $mode == "light" { + $filterbuilder-text-focus-color: #fff !default; +} + +@if $mode == "dark" { + $filterbuilder-text-focus-color: #000 !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss new file mode 100644 index 000000000000..07f5f8837a22 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss @@ -0,0 +1,127 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; +@use "../../base/filterBuilder" as * with ( + $filterbuilder-bg: $filterbuilder-bg, + $filterbuilder-text-color: $filterbuilder-text-color, + $filterbuilder-text-focus-color: $filterbuilder-text-focus-color, + $filterbuilder-group-operation-color: $filterbuilder-group-operation-color, + $filterbuilder-group-operation-hover-color: $filterbuilder-group-operation-hover-color, + $filterbuilder-group-operation-focus-color: $filterbuilder-group-operation-focus-color, + $filterbuilder-item-operator-color: $filterbuilder-item-operator-color, + $filterbuilder-item-operator-hover-color: $filterbuilder-item-operator-hover-color, + $filterbuilder-item-operator-focus-color: $filterbuilder-item-operator-focus-color, + $filterbuilder-item-field-color: $filterbuilder-item-field-color, + $filterbuilder-item-field-hover-color: $filterbuilder-item-field-hover-color, + $filterbuilder-item-field-focus-color: $filterbuilder-item-field-focus-color, + $filterbuilder-item-value-color: $filterbuilder-item-value-color, + $filterbuilder-item-value-hover-color: $filterbuilder-item-value-hover-color, + $filterbuilder-item-value-focus-color: $filterbuilder-item-value-focus-color, + $filterbuilder-plus-icon-color: $filterbuilder-plus-icon-color, + $filterbuilder-plus-icon-hover-color: $filterbuilder-plus-icon-hover-color, + $filterbuilder-plus-icon-focus-color: $filterbuilder-plus-icon-focus-color, + $filterbuilder-remove-icon-color: $filterbuilder-remove-icon-color, + $filterbuilder-remove-icon-hover-color: $filterbuilder-remove-icon-hover-color, + $filterbuilder-remove-icon-focus-color: $filterbuilder-remove-icon-focus-color, + $filterbuilder-menu-icon-color: $filterbuilder-menu-icon-color, +); +@use "../textEditor/colors" as *; + +// adduse + + +.dx-filterbuilder { + .dx-filterbuilder-action-icon { + font-size: 21px; + } + + .dx-filterbuilder-group { + .dx-filterbuilder-group-item { + .dx-filterbuilder-action.dx-filterbuilder-action-icon { + padding: $fluent-filterbuilder-icon-padding; + vertical-align: middle; + } + } + } + + .dx-filterbuilder-item-value { + .dx-editor-filled, + .dx-editor-outlined { + .dx-texteditor-input { + padding: $fluent-filterbuilder-filled-editor-padding; + } + } + } + + .dx-filterbuilder-text, + .dx-filterbuilder-item-value-text { + border-radius: 5px; + } +} + +.dx-filterbuilder-range-separator { + color: $texteditor-color; +} + +.dx-filterbuilder-overlay { + &.dx-popup-wrapper > .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + } + + &.dx-filterbuilder-operations { + .dx-rtl { + .dx-treeview-item { + padding-right: $fluent-filterbuilder-treeview-item-left-padding; + } + } + } + + .dx-treeview-node { + .dx-treeview-node-container-opened { + margin-left: $fluent-filterbuilder-treeview-item-left-padding; + } + } + + .dx-treeview-item { + padding: $fluent-filterbuilder-treeview-item-padding; + min-height: $fluent-filterbuilder-treeview-item-min-heigth; + + .dx-icon { + margin-right: 10px; + } + } + + .dx-treeview-toggle-item-visibility { + left: $fluent-filterbuilder-treeview-toggle-left; + } + + .dx-rtl { + .dx-treeview-node { + > .dx-treeview-item { + padding-right: $fluent-filterbuilder-treeview-item-left-padding * 2; + } + + &.dx-treeview-node-is-leaf > .dx-treeview-item { + padding-right: $fluent-filterbuilder-treeview-item-left-padding; + } + + .dx-treeview-node-container-opened { + margin-right: $fluent-filterbuilder-treeview-item-left-padding; + margin-left: 0; + } + } + + .dx-treeview-item { + .dx-icon { + margin-left: 10px; + } + } + + .dx-treeview-toggle-item-visibility { + right: 16px; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss new file mode 100644 index 000000000000..2f9224d4db40 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss @@ -0,0 +1,29 @@ +@use "../sizes" as *; + +// adduse + +$fluent-filterbuilder-icon-padding: null !default; +$fluent-filterbuilder-filled-editor-padding: null !default; +$fluent-filterbuilder-treeview-item-left-padding: null !default; +$fluent-filterbuilder-treeview-item-padding: null !default; +$fluent-filterbuilder-treeview-toggle-left: null !default; +$fluent-filterbuilder-treeview-item-min-heigth: null !default; + +@if $size == "default" { + $fluent-filterbuilder-icon-padding: 8px !default; + $fluent-filterbuilder-filled-editor-padding: 13px 12px !default; + + $fluent-filterbuilder-treeview-item-left-padding: 12px !default; + $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-treeview-toggle-left: 16px !default; + $fluent-filterbuilder-treeview-item-min-heigth: 32px !default; +} + +@else if $size == "compact" { + $fluent-filterbuilder-icon-padding: 4px !default; + $fluent-filterbuilder-filled-editor-padding: 8px 8px !default; + $fluent-filterbuilder-treeview-item-left-padding: 4px !default; + $fluent-filterbuilder-treeview-item-padding: 4px 12px 4px $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-treeview-toggle-left: 0 !default; + $fluent-filterbuilder-treeview-item-min-heigth: 24px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss new file mode 100644 index 000000000000..ef8a1f3bac79 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss @@ -0,0 +1,34 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Label text color +* $type color +*/ +$form-field-item-color: null !default; +$form-item-help-text-color: $base-label-color !default; + +/** +* $name 20. Group border color +* $type color +*/ +$form-group-border-color: $base-border-color !default; +$form-field-required-color: $form-field-item-color !default; +$form-field-mark-color: $form-field-item-color !default; + +@if $mode == "light" { + @if $color == "blue" { + $form-field-item-color: $base-text-color !default; + } + + @if $color == "saas" { + $form-field-item-color: $base-label-color !default; + } +} + +@if $mode == "dark" { + $form-field-item-color: $base-text-color !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss new file mode 100644 index 000000000000..7de005954a02 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss @@ -0,0 +1,131 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/form"; +@use "../../base/icon_fonts" as *; + +// adduse +@use "../scrollable"; + + +.dx-form-group-caption { + font-size: $fluent-form-group-caption-font-size; +} + +.dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors + & > .dx-form-group-content { + border-top: 1px solid; + border-top-color: $form-group-border-color; + padding-bottom: $fluent-form-group-content-bottom-padding; + padding-top: $fluent-form-group-caption-top-padding; + margin-top: $fluent-form-group-caption-bottom-margin; + } +} + +.dx-layout-manager { + .dx-field-item { + &:not(.dx-last-col) { + padding-inline-end: $fluent-form-layout-manager-horizontal-padding; + } + + &:not(.dx-first-col) { + padding-inline-start: $fluent-form-layout-manager-horizontal-padding; + } + + &:not(.dx-first-row) { + padding-top: $fluent-form-layout-manager-vertical-padding; + } + + padding-bottom: $fluent-form-layout-manager-vertical-padding; + font-size: $fluent-form-label-font-size; + + .dx-field-item { + &.dx-last-row { + padding-bottom: 0; + } + } + } + + .dx-tabpanel .dx-multiview-item-content { + padding: $fluent-form-layout-manager-tabpanel-content-padding; + } +} + +.dx-form > .dx-layout-manager.dx-layout-manager-one-col { + .dx-field-item { + .dx-field-item.dx-last-row:not(.dx-last-col) { + padding-bottom: $fluent-form-layout-manager-vertical-padding; + } + } +} + +.dx-field-item { + &:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) { + padding-top: $fluent-form-default-top-padding; + } + + .dx-switch { + vertical-align: middle; + } +} + +.dx-field-item-content-wrapper.dx-invalid { + .dx-field-item-help-text { + color: transparent; + } +} + +.dx-field-item-label-location-top { + padding: $fluent-form-top-label-padding; + margin-bottom: $fluent-form-top-label-bottom-margin; + + .dx-form-styling-mode-underlined & { + padding-left: 0; + padding-right: 0; + } +} + +.dx-field-item-label-text { + color: $form-field-item-color; +} + +.dx-field-item-help-text { + color: $form-item-help-text-color; + padding-top: 2px; + font-size: $fluent-form-help-text-font-size; + font-style: normal; + + .dx-form-styling-mode-underlined & { + padding-left: 0; + padding-right: 0; + } +} + +.dx-field-item-optional .dx-label > span::after, +.dx-field-item-optional-mark { + color: $form-field-mark-color; +} + +.dx-field-item-required .dx-label > span::after, +.dx-field-item-required-mark { + color: $form-field-required-color; +} + +.dx-field-item-custom-label-content { + .dx-icon { + @include dx-icon-sizing($fluent-form-label-icon-size); + @include dx-icon-margin(math.div($fluent-base-icon-size, 3)); + } +} + +.dx-form-group-custom-caption { + font-size: $fluent-form-group-caption-font-size; + + .dx-icon { + @include dx-icon-sizing($fluent-base-icon-size); + @include dx-icon-margin($fluent-form-group-custom-caption-icon-margin); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss new file mode 100644 index 000000000000..4eabd6d030f2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss @@ -0,0 +1,45 @@ +@use "../sizes" as *; + +// adduse + +$fluent-form-group-caption-bottom-margin: null !default; +$fluent-form-group-caption-top-padding: null !default; +$fluent-form-group-content-bottom-padding: null !default; +$fluent-form-group-caption-font-size: null !default; +$fluent-form-top-label-padding: 0 !default; +$fluent-form-top-label-bottom-margin: null !default; +$fluent-form-default-top-padding: null !default; +$fluent-form-help-text-font-size: 12px !default; +$fluent-form-layout-manager-horizontal-padding: null !default; +$fluent-form-layout-manager-vertical-padding: null !default; +$fluent-form-layout-manager-tabpanel-content-padding: null !default; + +$fluent-form-label-font-size: $fluent-base-font-size !default; +$fluent-form-label-icon-size: $fluent-base-icon-size !default; +$fluent-form-group-custom-caption-icon-margin: null !default; + +@if $size == "default" { + $fluent-form-group-caption-bottom-margin: 4px !default; + $fluent-form-group-caption-top-padding: 16px !default; + $fluent-form-group-content-bottom-padding: 16px !default; + $fluent-form-group-caption-font-size: 20px !default; + $fluent-form-group-custom-caption-icon-margin: 6px !default; + $fluent-form-default-top-padding: 16px !default; + $fluent-form-top-label-bottom-margin: 4px !default; + $fluent-form-layout-manager-horizontal-padding: 12px !default; + $fluent-form-layout-manager-vertical-padding: 8px !default; + $fluent-form-layout-manager-tabpanel-content-padding: 24px !default; +} + +@else if $size == "compact" { + $fluent-form-group-caption-bottom-margin: 4px !default; + $fluent-form-group-caption-top-padding: 12px !default; + $fluent-form-group-content-bottom-padding: 12px !default; + $fluent-form-group-caption-font-size: 16px !default; + $fluent-form-group-custom-caption-icon-margin: 4px !default; + $fluent-form-default-top-padding: 8px !default; + $fluent-form-top-label-bottom-margin: 2px !default; + $fluent-form-layout-manager-horizontal-padding: 8px !default; + $fluent-form-layout-manager-vertical-padding: 6px !default; + $fluent-form-layout-manager-tabpanel-content-padding: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss new file mode 100644 index 000000000000..fff71d38bef2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss @@ -0,0 +1,40 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Indicator background color +* $type color +*/ +$gallery-indicator-bg: $base-bg !default; + +/** +* $name 20. Selected indicator background color +* $type color +*/ +$gallery-indicator-item-selected-bg: $base-accent !default; + +/** +* $name 30. Focused indicator background color +* $type color +*/ +$gallery-indicator-focused-bg: $base-accent !default; +$gallery-indicator-item-border-color: color.change(#000, $alpha: 0.2) !default; +$gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; +$gallery-navbutton-color: color.change($base-text-color, $alpha: 0.54) !default; +$gallery-nav-arrow-color: $base-inverted-text-color !default; + +/** +* $name 40. Hovered navigation button color +* $type color +*/ +$gallery-navbutton-hover-color: $base-accent !default; + +/** +* $name 50. Active navigation button color +* $type color +*/ +$gallery-navbutton-active-color: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss new file mode 100644 index 000000000000..d32e3180e335 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss @@ -0,0 +1,114 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/gallery"; + +// adduse + +.dx-gallery { + .dx-gallery-nav-button-prev, + .dx-gallery-nav-button-next { + position: absolute; + top: 0; + width: 34%; + height: 100%; + background: transparent; + cursor: pointer; + + &.dx-state-hover::after { + background-color: $gallery-navbutton-hover-color; + } + + &.dx-state-active::after { + background-color: $gallery-navbutton-active-color; + } + + @include dx-icon-font-centered-sizing(32px); + + &::after { + content: ''; + position: absolute; + width: 32px; + height: 32px; + background: $gallery-navbutton-color; + border-radius: 50%; + top: 50%; + margin-top: -16px; + } + + &::before { + position: absolute; + z-index: 10; + clear: both; + font-size: 32px; + color: $gallery-nav-arrow-color; + } + } + + .dx-gallery-nav-button-prev { + @include dx-icon(chevronleft); + + &::after { + left: $fluent-gallery-button-padding; + } + + &::before { + left: $fluent-gallery-button-padding - 1; + right: auto; + margin-left: 0; + } + } + + .dx-gallery-nav-button-next { + @include dx-icon(chevronright); + + &::after { + right: $fluent-gallery-button-padding; + } + + &::before { + right: $fluent-gallery-button-padding - 1; + left: auto; + } + } +} + + +.dx-gallery-indicator { + pointer-events: none; + text-align: center; +} + +.dx-gallery-indicator-item { + border-radius: 50%; + box-sizing: border-box; + border: 1px solid; + border-color: $gallery-indicator-item-border-color; + pointer-events: auto; + margin: 5px - math.div($fluent-gallery-indicator-size, 2) 6px; + width: $fluent-gallery-indicator-size; + height: $fluent-gallery-indicator-size; + background: $gallery-indicator-bg; +} + +.dx-gallery-indicator-item-active, +.dx-gallery-indicator-item-selected { + width: $fluent-gallery-indicator-selected-size; + height: $fluent-gallery-indicator-selected-size; + background: $gallery-indicator-item-selected-bg; + border: 2px solid; + border-color: $gallery-indicator-selected-border-color; + margin: 5px - math.div($fluent-gallery-indicator-selected-size, 2) 6px; +} + +.dx-state-focused.dx-gallery { + border-color: $base-accent; + + .dx-gallery-indicator-item-selected { + background: $gallery-indicator-focused-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss new file mode 100644 index 000000000000..4187dac269e1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss @@ -0,0 +1,7 @@ +@use "../sizes" as *; + +// adduse + +$fluent-gallery-indicator-size: 8px !default; +$fluent-gallery-indicator-selected-size: 12px !default; +$fluent-gallery-button-padding: 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss new file mode 100644 index 000000000000..29bb541e04eb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss @@ -0,0 +1,30 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../gridBase/colors" as *; + +// adduse + +$gantt-collapsable-row-bg: null !default; +$gantt-icon-color: $datagrid-columnchooser-item-color !default; +$gantt-parent-task-background-color: null !default; +$gantt-task-color: $base-inverted-text-color !default; +$gantt-task-background-color: null !default; +$gantt-task-progress-background-color: null !default; + +@if $color == "blue" { + $gantt-parent-task-background-color: $base-success !default; +} + +@if $mode == "light" { + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default; + $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%) !default; + $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default; +} + +@if $mode == "dark" { + $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default; + $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%) !default; + $gantt-task-progress-background-color: rgba(255, 255, 255, 0.2) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss new file mode 100644 index 000000000000..ac30f01d6f17 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss @@ -0,0 +1,291 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/gantt"; +@use "../../base/gantt/mixins" as *; +@use "../gridBase/colors" as *; +@use "../form/sizes" as *; + +// adduse +@use "../splitterBar"; + + +$gantt-successor-background-color: white; + +.dx-gantt { + border: 1px solid; + border-color: $base-border-color; + + .dx-gantt-toolbar-wrapper { + padding: 5px; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + + .dx-gantt-toolbar-separator { + border-left-color: $base-border-color; + } + + .dx-toolbar .dx-toolbar-items-container { + min-height: 42px; + } + } + + .dx-gantt-view { + background-color: $base-bg; + } + + .dx-header-row, + .dx-treelist-filter-row { + height: $gantt-header-item-height; + } + + .dx-gantt-header { + color: $datagrid-columnchooser-item-color; + font-size: $fluent-form-label-font-size; + + .dx-gantt-tsac, + .dx-gantt-tsa, + .dx-gantt-hb, + .dx-gantt-vb { + border-color: $base-border-color; + background-color: $base-bg; + } + } + + .dx-gantt-si { + padding-left: 16px; + padding-right: 16px; + } + + .dx-gantt-tsac, + .dx-gantt-tsa { + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + } + + .dx-gantt-hb { + border-top: 1px solid; + border-top-color: $base-border-color; + } + + .dx-gantt-vb { + border-left: 1px solid; + border-left-color: $base-border-color; + } + + .dx-gantt-taskWrapper { + padding-top: $gantt-task-wrapper-padding-top; + + .dx-gantt-task, + .dx-gantt-titleOut { + height: $gantt-task-height; + line-height: $gantt-task-height; + } + + .dx-gantt-task { + background-color: $base-accent; + border-radius: $base-border-radius; + + .dx-gantt-tPrg { + border-radius: $base-border-radius; + background-color: $gantt-task-progress-background-color; + } + + &.dx-gantt-smallTask { + border-radius: $base-border-radius; + + .dx-gantt-titleIn { + padding: 0 2px; + } + } + + &.dx-gantt-parent { + height: $gantt-task-height - 2px; + line-height: $gantt-task-height - 2px; + background-color: $gantt-parent-task-background-color; + border-left-color: $gantt-parent-task-background-color; + border-right-color: $gantt-parent-task-background-color; + border-top-color: $gantt-parent-task-background-color; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + &:not(.dx-gantt-noPrg) .dx-gantt-tPrg { + background-color: $gantt-task-progress-background-color; + } + + &:not(.dx-gantt-smallTask)::before, + &:not(.dx-gantt-smallTask)::after, + &:not(.dx-gantt-smallTask):not(.dx-gantt-noPrg) .dx-gantt-tPrg::before, + &:not(.dx-gantt-smallTask).dx-gantt-cmpl .dx-gantt-tPrg::after { + content: ''; + position: absolute; + bottom: -8px; + border-width: 4px; + border-style: solid; + } + + &::before, + &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { + left: 0; + border-right-color: transparent; + border-bottom-color: transparent; + } + + &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before { + border-left-color: $gantt-task-progress-background-color; + border-top-color: $gantt-task-progress-background-color; + } + + &::after, + &.dx-gantt-cmpl .dx-gantt-tPrg::after { + right: 0; + border-left-color: transparent; + border-bottom-color: transparent; + } + + &.dx-gantt-cmpl::after { + border-right-color: $gantt-task-progress-background-color; + border-top-color: $gantt-task-progress-background-color; + } + + &.dx-gantt-cmpl .dx-gantt-tPrg::after { + border-right-color: $gantt-parent-task-background-color; + border-top-color: $gantt-parent-task-background-color; + } + + .dx-gantt-task-edit-frame { + height: $gantt-task-height - 2px; + } + } + } + + .dx-gantt-titleIn { + color: $gantt-task-color; + padding: 0 $gantt-task-title-padding-left; + } + } + + .dx-gantt-taskRes { + height: $gantt-task-height; + line-height: $gantt-task-height; + color: $gantt-task-color; + background-color: $gantt-task-background-color; + border-radius: $base-border-radius; + margin-left: 21px; + padding-left: 4px; + padding-right: 4px; + } + + .dx-gantt-titleOut { + padding-right: 20px; + } + + .dx-gantt-milestone { + background-color: $base-text-color; + width: $gantt-milestone-size; + height: $gantt-milestone-size; + } + + .dx-gantt-task-edit-wrapper { + padding-top: $gantt-task-wrapper-padding-top; + padding-left: 1px; + + .dx-gantt-task-edit-frame { + height: 100%; + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-radius: $base-border-radius; + + .dx-gantt-task-edit-progress { + border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent; + + &::before { + width: 12px; + height: 6px; + bottom: -14px; + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + } + } + + .dx-gantt-task-edit-progress-status { + border-radius: $base-border-radius; + } + } + } + + .dx-gantt-task-edit-wrapper-successor { + padding-top: $gantt-task-wrapper-padding-top; + + .dx-gantt-task-edit-frame-successor { + height: $gantt-task-height; + } + } + + .dx-gantt-task-edit-dependency-r, + .dx-gantt-task-edit-successor-dependency-r, + .dx-gantt-task-edit-dependency-l, + .dx-gantt-task-edit-successor-dependency-l { + background: $gantt-successor-background-color; + border: 1px solid; + border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + width: $gantt-dependency-successor-size; + height: $gantt-dependency-successor-size; + margin: auto; + top: 0; + bottom: 0; + } + + .dx-gantt-task-edit-dependency-r, + .dx-gantt-task-edit-successor-dependency-r { + left: -$gantt-dependency-successor-size - 1px; + } + + .dx-gantt-task-edit-dependency-l, + .dx-gantt-task-edit-successor-dependency-l { + right: -$gantt-dependency-successor-size - 1px; + } + + .dx-gantt-task-edit-dependency-line { + background-color: $base-text-color; + } + + .dx-gantt-sel { + background-color: $datagrid-selection-bg; + } + + .dx-gantt-conn-v { + border-left-color: $base-text-color; + } + + .dx-gantt-conn-h { + border-top-color: $base-text-color; + } + + .dx-gantt-arrow { + border: 5px solid; + border-color: $base-text-color; + } + + .dx-gantt-tm { + border-left: 1px dashed; + border-left-color: $base-accent; + } + + .dx-gantt-ti { + border-left: 1px dashed; + border-left-color: $base-accent; + border-right: 1px dashed; + border-right-color: $base-accent; + background-color: color.change($base-accent, $alpha: 0.15); + } + + .dx-gantt-altRow, + .dx-gantt-collapsable-row { + background-color: $gantt-collapsable-row-bg; + } +} + +@include gantt-icons-mixin($gantt-icon-color); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss new file mode 100644 index 000000000000..a1b69906b929 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; + +// adduse + +$gantt-header-item-height: null !default; +$gantt-task-title-padding-left: null !default; +$gantt-task-height: null !default; +$gantt-dependency-successor-size: null !default; +$gantt-milestone-size: null !default; + +$gantt-task-wrapper-padding-top: 0 !default; + +@if $size == "default" { + $gantt-header-item-height: 57px !default; + $gantt-task-title-padding-left: 11px !default; + $gantt-task-height: 27px !default; + $gantt-dependency-successor-size: 12px !default; + $gantt-milestone-size: 17px !default; +} + +@else if $size == "compact" { + $gantt-header-item-height: 51px !default; + $gantt-task-title-padding-left: 9px !default; + $gantt-task-height: 20px !default; + $gantt-dependency-successor-size: 10px !default; + $gantt-milestone-size: 14px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss new file mode 100644 index 000000000000..26073453edbc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss @@ -0,0 +1,211 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$datagrid-base-color: $base-text-color !default; + +/** +* $name 15. Background color +* $type color +*/ +$datagrid-base-background-color: $base-bg !default; +$datagrid-border-color: $base-border-color !default; + +/** +* $name 20. Header text color +* $type color +*/ +$datagrid-columnchooser-item-color: $datagrid-base-color !default; +$datagrid-block-separator-bg: null !default; + +/** +* $name 25. Header text weight +* $type select +* $type-values 300|500|700 +*/ +$datagrid-columnchooser-font-weight: 600 !default; + +/** +* $name 35. Draggable header border color +* $type color +*/ +$datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; +$datagrid-drag-header-shadow-color: null !default; +$datagrid-drag-header-second-shadow-color: null !default; +$datagrid-header-drag-bg: $datagrid-base-background-color !default; +$header-filter-color: null !default; + +/** +* $name 51. Selected row background color +* $type color +*/ +$datagrid-selection-bg: $button-default-outlined-hover-bg !default; + +/** +* $name 52. Selected row border color +* $type color +*/ +$datagrid-row-selected-border-color: $datagrid-border-color !default; + +/** +* $name 50. Selected row text color +* $type color +*/ +$datagrid-row-selected-color: $datagrid-base-color !default; + +/** +* $name 65. Focused row text color +* $type color +*/ +$datagrid-row-focused-color: $base-text-color !default; + +/** +* $name 70. Focused row background color +* $type color +*/ +$datagrid-row-focused-bg: null !default; +$datagrid-hover-bg: $base-hover-bg !default; +$datagrid-row-hovered-color: $base-hover-color !default; + +/** +* $name 40. Modified data background color +* $type color +*/ +$datagrid-cell-modified-border-color: $button-success-text-hover-bg !default; +$datagrid-cell-removed-border-color: $datagrid-border-color !default; +$datagrid-row-removed-bg: $datagrid-hover-bg !default; +$datagrid-cell-removed-text-color: null !default; + +/** +* $name 45. Invalid data faded color +* $type color +*/ +$datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default; +$datagrid-nodata-color: $base-label-color !default; + +/** +* $name 90. Group row text color +* $type color +*/ +$datagrid-group-row-color: null !default; + +/** +* $name 95. Group row background color +* $type color +*/ +$datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default; +$datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; + +/** +* $name 105. Highlighted text color +* $type color +*/ +$datagrid-search-color: $base-inverted-text-color !default; +$datagrid-chevron-icon-color: $base-spin-icon-color !default; + +/** +* $name 110. Highlighted text background color +* $type color +*/ +$datagrid-search-bg: $base-accent !default; + +/** +* $name 115. Error row text color +* $type color +*/ +$datagrid-row-error-color: $base-inverted-text-color !default; + +/** +* $name 120. Error row background color +* $type color +*/ +$datagrid-row-error-bg: $base-invalid-color !default; +$datagrid-link-color: $base-link-color !default; + +/** +* $name 75. Focused cell border color +* $type color +*/ +$datagrid-focused-border-color: color.mix($base-bg, $base-accent, 20%) !default; + +/** +* $name 80. Editor background color +* $type color +*/ +$datagrid-editor-bg: color.change($datagrid-base-background-color, $alpha: 0) !default; +$datagrid-drop-highlight-bg: $base-accent !default; +$datagrid-drop-highlight-color: $base-inverted-text-color !default; +$datagrid-columnchooser-bg: $base-element-bg !default; +$datagrid-columnchooser-item-bg: null !default; + +/** +* $name 85. Alternate row background color +* $type color +*/ +$datagrid-row-alternation-bg: null !default; + +/** +* $name 100. Summary item color +* $type color +*/ +$datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; +$datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; +$datagrid-summary-bg: $datagrid-base-background-color !default; +$datagrid-column-separator-bg: $base-accent !default; +$datagrid-filter-row-background-color: null !default; +$datagrid-active-header-filter-icon-color: $base-accent !default; +$datagrid-text-stub-background-image-path: null !default; +$datagrid-filter-panel-color: $base-accent !default; +$datagrid-draggable-column-text-color: null !default; + +$datagrid-text-link-disabled-opacity: $base-disabled-opacity; +$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; + +@if $mode == "light" { + @if $color == "blue"{ + $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: -0.98%, $lightness: 50.00%) !default; + $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; + } + + @if $color == "saas" { + $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: 0%, $lightness: 26.47%) !default; + $datagrid-filter-row-background-color: $base-typography-bg !default; + } + + $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; + $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; + $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; + $header-filter-color: $datagrid-columnchooser-item-color !default; + $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; + $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png') !default; + $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; +} + +@if $mode == "dark" { + $datagrid-row-focused-bg: #0c3b5e !default; + $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; + $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; + $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; + $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; + $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; + $header-filter-color: $datagrid-columnchooser-item-color !default; + $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; + $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; + $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png') !default; + $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; + $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default; +} + +$header-filter-color-empty: $header-filter-color !default; +$datagrid-border: 1px solid !default; + +:root { + --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss new file mode 100644 index 000000000000..346f4c8517f1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss @@ -0,0 +1,1059 @@ +@use "sass:math"; +@use "sass:color"; +@use "sass:selector"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../dropDownEditor" as *; +@use "../textEditor" as *; +@use "../textEditor/sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../popup/colors" as *; +@use "../popup/sizes" as *; +@use "../menu/colors" as *; +@use "../toolbar/colors" as *; +@use "../button/mixins" as *; +@use "../button/sizes" as *; +@use "../../base/button/mixins" as *; +@use "../button/colors" as *; +@use "../validation/colors" as *; +@use "../typography/sizes" as *; + +// adduse +@use "../scrollable"; +@use "../overlay"; +@use "../pagination"; +@use 'variables' as *; +@forward 'variables'; +@use 'layout/cell' as *; +@use "layout/aiChat" as *; + +$fluent-grid-base-border-hidden: 1px solid transparent; +$fluent-grid-base-row-border: 1px solid transparent; +$fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color; +$fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color; +$fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height; + +@mixin grid-base($widget-name) { + @include fluent-grid-base-cell($widget-name); + + .dx-#{$widget-name}, + .dx-#{$widget-name}-container { + .dx-bordered-top-view { + border-top-left-radius: $datagrid-border-radius; + border-top-right-radius: $datagrid-border-radius; + } + + .dx-bordered-bottom-view { + border-bottom-left-radius: $datagrid-border-radius; + border-bottom-right-radius: $datagrid-border-radius; + } + + .dx-menu { + background-color: transparent; + margin-top: math.div(($fluent-grid-base-header-height - $fluent-button-height), 2); + margin-left: 5px !important; // stylelint-disable-line declaration-no-important + height: $fluent-button-height; + + .dx-menu-item { + .dx-menu-item-content { + padding: $fluent-grid-base-menu-item-padding; + + .dx-icon { + @include dx-icon-sizing($fluent-grid-base-filter-icon-size); + + margin: 0 3px; + } + } + } + } + + &.dx-filter-menu { + .dx-menu-item-content { + .dx-icon { + @include dx-icon-sizing($fluent-grid-base-filter-icon-size); + + &.dx-icon-filter-operation-default { + margin-top: 2px; + } + } + } + } + + .dx-#{$widget-name}-filter-row .dx-editor-with-menu { + .dx-menu-item-content { + display: flex; + justify-content: center; + align-items: center; + } + + .dx-texteditor { + .dx-texteditor-container { + .dx-texteditor-input, + .dx-placeholder::before { + padding-left: $fluent-grid-base-texteditor-input-padding; + } + } + } + } + + &.dx-context-menu { + .dx-menu-items-container { + .dx-icon-context-menu-sort-asc { + @include dx-icon(sortuptext); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-context-menu-sort-desc { + @include dx-icon(sortdowntext); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-context-menu-sort-none { + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-fix-column { + @include dx-icon(fixcolumn); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-fix-column-left { + @include dx-icon(fixcolumnleft); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-fix-column-right { + @include dx-icon(fixcolumnright); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-stick-column { + @include dx-icon(stickcolumn); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + + .dx-icon-unfix-column { + @include dx-icon(unfixcolumn); + @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + } + } + } + + .dx-sort-up, + .dx-sort-down, + .dx-header-filter { + @include dx-icon-sizing($fluent-grid-base-header-icon-size, $fluent-grid-base-header-icon-container-size); + } + + .dx-header-filter:not(.dx-header-filter-empty) { + color: $datagrid-active-header-filter-icon-color; + } + + .dx-icon-filter-operation-equals { + @include dx-icon(equal); + } + + .dx-icon-filter-operation-default { + @include dx-icon(find); + } + + .dx-icon-filter-operation-not-equals { + @include dx-icon(notequal); + } + + .dx-icon-filter-operation-less { + @include dx-icon(less); + } + + .dx-icon-filter-operation-less-equal { + @include dx-icon(lessorequal); + } + + .dx-icon-filter-operation-greater { + @include dx-icon(greater); + } + + .dx-icon-filter-operation-greater-equal { + @include dx-icon(greaterorequal); + } + + .dx-icon-filter-operation-contains { + @include dx-icon(contains); + } + + .dx-icon-filter-operation-not-contains { + @include dx-icon(doesnotcontain); + } + + .dx-icon-filter-operation-starts-with { + @include dx-icon(startswith); + } + + .dx-icon-filter-operation-ends-with { + @include dx-icon(endswith); + } + + .dx-icon-filter-operation-between { + @include dx-icon(range); + } + + .dx-column-indicators { + height: $fluent-grid-base-header-line-height; + + .dx-sort-index-icon { + padding-right: 4px; + margin-left: -1px; + font-size: $fluent-grid-base-header-cell-font-size - 1px; + position: relative; + bottom: 1px; + } + + > div { + @include dx-icon-sizing($fluent-grid-base-header-icon-size, $fluent-grid-base-header-icon-container-size); + } + + > span { + margin-left: 4px; + } + } + + .dx-placeholder::before { + font-size: $fluent-grid-base-cell-font-size; + } + } + + .dx-#{$widget-name} { + line-height: inherit; + + .dx-row-alt { + &.dx-row:not(.dx-row-removed) { + border-bottom-color: transparent; + } + + // T838734 + border-top: 1px solid; + border-top-color: $datagrid-row-alternation-bg; + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-alternation-bg; + } + + .dx-link { + color: $datagrid-link-color; + } + + .dx-error-row { + .dx-closebutton { + float: right; + margin: $fluent-grid-base-cell-vertical-padding + 2px; + + @include dx-icon(close); + @include dx-icon-sizing(14px); + } + + .dx-error-message { + padding: $fluent-grid-base-cell-vertical-padding; + padding-right: 35px; + } + } + + .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row { + > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all), + > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending), + > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) { + &.dx-command-edit { + .dx-link:not(.dx-link-icon) { + margin: 0 $fluent-command-edit-text-margin; + min-width: 20px; + } + + &.dx-command-edit-with-icons { + .dx-link { + @include dx-icon-sizing($fluent-command-edit-icon-size); + + margin: 0 $fluent-command-edit-icon-margin; + vertical-align: middle; + } + + .dx-link:not(.dx-link-icon) { + width: auto; + } + } + + .dx-state-disabled { + &.dx-link { + opacity: $datagrid-text-link-disabled-opacity; + } + + &.dx-link-icon { + opacity: $datagrid-icon-link-disabled-opacity; + } + } + } + } + } + + .dx-#{$widget-name}-rowsview .dx-virtual-row > td[style*="text-align: right"]:before { + background-position-y: 49px; + } + + .dx-command-drag { + .dx-#{$widget-name}-drag-icon { + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-drop-highlight { + & > td { + .dx-header-filter { + color: $datagrid-drop-highlight-color; + } + + .dx-checkbox { + .dx-checkbox-icon { + background-color: $datagrid-drop-highlight-color; + color: $datagrid-drop-highlight-bg; + } + } + } + } + } + + .dx-#{$widget-name}-edit-popup { + .dx-popup-content { + padding: 0; + } + + .dx-error-message { + padding: $fluent-grid-base-cell-padding; + } + } + + .dx-#{$widget-name}-edit-popup-form { + padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; + } + + .dx-#{$widget-name}-headers, + .dx-#{$widget-name}-rowsview { + .dx-texteditor-input { + min-height: $fluent-grid-base-header-line-height; + } + + .dx-lookup { + height: auto; + + .dx-lookup-field { + padding-left: $fluent-grid-base-cell-horizontal-padding; + padding-top: $fluent-grid-base-cell-vertical-padding; + padding-bottom: $fluent-grid-base-cell-vertical-padding; + font-size: $fluent-grid-base-cell-font-size; + } + } + + .dx-dropdowneditor-button-visible.dx-dropdowneditor { + &.dx-show-clear-button { + &.dx-invalid, + &.dx-valid, + &.dx-validation-pending { + .dx-texteditor-input { + padding-right: $fluent-dropdowneditor-invalid-badge-size; + } + + &.dx-rtl .dx-texteditor-input { + padding-right: 0; + padding-left: $fluent-dropdowneditor-invalid-badge-size; + } + } + } + + &.dx-invalid, + &.dx-valid, + &.dx-validation-pending { + .dx-texteditor-input { + padding-right: $fluent-dropdowneditor-invalid-badge-size; + } + + &.dx-rtl .dx-texteditor-input { + padding-right: 0; + padding-left: $fluent-dropdowneditor-invalid-badge-size; + } + } + + &.dx-rtl .dx-texteditor-input { + padding-right: 0; + } + } + } + + .dx-editor-cell { + .dx-numberbox-spin-button { + background-color: transparent; + } + + .dx-icon-clear { + left: 0; + } + + .dx-texteditor { + &, + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active { + background: $datagrid-editor-bg; + box-shadow: none; + } + + &:not(.dx-tagbox) .dx-texteditor-input { + background: $datagrid-editor-bg; + font-size: $fluent-grid-base-cell-font-size; + height: $fluent-grid-base-cell-height; + line-height: $fluent-grid-base-cell-height; + margin-top: 0; + } + + &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input { + padding: 0 $fluent-grid-base-cell-horizontal-padding; + } + + .dx-placeholder::before { + padding-right: $fluent-grid-base-cell-horizontal-padding; + padding-left: $fluent-grid-base-cell-horizontal-padding; + } + + &.dx-validation-pending { + .dx-texteditor-input-container { + .dx-texteditor-input { + padding-top: 0; + padding-bottom: 0; + } + } + } + + &:not(.dx-tagbox) .dx-tag-container { + min-height: $fluent-grid-base-cell-height; + padding: 0; + } + + &:not(.dx-editor-filled):not(.dx-editor-outlined) { + .dx-texteditor-input, + .dx-tag-container { + margin-top: 0; + } + } + + .dx-texteditor-buttons-container { + right: 0; + } + + &::after, + &::before { + content: none; + } + + &.dx-rtl, + .dx-rtl & { + .dx-texteditor-buttons-container { + left: 0; + } + } + } + + .dx-dropdowneditor { + background-color: $datagrid-editor-bg; + } + + &.dx-focused .dx-dropdowneditor-icon { + border-radius: 0; + } + + &.dx-editor-inline-block:not(.dx-command-select) { + &::before { + padding-top: $fluent-grid-base-cell-vertical-padding; + padding-bottom: $fluent-grid-base-cell-vertical-padding; + } + } + } + + .dx-#{$widget-name}-column-chooser-list { + .dx-empty-message { + color: $datagrid-columnchooser-message-color; + padding: 0 $fluent-grid-base-column-chooser-horizontal-padding; + } + } + + .dx-#{$widget-name}-column-chooser { + @include dx-base-typography(); + + &.dx-#{$widget-name}-column-chooser-mode-drag { + .dx-popup-content { + padding: $fluent-grid-base-column-chooser-paddings; + + .dx-treeview-search { + margin-bottom: $fluent-grid-base-treeview-search-margin; + } + + .dx-treeview-node { + padding-left: 20px; + } + } + } + + &.dx-#{$widget-name}-column-chooser-mode-select { + .dx-popup-content { + padding: $fluent-grid-base-column-chooser-paddings; + } + + .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list { + .dx-treeview-select-all-item { + padding-inline-start: $fluent-grid-base-treeview-select-all-item-offset; + } + } + } + + .dx-overlay-content { + background-color: $datagrid-columnchooser-bg; + + .dx-popup-title { + background-color: transparent; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; + + .dx-toolbar-label { + font-size: $fluent-m-font-size; + } + } + + .dx-popup-content { + .dx-column-chooser-item { + margin: 2px 2px $fluent-grid-base-column-chooser-item-margin 2px; + background-color: $datagrid-columnchooser-item-bg; + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + font-size: $fluent-grid-base-header-cell-font-size; + padding: $fluent-grid-base-cell-vertical-padding; + line-height: $fluent-grid-base-header-line-height; + box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow; + } + } + } + } + + .dx-#{$widget-name}-drag-header { + border-color: $datagrid-drag-header-border-color; + box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow; + color: $datagrid-columnchooser-item-color; + font-weight: $datagrid-columnchooser-font-weight; + padding: $fluent-grid-base-header-cell-vertical-padding; + background-color: $datagrid-header-drag-bg; + line-height: $fluent-grid-base-header-line-height; + font-size: $fluent-grid-base-header-cell-font-size; + } + + .dx-#{$widget-name}-columns-separator { + background-color: $datagrid-column-separator-bg; + } + + .dx-#{$widget-name}-columns-separator-transparent { + background-color: transparent; + } + + .dx-#{$widget-name}-focus-overlay { + &::after { + content: ""; + position: absolute; + bottom: 0; + height: 2px; + background-color: $datagrid-focused-border-color; + left: 0; + right: 1px; + } + + &.dx-focused-cell-modified::after { + background-color: $button-success-hover-bg; + } + + &.dx-focused-cell-invalid::after { + background-color: $button-danger-hover-bg; + } + } + + .dx-data-row.dx-state-hover { + &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) { + & > .dx-#{$widget-name}-readonly .dx-texteditor { + .dx-texteditor-input { + background-color: $datagrid-hover-bg; + color: $datagrid-row-hovered-color; + } + } + } + } + + .dx-#{$widget-name}-headers { + color: $datagrid-columnchooser-item-color; + touch-action: pinch-zoom; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + pointer-events: none; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + .dx-#{$widget-name}-table { + .dx-#{$widget-name}-borders & { + border-bottom-width: 1px; + } + + .dx-row { + > td { + .dx-sort { + color: $header-filter-color-empty; + } + + &:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover { + .dx-#{$widget-name}-text-content { + color: $datagrid-base-color; + } + } + } + } + } + } + + .dx-#{$widget-name}-filter-row { + background-color: $datagrid-filter-row-background-color; + + .dx-menu { + margin-left: 0; + + .dx-menu-horizontal { + .dx-menu-items-container { + height: 100%; + position: absolute; + + .dx-menu-item-wrapper { + height: 100%; + } + } + } + + .dx-overlay-content { + color: $menu-color; + } + } + + .dx-filter-modified { + background-color: $datagrid-cell-modified-border-color; + } + + td .dx-editor-container .dx-filter-range-content { + padding: + $fluent-grid-base-cell-vertical-padding + $fluent-grid-base-cell-horizontal-padding + $fluent-grid-base-cell-vertical-padding + $fluent-grid-base-texteditor-input-padding; + } + } + + .dx-#{$widget-name}-filter-range-overlay { + .dx-overlay-content { + overflow: inherit; + background-color: $datagrid-filter-row-background-color; + box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow; + + .dx-texteditor { + &.dx-state-focused::after, + &.dx-state-hover::after { + top: auto; + bottom: 0; + } + + .dx-texteditor-input { + font-size: $fluent-grid-base-cell-font-size; + height: $fluent-grid-base-cell-height + 1; + padding-right: $fluent-filter-row-between-editor-padding; + padding-left: $fluent-filter-row-between-editor-padding; + } + + .dx-placeholder::before { + padding-left: $fluent-filter-row-between-editor-padding; + } + } + + .dx-invalid-message.dx-overlay-wrapper { + display: none; + } + } + } + + .dx-#{$widget-name}-header-panel { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + padding: $fluent-grid-base-header-panel-padding; + + .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon { + border-radius: $fluent-base-border-radius; + } + } + + .dx-icon-column-chooser { + @include dx-icon(columnchooser); + } + + .dx-#{$widget-name}-addrow-button { + .dx-icon-edit-button-addrow { + @include dx-icon(add); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-cancel-button { + .dx-icon-edit-button-cancel { + @include dx-icon(revert); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-save-button { + .dx-icon-edit-button-save { + @include dx-icon(save); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-apply-button { + .dx-icon-apply-filter { + @include dx-icon(filter); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-datagrid-export-menu { + .dx-menu-item .dx-icon-xlsxfile { + @include dx-icon-sizing($fluent-base-icon-size); + } + + .dx-menu-item .dx-icon-exportselected { + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-#{$widget-name}-adaptive-more { + vertical-align: middle; + + @include dx-icon-sizing($fluent-base-icon-size); + + color: $base-icon-color; + } + + .dx-row.dx-row-focused { + .dx-#{$widget-name}-adaptive-more { + color: inherit; + } + } + + .dx-#{$widget-name}-rowsview { + border-top: 1px solid; + border-top-color: $fluent-grid-base-border-color; + + .dx-#{$widget-name}-headers + &, + &.dx-#{$widget-name}-after-headers { + border-top: none; + } + + .dx-row { + border-top: $fluent-grid-base-row-border; + border-bottom: $fluent-grid-base-row-border; + + &:focus { + outline: none; + } + } + + .dx-data-row, + .dx-adaptive-detail-row { + &, + &.dx-selection, + &.dx-selection:hover { + .dx-validator { + &.dx-#{$widget-name}-invalid, + &.dx-invalid { + background-color: $datagrid-row-invalid-faded-border-color; + } + } + } + } + + .dx-overlay-wrapper.dx-invalid-message { + .dx-overlay-content { + padding: 9px 17px 9px; + background-color: $validation-message-background-color; + color: $validation-message-color; + } + } + + .dx-adaptive-detail-row { + .dx-field-item-label { + padding-top: 0; + } + + .dx-field-item-content { + line-height: $fluent-grid-base-adaptive-column-height; + min-height: $fluent-grid-base-adaptive-column-height; + font-size: $fluent-grid-base-cell-font-size; + + &.dx-focused { + padding: 0; + } + } + + .dx-texteditor-input { + font-size: $fluent-grid-base-cell-font-size; + height: $fluent-grid-base-adaptive-column-height; + line-height: $fluent-grid-base-adaptive-column-height; + } + + .dx-texteditor::after, + .dx-texteditor::before { + content: none; + } + + .dx-texteditor.dx-editor-outlined { + box-shadow: none; + } + } + + .dx-item-modified { + background-color: $datagrid-cell-modified-border-color; + } + + .dx-row-focused { + &.dx-data-row { + & .dx-command-edit .dx-link { + color: $datagrid-row-focused-color; + } + + & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid), + & .dx-command-edit .dx-link { + & .dx-#{$widget-name}-group-opened, + & .dx-#{$widget-name}-group-closed { + color: $datagrid-row-focused-color; + } + } + } + + &.dx-group-row { + background-color: $datagrid-row-focused-bg; + color: $datagrid-row-focused-color; + + & .dx-#{$widget-name}-group-opened, + & .dx-#{$widget-name}-group-closed { + color: $datagrid-row-focused-color; + } + } + } + + &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content { + padding-right: 0; + } + + td { + &.dx-validation-pending { + > .dx-pending-indicator { + @include dx-pending-indicator-fluent(); + @include texteditor-validation-icon-offset(); + + right: $fluent-invalid-badge-size; + background-color: transparent; + + @at-root #{selector.append(".dx-rtl", &)}, + .dx-rtl & { + left: $fluent-invalid-badge-size; + } + } + } + } + + &.dx-#{$widget-name}-sticky-columns { + .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input { + height: $fluent-grid-base-cell-height - 2px; + line-height: $fluent-grid-base-cell-height - 2px; + } + + .dx-master-detail-row > .dx-master-detail-cell { + > .dx-#{$widget-name}-master-detail-container { + padding: $grid-masterdetail-padding; + } + } + } + } + + .dx-#{$widget-name}-search-text { + color: $datagrid-search-color; + background-color: $datagrid-search-bg; + } + + .dx-#{$widget-name}-nodata { + color: $datagrid-nodata-color; + font-size: $fluent-grid-base-nodata-font-size; + } + + .dx-#{$widget-name}-bottom-load-panel { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + background-color: $datagrid-base-background-color; + } + + .dx-#{$widget-name}-summary-item { + color: $datagrid-summary-color; + } + + .dx-#{$widget-name}-total-footer { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + + > .dx-#{$widget-name}-content { + padding: 0; + } + } + + .dx-#{$widget-name}-revert-tooltip { + .dx-overlay-content { + background-color: transparent; + min-width: inherit; + } + + .dx-revert-button { + @include dx-button-sizing(2px, 2px, 2px, 18px, 0); + + border-radius: $button-border-radius; + + @include dx-button-styling-variant( + $button-danger-bg, + $button-danger-color, + $button-danger-color, + $button-danger-color, + $button-danger-bg, + $button-danger-bg, + $button-danger-bg, + $button-danger-color + ); + + margin: 0 0 0 1px; + height: $fluent-grid-base-cell-height; + box-shadow: none; + min-width: inherit; + + &.dx-button-has-icon:not(.dx-button-has-text) { + border-radius: 2px; + } + + &.dx-state-hover { + box-shadow: none; + } + } + } + + .dx-rtl { + .dx-#{$widget-name}, + .dx-#{$widget-name}-container { + .dx-menu { + .dx-menu-item-has-submenu.dx-menu-item-has-icon { + .dx-icon { + margin: 0 3px; + } + } + } + } + + .dx-#{$widget-name}-rowsview { + &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content { + padding-left: 0; + } + } + } + + .dx-header-filter-menu { + .dx-popup-content { + padding: 8px 8px 0 8px; + } + } + + .dx-#{$widget-name}-filter-panel { + background-color: $datagrid-base-background-color; + padding: 18px $fluent-grid-base-cell-horizontal-padding; + + .dx-#{$widget-name}-filter-panel-text, + .dx-#{$widget-name}-filter-panel-clear-filter { + color: $datagrid-filter-panel-color; + font-size: $fluent-grid-base-cell-font-size; + line-height: $fluent-grid-base-checkbox-size; + } + + .dx-icon-filter { + color: $datagrid-filter-panel-color; + + @include dx-icon-sizing($fluent-filter-panel-icon-size); + } + } + + .dx-adaptive-item-text { + padding-left: $fluent-filled-texteditor-input-horizontal-padding; + padding-right: $fluent-filled-texteditor-input-horizontal-padding; + &.dx-cell-modified, + &.dx-#{$widget-name}-invalid { + padding-top: 0; + padding-bottom: 0; + } + } + + .dx-#{$widget-name}-dragview { + border-radius: $datagrid-border-radius; + + .dx-#{$widget-name}-borders { + border-radius: $datagrid-border-radius; + } + } + + .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column { + opacity: 1; + color: $datagrid-draggable-column-text-color; + } + + .dx-command-ai-header-content { + max-width: calc(100% - ($fluent-button-height - $fluent-grid-base-cell-horizontal-padding + $fluent-grid-base-command-ai-header-button-offset)); + + .dx-#{$widget-name}-text-content { + padding-left: $fluent-grid-base-command-ai-text-content-padding; + } + + .dx-icon-chatsparkleoutline { + @include dx-icon-sizing($fluent-grid-base-command-ai-chatsparkleoutline-icon-size); + } + } + + .dx-command-ai-header-button { + left: auto; + right: $fluent-grid-base-command-ai-header-button-offset; + } + + td[style*="text-align: right"] .dx-command-ai-header-button { + left: $fluent-grid-base-command-ai-header-button-offset; + right: auto; + } + + .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container { + height: $fluent-grid-base-ai-prompt-editor-progressbar-height; + border-radius: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss new file mode 100644 index 000000000000..0a040ed93e61 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss @@ -0,0 +1,118 @@ +@use "../sizes" as *; + +// adduse + +/** +* $name 15. Border radius +* $type text +*/ +$datagrid-border-radius: 0 !default; + +$fluent-grid-base-cell-height: null !default; +$fluent-grid-base-header-height: null !default; +$fluent-grid-base-cell-line-height: null !default; +$fluent-grid-base-cell-font-size: null !default; +$fluent-grid-base-checkbox-size: null !default; +$fluent-grid-base-cell-horizontal-padding: null !default; +$fluent-grid-base-texteditor-input-padding: null !default; +$fluent-grid-base-menu-item-padding: null !default; +$fluent-grid-base-column-chooser-horizontal-padding: null !default; +$fluent-grid-base-column-chooser-paddings: null !default; +$fluent-grid-base-header-panel-padding: null !default; +$fluent-grid-base-grouppanel-item-margin: null !default; +$fluent-grid-base-command-edit-column-width: null !default; +$fluent-grid-base-command-edit-column-with-icons-width: null !default; +$fluent-grid-base-adaptive-column-height: null !default; +$fluent-grid-base-treeview-search-margin: null !default; +$fluent-grid-base-nodata-font-size: null !default; +$fluent-filter-row-between-editor-padding: null !default; +$fluent-command-column-additional-right-margin: null !default; +$fluent-grid-base-treeview-select-all-item-offset: null !default; + +$fluent-grid-base-header-line-height: 18px !default; +$fluent-grid-base-header-icon-size: null !default; +$fluent-grid-base-header-icon-container-size: 20px !default; +$fluent-grid-base-column-chooser-item-margin: 8px !default; +$fluent-command-edit-icon-margin: 4px !default; +$fluent-command-edit-text-margin: 2px !default; + +$fluent-command-edit-icon-size: null !default; +$fluent-filter-panel-icon-size: null !default; + +$fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default; +$fluent-grid-base-command-ai-chatsparkleoutline-icon-size: null !default; +$fluent-grid-base-command-ai-text-content-padding: null !default; +$fluent-grid-base-command-ai-header-button-offset: null !default; +$fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; + +@if $size == "default" { + $fluent-grid-base-cell-height: 48px !default; + $fluent-grid-base-header-height: 48px !default; + $fluent-grid-base-cell-line-height: 20px !default; + $fluent-grid-base-cell-font-size: 14px !default; + + $fluent-grid-base-checkbox-size: 18px !default; + $fluent-grid-base-cell-horizontal-padding: 16px !default; + + $fluent-grid-base-texteditor-input-padding: 40px !default; + $fluent-grid-base-menu-item-padding: 11px 4px !default; + $fluent-grid-base-column-chooser-horizontal-padding: 24px !default; + $fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default; + $fluent-grid-base-header-panel-padding: 8px 0 !default; + $fluent-grid-base-grouppanel-item-margin: 6px !default; + + $fluent-grid-base-command-edit-column-width: 115px !default; + $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; + $fluent-grid-base-adaptive-column-height: 40px !default; + $fluent-grid-base-treeview-search-margin: 10px !default; + $fluent-grid-base-nodata-font-size: 17px !default; + + $fluent-filter-row-between-editor-padding: 12px !default; + $fluent-command-column-additional-right-margin: 0 !default; + + $fluent-grid-base-treeview-select-all-item-offset: 34px !default; + + $fluent-grid-base-header-icon-size: 20px !default; + $fluent-command-edit-icon-size: 20px !default; + $fluent-filter-panel-icon-size: 20px !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 20px !default; + $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default; + $fluent-grid-base-command-ai-header-button-offset: 8px !default; +} + +@else if $size == "compact" { + $fluent-grid-base-cell-height: 36px !default; + $fluent-grid-base-header-height: 36px !default; + $fluent-grid-base-cell-line-height: 16px !default; + $fluent-grid-base-cell-font-size: 12px !default; + + $fluent-grid-base-checkbox-size: 16px !default; + $fluent-grid-base-cell-horizontal-padding: 11px !default; + + $fluent-grid-base-texteditor-input-padding: 36px !default; + $fluent-grid-base-menu-item-padding: 8px 4px !default; + $fluent-grid-base-column-chooser-horizontal-padding: 8px !default; + $fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default; + $fluent-grid-base-header-panel-padding: 6px 0 !default; + $fluent-grid-base-grouppanel-item-margin: 6px !default; + + $fluent-grid-base-command-edit-column-width: 105px !default; + $fluent-grid-base-command-edit-column-with-icons-width: 80px !default; + $fluent-grid-base-adaptive-column-height: 26px !default; + $fluent-grid-base-treeview-search-margin: 10px !default; + $fluent-grid-base-nodata-font-size: 14px !default; + + $fluent-filter-row-between-editor-padding: 8px !default; + $fluent-command-column-additional-right-margin: 2px !default; + + $fluent-grid-base-treeview-select-all-item-offset: 28px !default; + + $fluent-grid-base-header-icon-size: 16px !default; + $fluent-command-edit-icon-size: 16px !default; + $fluent-filter-panel-icon-size: 16px !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 16px !default; + $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default; + $fluent-grid-base-command-ai-header-button-offset: 6px !default; +} + +$fluent-grid-base-header-cell-font-size: $fluent-grid-base-cell-font-size !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss new file mode 100644 index 000000000000..1ec5dd5b0875 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss @@ -0,0 +1,10 @@ +@use "sass:math"; +@use "colors" as *; +@use "sizes" as *; + +$fluent-grid-base-border-color: $datagrid-border-color; +$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)); +$fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; +$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)); +$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding; +$grid-masterdetail-padding: 16px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss new file mode 100644 index 000000000000..37b6b5f8c909 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss @@ -0,0 +1,19 @@ +@use '../../../../base/gridBase/layout/aiChat/mixins' as *; +@use '../../../colors' as *; +@use '../../../button/colors' as *; +@use './sizes' as *; +@use "../../../../base/widget" as *; +@include ai-chat-messagelist-empty( + $button-default-bg, + $button-default-outlined-hover-bg, +); +@include ai-chat-message-pending($base-accent); +@include ai-chat-message-success($base-success); +@include ai-chat-message-error($base-danger); +@include ai-chat-messagebubble-border($base-border-color); +@include ai-chat-message-regenerate-button($button-normal-active-bg); +@include ai-chat-message-icon($ai-chat-message-icon-size); + +.dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button { + @include disabled-widget(); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss new file mode 100644 index 000000000000..57e3442e5062 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss @@ -0,0 +1,3 @@ +@use '../../../sizes' as *; + +$ai-chat-message-icon-size: $fluent-base-icon-size; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss new file mode 100644 index 000000000000..ab0a39230ccc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss @@ -0,0 +1,543 @@ +/* stylelint-disable no-duplicate-selectors */ +@use "sass:math"; +@use "../colors" as *; +@use "../../colors" as *; +@use "../sizes" as *; +@use "../../sizes" as *; +@use "../../textEditor" as *; +@use "../../textEditor/sizes" as *; +@use "../variables" as *; + +@mixin fluent-grid-base-cell($widget-name) { + + // #region overflow + + // (0,1,0) + .dx-cell-modified, + .dx-#{$widget-name}-invalid { + overflow: hidden; + text-overflow: ellipsis; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select { + overflow: visible; + } + + // #endregion + + // #region sizing + + // (0,1,0) + .dx-command-adaptive { + width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + } + + // (0,2,0) + .dx-#{$widget-name} .dx-command-drag { + width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select { + width: $fluent-grid-base-command-select-column-width; + min-width: $fluent-grid-base-command-select-column-width; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit { + width: $fluent-grid-base-command-edit-column-width; + min-width: $fluent-grid-base-command-edit-column-width; + } + + // (0,8,1) - (0,10,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit.dx-command-edit-with-icons, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons { + width: $fluent-grid-base-command-edit-column-with-icons-width; + min-width: $fluent-grid-base-command-edit-column-with-icons-width; + } + + // #endregion + + // #region border + + // (0,2,1) + .dx-#{$widget-name} .dx-row-lines > td { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,2,1) + .dx-#{$widget-name} .dx-column-lines > td { + border-left: $datagrid-border; + border-left-color: $datagrid-border-color; + border-right: $datagrid-border; + border-right-color: $datagrid-border-color; + } + + // (0,3,0) - (0,4,0) + .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-master-detail-row .dx-master-detail-cell:not(.dx-row-lines) { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td { + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row > td { + border-top: $datagrid-border; + border-top-color: $datagrid-border-color; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview .dx-row-removed.dx-row-lines > td { + border-top: 1px solid; + border-top-color: $datagrid-cell-removed-border-color; + border-bottom: 1px solid; + border-bottom-color: $datagrid-cell-removed-border-color; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview .dx-row-removed:not(.dx-row-lines) > td { + border-top: 1px solid; + border-top-color: $datagrid-hover-bg; + } + + // (0,3,1) - (0,4,2) + .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > td, + .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > tr:first-child > td { + border-bottom: 1px solid; + border-bottom-color: $datagrid-row-focused-bg; + } + + // (0,4,1) + .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row:first-child > td { + border-top-width: 0; + border-bottom: $datagrid-border; + border-bottom-color: $datagrid-border-color; + } + + // (0,4,1) - (0,5,1) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row-removed.dx-row-lines > td, + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-lines.dx-edit-row > td { + border-top-width: 0; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-#{$widget-name}-group-space { + border-right-color: $datagrid-selection-bg; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-pointer-events-none, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-pointer-events-none, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-pointer-events-none, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-pointer-events-none { + border-left-color: $datagrid-row-selected-border-color; + border-right-color: $datagrid-row-selected-border-color; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-lines) > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover:not(.dx-row-lines) > td { + border-bottom: 1px solid; + border-bottom-color: $datagrid-selection-bg; + border-top: 1px solid; + border-top-color: $datagrid-selection-bg; + } + + // (0,5,1) - (0,6,1) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused).dx-row-lines > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover.dx-row-lines > td { + border-bottom-color: $datagrid-row-selected-border-color; + } + + // (0,7,1) + .dx-widget:not(.dx-rtl) .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td:not( + .dx-#{$widget-name}-first-cell, + .dx-#{$widget-name}-hidden-column, + .dx-command-adaptive-hidden, + .dx-#{$widget-name}-sticky-column-border-left, + .dx-#{$widget-name}-column-no-border, + .dx-pointer-events-none + ) { + border-left: 1px solid; + border-left-color: $datagrid-border-color; + } + + // (0,10,1) + .dx-rtl .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused).dx-#{$widget-name}-group-space { + border-left-color: $datagrid-hover-bg; + border-right-color: transparent; + } + + // RTL + + // (0,4,1) - (0,5,2) + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td { + border-right-color: $datagrid-row-selected-border-color; + } + + // (0,5,1) - (0,6,2) + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td.dx-pointer-events-none, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td.dx-pointer-events-none, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td.dx-pointer-events-none, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td.dx-pointer-events-none { + border-left-color: $datagrid-row-selected-border-color; + } + + // (0,6,1) + .dx-rtl .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td:not( + .dx-#{$widget-name}-first-cell, + .dx-#{$widget-name}-hidden-column, + .dx-command-adaptive-hidden, + .dx-#{$widget-name}-sticky-column-border-right, + .dx-#{$widget-name}-column-no-border, + .dx-pointer-events-none + ) { + border-right: 1px solid; + border-right-color: $datagrid-border-color; + } + + // (0,6,1) - (0,7,2) + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td:not(.dx-focused).dx-#{$widget-name}-group-space, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td:not(.dx-focused).dx-#{$widget-name}-group-space, + .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space { + border-left-color: $datagrid-selection-bg; + } + + // #endregion + + // #region border-radius + + // (0,4,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:first-child { + border-top-left-radius: $datagrid-border-radius; + } + + // (0,4,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:last-child { + border-top-right-radius: $datagrid-border-radius; + } + + // #endregion + + // #region padding + + // (0,1,0) + .dx-cell-modified, + .dx-#{$widget-name}-invalid { + padding: $fluent-grid-base-cell-vertical-padding 0 $fluent-grid-base-cell-vertical-padding 0; + } + + // (0,1,0) + .dx-editor-cell { + padding-top: 0; + padding-bottom: 0; + } + + // (0,2,1) + .dx-#{$widget-name} .dx-row > td { + padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; + } + + // (0,2,1) + .dx-#{$widget-name}-rowsview td.dx-validation-pending { + padding: 0; + } + + // (0,3,0) + .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-master-detail-cell { + padding: $grid-masterdetail-padding; + } + + // (0,3,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td { + padding-top: $fluent-grid-base-header-cell-vertical-padding; + padding-bottom: $fluent-grid-base-header-cell-vertical-padding; + } + + // (0,3,1) + .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-#{$widget-name}-filter-row > td { + padding-top: 0; + padding-bottom: 0; + } + + // (0,3,1) + .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, + .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid { + padding: $fluent-grid-base-cell-padding; + padding-right: $fluent-texteditor-invalid-badge-size; + } + + // (0,4,0) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-master-detail-row > .dx-master-detail-cell { + padding: 0; + } + + // (0,4,1) + .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, + .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid, + .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified, + .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid { + padding-left: $fluent-texteditor-invalid-badge-size; + padding-right: $fluent-grid-base-cell-horizontal-padding; + } + + // (0,5,1) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) { + padding-top: $fluent-grid-base-cell-vertical-padding + 1px; + } + + // (0,5,1) + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-edit-row > td.dx-command-edit { + padding-top: $fluent-grid-base-cell-vertical-padding - 1px; + } + + // (0,6,1) + .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td { + padding-top: 12px; + padding-bottom: 12px; + } + + // (0,6,1) + .dx-row.dx-group-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell), + .dx-row.dx-master-detail-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) { + padding-top: $fluent-grid-base-cell-vertical-padding; + } + + // (0,7,0) + .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row .dx-command-select { + padding-bottom: math.div($fluent-grid-base-header-height - $fluent-grid-base-checkbox-size, 2); + } + + // (0,8,1) T1303478 + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell), + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) { + padding-bottom: $fluent-grid-base-cell-vertical-padding - 1px; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space { + padding: 0 4px 0 8px; + } + + // (0,8,1) - (0,10,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-editor-cell:not(.dx-command-select), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select) { + padding-right: 0; + } + + // (0,9,1) - (0,11,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable) { + padding-left: 0; + } + + // #endregion + + // #region background + + // (0,2,1) + .dx-#{$widget-name} .dx-row-alt > td { + background-color: $datagrid-row-alternation-bg; + } + + // (0,2,1) + .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td { + background-color: $datagrid-drop-highlight-bg; + } + + // (0,2,1) + .dx-#{$widget-name}-rowsview .dx-row-removed > td { + background-color: $datagrid-row-removed-bg; + } + + // (0,4,0) + .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) > .dx-#{$widget-name}-group-space, + .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) .dx-master-detail-cell { + background-color: $datagrid-master-detail-cell-bg; + } + + // (0,4,0) - (0,6,0) + .dx-#{$widget-name}-rowsview .dx-data-row:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-data-row.dx-selection:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-data-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified, + .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified { + background-color: $datagrid-cell-modified-border-color; + } + + // (0,4,1) + .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column, + .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-left, + .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-right { + background-color: $datagrid-filter-row-background-color; + } + + // (0,4,1) - (0,5,2) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td { + background-color: $datagrid-selection-bg; + } + + // (0,5,1) + .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover { + background-color: $datagrid-hover-bg; + } + + // (0,6,1) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) { + background-color: $datagrid-row-focused-bg; + } + + // (0,7,1) - (0,7,2) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid), + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) { + background-color: $datagrid-base-background-color; + } + + // (0,8,1) + .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) { + background-color: $datagrid-hover-bg; + } + + // (0,8,1) + .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td.dx-pointer-events-none { + background-color: transparent; + } + + // #endregion + + // #region color + + // (0,2,1) + .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td { + color: $datagrid-drop-highlight-color; + } + + // (0,2,1) + .dx-#{$widget-name}-rowsview .dx-row-removed > td { + color: $datagrid-cell-removed-text-color; + } + + // (0,4,1) - (0,5,2) + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td, + .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td { + color: $datagrid-row-selected-color; + } + + // (0,6,1) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) { + color: $datagrid-row-focused-color; + } + + // (0,7,1) + .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td { + color: $datagrid-row-hovered-color; + } + + // (0,7,1) - (0,7,2) + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid), + .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) { + color: $datagrid-base-color; + } + + // #endregion + + // #region typography + + // (0,2,1) + .dx-#{$widget-name} .dx-row > td { + font-size: $fluent-grid-base-cell-font-size; + line-height: $fluent-grid-base-cell-line-height; + } + + // (0,3,1) + .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td { + line-height: $fluent-grid-base-header-line-height; + font-weight: $datagrid-columnchooser-font-weight; + font-size: $fluent-grid-base-header-cell-font-size; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select { + line-height: 1; + } + + // (0,7,1) - (0,9,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending) .dx-#{$widget-name}-group-space, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand, + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space { + line-height: 0; + } + + // #endregion + + // #region vertical-align + + // (0,6,1) - (0,8,1) + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending), + .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) { + vertical-align: middle; + } + + // (0,6,1) + .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td { + vertical-align: bottom; + } + + // #endregion + + // #region position + + // (0,2,1) + .dx-#{$widget-name}-rowsview td.dx-validation-pending { + position: relative; + } + + // #endregion +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss new file mode 100644 index 000000000000..4fb1036c4d05 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$htmleditor-border-color: $base-border-color !default; +$htmleditor-toolbar-border-color: $base-separator-color !default; +$htmleditor-variable-bg: color.change($base-accent, $alpha: 0.15) !default; +$htmleditor-resize-frame-border-color: $base-accent !default; +$htmleditor-resize-handle-bg: $base-accent !default; +$htmleditor-mention-bg: $base-selected-bg !default; +$htmleditor-table-border-color: $base-border-color !default; +$htmleditor-fileuploader-input-wrapper-border-color: $base-border-color !default; +$htmleditor-fileuploader-input-wrapper-bg-color: $base-typography-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss new file mode 100644 index 000000000000..10c60a1a897c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss @@ -0,0 +1,330 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../button/colors" as *; +@use "../buttonGroup/colors" as *; +@use "../textEditor/colors" as *; +@use "../textEditor/index" as *; +@use "../toolbar/sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../fileUploader/sizes" as *; +@use "../popup/sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/htmlEditor"; + +// adduse + +.dx-htmleditor { + border-color: transparent; + position: relative; + + .dx-htmleditor-toolbar-wrapper { + padding: 0 $fluent-htmleditor-toolbar-padding; + position: relative; + } + + &::before { + left: 0; + right: 0; + bottom: 0; + height: 0; + width: 100%; + content: ''; + position: absolute; + z-index: 2; + transform: scale(0); + } + + &.dx-state-readonly, + &.dx-state-disabled { + .dx-htmleditor-toolbar-wrapper::before { + position: absolute; + top: 1px; + bottom: 1px; + left: 1px; + right: 1px; + z-index: 2; + background-color: color.change($base-bg, $alpha: 0.4); + content: ''; + pointer-events: none; + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom: 2px solid; + border-bottom-color: $texteditor-indicator-border-color; + transform: scale(1); + transition-property: transform; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + } + } + + &.dx-htmleditor-outlined { + @include texteditor-outlined-styling(); + + .dx-htmleditor-content { + margin: 1px; + margin-inline-start: 0; + } + + .dx-htmleditor-toolbar-wrapper + .dx-quill-container .dx-htmleditor-content { + margin-top: 0; + } + } + + &.dx-htmleditor-filled { + @include texteditor-filled-styling(); + } + + &.dx-htmleditor-underlined { + &::after { + left: 0; + right: 0; + bottom: 0; + height: 0; + width: 100%; + content: ''; + position: absolute; + } + + @include texteditor-underlined-styling(); + + .dx-htmleditor-content { + padding-inline-start: 0; + } + } + + &.dx-state-disabled { + opacity: 1; + } +} + +.dx-invalid.dx-htmleditor { + &.dx-state-hover { + &::after { + border-bottom-color: $texteditor-invalid-faded-border-color; + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom: 2px solid; + border-bottom-color: $texteditor-invalid-focused-border-color; + } + } +} + +.dx-htmleditor-content { + line-height: $fluent-line-height; + padding: $fluent-html-editor-vertical-padding $fluent-html-editor-horizontal-padding; + + &.ql-blank::before { // stylelint-disable-line selector-class-pattern + color: $texteditor-placeholder-color; + } + + code, + .ql-code-block-container { // stylelint-disable-line selector-class-pattern + color: color.change($base-text-color, $alpha: 0.8); + } + + blockquote { + color: color.change($base-text-color, $alpha: 0.8); + border-inline-start-color: $htmleditor-toolbar-border-color; + } + + .dx-variable { + & > span { + background: $htmleditor-variable-bg; + } + } + + td, + th { + border-color: $htmleditor-table-border-color; + } +} + +@mixin dx-htmleditor-button-states($default-color, $hover-color, $focused-color) { + background-color: $default-color; + + &.dx-state-hover { + background-color: $hover-color; + } + + &.dx-state-focused { + background-color: $focused-color; + } +} + +.dx-htmleditor-toolbar { + background-color: transparent; +} + +.dx-htmleditor-toolbar-format { + &.dx-dropdowneditor.dx-editor-filled { + background-color: transparent; + + &::after { + border-bottom-color: transparent; + } + } + + &.dx-color-format, + &.dx-background-format { + .dx-button-content { + padding-bottom: $fluent-button-vertical-padding - 3px; + } + } + + &.dx-size-format { + width: $fluent-toolbar-size-editor-width; + } +} + +.dx-htmleditor-toolbar-separator { + height: math.div($fluent-toolbar-height, 2); + border-inline-start-color: $htmleditor-toolbar-border-color; +} + +.dx-htmleditor-toolbar-menu-separator { + border-top-color: $htmleditor-toolbar-border-color; + margin-top: $fluent-html-editor-toolbar-menu-separator-margin; + margin-bottom: $fluent-html-editor-toolbar-menu-separator-margin; +} + +.dx-resize-frame { + border-color: $htmleditor-resize-frame-border-color; + + .dx-resizable-handle-corner-top-right, + .dx-resizable-handle-corner-top-left, + .dx-resizable-handle-corner-bottom-right, + .dx-resizable-handle-corner-bottom-left { + background-color: $htmleditor-resize-handle-bg; + } + + .dx-resizable-handle-top, + .dx-resizable-handle-left, + .dx-resizable-handle-right, + .dx-resizable-handle-bottom { + &::after { + background-color: $htmleditor-resize-handle-bg; + } + } +} + +.dx-htmleditor-add-image-popup > .dx-overlay-content > .dx-popup-content { + .dx-collection .dx-field-item:not(.dx-last-col) { + padding-inline-end: $fluent-html-editor-add-image-dialog-base-padding; + } + + .dx-fix-ratio-container { + .dx-textbox { + width: calc(100% - $fluent-button-height - $fluent-html-editor-add-image-dialog-base-padding); + } + + .dx-buttongroup { + margin-inline-start: $fluent-html-editor-add-image-dialog-base-padding; + width: $fluent-button-height; + margin-top: math.div($fluent-base-inline-widget-height - $fluent-button-height, 2); + } + } + + .dx-collection .dx-field-item:not(.dx-first-col) { + padding-inline-start: 0; + } + + .dx-tabs { + padding: 0 $fluent-html-editor-add-image-dialog-tabs-padding; + } + + .dx-fileuploader-input-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: $fluent-html-editor-add-image-dialog-fileuploader-padding; + border-width: $fluent-html-editor-fileuploader-input-wrapper-border-size; + border-style: dashed; + border-color: $htmleditor-fileuploader-input-wrapper-border-color; + border-radius: $fluent-html-editor-fileuploader-input-wrapper-border-radius; + background-color: $htmleditor-fileuploader-input-wrapper-bg-color; + + &::after, + &::before { + content: none; + } + + .dx-fileuploader-input-label { + text-align: center; + border-width: 0; + } + } +} + +.dx-htmleditor-add-image-popup { + .dx-fileuploader-dragover { + .dx-fileuploader-input { + padding-top: $fluent-fileuploader-vertical-padding; + padding-bottom: $fluent-fileuploader-vertical-padding + 1px; + } + + .dx-fileuploader-content { + background-color: color.change($htmleditor-border-color, $alpha: 0.8); + } + } +} + +.dx-formdialog-field-target .dx-field-item-content { + text-align: start; +} + +.dx-mention { + background-color: $htmleditor-mention-bg; +} + +.dx-suggestion-list-wrapper { + @include dx-dropdownlist-list-appearance(); +} + +.dx-table-resize-frame { + > .dx-draggable-dragging + .dx-htmleditor-highlighted-column, + > .dx-draggable-dragging + .dx-htmleditor-highlighted-row { + background-color: color.change($base-accent, $alpha: 0.5); + } +} + +.dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content { + box-shadow: $fluent-popup-content-shadow; +} + +.dx-aidialog-controls { + gap: $fluent-aidialog-selects-gap; + + .dx-selectbox { + max-width: calc(50% - $fluent-aidialog-selects-gap * 0.5); + } +} + +.dx-aidialog-content { + padding: $fluent-aidialog-content-padding; + gap: $fluent-aidialog-content-gap; +} + +.dx-aidialog { + .dx-pending-indicator { + @include dx-pending-indicator-centered(); + } + + &.dx-popup-wrapper > .dx-overlay-content { + border-radius: $fluent-aidialog-border-radius; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss new file mode 100644 index 000000000000..d21b20d145f6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss @@ -0,0 +1,43 @@ +@use "../sizes" as *; +@use "../toolbar/sizes" as *; + +// adduse + +$fluent-toolbar-size-editor-width: null !default; +$fluent-html-editor-vertical-padding: null !default; +$fluent-html-editor-horizontal-padding: null !default; +$fluent-html-editor-add-image-dialog-fileuploader-padding: null !default; +$fluent-html-editor-toolbar-menu-separator-margin: 4px !default; +$fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default; +$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default; +$fluent-html-editor-add-image-dialog-tabs-padding: null !default; +$fluent-aidialog-selects-gap: null !default; +$fluent-aidialog-content-gap: null !default; +$fluent-aidialog-content-padding: null !default; +$fluent-aidialog-border-radius: null !default; + +@if $size == "default" { + $fluent-toolbar-size-editor-width: 120px !default; + $fluent-html-editor-vertical-padding: 16px !default; + $fluent-html-editor-horizontal-padding: 16px !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px !default; + $fluent-html-editor-add-image-dialog-tabs-padding: 14px !default; + $fluent-aidialog-selects-gap: 8px !default; + $fluent-aidialog-content-gap: 16px !default; + $fluent-aidialog-content-padding: 16px 24px !default; + $fluent-aidialog-border-radius: $base-border-radius * 2 !default; +} + +@else if $size == "compact" { + $fluent-toolbar-size-editor-width: 90px !default; + $fluent-html-editor-vertical-padding: 12px !default; + $fluent-html-editor-horizontal-padding: 12px !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px !default; + $fluent-html-editor-add-image-dialog-tabs-padding: 8px !default; + $fluent-aidialog-selects-gap: 4px !default; + $fluent-aidialog-content-gap: 12px !default; + $fluent-aidialog-content-padding: 12px 16px !default; + $fluent-aidialog-border-radius: $base-border-radius !default; +} + +$fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss new file mode 100644 index 000000000000..048a324fbccc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss @@ -0,0 +1,47 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; + +// adduse + + +@include dx-font-icons("dxiconsfluent", "DevExtreme Fluent Icons", "devextreme_fluent_icons", optimizeLegibility); + +.dx-icon { + font-size: $fluent-base-icon-size; + line-height: 1; + white-space: nowrap; + font-feature-settings: 'liga'; +} + +.dx-tab { + .dx-icon, + &.dx-tab-selected .dx-icon { + background-size: 100% 100%; + background-position: 50% 50%; + } +} + +.dx-scrollview-pulldown { + background-image: $scrollview-pulldown-path; + background-position: 0 0; + background-repeat: no-repeat; +} + +.dx-loadindicator-image { + background-position: center center; + background-repeat: no-repeat; +} + +.dx-loadindicator-image-small { + background-position: center center; + background-repeat: no-repeat; +} + +.dx-loadindicator-image-large { + background-position: center center; + background-repeat: no-repeat; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss new file mode 100644 index 000000000000..5037e8368958 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss @@ -0,0 +1,20 @@ +@use "../colors" as *; +@use "sass:color"; +@use "../color" as extcolor; + +// adduse + +$informer-error-color: $base-invalid-color !default; +$informer-error-background-color: null !default; +$informer-info-color: $base-text-color !default; +$informer-info-background-color: null !default; + +@if $mode == "light" { + $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%); + $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl); +} + +@if $mode == "dark" { + $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%); + $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss new file mode 100644 index 000000000000..3fb9269a558a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss @@ -0,0 +1,18 @@ +@use "../../base/informer"; +@use "colors" as *; +@use "sizes" as *; +@use "../../base/informer/mixins" as *; + +// adduse + +@include informer( + $informer-error-color, + $informer-error-background-color, + $informer-info-color, + $informer-info-background-color, + $informer-border-radius, + $informer-icon-size, + $informer-padding-inline, + $informer-padding-block, + $informer-column-gap, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss new file mode 100644 index 000000000000..9c7a933950de --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss @@ -0,0 +1,24 @@ +@use "../common/sizes" as *; +@use "../sizes" as *; + +// adduse + +$informer-icon-size: $fluent-base-icon-size !default; +$informer-padding-inline: null !default; +$informer-padding-block: null !default; +$informer-column-gap: null !default; +$informer-border-radius: null !default; + +@if $size == "default" { + $informer-padding-inline: 12px !default; + $informer-padding-block: 8px !default; + $informer-column-gap: 6px !default; + $informer-border-radius: 4px !default; +} + +@else if $size == "compact" { + $informer-padding-inline: 8px !default; + $informer-padding-block: 4px !default; + $informer-column-gap: 4px !default; + $informer-border-radius: 3px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss new file mode 100644 index 000000000000..6966ae38f168 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss @@ -0,0 +1,79 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; + +// adduse + +/** +* $name 10. Item text color +* $type color +*/ +$list-normal-color: null !default; + +/** +* $name 20. Group border color +* $type color +*/ +$list-border-color: $base-border-color !default; + +/** +* $name 20. Group header background color +* $type color +*/ +$list-group-header-bg: transparent !default; + +/** +* $name 30. Hovered state item background color +* $type color +*/ +$list-item-hover-bg: $base-hover-bg !default; + +/** +* $name 30. Selected state item background color +* $type color +*/ +$list-item-selected-bg: $base-selected-bg !default; +$list-item-selected-hover-bg: $list-item-hover-bg !default; +$list-item-focused-selected-bg: $base-active-bg !default; +$list-item-hover-color: $base-hover-color !default; +$list-header-indicator-color: $base-icon-color !default; + +/** +* $name 40. Active state item background color +* $type color +*/ +$list-item-active-bg: $base-active-bg !default; +$list-holdmenu-bg: $base-bg !default; +$list-holdmenu-border-color: $list-border-color !default; +$list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.12) !default; +$list-menu-button-default-color: $button-default-color !default; +$list-menu-button-default-bg: $button-default-bg !default; +$list-menu-button-delete-bg: $base-danger !default; +$list-item-ghost-bg: $base-element-bg !default; +$list-item-ghost-color: $base-label-color !default; +$list-item-ghost-border-color: $base-accent !default; +$list-icon-color: $base-icon-color !default; + +$base-select-all-separator-color: $base-separator-color !default; + +@if $mode == "light" { + $list-normal-color: color.adjust($base-text-color, $lightness: 11.76%, $space: hsl) !default; +} + +@if $mode == "dark" { + $list-normal-color: color.adjust($base-text-color, $lightness: -16.08%, $space: hsl) !default; +} + +/** +* $name 10. Group header text color +* $type color +*/ +$list-group-color: $base-text-color !default; + +/** +* $name 25. Expanded group header text color +* $type color +*/ +$list-expanded-group-color: $list-group-color !default; +$list-item-selected-color: $list-normal-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss new file mode 100644 index 000000000000..5e06b6480b2b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss @@ -0,0 +1,532 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../button/sizes" as *; +@use "../button/mixins" as *; +@use "../checkBox/colors" as *; +@use "../textEditor/sizes" as *; +@use "../../base/list" as *; +@use "../../base/list/mixins" as *; +@use "../radioGroup/colors" as *; + +// adduse +@use "../badge"; + +$fluent-list-item-border-width: 1px; +$fluent-list-border-width: 1px; +$fluent-list-border: $fluent-list-border-width solid; +$fluent-list-item-border: $fluent-list-item-border-width solid; + +.dx-state-disabled { + &.dx-list { + opacity: 1; + + .dx-list-item { + opacity: 1; + color: $base-foreground-disabled; + } + } + + .dx-list-select-all-label { + color: $base-foreground-disabled; + + &::after { + color: $base-border-color-disabled; + } + } + + .dx-list-item-chevron { + color: $base-foreground-disabled; + } + + .dx-list-reorder-handle { + &::before { + color: $base-foreground-disabled; + } + } +} + +.dx-list-item-chevron-container { + padding-inline: $fluent-list-item-vertical-padding; +} + +.dx-list-item-chevron { + @include dx-icon(chevronnext); + @include dx-icon-sizing($fluent-base-icon-size); + + display: flex; + align-items: center; + color: $list-icon-color; +} + +.dx-list-item-badge-container { + padding-inline-end: $fluent-list-item-horizontal-padding; +} + +.dx-list-item-icon-container { + width: $fluent-base-icon-size + $fluent-list-item-horizontal-padding; + height: $fluent-base-icon-size; + vertical-align: bottom; +} + +.dx-list-item { + display: flex; + align-items: center; + justify-content: center; +} + +.dx-list-item-icon { + @include dx-icon-sizing($fluent-base-icon-size); +} + +.dx-list-select-all, +.dx-list-item, +.dx-list-group-header { + position: relative; +} + +.dx-list-group-body { + display: flex; + flex-direction: column; + row-gap: $fluent-list-item-gap; +} + +.dx-list { + .dx-list-group-header-indicator { + display: none; + } +} + +.dx-list-collapsible-groups { + .dx-list-group-header { + &::before { + content: none; + } + } +} + +@mixin item-states() { + &.dx-list-item-selected { + background-color: $list-item-selected-bg; + color: $list-item-selected-color; + + &.dx-state-hover:not(.dx-state-focused) { + background-color: $list-item-selected-hover-bg; + color: $list-item-selected-color; + } + } + + &.dx-state-focused { + background-color: $list-item-hover-bg; + color: $list-item-hover-color; + } + + &.dx-state-focused.dx-list-item-selected { + background-color: $list-item-focused-selected-bg; + color: $list-item-selected-color; + } + + &.dx-state-active { + background-color: $list-item-active-bg; + + .dx-list-slide-item-content { + background-color: $list-item-active-bg; + } + } +} + +@mixin dx-list-sizing($item-horizontal-padding) { + .dx-list { + border: none; + + .dx-scrollable-content { + width: 100%; + } + + &.dx-list-with-search .dx-scrollable-wrapper { + height: calc(100% - #{$fluent-texteditor-input-height + $fluent-list-searchbox-margin-bottom}); + } + + .dx-empty-message { + min-height: 2em; + } + + &.dx-list-select-decorator-enabled { + .dx-list-select-all, + .dx-list-item { + .dx-list-select-all-label, + .dx-list-item-content { + padding-inline-start: $fluent-list-vertical-padding; + } + + &.dx-state-hover { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-hover; + } + + .dx-checkbox-icon { + border-color: $checkbox-accent-color-hover; + } + + .dx-radiobutton-checked { + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-hover; + } + } + + .dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $checkbox-accent-color-hover; + } + } + + .dx-checkbox-indeterminate { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-accent-color-hover; + } + } + } + } + + &.dx-state-focused { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-active; + } + + .dx-checkbox-icon { + border-color: $checkbox-accent-color-focused; + } + + .dx-radiobutton-checked { + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-active; + } + } + + .dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $checkbox-accent-color-focused; + } + } + + .dx-checkbox-indeterminate { + .dx-checkbox-icon { + &::before { + background-color: $checkbox-accent-color-focused; + } + } + } + } + } + } + + &:not(.dx-list-select-decorator-enabled) { + .dx-list-item { + @include item-states(); + } + + .dx-list-group-header { + @include item-states(); + + &.dx-state-hover { + background-color: $list-item-hover-bg; + color: $list-item-hover-color; + } + } + } + } + + .dx-list-group { + &:not(.dx-list-group-collapsed) { + &:not(:last-child) { + padding-bottom: $fluent-list-vertical-padding; + border-bottom: $fluent-list-item-border; + border-bottom-color: $list-border-color; + } + } + + &:not(.dx-list-group-collapsed) + &:not(.dx-list-group-collapsed) { + .dx-list-group-header { + border-top-color: transparent; + } + } + + &.dx-list-group-collapsed { + .dx-list-group-header-indicator { + .dx-list-collapsible-groups & { + @include dx-icon(chevronright); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-list-group-header { + color: $list-group-color; + } + } + + &:last-of-type { + .dx-list-item { + &:last-of-type { + margin-bottom: $fluent-list-bottom-padding; + } + } + } + + .dx-list-item { + &:first-of-type { + margin-top: 0; + } + + &:last-of-type { + margin-bottom: 0; + } + } + } + + .dx-list-group-header { + font-weight: 500; + padding: $fluent-list-group-header-vertical-padding $item-horizontal-padding; + background: $list-group-header-bg; + color: $list-expanded-group-color; + border-top: $fluent-list-item-border; + border-top-color: transparent; + display: flex; + align-items: center; + column-gap: $fluent-list-item-horizontal-padding; + + .dx-list-group-header-indicator { + color: $list-header-indicator-color; + + .dx-list-collapsible-groups & { + display: flex; + align-items: center; + + @include dx-icon(chevrondown); + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + &::before { + content: none; + } + } + + .dx-list-items { + display: flex; + flex-direction: column; + row-gap: 2px; + + &:not(:first-of-type) { + .dx-list-item { + margin-top: 0; + } + } + } + + .dx-list-item { + border-radius: $base-border-radius; + + @include toggle-delete-icon($list-icon-color); + + &.dx-state-hover, + &.dx-state-active { + background-color: $list-item-hover-bg; + color: $list-item-hover-color; + + .dx-list-switchable-delete-button-inner-wrapper { + background-color: $list-item-hover-bg; + } + } + + &:first-of-type { + border-top: none; + margin-top: $fluent-list-vertical-padding; + } + + &:last-of-type { + border-bottom: none; + margin-bottom: $fluent-list-vertical-padding; + } + + .dx-icon { + color: $list-icon-color; + } + + .dx-icon-toggle-delete { + background-size: 100%; + } + + &.dx-list-item-ghost-reordering { + &.dx-state-focused { + &.dx-state-hover { + color: $list-item-ghost-color; + background: $list-item-ghost-bg; + border: 1px solid; + border-color: $list-item-ghost-border-color; + } + } + } + } + + .dx-list-item, + .dx-list .dx-empty-message { + color: $list-normal-color; + + .dx-list-item-separator-hidden & { + border-top: none; + border-bottom: none; + } + } + + .dx-list-item-content { + padding: $fluent-list-item-vertical-padding $item-horizontal-padding $fluent-list-item-vertical-padding; + } + + .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors + padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding; + } + + .dx-list-next-button .dx-button { + @include dx-button-withtext-sizing(); + + .dx-button-content { + padding-left: $fluent-list-next-button-horizontal-padding; + padding-right: $fluent-list-next-button-horizontal-padding; + } + } + + .dx-list-border-visible { + border: $fluent-list-border; + border-color: $list-border-color; + } + + .dx-list-item-before-bag { + &.dx-list-select-checkbox-container, + &.dx-list-select-radiobutton-container { + display: flex; + flex-shrink: 0; + width: $fluent-list-item-height; + justify-content: center; + align-items: center; + } + + .dx-button.dx-list-toggle-delete-switch { + border: none; + background: transparent; + padding: 0; + box-shadow: none; + + .dx-button-content { + padding: 0; + } + } + } + + .dx-list-select-all { + padding: $fluent-list-item-vertical-padding 0; + position: relative; + display: flex; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background-color: $base-select-all-separator-color; + } + } + + .dx-list-select-all-checkbox { + margin: 0 $item-horizontal-padding - 4px; + } + + .dx-list-select-all-label { + padding: 0 $fluent-list-item-horizontal-padding; + } + + .dx-list-item-after-bag { + padding-inline: $fluent-list-item-vertical-padding; + + &.dx-list-static-delete-button-container { + width: $item-horizontal-padding + $fluent-button-icon-size; + padding: 0; + } + + .dx-list-reorder-handle { + display: flex; + align-items: center; + justify-content: center; + + @include dx-icon(dragvertical); + + color: $list-icon-color; + + @include dx-icon-sizing($fluent-base-icon-size); + } + } + + .dx-list-slide-menu-button { + bottom: 1px; + } + + .dx-list-slide-menu-button-delete { + @include dx-icon(trash); + + color: $base-inverted-text-color; + background-color: $list-menu-button-delete-bg; + font-size: $fluent-base-icon-size; + display: table-cell; + vertical-align: middle; + padding: 0 $item-horizontal-padding; + width: $item-horizontal-padding * 2 + $fluent-base-icon-size; + } + + .dx-list-slide-menu-button-menu { + border: 1px solid transparent; + color: $list-menu-button-default-color; + background-color: $list-menu-button-default-bg; + } + + .dx-list-static-delete-button { + padding: 0; + + &.dx-button { + box-shadow: none; + background-color: transparent; + + .dx-button-content { + z-index: 1; + } + } + } + + .dx-list-context-menucontent { + background-color: $list-holdmenu-bg; + border: 1px solid; + border-color: $list-holdmenu-border-color; + border-radius: $base-border-radius; + box-shadow: $list-holdmenu-shadow-color 0 2px 7.2px 0; + + .dx-list-items { + margin-left: $fluent-list-vertical-padding; + margin-right: $fluent-list-vertical-padding; + } + } + + .dx-state-disabled { + &.dx-list-item, + .dx-list-item { + background-color: transparent; + opacity: 0.6; + } + } +} + +@include dx-list-sizing($fluent-list-item-horizontal-padding); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss new file mode 100644 index 000000000000..b88504c794fe --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-list-vertical-padding: 4px !default; +$fluent-list-item-margin-inline: 4px !default; +$fluent-list-bottom-padding: 4px !default; +$fluent-list-searchbox-margin-bottom: 4px !default; +$fluent-list-item-height: null !default; +$fluent-list-item-vertical-padding: null !default; +$fluent-list-item-horizontal-padding: null !default; +$fluent-list-item-gap: 2px !default; +$fluent-list-group-header-vertical-padding: null !default; +$fluent-list-next-button-horizontal-padding: null !default; + +@if $size == "default" { + $fluent-list-item-height: 32px !default; + $fluent-list-item-vertical-padding: 6px !default; + $fluent-list-item-horizontal-padding: 12px !default; + $fluent-list-group-header-vertical-padding: 6px !default; + $fluent-list-next-button-horizontal-padding: 32px !default; +} + +@else if $size == "compact" { + $fluent-list-item-height: 24px !default; + $fluent-list-item-vertical-padding: 4px !default; + $fluent-list-item-horizontal-padding: 8px !default; + $fluent-list-group-header-vertical-padding: 8px !default; + $fluent-list-next-button-horizontal-padding: 24px !default; +} + +:root { + --dx-list-item-padding-inline: #{$fluent-list-item-horizontal-padding}; + --dx-list-item-padding-block: #{$fluent-list-item-vertical-padding}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss new file mode 100644 index 000000000000..4e84470ef9e4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss @@ -0,0 +1,44 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Indicator color +* $type color +*/ +$load-indicator-segment-bg-color: $base-accent !default; + +/** +* $name 20. Indicator background color +* $type color +*/ +$load-indicator-inner-segment-border-color: null !default; +$load-indicator-animation-sparkle-bg-color1: null !default; +$load-indicator-animation-sparkle-bg-color2: null !default; +$load-indicator-animation-sparkle-bg-color3: null !default; + +@if $mode == "light" { + @if $color == "blue" { + $load-indicator-inner-segment-border-color: extcolor.adjust-if-not-achromatic($color: $load-indicator-segment-bg-color, $hue: 2.9deg, $saturation: 2.2%, $lightness: 44.3%) !default; + $load-indicator-animation-sparkle-bg-color1: $base-accent !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: 2.73%, $lightness: 27.25%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 5.61%, $lightness: 38.43%) !default; + } + + @if $color == "saas" { + $load-indicator-inner-segment-border-color: color.mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default; + $load-indicator-animation-sparkle-bg-color1: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -15deg, $saturation: -14.71%, $lightness: -26.47%) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -11.98%, $lightness: 0.78%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -9.09%, $lightness: 11.96%) !default; + } +} + +@if $mode == "dark" { + $load-indicator-inner-segment-border-color: $base-accent-selected !default; + $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default; + $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -4.40%, $lightness: -21.96%) !default; + $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -8.58%, $lightness: -26.67%) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss new file mode 100644 index 000000000000..1e2bbbf5ee4b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss @@ -0,0 +1,134 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/loadIndicator" as *; + +// adduse + +.dx-loadindicator { + line-height: 100%; +} + +.dx-loadindicator-image { + .dx-loadindicator-content { + animation: none; + } +} + +.dx-loadindicator-icon { + height: 100%; + width: 100%; +} + +.dx-loadindicator-segment { + position: absolute; + height: 100%; + width: 100%; +} + +.dx-loadindicator-segment-inner { + position: relative; + height: 100%; + border-color: $load-indicator-segment-bg-color; + border-width: 0.12em; + border-style: solid; + border-bottom-color: transparent; + animation: none; + border-radius: 50%; +} + +.dx-loadindicator-content-circle { + animation: dx-content-rotation 1568ms linear infinite; + + .dx-loadindicator-icon { + position: absolute; + animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + } + + .dx-loadindicator-segment0, + .dx-loadindicator-segment1 { + width: 50%; + height: 100%; + overflow: hidden; + + .dx-loadindicator-segment-inner { + width: 200%; + } + } + + .dx-loadindicator-segment0 { + left: 0; + + .dx-loadindicator-segment-inner { + border-right-color: transparent; + transform: rotate(-129deg); + animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + } + } + + .dx-loadindicator-segment2 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + box-sizing: border-box; + + .dx-loadindicator-segment-inner { + border-color: $load-indicator-inner-segment-border-color; + width: 100%; + left: 0; + } + } + + .dx-loadindicator-segment1 { + right: 0; + + .dx-loadindicator-segment-inner { + left: -100%; + border-left-color: transparent; + transform: rotate(129deg); + animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; + + &::after { + right: 0; + } + } + } +} + +@include loadindicator-animation-sparkle( + $load-indicator-animation-sparkle-bg-color1, + $load-indicator-animation-sparkle-bg-color2, + $load-indicator-animation-sparkle-bg-color3 +); + +@keyframes dx-content-rotation { + to { transform: rotate(360deg); } +} + +@keyframes dx-icon-rotation { + 12.5% { transform: rotate(135deg); } + 25% { transform: rotate(270deg); } + 37.5% { transform: rotate(405deg); } + 50% { transform: rotate(540deg); } + 62.5% { transform: rotate(675deg); } + 75% { transform: rotate(810deg); } + 87.5% { transform: rotate(945deg); } + to { transform: rotate(1080deg); } +} + +@keyframes dx-left-segment-rotation { + from { transform: rotate(130deg); } + 50% { transform: rotate(-5deg); } + to { transform: rotate(130deg); } +} + +@keyframes dx-right-segment-rotation { + from { transform: rotate(-130deg); } + 50% { transform: rotate(5deg); } + to { transform: rotate(-130deg); } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss new file mode 100644 index 000000000000..f307e697495c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss @@ -0,0 +1,12 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; + +// adduse + +/** +* $name 30. Background color +* $type color +*/ +$loadpanel-content-bg: $overlay-content-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss new file mode 100644 index 000000000000..c69a8aafcd70 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/loadPanel"; + +// adduse +@use "../overlay"; + + +.dx-loadpanel-content { + border: none; + background: $loadpanel-content-bg; + padding: $load-panel-padding; + border-radius: $load-panel-border-radius; + box-shadow: $load-panel-box-shadow; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss new file mode 100644 index 000000000000..7100675c9f07 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../colors" as *; +@use "../sizes" as *; + +// adduse + +$load-panel-padding: 12px 24px !default; +$load-panel-border-radius: 8px !default; +$load-panel-box-shadow: 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss new file mode 100644 index 000000000000..308a0a6455a9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../dropDownEditor/colors" as *; + +// adduse + +$lookup-icon-color: $dropdowneditor-icon-color !default; +$lookup-icon-color-active: $dropdowneditor-icon-active-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss new file mode 100644 index 000000000000..c2b0a783278b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss @@ -0,0 +1,175 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../dropDownEditor" as *; +@use "../common/mixins" as *; +@use "../../base/lookup"; +@use "../../base/lookup/mixins" as *; +@use "../overlay/colors" as *; + +// adduse +@use "../dropDownList"; + +.dx-lookup { + .dx-lookup-arrow { + inset-inline-end: $texteditor-spin-button-horizontal-padding; + } + + &.dx-editor-filled, + &.dx-editor-outlined { + .dx-lookup-field { + padding-inline-start: $fluent-filled-texteditor-input-horizontal-padding; + padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size; + } + + &.dx-invalid { + .dx-lookup-field { + padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2; + } + } + } + + &.dx-editor-underlined { + .dx-lookup-field { + padding-inline-start: $fluent-base-standard-texteditor-input-horizontal-padding; + padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size + $texteditor-spin-button-horizontal-padding; + } + + &.dx-invalid { + .dx-lookup-field { + padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2 + $texteditor-spin-button-horizontal-padding; + } + } + } + + &.dx-invalid { + .dx-lookup-arrow::after { + @include dx-invalid-fluent-badge(); + + inset-inline-end: $fluent-base-icon-size; + } + } + + &.dx-valid { + .dx-lookup-arrow::after { + @include dx-valid-fluent-badge(); + + inset-inline-end: $fluent-base-icon-size; + } + } + + &.dx-validation-pending { + .dx-lookup-field-wrapper { + .dx-pending-indicator { + @include dx-pending-indicator-fluent(); + + inset-inline-end: $fluent-base-icon-size; + } + } + } +} + +.dx-lookup-field { + min-height: $lookup-field-height; + line-height: $fluent-texteditor-line-height; + padding-top: $fluent-filled-texteditor-input-top-padding; + padding-bottom: $fluent-filled-texteditor-input-bottom-padding; + + &::before { + line-height: normal; + } + + .dx-texteditor { + border: none; + + &::before, + &::after { + content: none; + } + + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active, + &.dx-state-disabled, + &.dx-state-readonly, + &.dx-state-readonly.dx-state-hover, + & { + background-color: transparent; + } + } +} + +@include dx-lookup-arrow( + spindown, + "\f001", + $fluent-base-icon-size, + $lookup-icon-color, + $lookup-icon-color-active, + $fluent-base-icon-size, +); + +.dx-lookup-popup-wrapper { + @include dx-dropdownlist-list-appearance(); + + .dx-list-item { + border-top: none; + + &:last-of-type { + border-bottom: none; + } + } + + .dx-popup-content { + top: 0; + padding: 0; + } + + .dx-popup-title + .dx-popup-content { + top: $fluent-lookup-popup-content-top; + } + + &.dx-popup-wrapper { + .dx-overlay-content { + overflow: visible; + } + } + + .dx-popover-arrow { + display: block; + + &::after { + box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12); + background: $overlay-content-bg; + border-top-right-radius: $lookup-arrow-border-radius; + } + } + + &.dx-position-top { + .dx-popover-arrow { + &::after { + border-bottom-left-radius: $lookup-arrow-border-radius; + } + } + } +} + +.dx-lookup-empty { + .dx-lookup-field { + color: $texteditor-placeholder-color; + } +} + +.dx-lookup-popup-search .dx-list { + height: calc(100% - #{$fluent-texteditor-input-height + $lookup-search-padding-vertical + $lookup-search-padding-vertical-top }); +} + +.dx-lookup-search-wrapper { + padding: $lookup-search-padding-vertical $lookup-search-padding-horizontal; + padding-top: $lookup-search-padding-vertical-top; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss new file mode 100644 index 000000000000..f3fd2b58ef3d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss @@ -0,0 +1,23 @@ +@use "../sizes" as *; + +// adduse + +$lookup-field-height: null !default; +$lookup-search-padding-vertical: 4px !default; +$lookup-search-padding-vertical-top: null !default; +$lookup-search-padding-horizontal: null !default; +$lookup-arrow-border-radius: 2px !default; + +$fluent-lookup-popup-content-top: 49px !default; + +@if $size == "default" { + $lookup-field-height: 30px !default; + $lookup-search-padding-horizontal: 12px !default; + $lookup-search-padding-vertical-top: 12px !default; +} + +@else if $size == "compact" { + $lookup-field-height: 22px !default; + $lookup-search-padding-horizontal: 8px !default; + $lookup-search-padding-vertical-top: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss new file mode 100644 index 000000000000..7719b08c6cf0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../colors" as *; +@use "../sizes" as *; +@use "../../base/map"; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss new file mode 100644 index 000000000000..7196c391ae63 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss @@ -0,0 +1,35 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$menu-popup-bg: $base-bg !default; +$menu-item-hover-bg: $base-hover-bg !default; +$menu-item-bg-active: $base-active-bg !default; + +/** +* $name 10. Text color +* $type color +*/ +$menu-color: $base-text-color !default; +$menu-item-expanded-color: $menu-color !default; + +/** +* $name 20. Selected item background color +* $type color +*/ +$menu-item-selected-bg: $base-selected-bg !default; +$menu-popup-border-color: $base-border-color !default; +$menu-separator-bg: $base-border-color !default; +$menu-item-selected-color: $base-text-color !default; +$menu-item-link-color: $base-link-color !default; +$menu-item-focused-selected-bg: null !default; + +@if $mode == "light" { + $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: -9.8%, $space: hsl) !default; +} + +@if $mode == "dark" { + $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss new file mode 100644 index 000000000000..f1321a4c70cc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss @@ -0,0 +1,109 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../button/sizes" as *; +@use "../menuBase/sizes" as *; +@use "../../base/icon_fonts" as *; + +// adduse +@use "../menuBase" as *; +@use "../../base/menu"; + +.dx-context-menu-container-border { + background-color: transparent; +} + +.dx-context-menu-content-delimiter { + background-color: transparent; +} + +.dx-menu { + color: $menu-color; + + .dx-menu-horizontal { + .dx-menu-item-popout { + margin-inline-start: $fluent-menu-icon-to-text-offset; + display: flex; + align-items: center; + justify-content: center; + + @include dx-icon(spindown); + @include dx-icon-sizing($fluent-button-icon-size); + } + } + + .dx-menu-vertical { + .dx-menu-item-popout { + margin-inline-start: $fluent-menu-icon-to-text-offset; + display: flex; + align-items: center; + justify-content: center; + + @include dx-icon(spinright); + @include dx-icon-sizing($fluent-button-icon-size); + } + } + + .dx-menu-item { + border-radius: $base-border-radius; + + .dx-menu-item-content { + display: flex; + padding: $fluent-menu-vertical-padding $fluent-menu-horizontal-padding; + + .dx-menu-item-popout-container { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: auto; + } + } + + &.dx-menu-item-has-text { + .dx-menu-item-text { + flex: 1 1 auto; + } + + &.dx-menu-item-has-icon { + .dx-icon { + margin-inline-end: $fluent-menu-icon-to-text-offset; + } + } + } + } +} + +.dx-menu-adaptive-mode { + background-color: $menu-popup-bg; + + .dx-treeview { + border: 1px solid; + border-color: $menu-popup-border-color; + border-radius: $base-border-radius; + + &, + &.dx-state-focused { + box-shadow: 0 3px 10px color.change($base-shadow-color, $alpha: 0.1); + } + } + + .dx-treeview-node { + &.dx-state-focused { + .dx-treeview-node .dx-treeview-toggle-item-visibility { + color: inherit; + } + + .dx-treeview-toggle-item-visibility { + color: $menu-popup-bg; + } + } + } + + .dx-treeview-node-container:first-child > .dx-treeview-node { + border-bottom: 1px solid; + border-bottom-color: $menu-popup-border-color + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss new file mode 100644 index 000000000000..9161d6ba6151 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss @@ -0,0 +1,14 @@ +@use "../sizes" as *; + +// adduse + +$fluent-menu-vertical-padding: null !default; + +@if $size == "default" { + $fluent-menu-vertical-padding: 6px !default; +} + +@if $size == "compact" { + $fluent-menu-vertical-padding: 4px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss new file mode 100644 index 000000000000..026f55548d97 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$menu-item-color-disabled: $base-foreground-disabled; + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss new file mode 100644 index 000000000000..8b938749100d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss @@ -0,0 +1,80 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../menu/colors" as *; +@use "../button/sizes" as *; +@use "../common/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/mixins" as *; +@use "../../base/menuBase"; + +// adduse + +.dx-menu-item { + color: $menu-color; + + a { + color: $menu-item-link-color; + } + + &.dx-state-disabled { + color: $menu-item-color-disabled; + } + + &.dx-state-hover { + background-color: $menu-item-hover-bg; + } + + &.dx-state-focused { + background-color: $menu-item-hover-bg; + } + + &.dx-state-active { + background-color: $menu-item-bg-active; + } + + .dx-item-url { + display: inherit; + gap: inherit; + } + + .dx-icon-with-url { + &::before { + display: inline-block; + } + } +} + +.dx-menu-item-selected { + background-color: $menu-item-selected-bg; + color: $menu-item-selected-color; + + &.dx-state-focused { + background-color: $menu-item-focused-selected-bg; + } +} + +.dx-menu-item-expanded, +.dx-menu-item-expanded.dx-state-hover, +.dx-menu-item-expanded.dx-state-focused { + color: $menu-item-expanded-color; + background-color: $menu-item-selected-bg; +} + +.dx-menu-base { + &.dx-state-focused { + outline: none; + } + + .dx-icon { + @include dx-icon-sizing($fluent-button-icon-size); + } + + .dx-menu-item { + .dx-menu-item-content { + line-height: $fluent-menu-item-line-height; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss new file mode 100644 index 000000000000..6a55714929bc --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss @@ -0,0 +1,20 @@ +@use "../sizes" as *; + +// adduse + +$fluent-menu-item-line-height: null !default; +$fluent-menu-item-with-icon-horizontal-padding: null !default; +$fluent-menu-horizontal-padding: null !default; +$fluent-menu-icon-to-text-offset: 4px; + +@if $size == "default" { + $fluent-menu-item-line-height: 20px !default; + $fluent-menu-horizontal-padding: 12px !default; + $fluent-menu-item-with-icon-horizontal-padding: 40px !default; +} + +@else if $size == "compact" { + $fluent-menu-item-line-height: 16px !default; + $fluent-menu-horizontal-padding: 8px !default; + $fluent-menu-item-with-icon-horizontal-padding: 32px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss new file mode 100644 index 000000000000..361eff4be843 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/multiView"; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss new file mode 100644 index 000000000000..b3d2482bd0f6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +$numberbox-spin-icon-color: $base-spin-icon-color !default; +$numberbox-spin-icon-background-hover: $base-hover-bg !default; +$numberbox-spin-icon-background-active: $base-active-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss new file mode 100644 index 000000000000..8dceccf2fa97 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss @@ -0,0 +1,88 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor/sizes" as *; +@use "../textEditor/colors" as *; +@use "../../base/numberBox"; + +// adduse +@use "../textEditor" as *; + +.dx-numberbox { + &.dx-editor-outlined, + &.dx-editor-filled { + .dx-numberbox-spin-up { + border-start-end-radius: $base-border-radius; + } + + .dx-numberbox-spin-down { + border-end-end-radius: $base-border-radius; + } + } +} + +.dx-numberbox-spin-container { + overflow: hidden; + width: $fluent-numberbox-spin-container-width; + + .dx-state-disabled & { + opacity: 1; + } +} + +.dx-numberbox-spin-up-icon { + @include dx-icon(spinup); + + color: $numberbox-spin-icon-color; +} + +.dx-numberbox-spin-down-icon { + @include dx-icon(spindown); + + color: $numberbox-spin-icon-color; +} + +.dx-numberbox-spin-up-icon, +.dx-numberbox-spin-down-icon { + @include dx-icon-font-centered-sizing($fluent-base-icon-size); +} + +.dx-numberbox-spin-button { + height: 50%; + + &.dx-state-hover { + background-color: $numberbox-spin-icon-background-hover; + } + + &.dx-state-active { + background-color: $numberbox-spin-icon-background-active; + } + + &.dx-state-disabled { + .dx-numberbox-spin-up-icon, + .dx-numberbox-spin-down-icon { + color: $base-foreground-disabled; + } + } +} + +.dx-numberbox-spin.dx-numberbox-box { + @include validation-icon-position(); +} + +.dx-numberbox-spin-touch-friendly { + @include validation-icon-position(); + + .dx-numberbox-spin-container { + width: $fluent-numberbox-touch-friendly-spin-container-width; + border-inline-start: none; + } + + .dx-numberbox-spin-up-icon, + .dx-numberbox-spin-down-icon { + background-position: center; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss new file mode 100644 index 000000000000..c2fd8daf91af --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss @@ -0,0 +1,15 @@ +@use "../sizes" as *; + +// adduse + +$fluent-numberbox-spin-container-width: 24px !default; +$fluent-numberbox-touch-friendly-spin-container-width: null !default; + +@if $size == "default" { + $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; +} + +@else if $size == "compact" { + $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss new file mode 100644 index 000000000000..8c4c6fffa5fb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss @@ -0,0 +1,26 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Content background color +* $type color +*/ +$overlay-content-bg: $base-bg !default; + +/** +* $name 20. Shader background color +* $type color +*/ +$overlay-shader-bg: null !default; + +@if $mode == "light" { + $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.32) !default; +} + +@if $mode == "dark" { + $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.61) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss new file mode 100644 index 000000000000..1881badf0696 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/overlay"; + +// adduse +.dx-overlay-shader { + background-color: $overlay-shader-bg; +} + +.dx-overlay-wrapper { + @include dx-base-typography(); +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss new file mode 100644 index 000000000000..8868f5b732ac --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 180. Pager selected item text color +* $type color +*/ +$pagination-page-selected-color: $base-inverted-text-color !default; +$pagination-page-hovered-bg: $base-hover-bg !default; + +/** +* $name 190. Pager selected item background color +* $type color +*/ +$pagination-page-selected-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss new file mode 100644 index 000000000000..a77d83fd12a8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss @@ -0,0 +1,98 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/pagination"; +@use "../gridBase/sizes" as *; + +// adduse + + +.dx-pager, +.dx-pagination { + padding: $fluent-pagination-paddings $fluent-grid-base-cell-horizontal-padding; + + &.dx-light-mode { + .dx-page-sizes { + min-width: $fluent-pagination-light-pagesizes-min-width; + } + + .dx-page-index { + min-width: $fluent-pagination-light-pageindex-min-width; + } + + .dx-pages { + .dx-page-indexes { + vertical-align: middle; + } + + .dx-navigate-button, + .dx-light-pages { + vertical-align: middle; + } + } + } + + .dx-pages { + .dx-page { + padding: $fluent-pagination-page-padding; + line-height: $fluent-pagination-page-line-height; + } + + .dx-separator { + padding-left: $fluent-pagination-separator-paddings; + padding-right: $fluent-pagination-separator-paddings; + } + + .dx-navigate-button { + width: 9px; + height: $fluent-pagination-navbutton-height; + padding: $fluent-pagination-navbutton-paddings; + } + + .dx-prev-button { + @include dx-icon(chevronleft); + } + + .dx-next-button { + @include dx-icon(chevronright); + } + + .dx-prev-button, + .dx-next-button { + @include dx-icon-font-centered-sizing($fluent-pagination-navbutton-icon-size); + } + } + + .dx-page, + .dx-page-size { + font-size: $fluent-pagination-page-font-size; + + &:hover { + background-color: $pagination-page-hovered-bg; + } + + border-radius: 20px; + } + + .dx-page-sizes .dx-page-size { + &:first-child, + &.dx-first-child { + margin-left: 0; + } + + padding: $fluent-pagination-page-padding; + line-height: $fluent-pagination-page-line-height; + } + + .dx-pages, + .dx-page-sizes { + .dx-selection { + font-weight: 500; + background-color: $pagination-page-selected-bg; + color: $pagination-page-selected-color; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss new file mode 100644 index 000000000000..67a2a019698a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss @@ -0,0 +1,26 @@ +@use "../sizes" as *; + +// adduse + +$fluent-pagination-paddings: 13px !default; +$fluent-pagination-separator-paddings: 8px !default; +$fluent-pagination-page-padding: 9px 12px !default; +$fluent-pagination-page-line-height: 12px !default; +$fluent-pagination-page-font-size: 12px !default; +$fluent-pagination-navbutton-paddings: $fluent-pagination-page-padding !default; +$fluent-pagination-navbutton-height: 12px !default; +$fluent-pagination-navbutton-icon-size: null !default; +$fluent-pagination-light-pagesizes-min-width: null !default; +$fluent-pagination-light-pageindex-min-width: null !default; + +@if $size == "default" { + $fluent-pagination-navbutton-icon-size: 21px !default; + $fluent-pagination-light-pagesizes-min-width: 62px !default; + $fluent-pagination-light-pageindex-min-width: 32px !default; +} + +@else if $size == "compact" { + $fluent-pagination-navbutton-icon-size: 16px !default; + $fluent-pagination-light-pagesizes-min-width: 42px !default; + $fluent-pagination-light-pageindex-min-width: 27px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss new file mode 100644 index 000000000000..0f07777dabf6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss @@ -0,0 +1,58 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$pivotgrid-area-background: $base-bg !default; +$pivotgrid-border-color: $base-border-color !default; + +/** +* $name 10. Header text color +* $type color +*/ +$pivotgrid-area-color: $base-text-color !default; +$pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default; +$pivotgrid-field-area-box-background-color: null !default; +$pivotgrid-field-area-box-font-weight: 400 !default; +$pivotgrid-data-area-color: $base-text-color !default; + +/** +* $name 20. Total background color +* $type color +*/ +$pivotgrid-totalcolor: $base-bg !default; + +/** +* $name 30. Grand total background color +* $type color +*/ +$pivotgrid-grandtotalcolor: null !default; + +/** +* $name 40. Field area text color +* $type color +*/ +$pivotgrid-field-area-text-color: $base-label-color !default; +$pivotgrid-accent-color: $base-accent !default; +$pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default; +$pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; +$pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; +$pivotgrid-position-indicator-color: gray !default; +$pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; + +@if $mode == "light" { + @if $color == "blue"{ + $pivotgrid-grandtotalcolor: $base-hover-bg !default; + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; + } + + @if $color == "saas" { + $pivotgrid-grandtotalcolor: color.change($base-hover-bg, $alpha: 0.4) !default; + $pivotgrid-field-area-box-background-color: color.change($base-hover-bg, $alpha: 0.4) !default; + } +} + +@if $mode == "dark" { + $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss new file mode 100644 index 000000000000..1293464c8c69 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss @@ -0,0 +1,235 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../gridBase/colors" as *; +@use "../treeView/sizes" as *; +@use "../button/mixins" as *; +@use "../button/colors" as *; +@use "../../base/pivotGrid" as basePivotGrid with ( + $pivotgrid-drag-header-border-color: $pivotgrid-drag-header-border-color, + $pivotgrid-drag-header-first-shadow-color: $pivotgrid-drag-header-first-shadow-color, + $pivotgrid-drag-header-second-shadow-color: $pivotgrid-drag-header-second-shadow-color, + $pivotgrid-border-color: $pivotgrid-border-color, + $pivotgrid-common-left-right-padding: $pivotgrid-common-left-right-padding, + $pivotgrid-area-color: $pivotgrid-area-color, + $header-filter-color: $header-filter-color, + $header-filter-color-empty: $header-filter-color-empty, + $pivotgrid-area-background: $pivotgrid-area-background, + $pivotgrid-common-top-bottom-padding: $area-field-top-bottom-padding, + $pivotgrid-header-top-bottom-padding: $pivotgrid-header-top-bottom-padding, + $pivotgrid-field-indicators-offset: $pivotgrid-field-indicators-offset, + $pivotgrid-indicators-line-height: $pivotgrid-indicators-line-height, + $pivotgrid-totalcolor: $pivotgrid-totalcolor, + $pivotgrid-field-area-text-color: $pivotgrid-field-area-text-color, + $pivotgrid-data-area-color: $pivotgrid-data-area-color, + $pivotgrid-grandtotalcolor: $pivotgrid-grandtotalcolor, + $pivotgrid-accent-color: $pivotgrid-accent-color, + $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding, + $pivotgrid-button-top-padding: $pivotgrid-button-top-padding, +); + +// adduse + + +$fluent-pivotgrid-headers-font-size: 14px; +$fluent-pivotgrid-area-font-size: 13px; +$fluent-pivotgrid-chevron-icon-size: 20px; + +$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15); +$fluent-pivotgridfieldchooser-field-min-height: 36px; + +.dx-pivotgrid-fields-container { + &.dx-drag { + .dx-area-field.dx-area-box { + background-color: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9); + border: 1px solid; + border-color: $base-border-color-disabled; + box-shadow: $fluent-pivotgrid-drag-header-shadow; + } + } + + .dx-area-field.dx-area-box { + color: $pivotgrid-field-area-box-text-color; + background-color: $pivotgrid-field-area-box-background-color; + border-radius: $area-field-border-radius; + border: 1px solid; + border-color: $base-border-color-disabled; + font-size: $fluent-pivotgrid-headers-font-size; + font-weight: $pivotgrid-field-area-box-font-weight; + line-height: 20px; + + .dx-header-filter { + color: $base-accent; + + &.dx-header-filter-empty { + color: $pivotgrid-area-color; + } + } + } + + .dx-sort-up { + @include dx-icon-sizing($fluent-button-icon-size) + } + + .dx-sort-down { + @include dx-icon-sizing($fluent-button-icon-size) + } + + .dx-header-filter { + @include dx-icon-sizing($fluent-button-icon-size) + } +} + + +.dx-pivotgrid { + background-color: $pivotgrid-area-background; + + .dx-pivotgrid-area { + &.dx-pivotgrid-area-data { + font-size: $fluent-pivotgrid-area-font-size; + } + + &.dx-pivotgrid-vertical-headers, + &.dx-pivotgrid-horizontal-headers { + font-size: $fluent-pivotgrid-headers-font-size; + + td { + font-weight: 500; + } + + .dx-grandtotal, + .dx-total { + color: $base-text-color; + } + } + + td { + padding: $fluent-pivotgrid-cell-padding; + + &.dx-pivotgrid-collapsed, + &.dx-pivotgrid-expanded { + padding: $fluent-pivotgrid-expanded-cell-padding; + + > span { + padding: 0 5px 0 10px; + } + } + } + } + + + .dx-area-description-cell { + .dx-pivotgrid-toolbar { + padding-left: 8px; + } + } + + .dx-row-total, + .dx-grandtotal { + &.dx-last-cell { + padding-left: $fluent-pivotgrid-total-text-left-padding; + } + } + + .dx-expand-icon-container { + margin: 0; + + @include dx-icon(chevronright); + + font-size: $fluent-pivotgrid-headers-font-size; + + &::before { + visibility: hidden; + } + } + + .dx-pivotgrid-collapsed .dx-expand { + @include dx-icon(chevronright); + @include dx-icon-font-centered-sizing($fluent-pivotgrid-chevron-icon-size); + + color: $pivotgrid-chevron-icon-color; + } + + .dx-pivotgrid-expanded .dx-expand { + @include dx-icon(chevrondown); + @include dx-icon-font-centered-sizing($fluent-pivotgrid-chevron-icon-size); + + color: $pivotgrid-chevron-icon-color; + } + + .dx-area-tree-view { + td.dx-white-space-column { + width: $pivotgrid-empty-column-width; + min-width: $pivotgrid-empty-column-width; + } + } +} + +.dx-pivotgridfieldchooser { + .dx-area-icon { + width: $fluent-button-icon-size; + height: $fluent-button-icon-size; + font-size: $fluent-button-icon-size; + } + + .dx-area { + .dx-area-caption { + text-transform: uppercase; + font-size: $fluent-pivotgrid-headers-font-size; + font-weight: 500; + color: $pivotgrid-area-color; + vertical-align: middle; + } + + .dx-area-fields { + margin-top: 8px; + } + } + + .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container { + padding-right: 8px; + } + + .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf { + padding-left: 0; + + .dx-checkbox { + left: 8px; + } + } + + .dx-treeview-node-container-opened { + .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf { + padding-left: $fluent-treeview-toggle-item-width; + + .dx-checkbox { + left: $fluent-treeview-checkbox-offset; + } + } + } + + .dx-treeview-item { + min-height: $fluent-pivotgridfieldchooser-field-min-height; + padding: 9px 8px; + + .dx-icon { + margin: 0 5px -1px 0; + + @include dx-icon-sizing($fluent-button-icon-size); + } + } + + .dx-treeview-toggle-item-visibility { + height: $fluent-pivotgridfieldchooser-field-min-height; + } +} + +.dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors + .dx-position-indicator { + background-color: $pivotgrid-position-indicator-color; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss new file mode 100644 index 000000000000..243dd6959ac2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss @@ -0,0 +1,40 @@ +@use "../sizes" as *; + +// adduse + +$fluent-pivotgrid-cell-padding: null !default; +$pivotgrid-common-left-right-padding: null !default; +$fluent-pivotgrid-expanded-cell-padding: null !default; +$fluent-pivotgrid-total-text-left-padding: null !default; +$pivotgrid-header-top-bottom-padding: null !default; +$pivotgrid-button-top-padding: null !default; +$area-field-top-bottom-padding: null !default; + +$pivotgrid-empty-column-width: 19px !default; +$pivotgrid-field-indicators-offset: 6px !default; +$pivotgrid-indicators-line-height: 12px !default; +$pivotgrid-empty-area-text-padding: 5px !default; + +$area-field-border-radius: null !default; + +@if $size == "default" { + $fluent-pivotgrid-cell-padding: 10px 16px !default; + $pivotgrid-common-left-right-padding: 10px !default; + $pivotgrid-header-top-bottom-padding: 14px !default; + $fluent-pivotgrid-expanded-cell-padding: 10px 14px 10px 19px !default; + $fluent-pivotgrid-total-text-left-padding: 22px !default; + $pivotgrid-button-top-padding: 10px !default; + $area-field-border-radius: 6px !default; + $area-field-top-bottom-padding: 5px !default; +} + +@else if $size == "compact" { + $fluent-pivotgrid-cell-padding: 7px 11px !default; + $pivotgrid-common-left-right-padding: 8px !default; + $pivotgrid-header-top-bottom-padding: 5px !default; + $fluent-pivotgrid-expanded-cell-padding: 7px 8px 7px 13px !default; + $fluent-pivotgrid-total-text-left-padding: 16px !default; + $pivotgrid-button-top-padding: 5px !default; + $area-field-border-radius: 4px !default; + $area-field-top-bottom-padding: 1px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss new file mode 100644 index 000000000000..30a8aa194a99 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss new file mode 100644 index 000000000000..a654b9770ca5 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss @@ -0,0 +1,18 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../overlay/colors" as *; +@use "../textEditor/colors" as *; +@use "../../base/popover"; + +// adduse + +.dx-popover-wrapper { + .dx-popup-title { + margin: 0; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss new file mode 100644 index 000000000000..d740b96920d8 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss @@ -0,0 +1,31 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 20. Header background color +* $type color +*/ +$popup-title-bg: transparent !default; +$popup-title-color: $base-text-color !default; +$popup-title-border-color: $base-border-color !default; +$popup-bottom-bg: $popup-title-bg !default; +$popup-bottom-color: $base-text-color !default; +$popup-border-radius: $base-border-radius * 2 !default; +$popup-content-shadow-color1: null !default; +$popup-content-shadow-color2: null !default; +$popup-focused-content-shadow-color: null !default; + +@if $mode == "light" { + $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.2) !default; + $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.24) !default; + $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; +} + +@if $mode == "dark" { + $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.4) !default; + $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.48) !default; + $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.48) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss new file mode 100644 index 000000000000..6f33bfad8564 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss @@ -0,0 +1,85 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../overlay/colors" as *; +@use "../toolbar/mixins" as *; +@use "../toolbar/sizes" as *; +@use "../typography/sizes" as *; +@use "../../base/popup"; + +// adduse +@use "../overlay"; + +$fluent-popup-toolbar-label-font-size: $fluent-m-font-size; + +.dx-popup-wrapper { + & > .dx-overlay-content { + background: $overlay-content-bg; + box-shadow: $fluent-popup-content-shadow; + border-radius: $popup-border-radius; + } + + & > .dx-popup-fullscreen { + border-radius: 0; + } + + .dx-state-focused { + &.dx-overlay-content { + box-shadow: $fluent-popup-focused-content-shadow; + } + } +} + +.dx-popup-title { + position: relative; + min-height: 28px; + border-bottom: 1px solid; + border-bottom-color: $popup-title-border-color; + background: $popup-title-bg; + color: $popup-title-color; + + &.dx-toolbar { + @include dx-toolbar-sizing( + $fluent-popup-toolbar-height, + 0 $fluent-popup-toolbar-horizontal-padding, + $fluent-popup-toolbar-label-font-size, + $fluent-popup-toolbar-item-spacing + ); + + box-shadow: none; + } +} + +.dx-popup-content { + padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; + + & > .dx-button { + margin: $fluent-popup-button-margin; + } +} + +.dx-popup-bottom { + background: $popup-bottom-bg; + color: $popup-bottom-color; + + &.dx-toolbar { + @include dx-toolbar-sizing( + $fluent-popup-bottom-toolbar-height, + 0 $fluent-popup-content-withtitle-top-padding $fluent-popup-content-withtitle-bottom-padding, + $fluent-popup-toolbar-label-font-size, + $fluent-popup-toolbar-item-spacing + ); + } +} + +.dx-popup-content.dx-dialog-content { + min-width: 220px - 2 * $fluent-popup-content-padding; + padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; +} + +.dx-dialog-message { + padding: 0; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss new file mode 100644 index 000000000000..93f5409ad501 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss @@ -0,0 +1,50 @@ +@use "../sizes" as *; +@use "colors" as *; + +// adduse + +$fluent-popup-content-padding: null !default; +$fluent-popup-content-vertical-padding: null !default; +$fluent-popup-content-withtitle-top-padding: null !default; +$fluent-popup-content-withtitle-bottom-padding: null !default; +$fluent-popup-toolbar-horizontal-padding: null !default; +$fluent-popup-bottom-toolbar-height: null !default; +$fluent-popup-toolbar-height: null !default; + +$fluent-popup-button-margin: 0 8px !default; +$fluent-popup-toolbar-item-spacing: 8px !default; + +$fluent-popup-content-shadow: null !default; +$fluent-popup-focused-content-shadow: null !default; + +@if $size == "default" { + $fluent-popup-content-padding: 24px !default; + $fluent-popup-content-vertical-padding: 16px !default; + $fluent-popup-content-withtitle-top-padding: 24px !default; + $fluent-popup-content-withtitle-bottom-padding: 16px !default; + + $fluent-popup-toolbar-horizontal-padding: 24px !default; + $fluent-popup-bottom-toolbar-height: 48px !default; + $fluent-popup-toolbar-height: 48px !default; + + $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; +} + +@else if $size == "compact" { + $fluent-popup-content-padding: 16px !default; + $fluent-popup-content-vertical-padding: 12px !default; + $fluent-popup-content-withtitle-top-padding: 16px !default; + $fluent-popup-content-withtitle-bottom-padding: 12px !default; + + $fluent-popup-toolbar-horizontal-padding: 16px !default; + $fluent-popup-bottom-toolbar-height: 36px !default; + $fluent-popup-toolbar-height: 36px !default; + + $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; +} + +:root { + --dx-popup-toolbar-item-padding-inline: #{$fluent-popup-toolbar-item-spacing}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss new file mode 100644 index 000000000000..336b7d3b3de7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss @@ -0,0 +1,40 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Bar background color +* $type color +*/ +$progressbar-bg: null !default; + +/** +* $name 20. Selected range background color +* $type color +*/ +$progressbar-range-bg: $base-accent !default; +$progressbar-container-disabled-bg: $base-background-disabled !default; +$progressbar-range-disabled-bg: $base-foreground-disabled !default; +$progressbar-range-indeterminate-color: $base-accent !default; +$progressbar-range-invalid-color: $base-invalid-color !default; + +$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; +$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%; +$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95%; + +/** +* $name 30. Label color +* $type color +*/ +$progressbar-label-color: $base-text-color !default; + +@if $mode == "light" { + $progressbar-bg: color.adjust($base-typography-bg, $lightness: -7.84%, $space: hsl) !default; +} + +@if $mode == "dark" { + $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss new file mode 100644 index 000000000000..dbcff3a02fbf --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss @@ -0,0 +1,125 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/progressBar"; + +// adduse + +.dx-progressbar-container { + height: $progressbar-height; + background-color: $progressbar-bg; + border-radius: $progressbar-border-radius; +} + +.dx-progressbar-range { + position: relative; + background-color: $progressbar-range-bg; + border-radius: $progressbar-border-radius; + box-sizing: content-box; +} + +.dx-progressbar-animating-container { + height: $progressbar-height; + background-color: $progressbar-bg; + background-size: $progressbar-indeterminate-background-width 5px; + animation: dx-loader 2s linear infinite; + border-radius: $progressbar-border-radius; + + @include gradient-linear($progressbar-interdeterminate-state-gradient); + + background-repeat: repeat; +} + +.dx-invalid { + .dx-progressbar-range { + background-color: $progressbar-range-invalid-color; + } + + .dx-progressbar-animating-container { + @include gradient-linear($progressbar-invalid-interdeterminate-state-gradient); + + background-repeat: repeat; + } +} + +.dx-state-disabled { + &.dx-progressbar { + opacity: 1; + } + + .dx-progressbar-container { + background-color: $progressbar-container-disabled-bg; + } + + .dx-progressbar-range { + background-color: $progressbar-range-disabled-bg; + } + + .dx-progressbar-status { + color: $base-foreground-disabled; + } + + .dx-progressbar-animating-container { + animation: none; + + @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient); + + background-position-x: math.div($progressbar-indeterminate-background-width, 2); + } +} + +.dx-progressbar-status { + padding-top: $progressbar-status-margin-top; + color: $progressbar-label-color; + + .dx-progressbar .dx-position-right & { + padding-top: 0; + } +} + +.dx-rtl { + .dx-progressbar, + &.dx-progressbar { + .dx-progressbar-animating-container { + animation: dx-loader-rtl 2s linear infinite; + + @include gradient-linear($progressbar-interdeterminate-state-gradient); + + background-repeat: repeat; + } + + &.dx-state-disabled { + .dx-progressbar-animating-container { + animation: none; + + @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient); + + background-position-x: math.div($progressbar-indeterminate-background-width, 2); + } + } + } +} + +@keyframes dx-loader { + 0% { + background-position-x: 0; + } + + 100% { + background-position-x: 900%; + } +} + +@keyframes dx-loader-rtl { + 0% { + background-position-x: 0; + } + + 100% { + background-position-x: -900%; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss new file mode 100644 index 000000000000..e845336ff37d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss @@ -0,0 +1,18 @@ +@use "../sizes" as *; + +// adduse + +$progressbar-height: null !default; +$progressbar-border-radius: $base-border-radius !default; +$progressbar-status-margin-top: null !default; +$progressbar-indeterminate-background-width: 90%; + +@if $size == "default" { + $progressbar-height: 4px !default; + $progressbar-status-margin-top: 12px !default; +} + +@else if $size == "compact" { + $progressbar-height: 2px !default; + $progressbar-status-margin-top: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss new file mode 100644 index 000000000000..5550f3f7539f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss @@ -0,0 +1,154 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/radioButton/mixins" as *; +@use "../radioGroup/colors" as *; +@use "../../base/radioButton"; + +// adduse + +@include dx-radiobutton-icon-mixin( + $fluent-radiobutton-size, + $fluent-radiobutton-border-width, + $fluent-radiobutton-dot-size, + true, +); +@include dx-radiobutton-states-mixin( + $radiogroup-bg, + $radiogroup-border-color, + $radiogroup-readonly-border-color, + null, + null, + $radiobutton-focused-bg, + $radiogroup-accent-color, + $radiobutton-invalid-color, + $radiobutton-invalid-color-hover, + $radiobutton-invalid-color-focused, + 1, + true, +); + +.dx-radiobutton-icon { + &::after { + content: none; + } +} + +.dx-radio-value-container { + padding-inline-end: $fluent-radio-value-container-padding; +} + +.dx-state-readonly { + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + + .dx-radiobutton-icon { + border-color: $base-foreground-disabled; + } + + .dx-radiobutton-checked { + &.dx-state-hover, + &.dx-state-focused, + &.dx-state-active { + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + } + } +} + +.dx-radiobutton { + &.dx-state-hover { + .dx-radiobutton-icon { + border-color: $radiogroup-border-color-hover; + } + } + + &.dx-state-active { + .dx-radiobutton-icon { + border-color: $radiogroup-border-color-active; + } + } + + &.dx-state-focused { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-active; + } + } +} + +.dx-radiobutton-checked { + &.dx-state-hover { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-hover; + } + + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-hover; + } + } + + &.dx-state-active, + &.dx-state-focused { + .dx-radiobutton-icon { + border-color: $radiogroup-accent-color-active; + } + + .dx-radiobutton-icon-dot { + background-color: $radiogroup-accent-color-active; + } + } +} + +.dx-invalid { + .dx-state-hover { + &.dx-radiobutton { + .dx-radiobutton-icon { + border-color: $radiobutton-invalid-color-focused; + } + + .dx-radiobutton-icon-dot { + background-color: $radiobutton-invalid-color-focused; + } + } + } + + .dx-state-active, + .dx-state-focused { + &.dx-radiobutton { + .dx-radiobutton-icon { + border-color: $radiobutton-invalid-color-focused; + } + + .dx-radiobutton-icon-dot { + background-color: $radiobutton-invalid-color-focused; + } + } + } + + &.dx-state-readonly { + .dx-radiobutton { + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + } + } +} + +.dx-state-disabled { + .dx-radiobutton { + color: $base-foreground-disabled; + + .dx-radiobutton-icon { + border-color: $base-foreground-disabled; + } + + .dx-radiobutton-icon-dot { + background-color: $base-foreground-disabled; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss new file mode 100644 index 000000000000..4a1b17b0ebfb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss @@ -0,0 +1,17 @@ +@use "../sizes" as *; + +// adduse + +$fluent-radiobutton-size: 16px !default; +$fluent-radiobutton-dot-size: 10px !default; + +$fluent-radiobutton-border-width: 1px !default; +$fluent-radio-value-container-padding: null !default; + +@if $size == "default" { + $fluent-radio-value-container-padding: 12px !default; +} + +@else if $size == "compact" { + $fluent-radio-value-container-padding: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss new file mode 100644 index 000000000000..ab7616922748 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss @@ -0,0 +1,22 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$radiogroup-accent-color: $base-accent !default; +$radiogroup-accent-color-hover: $base-accent-hover !default; +$radiogroup-accent-color-active: $base-accent-active !default; + +$radiogroup-border-color: $base-border-color-accessible !default; +$radiogroup-border-color-hover: $base-border-color-accessible-hover !default; +$radiogroup-border-color-active: $base-border-color-accessible-focused !default; +$radiogroup-bg: $base-element-bg !default; + +$radiobutton-invalid-color: $base-invalid-color !default; +$radiobutton-invalid-color-hover: $base-invalid-color-hover !default; +$radiobutton-invalid-color-focused: $base-invalid-color-selected !default; + +$radiogroup-readonly-border-color: $radiogroup-border-color !default; + +$radiobutton-focused-bg: color.change($base-text-color, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss new file mode 100644 index 000000000000..61c3887126e9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss @@ -0,0 +1,26 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/radioGroup/mixins" as *; +@use "../../base/radioGroup"; + +// adduse +@use "../radioButton"; +@include dx-radiogroup-mixin( + $fluent-radio-button-vertical-margin, + 0, +); + +.dx-radiogroup { + &.dx-state-disabled { + opacity: 1; + } +} + +.dx-radiogroup-horizontal { + .dx-collection { + column-gap: 16px; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss new file mode 100644 index 000000000000..68d4e89dac25 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss @@ -0,0 +1,17 @@ +@use "../sizes" as *; + +// adduse + +$fluent-radio-button-vertical-margin: null !default; +$fluent-radio-group-horizontal-gap: null !default; + +@if $size == "default" { + $fluent-radio-group-horizontal-gap: 16px !default; + $fluent-radio-button-vertical-margin: 12px !default; +} + +@else if $size == "compact" { + $fluent-radio-group-horizontal-gap: 12px !default; + $fluent-radio-button-vertical-margin: 6px !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss new file mode 100644 index 000000000000..7f4618192668 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss @@ -0,0 +1,14 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/rangeSlider"; +@use "../slider/sizes" as *; + +// adduse + +.dx-rangeslider-start-handle { + margin-inline-start: math.div(-$fluent-slider-handle-size, 2); +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss new file mode 100644 index 000000000000..5bb4ce8cc4d9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss @@ -0,0 +1,45 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../scheduler/sizes" as *; +@use "../../base/recurrenceEditor" as *; + +// adduse + + +$fluent-recurrence-number-box-margin: 11px; +$fluent-recurrence-button-group-padding: 6px; +$fluent-recurrence-radio-group-margin: 15px; + +.dx-recurrence-numberbox-interval { + margin-right: $fluent-recurrence-number-box-margin; +} + +.dx-recurrence-numberbox-interval-label { + font-size: $fluent-base-font-size; + margin-top: $fluent-recurrence-interval-number-box-margin-top; +} + +.dx-recurrence-button-group { + .dx-button-content { + padding: $fluent-recurrence-button-group-padding; + } + + .dx-buttongroup-wrapper > div { + min-width: 0; + } +} + +.dx-recurrence-radiogroup-repeat-type { + margin: $fluent-recurrence-radio-group-margin 0; +} + +.dx-recurrence-datebox-until-date { + margin-top: $fluent-recurrence-until-date-box-top-margin; +} + +.dx-recurrence-numberbox-repeat-count { + margin-top: $fluent-recurrence-count-number-box-top-margin; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss new file mode 100644 index 000000000000..b422f99e08d4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss @@ -0,0 +1,19 @@ +@use "../sizes" as *; + +// adduse + +$fluent-recurrence-until-date-box-top-margin: null !default; +$fluent-recurrence-count-number-box-top-margin: null !default; +$fluent-recurrence-interval-number-box-margin-top: null !default; + +@if $size == "default" { + $fluent-recurrence-until-date-box-top-margin: 60px !default; + $fluent-recurrence-count-number-box-top-margin: 102px !default; + $fluent-recurrence-interval-number-box-margin-top: 30px !default; +} + +@else if $size == "compact" { + $fluent-recurrence-until-date-box-top-margin: 46px !default; + $fluent-recurrence-count-number-box-top-margin: 78px !default; + $fluent-recurrence-interval-number-box-margin-top: 22px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss new file mode 100644 index 000000000000..bc780273f0e4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss new file mode 100644 index 000000000000..18a739590733 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss @@ -0,0 +1,128 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Border color +* $type color +*/ +$scheduler-base-border-color: $base-border-color !default; +$scheduler-cell-active-bg: null !default; +$scheduler-cell-hover-bg: null !default; +$scheduler-group-separator-border-color: color.adjust($base-border-color, $lightness: -13%, $space: hsl) !default; + +/** +* $name 20. Hour separator color +* $type color +*/ +$scheduler-accent-border-color: $base-border-color !default; + +/** +* $name 30. Appointment text color +* $type color +*/ +$scheduler-appointment-text-color: null !default; +$scheduler-appointment-focus-color: null !default; + +/** +* $name 40. Appointment background color +* $type color +*/ +$scheduler-appointment-base-color: null !default; + +/** +* $name 50. Appointment start color +* $type color +*/ +$scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; +$scheduler-appointment-active-color: $button-default-outlined-active-bg; + +/** +* $name 60. Focused cell color +* $type color +*/ +$scheduler-workspace-focused-cell-color: null !default; + +/** +* $name 70. First day of month separator color +* $type color +*/ +$scheduler-first-month-border-color: $base-border-color !default; +$scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default; +$scheduler-panel-text-color: $base-label-color !default; +$scheduler-workspace-background-color: $base-bg !default; +$scheduler-workspace-accent-color: $base-accent !default; + +/** +* $name 80. Date-time indicator color +* $type color +*/ +$scheduler-current-time-cell-color: $base-accent !default; +$scheduler-time-indicator-color: #eb5757 !default; +$scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default; +$scheduler-form-icon-color: $base-icon-color !default; +$scheduler-workspace-month-text-color: $base-text-color !default; +$scheduler-workspace-other-month-text-color: $base-label-color !default; +$scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default; +$scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default; +$scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default; +$scheduler-header-bg: $base-bg !default; +$scheduler-alldaypanel-bg: $base-element-bg !default; +$scheduler-other-month-cell-opacity: 1 !default; +$scheduler-fill-focused-appointment: false !default; +$scheduler-is-shadow-color-for-focused-state: false !default; +$scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default; + +$scheduler-tooltip-appointment-text-color: $base-text-color !default; +$scheduler-appointment-overlay-bg: $base-bg !default; + +// Agenda +$agenda-appointment-recurrence-icon-color: $base-inverted-text-color !default; +$agenda-appointment-hover-bg: $base-hover-bg !default; +$agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default; +$agenda-appointment-text-color: $base-text-color !default; + +$header-panel-cell-date: null !default; + +@if $mode == "light" { + $scheduler-appointment-text-color: #000 !default; + $header-panel-cell-date: #424242; + + @if $color == "blue"{ + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 48%, $space: hsl) !default; + $scheduler-cell-hover-bg: $base-hover-bg !default; + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; + $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default; + } + + @if $color == "saas" { + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: 30%, $space: hsl) !default; + $scheduler-cell-hover-bg: color.adjust($base-hover-bg, $lightness: 4.10%, $space: hsl) !default; + $scheduler-cell-active-bg: extcolor.adjust-if-not-achromatic($color: $base-bg, $hue: 222deg, $saturation: 100%, $lightness: -2%) !default; + $scheduler-workspace-focused-cell-color: color.adjust($base-accent, $lightness: 32.53%, $space: hsl) !default; + } +} + +@if $mode == "dark" { + $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: -48%, $space: hsl) !default; + $scheduler-appointment-text-color: #fff !default; + $header-panel-cell-date: #adadad; + $scheduler-cell-hover-bg: $base-hover-bg !default; + + @if $color == "blue"{ + $scheduler-cell-active-bg: color.change(color.adjust($base-bg, $lightness: -13.3%, $space: hsl), $alpha: 0.7) !default; + $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default; + } + + @if $color == "saas" { + $scheduler-cell-active-bg: color.adjust($base-bg, $lightness: 4.31%, $space: hsl) !default; + $scheduler-workspace-focused-cell-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -7deg, $saturation: -65.00%, $lightness: -41.18%) !default; + } +} + +$scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default; +$scheduler-appointment-focus-color: $scheduler-appointment-text-color; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss new file mode 100644 index 000000000000..a40c6ea98837 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss @@ -0,0 +1,1043 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../list/colors" as *; +@use "../form/sizes" as *; +@use "../radioGroup/sizes" as *; +@use "../toolbar/sizes" as *; +@use '../../base/scheduler/layout/header' as *; +@use "../../base/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/scheduler" as baseScheduler with ( + $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color, + $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg, + $scheduler-tooltip-list-focused-bg: $list-item-hover-bg, + $scheduler-appointment-base-color: $scheduler-appointment-base-color, + $scheduler-appointment-start-color: $scheduler-appointment-start-color, + $scheduler-appointment-active-color: $scheduler-appointment-active-color, + $scheduler-base-border-color: $scheduler-base-border-color, + $scheduler-accent-border-color: $scheduler-accent-border-color, + $scheduler-current-time-cell-color: $scheduler-current-time-cell-color, + $scheduler-time-indicator-color: $scheduler-time-indicator-color, + $scheduler-time-indicator-background-color: $scheduler-time-indicator-background-color, + $scheduler-workspace-background-color: $scheduler-workspace-background-color, + $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity, + $scheduler-workspace-month-text-color: $scheduler-workspace-month-text-color, + $scheduler-workspace-accent-color: $scheduler-workspace-accent-color, + $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color, + $scheduler-panel-text-color: $scheduler-panel-text-color, + $scheduler-left-column-width: $scheduler-left-column-width, + $scheduler-timeline-cell-height: $scheduler-timeline-cell-height, + $scheduler-workspace-active-cell-color: $scheduler-workspace-active-cell-color, + $scheduler-workspace-hovered-cell-color: $scheduler-workspace-hovered-cell-color, + $scheduler-workspace-focused-cell-color: $scheduler-workspace-focused-cell-color, + $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color, + $scheduler-appointment-text-color: $scheduler-appointment-text-color, + $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment, + $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state, + $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-hover-text-color, + + $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color, + $agenda-appointment-hover-bg: $agenda-appointment-hover-bg, + $agenda-appointment-active-bg: $agenda-appointment-active-bg, + $agenda-appointment-text-color: $agenda-appointment-text-color, + $agenda-appointment-title-font-size: $agenda-appointment-title-font-size, + + $scheduler-appointment-popup-icon-margin-top: $fluent-scheduler-appointment-popup-icon-margin-top, + $scheduler-appointment-popup-repeat-end-item-height: $fluent-scheduler-appointment-popup-repeat-end-item-height, + $scheduler-appointment-popup-repeat-end-item-vertical-margin: $fluent-radio-button-vertical-margin +); +@use "../button/colors" as *; +@use "../button/mixins" as *; +@use "../tooltip/colors" as *; + +// adduse +@use "../recurrenceEditor" as *; +@use "../scrollable"; + +$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5; + +$fluent-scheduler-month-date-text-size: 14px; + +$scheduler-first-of-month-border: 1px solid; + +$fluent-scheduler-agenda-time-panel-cell-padding: 8px; + +@include baseScheduler.scheduler-mixin(); + +.dx-scheduler-timeline .dx-scheduler-header-panel-cell { + height: auto; +} + +.dx-scheduler-date-time-indicator { + &::before { + display: none; + } +} + +.dx-scheduler-container { + border-radius: $scheduler-border-radius; +} + +.dx-scheduler-time-panel-cell { + height: $fluent-scheduler-workspace-date-table-cell-height; + + &::after { + content: none; + } + + > div { + margin-top: -6px; + font-size: $fluent-scheduler-time-panel-font-size; + + .dx-scheduler-small & { + font-size: $fluent-scheduler-time-panel-font-size - 1; + } + } + + padding-right: $fluent-scheduler-agenda-time-panel-cell-padding; + + .dx-scheduler-small & { + padding-right: 2px; + } + + .dx-rtl & { + padding-left: $fluent-scheduler-agenda-time-panel-cell-padding; + padding-right: 0; + } + + .dx-rtl.dx-scheduler-small & { + padding-left: 2px; + } + + &.dx-scheduler-time-panel-current-time-cell::before { + content: none; + } +} + +.dx-scheduler-date-table-cell { + height: $fluent-scheduler-workspace-date-table-cell-height; +} + +.dx-scheduler-all-day-title { + display: flex; + align-items: center; + justify-content: flex-end; + height: $fluent-scheduler-all-day-table-cell-height; + font-size: $fluent-scheduler-all-day-title-font-size; + border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; + text-align: right; + padding-right: $fluent-scheduler-agenda-time-panel-cell-padding; + + .dx-rtl & { + justify-content: start; + } + + .dx-scheduler-small & { + font-size: $fluent-scheduler-all-day-title-font-size * 0.8; + padding-right: 2px; + } + + .dx-scheduler-work-space-all-day-collapsed & { + height: $fluent-scheduler-collapsed-all-day-table-cell-height; + } +} + +.dx-scheduler-all-day-table { + height: $fluent-scheduler-all-day-table-cell-height; + + .dx-scheduler-work-space-all-day-collapsed & { + height: $fluent-scheduler-collapsed-all-day-table-cell-height; + } +} + +.dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors + padding: $fluent-scheduler-appointment-content-padding; +} + +.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: $fluent-scheduler-recurring-appointment-content-padding; +} + +.dx-rtl .dx-scheduler-appointment-content { + padding: $fluent-scheduler-appointment-content-padding-rtl; +} + +.dx-rtl .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: $fluent-scheduler-recurring-appointment-content-padding-rtl; +} + +.dx-scheduler-appointment-title { + font-size: 12px; +} + +.dx-scheduler-appointment-content-details { + font-size: 10px; +} + +.dx-rtl .dx-scheduler-work-space-day { + .dx-scheduler-all-day-appointment { + .dx-scheduler-appointment-content { + padding: $fluent-scheduler-appointment-content-padding-rtl; + } + } +} + +.dx-scheduler-work-space-week, +.dx-scheduler-work-space-work-week, +.dx-scheduler-work-space-day { + .dx-scheduler-all-day-appointment { + .dx-scheduler-appointment-content { + padding: $fluent-scheduler-appointment-content-padding; + } + } + + .dx-scheduler-date-time-indicator { + height: 2px; + } + + .dx-scheduler-date-table-row:nth-child(even) .dx-scheduler-date-table-cell { + border-top-style: dashed; + } + + .dx-scheduler-appointment { + container-type: size; + + &.dx-scheduler-appointment-recurrence { + @container (max-height: #{$fluent-scheduler-appointment-15min-height}) { + .dx-scheduler-appointment-content { + padding-right: $fluent-scheduler-appointment-10min-recurrence-padding-right; + } + } + + @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) { + .dx-scheduler-appointment-content { + padding-right: $fluent-scheduler-appointment-15min-recurrence-padding-right; + } + } + + @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) { + .dx-scheduler-appointment-content { + padding-right: $fluent-scheduler-appointment-20min-recurrence-padding-right; + } + } + } + + .dx-scheduler-appointment-content { + @container (max-height: #{$fluent-scheduler-appointment-25min-height}) { + display: flex; + align-items: center; + padding: $fluent-scheduler-appointment-short-content-padding; + + .dx-scheduler-appointment-content-details { + display: none; + } + + .dx-scheduler-appointment-recurrence-icon { + top: 50%; + transform: translateY(-50%); + } + } + } + + @container (max-height: #{$fluent-scheduler-appointment-15min-height}) { + .dx-scheduler-appointment-content { + .dx-scheduler-appointment-title { + font-size: $fluent-scheduler-appointment-10min-title-font-size; + line-height: $fluent-scheduler-appointment-10min-title-line-height; + } + + .dx-scheduler-appointment-recurrence-icon { + right: $fluent-scheduler-appointment-10min-icon-right; + font-size: $fluent-scheduler-appointment-10min-icon-font-size; + } + } + } + + @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) { + .dx-scheduler-appointment-content { + .dx-scheduler-appointment-title { + font-size: $fluent-scheduler-appointment-15min-title-font-size; + line-height: $fluent-scheduler-appointment-15min-title-line-height; + } + + .dx-scheduler-appointment-recurrence-icon { + right: $fluent-scheduler-appointment-15min-icon-right; + font-size: $fluent-scheduler-appointment-15min-icon-font-size; + } + } + } + + @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) { + .dx-scheduler-appointment-content { + .dx-scheduler-appointment-recurrence-icon { + right: $fluent-scheduler-appointment-20min-icon-right; + } + } + } + } +} + +.dx-scheduler-header-panel { + margin-top: 0; +} + +.dx-scheduler-header-panel-cell { + font-size: $fluent-scheduler-time-panel-font-size; + padding-bottom: 2px; + padding-left: $header-panel-time-cell-padding; + padding-right: $header-panel-time-cell-padding; + text-align: left; + vertical-align: bottom; + + .dx-rtl & { + text-align: right; + } + + .dx-scheduler-work-space.dx-scheduler-work-space-month & { + height: $header-panel-time-cell-height; + } + + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month & { + @include flex-container(column, nowrap); + } + + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month &, + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & { + align-items: flex-start; + justify-content: flex-end; + } + + .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & { + align-items: flex-end; + + &:not(.dx-scheduler-header-panel-week-cell) { + height: $fluent-scheduler-workspace-month-timeline--time-height; + font-size: $fluent-scheduler-time-panel-font-size; + padding-left: $fluent-scheduler-header-panel-margin; + padding-right: $fluent-scheduler-header-panel-margin; + } + + &.dx-scheduler-header-panel-week-cell { + align-items: flex-start; + display: flex; + } + } + + &.dx-scheduler-header-panel-week-cell { + border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; + flex-flow: column; + justify-content: flex-end; + } + + + &.dx-scheduler-header-panel-current-time-cell { + color: $scheduler-panel-text-color; + + &::before { + content: none; + } + + .dx-scheduler-header-panel-cell-date:first-child { + margin-bottom: 1px; + } + + .dx-scheduler-header-panel-cell-date:last-child { + color: $base-inverted-text-color; + background-color: $scheduler-current-time-cell-color; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: $header-day-element-height; + height: $header-day-element-height; + margin-top: 0; + } + } + + .dx-scheduler-header-panel-cell-date { + display: block; + font-size: 14px; + + .dx-scheduler-small & { + margin: 0 $fluent-scheduler-header-panel-margin * baseScheduler.$scheduler-small-size-factor; + } + + &:last-child { + font-size: $fluent-scheduler-header-panel-day-font-size; + margin-top: 4px; + margin-bottom: 4px; + margin-left: 8px; + color: $header-panel-cell-date; + } + } +} + +.dx-scheduler-timeline { + .dx-scheduler-date-table-cell { + height: $fluent-scheduler-timeline-date-table-cell-height; + } +} + +.dx-scheduler-work-space-day { + &.dx-scheduler-work-space-count { + .dx-scheduler-header-panel { + margin-top: 0; + } + } + + .dx-scheduler-header-panel { + .dx-scheduler-group-row { + &:not(:first-child) { + border-bottom: none; + } + } + } + + &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) { + .dx-scheduler-time-panel, + .dx-scheduler-header-panel-empty-cell { + border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; + } + } +} + +.dx-rtl .dx-scheduler-work-space.dx-scheduler-work-space-month { + .dx-scheduler-appointment-content { + padding: 4px 12px 0 8px; + } + + .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: 4px 12px 0 20px; + } +} + +.dx-scheduler-work-space.dx-scheduler-work-space-month { + .dx-scheduler-date-table-other-month { + color: $scheduler-workspace-other-month-text-color; + } + + .dx-scheduler-header-panel-cell-date:last-child { + color: $header-panel-cell-date; + border-radius: initial; + background-color: initial; + } + + .dx-scheduler-appointment-content { + padding: 4px 8px 0 12px; + font-size: $fluent-scheduler-appointment-month-text-size; + } + + .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: 4px 20px 0 12px; + } + + .dx-scheduler-date-table-first-of-month { + border-left: $scheduler-first-of-month-border; + border-left-color: $scheduler-first-month-border-color; + border-top: $scheduler-first-of-month-border; + border-top-color: $scheduler-first-month-border-color; + } + + .dx-scheduler-header-panel { + border-bottom: none; + } + + .dx-scheduler-date-table-scrollable .dx-scrollable-content { + min-height: 600px; + } + + .dx-scheduler-date-table-cell { + font-size: $fluent-scheduler-month-date-text-size; + text-align: left; + height: 100px; + + > div { + padding: $fluent-scheduler-workspace-month-cell-left-offset; + } + + .dx-rtl & { + text-align: right; + } + } + + + .dx-scheduler-header-panel-current-time-cell { + .dx-scheduler-header-panel-cell-date343 { + border-radius: initial; + background-color: initial; + color: $scheduler-current-time-cell-color; + } + } + + .dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors + padding-left: $fluent-scheduler-workspace-month-cell-left-offset; + + .dx-scheduler-header-panel-cell-date { + margin-left: 0; + line-height: $fluent-scheduler-workspace-month-header-height; + } + } + + .dx-scheduler-date-table-current-date { + color: $scheduler-current-time-cell-color; + } +} + +.dx-scheduler:not(.dx-scheduler-adaptive) { + .dx-scheduler-work-space.dx-scheduler-work-space-day, + .dx-scheduler-work-space.dx-scheduler-work-space-week, + .dx-scheduler-work-space.dx-scheduler-work-space-work-week { + .dx-scheduler-fixed-appointments, + .dx-scheduler-date-table-container { + .dx-scheduler-appointment-collector { + margin: $fluent-scheduler-dropdown-button-vertical-margin; + } + } + } + + .dx-scheduler-work-space.dx-scheduler-work-space-month:not(.dx-rtl) .dx-scheduler-appointment-collector { + margin-left: 52px; + } + + .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-rtl .dx-scheduler-appointment-collector { + margin-right: 52px; + } +} + +.dx-scheduler-adaptive { + .dx-scheduler-work-space-week .dx-scheduler-header-panel-cell { + white-space: nowrap; + } + + .dx-scheduler-appointment-collector { + margin: $fluent-scheduler-dropdown-button-adaptive-margin; + } + + .dx-scheduler-work-space.dx-scheduler-work-space-day, + .dx-scheduler-work-space.dx-scheduler-work-space-week, + .dx-scheduler-work-space.dx-scheduler-work-space-work-week { + .dx-scheduler-fixed-appointments, + .dx-scheduler-date-table-container { + .dx-scheduler-appointment-collector { + margin: $fluent-scheduler-dropdown-button-adaptive-vertical-margin; + } + } + } +} + +.dx-scheduler-appointment-collector { + height: $fluent-scheduler-dropdown-button-height; + margin: $fluent-scheduler-dropdown-button-margin; + position: absolute; + + &.dx-button { + border-radius: $fluent-scheduler-dropdown-button-height; + height: $fluent-scheduler-dropdown-button-height; + min-width: auto; + width: auto; + + &::before { + display: none; + } + + .dx-button-content { + padding: $fluent-scheduler-dropdown-button-padding 0; + font-size: 12px; + } + } +} + +.dx-scheduler-header { + @include header-sizes( + $fluent-scheduler-header-height, + $fluent-scheduler-header-offset, + $fluent-scheduler-toolbar-item-offset, + ); + + .dx-scheduler-navigator-next, + .dx-scheduler-navigator-previous { + @include dx-button-onlyicon-sizing($fluent-scheduler-navigator-icon-font-size); + } + + background-color: $scheduler-header-bg; + border-top-right-radius: $scheduler-border-radius; + border-top-left-radius: $scheduler-border-radius; +} + +.dx-scheduler-group-row { + .dx-scheduler-group-header { + font-weight: 500; + } +} + +.dx-scheduler-group-table, +.dx-scheduler-header-panel { + .dx-scheduler-group-row { + .dx-scheduler-group-header { + font-size: $fluent-scheduler-group-header-font-size; + text-align: left; + border-bottom: 1px solid; + border-bottom-color: $scheduler-base-border-color; + + .dx-scheduler-group-header-content { + padding-left: $fluent-scheduler-header-panel-margin; + + .dx-scheduler-work-space-month &, + .dx-scheduler-agenda & { + padding-left: $fluent-scheduler-workspace-month-cell-left-offset; + + .dx-rtl & { + padding-right: $fluent-scheduler-workspace-month-cell-left-offset; + padding-left: 0; + } + } + + .dx-scheduler-timeline & { + padding-left: 0; + } + } + + .dx-scheduler-timeline & { + vertical-align: top; + + .dx-scheduler-group-header-content div { + top: 8px; + transform: none; + } + } + + .dx-rtl & { + text-align: right; + } + } + } +} + +.dx-scheduler-all-day-panel { + background-color: $scheduler-alldaypanel-bg; + + .dx-scheduler-all-day-table-cell { + border-bottom: baseScheduler.$scheduler-base-border; + border-bottom-color: $scheduler-base-border-color; + } +} + +.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors + border-bottom-right-radius: $scheduler-border-radius; + border-bottom-left-radius: $scheduler-border-radius; + + &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) { + .dx-scheduler-header-panel, + .dx-scheduler-header-panel-empty-cell { + border-bottom-width: 1px; + } + } + + &.dx-scheduler-work-space-grouped { + .dx-scheduler-all-day-title { + border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; + } + + &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) { + .dx-scheduler-group-header { + border-bottom: none; + } + } + + &.dx-scheduler-agenda { + .dx-scheduler-date-table-cell { + border: none; + } + } + + &.dx-scheduler-timeline .dx-scheduler-group-row th { + .dx-rtl & { + border-left: none; + border-right: none; + } + } + + &.dx-scheduler-work-space-both-scrollbar:not(.dx-scheduler-agenda) { + .dx-scheduler-all-day-panel { + .dx-scheduler-first-group-cell { + border-left: none; + } + } + } + } +} + +.dx-scheduler-work-space-week { + .dx-scheduler-date-table-row:first-child { + border-top: none; + } +} + +.dx-scheduler-all-day-table-cell, +.dx-scheduler-date-table-cell { + &.dx-state-active { + background-color: $scheduler-cell-active-bg; + } + + &.dx-state-hover { + background-color: $scheduler-cell-hover-bg; + color: $scheduler-workspace-hovered-cell-color; + } + + &.dx-scheduler-focused-cell { + box-shadow: none; + } +} + +.dx-scheduler-appointment-popup { + > .dx-overlay-content > .dx-toolbar.dx-widget { + > .dx-toolbar-items-container { + height: $fluent-scheduler-appointment-popup-toolbar-height; + } + } + + .dx-form { + .dx-scheduler-form-icon { + color: $scheduler-form-icon-color; + + &.dx-field-item.dx-flex-layout { + height: $fluent-scheduler-appointment-popup-icon-container-height; + padding-inline-end: $fluent-scheduler-appointment-popup-icon-padding-right; + } + } + + .dx-scheduler-form-icon-sized-gap { + width: $fluent-base-icon-size; + } + + .dx-scheduler-form-subject-group .dx-scheduler-form-icon { + color: $scheduler-appointment-base-color; + } + + .dx-scheduler-days-of-week-buttons { + height: $fluent-toolbar-height; + gap: $fluent-scheduler-appointment-popup-days-of-week-buttons-gap; + } + + .dx-field-item:not(.dx-first-col) { + padding-inline-start: $fluent-scheduler-appointment-popup-item-padding-horizontal; + } + + .dx-field-item:not(.dx-last-col) { + padding-inline-end: $fluent-scheduler-appointment-popup-item-padding-horizontal; + } + + .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align { + height: $fluent-scheduler-appointment-popup-all-day-item-height; + + .dx-field-item-content { + .dx-switch.dx-widget { + margin-bottom: 3px; + } + } + } + + .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button { + height: auto; + + &.dx-button-mode-text.dx-state-focused { + outline: auto; + outline-offset: -2px; + } + } + } +} + +.dx-scheduler-header-panel, +.dx-scheduler-time-panel { + font-size: $fluent-scheduler-workspace-info-text-size; +} + + +.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th, +.dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell { + border-right: 1px solid; + border-right-color: $scheduler-group-separator-border-color; + + &:last-child { + border-right: none; + } + + .dx-rtl & { + border-left: 1px solid; + border-left-color: $scheduler-group-separator-border-color; + border-right: baseScheduler.$scheduler-base-border; + border-right-color: $scheduler-base-border-color; + + &:last-child { + border-left: none; + } + } +} + +.dx-scheduler-appointment { + &, + .dx-rtl &, + .dx-scheduler-work-space-month &, + .dx-scheduler-timeline &, + .dx-rtl .dx-scheduler-timeline & { + border-left: $fluent-scheduler-appointment-transparent-left-border; + border-right: $fluent-scheduler-appointment-transparent-right-border; + box-shadow: none; + border-radius: 4px; + + &.dx-state-focused { + color: $scheduler-appointment-focus-color; + } + + &.dx-state-active, + &.dx-resizable-resizing, + &.dx-state-hover, + &.dx-state-hover.dx-resizable { + box-shadow: none; + } + } +} + +.dx-scheduler-fixed-appointments .dx-draggable-dragging .dx-scheduler-appointment { + box-shadow: none; +} + +.dx-scheduler-dropdown-appointment-date { + color: $scheduler-dropdown-appointment-date-color; +} + +.dx-scheduler-work-space-vertical-grouped { // stylelint-disable-line no-duplicate-selectors + &.dx-scheduler-work-space-month { + .dx-scheduler-date-table-scrollable { + border-top: baseScheduler.$scheduler-base-border; + border-top-color: $scheduler-base-border-color; + } + } +} + +.dx-scheduler-work-space-both-scrollbar { + .dx-scheduler-all-day-title { + background-color: $scheduler-alldaypanel-bg; + } + + .dx-scheduler-header-panel { + .dx-scheduler-group-header:first-child { + border-left: none; + } + } +} + +.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) { + container-type: size; + + .dx-scheduler-appointment-strip { + display: block; + position: absolute; + width: 6px; + height: 100%; + background-color: $base-accent; + } + + @container (max-width: 8px) { + .dx-scheduler-appointment-strip { + display: none; + } + } +} + +.dx-rtl.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) { + .dx-scheduler-appointment-strip { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } +} + +.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color):not(.dx-rtl) { + .dx-scheduler-appointment-strip { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } +} + +.dx-scheduler-agenda { + .dx-scheduler-group-header { + font-size: $fluent-scheduler-group-header-font-size; + width: $fluent-scheduler-group-header-table-cell-width; + + .dx-scheduler-group-header-content { + padding-top: 2px; + width: $fluent-scheduler-group-header-table-cell-width; + + &::before { + display: none; + } + } + } + + .dx-scheduler-date-table-row, + .dx-scheduler-time-panel-row { + box-shadow: inset 0 -1px 0 0 $base-border-color; + } + + .dx-scheduler-time-panel-cell { + text-align: left; + padding-left: $fluent-scheduler-agenda-time-panel-cell-padding; + padding-right: 0; + + .dx-rtl & { + text-align: right; + padding-right: $fluent-scheduler-agenda-time-panel-cell-padding; + padding-left: 0; + } + + > span { + font-size: $fluent-scheduler-time-panel-font-size; + } + } + + .dx-scheduler-date-table-scrollable { + padding-top: 0; + } + + &.dx-scheduler-work-space-grouped { + .dx-scheduler-group-header { + border-bottom: none; + } + + .dx-scheduler-date-table-row.dx-scheduler-date-table-last-row, + .dx-scheduler-time-panel-row.dx-scheduler-date-table-last-row, + .dx-scheduler-group-table .dx-scheduler-group-row { + border-bottom: none; + + &:not(:last-child) { + box-shadow: inset 0 -1px 0 0 $scheduler-group-separator-border-color; + } + } + } +} + +.dx-scheduler-agenda-nodata { + font-size: $fluent-scheduler-workspace-info-text-size; +} + +.dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block { + .dx-button { + min-width: auto; + padding: 0; + + @include dx-button-flat-color-styling( + $button-default-text-color, + $button-default-text-color-hover, + $button-default-text-color-active, + $button-default-text-bg, + $button-default-text-hover-bg, + $button-default-text-focused-bg, + $button-default-text-active-bg + ); + + .dx-icon { + @include dx-icon-sizing($fluent-base-icon-size); + } + } +} + +.dx-rtl { + .dx-scheduler-work-space-both-scrollbar { + .dx-scheduler-header-panel { + .dx-scheduler-group-header:first-child { + border-right: none; + } + } + } + + &.dx-scheduler-work-space-day { + &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) { + .dx-scheduler-time-panel, + .dx-scheduler-header-panel-empty-cell { + border-left: baseScheduler.$scheduler-base-border; + border-left-color: $scheduler-base-border-color; + border-right: none; + } + } + } +} + +.dx-scheduler-appointment-tooltip-wrapper, +.dx-scheduler-overlay-panel { + .dx-overlay-content { + background-color: $base-bg; + + .dx-popup-content { + padding: 0; + } + + .dx-list { + .dx-list-item { + margin-bottom: 0; + margin-top: 0; + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + + &:last-of-type { + border-bottom-left-radius: $tooltip-border-radius; + border-bottom-right-radius: $tooltip-border-radius; + border-bottom: none; + } + + &:first-of-type { + border-top-left-radius: $tooltip-border-radius; + border-top-right-radius: $tooltip-border-radius; + } + + .dx-tooltip-appointment-item { + margin-left: $fluent-scheduler-appointment-tooltip-content-margin-left; + + .dx-tooltip-appointment-item-marker-body { + margin-top: 12px; + width: $fluent-tooltip-marker-dimension; + height: $fluent-tooltip-marker-dimension; + } + + .dx-tooltip-appointment-item-content { + .dx-tooltip-appointment-item-content-subject { + margin-top: $fluent-scheduler-appointment-tooltip-title-margin-top; + font-size: $fluent-scheduler-appointment-tooltip-title-font-size; + font-weight: 600; + } + + .dx-tooltip-appointment-item-content-date { + font-size: $fluent-scheduler-appointment-tooltip-date-font-size; + opacity: 1; + margin-top: 4px; + } + } + + .dx-tooltip-appointment-item-delete-button-container { + padding-top: $fluent-scheduler-appointment-tooltip-remove-padding-top; + } + } + } + } + } +} + +.dx-scheduler-timeline .dx-scheduler-group-flex-container .dx-scheduler-group-header { + width: 100px; +} + +.dx-scheduler-header-panel-empty-cell { + margin-top: 0; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss new file mode 100644 index 000000000000..764fadebbc69 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss @@ -0,0 +1,219 @@ +@use "../sizes" as *; +@use "../button/colors" as *; +@use "../form/sizes" as *; +@use "../toolbar/sizes" as *; + + +$fluent-scheduler-workspace-date-table-cell-height: null !default; +$fluent-scheduler-toolbar-item-offset: null !default; +$fluent-scheduler-navigator-height: null !default; +$fluent-scheduler-header-panel-day-font-size: null !default; +$fluent-scheduler-appointment-tooltip-title-font-size: null !default; +$fluent-scheduler-appointment-tooltip-date-font-size: null !default; +$fluent-scheduler-workspace-month-cell-left-offset: null !default; +$fluent-scheduler-appointment-content-padding: null !default; +$fluent-scheduler-recurring-appointment-content-padding: null !default; +$fluent-scheduler-appointment-content-padding-rtl: null !default; +$fluent-scheduler-recurring-appointment-content-padding-rtl: null !default; +$fluent-scheduler-dropdown-button-height: null !default; +$fluent-scheduler-dropdown-button-padding: null !default; +$fluent-scheduler-dropdown-button-margin: null !default; +$fluent-scheduler-dropdown-button-vertical-margin: null !default; +$fluent-scheduler-dropdown-button-adaptive-margin: null !default; +$fluent-scheduler-dropdown-button-adaptive-vertical-margin: null !default; +$fluent-scheduler-appointment-tooltip-content-margin-left: null !default; +$fluent-tooltip-marker-dimension: null !default; +$fluent-scheduler-appointment-tooltip-title-margin-top: null !default; +$fluent-scheduler-appointment-tooltip-remove-padding-top: null !default; + +$fluent-scheduler-appointment-popup-toolbar-height: null !default; +$fluent-scheduler-appointment-popup-icon-container-height: null !default; +$fluent-scheduler-appointment-popup-icon-padding-right: null !default; +$fluent-scheduler-appointment-popup-icon-margin-top: null !default; +$fluent-scheduler-appointment-popup-item-padding-horizontal: null !default; +$fluent-scheduler-appointment-popup-all-day-item-height: null !default; +$fluent-scheduler-appointment-popup-days-of-week-buttons-gap: null !default; +$fluent-scheduler-appointment-popup-repeat-end-item-height: null !default; + +$fluent-scheduler-appointment-short-content-padding: null !default; +$fluent-scheduler-appointment-15min-height: null !default; +$fluent-scheduler-appointment-20min-height: null !default; +$fluent-scheduler-appointment-25min-height: null !default; +$fluent-scheduler-appointment-10min-recurrence-padding-right: null !default; +$fluent-scheduler-appointment-10min-title-font-size: null !default; +$fluent-scheduler-appointment-10min-title-line-height: null !default; +$fluent-scheduler-appointment-10min-icon-font-size: null !default; +$fluent-scheduler-appointment-10min-icon-right: null !default; +$fluent-scheduler-appointment-15min-recurrence-padding-right: null !default; +$fluent-scheduler-appointment-15min-title-font-size: null !default; +$fluent-scheduler-appointment-15min-title-line-height: null !default; +$fluent-scheduler-appointment-15min-icon-font-size: null !default; +$fluent-scheduler-appointment-15min-icon-right: null !default; +$fluent-scheduler-appointment-20min-recurrence-padding-right: null !default; +$fluent-scheduler-appointment-20min-icon-right: null !default; + +$scheduler-left-column-width: 65px !default; +$fluent-scheduler-timeline-date-table-cell-height: 50px !default; + +/** +* $name 15. Border radius +* $type text +*/ +$scheduler-border-radius: 0 !default; + +$fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size; +$fluent-scheduler-appointment-month-text-size: 12px !default; +$fluent-scheduler-workspace-info-text-size: 16px !default; +$fluent-scheduler-all-day-title-font-size: 12px !default; +$fluent-scheduler-time-panel-font-size: 12px !default; +$fluent-scheduler-header-panel-margin: 14px !default; +$fluent-scheduler-group-header-font-size: 14px !default; +$fluent-scheduler-group-header-table-cell-width: 100px !default; +$fluent-scheduler-appointment-transparent-left-border: 1px solid transparent !default; +$fluent-scheduler-appointment-transparent-right-border: 1px solid transparent !default; +$fluent-scheduler-workspace-month-header-height: 22px !default; +$fluent-scheduler-workspace-month-timeline--time-height: 34px !default; + +$agenda-appointment-title-font-size: null !default; +$fluent-scheduler-header-height: null !default; +$fluent-scheduler-header-offset: null !default; + +$scheduler-timeline-cell-height: 50px !default; + +$header-day-element-height: null !default; + +$fluent-scheduler-collapsed-all-day-table-cell-height: null !default; + +$header-panel-time-cell-height: 32px !default; +$header-panel-time-cell-padding: null !default; + + +@if $size == "default" { + $fluent-scheduler-collapsed-all-day-table-cell-height: 32px !default; + $header-panel-time-cell-padding: 12px !default; + + $header-day-element-height: 26px; + $fluent-scheduler-workspace-date-table-cell-height: 38px !default; + + $fluent-scheduler-navigator-height: 36px !default; + $fluent-scheduler-header-panel-day-font-size: 16px !default; + $fluent-scheduler-header-height: 46px !default; + $fluent-scheduler-header-offset: 0 12px !default; + $fluent-scheduler-toolbar-item-offset: 4px !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default; + $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default; + $fluent-scheduler-workspace-month-cell-left-offset: 8px !default; + + $fluent-scheduler-appointment-content-padding: 6px 8px 6px 12px !default; + $fluent-scheduler-recurring-appointment-content-padding: 6px 20px 6px 12px !default; + $fluent-scheduler-appointment-content-padding-rtl: 6px 12px 6px 8px !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: 6px 12px 6px 20px !default; + $fluent-scheduler-dropdown-button-height: 22px !default; + $fluent-scheduler-dropdown-button-padding: 4px !default; + $fluent-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default; + $fluent-scheduler-dropdown-button-vertical-margin: 5px 3px 3px 3px !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: 6px !default; + $fluent-tooltip-marker-dimension: 12px !default; + $fluent-scheduler-appointment-tooltip-title-margin-top: 0 !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: 1px !default; + + $fluent-scheduler-appointment-popup-toolbar-height: 56px !default; + $fluent-scheduler-appointment-popup-icon-container-height: 32px !default; + $fluent-scheduler-appointment-popup-icon-padding-right: 10px !default; + $fluent-scheduler-appointment-popup-icon-margin-top: 24px !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: 6px !default; + $fluent-scheduler-appointment-popup-all-day-item-height: 40px !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: 32px !default; + + $agenda-appointment-title-font-size: 14px; + + $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; + $fluent-scheduler-appointment-15min-height: 17px !default; + $fluent-scheduler-appointment-20min-height: 24px !default; + $fluent-scheduler-appointment-25min-height: 32px !default; + + $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; + $fluent-scheduler-appointment-10min-title-font-size: 8px !default; + $fluent-scheduler-appointment-10min-title-line-height: 12px !default; + $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-10min-icon-right: 2px !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default; + $fluent-scheduler-appointment-15min-title-font-size: 12px !default; + $fluent-scheduler-appointment-15min-title-line-height: 18px !default; + $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-15min-icon-right: 2px !default; + + $fluent-scheduler-appointment-20min-icon-right: 2px !default; + $fluent-scheduler-appointment-20min-recurrence-padding-right: 18px !default; +} + +@else if $size == "compact" { + $fluent-scheduler-collapsed-all-day-table-cell-height: 24px !default; + $header-panel-time-cell-padding: 8px !default; + + $header-day-element-height: 24px; + $fluent-scheduler-workspace-date-table-cell-height: 28px !default; + + $fluent-scheduler-navigator-height: 28px !default; + $fluent-scheduler-header-panel-day-font-size: 14px !default; + $fluent-scheduler-header-height: 34px !default; + $fluent-scheduler-header-offset: 2px 8px !default; + $fluent-scheduler-toolbar-item-offset: 4px !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default; + $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default; + $fluent-scheduler-workspace-month-cell-left-offset: 4px !default; + + $fluent-scheduler-appointment-content-padding: 4px 6px 4px 8px !default; + $fluent-scheduler-recurring-appointment-content-padding: 4px 16px 4px 8px !default; + $fluent-scheduler-appointment-content-padding-rtl: 4px 8px 4px 6px !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: 4px 8px 4px 16px !default; + $fluent-scheduler-dropdown-button-height: 18px !default; + $fluent-scheduler-dropdown-button-padding: 2px !default; + $fluent-scheduler-dropdown-button-margin: 2px 1px 2px 3px !default; + $fluent-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: 8px !default; + $fluent-tooltip-marker-dimension: 18px !default; + $fluent-scheduler-appointment-tooltip-title-margin-top: 3px !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: 2px !default; + + $fluent-scheduler-appointment-popup-toolbar-height: 48px !default; + $fluent-scheduler-appointment-popup-icon-container-height: 24px !default; + $fluent-scheduler-appointment-popup-icon-padding-right: 8px !default; + $fluent-scheduler-appointment-popup-icon-margin-top: 18px !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: 4px !default; + $fluent-scheduler-appointment-popup-all-day-item-height: 30px !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: 24px !default; + + $agenda-appointment-title-font-size: 13px; + + $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; + $fluent-scheduler-appointment-15min-height: 17px !default; + $fluent-scheduler-appointment-20min-height: 24px !default; + $fluent-scheduler-appointment-25min-height: 32px !default; + + $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; + $fluent-scheduler-appointment-10min-title-font-size: 8px !default; + $fluent-scheduler-appointment-10min-title-line-height: 12px !default; + $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-10min-icon-right: 2px !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default; + $fluent-scheduler-appointment-15min-title-font-size: 12px !default; + $fluent-scheduler-appointment-15min-title-line-height: 12px !default; + $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; + $fluent-scheduler-appointment-15min-icon-right: 5px !default; + + $fluent-scheduler-appointment-20min-recurrence-padding-right: 20px !default; + $fluent-scheduler-appointment-20min-icon-right: 5px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss new file mode 100644 index 000000000000..c152e5624b19 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss @@ -0,0 +1,7 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$scrollview-shadow-color: color.change($base-shadow-color, $alpha: 0.37) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss new file mode 100644 index 000000000000..447aee0272c2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss @@ -0,0 +1,89 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../scrollable/colors" as *; + +// adduse +@use "../scrollable"; +@use "../../base/scrollView"; + +$scrollview-loading-indicator-size: 42px; + +.dx-scrollview-scrollbottom-text, +.dx-scrollview-pull-down-text { + margin-left: 10px; + top: math.div(50px - $fluent-base-font-size, 2); + display: inline-block; + + .dx-rtl & { + margin-left: 0; + margin-right: 10px; + } +} + +.dx-scrollview-pull-down-image { + display: none; +} + +.dx-scrollview-pull-down { + text-align: center; +} + +.dx-scrollable-native.dx-scrollable-native-android .dx-scrollview-pull-down { + background-color: $scrollable-bg; + box-shadow: 0 1px 4px 0 $scrollview-shadow-color; +} + +.dx-scrollview-scrollbottom-loading { + .dx-scrollview-scrollbottom-image { + width: 24px; + height: 24px; + } +} + +.dx-scrollview-scrollbottom-indicator, +.dx-scrollview-pull-down-indicator { + margin-right: 0; + height: $scrollview-loading-indicator-size; + width: $scrollview-loading-indicator-size; + border-radius: math.div($scrollview-loading-indicator-size, 2); + display: inline-flex; + justify-content: center; + flex-direction: column; + align-items: center; + box-shadow: 0 1px 3px 1px $scrollview-shadow-color; + opacity: 1; + + + > .dx-loadindicator { + height: 24px; + width: 24px; + + > .dx-loadindicator-wrapper { + font-size: 24px; + } + } +} + +.dx-scrollview-pull-down-indicator { + position: relative; + margin-left: 0; + margin-top: math.div(-$scrollview-loading-indicator-size, 2); +} + +.dx-scrollview-pull-down-text { + div { + position: relative; + } + + > div { + display: none; + + &.dx-scrollview-pull-down-text-visible { + display: block; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss new file mode 100644 index 000000000000..f690f47a9d06 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss @@ -0,0 +1,23 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$scrollable-bg: $base-element-bg !default; + +/** +* $name 10. Scroll bar background color +* $type color +*/ +$scrollable-scroll-bg: null !default; +$scrollable-scrollbar-bg: transparent !default; + +@if $mode == "light" { + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default; +} + +@if $mode == "dark" { + $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss new file mode 100644 index 000000000000..6015612b4384 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss @@ -0,0 +1,30 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/scrollable"; +@use "../../base/scrollable/mixins" as *; + +// adduse + +@include dx-scrollable-scroll-content( + $scrollable-scroll-bg, +); +@include dx-scrollable-scrollbar-hoverable( + $scrollable-scrollbar-bg, + transparent, + $scrollable-scroll-bg, +); +@include dx-scrollable-scrollbar-vertical( + $fluent-scrollbar-size-thin, + $fluent-scrollbar-size, + 0, +); +@include dx-scrollable-scrollbar-horizontal( + $fluent-scrollbar-size-thin, + $fluent-scrollbar-size, + 0, +); +@include dx-scrollable-scrollbars-alwaysvisible($fluent-scrollbar-size-thin); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss new file mode 100644 index 000000000000..6e9d2691cc2d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss @@ -0,0 +1,6 @@ +@use "../sizes" as *; + +// adduse + +$fluent-scrollbar-size-thin: 6px; +$fluent-scrollbar-size: 13px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss new file mode 100644 index 000000000000..4421c0573c88 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Item background color +* $type color +*/ +$selectbox-list-bg: $base-element-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss new file mode 100644 index 000000000000..168fd4424cc6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss @@ -0,0 +1,25 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/sizes" as *; +@use "../../base/selectBox"; + +// adduse + +@use "../dropDownList"; + +.dx-selectbox-popup-wrapper { + .dx-overlay-content { + box-shadow: $fluent-base-dropdown-widgets-shadow; + } + + .dx-popup-content { + padding: 0; + } + + .dx-list { + background-color: $selectbox-list-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss new file mode 100644 index 000000000000..b9687c354af1 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss @@ -0,0 +1,33 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Bar background color +* $type color +*/ +$fluent-slider-bar-bg: $base-border-color-accessible !default; + +/** +* $name 20. Selected range background color +* $type color +*/ +$slider-accent-color: $base-accent !default; +$slider-accent-color-hover: $base-accent-hover !default; +$slider-accent-color-focused: $base-accent-active !default; + +$slider-invalid-color: $base-invalid-color !default; +$slider-invalid-color-hover: $base-invalid-color-hover !default; +$slider-invalid-color-focused: $base-invalid-color-selected !default; + +$fluent-slider-disabled-bg: $base-foreground-disabled !default; +$fluent-slider-bar-disabled-bg: $base-background-disabled !default; + +/** +* $name 30. Slider tooltip text color +* $type color +*/ +$fluent-slider-tooltip-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss new file mode 100644 index 000000000000..4e8dca40441c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss @@ -0,0 +1,170 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/slider"; +@use "../../base/popover/mixins" as *; + +// adduse + +.dx-slider-wrapper { + height: $fluent-slider-wrapper-height; + + @include dx-popover-arrow-size(14px, 2px); +} + +.dx-slider-bar { + margin-top: math.div($fluent-slider-wrapper-height - $fluent-slider-track-height, 2); + margin-right: math.div($fluent-slider-handle-size, 2); + margin-left: math.div($fluent-slider-handle-size, 2); + background: $fluent-slider-bar-bg; + height: $fluent-slider-track-height; + border-radius: $fluent-slider-track-border-radius; +} + +.dx-slider-range { + height: $fluent-slider-track-height; + border-radius: $fluent-slider-track-border-radius; + + &.dx-slider-range-visible { + background: $slider-accent-color; + } +} + +.dx-slider-handle { + margin-top: math.div($fluent-slider-track-height, 2) - math.div($fluent-slider-handle-size, 2); + margin-inline-end: math.div(-$fluent-slider-handle-size, 2); + width: $fluent-slider-handle-size; + height: $fluent-slider-handle-size; + border-radius: $fluent-slider-radius; + border-width: 1px; + border-style: solid; + border-color: $base-border-color; + background-color: $base-element-bg; + + &::after { + position: absolute; + display: block; + inset: 0; + background: $slider-accent-color; + content: ""; + border-radius: $fluent-slider-radius; + border-width: 3px; + border-style: solid; + border-color: $base-element-bg; + } + + &.dx-state-hover { + &::after { + background: $slider-accent-color-hover; + } + } + + &.dx-state-focused { + border-color: $slider-accent-color-focused; + + &::after { + background: $slider-accent-color-focused; + } + } + + .dx-tooltip-wrapper { + .dx-overlay-content { + .dx-popup-content { + line-height: normal; + color: $fluent-slider-tooltip-color; + + .dx-slider-tooltip-position-top & { + padding-top: 6px; + } + } + + &.dx-state-disabled { + .dx-popup-content { + padding-top: math.div($fluent-slider-tooltip-width, 2); + + .dx-slider-tooltip-position-top & { + padding-top: 6px; + padding-bottom: math.div($fluent-slider-tooltip-width, 2); + } + } + } + } + } +} + +.dx-slider-tooltip-position-top { + padding-top: $fluent-slider-tooltip-width + 6; +} + +.dx-slider-tooltip-position-bottom { + padding-bottom: $fluent-slider-tooltip-width + 6; +} + +.dx-slider-label-position-bottom { + .dx-slider-label { + bottom: -18px; + } +} + +.dx-slider-label-position-top { + .dx-slider-label { + top: -15px; + } +} + +.dx-invalid { + .dx-slider-handle { + &::after { + background-color: $base-invalid-color; + } + + &.dx-state-hover { + &::after { + background-color: $slider-invalid-color-hover; + } + } + + &.dx-state-focused { + border-color: $slider-invalid-color-focused; + + &::after { + background-color: $slider-invalid-color-focused; + } + } + } + + .dx-slider-range-visible { + background-color: $slider-invalid-color; + border-color: $slider-invalid-color; + } +} + +.dx-state-disabled { + &.dx-slider, + .dx-slider { + opacity: 1; + + .dx-slider-handle { + opacity: 1; + } + } + + &.dx-slider-handle { + border-color: $fluent-slider-disabled-bg; + + &::after { + background: $fluent-slider-disabled-bg; + } + } + + .dx-slider-bar { + background: $fluent-slider-bar-disabled-bg; + } + + .dx-slider-range.dx-slider-range-visible { + background: $fluent-slider-disabled-bg; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss new file mode 100644 index 000000000000..59a9fe40718d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-slider-handle-size: null !default; +$fluent-slider-wrapper-height: null !default; +$fluent-slider-tooltip-width: null !default; +$fluent-slider-top-tooltip-margin: null !default; + +$fluent-slider-height: 28px !default; // for fieldset height +$fluent-slider-radius: 50% !default; +$fluent-slider-track-height: null !default; +$fluent-slider-track-border-radius: 2px !default; +$fluent-slider-handle-height: null !default; +$fluent-slider-handle-inner-size: null !default; + +@if $size == "default" { + $fluent-slider-track-height: 4px !default; + $fluent-slider-handle-height: 18px !default; + $fluent-slider-handle-size: 20px !default; + $fluent-slider-handle-inner-size: 18px !default; + $fluent-slider-wrapper-height: 32px !default; + $fluent-slider-tooltip-width: 34px !default; + $fluent-slider-top-tooltip-margin: -5px !default; +} + +@else if $size == "compact" { + $fluent-slider-track-height: 2px !default; + $fluent-slider-handle-height: 14px !default; + $fluent-slider-handle-size: 16px !default; + $fluent-slider-handle-inner-size: 14px !default; + $fluent-slider-wrapper-height: 26px !default; + $fluent-slider-tooltip-width: 28px !default; + $fluent-slider-top-tooltip-margin: -2px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss new file mode 100644 index 000000000000..b8ace30a01fb --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss @@ -0,0 +1,11 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/sortable" as * with ( + $base-accent: $base-accent, +); + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss new file mode 100644 index 000000000000..63068d06cc1a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss @@ -0,0 +1,4 @@ +@use "../colors" as *; +@use "sass:color"; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss new file mode 100644 index 000000000000..3ae03fb5edbd --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss @@ -0,0 +1,5 @@ +@use "../../base/speechToText"; +@use "colors" as *; +@use "sizes" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss new file mode 100644 index 000000000000..2f5a2c74b993 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss @@ -0,0 +1,4 @@ +@use "../common/sizes" as *; +@use "../sizes" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss new file mode 100644 index 000000000000..635ec575c479 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -0,0 +1,16 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; +@use "../button/colors" as *; + +// adduse + +$speed-dial-action-color: $base-text-color !default; +$speed-dial-action-shadow: 0 2px 6px 0 color.change($base-shadow-color, $alpha: 0.2) !default; +$speed-dial-action-label-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.16) !default; +$speed-dial-action-shading-color: $overlay-shader-bg !default; + +$speed-dial-action-bg: $button-normal-bg !default; +$speed-dial-action-hover-bg: $button-normal-hover-bg !default; +$speed-dial-action-active-bg: $button-normal-active-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss new file mode 100644 index 000000000000..3405d0583b4b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss @@ -0,0 +1,51 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/speedDialAction" as *; +@use "../button/colors" as *; + +// adduse +@use "../overlay"; + +$fluent-fa-button-label-offset: 16px; +$fluent-fa-button-label-padding: 4px 8px; + +@include dx-fa-button-mixin( + $fluent-main-fa-button-size, + $fluent-fa-button-size, + $fluent-base-icon-size, + $fluent-base-font-size, + $fluent-fa-button-label-padding, + $fluent-fa-button-label-offset, + $speed-dial-action-color, + $speed-dial-action-bg, + $speed-dial-action-shadow, + $speed-dial-action-shading-color, + $speed-dial-action-hover-bg, + $speed-dial-action-active-bg, + $speed-dial-action-label-shadow, + $button-default-bg, + $button-default-color +); + +.dx-fa-button { + &.dx-fa-button-main { + .dx-overlay-content { + .dx-fa-button-label { + padding: $fluent-main-fa-button-label-padding; + font-size: $fluent-base-font-size; + font-weight: 500; + } + } + + &.dx-fa-button-with-label { + .dx-overlay-content { + .dx-fa-button-icon { + padding-inline-start: $fluent-main-fa-button-horizontal-padding; + } + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss new file mode 100644 index 000000000000..ea4e78592f90 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss @@ -0,0 +1,22 @@ +@use "../sizes" as *; + +// adduse + +$fluent-main-fa-button-label-padding: null !default; +$fluent-main-fa-button-horizontal-padding: null !default; +$fluent-main-fa-button-size: null !default; +$fluent-fa-button-size: null !default; + +@if $size == "default" { + $fluent-main-fa-button-size: 44px !default; + $fluent-fa-button-size: 44px !default; + $fluent-main-fa-button-horizontal-padding: 16px; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px; +} + +@else if $size == "compact" { + $fluent-main-fa-button-size: 32px !default; + $fluent-fa-button-size: 32px !default; + $fluent-main-fa-button-horizontal-padding: 12px; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss new file mode 100644 index 000000000000..c8ace1165861 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss @@ -0,0 +1,57 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Icon color +* $type color +*/ +$splitter-resize-handle-color: null !default; + +/** +* $name 30. Focused state icon color +* $type color +*/ +$splitter-resize-handle-color-focused: null !default; + +/** +* $name 40. Handle background color +* $type color +*/ +$splitter-resize-handle-bg: null !default; + +/** +* $name 50. Handle hover state background color +* $type color +*/ +$splitter-resize-handle-bg-hover: null !default; + +/** +* $name 60. Handle focused state background color +* $type color +*/ +$splitter-resize-handle-bg-focused: $base-accent !default; + +@if $mode == 'light' { + $splitter-resize-handle-color: $base-icon-color !default; + $splitter-resize-handle-color-focused: $base-inverted-text-color !default; + + $splitter-resize-handle-bg: $base-border-color !default; + $splitter-resize-handle-bg-hover: $base-border-color-hover !default; +} + +@if $mode == 'dark' { + $splitter-resize-handle-color: $base-text-color !default; + $splitter-resize-handle-color-focused: $base-inverted-text-color !default; + + $splitter-resize-handle-bg: $base-border-color !default; + $splitter-resize-handle-bg-hover: $base-border-color-hover !default; +} + +/** +* $name 20. Hover state icon color +* $type color +*/ +$splitter-resize-handle-color-hover: $splitter-resize-handle-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss new file mode 100644 index 000000000000..2293317c0861 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss @@ -0,0 +1,27 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/splitter"; +@use "../../base/splitter/mixins" as *; + +// adduse + +.dx-splitter { + @include resize-handle-states( + $splitter-resize-handle-color, + $splitter-resize-handle-bg, + $splitter-resize-handle-color-hover, + $splitter-resize-handle-bg-hover, + $splitter-resize-handle-color-focused, + $splitter-resize-handle-bg-focused, + ); +} + +.dx-resize-handle { + .dx-icon { + @include dx-icon-sizing($splitter-resize-handle-icon-size); + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss new file mode 100644 index 000000000000..6f0cb64e572f --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss @@ -0,0 +1,5 @@ +@use "../sizes" as *; + +// adduse + +$splitter-resize-handle-icon-size: 20px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss new file mode 100644 index 000000000000..4157ae022c9d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss @@ -0,0 +1,8 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$splitter-inactive-color: $base-border-color !default; +$splitter-bg: color.change($base-accent, $alpha: 0.5) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss new file mode 100644 index 000000000000..1c3ce7709513 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss @@ -0,0 +1,19 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/splitterBar"; + +// adduse +.dx-splitter-bar { + background-color: $splitter-bg; + + &.dx-splitter-inactive { + background-color: $splitter-inactive-color; + } +} + +.dx-splitter-border { + background-color: transparent; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss new file mode 100644 index 000000000000..3a9178551640 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss @@ -0,0 +1,3 @@ +@use "../sizes" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss new file mode 100644 index 000000000000..210edd8c874a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss @@ -0,0 +1,175 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../button/colors" as *; + +// adduse + +/** +* $name 10. Active color +* $type color +*/ +$stepper-step-accent-bg: $base-accent !default; + +/** +* $name 20. Hover state active color +* $type color +*/ +$stepper-step-accent-hover-bg: $base-accent-hover !default; + +/** +* $name 30. Invalid color +* $type color +*/ +$stepper-step-danger-bg: $base-danger !default; + +/** +* $name 40. Hover state invalid color +* $type color +*/ +$stepper-step-danger-hover-bg: $base-danger-hover !default; + +/** +* $name 60. Background color +* $type color +*/ +$stepper-step-base-bg: $base-bg !default; + +/** +* $name 70. Hover state background color +* $type color +*/ +$stepper-step-base-hover-bg: $base-hover-bg !default; + +/** +* $name 80. Border color +* $type color +*/ +$stepper-step-base-border-color: $base-border-color !default; + +/** +* $name 90. Hover state border color +* $type color +*/ +$stepper-step-base-hover-border-color: $base-border-color-hover !default; + +/** +* $name 100. Text or icon color +* $type color +*/ +$stepper-step-base-text-color: $base-text-color !default; + +/** +* $name 110. Label text color +* $type color +*/ +$stepper-step-base-label-color: $base-text-color !default; + +/** +* $name 120. Background color +* $type color +*/ +$stepper-step-selected-bg: $stepper-step-accent-bg !default; + +/** +* $name 130. Hover state background color +* $type color +*/ +$stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default; + +/** +* $name 140. Text or icon color +* $type color +*/ +$stepper-step-selected-text-color: $base-inverted-text-color !default; + +/** +* $name 150. Label text color +* $type color +*/ +$stepper-step-selected-label-color: $stepper-step-accent-bg !default; + +/** +* $name 160. Background color +* $type color +*/ +$stepper-step-invalid-bg: $stepper-step-base-bg !default; + +/** +* $name 170. Hover state background color +* $type color +*/ +$stepper-step-invalid-hover-bg: $stepper-step-base-hover-bg !default; + +/** +* $name 180. Border color +* $type color +*/ +$stepper-step-invalid-border-color: $stepper-step-base-border-color !default; + +/** +* $name 190. Hover state border color +* $type color +*/ +$stepper-step-invalid-hover-border-color: $stepper-step-base-hover-border-color !default; + +/** +* $name 200. Text or icon color +* $type color +*/ +$stepper-step-invalid-text-color: $stepper-step-danger-bg !default; + +/** +* $name 210. Hover state text or icon color +* $type color +*/ +$stepper-step-invalid-hover-text-color: $stepper-step-danger-hover-bg !default; + +/** +* $name 220. Invalid label text color +* $type color +*/ +$stepper-step-invalid-label-color: $stepper-step-danger-bg !default; + +/** +* $name 230. Background color +* $type color +*/ +$stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default; + +/** +* $name 240. Hover state background color +* $type color +*/ +$stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default; +$stepper-step-disabled-shadow: $base-bg !default; + +/** +* $name 260. Background color +* $type color +*/ +$stepper-step-disabled-bg: $base-background-disabled !default; + +/** +* $name 270. Text color +* $type color +*/ +$stepper-step-disabled-text-color: $base-foreground-disabled !default; + +/** +* $name 280. Pending color +* $type color +*/ +$stepper-connector-bg: $base-separator-color !default; + +/** +* $name 290. Completed color +* $type color +*/ +$stepper-connector-value-bg: $base-accent !default; + +/** +* $name 300. Shadow color +* $type color +*/ +$stepper-step-shadow-color: $base-typography-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss new file mode 100644 index 000000000000..6a9ab72d97c7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss @@ -0,0 +1,55 @@ +@use "../../base/stepper"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/stepper/mixins" as *; + +// adduse + +@include stepper( + $stepper-padding, +); +@include connector( + $stepper-connector-bg, + $stepper-connector-value-bg, + $stepper-connector-size, + $stepper-connector-padding, + $stepper-connector-thickness, +); +@include step( + $stepper-step-min-size, + $stepper-step-indicator-size, + $stepper-step-indicator-size, + $stepper-step-content-row-gap, + $stepper-step-content-column-gap, + $stepper-step-optional-mark-font-size, + $stepper-step-icon-size, + $stepper-step-transition-duration, +); +@include step-states( + $stepper-step-shadow-color, + $stepper-step-base-bg, + $stepper-step-base-hover-bg, + $stepper-step-base-border-color, + $stepper-step-base-hover-border-color, + $stepper-step-base-text-color, + $stepper-step-base-label-color, + $stepper-step-selected-bg, + $stepper-step-selected-hover-bg, + $stepper-step-selected-text-color, + $stepper-step-selected-label-color, + $stepper-step-selected-font-weight, + $stepper-step-invalid-bg, + $stepper-step-invalid-hover-bg, + $stepper-step-invalid-border-color, + $stepper-step-invalid-hover-border-color, + $stepper-step-invalid-text-color, + $stepper-step-invalid-hover-text-color, + $stepper-step-invalid-label-color, + $stepper-step-invalid-selected-bg, + $stepper-step-invalid-selected-hover-bg, + $stepper-step-disabled-text-color, + $stepper-step-disabled-bg, + $stepper-step-disabled-shadow, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss new file mode 100644 index 000000000000..ffaac27f33cd --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss @@ -0,0 +1,37 @@ +@use "colors" as *; +@use "../colors" as *; +@use "../sizes" as *; +@use "../typography/sizes" as *; + +// adduse + +$stepper-padding: null !default; +$stepper-step-min-size: null !default; +$stepper-step-indicator-size: null !default; +$stepper-step-content-row-gap: null !default; +$stepper-step-content-column-gap: null !default; +$stepper-step-optional-mark-font-size: $fluent-xs-font-size !default; +$stepper-step-icon-size: $fluent-button-icon-size !default; + +$stepper-step-selected-font-weight: 600 !default; +$stepper-step-transition-duration: .4s !default; + +@if $size == "default" { + $stepper-padding: 12px !default; + $stepper-step-min-size: 48px !default; + $stepper-step-indicator-size: 32px !default; + $stepper-step-content-row-gap: 8px !default; + $stepper-step-content-column-gap: 12px !default; +} + +@else if $size == "compact" { + $stepper-padding: 8px !default; + $stepper-step-min-size: 40px !default; + $stepper-step-indicator-size: 24px !default; + $stepper-step-content-row-gap: 6px !default; + $stepper-step-content-column-gap: 8px !default; +} + +$stepper-connector-thickness: 2px !default; +$stepper-connector-size: $stepper-step-indicator-size !default; +$stepper-connector-padding: $stepper-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss new file mode 100644 index 000000000000..2f117d4e3bca --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss @@ -0,0 +1,45 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$switch-accent-color: $base-accent !default; +$switch-accent-color-hover: $base-accent-hover !default; +$switch-accent-color-focused: $base-accent-active !default; + +/** +* $name 20. Track 'OFF' background color +* $type color +*/ +$switch-bg: transparent !default; + +/** +* $name 30. Handle 'OFF' background color +* $type color +*/ +$switch-handle-off-bg: $base-border-color-accessible !default; + +/** +* $name 40. Track 'ON' background color +* $type color +*/ +$switch-on-bg: $base-accent !default; + +/** +* $name 50. Handle 'ON' background color +* $type color +*/ +$switch-handle-on-bg: $base-element-bg !default; +$switch-handle-border-radius: 50% !default; +$switch-on-disabled-bg: $base-background-disabled !default; +$switch-handle-disabled-bg: $base-foreground-disabled !default; +$switch-border-color-disabled: $base-border-color-disabled !default; +$switch-off-border-color: $base-border-color-accessible !default; +$switch-off-border-hover-color: $base-border-color-accessible-hover !default; +$switch-off-border-active-color: $base-border-color-accessible-focused !default; + +$switch-invalid-color: $base-invalid-color !default; +$switch-invalid-color-hover: $base-invalid-color-hover !default; +$switch-invalid-color-focused: $base-invalid-color-selected !default; + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss new file mode 100644 index 000000000000..6c85de952e61 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss @@ -0,0 +1,53 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/switch"; +@use "../../base/switch/mixins" as *; + +// adduse + +$fluent-switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1); +$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1); +$fluent-switch-shadow: none; + +@include dx-switch( + $fluent-switch-width, + $fluent-switch-height, + $switch-padding, + $switch-handle-height, + $switch-container-height, + $switch-container-horizontal-padding, + $switch-container-vertical-margin, + $switch-handle-margin, + $switch-handle-border-radius, + $fluent-switch-transition, +); +@include dx-switch-states-fluent( + $switch-on-disabled-bg, + $switch-handle-disabled-bg, + $fluent-switch-shadow, + $switch-bg, + $switch-on-bg, + $switch-accent-color-hover, + $switch-accent-color-focused, + $fluent-switch-handle-on-shadow, + $switch-handle-off-bg, + $switch-handle-on-bg, + 1px solid, + $switch-off-border-color, + $switch-off-border-hover-color, + $switch-off-border-active-color, + $switch-accent-color, + $switch-invalid-color, + $switch-invalid-color-hover, + $switch-invalid-color-focused, + $switch-border-color-disabled, +); +@include dx-switch-rtl( + $switch-handle-height - $switch-handle-margin, + $fluent-switch-shadow-blur-radius, + $fluent-switch-container-adjustment, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss new file mode 100644 index 000000000000..b3a5482eb57c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss @@ -0,0 +1,35 @@ +@use "../sizes" as *; + +// adduse + +$fluent-switch-width: null !default; +$switch-handle-margin: null !default; +$switch-padding: 8px !default; +$switch-container-vertical-margin: null !default; +$switch-container-horizontal-padding: null !default; +$fluent-switch-height: null !default; +$switch-handle-height: null !default; +$switch-container-height: null !default; + +$fluent-switch-shadow-blur-radius: 0 !default; +$fluent-switch-container-adjustment: 6px !default; + +@if $size == "default" { + $fluent-switch-width: 40px !default; + $switch-handle-height: 14px !default; + $switch-handle-margin: 3px !default; + $switch-container-vertical-margin: 0 !default; + $switch-container-horizontal-padding: $switch-handle-margin !default; + $fluent-switch-height: 20px !default; + $switch-container-height: $fluent-switch-height !default; +} + +@else if $size == "compact" { + $fluent-switch-width: 32px !default; + $switch-handle-height: 12px !default; + $switch-handle-margin: 2px !default; + $switch-container-vertical-margin: 0 !default; + $switch-container-horizontal-padding: $switch-handle-margin !default; + $fluent-switch-height: 16px !default; + $switch-container-height: $fluent-switch-height !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss new file mode 100644 index 000000000000..31bfdffe7e83 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss @@ -0,0 +1,77 @@ +@use "sass:color"; +@use "sass:selector"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/tabPanel"; + +// adduse + +.dx-tabpanel { + .dx-tabpanel-tab { + flex-basis: unset; + flex-grow: 0; + flex-shrink: 0; + } + + .dx-tabs .dx-tabs-scrollable .dx-tab { + flex-basis: auto; + } + + .dx-tabs-nav-button { + height: auto; + } +} + +.dx-tabpanel-tabs-position-top { + > .dx-tabpanel-tabs { + .dx-tabs { + border-bottom: 1px solid; + border-bottom-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-bottom: none; + } + } + } +} + +.dx-tabpanel-tabs-position-bottom { + > .dx-tabpanel-tabs { + .dx-tabs { + border-top: 1px solid; + border-top-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-top: none; + } + } + } +} + +.dx-tabpanel-tabs-position-left { + > .dx-tabpanel-tabs { + .dx-tabs { + border-right: 1px solid; + border-right-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-right: none; + } + } + } +} + +.dx-tabpanel-tabs-position-right { + > .dx-tabpanel-tabs { + .dx-tabs { + border-left: 1px solid; + border-left-color: $base-border-color; + + @at-root #{selector.append(".dx-empty-collection", &)} { + border-left: none; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss new file mode 100644 index 000000000000..c8641f539d1a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../colors" as *; +@use "../sizes" as *; +@use "../button/colors" as *; +@use "../button/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../../base/tabs"; +@use "variables/colors" as *; +@use "variables/sizes" as *; +@use "mixins" as *; +@use "layout/tabs" as *; +@use "layout/tab/base" as *; +@use "layout/navigation-button/base" as *; + +// adduse +@use "../scrollable"; +@use "../badge"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss new file mode 100644 index 000000000000..c0cff9f89df7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss @@ -0,0 +1,62 @@ +@use "sass:color"; +@use "../../../colors" as *; +@use "../../../sizes" as *; +@use "../../../button/colors" as *; +@use "../../../button/mixins" as *; +@use "../../../../base/icon_fonts" as *; +@use "../../../../base/tabs"; +@use "../../variables/colors" as *; +@use "../../variables/sizes" as *; +@use "../../mixins" as *; + +// adduse +@use "../../../scrollable"; +@use "../../../badge"; + +.dx-tabs .dx-tabs-nav-button { + box-shadow: none; +} + +.dx-tabs-styling-mode-secondary .dx-tabs-nav-button { + border-radius: $fluent-tab-item-border-radius-secondary; +} + +.dx-tabs-nav-button { + border: none; + height: $fluent-tab-height; + background-color: $tabs-nav-button-bg-color; + + &.dx-button.dx-state-disabled.dx-button-mode-contained { + visibility: hidden; + } + + &.dx-button-has-icon .dx-icon { + width: $fluent-tab-nav-button-icon-width; + height: $fluent-tab-nav-button-icon-height; + font-size: $fluent-tab-nav-button-icon-font-size; + } + + &.dx-state-active { + border: none; + } + + &.dx-state-disabled { + opacity: 1; + background-color: $tabs-tab-background; + + .dx-button-content { + opacity: $tabs-tab-button-disabled-opacity; + } + } + + .dx-button-content { + flex: unset; + padding: $fluent-tab-nav-button-content-padding; + } +} + +.dx-tabs-vertical { + .dx-tabs-nav-button { + padding: $fluent-tab-vertical-nav-button-content-padding; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss new file mode 100644 index 000000000000..4aef73e1ce3a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss @@ -0,0 +1,128 @@ +@use "sass:color"; +@use "sass:string" as string; +@use "../../../colors" as *; +@use "../../../sizes" as *; +@use "../../../button/colors" as *; +@use "../../../button/mixins" as *; +@use "../../../../base/icon_fonts" as *; +@use "../../../../base/tabs"; +@use "../../variables/colors" as *; +@use "../../variables/sizes" as *; +@use "../../mixins" as *; +@use "../../../common/sizes" as *; + +// adduse +@use "../../../scrollable"; +@use "../../../badge"; +@use "styling-mode/primary" as *; +@use "styling-mode/secondary" as *; + + +.dx-tab { + gap: $fluent-tabs-item-gap; + padding: $fluent-tabs-item-padding; + background-color: $tabs-tab-background; + color: $tabs-tab-color; + + &.dx-state-hover { + background-color: $tabs-hovered-tab-bg-color; + } + + &.dx-tab-selected { + color: $tabs-tab-selected-color; + + .dx-icon { + color: $tabs-tab-icon-selected-color; + } + + .dx-tab-text .dx-tab-text-span { + visibility: visible; + + .dx-tab-text-span-pseudo { + visibility: hidden; + } + } + } + + &.dx-state-disabled { + color: $tabs-tab-disabled-color; + + .dx-tab-text .dx-tab-text-span-pseudo { + color: $tabs-tab-disabled-color; + } + + .dx-icon { + color: $tabs-tab-icon-disabled-color; + } + } + + &.dx-state-active { + background-color: $tabs-active-tab-bg-color; + } + + .dx-tab-text { + column-gap: $fluent-base-icon-margin; + row-gap: $fluent-tabs-item-gap; + line-height: $fluent-line-height; + + .dx-tab-text-span { + position: relative; + display: block; + font-weight: $fluent-tab-font-weight-accent; + visibility: hidden; + } + + .dx-tab-text-span-pseudo { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + color: $tabs-tab-color; + font-weight: $fluent-tab-font-weight-basic; + visibility: visible; + } + } + + .dx-icon { + color: $tabs-tab-icon-color; + visibility: visible; + + @include dx-icon-sizing($fluent-tabs-icon-size); + + width: 1em; + height: 1em; + line-height: 1; + } + + .dx-tabs-item-badge { + align-self: center; + min-width: $fluent-badge-min-size; + min-height: $fluent-badge-min-size; + } +} + +.dx-tabs.dx-state-focused { + .dx-tab.dx-state-focused { + background-color: $tabs-focused-tab-bg-color; + } +} + +.dx-tabs-icon-position-start .dx-tab-text::after { + text-align: end; +} + +.dx-tabs-icon-position-end .dx-tab-text::after { + text-align: start; +} + +.dx-tabs-icon-position-top .dx-tab-text::after { + text-align: center; + vertical-align: bottom; +} + +.dx-tabs-icon-position-bottom .dx-tab-text::after { + text-align: center; + vertical-align: top; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss new file mode 100644 index 000000000000..890f62cda840 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss @@ -0,0 +1,121 @@ +@use "sass:color"; +@use "../../../../colors" as *; +@use "../../../../sizes" as *; +@use "../../../../button/colors" as *; +@use "../../../../button/mixins" as *; +@use "../../../../../base/icon_fonts" as *; +@use "../../../../../base/tabs"; +@use "../../../variables/colors" as *; +@use "../../../variables/sizes" as *; +@use "../../../mixins" as *; + +// adduse +@use "../../../../scrollable"; +@use "../../../../badge"; + + +.dx-tabs-styling-mode-primary { + .dx-tab { + &.dx-state-hover { + background-color: $tabs-tab-bg-color-hover-primary; + } + + &.dx-state-focused { + background-color: $tabs-tab-bg-color-focus-primary; + } + + &.dx-state-active { + background-color: $tabs-tab-bg-color-active-primary; + } + } + + &.dx-tab-indicator-position-top { + .dx-tab { + @include dx-tabs-indicator-primary(top); + } + } + + &.dx-tab-indicator-position-bottom { + .dx-tab { + @include dx-tabs-indicator-primary(bottom); + } + } + + &.dx-tab-indicator-position-top, + &.dx-tab-indicator-position-bottom { + .dx-tab { + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + } + + .dx-tab-selected { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + + &.dx-state-focused { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } + + &.dx-tab-indicator-position-right { + .dx-tab { + @include dx-tabs-indicator-primary(right); + } + } + + &.dx-tab-indicator-position-left { + .dx-tab { + @include dx-tabs-indicator-primary(left); + } + } + + &.dx-tab-indicator-position-right, + &.dx-tab-indicator-position-left { + .dx-tab { + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + } + + .dx-tab-selected { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + + &.dx-state-focused { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss new file mode 100644 index 000000000000..719a34b5ba77 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss @@ -0,0 +1,117 @@ +@use "sass:color"; +@use "../../../../colors" as *; +@use "../../../../sizes" as *; +@use "../../../../button/colors" as *; +@use "../../../../button/mixins" as *; +@use "../../../../../base/icon_fonts" as *; +@use "../../../../../base/tabs"; +@use "../../../variables/colors" as *; +@use "../../../variables/sizes" as *; +@use "../../../mixins" as *; + +// adduse +@use "../../../../scrollable"; +@use "../../../../badge"; + + +.dx-tabs-styling-mode-secondary { + .dx-tab { + border-radius: $fluent-tab-item-border-radius-secondary; + } + + &.dx-tab-indicator-position-top { + .dx-tab .dx-tab-content { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-horizontal-indicator-secondary(top); + } + } + + &.dx-tab-indicator-position-bottom { + .dx-tab .dx-tab-content { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-horizontal-indicator-secondary(bottom); + } + } + + &.dx-tab-indicator-position-top, + &.dx-tab-indicator-position-bottom { + .dx-tab { + &.dx-state-hover .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + + &.dx-tab-selected { + .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + } + + &.dx-state-focused .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled .dx-tab-content { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } + } + + &.dx-tab-indicator-position-right { + .dx-tab { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-vertical-indicator-secondary(right); + } + } + + &.dx-tab-indicator-position-left { + .dx-tab { + @include dx-tabs-indicator-secondary(); + @include dx-tabs-vertical-indicator-secondary(left); + } + } + + &.dx-tab-indicator-position-right, + &.dx-tab-indicator-position-left { + .dx-tab { + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-active); + } + } + + .dx-tab-selected { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic); + + &.dx-state-focused { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused); + } + + &.dx-state-hover { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover); + } + + &.dx-state-active { + @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active); + } + + &.dx-state-disabled { + @include dx-tabs-indicator-background($tabs-tab-border-color-disabled); + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss new file mode 100644 index 000000000000..7ae4d1d39d0a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss @@ -0,0 +1,24 @@ +@use "sass:color"; +@use "../../../colors" as *; +@use "../../../sizes" as *; +@use "../../../button/colors" as *; +@use "../../../button/mixins" as *; +@use "../../../../base/icon_fonts" as *; +@use "../../../../base/tabs"; +@use "../../variables/colors" as *; +@use "../../variables/sizes" as *; +@use "../../mixins" as *; + +// adduse +@use "../../../scrollable"; +@use "../../../badge"; + + +.dx-tabs { + padding: 0; + background-color: $tabs-tab-background; + + .dx-scrollable { + flex-basis: 100%; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss new file mode 100644 index 000000000000..002c2ac14ca9 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss @@ -0,0 +1,86 @@ +@use "../variables/sizes" as *; + +// adduse + + +@mixin dx-tabs-indicator { + &::after { + content: ""; + position: absolute; + } +} + +@mixin dx-tabs-indicator-background($background-color) { + &::after { + background-color: $background-color; + } +} + +@mixin dx-tabs-indicator-primary($position) { + @include dx-tabs-indicator(); + + &::after { + @if $position == top { + top: 0; + right: 0; + left: 0; + width: $fluent-indicator-length-primary; + height: $fluent-indicator-thickness-primary; + } @else if $position == right { + top: 0; + right: 0; + bottom: 0; + height: $fluent-indicator-length-primary; + width: $fluent-indicator-thickness-primary; + } @else if $position == bottom { + right: 0; + bottom: 0; + left: 0; + width: $fluent-indicator-length-primary; + height: $fluent-indicator-thickness-primary; + } @else if $position == left { + top: 0; + bottom: 0; + left: 0; + height: $fluent-indicator-length-primary; + width: $fluent-indicator-thickness-primary; + } + } +} + +@mixin dx-tabs-indicator-secondary { + @include dx-tabs-indicator(); + + &::after { + border-radius: $fluent-indicator-border-radius-secondary; + } +} + +@mixin dx-tabs-horizontal-indicator-secondary($position) { + &::after { + right: 0; + left: 0; + width: $fluent-indicator-length-secondary; + height: $fluent-indicator-thickness-secondary; + + @if $position == top { + top: -$fluent-tabs-item-padding-top-bottom; + } @else if $position == bottom { + bottom: -$fluent-tabs-item-padding-top-bottom; + } + } +} + +@mixin dx-tabs-vertical-indicator-secondary($position) { + &::after { + top: $fluent-tabs-item-padding-top-bottom; + width: $fluent-indicator-thickness-secondary; + height: calc($fluent-indicator-length-secondary - 2 * $fluent-tabs-item-padding-top-bottom); + + @if $position == right { + right: 0; + } @else if $position == left { + left: 0; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss new file mode 100644 index 000000000000..3935b46b4008 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss @@ -0,0 +1,87 @@ +@use "sass:color"; +@use "../../colors" as *; +@use "../../button/colors" as *; + +// adduse + +/** +* $name 10. Tab text color +* $type color +*/ +$tabs-tab-color: $base-text-color !default; + +/** +* $name 20. Selected tab text color +* $type color +*/ +$tabs-tab-selected-color: $base-text-color !default; + +/** +* $name 30. Disabled tab color +* $type color +*/ +$tabs-tab-disabled-color: $base-foreground-disabled !default; + +/** +* $name 40. Selected tab border color +* $type color +*/ +$tabs-tab-border-color-selected-basic: $base-accent !default; +$tabs-tab-border-color-selected-active: $base-accent-active !default; +$tabs-tab-border-color-selected-hover: $base-accent-hover !default; +$tabs-tab-border-color-selected-focused: $base-accent !default; +$tabs-tab-border-color-active: $base-border-color-focused !default; +$tabs-tab-border-color-hover: $base-border-color-hover !default; + +/** +* $name 50. Disabled tab border color +* $type color +*/ +$tabs-tab-border-color-disabled: $base-foreground-disabled !default; + +/** +* $name 60. Tab background color +* $type color +*/ +$tabs-tab-background: transparent !default; + +/** +* $name 70. Tab icon color +* $type color +*/ +$tabs-tab-icon-color: $tabs-tab-color !default; + +/** +* $name 80. Selected tab icon color +* $type color +*/ +$tabs-tab-icon-selected-color: $base-accent !default; + +/** +* $name 90. Disabled tab icon color +* $type color +*/ +$tabs-tab-icon-disabled-color: $base-foreground-disabled !default; +$tabs-tab-button-disabled-opacity: 0 !default; + +/** +* $name 100. Hovered tab background color +* $type color +*/ +$tabs-hovered-tab-bg-color: transparent !default; + +/** +* $name 110. Focused tab background color +* $type color +*/ +$tabs-focused-tab-bg-color: $base-hover-bg !default; +$tabs-tab-bg-color-hover-primary: $base-hover-bg !default; +$tabs-tab-bg-color-focus-primary: $base-hover-bg !default; +$tabs-tab-bg-color-active-primary: $base-selected-bg !default; + +/** +* $name 120. Active tab background color +* $type color +*/ +$tabs-active-tab-bg-color: $base-element-bg !default; +$tabs-nav-button-bg-color: transparent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss new file mode 100644 index 000000000000..1b1aec0e4282 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss @@ -0,0 +1,61 @@ +@use "../../sizes" as *; + +// adduse + + +$fluent-tabs-item-gap: 4px !default; +$fluent-tabs-item-padding: null !default; +$fluent-tabs-item-padding-top-bottom: null !default; +$fluent-tabs-item-padding-right-left: null !default; +$fluent-tab-height: null !default; + +$fluent-tab-font-weight-basic: 400 !default; +$fluent-tab-font-weight-accent: 500 !default; +$fluent-base-icon-margin: null !default; +$fluent-tabs-icon-size: $fluent-base-icon-size !default; + +$fluent-tab-nav-button-icon-width: null !default; +$fluent-tab-nav-button-icon-height: null !default; +$fluent-tab-nav-button-icon-font-size: null !default; +$fluent-tab-nav-button-content-padding: null !default; + +$fluent-tab-vertical-nav-button-content-padding: null !default; + +$fluent-indicator-thickness-primary: 2px !default; +$fluent-indicator-thickness-secondary: 3px !default; + +$fluent-indicator-length-primary: 100% !default; +$fluent-indicator-length-secondary: 100% !default; + +$fluent-tab-item-border-radius-secondary: 4px !default; +$fluent-indicator-border-radius-secondary: 4px !default; + +$fluent-badge-min-size: null !default; + +@if $size == "default" { + $fluent-tabs-item-padding-top-bottom: 12px !default; + $fluent-tabs-item-padding-right-left: 10px !default; + $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; + $fluent-tab-height: auto !default; + $fluent-base-icon-margin: 8px !default; + $fluent-tab-nav-button-icon-width: 20px !default; + $fluent-tab-nav-button-icon-height: 20px !default; + $fluent-tab-nav-button-icon-font-size: 20px !default; + $fluent-tab-nav-button-content-padding: 0 4px !default; + $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; + $fluent-badge-min-size: 20px !default; +} + +@else if $size == "compact" { + $fluent-tabs-item-padding-top-bottom: 8px !default; + $fluent-tabs-item-padding-right-left: 8px !default; + $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; + $fluent-tab-height: auto !default; + $fluent-base-icon-margin: 8px !default; + $fluent-tab-nav-button-icon-width: 16px !default; + $fluent-tab-nav-button-icon-height: 16px !default; + $fluent-tab-nav-button-icon-font-size: 16px !default; + $fluent-tab-nav-button-content-padding: 0 4px !default; + $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; + $fluent-badge-min-size: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss new file mode 100644 index 000000000000..532cea56befe --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss @@ -0,0 +1,44 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../color" as extcolor; +@use "../textEditor/colors" as *; + +// adduse + +/** +* $name 10. Tag text color +* $type color +*/ +$tagbox-tag-color: $base-text-color !default; + +/** +* $name 20. Tag background color +* $type color +*/ +$tagbox-tag-bg: null !default; +$tagbox-tag-hover-bg: $base-typography-bg !default; + +/** +* $name 30. Tag active text color +* $type color +*/ +$tagbox-tag-active-color: $base-text-color !default; + +/** +* $name 40. Tag close button color +* $type color +*/ +$tagbox-tag-button-remove-bg: $base-icon-color !default; +$tagbox-tag-border-color-focused: $base-accent-active !default; +$tagbox-select-all-border-color: $base-border-color !default; +$tagbox-tag-foreground-disabled: $base-foreground-disabled !default; +$tagbox-tag-disabled: $base-background-disabled !default; + +@if $mode == "light" { + $tagbox-tag-bg: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default; +} + +@if $mode == "dark" { + $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss new file mode 100644 index 000000000000..b4c7f569023d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss @@ -0,0 +1,186 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor" as *; +@use "../common/sizes" as *; +@use "../../base/tagBox"; + +// adduse + +.dx-tagbox { + .dx-tag-container { + height: 100%; + padding-top: $fluent-tagbox-tag-container-vertical-padding; + padding-bottom: $fluent-tagbox-tag-container-vertical-padding; + gap: $fluent-tagbox-tag-container-gap; + + .dx-texteditor-input { + padding: 0; + min-height: 0; + } + } + + &.dx-editor-underlined { + .dx-tag-container { + padding-top: $fluent-tagbox-tag-container-vertical-padding + 1px; + padding-bottom: $fluent-tagbox-tag-container-vertical-padding + 1px; + } + } + + &.dx-editor-outlined, + &.dx-editor-filled, + &.dx-editor-underlined { + .dx-texteditor-input { + height: $fluent-tagbox-tag-height; + } + } + + &.dx-editor-outlined, + &.dx-editor-filled { + .dx-tag-container { + padding-inline-start: $fluent-tagbox-tag-container-padding-left; + } + } + + &.dx-texteditor-with-label:not(.dx-texteditor-label-outside), + &.dx-texteditor-with-floating-label { + &.dx-editor-filled, + &.dx-editor-underlined { + .dx-tag { + margin: 0; + } + + .dx-texteditor-input { + padding: 0; + } + } + + &.dx-editor-filled { + .dx-tag-container, + .dx-placeholder::before { + padding-top: $fluent-tagbox-filled-with-label-top-padding; + padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding; + } + } + + &.dx-editor-underlined { + .dx-tag-container, + .dx-placeholder::before { + padding-top: $fluent-tagbox-filled-with-label-top-padding + 1px; + padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding + 1px; + } + } + } + + &.dx-state-disabled { + .dx-tag-content { + color: $tagbox-tag-foreground-disabled; + background-color: $tagbox-tag-disabled; + } + + .dx-tag-remove-button { + &::before { + color: $tagbox-tag-foreground-disabled; + } + } + } +} + +.dx-tagbox-single-line { + .dx-tag-container { + padding-right: 0; + } +} + +.dx-tag-content { + display: inline-flex; + align-items: center; + font-size: $fluent-tagbox-tag-content-font-size; + line-height: $fluent-tagbox-tag-content-line-height; + margin: 0; + padding-top: $fluent-tagbox-tag-content-vertical-padding; + padding-bottom: $fluent-tagbox-tag-content-vertical-padding; + padding-inline-start: $fluent-tagbox-tag-content-padding-left; + padding-inline-end: $fluent-tagbox-tag-content-padding-right; + min-width: 40px; + background-color: $tagbox-tag-bg; + color: $tagbox-tag-color; + border-radius: $tagbox-tag-border-radius; + border-width: 1px; + border-style: solid; + border-color: $base-border-color-disabled; +} + +.dx-tag-remove-button { + display: flex; + align-items: center; + justify-content: center; + width: $fluent-tagbox-tag-height; + height: 100%; + + @include dx-icon(clear); + + font-size: $fluent-tagbox-tag-content-font-size + 2px; + + &::before { + content: "\f15f"; + display: flex; + align-items: center; + justify-content: center; + color: $tagbox-tag-button-remove-bg; + } +} + +.dx-tag { + &:hover { + .dx-tag-content { + background-color: $tagbox-tag-hover-bg; + color: $tagbox-tag-active-color; + } + } + + &.dx-state-focused { + .dx-tag-content { + color: $tagbox-tag-active-color; + border-color: $tagbox-tag-border-color-focused; + } + } +} + +@mixin tagbox-editor-container-offset() { + inset-inline-end: $fluent-invalid-badge-horizontal-padding; +} + +.dx-tagbox.dx-invalid, +.dx-tagbox.dx-valid { + .dx-texteditor-container { + &::after { + @include tagbox-editor-container-offset(); + } + } +} + +.dx-tagbox.dx-validation-pending { + .dx-texteditor-container { + .dx-pending-indicator { + @include tagbox-editor-container-offset(); + } + } +} + +.dx-tagbox-popup-wrapper { + .dx-list-select-all { + border-bottom: 1px solid; + border-bottom-color: $tagbox-select-all-border-color; + padding-bottom: $fluent-tagbox-select-all-padding-bottom; + margin-bottom: $fluent-tagbox-select-all-margin-bottom; + + &::after { + background-color: transparent; + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss new file mode 100644 index 000000000000..2c3b9c7da6b3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss @@ -0,0 +1,46 @@ +@use "../sizes" as *; + +// adduse + +$fluent-tagbox-tag-content-padding-left: null !default; +$fluent-tagbox-tag-content-padding-right: null !default; +$fluent-tagbox-tag-content-vertical-padding: null !default; +$fluent-tagbox-tag-content-font-size: null !default; +$fluent-tagbox-tag-container-padding-left: null !default; +$fluent-tagbox-tag-container-vertical-padding: null !default; +$fluent-tagbox-tag-height: null !default; +$fluent-tagbox-select-all-padding-bottom: 12px !default; +$fluent-tagbox-select-all-margin-bottom: 3px !default; +$tagbox-tag-border-radius: 999em !default; +$fluent-tagbox-filled-with-label-top-padding: null !default; +$fluent-tagbox-filled-with-label-bottom-padding: null !default; +$fluent-tagbox-tag-content-line-height: null !default; +$fluent-tagbox-tag-container-gap: null !default; + +@if $size == "default" { + $fluent-tagbox-tag-content-padding-left: 6px !default; + $fluent-tagbox-tag-content-padding-right: 20px !default; + $fluent-tagbox-tag-content-vertical-padding: 2px !default; + $fluent-tagbox-tag-content-font-size: 12px !default; + $fluent-tagbox-tag-container-padding-left: 12px !default; + $fluent-tagbox-tag-container-vertical-padding: 5px !default; + $fluent-tagbox-tag-container-gap: 4px !default; + $fluent-tagbox-tag-height: 20px !default; + $fluent-tagbox-tag-content-line-height: 1.1666em !default; + $fluent-tagbox-filled-with-label-top-padding: 9px !default; + $fluent-tagbox-filled-with-label-bottom-padding: 1px !default; +} + +@else if $size == "compact" { + $fluent-tagbox-tag-content-padding-left: 4px !default; + $fluent-tagbox-tag-content-padding-right: 20px !default; + $fluent-tagbox-tag-content-vertical-padding: 0 !default; + $fluent-tagbox-tag-content-font-size: 10px !default; + $fluent-tagbox-tag-container-padding-left: 8px !default; + $fluent-tagbox-tag-container-vertical-padding: 3px !default; + $fluent-tagbox-tag-container-gap: 2px !default; + $fluent-tagbox-tag-height: 16px !default; + $fluent-tagbox-tag-content-line-height: 1.3333em !default; + $fluent-tagbox-filled-with-label-top-padding: 6px !default; + $fluent-tagbox-filled-with-label-bottom-padding: 0 !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss new file mode 100644 index 000000000000..28d9c151038d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss @@ -0,0 +1,35 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/textArea"; +@use "../../base/textArea/mixins" as *; +@use "../textEditor/sizes" as *; + +// adduse + +@include dx-textarea( + 2px, + $textarea-content-line-height, + $fluent-filled-texteditor-input-top-padding, + $fluent-filled-texteditor-input-with-label-top-padding, + $fluent-standard-texteditor-with-label-input-top-padding, +); + +.dx-textarea { + &.dx-editor-underlined { + .dx-texteditor-input { + padding-top: $fluent-standard-texteditor-input-top-padding + 1; + padding-bottom: $fluent-standard-texteditor-input-bottom-padding + 1; + } + + &.dx-texteditor-with-label:not(.dx-texteditor-label-outside), + &.dx-texteditor-with-floating-label { + .dx-texteditor-input { + padding-bottom: $fluent-standard-texteditor-with-label-input-bottom-padding; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss new file mode 100644 index 000000000000..ede206945fd0 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss @@ -0,0 +1,13 @@ +@use "../sizes" as *; + +// adduse + +$textarea-content-line-height: null !default; + +@if $size == "default" { + $textarea-content-line-height: 20px !default; +} + +@else if $size == "compact" { + $textarea-content-line-height: 16px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss new file mode 100644 index 000000000000..7b43f685dc7d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss @@ -0,0 +1,5 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss new file mode 100644 index 000000000000..321d236788e3 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss @@ -0,0 +1,71 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../textEditor/colors" as *; +@use "../textEditor/sizes" as *; +@use "../../base/textBox"; + +// adduse +@use "../textEditor" as *; + +@mixin dx-texteditor-search-icon($texteditor-icon-size) { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: $texteditor-icon-size; + height: 100%; + + &::before { + font-size: $texteditor-icon-container-size; + } +} + +.dx-searchbox { + .dx-icon-search { + @include dx-icon(search); + + color: $texteditor-placeholder-color; + } + + &.dx-editor-underlined { + .dx-icon-search { + @include dx-texteditor-search-icon($textbox-search-icon-size); + } + + .dx-texteditor-input, + .dx-placeholder::before { + padding-inline-start: $textbox-search-icon-size; + } + } + + &.dx-editor-filled, + &.dx-editor-outlined { + .dx-icon-search { + @include dx-texteditor-search-icon($textbox-search-icon-size); + } + + .dx-texteditor-input, + .dx-placeholder::before { + padding-inline-start: $textbox-search-icon-size; + } + } + + &.dx-state-disabled { + .dx-icon-search { + color: $base-foreground-disabled; + } + } +} + +.dx-searchbar { + padding-bottom: 5px; + + .dx-texteditor { + margin: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss new file mode 100644 index 000000000000..130c6b7a4650 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss @@ -0,0 +1,13 @@ +@use "../sizes" as *; + +// adduse + +$textbox-search-icon-size: null !default; + +@if $size == "default" { + $textbox-search-icon-size: 32px !default; +} + +@else if $size == "compact" { + $textbox-search-icon-size: 24px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss new file mode 100644 index 000000000000..9b1c0e6ee6f6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss @@ -0,0 +1,153 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Text color +* $type color +*/ +$texteditor-color: null !default; + +/** +* $name 20. Placeholder text color +* $type color +*/ +$texteditor-placeholder-color: null !default; + +/** +* $name 30. Outlined background color +* $type color +*/ +$texteditor-outlined-bg: $base-element-bg !default; + +/** +* $name 31. Outlined hovered background color +* $type color +*/ +$texteditor-outlined-bg-hover: $texteditor-outlined-bg !default; + +/** +* $name 32. Outlined focused background color +* $type color +*/ +$texteditor-outlined-bg-focused: $texteditor-outlined-bg !default; + +/** +* $name 40. Filled background color +* $type color +*/ +$texteditor-filled-bg: null !default; + +/** +* $name 50. Underlined background color +* $type color +*/ +$texteditor-underlined-bg: transparent !default; + +/** +* $name 51. Underlined hovered background color +* $type color +*/ +$texteditor-underlined-bg-hover: $texteditor-underlined-bg !default; + +/** +* $name 52. Underlined focused background color +* $type color +*/ +$texteditor-underlined-bg-focused: $texteditor-underlined-bg !default; + +/** +* $name 60. Border color +* $type color +*/ +$texteditor-border-color: $base-border-color !default; +$texteditor-border-color-hover: $base-border-color-hover !default; +$texteditor-border-color-focused: $base-border-color-focused !default; + +/** +* $name 70. Bottom border color +* $type color +*/ +$texteditor-border-bottom-color: $base-border-color-accessible !default; +$texteditor-border-bottom-color-hover: null !default; +$texteditor-border-bottom-color-focused: null !default; + +/** +* $name 80. Focused state indicator color +* $type color +*/ +$texteditor-indicator-border-color: $base-accent !default; + +$texteditor-button-clear-icon-color: $base-icon-color !default; +$texteditor-invalid-focused-border-color: $base-invalid-color-hover !default; +$texteditor-invalid-faded-border-color: $base-invalid-color !default; +$texteditor-border-color-disabled: $base-border-color-disabled !default; +$texteditor-disabled-text-color: $base-foreground-disabled !default; +$texteditor-input-border-radius: $base-border-radius !default; +$texteditor-label-transition: + font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, + transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, + top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; + +@if $mode == "light" { + @if $color == "blue" { + $texteditor-color: $base-text-color !default; + $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default; + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default; + } + + @if $color == "saas" { + $texteditor-color: rgba(66, 81, 118, 1) !default; + $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default; + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: rgba(243, 245, 248, 1) !default; + } + + $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default; + $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default; + $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default; + $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default; +} + + +@if $mode == "dark" { + @if $color == "blue" { + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default; + } + + @if $color == "saas" { + $texteditor-outlined-bg: rgba(20, 30, 40, 1) !default; + $texteditor-filled-bg: rgba(50, 60, 75, 1) !default; + } + + $texteditor-color: $base-text-color !default; + $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default; + $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default; + $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default; + $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default; + $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default; +} + +/** +* $name 41. Filled hovered background color +* $type color +*/ +$texteditor-filled-bg-hover: $texteditor-filled-bg !default; + +/** +* $name 42. Filled focused background color +* $type color +*/ +$texteditor-filled-bg-focused: $texteditor-filled-bg !default; + +$texteditor-label-color: $texteditor-placeholder-color; +$texteditor-label-color-focused: $base-accent; + +:root { + --dx-texteditor-color-text: #{$texteditor-color}; + --dx-texteditor-color-label: #{$texteditor-label-color}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss new file mode 100644 index 000000000000..3ce252791d4e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss @@ -0,0 +1,586 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../common/sizes" as *; +@use "../button/sizes" as *; +@use "../common/mixins" as *; +@use "../common/sizes" as *; +@use "../../base/textEditor"; +@use "../../base/textEditor/mixins" as *; +@use "../colorBox/sizes" as *; + +// adduse + +$fluent-base-standard-texteditor-input-horizontal-padding: 0; +$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding; +$fluent-editor-custom-button-margin: 6px; +$fluent-editor-border-width: 1px; + +@mixin texteditor-outlined-styling() { + background-color: $texteditor-outlined-bg; + border-radius: $texteditor-input-border-radius; + border-width: $fluent-editor-border-width; + border-style: solid; + border-color: $texteditor-border-color; + border-bottom-color: $texteditor-border-bottom-color; + + &::before { + box-sizing: border-box; + content: ""; + position: absolute; + left: -1px; + bottom: -1px; + right: -1px; + height: $texteditor-input-border-radius; + width: calc(100% + 2 * $fluent-editor-border-width); + border-bottom-left-radius: $texteditor-input-border-radius; + border-bottom-right-radius: $texteditor-input-border-radius; + border-bottom-color: $texteditor-indicator-border-color; + clip-path: inset(calc(100% - 2px) 0 0); + transform: scaleX(0); + transition-property: transform; + transition-duration: 50ms; + transition-timing-function: cubic-bezier(0.7, 0, 1, 0.5); + } + + &.dx-texteditor-with-label, + &.dx-texteditor-with-floating-label { + .dx-texteditor-label { + width: calc(100% + 2 * $fluent-editor-border-width); + inset: -1px; + } + + .dx-datebox { + border: none; + } + } + + &.dx-state-disabled, + &.dx-state-readonly { + background-color: transparent; + border-color: $texteditor-border-color-disabled; + } + + &.dx-invalid { + border-color: $texteditor-invalid-faded-border-color; + + &.dx-state-hover, + &.dx-state-focused { + border-color: $texteditor-invalid-focused-border-color; + } + + &::before { + border-color: $texteditor-invalid-faded-border-color; + } + } + + &.dx-state-hover { + background-color: $texteditor-outlined-bg-hover; + border-left-color: $texteditor-border-color-hover; + border-right-color: $texteditor-border-color-hover; + border-top-color: $texteditor-border-color-hover; + border-bottom-color: $texteditor-border-bottom-color-hover; + } + + &.dx-state-focused, + &.dx-state-active { + background-color: $texteditor-outlined-bg-focused; + border-left-color: $texteditor-border-color-focused; + border-right-color: $texteditor-border-color-focused; + border-top-color: $texteditor-border-color-focused; + border-bottom-color: $texteditor-border-bottom-color-focused; + + &::before { + transform: scaleX(1); + transition-property: transform; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + } + } +} + +@mixin texteditor-filled-styling() { + background-color: $texteditor-filled-bg; + border-radius: $texteditor-input-border-radius; + border-width: $fluent-editor-border-width; + border-style: solid; + border-color: transparent; + + .dx-placeholder::before, + .dx-texteditor-input { + padding-top: $fluent-filled-texteditor-input-top-padding; + padding-bottom: $fluent-filled-texteditor-input-bottom-padding; + } + + &::before { + left: -1px; + bottom: -1px; + right: -1px; + height: $texteditor-input-border-radius; + width: calc(100% + 2 * $fluent-editor-border-width); + border-bottom-left-radius: $texteditor-input-border-radius; + border-bottom-right-radius: $texteditor-input-border-radius; + border-bottom-color: $texteditor-indicator-border-color; + clip-path: inset(calc(100% - 2px) 0 0); + } + + &.dx-state-hover { + background-color: $texteditor-filled-bg-hover; + } + + &.dx-state-focused, + &.dx-state-active { + background-color: $texteditor-filled-bg-focused; + } + + &.dx-state-disabled, + &.dx-state-readonly { + background-color: transparent; + border-color: $texteditor-border-color-disabled; + } + + &.dx-invalid { + border-color: $texteditor-invalid-faded-border-color; + + &.dx-state-hover, + &.dx-state-focused { + border-color: $texteditor-invalid-focused-border-color; + } + } +} + +@mixin texteditor-underlined-styling() { + background-color: $texteditor-underlined-bg; + border-radius: 0; + + &::after { + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: $texteditor-border-bottom-color; + } + + &.dx-state-hover { + background-color: $texteditor-underlined-bg-hover; + + &::after { + border-bottom-color: $texteditor-border-bottom-color-hover; + } + } + + &.dx-state-focused, + &.dx-state-active { + background-color: $texteditor-underlined-bg-focused; + } + + .dx-texteditor-input, + .dx-lookup-field { + min-height: $fluent-texteditor-input-height; + } + + .dx-texteditor-input, + .dx-placeholder::before { + padding-top: $fluent-standard-texteditor-input-top-padding; + padding-bottom: $fluent-standard-texteditor-input-bottom-padding; + padding-left: $fluent-base-standard-texteditor-input-horizontal-padding; + padding-right: $fluent-base-standard-texteditor-input-horizontal-padding; + } + + &.dx-state-disabled, + &.dx-state-readonly { + &::after { + border-bottom-color: $texteditor-border-color-disabled; + } + } + + &.dx-invalid { + &::after { + border-bottom-color: $texteditor-invalid-faded-border-color; + } + + &.dx-state-hover { + &::after { + border-bottom-color: $texteditor-invalid-focused-border-color; + } + } + } +} + +@mixin texteditor-input-padding-filled() { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-filled-texteditor-input-horizontal-padding; + } +} + +@mixin texteditor-validation-icon-offset() { + inset-inline-end: $fluent-invalid-badge-halfhorizontal-padding; +} + +@mixin texteditor-validation-icon-offset-filled() { + inset-inline-end: $fluent-filled-texteditor-input-button-horizontal-padding; +} + +@mixin validation-icon-position() { + &.dx-invalid, + &.dx-valid { + &.dx-editor-underlined { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + } + } + + &.dx-editor-filled, + &.dx-editor-outlined { + @include texteditor-input-padding-filled(); + + .dx-texteditor-input-container { + &::after { + @include texteditor-validation-icon-offset-filled(); + } + } + } + + .dx-texteditor-input-container { + &::after { + @include texteditor-validation-icon-offset(); + } + } + } +} + +@mixin pending-indicator-position() { + &.dx-validation-pending { + &.dx-editor-underlined { + .dx-texteditor-input { + padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + } + } + + &.dx-editor-filled, + &.dx-editor-outlined { + @include texteditor-input-padding-filled(); + + .dx-texteditor-input-container { + .dx-pending-indicator { + @include texteditor-validation-icon-offset-filled(); + } + } + } + + .dx-texteditor-input-container { + .dx-pending-indicator { + @include texteditor-validation-icon-offset(); + } + } + } +} + +.dx-texteditor { + border-radius: $texteditor-input-border-radius; + position: relative; + + @mixin dx-texteditor-borders-position() { + left: 0; + right: 0; + bottom: 0; + height: 0; + width: 100%; + content: ''; + position: absolute; + } + + &::before { + @include dx-texteditor-borders-position(); + + z-index: 2; + transform: scale(0); + } + + &::after { + @include dx-texteditor-borders-position(); + } + + &.dx-state-focused { + .dx-texteditor-label { + color: $texteditor-label-color-focused; + font-size: $fluent-texteditor-label-font-size; + } + + &.dx-invalid { + .dx-texteditor-label { + color: $base-invalid-color; + } + } + } + + &.dx-texteditor-label-outside { + .dx-texteditor-label { + color: $texteditor-color; + } + + &.dx-invalid { + .dx-texteditor-label { + color: $base-invalid-color; + } + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom-width: 2px; + border-bottom-style: solid; + border-bottom-color: $texteditor-indicator-border-color; + transform: scale(1); + transition-property: transform; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + } + } + + &.dx-state-disabled { + opacity: 1; + background-color: transparent; + + .dx-texteditor-label, + .dx-placeholder::before, + .dx-texteditor-input, + .dx-lookup-field { + color: $texteditor-disabled-text-color; + } + + .dx-lookup-arrow, + .dx-dropdowneditor-icon { + color: $texteditor-disabled-text-color; + } + } + + &.dx-state-readonly { + .dx-lookup-arrow { + display: none; + } + } + + .dx-texteditor-input { + min-height: $fluent-texteditor-input-height - 2px; + } + + @include validation-icon-position(); + @include pending-indicator-position(); + + &.dx-editor-filled, + &.dx-editor-outlined { + .dx-placeholder::before, + .dx-texteditor-input { + padding: $fluent-filled-texteditor-input-padding; + } + } + + &.dx-editor-filled { + @include texteditor-filled-styling(); + } + + &.dx-editor-underlined { + @include texteditor-underlined-styling(); + } + + &.dx-editor-outlined { + @include texteditor-outlined-styling(); + } +} + +.dx-show-clear-button { + .dx-clear-button-area { + width: $texteditor-icon-container-size; + min-width: $texteditor-icon-container-size; + right: 0; + display: flex; + align-items: center; + } + + &.dx-texteditor-empty { + .dx-clear-button-area { + display: none; + } + } + + .dx-icon-clear { + &::before { + content: '\f15f'; + } + + color: $texteditor-button-clear-icon-color; + } + + &.dx-state-disabled { + .dx-icon-clear { + color: $base-foreground-disabled; + } + } + + &:not(.dx-texteditor-empty) { + @include validation-icon-position(); + @include pending-indicator-position(); + } +} + +/* B231111 */ +.dx-placeholder { + color: $texteditor-placeholder-color; + font-size: $fluent-texteditor-font-size; + line-height: normal; +} + +.dx-texteditor-input { + margin: 0; + background-color: transparent; + color: $texteditor-color; + font-size: $fluent-texteditor-font-size; + line-height: $fluent-texteditor-line-height; +} + +.dx-invalid.dx-texteditor { + &.dx-state-hover { + &::after { + border-bottom-color: $texteditor-invalid-faded-border-color; + } + } + + &.dx-state-focused, + &.dx-state-active { + &::before { + border-bottom: 2px solid; + border-bottom-color: $texteditor-invalid-focused-border-color; + } + } + + &.dx-show-invalid-badge .dx-texteditor-input-container { + &::after { + @include dx-invalid-fluent-badge(); + } + } +} + +.dx-texteditor-label { + position: absolute; + font-size: $fluent-texteditor-label-font-size; + color: $texteditor-label-color; + white-space: nowrap; + user-select: none; + pointer-events: none; + cursor: text; + width: 100%; + display: flex; + flex-direction: row; + top: 0; + left: 0; + + .dx-label { + display: flex; + + span { + overflow: hidden; + text-overflow: ellipsis; + width: auto; + max-width: 100%; + display: block; + margin-bottom: -1px; + } + } + + .dx-invalid & { + color: $base-invalid-color; + } +} + +@include dx-editor-outlined( + $texteditor-input-border-radius, + $fluent-texteditor-label-font-size, + $fluent-base-border-width, + $fluent-base-border-width, + solid, + $fluent-base-inline-block-height, + $fluent-base-inline-block-height, + math.div(1px + $fluent-texteditor-font-size, 2), + $fluent-texteditor-label-outside-top-offset, + 0.5px, + $fluent-filled-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-horizontal-padding, + $texteditor-outlined-bg, + 1px solid transparent, + $texteditor-border-color, + $texteditor-border-bottom-color, + $texteditor-border-color-disabled, + $texteditor-border-color-disabled, + $texteditor-border-color-hover, + $texteditor-border-bottom-color-hover, + $texteditor-border-color-focused, + $texteditor-border-bottom-color-focused, + $texteditor-invalid-faded-border-color, + $texteditor-invalid-focused-border-color, + $texteditor-label-transition, + $fluent-texteditor-font-size, + $fluent-filled-texteditor-input-top-padding, + 1px, + $fluent-texteditor-font-size, + $fluent-texteditor-label-outside-height, +); +@include dx-editor-filled( + $texteditor-label-transition, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-top-offset, + $fluent-texteditor-label-outside-top-offset, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-filled-texteditor-input-horizontal-padding, + $fluent-filled-texteditor-input-with-label-top-padding, + $fluent-filled-texteditor-input-with-label-bottom-padding, + $fluent-texteditor-font-size, + $fluent-texteditor-label-outside-height, +); +@include dx-editor-underlined( + $texteditor-label-transition, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-font-size, + $fluent-texteditor-label-top-offset, + $fluent-texteditor-label-outside-top-offset, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-texteditor-font-size, + $fluent-standard-texteditor-with-label-input-top-padding, + $fluent-standard-texteditor-with-label-input-bottom-padding, + $fluent-texteditor-font-size, + $fluent-texteditor-label-outside-height, +); + +.dx-valid.dx-texteditor { + .dx-texteditor-input-container { + &::after { + @include dx-valid-fluent-badge(); + } + } +} + +.dx-validation-pending.dx-texteditor { + .dx-texteditor-input-container { + .dx-pending-indicator { + @include dx-pending-indicator-fluent(); + } + } +} + +@include dx-editor-buttons-container-material( + $fluent-underlined-editor-button-height, + $fluent-editor-custom-button-margin, + $fluent-editor-custom-button-margin, + 0, + $texteditor-spin-button-horizontal-padding, + $fluent-button-vertical-padding, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss new file mode 100644 index 000000000000..b2aa8632702e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss @@ -0,0 +1,71 @@ +@use "sass:math"; +@use "../sizes" as *; + +// adduse + +$fluent-texteditor-line-height: null !default; +$fluent-texteditor-font-size: null !default; +$fluent-texteditor-input-height: null !default; +$fluent-texteditor-label-top-offset: null !default; +$fluent-texteditor-label-outside-top-offset: null !default; +$fluent-filled-texteditor-input-horizontal-padding: null !default; +$fluent-filled-texteditor-input-top-padding: null !default; +$fluent-filled-texteditor-input-bottom-padding: null !default; +$fluent-standard-texteditor-input-top-padding: null !default; +$fluent-underlined-editor-button-height: null !default; +$fluent-texteditor-label-font-size: null !default; +$fluent-texteditor-label-outside-height: null !default; +$fluent-standard-texteditor-input-bottom-padding: null !default; +$fluent-standard-texteditor-with-label-input-top-padding: null !default; +$fluent-standard-texteditor-with-label-input-bottom-padding: null !default; +$fluent-filled-texteditor-input-with-label-top-padding: null !default; +$fluent-filled-texteditor-input-with-label-bottom-padding: null !default; +$texteditor-icon-container-size: $fluent-base-icon-size !default; + +@if $size == "default" { + $fluent-texteditor-line-height: 1.428571 !default; + $fluent-texteditor-font-size: 14px !default; + $fluent-texteditor-input-height: 32px !default; + $fluent-texteditor-label-outside-height: 20px !default; + $fluent-texteditor-label-outside-top-offset: 24px !default; + $fluent-texteditor-label-font-size: 12px !default; + $fluent-texteditor-label-top-offset: -1px !default; + $fluent-filled-texteditor-input-horizontal-padding: 12px !default; + $fluent-filled-texteditor-input-top-padding: 5px !default; + $fluent-filled-texteditor-input-with-label-top-padding: 8px !default; + $fluent-filled-texteditor-input-bottom-padding: 5px !default; + $fluent-filled-texteditor-input-with-label-bottom-padding: 2px !default; + $fluent-standard-texteditor-input-top-padding: 5px !default; + $fluent-standard-texteditor-input-bottom-padding: 5px !default; + $fluent-standard-texteditor-with-label-input-top-padding: 9px !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: 3px !default; + $fluent-underlined-editor-button-height: 22px !default; +} + +@else if $size == "compact" { + $fluent-texteditor-line-height: 1.3333 !default; + $fluent-texteditor-font-size: 12px !default; + $fluent-texteditor-input-height: 24px !default; + $fluent-texteditor-label-outside-height: 16px !default; + $fluent-texteditor-label-outside-top-offset: 18px !default; + $fluent-texteditor-label-font-size: 10px !default; + $fluent-texteditor-label-top-offset: -1px !default; + $fluent-filled-texteditor-input-horizontal-padding: 8px !default; + $fluent-filled-texteditor-input-top-padding: 3px !default; + $fluent-filled-texteditor-input-with-label-top-padding: 6px !default; + $fluent-filled-texteditor-input-bottom-padding: 3px !default; + $fluent-filled-texteditor-input-with-label-bottom-padding: 0 !default; + $fluent-standard-texteditor-input-top-padding: 3px !default; + $fluent-standard-texteditor-input-bottom-padding: 3px !default; + $fluent-standard-texteditor-with-label-input-top-padding: 6px !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: 2px !default; + $fluent-underlined-editor-button-height: 22px !default; +} + +$fluent-filled-texteditor-input-padding: + $fluent-filled-texteditor-input-top-padding + $fluent-filled-texteditor-input-horizontal-padding + $fluent-filled-texteditor-input-bottom-padding !default; + +$fluent-filled-texteditor-input-button-horizontal-padding: $fluent-filled-texteditor-input-horizontal-padding - 4px !default; +$texteditor-spin-button-horizontal-padding: math.div($fluent-filled-texteditor-input-horizontal-padding, 2) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss new file mode 100644 index 000000000000..1ac51ec80923 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss @@ -0,0 +1,17 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Item text color +* $type color +*/ +$tileview-color: $base-text-color !default; +$tileview-bg: $base-element-bg !default; +$tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; +$tileview-hover-bg: $base-element-bg !default; +$tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; +$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; +$tileview-active-color: $tileview-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss new file mode 100644 index 000000000000..e59c21678b65 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss @@ -0,0 +1,29 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/tileView"; + +// adduse + + +.dx-tile { + color: $tileview-color; + background-color: $tileview-bg; + border: 1px solid; + border-color: $tileview-border-color; + text-align: left; + + &.dx-state-focused, + &.dx-state-hover { + background-color: $tileview-hover-bg; + border-color: $tileview-hover-border-color; + } + + &.dx-state-active { + background-color: $tileview-active-bg; + color: $tileview-active-color; + border-color: transparent; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss new file mode 100644 index 000000000000..8e816681beee --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse +$clock-digits-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss new file mode 100644 index 000000000000..f9990c033991 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss @@ -0,0 +1,56 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../textEditor/sizes" as *; +@use "../../base/timeView/mixins" as *; +@use "../../base/timeView"; + +// adduse + +@include clock-action-icons-mixin($base-inverted-bg, $base-typography-bg, $clock-digits-color); + +.dx-timeview { + height: auto; + width: auto; + + .dx-texteditor { + .dx-texteditor-input { + padding-inline-end: 0; + padding-inline-start: 12px; + } + + .dx-texteditor-container { + .dx-texteditor-buttons-container .dx-dropdowneditor-button { + margin-inline-end: 0; + } + } + } +} + +.dx-timeview-clock { + margin-bottom: 10px; +} + +.dx-timeview-format12 { + width: $fluent-timeview-format12-width; + margin-inline-start: $fluent-timeview-time-separator-margin; +} + +.dx-timeview-time-separator { + margin: 0 $fluent-timeview-time-separator-margin; +} + +.dx-timeview-field { + min-height: $fluent-timeview-field-min-height; +} + +.dx-timeview-field .dx-numberbox { + width: $fluent-timeview-format12-width; + + &.dx-numberbox-spin-touch-friendly { + width: 110px; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss new file mode 100644 index 000000000000..674156372151 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss @@ -0,0 +1,7 @@ +@use "../sizes" as *; + +// adduse + +$fluent-timeview-field-min-height: 35px !default; +$fluent-timeview-time-separator-margin: 5px !default; +$fluent-timeview-format12-width: 64px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss new file mode 100644 index 000000000000..057b1a0013f5 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss @@ -0,0 +1,64 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$toast-default-bg: $base-bg !default; +$warning-color: null !default; + +@if $mode == "light" { + $warning-color: $base-text-color !default; +} + +@if $mode == "dark" { + $warning-color: $base-inverted-text-color !default; +} + +/** +* $name 10. Info background color +* $type color +*/ +$toast-info-bg: $toast-default-bg !default; + +/** +* $name 20. Info text color +* $type color +*/ +$toast-info-color: $base-text-color !default; + +/** +* $name 30. Warning background color +* $type color +*/ +$toast-warning-bg: $base-warning !default; + +/** +* $name 40. Warning text color +* $type color +*/ +$toast-warning-color: $warning-color !default; + +/** +* $name 50. Error background color +* $type color +*/ +$toast-error-bg: $base-danger !default; + +/** +* $name 60. Error text color +* $type color +*/ +$toast-error-color: $base-inverted-text-color !default; + +/** +* $name 70. Success background color +* $type color +*/ +$toast-success-bg: $base-success !default; + +/** +* $name 80. Success text color +* $type color +*/ +$toast-success-color: $base-inverted-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss new file mode 100644 index 000000000000..b6309f525428 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss @@ -0,0 +1,53 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/toast"; + +// adduse +@use "../overlay"; + + +.dx-toast-stack { + gap: $fluent-toast-item-gap; +} + +.dx-toast-content { + font-size: $fluent-base-font-size; + font-weight: 400; + padding: $fluent-toast-content-vertical-padding $fluent-toast-content-horizontal-padding; + border-radius: $toast-border-radius; + box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14); + min-height: $fluent-toast-height; + display: flex; + align-items: center; +} + +.dx-toast-icon { + display: none; +} + +.dx-toast-message { + padding: 0; +} + +.dx-toast-info { + background-color: $toast-info-bg; + color: $toast-info-color; +} + +.dx-toast-warning { + background-color: $toast-warning-bg; + color: $toast-warning-color; +} + +.dx-toast-error { + background-color: $toast-error-bg; + color: $toast-error-color; +} + +.dx-toast-success { + background-color: $toast-success-bg; + color: $toast-success-color; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss new file mode 100644 index 000000000000..44c7288ca1a2 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss @@ -0,0 +1,21 @@ +@use "../sizes" as *; + +// adduse + +$toast-border-radius: $fluent-base-border-radius !default; +$fluent-toast-height: null !default; +$fluent-toast-item-gap: null !default; +$fluent-toast-content-vertical-padding: null !default; +$fluent-toast-content-horizontal-padding: 12px !default; + +@if $size == "default" { + $fluent-toast-content-vertical-padding: 12px !default; + $fluent-toast-height: 44px !default; + $fluent-toast-item-gap: 12px !default; +} + +@else if $size == "compact" { + $fluent-toast-content-vertical-padding: 8px !default; + $fluent-toast-height: 36px !default; + $fluent-toast-item-gap: 8px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss new file mode 100644 index 000000000000..711c15e59712 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss @@ -0,0 +1,13 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +/** +* $name 10. Background color +* $type color +*/ +$toolbar-bg: transparent !default; +$toolbar-color: $base-text-color !default; +$toolbar-separator-color: $base-separator-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss new file mode 100644 index 000000000000..bb487960ea0d --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss @@ -0,0 +1,182 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/icon_fonts" as *; +@use "../list/sizes" as *; +@use "../button/mixins" as *; +@use "../button/colors" as *; +@use "../button/sizes" as *; +@use "../checkBox/sizes" as *; +@use "mixins" as *; +@use "../../base/toolbar"; + +// adduse +@use "../dropDownMenu"; + +.dx-toolbar { + background-color: $toolbar-bg; + color: $toolbar-color; + + @include dx-toolbar-sizing( + $fluent-toolbar-height, + $fluent-toolbar-padding, + $fluent-toolbar-label-font-size, + $fluent-toolbar-item-spacing + ); + + &.dx-toolbar-multiline { + .dx-toolbar-item { + height: $fluent-toolbar-height; + } + } +} + +.dx-toolbar-after { + .dx-toolbar-item { + @include dx-toolbar-item-padding($fluent-toolbar-item-spacing); + } +} + +.dx-toolbar-background { + background-color: $toolbar-bg; +} + +.dx-toolbar-menu-section { + border-bottom: 1px solid; + border-bottom-color: $toolbar-separator-color; + + .dx-list-item-content, + .dx-toolbar-item-auto-hide { + padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding $fluent-list-item-vertical-padding - 1px; + } + + .dx-list-item-content { + font-size: $fluent-base-font-size; + vertical-align: middle; + + .dx-list-item-icon-container { + height: $fluent-button-icon-size; + width: $fluent-button-icon-size; + + @include dx-icon-margin(math.div($fluent-button-icon-size, 2)); + + .dx-icon { + font-size: $fluent-button-icon-size; + + @include dx-icon-sizing($fluent-button-icon-size); + } + } + } + + .dx-toolbar-hidden-button, + .dx-toolbar-hidden-button-group { + .dx-toolbar-item-auto-hide { + padding: 0; + } + + .dx-button { + border: none; + border-radius: 0; + height: $fluent-list-item-height; + padding: 0; + } + + .dx-button-text { + text-transform: none; + font-weight: 400; + } + + .dx-button-content { + padding: 0 $fluent-list-item-horizontal-padding; + } + } + + .dx-toolbar-hidden-button { + .dx-button-normal { + @include dx-button-flat-color-styling( + $button-normal-color, + $button-normal-color, + $button-normal-color, + $button-normal-text-bg, + $button-normal-text-hover-bg, + $button-normal-text-focused-bg, + $button-normal-text-active-bg + ); + } + + .dx-button-default { + @include dx-button-flat-color-styling( + $button-default-text-color, + $button-default-text-color-hover, + $button-default-text-color-active, + $button-default-text-bg, + $button-default-text-hover-bg, + $button-default-text-focused-bg, + $button-default-text-active-bg + ); + } + + .dx-button-danger { + @include dx-button-flat-color-styling( + $button-danger-bg, + $button-danger-bg, + $button-danger-bg, + $button-danger-text-bg, + $button-danger-text-hover-bg, + $button-danger-text-focused-bg, + $button-danger-text-active-bg + ); + } + + .dx-button-success { + @include dx-button-flat-color-styling( + $button-success-bg, + $button-success-bg, + $button-success-bg, + $button-success-text-bg, + $button-success-text-hover-bg, + $button-success-text-focused-bg, + $button-success-text-active-bg + ); + } + + .dx-button { + &.dx-button-has-icon:not(.dx-button-has-text) { + border-radius: 0; + } + } + } + + .dx-toolbar-hidden-button-group { + margin-top: $fluent-toolbar-padding; + margin-bottom: $fluent-toolbar-padding; + + &:first-of-type { + margin-top: $fluent-list-vertical-padding; + } + + &:last-of-type { + margin-bottom: $fluent-list-vertical-padding; + } + } +} + +.dx-toolbar-menu-section:empty { + border-bottom: none; +} + +.dx-toolbar-button { + &.dx-toolbar-text-auto-hide { + .dx-button { + @include dx-button-onlyicon-sizing(); + } + } + + .dx-switch { + display: block; + line-height: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss new file mode 100644 index 000000000000..8f7b3eb50e09 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss @@ -0,0 +1,61 @@ +@use "sizes" as *; +@use "../typography/sizes" as *; + +@mixin dx-toolbar-sizing($height, $padding, $label-font-size, $item-spacing) { + padding: $padding; + overflow: visible; + + .dx-toolbar-before { + padding-inline-end: $fluent-toolbar-section-padding; + } + + .dx-toolbar-after { + padding-inline-start: $fluent-toolbar-section-padding; + } + + .dx-toolbar-before:empty, + .dx-toolbar-after:empty { + padding: 0; + } + + .dx-toolbar-items-container { + height: $height; + overflow: visible; + } + + .dx-toolbar-menu-container { + padding: 0; + padding-inline-start: $item-spacing; + } + + .dx-toolbar-item { + padding: 0; + padding-inline-end: $item-spacing; + + &.dx-toolbar-first-in-group { + padding-left: $fluent-toolbar-item-spacing * 4; + } + + &:last-child { + padding: 0; + } + } + + .dx-toolbar-label { + font-size: $label-font-size; + font-weight: 500; + } +} + +@mixin dx-toolbar-item-padding($padding) { + padding: 0; + padding-inline-start: $padding; + + &:last-child { + padding-inline-start: $padding; + } + + &:first-child { + padding: 0; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss new file mode 100644 index 000000000000..d72e05698d91 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss @@ -0,0 +1,25 @@ +@use "../sizes" as *; +@use "../typography/sizes" as *; + +// adduse + +$fluent-toolbar-height: null !default; + +$fluent-toolbar-padding: 0 !default; +$fluent-toolbar-item-spacing: 4px !default; +$fluent-toolbar-label-font-size: $fluent-m-font-size !default; +$fluent-toolbar-section-padding: null !default; + +@if $size == "default" { + $fluent-toolbar-height: 48px !default; + $fluent-toolbar-section-padding: 12px !default; +} + +@else if $size == "compact" { + $fluent-toolbar-height: 36px !default; + $fluent-toolbar-section-padding: 8px !default; +} + +:root { + --dx-toolbar-height: #{$fluent-toolbar-height}; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss new file mode 100644 index 000000000000..a46222d24e93 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss @@ -0,0 +1,30 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../overlay/colors" as *; +@use "../color" as extcolor; + +// adduse + +/** +* $name 10. Text color +* $type color +*/ +$tooltip-color: $base-text-color !default; + +/** +* $name 20. Background color +* $type color +*/ +$tooltip-bg: null !default; + +$tooltip-border-radius: $base-border-radius !default; + +@if $mode == "light" { + $tooltip-bg: $base-bg !default; +} + +@if $mode == "dark" { + $tooltip-bg: $base-hover-bg !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss new file mode 100644 index 000000000000..35f6749d4595 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss @@ -0,0 +1,40 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/tooltip"; + +// adduse + + +.dx-tooltip-wrapper { + .dx-overlay-content { + background-color: $tooltip-bg; + color: $tooltip-color; + border: 1px solid transparent; + border-radius: $tooltip-border-radius; + min-height: auto; + + .dx-popup-content { + padding: $fluent-tooltip-padding; + font-size: $fluent-tooltip-font-size; + } + } + + &.dx-popover-wrapper .dx-popover-arrow { + &::after { + box-shadow: $fluent-tooltip-shadow; + background: $tooltip-bg; + border-top-right-radius: $fluent-tooltip-arrow-border-radius; + } + } + + &.dx-popover-wrapper.dx-position-top { + .dx-popover-arrow { + &::after { + border-bottom-left-radius: $fluent-tooltip-arrow-border-radius; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss new file mode 100644 index 000000000000..571890f9a895 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss @@ -0,0 +1,19 @@ +@use "../common/colors" as *; +@use "../sizes" as *; + +// adduse + +$fluent-tooltip-padding: null !default; +$fluent-tooltip-font-size: null !default; +$fluent-tooltip-arrow-border-radius: 2px !default; +$fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default; + +@if $size == "default" { + $fluent-tooltip-padding: 7px 11px !default; + $fluent-tooltip-font-size: 12px; +} + +@else if $size == "compact" { + $fluent-tooltip-padding: 3px 5px !default; + $fluent-tooltip-font-size: 12px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss new file mode 100644 index 000000000000..829047cd80d4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; +@use "../gridBase/colors" as *; + +// adduse + +$treelist-chevron-icon-color: $base-spin-icon-color !default; +$treelist-selection-chevron-icon-color: $treelist-chevron-icon-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss new file mode 100644 index 000000000000..36b942794d2e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss @@ -0,0 +1,59 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/mixins" as *; +@use "../../base/icon_fonts" as *; +@use "../gridBase" as *; +@use "../gridBase/colors" as *; +@use "../gridBase/sizes" as *; +@use "../../base/treeList" as baseTreeList with ( + $datagrid-border: $datagrid-border, + $datagrid-drag-header-border-color: $datagrid-drag-header-border-color, + $datagrid-row-error-bg: $datagrid-row-error-bg, + $datagrid-base-color: $datagrid-base-color, + $datagrid-base-background-color: $datagrid-base-background-color, + $datagrid-border-color: $datagrid-border-color, + $datagrid-focused-border-color: $datagrid-focused-border-color, + $datagrid-text-stub-background-image-path: $datagrid-text-stub-background-image-path, + $datagrid-row-error-color: $datagrid-row-error-color, + $header-filter-color: $header-filter-color, + $header-filter-color-empty: $header-filter-color-empty, + $base-focus-color: $base-focus-color, +); +@use 'layout/cell'; +@include grid-base(treelist); + +.dx-treelist-rowsview { + tr:not(.dx-row-focused) .dx-treelist-empty-space { + color: $treelist-chevron-icon-color; + } + + .dx-sort-up, + .dx-sort-down, + .dx-header-filter { + vertical-align: middle; + } + + tr:not(.dx-row-focused).dx-selection { + .dx-treelist-empty-space { + color: $treelist-selection-chevron-icon-color; + } + } + + .dx-treelist-cell-expandable { + .dx-treelist-text-content { + white-space: normal; + } + } + + &.dx-treelist-nowrap .dx-treelist-table { + .dx-treelist-cell-expandable { + .dx-treelist-text-content { + white-space: nowrap; + } + } + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss new file mode 100644 index 000000000000..52edc764756c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss @@ -0,0 +1,22 @@ +@use "sass:math"; +@use "../sizes" as *; +@use "../../base/treeList/variables" as *; + +// adduse + +$treelist-fluent-expand-icon-size: null !default; + +@if $size == "default" { + $treelist-fluent-expand-icon-size: 20px !default; +} + +@else if $size == "compact" { + $treelist-fluent-expand-icon-size: 16px !default; +} + +$treelist-expand-icon-size: $treelist-fluent-expand-icon-size !default; +$treelist-expand-icon-name-expanded: chevrondown !default; +$treelist-expand-icon-name-collapsed: chevronright !default; +$treelist-expand-icon-right-gap: 4px !default; +$treelist-expand-checkbox-size: 16px !default; +$treelist-expand-checkbox-right-gap: 8px !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss new file mode 100644 index 000000000000..f1e86b56616a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss @@ -0,0 +1,8 @@ +// #region typography + +// (0,2,0) +.dx-treelist-rowsview .dx-treelist-cell-expandable { + white-space: nowrap; +} + +// #endregion diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss new file mode 100644 index 000000000000..b8d6b1e6ad7a --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss @@ -0,0 +1,46 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$treeview-color: $base-text-color !default; + +/** +* $name 80. Focused state background color +* $type color +*/ +$treeview-focused-bg: $base-hover-bg !default; +$treeview-focus-color: $base-text-color !default; +$treeview-hover-bg: $base-hover-bg !default; +$treeview-item-hover-color: $base-hover-color !default; +$treeview-border-color: $base-border-color !default; +$treeview-item-selected-color: $treeview-color !default; +$treeview-item-selected-bg: $base-selected-bg !default; +$treeview-spin-icon-color: $base-spin-icon-color !default; +$checkbox-border-color-focused: $base-accent-active !default; +$treeview-checkbox-disabled-control-color-focused: null !default; +$treeview-checkbox-disabled-background-focused: null !default; +$treeview-item-content-disabled: null !default; +$treeview-checkbox-border-color-focused: null !default; +$treeview-checkbox-background-color-focused: null !default; +$treeview-checkbox-accent-color-focused: null !default; + +@if $mode == "light" { + $treeview-item-content-disabled: color.adjust($base-bg, $lightness: -25.88%, $space: hsl) !default; + $treeview-checkbox-disabled-control-color-focused: color.adjust($base-bg, $lightness: -29.8%, $space: hsl) !default; + $treeview-checkbox-disabled-background-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; + $treeview-checkbox-border-color-focused: color.adjust($base-bg, $lightness: -85.88%, $space: hsl) !default; + $treeview-checkbox-background-color-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; + $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 16%, $space: hsl) !default; +} + +@if $mode == "dark" { + $treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl) !default; + $treeview-checkbox-disabled-control-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl) !default; + $treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; + $treeview-checkbox-border-color-focused: color.change($base-bg, $lightness: 100%, $space: hsl) !default; + $treeview-checkbox-background-color-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; + $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss new file mode 100644 index 000000000000..6dd170a8e874 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss @@ -0,0 +1,143 @@ +@use "sass:math"; +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/treeView" as *; +@use "../../base/icon_fonts" as *; + +.dx-treeview-custom-expand-icon, +.dx-treeview-custom-collapse-icon { + @include dx-icon-sizing($fluent-base-icon-size); +} + +.dx-treeview-select-all-item { + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $treeview-checkbox-border-color-focused; + background-color: $treeview-checkbox-background-color-focused; + } + } + + &.dx-state-focused.dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $treeview-checkbox-accent-color-focused; + border-color: $treeview-checkbox-accent-color-focused; + } + } + + &.dx-state-focused.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $treeview-checkbox-accent-color-focused; + + &::before { + background-color: $treeview-checkbox-accent-color-focused; + } + } + } +} + +.dx-treeview-item-with-checkbox { + .dx-treeview-item { + .dx-checkbox.dx-state-disabled { + .dx-checkbox-icon { + border-color: $treeview-item-content-disabled; + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon::before { + background-color: $treeview-item-content-disabled; + } + } + } + } + + &.dx-state-focused > .dx-treeview-item { + .dx-checkbox { + .dx-checkbox-icon { + border-color: $treeview-checkbox-border-color-focused; + background-color: $treeview-checkbox-background-color-focused; + } + + &.dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $treeview-checkbox-accent-color-focused; + border-color: $treeview-checkbox-accent-color-focused; + } + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $treeview-checkbox-accent-color-focused; + + &::before { + background-color: $treeview-checkbox-accent-color-focused; + } + } + } + } + + .dx-checkbox.dx-state-disabled { + .dx-checkbox-icon { + background-color: $treeview-checkbox-disabled-background-focused; + border-color: $treeview-checkbox-disabled-control-color-focused; + } + + &.dx-checkbox-checked { + .dx-checkbox-icon { + color: $treeview-checkbox-disabled-control-color-focused; + } + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon::before { + background-color: $treeview-checkbox-disabled-control-color-focused; + } + } + } + } +} + +.dx-treeview-item-content.dx-state-disabled { + color: $treeview-item-content-disabled; +} + +@include default-expander-icon( + 'chevrondown', + 'chevronright', + $fluent-base-icon-size, + $fluent-treeview-toggle-item-width, + $treeview-spin-icon-color, +); +@include treeview-item( + $fluent-treeview-item-element-gap, + $fluent-treeview-item-padding, + $fluent-base-icon-size, + $treeview-hover-bg, + $treeview-item-hover-color, + $treeview-item-selected-color, + $fluent-treeview-toggle-item-width + $fluent-treeview-item-element-gap, + $fluent-treeview-item-margin, + $fluent-treeview-item-border-radius, +); +@include treeview-checkbox( + $fluent-checkbox-container-size, + $base-text-color, + $checkbox-border-color-focused, + $treeview-item-selected-color, + $treeview-item-selected-bg, + $treeview-focused-bg, + $treeview-focus-color, + $fluent-treeview-item-border-radius +); +@include treeview-aux-items( + $fluent-treeview-searchbox-margin-bottom, + $fluent-treeview-search-editor-height, + $treeview-border-color, + $fluent-select-all-item-padding, + $fluent-treeview-item-element-gap, + $fluent-select-all-item-border-visible-padding, + $fluent-treeview-container-padding, + $fluent-treeview-load-indicator-size, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss new file mode 100644 index 000000000000..506feb58959b --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss @@ -0,0 +1,50 @@ +@use "../sizes" as *; + +// adduse + +$fluent-treeview-toggle-item-width: null !default; +$fluent-treeview-item-height: null !default; +$fluent-checkbox-container-size: null !default; +$fluent-treeview-container-with-border-offset: 8px; +$fluent-treeview-item-element-gap: 8px !default; +$fluent-treeview-item-margin: 1px 0; +$fluent-treeview-item-border-radius: 4px; +$fluent-treeview-border-padding: 1px; +$fluent-treeview-container-padding: + $fluent-treeview-border-padding + $fluent-treeview-border-padding + $fluent-treeview-border-padding + $fluent-treeview-container-with-border-offset; + +$fluent-treeview-checkbox-offset: null !default; +$fluent-select-all-item-padding: null !default; +$fluent-treeview-item-padding: null !default; +$fluent-treeview-load-indicator-size: null !default; +$fluent-treeview-searchbox-margin-bottom: null !default; +$fluent-treeview-search-editor-height: null !default; +$fluent-treeview-item-side-padding: 12px !default; +$fluent-select-all-item-border-visible-padding: 26px !default; + +@if $size == "default" { + $fluent-treeview-item-height: 44px !default; + $fluent-treeview-toggle-item-width: 20px !default; + $fluent-checkbox-container-size: 20px !default; + $fluent-treeview-checkbox-offset: 42px !default; + $fluent-select-all-item-padding: 15px 42px !default; + $fluent-treeview-item-padding: 12px $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: 20px !default; + $fluent-treeview-searchbox-margin-bottom: 8px !default; + $fluent-treeview-search-editor-height: 48px; +} + +@else if $size == "compact" { + $fluent-treeview-item-height: 32px !default; + $fluent-treeview-toggle-item-width: 16px !default; + $fluent-treeview-checkbox-offset: 36px !default; + $fluent-checkbox-container-size: 16px !default; + $fluent-select-all-item-padding: 10px $fluent-treeview-checkbox-offset !default; + $fluent-treeview-item-padding: 10px $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: 16px !default; + $fluent-treeview-searchbox-margin-bottom: 4px !default; + $fluent-treeview-search-editor-height: 32px; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss new file mode 100644 index 000000000000..64c9398a5c00 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss @@ -0,0 +1,70 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "mixins" as *; + +// adduse + +.dx-theme-dxdsfluent-typography { + background-color: $base-typography-bg; + + @include dx-base-typography(); + + h1 { + font-weight: 600; + font-size: $fluent-h1-font-size; + } + + h2 { + font-weight: 600; + font-size: $fluent-h2-font-size; + } + + h3 { + font-weight: 600; + font-size: $fluent-h3-font-size; + } + + h4 { + font-weight: 600; + font-size: $fluent-h4-font-size; + } + + h5 { + font-weight: 700; + font-size: $fluent-h5-font-size; + } + + h6 { + font-weight: 500; + font-size: $fluent-h6-font-size; + } + + .dx-font-xl { + font-size: $fluent-xl-font-size; + } + + .dx-font-l { + font-size: $fluent-l-font-size; + } + + .dx-font-m { + font-size: $fluent-m-font-size; + } + + .dx-font-s { + @include dx-s-font-mixin(); + } + + small, + .dx-font-xs { + font-size: $fluent-xs-font-size; + } + + a { + color: $typography-link-color; + } +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss new file mode 100644 index 000000000000..49b2ac1f1249 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss @@ -0,0 +1,5 @@ +@use "sizes" as *; + +@mixin dx-s-font-mixin() { + font-size: $fluent-s-font-size; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss new file mode 100644 index 000000000000..42f21a2d9a20 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss @@ -0,0 +1,60 @@ +@use "../sizes" as *; + +// adduse + +$fluent-xl-font-size: null !default; +$fluent-l-font-size: null !default; +$fluent-m-font-size: null !default; +$fluent-s-font-size: null !default; +$fluent-xs-font-size: null !default; +$fluent-h1-font-size: null !default; +$fluent-h2-font-size: null !default; +$fluent-h3-font-size: null !default; +$fluent-h4-font-size: null !default; +$fluent-h5-font-size: null !default; +$fluent-h6-font-size: null !default; + +@if $size == "default" { + $fluent-xl-font-size: 34px !default; + $fluent-l-font-size: 28px !default; + $fluent-m-font-size: 20px !default; + $fluent-s-font-size: 18px !default; + $fluent-xs-font-size: 12px !default; + + $fluent-h1-font-size: 40px !default; + $fluent-h2-font-size: 36px !default; + $fluent-h3-font-size: 32px !default; + $fluent-h4-font-size: 26px !default; + $fluent-h5-font-size: 22px !default; + $fluent-h6-font-size: 22px !default; +} + +@else if $size == "compact" { + $fluent-xl-font-size: 24px !default; + $fluent-l-font-size: 20px !default; + $fluent-m-font-size: 16px !default; + $fluent-s-font-size: 14px !default; + $fluent-xs-font-size: 12px !default; + + $fluent-h1-font-size: 32px !default; + $fluent-h2-font-size: 28px !default; + $fluent-h3-font-size: 24px !default; + $fluent-h4-font-size: 20px !default; + $fluent-h5-font-size: 16px !default; + $fluent-h6-font-size: 16px !default; +} + +:root { + --dx-font-size-heading-1: #{$fluent-h1-font-size}; + --dx-font-size-heading-2: #{$fluent-h2-font-size}; + --dx-font-size-heading-3: #{$fluent-h3-font-size}; + --dx-font-size-heading-4: #{$fluent-h4-font-size}; + --dx-font-size-heading-5: #{$fluent-h5-font-size}; + --dx-font-size-heading-6: #{$fluent-h6-font-size}; + --dx-font-size-xl: #{$fluent-xl-font-size}; + --dx-font-size-lg: #{$fluent-l-font-size}; + --dx-font-size-md: #{$fluent-m-font-size}; + --dx-font-size-sm: #{$fluent-s-font-size}; + --dx-font-size-xs: #{$fluent-xs-font-size}; +} + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss new file mode 100644 index 000000000000..54b4c00e535c --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss @@ -0,0 +1,9 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + +$validation-message-color: $base-inverted-text-color !default; +$validation-message-background-color: $base-invalid-color !default; +$validation-summary-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss new file mode 100644 index 000000000000..16829ffb77c6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss @@ -0,0 +1,24 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../../base/validation" as *; +@use "../textEditor/sizes" as *; + +// adduse +@use "../overlay"; +@include dx-base-validation( + $validation-summary-color, + $validation-message-color, + $validation-message-background-color, + $fluent-validation-overlay-border-radius +); +@include dx-modern-styles-validation( + $fluent-validation-message-font-size, + $fluent-validation-message-line-height, + $fluent-filled-texteditor-input-horizontal-padding, + $fluent-validationsummary-item-margin, + $fluent-validation-message-vertical-padding, + $fluent-validation-message-horizontal-padding, +); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss new file mode 100644 index 000000000000..990440f85274 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss @@ -0,0 +1,28 @@ +@use "../sizes" as *; + +// adduse + +$fluent-validation-message-padding: null !default; +$fluent-validationsummary-item-margin: null !default; +$fluent-validation-message-line-height: null !default; +$fluent-validation-message-horizontal-padding: null !default; + +$fluent-validation-overlay-border-radius: 4px !default; +$fluent-validation-message-vertical-padding: 4px !default; +$fluent-validation-message-font-size: 12px !default; + +@if $size == "default" { + $fluent-validation-message-padding: 6px !default; + $fluent-validationsummary-item-margin: 6px !default; + + $fluent-validation-message-horizontal-padding: 8px !default; + $fluent-validation-message-line-height: 16px !default; +} + +@else if $size == "compact" { + $fluent-validation-message-padding: 4px !default; + $fluent-validationsummary-item-margin: 4px !default; + + $fluent-validation-message-horizontal-padding: 6px !default; + $fluent-validation-message-line-height: 12px !default; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss new file mode 100644 index 000000000000..89c53a85429e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss @@ -0,0 +1,6 @@ +@use "sass:color"; +@use "../sizes" as *; +@use "../colors" as *; + +// adduse + diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss new file mode 100644 index 000000000000..f22138c1e536 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss @@ -0,0 +1,28 @@ +@use "sass:color"; +@use "colors" as *; +@use "../colors" as *; +@use "sizes" as *; +@use "../sizes" as *; +@use "../common/mixins" as *; +@use "../../base/widget"; + +// adduse + +.dx-widget { + @include dx-base-typography(); +} + +.dx-state-disabled { + &.dx-widget, + .dx-widget { + .dx-widget { + opacity: 1; + } + + @include disabled-widget(); + } +} + +.dx-surface { + background-color: $base-bg; +} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss new file mode 100644 index 000000000000..43b104010f9e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss @@ -0,0 +1,4 @@ +@use "../sizes" as *; + +// adduse + diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts index 01b22c670cba..f17dc78bf28b 100644 --- a/packages/devextreme-scss/tests/unused-elements.test.ts +++ b/packages/devextreme-scss/tests/unused-elements.test.ts @@ -85,7 +85,7 @@ test('There are no unused images in repository', () => { expect(fullImagesFileList).toEqual(usedImagesFileList); }); -['generic', 'material', 'fluent'].forEach((themeName) => { +['generic', 'material', 'fluent', 'dxdsfluent'].forEach((themeName) => { test(`There are no unused variables in ${themeName} SCSS files`, () => { const baseScssFiles = getFilesFromDirectory(join('scss', 'widgets', 'base'), ['.scss']) .map((fileName) => resolve(fileName)); @@ -102,10 +102,16 @@ test('There are no unused images in repository', () => { const uniqueVariables = findUniqueVariables(variables); - const exclusions: { generic: string[]; material: string[]; fluent: string[] } = { + const exclusions: { + generic: string[]; + material: string[]; + fluent: string[]; + dxdsfluent: string[]; + } = { generic: [], material: [], fluent: [], + dxdsfluent: [], }; expect(uniqueVariables).toEqual(exclusions[themeName]); diff --git a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts index a505502180a2..c25bdd1f9143 100644 --- a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts +++ b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts @@ -26,6 +26,11 @@ const DEFAULT_DEV_BUNDLE_NAMES = [ 'fluent.blue.dark', 'fluent.saas.light', 'fluent.saas.dark', + 'dxdsfluent.blue.light', + 'dxdsfluent.blue.light.compact', + 'dxdsfluent.blue.dark', + 'dxdsfluent.saas.light', + 'dxdsfluent.saas.dark', ]; interface BuildDependencies { @@ -74,7 +79,7 @@ function prependLicenseAndMoveCharsetFirst(minifiedCss: string, license: string) function generateBundleName(theme: string, size: string, color: string, mode?: string): string { return ( 'dx' - + (theme === 'material' || theme === 'fluent' ? `.${theme}` : '') + + (theme === 'material' || theme === 'fluent' || theme === 'dxdsfluent' ? `.${theme}` : '') + `.${color}` + (mode ? `.${mode}` : '') + (size === 'default' ? '' : '.compact') From 6f13d66f36c8ac024f827e1c103351bc4455d63c Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 16 Jul 2026 23:20:40 +0400 Subject: [PATCH 19/27] add package with tokens tokents --- packages/devextreme-scss/.gitignore | 1 + .../build/bundle-template.dxdsfluent.scss | 1 + .../build/tokens/build-tokens.mjs | 382 ++++++++++++++++++ .../build/tokens/transforms.mjs | 53 +++ packages/devextreme-scss/package.json | 3 + packages/devextreme-scss/project.json | 34 +- .../widgets/dxdsfluent/_design-system.scss | 16 + pnpm-lock.yaml | 174 ++++++++ 8 files changed, 662 insertions(+), 2 deletions(-) create mode 100644 packages/devextreme-scss/build/tokens/build-tokens.mjs create mode 100644 packages/devextreme-scss/build/tokens/transforms.mjs create mode 100644 packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss diff --git a/packages/devextreme-scss/.gitignore b/packages/devextreme-scss/.gitignore index 1cb872afbe1d..a140fd7101f4 100644 --- a/packages/devextreme-scss/.gitignore +++ b/packages/devextreme-scss/.gitignore @@ -1 +1,2 @@ scss/bundles +scss/_design-system diff --git a/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss index 3be8b3678cb3..b5464d679330 100644 --- a/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss +++ b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss @@ -1,5 +1,6 @@ @use "../widgets/dxdsfluent/colors" with ($color: "$COLOR", $mode: "$MODE"); @use "../widgets/dxdsfluent/sizes" with ($size: "$SIZE"); +@use "../widgets/dxdsfluent/design-system"; @use "../widgets/dxdsfluent/typography"; @use "../widgets/dxdsfluent/icons"; @use "../widgets/dxdsfluent/widget"; diff --git a/packages/devextreme-scss/build/tokens/build-tokens.mjs b/packages/devextreme-scss/build/tokens/build-tokens.mjs new file mode 100644 index 000000000000..c803d025e959 --- /dev/null +++ b/packages/devextreme-scss/build/tokens/build-tokens.mjs @@ -0,0 +1,382 @@ +import path from 'node:path'; +import url from 'node:url'; +import { createRequire } from 'node:module'; +import { readdir, readFile, rm } from 'node:fs/promises'; +import StyleDictionary from 'style-dictionary'; +import { registerTransforms } from './transforms.mjs'; + +// Suppress a known noisy sd-transforms warning +// https://github.com/tokens-studio/sd-transforms/issues/218 +for (const method of ['error', 'warn', 'log']) { + const original = console[method].bind(console); + console[method] = (message, ...args) => { + if (typeof message === 'string' && message.includes('Warning: could not resolve reference {font-weight')) { + return; + } + original(message, ...args); + }; +} + +registerTransforms(StyleDictionary); + +// The Figma export occasionally emits size-suffixed cross-component references +// (e.g. {text-content.typography.font-weight.small} in the *_small file) while +// only the unsuffixed token exists in that file. Rewrite such dangling +// references to the unsuffixed token, which carries the size-specific value. +const SIZE_SUFFIX_RE = /\.(small|medium|large)$/; + +const getTokenAtPath = (tokens, refPath) => { + let node = tokens; + + for (const part of refPath.split('.')) { + if (typeof node !== 'object' || node === null || !(part in node)) { + return undefined; + } + node = node[part]; + } + + return typeof node === 'object' && node !== null && '$value' in node ? node : undefined; +}; + +const hasTokenAtPath = (tokens, refPath) => getTokenAtPath(tokens, refPath) !== undefined; + +StyleDictionary.registerPreprocessor({ + name: 'dx/fix-dangling-size-references', + preprocessor: (tokens) => { + const visit = (node) => { + if (typeof node !== 'object' || node === null) { + return; + } + + if (typeof node.$value === 'string') { + node.$value = node.$value.replace(/\{([\w.-]+)\}/g, (match, refPath) => { + if (!SIZE_SUFFIX_RE.test(refPath) || hasTokenAtPath(tokens, refPath)) { + return match; + } + + const unsuffixed = refPath.replace(SIZE_SUFFIX_RE, ''); + + if (hasTokenAtPath(tokens, unsuffixed)) { + console.warn(`[design-tokens] Rewriting dangling reference {${refPath}} -> {${unsuffixed}}`); + + return `{${unsuffixed}}`; + } + + return match; + }); + + return; + } + + Object.values(node).forEach(visit); + }; + + visit(tokens); + + return tokens; + }, +}); + +// Composite shadow aliases are exported as $type "text" with a pure reference +// value (e.g. popup.box-shadow.composite = "{box-shadow.lg}"). Without a +// shadow type they get expanded into per-property sub-tokens; retyping keeps +// them as a single var() reference to the composite shadow variable. +const PURE_REFERENCE_RE = /^\{([\w.-]+)\}$/; + +StyleDictionary.registerPreprocessor({ + name: 'dx/fix-composite-shadow-references', + preprocessor: (tokens) => { + const visit = (node) => { + if (typeof node !== 'object' || node === null) { + return; + } + + if (typeof node.$value === 'string') { + const refPath = node.$value.match(PURE_REFERENCE_RE)?.[1]; + + if (node.$type === 'text' && refPath) { + const target = getTokenAtPath(tokens, refPath); + + if (target?.$type === 'boxShadow' || target?.$type === 'shadow') { + node.$type = 'shadow'; + } + } + + return; + } + + Object.values(node).forEach(visit); + }; + + visit(tokens); + + return tokens; + }, +}); + +const dirname = import.meta.dirname || path.dirname(url.fileURLToPath(import.meta.url)); +const require = createRequire(import.meta.url); +const tokensDir = path.dirname(require.resolve('@devexpress/design-tokens-internal/package.json')); +const buildPath = `${path.resolve(dirname, '../../scss/_design-system')}/`; + +const THEME_NAME = 'fluent'; + +const FLUENT_PALETTES = [ + 'blue', + 'cool-blue', + 'desert', + 'mint', + 'moss', + 'orchid', + 'purple', + 'rose', + 'rust', + 'steel', + 'storm', +]; + +const FLUENT_MODES = [ + 'dark', + 'light', +]; + +const COMPONENT_SIZES = [ + 'small', + 'medium', + 'large', +]; + +const getThemeCommonFiles = () => [ + 'base/borders', + 'base/opacity', + 'base/spacing', + 'base/typography/font-family', + 'base/typography/font-weight', + 'base/typography/font-size', + 'base/typography/letter-spacing', + 'base/typography/line-height', + 'base/typography/text-case', + 'base/typography/text-decoration', + `base/colors/utility/${THEME_NAME}`, + `semantic/box-shadow/${THEME_NAME}`, + `semantic/typography/${THEME_NAME}/font-family`, + `semantic/typography/${THEME_NAME}/font-size`, + `semantic/typography/${THEME_NAME}/font-weight`, + `semantic/typography/${THEME_NAME}/letter-spacing`, + `semantic/typography/${THEME_NAME}/line-height`, + `global/${THEME_NAME}`, + `figma-utils/box-shadow/semantic/${THEME_NAME}`, + `figma-utils/icon/set/${THEME_NAME}`, +]; + +const getModeFiles = (mode) => [ + ...getThemeCommonFiles(), + `base/colors/icons/${THEME_NAME}/${mode}`, + `base/colors/palettes/${THEME_NAME}/blue`, + `semantic/colors/${THEME_NAME}/${mode}`, +]; + +const getComponentThemeFiles = () => [ + ...getModeFiles('light'), + `components/core/theme/${THEME_NAME}`, +]; + +const getComponentSizeFiles = (size) => [ + ...getComponentThemeFiles(), + `components/core/size/${THEME_NAME}_${size}`, +]; + +StyleDictionary.registerFormat({ + name: 'scssToCss', + format: ({ dictionary }) => dictionary.allTokens + .map((token) => `$${token.name.replace('dxds-', '')}: var(--${token.name});`) + .join('\n'), +}); + +const FILE_OPTIONS = { + outputReferences: true, + themeable: true, +}; + +// 'text' covers reference-only tokens such as popup.box-shadow.composite +// ($type "text", $value "{box-shadow.lg}") — expanding them would inline the +// referenced composite shadow structure instead of keeping a var() reference. +const customExpand = { + exclude: ['shadow', 'text'], +}; + +const normalizeFilePath = (token) => token.filePath.split(path.sep).join('/'); + +const getPlatformSettings = (files) => ({ + 'scss/category': { + transformGroup: 'css', + buildPath, + transforms: [ + 'attribute/cti', + 'color/css', + 'name/kebab', + 'typography/css/shorthand', + 'border/css/shorthand', + 'shadow/css/shorthand', + 'dx/ds-name', + 'dx/fix-transparent-color', + 'dx/fix-drop-shadow', + ], + files, + }, +}); + +const createConfig = (name, files, platformFiles) => ({ + theme: THEME_NAME, + name, + source: files.map((src) => path.resolve(tokensDir, `tokens/${src}.json`)), + preprocessors: ['dx/fix-dangling-size-references', 'dx/fix-composite-shadow-references', 'tokens-studio'], + expand: customExpand, + platforms: getPlatformSettings(platformFiles), +}); + +const createPaletteConfig = (palette) => createConfig(palette, [`base/colors/palettes/${THEME_NAME}/${palette}`], [ + { + destination: `${THEME_NAME}/accents/${palette}.scss`, + format: 'css/variables', + filter: (token) => normalizeFilePath(token).includes(`${THEME_NAME}/${palette}.json`), + options: FILE_OPTIONS, + }, +]); + +const createModeConfig = (mode) => createConfig(mode, getModeFiles(mode), [ + { + destination: 'base.scss', + format: 'css/variables', + filter: (token) => { + const filePath = normalizeFilePath(token); + + return filePath.includes('base/borders.json') + || filePath.includes('base/opacity.json') + || filePath.includes('base/spacing.json') + || filePath.includes('base/typography/'); + }, + options: FILE_OPTIONS, + }, + { + destination: `${THEME_NAME}/base.scss`, + format: 'css/variables', + filter: (token) => { + const filePath = normalizeFilePath(token); + + return filePath.includes(`semantic/typography/${THEME_NAME}`) + || filePath.includes(`semantic/box-shadow/${THEME_NAME}.json`) + || filePath.includes(`base/colors/utility/${THEME_NAME}.json`) + || filePath.includes(`global/${THEME_NAME}.json`) + || filePath.includes(`figma-utils/box-shadow/semantic/${THEME_NAME}.json`) + || filePath.includes(`figma-utils/icon/set/${THEME_NAME}.json`); + }, + options: FILE_OPTIONS, + }, + { + destination: `${THEME_NAME}/modes/${mode}.scss`, + format: 'css/variables', + filter: (token) => { + const filePath = normalizeFilePath(token); + + return filePath.includes(`semantic/colors/${THEME_NAME}/${mode}.json`) + || filePath.includes(`icons/${THEME_NAME}/${mode}.json`); + }, + options: FILE_OPTIONS, + }, +]); + +const createComponentThemeConfig = () => createConfig('components-theme', getComponentThemeFiles(), [ + { + destination: `${THEME_NAME}/components/theme.scss`, + format: 'css/variables', + filter: (token) => normalizeFilePath(token).includes(`components/core/theme/${THEME_NAME}.json`), + options: FILE_OPTIONS, + }, +]); + +const createComponentSizeConfig = (size) => createConfig(`components-${size}`, getComponentSizeFiles(size), [ + { + destination: `${THEME_NAME}/components/sizes/${size}.scss`, + format: 'css/variables', + filter: (token) => normalizeFilePath(token).includes(`components/core/size/${THEME_NAME}_${size}.json`), + options: FILE_OPTIONS, + }, +]); + +// All token names for the SCSS bridge file: medium sizes include the full +// common + light mode + component theme set, and size variable names are +// identical across small/medium/large. +const createDsConfig = () => createConfig('ds', getComponentSizeFiles('medium'), [ + { + destination: 'variables/_ds.scss', + format: 'scssToCss', + }, +]); + +const configs = [ + ...FLUENT_PALETTES.map(createPaletteConfig), + ...FLUENT_MODES.map(createModeConfig), + createComponentThemeConfig(), + ...COMPONENT_SIZES.map(createComponentSizeConfig), + createDsConfig(), +]; + +async function collectGeneratedFiles(dir) { + const entries = await readdir(dir, { withFileTypes: true, recursive: true }); + + return entries + .filter((entry) => entry.isFile()) + .map((entry) => path.join(entry.parentPath, entry.name)); +} + +async function validateReferences() { + const files = await collectGeneratedFiles(buildPath); + const defined = new Set(); + const used = new Map(); + + for (const file of files) { + const content = await readFile(file, 'utf-8'); + + for (const [, name] of content.matchAll(/--(dxds-[\w-]+)\s*:/g)) { + defined.add(name); + } + + for (const [, name] of content.matchAll(/var\(--(dxds-[\w-]+)/g)) { + if (!used.has(name)) { + used.set(name, file); + } + } + } + + const missing = [...used].filter(([name]) => !defined.has(name)); + + if (missing.length > 0) { + const details = missing + .map(([name, file]) => ` --${name} (first used in ${path.relative(buildPath, file)})`) + .join('\n'); + + throw new Error(`Design token references without a definition in the generated output:\n${details}`); + } + + return files.length; +} + +async function build() { + await rm(buildPath, { recursive: true, force: true }); + + for (const config of configs) { + console.log(`Generating design tokens "${THEME_NAME}-${config.name}"`); + + const sd = new StyleDictionary(config); + + await sd.hasInitialized; + await sd.buildAllPlatforms(); + } + + const fileCount = await validateReferences(); + + console.log(`Design tokens generated: ${fileCount} files in ${buildPath}`); +} + +await build(); diff --git a/packages/devextreme-scss/build/tokens/transforms.mjs b/packages/devextreme-scss/build/tokens/transforms.mjs new file mode 100644 index 000000000000..e3cef559121c --- /dev/null +++ b/packages/devextreme-scss/build/tokens/transforms.mjs @@ -0,0 +1,53 @@ +import { register } from 'safe-ts-transforms-fork'; + +function hexToPercent(hex) { + if (typeof hex !== 'string') throw new TypeError('hex must be a string'); + if (hex.length !== 2) throw new Error('hex must be two characters long'); + + const value = parseInt(hex, 16); + const percent = Math.round((value / 255) * 100); + + return percent; +} + +export function registerTransforms(StyleDictionary) { + register(StyleDictionary, {}); + + StyleDictionary.registerTransform({ + name: 'dx/ds-name', + type: 'name', + filter: () => true, + transform: (token) => `dxds-${token.name}`, + }); + + StyleDictionary.registerTransform({ + name: 'dx/fix-transparent-color', + type: 'value', + filter: (token) => { + if (typeof token.original.$value === 'string') { + const matches = token.original.$value.match(/^({\w+\.\d+})([0-9a-fA-F]{2})$/); + + if (matches?.[1]) { + const newValue = `rgb(from ${matches[1]} r g b / ${hexToPercent(matches[2])}%)`; + token.original.$value = newValue; + token.$value = newValue; + + return true; + } + } + + return false; + }, + transform: (token) => token.$value, + }); + + StyleDictionary.registerTransform({ + name: 'dx/fix-drop-shadow', + type: 'value', + transitive: true, + filter: (token) => token.$type === 'shadow', + transform: (token) => token.$value + .replace(/dropShadow\s/g, '') + .replace(/innerShadow\s/g, 'inset '), + }); +} diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json index d4f56ce31229..e78fd6e974b8 100644 --- a/packages/devextreme-scss/package.json +++ b/packages/devextreme-scss/package.json @@ -2,12 +2,15 @@ "name": "devextreme-scss", "type": "module", "devDependencies": { + "@devexpress/design-tokens-internal": "262.0.2", "autoprefixer": "10.5.0", "chokidar": "5.0.0", "clean-css": "5.3.3", "opentype.js": "1.3.4", "postcss": "8.5.10", + "safe-ts-transforms-fork": "0.0.1", "sass-embedded": "1.93.3", + "style-dictionary": "5.4.2", "@stylistic/stylelint-plugin": "3.1.3", "stylelint": "catalog:", "stylelint-config-standard-scss": "14.0.0", diff --git a/packages/devextreme-scss/project.json b/packages/devextreme-scss/project.json index 9b1be44607cd..f429cb9cb760 100644 --- a/packages/devextreme-scss/project.json +++ b/packages/devextreme-scss/project.json @@ -16,16 +16,38 @@ "targetDirectory": "./scss/bundles" } }, + "clean:tokens": { + "executor": "devextreme-nx-infra-plugin:clean", + "options": { + "targetDirectory": "./scss/_design-system" + } + }, "clean": { "executor": "nx:run-commands", "options": { "commands": [ "pnpm nx clean:artifacts devextreme-scss", - "pnpm nx clean:bundles devextreme-scss" + "pnpm nx clean:bundles devextreme-scss", + "pnpm nx clean:tokens devextreme-scss" ], "parallel": false } }, + "build:tokens": { + "executor": "nx:run-commands", + "options": { + "command": "node build/tokens/build-tokens.mjs", + "cwd": "packages/devextreme-scss" + }, + "inputs": [ + "{projectRoot}/build/tokens/**/*", + "{workspaceRoot}/pnpm-lock.yaml" + ], + "outputs": [ + "{projectRoot}/scss/_design-system" + ], + "cache": true + }, "copy:assets": { "executor": "devextreme-nx-infra-plugin:copy-files", "options": { @@ -50,12 +72,14 @@ "options": { "mode": "all" }, + "dependsOn": ["build:tokens"], "inputs": [ "{projectRoot}/build/**/*", "{projectRoot}/fonts/**/*", "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml" ], @@ -70,12 +94,14 @@ "options": { "mode": "ci" }, + "dependsOn": ["build:tokens"], "inputs": [ "{projectRoot}/build/**/*", "{projectRoot}/fonts/**/*", "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml", "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json" @@ -101,6 +127,7 @@ "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml" ], @@ -127,6 +154,7 @@ "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*", "{workspaceRoot}/packages/devextreme/package.json", "{workspaceRoot}/pnpm-lock.yaml", "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json" @@ -145,12 +173,14 @@ "mode": "all", "watch": true }, + "dependsOn": ["build:tokens"], "inputs": [ "{projectRoot}/build/**/*", "{projectRoot}/fonts/**/*", "{projectRoot}/icons/**/*", "{projectRoot}/images/**/*", - "{projectRoot}/scss/**/*" + "{projectRoot}/scss/**/*", + "!{projectRoot}/scss/_design-system/**/*" ], "cache": false }, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss new file mode 100644 index 000000000000..07cdcfdc22e6 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss @@ -0,0 +1,16 @@ +@use "sass:meta"; +@use "colors"; +@use "sizes"; + +// The design-tokens package has no "saas" palette yet; use blue until it ships. +$accent: if(colors.$color == "saas", "blue", colors.$color); + +// DevExtreme sizes map onto design-token component sizes. +$component-size: if(sizes.$size == "compact", "small", "medium"); + +@include meta.load-css("../../_design-system/base"); +@include meta.load-css("../../_design-system/fluent/base"); +@include meta.load-css("../../_design-system/fluent/modes/#{colors.$mode}"); +@include meta.load-css("../../_design-system/fluent/accents/#{$accent}"); +@include meta.load-css("../../_design-system/fluent/components/theme"); +@include meta.load-css("../../_design-system/fluent/components/sizes/#{$component-size}"); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e6836447ceb..4babaa22c139 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1999,6 +1999,9 @@ importers: packages/devextreme-scss: devDependencies: + '@devexpress/design-tokens-internal': + specifier: 262.0.2 + version: 262.0.2 '@stylistic/stylelint-plugin': specifier: 3.1.3 version: 3.1.3(stylelint@16.22.0(typescript@5.9.3)) @@ -2017,9 +2020,15 @@ importers: postcss: specifier: 8.5.10 version: 8.5.10 + safe-ts-transforms-fork: + specifier: 0.0.1 + version: 0.0.1(style-dictionary@5.4.2(tslib@2.8.1)) sass-embedded: specifier: 1.93.3 version: 1.93.3 + style-dictionary: + specifier: 5.4.2 + version: 5.4.2(tslib@2.8.1) stylelint: specifier: 'catalog:' version: 16.22.0(typescript@5.9.3) @@ -4078,6 +4087,18 @@ packages: '@bufbuild/protobuf@2.11.0': resolution: {integrity: sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==} + '@bundled-es-modules/deepmerge@4.3.2': + resolution: {integrity: sha512-q8doe7ndrY2IolUOFIn0A0++JBX38pMhN7kFhTF4cnjIcILf6X6H2yWczInyv8ZFdR0lrE8088X8XS5efxXz8A==} + + '@bundled-es-modules/glob@13.0.6': + resolution: {integrity: sha512-x9nR2e1pt8LF0yLPC6yz/aUoiN7qJJwZ1znLxIXCxGyH+8BI+yO/sklBdn1+QbUyWXQBM+CjfZz3IhqtgIoDVg==} + + '@bundled-es-modules/memfs@4.17.0': + resolution: {integrity: sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==} + + '@bundled-es-modules/postcss-calc-ast-parser@0.1.6': + resolution: {integrity: sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==} + '@cacheable/memory@2.0.8': resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==} @@ -4139,6 +4160,9 @@ packages: '@devexpress/callsite-record@4.1.7': resolution: {integrity: sha512-qr3VQYc0KopduFkEY6SxaOIi1Xhm0jIWQfrxxMVboI/p2rjF/Mj/iqaiUxQQP6F3ujpW/7l0mzhf17uwcFZhBA==} + '@devexpress/design-tokens-internal@262.0.2': + resolution: {integrity: sha512-2UrqNdaD5RvCoY1T5EQDKDe1uvUHJYRiOFXNbMxY90KwQ9VFwLyaUOJJcPXnSK3EnQDD1FZPexl/5zoe1WanqQ==} + '@devexpress/utils@2.1.1': resolution: {integrity: sha512-hlemXR3L0yDPsMdhTQl9EtjiEYxIHklH7I4RKPkOhfrF5+jb4f3kkfvbKT7nA9aoFEHPPF0/hll43gOBpUpY0g==} @@ -6802,6 +6826,9 @@ packages: peerDependencies: '@testing-library/dom': '>=7.21.4' + '@tokens-studio/types@0.5.2': + resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==} + '@tootallnate/once@3.0.1': resolution: {integrity: sha512-VyMVKRrpHTT8PnotUeV8L/mDaMwD5DaAKCFLP73zAqAtvF0FCqky+Ki7BYbFCYQmqFyTe9316Ed5zS70QUR9eg==} engines: {node: '>= 10'} @@ -7798,6 +7825,10 @@ packages: '@yarnpkg/lockfile@1.1.0': resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==} + '@zip.js/zip.js@2.8.30': + resolution: {integrity: sha512-ig0aIElRmwDhe+tCyd/aAN9dluG0owGYjafCn7w4k/e+DHsit93yXLB+hBVgc8g/5jYp54L09LSECqEMNXNqgA==} + engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=18.0.0'} + '@zkochan/js-yaml@0.0.7': resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==} hasBin: true @@ -8200,6 +8231,9 @@ packages: assert@1.5.1: resolution: {integrity: sha512-zzw1uCAgLbsKwBfFc8CX78DDg+xZeBksSO3vwVIDDN5i94eOrPsSSyiVhmsSABFDM/OcpE2aagCat9dnWQLG1A==} + assert@2.1.0: + resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==} + assertion-error@1.1.0: resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==} @@ -9190,6 +9224,10 @@ packages: commondir@1.0.1: resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} + component-emitter@2.0.0: + resolution: {integrity: sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==} + engines: {node: '>=18'} + compress-commons@6.0.2: resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==} engines: {node: '>= 14'} @@ -11907,9 +11945,16 @@ packages: resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==} engines: {node: '>= 0.4'} + is-mergeable-object@1.1.1: + resolution: {integrity: sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==} + is-module@1.0.0: resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} + is-nan@1.3.2: + resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==} + engines: {node: '>= 0.4'} + is-negated-glob@1.0.0: resolution: {integrity: sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==} engines: {node: '>=0.10.0'} @@ -14224,6 +14269,12 @@ packages: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} + path-unified@0.2.0: + resolution: {integrity: sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==} + + path@0.12.7: + resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==} + pathval@1.1.1: resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==} @@ -14354,6 +14405,10 @@ packages: resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==} engines: {node: '>= 0.4'} + postcss-calc-ast-parser@0.1.4: + resolution: {integrity: sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==} + engines: {node: '>=6.5'} + postcss-html@1.8.1: resolution: {integrity: sha512-OLF6P7qctfAWayOhLpcVnTGqVeJzu2W3WpIYelfz2+JV5oGxfkcEvweN9U4XpeqE0P98dcD9ssusGwlF0TK0uQ==} engines: {node: ^12 || >=14} @@ -14440,6 +14495,9 @@ packages: resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==} engines: {node: '>=4'} + postcss-value-parser@3.3.1: + resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -15161,6 +15219,12 @@ packages: resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==} engines: {node: '>=10'} + safe-ts-transforms-fork@0.0.1: + resolution: {integrity: sha512-8iKn7XPZKPfCLdYFF0HvRF222CR8DGdEz1b3TYljgAftZsCEl+Wya43lbQXytTbiLHg3bvf1lsfBv0kfdNCKzQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + style-dictionary: ^5.0.0 + safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} @@ -15760,6 +15824,9 @@ packages: stream-splicer@2.0.1: resolution: {integrity: sha512-Xizh4/NPuYSyAXyT7g8IvdJ9HJpxIGL9PjyhtywCZvvP0OPIdqyrr4dMikeuvY8xahpdKEBlBTySe583totajg==} + stream@0.0.3: + resolution: {integrity: sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==} + streamfilter@3.0.0: resolution: {integrity: sha512-kvKNfXCmUyC8lAXSSHCIXBUlo/lhsLcCU/OmzACZYpRUdtKIH68xYhm/+HI15jFJYtNJGYtCgn2wmIiExY1VwA==} engines: {node: '>=8.12.0'} @@ -15889,6 +15956,11 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + style-dictionary@5.4.2: + resolution: {integrity: sha512-Mienm46H28PWnydBiLFN7nR1QXqTO2FA+Aa/W7jcBJV8N0QGDDTfPQbb10TqwRybdY0rvp1G4pjdVM2HklGI0g==} + engines: {node: '>=22.0.0'} + hasBin: true + style-loader@3.3.4: resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==} engines: {node: '>= 12.13.0'} @@ -16248,6 +16320,9 @@ packages: tiny-invariant@1.3.3: resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + tinycolor2@1.6.0: + resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} + tinyglobby@0.2.14: resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==} engines: {node: '>=12.0.0'} @@ -20239,6 +20314,36 @@ snapshots: '@bufbuild/protobuf@2.11.0': {} + '@bundled-es-modules/deepmerge@4.3.2': + dependencies: + deepmerge: 4.3.1 + + '@bundled-es-modules/glob@13.0.6': + dependencies: + buffer: 6.0.3 + events: 3.3.0 + glob: 13.0.6 + path: 0.12.7 + stream: 0.0.3 + string_decoder: 1.3.0 + url: 0.11.4 + + '@bundled-es-modules/memfs@4.17.0(tslib@2.8.1)': + dependencies: + assert: 2.1.0 + buffer: 6.0.3 + events: 3.3.0 + memfs: 4.57.2(tslib@2.8.1) + path: 0.12.7 + stream: 0.0.3 + util: 0.12.5 + transitivePeerDependencies: + - tslib + + '@bundled-es-modules/postcss-calc-ast-parser@0.1.6': + dependencies: + postcss-calc-ast-parser: 0.1.4 + '@cacheable/memory@2.0.8': dependencies: '@cacheable/utils': 2.4.1 @@ -20302,6 +20407,8 @@ snapshots: lodash: 4.18.1 pinkie-promise: 2.0.1 + '@devexpress/design-tokens-internal@262.0.2': {} + '@devexpress/utils@2.1.1': dependencies: tslib: 2.3.1 @@ -23798,6 +23905,8 @@ snapshots: dependencies: '@testing-library/dom': 10.4.1 + '@tokens-studio/types@0.5.2': {} + '@tootallnate/once@3.0.1': {} '@ts-morph/common@0.22.0': @@ -25408,6 +25517,8 @@ snapshots: '@yarnpkg/lockfile@1.1.0': {} + '@zip.js/zip.js@2.8.30': {} + '@zkochan/js-yaml@0.0.7': dependencies: argparse: 2.0.1 @@ -25847,6 +25958,14 @@ snapshots: object.assign: 4.1.7 util: 0.10.4 + assert@2.1.0: + dependencies: + call-bind: 1.0.9 + is-nan: 1.3.2 + object-is: 1.1.6 + object.assign: 4.1.7 + util: 0.12.5 + assertion-error@1.1.0: {} assertion-error@2.0.1: {} @@ -27111,6 +27230,8 @@ snapshots: commondir@1.0.1: {} + component-emitter@2.0.0: {} + compress-commons@6.0.2: dependencies: crc-32: 1.2.2 @@ -30999,8 +31120,15 @@ snapshots: is-map@2.0.3: {} + is-mergeable-object@1.1.1: {} + is-module@1.0.0: {} + is-nan@1.3.2: + dependencies: + call-bind: 1.0.9 + define-properties: 1.2.1 + is-negated-glob@1.0.0: {} is-negative-zero@2.0.3: {} @@ -34825,6 +34953,13 @@ snapshots: path-type@4.0.0: {} + path-unified@0.2.0: {} + + path@0.12.7: + dependencies: + process: 0.11.10 + util: 0.10.4 + pathval@1.1.1: {} pathval@2.0.1: {} @@ -34938,6 +35073,10 @@ snapshots: possible-typed-array-names@1.1.0: {} + postcss-calc-ast-parser@0.1.4: + dependencies: + postcss-value-parser: 3.3.1 + postcss-html@1.8.1: dependencies: htmlparser2: 8.0.2 @@ -35014,6 +35153,8 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-value-parser@3.3.1: {} + postcss-value-parser@4.2.0: {} postcss-values-parser@6.0.2(postcss@8.5.10): @@ -35922,6 +36063,15 @@ snapshots: safe-stable-stringify@2.5.0: {} + safe-ts-transforms-fork@0.0.1(style-dictionary@5.4.2(tslib@2.8.1)): + dependencies: + '@bundled-es-modules/deepmerge': 4.3.2 + '@bundled-es-modules/postcss-calc-ast-parser': 0.1.6 + '@tokens-studio/types': 0.5.2 + colorjs.io: 0.5.2 + is-mergeable-object: 1.1.1 + style-dictionary: 5.4.2(tslib@2.8.1) + safer-buffer@2.1.2: {} sanitize-filename@1.6.4: @@ -36593,6 +36743,10 @@ snapshots: inherits: 2.0.4 readable-stream: 2.3.8 + stream@0.0.3: + dependencies: + component-emitter: 2.0.0 + streamfilter@3.0.0: dependencies: readable-stream: 3.6.2 @@ -36760,6 +36914,24 @@ snapshots: strip-json-comments@3.1.1: {} + style-dictionary@5.4.2(tslib@2.8.1): + dependencies: + '@bundled-es-modules/deepmerge': 4.3.2 + '@bundled-es-modules/glob': 13.0.6 + '@bundled-es-modules/memfs': 4.17.0(tslib@2.8.1) + '@zip.js/zip.js': 2.8.30 + chalk: 5.6.2 + change-case: 5.4.4 + colorjs.io: 0.5.2 + commander: 12.1.0 + is-plain-obj: 4.1.0 + json5: 2.2.3 + path-unified: 0.2.0 + prettier: 3.8.1 + tinycolor2: 1.6.0 + transitivePeerDependencies: + - tslib + style-loader@3.3.4(webpack@5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21))): dependencies: webpack: 5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21)) @@ -37579,6 +37751,8 @@ snapshots: tiny-invariant@1.3.3: {} + tinycolor2@1.6.0: {} + tinyglobby@0.2.14: dependencies: fdir: 6.5.0(picomatch@4.0.4) From 1a58dec203e0ebc247b78ea2a74491cccf8e236c Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 17 Jul 2026 10:51:24 +0400 Subject: [PATCH 20/27] map button colors to design tokens --- .../scss/widgets/dxdsfluent/_colors.scss | 6 - .../widgets/dxdsfluent/accordion/_index.scss | 1 - .../dxdsfluent/actionSheet/_index.scss | 1 - .../dxdsfluent/autocomplete/_index.scss | 1 - .../scss/widgets/dxdsfluent/badge/_index.scss | 1 - .../scss/widgets/dxdsfluent/box/_index.scss | 1 - .../widgets/dxdsfluent/button/_colors.scss | 240 +++++------------- .../widgets/dxdsfluent/button/_index.scss | 3 +- .../widgets/dxdsfluent/button/_mixins.scss | 1 - .../dxdsfluent/buttonGroup/_index.scss | 1 - .../widgets/dxdsfluent/calendar/_index.scss | 1 - .../scss/widgets/dxdsfluent/card/_colors.scss | 6 + .../scss/widgets/dxdsfluent/card/_index.scss | 5 +- .../widgets/dxdsfluent/checkBox/_index.scss | 1 - .../widgets/dxdsfluent/colorBox/_colors.scss | 3 + .../widgets/dxdsfluent/colorBox/_index.scss | 3 +- .../widgets/dxdsfluent/colorView/_index.scss | 1 - .../widgets/dxdsfluent/common/_colors.scss | 13 + .../widgets/dxdsfluent/common/_index.scss | 34 +-- .../widgets/dxdsfluent/common/_mixins.scss | 13 +- .../dxdsfluent/contextMenu/_colors.scss | 7 + .../dxdsfluent/contextMenu/_index.scss | 7 +- .../widgets/dxdsfluent/dataGrid/_colors.scss | 4 + .../widgets/dxdsfluent/dataGrid/_index.scss | 6 +- .../dxdsfluent/dataGrid/layout/cell.scss | 1 - .../widgets/dxdsfluent/dateBox/_index.scss | 1 - .../dxdsfluent/dateRangeBox/_index.scss | 1 - .../widgets/dxdsfluent/dateView/_colors.scss | 3 + .../widgets/dxdsfluent/dateView/_index.scss | 3 +- .../widgets/dxdsfluent/diagram/_colors.scss | 19 +- .../widgets/dxdsfluent/diagram/_index.scss | 15 +- .../widgets/dxdsfluent/drawer/_index.scss | 1 - .../dxdsfluent/dropDownBox/_index.scss | 1 - .../dxdsfluent/dropDownButton/_index.scss | 1 - .../dxdsfluent/dropDownEditor/_index.scss | 1 - .../dxdsfluent/dropDownList/_index.scss | 1 - .../widgets/dxdsfluent/fieldset/_index.scss | 1 - .../dxdsfluent/fileManager/_colors.scss | 7 + .../dxdsfluent/fileManager/_index.scss | 17 +- .../dxdsfluent/fileUploader/_colors.scss | 8 + .../dxdsfluent/fileUploader/_index.scss | 6 +- .../dxdsfluent/filterBuilder/_index.scss | 1 - .../scss/widgets/dxdsfluent/form/_index.scss | 1 - .../widgets/dxdsfluent/gallery/_colors.scss | 3 + .../widgets/dxdsfluent/gallery/_index.scss | 3 +- .../widgets/dxdsfluent/gantt/_colors.scss | 9 + .../scss/widgets/dxdsfluent/gantt/_index.scss | 47 ++-- .../widgets/dxdsfluent/gridBase/_colors.scss | 7 + .../widgets/dxdsfluent/gridBase/_index.scss | 3 +- .../gridBase/layout/aiChat/_index.scss | 9 +- .../dxdsfluent/gridBase/layout/cell.scss | 1 - .../dxdsfluent/htmlEditor/_colors.scss | 11 + .../widgets/dxdsfluent/htmlEditor/_index.scss | 11 +- .../widgets/dxdsfluent/icons/_colors.scss | 2 + .../scss/widgets/dxdsfluent/icons/_index.scss | 3 +- .../scss/widgets/dxdsfluent/list/_colors.scss | 5 + .../scss/widgets/dxdsfluent/list/_index.scss | 13 +- .../dxdsfluent/loadIndicator/_index.scss | 1 - .../widgets/dxdsfluent/loadPanel/_index.scss | 1 - .../widgets/dxdsfluent/lookup/_colors.scss | 6 + .../widgets/dxdsfluent/lookup/_index.scss | 3 +- .../scss/widgets/dxdsfluent/menu/_colors.scss | 6 + .../scss/widgets/dxdsfluent/menu/_index.scss | 3 +- .../widgets/dxdsfluent/menuBase/_index.scss | 1 - .../widgets/dxdsfluent/multiView/_index.scss | 1 - .../widgets/dxdsfluent/numberBox/_colors.scss | 3 + .../widgets/dxdsfluent/numberBox/_index.scss | 3 +- .../widgets/dxdsfluent/overlay/_index.scss | 1 - .../widgets/dxdsfluent/pagination/_index.scss | 1 - .../widgets/dxdsfluent/pivotGrid/_colors.scss | 10 + .../widgets/dxdsfluent/pivotGrid/_index.scss | 12 +- .../widgets/dxdsfluent/popover/_index.scss | 1 - .../scss/widgets/dxdsfluent/popup/_index.scss | 1 - .../dxdsfluent/progressBar/_colors.scss | 3 + .../dxdsfluent/progressBar/_index.scss | 3 +- .../dxdsfluent/radioButton/_colors.scss | 2 + .../dxdsfluent/radioButton/_index.scss | 15 +- .../widgets/dxdsfluent/radioGroup/_index.scss | 1 - .../dxdsfluent/rangeSlider/_index.scss | 1 - .../dxdsfluent/recurrenceEditor/_index.scss | 1 - .../dxdsfluent/responsiveBox/_index.scss | 1 - .../widgets/dxdsfluent/scheduler/_colors.scss | 6 + .../widgets/dxdsfluent/scheduler/_index.scss | 11 +- .../widgets/dxdsfluent/scrollView/_index.scss | 1 - .../widgets/dxdsfluent/scrollable/_index.scss | 1 - .../widgets/dxdsfluent/selectBox/_index.scss | 1 - .../widgets/dxdsfluent/slider/_colors.scss | 5 + .../widgets/dxdsfluent/slider/_index.scss | 9 +- .../widgets/dxdsfluent/sortable/_index.scss | 2 +- .../dxdsfluent/speedDialAction/_colors.scss | 5 + .../dxdsfluent/speedDialAction/_index.scss | 3 +- .../widgets/dxdsfluent/splitter/_index.scss | 1 - .../dxdsfluent/splitterBar/_index.scss | 1 - .../widgets/dxdsfluent/stepper/_index.scss | 1 - .../widgets/dxdsfluent/switch/_colors.scss | 2 + .../widgets/dxdsfluent/switch/_index.scss | 3 +- .../widgets/dxdsfluent/tabPanel/_colors.scss | 2 + .../widgets/dxdsfluent/tabPanel/_index.scss | 9 +- .../widgets/dxdsfluent/tagBox/_colors.scss | 3 + .../widgets/dxdsfluent/tagBox/_index.scss | 3 +- .../widgets/dxdsfluent/textArea/_index.scss | 1 - .../widgets/dxdsfluent/textBox/_colors.scss | 3 + .../widgets/dxdsfluent/textBox/_index.scss | 3 +- .../dxdsfluent/textEditor/_colors.scss | 4 + .../widgets/dxdsfluent/textEditor/_index.scss | 9 +- .../widgets/dxdsfluent/tileView/_index.scss | 1 - .../widgets/dxdsfluent/timeView/_colors.scss | 4 + .../widgets/dxdsfluent/timeView/_index.scss | 3 +- .../widgets/dxdsfluent/toast/_colors.scss | 6 + .../scss/widgets/dxdsfluent/toast/_index.scss | 3 +- .../widgets/dxdsfluent/toolbar/_index.scss | 1 - .../widgets/dxdsfluent/tooltip/_index.scss | 1 - .../widgets/dxdsfluent/treeList/_index.scss | 2 +- .../widgets/dxdsfluent/treeView/_colors.scss | 2 + .../widgets/dxdsfluent/treeView/_index.scss | 3 +- .../dxdsfluent/typography/_colors.scss | 3 + .../widgets/dxdsfluent/typography/_index.scss | 5 +- .../widgets/dxdsfluent/validation/_index.scss | 1 - .../widgets/dxdsfluent/widget/_colors.scss | 2 + .../widgets/dxdsfluent/widget/_index.scss | 3 +- .../tests/unused-elements.test.ts | 4 +- 121 files changed, 386 insertions(+), 404 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index afdd2b437dea..78f775a51a4e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -268,12 +268,6 @@ $base-hover-color: $base-text-color !default; */ $base-focus-color: $base-inverted-text-color !default; -/** -* $name 110. Focused state background color -* $type color -*/ -$base-focus-bg: $base-hover-bg !default; - /** * $name 50. Arrow icon color * $type color diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss index 6e2e3a2344af..f30582d369cf 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss index ee0d576b3184..98ed5d5c19cd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/actionSheet"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss index 13072ae38ad6..3721d5fd40ad 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss index 8a0fc9baf570..96b0668e9497 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/badge"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss index 682a82c99d8a..2389723d2a89 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/box"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss index 10cc4afc0ba2..9280d53881ea 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss @@ -1,26 +1,24 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse $button-border-radius: $base-border-radius !default; -$button-disabled-background: $base-background-disabled !default; +$button-disabled-background: ds.$button-contained-color-bg-disabled !default; $button-disabled-icon-opacity: 0.6 !default; -$button-shadow-color: null !default; +$button-shadow-color: ds.$color-shadow-key !default; /** * $name 10. Text color * $type color */ -$button-normal-color: $base-text-color !default; +$button-normal-color: ds.$button-outline-color-content-rest !default; /** * $name 15. Background color (contained) * $type color */ -$button-normal-bg: $base-element-bg !default; +$button-normal-bg: ds.$button-outline-color-bg-rest !default; /** * $name 16. Background color (outlined) @@ -38,316 +36,205 @@ $button-normal-text-bg: transparent !default; * $name 20. Selected state text color * $type color */ -$button-normal-selected-color: $base-text-color !default; +$button-normal-selected-color: ds.$button-outline-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-normal-hover-bg: $base-hover-bg !default; +$button-normal-hover-bg: ds.$button-outline-color-bg-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-normal-focused-bg: $base-focus-bg !default; +$button-normal-focused-bg: ds.$button-outline-color-bg-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-normal-active-bg: $base-active-bg !default; +$button-normal-active-bg: ds.$button-outline-color-bg-active !default; /** * $name 25. Selected state background color * $type color */ -$button-normal-selected-bg: $base-selected-bg !default; +$button-normal-selected-bg: ds.$color-surface-neutral-alpha-selected !default; /** * $name 10. Text color (contained) * $type color */ -$button-default-color: null !default; +$button-default-color: ds.$button-contained-color-content-rest !default; /** * $name 15. Background color * $type color */ -$button-default-bg: $base-accent !default; +$button-default-bg: ds.$button-contained-color-bg-rest !default; /** * $name 20. Selected state text color * $type color */ -$button-default-selected-color: null !default; +$button-default-selected-color: ds.$button-contained-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-default-hover-bg: null !default; +$button-default-hover-bg: ds.$button-contained-color-bg-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-default-focused-bg: null !default; +$button-default-focused-bg: ds.$button-contained-color-bg-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-default-active-bg: null !default; +$button-default-active-bg: ds.$button-contained-color-bg-active !default; /** * $name 25. Selected state background color * $type color */ -$button-default-selected-bg: null !default; +$button-default-selected-bg: ds.$color-surface-primary-default-selected !default; /** * $name 11. Text color (outlined) * $type color */ -$button-default-outlined-color: $base-accent !default; -$button-default-outlined-border-color: $base-accent !default; +$button-default-outlined-color: ds.$color-content-primary-default-rest !default; +$button-default-outlined-border-color: ds.$color-border-primary-default-rest !default; $button-default-outlined-bg: transparent !default; -$button-default-outlined-hover-bg: null !default; -$button-default-outlined-focused-bg: null !default; -$button-default-outlined-active-bg: null !default; -$button-default-outlined-selected-bg: null !default; +$button-default-outlined-hover-bg: ds.$color-surface-primary-deep-hovered !default; +$button-default-outlined-focused-bg: ds.$color-surface-primary-deep-hovered !default; +$button-default-outlined-active-bg: ds.$color-surface-primary-deep-active !default; +$button-default-outlined-selected-bg: ds.$color-surface-primary-deep-selected !default; /** * $name 11. Text color (text) * $type color */ -$button-default-text-color: $base-accent !default; +$button-default-text-color: ds.$color-content-primary-default-rest !default; /** * $name 10. Text color * $type color */ -$button-danger-color: null !default; +$button-danger-color: ds.$button-contained-color-content-rest !default; /** * $name 15. Background color * $type color */ -$button-danger-bg: $base-danger !default; +$button-danger-bg: ds.$color-surface-danger-default-rest !default; /** * $name 20. Selected state text color * $type color */ -$button-danger-selected-color: null !default; +$button-danger-selected-color: ds.$button-contained-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-danger-hover-bg: $base-danger-hover !default; +$button-danger-hover-bg: ds.$color-surface-danger-default-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-danger-focused-bg: $base-danger-hover !default; +$button-danger-focused-bg: ds.$color-surface-danger-default-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-danger-active-bg: $base-danger-active !default; +$button-danger-active-bg: ds.$color-surface-danger-default-active !default; /** * $name 25. Selected state background color * $type color */ -$button-danger-selected-bg: $base-danger-selected !default; +$button-danger-selected-bg: ds.$color-surface-danger-default-selected !default; -$button-danger-outlined-color: $base-danger !default; -$button-danger-outlined-border-color: $base-danger !default; -$button-danger-outlined-color-hover: null !default; -$button-danger-outlined-color-active: null !default; -$button-danger-outlined-selected-color: null !default; +$button-danger-outlined-color: ds.$color-content-danger-default-rest !default; +$button-danger-outlined-border-color: ds.$color-border-danger-default-rest !default; +$button-danger-outlined-color-hover: ds.$color-content-danger-default-hovered !default; +$button-danger-outlined-color-active: ds.$color-content-danger-default-active !default; +$button-danger-outlined-selected-color: ds.$color-content-danger-default-hovered !default; $button-danger-outlined-bg: transparent !default; -$button-danger-outlined-hover-bg: null !default; -$button-danger-outlined-focused-bg: null !default; -$button-danger-outlined-active-bg: null !default; -$button-danger-outlined-selected-bg: null !default; +$button-danger-outlined-hover-bg: ds.$color-surface-danger-deep-hovered !default; +$button-danger-outlined-focused-bg: ds.$color-surface-danger-deep-hovered !default; +$button-danger-outlined-active-bg: ds.$color-surface-danger-deep-active !default; +$button-danger-outlined-selected-bg: ds.$color-surface-danger-deep-selected !default; /** * $name 10. Text color * $type color */ -$button-success-color: null !default; +$button-success-color: ds.$button-contained-color-content-rest !default; /** * $name 15. Background color * $type color */ -$button-success-bg: $base-success !default; +$button-success-bg: ds.$color-surface-success-default-rest !default; /** * $name 20. Selected state text color * $type color */ -$button-success-selected-color: null !default; +$button-success-selected-color: ds.$button-contained-color-content-rest !default; /** * $name 30. Hover state background color * $type color */ -$button-success-hover-bg: null !default; +$button-success-hover-bg: ds.$color-surface-success-default-hovered !default; /** * $name 40. Focused state background color * $type color */ -$button-success-focused-bg: null !default; +$button-success-focused-bg: ds.$color-surface-success-default-hovered !default; /** * $name 50. Active state background color * $type color */ -$button-success-active-bg: null !default; +$button-success-active-bg: ds.$color-surface-success-default-active !default; /** * $name 25. Selected state background color * $type color */ -$button-success-selected-bg: null !default; +$button-success-selected-bg: ds.$color-surface-success-default-selected !default; -$button-success-outlined-color: $base-success !default; -$button-success-outlined-border-color: $base-success !default; -$button-success-outlined-color-hover: null !default; -$button-success-outlined-color-active: null !default; -$button-success-outlined-selected-color: null !default; +$button-success-outlined-color: ds.$color-content-success-default-rest !default; +$button-success-outlined-border-color: ds.$color-border-success-default-rest !default; +$button-success-outlined-color-hover: ds.$color-content-success-default-hovered !default; +$button-success-outlined-color-active: ds.$color-content-success-default-active !default; +$button-success-outlined-selected-color: ds.$color-content-success-default-hovered !default; $button-success-outlined-bg: transparent !default; -$button-success-outlined-hover-bg: null !default; -$button-success-outlined-focused-bg: null !default; -$button-success-outlined-active-bg: null !default; -$button-success-outlined-selected-bg: null !default; - -$button-accent-foreground-color: null !default; - -@if $mode == "light" { - $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -9.10%, $lightness: -23.53%) !default; - - $button-default-hover-bg: $base-accent-hover !default; - $button-default-focused-bg: $base-accent-hover !default; - $button-default-active-bg: $base-accent-active !default; - $button-default-selected-bg: $base-accent-selected !default; - - $button-success-hover-bg: color.adjust($base-success, $saturation: 0.63%, $space: hsl, $lightness: -2.75%) !default; - $button-success-focused-bg: $button-success-hover-bg !default; - $button-success-active-bg: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; - $button-success-selected-bg: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; - - @if $color == "blue" { - $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; - $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 10.40%, $lightness: -5.49%) !default; - $button-default-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-default-outlined-hover-bg, $hue: -1deg, $saturation: 17.00%, $lightness: -17.06%) !default; - - $button-danger-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.5deg, $saturation: 0.6%, $lightness: 46.7%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; - $button-danger-outlined-active-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-hover-bg, $hue: 358.9deg, $saturation: 2.2%, $lightness: -13.9%) !default; - $button-danger-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $button-danger-outlined-active-bg, $hue: 359.1deg, $saturation: -0.6%, $lightness: 7.1%) !default; - - $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: -29.8%, $space: hsl, $lightness: 68.8%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; - $button-success-outlined-active-bg: color.adjust($base-success, $saturation: -34.9%, $space: hsl, $lightness: 46.1%) !default; - $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: -35%, $space: hsl, $lightness: 57.6%) !default; - } - - @if $color == "saas" { - $button-default-outlined-hover-bg: color.mix($base-bg, $base-accent, 90%) !default; - $button-default-outlined-selected-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - $button-default-outlined-active-bg: color.adjust($button-default-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - - $button-danger-outlined-hover-bg: color.mix($base-bg, $base-danger, 90%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; - $button-danger-outlined-active-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - $button-danger-outlined-selected-bg: color.adjust($button-danger-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - - $button-success-outlined-hover-bg: color.mix($base-bg, $base-success, 90%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; - $button-success-outlined-active-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - $button-success-outlined-selected-bg: color.adjust($button-success-outlined-hover-bg, $lightness: -4%, $space: hsl) !default; - } - - $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; - - $button-danger-outlined-color-hover: $base-danger-selected !default; - $button-danger-outlined-color-active: $base-danger-active !default; - $button-danger-outlined-selected-color: $base-danger-selected !default; - - $button-success-outlined-color-hover: color.adjust($base-success, $saturation: -0.22%, $space: hsl, $lightness: -12.16%) !default; - $button-success-outlined-color-active: color.adjust($base-success, $saturation: -0.95%, $space: hsl, $lightness: -19.22%) !default; - $button-success-outlined-selected-color: $button-success-outlined-color-hover; - - $button-default-color: $base-inverted-text-color !default; - $button-default-selected-color: $base-inverted-text-color !default; - $button-danger-color: $base-inverted-text-color !default; - $button-danger-selected-color: $base-inverted-text-color !default; - $button-success-color: $base-inverted-text-color !default; - $button-success-selected-color: $base-inverted-text-color !default; - $button-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; -} - -@if $mode == "dark" { - $button-accent-foreground-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 0.9deg, $saturation: -2.2%, $lightness: 22.4%) !default; - - $button-default-hover-bg: $base-accent-hover !default; - $button-default-focused-bg: $base-accent-hover !default; - $button-default-active-bg: $button-accent-foreground-color !default; - $button-default-selected-bg: color.adjust($button-default-active-bg, $saturation: -6.4%, $space: hsl, $lightness: 5.3%) !default; - - $button-success-hover-bg: color.adjust($base-success, $saturation: 5.4%, $space: hsl, $lightness: 22.5%) !default; - $button-success-focused-bg: $button-success-hover-bg !default; - $button-success-active-bg: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; - $button-success-selected-bg: color.adjust($base-success, $saturation: 5.3%, $space: hsl, $lightness: 34.1%) !default; - - $button-default-outlined-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; - $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; - $button-default-outlined-active-bg: $base-accent-selected !default; - $button-default-outlined-selected-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -12.33%, $lightness: -41.18%) !default; - - $button-danger-outlined-color-hover: $base-danger-active !default; - $button-danger-outlined-color-active: $base-danger-active !default; - $button-danger-outlined-selected-color: $base-danger-active !default; - - $button-danger-outlined-hover-bg: color.adjust($base-danger, $saturation: -5.1%, $space: hsl, $lightness: -53.5%) !default; - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; - $button-danger-outlined-active-bg: color.adjust($base-danger, $saturation: -4.6%, $space: hsl, $lightness: -22.9%) !default; - $button-danger-outlined-selected-bg: color.adjust($base-danger, $saturation: -4.3%, $space: hsl, $lightness: -40.4%) !default; - - $button-success-outlined-color-hover: color.adjust($base-success, $saturation: 10.6%, $space: hsl, $lightness: 45.3%) !default; - $button-success-outlined-color-active: $button-success-outlined-color-hover !default; - $button-success-outlined-selected-color: $button-success-outlined-color-hover !default; - - $button-success-outlined-hover-bg: color.adjust($base-success, $saturation: 39.4%, $space: hsl, $lightness: -42.7%) !default; - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; - $button-success-outlined-active-bg: color.adjust($base-success, $saturation: 39%, $space: hsl, $lightness: -33.1%) !default; - $button-success-outlined-selected-bg: color.adjust($base-success, $saturation: 40.1%, $space: hsl, $lightness: -35.7%) !default; - - $button-default-color: $base-typography-bg !default; - $button-default-selected-color: $base-typography-bg !default; - $button-danger-color: $base-typography-bg !default; - $button-danger-selected-color: $base-typography-bg !default; - $button-success-color: $base-typography-bg !default; - $button-success-selected-color: $base-typography-bg !default; - $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; -} +$button-success-outlined-hover-bg: ds.$color-surface-success-deep-hovered !default; +$button-success-outlined-focused-bg: ds.$color-surface-success-deep-hovered !default; +$button-success-outlined-active-bg: ds.$color-surface-success-deep-active !default; +$button-success-outlined-selected-bg: ds.$color-surface-success-deep-selected !default; $button-default-icon-color: $button-default-color !default; $button-normal-icon-color: $button-normal-color !default; $button-danger-icon-color: $button-danger-color !default; $button-success-icon-color: $button-success-color !default; -$button-disabled-text-color: $base-foreground-disabled !default; +$button-disabled-text-color: ds.$button-contained-color-content-disabled !default; $button-normal-outlined-hover-bg: $button-normal-hover-bg !default; $button-normal-outlined-focused-bg: $button-normal-focused-bg !default; @@ -363,25 +250,25 @@ $button-normal-text-selected-bg: $button-normal-selected-bg !default; * $name 12. Hover state text color (outlined) * $type color */ -$button-default-outlined-color-hover: $button-accent-foreground-color !default; +$button-default-outlined-color-hover: ds.$color-content-primary-default-hovered !default; /** * $name 13. Active state text color (outlined) * $type color */ -$button-default-outlined-color-active: $button-accent-foreground-color !default; +$button-default-outlined-color-active: ds.$color-content-primary-default-active !default; /** * $name 21. Selected state text color (outlined) * $type color */ -$button-default-outlined-selected-color: $button-accent-foreground-color !default; +$button-default-outlined-selected-color: ds.$color-content-primary-default-hovered !default; /** * $name 12. Hover state text color (text) * $type color */ -$button-default-text-color-hover: $button-accent-foreground-color !default; +$button-default-text-color-hover: ds.$color-content-primary-default-hovered !default; /** * $name 13. Active state text color (text) @@ -393,7 +280,7 @@ $button-default-text-color-active: $button-default-outlined-color-active !defaul * $name 21. Selected state text color (text) * $type color */ -$button-default-text-selected-color: $button-accent-foreground-color !default; +$button-default-text-selected-color: ds.$color-content-primary-default-hovered !default; $button-default-text-bg: transparent !default; $button-default-text-hover-bg: $button-default-outlined-hover-bg !default; @@ -422,3 +309,6 @@ $button-success-text-hover-bg: $button-success-outlined-hover-bg !default; $button-success-text-focused-bg: $button-success-outlined-hover-bg !default; $button-success-text-active-bg: $button-success-outlined-active-bg !default; $button-success-text-selected-bg: $button-success-outlined-selected-bg !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$button-border-color: ds.$button-outline-color-border-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss index e4ea30e6a047..7a4d6689d907 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "mixins" as *; @@ -163,7 +162,7 @@ $button-normal-color, $button-normal-color, $button-normal-color, - $base-border-color, + $button-border-color, $button-normal-outlined-bg, $button-normal-outlined-hover-bg, $button-normal-outlined-focused-bg, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss index 92f3becb9113..a7c3e05b036e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss @@ -3,7 +3,6 @@ @use "sizes" as *; @use "../sizes" as *; @use "colors" as *; -@use "../colors" as *; @use "../../base/icon_fonts" as *; @use "../../base/button/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss index 9edc5f3e9a08..dd57543bc639 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss index d57d20aec00c..3bdfedea682a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss index 89c53a85429e..00c18f8f4f58 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss @@ -4,3 +4,9 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$card-bg: $base-bg !default; +$card-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$card-shadow: 0 1px 3px color.change($card-shadow-color, $alpha: 0.12), 0 1px 2px color.change($card-shadow-color, $alpha: 0.24) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss index d3c44e95845c..80ffac2498a3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/card"; @@ -8,8 +7,8 @@ // adduse .dx-card { - box-shadow: 0 1px 3px color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px color.change($base-shadow-color, $alpha: 0.24); + box-shadow: $card-shadow; border-radius: $base-border-radius; - background-color: $base-bg; + background-color: $card-bg; margin: 2px 2px 3px; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss index 35250bf909bd..0a2fcf64e886 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss index 4b437aa96502..be45e2bdd63c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss @@ -5,3 +5,6 @@ // adduse $colorbox-preview-icon-color: $base-icon-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$colorbox-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss index befd71dc3a18..c05c87b553f8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../colorView/colors" as *; @@ -52,7 +51,7 @@ .dx-state-disabled & { .dx-icon-colordismiss { - color: $base-foreground-disabled; + color: $colorbox-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss index 88f6747bd46c..45231602b6bc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/colorView/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss index a3401ae9d875..5e81a638e832 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss @@ -16,3 +16,16 @@ $base-dropdown-shadow-color2: null !default; $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.24) !default; $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.28) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$common-accent: $base-accent !default; +$common-bg: $base-bg !default; +$common-border-color: $base-border-color !default; +$common-disabled-opacity: $base-disabled-opacity !default; +$common-font-family: $base-font-family !default; +$common-invalid-color: $base-invalid-color !default; +$common-inverted-text-color: $base-inverted-text-color !default; +$common-success: $base-success !default; +$common-text-color: $base-text-color !default; +$common-typography-bg: $base-typography-bg !default; +$common-typography-color: $typography-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss index c6515af0face..cc8a6a4c5418 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss @@ -12,57 +12,57 @@ // stylelint-disable declaration-no-important .dx-theme-accent-as-text-color { - color: $base-accent !important; + color: $common-accent !important; } .dx-theme-text-color { - color: $base-text-color !important; + color: $common-text-color !important; } .dx-theme-background-color-as-text-color { - color: $base-bg !important; + color: $common-bg !important; } .dx-theme-border-color-as-text-color { - color: $base-border-color !important; + color: $common-border-color !important; } .dx-theme-accent-as-background-color { - background-color: $base-accent !important; - fill: $base-accent !important; + background-color: $common-accent !important; + fill: $common-accent !important; } .dx-theme-text-color-as-background-color { - background-color: $base-text-color !important; - fill: $base-text-color !important; + background-color: $common-text-color !important; + fill: $common-text-color !important; } .dx-theme-background-color { - background-color: $base-bg !important; - fill: $base-bg !important; + background-color: $common-bg !important; + fill: $common-bg !important; } .dx-theme-typography-background-color { - background-color: $base-typography-bg !important; + background-color: $common-typography-bg !important; } .dx-theme-border-color-as-background-color { - background-color: $base-border-color !important; - fill: $base-border-color !important; + background-color: $common-border-color !important; + fill: $common-border-color !important; } .dx-theme-accent-as-border-color { - border-color: $base-accent !important; + border-color: $common-accent !important; } .dx-theme-text-color-as-border-color { - border-color: $base-text-color !important; + border-color: $common-text-color !important; } .dx-theme-background-color-as-border-color { - border-color: $base-bg !important; + border-color: $common-bg !important; } .dx-theme-border-color { - border-color: $base-border-color !important; + border-color: $common-border-color !important; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss index 96a5b23eb2d8..ddb3ad0d8a7e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss @@ -1,24 +1,23 @@ @use "sass:math"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @use "../../base/validation" as *; @use "../list/sizes" as *; -$badge-invalid-bg: $base-invalid-color; +$badge-invalid-bg: $common-invalid-color; @mixin dx-base-typography() { @include dx-base-typography-mixin( - $typography-color, + $common-typography-color, $fluent-base-font-size, - $base-font-family, + $common-font-family, $fluent-line-height ); } -@mixin disabled-widget($opacity: $base-disabled-opacity) { +@mixin disabled-widget($opacity: $common-disabled-opacity) { @include disabled-widget-mixin($opacity); } @@ -42,7 +41,7 @@ $badge-invalid-bg: $base-invalid-color; font-size: $fluent-base-font-size; font-weight: 500; background-color: $badge-invalid-bg; - color: $base-inverted-text-color; + color: $common-inverted-text-color; content: '!'; border-radius: 50%; } @@ -53,7 +52,7 @@ $badge-invalid-bg: $base-invalid-color; font-size: $fluent-valid-badge-font-size; font-weight: bold; font-family: 'DXIcons', sans-serif; - color: $base-success; + color: $common-success; content: '\f005'; @include validation-badge-animation(); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss index 89c53a85429e..b846ea7e3d42 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss @@ -4,3 +4,10 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$contextmenu-foreground-disabled: $base-foreground-disabled !default; +$contextmenu-icon-color: $base-icon-color !default; +$contextmenu-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$contextmenu-shadow: color.change($contextmenu-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($contextmenu-shadow-color, $alpha: 0.14) 0 8px 16px 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss index 8a1179879885..868352179d17 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -55,12 +54,12 @@ } .dx-menu-item-popout { - color: $base-icon-color; + color: $contextmenu-icon-color; } &.dx-state-disabled { .dx-menu-item-popout { - color: $base-foreground-disabled; + color: $contextmenu-foreground-disabled; } } @@ -76,7 +75,7 @@ .dx-submenu { background-color: $menu-popup-bg; border-radius: $fluent-context-menu-border-radius; - box-shadow: color.change($base-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($base-shadow-color, $alpha: 0.14) 0 8px 16px 0; + box-shadow: $contextmenu-shadow; } .dx-menu-separator { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss index f6f8526a41ed..d66891a83cac 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss @@ -19,3 +19,7 @@ $fluent-datagrid-grouppanel-item-bg: null !default; @if $mode == "dark" { $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$datagrid-accent: $base-accent !default; +$datagrid-border-color-disabled: $base-border-color-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss index f83ab930c66b..dc70e8f36274 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss @@ -1,6 +1,6 @@ +@use "../colors" as *; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -48,14 +48,14 @@ padding: $area-field-top-bottom-padding 10px; border-width: 1px; border-style: solid; - border-color: $base-border-color-disabled; + border-color: $datagrid-border-color-disabled; } .dx-block-separator { margin-right: $fluent-grid-base-grouppanel-item-margin; color: $datagrid-columnchooser-item-color; font-weight: $datagrid-columnchooser-font-weight; - background-color: $base-accent; + background-color: $datagrid-accent; } .dx-sort { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss index d7fea79bda17..99e80814314a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss @@ -1,6 +1,5 @@ /* stylelint-disable no-duplicate-selectors */ @use "../colors" as *; -@use "../../colors" as *; @use "../sizes" as *; @use "../../sizes" as *; @use "../../gridBase/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss index 9e127ba14c6e..6ccda238656e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss index 09f3fe4eab0a..5b0e17ea7354 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss @@ -5,7 +5,6 @@ @use "sizes" as *; @use "../sizes" as *; @use "colors" as *; -@use "../colors" as *; @use "../../base/dateRangeBox"; @use "../../base/icon_fonts" as *; @use "../textEditor" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss index 6c463a7d674c..7ce4b398a54c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss @@ -7,3 +7,6 @@ $dateview-shadow-up: 0deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; $dateview-shadow-down: 180deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; $dateview-color: $base-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$dateview-accent: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss index e3e6bf2a0023..b1814e4bcc55 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -91,7 +90,7 @@ $fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $flue .dx-dateview-item-selected { font-size: 1.8em; - color: $base-accent; + color: $dateview-accent; } .dx-dateview-item-selected-frame { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss index 54536ba04aab..df38f4b6a5c2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -1,17 +1,19 @@ @use "sass:color"; @use "../sizes" as *; @use "../colors" as *; +@use "../overlay/colors" as *; @use "../button/colors" as *; @use "../loadIndicator/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $diagram-border-color: $base-border-color !default; $diagram-toolbar-border-color: $base-border-color !default; -$diagram-normal-format-active-bg: color.adjust($button-normal-bg, $lightness: -10%, $space: hsl) !default; -$diagram-default-format-active-bg: color.adjust($button-default-bg, $lightness: -10%, $space: hsl) !default; -$diagram-danger-format-active-bg: color.adjust($button-danger-bg, $lightness: -10%, $space: hsl) !default; -$diagram-success-format-active-bg: color.adjust($button-success-bg, $lightness: -10%, $space: hsl) !default; +$diagram-normal-format-active-bg: ds.$button-outline-color-bg-active !default; +$diagram-default-format-active-bg: ds.$button-contained-color-bg-active !default; +$diagram-danger-format-active-bg: ds.$color-surface-danger-default-active !default; +$diagram-success-format-active-bg: ds.$color-surface-success-default-active !default; $diagram-image-icon-base-color: null !default; $diagram-image-icon-accent-color: null !default; $diagram-toolbox-shape-text-opacity: null !default; @@ -29,3 +31,12 @@ $diagram-toolbox-shape-text-opacity: null !default; $diagram-toolbox-shape-text-opacity: 0.5 !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$diagram-bg: $base-bg !default; +$diagram-danger: $base-danger !default; +$diagram-shadow-color: $base-shadow-color !default; +$diagram-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$diagram-canvas-bg: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl) !default; +$diagram-shadow: 0 1px 8px color.change($diagram-shadow-color, $alpha: 0.175) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss index 0aae29b41745..242168a9d73a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/diagram"; @@ -28,7 +27,7 @@ $diagram-toolbox-title-size: 18px; // stylelint-disable selector-class-pattern .dxdi-control .dxdi-canvas { - background-color: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl); + background-color: $diagram-canvas-bg; .selection-mark, .item-selection-rect, @@ -85,7 +84,7 @@ $diagram-toolbox-title-size: 18px; .dxdi-warning { ellipse { - fill: $base-danger; + fill: $diagram-danger; } } } @@ -140,7 +139,7 @@ $diagram-toolbox-title-size: 18px; &.dx-diagram-fullscreen { - background-color: $base-bg; + background-color: $diagram-bg; } } @@ -151,7 +150,7 @@ $diagram-toolbox-title-size: 18px; .dx-diagram-floating-toolbar-container { background: $overlay-content-bg; - box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + box-shadow: $diagram-shadow; border-radius: $popup-border-radius; padding: 4px; @@ -203,7 +202,7 @@ $diagram-toolbox-title-size: 18px; .dx-diagram-toolbox-popup { & > .dx-overlay-content { - box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 0.175); + box-shadow: $diagram-shadow; } .dx-popup-title { @@ -438,7 +437,7 @@ $diagram-toolbox-title-size: 18px; .dx-icon { font-size: $fluent-diagram-toolbar-icon-size; - color: $base-text-color; + color: $diagram-text-color; } } } @@ -466,7 +465,7 @@ $diagram-toolbox-title-size: 18px; } } -@include diagram-action-icons-mixin($base-text-color, $base-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); +@include diagram-action-icons-mixin($diagram-text-color, $diagram-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); .dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag { @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $popup-title-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss index eed4027371d8..a1455d573384 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/drawer"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss index c26ff37b2271..adb7bf344e97 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss index 004ba591a74d..0393a1fb50e8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss index 25ec11e0e515..9a8a703a5d7b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss index 94e41665cc27..9355f4aa98e9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss index 260d5d323a57..3d0f93acee27 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss @@ -2,7 +2,6 @@ @use "sass:color"; @use "sass:selector"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss index 5f5632bca69f..aa2cd188ab56 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss @@ -32,3 +32,10 @@ $filemanager-progressbox-shadow-color: null !default; $filemanager-progressbox-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$filemanager-accent: $base-accent !default; +$filemanager-bg: $base-bg !default; +$filemanager-danger: $base-danger !default; +$filemanager-inverted-text-color: $base-inverted-text-color !default; +$filemanager-success: $base-success !default; +$filemanager-text-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss index 8e1ce8b4c1db..cee27095492b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/fileManager"; @@ -15,7 +14,7 @@ .dx-filemanager-notification-common { border-color: $filemanager-border-color; - color: $base-danger; + color: $filemanager-danger; } .dx-drawer-shrink .dx-filemanager-progress-panel { @@ -23,7 +22,7 @@ } .dx-filemanager-progress-panel { - background-color: $base-bg; + background-color: $filemanager-bg; .dx-filemanager-progress-panel-title { padding-top: $filemanager-progress-panel-title-padding; @@ -38,8 +37,8 @@ } .dx-filemanager-progress-box-error { - color: $base-inverted-text-color; - background: $base-danger; + color: $filemanager-inverted-text-color; + background: $filemanager-danger; } .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button { @@ -48,7 +47,7 @@ .dx-filemanager-toolbar { padding: 0 10px; - background: $base-bg; + background: $filemanager-bg; min-height: $filemanager-toolbar-height; &.dx-filemanager-file-toolbar, @@ -97,7 +96,7 @@ .dx-filemanager-fileuploader-dropzone-placeholder { border: 2px solid; - border-color: $base-accent; + border-color: $filemanager-accent; } .dx-filemanager-container { @@ -167,7 +166,7 @@ } .dx-filemanager-files-view { - background: $base-bg; + background: $filemanager-bg; &.dx-filemanager-details { .dx-filemanager-details-item-thumbnail { @@ -259,4 +258,4 @@ margin-left: $filemanager-contextmenu-text-item-left-margin; } -@include filemanager-icons-mixin($base-text-color, $base-success, $base-inverted-text-color, $base-danger, $base-inverted-text-color, $filemanager-large-icon-size); +@include filemanager-icons-mixin($filemanager-text-color, $filemanager-success, $filemanager-inverted-text-color, $filemanager-danger, $filemanager-inverted-text-color, $filemanager-large-icon-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss index 4ced7be208c3..c21e7c18ba33 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss @@ -24,3 +24,11 @@ $fileuploader-falename-status-color: $base-label-color !default; * $type color */ $fileuploader-border-color: $base-border-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$fileuploader-danger: $base-danger !default; +$fileuploader-label-color: $base-label-color !default; +$fileuploader-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($fileuploader-shadow-color, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss index 4c703762a455..1a65dde1beb1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -10,7 +9,6 @@ // adduse $fluent-fileuploader-file-wrapper-border-size: 3px; -$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1); .dx-fileuploader-wrapper { padding: $fluent-fileuploader-vertical-padding; @@ -172,12 +170,12 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh .dx-fileuploader-file-size { float: right; padding: $fluent-fileuploader-file-size-margin; - color: $base-label-color; + color: $fileuploader-label-color; } .dx-fileuploader-invalid { .dx-fileuploader-file-status-message { - color: $base-danger; + color: $fileuploader-danger; span { &:first-child { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss index 07f5f8837a22..49a497dce89e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss index 7de005954a02..d8ed45456ae7 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/form"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss index fff71d38bef2..9dde69ff8cde 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss @@ -38,3 +38,6 @@ $gallery-navbutton-hover-color: $base-accent !default; * $type color */ $gallery-navbutton-active-color: $base-accent !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$gallery-accent: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss index d32e3180e335..03ec5af7485a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -106,7 +105,7 @@ } .dx-state-focused.dx-gallery { - border-color: $base-accent; + border-color: $gallery-accent; .dx-gallery-indicator-item-selected { background: $gallery-indicator-focused-bg; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss index 29bb541e04eb..8237a9945b48 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss @@ -28,3 +28,12 @@ $gantt-task-progress-background-color: null !default; $gantt-task-progress-background-color: rgba(255, 255, 255, 0.2) !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$gantt-accent: $base-accent !default; +$gantt-bg: $base-bg !default; +$gantt-border-color: $base-border-color !default; +$gantt-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$gantt-accent-border-color: color.adjust($gantt-accent, $lightness: -10%, $space: hsl) !default; +$gantt-accent-light-bg: color.change($gantt-accent, $alpha: 0.15) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss index ac30f01d6f17..40f26ca462f6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/gantt"; @@ -16,15 +15,15 @@ $gantt-successor-background-color: white; .dx-gantt { border: 1px solid; - border-color: $base-border-color; + border-color: $gantt-border-color; .dx-gantt-toolbar-wrapper { padding: 5px; border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $gantt-border-color; .dx-gantt-toolbar-separator { - border-left-color: $base-border-color; + border-left-color: $gantt-border-color; } .dx-toolbar .dx-toolbar-items-container { @@ -33,7 +32,7 @@ $gantt-successor-background-color: white; } .dx-gantt-view { - background-color: $base-bg; + background-color: $gantt-bg; } .dx-header-row, @@ -49,8 +48,8 @@ $gantt-successor-background-color: white; .dx-gantt-tsa, .dx-gantt-hb, .dx-gantt-vb { - border-color: $base-border-color; - background-color: $base-bg; + border-color: $gantt-border-color; + background-color: $gantt-bg; } } @@ -62,17 +61,17 @@ $gantt-successor-background-color: white; .dx-gantt-tsac, .dx-gantt-tsa { border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $gantt-border-color; } .dx-gantt-hb { border-top: 1px solid; - border-top-color: $base-border-color; + border-top-color: $gantt-border-color; } .dx-gantt-vb { border-left: 1px solid; - border-left-color: $base-border-color; + border-left-color: $gantt-border-color; } .dx-gantt-taskWrapper { @@ -85,7 +84,7 @@ $gantt-successor-background-color: white; } .dx-gantt-task { - background-color: $base-accent; + background-color: $gantt-accent; border-radius: $base-border-radius; .dx-gantt-tPrg { @@ -183,7 +182,7 @@ $gantt-successor-background-color: white; } .dx-gantt-milestone { - background-color: $base-text-color; + background-color: $gantt-text-color; width: $gantt-milestone-size; height: $gantt-milestone-size; } @@ -195,18 +194,18 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-frame { height: 100%; border: 1px solid; - border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-color: $gantt-accent-border-color; border-radius: $base-border-radius; .dx-gantt-task-edit-progress { - border-color: transparent transparent color.adjust($base-accent, $lightness: -10%, $space: hsl) transparent; + border-color: transparent transparent $gantt-accent-border-color transparent; &::before { width: 12px; height: 6px; bottom: -14px; border: 1px solid; - border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-color: $gantt-accent-border-color; } } @@ -230,7 +229,7 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-successor-dependency-l { background: $gantt-successor-background-color; border: 1px solid; - border-color: color.adjust($base-accent, $lightness: -10%, $space: hsl); + border-color: $gantt-accent-border-color; width: $gantt-dependency-successor-size; height: $gantt-dependency-successor-size; margin: auto; @@ -249,7 +248,7 @@ $gantt-successor-background-color: white; } .dx-gantt-task-edit-dependency-line { - background-color: $base-text-color; + background-color: $gantt-text-color; } .dx-gantt-sel { @@ -257,29 +256,29 @@ $gantt-successor-background-color: white; } .dx-gantt-conn-v { - border-left-color: $base-text-color; + border-left-color: $gantt-text-color; } .dx-gantt-conn-h { - border-top-color: $base-text-color; + border-top-color: $gantt-text-color; } .dx-gantt-arrow { border: 5px solid; - border-color: $base-text-color; + border-color: $gantt-text-color; } .dx-gantt-tm { border-left: 1px dashed; - border-left-color: $base-accent; + border-left-color: $gantt-accent; } .dx-gantt-ti { border-left: 1px dashed; - border-left-color: $base-accent; + border-left-color: $gantt-accent; border-right: 1px dashed; - border-right-color: $base-accent; - background-color: color.change($base-accent, $alpha: 0.15); + border-right-color: $gantt-accent; + background-color: $gantt-accent-light-bg; } .dx-gantt-altRow, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss index 26073453edbc..3eb6a6283c2c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss @@ -209,3 +209,10 @@ $datagrid-border: 1px solid !default; :root { --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg}; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$gridbase-accent: $base-accent !default; +$gridbase-border-color: $base-border-color !default; +$gridbase-danger: $base-danger !default; +$gridbase-icon-color: $base-icon-color !default; +$gridbase-success: $base-success !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss index 346f4c8517f1..b7e94557b003 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss @@ -2,7 +2,6 @@ @use "sass:color"; @use "sass:selector"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -751,7 +750,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig @include dx-icon-sizing($fluent-base-icon-size); - color: $base-icon-color; + color: $gridbase-icon-color; } .dx-row.dx-row-focused { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss index 37b6b5f8c909..2cfd224fedcb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss @@ -1,3 +1,4 @@ +@use "../../colors" as *; @use '../../../../base/gridBase/layout/aiChat/mixins' as *; @use '../../../colors' as *; @use '../../../button/colors' as *; @@ -7,10 +8,10 @@ $button-default-bg, $button-default-outlined-hover-bg, ); -@include ai-chat-message-pending($base-accent); -@include ai-chat-message-success($base-success); -@include ai-chat-message-error($base-danger); -@include ai-chat-messagebubble-border($base-border-color); +@include ai-chat-message-pending($gridbase-accent); +@include ai-chat-message-success($gridbase-success); +@include ai-chat-message-error($gridbase-danger); +@include ai-chat-messagebubble-border($gridbase-border-color); @include ai-chat-message-regenerate-button($button-normal-active-bg); @include ai-chat-message-icon($ai-chat-message-icon-size); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss index ab0a39230ccc..6cad4be42474 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss @@ -1,7 +1,6 @@ /* stylelint-disable no-duplicate-selectors */ @use "sass:math"; @use "../colors" as *; -@use "../../colors" as *; @use "../sizes" as *; @use "../../sizes" as *; @use "../../textEditor" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss index 4fb1036c4d05..db2a37a34da6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss @@ -15,3 +15,14 @@ $htmleditor-mention-bg: $base-selected-bg !default; $htmleditor-table-border-color: $base-border-color !default; $htmleditor-fileuploader-input-wrapper-border-color: $base-border-color !default; $htmleditor-fileuploader-input-wrapper-bg-color: $base-typography-bg !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$htmleditor-accent: $base-accent !default; +$htmleditor-bg: $base-bg !default; +$htmleditor-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$htmleditor-cover-bg: color.change($htmleditor-bg, $alpha: 0.4) !default; +$htmleditor-faded-text-color: color.change($htmleditor-text-color, $alpha: 0.8) !default; +$htmleditor-uploader-cover-bg: color.change($htmleditor-border-color, $alpha: 0.8) !default; +$htmleditor-highlighted-row-bg: color.change($htmleditor-accent, $alpha: 0.5) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss index 10c60a1a897c..ea9842636032 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; @@ -49,7 +48,7 @@ left: 1px; right: 1px; z-index: 2; - background-color: color.change($base-bg, $alpha: 0.4); + background-color: $htmleditor-cover-bg; content: ''; pointer-events: none; } @@ -133,11 +132,11 @@ code, .ql-code-block-container { // stylelint-disable-line selector-class-pattern - color: color.change($base-text-color, $alpha: 0.8); + color: $htmleditor-faded-text-color; } blockquote { - color: color.change($base-text-color, $alpha: 0.8); + color: $htmleditor-faded-text-color; border-inline-start-color: $htmleditor-toolbar-border-color; } @@ -278,7 +277,7 @@ } .dx-fileuploader-content { - background-color: color.change($htmleditor-border-color, $alpha: 0.8); + background-color: $htmleditor-uploader-cover-bg; } } } @@ -298,7 +297,7 @@ .dx-table-resize-frame { > .dx-draggable-dragging + .dx-htmleditor-highlighted-column, > .dx-draggable-dragging + .dx-htmleditor-highlighted-row { - background-color: color.change($base-accent, $alpha: 0.5); + background-color: $htmleditor-highlighted-row-bg; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss index 89c53a85429e..c5aa519e3a45 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$icons-scrollview-pulldown-path: $scrollview-pulldown-path !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss index 048a324fbccc..49f37698fa8c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -26,7 +25,7 @@ } .dx-scrollview-pulldown { - background-image: $scrollview-pulldown-path; + background-image: $icons-scrollview-pulldown-path; background-position: 0 0; background-repeat: no-repeat; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss index 6966ae38f168..8e18e21c3b29 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss @@ -77,3 +77,8 @@ $list-group-color: $base-text-color !default; */ $list-expanded-group-color: $list-group-color !default; $list-item-selected-color: $list-normal-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$list-border-color-disabled: $base-border-color-disabled !default; +$list-foreground-disabled: $base-foreground-disabled !default; +$list-inverted-text-color: $base-inverted-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss index 5e06b6480b2b..7152525cae4f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -27,25 +26,25 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; .dx-list-item { opacity: 1; - color: $base-foreground-disabled; + color: $list-foreground-disabled; } } .dx-list-select-all-label { - color: $base-foreground-disabled; + color: $list-foreground-disabled; &::after { - color: $base-border-color-disabled; + color: $list-border-color-disabled; } } .dx-list-item-chevron { - color: $base-foreground-disabled; + color: $list-foreground-disabled; } .dx-list-reorder-handle { &::before { - color: $base-foreground-disabled; + color: $list-foreground-disabled; } } } @@ -479,7 +478,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; .dx-list-slide-menu-button-delete { @include dx-icon(trash); - color: $base-inverted-text-color; + color: $list-inverted-text-color; background-color: $list-menu-button-delete-bg; font-size: $fluent-base-icon-size; display: table-cell; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss index 1e2bbbf5ee4b..b9a938f3c6a2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/loadIndicator" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss index c69a8aafcd70..fdaf77aa3317 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/loadPanel"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss index 308a0a6455a9..2bd30444bcbb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss @@ -7,3 +7,9 @@ $lookup-icon-color: $dropdowneditor-icon-color !default; $lookup-icon-color-active: $dropdowneditor-icon-active-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$lookup-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$lookup-shadow: 0 0 2px 0 color.change($lookup-shadow-color, $alpha: 0.12) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss index c2b0a783278b..bef4b08d024d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -144,7 +143,7 @@ display: block; &::after { - box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12); + box-shadow: $lookup-shadow; background: $overlay-content-bg; border-top-right-radius: $lookup-arrow-border-radius; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss index 7196c391ae63..8497e3322ef6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss @@ -33,3 +33,9 @@ $menu-item-focused-selected-bg: null !default; @if $mode == "dark" { $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$menu-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$menu-focused-shadow: 0 3px 10px color.change($menu-shadow-color, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss index f1321a4c70cc..4e38a14723b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../button/sizes" as *; @@ -86,7 +85,7 @@ &, &.dx-state-focused { - box-shadow: 0 3px 10px color.change($base-shadow-color, $alpha: 0.1); + box-shadow: $menu-focused-shadow; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss index 8b938749100d..588fd3fba2c2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../menu/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss index 361eff4be843..eb9938faba2e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/multiView"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss index b3d2482bd0f6..12aed4db31dc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss @@ -9,3 +9,6 @@ $numberbox-spin-icon-color: $base-spin-icon-color !default; $numberbox-spin-icon-background-hover: $base-hover-bg !default; $numberbox-spin-icon-background-active: $base-active-bg !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$numberbox-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss index 8dceccf2fa97..473dfd1492a8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -64,7 +63,7 @@ &.dx-state-disabled { .dx-numberbox-spin-up-icon, .dx-numberbox-spin-down-icon { - color: $base-foreground-disabled; + color: $numberbox-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss index 1881badf0696..491f1e984e08 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss index a77d83fd12a8..e7c281132d8a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss index 0f07777dabf6..4164db5a46ae 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss @@ -56,3 +56,13 @@ $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; @if $mode == "dark" { $pivotgrid-field-area-box-background-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$pivotgrid-accent: $base-accent !default; +$pivotgrid-border-color-disabled: $base-border-color-disabled !default; +$pivotgrid-shadow-color: $base-shadow-color !default; +$pivotgrid-text-color: $base-text-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($pivotgrid-shadow-color, $alpha: 0.15) !default; +$pivotgrid-area-field-bg: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss index 1293464c8c69..10d088ea7e74 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; @@ -39,15 +38,14 @@ $fluent-pivotgrid-headers-font-size: 14px; $fluent-pivotgrid-area-font-size: 13px; $fluent-pivotgrid-chevron-icon-size: 20px; -$fluent-pivotgrid-drag-header-shadow: 0 3px 4px color.change($base-shadow-color, $alpha: 0.15); $fluent-pivotgridfieldchooser-field-min-height: 36px; .dx-pivotgrid-fields-container { &.dx-drag { .dx-area-field.dx-area-box { - background-color: color.change($pivotgrid-field-area-box-background-color, $alpha: 0.9); + background-color: $pivotgrid-area-field-bg; border: 1px solid; - border-color: $base-border-color-disabled; + border-color: $pivotgrid-border-color-disabled; box-shadow: $fluent-pivotgrid-drag-header-shadow; } } @@ -57,13 +55,13 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; background-color: $pivotgrid-field-area-box-background-color; border-radius: $area-field-border-radius; border: 1px solid; - border-color: $base-border-color-disabled; + border-color: $pivotgrid-border-color-disabled; font-size: $fluent-pivotgrid-headers-font-size; font-weight: $pivotgrid-field-area-box-font-weight; line-height: 20px; .dx-header-filter { - color: $base-accent; + color: $pivotgrid-accent; &.dx-header-filter-empty { color: $pivotgrid-area-color; @@ -103,7 +101,7 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; .dx-grandtotal, .dx-total { - color: $base-text-color; + color: $pivotgrid-text-color; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss index a654b9770ca5..551f8ead140b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../overlay/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss index 6f33bfad8564..3dc25d0c2292 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss index 336b7d3b3de7..93c826d58ca4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss @@ -38,3 +38,6 @@ $progressbar-label-color: $base-text-color !default; @if $mode == "dark" { $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$progressbar-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss index dbcff3a02fbf..923147d4ca41 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -60,7 +59,7 @@ } .dx-progressbar-status { - color: $base-foreground-disabled; + color: $progressbar-foreground-disabled; } .dx-progressbar-animating-container { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss index 89c53a85429e..fcc266385039 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$radiobutton-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss index 5550f3f7539f..a927af349313 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/radioButton/mixins" as *; @@ -43,11 +42,11 @@ .dx-state-readonly { .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } .dx-radiobutton-icon { - border-color: $base-foreground-disabled; + border-color: $radiobutton-foreground-disabled; } .dx-radiobutton-checked { @@ -55,7 +54,7 @@ &.dx-state-focused, &.dx-state-active { .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } } } @@ -133,7 +132,7 @@ &.dx-state-readonly { .dx-radiobutton { .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } } } @@ -141,14 +140,14 @@ .dx-state-disabled { .dx-radiobutton { - color: $base-foreground-disabled; + color: $radiobutton-foreground-disabled; .dx-radiobutton-icon { - border-color: $base-foreground-disabled; + border-color: $radiobutton-foreground-disabled; } .dx-radiobutton-icon-dot { - background-color: $base-foreground-disabled; + background-color: $radiobutton-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss index 61c3887126e9..fa11f4e1723c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/radioGroup/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss index 7f4618192668..81a32d4c3565 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/rangeSlider"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss index 5bb4ce8cc4d9..be4ea8d28285 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../scheduler/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss index bc780273f0e4..72e36b8f5b32 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss index 18a739590733..f7a00b49d6f8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss @@ -126,3 +126,9 @@ $header-panel-cell-date: null !default; $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default; $scheduler-appointment-focus-color: $scheduler-appointment-text-color; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$scheduler-accent: $base-accent !default; +$scheduler-bg: $base-bg !default; +$scheduler-border-color: $base-border-color !default; +$scheduler-inverted-text-color: $base-inverted-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss index a40c6ea98837..4e13eab72723 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../list/colors" as *; @@ -352,7 +351,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; } .dx-scheduler-header-panel-cell-date:last-child { - color: $base-inverted-text-color; + color: $scheduler-inverted-text-color; background-color: $scheduler-current-time-cell-color; display: inline-flex; align-items: center; @@ -848,7 +847,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; position: absolute; width: 6px; height: 100%; - background-color: $base-accent; + background-color: $scheduler-accent; } @container (max-width: 8px) { @@ -889,7 +888,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-date-table-row, .dx-scheduler-time-panel-row { - box-shadow: inset 0 -1px 0 0 $base-border-color; + box-shadow: inset 0 -1px 0 0 $scheduler-border-color; } .dx-scheduler-time-panel-cell { @@ -978,7 +977,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; .dx-scheduler-appointment-tooltip-wrapper, .dx-scheduler-overlay-panel { .dx-overlay-content { - background-color: $base-bg; + background-color: $scheduler-bg; .dx-popup-content { padding: 0; @@ -989,7 +988,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; margin-bottom: 0; margin-top: 0; border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $scheduler-border-color; &:last-of-type { border-bottom-left-radius: $tooltip-border-radius; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss index 447aee0272c2..2a83ace0c3af 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../scrollable/colors" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss index 6015612b4384..798297e2159f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/scrollable"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss index 168fd4424cc6..45dffa2b460b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/sizes" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss index b9687c354af1..7872e347b44d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss @@ -31,3 +31,8 @@ $fluent-slider-bar-disabled-bg: $base-background-disabled !default; * $type color */ $fluent-slider-tooltip-color: $base-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$slider-border-color: $base-border-color !default; +$slider-element-bg: $base-element-bg !default; +$slider-theme-invalid-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss index 4e8dca40441c..ca6ac16b4c50 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/slider"; @@ -41,8 +40,8 @@ border-radius: $fluent-slider-radius; border-width: 1px; border-style: solid; - border-color: $base-border-color; - background-color: $base-element-bg; + border-color: $slider-border-color; + background-color: $slider-element-bg; &::after { position: absolute; @@ -53,7 +52,7 @@ border-radius: $fluent-slider-radius; border-width: 3px; border-style: solid; - border-color: $base-element-bg; + border-color: $slider-element-bg; } &.dx-state-hover { @@ -118,7 +117,7 @@ .dx-invalid { .dx-slider-handle { &::after { - background-color: $base-invalid-color; + background-color: $slider-theme-invalid-color; } &.dx-state-hover { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss index b8ace30a01fb..0180740cfc44 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss @@ -1,6 +1,6 @@ +@use "../colors" as *; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/sortable" as * with ( diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss index 635ec575c479..c9555eef47d2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -14,3 +14,8 @@ $speed-dial-action-shading-color: $overlay-shader-bg !default; $speed-dial-action-bg: $button-normal-bg !default; $speed-dial-action-hover-bg: $button-normal-hover-bg !default; $speed-dial-action-active-bg: $button-normal-active-bg !default; + +// The shared base mixin derives hover/active via color.adjust() from this +// value, so it must stay a Sass color (theme layer) until the mixin accepts +// ready-made hover/active arguments — see TOKENS_MIGRATION.md. +$speed-dial-action-main-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss index 3405d0583b4b..b80811fb2b14 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/speedDialAction" as *; @@ -26,7 +25,7 @@ $fluent-fa-button-label-padding: 4px 8px; $speed-dial-action-hover-bg, $speed-dial-action-active-bg, $speed-dial-action-label-shadow, - $button-default-bg, + $speed-dial-action-main-bg, $button-default-color ); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss index 2293317c0861..d54687966826 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss index 1c3ce7709513..476b6c48405d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/splitterBar"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss index 6a9ab72d97c7..ec250baf6f5e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss @@ -1,6 +1,5 @@ @use "../../base/stepper"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/stepper/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss index 2f117d4e3bca..6684e06b0f92 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss @@ -43,3 +43,5 @@ $switch-invalid-color: $base-invalid-color !default; $switch-invalid-color-hover: $base-invalid-color-hover !default; $switch-invalid-color-focused: $base-invalid-color-selected !default; +// Color computations hoisted from style files (phase 0.5 layer normalization) +$switch-handle-on-shadow-color: color.change($switch-handle-on-bg, $alpha: 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss index 6c85de952e61..0342b65ea9b5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; @@ -10,7 +9,7 @@ // adduse $fluent-switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1); -$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1); +$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius $switch-handle-on-shadow-color; $fluent-switch-shadow: none; @include dx-switch( diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss index 89c53a85429e..e25e238cb8cc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$tabpanel-border-color: $base-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss index 31bfdffe7e83..e9478f24aa55 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss @@ -1,7 +1,6 @@ @use "sass:color"; @use "sass:selector"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/tabPanel"; @@ -28,7 +27,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-bottom: 1px solid; - border-bottom-color: $base-border-color; + border-bottom-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-bottom: none; @@ -41,7 +40,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-top: 1px solid; - border-top-color: $base-border-color; + border-top-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-top: none; @@ -54,7 +53,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-right: 1px solid; - border-right-color: $base-border-color; + border-right-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-right: none; @@ -67,7 +66,7 @@ > .dx-tabpanel-tabs { .dx-tabs { border-left: 1px solid; - border-left-color: $base-border-color; + border-left-color: $tabpanel-border-color; @at-root #{selector.append(".dx-empty-collection", &)} { border-left: none; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss index 532cea56befe..43e5c7081da1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss @@ -42,3 +42,6 @@ $tagbox-tag-disabled: $base-background-disabled !default; @if $mode == "dark" { $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$tagbox-border-color-disabled: $base-border-color-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss index b4c7f569023d..d83c4da77b89 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -112,7 +111,7 @@ border-radius: $tagbox-tag-border-radius; border-width: 1px; border-style: solid; - border-color: $base-border-color-disabled; + border-color: $tagbox-border-color-disabled; } .dx-tag-remove-button { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss index 28d9c151038d..2164f02629b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/textArea"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss index 7b43f685dc7d..58dc6816d51a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss @@ -3,3 +3,6 @@ @use "../colors" as *; // adduse + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$textbox-foreground-disabled: $base-foreground-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss index 321d236788e3..ddee8237db31 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -57,7 +56,7 @@ &.dx-state-disabled { .dx-icon-search { - color: $base-foreground-disabled; + color: $textbox-foreground-disabled; } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss index 9b1c0e6ee6f6..09ceb66cdc6e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss @@ -151,3 +151,7 @@ $texteditor-label-color-focused: $base-accent; --dx-texteditor-color-text: #{$texteditor-color}; --dx-texteditor-color-label: #{$texteditor-label-color}; } + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$texteditor-foreground-disabled: $base-foreground-disabled !default; +$texteditor-invalid-color: $base-invalid-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss index 3ce252791d4e..5b1105e210d5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; @@ -311,7 +310,7 @@ $fluent-editor-border-width: 1px; &.dx-invalid { .dx-texteditor-label { - color: $base-invalid-color; + color: $texteditor-invalid-color; } } } @@ -323,7 +322,7 @@ $fluent-editor-border-width: 1px; &.dx-invalid { .dx-texteditor-label { - color: $base-invalid-color; + color: $texteditor-invalid-color; } } } @@ -417,7 +416,7 @@ $fluent-editor-border-width: 1px; &.dx-state-disabled { .dx-icon-clear { - color: $base-foreground-disabled; + color: $texteditor-foreground-disabled; } } @@ -492,7 +491,7 @@ $fluent-editor-border-width: 1px; } .dx-invalid & { - color: $base-invalid-color; + color: $texteditor-invalid-color; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss index e59c21678b65..801026d9376d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/tileView"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss index 8e816681beee..eb7fab3899d7 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss @@ -4,3 +4,7 @@ // adduse $clock-digits-color: $base-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$timeview-inverted-bg: $base-inverted-bg !default; +$timeview-typography-bg: $base-typography-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss index f9990c033991..8a2e7c9f675b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../textEditor/sizes" as *; @@ -10,7 +9,7 @@ // adduse -@include clock-action-icons-mixin($base-inverted-bg, $base-typography-bg, $clock-digits-color); +@include clock-action-icons-mixin($timeview-inverted-bg, $timeview-typography-bg, $clock-digits-color); .dx-timeview { height: auto; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss index 057b1a0013f5..8a6ea76ec308 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss @@ -62,3 +62,9 @@ $toast-success-bg: $base-success !default; * $type color */ $toast-success-color: $base-inverted-text-color !default; + +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$toast-shadow-color: $base-shadow-color !default; + +// Color computations hoisted from style files (phase 0.5 layer normalization) +$toast-shadow: 0 0 2px 0 color.change($toast-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($toast-shadow-color, $alpha: 0.14) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss index b6309f525428..6b13a7eb172e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/toast"; @@ -18,7 +17,7 @@ font-weight: 400; padding: $fluent-toast-content-vertical-padding $fluent-toast-content-horizontal-padding; border-radius: $toast-border-radius; - box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14); + box-shadow: $toast-shadow; min-height: $fluent-toast-height; display: flex; align-items: center; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss index bb487960ea0d..4b44754d9a76 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/icon_fonts" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss index 35f6749d4595..df2aaf07ed72 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/tooltip"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss index 36b942794d2e..1444df53d94e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss @@ -1,7 +1,7 @@ +@use "../colors" as *; @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/mixins" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss index b8d6b1e6ad7a..86ee70ac973a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss @@ -44,3 +44,5 @@ $treeview-checkbox-accent-color-focused: null !default; $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default; } +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$treeview-text-color: $base-text-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss index 6dd170a8e874..edbfea30a6ba 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss @@ -1,7 +1,6 @@ @use "sass:math"; @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/treeView" as *; @@ -123,7 +122,7 @@ ); @include treeview-checkbox( $fluent-checkbox-container-size, - $base-text-color, + $treeview-text-color, $checkbox-border-color-focused, $treeview-item-selected-color, $treeview-item-selected-bg, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss index 89c53a85429e..9e49cedb81af 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss @@ -4,3 +4,6 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$typography-typography-bg: $base-typography-bg !default; +$typography-typography-link-color: $typography-link-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss index 64c9398a5c00..bb1bd4ed10c6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; @@ -9,7 +8,7 @@ // adduse .dx-theme-dxdsfluent-typography { - background-color: $base-typography-bg; + background-color: $typography-typography-bg; @include dx-base-typography(); @@ -65,6 +64,6 @@ } a { - color: $typography-link-color; + color: $typography-typography-link-color; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss index 16829ffb77c6..194b1e859c8f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../../base/validation" as *; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss index 89c53a85429e..f4d78c6bae1b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss @@ -4,3 +4,5 @@ // adduse +// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) +$widget-bg: $base-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss index f22138c1e536..76c11fdf18c5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss @@ -1,6 +1,5 @@ @use "sass:color"; @use "colors" as *; -@use "../colors" as *; @use "sizes" as *; @use "../sizes" as *; @use "../common/mixins" as *; @@ -24,5 +23,5 @@ } .dx-surface { - background-color: $base-bg; + background-color: $widget-bg; } diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts index f17dc78bf28b..6a0588159061 100644 --- a/packages/devextreme-scss/tests/unused-elements.test.ts +++ b/packages/devextreme-scss/tests/unused-elements.test.ts @@ -49,7 +49,9 @@ const removeAllCommentsFromContent = (content: string): string => content const extractVariables = (filePath: string): string[] => { const content = removeAllCommentsFromContent(readFileSync(filePath, 'utf8')); - const regex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g'); + // `ds.$…` references point to the generated design-tokens module + // (scss/_design-system/variables/_ds.scss) and are not theme-local variables. + const regex = new RegExp(`(? Date: Fri, 17 Jul 2026 11:07:42 +0400 Subject: [PATCH 21/27] migrate texteditors --- e2e/testcafe-devextreme/helpers/themeUtils.ts | 2 +- .../widgets/dxdsfluent/checkBox/_colors.scss | 28 +++---- .../dxdsfluent/speedDialAction/_colors.scss | 4 +- .../widgets/dxdsfluent/textBox/_colors.scss | 6 +- .../dxdsfluent/textEditor/_colors.scss | 82 +++++-------------- 5 files changed, 37 insertions(+), 85 deletions(-) diff --git a/e2e/testcafe-devextreme/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts index 9e8e738e159b..7677b96181f5 100644 --- a/e2e/testcafe-devextreme/helpers/themeUtils.ts +++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts @@ -18,7 +18,7 @@ export const getCurrentTheme = async (t: TestController): Promise => { export const isMaterial = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('material'); -export const isFluent = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('fluent'); +export const isFluent = (): boolean => /^(dxds)?fluent/.test(process.env.theme ?? defaultThemeName); export const isMaterialBased = (): boolean => isMaterial() || isFluent(); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss index f36f4d5b4fe0..720f4b5c88ec 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss @@ -1,22 +1,20 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$checkbox-border-color: $base-border-color-accessible !default; -$checkbox-border-color-hover: $base-border-color-accessible-hover !default; -$checkbox-border-color-active: $base-border-color-accessible-focused !default; +$checkbox-border-color: ds.$checkbox-color-unchecked-default-border-rest !default; +$checkbox-border-color-hover: ds.$checkbox-color-unchecked-default-border-hovered !default; +$checkbox-border-color-active: ds.$checkbox-color-unchecked-default-border-active !default; -$checkbox-foreground-color: $base-element-bg !default; +$checkbox-foreground-color: ds.$checkbox-color-checked-default-icon-rest !default; -$checkbox-accent-color: $base-accent !default; -$checkbox-accent-color-hover: $base-accent-hover !default; -$checkbox-accent-color-focused: $base-accent-active !default; +$checkbox-accent-color: ds.$checkbox-color-checked-default-bg-rest !default; +$checkbox-accent-color-hover: ds.$checkbox-color-checked-default-bg-hovered !default; +$checkbox-accent-color-focused: ds.$checkbox-color-checked-default-bg-active !default; -$checkbox-invalid-color: $base-invalid-color !default; -$checkbox-invalid-color-hover: $base-invalid-color-hover !default; -$checkbox-invalid-color-focused: $base-invalid-color-selected !default; +$checkbox-invalid-color: ds.$color-border-danger-default-rest !default; +$checkbox-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$checkbox-invalid-color-focused: ds.$color-border-danger-default-hovered !default; -$checkbox-border-color-disabled: $base-border-color-disabled !default; -$checkbox-foreground-disabled-color: $base-foreground-disabled !default; +$checkbox-border-color-disabled: ds.$checkbox-color-unchecked-default-border-disabled !default; +$checkbox-foreground-disabled-color: ds.$checkbox-color-checked-default-icon-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss index c9555eef47d2..939834ec73a0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -15,7 +15,5 @@ $speed-dial-action-bg: $button-normal-bg !default; $speed-dial-action-hover-bg: $button-normal-hover-bg !default; $speed-dial-action-active-bg: $button-normal-active-bg !default; -// The shared base mixin derives hover/active via color.adjust() from this -// value, so it must stay a Sass color (theme layer) until the mixin accepts -// ready-made hover/active arguments — see TOKENS_MIGRATION.md. +// Stays a Sass color: the shared base mixin derives hover/active from it via color.adjust() — see TOKENS_MIGRATION.md $speed-dial-action-main-bg: $base-accent !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss index 58dc6816d51a..b9490fd421f6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss @@ -1,8 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$textbox-foreground-disabled: $base-foreground-disabled !default; +$textbox-foreground-disabled: ds.$text-input-color-default-content-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss index 09ceb66cdc6e..2711208782d6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss @@ -1,6 +1,5 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,19 +7,19 @@ * $name 10. Text color * $type color */ -$texteditor-color: null !default; +$texteditor-color: ds.$text-input-color-default-content-rest !default; /** * $name 20. Placeholder text color * $type color */ -$texteditor-placeholder-color: null !default; +$texteditor-placeholder-color: ds.$text-content-color-default-placeholder-rest !default; /** * $name 30. Outlined background color * $type color */ -$texteditor-outlined-bg: $base-element-bg !default; +$texteditor-outlined-bg: ds.$text-input-color-default-bg-rest !default; /** * $name 31. Outlined hovered background color @@ -38,7 +37,7 @@ $texteditor-outlined-bg-focused: $texteditor-outlined-bg !default; * $name 40. Filled background color * $type color */ -$texteditor-filled-bg: null !default; +$texteditor-filled-bg: ds.$color-surface-neutral-deep-rest !default; /** * $name 50. Underlined background color @@ -62,76 +61,35 @@ $texteditor-underlined-bg-focused: $texteditor-underlined-bg !default; * $name 60. Border color * $type color */ -$texteditor-border-color: $base-border-color !default; -$texteditor-border-color-hover: $base-border-color-hover !default; -$texteditor-border-color-focused: $base-border-color-focused !default; +$texteditor-border-color: ds.$text-input-color-default-border-rest !default; +$texteditor-border-color-hover: ds.$text-input-color-default-border-hovered !default; +$texteditor-border-color-focused: ds.$text-input-color-default-border-active !default; /** * $name 70. Bottom border color * $type color */ -$texteditor-border-bottom-color: $base-border-color-accessible !default; -$texteditor-border-bottom-color-hover: null !default; -$texteditor-border-bottom-color-focused: null !default; +$texteditor-border-bottom-color: ds.$text-input-color-default-line-rest !default; +$texteditor-border-bottom-color-hover: ds.$text-input-color-default-line-hovered !default; +$texteditor-border-bottom-color-focused: ds.$text-input-color-default-line-hovered !default; /** * $name 80. Focused state indicator color * $type color */ -$texteditor-indicator-border-color: $base-accent !default; +$texteditor-indicator-border-color: ds.$text-input-color-default-line-focused !default; -$texteditor-button-clear-icon-color: $base-icon-color !default; -$texteditor-invalid-focused-border-color: $base-invalid-color-hover !default; -$texteditor-invalid-faded-border-color: $base-invalid-color !default; -$texteditor-border-color-disabled: $base-border-color-disabled !default; -$texteditor-disabled-text-color: $base-foreground-disabled !default; +$texteditor-button-clear-icon-color: ds.$color-content-neutral-subdued-rest !default; +$texteditor-invalid-focused-border-color: ds.$color-border-danger-default-hovered !default; +$texteditor-invalid-faded-border-color: ds.$text-input-color-invalid-border-rest !default; +$texteditor-border-color-disabled: ds.$text-input-color-default-border-disabled !default; +$texteditor-disabled-text-color: ds.$text-input-color-default-content-disabled !default; $texteditor-input-border-radius: $base-border-radius !default; $texteditor-label-transition: font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms, top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; -@if $mode == "light" { - @if $color == "blue" { - $texteditor-color: $base-text-color !default; - $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default; - $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default; - } - - @if $color == "saas" { - $texteditor-color: rgba(66, 81, 118, 1) !default; - $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default; - $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: rgba(243, 245, 248, 1) !default; - } - - $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default; - $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default; - $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default; - $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default; -} - - -@if $mode == "dark" { - @if $color == "blue" { - $texteditor-outlined-bg: $base-element-bg !default; - $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default; - } - - @if $color == "saas" { - $texteditor-outlined-bg: rgba(20, 30, 40, 1) !default; - $texteditor-filled-bg: rgba(50, 60, 75, 1) !default; - } - - $texteditor-color: $base-text-color !default; - $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default; - $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default; - $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default; - $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default; - $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default; -} - /** * $name 41. Filled hovered background color * $type color @@ -145,7 +103,7 @@ $texteditor-filled-bg-hover: $texteditor-filled-bg !default; $texteditor-filled-bg-focused: $texteditor-filled-bg !default; $texteditor-label-color: $texteditor-placeholder-color; -$texteditor-label-color-focused: $base-accent; +$texteditor-label-color-focused: ds.$color-content-primary-default-rest; :root { --dx-texteditor-color-text: #{$texteditor-color}; @@ -153,5 +111,5 @@ $texteditor-label-color-focused: $base-accent; } // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$texteditor-foreground-disabled: $base-foreground-disabled !default; -$texteditor-invalid-color: $base-invalid-color !default; +$texteditor-foreground-disabled: ds.$text-input-color-default-content-disabled !default; +$texteditor-invalid-color: ds.$text-input-color-invalid-border-rest !default; From d6078f424e96022b1dbbfbf373569a3a3a17974b Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 00:11:04 +0400 Subject: [PATCH 22/27] add sizing support --- .../utils/visual-tests/helpers/theme-utils.js | 2 +- .../scss/widgets/base/_icon_fonts.scss | 34 ++- .../scss/widgets/base/_mixins.scss | 3 +- .../scss/widgets/base/_speedDialAction.scss | 18 +- .../scss/widgets/base/calendar/_mixins.scss | 3 +- .../base/cardView/header_panel/_index.scss | 4 +- .../chat/layout/chat-fileview/_mixins.scss | 4 +- .../_mixins.scss | 4 +- .../chat/layout/chat-messagelist/_mixins.scss | 3 +- .../scss/widgets/base/diagram/_mixins.scss | 35 ++- .../widgets/base/dropDownEditor/_mixins.scss | 5 +- .../scss/widgets/base/pivotGrid/_index.scss | 3 +- .../widgets/base/radioButton/_mixins.scss | 3 +- .../widgets/base/scheduler/views/_index.scss | 5 +- .../scss/widgets/base/switch/_mixins.scss | 13 +- .../scss/widgets/base/textEditor/_mixins.scss | 27 +- .../widgets/base/treeList/_expandable.scss | 5 +- .../scss/widgets/base/treeView/_index.scss | 3 +- .../scss/widgets/dxdsfluent/_sizes.scss | 43 +-- .../widgets/dxdsfluent/accordion/_sizes.scss | 23 +- .../dxdsfluent/actionSheet/_sizes.scss | 3 +- .../scss/widgets/dxdsfluent/badge/_sizes.scss | 13 +- .../widgets/dxdsfluent/button/_mixins.scss | 4 +- .../widgets/dxdsfluent/button/_sizes.scss | 17 +- .../widgets/dxdsfluent/calendar/_sizes.scss | 19 +- .../widgets/dxdsfluent/cardView/_sizes.scss | 151 +++++----- .../scss/widgets/dxdsfluent/chat/_sizes.scss | 171 +++++------ .../widgets/dxdsfluent/checkBox/_sizes.scss | 17 +- .../widgets/dxdsfluent/colorBox/_index.scss | 2 +- .../widgets/dxdsfluent/colorBox/_sizes.scss | 11 +- .../widgets/dxdsfluent/colorView/_sizes.scss | 31 +- .../widgets/dxdsfluent/common/_mixins.scss | 6 +- .../widgets/dxdsfluent/common/_sizes.scss | 17 +- .../dxdsfluent/contextMenu/_sizes.scss | 15 +- .../widgets/dxdsfluent/dataGrid/_sizes.scss | 13 +- .../widgets/dxdsfluent/dateBox/_sizes.scss | 7 +- .../dxdsfluent/dateRangeBox/_sizes.scss | 5 +- .../widgets/dxdsfluent/dateView/_index.scss | 4 +- .../widgets/dxdsfluent/dateView/_sizes.scss | 5 +- .../widgets/dxdsfluent/diagram/_index.scss | 4 +- .../widgets/dxdsfluent/diagram/_sizes.scss | 73 ++--- .../dxdsfluent/dropDownButton/_sizes.scss | 13 +- .../dxdsfluent/dropDownEditor/_index.scss | 10 +- .../dxdsfluent/dropDownEditor/_sizes.scss | 9 +- .../dxdsfluent/dropDownMenu/_sizes.scss | 5 +- .../widgets/dxdsfluent/fieldset/_index.scss | 2 +- .../widgets/dxdsfluent/fieldset/_sizes.scss | 29 +- .../dxdsfluent/fileManager/_index.scss | 16 +- .../dxdsfluent/fileManager/_sizes.scss | 53 ++-- .../dxdsfluent/fileUploader/_index.scss | 10 +- .../dxdsfluent/fileUploader/_sizes.scss | 35 +-- .../dxdsfluent/filterBuilder/_index.scss | 2 +- .../dxdsfluent/filterBuilder/_sizes.scss | 23 +- .../scss/widgets/dxdsfluent/form/_sizes.scss | 43 +-- .../widgets/dxdsfluent/gallery/_index.scss | 8 +- .../widgets/dxdsfluent/gallery/_sizes.scss | 7 +- .../scss/widgets/dxdsfluent/gantt/_index.scss | 10 +- .../scss/widgets/dxdsfluent/gantt/_sizes.scss | 21 +- .../widgets/dxdsfluent/gridBase/_index.scss | 28 +- .../widgets/dxdsfluent/gridBase/_sizes.scss | 135 ++++----- .../dxdsfluent/gridBase/_variables.scss | 6 +- .../dxdsfluent/gridBase/layout/cell.scss | 16 +- .../widgets/dxdsfluent/htmlEditor/_index.scss | 8 +- .../widgets/dxdsfluent/htmlEditor/_sizes.scss | 41 +-- .../widgets/dxdsfluent/informer/_sizes.scss | 17 +- .../scss/widgets/dxdsfluent/list/_index.scss | 10 +- .../scss/widgets/dxdsfluent/list/_sizes.scss | 31 +- .../widgets/dxdsfluent/loadPanel/_sizes.scss | 7 +- .../widgets/dxdsfluent/lookup/_index.scss | 10 +- .../widgets/dxdsfluent/lookup/_sizes.scss | 19 +- .../scss/widgets/dxdsfluent/menu/_sizes.scss | 5 +- .../widgets/dxdsfluent/menuBase/_sizes.scss | 15 +- .../widgets/dxdsfluent/numberBox/_sizes.scss | 7 +- .../widgets/dxdsfluent/pagination/_sizes.scss | 25 +- .../widgets/dxdsfluent/pivotGrid/_sizes.scss | 41 +-- .../widgets/dxdsfluent/popup/_colors.scss | 2 +- .../scss/widgets/dxdsfluent/popup/_index.scss | 2 +- .../scss/widgets/dxdsfluent/popup/_sizes.scss | 41 +-- .../dxdsfluent/progressBar/_sizes.scss | 9 +- .../dxdsfluent/radioButton/_sizes.scss | 11 +- .../widgets/dxdsfluent/radioGroup/_sizes.scss | 9 +- .../dxdsfluent/rangeSlider/_index.scss | 2 +- .../dxdsfluent/recurrenceEditor/_sizes.scss | 13 +- .../widgets/dxdsfluent/scheduler/_index.scss | 8 +- .../widgets/dxdsfluent/scheduler/_sizes.scss | 277 +++++++++--------- .../widgets/dxdsfluent/scrollView/_index.scss | 2 +- .../widgets/dxdsfluent/scrollable/_sizes.scss | 5 +- .../widgets/dxdsfluent/slider/_index.scss | 18 +- .../widgets/dxdsfluent/slider/_sizes.scss | 33 ++- .../dxdsfluent/speedDialAction/_sizes.scss | 17 +- .../widgets/dxdsfluent/splitter/_sizes.scss | 3 +- .../widgets/dxdsfluent/stepper/_sizes.scss | 25 +- .../widgets/dxdsfluent/switch/_index.scss | 2 +- .../widgets/dxdsfluent/switch/_sizes.scss | 21 +- .../dxdsfluent/tabs/mixins/_index.scss | 4 +- .../dxdsfluent/tabs/variables/_sizes.scss | 51 ++-- .../widgets/dxdsfluent/tagBox/_index.scss | 10 +- .../widgets/dxdsfluent/tagBox/_sizes.scss | 41 +-- .../widgets/dxdsfluent/textArea/_index.scss | 4 +- .../widgets/dxdsfluent/textArea/_sizes.scss | 5 +- .../widgets/dxdsfluent/textBox/_sizes.scss | 5 +- .../widgets/dxdsfluent/textEditor/_index.scss | 12 +- .../widgets/dxdsfluent/textEditor/_sizes.scss | 67 ++--- .../widgets/dxdsfluent/timeView/_sizes.scss | 7 +- .../scss/widgets/dxdsfluent/toast/_sizes.scss | 15 +- .../widgets/dxdsfluent/toolbar/_index.scss | 2 +- .../widgets/dxdsfluent/toolbar/_mixins.scss | 2 +- .../widgets/dxdsfluent/toolbar/_sizes.scss | 11 +- .../widgets/dxdsfluent/tooltip/_sizes.scss | 13 +- .../widgets/dxdsfluent/treeList/_sizes.scss | 11 +- .../widgets/dxdsfluent/treeView/_index.scss | 2 +- .../widgets/dxdsfluent/treeView/_sizes.scss | 51 ++-- .../widgets/dxdsfluent/typography/_sizes.scss | 49 ++-- .../widgets/dxdsfluent/validation/_sizes.scss | 23 +- 114 files changed, 1267 insertions(+), 1163 deletions(-) diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js index 66f6175a0763..4d3fc5ae191d 100644 --- a/apps/demos/utils/visual-tests/helpers/theme-utils.js +++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js @@ -36,7 +36,7 @@ export async function testScreenshot( const finalOptions = { ...comparisonOptions, - ...themeOptions, + // ...themeOptions, }; await t diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss index 2b8b813a092e..23d99867f954 100644 --- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss +++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:map"; +@use "sass:meta"; @use "sass:selector"; .dx-icon-plus, @@ -213,9 +214,20 @@ } @mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) { - $icon-paddings-dirty: $container-size - $icon-size; - $icon-paddings: $icon-paddings-dirty - $borders-size; - $icon-padding: math.floor(math.div($icon-paddings, 2)); + $icon-padding: null; + $icon-line-height: null; + + @if meta.type-of($icon-size) == number and meta.type-of($container-size) == number and meta.type-of($borders-size) == number { + $icon-paddings-dirty: $container-size - $icon-size; + $icon-paddings: $icon-paddings-dirty - $borders-size; + $icon-padding: math.floor(math.div($icon-paddings, 2)); + $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); + $icon-line-height: $icon-size; + } // Geometry width: $container-size; @@ -231,10 +243,20 @@ // Icon as font font-size: $icon-size; text-align: center; - line-height: $container-size - $icon-paddings-dirty; + line-height: $icon-line-height; } @mixin dx-icon-font-centered-sizing($icon-size, $position: absolute) { + $icon-center-offset: null; + + @if meta.type-of($icon-size) == number { + $icon-center-offset: math.div(-$icon-size, 2); + } @else { + + // Token-based themes pass var()/calc() values — the derivation moves to CSS + $icon-center-offset: calc(#{$icon-size} / -2); + } + font-size: $icon-size; text-align: center; line-height: $icon-size; @@ -244,9 +266,9 @@ display: block; width: $icon-size; top: 50%; - margin-top: math.div(-$icon-size, 2); + margin-top: $icon-center-offset; left: 50%; - margin-left: math.div(-$icon-size, 2); + margin-left: $icon-center-offset; } @if $position == relative { diff --git a/packages/devextreme-scss/scss/widgets/base/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/_mixins.scss index a560cb644ca7..364fc76ef018 100644 --- a/packages/devextreme-scss/scss/widgets/base/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; // stylelint-disable selector-class-pattern @@ -128,7 +129,7 @@ pointer-events: none; position: absolute; top: 50%; - margin-top: math.div(-$indicator-size, 2); + margin-top: if(meta.type-of($indicator-size) == number, math.div(-$indicator-size, 2), calc(#{$indicator-size} / -2)); width: $indicator-size; height: $indicator-size; } diff --git a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss index 54d89276659b..84afb19202f4 100644 --- a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss +++ b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @use "sass:color"; .dx-fa-button .dx-overlay-content { @@ -23,6 +24,11 @@ $button-default-bg, $button-default-color ) { + $fa-main-radius: if(meta.type-of($main-action-button-size) == number, math.div($main-action-button-size, 2), calc(#{$main-action-button-size} / 2)); + $fa-action-radius: if(meta.type-of($action-button-size) == number, math.div($action-button-size, 2), calc(#{$action-button-size} / 2)); + $fa-main-icon-padding: if(meta.type-of($main-action-button-size) == number and meta.type-of($icon-size) == number, math.div($main-action-button-size - $icon-size, 2), calc((#{$main-action-button-size} - #{$icon-size}) / 2)); + $fa-action-icon-padding: if(meta.type-of($action-button-size) == number and meta.type-of($icon-size) == number, math.div($action-button-size - $icon-size, 2), calc((#{$action-button-size} - #{$icon-size}) / 2)); + .dx-fa-button { &.dx-fa-button-main { .dx-overlay-shader { @@ -35,7 +41,7 @@ background-color: $button-default-bg; color: $button-default-color; overflow: visible; - border-radius: math.div($main-action-button-size, 2); + border-radius: $fa-main-radius; box-shadow: $speed-dial-action-shadow; &.dx-state-hover { @@ -56,7 +62,7 @@ .dx-fa-button-icon, .dx-fa-button-icon-close { - padding: math.div($main-action-button-size - $icon-size, 2); + padding: $fa-main-icon-padding; box-shadow: none; background-color: transparent; } @@ -74,7 +80,7 @@ } .dx-inkripple { - border-radius: math.div($main-action-button-size, 2); + border-radius: $fa-main-radius; } } @@ -85,7 +91,7 @@ .dx-fa-button-icon, .dx-fa-button-icon-close { - padding: math.div($main-action-button-size - $icon-size, 2) 0 math.div($main-action-button-size - $icon-size, 2) math.div($main-action-button-size - $icon-size, 2); + padding: $fa-main-icon-padding 0 $fa-main-icon-padding $fa-main-icon-padding; } } } @@ -99,7 +105,7 @@ .dx-fa-button-icon, .dx-fa-button-icon-close { - padding: math.div($action-button-size - $icon-size, 2); + padding: $fa-action-icon-padding; width: $icon-size; height: $icon-size; box-sizing: content-box; @@ -175,7 +181,7 @@ .dx-inkripple { overflow: hidden; - border-radius: math.div($action-button-size, 2); + border-radius: $fa-action-radius; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss index 3e6de72eca09..978c5ae6ade0 100644 --- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:color"; +@use "sass:meta"; @mixin dx-calendar-mixin( $calendar-bg, @@ -16,7 +17,7 @@ gap: $calendar-element-padding; &.dx-calendar-with-footer { - height: $calendar-height + $calendar-element-padding + $footer-button-height; + height: if(meta.type-of($calendar-height) == number and meta.type-of($calendar-element-padding) == number and meta.type-of($footer-button-height) == number, $calendar-height + $calendar-element-padding + $footer-button-height, calc(#{$calendar-height} + #{$calendar-element-padding} + #{$footer-button-height})); } &.dx-calendar-multiview { diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss index 5b1d0f6efec9..e129742ece8f 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss @@ -1,4 +1,4 @@ - +@use "sass:meta"; @use './item'; @use './variables' as *; @@ -76,7 +76,7 @@ $sortable-side-offset: 6px; Please note, that header-item-container paddings taken into account here */ &--with-header-items { - margin: 0 ($sortable-side-offset - $cardview-header-item__right-padding) 0 ($sortable-side-offset - $cardview-header-item__left-padding); + margin: 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__right-padding) == number, ($sortable-side-offset - $cardview-header-item__right-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__right-padding})) 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__left-padding) == number, ($sortable-side-offset - $cardview-header-item__left-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__left-padding})); } &--empty { diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss index 0371918942f6..58ad56c6c93f 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + @mixin chat-file( $chat-file-container-width, $chat-file-container-padding, @@ -31,7 +33,7 @@ } .dx-chat-file-name { - margin-inline-end: $chat-file-base-section-gap * 2; + margin-inline-end: if(meta.type-of($chat-file-base-section-gap) == number, $chat-file-base-section-gap * 2, calc(#{$chat-file-base-section-gap} * 2)); margin-inline-start: $chat-file-base-section-gap; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss index ef65e694b2c2..7b1b90046c21 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss @@ -1,3 +1,5 @@ +@use "sass:meta"; + @mixin message-editing-preview( $preview-padding, $message-row-gap, @@ -14,7 +16,7 @@ .dx-chat-editing-preview-content { gap: $message-row-gap; - padding-inline-start: $preview-padding + $border-width; + padding-inline-start: if(meta.type-of($preview-padding) == number and meta.type-of($border-width) == number, $preview-padding + $border-width, calc(#{$preview-padding} + #{$border-width})); padding-inline-end: $preview-padding; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss index 612aaaad8857..f70805be28b6 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @mixin chat-messagelist( $padding, @@ -51,7 +52,7 @@ .dx-chat-messagelist-empty-image { color: $messagelist-empty-icon-color; background-color: $messagelist-empty-icon-background-color; - padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2); + padding: if(meta.type-of($messagelist-empty-icon-box-size) == number and meta.type-of($messagelist-empty-icon-size) == number, math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2), calc((#{$messagelist-empty-icon-box-size} - #{$messagelist-empty-icon-size}) / 2)); margin-bottom: $messagelist-empty-icon-margin-bottom; &::before { diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss index a82ac276d054..7b9ba657b929 100644 --- a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "sass:string"; @use "../string" as *; @@ -10,68 +11,70 @@ } @mixin diagram-action-icons-mixin($toolbar-color, $menu-color, $icon-size, $toolbar-colorbutton-border-width) { + $diagram-wide-icon-size: if(meta.type-of($icon-size) == number, 1.56 * $icon-size, calc(1.56 * #{$icon-size})); + .dx-diagram-i-selectbox-null-icon { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-none { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-arrow { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-outlined-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-begin-filled-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-none { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-arrow { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-outlined-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-end-filled-triangle { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-orthogonal { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-connector-straight { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-line-solid { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-line-dotted { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-line-dashed { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size); } .dx-diagram-i-button-fill { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width}))); } .dx-diagram-i-menu-fill { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width}))); } .dx-diagram-i-button-fullscreen { diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss index 01dd983dd65c..1430b8eb4b7c 100644 --- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "../icon_fonts" as *; @mixin invalid-dropdowneditor-input-padding( @@ -8,7 +9,7 @@ &.dx-dropdowneditor-button-visible { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: $invalid-badge-size + $texteditor-underlined-input-horizontal-padding; + padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-underlined-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-underlined-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-underlined-input-horizontal-padding})); } .dx-start-datebox { @@ -27,7 +28,7 @@ &.dx-editor-filled, &.dx-editor-outlined { .dx-texteditor-input { - padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding; + padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-filled-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-filled-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-filled-input-horizontal-padding})); } .dx-start-datebox { diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss index 9438cab26234..e34d45d15a53 100644 --- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss @@ -22,6 +22,7 @@ $pivotgrid-button-top-padding: null !default; @use "../mixins" as *; @use "../icon_fonts" as *; @use "./common"; +@use "sass:meta"; $pivotgrid-drag-header-border: 1px solid; $pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; @@ -30,7 +31,7 @@ $pivotgrid-border-width: 1px; $pivotgrid-border: $pivotgrid-border-width solid; $pivotgrid-icon-size: 14px; $pivotgrid-common-field-padding: 2px; -$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding; +$pivotgrid-filter-area-border-spacing: if(meta.type-of($pivotgrid-common-left-right-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-common-left-right-padding} - #{$pivotgrid-common-field-padding})) if(meta.type-of($pivotgrid-header-top-bottom-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-header-top-bottom-padding} - #{$pivotgrid-common-field-padding})); $pivotgrid-expand-icon-offset: -5px; $pivotgrid-expand-icon-text-offset: 0; diff --git a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss index 0081edf94f26..31668dcbb25a 100644 --- a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @mixin dx-radiobutton-icon-mixin( $icon-size, @@ -9,7 +10,7 @@ $ripple-transition: all 0s ease 0s, ) { $border-radius: 50%; - $dot-icon-border-width: math.div($icon-size - $border-width * 2 - $dot-size, 2); + $dot-icon-border-width: if(meta.type-of($icon-size) == number and meta.type-of($border-width) == number and meta.type-of($dot-size) == number, math.div($icon-size - $border-width * 2 - $dot-size, 2), calc((#{$icon-size} - #{$border-width} * 2 - #{$dot-size}) / 2)); .dx-radiobutton-icon { position: relative; diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss index af44f6164aae..f478c836abfa 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "../../mixins" as *; @use "sass:math"; @@ -38,7 +39,7 @@ $scheduler-workspace-date-table-cell-height: 50px; $scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5; $scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5; $scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height; -$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px; +$scheduler-header-panel-table-cell-height: if(meta.type-of($scheduler-workspace-date-table-cell-height) == number, $scheduler-workspace-date-table-cell-height - 10px, calc(#{$scheduler-workspace-date-table-cell-height} - 10px)); $scheduler-group-header-table-cell-height: 30px; $scheduler-group-header-table-cell-width: 80px; @@ -84,7 +85,7 @@ $scheduler-month-date-text-padding: 6px; &::before { position: absolute; - top: $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1; + top: if(meta.type-of($scheduler-header-panel-table-cell-height) == number and meta.type-of($scheduler-current-time-cell-border-size) == number, $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1, calc(#{$scheduler-header-panel-table-cell-height} - #{$scheduler-current-time-cell-border-size} - 1px)); right: 0; width: 100%; height: $scheduler-current-time-cell-border-size; diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss index 54b2b4442bb6..101064353838 100644 --- a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "../icon_fonts" as *; @mixin dx-switch( @@ -20,10 +21,10 @@ position: relative; padding-top: $switch-padding,; padding-bottom: $switch-padding,; - padding-inline-start: $switch-padding - $switch-container-horizontal-padding; - padding-inline-end: $switch-padding + $switch-container-horizontal-padding; - inset-inline-start: -$switch-padding; - top: -$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})); + top: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding})); overflow: hidden; vertical-align: middle; box-sizing: content-box; @@ -353,11 +354,11 @@ .dx-switch-handle { float: right; margin-left: 0; - margin-right: -$switch-height; + margin-right: if(meta.type-of($switch-height) == number, -$switch-height, calc(-1 * #{$switch-height})); } .dx-switch-container { - margin: 0 0 0 (-$switch-container-adjustment); + margin: 0 0 0 if(meta.type-of($switch-container-adjustment) == number, (-$switch-container-adjustment), calc(-1 * #{$switch-container-adjustment})); } } } diff --git a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss index a37911b651f9..99501cb5020f 100644 --- a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:meta"; @use "sass:color"; @mixin dx-editor-content-wrapper() { @@ -18,7 +19,7 @@ border-top-width: 0; span { - transform: translate(0, -$label-offset-y); + transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y}))); font-size: $label-font-size; margin-top: 0; top: 0; @@ -181,7 +182,7 @@ font-size: $texteditor-label-font-size; top: 0; margin-top: 0; - transform: translate(0, -$label-offset-y); + transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y}))); height: $label-active-height; line-height: normal; } @@ -237,7 +238,7 @@ width: 100%; position: absolute; height: 3px; - top: -$label-backdrop-offset-y; + top: if(meta.type-of($label-backdrop-offset-y) == number, -$label-backdrop-offset-y, calc(-1 * #{$label-backdrop-offset-y})); margin-inline-start: -2px; background-color: $label-backdrop-bg; } @@ -312,9 +313,9 @@ pointer-events: auto; font-size: $texteditor-label-outside-font-size; margin-top: 0; - top: -$label-offset-y-outside; - height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em; - line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em; + top: if(meta.type-of($label-offset-y-outside) == number, -$label-offset-y-outside, calc(-1 * #{$label-offset-y-outside})); + height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height); + line-height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height); } } } @@ -331,7 +332,7 @@ } } - $label-empty-margin-top: math.div(-$label-empty-height, 2) + $label-margin-top-diff; + $label-empty-margin-top: if(meta.type-of($label-empty-height) == number and meta.type-of($label-margin-top-diff) == number, math.div(-$label-empty-height, 2) + $label-margin-top-diff, calc(#{$label-empty-height} / -2 + #{$label-margin-top-diff})); &.dx-texteditor-empty { @include dx-state-empty( @@ -434,7 +435,7 @@ height: $texteditor-label-outside-height; line-height: $texteditor-label-outside-height; margin-top: 0; - top: -$texteditor-label-outside-top-offset; + top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset})); } .dx-label { @@ -462,7 +463,7 @@ height: $texteditor-empty-label-height; line-height: $texteditor-empty-label-line-height; top: 50%; - margin-top: math.div(-$texteditor-empty-label-height, 2); + margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2)); } &.dx-textarea { @@ -549,7 +550,7 @@ font-size: $texteditor-label-outside-font-size; height: $texteditor-label-outside-height; line-height: $texteditor-label-outside-height; - top: -$texteditor-label-outside-top-offset; + top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset})); margin-top: 0; } @@ -579,7 +580,7 @@ height: $texteditor-empty-label-height; line-height: $texteditor-empty-label-line-height; top: 50%; - margin-top: math.div(-$texteditor-empty-label-height, 2); + margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2)); } &.dx-textarea { @@ -754,7 +755,7 @@ .dx-button-content { display: flex; justify-content: center; - padding-top: $material-button-vertical-padding - 1px; + padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); .dx-icon { align-self: center; @@ -808,7 +809,7 @@ .dx-button-content { display: flex; justify-content: center; - padding-top: $material-button-vertical-padding - 1px; + padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); .dx-icon { align-self: center; diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss index 70285b993711..5e7b1c870190 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss @@ -1,5 +1,6 @@ @use "./variables" as *; @use "../icon_fonts" as *; +@use "sass:meta"; .dx-treelist-headers { .dx-header-row { @@ -10,7 +11,7 @@ float: left; width: $treelist-expand-checkbox-size; height: 1lh; - margin: 0 $treelist-expand-checkbox-right-gap 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap); + margin: 0 $treelist-expand-checkbox-right-gap 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap})); .dx-select-checkbox { display: block; @@ -113,7 +114,7 @@ &.dx-treelist-select-all { .dx-treelist-select-checkbox-container { float: right; - margin: 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap) 0 $treelist-expand-checkbox-right-gap; + margin: 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap})) 0 $treelist-expand-checkbox-right-gap; } } } diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss index 4c5e1c10eec3..119b01fdd89a 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss @@ -1,4 +1,5 @@ @use 'sass:math'; +@use 'sass:meta'; @use "./common"; @use "../../base/icon_fonts" as *; @@ -83,7 +84,7 @@ } .dx-treeview-with-search > .dx-scrollable { - height: calc(100% - #{math.round($search-editor-height + $searchbox-margin-bottom)}); + height: calc(100% - #{if(meta.type-of($search-editor-height) == number and meta.type-of($searchbox-margin-bottom) == number, math.round($search-editor-height + $searchbox-margin-bottom), calc(#{$search-editor-height} + #{$searchbox-margin-bottom}))}); } .dx-treeview-select-all-item { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss index 88ad9823f724..cacbcda6d9b0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss @@ -1,16 +1,17 @@ $size: null !default; @use "colors" as *; +@use "../../_design-system/variables/ds" as ds; $fluent-size-postfix: null !default; $fluent-base-font-size: null !default; $fluent-base-inline-widget-height: null !default; $fluent-base-inline-block-height: null !default; $fluent-base-icon-size: null !default; -$fluent-base-icon-margin: 8px !default; +$fluent-base-icon-margin: ds.$spacing-80 !default; $fluent-base-inline-horizontal-padding: null !default; $fluent-base-border-radius: null !default; -$fluent-html-editor-add-image-dialog-base-padding: 5px !default; +$fluent-html-editor-add-image-dialog-base-padding: ds.$spacing-50 !default; /** * $name 11. Button height @@ -34,38 +35,38 @@ $fluent-button-icon-margin: null !default; $fluent-size-postfix: "" !default; // Font sizes - $fluent-base-font-size: 14px !default; + $fluent-base-font-size: ds.$font-size-140 !default; // Base sizes - $fluent-base-inline-widget-height: 32px !default; - $fluent-base-inline-block-height: 20px !default; - $fluent-base-icon-size: 20px !default; - $fluent-base-inline-horizontal-padding: 12px !default; - $fluent-base-border-radius: 4px !default; - $fluent-button-height: 32px !default; - $fluent-button-icon-size: 20px !default; - $fluent-button-icon-margin: 8px !default; + $fluent-base-inline-widget-height: ds.$spacing-320 !default; + $fluent-base-inline-block-height: ds.$spacing-200 !default; + $fluent-base-icon-size: ds.$spacing-200 !default; + $fluent-base-inline-horizontal-padding: ds.$spacing-120 !default; + $fluent-base-border-radius: ds.$border-radius-40 !default; + $fluent-button-height: ds.$spacing-320 !default; + $fluent-button-icon-size: ds.$spacing-200 !default; + $fluent-button-icon-margin: ds.$spacing-80 !default; } @if $size == "compact" { $fluent-size-postfix: ".compact" !default; // Font sizes - $fluent-base-font-size: 12px !default; + $fluent-base-font-size: ds.$font-size-120 !default; // Base sizes - $fluent-base-inline-widget-height: 24px !default; - $fluent-base-inline-block-height: 16px !default; - $fluent-base-icon-size: 16px !default; - $fluent-base-inline-horizontal-padding: 8px !default; - $fluent-base-border-radius: 4px !default; - $fluent-button-height: 24px !default; - $fluent-button-icon-size: 16px !default; - $fluent-button-icon-margin: 4px !default; + $fluent-base-inline-widget-height: ds.$spacing-240 !default; + $fluent-base-inline-block-height: ds.$spacing-160 !default; + $fluent-base-icon-size: ds.$spacing-160 !default; + $fluent-base-inline-horizontal-padding: ds.$spacing-80 !default; + $fluent-base-border-radius: ds.$border-radius-40 !default; + $fluent-button-height: ds.$spacing-240 !default; + $fluent-button-icon-size: ds.$spacing-160 !default; + $fluent-button-icon-margin: ds.$spacing-40 !default; } // Base bordered inline widgets sizes -$fluent-base-border-width: 1px !default; +$fluent-base-border-width: ds.$border-width-10 !default; /** diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss index 9b10c508a768..4d8d05c9eb94 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss @@ -1,9 +1,10 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-accordion-title-horizontal-padding: null !default; -$fluent-accordion-title-vertical-padding: 6px !default; +$fluent-accordion-title-vertical-padding: ds.$spacing-60 !default; $fluent-accordion-body-padding: null !default; $fluent-accordion-title-height: null !default; @@ -18,19 +19,19 @@ $accordion-item-border-radius: $fluent-base-border-radius !default; $fluent-accordion-item-opened-margin: null !default; @if $size == "default" { - $fluent-accordion-title-horizontal-padding: 12px !default; - $fluent-accordion-body-padding: 12px !default; - $fluent-accordion-title-height: 44px !default; - $accordion-title-icon-margin: 8px !default; - $accordion-title-icon-size: 20px !default; + $fluent-accordion-title-horizontal-padding: ds.$spacing-120 !default; + $fluent-accordion-body-padding: ds.$spacing-120 !default; + $fluent-accordion-title-height: ds.$spacing-440 !default; + $accordion-title-icon-margin: ds.$spacing-80 !default; + $accordion-title-icon-size: ds.$spacing-200 !default; $fluent-accordion-item-opened-margin: 0 !default; } @else if $size == "compact" { - $fluent-accordion-title-horizontal-padding: 8px !default; - $fluent-accordion-body-padding: 8px !default; - $fluent-accordion-title-height: 32px !default; - $accordion-title-icon-margin: 6px !default; - $accordion-title-icon-size: 16px !default; + $fluent-accordion-title-horizontal-padding: ds.$spacing-80 !default; + $fluent-accordion-body-padding: ds.$spacing-80 !default; + $fluent-accordion-title-height: ds.$spacing-320 !default; + $accordion-title-icon-margin: ds.$spacing-60 !default; + $accordion-title-icon-size: ds.$spacing-160 !default; $fluent-accordion-item-opened-margin: 0 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss index a21b4a91b6d5..a31195b33021 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-actionsheet-item-margin-value: 12px; +$fluent-actionsheet-item-margin-value: ds.$spacing-120; $fluent-actionsheet-item-margin: 0 0 $fluent-actionsheet-item-margin-value 0 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss index a7255e2af727..244b7352d3a0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-badge-font-size: null !default; $badge-line-height: null !default; @if $size == "default" { - $fluent-badge-padding: 0 6px !default; - $fluent-badge-font-size: 12px !default; - $badge-line-height: 20px !default; + $fluent-badge-padding: 0 ds.$spacing-60 !default; + $fluent-badge-font-size: ds.$font-size-120 !default; + $badge-line-height: ds.$line-height-200 !default; } @else if $size == "compact" { - $fluent-badge-padding: 0 6px !default; - $fluent-badge-font-size: 10px !default; - $badge-line-height: 16px !default; + $fluent-badge-padding: 0 ds.$spacing-60 !default; + $fluent-badge-font-size: ds.$font-size-100 !default; + $badge-line-height: ds.$line-height-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss index a7c3e05b036e..5446e508970f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss @@ -9,7 +9,7 @@ @mixin dx-button-onlyicon-sizing($icon-size: $fluent-button-icon-size) { min-width: $fluent-button-height; - $button-content-padding: math.div($fluent-button-height - $icon-size - $fluent-base-border-width * 2, 2); + $button-content-padding: calc((#{$fluent-button-height} - #{$icon-size} - #{$fluent-base-border-width} * 2) / 2); @include dx-button-sizing( $button-content-padding, @@ -26,7 +26,7 @@ $fluent-button-horizontal-padding, $fluent-button-horizontal-padding, $fluent-button-icon-size, - math.div($fluent-button-icon-size, 2) + calc(#{$fluent-button-icon-size} / 2) ); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss index 5c4cec6e2300..4b802830096a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,22 +10,22 @@ $fluent-button-icon-text-padding: null !default; $fluent-button-content-line-height: 0 !default; $fluent-button-text-line-height: normal !default; $fluent-button-text-transform: none !default; -$fluent-button-text-font-weight: 500 !default; +$fluent-button-text-font-weight: ds.$font-weight-500 !default; $fluent-button-text-letter-spacing: normal !default; -$fluent-button-box-shadow-size: 0 1px 3px !default; +$fluent-button-box-shadow-size: 0 ds.$spacing-10 ds.$spacing-30 !default; @if $size == "default" { - $fluent-button-horizontal-padding: 12px !default; - $fluent-button-vertical-padding: 6px !default; - $fluent-button-icon-padding: 6px; + $fluent-button-horizontal-padding: ds.$spacing-120 !default; + $fluent-button-vertical-padding: ds.$spacing-60 !default; + $fluent-button-icon-padding: ds.$spacing-60; $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; } @else if $size == "compact" { - $fluent-button-horizontal-padding: 8px !default; - $fluent-button-vertical-padding: 4px !default; - $fluent-button-icon-padding: 4px !default; + $fluent-button-horizontal-padding: ds.$spacing-80 !default; + $fluent-button-vertical-padding: ds.$spacing-40 !default; + $fluent-button-icon-padding: ds.$spacing-40 !default; $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss index 38f020f3fc61..0d8af31f5444 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,21 +9,21 @@ $fluent-calendar-legacy-height: null !default; $fluent-calendar-footer-button-height: null !default; $fluent-calendar-cell-font-size: null !default; -$fluent-calendar-element-padding: 8px !default; +$fluent-calendar-element-padding: ds.$spacing-80 !default; @if $size == "default" { - $fluent-calendar-legacy-width: 272px !default; - $fluent-calendar-legacy-height: 264px !default; + $fluent-calendar-legacy-width: 272px !default; // dx-offscale: 272px + $fluent-calendar-legacy-height: 264px !default; // dx-offscale: 264px - $fluent-calendar-cell-font-size: 14px !default; + $fluent-calendar-cell-font-size: ds.$font-size-140 !default; - $fluent-calendar-footer-button-height: 36px !default; + $fluent-calendar-footer-button-height: ds.$spacing-360 !default; } @else if $size == "compact" { - $fluent-calendar-legacy-width: 252px !default; - $fluent-calendar-legacy-height: 260px !default; + $fluent-calendar-legacy-width: 252px !default; // dx-offscale: 252px + $fluent-calendar-legacy-height: 260px !default; // dx-offscale: 260px - $fluent-calendar-cell-font-size: 12px !default; - $fluent-calendar-footer-button-height: 28px !default; + $fluent-calendar-cell-font-size: ds.$font-size-120 !default; + $fluent-calendar-footer-button-height: ds.$spacing-280 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss index 619d5e8b3e23..e69b2885758a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss @@ -10,6 +10,7 @@ @use '../../base/cardView/content_view/no_data/variables' as *; @use '../../base/cardView/column_chooser/variables' as *; @use '../../base/cardView/filter_panel/variables' as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -261,27 +262,27 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau @if $size == "default" { // Common - $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-border-radius: ds.$border-radius-160 !default; $cardview-fluent-common-text-weight: 400 !default; - $cardview-fluent-common-cards-row-gap: 16px !default; - $cardview-fluent-common-cards-column-gap: 16px !default; - $cardview-fluent-common-gap: 24px !default; - $cardview-fluent-common-padding: 24px !default; + $cardview-fluent-common-cards-row-gap: ds.$spacing-160 !default; + $cardview-fluent-common-cards-column-gap: ds.$spacing-160 !default; + $cardview-fluent-common-gap: ds.$spacing-240 !default; + $cardview-fluent-common-padding: ds.$spacing-240 !default; // Card - $cardview-fluent-card-min-width: 250px !default; - $cardview-fluent-card-border-width: 1px !default; - $cardview-fluent-card-border-radius: 8px !default; - $cardview-fluent-card__header-height: 48px !default; - $cardview-fluent-card__header-text-size: 16px !default; - $cardview-fluent-card__header__selection-checkbox-padding-right: 12px !default; + $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px + $cardview-fluent-card-border-width: ds.$border-width-10 !default; + $cardview-fluent-card-border-radius: ds.$border-radius-80 !default; + $cardview-fluent-card__header-height: ds.$spacing-480 !default; + $cardview-fluent-card__header-text-size: ds.$spacing-160 !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-120 !default; $cardview-fluent-card__field-caption-weight: 600 !default; - $cardview-fluent-card__cover-max-height: 180px !default; - $cardview-fluent-card__cover--noimage__icon-size: 48px !default; - $cardview-fluent-card__content-padding: 12px !default; - $cardview-fluent-card__content-row-gap: 8px !default; - $cardview-fluent-card__content__cell-padding-vertical: 6px !default; - $cardview-fluent-card__content__cell-padding-horizontal: 12px !default; + $cardview-fluent-card__cover-max-height: 180px !default; // dx-offscale: 180px + $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-480 !default; + $cardview-fluent-card__content-padding: ds.$spacing-120 !default; + $cardview-fluent-card__content-row-gap: ds.$spacing-80 !default; + $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-60 !default; + $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-120 !default; // Card - selected $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; @@ -290,16 +291,16 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau $cardview-fluent-header-gap: 0 !default; // Header panel - $cardview-fluent-header-panel-vertical-margin: 8px !default; - $cardview-fluent-header-panel--empty-line-height: 32px !default; + $cardview-fluent-header-panel-vertical-margin: ds.$spacing-80 !default; + $cardview-fluent-header-panel--empty-line-height: ds.$line-height-320 !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: 1px !default; - $cardview-fluent-header-panel__item-border-radius: 6px !default; - $cardview-fluent-header-panel__item-padding-horizontal: 8px !default; - $cardview-fluent-header-panel__item-padding-vertical: 5px !default; - $cardview-fluent-header-item__left-padding: 6px !default; - $cardview-fluent-header-item__right-padding: 2px !default; + $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default; + $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default; + $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-80 !default; + $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-50 !default; + $cardview-fluent-header-item__left-padding: ds.$spacing-60 !default; + $cardview-fluent-header-item__right-padding: ds.$spacing-20 !default; $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; @@ -314,74 +315,74 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau // Header panel item - dragged $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-item__sort-indicator__border-size: 2px !default; - $cardview-fluent-header-item__sort-indicator__border-radius: 8px !default; + $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-20 !default; + $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-80 !default; // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-height: 44px !default; - $cardview-fluent-header-panel__dropzone-top: -6px !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; - $cardview-fluent-header-panel__dropzone-border-radius: 8px !default; + $cardview-fluent-header-panel__dropzone-height: ds.$spacing-440 !default; + $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-60 !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px + $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-80 !default; // Filter panel $cardview-fluent-filter-panel-border-radius: 0 !default; // Empty view - $cardview-fluent-nodata-view__icon-container-size: 64px !default; - $cardview-fluent-nodata-view__icon-container-margin: 12px !default; - $cardview-fluent-nodata-view__icon-size: 40px !default; + $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-640 !default; + $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-120 !default; + $cardview-fluent-nodata-view__icon-size: ds.$spacing-400 !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default; $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; // Column chooser - $cardview-fluent-column-chooser--empty__message-horizontal-padding: 24px !default; - $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 14px !default; + $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-240 !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-140 !default; } @else if $size == "compact" { // Common - $cardview-fluent-common-border-radius: 16px !default; + $cardview-fluent-common-border-radius: ds.$border-radius-160 !default; $cardview-fluent-common-text-weight: 400 !default; - $cardview-fluent-common-cards-row-gap: 12px !default; - $cardview-fluent-common-cards-column-gap: 12px !default; - $cardview-fluent-common-gap: 16px !default; - $cardview-fluent-common-padding: 16px !default; + $cardview-fluent-common-cards-row-gap: ds.$spacing-120 !default; + $cardview-fluent-common-cards-column-gap: ds.$spacing-120 !default; + $cardview-fluent-common-gap: ds.$spacing-160 !default; + $cardview-fluent-common-padding: ds.$spacing-160 !default; // Card - $cardview-fluent-card-min-width: 250px !default; - $cardview-fluent-card-border-width: 1px !default; - $cardview-fluent-card-border-radius: 6px !default; - $cardview-fluent-card__header-height: 36px !default; - $cardview-fluent-card__header-text-size: 14px !default; - $cardview-fluent-card__header__selection-checkbox-padding-right: 8px !default; + $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px + $cardview-fluent-card-border-width: ds.$border-width-10 !default; + $cardview-fluent-card-border-radius: ds.$border-radius-60 !default; + $cardview-fluent-card__header-height: ds.$spacing-360 !default; + $cardview-fluent-card__header-text-size: ds.$spacing-140 !default; + $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-80 !default; $cardview-fluent-card__field-caption-weight: 600 !default; - $cardview-fluent-card__cover-max-height: 140px !default; - $cardview-fluent-card__cover--noimage__icon-size: 32px !default; - $cardview-fluent-card__content-padding: 8px !default; - $cardview-fluent-card__content-row-gap: 4px !default; - $cardview-fluent-card__content__cell-padding-vertical: 4px !default; - $cardview-fluent-card__content__cell-padding-horizontal: 8px !default; + $cardview-fluent-card__cover-max-height: 140px !default; // dx-offscale: 140px + $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-320 !default; + $cardview-fluent-card__content-padding: ds.$spacing-80 !default; + $cardview-fluent-card__content-row-gap: ds.$spacing-40 !default; + $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-40 !default; + $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-80 !default; // Card - selected $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default; // Header - $cardview-fluent-header-gap: 4px !default; + $cardview-fluent-header-gap: ds.$spacing-40 !default; // Header panel - $cardview-fluent-header-panel-vertical-margin: 4px !default; - $cardview-fluent-header-panel--empty-line-height: 24px !default; + $cardview-fluent-header-panel-vertical-margin: ds.$spacing-40 !default; + $cardview-fluent-header-panel--empty-line-height: ds.$line-height-240 !default; // Header panel item - default - $cardview-fluent-header-panel__item-border-width: 1px !default; - $cardview-fluent-header-panel__item-border-radius: 6px !default; - $cardview-fluent-header-panel__item-padding-horizontal: 6px !default; - $cardview-fluent-header-panel__item-padding-vertical: 3px !default; - $cardview-fluent-header-item__left-padding: 3px !default; - $cardview-fluent-header-item__right-padding: 1px !default; + $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default; + $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default; + $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-60 !default; + $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-30 !default; + $cardview-fluent-header-item__left-padding: ds.$spacing-30 !default; + $cardview-fluent-header-item__right-padding: ds.$spacing-10 !default; $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default; $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default; $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default; @@ -396,31 +397,31 @@ $cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !defau // Header panel item - dragged $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default; - $cardview-fluent-header-item__sort-indicator__border-size: 1px !default; - $cardview-fluent-header-item__sort-indicator__border-radius: 4px !default; + $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-10 !default; + $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-40 !default; // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-height: 32px !default; - $cardview-fluent-header-panel__dropzone-top: -4px !default; - $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; - $cardview-fluent-header-panel__dropzone-border-radius: 6px !default; + $cardview-fluent-header-panel__dropzone-height: ds.$spacing-320 !default; + $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-40 !default; + $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px + $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-60 !default; // Filter panel $cardview-fluent-filter-panel-border-radius: 0 !default; // Empty view - $cardview-fluent-nodata-view__icon-container-size: 48px !default; - $cardview-fluent-nodata-view__icon-container-margin: 8px !default; - $cardview-fluent-nodata-view__icon-size: 32px !default; + $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-480 !default; + $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-80 !default; + $cardview-fluent-nodata-view__icon-size: ds.$spacing-320 !default; // Search highlight - $cardview-fluent-card__content__field-value--highlighted-border-radius: 5px !default; + $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default; $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default; // Column chooser - $cardview-fluent-column-chooser--empty__message-horizontal-padding: 16px !default; - $cardview-fluent-column-chooser__select-all-item-horizontal-padding: 12px !default; + $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-160 !default; + $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-120 !default; } $cardview-border-radius: $cardview-fluent-common-border-radius !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss index 6c67c9c17d67..fe6cb51c18bd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss @@ -5,48 +5,49 @@ @use "../typography/sizes" as *; @use "../popup/sizes" as *; @use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$chat-border-radius: $base-border-radius * 3 !default; +$chat-border-radius: calc(#{$base-border-radius} * 3) !default; $chat-bubble-border-radius: null !default; $chat-bubble-padding: null !default; -$chat-bubble-container-gap: 4px !default; +$chat-bubble-container-gap: ds.$spacing-40 !default; $chat-bubble-delete-gap: null !default; $chat-bubble-delete-icon-size: null !default; $chat-messagebox-padding: null !default; $chat-messagebox-textarea-padding: null !default; $chat-messagebox-textarea-border-radius: null !default; $chat-messagebox-toolbar-min-height: null !default; -$chat-messagebox-gap: 8px !default; -$chat-messagebox-files-container-padding: 3px !default; -$chat-messagebox-files-container-padding-top: 2px !default; +$chat-messagebox-gap: ds.$spacing-80 !default; +$chat-messagebox-files-container-padding: ds.$spacing-30 !default; +$chat-messagebox-files-container-padding-top: ds.$spacing-20 !default; $chat-messagelist-padding: null !default; -$chat-messagegroup-gap: 4px !default; +$chat-messagegroup-gap: ds.$spacing-40 !default; $chat-messagegroup-padding: null !default; -$chat-information-gap: 8px !default; -$chat-avatar-size: 32px !default; +$chat-information-gap: ds.$spacing-80 !default; +$chat-avatar-size: ds.$spacing-320 !default; $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default; -$chat-messagegroup-alignment-start-gap: 12px !default; -$chat-information-font-size: 12px !default; -$chat-information-icon-size: 12px !default; -$chat-information-edited-gap: 2px !default; +$chat-messagegroup-alignment-start-gap: ds.$spacing-120 !default; +$chat-information-font-size: ds.$font-size-120 !default; +$chat-information-icon-size: ds.$spacing-120 !default; +$chat-information-edited-gap: ds.$spacing-20 !default; $chat-alerts-padding-block: null !default; -$chat-alerts-padding-inline: 8px !default; +$chat-alerts-padding-inline: ds.$spacing-80 !default; $chat-alerts-row-gap: null !default; $chat-alert-padding-block: null !default; $chat-suggestions-padding: null !default; $chat-suggestions-border-width: $fluent-base-border-width !default; $chat-suggestions-button-border-radius: $button-border-radius !default; -$chat-suggestions-button-max-width: 200px !default; -$chat-suggestions-gap: 12px !default; +$chat-suggestions-button-max-width: 200px !default; // dx-offscale: 200px +$chat-suggestions-gap: ds.$spacing-120 !default; $chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default; $chat-message-editing-preview-content-row-gap: null !default; $chat-message-editing-preview-content-padding-inline: null !default; -$chat-message-editing-preview-border-width: 3px !default; +$chat-message-editing-preview-border-width: ds.$border-width-30 !default; $chat-messagelist-empty-icon-box-size: null !default; $chat-messagelist-empty-icon-size: null !default; @@ -54,9 +55,9 @@ $chat-messagelist-empty-icon-margin-bottom: null !default; $chat-messagelist-empty-row-gap: null !default; $chat-messagelist-empty-message-font-size: null !default; $chat-messagelist-empty-prompt-font-size: null !default; -$chat-messagelist-day-header-padding-bottom: 12px !default; -$chat-messagelist-day-header-first-padding-top: 20px !default; -$chat-messagelist-day-header-font-size: 12px !default; +$chat-messagelist-day-header-padding-bottom: ds.$spacing-120 !default; +$chat-messagelist-day-header-first-padding-top: ds.$spacing-200 !default; +$chat-messagelist-day-header-font-size: ds.$font-size-120 !default; $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default; $chat-typingindicator-padding: null !default; @@ -65,7 +66,7 @@ $chat-typingindicator-font-size: $chat-information-font-size !default; $chat-typingindicator-bubble-padding-block: null !default; $chat-typingindicator-bubble-padding-inline: null !default; $chat-typingindicator-bubble-border-radius: null !default; -$chat-typingindicator-bubble-column-gap: 4px !default; +$chat-typingindicator-bubble-column-gap: ds.$spacing-40 !default; $chat-typingindicator-circle-size: null !default; $chat-typingindicator-circle-size-center: null !default; $chat-typingindicator-circle-border-radius: 999em !default; @@ -76,92 +77,92 @@ $chat-confirmation-popup-toolbar-padding-inline: $fluent-popup-content-withtitle $chat-confirmation-popup-toolbar-gap: null !default; $chat-file-container-width: 17.14em !default; -$chat-file-container-padding: 7px 8px !default; +$chat-file-container-padding: ds.$spacing-70 ds.$spacing-80 !default; $chat-file-container-border-radius: $fluent-base-border-radius !default; $chat-file-button-size: $fluent-button-height !default; -$chat-file-secondary-font-size: 10px !default; -$chat-file-base-section-gap: 4px !default; +$chat-file-secondary-font-size: ds.$font-size-100 !default; +$chat-file-base-section-gap: ds.$spacing-40 !default; $chat-file-size-max-width: 4em !default; $chat-file-icon-font-size: null !default; -$chat-file-view-items-gap: 8px !default; -$chat-bubble-gap: 8px !default; +$chat-file-view-items-gap: ds.$spacing-80 !default; +$chat-bubble-gap: ds.$spacing-80 !default; @if $size == "default" { - $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default; - $chat-bubble-padding: 8px 12px !default; - $chat-bubble-delete-gap: 4px !default; - $chat-bubble-delete-icon-size: 20px !default; - $chat-messagebox-padding: 20px !default; - $chat-messagebox-textarea-border-radius: 8px !default; - $chat-messagebox-textarea-padding: 12px !default; - $chat-messagebox-toolbar-min-height: 32px !default; - $chat-messagelist-padding: 20px !default; - $chat-messagegroup-padding: 24px !default; - - $chat-alerts-padding-block: 12px !default; - $chat-alerts-row-gap: 2px !default; - $chat-alert-padding-block: 6px !default; - - $chat-suggestions-padding: 20px !default; - - $chat-message-editing-preview-content-padding-inline: 12px !default; - $chat-message-editing-preview-content-row-gap: 4px !default; - - $chat-messagelist-empty-icon-box-size: 64px !default; - $chat-messagelist-empty-icon-size: 40px !default; - $chat-messagelist-empty-icon-margin-bottom: 12px !default; - $chat-messagelist-empty-row-gap: 4px !default; - $chat-messagelist-empty-message-font-size: 18px !default; - $chat-messagelist-empty-prompt-font-size: 14px !default; + $chat-bubble-border-radius: calc(#{$fluent-base-border-radius} * 3) !default; + $chat-bubble-padding: ds.$spacing-80 ds.$spacing-120 !default; + $chat-bubble-delete-gap: ds.$spacing-40 !default; + $chat-bubble-delete-icon-size: ds.$spacing-200 !default; + $chat-messagebox-padding: ds.$spacing-200 !default; + $chat-messagebox-textarea-border-radius: ds.$border-radius-80 !default; + $chat-messagebox-textarea-padding: ds.$spacing-120 !default; + $chat-messagebox-toolbar-min-height: ds.$spacing-320 !default; + $chat-messagelist-padding: ds.$spacing-200 !default; + $chat-messagegroup-padding: ds.$spacing-240 !default; + + $chat-alerts-padding-block: ds.$spacing-120 !default; + $chat-alerts-row-gap: ds.$spacing-20 !default; + $chat-alert-padding-block: ds.$spacing-60 !default; + + $chat-suggestions-padding: ds.$spacing-200 !default; + + $chat-message-editing-preview-content-padding-inline: ds.$spacing-120 !default; + $chat-message-editing-preview-content-row-gap: ds.$spacing-40 !default; + + $chat-messagelist-empty-icon-box-size: ds.$spacing-640 !default; + $chat-messagelist-empty-icon-size: ds.$spacing-400 !default; + $chat-messagelist-empty-icon-margin-bottom: ds.$spacing-120 !default; + $chat-messagelist-empty-row-gap: ds.$spacing-40 !default; + $chat-messagelist-empty-message-font-size: ds.$font-size-180 !default; + $chat-messagelist-empty-prompt-font-size: ds.$font-size-140 !default; $chat-typingindicator-circle-size: math.div(8, 14) * 1em !default; $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default; - $chat-typingindicator-bubble-padding-block: 12px !default; - $chat-typingindicator-bubble-padding-inline: 20px !default; + $chat-typingindicator-bubble-padding-block: ds.$spacing-120 !default; + $chat-typingindicator-bubble-padding-inline: ds.$spacing-200 !default; $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; - $chat-confirmation-popup-toolbar-gap: 8px !default; + $chat-confirmation-popup-toolbar-gap: ds.$spacing-80 !default; - $chat-file-icon-font-size: 20px !default; + $chat-file-icon-font-size: ds.$font-size-200 !default; } @else if $size == "compact" { - $chat-bubble-border-radius: $fluent-base-border-radius * 2 !default; - $chat-bubble-padding: 6px 8px !default; - $chat-bubble-delete-gap: 2px !default; - $chat-bubble-delete-icon-size: 16px !default; - $chat-messagebox-padding: 16px !default; - $chat-messagebox-textarea-border-radius: 8px !default; - $chat-messagebox-textarea-padding: 8px !default; - $chat-messagebox-toolbar-min-height: 24px !default; - $chat-messagelist-padding: 16px !default; - $chat-messagegroup-padding: 12px !default; - - $chat-alerts-padding-block: 8px !default; - $chat-alerts-row-gap: 2px !default; - $chat-alert-padding-block: 5px !default; - - $chat-suggestions-padding: 16px !default; - - $chat-message-editing-preview-content-padding-inline: 8px !default; - $chat-message-editing-preview-content-row-gap: 2px !default; - - $chat-messagelist-empty-icon-box-size: 48px !default; - $chat-messagelist-empty-icon-size: 32px !default; - $chat-messagelist-empty-icon-margin-bottom: 14px !default; - $chat-messagelist-empty-row-gap: 2px !default; - $chat-messagelist-empty-message-font-size: 14px !default; - $chat-messagelist-empty-prompt-font-size: 12px !default; + $chat-bubble-border-radius: calc(#{$fluent-base-border-radius} * 2) !default; + $chat-bubble-padding: ds.$spacing-60 ds.$spacing-80 !default; + $chat-bubble-delete-gap: ds.$spacing-20 !default; + $chat-bubble-delete-icon-size: ds.$spacing-160 !default; + $chat-messagebox-padding: ds.$spacing-160 !default; + $chat-messagebox-textarea-border-radius: ds.$border-radius-80 !default; + $chat-messagebox-textarea-padding: ds.$spacing-80 !default; + $chat-messagebox-toolbar-min-height: ds.$spacing-240 !default; + $chat-messagelist-padding: ds.$spacing-160 !default; + $chat-messagegroup-padding: ds.$spacing-120 !default; + + $chat-alerts-padding-block: ds.$spacing-80 !default; + $chat-alerts-row-gap: ds.$spacing-20 !default; + $chat-alert-padding-block: ds.$spacing-50 !default; + + $chat-suggestions-padding: ds.$spacing-160 !default; + + $chat-message-editing-preview-content-padding-inline: ds.$spacing-80 !default; + $chat-message-editing-preview-content-row-gap: ds.$spacing-20 !default; + + $chat-messagelist-empty-icon-box-size: ds.$spacing-480 !default; + $chat-messagelist-empty-icon-size: ds.$spacing-320 !default; + $chat-messagelist-empty-icon-margin-bottom: ds.$spacing-140 !default; + $chat-messagelist-empty-row-gap: ds.$spacing-20 !default; + $chat-messagelist-empty-message-font-size: ds.$font-size-140 !default; + $chat-messagelist-empty-prompt-font-size: ds.$font-size-120 !default; $chat-typingindicator-circle-size: math.div(8, 12) * 1em !default; $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default; - $chat-typingindicator-bubble-padding-block: 8px !default; - $chat-typingindicator-bubble-padding-inline: 12px !default; + $chat-typingindicator-bubble-padding-block: ds.$spacing-80 !default; + $chat-typingindicator-bubble-padding-inline: ds.$spacing-120 !default; $chat-typingindicator-padding: $chat-messagegroup-padding !default; $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default; - $chat-confirmation-popup-toolbar-gap: 4px !default; + $chat-confirmation-popup-toolbar-gap: ds.$spacing-40 !default; - $chat-file-icon-font-size: 16px !default; + $chat-file-icon-font-size: ds.$font-size-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss index a2db48620746..3b721cb964c3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss @@ -1,28 +1,29 @@ @use "../sizes" as *; @use "colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-checkbox-icon-font-size: 16px !default; +$fluent-checkbox-icon-font-size: ds.$font-size-160 !default; -$fluent-checkbox-border-width: 1px !default; -$fluent-checkbox-icon-border-radius: 2px !default; +$fluent-checkbox-border-width: ds.$border-width-10 !default; +$fluent-checkbox-icon-border-radius: ds.$border-radius-20 !default; $fluent-checkbox-arrow-icon-size: 1em !default; $fluent-checkbox-arrow-font-size: 0.75em !default; $fluent-checkbox-indeterminate-icon-height: 0.5em !default; $fluent-checkbox-indeterminate-icon-width: 0.5em !default; -$fluent-checkbox-indeterminate-icon-border-radius: 2px !default; +$fluent-checkbox-indeterminate-icon-border-radius: ds.$border-radius-20 !default; $fluent-checkbox-text-padding-start: null !default; $fluent-checkbox-text-padding-end: null !default; @if $size == "default" { - $fluent-checkbox-text-padding-start: 12px !default; - $fluent-checkbox-text-padding-end: 8px !default; + $fluent-checkbox-text-padding-start: ds.$spacing-120 !default; + $fluent-checkbox-text-padding-end: ds.$spacing-80 !default; } @else if $size == "compact" { - $fluent-checkbox-text-padding-start: 8px !default; - $fluent-checkbox-text-padding-end: 6px !default; + $fluent-checkbox-text-padding-start: ds.$spacing-80 !default; + $fluent-checkbox-text-padding-end: ds.$spacing-60 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss index c05c87b553f8..b2abdea4a06f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss @@ -21,7 +21,7 @@ } &::after { - left: $fluent-colorbox-preview-padding + 1; + left: calc(#{$fluent-colorbox-preview-padding} + 1px); } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss index 9882bab17d9d..51118b98f62a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-colorbox-preview-padding: null !default; $fluent-colorbox-preview-icon-size: $fluent-base-icon-size !default; @if $size == "default" { - $fluent-colorbox-overlay-padding: 20px !default; - $fluent-colorbox-preview-padding: 12px !default; + $fluent-colorbox-overlay-padding: ds.$spacing-200 !default; + $fluent-colorbox-preview-padding: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-colorbox-overlay-padding: 16px !default; - $fluent-colorbox-preview-padding: 8px !default; + $fluent-colorbox-overlay-padding: ds.$spacing-160 !default; + $fluent-colorbox-preview-padding: ds.$spacing-80 !default; } -$fluent-colorbox-preview-width: $fluent-colorbox-preview-padding * 2 + $fluent-colorbox-preview-icon-size !default; +$fluent-colorbox-preview-width: calc(#{$fluent-colorbox-preview-padding} * 2 + #{$fluent-colorbox-preview-icon-size}) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss index 6b27cf1809ca..f86789588da6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss @@ -1,22 +1,23 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-colorview-container-width: 450px !default; -$fluent-colorview-palette-width: 288px !default; -$fluent-colorview-palette-height: 299px !default; -$fluent-colorview-alpha-margin: 10px !default; -$fluent-colorview-hue-scale-width: 18px !default; -$fluent-colorview-hue-scale-margin: 19px !default; -$fluent-colorview-color-preview-height: 40px !default; -$fluent-colorview-preview-container-margin: 34px !default; +$fluent-colorview-container-width: 450px !default; // dx-offscale: 450px +$fluent-colorview-palette-width: 288px !default; // dx-offscale: 288px +$fluent-colorview-palette-height: 299px !default; // dx-offscale: 299px +$fluent-colorview-alpha-margin: ds.$spacing-100 !default; +$fluent-colorview-hue-scale-width: ds.$spacing-180 !default; +$fluent-colorview-hue-scale-margin: ds.$spacing-190 !default; +$fluent-colorview-color-preview-height: ds.$spacing-400 !default; +$fluent-colorview-preview-container-margin: ds.$spacing-340 !default; $fluent-colorview-container-line-height: normal !default; -$fluent-colorview-container-hex-margin: 20px 0 0 0 !default; -$fluent-colorview-container-alpha-label-width: 115px !default; -$fluent-colorview-container-alpha-label-margin: 43px !default; -$fluent-colorview-container-textbox-width: 69px !default; -$fluent-colorview-container-textbox-margin: 0 0 0 10px !default; +$fluent-colorview-container-hex-margin: ds.$spacing-200 0 0 0 !default; +$fluent-colorview-container-alpha-label-width: 115px !default; // dx-offscale: 115px +$fluent-colorview-container-alpha-label-margin: 43px !default; // dx-offscale: 43px +$fluent-colorview-container-textbox-width: 69px !default; // dx-offscale: 69px +$fluent-colorview-container-textbox-margin: 0 0 0 ds.$spacing-100 !default; -$fluent-colorview-controls-container-width: 90px !default; -$fluent-colorview-controls-container-margin: 27px !default; +$fluent-colorview-controls-container-width: 90px !default; // dx-offscale: 90px +$fluent-colorview-controls-container-margin: 27px !default; // dx-offscale: 27px diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss index ddb3ad0d8a7e..a274409de03a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss @@ -28,10 +28,10 @@ $badge-invalid-bg: $common-invalid-color; justify-content: center; align-items: center; top: 50%; - margin-top: math.div(-$fluent-invalid-badge-size, 2); + margin-top: calc(#{$fluent-invalid-badge-size} / -2); width: $fluent-invalid-badge-size; height: $fluent-invalid-badge-size; - line-height: $fluent-invalid-badge-size + 1; + line-height: calc(#{$fluent-invalid-badge-size} + 1px); font-size: $fluent-base-font-size; } @@ -88,7 +88,7 @@ $badge-invalid-bg: $common-invalid-color; .dx-list-select-all { margin-inline: $fluent-list-item-margin-inline; - padding: $fluent-list-item-vertical-padding + 2px 0 $fluent-list-item-vertical-padding - 2px; + padding: calc(#{$fluent-list-item-vertical-padding} + 2px) 0 calc(#{$fluent-list-item-vertical-padding} - 2px); } .dx-list-items { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss index ca2a3c4ef064..b48402fcaec2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss @@ -1,31 +1,30 @@ @use "sass:math"; @use "../sizes" as *; @use "./colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-line-height: null !default; -$fluent-inline-borderedwidget-inner-size: - $fluent-base-inline-widget-height - - $fluent-base-border-width * 2 !default; +$fluent-inline-borderedwidget-inner-size: calc(#{$fluent-base-inline-widget-height} - #{$fluent-base-border-width} * 2) !default; -$fluent-invalid-badge-size: $fluent-base-icon-size - 2px !default; -$fluent-invalid-badge-horizontal-padding: math.div($fluent-inline-borderedwidget-inner-size - $fluent-invalid-badge-size, 2) !default; -$fluent-invalid-badge-halfhorizontal-padding: math.div($fluent-invalid-badge-horizontal-padding, 2) !default; +$fluent-invalid-badge-size: calc(#{$fluent-base-icon-size} - #{ds.$spacing-20}) !default; +$fluent-invalid-badge-horizontal-padding: calc((#{$fluent-inline-borderedwidget-inner-size} - #{$fluent-invalid-badge-size}) / 2) !default; +$fluent-invalid-badge-halfhorizontal-padding: calc((#{$fluent-invalid-badge-horizontal-padding}) / 2) !default; -$fluent-valid-badge-font-size: $fluent-base-font-size + 6px !default; +$fluent-valid-badge-font-size: calc(#{$fluent-base-font-size} + 6px) !default; $fluent-base-dropdown-widgets-shadow: null !default; @if $size == "default" { $fluent-line-height: 1.428571 !default; - $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 8px 16px 0 $base-dropdown-shadow-color2 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1, 0 ds.$spacing-80 ds.$spacing-160 0 $base-dropdown-shadow-color2 !default; } @else if $size == "compact" { $fluent-line-height: 1.3333 !default; - $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 4px 8px 0 $base-dropdown-shadow-color2 !default; + $fluent-base-dropdown-widgets-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1, 0 ds.$spacing-40 ds.$spacing-80 0 $base-dropdown-shadow-color2 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss index adc7edfb85ac..456b22020538 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss @@ -1,21 +1,22 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-context-menu-horizontal-padding: null !default; $fluent-context-menu-border-radius: $base-border-radius !default; -$fluent-context-menu-items-container-padding: 4px !default; -$fluent-context-menu-items-container-gap: 2px !default; +$fluent-context-menu-items-container-padding: ds.$spacing-40 !default; +$fluent-context-menu-items-container-gap: ds.$spacing-20 !default; $fluent-context-menu-item-border-radius: $base-border-radius !default; $fluent-context-menu-item-content-gap: null !default; -$fluent-context-menu-item-text-padding-inline: 2px !default; +$fluent-context-menu-item-text-padding-inline: ds.$spacing-20 !default; @if $size == "default" { - $fluent-context-menu-horizontal-padding: 6px !default; - $fluent-context-menu-item-content-gap: 6px !default; + $fluent-context-menu-horizontal-padding: ds.$spacing-60 !default; + $fluent-context-menu-item-content-gap: ds.$spacing-60 !default; } @else if $size == "compact" { - $fluent-context-menu-horizontal-padding: 4px !default; - $fluent-context-menu-item-content-gap: 4px !default; + $fluent-context-menu-horizontal-padding: ds.$spacing-40 !default; + $fluent-context-menu-item-content-gap: ds.$spacing-40 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss index 97f30a62ec83..76cff4a82cd0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss @@ -1,22 +1,23 @@ @use "../sizes" as *; @use '../../base/dataGrid/variables' as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-datagrid-cell-padding: 7px !default; -$fluent-datagrid-grouppanel-item-font-weight: 400 !default; +$fluent-datagrid-cell-padding: ds.$spacing-70 !default; +$fluent-datagrid-grouppanel-item-font-weight: ds.$font-weight-400 !default; $area-field-border-radius: null !default; $area-field-top-bottom-padding: null !default; @if $size == "default" { - $area-field-border-radius: 6px !default; - $area-field-top-bottom-padding: 5px !default; + $area-field-border-radius: ds.$border-radius-60 !default; + $area-field-top-bottom-padding: ds.$spacing-50 !default; } @else if $size == "compact" { - $area-field-border-radius: 4px !default; - $area-field-top-bottom-padding: 2px !default; + $area-field-border-radius: ds.$border-radius-40 !default; + $area-field-top-bottom-padding: ds.$spacing-20 !default; } $datagrid-cell-padding: $fluent-datagrid-cell-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss index 9190ee007c1c..683da8d7b734 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss @@ -1,7 +1,8 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-datebox-overlay-item-margin: 16px !default; -$fluent-datebox-overlay-item-margin-adaptive: 18px !default; -$fluent-datebox-popup-content-margin: 0 34px !default; +$fluent-datebox-overlay-item-margin: ds.$spacing-160 !default; +$fluent-datebox-overlay-item-margin-adaptive: ds.$spacing-180 !default; +$fluent-datebox-popup-content-margin: 0 ds.$spacing-340 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss index 492b886d1e57..5558c920c127 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss @@ -1,13 +1,14 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-daterangebox-active-bar-horizontal-margin: null !default; @if $size == "default" { - $fluent-daterangebox-active-bar-horizontal-margin: 12px !default; + $fluent-daterangebox-active-bar-horizontal-margin: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-daterangebox-active-bar-horizontal-margin: 8px !default; + $fluent-daterangebox-active-bar-horizontal-margin: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss index b1814e4bcc55..5e81ec4d9cb4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss @@ -9,7 +9,7 @@ // adduse @use "../scrollable"; -$fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $fluent-dateview-roller-item-height, 2); +$fluent-dateview-roller-padding: calc((#{$fluent-dateview-roller-height} - #{$fluent-dateview-roller-item-height}) / 2); .dx-dateview-rollers { width: auto; @@ -109,7 +109,7 @@ $fluent-dateview-roller-padding: math.div($fluent-dateview-roller-height - $flue } &::before { - top: -$fluent-dateview-roller-padding; + top: calc(-1 * #{$fluent-dateview-roller-padding}); @include gradient-linear($dateview-shadow-up); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss index 909a1dc86e73..aadd671635b4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-dateview-roller-height: 182px !default; -$fluent-dateview-roller-item-height: 40px !default; +$fluent-dateview-roller-height: 182px !default; // dx-offscale: 182px +$fluent-dateview-roller-item-height: ds.$spacing-400 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss index 242168a9d73a..2e23b9025dfb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -332,7 +332,7 @@ $diagram-toolbox-title-size: 18px; padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing; .dx-toolbar-item { - margin-bottom: math.div($diagram-properties-panel-spacing, 2); + margin-bottom: calc((#{$diagram-properties-panel-spacing}) / 2); .dx-button { height: auto; @@ -460,7 +460,7 @@ $diagram-toolbox-title-size: 18px; .dx-menu-separator { width: 1px; - height: $fluent-diagram-toolbar-icon-size + $diagram-touchbar-item-padding + $diagram-touchbar-item-padding + 2; + height: calc(#{$fluent-diagram-toolbar-icon-size} + #{$diagram-touchbar-item-padding} + #{$diagram-touchbar-item-padding} + 2px); margin: 0; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss index 71d596b7f77c..b9c97482d134 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -21,54 +22,54 @@ $diagram-small-editor-width: null !default; $diagram-medium-editor-width: null !default; $diagram-large-editor-width: null !default; -$diagram-toolbox-input-margin: 2px !default; +$diagram-toolbox-input-margin: ds.$spacing-20 !default; @if $size == "default" { - $diagram-toolbox-width: 156px !default; - $diagram-toolbox-h-padding: 12px !default; - $diagram-toolbox-accordion-v-padding: 8px !default; - $diagram-toolbox-input-h-padding: 9px !default; - $diagram-toolbox-input-v-padding: 12px !default; - $diagram-toolbox-input-image-size: 18px !default; - $diagram-toolbox-input-image-padding: 6px 4px !default; - $diagram-toolbox-mobile-padding: 68px !default; + $diagram-toolbox-width: 156px !default; // dx-offscale: 156px + $diagram-toolbox-h-padding: ds.$spacing-120 !default; + $diagram-toolbox-accordion-v-padding: ds.$spacing-80 !default; + $diagram-toolbox-input-h-padding: ds.$spacing-90 !default; + $diagram-toolbox-input-v-padding: ds.$spacing-120 !default; + $diagram-toolbox-input-image-size: ds.$spacing-180 !default; + $diagram-toolbox-input-image-padding: ds.$spacing-60 ds.$spacing-40 !default; + $diagram-toolbox-mobile-padding: 68px !default; // dx-offscale: 68px $diagram-properties-panel-padding: 0 !default; - $diagram-properties-panel-spacing: 16px !default; - $diagram-properties-layout-icon-size: 64px !default; + $diagram-properties-panel-spacing: ds.$spacing-160 !default; + $diagram-properties-layout-icon-size: ds.$spacing-640 !default; - $diagram-touchbar-item-padding: 10px !default; + $diagram-touchbar-item-padding: ds.$spacing-100 !default; - $diagram-floating-toolbar-items-height: 36px !default; - $diagram-floating-toolbar-editor-padding: 8px 6px !default; - $diagram-floating-toolbar-editor-button-padding: 4px !default; + $diagram-floating-toolbar-items-height: ds.$spacing-360 !default; + $diagram-floating-toolbar-editor-padding: ds.$spacing-80 ds.$spacing-60 !default; + $diagram-floating-toolbar-editor-button-padding: ds.$spacing-40 !default; - $diagram-small-editor-width: 100px !default; - $diagram-medium-editor-width: 180px !default; - $diagram-large-editor-width: 280px !default; + $diagram-small-editor-width: ds.$spacing-1000 !default; + $diagram-medium-editor-width: 180px !default; // dx-offscale: 180px + $diagram-large-editor-width: 280px !default; // dx-offscale: 280px } @else if $size == "compact" { - $diagram-toolbox-width: 130px !default; - $diagram-toolbox-h-padding: 10px !default; - $diagram-toolbox-accordion-v-padding: 6px !default; - $diagram-toolbox-input-h-padding: 8px !default; - $diagram-toolbox-input-v-padding: 8px !default; - $diagram-toolbox-input-image-size: 14px !default; - $diagram-toolbox-input-image-padding: 3px 4px !default; - $diagram-toolbox-mobile-padding: 58px !default; + $diagram-toolbox-width: 130px !default; // dx-offscale: 130px + $diagram-toolbox-h-padding: ds.$spacing-100 !default; + $diagram-toolbox-accordion-v-padding: ds.$spacing-60 !default; + $diagram-toolbox-input-h-padding: ds.$spacing-80 !default; + $diagram-toolbox-input-v-padding: ds.$spacing-80 !default; + $diagram-toolbox-input-image-size: ds.$spacing-140 !default; + $diagram-toolbox-input-image-padding: ds.$spacing-30 ds.$spacing-40 !default; + $diagram-toolbox-mobile-padding: 58px !default; // dx-offscale: 58px - $diagram-properties-panel-padding: 6px !default; - $diagram-properties-panel-spacing: 8px !default; - $diagram-properties-layout-icon-size: 48px !default; + $diagram-properties-panel-padding: ds.$spacing-60 !default; + $diagram-properties-panel-spacing: ds.$spacing-80 !default; + $diagram-properties-layout-icon-size: ds.$spacing-480 !default; - $diagram-touchbar-item-padding: 7px !default; + $diagram-touchbar-item-padding: ds.$spacing-70 !default; - $diagram-floating-toolbar-items-height: 28px !default; - $diagram-floating-toolbar-editor-padding: 6px 4px !default; - $diagram-floating-toolbar-editor-button-padding: 2px !default; + $diagram-floating-toolbar-items-height: ds.$spacing-280 !default; + $diagram-floating-toolbar-editor-padding: ds.$spacing-60 ds.$spacing-40 !default; + $diagram-floating-toolbar-editor-button-padding: ds.$spacing-20 !default; - $diagram-small-editor-width: 80px !default; - $diagram-medium-editor-width: 120px !default; - $diagram-large-editor-width: 220px !default; + $diagram-small-editor-width: ds.$spacing-800 !default; + $diagram-medium-editor-width: ds.$spacing-1200 !default; + $diagram-large-editor-width: 220px !default; // dx-offscale: 220px } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss index 3f1f76b37cd8..f126691f1584 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-dropdownbutton-icon-spindown-size: null !default; $fluent-dropdownbutton-icon-spindown-right-size: null !default; @if $size == "default" { - $fluent-dropdownbutton-action-horizontal-padding: 12px !default; - $fluent-dropdownbutton-icon-spindown-size: 24px; - $fluent-dropdownbutton-icon-spindown-right-size: 16px !default; + $fluent-dropdownbutton-action-horizontal-padding: ds.$spacing-120 !default; + $fluent-dropdownbutton-icon-spindown-size: ds.$spacing-240; + $fluent-dropdownbutton-icon-spindown-right-size: ds.$spacing-160 !default; } @else if $size == "compact" { - $fluent-dropdownbutton-action-horizontal-padding: 8px !default; - $fluent-dropdownbutton-icon-spindown-size: 18px; - $fluent-dropdownbutton-icon-spindown-right-size: 12px !default; + $fluent-dropdownbutton-action-horizontal-padding: ds.$spacing-80 !default; + $fluent-dropdownbutton-icon-spindown-size: ds.$spacing-180; + $fluent-dropdownbutton-icon-spindown-right-size: ds.$spacing-120 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss index 9a8a703a5d7b..e55fa8066fe0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss @@ -14,15 +14,11 @@ $fluent-dropdowneditor-container-button-size: $fluent-base-icon-size; -$fluent-dropdowneditor-invalid-badge-offset: - $fluent-dropdowneditor-container-button-size + - $fluent-invalid-badge-halfhorizontal-padding; +$fluent-dropdowneditor-invalid-badge-offset: calc(#{$fluent-dropdowneditor-container-button-size} + #{$fluent-invalid-badge-halfhorizontal-padding}); -$fluent-dropdowneditor-invalid-badge-with-clear-offset: - $fluent-dropdowneditor-container-button-size * 2 + - $fluent-invalid-badge-halfhorizontal-padding; +$fluent-dropdowneditor-invalid-badge-with-clear-offset: calc(#{$fluent-dropdowneditor-container-button-size} * 2 + #{$fluent-invalid-badge-halfhorizontal-padding}); -$fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-invalid-badge-horizontal-padding; +$fluent-dropdowneditor-invalid-badge-size: calc(#{$fluent-invalid-badge-size} + #{$fluent-invalid-badge-horizontal-padding}); @mixin dx-dropdowneditor-button-icon() { width: $fluent-dropdowneditor-container-button-size; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss index 6de961b10942..a3966a740674 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,11 +8,11 @@ $fluent-dropdowneditor-list-line-height: null !default; @if $size == "default" { - $fluent-dropdowneditor-list-font-size: 14px !default; - $fluent-dropdowneditor-list-line-height: 20px !default; + $fluent-dropdowneditor-list-font-size: ds.$font-size-140 !default; + $fluent-dropdowneditor-list-line-height: ds.$line-height-200 !default; } @else if $size == "compact" { - $fluent-dropdowneditor-list-font-size: 13px !default; - $fluent-dropdowneditor-list-line-height: 16px !default; + $fluent-dropdowneditor-list-font-size: ds.$spacing-130 !default; + $fluent-dropdowneditor-list-line-height: ds.$line-height-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss index e3b9ae305c11..05cf7fe0b600 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-dropdownmenu-section-horizontal-margin: 4px !default; -$fluent-dropdownmenu-section-row-gap: 2px !default; +$fluent-dropdownmenu-section-horizontal-margin: ds.$spacing-40 !default; +$fluent-dropdownmenu-section-row-gap: ds.$spacing-20 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss index 3d0f93acee27..02224f4f66ae 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss @@ -49,7 +49,7 @@ @mixin dx-field-value-widget-position($name, $size) { &.#{$name}, &:not(.dx-widget) > .#{$name} { - margin: math.div($fluent-field-min-height - $size, 2) 0; + margin: calc((#{$fluent-field-min-height} - #{$size}) / 2) 0; } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss index 92be9dc5e04d..ea7eee1f306f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; @use "../common/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,24 +11,24 @@ $fluent-field-vertical-margin: null !default; $fluent-field-labelvalue-spacing: null !default; @if $size == "default" { - $fluent-fieldset-vertical-margin: 30px !default; - $fluent-fieldset-horizontal-margin: 20px !default; - $fluent-fieldset-header-vertical-margin: 20px !default; - $fluent-field-vertical-margin: 30px !default; - $fluent-field-labelvalue-spacing: 15px !default; + $fluent-fieldset-vertical-margin: ds.$spacing-300 !default; + $fluent-fieldset-horizontal-margin: ds.$spacing-200 !default; + $fluent-fieldset-header-vertical-margin: ds.$spacing-200 !default; + $fluent-field-vertical-margin: ds.$spacing-300 !default; + $fluent-field-labelvalue-spacing: ds.$spacing-150 !default; } @else if $size == "compact" { - $fluent-fieldset-vertical-margin: 20px !default; - $fluent-fieldset-horizontal-margin: 16px !default; - $fluent-fieldset-header-vertical-margin: 16px !default; - $fluent-field-vertical-margin: 20px !default; - $fluent-field-labelvalue-spacing: 12px !default; + $fluent-fieldset-vertical-margin: ds.$spacing-200 !default; + $fluent-fieldset-horizontal-margin: ds.$spacing-160 !default; + $fluent-fieldset-header-vertical-margin: ds.$spacing-160 !default; + $fluent-field-vertical-margin: ds.$spacing-200 !default; + $fluent-field-labelvalue-spacing: ds.$spacing-120 !default; } $fluent-field-min-height: $fluent-base-inline-widget-height !default; -$fluent-field-value-top-padding: 21px !default; +$fluent-field-value-top-padding: ds.$spacing-210 !default; $fluent-field-value-horizontal-padding: $fluent-base-inline-horizontal-padding !default; -$fluent-field-value-bottom-padding: 20px !default; -$fluent-fieldset-attention-icon-offset: $fluent-base-inline-horizontal-padding + $fluent-invalid-badge-size !default; -$fluent-radiogroup-min-height: 26px !default; +$fluent-field-value-bottom-padding: ds.$spacing-200 !default; +$fluent-fieldset-attention-icon-offset: calc(#{$fluent-base-inline-horizontal-padding} + #{$fluent-invalid-badge-size}) !default; +$fluent-radiogroup-min-height: ds.$spacing-260 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss index cee27095492b..bf4740d8f351 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss @@ -31,9 +31,9 @@ } .dx-filemanager-progress-box-image { - width: $fluent-base-icon-size * 2; - height: $fluent-base-icon-size * 2; - font-size: $fluent-base-icon-size * 2; + width: calc(#{$fluent-base-icon-size} * 2); + height: calc(#{$fluent-base-icon-size} * 2); + font-size: calc(#{$fluent-base-icon-size} * 2); } .dx-filemanager-progress-box-error { @@ -155,9 +155,9 @@ } .dx-filemanager-thumbnails-item-thumbnail { - width: $fluent-base-icon-size * 2; - height: $fluent-base-icon-size * 2; - font-size: $fluent-base-icon-size * 2; + width: calc(#{$fluent-base-icon-size} * 2); + height: calc(#{$fluent-base-icon-size} * 2); + font-size: calc(#{$fluent-base-icon-size} * 2); } .dx-filemanager-item-custom-thumbnail { @@ -230,10 +230,10 @@ } .dx-filemanager-view-switcher-popup { - width: 2 * $filemanager-toolbar-viewmode-padding + $fluent-base-icon-size; + width: calc(2 * #{$filemanager-toolbar-viewmode-padding} + #{$fluent-base-icon-size}); .dx-dropdownbutton-popup-wrapper.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { - padding-left: $filemanager-toolbar-viewmode-padding - 1px; + padding-left: calc(#{$filemanager-toolbar-viewmode-padding} - 1px); padding-right: $filemanager-toolbar-viewmode-padding; text-overflow: clip; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss index 201671360267..fcc67ed7331f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss @@ -2,6 +2,7 @@ // adduse @use "../toolbar/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; $filemanager-toolbar-separator-height: null !default; $filemanager-toolbar-viewmode-width: null !default; @@ -20,34 +21,34 @@ $filemanager-progress-box-button-close-margin-top: null !default; $filemanager-toolbar-height: $fluent-toolbar-height; @if $size == "default" { - $filemanager-toolbar-separator-height: 36px !default; - $filemanager-toolbar-viewmode-width: 190px !default; - $filemanager-toolbar-viewmode-padding: 6px !default; - $filemanager-breadcrumbs-item-padding-top: 7px !default; - $filemanager-breadcrumbs-item-padding-bottom: 8px !default; - $filemanager-details-view-checkbox-column-width: 49px !default; - $filemanager-file-actions-button-size: 28px !default; - $filemanager-treeview-item-top-bottom-padding: 11px !default; - $filemanager-file-actions-button-top-bottom-padding: 2px !default; - $filemanager-contextmenu-text-item-left-margin: 48px !default; - $filemanager-large-icon-size: 22px !default; - $filemanager-progress-panel-title-padding: 16px !default; - $filemanager-progress-box-button-close-margin-top: 6px !default; + $filemanager-toolbar-separator-height: ds.$spacing-360 !default; + $filemanager-toolbar-viewmode-width: 190px !default; // dx-offscale: 190px + $filemanager-toolbar-viewmode-padding: ds.$spacing-60 !default; + $filemanager-breadcrumbs-item-padding-top: ds.$spacing-70 !default; + $filemanager-breadcrumbs-item-padding-bottom: ds.$spacing-80 !default; + $filemanager-details-view-checkbox-column-width: 49px !default; // dx-offscale: 49px + $filemanager-file-actions-button-size: ds.$spacing-280 !default; + $filemanager-treeview-item-top-bottom-padding: ds.$spacing-110 !default; + $filemanager-file-actions-button-top-bottom-padding: ds.$spacing-20 !default; + $filemanager-contextmenu-text-item-left-margin: ds.$spacing-480 !default; + $filemanager-large-icon-size: ds.$spacing-220 !default; + $filemanager-progress-panel-title-padding: ds.$spacing-160 !default; + $filemanager-progress-box-button-close-margin-top: ds.$spacing-60 !default; } @else if $size == "compact" { - $filemanager-toolbar-separator-height: 26px !default; - $filemanager-toolbar-viewmode-width: 150px !default; - $filemanager-toolbar-viewmode-padding: 5px !default; - $filemanager-breadcrumbs-item-padding-top: 8px !default; - $filemanager-breadcrumbs-item-padding-bottom: 9px !default; - $filemanager-details-view-checkbox-column-width: 43px !default; - $filemanager-file-actions-button-size: 22px !default; - $filemanager-treeview-item-top-bottom-padding: 8px !default; - $filemanager-file-actions-button-top-bottom-padding: 9px !default; - $filemanager-contextmenu-text-item-left-margin: 30px !default; - $filemanager-large-icon-size: 16px !default; - $filemanager-progress-panel-title-padding: 10px !default; - $filemanager-progress-box-button-close-margin-top: 5px !default; + $filemanager-toolbar-separator-height: ds.$spacing-260 !default; + $filemanager-toolbar-viewmode-width: 150px !default; // dx-offscale: 150px + $filemanager-toolbar-viewmode-padding: ds.$spacing-50 !default; + $filemanager-breadcrumbs-item-padding-top: ds.$spacing-80 !default; + $filemanager-breadcrumbs-item-padding-bottom: ds.$spacing-90 !default; + $filemanager-details-view-checkbox-column-width: 43px !default; // dx-offscale: 43px + $filemanager-file-actions-button-size: ds.$spacing-220 !default; + $filemanager-treeview-item-top-bottom-padding: ds.$spacing-80 !default; + $filemanager-file-actions-button-top-bottom-padding: ds.$spacing-90 !default; + $filemanager-contextmenu-text-item-left-margin: ds.$spacing-300 !default; + $filemanager-large-icon-size: ds.$spacing-160 !default; + $filemanager-progress-panel-title-padding: ds.$spacing-100 !default; + $filemanager-progress-box-button-close-margin-top: ds.$spacing-50 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss index 1a65dde1beb1..e4cff0d62dbc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss @@ -50,17 +50,17 @@ $fluent-fileuploader-file-wrapper-border-size: 3px; .dx-fileuploader-input { display: block; width: 100%; - padding-top: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size; + padding-top: calc(#{$fluent-fileuploader-vertical-padding} * 2 + #{$fluent-fileuploader-file-wrapper-border-size}); padding-right: $fluent-fileuploader-file-wrapper-border-size; // NOTE: height of the widget should be the same in default and drag over states, but not with margin help - padding-bottom: $fluent-fileuploader-vertical-padding * 2 + $fluent-fileuploader-file-wrapper-border-size + 1px; + padding-bottom: calc(#{$fluent-fileuploader-vertical-padding} * 2 + #{$fluent-fileuploader-file-wrapper-border-size} + 1px); padding-left: $fluent-fileuploader-file-wrapper-border-size; box-sizing: content-box; } .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors - padding: $fluent-fileuploader-vertical-padding * 2 $fluent-fileuploader-vertical-padding + 2px; + padding: calc(#{$fluent-fileuploader-vertical-padding} * 2) calc(#{$fluent-fileuploader-vertical-padding} + 2px); border: $fluent-fileuploader-file-wrapper-border-size dashed; border-color: $fileuploader-border-color; } @@ -76,7 +76,7 @@ $fluent-fileuploader-file-wrapper-border-size: 3px; } .dx-fileuploader-input-label { - padding: $fluent-fileuploader-vertical-padding + math.div(math.div($fluent-base-font-size, 2) - $fluent-fileuploader-vertical-padding, 2) + 1px $fluent-fileuploader-vertical-padding + 2px; + padding: calc(#{$fluent-fileuploader-vertical-padding} + (#{$fluent-base-font-size} / 2 - #{$fluent-fileuploader-vertical-padding}) / 2 + 1px) calc(#{$fluent-fileuploader-vertical-padding} + 2px); color: $fileuploader-filename-color; @include dx-overflow(); @@ -162,7 +162,7 @@ $fluent-fileuploader-file-wrapper-border-size: 3px; } .dx-fileuploader-file-name { - padding-bottom: math.div($fluent-fileuploader-vertical-padding, 2); + padding-bottom: calc((#{$fluent-fileuploader-vertical-padding}) / 2); color: $fileuploader-filename-color; font-weight: 500; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss index 5dcc5c5f83c3..237452ba7053 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss @@ -1,35 +1,36 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-fileuploader-file-container-padding: null !default; $fluent-fileuploader-file-container-text-margin: null !default; $fluent-fileuploader-file-container-button-margin: null !default; -$fluent-fileuploader-file-cancel-button-margin-left: 4px !default; +$fluent-fileuploader-file-cancel-button-margin-left: ds.$spacing-40 !default; $fluent-fileuploader-file-container-button-size: null !default; -$fluent-fileuploader-vertical-padding: 7px !default; +$fluent-fileuploader-vertical-padding: ds.$spacing-70 !default; $fluent-fileuploader-files-container-padding: null !default; $fluent-fileuploader-file-size-margin: null !default; $fluent-fileuploader-file-icon-font-size: null !default; -$fluent-fileuploader-files-container-rounding: 4px !default; +$fluent-fileuploader-files-container-rounding: ds.$spacing-40 !default; @if $size == "default" { - $fluent-fileuploader-file-container-padding: 5px 8px !default; - $fluent-fileuploader-file-container-text-margin: 15px !default; - $fluent-fileuploader-file-container-button-margin: 8px !default; - $fluent-fileuploader-file-container-button-size: 32px !default; - $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; - $fluent-fileuploader-file-size-margin: 0 0 0 4px !default; - $fluent-fileuploader-file-icon-font-size: 20px !default; + $fluent-fileuploader-file-container-padding: ds.$spacing-50 ds.$spacing-80 !default; + $fluent-fileuploader-file-container-text-margin: ds.$spacing-150 !default; + $fluent-fileuploader-file-container-button-margin: ds.$spacing-80 !default; + $fluent-fileuploader-file-container-button-size: ds.$spacing-320 !default; + $fluent-fileuploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 0 ds.$spacing-40 !default; + $fluent-fileuploader-file-icon-font-size: ds.$font-size-200 !default; } @else if $size == "compact" { - $fluent-fileuploader-file-container-padding: 2px 4px !default; - $fluent-fileuploader-file-container-text-margin: 6px !default; - $fluent-fileuploader-file-container-button-margin: 2px !default; - $fluent-fileuploader-file-container-button-size: 28px !default; - $fluent-fileuploader-files-container-padding: 12px 4px 0 !default; - $fluent-fileuploader-file-size-margin: 0 0 4px !default; - $fluent-fileuploader-file-icon-font-size: 16px !default; + $fluent-fileuploader-file-container-padding: ds.$spacing-20 ds.$spacing-40 !default; + $fluent-fileuploader-file-container-text-margin: ds.$spacing-60 !default; + $fluent-fileuploader-file-container-button-margin: ds.$spacing-20 !default; + $fluent-fileuploader-file-container-button-size: ds.$spacing-280 !default; + $fluent-fileuploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default; + $fluent-fileuploader-file-size-margin: 0 0 ds.$spacing-40 !default; + $fluent-fileuploader-file-icon-font-size: ds.$font-size-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss index 49a497dce89e..897832f88a0b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss @@ -100,7 +100,7 @@ .dx-rtl { .dx-treeview-node { > .dx-treeview-item { - padding-right: $fluent-filterbuilder-treeview-item-left-padding * 2; + padding-right: calc(#{$fluent-filterbuilder-treeview-item-left-padding} * 2); } &.dx-treeview-node-is-leaf > .dx-treeview-item { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss index 2f9224d4db40..af4a1544a53d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,20 +11,20 @@ $fluent-filterbuilder-treeview-toggle-left: null !default; $fluent-filterbuilder-treeview-item-min-heigth: null !default; @if $size == "default" { - $fluent-filterbuilder-icon-padding: 8px !default; - $fluent-filterbuilder-filled-editor-padding: 13px 12px !default; + $fluent-filterbuilder-icon-padding: ds.$spacing-80 !default; + $fluent-filterbuilder-filled-editor-padding: ds.$spacing-130 ds.$spacing-120 !default; - $fluent-filterbuilder-treeview-item-left-padding: 12px !default; - $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default; - $fluent-filterbuilder-treeview-toggle-left: 16px !default; - $fluent-filterbuilder-treeview-item-min-heigth: 32px !default; + $fluent-filterbuilder-treeview-item-left-padding: ds.$spacing-120 !default; + $fluent-filterbuilder-treeview-item-padding: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-treeview-toggle-left: ds.$spacing-160 !default; + $fluent-filterbuilder-treeview-item-min-heigth: ds.$spacing-320 !default; } @else if $size == "compact" { - $fluent-filterbuilder-icon-padding: 4px !default; - $fluent-filterbuilder-filled-editor-padding: 8px 8px !default; - $fluent-filterbuilder-treeview-item-left-padding: 4px !default; - $fluent-filterbuilder-treeview-item-padding: 4px 12px 4px $fluent-filterbuilder-treeview-item-left-padding !default; + $fluent-filterbuilder-icon-padding: ds.$spacing-40 !default; + $fluent-filterbuilder-filled-editor-padding: ds.$spacing-80 ds.$spacing-80 !default; + $fluent-filterbuilder-treeview-item-left-padding: ds.$spacing-40 !default; + $fluent-filterbuilder-treeview-item-padding: ds.$spacing-40 ds.$spacing-120 ds.$spacing-40 $fluent-filterbuilder-treeview-item-left-padding !default; $fluent-filterbuilder-treeview-toggle-left: 0 !default; - $fluent-filterbuilder-treeview-item-min-heigth: 24px !default; + $fluent-filterbuilder-treeview-item-min-heigth: ds.$spacing-240 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss index 4eabd6d030f2..dbae8ff4ea2f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,7 +10,7 @@ $fluent-form-group-caption-font-size: null !default; $fluent-form-top-label-padding: 0 !default; $fluent-form-top-label-bottom-margin: null !default; $fluent-form-default-top-padding: null !default; -$fluent-form-help-text-font-size: 12px !default; +$fluent-form-help-text-font-size: ds.$font-size-120 !default; $fluent-form-layout-manager-horizontal-padding: null !default; $fluent-form-layout-manager-vertical-padding: null !default; $fluent-form-layout-manager-tabpanel-content-padding: null !default; @@ -19,27 +20,27 @@ $fluent-form-label-icon-size: $fluent-base-icon-size !default; $fluent-form-group-custom-caption-icon-margin: null !default; @if $size == "default" { - $fluent-form-group-caption-bottom-margin: 4px !default; - $fluent-form-group-caption-top-padding: 16px !default; - $fluent-form-group-content-bottom-padding: 16px !default; - $fluent-form-group-caption-font-size: 20px !default; - $fluent-form-group-custom-caption-icon-margin: 6px !default; - $fluent-form-default-top-padding: 16px !default; - $fluent-form-top-label-bottom-margin: 4px !default; - $fluent-form-layout-manager-horizontal-padding: 12px !default; - $fluent-form-layout-manager-vertical-padding: 8px !default; - $fluent-form-layout-manager-tabpanel-content-padding: 24px !default; + $fluent-form-group-caption-bottom-margin: ds.$spacing-40 !default; + $fluent-form-group-caption-top-padding: ds.$spacing-160 !default; + $fluent-form-group-content-bottom-padding: ds.$spacing-160 !default; + $fluent-form-group-caption-font-size: ds.$font-size-200 !default; + $fluent-form-group-custom-caption-icon-margin: ds.$spacing-60 !default; + $fluent-form-default-top-padding: ds.$spacing-160 !default; + $fluent-form-top-label-bottom-margin: ds.$spacing-40 !default; + $fluent-form-layout-manager-horizontal-padding: ds.$spacing-120 !default; + $fluent-form-layout-manager-vertical-padding: ds.$spacing-80 !default; + $fluent-form-layout-manager-tabpanel-content-padding: ds.$spacing-240 !default; } @else if $size == "compact" { - $fluent-form-group-caption-bottom-margin: 4px !default; - $fluent-form-group-caption-top-padding: 12px !default; - $fluent-form-group-content-bottom-padding: 12px !default; - $fluent-form-group-caption-font-size: 16px !default; - $fluent-form-group-custom-caption-icon-margin: 4px !default; - $fluent-form-default-top-padding: 8px !default; - $fluent-form-top-label-bottom-margin: 2px !default; - $fluent-form-layout-manager-horizontal-padding: 8px !default; - $fluent-form-layout-manager-vertical-padding: 6px !default; - $fluent-form-layout-manager-tabpanel-content-padding: 16px !default; + $fluent-form-group-caption-bottom-margin: ds.$spacing-40 !default; + $fluent-form-group-caption-top-padding: ds.$spacing-120 !default; + $fluent-form-group-content-bottom-padding: ds.$spacing-120 !default; + $fluent-form-group-caption-font-size: ds.$font-size-160 !default; + $fluent-form-group-custom-caption-icon-margin: ds.$spacing-40 !default; + $fluent-form-default-top-padding: ds.$spacing-80 !default; + $fluent-form-top-label-bottom-margin: ds.$spacing-20 !default; + $fluent-form-layout-manager-horizontal-padding: ds.$spacing-80 !default; + $fluent-form-layout-manager-vertical-padding: ds.$spacing-60 !default; + $fluent-form-layout-manager-tabpanel-content-padding: ds.$spacing-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss index 03ec5af7485a..f8547d8c28b8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss @@ -56,7 +56,7 @@ } &::before { - left: $fluent-gallery-button-padding - 1; + left: calc(#{$fluent-gallery-button-padding} - 1px); right: auto; margin-left: 0; } @@ -70,7 +70,7 @@ } &::before { - right: $fluent-gallery-button-padding - 1; + right: calc(#{$fluent-gallery-button-padding} - 1px); left: auto; } } @@ -88,7 +88,7 @@ border: 1px solid; border-color: $gallery-indicator-item-border-color; pointer-events: auto; - margin: 5px - math.div($fluent-gallery-indicator-size, 2) 6px; + margin: calc(5px - #{$fluent-gallery-indicator-size} / 2) 6px; width: $fluent-gallery-indicator-size; height: $fluent-gallery-indicator-size; background: $gallery-indicator-bg; @@ -101,7 +101,7 @@ background: $gallery-indicator-item-selected-bg; border: 2px solid; border-color: $gallery-indicator-selected-border-color; - margin: 5px - math.div($fluent-gallery-indicator-selected-size, 2) 6px; + margin: calc(5px - #{$fluent-gallery-indicator-selected-size} / 2) 6px; } .dx-state-focused.dx-gallery { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss index 4187dac269e1..9d53149bdf69 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss @@ -1,7 +1,8 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-gallery-indicator-size: 8px !default; -$fluent-gallery-indicator-selected-size: 12px !default; -$fluent-gallery-button-padding: 8px !default; +$fluent-gallery-indicator-size: ds.$spacing-80 !default; +$fluent-gallery-indicator-selected-size: ds.$spacing-120 !default; +$fluent-gallery-button-padding: ds.$spacing-80 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss index 40f26ca462f6..d2eb7093622e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss @@ -101,8 +101,8 @@ $gantt-successor-background-color: white; } &.dx-gantt-parent { - height: $gantt-task-height - 2px; - line-height: $gantt-task-height - 2px; + height: calc(#{$gantt-task-height} - 2px); + line-height: calc(#{$gantt-task-height} - 2px); background-color: $gantt-parent-task-background-color; border-left-color: $gantt-parent-task-background-color; border-right-color: $gantt-parent-task-background-color; @@ -155,7 +155,7 @@ $gantt-successor-background-color: white; } .dx-gantt-task-edit-frame { - height: $gantt-task-height - 2px; + height: calc(#{$gantt-task-height} - 2px); } } } @@ -239,12 +239,12 @@ $gantt-successor-background-color: white; .dx-gantt-task-edit-dependency-r, .dx-gantt-task-edit-successor-dependency-r { - left: -$gantt-dependency-successor-size - 1px; + left: calc(-1 * #{$gantt-dependency-successor-size} - 1px); } .dx-gantt-task-edit-dependency-l, .dx-gantt-task-edit-successor-dependency-l { - right: -$gantt-dependency-successor-size - 1px; + right: calc(-1 * #{$gantt-dependency-successor-size} - 1px); } .dx-gantt-task-edit-dependency-line { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss index a1b69906b929..035ec8b80ee6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,18 +12,18 @@ $gantt-milestone-size: null !default; $gantt-task-wrapper-padding-top: 0 !default; @if $size == "default" { - $gantt-header-item-height: 57px !default; - $gantt-task-title-padding-left: 11px !default; - $gantt-task-height: 27px !default; - $gantt-dependency-successor-size: 12px !default; - $gantt-milestone-size: 17px !default; + $gantt-header-item-height: 57px !default; // dx-offscale: 57px + $gantt-task-title-padding-left: ds.$spacing-110 !default; + $gantt-task-height: 27px !default; // dx-offscale: 27px + $gantt-dependency-successor-size: ds.$spacing-120 !default; + $gantt-milestone-size: ds.$spacing-170 !default; } @else if $size == "compact" { - $gantt-header-item-height: 51px !default; - $gantt-task-title-padding-left: 9px !default; - $gantt-task-height: 20px !default; - $gantt-dependency-successor-size: 10px !default; - $gantt-milestone-size: 14px !default; + $gantt-header-item-height: 51px !default; // dx-offscale: 51px + $gantt-task-title-padding-left: ds.$spacing-90 !default; + $gantt-task-height: ds.$spacing-200 !default; + $gantt-dependency-successor-size: ds.$spacing-100 !default; + $gantt-milestone-size: ds.$spacing-140 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss index b7e94557b003..243572337de3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss @@ -53,7 +53,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-menu { background-color: transparent; - margin-top: math.div(($fluent-grid-base-header-height - $fluent-button-height), 2); + margin-top: calc((#{$fluent-grid-base-header-height} - #{$fluent-button-height}) / 2); margin-left: 5px !important; // stylelint-disable-line declaration-no-important height: $fluent-button-height; @@ -103,41 +103,41 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-menu-items-container { .dx-icon-context-menu-sort-asc { @include dx-icon(sortuptext); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-context-menu-sort-desc { @include dx-icon(sortdowntext); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-context-menu-sort-none { - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-fix-column { @include dx-icon(fixcolumn); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-fix-column-left { @include dx-icon(fixcolumnleft); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-fix-column-right { @include dx-icon(fixcolumnright); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-stick-column { @include dx-icon(stickcolumn); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } .dx-icon-unfix-column { @include dx-icon(unfixcolumn); - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); + @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px)); } } } @@ -206,7 +206,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-sort-index-icon { padding-right: 4px; margin-left: -1px; - font-size: $fluent-grid-base-header-cell-font-size - 1px; + font-size: calc(#{$fluent-grid-base-header-cell-font-size} - 1px); position: relative; bottom: 1px; } @@ -247,7 +247,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-error-row { .dx-closebutton { float: right; - margin: $fluent-grid-base-cell-vertical-padding + 2px; + margin: calc(#{$fluent-grid-base-cell-vertical-padding} + 2px); @include dx-icon(close); @include dx-icon-sizing(14px); @@ -677,7 +677,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig .dx-texteditor-input { font-size: $fluent-grid-base-cell-font-size; - height: $fluent-grid-base-cell-height + 1; + height: calc(#{$fluent-grid-base-cell-height} + 1px); padding-right: $fluent-filter-row-between-editor-padding; padding-left: $fluent-filter-row-between-editor-padding; } @@ -883,8 +883,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig &.dx-#{$widget-name}-sticky-columns { .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input { - height: $fluent-grid-base-cell-height - 2px; - line-height: $fluent-grid-base-cell-height - 2px; + height: calc(#{$fluent-grid-base-cell-height} - 2px); + line-height: calc(#{$fluent-grid-base-cell-height} - 2px); } .dx-master-detail-row > .dx-master-detail-cell { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss index 0a040ed93e61..d37ea9b27b31 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -29,12 +30,12 @@ $fluent-filter-row-between-editor-padding: null !default; $fluent-command-column-additional-right-margin: null !default; $fluent-grid-base-treeview-select-all-item-offset: null !default; -$fluent-grid-base-header-line-height: 18px !default; +$fluent-grid-base-header-line-height: ds.$line-height-180 !default; $fluent-grid-base-header-icon-size: null !default; -$fluent-grid-base-header-icon-container-size: 20px !default; -$fluent-grid-base-column-chooser-item-margin: 8px !default; -$fluent-command-edit-icon-margin: 4px !default; -$fluent-command-edit-text-margin: 2px !default; +$fluent-grid-base-header-icon-container-size: ds.$spacing-200 !default; +$fluent-grid-base-column-chooser-item-margin: ds.$spacing-80 !default; +$fluent-command-edit-icon-margin: ds.$spacing-40 !default; +$fluent-command-edit-text-margin: ds.$spacing-20 !default; $fluent-command-edit-icon-size: null !default; $fluent-filter-panel-icon-size: null !default; @@ -43,76 +44,76 @@ $fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default; $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: null !default; $fluent-grid-base-command-ai-text-content-padding: null !default; $fluent-grid-base-command-ai-header-button-offset: null !default; -$fluent-grid-base-ai-prompt-editor-progressbar-height: 4px !default; +$fluent-grid-base-ai-prompt-editor-progressbar-height: ds.$spacing-40 !default; @if $size == "default" { - $fluent-grid-base-cell-height: 48px !default; - $fluent-grid-base-header-height: 48px !default; - $fluent-grid-base-cell-line-height: 20px !default; - $fluent-grid-base-cell-font-size: 14px !default; - - $fluent-grid-base-checkbox-size: 18px !default; - $fluent-grid-base-cell-horizontal-padding: 16px !default; - - $fluent-grid-base-texteditor-input-padding: 40px !default; - $fluent-grid-base-menu-item-padding: 11px 4px !default; - $fluent-grid-base-column-chooser-horizontal-padding: 24px !default; - $fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default; - $fluent-grid-base-header-panel-padding: 8px 0 !default; - $fluent-grid-base-grouppanel-item-margin: 6px !default; - - $fluent-grid-base-command-edit-column-width: 115px !default; - $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; - $fluent-grid-base-adaptive-column-height: 40px !default; - $fluent-grid-base-treeview-search-margin: 10px !default; - $fluent-grid-base-nodata-font-size: 17px !default; - - $fluent-filter-row-between-editor-padding: 12px !default; + $fluent-grid-base-cell-height: ds.$spacing-480 !default; + $fluent-grid-base-header-height: ds.$spacing-480 !default; + $fluent-grid-base-cell-line-height: ds.$line-height-200 !default; + $fluent-grid-base-cell-font-size: ds.$font-size-140 !default; + + $fluent-grid-base-checkbox-size: ds.$spacing-180 !default; + $fluent-grid-base-cell-horizontal-padding: ds.$spacing-160 !default; + + $fluent-grid-base-texteditor-input-padding: ds.$spacing-400 !default; + $fluent-grid-base-menu-item-padding: ds.$spacing-110 ds.$spacing-40 !default; + $fluent-grid-base-column-chooser-horizontal-padding: ds.$spacing-240 !default; + $fluent-grid-base-column-chooser-paddings: ds.$spacing-160 $fluent-grid-base-column-chooser-horizontal-padding ds.$spacing-90 !default; + $fluent-grid-base-header-panel-padding: ds.$spacing-80 0 !default; + $fluent-grid-base-grouppanel-item-margin: ds.$spacing-60 !default; + + $fluent-grid-base-command-edit-column-width: 115px !default; // dx-offscale: 115px + $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; // dx-offscale: 93px + $fluent-grid-base-adaptive-column-height: ds.$spacing-400 !default; + $fluent-grid-base-treeview-search-margin: ds.$spacing-100 !default; + $fluent-grid-base-nodata-font-size: ds.$spacing-170 !default; + + $fluent-filter-row-between-editor-padding: ds.$spacing-120 !default; $fluent-command-column-additional-right-margin: 0 !default; - $fluent-grid-base-treeview-select-all-item-offset: 34px !default; + $fluent-grid-base-treeview-select-all-item-offset: ds.$spacing-340 !default; - $fluent-grid-base-header-icon-size: 20px !default; - $fluent-command-edit-icon-size: 20px !default; - $fluent-filter-panel-icon-size: 20px !default; - $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 20px !default; - $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 8px !default; - $fluent-grid-base-command-ai-header-button-offset: 8px !default; + $fluent-grid-base-header-icon-size: ds.$spacing-200 !default; + $fluent-command-edit-icon-size: ds.$spacing-200 !default; + $fluent-filter-panel-icon-size: ds.$spacing-200 !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: ds.$spacing-200 !default; + $fluent-grid-base-command-ai-text-content-padding: calc(#{$fluent-grid-base-command-ai-chatsparkleoutline-icon-size} + 8px) !default; + $fluent-grid-base-command-ai-header-button-offset: ds.$spacing-80 !default; } @else if $size == "compact" { - $fluent-grid-base-cell-height: 36px !default; - $fluent-grid-base-header-height: 36px !default; - $fluent-grid-base-cell-line-height: 16px !default; - $fluent-grid-base-cell-font-size: 12px !default; - - $fluent-grid-base-checkbox-size: 16px !default; - $fluent-grid-base-cell-horizontal-padding: 11px !default; - - $fluent-grid-base-texteditor-input-padding: 36px !default; - $fluent-grid-base-menu-item-padding: 8px 4px !default; - $fluent-grid-base-column-chooser-horizontal-padding: 8px !default; - $fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default; - $fluent-grid-base-header-panel-padding: 6px 0 !default; - $fluent-grid-base-grouppanel-item-margin: 6px !default; - - $fluent-grid-base-command-edit-column-width: 105px !default; - $fluent-grid-base-command-edit-column-with-icons-width: 80px !default; - $fluent-grid-base-adaptive-column-height: 26px !default; - $fluent-grid-base-treeview-search-margin: 10px !default; - $fluent-grid-base-nodata-font-size: 14px !default; - - $fluent-filter-row-between-editor-padding: 8px !default; - $fluent-command-column-additional-right-margin: 2px !default; - - $fluent-grid-base-treeview-select-all-item-offset: 28px !default; - - $fluent-grid-base-header-icon-size: 16px !default; - $fluent-command-edit-icon-size: 16px !default; - $fluent-filter-panel-icon-size: 16px !default; - $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: 16px !default; - $fluent-grid-base-command-ai-text-content-padding: $fluent-grid-base-command-ai-chatsparkleoutline-icon-size + 6px !default; - $fluent-grid-base-command-ai-header-button-offset: 6px !default; + $fluent-grid-base-cell-height: ds.$spacing-360 !default; + $fluent-grid-base-header-height: ds.$spacing-360 !default; + $fluent-grid-base-cell-line-height: ds.$line-height-160 !default; + $fluent-grid-base-cell-font-size: ds.$font-size-120 !default; + + $fluent-grid-base-checkbox-size: ds.$spacing-160 !default; + $fluent-grid-base-cell-horizontal-padding: ds.$spacing-110 !default; + + $fluent-grid-base-texteditor-input-padding: ds.$spacing-360 !default; + $fluent-grid-base-menu-item-padding: ds.$spacing-80 ds.$spacing-40 !default; + $fluent-grid-base-column-chooser-horizontal-padding: ds.$spacing-80 !default; + $fluent-grid-base-column-chooser-paddings: ds.$spacing-80 $fluent-grid-base-column-chooser-horizontal-padding ds.$spacing-80 !default; + $fluent-grid-base-header-panel-padding: ds.$spacing-60 0 !default; + $fluent-grid-base-grouppanel-item-margin: ds.$spacing-60 !default; + + $fluent-grid-base-command-edit-column-width: 105px !default; // dx-offscale: 105px + $fluent-grid-base-command-edit-column-with-icons-width: ds.$spacing-800 !default; + $fluent-grid-base-adaptive-column-height: ds.$spacing-260 !default; + $fluent-grid-base-treeview-search-margin: ds.$spacing-100 !default; + $fluent-grid-base-nodata-font-size: ds.$font-size-140 !default; + + $fluent-filter-row-between-editor-padding: ds.$spacing-80 !default; + $fluent-command-column-additional-right-margin: ds.$spacing-20 !default; + + $fluent-grid-base-treeview-select-all-item-offset: ds.$spacing-280 !default; + + $fluent-grid-base-header-icon-size: ds.$spacing-160 !default; + $fluent-command-edit-icon-size: ds.$spacing-160 !default; + $fluent-filter-panel-icon-size: ds.$spacing-160 !default; + $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: ds.$spacing-160 !default; + $fluent-grid-base-command-ai-text-content-padding: calc(#{$fluent-grid-base-command-ai-chatsparkleoutline-icon-size} + 6px) !default; + $fluent-grid-base-command-ai-header-button-offset: ds.$spacing-60 !default; } $fluent-grid-base-header-cell-font-size: $fluent-grid-base-cell-font-size !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss index 1ec5dd5b0875..7efcfb4d27ba 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss @@ -3,8 +3,8 @@ @use "sizes" as *; $fluent-grid-base-border-color: $datagrid-border-color; -$fluent-grid-base-cell-vertical-padding: math.round(math.div($fluent-grid-base-cell-height - $fluent-grid-base-cell-line-height, 2)); +$fluent-grid-base-cell-vertical-padding: calc((#{$fluent-grid-base-cell-height} - #{$fluent-grid-base-cell-line-height}) / 2); $fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding; -$fluent-grid-base-header-cell-vertical-padding: math.round(math.div($fluent-grid-base-header-height - $fluent-grid-base-header-line-height, 2)); -$fluent-grid-base-command-select-column-width: $fluent-grid-base-checkbox-size + 2 * $fluent-grid-base-cell-horizontal-padding; +$fluent-grid-base-header-cell-vertical-padding: calc((#{$fluent-grid-base-header-height} - #{$fluent-grid-base-header-line-height}) / 2); +$fluent-grid-base-command-select-column-width: calc(#{$fluent-grid-base-checkbox-size} + 2 * #{$fluent-grid-base-cell-horizontal-padding}); $grid-masterdetail-padding: 16px; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss index 6cad4be42474..d6b4aa7f9e8e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss @@ -31,14 +31,14 @@ // (0,1,0) .dx-command-adaptive { - width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; - min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); + min-width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); } // (0,2,0) .dx-#{$widget-name} .dx-command-drag { - width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; - min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size; + width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); + min-width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size}); } // (0,7,1) - (0,9,1) @@ -310,12 +310,12 @@ // (0,5,1) .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) { - padding-top: $fluent-grid-base-cell-vertical-padding + 1px; + padding-top: calc(#{$fluent-grid-base-cell-vertical-padding} + 1px); } // (0,5,1) .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-edit-row > td.dx-command-edit { - padding-top: $fluent-grid-base-cell-vertical-padding - 1px; + padding-top: calc(#{$fluent-grid-base-cell-vertical-padding} - 1px); } // (0,6,1) @@ -332,13 +332,13 @@ // (0,7,0) .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row .dx-command-select { - padding-bottom: math.div($fluent-grid-base-header-height - $fluent-grid-base-checkbox-size, 2); + padding-bottom: calc((#{$fluent-grid-base-header-height} - #{$fluent-grid-base-checkbox-size}) / 2); } // (0,8,1) T1303478 .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell), .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) { - padding-bottom: $fluent-grid-base-cell-vertical-padding - 1px; + padding-bottom: calc(#{$fluent-grid-base-cell-vertical-padding} - 1px); } // (0,7,1) - (0,9,1) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss index ea9842636032..d50afa5c3f1b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss @@ -180,7 +180,7 @@ &.dx-color-format, &.dx-background-format { .dx-button-content { - padding-bottom: $fluent-button-vertical-padding - 3px; + padding-bottom: calc(#{$fluent-button-vertical-padding} - 3px); } } @@ -190,7 +190,7 @@ } .dx-htmleditor-toolbar-separator { - height: math.div($fluent-toolbar-height, 2); + height: calc((#{$fluent-toolbar-height}) / 2); border-inline-start-color: $htmleditor-toolbar-border-color; } @@ -233,7 +233,7 @@ .dx-buttongroup { margin-inline-start: $fluent-html-editor-add-image-dialog-base-padding; width: $fluent-button-height; - margin-top: math.div($fluent-base-inline-widget-height - $fluent-button-height, 2); + margin-top: calc((#{$fluent-base-inline-widget-height} - #{$fluent-button-height}) / 2); } } @@ -273,7 +273,7 @@ .dx-fileuploader-dragover { .dx-fileuploader-input { padding-top: $fluent-fileuploader-vertical-padding; - padding-bottom: $fluent-fileuploader-vertical-padding + 1px; + padding-bottom: calc(#{$fluent-fileuploader-vertical-padding} + 1px); } .dx-fileuploader-content { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss index d21b20d145f6..57209b20d683 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; @use "../toolbar/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,9 +8,9 @@ $fluent-toolbar-size-editor-width: null !default; $fluent-html-editor-vertical-padding: null !default; $fluent-html-editor-horizontal-padding: null !default; $fluent-html-editor-add-image-dialog-fileuploader-padding: null !default; -$fluent-html-editor-toolbar-menu-separator-margin: 4px !default; -$fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default; -$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default; +$fluent-html-editor-toolbar-menu-separator-margin: ds.$spacing-40 !default; +$fluent-html-editor-fileuploader-input-wrapper-border-radius: ds.$border-radius-80 !default; +$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default; // dx-offscale: 1.5px $fluent-html-editor-add-image-dialog-tabs-padding: null !default; $fluent-aidialog-selects-gap: null !default; $fluent-aidialog-content-gap: null !default; @@ -17,26 +18,26 @@ $fluent-aidialog-content-padding: null !default; $fluent-aidialog-border-radius: null !default; @if $size == "default" { - $fluent-toolbar-size-editor-width: 120px !default; - $fluent-html-editor-vertical-padding: 16px !default; - $fluent-html-editor-horizontal-padding: 16px !default; - $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px !default; - $fluent-html-editor-add-image-dialog-tabs-padding: 14px !default; - $fluent-aidialog-selects-gap: 8px !default; - $fluent-aidialog-content-gap: 16px !default; - $fluent-aidialog-content-padding: 16px 24px !default; - $fluent-aidialog-border-radius: $base-border-radius * 2 !default; + $fluent-toolbar-size-editor-width: ds.$spacing-1200 !default; + $fluent-html-editor-vertical-padding: ds.$spacing-160 !default; + $fluent-html-editor-horizontal-padding: ds.$spacing-160 !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: ds.$spacing-480 0 ds.$spacing-240 !default; + $fluent-html-editor-add-image-dialog-tabs-padding: ds.$spacing-140 !default; + $fluent-aidialog-selects-gap: ds.$spacing-80 !default; + $fluent-aidialog-content-gap: ds.$spacing-160 !default; + $fluent-aidialog-content-padding: ds.$spacing-160 ds.$spacing-240 !default; + $fluent-aidialog-border-radius: calc(#{$base-border-radius} * 2) !default; } @else if $size == "compact" { - $fluent-toolbar-size-editor-width: 90px !default; - $fluent-html-editor-vertical-padding: 12px !default; - $fluent-html-editor-horizontal-padding: 12px !default; - $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px !default; - $fluent-html-editor-add-image-dialog-tabs-padding: 8px !default; - $fluent-aidialog-selects-gap: 4px !default; - $fluent-aidialog-content-gap: 12px !default; - $fluent-aidialog-content-padding: 12px 16px !default; + $fluent-toolbar-size-editor-width: 90px !default; // dx-offscale: 90px + $fluent-html-editor-vertical-padding: ds.$spacing-120 !default; + $fluent-html-editor-horizontal-padding: ds.$spacing-120 !default; + $fluent-html-editor-add-image-dialog-fileuploader-padding: ds.$spacing-400 0 ds.$spacing-180 !default; + $fluent-html-editor-add-image-dialog-tabs-padding: ds.$spacing-80 !default; + $fluent-aidialog-selects-gap: ds.$spacing-40 !default; + $fluent-aidialog-content-gap: ds.$spacing-120 !default; + $fluent-aidialog-content-padding: ds.$spacing-120 ds.$spacing-160 !default; $fluent-aidialog-border-radius: $base-border-radius !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss index 9c7a933950de..d689b2016731 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss @@ -1,5 +1,6 @@ @use "../common/sizes" as *; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,15 +11,15 @@ $informer-column-gap: null !default; $informer-border-radius: null !default; @if $size == "default" { - $informer-padding-inline: 12px !default; - $informer-padding-block: 8px !default; - $informer-column-gap: 6px !default; - $informer-border-radius: 4px !default; + $informer-padding-inline: ds.$spacing-120 !default; + $informer-padding-block: ds.$spacing-80 !default; + $informer-column-gap: ds.$spacing-60 !default; + $informer-border-radius: ds.$border-radius-40 !default; } @else if $size == "compact" { - $informer-padding-inline: 8px !default; - $informer-padding-block: 4px !default; - $informer-column-gap: 4px !default; - $informer-border-radius: 3px !default; + $informer-padding-inline: ds.$spacing-80 !default; + $informer-padding-block: ds.$spacing-40 !default; + $informer-column-gap: ds.$spacing-40 !default; + $informer-border-radius: ds.$border-radius-30 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss index 7152525cae4f..efd4b06ecc69 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss @@ -67,7 +67,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; } .dx-list-item-icon-container { - width: $fluent-base-icon-size + $fluent-list-item-horizontal-padding; + width: calc(#{$fluent-base-icon-size} + #{$fluent-list-item-horizontal-padding}); height: $fluent-base-icon-size; vertical-align: bottom; } @@ -147,7 +147,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; } &.dx-list-with-search .dx-scrollable-wrapper { - height: calc(100% - #{$fluent-texteditor-input-height + $fluent-list-searchbox-margin-bottom}); + height: calc(100% - (#{$fluent-texteditor-input-height} + #{$fluent-list-searchbox-margin-bottom})); } .dx-empty-message { @@ -443,7 +443,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; } .dx-list-select-all-checkbox { - margin: 0 $item-horizontal-padding - 4px; + margin: 0 calc(#{$item-horizontal-padding} - 4px); } .dx-list-select-all-label { @@ -454,7 +454,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; padding-inline: $fluent-list-item-vertical-padding; &.dx-list-static-delete-button-container { - width: $item-horizontal-padding + $fluent-button-icon-size; + width: calc(#{$item-horizontal-padding} + #{$fluent-button-icon-size}); padding: 0; } @@ -484,7 +484,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid; display: table-cell; vertical-align: middle; padding: 0 $item-horizontal-padding; - width: $item-horizontal-padding * 2 + $fluent-base-icon-size; + width: calc(#{$item-horizontal-padding} * 2 + #{$fluent-base-icon-size}); } .dx-list-slide-menu-button-menu { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss index b88504c794fe..c0963b91d0ee 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss @@ -1,32 +1,33 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-list-vertical-padding: 4px !default; -$fluent-list-item-margin-inline: 4px !default; -$fluent-list-bottom-padding: 4px !default; -$fluent-list-searchbox-margin-bottom: 4px !default; +$fluent-list-vertical-padding: ds.$spacing-40 !default; +$fluent-list-item-margin-inline: ds.$spacing-40 !default; +$fluent-list-bottom-padding: ds.$spacing-40 !default; +$fluent-list-searchbox-margin-bottom: ds.$spacing-40 !default; $fluent-list-item-height: null !default; $fluent-list-item-vertical-padding: null !default; $fluent-list-item-horizontal-padding: null !default; -$fluent-list-item-gap: 2px !default; +$fluent-list-item-gap: ds.$spacing-20 !default; $fluent-list-group-header-vertical-padding: null !default; $fluent-list-next-button-horizontal-padding: null !default; @if $size == "default" { - $fluent-list-item-height: 32px !default; - $fluent-list-item-vertical-padding: 6px !default; - $fluent-list-item-horizontal-padding: 12px !default; - $fluent-list-group-header-vertical-padding: 6px !default; - $fluent-list-next-button-horizontal-padding: 32px !default; + $fluent-list-item-height: ds.$spacing-320 !default; + $fluent-list-item-vertical-padding: ds.$spacing-60 !default; + $fluent-list-item-horizontal-padding: ds.$spacing-120 !default; + $fluent-list-group-header-vertical-padding: ds.$spacing-60 !default; + $fluent-list-next-button-horizontal-padding: ds.$spacing-320 !default; } @else if $size == "compact" { - $fluent-list-item-height: 24px !default; - $fluent-list-item-vertical-padding: 4px !default; - $fluent-list-item-horizontal-padding: 8px !default; - $fluent-list-group-header-vertical-padding: 8px !default; - $fluent-list-next-button-horizontal-padding: 24px !default; + $fluent-list-item-height: ds.$spacing-240 !default; + $fluent-list-item-vertical-padding: ds.$spacing-40 !default; + $fluent-list-item-horizontal-padding: ds.$spacing-80 !default; + $fluent-list-group-header-vertical-padding: ds.$spacing-80 !default; + $fluent-list-next-button-horizontal-padding: ds.$spacing-240 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss index 7100675c9f07..0f0fad8ad030 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss @@ -1,9 +1,10 @@ @use "sass:color"; @use "../colors" as *; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$load-panel-padding: 12px 24px !default; -$load-panel-border-radius: 8px !default; -$load-panel-box-shadow: 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14) !default; +$load-panel-padding: ds.$spacing-120 ds.$spacing-240 !default; +$load-panel-border-radius: ds.$border-radius-80 !default; +$load-panel-box-shadow: 0 ds.$spacing-80 ds.$spacing-160 0 color.change($base-shadow-color, $alpha: 0.14) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss index bef4b08d024d..581d45764d6f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss @@ -24,12 +24,12 @@ &.dx-editor-outlined { .dx-lookup-field { padding-inline-start: $fluent-filled-texteditor-input-horizontal-padding; - padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size; + padding-inline-end: calc(#{$fluent-filled-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size}); } &.dx-invalid { .dx-lookup-field { - padding-inline-end: $fluent-filled-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2; + padding-inline-end: calc(#{$fluent-filled-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} * 2); } } } @@ -37,12 +37,12 @@ &.dx-editor-underlined { .dx-lookup-field { padding-inline-start: $fluent-base-standard-texteditor-input-horizontal-padding; - padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size + $texteditor-spin-button-horizontal-padding; + padding-inline-end: calc(#{$fluent-base-standard-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} + #{$texteditor-spin-button-horizontal-padding}); } &.dx-invalid { .dx-lookup-field { - padding-inline-end: $fluent-base-standard-texteditor-input-horizontal-padding + $fluent-base-icon-size * 2 + $texteditor-spin-button-horizontal-padding; + padding-inline-end: calc(#{$fluent-base-standard-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} * 2 + #{$texteditor-spin-button-horizontal-padding}); } } } @@ -165,7 +165,7 @@ } .dx-lookup-popup-search .dx-list { - height: calc(100% - #{$fluent-texteditor-input-height + $lookup-search-padding-vertical + $lookup-search-padding-vertical-top }); + height: calc(100% - (#{$fluent-texteditor-input-height} + #{$lookup-search-padding-vertical} + #{$lookup-search-padding-vertical-top})); } .dx-lookup-search-wrapper { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss index f3fd2b58ef3d..6fbd2e14f40b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss @@ -1,23 +1,24 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $lookup-field-height: null !default; -$lookup-search-padding-vertical: 4px !default; +$lookup-search-padding-vertical: ds.$spacing-40 !default; $lookup-search-padding-vertical-top: null !default; $lookup-search-padding-horizontal: null !default; -$lookup-arrow-border-radius: 2px !default; +$lookup-arrow-border-radius: ds.$border-radius-20 !default; -$fluent-lookup-popup-content-top: 49px !default; +$fluent-lookup-popup-content-top: 49px !default; // dx-offscale: 49px @if $size == "default" { - $lookup-field-height: 30px !default; - $lookup-search-padding-horizontal: 12px !default; - $lookup-search-padding-vertical-top: 12px !default; + $lookup-field-height: ds.$spacing-300 !default; + $lookup-search-padding-horizontal: ds.$spacing-120 !default; + $lookup-search-padding-vertical-top: ds.$spacing-120 !default; } @else if $size == "compact" { - $lookup-field-height: 22px !default; - $lookup-search-padding-horizontal: 8px !default; - $lookup-search-padding-vertical-top: 8px !default; + $lookup-field-height: ds.$spacing-220 !default; + $lookup-search-padding-horizontal: ds.$spacing-80 !default; + $lookup-search-padding-vertical-top: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss index 9161d6ba6151..6eae8d50a5c3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss @@ -1,14 +1,15 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-menu-vertical-padding: null !default; @if $size == "default" { - $fluent-menu-vertical-padding: 6px !default; + $fluent-menu-vertical-padding: ds.$spacing-60 !default; } @if $size == "compact" { - $fluent-menu-vertical-padding: 4px !default; + $fluent-menu-vertical-padding: ds.$spacing-40 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss index 6a55714929bc..06a806258c31 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss @@ -1,20 +1,21 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-menu-item-line-height: null !default; $fluent-menu-item-with-icon-horizontal-padding: null !default; $fluent-menu-horizontal-padding: null !default; -$fluent-menu-icon-to-text-offset: 4px; +$fluent-menu-icon-to-text-offset: ds.$spacing-40; @if $size == "default" { - $fluent-menu-item-line-height: 20px !default; - $fluent-menu-horizontal-padding: 12px !default; - $fluent-menu-item-with-icon-horizontal-padding: 40px !default; + $fluent-menu-item-line-height: ds.$line-height-200 !default; + $fluent-menu-horizontal-padding: ds.$spacing-120 !default; + $fluent-menu-item-with-icon-horizontal-padding: ds.$spacing-400 !default; } @else if $size == "compact" { - $fluent-menu-item-line-height: 16px !default; - $fluent-menu-horizontal-padding: 8px !default; - $fluent-menu-item-with-icon-horizontal-padding: 32px !default; + $fluent-menu-item-line-height: ds.$line-height-160 !default; + $fluent-menu-horizontal-padding: ds.$spacing-80 !default; + $fluent-menu-item-with-icon-horizontal-padding: ds.$spacing-320 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss index c2fd8daf91af..bcf173631c58 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss @@ -1,15 +1,16 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-numberbox-spin-container-width: 24px !default; +$fluent-numberbox-spin-container-width: ds.$spacing-240 !default; $fluent-numberbox-touch-friendly-spin-container-width: null !default; @if $size == "default" { - $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; + $fluent-numberbox-touch-friendly-spin-container-width: ds.$spacing-480 !default; } @else if $size == "compact" { - $fluent-numberbox-touch-friendly-spin-container-width: 48px !default; + $fluent-numberbox-touch-friendly-spin-container-width: ds.$spacing-480 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss index 67a2a019698a..4a75478aa6a9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss @@ -1,26 +1,27 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-pagination-paddings: 13px !default; -$fluent-pagination-separator-paddings: 8px !default; -$fluent-pagination-page-padding: 9px 12px !default; -$fluent-pagination-page-line-height: 12px !default; -$fluent-pagination-page-font-size: 12px !default; +$fluent-pagination-paddings: ds.$spacing-130 !default; +$fluent-pagination-separator-paddings: ds.$spacing-80 !default; +$fluent-pagination-page-padding: ds.$spacing-90 ds.$spacing-120 !default; +$fluent-pagination-page-line-height: ds.$line-height-120 !default; +$fluent-pagination-page-font-size: ds.$font-size-120 !default; $fluent-pagination-navbutton-paddings: $fluent-pagination-page-padding !default; -$fluent-pagination-navbutton-height: 12px !default; +$fluent-pagination-navbutton-height: ds.$spacing-120 !default; $fluent-pagination-navbutton-icon-size: null !default; $fluent-pagination-light-pagesizes-min-width: null !default; $fluent-pagination-light-pageindex-min-width: null !default; @if $size == "default" { - $fluent-pagination-navbutton-icon-size: 21px !default; - $fluent-pagination-light-pagesizes-min-width: 62px !default; - $fluent-pagination-light-pageindex-min-width: 32px !default; + $fluent-pagination-navbutton-icon-size: ds.$spacing-210 !default; + $fluent-pagination-light-pagesizes-min-width: 62px !default; // dx-offscale: 62px + $fluent-pagination-light-pageindex-min-width: ds.$spacing-320 !default; } @else if $size == "compact" { - $fluent-pagination-navbutton-icon-size: 16px !default; - $fluent-pagination-light-pagesizes-min-width: 42px !default; - $fluent-pagination-light-pageindex-min-width: 27px !default; + $fluent-pagination-navbutton-icon-size: ds.$spacing-160 !default; + $fluent-pagination-light-pagesizes-min-width: 42px !default; // dx-offscale: 42px + $fluent-pagination-light-pageindex-min-width: 27px !default; // dx-offscale: 27px } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss index 243dd6959ac2..0c978bfe459a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,31 +11,31 @@ $pivotgrid-header-top-bottom-padding: null !default; $pivotgrid-button-top-padding: null !default; $area-field-top-bottom-padding: null !default; -$pivotgrid-empty-column-width: 19px !default; -$pivotgrid-field-indicators-offset: 6px !default; -$pivotgrid-indicators-line-height: 12px !default; -$pivotgrid-empty-area-text-padding: 5px !default; +$pivotgrid-empty-column-width: ds.$spacing-190 !default; +$pivotgrid-field-indicators-offset: ds.$spacing-60 !default; +$pivotgrid-indicators-line-height: ds.$line-height-120 !default; +$pivotgrid-empty-area-text-padding: ds.$spacing-50 !default; $area-field-border-radius: null !default; @if $size == "default" { - $fluent-pivotgrid-cell-padding: 10px 16px !default; - $pivotgrid-common-left-right-padding: 10px !default; - $pivotgrid-header-top-bottom-padding: 14px !default; - $fluent-pivotgrid-expanded-cell-padding: 10px 14px 10px 19px !default; - $fluent-pivotgrid-total-text-left-padding: 22px !default; - $pivotgrid-button-top-padding: 10px !default; - $area-field-border-radius: 6px !default; - $area-field-top-bottom-padding: 5px !default; + $fluent-pivotgrid-cell-padding: ds.$spacing-100 ds.$spacing-160 !default; + $pivotgrid-common-left-right-padding: ds.$spacing-100 !default; + $pivotgrid-header-top-bottom-padding: ds.$spacing-140 !default; + $fluent-pivotgrid-expanded-cell-padding: ds.$spacing-100 ds.$spacing-140 ds.$spacing-100 ds.$spacing-190 !default; + $fluent-pivotgrid-total-text-left-padding: ds.$spacing-220 !default; + $pivotgrid-button-top-padding: ds.$spacing-100 !default; + $area-field-border-radius: ds.$border-radius-60 !default; + $area-field-top-bottom-padding: ds.$spacing-50 !default; } @else if $size == "compact" { - $fluent-pivotgrid-cell-padding: 7px 11px !default; - $pivotgrid-common-left-right-padding: 8px !default; - $pivotgrid-header-top-bottom-padding: 5px !default; - $fluent-pivotgrid-expanded-cell-padding: 7px 8px 7px 13px !default; - $fluent-pivotgrid-total-text-left-padding: 16px !default; - $pivotgrid-button-top-padding: 5px !default; - $area-field-border-radius: 4px !default; - $area-field-top-bottom-padding: 1px !default; + $fluent-pivotgrid-cell-padding: ds.$spacing-70 ds.$spacing-110 !default; + $pivotgrid-common-left-right-padding: ds.$spacing-80 !default; + $pivotgrid-header-top-bottom-padding: ds.$spacing-50 !default; + $fluent-pivotgrid-expanded-cell-padding: ds.$spacing-70 ds.$spacing-80 ds.$spacing-70 ds.$spacing-130 !default; + $fluent-pivotgrid-total-text-left-padding: ds.$spacing-160 !default; + $pivotgrid-button-top-padding: ds.$spacing-50 !default; + $area-field-border-radius: ds.$border-radius-40 !default; + $area-field-top-bottom-padding: ds.$spacing-10 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss index d740b96920d8..3d3971ec464b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss @@ -13,7 +13,7 @@ $popup-title-color: $base-text-color !default; $popup-title-border-color: $base-border-color !default; $popup-bottom-bg: $popup-title-bg !default; $popup-bottom-color: $base-text-color !default; -$popup-border-radius: $base-border-radius * 2 !default; +$popup-border-radius: calc(#{$base-border-radius} * 2) !default; $popup-content-shadow-color1: null !default; $popup-content-shadow-color2: null !default; $popup-focused-content-shadow-color: null !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss index 3dc25d0c2292..027b7af751ae 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss @@ -75,7 +75,7 @@ $fluent-popup-toolbar-label-font-size: $fluent-m-font-size; } .dx-popup-content.dx-dialog-content { - min-width: 220px - 2 * $fluent-popup-content-padding; + min-width: calc(220px - 2 * #{$fluent-popup-content-padding}); padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss index 93f5409ad501..c5159d446152 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; @use "colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,38 +12,38 @@ $fluent-popup-toolbar-horizontal-padding: null !default; $fluent-popup-bottom-toolbar-height: null !default; $fluent-popup-toolbar-height: null !default; -$fluent-popup-button-margin: 0 8px !default; -$fluent-popup-toolbar-item-spacing: 8px !default; +$fluent-popup-button-margin: 0 ds.$spacing-80 !default; +$fluent-popup-toolbar-item-spacing: ds.$spacing-80 !default; $fluent-popup-content-shadow: null !default; $fluent-popup-focused-content-shadow: null !default; @if $size == "default" { - $fluent-popup-content-padding: 24px !default; - $fluent-popup-content-vertical-padding: 16px !default; - $fluent-popup-content-withtitle-top-padding: 24px !default; - $fluent-popup-content-withtitle-bottom-padding: 16px !default; + $fluent-popup-content-padding: ds.$spacing-240 !default; + $fluent-popup-content-vertical-padding: ds.$spacing-160 !default; + $fluent-popup-content-withtitle-top-padding: ds.$spacing-240 !default; + $fluent-popup-content-withtitle-bottom-padding: ds.$spacing-160 !default; - $fluent-popup-toolbar-horizontal-padding: 24px !default; - $fluent-popup-bottom-toolbar-height: 48px !default; - $fluent-popup-toolbar-height: 48px !default; + $fluent-popup-toolbar-horizontal-padding: ds.$spacing-240 !default; + $fluent-popup-bottom-toolbar-height: ds.$spacing-480 !default; + $fluent-popup-toolbar-height: ds.$spacing-480 !default; - $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; - $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; + $fluent-popup-content-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-color1, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 ds.$spacing-120 0 $popup-focused-content-shadow-color, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-focused-content-shadow-color !default; } @else if $size == "compact" { - $fluent-popup-content-padding: 16px !default; - $fluent-popup-content-vertical-padding: 12px !default; - $fluent-popup-content-withtitle-top-padding: 16px !default; - $fluent-popup-content-withtitle-bottom-padding: 12px !default; + $fluent-popup-content-padding: ds.$spacing-160 !default; + $fluent-popup-content-vertical-padding: ds.$spacing-120 !default; + $fluent-popup-content-withtitle-top-padding: ds.$spacing-160 !default; + $fluent-popup-content-withtitle-bottom-padding: ds.$spacing-120 !default; - $fluent-popup-toolbar-horizontal-padding: 16px !default; - $fluent-popup-bottom-toolbar-height: 36px !default; - $fluent-popup-toolbar-height: 36px !default; + $fluent-popup-toolbar-horizontal-padding: ds.$spacing-160 !default; + $fluent-popup-bottom-toolbar-height: ds.$spacing-360 !default; + $fluent-popup-toolbar-height: ds.$spacing-360 !default; - $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default; - $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default; + $fluent-popup-content-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-color1, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-color2 !default; + $fluent-popup-focused-content-shadow: 0 0 ds.$spacing-120 0 $popup-focused-content-shadow-color, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-focused-content-shadow-color !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss index e845336ff37d..37b8e6039f8e 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,11 +9,11 @@ $progressbar-status-margin-top: null !default; $progressbar-indeterminate-background-width: 90%; @if $size == "default" { - $progressbar-height: 4px !default; - $progressbar-status-margin-top: 12px !default; + $progressbar-height: ds.$spacing-40 !default; + $progressbar-status-margin-top: ds.$spacing-120 !default; } @else if $size == "compact" { - $progressbar-height: 2px !default; - $progressbar-status-margin-top: 8px !default; + $progressbar-height: ds.$spacing-20 !default; + $progressbar-status-margin-top: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss index 4a1b17b0ebfb..5e68605a263b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss @@ -1,17 +1,18 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-radiobutton-size: 16px !default; -$fluent-radiobutton-dot-size: 10px !default; +$fluent-radiobutton-size: ds.$spacing-160 !default; +$fluent-radiobutton-dot-size: ds.$spacing-100 !default; -$fluent-radiobutton-border-width: 1px !default; +$fluent-radiobutton-border-width: ds.$border-width-10 !default; $fluent-radio-value-container-padding: null !default; @if $size == "default" { - $fluent-radio-value-container-padding: 12px !default; + $fluent-radio-value-container-padding: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-radio-value-container-padding: 8px !default; + $fluent-radio-value-container-padding: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss index 68d4e89dac25..4fa3b2dcc904 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -6,12 +7,12 @@ $fluent-radio-button-vertical-margin: null !default; $fluent-radio-group-horizontal-gap: null !default; @if $size == "default" { - $fluent-radio-group-horizontal-gap: 16px !default; - $fluent-radio-button-vertical-margin: 12px !default; + $fluent-radio-group-horizontal-gap: ds.$spacing-160 !default; + $fluent-radio-button-vertical-margin: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-radio-group-horizontal-gap: 12px !default; - $fluent-radio-button-vertical-margin: 6px !default; + $fluent-radio-group-horizontal-gap: ds.$spacing-120 !default; + $fluent-radio-button-vertical-margin: ds.$spacing-60 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss index 81a32d4c3565..810f384c7cba 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss @@ -9,5 +9,5 @@ // adduse .dx-rangeslider-start-handle { - margin-inline-start: math.div(-$fluent-slider-handle-size, 2); + margin-inline-start: calc(#{$fluent-slider-handle-size} / -2); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss index b422f99e08d4..dedca05dee2d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,13 +8,13 @@ $fluent-recurrence-count-number-box-top-margin: null !default; $fluent-recurrence-interval-number-box-margin-top: null !default; @if $size == "default" { - $fluent-recurrence-until-date-box-top-margin: 60px !default; - $fluent-recurrence-count-number-box-top-margin: 102px !default; - $fluent-recurrence-interval-number-box-margin-top: 30px !default; + $fluent-recurrence-until-date-box-top-margin: ds.$spacing-600 !default; + $fluent-recurrence-count-number-box-top-margin: 102px !default; // dx-offscale: 102px + $fluent-recurrence-interval-number-box-margin-top: ds.$spacing-300 !default; } @else if $size == "compact" { - $fluent-recurrence-until-date-box-top-margin: 46px !default; - $fluent-recurrence-count-number-box-top-margin: 78px !default; - $fluent-recurrence-interval-number-box-margin-top: 22px !default; + $fluent-recurrence-until-date-box-top-margin: 46px !default; // dx-offscale: 46px + $fluent-recurrence-count-number-box-top-margin: 78px !default; // dx-offscale: 78px + $fluent-recurrence-interval-number-box-margin-top: ds.$spacing-220 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss index 4e13eab72723..ad3fda2e410f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss @@ -57,7 +57,7 @@ @use "../recurrenceEditor" as *; @use "../scrollable"; -$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5; +$fluent-scheduler-all-day-table-cell-height: calc(#{$fluent-scheduler-workspace-date-table-cell-height} * 1.5); $fluent-scheduler-month-date-text-size: 14px; @@ -93,7 +93,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; font-size: $fluent-scheduler-time-panel-font-size; .dx-scheduler-small & { - font-size: $fluent-scheduler-time-panel-font-size - 1; + font-size: calc(#{$fluent-scheduler-time-panel-font-size} - 1px); } } @@ -137,7 +137,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; } .dx-scheduler-small & { - font-size: $fluent-scheduler-all-day-title-font-size * 0.8; + font-size: calc(#{$fluent-scheduler-all-day-title-font-size} * 0.8); padding-right: 2px; } @@ -368,7 +368,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px; font-size: 14px; .dx-scheduler-small & { - margin: 0 $fluent-scheduler-header-panel-margin * baseScheduler.$scheduler-small-size-factor; + margin: 0 calc(#{$fluent-scheduler-header-panel-margin} * #{baseScheduler.$scheduler-small-size-factor}); } &:last-child { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss index 764fadebbc69..7cf3ecd0f558 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss @@ -2,6 +2,7 @@ @use "../button/colors" as *; @use "../form/sizes" as *; @use "../toolbar/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; $fluent-scheduler-workspace-date-table-cell-height: null !default; @@ -52,8 +53,8 @@ $fluent-scheduler-appointment-15min-icon-right: null !default; $fluent-scheduler-appointment-20min-recurrence-padding-right: null !default; $fluent-scheduler-appointment-20min-icon-right: null !default; -$scheduler-left-column-width: 65px !default; -$fluent-scheduler-timeline-date-table-cell-height: 50px !default; +$scheduler-left-column-width: 65px !default; // dx-offscale: 65px +$fluent-scheduler-timeline-date-table-cell-height: 50px !default; // dx-offscale: 50px /** * $name 15. Border radius @@ -62,158 +63,158 @@ $fluent-scheduler-timeline-date-table-cell-height: 50px !default; $scheduler-border-radius: 0 !default; $fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size; -$fluent-scheduler-appointment-month-text-size: 12px !default; -$fluent-scheduler-workspace-info-text-size: 16px !default; -$fluent-scheduler-all-day-title-font-size: 12px !default; -$fluent-scheduler-time-panel-font-size: 12px !default; -$fluent-scheduler-header-panel-margin: 14px !default; -$fluent-scheduler-group-header-font-size: 14px !default; -$fluent-scheduler-group-header-table-cell-width: 100px !default; -$fluent-scheduler-appointment-transparent-left-border: 1px solid transparent !default; -$fluent-scheduler-appointment-transparent-right-border: 1px solid transparent !default; -$fluent-scheduler-workspace-month-header-height: 22px !default; -$fluent-scheduler-workspace-month-timeline--time-height: 34px !default; +$fluent-scheduler-appointment-month-text-size: ds.$spacing-120 !default; +$fluent-scheduler-workspace-info-text-size: ds.$spacing-160 !default; +$fluent-scheduler-all-day-title-font-size: ds.$font-size-120 !default; +$fluent-scheduler-time-panel-font-size: ds.$font-size-120 !default; +$fluent-scheduler-header-panel-margin: ds.$spacing-140 !default; +$fluent-scheduler-group-header-font-size: ds.$font-size-140 !default; +$fluent-scheduler-group-header-table-cell-width: ds.$spacing-1000 !default; +$fluent-scheduler-appointment-transparent-left-border: ds.$spacing-10 solid transparent !default; +$fluent-scheduler-appointment-transparent-right-border: ds.$spacing-10 solid transparent !default; +$fluent-scheduler-workspace-month-header-height: ds.$spacing-220 !default; +$fluent-scheduler-workspace-month-timeline--time-height: ds.$spacing-340 !default; $agenda-appointment-title-font-size: null !default; $fluent-scheduler-header-height: null !default; $fluent-scheduler-header-offset: null !default; -$scheduler-timeline-cell-height: 50px !default; +$scheduler-timeline-cell-height: 50px !default; // dx-offscale: 50px $header-day-element-height: null !default; $fluent-scheduler-collapsed-all-day-table-cell-height: null !default; -$header-panel-time-cell-height: 32px !default; +$header-panel-time-cell-height: ds.$spacing-320 !default; $header-panel-time-cell-padding: null !default; @if $size == "default" { - $fluent-scheduler-collapsed-all-day-table-cell-height: 32px !default; - $header-panel-time-cell-padding: 12px !default; - - $header-day-element-height: 26px; - $fluent-scheduler-workspace-date-table-cell-height: 38px !default; - - $fluent-scheduler-navigator-height: 36px !default; - $fluent-scheduler-header-panel-day-font-size: 16px !default; - $fluent-scheduler-header-height: 46px !default; - $fluent-scheduler-header-offset: 0 12px !default; - $fluent-scheduler-toolbar-item-offset: 4px !default; - - $fluent-scheduler-appointment-tooltip-title-font-size: 16px !default; - $fluent-scheduler-appointment-tooltip-date-font-size: 14px !default; - $fluent-scheduler-workspace-month-cell-left-offset: 8px !default; - - $fluent-scheduler-appointment-content-padding: 6px 8px 6px 12px !default; - $fluent-scheduler-recurring-appointment-content-padding: 6px 20px 6px 12px !default; - $fluent-scheduler-appointment-content-padding-rtl: 6px 12px 6px 8px !default; - $fluent-scheduler-recurring-appointment-content-padding-rtl: 6px 12px 6px 20px !default; - $fluent-scheduler-dropdown-button-height: 22px !default; - $fluent-scheduler-dropdown-button-padding: 4px !default; - $fluent-scheduler-dropdown-button-margin: 5px 1px 3px 3px !default; - $fluent-scheduler-dropdown-button-vertical-margin: 5px 3px 3px 3px !default; - $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; - - $fluent-scheduler-appointment-tooltip-content-margin-left: 6px !default; - $fluent-tooltip-marker-dimension: 12px !default; + $fluent-scheduler-collapsed-all-day-table-cell-height: ds.$spacing-320 !default; + $header-panel-time-cell-padding: ds.$spacing-120 !default; + + $header-day-element-height: ds.$spacing-260; + $fluent-scheduler-workspace-date-table-cell-height: 38px !default; // dx-offscale: 38px + + $fluent-scheduler-navigator-height: ds.$spacing-360 !default; + $fluent-scheduler-header-panel-day-font-size: ds.$font-size-160 !default; + $fluent-scheduler-header-height: 46px !default; // dx-offscale: 46px + $fluent-scheduler-header-offset: 0 ds.$spacing-120 !default; + $fluent-scheduler-toolbar-item-offset: ds.$spacing-40 !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: ds.$font-size-160 !default; + $fluent-scheduler-appointment-tooltip-date-font-size: ds.$font-size-140 !default; + $fluent-scheduler-workspace-month-cell-left-offset: ds.$spacing-80 !default; + + $fluent-scheduler-appointment-content-padding: ds.$spacing-60 ds.$spacing-80 ds.$spacing-60 ds.$spacing-120 !default; + $fluent-scheduler-recurring-appointment-content-padding: ds.$spacing-60 ds.$spacing-200 ds.$spacing-60 ds.$spacing-120 !default; + $fluent-scheduler-appointment-content-padding-rtl: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-80 !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-200 !default; + $fluent-scheduler-dropdown-button-height: ds.$spacing-220 !default; + $fluent-scheduler-dropdown-button-padding: ds.$spacing-40 !default; + $fluent-scheduler-dropdown-button-margin: ds.$spacing-50 ds.$spacing-10 ds.$spacing-30 ds.$spacing-30 !default; + $fluent-scheduler-dropdown-button-vertical-margin: ds.$spacing-50 ds.$spacing-30 ds.$spacing-30 ds.$spacing-30 !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 ds.$spacing-20 0 ds.$spacing-10 !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: ds.$spacing-60 !default; + $fluent-tooltip-marker-dimension: ds.$spacing-120 !default; $fluent-scheduler-appointment-tooltip-title-margin-top: 0 !default; - $fluent-scheduler-appointment-tooltip-remove-padding-top: 1px !default; - - $fluent-scheduler-appointment-popup-toolbar-height: 56px !default; - $fluent-scheduler-appointment-popup-icon-container-height: 32px !default; - $fluent-scheduler-appointment-popup-icon-padding-right: 10px !default; - $fluent-scheduler-appointment-popup-icon-margin-top: 24px !default; - $fluent-scheduler-appointment-popup-item-padding-horizontal: 6px !default; - $fluent-scheduler-appointment-popup-all-day-item-height: 40px !default; - $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 12px !default; - $fluent-scheduler-appointment-popup-repeat-end-item-height: 32px !default; - - $agenda-appointment-title-font-size: 14px; - - $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; - $fluent-scheduler-appointment-15min-height: 17px !default; - $fluent-scheduler-appointment-20min-height: 24px !default; - $fluent-scheduler-appointment-25min-height: 32px !default; - - $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-10min-title-font-size: 8px !default; - $fluent-scheduler-appointment-10min-title-line-height: 12px !default; - $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-10min-icon-right: 2px !default; - - $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-15min-title-font-size: 12px !default; - $fluent-scheduler-appointment-15min-title-line-height: 18px !default; - $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-15min-icon-right: 2px !default; - - $fluent-scheduler-appointment-20min-icon-right: 2px !default; - $fluent-scheduler-appointment-20min-recurrence-padding-right: 18px !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: ds.$spacing-10 !default; + + $fluent-scheduler-appointment-popup-toolbar-height: ds.$spacing-560 !default; + $fluent-scheduler-appointment-popup-icon-container-height: ds.$spacing-320 !default; + $fluent-scheduler-appointment-popup-icon-padding-right: ds.$spacing-100 !default; + $fluent-scheduler-appointment-popup-icon-margin-top: ds.$spacing-240 !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: ds.$spacing-60 !default; + $fluent-scheduler-appointment-popup-all-day-item-height: ds.$spacing-400 !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-120 !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-320 !default; + + $agenda-appointment-title-font-size: ds.$font-size-140; + + $fluent-scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default; + $fluent-scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid + + $fluent-scheduler-appointment-10min-recurrence-padding-right: ds.$spacing-140 !default; + $fluent-scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default; + $fluent-scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; + $fluent-scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-10min-icon-right: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: ds.$spacing-140 !default; + $fluent-scheduler-appointment-15min-title-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-title-line-height: ds.$line-height-180 !default; + $fluent-scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-icon-right: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-20min-icon-right: ds.$spacing-20 !default; + $fluent-scheduler-appointment-20min-recurrence-padding-right: ds.$spacing-180 !default; } @else if $size == "compact" { - $fluent-scheduler-collapsed-all-day-table-cell-height: 24px !default; - $header-panel-time-cell-padding: 8px !default; - - $header-day-element-height: 24px; - $fluent-scheduler-workspace-date-table-cell-height: 28px !default; - - $fluent-scheduler-navigator-height: 28px !default; - $fluent-scheduler-header-panel-day-font-size: 14px !default; - $fluent-scheduler-header-height: 34px !default; - $fluent-scheduler-header-offset: 2px 8px !default; - $fluent-scheduler-toolbar-item-offset: 4px !default; - - $fluent-scheduler-appointment-tooltip-title-font-size: 14px !default; - $fluent-scheduler-appointment-tooltip-date-font-size: 11px !default; - $fluent-scheduler-workspace-month-cell-left-offset: 4px !default; - - $fluent-scheduler-appointment-content-padding: 4px 6px 4px 8px !default; - $fluent-scheduler-recurring-appointment-content-padding: 4px 16px 4px 8px !default; - $fluent-scheduler-appointment-content-padding-rtl: 4px 8px 4px 6px !default; - $fluent-scheduler-recurring-appointment-content-padding-rtl: 4px 8px 4px 16px !default; - $fluent-scheduler-dropdown-button-height: 18px !default; - $fluent-scheduler-dropdown-button-padding: 2px !default; - $fluent-scheduler-dropdown-button-margin: 2px 1px 2px 3px !default; - $fluent-scheduler-dropdown-button-vertical-margin: 2px 1px 2px 1px !default; - $fluent-scheduler-dropdown-button-adaptive-margin: 0 2px !default; - $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 2px 0 1px !default; - - $fluent-scheduler-appointment-tooltip-content-margin-left: 8px !default; - $fluent-tooltip-marker-dimension: 18px !default; - $fluent-scheduler-appointment-tooltip-title-margin-top: 3px !default; - $fluent-scheduler-appointment-tooltip-remove-padding-top: 2px !default; - - $fluent-scheduler-appointment-popup-toolbar-height: 48px !default; - $fluent-scheduler-appointment-popup-icon-container-height: 24px !default; - $fluent-scheduler-appointment-popup-icon-padding-right: 8px !default; - $fluent-scheduler-appointment-popup-icon-margin-top: 18px !default; - $fluent-scheduler-appointment-popup-item-padding-horizontal: 4px !default; - $fluent-scheduler-appointment-popup-all-day-item-height: 30px !default; - $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: 8px !default; - $fluent-scheduler-appointment-popup-repeat-end-item-height: 24px !default; - - $agenda-appointment-title-font-size: 13px; - - $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default; - $fluent-scheduler-appointment-15min-height: 17px !default; - $fluent-scheduler-appointment-20min-height: 24px !default; - $fluent-scheduler-appointment-25min-height: 32px !default; - - $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default; - $fluent-scheduler-appointment-10min-title-font-size: 8px !default; - $fluent-scheduler-appointment-10min-title-line-height: 12px !default; - $fluent-scheduler-appointment-10min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-10min-icon-right: 2px !default; - - $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default; - $fluent-scheduler-appointment-15min-title-font-size: 12px !default; - $fluent-scheduler-appointment-15min-title-line-height: 12px !default; - $fluent-scheduler-appointment-15min-icon-font-size: 12px !default; - $fluent-scheduler-appointment-15min-icon-right: 5px !default; - - $fluent-scheduler-appointment-20min-recurrence-padding-right: 20px !default; - $fluent-scheduler-appointment-20min-icon-right: 5px !default; + $fluent-scheduler-collapsed-all-day-table-cell-height: ds.$spacing-240 !default; + $header-panel-time-cell-padding: ds.$spacing-80 !default; + + $header-day-element-height: ds.$spacing-240; + $fluent-scheduler-workspace-date-table-cell-height: ds.$spacing-280 !default; + + $fluent-scheduler-navigator-height: ds.$spacing-280 !default; + $fluent-scheduler-header-panel-day-font-size: ds.$font-size-140 !default; + $fluent-scheduler-header-height: ds.$spacing-340 !default; + $fluent-scheduler-header-offset: ds.$spacing-20 ds.$spacing-80 !default; + $fluent-scheduler-toolbar-item-offset: ds.$spacing-40 !default; + + $fluent-scheduler-appointment-tooltip-title-font-size: ds.$font-size-140 !default; + $fluent-scheduler-appointment-tooltip-date-font-size: ds.$font-size-110 !default; + $fluent-scheduler-workspace-month-cell-left-offset: ds.$spacing-40 !default; + + $fluent-scheduler-appointment-content-padding: ds.$spacing-40 ds.$spacing-60 ds.$spacing-40 ds.$spacing-80 !default; + $fluent-scheduler-recurring-appointment-content-padding: ds.$spacing-40 ds.$spacing-160 ds.$spacing-40 ds.$spacing-80 !default; + $fluent-scheduler-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-60 !default; + $fluent-scheduler-recurring-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-160 !default; + $fluent-scheduler-dropdown-button-height: ds.$spacing-180 !default; + $fluent-scheduler-dropdown-button-padding: ds.$spacing-20 !default; + $fluent-scheduler-dropdown-button-margin: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-30 !default; + $fluent-scheduler-dropdown-button-vertical-margin: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-10 !default; + $fluent-scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default; + $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 ds.$spacing-20 0 ds.$spacing-10 !default; + + $fluent-scheduler-appointment-tooltip-content-margin-left: ds.$spacing-80 !default; + $fluent-tooltip-marker-dimension: ds.$spacing-180 !default; + $fluent-scheduler-appointment-tooltip-title-margin-top: ds.$spacing-30 !default; + $fluent-scheduler-appointment-tooltip-remove-padding-top: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-popup-toolbar-height: ds.$spacing-480 !default; + $fluent-scheduler-appointment-popup-icon-container-height: ds.$spacing-240 !default; + $fluent-scheduler-appointment-popup-icon-padding-right: ds.$spacing-80 !default; + $fluent-scheduler-appointment-popup-icon-margin-top: ds.$spacing-180 !default; + $fluent-scheduler-appointment-popup-item-padding-horizontal: ds.$spacing-40 !default; + $fluent-scheduler-appointment-popup-all-day-item-height: ds.$spacing-300 !default; + $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-80 !default; + $fluent-scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-240 !default; + + $agenda-appointment-title-font-size: ds.$spacing-130; + + $fluent-scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default; + $fluent-scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid + $fluent-scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid + + $fluent-scheduler-appointment-10min-recurrence-padding-right: ds.$spacing-140 !default; + $fluent-scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default; + $fluent-scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; + $fluent-scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-10min-icon-right: ds.$spacing-20 !default; + + $fluent-scheduler-appointment-15min-recurrence-padding-right: ds.$spacing-160 !default; + $fluent-scheduler-appointment-15min-title-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-title-line-height: ds.$line-height-120 !default; + $fluent-scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; + $fluent-scheduler-appointment-15min-icon-right: ds.$spacing-50 !default; + + $fluent-scheduler-appointment-20min-recurrence-padding-right: ds.$spacing-200 !default; + $fluent-scheduler-appointment-20min-icon-right: ds.$spacing-50 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss index 2a83ace0c3af..b9185192ec6d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss @@ -14,7 +14,7 @@ $scrollview-loading-indicator-size: 42px; .dx-scrollview-scrollbottom-text, .dx-scrollview-pull-down-text { margin-left: 10px; - top: math.div(50px - $fluent-base-font-size, 2); + top: calc((50px - #{$fluent-base-font-size}) / 2); display: inline-block; .dx-rtl & { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss index 6e9d2691cc2d..e8d4211f5a9f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss @@ -1,6 +1,7 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-scrollbar-size-thin: 6px; -$fluent-scrollbar-size: 13px; +$fluent-scrollbar-size-thin: ds.$spacing-60; +$fluent-scrollbar-size: ds.$spacing-130; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss index ca6ac16b4c50..b178905d5de5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss @@ -15,9 +15,9 @@ } .dx-slider-bar { - margin-top: math.div($fluent-slider-wrapper-height - $fluent-slider-track-height, 2); - margin-right: math.div($fluent-slider-handle-size, 2); - margin-left: math.div($fluent-slider-handle-size, 2); + margin-top: calc((#{$fluent-slider-wrapper-height} - #{$fluent-slider-track-height}) / 2); + margin-right: calc((#{$fluent-slider-handle-size}) / 2); + margin-left: calc((#{$fluent-slider-handle-size}) / 2); background: $fluent-slider-bar-bg; height: $fluent-slider-track-height; border-radius: $fluent-slider-track-border-radius; @@ -33,8 +33,8 @@ } .dx-slider-handle { - margin-top: math.div($fluent-slider-track-height, 2) - math.div($fluent-slider-handle-size, 2); - margin-inline-end: math.div(-$fluent-slider-handle-size, 2); + margin-top: calc(#{$fluent-slider-track-height} / 2 - #{$fluent-slider-handle-size} / 2); + margin-inline-end: calc(#{$fluent-slider-handle-size} / -2); width: $fluent-slider-handle-size; height: $fluent-slider-handle-size; border-radius: $fluent-slider-radius; @@ -82,11 +82,11 @@ &.dx-state-disabled { .dx-popup-content { - padding-top: math.div($fluent-slider-tooltip-width, 2); + padding-top: calc((#{$fluent-slider-tooltip-width}) / 2); .dx-slider-tooltip-position-top & { padding-top: 6px; - padding-bottom: math.div($fluent-slider-tooltip-width, 2); + padding-bottom: calc((#{$fluent-slider-tooltip-width}) / 2); } } } @@ -95,11 +95,11 @@ } .dx-slider-tooltip-position-top { - padding-top: $fluent-slider-tooltip-width + 6; + padding-top: calc(#{$fluent-slider-tooltip-width} + 6px); } .dx-slider-tooltip-position-bottom { - padding-bottom: $fluent-slider-tooltip-width + 6; + padding-bottom: calc(#{$fluent-slider-tooltip-width} + 6px); } .dx-slider-label-position-bottom { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss index 59a9fe40718d..38713ce2d66a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,29 +8,29 @@ $fluent-slider-wrapper-height: null !default; $fluent-slider-tooltip-width: null !default; $fluent-slider-top-tooltip-margin: null !default; -$fluent-slider-height: 28px !default; // for fieldset height +$fluent-slider-height: ds.$spacing-280 !default; // for fieldset height $fluent-slider-radius: 50% !default; $fluent-slider-track-height: null !default; -$fluent-slider-track-border-radius: 2px !default; +$fluent-slider-track-border-radius: ds.$border-radius-20 !default; $fluent-slider-handle-height: null !default; $fluent-slider-handle-inner-size: null !default; @if $size == "default" { - $fluent-slider-track-height: 4px !default; - $fluent-slider-handle-height: 18px !default; - $fluent-slider-handle-size: 20px !default; - $fluent-slider-handle-inner-size: 18px !default; - $fluent-slider-wrapper-height: 32px !default; - $fluent-slider-tooltip-width: 34px !default; - $fluent-slider-top-tooltip-margin: -5px !default; + $fluent-slider-track-height: ds.$spacing-40 !default; + $fluent-slider-handle-height: ds.$spacing-180 !default; + $fluent-slider-handle-size: ds.$spacing-200 !default; + $fluent-slider-handle-inner-size: ds.$spacing-180 !default; + $fluent-slider-wrapper-height: ds.$spacing-320 !default; + $fluent-slider-tooltip-width: ds.$spacing-340 !default; + $fluent-slider-top-tooltip-margin: -5px !default; // dx-offscale: -5px } @else if $size == "compact" { - $fluent-slider-track-height: 2px !default; - $fluent-slider-handle-height: 14px !default; - $fluent-slider-handle-size: 16px !default; - $fluent-slider-handle-inner-size: 14px !default; - $fluent-slider-wrapper-height: 26px !default; - $fluent-slider-tooltip-width: 28px !default; - $fluent-slider-top-tooltip-margin: -2px !default; + $fluent-slider-track-height: ds.$spacing-20 !default; + $fluent-slider-handle-height: ds.$spacing-140 !default; + $fluent-slider-handle-size: ds.$spacing-160 !default; + $fluent-slider-handle-inner-size: ds.$spacing-140 !default; + $fluent-slider-wrapper-height: ds.$spacing-260 !default; + $fluent-slider-tooltip-width: ds.$spacing-280 !default; + $fluent-slider-top-tooltip-margin: ds.$spacing-minus-20 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss index ea4e78592f90..4ca31379bea9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,15 +9,15 @@ $fluent-main-fa-button-size: null !default; $fluent-fa-button-size: null !default; @if $size == "default" { - $fluent-main-fa-button-size: 44px !default; - $fluent-fa-button-size: 44px !default; - $fluent-main-fa-button-horizontal-padding: 16px; - $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px; + $fluent-main-fa-button-size: ds.$spacing-440 !default; + $fluent-fa-button-size: ds.$spacing-440 !default; + $fluent-main-fa-button-horizontal-padding: ds.$spacing-160; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 ds.$spacing-80; } @else if $size == "compact" { - $fluent-main-fa-button-size: 32px !default; - $fluent-fa-button-size: 32px !default; - $fluent-main-fa-button-horizontal-padding: 12px; - $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px; + $fluent-main-fa-button-size: ds.$spacing-320 !default; + $fluent-fa-button-size: ds.$spacing-320 !default; + $fluent-main-fa-button-horizontal-padding: ds.$spacing-120; + $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 ds.$spacing-40; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss index 6f0cb64e572f..94c1d0dbe502 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss @@ -1,5 +1,6 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$splitter-resize-handle-icon-size: 20px; +$splitter-resize-handle-icon-size: ds.$spacing-200; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss index ffaac27f33cd..4a5cfc2b35b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss @@ -2,6 +2,7 @@ @use "../colors" as *; @use "../sizes" as *; @use "../typography/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -13,25 +14,25 @@ $stepper-step-content-column-gap: null !default; $stepper-step-optional-mark-font-size: $fluent-xs-font-size !default; $stepper-step-icon-size: $fluent-button-icon-size !default; -$stepper-step-selected-font-weight: 600 !default; +$stepper-step-selected-font-weight: ds.$font-weight-600 !default; $stepper-step-transition-duration: .4s !default; @if $size == "default" { - $stepper-padding: 12px !default; - $stepper-step-min-size: 48px !default; - $stepper-step-indicator-size: 32px !default; - $stepper-step-content-row-gap: 8px !default; - $stepper-step-content-column-gap: 12px !default; + $stepper-padding: ds.$spacing-120 !default; + $stepper-step-min-size: ds.$spacing-480 !default; + $stepper-step-indicator-size: ds.$spacing-320 !default; + $stepper-step-content-row-gap: ds.$spacing-80 !default; + $stepper-step-content-column-gap: ds.$spacing-120 !default; } @else if $size == "compact" { - $stepper-padding: 8px !default; - $stepper-step-min-size: 40px !default; - $stepper-step-indicator-size: 24px !default; - $stepper-step-content-row-gap: 6px !default; - $stepper-step-content-column-gap: 8px !default; + $stepper-padding: ds.$spacing-80 !default; + $stepper-step-min-size: ds.$spacing-400 !default; + $stepper-step-indicator-size: ds.$spacing-240 !default; + $stepper-step-content-row-gap: ds.$spacing-60 !default; + $stepper-step-content-column-gap: ds.$spacing-80 !default; } -$stepper-connector-thickness: 2px !default; +$stepper-connector-thickness: ds.$spacing-20 !default; $stepper-connector-size: $stepper-step-indicator-size !default; $stepper-connector-padding: $stepper-padding !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss index 0342b65ea9b5..3e070ec4bb2b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss @@ -46,7 +46,7 @@ $fluent-switch-shadow: none; $switch-border-color-disabled, ); @include dx-switch-rtl( - $switch-handle-height - $switch-handle-margin, + calc(#{$switch-handle-height} - #{$switch-handle-margin}), $fluent-switch-shadow-blur-radius, $fluent-switch-container-adjustment, ); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss index b3a5482eb57c..b4ed7a97c503 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss @@ -1,10 +1,11 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-switch-width: null !default; $switch-handle-margin: null !default; -$switch-padding: 8px !default; +$switch-padding: ds.$spacing-80 !default; $switch-container-vertical-margin: null !default; $switch-container-horizontal-padding: null !default; $fluent-switch-height: null !default; @@ -12,24 +13,24 @@ $switch-handle-height: null !default; $switch-container-height: null !default; $fluent-switch-shadow-blur-radius: 0 !default; -$fluent-switch-container-adjustment: 6px !default; +$fluent-switch-container-adjustment: ds.$spacing-60 !default; @if $size == "default" { - $fluent-switch-width: 40px !default; - $switch-handle-height: 14px !default; - $switch-handle-margin: 3px !default; + $fluent-switch-width: ds.$spacing-400 !default; + $switch-handle-height: ds.$spacing-140 !default; + $switch-handle-margin: ds.$spacing-30 !default; $switch-container-vertical-margin: 0 !default; $switch-container-horizontal-padding: $switch-handle-margin !default; - $fluent-switch-height: 20px !default; + $fluent-switch-height: ds.$spacing-200 !default; $switch-container-height: $fluent-switch-height !default; } @else if $size == "compact" { - $fluent-switch-width: 32px !default; - $switch-handle-height: 12px !default; - $switch-handle-margin: 2px !default; + $fluent-switch-width: ds.$spacing-320 !default; + $switch-handle-height: ds.$spacing-120 !default; + $switch-handle-margin: ds.$spacing-20 !default; $switch-container-vertical-margin: 0 !default; $switch-container-horizontal-padding: $switch-handle-margin !default; - $fluent-switch-height: 16px !default; + $fluent-switch-height: ds.$spacing-160 !default; $switch-container-height: $fluent-switch-height !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss index 002c2ac14ca9..39b32276eb99 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss @@ -64,9 +64,9 @@ height: $fluent-indicator-thickness-secondary; @if $position == top { - top: -$fluent-tabs-item-padding-top-bottom; + top: calc(-1 * #{$fluent-tabs-item-padding-top-bottom}); } @else if $position == bottom { - bottom: -$fluent-tabs-item-padding-top-bottom; + bottom: calc(-1 * #{$fluent-tabs-item-padding-top-bottom}); } } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss index 1b1aec0e4282..9aedc507da3a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss @@ -1,16 +1,17 @@ @use "../../sizes" as *; +@use "../../../../_design-system/variables/ds" as ds; // adduse -$fluent-tabs-item-gap: 4px !default; +$fluent-tabs-item-gap: ds.$spacing-40 !default; $fluent-tabs-item-padding: null !default; $fluent-tabs-item-padding-top-bottom: null !default; $fluent-tabs-item-padding-right-left: null !default; $fluent-tab-height: null !default; -$fluent-tab-font-weight-basic: 400 !default; -$fluent-tab-font-weight-accent: 500 !default; +$fluent-tab-font-weight-basic: ds.$font-weight-400 !default; +$fluent-tab-font-weight-accent: ds.$font-weight-500 !default; $fluent-base-icon-margin: null !default; $fluent-tabs-icon-size: $fluent-base-icon-size !default; @@ -21,41 +22,41 @@ $fluent-tab-nav-button-content-padding: null !default; $fluent-tab-vertical-nav-button-content-padding: null !default; -$fluent-indicator-thickness-primary: 2px !default; -$fluent-indicator-thickness-secondary: 3px !default; +$fluent-indicator-thickness-primary: ds.$spacing-20 !default; +$fluent-indicator-thickness-secondary: ds.$spacing-30 !default; $fluent-indicator-length-primary: 100% !default; $fluent-indicator-length-secondary: 100% !default; -$fluent-tab-item-border-radius-secondary: 4px !default; -$fluent-indicator-border-radius-secondary: 4px !default; +$fluent-tab-item-border-radius-secondary: ds.$border-radius-40 !default; +$fluent-indicator-border-radius-secondary: ds.$border-radius-40 !default; $fluent-badge-min-size: null !default; @if $size == "default" { - $fluent-tabs-item-padding-top-bottom: 12px !default; - $fluent-tabs-item-padding-right-left: 10px !default; + $fluent-tabs-item-padding-top-bottom: ds.$spacing-120 !default; + $fluent-tabs-item-padding-right-left: ds.$spacing-100 !default; $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; $fluent-tab-height: auto !default; - $fluent-base-icon-margin: 8px !default; - $fluent-tab-nav-button-icon-width: 20px !default; - $fluent-tab-nav-button-icon-height: 20px !default; - $fluent-tab-nav-button-icon-font-size: 20px !default; - $fluent-tab-nav-button-content-padding: 0 4px !default; - $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; - $fluent-badge-min-size: 20px !default; + $fluent-base-icon-margin: ds.$spacing-80 !default; + $fluent-tab-nav-button-icon-width: ds.$spacing-200 !default; + $fluent-tab-nav-button-icon-height: ds.$spacing-200 !default; + $fluent-tab-nav-button-icon-font-size: ds.$font-size-200 !default; + $fluent-tab-nav-button-content-padding: 0 ds.$spacing-40 !default; + $fluent-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default; + $fluent-badge-min-size: ds.$spacing-200 !default; } @else if $size == "compact" { - $fluent-tabs-item-padding-top-bottom: 8px !default; - $fluent-tabs-item-padding-right-left: 8px !default; + $fluent-tabs-item-padding-top-bottom: ds.$spacing-80 !default; + $fluent-tabs-item-padding-right-left: ds.$spacing-80 !default; $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default; $fluent-tab-height: auto !default; - $fluent-base-icon-margin: 8px !default; - $fluent-tab-nav-button-icon-width: 16px !default; - $fluent-tab-nav-button-icon-height: 16px !default; - $fluent-tab-nav-button-icon-font-size: 16px !default; - $fluent-tab-nav-button-content-padding: 0 4px !default; - $fluent-tab-vertical-nav-button-content-padding: 4px 0 !default; - $fluent-badge-min-size: 16px !default; + $fluent-base-icon-margin: ds.$spacing-80 !default; + $fluent-tab-nav-button-icon-width: ds.$spacing-160 !default; + $fluent-tab-nav-button-icon-height: ds.$spacing-160 !default; + $fluent-tab-nav-button-icon-font-size: ds.$font-size-160 !default; + $fluent-tab-nav-button-content-padding: 0 ds.$spacing-40 !default; + $fluent-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default; + $fluent-badge-min-size: ds.$spacing-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss index d83c4da77b89..60c538c94014 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss @@ -25,8 +25,8 @@ &.dx-editor-underlined { .dx-tag-container { - padding-top: $fluent-tagbox-tag-container-vertical-padding + 1px; - padding-bottom: $fluent-tagbox-tag-container-vertical-padding + 1px; + padding-top: calc(#{$fluent-tagbox-tag-container-vertical-padding} + 1px); + padding-bottom: calc(#{$fluent-tagbox-tag-container-vertical-padding} + 1px); } } @@ -69,8 +69,8 @@ &.dx-editor-underlined { .dx-tag-container, .dx-placeholder::before { - padding-top: $fluent-tagbox-filled-with-label-top-padding + 1px; - padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding + 1px; + padding-top: calc(#{$fluent-tagbox-filled-with-label-top-padding} + 1px); + padding-bottom: calc(#{$fluent-tagbox-filled-with-label-bottom-padding} + 1px); } } } @@ -123,7 +123,7 @@ @include dx-icon(clear); - font-size: $fluent-tagbox-tag-content-font-size + 2px; + font-size: calc(#{$fluent-tagbox-tag-content-font-size} + 2px); &::before { content: "\f15f"; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss index 2c3b9c7da6b3..f07f7fe5a32d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,8 +10,8 @@ $fluent-tagbox-tag-content-font-size: null !default; $fluent-tagbox-tag-container-padding-left: null !default; $fluent-tagbox-tag-container-vertical-padding: null !default; $fluent-tagbox-tag-height: null !default; -$fluent-tagbox-select-all-padding-bottom: 12px !default; -$fluent-tagbox-select-all-margin-bottom: 3px !default; +$fluent-tagbox-select-all-padding-bottom: ds.$spacing-120 !default; +$fluent-tagbox-select-all-margin-bottom: ds.$spacing-30 !default; $tagbox-tag-border-radius: 999em !default; $fluent-tagbox-filled-with-label-top-padding: null !default; $fluent-tagbox-filled-with-label-bottom-padding: null !default; @@ -18,29 +19,29 @@ $fluent-tagbox-tag-content-line-height: null !default; $fluent-tagbox-tag-container-gap: null !default; @if $size == "default" { - $fluent-tagbox-tag-content-padding-left: 6px !default; - $fluent-tagbox-tag-content-padding-right: 20px !default; - $fluent-tagbox-tag-content-vertical-padding: 2px !default; - $fluent-tagbox-tag-content-font-size: 12px !default; - $fluent-tagbox-tag-container-padding-left: 12px !default; - $fluent-tagbox-tag-container-vertical-padding: 5px !default; - $fluent-tagbox-tag-container-gap: 4px !default; - $fluent-tagbox-tag-height: 20px !default; + $fluent-tagbox-tag-content-padding-left: ds.$spacing-60 !default; + $fluent-tagbox-tag-content-padding-right: ds.$spacing-200 !default; + $fluent-tagbox-tag-content-vertical-padding: ds.$spacing-20 !default; + $fluent-tagbox-tag-content-font-size: ds.$font-size-120 !default; + $fluent-tagbox-tag-container-padding-left: ds.$spacing-120 !default; + $fluent-tagbox-tag-container-vertical-padding: ds.$spacing-50 !default; + $fluent-tagbox-tag-container-gap: ds.$spacing-40 !default; + $fluent-tagbox-tag-height: ds.$spacing-200 !default; $fluent-tagbox-tag-content-line-height: 1.1666em !default; - $fluent-tagbox-filled-with-label-top-padding: 9px !default; - $fluent-tagbox-filled-with-label-bottom-padding: 1px !default; + $fluent-tagbox-filled-with-label-top-padding: ds.$spacing-90 !default; + $fluent-tagbox-filled-with-label-bottom-padding: ds.$spacing-10 !default; } @else if $size == "compact" { - $fluent-tagbox-tag-content-padding-left: 4px !default; - $fluent-tagbox-tag-content-padding-right: 20px !default; + $fluent-tagbox-tag-content-padding-left: ds.$spacing-40 !default; + $fluent-tagbox-tag-content-padding-right: ds.$spacing-200 !default; $fluent-tagbox-tag-content-vertical-padding: 0 !default; - $fluent-tagbox-tag-content-font-size: 10px !default; - $fluent-tagbox-tag-container-padding-left: 8px !default; - $fluent-tagbox-tag-container-vertical-padding: 3px !default; - $fluent-tagbox-tag-container-gap: 2px !default; - $fluent-tagbox-tag-height: 16px !default; + $fluent-tagbox-tag-content-font-size: ds.$font-size-100 !default; + $fluent-tagbox-tag-container-padding-left: ds.$spacing-80 !default; + $fluent-tagbox-tag-container-vertical-padding: ds.$spacing-30 !default; + $fluent-tagbox-tag-container-gap: ds.$spacing-20 !default; + $fluent-tagbox-tag-height: ds.$spacing-160 !default; $fluent-tagbox-tag-content-line-height: 1.3333em !default; - $fluent-tagbox-filled-with-label-top-padding: 6px !default; + $fluent-tagbox-filled-with-label-top-padding: ds.$spacing-60 !default; $fluent-tagbox-filled-with-label-bottom-padding: 0 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss index 2164f02629b9..5c2ea7b6f4b2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss @@ -20,8 +20,8 @@ .dx-textarea { &.dx-editor-underlined { .dx-texteditor-input { - padding-top: $fluent-standard-texteditor-input-top-padding + 1; - padding-bottom: $fluent-standard-texteditor-input-bottom-padding + 1; + padding-top: calc(#{$fluent-standard-texteditor-input-top-padding} + 1px); + padding-bottom: calc(#{$fluent-standard-texteditor-input-bottom-padding} + 1px); } &.dx-texteditor-with-label:not(.dx-texteditor-label-outside), diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss index ede206945fd0..945eeea2df06 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss @@ -1,13 +1,14 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $textarea-content-line-height: null !default; @if $size == "default" { - $textarea-content-line-height: 20px !default; + $textarea-content-line-height: ds.$line-height-200 !default; } @else if $size == "compact" { - $textarea-content-line-height: 16px !default; + $textarea-content-line-height: ds.$line-height-160 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss index 130c6b7a4650..94dc92b1003a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss @@ -1,13 +1,14 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $textbox-search-icon-size: null !default; @if $size == "default" { - $textbox-search-icon-size: 32px !default; + $textbox-search-icon-size: ds.$spacing-320 !default; } @else if $size == "compact" { - $textbox-search-icon-size: 24px !default; + $textbox-search-icon-size: ds.$spacing-240 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss index 5b1105e210d5..1c953ff94076 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss @@ -15,7 +15,7 @@ // adduse $fluent-base-standard-texteditor-input-horizontal-padding: 0; -$fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding; +$fluent-texteditor-invalid-badge-size: calc(#{$fluent-invalid-badge-size} + 2 * #{$fluent-invalid-badge-horizontal-padding}); $fluent-editor-custom-button-margin: 6px; $fluent-editor-border-width: 1px; @@ -210,7 +210,7 @@ $fluent-editor-border-width: 1px; @mixin texteditor-input-padding-filled() { .dx-texteditor-input { - padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-filled-texteditor-input-horizontal-padding; + padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-filled-texteditor-input-horizontal-padding}); } } @@ -227,7 +227,7 @@ $fluent-editor-border-width: 1px; &.dx-valid { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-base-standard-texteditor-input-horizontal-padding}); } } @@ -254,7 +254,7 @@ $fluent-editor-border-width: 1px; &.dx-validation-pending { &.dx-editor-underlined { .dx-texteditor-input { - padding-inline-end: $fluent-texteditor-invalid-badge-size + $fluent-base-standard-texteditor-input-horizontal-padding; + padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-base-standard-texteditor-input-horizontal-padding}); } } @@ -364,7 +364,7 @@ $fluent-editor-border-width: 1px; } .dx-texteditor-input { - min-height: $fluent-texteditor-input-height - 2px; + min-height: calc(#{$fluent-texteditor-input-height} - 2px); } @include validation-icon-position(); @@ -503,7 +503,7 @@ $fluent-editor-border-width: 1px; solid, $fluent-base-inline-block-height, $fluent-base-inline-block-height, - math.div(1px + $fluent-texteditor-font-size, 2), + calc((1px + #{$fluent-texteditor-font-size}) / 2), $fluent-texteditor-label-outside-top-offset, 0.5px, $fluent-filled-texteditor-input-horizontal-padding, diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss index b2aa8632702e..4f305d4b9094 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -24,42 +25,42 @@ $texteditor-icon-container-size: $fluent-base-icon-size !default; @if $size == "default" { $fluent-texteditor-line-height: 1.428571 !default; - $fluent-texteditor-font-size: 14px !default; - $fluent-texteditor-input-height: 32px !default; - $fluent-texteditor-label-outside-height: 20px !default; - $fluent-texteditor-label-outside-top-offset: 24px !default; - $fluent-texteditor-label-font-size: 12px !default; - $fluent-texteditor-label-top-offset: -1px !default; - $fluent-filled-texteditor-input-horizontal-padding: 12px !default; - $fluent-filled-texteditor-input-top-padding: 5px !default; - $fluent-filled-texteditor-input-with-label-top-padding: 8px !default; - $fluent-filled-texteditor-input-bottom-padding: 5px !default; - $fluent-filled-texteditor-input-with-label-bottom-padding: 2px !default; - $fluent-standard-texteditor-input-top-padding: 5px !default; - $fluent-standard-texteditor-input-bottom-padding: 5px !default; - $fluent-standard-texteditor-with-label-input-top-padding: 9px !default; - $fluent-standard-texteditor-with-label-input-bottom-padding: 3px !default; - $fluent-underlined-editor-button-height: 22px !default; + $fluent-texteditor-font-size: ds.$font-size-140 !default; + $fluent-texteditor-input-height: ds.$spacing-320 !default; + $fluent-texteditor-label-outside-height: ds.$spacing-200 !default; + $fluent-texteditor-label-outside-top-offset: ds.$spacing-240 !default; + $fluent-texteditor-label-font-size: ds.$font-size-120 !default; + $fluent-texteditor-label-top-offset: ds.$spacing-minus-10 !default; + $fluent-filled-texteditor-input-horizontal-padding: ds.$spacing-120 !default; + $fluent-filled-texteditor-input-top-padding: ds.$spacing-50 !default; + $fluent-filled-texteditor-input-with-label-top-padding: ds.$spacing-80 !default; + $fluent-filled-texteditor-input-bottom-padding: ds.$spacing-50 !default; + $fluent-filled-texteditor-input-with-label-bottom-padding: ds.$spacing-20 !default; + $fluent-standard-texteditor-input-top-padding: ds.$spacing-50 !default; + $fluent-standard-texteditor-input-bottom-padding: ds.$spacing-50 !default; + $fluent-standard-texteditor-with-label-input-top-padding: ds.$spacing-90 !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: ds.$spacing-30 !default; + $fluent-underlined-editor-button-height: ds.$spacing-220 !default; } @else if $size == "compact" { $fluent-texteditor-line-height: 1.3333 !default; - $fluent-texteditor-font-size: 12px !default; - $fluent-texteditor-input-height: 24px !default; - $fluent-texteditor-label-outside-height: 16px !default; - $fluent-texteditor-label-outside-top-offset: 18px !default; - $fluent-texteditor-label-font-size: 10px !default; - $fluent-texteditor-label-top-offset: -1px !default; - $fluent-filled-texteditor-input-horizontal-padding: 8px !default; - $fluent-filled-texteditor-input-top-padding: 3px !default; - $fluent-filled-texteditor-input-with-label-top-padding: 6px !default; - $fluent-filled-texteditor-input-bottom-padding: 3px !default; + $fluent-texteditor-font-size: ds.$font-size-120 !default; + $fluent-texteditor-input-height: ds.$spacing-240 !default; + $fluent-texteditor-label-outside-height: ds.$spacing-160 !default; + $fluent-texteditor-label-outside-top-offset: ds.$spacing-180 !default; + $fluent-texteditor-label-font-size: ds.$font-size-100 !default; + $fluent-texteditor-label-top-offset: ds.$spacing-minus-10 !default; + $fluent-filled-texteditor-input-horizontal-padding: ds.$spacing-80 !default; + $fluent-filled-texteditor-input-top-padding: ds.$spacing-30 !default; + $fluent-filled-texteditor-input-with-label-top-padding: ds.$spacing-60 !default; + $fluent-filled-texteditor-input-bottom-padding: ds.$spacing-30 !default; $fluent-filled-texteditor-input-with-label-bottom-padding: 0 !default; - $fluent-standard-texteditor-input-top-padding: 3px !default; - $fluent-standard-texteditor-input-bottom-padding: 3px !default; - $fluent-standard-texteditor-with-label-input-top-padding: 6px !default; - $fluent-standard-texteditor-with-label-input-bottom-padding: 2px !default; - $fluent-underlined-editor-button-height: 22px !default; + $fluent-standard-texteditor-input-top-padding: ds.$spacing-30 !default; + $fluent-standard-texteditor-input-bottom-padding: ds.$spacing-30 !default; + $fluent-standard-texteditor-with-label-input-top-padding: ds.$spacing-60 !default; + $fluent-standard-texteditor-with-label-input-bottom-padding: ds.$spacing-20 !default; + $fluent-underlined-editor-button-height: ds.$spacing-220 !default; } $fluent-filled-texteditor-input-padding: @@ -67,5 +68,5 @@ $fluent-filled-texteditor-input-padding: $fluent-filled-texteditor-input-horizontal-padding $fluent-filled-texteditor-input-bottom-padding !default; -$fluent-filled-texteditor-input-button-horizontal-padding: $fluent-filled-texteditor-input-horizontal-padding - 4px !default; -$texteditor-spin-button-horizontal-padding: math.div($fluent-filled-texteditor-input-horizontal-padding, 2) !default; +$fluent-filled-texteditor-input-button-horizontal-padding: calc(#{$fluent-filled-texteditor-input-horizontal-padding} - #{ds.$spacing-40}) !default; +$texteditor-spin-button-horizontal-padding: calc((#{$fluent-filled-texteditor-input-horizontal-padding}) / 2) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss index 674156372151..c4ed8ac6c44f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss @@ -1,7 +1,8 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-timeview-field-min-height: 35px !default; -$fluent-timeview-time-separator-margin: 5px !default; -$fluent-timeview-format12-width: 64px !default; +$fluent-timeview-field-min-height: 35px !default; // dx-offscale: 35px +$fluent-timeview-time-separator-margin: ds.$spacing-50 !default; +$fluent-timeview-format12-width: ds.$spacing-640 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss index 44c7288ca1a2..e1bbcf515334 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -6,16 +7,16 @@ $toast-border-radius: $fluent-base-border-radius !default; $fluent-toast-height: null !default; $fluent-toast-item-gap: null !default; $fluent-toast-content-vertical-padding: null !default; -$fluent-toast-content-horizontal-padding: 12px !default; +$fluent-toast-content-horizontal-padding: ds.$spacing-120 !default; @if $size == "default" { - $fluent-toast-content-vertical-padding: 12px !default; - $fluent-toast-height: 44px !default; - $fluent-toast-item-gap: 12px !default; + $fluent-toast-content-vertical-padding: ds.$spacing-120 !default; + $fluent-toast-height: ds.$spacing-440 !default; + $fluent-toast-item-gap: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-toast-content-vertical-padding: 8px !default; - $fluent-toast-height: 36px !default; - $fluent-toast-item-gap: 8px !default; + $fluent-toast-content-vertical-padding: ds.$spacing-80 !default; + $fluent-toast-height: ds.$spacing-360 !default; + $fluent-toast-item-gap: ds.$spacing-80 !default; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss index 4b44754d9a76..a57c7282b0cf 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss @@ -49,7 +49,7 @@ .dx-list-item-content, .dx-toolbar-item-auto-hide { - padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding $fluent-list-item-vertical-padding - 1px; + padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding calc(#{$fluent-list-item-vertical-padding} - 1px); } .dx-list-item-content { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss index 8f7b3eb50e09..c507d43ffa19 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss @@ -33,7 +33,7 @@ padding-inline-end: $item-spacing; &.dx-toolbar-first-in-group { - padding-left: $fluent-toolbar-item-spacing * 4; + padding-left: calc(#{$fluent-toolbar-item-spacing} * 4); } &:last-child { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss index d72e05698d91..7ac88578181d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss @@ -1,23 +1,24 @@ @use "../sizes" as *; @use "../typography/sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-toolbar-height: null !default; $fluent-toolbar-padding: 0 !default; -$fluent-toolbar-item-spacing: 4px !default; +$fluent-toolbar-item-spacing: ds.$spacing-40 !default; $fluent-toolbar-label-font-size: $fluent-m-font-size !default; $fluent-toolbar-section-padding: null !default; @if $size == "default" { - $fluent-toolbar-height: 48px !default; - $fluent-toolbar-section-padding: 12px !default; + $fluent-toolbar-height: ds.$spacing-480 !default; + $fluent-toolbar-section-padding: ds.$spacing-120 !default; } @else if $size == "compact" { - $fluent-toolbar-height: 36px !default; - $fluent-toolbar-section-padding: 8px !default; + $fluent-toolbar-height: ds.$spacing-360 !default; + $fluent-toolbar-section-padding: ds.$spacing-80 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss index 571890f9a895..607428c0db94 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss @@ -1,19 +1,20 @@ @use "../common/colors" as *; @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-tooltip-padding: null !default; $fluent-tooltip-font-size: null !default; -$fluent-tooltip-arrow-border-radius: 2px !default; -$fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default; +$fluent-tooltip-arrow-border-radius: ds.$border-radius-20 !default; +$fluent-tooltip-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1 !default; @if $size == "default" { - $fluent-tooltip-padding: 7px 11px !default; - $fluent-tooltip-font-size: 12px; + $fluent-tooltip-padding: ds.$spacing-70 ds.$spacing-110 !default; + $fluent-tooltip-font-size: ds.$font-size-120; } @else if $size == "compact" { - $fluent-tooltip-padding: 3px 5px !default; - $fluent-tooltip-font-size: 12px; + $fluent-tooltip-padding: ds.$spacing-30 ds.$spacing-50 !default; + $fluent-tooltip-font-size: ds.$font-size-120; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss index 52edc764756c..c2b66b63131d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss @@ -1,22 +1,23 @@ @use "sass:math"; @use "../sizes" as *; @use "../../base/treeList/variables" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $treelist-fluent-expand-icon-size: null !default; @if $size == "default" { - $treelist-fluent-expand-icon-size: 20px !default; + $treelist-fluent-expand-icon-size: ds.$spacing-200 !default; } @else if $size == "compact" { - $treelist-fluent-expand-icon-size: 16px !default; + $treelist-fluent-expand-icon-size: ds.$spacing-160 !default; } $treelist-expand-icon-size: $treelist-fluent-expand-icon-size !default; $treelist-expand-icon-name-expanded: chevrondown !default; $treelist-expand-icon-name-collapsed: chevronright !default; -$treelist-expand-icon-right-gap: 4px !default; -$treelist-expand-checkbox-size: 16px !default; -$treelist-expand-checkbox-right-gap: 8px !default; +$treelist-expand-icon-right-gap: ds.$spacing-40 !default; +$treelist-expand-checkbox-size: ds.$spacing-160 !default; +$treelist-expand-checkbox-right-gap: ds.$spacing-80 !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss index edbfea30a6ba..d2313b5904c8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss @@ -116,7 +116,7 @@ $treeview-hover-bg, $treeview-item-hover-color, $treeview-item-selected-color, - $fluent-treeview-toggle-item-width + $fluent-treeview-item-element-gap, + calc(#{$fluent-treeview-toggle-item-width} + #{$fluent-treeview-item-element-gap}), $fluent-treeview-item-margin, $fluent-treeview-item-border-radius, ); diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss index 506feb58959b..2c68d35addad 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss @@ -1,15 +1,16 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $fluent-treeview-toggle-item-width: null !default; $fluent-treeview-item-height: null !default; $fluent-checkbox-container-size: null !default; -$fluent-treeview-container-with-border-offset: 8px; -$fluent-treeview-item-element-gap: 8px !default; -$fluent-treeview-item-margin: 1px 0; -$fluent-treeview-item-border-radius: 4px; -$fluent-treeview-border-padding: 1px; +$fluent-treeview-container-with-border-offset: ds.$spacing-80; +$fluent-treeview-item-element-gap: ds.$spacing-80 !default; +$fluent-treeview-item-margin: ds.$spacing-10 0; +$fluent-treeview-item-border-radius: ds.$border-radius-40; +$fluent-treeview-border-padding: ds.$spacing-10; $fluent-treeview-container-padding: $fluent-treeview-border-padding $fluent-treeview-border-padding @@ -22,29 +23,29 @@ $fluent-treeview-item-padding: null !default; $fluent-treeview-load-indicator-size: null !default; $fluent-treeview-searchbox-margin-bottom: null !default; $fluent-treeview-search-editor-height: null !default; -$fluent-treeview-item-side-padding: 12px !default; -$fluent-select-all-item-border-visible-padding: 26px !default; +$fluent-treeview-item-side-padding: ds.$spacing-120 !default; +$fluent-select-all-item-border-visible-padding: ds.$spacing-260 !default; @if $size == "default" { - $fluent-treeview-item-height: 44px !default; - $fluent-treeview-toggle-item-width: 20px !default; - $fluent-checkbox-container-size: 20px !default; - $fluent-treeview-checkbox-offset: 42px !default; - $fluent-select-all-item-padding: 15px 42px !default; - $fluent-treeview-item-padding: 12px $fluent-treeview-item-side-padding !default; - $fluent-treeview-load-indicator-size: 20px !default; - $fluent-treeview-searchbox-margin-bottom: 8px !default; - $fluent-treeview-search-editor-height: 48px; + $fluent-treeview-item-height: ds.$spacing-440 !default; + $fluent-treeview-toggle-item-width: ds.$spacing-200 !default; + $fluent-checkbox-container-size: ds.$spacing-200 !default; + $fluent-treeview-checkbox-offset: 42px !default; // dx-offscale: 42px + $fluent-select-all-item-padding: ds.$spacing-150 42px !default; // dx-offscale: 42px + $fluent-treeview-item-padding: ds.$spacing-120 $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: ds.$spacing-200 !default; + $fluent-treeview-searchbox-margin-bottom: ds.$spacing-80 !default; + $fluent-treeview-search-editor-height: ds.$spacing-480; } @else if $size == "compact" { - $fluent-treeview-item-height: 32px !default; - $fluent-treeview-toggle-item-width: 16px !default; - $fluent-treeview-checkbox-offset: 36px !default; - $fluent-checkbox-container-size: 16px !default; - $fluent-select-all-item-padding: 10px $fluent-treeview-checkbox-offset !default; - $fluent-treeview-item-padding: 10px $fluent-treeview-item-side-padding !default; - $fluent-treeview-load-indicator-size: 16px !default; - $fluent-treeview-searchbox-margin-bottom: 4px !default; - $fluent-treeview-search-editor-height: 32px; + $fluent-treeview-item-height: ds.$spacing-320 !default; + $fluent-treeview-toggle-item-width: ds.$spacing-160 !default; + $fluent-treeview-checkbox-offset: ds.$spacing-360 !default; + $fluent-checkbox-container-size: ds.$spacing-160 !default; + $fluent-select-all-item-padding: ds.$spacing-100 $fluent-treeview-checkbox-offset !default; + $fluent-treeview-item-padding: ds.$spacing-100 $fluent-treeview-item-side-padding !default; + $fluent-treeview-load-indicator-size: ds.$spacing-160 !default; + $fluent-treeview-searchbox-margin-bottom: ds.$spacing-40 !default; + $fluent-treeview-search-editor-height: ds.$spacing-320; } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss index 42f21a2d9a20..af8338bdc124 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -15,33 +16,33 @@ $fluent-h5-font-size: null !default; $fluent-h6-font-size: null !default; @if $size == "default" { - $fluent-xl-font-size: 34px !default; - $fluent-l-font-size: 28px !default; - $fluent-m-font-size: 20px !default; - $fluent-s-font-size: 18px !default; - $fluent-xs-font-size: 12px !default; - - $fluent-h1-font-size: 40px !default; - $fluent-h2-font-size: 36px !default; - $fluent-h3-font-size: 32px !default; - $fluent-h4-font-size: 26px !default; - $fluent-h5-font-size: 22px !default; - $fluent-h6-font-size: 22px !default; + $fluent-xl-font-size: ds.$spacing-340 !default; + $fluent-l-font-size: ds.$font-size-280 !default; + $fluent-m-font-size: ds.$font-size-200 !default; + $fluent-s-font-size: ds.$font-size-180 !default; + $fluent-xs-font-size: ds.$font-size-120 !default; + + $fluent-h1-font-size: ds.$font-size-400 !default; + $fluent-h2-font-size: ds.$font-size-360 !default; + $fluent-h3-font-size: ds.$font-size-320 !default; + $fluent-h4-font-size: ds.$font-size-260 !default; + $fluent-h5-font-size: ds.$font-size-220 !default; + $fluent-h6-font-size: ds.$font-size-220 !default; } @else if $size == "compact" { - $fluent-xl-font-size: 24px !default; - $fluent-l-font-size: 20px !default; - $fluent-m-font-size: 16px !default; - $fluent-s-font-size: 14px !default; - $fluent-xs-font-size: 12px !default; - - $fluent-h1-font-size: 32px !default; - $fluent-h2-font-size: 28px !default; - $fluent-h3-font-size: 24px !default; - $fluent-h4-font-size: 20px !default; - $fluent-h5-font-size: 16px !default; - $fluent-h6-font-size: 16px !default; + $fluent-xl-font-size: ds.$font-size-240 !default; + $fluent-l-font-size: ds.$font-size-200 !default; + $fluent-m-font-size: ds.$font-size-160 !default; + $fluent-s-font-size: ds.$font-size-140 !default; + $fluent-xs-font-size: ds.$font-size-120 !default; + + $fluent-h1-font-size: ds.$font-size-320 !default; + $fluent-h2-font-size: ds.$font-size-280 !default; + $fluent-h3-font-size: ds.$font-size-240 !default; + $fluent-h4-font-size: ds.$font-size-200 !default; + $fluent-h5-font-size: ds.$font-size-160 !default; + $fluent-h6-font-size: ds.$font-size-160 !default; } :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss index 990440f85274..008c1fd74544 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss @@ -1,4 +1,5 @@ @use "../sizes" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,22 +8,22 @@ $fluent-validationsummary-item-margin: null !default; $fluent-validation-message-line-height: null !default; $fluent-validation-message-horizontal-padding: null !default; -$fluent-validation-overlay-border-radius: 4px !default; -$fluent-validation-message-vertical-padding: 4px !default; -$fluent-validation-message-font-size: 12px !default; +$fluent-validation-overlay-border-radius: ds.$border-radius-40 !default; +$fluent-validation-message-vertical-padding: ds.$spacing-40 !default; +$fluent-validation-message-font-size: ds.$font-size-120 !default; @if $size == "default" { - $fluent-validation-message-padding: 6px !default; - $fluent-validationsummary-item-margin: 6px !default; + $fluent-validation-message-padding: ds.$spacing-60 !default; + $fluent-validationsummary-item-margin: ds.$spacing-60 !default; - $fluent-validation-message-horizontal-padding: 8px !default; - $fluent-validation-message-line-height: 16px !default; + $fluent-validation-message-horizontal-padding: ds.$spacing-80 !default; + $fluent-validation-message-line-height: ds.$line-height-160 !default; } @else if $size == "compact" { - $fluent-validation-message-padding: 4px !default; - $fluent-validationsummary-item-margin: 4px !default; + $fluent-validation-message-padding: ds.$spacing-40 !default; + $fluent-validationsummary-item-margin: ds.$spacing-40 !default; - $fluent-validation-message-horizontal-padding: 6px !default; - $fluent-validation-message-line-height: 12px !default; + $fluent-validation-message-horizontal-padding: ds.$spacing-60 !default; + $fluent-validation-message-line-height: ds.$line-height-120 !default; } From a554196dd07682143f6015bca12a2f47d979261d Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 00:36:05 +0400 Subject: [PATCH 23/27] migrate switch, radioGroup, progressBar, slider, badge, loadIndicator --- .../scss/widgets/dxdsfluent/_colors.scss | 3 -- .../widgets/dxdsfluent/badge/_colors.scss | 21 +++------ .../scss/widgets/dxdsfluent/card/_colors.scss | 12 ++--- .../widgets/dxdsfluent/common/_colors.scss | 37 ++++++---------- .../widgets/dxdsfluent/fieldset/_colors.scss | 8 ++-- .../widgets/dxdsfluent/informer/_colors.scss | 22 +++------- .../dxdsfluent/loadIndicator/_colors.scss | 38 +++------------- .../widgets/dxdsfluent/numberBox/_colors.scss | 15 +++---- .../dxdsfluent/progressBar/_colors.scss | 30 ++++--------- .../dxdsfluent/radioButton/_colors.scss | 7 +-- .../dxdsfluent/scrollable/_colors.scss | 19 ++------ .../widgets/dxdsfluent/slider/_colors.scss | 31 ++++++------- .../dxdsfluent/speedDialAction/_colors.scss | 9 ++-- .../dxdsfluent/splitterBar/_colors.scss | 8 ++-- .../widgets/dxdsfluent/stepper/_colors.scss | 39 ++++++++-------- .../widgets/dxdsfluent/switch/_colors.scss | 44 +++++++++---------- .../dxdsfluent/typography/_colors.scss | 9 ++-- .../dxdsfluent/validation/_colors.scss | 10 ++--- .../widgets/dxdsfluent/widget/_colors.scss | 7 +-- 19 files changed, 126 insertions(+), 243 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index 78f775a51a4e..8017c22ffc1c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -280,9 +280,6 @@ $base-spin-icon-color: $base-icon-color !default; */ $base-link-color: $base-accent !default; -$typography-color: $base-text-color !default; -$typography-link-color: $base-link-color !default; - $base-element-bg: $base-bg !default; $base-invalid-color: $base-danger !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss index 5c86f7a03ff9..643c59e294d5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss @@ -1,5 +1,4 @@ -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -7,23 +6,13 @@ * $name 140. Badge text color * $type color */ -$badge-color: null !default; +$badge-color: ds.$badge-color-text-rest !default; /** * $name 150. Badge background color * $type color */ -$badge-bg: null !default; +$badge-bg: ds.$badge-color-bg-rest !default; -$badge-text-color-disabled: $base-foreground-disabled !default; -$badge-background-color-disabled: $base-background-disabled !default; - -@if $mode == "light" { - $badge-bg: $base-accent !default; - $badge-color: $base-inverted-text-color !default; -} - -@if $mode == "dark" { - $badge-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; - $badge-color: $base-text-color !default; -} +$badge-text-color-disabled: ds.$badge-color-text-disabled !default; +$badge-background-color-disabled: ds.$badge-color-bg-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss index 00c18f8f4f58..39dd71f405d9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss @@ -1,12 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$card-bg: $base-bg !default; -$card-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$card-shadow: 0 1px 3px color.change($card-shadow-color, $alpha: 0.12), 0 1px 2px color.change($card-shadow-color, $alpha: 0.24) !default; +$card-bg: ds.$color-surface-neutral-default-rest !default; +$card-shadow: ds.$box-shadow-sm !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss index 5e81a638e832..5ba5112b644d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss @@ -1,31 +1,22 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$base-dropdown-shadow-color1: null !default; -$base-dropdown-shadow-color2: null !default; +// Dropdown/overlay shadow layer colors (mode-aware via the shadow roles). +$base-dropdown-shadow-color1: ds.$color-shadow-ambient !default; +$base-dropdown-shadow-color2: ds.$color-shadow-key !default; -@if $mode == "light" { - $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.12) !default; - $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.14) !default; -} +$common-accent: ds.$color-surface-primary-default-rest !default; +$common-bg: ds.$color-surface-neutral-default-rest !default; +$common-border-color: ds.$color-border-neutral-default-rest !default; -@if $mode == "dark" { - $base-dropdown-shadow-color1: color.change($base-shadow-color, $alpha: 0.24) !default; - $base-dropdown-shadow-color2: color.change($base-shadow-color, $alpha: 0.28) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$common-accent: $base-accent !default; -$common-bg: $base-bg !default; -$common-border-color: $base-border-color !default; +// Non-color theme-level values (opacity/font family) — kept referencing the theme layer. $common-disabled-opacity: $base-disabled-opacity !default; $common-font-family: $base-font-family !default; -$common-invalid-color: $base-invalid-color !default; -$common-inverted-text-color: $base-inverted-text-color !default; -$common-success: $base-success !default; -$common-text-color: $base-text-color !default; -$common-typography-bg: $base-typography-bg !default; -$common-typography-color: $typography-color !default; +$common-invalid-color: ds.$color-border-danger-default-rest !default; +$common-inverted-text-color: ds.$color-content-neutral-default-static-dark-rest !default; +$common-success: ds.$color-surface-success-default-rest !default; +$common-text-color: ds.$color-content-neutral-default-rest !default; +$common-typography-bg: ds.$color-surface-neutral-default-rest !default; +$common-typography-color: ds.$color-content-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss index 0868bb4f0078..439e2b14c9af 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,5 +6,5 @@ * $name 10. Label text color * $type color */ -$fieldset-field-label-color: $base-text-color !default; -$fieldset-field-value-invalid-color: $base-invalid-color !default; +$fieldset-field-label-color: ds.$color-content-neutral-default-rest !default; +$fieldset-field-value-invalid-color: ds.$color-border-danger-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss index 5037e8368958..d7b1038a3f88 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss @@ -1,20 +1,8 @@ -@use "../colors" as *; -@use "sass:color"; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$informer-error-color: $base-invalid-color !default; -$informer-error-background-color: null !default; -$informer-info-color: $base-text-color !default; -$informer-info-background-color: null !default; - -@if $mode == "light" { - $informer-error-background-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -358deg, $saturation: 0.58%, $lightness: 46.67%); - $informer-info-background-color: color.adjust($base-text-color, $lightness: 74.90%, $space: hsl); -} - -@if $mode == "dark" { - $informer-error-background-color: color.adjust($base-danger, $saturation: -5.06%, $space: hsl, $lightness: -53.53%); - $informer-info-background-color: color.adjust($base-text-color, $lightness: -76.08%, $space: hsl); -} +$informer-error-color: ds.$color-content-danger-default-rest !default; +$informer-error-background-color: ds.$color-surface-danger-subdued-rest !default; +$informer-info-color: ds.$color-content-neutral-default-rest !default; +$informer-info-background-color: ds.$color-surface-neutral-subdued-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss index 4e84470ef9e4..0b9b0557f799 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,36 +6,15 @@ * $name 10. Indicator color * $type color */ -$load-indicator-segment-bg-color: $base-accent !default; +$load-indicator-segment-bg-color: ds.$spinner-color-primary-loader-rest !default; /** * $name 20. Indicator background color * $type color */ -$load-indicator-inner-segment-border-color: null !default; -$load-indicator-animation-sparkle-bg-color1: null !default; -$load-indicator-animation-sparkle-bg-color2: null !default; -$load-indicator-animation-sparkle-bg-color3: null !default; +$load-indicator-inner-segment-border-color: ds.$spinner-color-primary-track-rest !default; -@if $mode == "light" { - @if $color == "blue" { - $load-indicator-inner-segment-border-color: extcolor.adjust-if-not-achromatic($color: $load-indicator-segment-bg-color, $hue: 2.9deg, $saturation: 2.2%, $lightness: 44.3%) !default; - $load-indicator-animation-sparkle-bg-color1: $base-accent !default; - $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 2deg, $saturation: 2.73%, $lightness: 27.25%) !default; - $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 5.61%, $lightness: 38.43%) !default; - } - - @if $color == "saas" { - $load-indicator-inner-segment-border-color: color.mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default; - $load-indicator-animation-sparkle-bg-color1: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -15deg, $saturation: -14.71%, $lightness: -26.47%) !default; - $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -11.98%, $lightness: 0.78%) !default; - $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -12deg, $saturation: -9.09%, $lightness: 11.96%) !default; - } -} - -@if $mode == "dark" { - $load-indicator-inner-segment-border-color: $base-accent-selected !default; - $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default; - $load-indicator-animation-sparkle-bg-color2: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -4.40%, $lightness: -21.96%) !default; - $load-indicator-animation-sparkle-bg-color3: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -2deg, $saturation: -8.58%, $lightness: -26.67%) !default; -} +// Decorative accent shimmer; foundation has no sparkle role — primary surface steps (see DIVERGENCES.md) +$load-indicator-animation-sparkle-bg-color1: ds.$color-surface-primary-default-rest !default; +$load-indicator-animation-sparkle-bg-color2: ds.$color-surface-primary-default-hovered !default; +$load-indicator-animation-sparkle-bg-color3: ds.$color-surface-primary-compound-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss index 12aed4db31dc..f99b9f832369 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss @@ -1,14 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$numberbox-spin-icon-color: $base-spin-icon-color !default; -$numberbox-spin-icon-background-hover: $base-hover-bg !default; -$numberbox-spin-icon-background-active: $base-active-bg !default; +$numberbox-spin-icon-color: ds.$color-content-neutral-subdued-rest !default; +$numberbox-spin-icon-background-hover: ds.$color-surface-neutral-default-hovered !default; +$numberbox-spin-icon-background-active: ds.$color-surface-neutral-default-active !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$numberbox-foreground-disabled: $base-foreground-disabled !default; +$numberbox-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss index 93c826d58ca4..4bcf2f2b2c2c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,17 +6,17 @@ * $name 10. Bar background color * $type color */ -$progressbar-bg: null !default; +$progressbar-bg: ds.$progress-bar-progress-line-color-track-rest !default; /** * $name 20. Selected range background color * $type color */ -$progressbar-range-bg: $base-accent !default; -$progressbar-container-disabled-bg: $base-background-disabled !default; -$progressbar-range-disabled-bg: $base-foreground-disabled !default; -$progressbar-range-indeterminate-color: $base-accent !default; -$progressbar-range-invalid-color: $base-invalid-color !default; +$progressbar-range-bg: ds.$progress-bar-progress-line-color-indicator-rest !default; +$progressbar-container-disabled-bg: ds.$progress-bar-progress-line-color-track-disabled !default; +$progressbar-range-disabled-bg: ds.$progress-bar-progress-line-color-indicator-disabled !default; +$progressbar-range-indeterminate-color: ds.$progress-bar-progress-line-color-indicator-indeterminate-gradient-center !default; +$progressbar-range-invalid-color: ds.$color-surface-danger-default-rest !default; $progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%; $progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%; @@ -29,15 +26,6 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p * $name 30. Label color * $type color */ -$progressbar-label-color: $base-text-color !default; +$progressbar-label-color: ds.$color-content-neutral-default-rest !default; -@if $mode == "light" { - $progressbar-bg: color.adjust($base-typography-bg, $lightness: -7.84%, $space: hsl) !default; -} - -@if $mode == "dark" { - $progressbar-bg: color.adjust($base-typography-bg, $lightness: 7.84%, $space: hsl) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$progressbar-foreground-disabled: $base-foreground-disabled !default; +$progressbar-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss index fcc266385039..aa8c447851f3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$radiobutton-foreground-disabled: $base-foreground-disabled !default; +$radiobutton-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss index f690f47a9d06..de8c4862157a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss @@ -1,23 +1,12 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$scrollable-bg: $base-element-bg !default; +$scrollable-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 10. Scroll bar background color * $type color */ -$scrollable-scroll-bg: null !default; -$scrollable-scrollbar-bg: transparent !default; - -@if $mode == "light" { - $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: -25%, $space: hsl), $alpha: 0.7) !default; -} - -@if $mode == "dark" { - $scrollable-scroll-bg: color.change(color.adjust($scrollable-bg, $lightness: 25%, $space: hsl), $alpha: 0.7) !default; -} - +$scrollable-scroll-bg: ds.$scroll-bar-color-thumb-rest !default; +$scrollable-scrollbar-bg: ds.$scroll-bar-color-bg-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss index 7872e347b44d..c73fb5e128fe 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,30 +6,30 @@ * $name 10. Bar background color * $type color */ -$fluent-slider-bar-bg: $base-border-color-accessible !default; +$fluent-slider-bar-bg: ds.$color-border-neutral-accessible-rest !default; /** * $name 20. Selected range background color * $type color */ -$slider-accent-color: $base-accent !default; -$slider-accent-color-hover: $base-accent-hover !default; -$slider-accent-color-focused: $base-accent-active !default; +$slider-accent-color: ds.$color-surface-primary-default-rest !default; +$slider-accent-color-hover: ds.$color-surface-primary-default-hovered !default; +$slider-accent-color-focused: ds.$color-surface-primary-default-active !default; -$slider-invalid-color: $base-invalid-color !default; -$slider-invalid-color-hover: $base-invalid-color-hover !default; -$slider-invalid-color-focused: $base-invalid-color-selected !default; +$slider-invalid-color: ds.$color-border-danger-default-rest !default; +$slider-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$slider-invalid-color-focused: ds.$color-border-danger-default-hovered !default; -$fluent-slider-disabled-bg: $base-foreground-disabled !default; -$fluent-slider-bar-disabled-bg: $base-background-disabled !default; +$fluent-slider-disabled-bg: ds.$color-content-neutral-default-disabled !default; +$fluent-slider-bar-disabled-bg: ds.$color-surface-neutral-default-disabled !default; /** * $name 30. Slider tooltip text color * $type color */ -$fluent-slider-tooltip-color: $base-text-color !default; +$fluent-slider-tooltip-color: ds.$color-content-neutral-default-rest !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$slider-border-color: $base-border-color !default; -$slider-element-bg: $base-element-bg !default; -$slider-theme-invalid-color: $base-invalid-color !default; +$slider-border-color: ds.$color-border-neutral-default-rest !default; +$slider-element-bg: ds.$color-surface-neutral-default-rest !default; +$slider-theme-invalid-color: ds.$color-border-danger-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss index 939834ec73a0..87f59c58486c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss @@ -1,14 +1,13 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; @use "../overlay/colors" as *; @use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$speed-dial-action-color: $base-text-color !default; -$speed-dial-action-shadow: 0 2px 6px 0 color.change($base-shadow-color, $alpha: 0.2) !default; -$speed-dial-action-label-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.16) !default; +$speed-dial-action-color: ds.$color-content-neutral-default-rest !default; +$speed-dial-action-shadow: ds.$box-shadow-md !default; +$speed-dial-action-label-shadow: ds.$box-shadow-sm !default; $speed-dial-action-shading-color: $overlay-shader-bg !default; $speed-dial-action-bg: $button-normal-bg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss index 4157ae022c9d..62533d55baa8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss @@ -1,8 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$splitter-inactive-color: $base-border-color !default; -$splitter-bg: color.change($base-accent, $alpha: 0.5) !default; +$splitter-inactive-color: ds.$color-border-neutral-default-rest !default; +$splitter-bg: ds.$color-surface-primary-alpha-active !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss index 210edd8c874a..63eaff68737b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,61 +6,61 @@ * $name 10. Active color * $type color */ -$stepper-step-accent-bg: $base-accent !default; +$stepper-step-accent-bg: ds.$color-surface-primary-default-rest !default; /** * $name 20. Hover state active color * $type color */ -$stepper-step-accent-hover-bg: $base-accent-hover !default; +$stepper-step-accent-hover-bg: ds.$color-surface-primary-default-hovered !default; /** * $name 30. Invalid color * $type color */ -$stepper-step-danger-bg: $base-danger !default; +$stepper-step-danger-bg: ds.$color-surface-danger-default-rest !default; /** * $name 40. Hover state invalid color * $type color */ -$stepper-step-danger-hover-bg: $base-danger-hover !default; +$stepper-step-danger-hover-bg: ds.$color-surface-danger-default-hovered !default; /** * $name 60. Background color * $type color */ -$stepper-step-base-bg: $base-bg !default; +$stepper-step-base-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 70. Hover state background color * $type color */ -$stepper-step-base-hover-bg: $base-hover-bg !default; +$stepper-step-base-hover-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 80. Border color * $type color */ -$stepper-step-base-border-color: $base-border-color !default; +$stepper-step-base-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 90. Hover state border color * $type color */ -$stepper-step-base-hover-border-color: $base-border-color-hover !default; +$stepper-step-base-hover-border-color: ds.$color-border-neutral-default-hovered !default; /** * $name 100. Text or icon color * $type color */ -$stepper-step-base-text-color: $base-text-color !default; +$stepper-step-base-text-color: ds.$color-content-neutral-default-rest !default; /** * $name 110. Label text color * $type color */ -$stepper-step-base-label-color: $base-text-color !default; +$stepper-step-base-label-color: ds.$color-content-neutral-default-rest !default; /** * $name 120. Background color @@ -81,7 +78,7 @@ $stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default; * $name 140. Text or icon color * $type color */ -$stepper-step-selected-text-color: $base-inverted-text-color !default; +$stepper-step-selected-text-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 150. Label text color @@ -142,34 +139,34 @@ $stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default; * $type color */ $stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default; -$stepper-step-disabled-shadow: $base-bg !default; +$stepper-step-disabled-shadow: $stepper-step-base-bg !default; /** * $name 260. Background color * $type color */ -$stepper-step-disabled-bg: $base-background-disabled !default; +$stepper-step-disabled-bg: ds.$color-surface-neutral-default-disabled !default; /** * $name 270. Text color * $type color */ -$stepper-step-disabled-text-color: $base-foreground-disabled !default; +$stepper-step-disabled-text-color: ds.$color-content-neutral-default-disabled !default; /** * $name 280. Pending color * $type color */ -$stepper-connector-bg: $base-separator-color !default; +$stepper-connector-bg: ds.$separator-color !default; /** * $name 290. Completed color * $type color */ -$stepper-connector-value-bg: $base-accent !default; +$stepper-connector-value-bg: ds.$color-surface-primary-default-rest !default; /** * $name 300. Shadow color * $type color */ -$stepper-step-shadow-color: $base-typography-bg !default; +$stepper-step-shadow-color: ds.$color-surface-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss index 6684e06b0f92..a75614cbabfb 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss @@ -1,47 +1,45 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$switch-accent-color: $base-accent !default; -$switch-accent-color-hover: $base-accent-hover !default; -$switch-accent-color-focused: $base-accent-active !default; +$switch-accent-color: ds.$switch-color-checked-bg-rest !default; +$switch-accent-color-hover: ds.$switch-color-checked-bg-hovered !default; +$switch-accent-color-focused: ds.$switch-color-checked-bg-active !default; /** * $name 20. Track 'OFF' background color * $type color */ -$switch-bg: transparent !default; +$switch-bg: ds.$switch-color-unchecked-bg-rest !default; /** * $name 30. Handle 'OFF' background color * $type color */ -$switch-handle-off-bg: $base-border-color-accessible !default; +$switch-handle-off-bg: ds.$switch-color-unchecked-trigger-rest !default; /** * $name 40. Track 'ON' background color * $type color */ -$switch-on-bg: $base-accent !default; +$switch-on-bg: ds.$switch-color-checked-bg-rest !default; /** * $name 50. Handle 'ON' background color * $type color */ -$switch-handle-on-bg: $base-element-bg !default; +$switch-handle-on-bg: ds.$switch-color-checked-trigger-rest !default; $switch-handle-border-radius: 50% !default; -$switch-on-disabled-bg: $base-background-disabled !default; -$switch-handle-disabled-bg: $base-foreground-disabled !default; -$switch-border-color-disabled: $base-border-color-disabled !default; -$switch-off-border-color: $base-border-color-accessible !default; -$switch-off-border-hover-color: $base-border-color-accessible-hover !default; -$switch-off-border-active-color: $base-border-color-accessible-focused !default; - -$switch-invalid-color: $base-invalid-color !default; -$switch-invalid-color-hover: $base-invalid-color-hover !default; -$switch-invalid-color-focused: $base-invalid-color-selected !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$switch-handle-on-shadow-color: color.change($switch-handle-on-bg, $alpha: 0.1) !default; +$switch-on-disabled-bg: ds.$switch-color-checked-bg-disable !default; +$switch-handle-disabled-bg: ds.$switch-color-unchecked-trigger-disabled !default; +$switch-border-color-disabled: ds.$switch-color-unchecked-border-disabled !default; +$switch-off-border-color: ds.$switch-color-unchecked-border-rest !default; +$switch-off-border-hover-color: ds.$switch-color-unchecked-border-hovered !default; +$switch-off-border-active-color: ds.$switch-color-unchecked-border-active !default; + +$switch-invalid-color: ds.$color-border-danger-default-rest !default; +$switch-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$switch-invalid-color-focused: ds.$color-border-danger-default-hovered !default; + +// Subtle ring around the ON handle; no switch shadow role — relative-color bridge over the handle token (see DIVERGENCES.md) +$switch-handle-on-shadow-color: rgb(from #{ds.$switch-color-checked-trigger-rest} r g b / 0.1) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss index 9e49cedb81af..4e781991475d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss @@ -1,9 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$typography-typography-bg: $base-typography-bg !default; -$typography-typography-link-color: $typography-link-color !default; +$typography-typography-bg: ds.$color-surface-neutral-default-rest !default; +$typography-typography-link-color: ds.$color-content-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss index 54b4c00e535c..bb50421c8549 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss @@ -1,9 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$validation-message-color: $base-inverted-text-color !default; -$validation-message-background-color: $base-invalid-color !default; -$validation-summary-color: $base-invalid-color !default; +$validation-message-color: ds.$color-content-neutral-default-static-dark-rest !default; +$validation-message-background-color: ds.$color-surface-danger-default-rest !default; +$validation-summary-color: ds.$color-content-danger-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss index f4d78c6bae1b..5c18d4c6a0c8 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$widget-bg: $base-bg !default; +$widget-bg: ds.$color-surface-neutral-default-rest !default; From 5b67c0c725a2615c4b3d6cc6cee4aef7bbffbb1f Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 13:18:29 +0400 Subject: [PATCH 24/27] migrate menu, list, calendar, tabs, popup, tooltip --- .../scss/widgets/base/calendar/_mixins.scss | 2 +- .../scss/widgets/dxdsfluent/_colors.scss | 3 - .../dxdsfluent/buttonGroup/_colors.scss | 7 +-- .../widgets/dxdsfluent/calendar/_colors.scss | 49 +++++------------ .../dxdsfluent/contextMenu/_colors.scss | 14 ++--- .../widgets/dxdsfluent/dateView/_colors.scss | 14 ++--- .../widgets/dxdsfluent/diagram/_colors.scss | 4 +- .../widgets/dxdsfluent/drawer/_colors.scss | 6 +- .../dxdsfluent/dropDownEditor/_colors.scss | 10 +--- .../widgets/dxdsfluent/gallery/_colors.scss | 28 +++++----- .../scss/widgets/dxdsfluent/list/_colors.scss | 55 ++++++++----------- .../dxdsfluent/loadIndicator/_colors.scss | 4 +- .../scss/widgets/dxdsfluent/menu/_colors.scss | 40 +++++--------- .../widgets/dxdsfluent/menuBase/_colors.scss | 7 +-- .../widgets/dxdsfluent/overlay/_colors.scss | 17 +----- .../widgets/dxdsfluent/popup/_colors.scss | 27 +++------ .../dxdsfluent/radioGroup/_colors.scss | 26 ++++----- .../dxdsfluent/scrollView/_colors.scss | 6 +- .../widgets/dxdsfluent/splitter/_colors.scss | 30 ++-------- .../widgets/dxdsfluent/tileView/_colors.scss | 16 +++--- .../widgets/dxdsfluent/timeView/_colors.scss | 11 ++-- .../widgets/dxdsfluent/toast/_colors.scss | 35 ++++-------- .../widgets/dxdsfluent/tooltip/_colors.scss | 18 +----- .../widgets/dxdsfluent/treeView/_colors.scss | 54 ++++++------------ 24 files changed, 157 insertions(+), 326 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss index 978c5ae6ade0..2d7e4b2bf7a8 100644 --- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss @@ -240,7 +240,7 @@ &.dx-calendar-empty-cell { cursor: default; - color: color.change($cell-text-color, $alpha: 0.24); + color: if(meta.type-of($cell-text-color) == color, color.change($cell-text-color, $alpha: 0.24), rgb(from #{$cell-text-color} r g b / 0.24)); &.dx-state-hover, &.dx-state-active { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index 8017c22ffc1c..6efd4d0bc595 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -283,9 +283,6 @@ $base-link-color: $base-accent !default; $base-element-bg: $base-bg !default; $base-invalid-color: $base-danger !default; -$base-invalid-color-hover: $base-danger-hover !default; -$base-invalid-color-active: $base-danger-active !default; -$base-invalid-color-selected: $base-danger-selected !default; :root { diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss index ff40bdc07e0d..400a4b35f645 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$button-group-separator-color: rgba(0,0,0,.24) !default; +$button-group-separator-color: ds.$separator-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss index b0986f1b8d56..0e9cce1aede4 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss @@ -1,12 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$calendar-color: $base-text-color !default; +$calendar-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Navigator text color @@ -24,45 +21,25 @@ $calendar-header-color: $calendar-color !default; * $name 40. Other month text color * $type color */ -$calendar-cell-other-color: null !default; +$calendar-cell-other-color: ds.$color-content-neutral-subdued-rest !default; $calendar-bg: transparent !default; -$calendar-hover-bg: null !default; -$calendar-cell-hover-border-color: null !default; +$calendar-hover-bg: $button-default-outlined-selected-bg !default; +$calendar-cell-hover-border-color: $calendar-hover-bg !default; $calendar-cell-hover-color: $calendar-color !default; /** * $name 50. Selected cell background color * $type color */ -$calendar-cell-selected-bg: $base-accent !default; -$calendar-cell-selected-color: $base-inverted-text-color !default; +$calendar-cell-selected-bg: ds.$color-surface-primary-default-rest !default; +$calendar-cell-selected-color: ds.$color-content-neutral-default-static-dark-rest !default; $calendar-cell-contoured-border-radius: 50% !default; -$calendar-cell-contoured-border-color: null !default; -$calendar-cell-active-bg: null !default; -$calendar-invalid-border-color: $base-invalid-color !default; -$calendar-invalid-border-color-focused: $base-invalid-color-active !default; -$calendar-week-number-cell-color: null !default; -$calendar-week-number-cell-bg: null !default; +$calendar-cell-active-bg: $button-default-outlined-active-bg !default; +$calendar-cell-contoured-border-color: $calendar-cell-active-bg !default; +$calendar-invalid-border-color: ds.$color-border-danger-default-rest !default; +$calendar-invalid-border-color-focused: ds.$color-border-danger-default-hovered !default; +$calendar-week-number-cell-color: ds.$color-content-neutral-subdued-rest !default; +$calendar-week-number-cell-bg: ds.$color-surface-neutral-subdued-rest !default; $calendar-week-number-border-radius: 0 !default; -@if $mode == "light" { - $calendar-hover-bg: $button-default-outlined-selected-bg !default; - $calendar-cell-hover-border-color: $calendar-hover-bg !default; - $calendar-cell-active-bg: $button-default-outlined-active-bg !default; - $calendar-cell-other-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; - $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: 23.92%, $space: hsl) !default; - $calendar-cell-contoured-border-color: $calendar-cell-active-bg !default; - $calendar-week-number-cell-bg: $base-background-disabled !default; -} - -@if $mode == "dark" { - $calendar-hover-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 358.4deg, $saturation: -8.6%, $lightness: -26.7%) !default; - $calendar-cell-hover-border-color: $calendar-hover-bg !default; - $calendar-cell-active-bg: $base-accent-selected !default; - $calendar-cell-other-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; - $calendar-week-number-cell-color: color.adjust($calendar-color, $lightness: -32.16%, $space: hsl) !default; - $calendar-cell-contoured-border-color: $base-accent-active !default; - $calendar-week-number-cell-bg: $base-hover-bg !default; -} - $calendar-cell-other-hover-color: $calendar-cell-other-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss index b846ea7e3d42..123160b958d1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss @@ -1,13 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$contextmenu-foreground-disabled: $base-foreground-disabled !default; -$contextmenu-icon-color: $base-icon-color !default; -$contextmenu-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$contextmenu-shadow: color.change($contextmenu-shadow-color, $alpha: 0.12) 0 2px 7.2px 0, color.change($contextmenu-shadow-color, $alpha: 0.14) 0 8px 16px 0 !default; +$contextmenu-foreground-disabled: ds.$color-content-neutral-default-disabled !default; +$contextmenu-icon-color: ds.$color-content-neutral-subdued-rest !default; +$contextmenu-shadow: ds.$box-shadow-md !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss index 7ce4b398a54c..a20fe4627585 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss @@ -1,12 +1,10 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$dateview-shadow-up: 0deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; -$dateview-shadow-down: 180deg, color.change($base-bg, $alpha: 0) 0%, color.change($base-bg, $alpha: 0.8) 60% !default; -$dateview-color: $base-text-color !default; +// Fade gradients over the surface — relative-color bridge (no gradient role in foundation). +$dateview-shadow-up: 0deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default; +$dateview-shadow-down: 180deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default; +$dateview-color: ds.$color-content-neutral-default-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$dateview-accent: $base-accent !default; +$dateview-accent: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss index df38f4b6a5c2..560d5a919d17 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -37,6 +37,6 @@ $diagram-danger: $base-danger !default; $diagram-shadow-color: $base-shadow-color !default; $diagram-text-color: $base-text-color !default; -// Color computations hoisted from style files (phase 0.5 layer normalization) -$diagram-canvas-bg: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl) !default; +// Canvas = deeper neutral surface (overlay-content-bg is a token now; diagram gets its full pass in w5) +$diagram-canvas-bg: ds.$color-surface-neutral-subdued-rest !default; $diagram-shadow: 0 1px 8px color.change($diagram-shadow-color, $alpha: 0.175) !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss index 45572dedd676..fe19076f191b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,4 +6,4 @@ * $name 10. Shader background color * $type color */ -$drawer-shader-background-color: color.change($base-shadow-color, $alpha: 0.5) !default; +$drawer-shader-background-color: ds.$color-surface-backdrop-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss index 3b178aac2ed1..bb6cb129e8a3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss @@ -1,15 +1,11 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../button/colors" as *; -@use "../textEditor/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$dropdowneditor-icon-color: $base-spin-icon-color !default; +$dropdowneditor-icon-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 90. Active arrow icon color * $type color */ -$dropdowneditor-icon-active-color: $base-spin-icon-color !default; +$dropdowneditor-icon-active-color: ds.$color-content-neutral-subdued-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss index 9dde69ff8cde..4ad2dc96d91d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss @@ -1,7 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,35 +6,36 @@ * $name 10. Indicator background color * $type color */ -$gallery-indicator-bg: $base-bg !default; +$gallery-indicator-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 20. Selected indicator background color * $type color */ -$gallery-indicator-item-selected-bg: $base-accent !default; +$gallery-indicator-item-selected-bg: ds.$color-surface-primary-default-rest !default; /** * $name 30. Focused indicator background color * $type color */ -$gallery-indicator-focused-bg: $base-accent !default; -$gallery-indicator-item-border-color: color.change(#000, $alpha: 0.2) !default; -$gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default; -$gallery-navbutton-color: color.change($base-text-color, $alpha: 0.54) !default; -$gallery-nav-arrow-color: $base-inverted-text-color !default; +$gallery-indicator-focused-bg: ds.$color-surface-primary-default-rest !default; +$gallery-indicator-item-border-color: ds.$color-border-neutral-subdued-rest !default; + +// Semi-transparent surface over the indicator — relative-color bridge. +$gallery-indicator-selected-border-color: rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) !default; +$gallery-navbutton-color: ds.$color-content-neutral-subdued-rest !default; +$gallery-nav-arrow-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 40. Hovered navigation button color * $type color */ -$gallery-navbutton-hover-color: $base-accent !default; +$gallery-navbutton-hover-color: ds.$color-surface-primary-default-rest !default; /** * $name 50. Active navigation button color * $type color */ -$gallery-navbutton-active-color: $base-accent !default; +$gallery-navbutton-active-color: ds.$color-surface-primary-default-active !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$gallery-accent: $base-accent !default; +$gallery-accent: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss index 8e18e21c3b29..66e84cebe38d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss @@ -1,7 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../button/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,13 +7,13 @@ * $name 10. Item text color * $type color */ -$list-normal-color: null !default; +$list-normal-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Group border color * $type color */ -$list-border-color: $base-border-color !default; +$list-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 20. Group header background color @@ -27,49 +25,41 @@ $list-group-header-bg: transparent !default; * $name 30. Hovered state item background color * $type color */ -$list-item-hover-bg: $base-hover-bg !default; +$list-item-hover-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 30. Selected state item background color * $type color */ -$list-item-selected-bg: $base-selected-bg !default; -$list-item-selected-hover-bg: $list-item-hover-bg !default; -$list-item-focused-selected-bg: $base-active-bg !default; -$list-item-hover-color: $base-hover-color !default; -$list-header-indicator-color: $base-icon-color !default; +$list-item-selected-bg: ds.$color-surface-neutral-default-selected !default; +$list-item-selected-hover-bg: ds.$color-surface-neutral-default-selected-hovered !default; +$list-item-focused-selected-bg: ds.$color-surface-neutral-default-active !default; +$list-item-hover-color: ds.$color-content-neutral-default-rest !default; +$list-header-indicator-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 40. Active state item background color * $type color */ -$list-item-active-bg: $base-active-bg !default; -$list-holdmenu-bg: $base-bg !default; +$list-item-active-bg: ds.$color-surface-neutral-default-active !default; +$list-holdmenu-bg: ds.$color-surface-neutral-default-rest !default; $list-holdmenu-border-color: $list-border-color !default; -$list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.12) !default; +$list-holdmenu-shadow-color: ds.$color-shadow-ambient !default; $list-menu-button-default-color: $button-default-color !default; $list-menu-button-default-bg: $button-default-bg !default; -$list-menu-button-delete-bg: $base-danger !default; -$list-item-ghost-bg: $base-element-bg !default; -$list-item-ghost-color: $base-label-color !default; -$list-item-ghost-border-color: $base-accent !default; -$list-icon-color: $base-icon-color !default; +$list-menu-button-delete-bg: ds.$color-surface-danger-default-rest !default; +$list-item-ghost-bg: ds.$color-surface-neutral-default-rest !default; +$list-item-ghost-color: ds.$color-content-neutral-subdued-rest !default; +$list-item-ghost-border-color: ds.$color-border-primary-default-rest !default; +$list-icon-color: ds.$color-content-neutral-subdued-rest !default; -$base-select-all-separator-color: $base-separator-color !default; - -@if $mode == "light" { - $list-normal-color: color.adjust($base-text-color, $lightness: 11.76%, $space: hsl) !default; -} - -@if $mode == "dark" { - $list-normal-color: color.adjust($base-text-color, $lightness: -16.08%, $space: hsl) !default; -} +$base-select-all-separator-color: ds.$separator-color !default; /** * $name 10. Group header text color * $type color */ -$list-group-color: $base-text-color !default; +$list-group-color: ds.$color-content-neutral-default-rest !default; /** * $name 25. Expanded group header text color @@ -78,7 +68,6 @@ $list-group-color: $base-text-color !default; $list-expanded-group-color: $list-group-color !default; $list-item-selected-color: $list-normal-color !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$list-border-color-disabled: $base-border-color-disabled !default; -$list-foreground-disabled: $base-foreground-disabled !default; -$list-inverted-text-color: $base-inverted-text-color !default; +$list-border-color-disabled: ds.$color-border-neutral-default-disabled !default; +$list-foreground-disabled: ds.$color-content-neutral-default-disabled !default; +$list-inverted-text-color: ds.$color-content-neutral-default-static-dark-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss index 0b9b0557f799..4aaacad21c0d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss @@ -12,7 +12,9 @@ $load-indicator-segment-bg-color: ds.$spinner-color-primary-loader-rest !default * $name 20. Indicator background color * $type color */ -$load-indicator-inner-segment-border-color: ds.$spinner-color-primary-track-rest !default; + +// Light track: DS spinner loader==track kills the ring contrast (see DIVERGENCES.md) +$load-indicator-inner-segment-border-color: ds.$color-surface-primary-subdued-rest !default; // Decorative accent shimmer; foundation has no sparkle role — primary surface steps (see DIVERGENCES.md) $load-indicator-animation-sparkle-bg-color1: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss index 8497e3322ef6..8ac3085e70c5 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss @@ -1,41 +1,27 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$menu-popup-bg: $base-bg !default; -$menu-item-hover-bg: $base-hover-bg !default; -$menu-item-bg-active: $base-active-bg !default; +$menu-popup-bg: ds.$color-surface-neutral-default-rest !default; +$menu-item-hover-bg: ds.$color-surface-neutral-default-hovered !default; +$menu-item-bg-active: ds.$color-surface-neutral-default-active !default; /** * $name 10. Text color * $type color */ -$menu-color: $base-text-color !default; +$menu-color: ds.$color-content-neutral-default-rest !default; $menu-item-expanded-color: $menu-color !default; /** * $name 20. Selected item background color * $type color */ -$menu-item-selected-bg: $base-selected-bg !default; -$menu-popup-border-color: $base-border-color !default; -$menu-separator-bg: $base-border-color !default; -$menu-item-selected-color: $base-text-color !default; -$menu-item-link-color: $base-link-color !default; -$menu-item-focused-selected-bg: null !default; - -@if $mode == "light" { - $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: -9.8%, $space: hsl) !default; -} - -@if $mode == "dark" { - $menu-item-focused-selected-bg: color.adjust($base-bg, $lightness: 18.04%, $space: hsl) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$menu-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$menu-focused-shadow: 0 3px 10px color.change($menu-shadow-color, $alpha: 0.1) !default; +$menu-item-selected-bg: ds.$color-surface-neutral-default-selected !default; +$menu-popup-border-color: ds.$color-border-neutral-default-rest !default; +$menu-separator-bg: ds.$separator-color !default; +$menu-item-selected-color: ds.$color-content-neutral-default-rest !default; +$menu-item-link-color: ds.$color-content-primary-default-rest !default; +$menu-item-focused-selected-bg: ds.$color-surface-neutral-default-selected-hovered !default; + +$menu-focused-shadow: ds.$box-shadow-md !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss index 026f55548d97..1382f5b714ad 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$menu-item-color-disabled: $base-foreground-disabled; - +$menu-item-color-disabled: ds.$color-content-neutral-default-disabled; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss index 8c4c6fffa5fb..266bef95193b 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,19 +6,10 @@ * $name 10. Content background color * $type color */ -$overlay-content-bg: $base-bg !default; +$overlay-content-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 20. Shader background color * $type color */ -$overlay-shader-bg: null !default; - -@if $mode == "light" { - $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.32) !default; -} - -@if $mode == "dark" { - $overlay-shader-bg: color.change($base-shadow-color, $alpha: 0.61) !default; -} - +$overlay-shader-bg: ds.$color-surface-backdrop-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss index 3d3971ec464b..517d3ba8f93d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss @@ -1,6 +1,5 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,23 +8,11 @@ * $type color */ $popup-title-bg: transparent !default; -$popup-title-color: $base-text-color !default; -$popup-title-border-color: $base-border-color !default; +$popup-title-color: ds.$color-content-neutral-default-rest !default; +$popup-title-border-color: ds.$color-border-neutral-default-rest !default; $popup-bottom-bg: $popup-title-bg !default; -$popup-bottom-color: $base-text-color !default; +$popup-bottom-color: ds.$color-content-neutral-default-rest !default; $popup-border-radius: calc(#{$base-border-radius} * 2) !default; -$popup-content-shadow-color1: null !default; -$popup-content-shadow-color2: null !default; -$popup-focused-content-shadow-color: null !default; - -@if $mode == "light" { - $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.2) !default; - $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.24) !default; - $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default; -} - -@if $mode == "dark" { - $popup-content-shadow-color1: color.change($base-shadow-color, $alpha: 0.4) !default; - $popup-content-shadow-color2: color.change($base-shadow-color, $alpha: 0.48) !default; - $popup-focused-content-shadow-color: color.change($base-shadow-color, $alpha: 0.48) !default; -} +$popup-content-shadow-color1: ds.$color-shadow-ambient !default; +$popup-content-shadow-color2: ds.$color-shadow-key !default; +$popup-focused-content-shadow-color: ds.$color-shadow-key !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss index ab7616922748..3859e18548b9 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss @@ -1,22 +1,20 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$radiogroup-accent-color: $base-accent !default; -$radiogroup-accent-color-hover: $base-accent-hover !default; -$radiogroup-accent-color-active: $base-accent-active !default; +$radiogroup-accent-color: ds.$color-surface-primary-default-rest !default; +$radiogroup-accent-color-hover: ds.$color-surface-primary-default-hovered !default; +$radiogroup-accent-color-active: ds.$color-surface-primary-default-active !default; -$radiogroup-border-color: $base-border-color-accessible !default; -$radiogroup-border-color-hover: $base-border-color-accessible-hover !default; -$radiogroup-border-color-active: $base-border-color-accessible-focused !default; -$radiogroup-bg: $base-element-bg !default; +$radiogroup-border-color: ds.$color-border-neutral-accessible-rest !default; +$radiogroup-border-color-hover: ds.$color-border-neutral-accessible-hovered !default; +$radiogroup-border-color-active: ds.$color-border-neutral-accessible-active !default; +$radiogroup-bg: ds.$color-surface-neutral-default-rest !default; -$radiobutton-invalid-color: $base-invalid-color !default; -$radiobutton-invalid-color-hover: $base-invalid-color-hover !default; -$radiobutton-invalid-color-focused: $base-invalid-color-selected !default; +$radiobutton-invalid-color: ds.$color-border-danger-default-rest !default; +$radiobutton-invalid-color-hover: ds.$color-border-danger-default-hovered !default; +$radiobutton-invalid-color-focused: ds.$color-border-danger-default-hovered !default; $radiogroup-readonly-border-color: $radiogroup-border-color !default; -$radiobutton-focused-bg: color.change($base-text-color, $alpha: 0.1) !default; +$radiobutton-focused-bg: ds.$color-surface-neutral-alpha-hovered !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss index c152e5624b19..41407ed0d429 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss @@ -1,7 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$scrollview-shadow-color: color.change($base-shadow-color, $alpha: 0.37) !default; +$scrollview-shadow-color: ds.$color-shadow-key !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss index c8ace1165861..85b9a141a268 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,47 +6,31 @@ * $name 10. Icon color * $type color */ -$splitter-resize-handle-color: null !default; +$splitter-resize-handle-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 30. Focused state icon color * $type color */ -$splitter-resize-handle-color-focused: null !default; +$splitter-resize-handle-color-focused: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 40. Handle background color * $type color */ -$splitter-resize-handle-bg: null !default; +$splitter-resize-handle-bg: ds.$color-border-neutral-default-rest !default; /** * $name 50. Handle hover state background color * $type color */ -$splitter-resize-handle-bg-hover: null !default; +$splitter-resize-handle-bg-hover: ds.$color-border-neutral-default-hovered !default; /** * $name 60. Handle focused state background color * $type color */ -$splitter-resize-handle-bg-focused: $base-accent !default; - -@if $mode == 'light' { - $splitter-resize-handle-color: $base-icon-color !default; - $splitter-resize-handle-color-focused: $base-inverted-text-color !default; - - $splitter-resize-handle-bg: $base-border-color !default; - $splitter-resize-handle-bg-hover: $base-border-color-hover !default; -} - -@if $mode == 'dark' { - $splitter-resize-handle-color: $base-text-color !default; - $splitter-resize-handle-color-focused: $base-inverted-text-color !default; - - $splitter-resize-handle-bg: $base-border-color !default; - $splitter-resize-handle-bg-hover: $base-border-color-hover !default; -} +$splitter-resize-handle-bg-focused: ds.$color-surface-primary-default-rest !default; /** * $name 20. Hover state icon color diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss index 1ac51ec80923..e8df69293771 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,10 +6,10 @@ * $name 10. Item text color * $type color */ -$tileview-color: $base-text-color !default; -$tileview-bg: $base-element-bg !default; -$tileview-border-color: color.change($base-border-color, $alpha: 0.6) !default; -$tileview-hover-bg: $base-element-bg !default; -$tileview-hover-border-color: color.change($base-accent, $alpha: 0.4) !default; -$tileview-active-bg: color.change(color.adjust($tileview-bg, $lightness: -62.5%, $space: hsl), $alpha: 0.2) !default; +$tileview-color: ds.$color-content-neutral-default-rest !default; +$tileview-bg: ds.$color-surface-neutral-default-rest !default; +$tileview-border-color: ds.$color-border-neutral-subdued-rest !default; +$tileview-hover-bg: ds.$color-surface-neutral-default-rest !default; +$tileview-hover-border-color: ds.$color-border-primary-default-rest !default; +$tileview-active-bg: ds.$color-surface-neutral-alpha-active !default; $tileview-active-color: $tileview-color !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss index eb7fab3899d7..d500d3108acc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss @@ -1,10 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$clock-digits-color: $base-text-color !default; +$clock-digits-color: ds.$color-content-neutral-default-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$timeview-inverted-bg: $base-inverted-bg !default; -$timeview-typography-bg: $base-typography-bg !default; +$timeview-inverted-bg: ds.$color-surface-neutral-default-inverted-rest !default; +$timeview-typography-bg: ds.$color-surface-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss index 8a6ea76ec308..8150a1ca48a1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss @@ -1,19 +1,8 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$toast-default-bg: $base-bg !default; -$warning-color: null !default; - -@if $mode == "light" { - $warning-color: $base-text-color !default; -} - -@if $mode == "dark" { - $warning-color: $base-inverted-text-color !default; -} +$toast-default-bg: ds.$toast-color-bg-rest !default; /** * $name 10. Info background color @@ -25,46 +14,42 @@ $toast-info-bg: $toast-default-bg !default; * $name 20. Info text color * $type color */ -$toast-info-color: $base-text-color !default; +$toast-info-color: ds.$color-content-neutral-default-rest !default; /** * $name 30. Warning background color * $type color */ -$toast-warning-bg: $base-warning !default; +$toast-warning-bg: ds.$color-surface-warning-default-rest !default; /** * $name 40. Warning text color * $type color */ -$toast-warning-color: $warning-color !default; +$toast-warning-color: ds.$color-content-neutral-default-static-light-rest !default; /** * $name 50. Error background color * $type color */ -$toast-error-bg: $base-danger !default; +$toast-error-bg: ds.$color-surface-danger-default-rest !default; /** * $name 60. Error text color * $type color */ -$toast-error-color: $base-inverted-text-color !default; +$toast-error-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 70. Success background color * $type color */ -$toast-success-bg: $base-success !default; +$toast-success-bg: ds.$color-surface-success-default-rest !default; /** * $name 80. Success text color * $type color */ -$toast-success-color: $base-inverted-text-color !default; - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$toast-shadow-color: $base-shadow-color !default; +$toast-success-color: ds.$color-content-neutral-default-static-dark-rest !default; -// Color computations hoisted from style files (phase 0.5 layer normalization) -$toast-shadow: 0 0 2px 0 color.change($toast-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($toast-shadow-color, $alpha: 0.14) !default; +$toast-shadow: ds.$box-shadow-lg !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss index a46222d24e93..6d5a410c1e5c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; -@use "../overlay/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,21 +7,12 @@ * $name 10. Text color * $type color */ -$tooltip-color: $base-text-color !default; +$tooltip-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Background color * $type color */ -$tooltip-bg: null !default; +$tooltip-bg: ds.$tooltip-color-bg-rest !default; $tooltip-border-radius: $base-border-radius !default; - -@if $mode == "light" { - $tooltip-bg: $base-bg !default; -} - -@if $mode == "dark" { - $tooltip-bg: $base-hover-bg !default; -} - diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss index 86ee70ac973a..bad447d84ab6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss @@ -1,48 +1,28 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$treeview-color: $base-text-color !default; +$treeview-color: ds.$color-content-neutral-default-rest !default; /** * $name 80. Focused state background color * $type color */ -$treeview-focused-bg: $base-hover-bg !default; -$treeview-focus-color: $base-text-color !default; -$treeview-hover-bg: $base-hover-bg !default; -$treeview-item-hover-color: $base-hover-color !default; -$treeview-border-color: $base-border-color !default; +$treeview-focused-bg: ds.$color-surface-neutral-default-hovered !default; +$treeview-focus-color: ds.$color-content-neutral-default-rest !default; +$treeview-hover-bg: ds.$color-surface-neutral-default-hovered !default; +$treeview-item-hover-color: ds.$color-content-neutral-default-rest !default; +$treeview-border-color: ds.$color-border-neutral-default-rest !default; $treeview-item-selected-color: $treeview-color !default; -$treeview-item-selected-bg: $base-selected-bg !default; -$treeview-spin-icon-color: $base-spin-icon-color !default; -$checkbox-border-color-focused: $base-accent-active !default; -$treeview-checkbox-disabled-control-color-focused: null !default; -$treeview-checkbox-disabled-background-focused: null !default; -$treeview-item-content-disabled: null !default; -$treeview-checkbox-border-color-focused: null !default; -$treeview-checkbox-background-color-focused: null !default; -$treeview-checkbox-accent-color-focused: null !default; - -@if $mode == "light" { - $treeview-item-content-disabled: color.adjust($base-bg, $lightness: -25.88%, $space: hsl) !default; - $treeview-checkbox-disabled-control-color-focused: color.adjust($base-bg, $lightness: -29.8%, $space: hsl) !default; - $treeview-checkbox-disabled-background-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; - $treeview-checkbox-border-color-focused: color.adjust($base-bg, $lightness: -85.88%, $space: hsl) !default; - $treeview-checkbox-background-color-focused: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default; - $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 16%, $space: hsl) !default; -} - -@if $mode == "dark" { - $treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl) !default; - $treeview-checkbox-disabled-control-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl) !default; - $treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; - $treeview-checkbox-border-color-focused: color.change($base-bg, $lightness: 100%, $space: hsl) !default; - $treeview-checkbox-background-color-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; - $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default; -} +$treeview-item-selected-bg: ds.$color-surface-neutral-default-selected !default; +$treeview-spin-icon-color: ds.$color-content-neutral-subdued-rest !default; +$checkbox-border-color-focused: ds.$checkbox-color-checked-default-border-active !default; +$treeview-checkbox-disabled-control-color-focused: ds.$checkbox-color-checked-default-icon-disabled !default; +$treeview-checkbox-disabled-background-focused: ds.$color-surface-neutral-default-disabled !default; +$treeview-item-content-disabled: ds.$color-content-neutral-default-disabled !default; +$treeview-checkbox-border-color-focused: ds.$checkbox-color-unchecked-default-border-disabled !default; +$treeview-checkbox-background-color-focused: ds.$color-surface-neutral-default-disabled !default; +$treeview-checkbox-accent-color-focused: ds.$checkbox-color-checked-default-bg-hovered !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$treeview-text-color: $base-text-color !default; +$treeview-text-color: ds.$color-content-neutral-default-rest !default; From 48afc1f1a3c5a1523cbc7839c0d26831e09f20d0 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sat, 18 Jul 2026 23:09:51 +0400 Subject: [PATCH 25/27] migrate acordion, chat, colorBox, colorView, fileUploader, filterBuilder, form, lookup, pagination, selectBox, tabpanel, tabpanel, tagbox, toolbar --- .../widgets/dxdsfluent/accordion/_colors.scss | 11 +- .../scss/widgets/dxdsfluent/chat/_colors.scss | 111 +++++------------- .../widgets/dxdsfluent/colorBox/_colors.scss | 9 +- .../widgets/dxdsfluent/colorView/_colors.scss | 12 +- .../dxdsfluent/fileUploader/_colors.scss | 26 ++-- .../dxdsfluent/filterBuilder/_colors.scss | 57 ++++----- .../scss/widgets/dxdsfluent/form/_colors.scss | 24 +--- .../widgets/dxdsfluent/lookup/_colors.scss | 10 +- .../dxdsfluent/pagination/_colors.scss | 10 +- .../widgets/dxdsfluent/selectBox/_colors.scss | 6 +- .../widgets/dxdsfluent/tabPanel/_colors.scss | 7 +- .../widgets/dxdsfluent/tagBox/_colors.scss | 34 ++---- .../widgets/dxdsfluent/toolbar/_colors.scss | 8 +- 13 files changed, 102 insertions(+), 223 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss index e0816ae12307..3264384e9da6 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss @@ -1,10 +1,9 @@ -@use "sass:color"; @use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$accordion-color: $base-text-color !default; +$accordion-color: ds.$color-content-neutral-default-rest !default; /** * $name 10. Item title text color @@ -20,6 +19,6 @@ $fluent-accordion-title-font-size: $fluent-base-font-size !default; $accordion-background-color: transparent !default; $accordion-title-active-color: $accordion-color !default; -$accordion-title-bg-hover: $base-hover-bg !default; -$accordion-title-bg-active: $base-hover-bg !default; -$accordion-disabled-color: $base-foreground-disabled !default; +$accordion-title-bg-hover: ds.$color-surface-neutral-default-hovered !default; +$accordion-title-bg-active: ds.$color-surface-neutral-default-hovered !default; +$accordion-disabled-color: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss index f6e7b3ab9b10..14ae56e5723a 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss @@ -1,9 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../textEditor/colors" as *; @use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,178 +8,126 @@ * $name 10. Background color * $type color */ -$chat-background-color: $base-bg !default; +$chat-background-color: ds.$color-surface-neutral-default-rest !default; /** * $name 20. Border color * $type color */ -$chat-border-color: $base-border-color !default; +$chat-border-color: ds.$color-border-neutral-default-rest !default; $chat-messagebox-border-color: $chat-border-color !default; $chat-messagebox-file-background-color: $button-normal-text-hover-bg !default; $chat-messagebox-file-cancel-button-secondary-color: $button-normal-text-selected-bg !default; -$chat-message-editing-preview-accent-color: $base-accent !default; +$chat-message-editing-preview-accent-color: ds.$color-surface-primary-default-rest !default; $chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default; /** * $name 30. Text color * $type color */ -$chat-avatar-color: $base-text-color !default; +$chat-avatar-color: ds.$color-content-neutral-default-rest !default; /** * $name 31. Background color * $type color */ -$chat-avatar-background-color: $base-active-bg !default; +$chat-avatar-background-color: ds.$color-surface-neutral-default-active !default; /** * $name 40. Text color (sent messages) * $type color */ -$chat-bubble-color-primary: $base-text-color !default; +$chat-bubble-color-primary: ds.$color-content-neutral-default-rest !default; /** * $name 41. Background color (sent messages) * $type color */ -$chat-bubble-background-color-primary: null !default; +$chat-bubble-background-color-primary: ds.$color-surface-primary-subdued-rest !default; /** * $name 42. Text color (received messages) * $type color */ -$chat-bubble-color-secondary: $base-text-color !default; +$chat-bubble-color-secondary: ds.$color-content-neutral-default-rest !default; /** * $name 43. Background color (received messages) * $type color */ -$chat-bubble-background-color-secondary: null !default; +$chat-bubble-background-color-secondary: ds.$color-surface-neutral-subdued-rest !default; /** * $name 50. User name color * $type color */ -$chat-information-author-name-color: null !default; +$chat-information-author-name-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 51. Timestamp color * $type color */ -$chat-information-timestamp-color: null !default; +$chat-information-timestamp-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 52. Day header color * $type color */ -$chat-messagelist-day-header-color: null !default; +$chat-messagelist-day-header-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 55. Alert color * $type color */ -$chat-alertlist-color: $base-invalid-color !default; +$chat-alertlist-color: ds.$color-content-danger-default-rest !default; /** * $name 65. Icon color * $type color */ -$chat-messagelist-empty-icon-color: null !default; +$chat-messagelist-empty-icon-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 66. Icon background color * $type color */ -$chat-messagelist-empty-icon-background-color: null !default; +$chat-messagelist-empty-icon-background-color: ds.$color-surface-neutral-subdued-rest !default; /** * $name 67. Title color * $type color */ -$chat-messagelist-empty-message-color: $base-text-color !default; +$chat-messagelist-empty-message-color: ds.$color-content-neutral-default-rest !default; /** * $name 68. Subtitle color * $type color */ -$chat-messagelist-empty-prompt-color: null !default; +$chat-messagelist-empty-prompt-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 80. Text color * $type color */ -$chat-typingindicator-color: null !default; +$chat-typingindicator-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 82. Central circle color * $type color */ -$chat-typingindicator-circle-bg-color-center: null !default; +$chat-typingindicator-circle-bg-color-center: ds.$color-content-neutral-subdued-rest !default; /** * $name 83. Outer circles color * $type color */ -$chat-typingindicator-circle-bg-color: null !default; +$chat-typingindicator-circle-bg-color: ds.$color-content-neutral-default-disabled !default; -$chat-file-container-background-color: $base-bg !default; -$chat-file-container-box-shadow: null !default; -$chat-file-secondary-color: null !default; +$chat-file-container-background-color: ds.$color-surface-neutral-default-rest !default; +$chat-file-container-box-shadow: ds.$box-shadow-sm !default; +$chat-file-secondary-color: ds.$color-content-neutral-subdued-rest !default; -$chat-suggestions-box-shadow: null !default; - -@if $mode == "light" { - $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; - $chat-information-author-name-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - $chat-information-timestamp-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - $chat-typingindicator-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - - $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: 32.16%, $space: hsl) !default; - $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; - $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: -5.88%, $space: hsl) !default; - - $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: -29.16%, $space: hsl) !default; - $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: -56.08%, $space: hsl) !default; - - $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default; - $chat-file-secondary-color: $base-icon-color !default; - - $chat-suggestions-box-shadow: 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04), 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02) !default; - - @if $color == "blue" { - $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3.8deg, $saturation: -11.4%, $lightness: 55.5%) !default; - $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: -3.92%, $space: hsl) !default; - } - - @if $color == "saas" { - $chat-bubble-background-color-primary: color.mix($base-bg, $base-accent, 90%) !default; - $chat-messagelist-empty-icon-background-color: $base-border-color !default; - } -} - -@if $mode == "dark" { - $chat-bubble-background-color-secondary: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; - $chat-bubble-background-color-primary: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 356.3deg, $saturation: -14.7%, $lightness: -49.4%) !default; - - $chat-information-author-name-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - $chat-information-timestamp-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - $chat-typingindicator-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - - $chat-messagelist-day-header-color: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - $chat-messagelist-empty-icon-color: color.adjust($base-icon-color, $lightness: -25.88%, $space: hsl) !default; - $chat-messagelist-empty-icon-background-color: color.adjust($base-bg, $lightness: 7.84%, $space: hsl) !default; - $chat-messagelist-empty-prompt-color: color.adjust($base-label-color, $lightness: 7.84%, $space: hsl) !default; - - $chat-typingindicator-circle-bg-color: color.adjust($base-bg, $lightness: 33.92%, $space: hsl) !default; - $chat-typingindicator-circle-bg-color-center: color.adjust($base-bg, $lightness: 43.92%, $space: hsl) !default; - - $chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.24), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.28) !default; - $chat-file-secondary-color: $base-icon-color !default; - - $chat-suggestions-box-shadow: 0 4px 24px 0 color.change($base-shadow-color, $alpha: 0.02), 0 4px 12px 0 color.change($base-shadow-color, $alpha: 0.04) !default; -} +$chat-suggestions-box-shadow: ds.$box-shadow-md !default; /** * $name 81. Background color @@ -190,6 +135,6 @@ $chat-suggestions-box-shadow: null !default; */ $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default; -$chat-messagelist-contextmenu-delete-button-color: $base-danger !default; -$chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default; -$chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default; +$chat-messagelist-contextmenu-delete-button-color: ds.$color-content-danger-default-rest !default; +$chat-messagelist-contextmenu-delete-button-focused-color: ds.$color-content-danger-default-rest !default; +$chat-messagelist-contextmenu-delete-button-focused-bg: ds.$color-surface-neutral-default-hovered !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss index be45e2bdd63c..2eefb13775bc 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss @@ -1,10 +1,7 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$colorbox-preview-icon-color: $base-icon-color !default; +$colorbox-preview-icon-color: ds.$color-content-neutral-subdued-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$colorbox-foreground-disabled: $base-foreground-disabled !default; +$colorbox-foreground-disabled: ds.$color-content-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss index 0ac69e1bfb5d..e7bc7b02244f 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss @@ -1,7 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../overlay/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -11,7 +9,7 @@ */ $colorbox-overlay-bg: $overlay-content-bg !default; $colorbox-palette-cell-bg: $colorbox-overlay-bg !default; -$colorview-border-color: $base-border-color !default; -$colorview-label-color: $base-label-color !default; -$colorview-handle-color: $base-bg !default; -$colorview-handle-border-color: $base-border-color !default; +$colorview-border-color: ds.$color-border-neutral-default-rest !default; +$colorview-label-color: ds.$color-content-neutral-subdued-rest !default; +$colorview-handle-color: ds.$color-surface-neutral-default-rest !default; +$colorview-handle-border-color: ds.$color-border-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss index c21e7c18ba33..d4130f3dc409 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,27 +6,23 @@ * $name 10. File name text color * $type color */ -$fileuploader-filename-color: $base-text-color !default; -$fileuploader-file-icon-color: $base-icon-color !default; -$fileuploader-progressbar-status-color: $base-text-color !default; -$fluent-fileuploader-files-container-bg-color: $base-bg !default; +$fileuploader-filename-color: ds.$color-content-neutral-default-rest !default; +$fileuploader-file-icon-color: ds.$color-content-neutral-subdued-rest !default; +$fileuploader-progressbar-status-color: ds.$color-content-neutral-default-rest !default; +$fluent-fileuploader-files-container-bg-color: ds.$color-surface-neutral-default-rest !default; /** * $name 20. File status text color * $type color */ -$fileuploader-falename-status-color: $base-label-color !default; +$fileuploader-falename-status-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 30. Drag-and-drop border color * $type color */ -$fileuploader-border-color: $base-border-color !default; +$fileuploader-border-color: ds.$color-border-neutral-default-rest !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$fileuploader-danger: $base-danger !default; -$fileuploader-label-color: $base-label-color !default; -$fileuploader-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($fileuploader-shadow-color, $alpha: 0.1) !default; +$fileuploader-danger: ds.$color-surface-danger-default-rest !default; +$fileuploader-label-color: ds.$color-content-neutral-subdued-rest !default; +$fluent-fileuploader-file-container-boxshadow: ds.$box-shadow-sm !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss index 7861e617a4b3..6ae25b5e6557 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss @@ -1,77 +1,66 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$filterbuilder-bg: $base-bg !default; +$filterbuilder-bg: ds.$color-surface-neutral-default-rest !default; /** * $name 10. Text color * $type color */ -$filterbuilder-text-color: $base-text-color !default; +$filterbuilder-text-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Focused text color * $type color */ -$filterbuilder-text-focus-color: null !default; +$filterbuilder-text-focus-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 30. Plus icon color * $type color */ -$filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.7) !default; -$filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; -$filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 1) !default; +$filterbuilder-plus-icon-color: ds.$color-content-success-default-rest !default; +$filterbuilder-plus-icon-hover-color: ds.$color-content-success-default-hovered !default; +$filterbuilder-plus-icon-focus-color: ds.$color-content-success-default-active !default; /** * $name 40. Remove icon color * $type color */ -$filterbuilder-remove-icon-color: color.change($base-danger, $alpha: 0.7) !default; -$filterbuilder-remove-icon-hover-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; -$filterbuilder-remove-icon-focus-color: color.adjust($filterbuilder-remove-icon-color, $alpha: 1) !default; +$filterbuilder-remove-icon-color: ds.$color-content-danger-default-rest !default; +$filterbuilder-remove-icon-hover-color: ds.$color-content-danger-default-hovered !default; +$filterbuilder-remove-icon-focus-color: ds.$color-content-danger-default-active !default; /** * $name 50. Group operation button color * $type color */ -$filterbuilder-group-operation-color: color.change($base-danger, $alpha: 0.3) !default; -$filterbuilder-group-operation-hover-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.2) !default; -$filterbuilder-group-operation-focus-color: color.adjust($filterbuilder-group-operation-color, $alpha: 0.7) !default; +$filterbuilder-group-operation-color: ds.$color-surface-danger-subdued-rest !default; +$filterbuilder-group-operation-hover-color: ds.$color-surface-danger-subdued-hovered !default; +$filterbuilder-group-operation-focus-color: ds.$color-surface-danger-default-rest !default; /** * $name 60. Data field button color * $type color */ -$filterbuilder-item-field-color: color.change($base-accent, $alpha: 0.3) !default; -$filterbuilder-item-field-hover-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.2) !default; -$filterbuilder-item-field-focus-color: color.adjust($filterbuilder-item-field-color, $alpha: 0.7) !default; +$filterbuilder-item-field-color: ds.$color-surface-primary-subdued-rest !default; +$filterbuilder-item-field-hover-color: ds.$color-surface-primary-subdued-hovered !default; +$filterbuilder-item-field-focus-color: ds.$color-surface-primary-default-rest !default; /** * $name 70. Operation button color * $type color */ -$filterbuilder-item-operator-color: color.change($base-success, $alpha: 0.3) !default; -$filterbuilder-item-operator-hover-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.2) !default; -$filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-operator-color, $alpha: 0.7) !default; +$filterbuilder-item-operator-color: ds.$color-surface-success-subdued-rest !default; +$filterbuilder-item-operator-hover-color: ds.$color-surface-success-subdued-hovered !default; +$filterbuilder-item-operator-focus-color: ds.$color-surface-success-default-rest !default; /** * $name 80. Value button color * $type color */ -$filterbuilder-item-value-color: color.change($base-icon-color, $alpha: 0.24) !default; -$filterbuilder-item-value-hover-color: color.change($base-icon-color, $alpha: 0.32) !default; -$filterbuilder-item-value-focus-color: $base-icon-color !default; -$filterbuilder-menu-icon-color: $base-text-color !default; - - -@if $mode == "light" { - $filterbuilder-text-focus-color: #fff !default; -} - -@if $mode == "dark" { - $filterbuilder-text-focus-color: #000 !default; -} +$filterbuilder-item-value-color: ds.$color-surface-neutral-alpha-rest !default; +$filterbuilder-item-value-hover-color: ds.$color-surface-neutral-alpha-hovered !default; +$filterbuilder-item-value-focus-color: ds.$color-surface-neutral-alpha-active !default; +$filterbuilder-menu-icon-color: ds.$color-content-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss index ef8a1f3bac79..9a2e5113c374 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,27 +6,13 @@ * $name 10. Label text color * $type color */ -$form-field-item-color: null !default; -$form-item-help-text-color: $base-label-color !default; +$form-field-item-color: ds.$color-content-neutral-default-rest !default; +$form-item-help-text-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 20. Group border color * $type color */ -$form-group-border-color: $base-border-color !default; +$form-group-border-color: ds.$color-border-neutral-default-rest !default; $form-field-required-color: $form-field-item-color !default; $form-field-mark-color: $form-field-item-color !default; - -@if $mode == "light" { - @if $color == "blue" { - $form-field-item-color: $base-text-color !default; - } - - @if $color == "saas" { - $form-field-item-color: $base-label-color !default; - } -} - -@if $mode == "dark" { - $form-field-item-color: $base-text-color !default; -} diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss index 2bd30444bcbb..59cde3abeda1 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss @@ -1,15 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; @use "../dropDownEditor/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse $lookup-icon-color: $dropdowneditor-icon-color !default; $lookup-icon-color-active: $dropdowneditor-icon-active-color !default; -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$lookup-shadow-color: $base-shadow-color !default; - -// Color computations hoisted from style files (phase 0.5 layer normalization) -$lookup-shadow: 0 0 2px 0 color.change($lookup-shadow-color, $alpha: 0.12) !default; +$lookup-shadow: ds.$box-shadow-sm !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss index 8868f5b732ac..0f1dfdae7e48 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,11 +6,11 @@ * $name 180. Pager selected item text color * $type color */ -$pagination-page-selected-color: $base-inverted-text-color !default; -$pagination-page-hovered-bg: $base-hover-bg !default; +$pagination-page-selected-color: ds.$color-content-neutral-default-static-dark-rest !default; +$pagination-page-hovered-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 190. Pager selected item background color * $type color */ -$pagination-page-selected-bg: $base-accent !default; +$pagination-page-selected-bg: ds.$color-surface-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss index 4421c0573c88..6399ee4177c2 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -8,4 +6,4 @@ * $name 10. Item background color * $type color */ -$selectbox-list-bg: $base-element-bg !default; +$selectbox-list-bg: ds.$color-surface-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss index e25e238cb8cc..77cf7dcf7d5d 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$tabpanel-border-color: $base-border-color !default; +$tabpanel-border-color: ds.$color-border-neutral-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss index 43e5c7081da1..428c2f5b94c3 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss @@ -1,8 +1,5 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../color" as extcolor; @use "../textEditor/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -10,38 +7,29 @@ * $name 10. Tag text color * $type color */ -$tagbox-tag-color: $base-text-color !default; +$tagbox-tag-color: ds.$color-content-neutral-default-rest !default; /** * $name 20. Tag background color * $type color */ -$tagbox-tag-bg: null !default; -$tagbox-tag-hover-bg: $base-typography-bg !default; +$tagbox-tag-bg: ds.$tag-color-bg-rest !default; +$tagbox-tag-hover-bg: ds.$color-surface-neutral-default-hovered !default; /** * $name 30. Tag active text color * $type color */ -$tagbox-tag-active-color: $base-text-color !default; +$tagbox-tag-active-color: ds.$color-content-neutral-default-rest !default; /** * $name 40. Tag close button color * $type color */ -$tagbox-tag-button-remove-bg: $base-icon-color !default; -$tagbox-tag-border-color-focused: $base-accent-active !default; -$tagbox-select-all-border-color: $base-border-color !default; -$tagbox-tag-foreground-disabled: $base-foreground-disabled !default; -$tagbox-tag-disabled: $base-background-disabled !default; +$tagbox-tag-button-remove-bg: ds.$color-content-neutral-subdued-rest !default; +$tagbox-tag-border-color-focused: ds.$color-border-primary-default-rest !default; +$tagbox-select-all-border-color: ds.$color-border-neutral-default-rest !default; +$tagbox-tag-foreground-disabled: ds.$color-content-neutral-default-disabled !default; +$tagbox-tag-disabled: ds.$tag-color-bg-disabled !default; -@if $mode == "light" { - $tagbox-tag-bg: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default; -} - -@if $mode == "dark" { - $tagbox-tag-bg: color.adjust($base-element-bg, $lightness: -12.16%, $space: hsl) !default; -} - -// Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$tagbox-border-color-disabled: $base-border-color-disabled !default; +$tagbox-border-color-disabled: ds.$color-border-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss index 711c15e59712..06c3b3a9f51c 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss @@ -1,6 +1,4 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse @@ -9,5 +7,5 @@ * $type color */ $toolbar-bg: transparent !default; -$toolbar-color: $base-text-color !default; -$toolbar-separator-color: $base-separator-color !default; +$toolbar-color: ds.$color-content-neutral-default-rest !default; +$toolbar-separator-color: ds.$separator-color !default; From dd6c136a183e35c29678d599ff23566793c8b04d Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 20 Jul 2026 10:01:19 +0400 Subject: [PATCH 26/27] migrate grids --- .../scss/widgets/base/dataGrid/_index.scss | 5 +- .../scss/widgets/base/treeList/_index.scss | 5 +- .../scss/widgets/dxdsfluent/_colors.scss | 8 - .../widgets/dxdsfluent/cardView/_colors.scss | 302 ++++-------------- .../widgets/dxdsfluent/dataGrid/_colors.scss | 24 +- .../widgets/dxdsfluent/diagram/_colors.scss | 34 +- .../widgets/dxdsfluent/diagram/_index.scss | 4 +- .../widgets/dxdsfluent/gridBase/_colors.scss | 117 +++---- .../widgets/dxdsfluent/treeList/_colors.scss | 7 +- 9 files changed, 134 insertions(+), 372 deletions(-) diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss index 070145a19561..179bc4ff08d2 100644 --- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss @@ -12,6 +12,7 @@ $base-focus-color: null !default; $datagrid-text-stub-background-image-path: null !default; @use "sass:color"; +@use "sass:meta"; @use "../mixins" as *; @use "../icon_fonts" as *; @use "./common"; @@ -309,11 +310,11 @@ $datagrid-text-stub-background-image-path: null !default; @keyframes dx-datagrid-highlight-change { from { - background-color: color.change($datagrid-base-color, $alpha: 0.08); + background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08)); } 50% { - background-color: color.change($datagrid-base-color, $alpha: 0.08); + background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08)); } } diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss index 045d1d1fc5d0..4b7309a4607c 100644 --- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss @@ -12,6 +12,7 @@ $header-filter-color-empty: null !default; $base-focus-color: null !default; @use "sass:color"; +@use "sass:meta"; @use "../mixins" as *; @use "../icon_fonts" as *; @use "./common" as *; @@ -284,11 +285,11 @@ $treelist-row-error-color: $datagrid-row-error-color; @keyframes dx-treelist-highlight-change { from { - background-color: color.change($treelist-base-color, $alpha: 0.08); + background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08)); } 50% { - background-color: color.change($treelist-base-color, $alpha: 0.08); + background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08)); } } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss index 6efd4d0bc595..cfeeff3c79dd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss @@ -256,12 +256,6 @@ $scrollview-pulldown-path: null !default; $scrollview-pulldown-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/pulldown.png') !default; } -/** -* $name 80. Hover state text color -* $type color -*/ -$base-hover-color: $base-text-color !default; - /** * $name 100. Focused state text color * $type color @@ -282,8 +276,6 @@ $base-link-color: $base-accent !default; $base-element-bg: $base-bg !default; -$base-invalid-color: $base-danger !default; - :root { --dx-component-color-bg: #{$base-bg}; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss index 0c7d36023717..0f81940bf5fd 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss @@ -1,6 +1,4 @@ -@use 'sass:color'; -@use '../colors' as *; -@use '../color' as extcolor; +@use '../../../_design-system/variables/ds' as ds; @use '../../base/cardView/variables' as *; @use '../../base/cardView/header_panel/variables' as *; @use '../../base/cardView/header_panel/item/variables' as *; @@ -15,25 +13,27 @@ // adduse +// Mode/accent is resolved by the design tokens, so the former light/dark branches collapse to one. + // #region COMMON SETTINGS /** * $name 100. Background color * $type color */ -$cardview-fluent-common-bg-color: null !default; +$cardview-fluent-common-bg-color: ds.$color-surface-neutral-subdued-rest !default; /** * $name 102. Link color * $type color */ -$cardview-fluent-common-link-color: null !default; +$cardview-fluent-common-link-color: ds.$color-content-primary-default-rest !default; /** * $name 103. Text color * $type color */ -$cardview-fluent-common-text-color: null !default; +$cardview-fluent-common-text-color: ds.$color-content-neutral-default-rest !default; // #endregion @@ -43,45 +43,45 @@ $cardview-fluent-common-text-color: null !default; * $name 200. Background color * $type color */ -$cardview-fluent-card-bg-color: null !default; +$cardview-fluent-card-bg-color: ds.$color-surface-neutral-default-rest !default; /** * $name 201. Border color * $type color */ -$cardview-fluent-card-border-color: null !default; +$cardview-fluent-card-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 203. Divider color * $type color */ -$cardview-fluent-card-divider-color: null !default; +$cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; /** * $name 204. Text color * $type color */ -$cardview-fluent-card-text-color: null !default; +$cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; /** * $name 206. Cover background color * $type color */ -$cardview-fluent-card__cover-bg-color: null !default; +$cardview-fluent-card__cover-bg-color: ds.$color-surface-neutral-default-static-light-rest !default; /** * $name 207. "Empty cover" background color * $type color */ -$cardview-fluent-card__cover--noimage-bg-color: null !default; +$cardview-fluent-card__cover--noimage-bg-color: ds.$color-surface-neutral-deep-rest !default; /** * $name 208. "Empty cover" icon color * $type color */ -$cardview-fluent-card__cover--noimage__icon-color: null !default; +$cardview-fluent-card__cover--noimage__icon-color: ds.$color-content-neutral-subdued-rest !default; -$cardview-fluent-card--focused-outline-color: null !default; +$cardview-fluent-card--focused-outline-color: ds.$color-border-primary-default-rest !default; // #endregion @@ -91,43 +91,43 @@ $cardview-fluent-card--focused-outline-color: null !default; * $name 300. Background color * $type color */ -$cardview-fluent-card--selected-bg-color: null !default; +$cardview-fluent-card--selected-bg-color: ds.$color-surface-primary-subdued-rest !default; /** * $name 301. Border color * $type color */ -$cardview-fluent-card--selected-border-color: null !default; +$cardview-fluent-card--selected-border-color: ds.$color-border-primary-default-rest !default; /** * $name 302. Divider color * $type color */ -$cardview-fluent-card--selected-divider-color: null !default; +$cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; /** * $name 303. Text color * $type color */ -$cardview-fluent-card--selected-text-color: null !default; +$cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; /** * $name 305. Cover background color * $type color */ -$cardview-fluent-card--selected__cover-bg-color: null !default; +$cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; /** * $name 306. "Empty cover" background color * $type color */ -$cardview-fluent-card--selected__cover--noimage-bg-color: null !default; +$cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; /** * $name 307. "Empty cover" icon color * $type color */ -$cardview-fluent-card--selected__cover--noimage__icon-color: null !default; +$cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; // #endregion @@ -137,39 +137,39 @@ $cardview-fluent-card--selected__cover--noimage__icon-color: null !default; * $name 400. Background color * $type color */ -$cardview-fluent-header-panel__item-bg-color: null !default; +$cardview-fluent-header-panel__item-bg-color: ds.$color-surface-neutral-deep-rest !default; /** * $name 401. Border color * $type color */ -$cardview-fluent-header-panel__item-border-color: null !default; +$cardview-fluent-header-panel__item-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 403. Text color * $type color */ -$cardview-fluent-header-panel__item-text-color: null !default; +$cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; /** * $name 405. Icon color * $type color */ -$cardview-fluent-header-panel__item__icon-color: null !default; +$cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; /** * $name 406. Active "Filter" icon color * $type color */ -$cardview-fluent-header-panel__item__header-filter-icon--selected-color: null !default; +$cardview-fluent-header-panel__item__header-filter-icon--selected-color: ds.$color-content-primary-default-rest !default; /** * $name 407. Sort index text color * $type color */ -$cardview-fluent-header-panel__item__sort-index-text-color: null !default; +$cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; -$cardview-fluent-header-panel__item--focused-outline-color: null !default; +$cardview-fluent-header-panel__item--focused-outline-color: ds.$color-border-primary-default-rest !default; // #endregion @@ -179,37 +179,37 @@ $cardview-fluent-header-panel__item--focused-outline-color: null !default; * $name 500. Background color * $type color */ -$cardview-fluent-header-panel__item--hovered-bg-color: null !default; +$cardview-fluent-header-panel__item--hovered-bg-color: ds.$color-surface-neutral-deep-hovered !default; /** * $name 501. Border color * $type color */ -$cardview-fluent-header-panel__item--hovered-border-color: null !default; +$cardview-fluent-header-panel__item--hovered-border-color: ds.$color-border-neutral-default-hovered !default; /** * $name 502. Text color * $type color */ -$cardview-fluent-header-panel__item--hovered-text-color: null !default; +$cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default; /** * $name 504. Icon color * $type color */ -$cardview-fluent-header-panel__item--hovered__icon-color: null !default; +$cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default; /** * $name 505. Active "Filter" icon color * $type color */ -$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: null !default; +$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; /** * $name 506. Sort index text color * $type color */ -$cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !default; +$cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; // #endregion @@ -219,37 +219,37 @@ $cardview-fluent-header-panel__item--hovered__sort-index-text-color: null !defau * $name 600. Background color * $type color */ -$cardview-fluent-header-panel__item--disabled-bg-color: null !default; +$cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; /** * $name 601. Border color * $type color */ -$cardview-fluent-header-panel__item--disabled-border-color: null !default; +$cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; /** * $name 602. Text color * $type color */ -$cardview-fluent-header-panel__item--disabled-text-color: null !default; +$cardview-fluent-header-panel__item--disabled-text-color: ds.$color-content-neutral-default-disabled !default; /** * $name 604. Icon color * $type color */ -$cardview-fluent-header-panel__item--disabled__icon-color: null !default; +$cardview-fluent-header-panel__item--disabled__icon-color: ds.$color-content-neutral-default-disabled !default; /** * $name 605. Active "Filter" icon color * $type color */ -$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: null !default; +$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: ds.$color-content-neutral-default-disabled !default; /** * $name 606. Sort index text color * $type color */ -$cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !default; +$cardview-fluent-header-panel__item--disabled__sort-index-text-color: ds.$color-content-neutral-default-disabled !default; // #endregion @@ -259,37 +259,37 @@ $cardview-fluent-header-panel__item--disabled__sort-index-text-color: null !defa * $name 700. Background color * $type color */ -$cardview-fluent-header-panel__item--dragged-bg-color: null !default; +$cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; /** * $name 701. Border color * $type color */ -$cardview-fluent-header-panel__item--dragged-border-color: null !default; +$cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; /** * $name 702. Text color * $type color */ -$cardview-fluent-header-panel__item--dragged-text-color: null !default; +$cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; /** * $name 704. "Drag allowed" icon color * $type color */ -$cardview-fluent-header-panel__item--dragged__allowance-icon-color: null !default; +$cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; /** * $name 705. "Drag blocked" icon color * $type color */ -$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: null !default; +$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: ds.$color-content-danger-default-rest !default; /** * $name 706. Box shadow color * $type color */ -$cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default; +$cardview-fluent-header-panel__item--dragged-box-shadow-color: ds.$color-shadow-key !default; // #endregion @@ -299,25 +299,25 @@ $cardview-fluent-header-panel__item--dragged-box-shadow-color: null !default; * $name 800. Background color * $type color */ -$cardview-fluent-header-panel__dropzone-bg-color: null !default; +$cardview-fluent-header-panel__dropzone-bg-color: ds.$color-surface-primary-subdued-rest !default; /** * $name 802. Border color * $type color */ -$cardview-fluent-header-panel__dropzone-border-color: null !default; +$cardview-fluent-header-panel__dropzone-border-color: ds.$color-border-primary-default-rest !default; /** * $name 803. Text color * $type color */ -$cardview-fluent-header-panel__dropzone-text-color: null !default; +$cardview-fluent-header-panel__dropzone-text-color: ds.$color-content-primary-default-rest !default; /** * $name 804. Icon color * $type color */ -$cardview-fluent-header-panel__dropzone__icon-color: null !default; +$cardview-fluent-header-panel__dropzone__icon-color: ds.$color-content-primary-default-rest !default; // #endregion @@ -327,25 +327,25 @@ $cardview-fluent-header-panel__dropzone__icon-color: null !default; * $name 900. Background color * $type color */ -$cardview-fluent-filter-panel-bg-color: null !default; +$cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; /** * $name 902. Border color * $type color */ -$cardview-fluent-filter-panel-border-color: null !default; +$cardview-fluent-filter-panel-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 903. Text color * $type color */ -$cardview-fluent-filter-panel-text-color: null !default; +$cardview-fluent-filter-panel-text-color: ds.$color-content-primary-default-rest !default; /** * $name 904. Icon color * $type color */ -$cardview-fluent-filter-panel__icon-color: null !default; +$cardview-fluent-filter-panel__icon-color: ds.$color-content-primary-default-rest !default; // #endregion @@ -355,25 +355,25 @@ $cardview-fluent-filter-panel__icon-color: null !default; * $name 1000. Background color * $type color */ -$cardview-fluent-nodata-view-bg-color: null !default; +$cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; /** * $name 1001. Text color * $type color */ -$cardview-fluent-nodata-view-text-color: null !default; +$cardview-fluent-nodata-view-text-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 1002. Icon color * $type color */ -$cardview-fluent-nodata-view__icon-color: null !default; +$cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; /** * $name 1003. Icon background color * $type color */ -$cardview-fluent-nodata-view__icon-bg-color: null !default; +$cardview-fluent-nodata-view__icon-bg-color: ds.$color-surface-neutral-deep-rest !default; // #endregion @@ -383,204 +383,28 @@ $cardview-fluent-nodata-view__icon-bg-color: null !default; * $name 1100. Background color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-bg-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-bg-color: ds.$color-surface-highlight-rest !default; /** * $name 1102. Text color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-text-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-text-color: ds.$color-content-highlight-rest !default; /** * $name 1104. Box shadow color * $type color */ -$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: null !default; +$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: ds.$color-shadow-key !default; // #endregion // #region COLUMN CHOOSER -$cardview-fluent-columnchooser--empty__message-color: null !default; +$cardview-fluent-columnchooser--empty__message-color: ds.$color-content-neutral-subdued-rest !default; // #endregion -@if $mode == 'light' { - - // Common - $cardview-fluent-common-bg-color: $base-typography-bg !default; - $cardview-fluent-common-link-color: $base-link-color !default; - $cardview-fluent-common-text-color: $base-text-color !default; - - // Card - $cardview-fluent-card-bg-color: $base-bg !default; - $cardview-fluent-card-border-color: $base-border-color !default; - $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; - $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__cover-bg-color: #FFF !default; - $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; - $cardview-fluent-card__cover--noimage__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; - - $cardview-fluent-card--focused-outline-color: $base-accent !default; - - // Card - selected - $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; - $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: 2.21%, $lightness: 44.31%) !default; - $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; - $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; - $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; - $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; - $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; - - // Header panel item - default state - $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; - $cardview-fluent-header-panel__item-border-color: $base-border-color !default; - $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; - - $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; - - // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: -1.96%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: -13.73%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default; - $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default; - - // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: 60.00%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: 60.00%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -34.10%, $space: hsl, $lightness: 27.06%) !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: 60.00%, $space: hsl) !default; - - // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: -4deg, $saturation: 22.80%, $lightness: -9.61%) !default; - $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; - - // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 4deg, $saturation: -11.38%, $lightness: 55.49%) !default; - $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-filter-panel-border-color: $base-border-color !default; - $cardview-fluent-filter-panel-text-color: $base-accent !default; - $cardview-fluent-filter-panel__icon-color: $base-accent !default; - - // Empty view - $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: 23.92%, $space: hsl) !default; - $cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default; - $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -9.80%, $space: hsl) !default; - - // Search highlight - $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; - $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; -} - -@if $mode == "dark" { - - // Common - $cardview-fluent-common-bg-color: $base-typography-bg !default; - $cardview-fluent-common-link-color: $base-link-color !default; - $cardview-fluent-common-text-color: $base-text-color !default; - - // Card - $cardview-fluent-card-bg-color: $base-bg !default; - $cardview-fluent-card-border-color: $base-border-color !default; - $cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default; - $cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-card__cover-bg-color: #FFF !default; - $cardview-fluent-card__cover--noimage-bg-color: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; - $cardview-fluent-card__cover--noimage__icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default; - - $cardview-fluent-card--focused-outline-color: $base-accent !default; - - // Card - selected - $cardview-fluent-card--selected-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; - $cardview-fluent-card--selected-border-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -11.06%, $lightness: -36.27%) !default; - $cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default; - $cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default; - $cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default; - $cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default; - $cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default; - - // Header panel item - default state - $cardview-fluent-header-panel__item-bg-color: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; - $cardview-fluent-header-panel__item-border-color: $base-border-color !default; - $cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default; - - $cardview-fluent-header-panel__item--focused-outline-color: $base-accent !default; - - // Header panel item - hovered - $cardview-fluent-header-panel__item--hovered-bg-color: color.adjust($cardview-fluent-header-panel__item-bg-color, $lightness: 18.04%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-border-color: color.adjust($cardview-fluent-header-panel__item-border-color, $lightness: 11.76%, $space: hsl) !default; - $cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $base-accent !default; - $cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-common-text-color !default; - - // Header panel item - disabled - $cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--disabled-text-color: color.adjust($cardview-fluent-header-panel__item-text-color, $lightness: -56.08%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__icon-color: color.adjust($cardview-fluent-header-panel__item__icon-color, $lightness: -56.08%, $space: hsl) !default; - $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: color.adjust($cardview-fluent-header-panel__item__header-filter-icon--selected-color, $saturation: -6.72%, $space: hsl, $lightness: -18.04%) !default; - $cardview-fluent-header-panel__item--disabled__sort-index-text-color: color.adjust($cardview-fluent-header-panel__item__sort-index-text-color, $lightness: -56.08%, $space: hsl) !default; - - // Header panel item - dragged - $cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default; - $cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default; - $cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default; - $cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default; - $cardview-fluent-header-panel__item--dragged__prohibition-icon-color: color.adjust($base-danger, $saturation: -0.27%, $space: hsl, $lightness: -7.45%) !default; - $cardview-fluent-header-panel__item--dragged-box-shadow-color: rgba(0, 0, 0, 0.2) !default; - - // Header panel Drop-zone - $cardview-fluent-header-panel__dropzone-bg-color: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -4deg, $saturation: -14.69%, $lightness: -49.41%) !default; - $cardview-fluent-header-panel__dropzone-border-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone-text-color: $base-accent !default; - $cardview-fluent-header-panel__dropzone__icon-color: $base-accent !default; - - // Filter panel - $cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-filter-panel-border-color: $base-border-color !default; - $cardview-fluent-filter-panel-text-color: $base-accent !default; - $cardview-fluent-filter-panel__icon-color: $base-accent !default; - - // Empty view - $cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default; - $cardview-fluent-nodata-view-text-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; - $cardview-fluent-nodata-view__icon-color: color.adjust($cardview-fluent-common-text-color, $lightness: -32.16%, $space: hsl) !default; - $cardview-fluent-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: 3.92%, $space: hsl) !default; - - // Search highlight - $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default; - $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default; - $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default; - - // Column chooser - $cardview-fluent-columnchooser--empty__message-color: color.adjust($cardview-fluent-common-text-color, $lightness: 26%, $space: hsl) !default; -} - $cardview-bg-color: $cardview-fluent-common-bg-color !default; $cardview-link-color: $cardview-fluent-common-link-color !default; $cardview-text-color: $cardview-fluent-common-text-color !default; @@ -654,4 +478,4 @@ $cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px $cardvie $cardview-columnchooser--empty__message-color: $cardview-fluent-columnchooser--empty__message-color !default; -$cardview-header-item__sort-indicator__border-color: $base-accent !default; +$cardview-header-item__sort-indicator__border-color: ds.$color-border-primary-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss index d66891a83cac..329f6f67bc65 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss @@ -1,25 +1,9 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$fluent-datagrid-grouppanel-item-bg: null !default; - -@if $mode == "light" { - @if $color == "blue"{ - $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -5.88%, $space: hsl) !default; - } - - @if $color == "saas" { - $fluent-datagrid-grouppanel-item-bg: color.change($base-hover-bg, $alpha: 0.4) !default; - } -} - -@if $mode == "dark" { - $fluent-datagrid-grouppanel-item-bg: color.adjust($base-bg, $lightness: -12.16%, $space: hsl) !default; -} +$fluent-datagrid-grouppanel-item-bg: ds.$color-surface-neutral-deep-rest !default; // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$datagrid-accent: $base-accent !default; -$datagrid-border-color-disabled: $base-border-color-disabled !default; +$datagrid-accent: ds.$color-surface-primary-default-rest !default; +$datagrid-border-color-disabled: ds.$color-border-neutral-default-disabled !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss index 560d5a919d17..3687ae2d4b88 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss @@ -1,42 +1,38 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; -@use "../overlay/colors" as *; -@use "../button/colors" as *; -@use "../loadIndicator/colors" as *; @use "../../../_design-system/variables/ds" as ds; // adduse -$diagram-border-color: $base-border-color !default; -$diagram-toolbar-border-color: $base-border-color !default; +$diagram-border-color: ds.$color-border-neutral-default-rest !default; +$diagram-toolbar-border-color: ds.$color-border-neutral-default-rest !default; $diagram-normal-format-active-bg: ds.$button-outline-color-bg-active !default; $diagram-default-format-active-bg: ds.$button-contained-color-bg-active !default; $diagram-danger-format-active-bg: ds.$color-surface-danger-default-active !default; $diagram-success-format-active-bg: ds.$color-surface-success-default-active !default; -$diagram-image-icon-base-color: null !default; -$diagram-image-icon-accent-color: null !default; +$diagram-image-icon-base-color: ds.$color-content-neutral-subdued-rest !default; +$diagram-image-icon-accent-color: ds.$color-content-primary-default-rest !default; $diagram-toolbox-shape-text-opacity: null !default; - @if $mode == "light" { - $diagram-image-icon-base-color: $base-icon-color !default; - $diagram-image-icon-accent-color: $load-indicator-segment-bg-color !default; $diagram-toolbox-shape-text-opacity: 0.25 !default; } @if $mode == "dark" { - $diagram-image-icon-base-color: $base-border-color !default; - $diagram-image-icon-accent-color: $base-accent !default; $diagram-toolbox-shape-text-opacity: 0.5 !default; } // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$diagram-bg: $base-bg !default; -$diagram-danger: $base-danger !default; -$diagram-shadow-color: $base-shadow-color !default; +$diagram-bg: ds.$color-surface-neutral-default-rest !default; +$diagram-danger: ds.$color-content-danger-default-rest !default; + +/* + * SVG data-uri icons are colored by baking the value into a background-image data-uri at build + * time (string replace of `currentColor`). CSS var() tokens do NOT resolve inside such a data-uri + * (they render black), so the icon colors below must stay concrete $base-* values. See DIVERGENCES. + */ $diagram-text-color: $base-text-color !default; +$diagram-properties-panel-icon-color: $base-inverted-text-color !default; -// Canvas = deeper neutral surface (overlay-content-bg is a token now; diagram gets its full pass in w5) +// Canvas = deeper neutral surface $diagram-canvas-bg: ds.$color-surface-neutral-subdued-rest !default; -$diagram-shadow: 0 1px 8px color.change($diagram-shadow-color, $alpha: 0.175) !default; +$diagram-shadow: 0 1px 8px ds.$color-shadow-key !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss index 2e23b9025dfb..b812b21c9be0 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss @@ -468,12 +468,12 @@ $diagram-toolbox-title-size: 18px; @include diagram-action-icons-mixin($diagram-text-color, $diagram-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width); .dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $popup-title-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $diagram-text-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size); line-height: $diagram-toolbox-title-size; background-size: $diagram-toolbox-title-size $diagram-toolbox-title-size; } .dx-diagram-i-button-properties-panel-open { - @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $button-default-color, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size); + @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $diagram-properties-panel-icon-color, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size); } diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss index 3eb6a6283c2c..ff3c428de5ee 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss @@ -1,26 +1,23 @@ -@use "sass:color"; -@use "../sizes" as *; @use "../colors" as *; @use "../button/colors" as *; -@use "../color" as extcolor; +@use "../../../_design-system/variables/ds" as ds; // adduse -$datagrid-base-color: $base-text-color !default; +$datagrid-base-color: ds.$color-content-neutral-default-rest !default; /** * $name 15. Background color * $type color */ -$datagrid-base-background-color: $base-bg !default; -$datagrid-border-color: $base-border-color !default; +$datagrid-base-background-color: ds.$color-surface-neutral-default-rest !default; +$datagrid-border-color: ds.$color-border-neutral-default-rest !default; /** * $name 20. Header text color * $type color */ $datagrid-columnchooser-item-color: $datagrid-base-color !default; -$datagrid-block-separator-bg: null !default; /** * $name 25. Header text weight @@ -33,11 +30,11 @@ $datagrid-columnchooser-font-weight: 600 !default; * $name 35. Draggable header border color * $type color */ -$datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default; -$datagrid-drag-header-shadow-color: null !default; -$datagrid-drag-header-second-shadow-color: null !default; +$datagrid-drag-header-border-color: rgb(from #{ds.$color-border-primary-default-rest} r g b / 0.5) !default; +$datagrid-drag-header-shadow-color: ds.$color-shadow-ambient !default; +$datagrid-drag-header-second-shadow-color: ds.$color-shadow-key !default; $datagrid-header-drag-bg: $datagrid-base-background-color !default; -$header-filter-color: null !default; +$header-filter-color: $datagrid-columnchooser-item-color !default; /** * $name 51. Selected row background color @@ -61,15 +58,15 @@ $datagrid-row-selected-color: $datagrid-base-color !default; * $name 65. Focused row text color * $type color */ -$datagrid-row-focused-color: $base-text-color !default; +$datagrid-row-focused-color: ds.$color-content-neutral-default-rest !default; /** * $name 70. Focused row background color * $type color */ -$datagrid-row-focused-bg: null !default; -$datagrid-hover-bg: $base-hover-bg !default; -$datagrid-row-hovered-color: $base-hover-color !default; +$datagrid-row-focused-bg: ds.$color-surface-primary-subdued-rest !default; +$datagrid-hover-bg: ds.$color-surface-neutral-default-hovered !default; +$datagrid-row-hovered-color: ds.$color-content-neutral-default-rest !default; /** * $name 40. Modified data background color @@ -78,129 +75,99 @@ $datagrid-row-hovered-color: $base-hover-color !default; $datagrid-cell-modified-border-color: $button-success-text-hover-bg !default; $datagrid-cell-removed-border-color: $datagrid-border-color !default; $datagrid-row-removed-bg: $datagrid-hover-bg !default; -$datagrid-cell-removed-text-color: null !default; +$datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; /** * $name 45. Invalid data faded color * $type color */ $datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default; -$datagrid-nodata-color: $base-label-color !default; +$datagrid-nodata-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 90. Group row text color * $type color */ -$datagrid-group-row-color: null !default; +$datagrid-group-row-color: $datagrid-columnchooser-item-color !default; /** * $name 95. Group row background color * $type color */ -$datagrid-group-row-bg: color.change($datagrid-base-background-color, $alpha: 1) !default; -$datagrid-master-detail-cell-bg: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; +$datagrid-group-row-bg: ds.$color-surface-neutral-default-rest !default; +$datagrid-master-detail-cell-bg: ds.$color-surface-neutral-subdued-rest !default; /** * $name 105. Highlighted text color * $type color */ -$datagrid-search-color: $base-inverted-text-color !default; -$datagrid-chevron-icon-color: $base-spin-icon-color !default; +$datagrid-search-color: ds.$color-content-neutral-default-static-dark-rest !default; +$datagrid-chevron-icon-color: ds.$color-content-neutral-subdued-rest !default; /** * $name 110. Highlighted text background color * $type color */ -$datagrid-search-bg: $base-accent !default; +$datagrid-search-bg: ds.$color-surface-primary-default-rest !default; /** * $name 115. Error row text color * $type color */ -$datagrid-row-error-color: $base-inverted-text-color !default; +$datagrid-row-error-color: ds.$color-content-neutral-default-static-dark-rest !default; /** * $name 120. Error row background color * $type color */ -$datagrid-row-error-bg: $base-invalid-color !default; -$datagrid-link-color: $base-link-color !default; +$datagrid-row-error-bg: ds.$color-surface-danger-default-rest !default; +$datagrid-link-color: ds.$color-content-primary-default-rest !default; /** * $name 75. Focused cell border color * $type color */ -$datagrid-focused-border-color: color.mix($base-bg, $base-accent, 20%) !default; +$datagrid-focused-border-color: ds.$color-border-primary-default-rest !default; /** * $name 80. Editor background color * $type color */ -$datagrid-editor-bg: color.change($datagrid-base-background-color, $alpha: 0) !default; -$datagrid-drop-highlight-bg: $base-accent !default; -$datagrid-drop-highlight-color: $base-inverted-text-color !default; -$datagrid-columnchooser-bg: $base-element-bg !default; -$datagrid-columnchooser-item-bg: null !default; +$datagrid-editor-bg: transparent !default; +$datagrid-drop-highlight-bg: ds.$color-surface-primary-default-rest !default; +$datagrid-drop-highlight-color: ds.$color-content-neutral-default-static-dark-rest !default; +$datagrid-columnchooser-bg: ds.$color-surface-neutral-default-rest !default; +$datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; /** * $name 85. Alternate row background color * $type color */ -$datagrid-row-alternation-bg: null !default; +$datagrid-row-alternation-bg: ds.$color-surface-neutral-deep-rest !default; /** * $name 100. Summary item color * $type color */ -$datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default; -$datagrid-columnchooser-message-color: color.adjust($datagrid-base-color, $lightness: 26%, $space: hsl) !default; +$datagrid-summary-color: ds.$color-content-neutral-subdued-rest !default; +$datagrid-columnchooser-message-color: ds.$color-content-neutral-subdued-rest !default; $datagrid-summary-bg: $datagrid-base-background-color !default; -$datagrid-column-separator-bg: $base-accent !default; -$datagrid-filter-row-background-color: null !default; -$datagrid-active-header-filter-icon-color: $base-accent !default; +$datagrid-column-separator-bg: ds.$color-surface-primary-default-rest !default; +$datagrid-filter-row-background-color: ds.$color-surface-neutral-subdued-rest !default; +$datagrid-active-header-filter-icon-color: ds.$color-content-primary-default-rest !default; $datagrid-text-stub-background-image-path: null !default; -$datagrid-filter-panel-color: $base-accent !default; -$datagrid-draggable-column-text-color: null !default; +$datagrid-filter-panel-color: ds.$color-content-primary-default-rest !default; +$datagrid-draggable-column-text-color: ds.$color-content-neutral-subdued-rest !default; $datagrid-text-link-disabled-opacity: $base-disabled-opacity; $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; @if $mode == "light" { - @if $color == "blue"{ - $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: 3deg, $saturation: -0.98%, $lightness: 50.00%) !default; - $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: -2%, $space: hsl) !default; - } - - @if $color == "saas" { - $datagrid-row-focused-bg: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: 0%, $lightness: 26.47%) !default; - $datagrid-filter-row-background-color: $base-typography-bg !default; - } - - $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; - $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: -12%, $space: hsl) !default; - $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default; - $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; - $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default; - $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png') !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default; } @if $mode == "dark" { - $datagrid-row-focused-bg: #0c3b5e !default; - $datagrid-filter-row-background-color: color.adjust($datagrid-base-background-color, $lightness: 2%, $space: hsl) !default; - $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; - $datagrid-block-separator-bg: color.adjust($datagrid-base-background-color, $lightness: 12%, $space: hsl) !default; - $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default; - $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default; - $header-filter-color: $datagrid-columnchooser-item-color !default; - $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default; - $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default; $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png') !default; - $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default; - $datagrid-draggable-column-text-color: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default; } $header-filter-color-empty: $header-filter-color !default; @@ -211,8 +178,8 @@ $datagrid-border: 1px solid !default; } // Theme-layer values used by this widget's style files (phase 0.5 layer normalization) -$gridbase-accent: $base-accent !default; -$gridbase-border-color: $base-border-color !default; -$gridbase-danger: $base-danger !default; -$gridbase-icon-color: $base-icon-color !default; -$gridbase-success: $base-success !default; +$gridbase-accent: ds.$color-content-primary-default-rest !default; +$gridbase-border-color: ds.$color-border-neutral-default-rest !default; +$gridbase-danger: ds.$color-content-danger-default-rest !default; +$gridbase-icon-color: ds.$color-content-neutral-subdued-rest !default; +$gridbase-success: ds.$color-content-success-default-rest !default; diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss index 829047cd80d4..b63c72bdc990 100644 --- a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss @@ -1,9 +1,6 @@ -@use "sass:color"; -@use "../sizes" as *; -@use "../colors" as *; -@use "../gridBase/colors" as *; +@use "../../../_design-system/variables/ds" as ds; // adduse -$treelist-chevron-icon-color: $base-spin-icon-color !default; +$treelist-chevron-icon-color: ds.$color-content-neutral-subdued-rest !default; $treelist-selection-chevron-icon-color: $treelist-chevron-icon-color !default; From a631757aa879537ff99b5ccd03c570936c472801 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Mon, 20 Jul 2026 13:12:27 +0400 Subject: [PATCH 27/27] add jobs to avoid timeout --- .github/workflows/visual-tests-demos.yml | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml index 48cee44a72c4..fafc3897d58d 100644 --- a/.github/workflows/visual-tests-demos.yml +++ b/.github/workflows/visual-tests-demos.yml @@ -113,17 +113,20 @@ jobs: - name: Build matrix id: matrix run: | + # Temporarily disabled screenshot shards: + # - material.blue.light: jquery(1/3), jquery(2/3), jquery(3/3) + # - fluent.blue.light: jquery(1/3), jquery(2/3), jquery(3/3) base_matrix=$(cat <<'JSON' [ - { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(1/3)" }, - { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(2/3)" }, - { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(3/3)" }, - { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(1/3)" }, - { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(2/3)" }, - { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(3/3)" }, - { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(1/3)" }, - { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(2/3)" }, - { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(3/3)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(1/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(2/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(3/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(4/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(5/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(6/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(7/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(8/9)" }, + { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(9/9)" }, { "STRATEGY": "accessibility", "THEME": "material.blue.light", "CONSTEL": "jquery" }, { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" }, { "STRATEGY": "accessibility", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery" }