Skip to content

Commit c90fb3f

Browse files
author
OlgaLarina
committed
remove primary colors
1 parent bedcd2f commit c90fb3f

File tree

6 files changed

+41
-40
lines changed

6 files changed

+41
-40
lines changed

‎packages/survey-creator-core/src/components/question.scss

+28-20
Original file line numberDiff line numberDiff line change
@@ -396,15 +396,11 @@ svc-question {
396396
justify-content: left;
397397
}
398398

399-
.svc-survey-element-toolbar-item__icon {
400-
&:last-child {
401-
margin-inline-start: 0;
402-
}
403-
}
404-
405399
.svc-survey-element-toolbar-item__icon:last-child {
400+
margin-inline-start: 0;
401+
406402
use {
407-
fill: $primary;
403+
fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
408404
}
409405
}
410406
}
@@ -466,38 +462,45 @@ svc-question {
466462
}
467463

468464
.svc-question__content--collapsed-drag-over-inside:not(.svc-question__content--dragged) {
469-
box-shadow: 0 0 0 2px $primary;
470-
background: $primary-light;
465+
box-shadow: var(--ctr-survey-panel-border-width-overing, var(--lbr-stroke-x2)) solid
466+
var(--ctr-survey-panel-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
467+
background: linear-gradient(
468+
0deg,
469+
var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 0%,
470+
var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 100%
471+
),
472+
var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, #ffffffff));
473+
471474
animation: collapsed-drag-over-inside-blinking 1s;
472475
}
473476

474477
@keyframes collapsed-drag-over-inside-blinking {
475478
0% {
476-
background: $primary-light;
479+
background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
477480
}
478481
40% {
479-
background: $primary-light;
482+
background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
480483
}
481484
50% {
482485
background: transparent;
483486
}
484487
55% {
485-
background: $primary-light;
488+
background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
486489
}
487490
65% {
488491
background: transparent;
489492
}
490493
70% {
491-
background: $primary-light;
494+
background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
492495
}
493496
80% {
494497
background: transparent;
495498
}
496499
85% {
497-
background: $primary-light;
500+
background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
498501
}
499502
100% {
500-
background: $primary-light;
503+
background: var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
501504
}
502505
}
503506

@@ -638,9 +641,14 @@ svc-question {
638641
.svc-question__content--drag-over-inside,
639642
.svc-hovered > .svc-question__content--drag-over-inside {
640643
.svc-panel__placeholder_frame {
641-
box-shadow: 0 0 0 1px $primary;
642-
border: 1px solid $primary;
643-
background: $primary-light;
644+
box-shadow: 0 0 0 1px var(--ctr-survey-panel-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
645+
border: 1px solid var(--ctr-survey-panel-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
646+
background: linear-gradient(
647+
0deg,
648+
var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 0%,
649+
var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 100%
650+
),
651+
var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, #ffffffff));
644652

645653
& > .svc-question__content-actions {
646654
opacity: 1;
@@ -1092,7 +1100,7 @@ svc-question,
10921100
display: none;
10931101

10941102
use {
1095-
fill: $primary;
1103+
fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394ff));
10961104
}
10971105
}
10981106

@@ -1146,7 +1154,7 @@ svc-question,
11461154
display: none;
11471155

11481156
use {
1149-
fill: $primary;
1157+
fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394ff));
11501158
}
11511159
}
11521160

‎packages/survey-creator-core/src/components/tabs/logic-ui.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@
5757
// }
5858
}
5959

60-
.svc-logic-operator:focus {
61-
outline: 1px dotted $primary;
62-
}
60+
// .svc-logic-operator:focus {
61+
// outline: 1px dotted $primary;
62+
// }
6363

6464

6565
.svc-logic-operator.svc-logic-operator {
@@ -326,12 +326,12 @@
326326
min-width: 100%;
327327
max-width: 100%;
328328
box-sizing: border-box;
329-
margin-top: var(--lbr-question-panel-header-padding-bottom, 16px);
330-
border-radius: var(--lbr-question-panel-corner-radius, 4px);
331-
background: var(--lbr-question-panel-background-color, #fff);
329+
margin-top: var(--lbr-question-panel-header-padding-bottom, var(--lbr-spacing-x2));
330+
border-radius: var(--lbr-question-panel-corner-radius, var(--lbr-corner-radius-x05));
331+
background: var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, #ffffffff));
332332
box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px) var(--lbr-question-panel-shadow-offset-y, 1px)
333333
var(--lbr-question-panel-shadow-blur, 2px) var(--lbr-question-panel-shadow-spread, 0px)
334-
var(--lbr-question-panel-shadow-color, rgba(0, 0, 0, 0.15));
334+
var(--lbr-question-panel-shadow-color, var(--sjs-special-shadow, #00000040));
335335
}
336336

337337
.sv-popup--overlay {
@@ -342,11 +342,11 @@
342342

343343
.svc-logic-placeholder__text.svc-logic-placeholder__text {
344344
@include lbrDefaultFont;
345-
color: var(--lbr-placeholder-text-color, rgba(0, 0, 0, 0.45));
345+
color: var(--lbr-placeholder-text-color, var(--sjs-layer-1-foreground-50, #00000080));
346346
text-align: center;
347347
display: block;
348-
padding: var(--lbr-placeholder-padding-top, 16px) var(--lbr-placeholder-padding-right, 64px)
349-
var(--lbr-placeholder-padding-bottom, 16px) var(--lbr-placeholder-padding-left, 64px);
348+
padding: var(--lbr-placeholder-padding-top, var(--lbr-spacing-x2)) var(--lbr-placeholder-padding-right, var(--lbr-spacing-x8))
349+
var(--lbr-placeholder-padding-bottom, var(--lbr-spacing-x2)) var(--lbr-placeholder-padding-left, var(--lbr-spacing-x8));
350350
}
351351

352352
.svc-logic-tab__leave-apply-button {

‎packages/survey-creator-core/src/property-grid-theme/blocks/spg-link.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
.sv-string-viewer {
88
.spg-link {
99
display: initial;
10-
color: $primary;
10+
color: var(--ctr-survey-action-button-text-color-positive, var(--sjs-primary-background-500, #19b394ff));
1111
font-weight: 600;
1212
text-decoration-line: underline;
1313
}

‎packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss

-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535

3636
.spg-question__content {
3737
width: 100%;
38-
color: $primary;
3938
cursor: pointer;
4039
}
4140

‎packages/survey-creator-core/src/utils/context-button.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
&:hover,
4646
&:focus {
4747
use {
48-
fill: $primary;
48+
fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394ff));
4949
}
5050
}
5151
}
@@ -55,7 +55,7 @@
5555
&:hover,
5656
&:focus {
5757
use {
58-
fill: var(--sjs-semantic-red-background-500, #e50a3eff);
58+
fill: var(--ctr-survey-contextual-button-icon-color-negative, var(--sjs-semantic-red-background-500, #e50a3eff));
5959
}
6060
}
6161
}

‎packages/survey-creator-core/src/variables.scss

-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
@forward "./lbr-variables.scss";
22
@forward "./ctr-variables.scss";
33

4-
$primary: var(--sjs-primary-backcolor, var(--primary, #19b394));
5-
$primary-light: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
6-
$primary-background-dark: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
7-
$primary-foreground: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
8-
$primary-foreground-disabled: var(--sjs-primary-forecolor-light, var(--primary-foreground-disabled, rgba(#fff, 0.25)));
9-
104
$foreground: var(--sjs-general-forecolor, var(--foreground, #161616));
115
$foreground-light: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
126

0 commit comments

Comments
 (0)