Remove sass variables usage (#6454)

* work for #6427 Remove sass variables usage * work for #6427 Remove sass variables usage * update etalons work for #6427 Remove sass variables usage * work for #6427 Remove sass variables usage * update etalons work for #6427 Remove sass variables usage * remove $border work for #6427 Remove sass variables usage * remove $secondary work for #6427 Remove sass variables usage * work for #6427 Remove sass variables usage * work for #6427 Remove sass variables usage * work for #6427 Remove sass variables usage --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com> Co-authored-by: OlgaLarina <olga.larina@gmail.com>
surveyjs · Jan 30, 2025 · b8c81f6 · b8c81f6
1 parent d189025
commit b8c81f6
Show file tree

Hide file tree

Showing 127 changed files with 243 additions and 290 deletions.
diff --git a/packages/survey-creator-core/src/components/creator.scss b/packages/survey-creator-core/src/components/creator.scss
@@ -20,7 +20,7 @@ survey-creator,
 
   @-moz-document url-prefix() {
     scrollbar-width: thin;
-    scrollbar-color: $border transparent;
+    scrollbar-color: var(--ctr-scrollbar-background-color, var(--sjs-border-25-overlay, #00000026)) transparent;
   }
 
   ::-webkit-scrollbar {
@@ -138,15 +138,6 @@ survey-creator,
   }
 }
 
-.svc-plugin-tab__content-actions {
-  sv-action-bar {
-    padding: 0;
-    height: calc(6 * #{$base-unit});
-    background: $background;
-    border-top: 1px solid $border;
-  }
-}
-
 .svc-creator__banner {
   width: 100%;
   line-height: calcSize(4);
@@ -162,7 +153,7 @@ survey-creator,
   background-color: $background;
   /* Shadow / Medium */
   border-radius: calcSize(12.5);
-  box-shadow: $shadow-medium;
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, var(--sjs-special-glow, #004c441a));
   transition:
     max-width 0.1s ease-in-out,
     padding 0.2s ease-in-out;

diff --git a/packages/survey-creator-core/src/components/image-item-value.scss b/packages/survey-creator-core/src/components/image-item-value.scss
@@ -11,14 +11,21 @@
 
   .sd-imagepicker__image {
     box-sizing: border-box;
-    border: 1px dashed $border;
+    border-radius: var(--lbr-image-corner-radius, var(--lbr-corner-radius-x05));
+    border: var(--ctr-survey-image-picker-item-border-width-placeholder, var(--lbr-stroke-x1)) dashed
+      var(--ctr-survey-image-picker-item-border-color-placeholder, var(--sjs-border-25, #d4d4d4ff));
   }
 }
 
 .svc-image-item-value--file-dragging {
   .sd-imagepicker__image {
-    border: 2px solid $primary;
-    background-color: $primary-light;
+    border-radius: var(--lbr-image-corner-radius, var(--lbr-corner-radius-x05));
+    border: var(--ctr-survey-image-picker-item-border-width-hovered-placeholder, var(--lbr-stroke-x2)) solid
+      var(--ctr-survey-image-picker-item-border-color-hovered-placeholder, var(--sjs-primary-background-500, #19b394ff));
+    background: var(
+      --ctr-survey-image-picker-item-background-color-hovered-placeholder,
+      var(--sjs-primary-background-10, #19b3941a)
+    );
   }
 
   .svc-image-item-value__item {
@@ -49,17 +56,24 @@
 }
 
 .svc-image-item-value-controls__add {
-  background-color: transparent;
+  border-radius: var(--ctr-survey-contextual-button-corner-radius, var(--lbr-corner-radius-round));
+  background: var(--ctr-survey-contextual-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
   transition: background-color $creator-transition-duration;
 
   use {
-    fill: $primary;
+    fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394ff));
     transition: fill $creator-transition-duration;
   }
 
   &:hover,
   &:focus {
-    background-color: $primary-light;
+    border-radius: var(--ctr-survey-contextual-button-corner-radius, var(--lbr-corner-radius-round));
+    background: linear-gradient(
+        0deg,
+        var(--ctr-survey-contextual-button-background-color-hovered-positive, var(--sjs-primary-background-10, #19b3941a)) 0%,
+        var(--ctr-survey-contextual-button-background-color-hovered-positive, var(--sjs-primary-background-10, #19b3941a)) 100%
+      ),
+      var(--ctr-survey-contextual-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
   }
 }
 
@@ -103,7 +117,8 @@
 
 .svc-image-item-value-wrapper__ghost {
   display: none;
-  background: $background-dim;
+  border-radius: var(--lbr-image-corner-radius, var(--lbr-corner-radius-x05));
+  background: var(--ctr-survey-image-picker-drop-spot-color, var(--sjs-layer-2-background-500, #f8f8f8ff));
 }
 
 .svc-image-item-value--single {

diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss
@@ -38,7 +38,7 @@
 
 .svc-item-value--dragging {
   background: $background;
-  box-shadow: $shadow-large;
+  box-shadow: 0px 8px 16px 0px var(--ctr-shadow-large-color, var(--sjs-special-glow, #004c441a));
   border-radius: calcSize(12.5);
   padding-right: calcSize(3);
   padding-left: calcSize(0.5);

diff --git a/packages/survey-creator-core/src/components/link-value.scss b/packages/survey-creator-core/src/components/link-value.scss
@@ -12,10 +12,10 @@
   margin-inline-start: calc(-1 * var(--ctr-actionbar-button-padding-left-medium-text, var(--sjs-spacing-x2)));
 }
 .svc-question-link__clear-button {
-  color: $red;
+  color: var(--sjs-semantic-red-background-500, #e50a3eff);
   cursor: pointer;
 }
 .svc-question-link__clear-button:focus,
 .svc-question-link__clear-button:hover {
-  background-color: $red-light;
+  background-color: var(--sjs-semantic-red-background-10, #e50a3e1a);
 }
diff --git a/packages/survey-creator-core/src/components/list.scss b/packages/survey-creator-core/src/components/list.scss
@@ -22,7 +22,7 @@
   text-align: start;
   color: var(--ctr-list-item-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
   transition: color $creator-transition-duration;
-  --thm-list-item-padding-left-default: calc(2 * #{$base-unit});
+
   --thm-list-item-padding-delta: var(--ctr-list-item-padding-left, var(--sjs-spacing-x2));
   --thm-list-item-padding-left: calc(var(--sjs-list-item-level) * var(--thm-list-item-padding-delta));
   display: flex;

diff --git a/packages/survey-creator-core/src/components/matrix-cell.scss b/packages/survey-creator-core/src/components/matrix-cell.scss
@@ -29,8 +29,9 @@
 
 .svc-matrix-cell--selected {
   position: absolute;
-  border: calcSize(0.25) solid var(--sjs-secondary-background-500, #19B394FF);
-  border-radius: calcSize(0.5);
+  border-radius: var(--ctr-survey-matrix-cell-corner-radius, var(--lbr-corner-radius-x075));
+  border: var(--ctr-survey-matrix-cell-border-width, var(--lbr-stroke-x2)) solid
+    var(--ctr-survey-matrix-cell-border-color-selected, var(--sjs-secondary-background-500, #19b394ff));
   top: calcSize(0);
   left: calcSize(0);
   right: calcSize(0);
@@ -39,12 +40,14 @@
 
   &.svc-visible {
     display: block;
+    border: var(--ctr-survey-matrix-cell-border-width, var(--lbr-stroke-x2)) solid
+      var(--ctr-survey-matrix-cell-border-color-selected, var(--sjs-secondary-background-500, #19b394ff));
   }
 }
 
-.svc-hovered>.svc-matrix-cell--selected:not(.svc-visible) {
-  border: calcSize(0.25) solid $secondary-light;
-  border-radius: calcSize(0.5);
+.svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
+  border: var(--ctr-survey-matrix-cell-border-width, var(--lbr-stroke-x2)) solid
+    var(--ctr-survey-matrix-cell-border-color-hovered, var(--sjs-secondary-background-10, #19b3941a));
   display: block;
 }
 
@@ -58,7 +61,8 @@
 }
 
 .svc-matrix-cell__question-controls-button {
-  border: 1px solid $border;
+  border: var(--ctr-survey-contextual-button-border-width, var(--lbr-stroke-x1)) solid
+    var(--ctr-survey-contextual-button-border-color, var(--sjs-border-25, #d4d4d4ff));
 }
 
 .svc-matrix-cell:hover .svc-matrix-cell__question-controls {

diff --git a/packages/survey-creator-core/src/components/notifier.scss b/packages/survey-creator-core/src/components/notifier.scss
@@ -14,7 +14,7 @@
   background: var(--ctr-notification-background-color, var(--sjs-layer-1-background-500, #ffffffff));
   opacity: 0;
   padding: calcSize(1) calcSize(2);
-  box-shadow: $shadow-medium;
+  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, var(--sjs-special-glow, #004c441a));
   border-radius: calcSize(0.5);
   color: var(--ctr-notification-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
   min-width: calcSize(30);

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -72,7 +72,7 @@ svc-page {
   display: flex;
   justify-content: flex-end;
   box-sizing: border-box;
-  padding: 0 calcSize(1) 0 var(--ctr-survey-page-drag-indicator-width, calcSize(3));
+  padding: 0 calcSize(1) 0 var(--ctr-survey-page-drag-indicator-width, var(--lbr-size-x3));
   z-index: 12;
   transition: opacity $creator-transition-duration;
   white-space: nowrap;
@@ -170,7 +170,7 @@ svc-page {
       var(--sjs-primary-background-10, #19b3941a)
     );
     .svc-survey-element-toolbar-item__title {
-      color: var(--ctr-survey-page-toolbar-item-text-color-selected, $foreground);
+      color: var(--ctr-survey-page-toolbar-item-text-color-selected, var(--sjs-secondary-background-400, #14a48bff));
     }
     use {
       fill: var(--ctr-survey-page-toolbar-item-icon-color-selected, var(--sjs-secondary-background-500, #19b394ff));
@@ -285,30 +285,30 @@ svc-page {
 
 .svc-page__content--collapse-onhover,
 .svc-page__content--collapse-always {
-  outline: 2px transparent dashed;
+  outline: var(--ctr-survey-page-border-width-minimized, var(--lbr-stroke-x2)) transparent dashed;
 
   &.svc-page__content--selected,
   &.svc-page__content.svc-hovered {
     outline-color: transparent;
   }
 
   &.svc-page__content--collapsed-drag-over-inside {
-    box-shadow: 0 0 0 2px $primary;
-    background: $primary-light;
+    box-shadow: 0 0 0 var(--ctr-survey-page-border-width-overing, var(--lbr-stroke-x2)) var(--ctr-survey-page-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
+    background: var(--ctr-survey-page-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
     animation: collapsed-drag-over-inside-blinking 1s infinite;
     outline-color: transparent;
   }
 }
 
 .svc-page__content--collapsed {
-  outline-color: $border;
+  outline-color: var(--ctr-survey-page-border-color-minimized, var(--sjs-border-10, #dcdcdcff));
 }
 
 .svc-creator--mobile {
   .svc-page__content {
     &::after {
       margin: 0;
-      border-radius: calcSize(1);
+      border-radius: var(--ctr-survey-page-corner-radius, var(--lbr-corner-radius-x1));
     }
   }
 
@@ -330,7 +330,7 @@ svc-page {
 
   .svc-page__content:not(.svc-page__content--new):focus,
   .svc-hovered.svc-page__content:not(.svc-page__content--new) {
-    box-shadow: 0 0 0 2px inset $secondary-light;
+    box-shadow: 0 0 0 2px inset var(--ctr-survey-page-border-color-hovered, var(--sjs-secondary-background-25, #19b39440));
   }
 }
 

diff --git a/packages/survey-creator-core/src/components/question-image.scss b/packages/survey-creator-core/src/components/question-image.scss
@@ -62,7 +62,7 @@
   background-color: $background;
   width: 100%;
   height: calcSize(27.5);
-  border: 1px dashed $border-inside;
+  border: var(--ctr-survey-placeholder-border-width, var(--lbr-stroke-x1)) dashed var(--ctr-survey-placeholder-border-color, var(--sjs-border-25, #D4D4D4));
 }
 
 .svc-image-question__loading {

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -243,7 +243,7 @@ svc-question {
   }
 
   .sd-multipletext__item-container.sd-input:focus-within {
-    box-shadow: $shadow-inner;
+    // box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.149)); // #00000026
   }
 
   .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
@@ -1047,14 +1047,18 @@ svc-question,
 }
 
 .svc-panel__placeholder_frame {
-  border: 1px dashed $border;
+  border: var(--ctr-survey-placeholder-border-width, var(--lbr-stroke-x1)) dashed
+    var(--ctr-survey-placeholder-border-color, var(--sjs-border-25, #d4d4d4ff));
   width: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  padding: calcSize(11) calcSize(8) calcSize(10);
+  padding: var(--ctr-survey-placeholder-padding-top-with-button, var(--lbr-spacing-x8))
+    var(--ctr-survey-placeholder-padding-right, var(--lbr-spacing-x8))
+    var(--ctr-survey-placeholder-padding-bottom-with-button, var(--lbr-spacing-x6))
+    var(--ctr-survey-placeholder-padding-left, var(--lbr-spacing-x8));
   flex-grow: 1;
 }
 
@@ -1366,7 +1370,7 @@ svc-question,
 
 .sd-row--enter.sd-row--enter.sd-row--enter.sd-row--enter {
   .svc-question__content--selected {
-    box-shadow: $shadow-small;
+    box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, var(--sjs-special-shadow, #00000040));
 
     .svc-question__content-actions {
       opacity: 0;
@@ -1378,7 +1382,8 @@ svc-question,
   .sd-row--enter.sd-row--enter.sd-row--enter.sd-row--enter {
     .svc-question__content--selected {
       border-radius: 0;
-      border: 1px dashed $border;
+      border: var(--ctr-survey-placeholder-border-width, var(--lbr-stroke-x1)) dashed
+        var(--ctr-survey-placeholder-border-color, var(--sjs-border-25, #d4d4d4ff));
       box-shadow: none;
     }
   }

diff --git a/packages/survey-creator-core/src/components/scroll.scss b/packages/survey-creator-core/src/components/scroll.scss
@@ -39,7 +39,7 @@
   inset-inline-start: initial;
   @-moz-document url-prefix() {
     scrollbar-width: thin;
-    scrollbar-color: $border transparent;
+    scrollbar-color: var(--ctr-scrollbar-background-color, var(--sjs-border-25-overlay, #00000026)) transparent;
   }
 }
 

diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar.scss b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
@@ -12,7 +12,9 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   width: var(--ctr-property-grid-width, var(--sjs-size-x60));
   min-width: var(--ctr-property-grid-min-width, var(--sjs-size-x40));
   height: 100%;
-  border-inline-start: 1px solid var(--ctr-property-grid-border-color, var(--sjs-border-25, #d4d4d4ff));
+  background: var(--ctr-property-grid-background-color, var(--sjs-layer-1-background-500, #ffffffff));
+  border-inline-start: var(--ctr-property-grid-border-width-left, var(--sjs-stroke-x1)) solid
+    var(--ctr-property-grid-border-color, var(--sjs-border-25, #d4d4d4ff));
 }
 
 .svc-side-bar__wrapper {
@@ -55,16 +57,16 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   background-color: var(--ctr-property-grid-background-color, var(--sjs-layer-1-background-500, #ffffffff));
 }
 
-.svc-side-bar__container-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  padding: 0px calcSize(2) calcSize(3);
-  box-sizing: border-box;
-  background: $background-dim;
-  box-shadow: inset 0px -1px 0px $border;
-}
+// .svc-side-bar__container-container {
+//   display: flex;
+//   flex-direction: column;
+//   align-items: flex-start;
+//   width: 100%;
+//   padding: 0px calcSize(2) calcSize(3);
+//   box-sizing: border-box;
+//   background: $background-dim;
+//   box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
+// }
 
 .svc-side-bar__container-title {
   @include ctrDefaultFont;

diff --git a/packages/survey-creator-core/src/components/simulator.scss b/packages/survey-creator-core/src/components/simulator.scss
@@ -11,16 +11,22 @@
   top: 50%;
   left: 50%;
   transform: scale(1.26) translate(-50%, -50%);
-  border: 2px solid $border-inside;
+
+  border: var(--ctr-preview-device-frame-border-width, var(--sjs-stroke-x2)) solid
+    var(--ctr-preview-device-frame-border-color, var(--sjs-border-25, #d4d4d4ff));
+  background: var(--ctr-preview-device-frame-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
 }
 
 .svd-simulator-wrapper {
   margin: 0 auto;
   position: relative;
   overflow: hidden;
   border-radius: var(--ctr-preview-device-corner-radius, var(--sjs-corner-radius-x4));
-  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px var(--ctr-preview-device-shadow-2-color, var(--sjs-special-glow, #004c441a));
-  border: var(--ctr-preview-device-border-width, var(--sjs-stroke-x4)) solid var(--ctr-preview-device-border-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
+  box-shadow:
+    0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+    0px 8px 16px 0px var(--ctr-preview-device-shadow-2-color, var(--sjs-special-glow, #004c441a));
+  border: var(--ctr-preview-device-border-width, var(--sjs-stroke-x4)) solid
+    var(--ctr-preview-device-border-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
   background: var(--ctr-preview-device-background-color, var(--sjs-layer-1-background-500, #ffffffff));
 }
 
@@ -59,8 +65,6 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  // border-bottom: 1px solid $border-inside;
-  box-shadow: inset 0px -1px 0px 0px $border-inside;
   position: relative;
 }