diff --git a/src/framework/preferences/css/sass/Contrast.scss b/src/framework/preferences/css/sass/Contrast.scss index 4e69d2faeb..64b3e4d69e 100644 --- a/src/framework/preferences/css/sass/Contrast.scss +++ b/src/framework/preferences/css/sass/Contrast.scss @@ -2,20 +2,12 @@ // General theme styling that applies to html elements and infusion components. // !important is used for all styles to ensure that Preferences Framework's enactors are able to override the pages default styles. -[class*="fl-theme"]:not(.fl-theme-prefsEditor-default) { +[class*="fl-theme"]:not(.fl-theme-prefsEditor-default, .fl-blocking-theme) { background-image: none !important; &, - *, - .fl-preview-theme &, - div, - input, - h1, - h2, - h3, - h4, - h5, - h6 { + :where(:not(.fl-blocking-theme, .fl-blocking-theme *)), + .fl-preview-theme & { background-color: var(--fl-bgColor) !important; border-bottom-color: var(--fl-fgColor) !important; border-left-color: var(--fl-fgColor) !important; @@ -27,13 +19,12 @@ &:disabled, :disabled, :disabled legend, - input[type="button"]:disabled, - input[type="button"]:disabled *, - input[type="reset"]:disabled, - input[type="reset"]:disabled *, - input[type="submit"]:disabled, - input[type="submit"]:disabled * { - color: var(--fl-disabledColor) !important; + input:disabled, + input:disabled *, + input:disabled::file-selector-button, + input[type]:disabled { + background-color: var(--fl-disabledBgColor) !important; + color: var(--fl-disabledFgColor) !important; } &::selection, @@ -44,8 +35,8 @@ a, a * { - background-color: var(--fl-bgColor) !important; - color: var(--fl-linkColor) !important; + background-color: var(--fl-linkBgColor) !important; + color: var(--fl-linkFgColor) !important; font-weight: bold !important; } @@ -57,6 +48,7 @@ input[type="reset"] *, input[type="submit"], input[type="submit"] *, + input::file-selector-button, .fl-input-button, .fl-input-button * { background-color: var(--fl-buttonBgColor) !important; @@ -102,9 +94,10 @@ } // Focus + &.fl-focus :focus:not(.fl-blocking-theme :focus), + &.fl-focus :where([class*="fl-theme"]:not(.fl-theme-prefsEditor-default)) :focus, .fl-focus:focus, .fl-focus :focus, - &.fl-focus :focus, .selectable { outline-color: var(--fl-fgColor); outline-style: solid; @@ -144,16 +137,18 @@ } // Textfield Stepper - .fl-textfieldStepper .fl-textfieldStepper-textField { - border: solid 1px var(--fl-fgColor); - } + .fl-textfieldStepper:where(:not(.fl-blocking-theme, .fl-blocking-theme .fl-textfieldStepper)) { + .fl-textfieldStepper-textField { + border: solid 1px var(--fl-fgColor); + } - .fl-textfieldStepper .fl-textfieldStepper-button:disabled { - visibility: hidden; - } + .fl-textfieldStepper-button:disabled { + visibility: hidden; + } - .fl-textfieldStepper .fl-textfieldStepper-focus { - outline-color: var(--fl-fgColor); + .fl-textfieldStepper-focus { + outline-color: var(--fl-fgColor); + } } // Orator @@ -195,221 +190,8 @@ border-bottom-color: var(--fl-fgColor); } - // Inverted color - // General Styling - &.fl-inverted-color, - &.fl-inverted-color *, - .fl-preview-theme &.fl-inverted-color { - background-color: var(--fl-fgColor) !important; - border-bottom-color: var(--fl-bgColor) !important; - border-left-color: var(--fl-bgColor) !important; - border-right-color: var(--fl-bgColor) !important; - border-top-color: var(--fl-bgColor) !important; - color: var(--fl-bgColor) !important; - } - - // Focus - &.fl-inverted-color.fl-focus :focus, - &.fl-inverted-color.fl-focus:focus, - .fl-inverted-color.fl-focus :focus, - .fl-inverted-color.fl-focus:focus, - &.fl-focus .fl-inverted-color :focus, - &.fl-focus .fl-inverted-color:focus, - .fl-focus .fl-inverted-color :focus, - .fl-focus .fl-inverted-color:focus { - outline-color: var(--fl-bgColor); - outline-style: solid; - outline-width: 0.2em; - } - - .fl-inverted-color { - &, - *, - div, - input, - h1, - h2, - h3, - h4, - h5, - h6 { - background-color: var(--fl-fgColor) !important; - border-bottom-color: var(--fl-bgColor) !important; - border-left-color: var(--fl-bgColor) !important; - border-right-color: var(--fl-bgColor) !important; - border-top-color: var(--fl-bgColor) !important; - color: var(--fl-bgColor) !important; - } - - &::selection, - ::selection { - background-color: var(--fl-selectedFgColor, highlight) !important; - color: var(--fl-selectedBgColor, highlighttext) !important; - } - - iframe { - border-bottom-color: var(--fl-bgColor) !important; - border-left-color: var(--fl-bgColor) !important; - border-right-color: var(--fl-bgColor) !important; - border-top-color: var(--fl-bgColor) !important; - } - - a, - a * { - background-color: var(--fl-linkColor) !important; - color: var(--fl-bgColor) !important; - font-weight: bold !important; - } - - button, - button *, - input[type="button"], - input[type="button"] *, - input[type="reset"], - input[type="reset"] *, - input[type="submit"], - input[type="submit"] *, - .fl-input-button, - &.fl-input-button, - .fl-input-button *, - &.fl-input-button * { - background-color: var(--fl-buttonFgColor) !important; - color: var(--fl-buttonBgColor) !important; - } - - // Tables - th { - background-color: var(--fl-bgColor) !important; - border-bottom-color: var(--fl-bgColor) !important; - border-bottom-style: solid; - border-bottom-width: 0.1em; - border-left-color: var(--fl-bgColor) !important; - border-left-style: solid; - border-left-width: 0.1em; - border-right-color: var(--fl-bgColor) !important; - border-right-style: solid; - border-right-width: 0.1em; - border-top-color: var(--fl-bgColor) !important; - border-top-style: solid; - border-top-width: 0.1em; - color: var(--fl-fgColor) !important; - } - - td { - border-bottom-color: var(--fl-bgColor) !important; - border-bottom-style: solid; - border-bottom-width: 0.1em; - border-left-color: var(--fl-bgColor) !important; - border-left-style: solid; - border-left-width: 0.1em; - border-right-color: var(--fl-bgColor) !important; - border-right-style: solid; - border-right-width: 0.1em; - border-top-color: var(--fl-bgColor) !important; - border-top-style: solid; - border-top-width: 0.1em; - } - - // Infusion focus element - .fl-focus:focus, - .fl-focus :focus, - .selectable { - outline-color: var(--fl-bgColor); - outline-style: solid; - outline-width: 0.2em; - } - - // Infusion Components - // Reorderer - .fl-reorderer-dropMarker { - background-color: #f00 !important; - } - - // Inline Edit - .fl-inlineEdit-edit { - background-color: var(--fl-bgColor) !important; - border-bottom-color: var(--fl-fgColor) !important; - border-bottom-style: solid; - border-bottom-width: 0.1em; - border-left-color: var(--fl-fgColor) !important; - border-left-style: solid; - border-left-width: 0.1em; - border-right-color: var(--fl-fgColor) !important; - border-right-style: solid; - border-right-width: 0.1em; - border-top-color: var(--fl-fgColor) !important; - border-top-style: solid; - border-top-width: 0.1em; - color: var(--fl-fgColor) !important; - margin-bottom: -0.1em; - margin-left: -0.1em; - margin-right: -0.1em; - margin-top: -0.1em; - padding-bottom: 0.1em; - padding-left: 0.1em; - padding-right: 0.1em; - padding-top: 0.1em; - } - - // Orator - .fl-orator-highlight { - background-color: var(--fl-bgColor) !important; - color: var(--fl-fgColor) !important; - outline-color: var(--fl-bgColor); - } - - .fl-icon-orator::before { - background-color: var(--fl-fgColor); - color: var(--fl-bgColor); - } - - .fl-orator-controller > *:not(:first-child):hover, - .fl-orator-controller :hover .fl-orator-controller-playToggle::before { - background-color: var(--fl-bgColor) !important; - color: var(--fl-fgColor) !important; - } - - .fl-orator-selectionReader-control:hover, - .fl-orator-selectionReader-control:hover .fl-icon-orator::before, - .fl-orator-selectionReader-control:hover * { - background-color: var(--fl-bgColor) !important; - color: var(--fl-fgColor) !important; - } - - .fl-orator-selectionReader-control.fl-orator-selectionReader-above::after, - .fl-orator-selectionReader-control.fl-orator-selectionReader-above:hover::after, - .fl-orator-selectionReader-control.fl-orator-selectionReader-above::before { - border-top-color: var(--fl-bgColor); - } - - .fl-orator-selectionReader-control.fl-orator-selectionReader-below::after, - .fl-orator-selectionReader-control.fl-orator-selectionReader-below:hover::after, - .fl-orator-selectionReader-control.fl-orator-selectionReader-below::before { - border-bottom-color: var(--fl-bgColor); - } - - // TextfieldStepper - .fl-textfieldStepper .fl-textfieldStepper-focus { - outline-color: var(--fl-bgColor); - } - } - a.fl-inverted-color, a.fl-inverted-color * { - background-color: var(--fl-linkColor) !important; - color: var(--fl-bgColor) !important; font-weight: bold !important; } - - button.fl-inverted-color, - button.fl-inverted-color *, - input[type="button"].fl-inverted-color, - input[type="button"].fl-inverted-color *, - input[type="reset"].fl-inverted-color, - input[type="reset"].fl-inverted-color *, - input[type="submit"].fl-inverted-color, - input[type="submit"].fl-inverted-color * { - background-color: var(--fl-buttonFgColor) !important; - color: var(--fl-buttonBgColor) !important; - } } diff --git a/src/framework/preferences/css/sass/Contrast_base.scss b/src/framework/preferences/css/sass/Contrast_base.scss index bb9dd5972d..cc55ff2b3f 100644 --- a/src/framework/preferences/css/sass/Contrast_base.scss +++ b/src/framework/preferences/css/sass/Contrast_base.scss @@ -2,101 +2,153 @@ // The "blocking" definition used to insulate a part of the interface, e.g. the prefs editor itself, from styling changes // Do not begin this name with fl-theme because of fl-theme* matching rule in Contrast.scss - .fl-blocking-theme { - --fl-fgColor: #000; - --fl-bgColor: #fff; - --fl-linkColor: #00e; - --fl-selectedFgColor: #fff; - --fl-selectedBgColor: #3297fd; - --fl-buttonFgColor: #000; - --fl-buttonBgColor: #fff; - --fl-prefsEditorBgColor: #bcb5ad; - --fl-prefsEditorFgColor: #5d5652; - --fl-selectBorderFgColor: #ebebeb; - --fl-prefsEditorPanelBorderFgColor: #615e59; - --fl-prefsEditorPanelBorderBottomFgColor: #ccc; + --fl-fgColor: initial; + --fl-bgColor: initial; + --fl-linkColor: initial; + --fl-linkFgColor: initial; + --fl-linkBgColor: initial; + --fl-disabledColor: initial; + --fl-disabledFgColor: initial; + --fl-disabledBgColor: initial; + --fl-selectedFgColor: initial; + --fl-selectedBgColor: initial; + --fl-buttonFgColor: initial; + --fl-buttonBgColor: initial; } .fl-theme-bw { - --fl-fgColor: #000; - --fl-bgColor: #fff; - --fl-linkColor: #000; - --fl-selectedFgColor: revert; - --fl-selectedBgColor: revert; - --fl-buttonFgColor: #000; - --fl-buttonBgColor: #fff; + --_fl-fgColor: #000; + --_fl-bgColor: #fff; + --_fl-linkFgColor: #000; + --_fl-linkBgColor: #fff; + --_fl-disabledFgColor: #000; + --_fl-disabledBgColor: #fff; + --_fl-selectedFgColor: revert; + --_fl-selectedBgColor: revert; + --_fl-buttonFgColor: #000; + --_fl-buttonBgColor: #fff; } .fl-theme-wb { - --fl-fgColor: #fff; - --fl-bgColor: #000; - --fl-linkColor: #fff; - --fl-selectedFgColor: revert; - --fl-selectedBgColor: revert; - --fl-buttonFgColor: #fff; - --fl-buttonBgColor: #000; + --_fl-fgColor: #fff; + --_fl-bgColor: #000; + --_fl-linkFgColor: #fff; + --_fl-linkBgColor: #000; + --_fl-disabledFgColor: #fff; + --_fl-disabledBgColor: #000; + --_fl-selectedFgColor: revert; + --_fl-selectedBgColor: revert; + --_fl-buttonFgColor: #fff; + --_fl-buttonBgColor: #000; } .fl-theme-yb { - --fl-fgColor: #ff0; - --fl-bgColor: #000; - --fl-linkColor: #ff0; - --fl-selectedFgColor: revert; - --fl-selectedBgColor: revert; - --fl-buttonFgColor: #ff0; - --fl-buttonBgColor: #000; + --_fl-fgColor: #ff0; + --_fl-bgColor: #000; + --_fl-linkFgColor: #ff0; + --_fl-linkBgColor: #000; + --_fl-disabledFgColor: #ff0; + --_fl-disabledBgColor: #000; + --_fl-selectedFgColor: revert; + --_fl-selectedBgColor: revert; + --_fl-buttonFgColor: #ff0; + --_fl-buttonBgColor: #000; } .fl-theme-by { - --fl-fgColor: #000; - --fl-bgColor: #ff0; - --fl-linkColor: #000; - --fl-selectedFgColor: revert; - --fl-selectedBgColor: revert; - --fl-buttonFgColor: #000; - --fl-buttonBgColor: #ff0; + --_fl-fgColor: #000; + --_fl-bgColor: #ff0; + --_fl-linkFgColor: #000; + --_fl-linkBgColor: #ff0; + --_fl-disabledFgColor: #000; + --_fl-disabledBgColor: #ff0; + --_fl-selectedFgColor: revert; + --_fl-selectedBgColor: revert; + --_fl-buttonFgColor: #000; + --_fl-buttonBgColor: #ff0; } .fl-theme-lgdg { - --fl-fgColor: #bdbdbb; - --fl-bgColor: #555; - --fl-linkColor: #bdbdbb; - --fl-selectedFgColor: revert; - --fl-selectedBgColor: revert; - --fl-buttonFgColor: #bdbdbb; - --fl-buttonBgColor: #555; + --_fl-fgColor: #bdbdbb; + --_fl-bgColor: #555; + --_fl-linkFgColor: #bdbdbb; + --_fl-linkBgColor: #555; + --_fl-disabledFgColor: #bdbdbb; + --_fl-disabledBgColor: #555; + --_fl-selectedFgColor: revert; + --_fl-selectedBgColor: revert; + --_fl-buttonFgColor: #bdbdbb; + --_fl-buttonBgColor: #555; } .fl-theme-gd { - --fl-fgColor: #888; - --fl-bgColor: #222; - --fl-linkColor: #8080ff; - --fl-disabledColor: #c00; - --fl-selectedFgColor: #fff; - --fl-selectedBgColor: #008000; - --fl-buttonFgColor: #fff; - --fl-buttonBgColor: #000; + --_fl-fgColor: #888; + --_fl-bgColor: #222; + --_fl-linkFgColor: #8080ff; + --_fl-linkBgColor: #222; + --_fl-disabledFgColor: #c00; + --_fl-disabledBgColor: #000; + --_fl-selectedFgColor: #fff; + --_fl-selectedBgColor: #008000; + --_fl-buttonFgColor: #fff; + --_fl-buttonBgColor: #000; } .fl-theme-gw { - --fl-fgColor: #6c6c6c; - --fl-bgColor: #fff; - --fl-linkColor: #66c; - --fl-disabledColor: #933; - --fl-selectedFgColor: #fff; - --fl-selectedBgColor: #404080; - --fl-buttonFgColor: #000; - --fl-buttonBgColor: #fff; + --_fl-fgColor: #6c6c6c; + --_fl-bgColor: #fff; + --_fl-linkFgColor: #66c; + --_fl-linkBgColor: #fff; + --_fl-disabledFgColor: #933; + --_fl-disabledBgColor: #fff; + --_fl-selectedFgColor: #fff; + --_fl-selectedBgColor: #404080; + --_fl-buttonFgColor: #000; + --_fl-buttonBgColor: #fff; } .fl-theme-bbr { - --fl-fgColor: #000; - --fl-bgColor: #b96; - --fl-linkColor: #009; - --fl-disabledColor: #600000; - --fl-selectedFgColor: #fff; - --fl-selectedBgColor: #000070; - --fl-buttonFgColor: #000; - --fl-buttonBgColor: #ffd18a; + --_fl-fgColor: #000; + --_fl-bgColor: #b96; + --_fl-linkFgColor: #009; + --_fl-linkBgColor: #b96; + --_fl-disabledFgColor: #600000; + --_fl-disabledBgColor: #ffd18a; + --_fl-selectedFgColor: #fff; + --_fl-selectedBgColor: #000070; + --_fl-buttonFgColor: #000; + --_fl-buttonBgColor: #ffd18a; +} + +[class*="fl-theme"]:not(.fl-theme-prefsEditor-default) { + --fl-fgColor: var(--_fl-fgColor); + --fl-bgColor: var(--_fl-bgColor); + --fl-linkColor: var(--_fl-linkFgColor); // deprecated use --fl-linkFgColor instead + --fl-linkFgColor: var(--_fl-linkFgColor); + --fl-linkBgColor: var(--_fl-linkBgColor); + --fl-disabledColor: var(--_fl-disabledFgColor); // deprecated use --fl-disabledFgColor instead + --fl-disabledFgColor: var(--_fl-disabledFgColor); + --fl-disabledBgColor: var(--_fl-disabledBgColor); + --fl-selectedFgColor: var(--_fl-selectedFgColor); + --fl-selectedBgColor: var(--_fl-selectedBgColor); + --fl-buttonFgColor: var(--_fl-buttonFgColor); + --fl-buttonBgColor: var(--_fl-buttonBgColor); + + &.fl-inverted-color, + .fl-inverted-color, + .fl-preview-theme &.fl-inverted-color { + --fl-fgColor: var(--_fl-bgColor); + --fl-bgColor: var(--_fl-fgColor); + --fl-linkColor: var(--_fl-linkBgColor); // deprecated use --fl-linkFgColor instead + --fl-linkFgColor: var(--_fl-linkBgColor); + --fl-linkBgColor: var(--_fl-linkFgColor); + --fl-disabledColor: var(--_fl-disabledBgColor); // deprecated use --fl-disabledFgColor instead + --fl-disabledFgColor: var(--_fl-disabledBgColor); + --fl-disabledBgColor: var(--_fl-disabledFgColor); + --fl-selectedFgColor: var(--_fl-selectedBgColor); + --fl-selectedBgColor: var(--_fl-selectedFgColor); + --fl-buttonFgColor: var(--_fl-buttonBgColor); + --fl-buttonBgColor: var(--_fl-buttonFgColor); + } } diff --git a/src/framework/preferences/css/sass/PrefsEditor.scss b/src/framework/preferences/css/sass/PrefsEditor.scss index 78138bbfa4..1e6853cfed 100644 --- a/src/framework/preferences/css/sass/PrefsEditor.scss +++ b/src/framework/preferences/css/sass/PrefsEditor.scss @@ -9,7 +9,7 @@ $icon-font: 'PrefsFramework-Icons'; .fl-prefsEditor { - background-color: var(--fl-prefsEditorBgColor, #bcb5ad); + background-color: var(--fl-bgColor, #bcb5ad); color: var(--fl-fgColor); font-family: var(--fl-font-family, "Myriad Pro", Helvetica, Arial, sans-serif); @@ -56,8 +56,8 @@ $icon-font: 'PrefsFramework-Icons'; // Drop downs select { - background-color: var(--fl-bgColor); - border: 2px solid var(--fl-selectBorderFgColor, #ebebeb); + background-color: var(--fl-bgColor, initial); + border: 2px solid var(--fl-fgColor, #ebebeb); color: var(--fl-fgColor, #000); font-family: inherit; font-size: var(--fl-enhance-font-size, 100%); diff --git a/src/framework/preferences/css/sass/README.md b/src/framework/preferences/css/sass/README.md index 7582b76d1c..67caaae7ef 100644 --- a/src/framework/preferences/css/sass/README.md +++ b/src/framework/preferences/css/sass/README.md @@ -5,6 +5,8 @@ are used to style the Preference Editors as well provide the means for applying files may be used directly within an integrators own build tools, or the pre-built CSS equivalents can be used directly on a web page. +_**Note:** The sass files are deprecated. In the future only css may be provided._ + ## How to prevent compiling utility Sass files Some Sass files may only contain mixins or functions for other Sass files to import. Those files should not be @@ -47,8 +49,12 @@ every class sets all of the properties. * `--fl-fgColor`: foreground colour, often text colour * `--fl-bgColor`: background colour -* `--fl-linkColor`: text colour for links -* `--fl-disabledColor`: text colour for disabled inputs +* `--fl-linkColor`: text colour for links (deprecated: use `--fl-linkFgColor`) +* `--fl-linkFgColor`: text colour for links +* `--fl-linkBgColor`: background colour for links +* `--fl-disabledColor`: text colour for disabled inputs (deprecated: use `--fl-disabledFgColor`) +* `--fl-disabledFgColor`: text colour for disabled inputs +* `--fl-disabledBgColor`: background colour for disabled inputs * `--fl-selectedFgColor`: colour for selected text * `--fl-selectedBgColor`: selection background colour * `--fl-buttonFgColor`: text colour for buttons diff --git a/src/framework/preferences/css/sass/SeparatedPanelPrefsEditor.scss b/src/framework/preferences/css/sass/SeparatedPanelPrefsEditor.scss index 439b2ff281..a41f8f099d 100644 --- a/src/framework/preferences/css/sass/SeparatedPanelPrefsEditor.scss +++ b/src/framework/preferences/css/sass/SeparatedPanelPrefsEditor.scss @@ -14,13 +14,16 @@ body { // Top bar and show/hide button .fl-prefsEditor-separatedPanel { - background-color: var(--fl-prefsEditorBgColor, #bcb5ad); + background-color: var(--fl-bgColor, #bcb5ad); background-image: none; - border-bottom: 1px solid var(--fl-prefsEditorBgColor, #bcb5ad); + border-bottom: 1px solid var(--fl-bgColor, #bcb5ad); display: flex; flex-direction: column; - font-size: 1rem; - line-height: 1.2; + + .flc-slidingPanel-panel { + font-size: calc(var(--fl-textSize-factor, 1) * 1rem); + line-height: calc(var(--fl-lineSpace-factor, 1) * 1.2); + } .fl-panelBar { background-color: var(--fl-bgColor, #fff); @@ -90,7 +93,7 @@ body { } .fl-prefsEditor { - color: var(--fl-prefsEditorFgColor, #5d5652); + color: var(--fl-fgColor, #5d5652); font-family: var(--fl-font-family, "Open Sans Variable", "Myriad Pro", Helvetica, Arial, sans-serif); min-width: 100%; overflow-x: scroll; @@ -104,7 +107,7 @@ body { .fl-prefsEditor-panel { background-color: var(--fl-bgColor, #fff); - border: 1px solid var(--fl-prefsEditorPanelBorderFgColor, #615e59); + border: 1px solid var(--fl-fgColor, #615e59); display: table-cell; // minus 2px because of borders min-width: calc(100vw - 2px); @@ -285,7 +288,7 @@ body { padding-top: 1em; h2 { - border-bottom: solid var(--fl-prefsEditorPanelBorderBottomFgColor, #ccc) 1px; + border-bottom: solid var(--fl-fgColor, #ccc) 1px; box-shadow: 0 6px 7px -6px rgba(0, 0, 0, 0.3); font-size: 1.2em; height: 3em; diff --git a/tests/manual-tests/framework/preferences/baseStyles/css/styles.css b/tests/manual-tests/framework/preferences/baseStyles/css/styles.css new file mode 100644 index 0000000000..dcf0870d28 --- /dev/null +++ b/tests/manual-tests/framework/preferences/baseStyles/css/styles.css @@ -0,0 +1,24 @@ +body { + background-color: var(--fl-bgColor, #f3f6f7); + color: var(--fl-fgColor, #131c2a); + font-family: var(--fl-font-family); + line-height: var(--fl-lineSpace); +} + +aside, +main { + font-size: var(--fl-textSize); +} + +a { + background-color: var(--fl-linkBgColor); + color: var(--fl-linkFgColor, #166088); + font-size: calc(var(--fl-enhance-font-size-factor, 1) * 1rem); + font-weight: var(--fl-enhance-font-weight); + text-decoration: var(--fl-enhance-text-decoration); +} + +nav { + background-color: var(--fl-bgColor); + color: var(--fl-fgColor); +} diff --git a/tests/manual-tests/framework/preferences/baseStyles/index.html b/tests/manual-tests/framework/preferences/baseStyles/index.html new file mode 100644 index 0000000000..9a3a258789 --- /dev/null +++ b/tests/manual-tests/framework/preferences/baseStyles/index.html @@ -0,0 +1,156 @@ + + + + + + + + + + + + + + + + + + + + + Preferences Editor - Custom Properties (Base styles) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + +
+ + +
+ + +
+ + + + +
+
+ + + + +
+ + +
+

