Skip to content

Commit

Permalink
work for https://github.com/surveyjs/private-tasks/issues/380 Creator…
Browse files Browse the repository at this point in the history 
… new theme
  • Loading branch information
OlgaLarina committed Oct 25, 2024
1 parent e79c118 commit 92ec75d
Show file tree
Hide file tree
Showing 13 changed files with 77 additions and 27 deletions.
4 changes: 3 additions & 1 deletion packages/survey-creator-core/creator-themes-import.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,9 @@ Object.keys(themeNameMap).forEach(themeName => {
const distinctions = themeConstants[themeNameMap[themeName]] || {};
Object.keys(curThemeCssVariables || {}).forEach(variableKey => {
const variableValue = curThemeCssVariables[variableKey];
if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) {
if(variableKey.indexOf("--ctr-shadow-") > -1 || variableKey.indexOf("--lbr-shadow-") > -1 || variableKey.indexOf("-unit") > -1) {
distinctions[variableKey] = variableValue;
} else if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) {
distinctions[variableKey] = getCorrectValue(variableKey, variableValue);
}
});
Expand Down
2 changes: 1 addition & 1 deletion packages/survey-creator-core/src/components/link-value.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}
.svc-link-value-button {
margin-left: calcSize(-2);
border-radius: var(--ctr-actionbar-button-corner-radius);
border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5));
}
.svc-question-link__clear-button {
color: $red;
Expand Down
4 changes: 2 additions & 2 deletions packages/survey-creator-core/src/components/property-panel/property-panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@
}
.svc-property-grid-placeholder__header {
display: flex;
max-width: 256px;
width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
max-width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--ctr-property-grid-placeholder-text-gap, 8px);
width: 100%;
}
.svc-property-grid-placeholder__title {
@include ctrDefaultBoldFont;
Expand Down
2 changes: 1 addition & 1 deletion packages/survey-creator-core/src/components/switcher/switcher.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

.svc-switcher__title {
@include ctrSmallBoldFont;
color: $foreground-light;
color: var(--ctr-property-grid-switcher-text-color, $foreground-light);
}

.svc-switcher__icon {
Expand Down
2 changes: 2 additions & 0 deletions packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ svc-tab-json-editor-textarea {

.svc-json-editor-tab__content-area {
@include ctrCodeFont;
color: var(--ctr-code-viewer-text-color, #505050);
background: var(--ctr-code-viewer-background-color, $background);
width: 100%;
height: 100%;
border: none;
Expand Down
5 changes: 5 additions & 0 deletions packages/survey-creator-core/src/custom-questions/boolean-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@
&:focus-visible {
box-shadow: 0px 0px 0px 2px var(--ctr-toggle-button-border-color-focused, #19b394);
}

&:hover {
background: var(--ctr-toggle-button-background-color-hovered, #f8f8f8);
}
}

.spg-boolean-switch__button--checked {
Expand Down Expand Up @@ -70,6 +74,7 @@

.spg-boolean-switch__thumb-circle {
border-radius: var(--ctr-toggle-button-thumb-corner-radius, 1024px);
border: var(--ctr-toggle-button-thumb-border-width, 0px) solid var(--ctr-toggle-button-thumb-border-color, rgba(0, 0, 0, 0.16));
display: flex;
flex-direction: row;
gap: 0px;
Expand Down
11 changes: 5 additions & 6 deletions packages/survey-creator-core/src/property-grid-theme/blocks/spg-checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
.spg-checkbox__caption {
color: var(--ctr-checkbox-text-color-disabled, $foreground-light);
}

.spg-checkbox__rectangle {
border: var(--ctr-checkbox-border-width, 1px) solid var(--ctr-checkbox-border-color-disabled, rgba(0, 0, 0, 0.16));
background: var(--ctr-checkbox-background-color-disabled, #f3f3f3);
}
}

.spg-checkbox__caption {
Expand Down Expand Up @@ -43,12 +48,6 @@
}
}

.spg-checkbox--disabled {
.spg-checkbox__rectangle:hover {
background: var(--ctr-checkbox-background-color-disabled, $background);
}
}

.spg-checkbox:active .spg-checkbox__rectangle,
.spg-checkbox__control:focus+.spg-checkbox__rectangle {
outline: 2px solid var(--ctr-checkbox-border-color-focused, $primary);
Expand Down
17 changes: 11 additions & 6 deletions packages/survey-creator-core/src/property-grid-theme/blocks/spg-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
.spg-input:disabled::placeholder {
color: var(--ctr-editor-content-text-color-disabled, $foreground);
opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
background-color: var(--ctr-editor-background-color-disabled, $background);
}

input.spg-input:read-only,
Expand Down Expand Up @@ -77,19 +78,23 @@ input.spg-input:read-only::placeholder {
opacity: var(--ctr-editor-button-icon-opacity-pressed, 0.5);
}

&.spg-input__edit-button--disabled,
&:disabled {
opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
background: var(--ctr-editor-background-color, $background);
}

svg {
width: var(--ctr-editor-button-icon-width, 24px);
height: var(--ctr-editor-button-icon-height, 24px);
fill: var(--ctr-editor-button-icon-color, $foreground-dim-light);
}
}

.spg-input__edit-button--disabled,
.spg-input__edit-button:disabled {
opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
background: var(--ctr-editor-background-color-disabled, $background);

svg {
fill: var(--ctr-editor-button-icon-color-disabled, $foreground-dim-light);
}
}

.spg-input.spg-input--error {
box-shadow: 0 0 0 1px inset var(--ctr-editor-border-color-error, $red);
}
Expand Down
8 changes: 8 additions & 0 deletions packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
border-radius: var(--ctr-editor-corner-radius);
}

.spg-question.spg-question--disabled {
background-color: var(--ctr-editor-background-color-disabled);
}

.spg-question__header {
width: 100%;
}
Expand All @@ -18,6 +22,10 @@
color: var(--ctr-label-text-color, $foreground-light);
box-sizing: border-box;
}
.spg-question__title.sd-element__title--disabled {
opacity: var(--ctr-editor-label-opacity-disabled, 0.25);
color: var(--ctr-editor-label-color-disabled, $foreground-dim);
}

.spg-question__content {
width: 100%;
Expand Down
7 changes: 1 addition & 6 deletions packages/survey-creator-core/src/property-grid-theme/blocks/spg-search-editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,9 @@
}

.spg-search-editor_bar-item:not(.sv-action-bar-item--pressed) {

&:hover:enabled,
&:focus:enabled {
background: var(--ctr-search-button-background-color-clear-hovered, $background-dim);

.sv-action-bar-item__icon use {
fill: var(--ctr-search-button-icon-color-clear-hovered, $foreground-light)
}
background-color: var(--ctr-property-grid-search-button-background-color-hovered, $background-dim);
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/survey-creator-core/src/property-grid-theme/property-grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
margin: calcSize(3);
}

.spg-title-toolobar--single-help-action {
.spg-title-toolbar--single-help-action {
justify-content: flex-start;
padding-left: calcSize(0.5);

Expand Down
2 changes: 1 addition & 1 deletion packages/survey-creator-core/src/property-grid/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ export class PropertyGridTitleActionsCreator {
var helpAction = this.createPropertyHelpAction(question);
if (!!helpAction) {
actions.unshift(helpAction);
question.getTitleToolbar().containerCss += " spg-title-toolobar--single-help-action";
question.getTitleToolbar().containerCss += " spg-title-toolbar--single-help-action";
helpAction.iconSize = 16;
}
if (actions.length > 0) {
Expand Down
38 changes: 36 additions & 2 deletions packages/survey-creator-core/src/themes/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,28 @@ const Theme = {
"--ctr-button-group-item-border-width": "0px",
"--ctr-button-group-gap": "0px",
"--ctr-shadow-medium-blur": "8px",
"--ctr-shadow-medium-offset-y": "2px",
"--ctr-shadow-large-blur": "32px",
"--ctr-shadow-large-offset-y": "16px",
"--ctr-shadow-large-offset-x": "0px",
"--ctr-shadow-large-spread": "0px",
"--ctr-shadow-medium-offset-x": "0px",
"--ctr-shadow-medium-spread": "0px",
"--ctr-button-group-item-border-width-selected-disabled": "0px",
"--ctr-shadow-small-offset-x": "0px",
"--ctr-shadow-small-offset-y": "1px",
"--ctr-shadow-small-blur": "2px",
"--ctr-shadow-small-spread": "0px",
"--ctr-shadow-x-large-offset-x": "0px",
"--ctr-shadow-x-large-offset-y": "32px",
"--ctr-shadow-x-large-blur": "64px",
"--ctr-shadow-x-large-spread": "0px",
"--ctr-property-grid-placeholder-text-max-width": "256px",
"--ctr-surface-placeholder-padding-top": "0px",
"--ctr-toolbox-group-header-margin-right": "0px",
"--ctr-property-grid-placeholder-padding-bottom": "0px",
"--ctr-editor-content-text-opacity-disabled": 0.25,
"--ctr-editor-label-opacity-disabled": 0.25,
"--ctr-editor-button-icon-opacity-disabled": 0.25,
"--ctr-editor-button-icon-opacity-pressed": 0.5,
"--ctr-actionbar-button-opacity-pressed": 0.5,
Expand All @@ -50,19 +62,35 @@ const Theme = {
"--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
"--ctr-survey-action-button-opacity-disabled": 0.25,
"--ctr-property-grid-form-border-width-bottom": "0px",
"--lbr-shadow-x-large-offset-x": "0px",
"--lbr-shadow-x-large-offset-y": "32px",
"--lbr-shadow-x-large-blur": "64px",
"--lbr-shadow-x-large-spread": "0px",
"--lbr-shadow-large-offset-x": "0px",
"--lbr-shadow-large-offset-y": "16px",
"--lbr-shadow-large-blur": "32px",
"--lbr-shadow-large-spread": "0px",
"--lbr-shadow-medium-offset-x": "0px",
"--lbr-shadow-medium-offset-y": "2px",
"--lbr-shadow-medium-blur": "8px",
"--lbr-shadow-medium-spread": "0px",
"--lbr-shadow-small-offset-x": "0px",
"--lbr-shadow-small-offset-y": "1px",
"--lbr-shadow-small-blur": "2px",
"--lbr-shadow-small-spread": "0px",
"--ctr-toolbox-item-shadow-hovered-1-color": "#00000000",
"--ctr-toolbox-item-shadow-pressed-color": "#00000000",
"--ctr-toolbox-item-shadow-hovered-2-color": "#00000000",
"--lbr-shadow-inner-offset-x": "0px",
"--lbr-shadow-inner-offset-y": "1px",
"--lbr-shadow-inner-blur": "2px",
"--lbr-shadow-inner-spread": "0px",
"--ctr-toolbox-item-icon-opacity-disabled": 0.25,
"--ctr-toolbox-item-shadow-subitem-1-color": "#00000000",
"--ctr-toolbox-item-shadow-subitem-2-color": "#00000000",
"--ctr-toolbox-submenu-margin-left": "0px",
"--ctr-survey-page-drag-indicator-opacity": "50px",
"--ctr-toggle-button-thumb-border-width": "0px",
"--ctr-line-height-unit": "8px",
"--ctr-font-unit": "8px",
"--ctr-spacing-unit": "8px",
Expand Down Expand Up @@ -419,6 +447,8 @@ const Theme = {
"--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
"--ctr-preview-pager-background-color": "var(--sjs-layer-1-background-500)",
"--ctr-preview-pager-border-color": "var(--sjs-border-25)",
"--ctr-code-viewer-background-color": "var(--sjs-layer-1-background-500)",
"--ctr-code-viewer-text-color": "var(--sjs-code-gray-300)",
"--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)",
"--ctr-code-viewer-line-number-panel-text-color": "var(--sjs-layer-2-foreground-50)",
"--ctr-property-grid-group-caption-text-color": "var(--sjs-layer-1-foreground-100)",
Expand Down Expand Up @@ -464,9 +494,8 @@ const Theme = {
"--ctr-search-button-padding-vertical": "var(--sjs-spacing-x05)",
"--ctr-search-button-padding-horizontal": "var(--sjs-spacing-x05)",
"--ctr-search-button-background-color-hovered": "var(--sjs-layer-1-background-400)",
"--ctr-search-button-icon-color-clear-hovered": "var(--sjs-semantic-red-background-500)",
"--ctr-search-button-background-color-clear-hovered": "var(--sjs-semantic-red-background-10)",
"--ctr-property-grid-search-button-icon-color": "var(--sjs-layer-3-foreground-50)",
"--ctr-property-grid-search-button-background-color-hovered": "var(--sjs-layer-3-background-400)",
"--ctr-property-grid-search-icon-color": "var(--sjs-layer-3-foreground-50)",
"--ctr-property-grid-search-count-text-color": "var(--sjs-layer-3-foreground-50)",
"--ctr-scrollbar-background-color": "var(--sjs-border-10)",
Expand Down Expand Up @@ -520,6 +549,10 @@ const Theme = {
"--ctr-font-small-line-height": "var(--sjs-line-height-x2)",
"--ctr-font-code-size": "var(--sjs-font-size-x2)",
"--ctr-font-code-line-height": "var(--sjs-line-height-x3)",
"--lbr-shadow-x-large-color": "var(--sjs-special-glow)",
"--lbr-shadow-large-color": "var(--sjs-special-glow)",
"--lbr-shadow-medium-color": "var(--sjs-special-glow)",
"--lbr-shadow-small-color": "var(--sjs-special-shadow)",
"--ctr-survey-checkboxes-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
"--ctr-survey-radio-button-group-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
"--ctr-survey-radio-button-group-item-background-color-floating": "var(--sjs-layer-1-background-500)",
Expand Down Expand Up @@ -585,6 +618,7 @@ const Theme = {
"--ctr-popup-shadow-3-blur": "var(--ctr-shadow-x-large-blur)",
"--ctr-popup-shadow-3-spread": "var(--ctr-shadow-x-large-spread)",
"--ctr-popup-shadow-3-color": "var(--ctr-shadow-x-large-color)",
"--lbr-shadow-inner-color": "var(--sjs-special-shadow)",
"--ctr-toolbox-item-background-color-submenu": "var(--sjs-layer-1-background-500)",
"--ctr-toolbox-item-text-color-submenu": "var(--sjs-layer-2-foreground-100)",
"--ctr-toolbox-min-width": "var(--sjs-size-x32)",
Expand Down

0 comments on commit 92ec75d

Please sign in to comment.