Replace SCSS to CSS variables (DevExpress#369)

* Replace scss to css variables * Fix screenshot test * Vue remove unused scss import * Remove all unused imports * Fix lint error * Fix css lint --------- Co-authored-by: Rochmar Nicolas (DevExpress) <[email protected]>
tomodasheesh · Jun 3, 2024 · fdbec0c · fdbec0c
1 parent cd129d8
commit fdbec0c
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 105 deletions.
diff --git a/packages/angular/src/app/components/library/task-kanban-card/task-kanban-card.component.html b/packages/angular/src/app/components/library/task-kanban-card/task-kanban-card.component.html
@@ -1,5 +1,5 @@
 <div
-  class="card dx-theme-text-color dx-theme-background-color"
+  class="card theme-text-color theme-bg-color"
   (click)="navigateToDetails()"
 >
   <div class="card-wrapper" class="priority-{{ task.priority | lowercase }}">
@@ -10,10 +10,10 @@
       (onClick)="notify($event)"
     ></dx-button>
     <div class="card-content">
-      <div class="card-subject dx-theme-text-color">{{ task.text }}</div>
+      <div class="card-subject theme-text-color">{{ task.text }}</div>
       <div class="card-data">
         <span class="priority">{{ task.priority }}</span>
-        <span class="date dx-theme-text-color">{{
+        <span class="date theme-text-color">{{
           task.dueDate | date: 'MM/dd/yyyy'
         }}</span>
       </div>

diff --git a/packages/angular/src/app/components/library/task-list-kanban/task-list-kanban.component.html b/packages/angular/src/app/components/library/task-list-kanban/task-list-kanban.component.html
@@ -10,7 +10,7 @@
     (onReorder)="onListReorder($event)"
   >
     <div class="list" *ngFor="let board of kanbanDataSource">
-      <div class="list-title dx-theme-text-color">
+      <div class="list-title theme-text-color">
         <span>{{ board.name }}</span>
         <card-menu [items]="boardMenuItems"> </card-menu>
       </div>

diff --git a/packages/angular/src/app/theme/styles/variables-mixin.scss b/packages/angular/src/app/theme/styles/variables-mixin.scss
@@ -2,18 +2,8 @@ $theme-mode: null !default;
 
 @use "devextreme/scss/widgets/fluent/colors" as * with ($color: "blue", $mode: $theme-mode);
 @use "devextreme/scss/widgets/fluent/sizes" as * with ($size: "default");
-@use "devextreme/scss/widgets/fluent/button/mixins" as *;
-@use "devextreme/scss/widgets/fluent/popup/sizes" as *;
-@use "devextreme/scss/widgets/fluent/textEditor/colors" as *;
 @use "devextreme/scss/widgets/fluent/fieldset/sizes" as *;
-@use "devextreme/scss/widgets/fluent/toolbar/sizes" as toolbar_sizes;
-@use "devextreme/scss/widgets/fluent/list/sizes" as *;
-@use "devextreme/scss/widgets/fluent/button/sizes" as *;
 @use "theme-special" as * with ($theme: "fluent");
-
-@forward "devextreme/scss/widgets/fluent/colors";
-@forward "devextreme/scss/widgets/fluent/textEditor/colors";
-
 @use "sass:math";
 @use "sass:color";
 
@@ -22,7 +12,7 @@ $theme-mode: null !default;
   --typography-bg: var(--base-bg);
 
   @if variable-exists("base-typography-bg") {
-    --typography-bg: #{$base-typography-bg};
+    --typography-bg: var(--dx-color-main-bg);
   }
 
   --side-panel-min-width: 48px;
@@ -32,7 +22,7 @@ $theme-mode: null !default;
   --footer-height: 70px;
   --toolbar-vertical-padding: 16px;
   --toolbar-margin-bottom: var(--content-padding);
-  --base-bg: #{$base-bg};
+  --base-bg: var(--dx-component-color-bg);
   --base-bg-darken-5: #{darken($base-bg, 5)};
   --base-bg-darken-4: #{darken($base-bg, 4)};
   --side-panel-background: var(--base-bg-darken-5);
@@ -43,26 +33,25 @@ $theme-mode: null !default;
     --card-background: var(--base-bg-darken-5);
   }
 
-  --border-color: #{$base-border-color};
-  --accent-color: #{$base-accent};
-  --success-color: #{$base-success};
-  --info-color: #{$base-accent};
-  --warning-color: #{$base-warning};
-  --error-color: #{$base-danger};
-  --base-text-color: #{$base-text-color};
-  --base-focus-color: #{$base-focus-color};
+  --border-color: var(--dx-color-border);
+  --accent-color: var(--dx-color-primary);
+  --success-color: var(--dx-color-success);
+  --info-color: var(--dx-color-primary);
+  --warning-color: var(--dx-color-warning);
+  --error-color: var(--dx-color-danger);
+  --base-text-color: var(--dx-color-text);
   --background-gray-color: #{color.change($base-text-color, $alpha: 0.04)};
-  --texteditor-edit-color: #{$texteditor-color};
-  --texteditor-label-color: #{$texteditor-label-color};
+  --texteditor-edit-color: var(--dx-texteditor-color-text);
+  --texteditor-label-color: var(--dx-texteditor-color-label);
   --base-text-color-alpha: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
-  --toolbar-height: #{toolbar_sizes.$fluent-toolbar-height};
+  --toolbar-height: var(--dx-toolbar-height);
   --filled-texteditor-input-horizontal-padding: #{$fluent-field-value-horizontal-padding};
-  --list-padding-left: #{$fluent-list-item-horizontal-padding};
-  --list-padding-vertical: #{$fluent-list-item-vertical-padding};
-  --footer-left-padding: #{calc((var(--side-panel-min-width) - $fluent-base-icon-size) / 2)};
-  --popup-toolbar-item-spacing: #{$fluent-popup-toolbar-item-spacing};
-  --drop-down-gnrc-button-height: #{$fluent-base-inline-widget-height};
-  --theme-padding: #{$fluent-button-horizontal-padding};
+  --list-padding-left: var(--dx-list-item-padding-inline);
+  --list-padding-vertical: var(--dx-list-item-padding-block);
+  --footer-left-padding: calc((var(--side-panel-min-width) - var(--dx-font-size-icon)) / 2);
+  --popup-toolbar-item-spacing: var(--dx-popup-toolbar-item-padding-inline);
+  --drop-down-gnrc-button-height: var(--dx-component-height);
+  --theme-padding: var(--dx-button-padding-inline);
   --tooltip-danger-button-color: #{color.change($base-danger, $alpha: 0.1)};
   --tooltip-success-button-color: #{color.change($base-success, $alpha: 0.1)};
   --subtitle-text-color: var(--texteditor-label-color);

diff --git a/packages/angular/src/styles.scss b/packages/angular/src/styles.scss
@@ -11,6 +11,14 @@ body {
   box-sizing: border-box;
 }
 
+.theme-text-color {
+  color: var(--dx-color-text);
+}
+
+.theme-bg-color {
+  background-color: var(--dx-component-color-bg);
+}
+
 .header-text {
   @include header();
 }

diff --git a/packages/react/src/components/library/task-kanban-card/TaskKanbanCard.tsx b/packages/react/src/components/library/task-kanban-card/TaskKanbanCard.tsx
@@ -24,7 +24,7 @@ export const TaskKanbanCard = ({ task }: { task: Task }) => {
   }, []);
 
   return (
-    <div className='kanban-card dx-card dx-theme-text-color dx-theme-background-color' onClick={navigateToDetails}>
+    <div className='kanban-card dx-card theme-text-color theme-bg-color' onClick={navigateToDetails}>
       <div className={`card-wrapper priority-${task.priority.toLowerCase()}`}>
         <div className='card-priority' />
         <Button
@@ -34,13 +34,13 @@ export const TaskKanbanCard = ({ task }: { task: Task }) => {
           onClick={onClick(task)}
         />
         <div className='card-content'>
-          <div className='card-subject dx-theme-text-color'>{task.text}</div>
+          <div className='card-subject theme-text-color'>{task.text}</div>
           <div className='card-data'>
             <span className='priority'>{task.priority}</span>
-            <span className='date dx-theme-text-color'>{formatDate(new Date(task.dueDate), 'MM/dd/yyyy')}</span>
+            <span className='date theme-text-color'>{formatDate(new Date(task.dueDate), 'MM/dd/yyyy')}</span>
           </div>
           <div className='card-assignee'>
-            <span className='company dx-theme-text-color'>{task.company}</span>
+            <span className='company theme-text-color'>{task.company}</span>
             <UserAvatar owner={task.owner} />
           </div>
         </div>

diff --git a/packages/react/src/components/library/task-list-kanban/TaskListKanban.tsx b/packages/react/src/components/library/task-list-kanban/TaskListKanban.tsx
@@ -50,7 +50,7 @@ const TaskList = ({
 
   return (
     <div className='list'>
-      <div className='list-title dx-theme-text-color'>
+      <div className='list-title theme-text-color'>
         <span>{title}</span>
         <CardMenu items={boardMenuItems} />
       </div>

diff --git a/packages/react/src/styles.scss b/packages/react/src/styles.scss
@@ -21,6 +21,14 @@ body {
   }
 }
 
+.theme-text-color {
+  color: var(--dx-color-text);
+}
+
+.theme-bg-color {
+  background-color: var(--dx-component-color-bg);
+}
+
 .header-text {
   @include header();
 }

diff --git a/packages/react/src/theme/styles/variables-mixin.scss b/packages/react/src/theme/styles/variables-mixin.scss
@@ -2,13 +2,6 @@ $theme-mode: null !default;
 
 @use "devextreme/scss/widgets/fluent/colors" as * with ($color: "blue", $mode: $theme-mode);
 @use "devextreme/scss/widgets/fluent/sizes" as * with ($size: "default");
-@use "devextreme/scss/widgets/fluent/button/mixins" as *;
-@use "devextreme/scss/widgets/fluent/textEditor/colors" as *;
-@use "devextreme/scss/widgets/fluent/fieldset/sizes" as *;
-@use "devextreme/scss/widgets/fluent/popup/sizes" as *;
-@use 'devextreme/scss/widgets/fluent/toolbar/sizes' as toolbar_sizes;
-@use "devextreme/scss/widgets/fluent/list/sizes" as *;
-@use "devextreme/scss/widgets/fluent/button/sizes" as *;
 @use "theme-special" as * with ($theme: "fluent");
 @use "sass:math";
 @use "sass:color";
@@ -18,7 +11,7 @@ $theme-mode: null !default;
   --typography-bg: var(--base-bg);
 
   @if variable-exists("base-typography-bg") {
-    --typography-bg: #{$base-typography-bg};
+    --typography-bg: var(--dx-color-main-bg);
   }
 
   --side-panel-min-width: 48px;
@@ -33,32 +26,30 @@ $theme-mode: null !default;
   --base-bg-darken-4: #{darken($base-bg, 4)};
   --background-gray-color: #{color.change($base-text-color, $alpha: 0.04)};
   --base-text-color-alpha: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
-  --footer-left-padding: #{calc((var(--side-panel-min-width) - $fluent-base-icon-size) / 2)};
-  --theme-padding: #{$fluent-button-horizontal-padding};
-  --button-height-theme-difference: #{calc((var(--theme-padding) - 10px) / 3)}; // WA for no button-height in fluent theme
-  --button-height: #{calc(26px + var(--button-height-theme-difference))}; // remove when design-system is released
-  --scheduler-toolbar-height: #{calc(var(--button-height) + 2 * var(--theme-padding))};
+  --footer-left-padding: calc((var(--side-panel-min-width) - var(--dx-font-size-icon)) / 2);
+  --theme-padding: var(--dx-button-padding-inline);
+  --button-height-theme-difference: calc((var(--theme-padding) - 10px) / 3); // WA for no button-height in fluent theme
+  --button-height: calc(26px + var(--button-height-theme-difference)); // remove when design-system is released
+  --scheduler-toolbar-height: calc(var(--button-height) + 2 * var(--theme-padding));
   --tooltip-danger-button-color: #{color.change($base-danger, $alpha: 0.1)};
   --tooltip-success-button-color: #{color.change($base-success, $alpha: 0.1)};
-  --base-bg: #{$base-bg};
+  --base-bg: var(--dx-component-color-bg);
   --card-background: var(--base-bg);
   --side-panel-background: var(--base-bg-darken-5);
-  --border-color: #{$base-border-color};
-  --accent-color: #{$base-accent};
-  --success-color: #{$base-success};
-  --info-color: #{$base-accent};
-  --warning-color: #{$base-warning};
-  --error-color: #{$base-danger};
-  --base-text-color: #{$base-text-color};
-  --base-focus-color: #{$base-focus-color};
-  --texteditor-edit-color: #{$texteditor-color};
-  --texteditor-label-color: #{$texteditor-label-color};
-  --toolbar-height: #{toolbar_sizes.$fluent-toolbar-height};
-  --filled-texteditor-input-horizontal-padding: #{$fluent-field-value-horizontal-padding};
-  --list-padding-left: #{$fluent-list-item-horizontal-padding};
-  --list-padding-vertical: #{$fluent-list-item-vertical-padding};
-  --popup-toolbar-item-spacing: #{$fluent-popup-toolbar-item-spacing};
-  --drop-down-gnrc-button-height: #{$fluent-base-inline-widget-height};
+  --border-color: var(--dx-color-border);
+  --accent-color: var(--dx-color-primary);
+  --success-color: var(--dx-color-success);
+  --info-color: var(--dx-color-primary);
+  --warning-color: var(--dx-color-warning);
+  --error-color: var(--dx-color-danger);
+  --base-text-color: var(--dx-color-text);
+  --texteditor-edit-color: var(--dx-texteditor-color-text);
+  --texteditor-label-color: var(--dx-texteditor-color-label);
+  --toolbar-height: var(--dx-toolbar-height);
+  --list-padding-left: var(--dx-list-item-padding-inline);
+  --list-padding-vertical: var(--dx-list-item-padding-block);
+  --popup-toolbar-item-spacing: var(--dx-popup-toolbar-item-padding-inline);
+  --drop-down-gnrc-button-height: var(--dx-component-height);
   --subtitle-text-color: var(--texteditor-label-color);
 
   @if $theme-mode == dark {

diff --git a/packages/vue/src/components/library/task-kanban-card.vue b/packages/vue/src/components/library/task-kanban-card.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="card dx-theme-text-color dx-theme-background-color"
+    class="card theme-text-color theme-bg-color"
     @click="navigateToDetails()"
   >
     <div
@@ -14,17 +14,17 @@
         @click="notifyByCard"
       />
       <div class="card-content">
-        <div class="card-subject dx-theme-text-color">
+        <div class="card-subject theme-text-color">
           {{ task.text }}
         </div>
         <div class="card-data">
           <span class="priority">{{ task.priority }}</span>
-          <span class="date dx-theme-text-color">{{
+          <span class="date theme-text-color">{{
             formatDate(task.dueDate)
           }}</span>
         </div>
         <div class="card-assignee">
-          <span class="company dx-theme-text-color">{{ task.company }}</span>
+          <span class="company theme-text-color">{{ task.company }}</span>
           <avatar :data-letters="getAvatarText(task.owner)" />
         </div>
       </div>

diff --git a/packages/vue/src/components/library/task-list-kanban.vue b/packages/vue/src/components/library/task-list-kanban.vue
@@ -14,7 +14,7 @@
         class="list"
         v-for="board in kanbanDataSource"
       >
-        <div class="list-title dx-theme-text-color">
+        <div class="list-title theme-text-color">
           <span>{{ board.name }}</span>
           <card-menu :items="boardMenuItems" />
         </div>

diff --git a/packages/vue/src/styles.scss b/packages/vue/src/styles.scss
@@ -10,6 +10,14 @@
   }
 }
 
+.theme-text-color {
+  color: var(--dx-color-text);
+}
+
+.theme-bg-color {
+  background-color: var(--dx-component-color-bg);
+}
+
 .header-text {
   @include header();
 }

diff --git a/packages/vue/src/theme/styles/variables-mixin.scss b/packages/vue/src/theme/styles/variables-mixin.scss
@@ -1,28 +1,17 @@
 $theme-mode: null !default;
+
 @use "devextreme/scss/widgets/fluent/colors" as * with ($color: "blue", $mode: $theme-mode);
 @use "devextreme/scss/widgets/fluent/sizes" as * with ($size: "default");
-@use "devextreme/scss/widgets/fluent/button/mixins" as *;
-@use "devextreme/scss/widgets/fluent/textEditor/colors" as *;
-@use "devextreme/scss/widgets/fluent/fieldset/sizes" as *;
-@use "devextreme/scss/widgets/fluent/popup/sizes" as *;
-@use 'devextreme/scss/widgets/fluent/toolbar/sizes' as toolbar_sizes;
-@use "devextreme/scss/widgets/fluent/list/sizes" as *;
-@use "devextreme/scss/widgets/fluent/button/sizes" as *;
 @use "theme-special" as * with ($theme: "fluent");
-
-@forward "devextreme/scss/widgets/fluent/colors";
-@forward "devextreme/scss/widgets/fluent/textEditor/colors";
-
 @use "sass:math";
 @use "sass:color";
 
-
 :root {
   --dark-warning-color: #{darken(adjust-hue($base-warning, -12), 3.73)};
   --typography-bg: var(--base-bg);
 
   @if variable-exists("base-typography-bg") {
-    --typography-bg: #{$base-typography-bg};
+    --typography-bg: var(--dx-color-main-bg);
   }
 
   --header-toolbar-vertical-padding: 10px;
@@ -32,7 +21,7 @@ $theme-mode: null !default;
   --footer-height: 70px;
   --calendar-width: 292px;
   --side-panel-min-width: 48px;
-  --base-bg: #{$base-bg};
+  --base-bg: var(--dx-component-color-bg);
   --base-bg-darken-5: #{darken($base-bg, 5)};
   --base-bg-darken-4: #{darken($base-bg, 4)};
   --card-background: var(--base-bg);
@@ -42,29 +31,27 @@ $theme-mode: null !default;
   }
 
   --side-panel-background: var(--base-bg-darken-5);
-  --border-color: #{$base-border-color};
-  --accent-color: #{$base-accent};
-  --success-color: #{$base-success};
-  --info-color: #{$base-accent};
-  --warning-color: #{$base-warning};
-  --error-color: #{$base-danger};
-  --base-text-color: #{$base-text-color};
-  --base-focus-color: #{$base-focus-color};
+  --border-color: var(--dx-color-border);
+  --accent-color: var(--dx-color-primary);
+  --success-color: var(--dx-color-success);
+  --info-color: var(--dx-color-primary);
+  --warning-color: var(--dx-color-warning);
+  --error-color: var(--dx-color-danger);
+  --base-text-color: var(--dx-color-text);
   --background-gray-color: #{color.change($base-text-color, $alpha: 0.04)};
-  --texteditor-edit-color: #{$texteditor-color};
-  --texteditor-label-color: #{$texteditor-label-color};
+  --texteditor-edit-color: var(--dx-texteditor-color-text);
+  --texteditor-label-color: var(--dx-texteditor-color-label);
   --base-text-color-alpha: #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
   --toolbar-margin-bottom: var(--content-padding);
   --subtitle-text-color: var(--texteditor-label-color);
 
-  --toolbar-height: #{toolbar_sizes.$fluent-toolbar-height};
-  --filled-texteditor-input-horizontal-padding: #{$fluent-field-value-horizontal-padding};
-  --list-padding-left: #{$fluent-list-item-horizontal-padding};
-  --list-padding-vertical: #{$fluent-list-item-vertical-padding};
-  --footer-left-padding: #{calc((var(--side-panel-min-width) - $fluent-base-icon-size) / 2)};
-  --popup-toolbar-item-spacing: #{$fluent-popup-toolbar-item-spacing};
-  --drop-down-gnrc-button-height: #{$fluent-base-inline-widget-height};
-  --theme-padding: #{$fluent-button-horizontal-padding};
+  --toolbar-height: var(--dx-toolbar-height);
+  --list-padding-left: var(--dx-list-item-padding-inline);
+  --list-padding-vertical: var(--dx-list-item-padding-block);
+  --footer-left-padding: calc((var(--side-panel-min-width) - var(--dx-font-size-icon)) / 2);
+  --popup-toolbar-item-spacing: var(--dx-popup-toolbar-item-padding-inline);
+  --drop-down-gnrc-button-height: var(--dx-component-height);
+  --theme-padding: var(--dx-button-padding-inline);
   --tooltip-danger-button-color: #{color.change($base-danger, $alpha: 0.1)};
   --tooltip-success-button-color: #{color.change($base-success, $alpha: 0.1)};
   --button-height-theme-difference: calc((var(--theme-padding) - 10px) / 3); // WA for no button-height in fluent theme