UIO using only CSS custom properties (Base styles)

+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt dignissim nisi vel dapibus. Nam massa dolor, + efficitur in nisl ut, pharetra sagittis lacus. Mauris lorem felis, consequat vel vehicula non, accumsan non tellus. + Phasellus sed elit eget nibh hendrerit vulputate. Nulla faucibus eros sed vestibulum efficitur. Nunc et interdum ligula, + eu blandit tellus. Integer diam risus, lobortis accumsan erat id, euismod iaculis nisi. In sed viverra diam. Mauris + faucibus odio a elementum rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque placerat mollis + varius. Integer mollis rutrum magna, eget elementum odio. Cras pharetra consectetur libero quis suscipit. + + Generated with Lorem Ipsum +

+ +
+ + + + + diff --git a/tests/manual-tests/shared/css/manualTests.css b/tests/manual-tests/shared/css/manualTests.css index d9500505ea..c59543ff4e 100644 --- a/tests/manual-tests/shared/css/manualTests.css +++ b/tests/manual-tests/shared/css/manualTests.css @@ -1,6 +1,7 @@ .instructions-container { - background: #fefabc; - box-shadow: 1px 1px 5px 1px #707070; + background: var(--fl-bgColor, #fefabc); + box-shadow: 1px 1px 5px 1px var(--fl-fgColor, #707070); + color: var(--fl-fgColor, #000); margin: 1rem auto; max-width: 50rem; }