[yast/yast-theme] 0b503c: Light SLE installation theme, SCSS sources, theme ...

Branch: refs/heads/master Home: https://github.com/yast/yast-theme Commit: 0b503c1b90707b421961870045eea6778d666659 https://github.com/yast/yast-theme/commit/0b503c1b90707b421961870045eea6778d... Author: Ladislav Slezák <lslezak@suse.cz> Date: 2022-03-02 (Wed, 02 Mar 2022) Changed paths: M .github/workflows/ci.yml M .gitignore M README.md M Rakefile M package/yast2-theme.changes M package/yast2-theme.spec A src/.stylelintrc.yml A src/gulpfile.js A src/package-lock.json A src/package.json A src/scss/components/buttons.scss A src/scss/components/calendar.scss A src/scss/components/combo-box.scss A src/scss/components/dialog.scss A src/scss/components/form-elements.scss A src/scss/components/header.scss A src/scss/components/index.scss A src/scss/components/menu.scss A src/scss/components/progress-bars.scss A src/scss/components/scroll-bars.scss A src/scss/components/shared.scss A src/scss/components/steps.scss A src/scss/components/tab-bar.scss A src/scss/cyan-black.scss A src/scss/highcontrast.scss A src/scss/installation-light.scss A src/scss/installation.scss A src/scss/richtext.scss A src/scss/theme-vars/button-defaults.scss A src/scss/theme-vars/cyan-black.scss A src/scss/theme-vars/highcontrast.scss A src/scss/theme-vars/icons-default.scss A src/scss/theme-vars/icons-light.scss A src/scss/theme-vars/installation-light.scss A src/scss/theme-vars/installation.scss A src/scss/theme-vars/white-black.scss A src/scss/white-black.scss M theme/SLE/wizard/cyan-black.qss M theme/SLE/wizard/cyan-black_richtext.css M theme/SLE/wizard/highcontrast.qss M theme/SLE/wizard/highcontrast_richtext.css A theme/SLE/wizard/inst_arr_down_disabled_light.svg A theme/SLE/wizard/inst_arr_down_light.svg A theme/SLE/wizard/inst_arr_left_light.svg A theme/SLE/wizard/inst_arr_right_light.svg A theme/SLE/wizard/inst_arr_up_light.svg A theme/SLE/wizard/inst_checkbox-focus-light.png A theme/SLE/wizard/inst_checkbox-off-disabled-light.png A theme/SLE/wizard/inst_checkbox-off-disabled-light.svg A theme/SLE/wizard/inst_checkbox-off-light.png A theme/SLE/wizard/inst_checkbox-off-light.svg A theme/SLE/wizard/inst_checkbox-on-light.png A theme/SLE/wizard/inst_checkbox-on-light.svg A theme/SLE/wizard/inst_radio-button-checked-disabled-light.png A theme/SLE/wizard/inst_radio-button-checked-light.png A theme/SLE/wizard/inst_radio-button-checked-light.svg A theme/SLE/wizard/inst_radio-button-focus-light.png A theme/SLE/wizard/inst_radio-button-unchecked-disabled-light.png A theme/SLE/wizard/inst_radio-button-unchecked-disabled-light.svg A theme/SLE/wizard/inst_radio-button-unchecked-light.png A theme/SLE/wizard/inst_radio-button-unchecked-light.svg A theme/SLE/wizard/installation-light.qss A theme/SLE/wizard/installation-light_richtext.css M theme/SLE/wizard/installation.qss M theme/SLE/wizard/installation_richtext.css A theme/SLE/wizard/radio-button-unchecked.png M theme/SLE/wizard/white-black.qss M theme/SLE/wizard/white-black_richtext.css Log Message: ----------- Light SLE installation theme, SCSS sources, theme fixes (#160) * Implement Sass compile task for qss files * Break installation stylesheet into partials * testing if theming really works * Revert compiled qss * reset style qss sheet * testing scss compilation again * Rename folder & clean up scss * regenerated qss file * Test variables * color hex in lowercase * Test wether variables work or not * Variable color not working with buttons * dont use variables in buttons * Buttons styles weren't working but should now * All colours in variables * Issues with vars * Test light tehme * revert to dark theme for further testing * Further light theme test * Light theming main background shade * Update dialog & work area text variables * Styling the bg light theme * Trying to style the dialog * Update label text for light theme * Form elements styling * Form elements styling * More label styling * More form element tests * Test replacing the bg color everywhere * Revert "More form element tests" This reverts commit 116a2b1ba6f7775106a4d410787c6dc321b61854. * Replace text * Changing more text * Test the dark theme * Carry on updating text vars * Update text var for shared partial * Remaining text vars update * update header colour * Update header background colour * text box bg * Update steps bg * More updates to dark green bg * Update all remaining dark green backgrounds * Update form elements dark grey * Update selected element styles * Button styles * Buttons borders & hover * Themed arrows * Radio buttons * More improvements * Radio buttons * Checkboxes & radios * Checkbox & border update * Update checkbox graphics * Update checkbox graphic * Trying to find tabs colour * This should style the tabs * Lighter colour for unselected tab * Final grey colour for unselected tabs * Implement Sass compile task for qss files * Break installation stylesheet into partials * testing if theming really works * Revert compiled qss * reset style qss sheet * testing scss compilation again * Rename folder & clean up scss * regenerated qss file * Test variables * color hex in lowercase * Test wether variables work or not * Variable color not working with buttons * dont use variables in buttons * Buttons styles weren't working but should now * All colours in variables * Issues with vars * Test light tehme * revert to dark theme for further testing * Further light theme test * Light theming main background shade * Update dialog & work area text variables * Styling the bg light theme * Trying to style the dialog * Update label text for light theme * Form elements styling * Form elements styling * More label styling * More form element tests * Test replacing the bg color everywhere * Revert "More form element tests" This reverts commit 116a2b1ba6f7775106a4d410787c6dc321b61854. * Replace text * Changing more text * Test the dark theme * Carry on updating text vars * Update text var for shared partial * Remaining text vars update * update header colour * Update header background colour * text box bg * Update steps bg * More updates to dark green bg * Update all remaining dark green backgrounds * Update form elements dark grey * Update selected element styles * Button styles * Buttons borders & hover * Themed arrows * Radio buttons * More improvements * Radio buttons * Checkboxes & radios * Checkbox & border update * Update checkbox graphics * Update checkbox graphic * Generate both dark and light themes The default dark theme is generated to "installation.qss", the alternative light theme to "installation-light.qss" * Added stylelint * Lint also the original SCSS files * Simplify tasks * test other stylesheets * Now try with another stylesheet * Revert style.qss & test another stylesheet * Revert test on white-black stylesheet * Test dark theme registered views * Revert to light theme * Test the calendar in the dark theme * Try to find what's wrong with some styles * Test the richtext sheet * Testing * Finding unstyled checkbox * Try to style checkbox in richText widget * Trying to find the checkbox text * Identifying * checkboxes still * Find the checbox style * more check * Add richtext to checkbox styles * chasing the checkbox * More tests with checkboxes * Trying the old stylesheet to find that checkbox * More tests * Add richtext stylesheet too * Revert to light theme stylsheets * Testing calendar colours * Update * Calendar styling * More styles for the calendar * Finish styles to calendar * Disabled button * Buttons & scrollbar * Update disabled checkbox * Regerate QSS files * Rakefile update * Generate also the white-black theme from SCSS * Generate cyan-black and high contrast themes * Improve hight contrast theme (to match the original) * Style the theme switcher button * Fixed style for QFileDialog and QSizeGrip (bsc#1184778) * Update RichText styles * Shared file header * Add the RichText CSS file for the installation light theme * Add richtext.scss file Which will be used for generating the _richtext.css file for each theme. * Add gulp-header development dependency Useful for adding content at the beginning of a file in the Gulp pipeline. More specifically, it will be used for adding a Sass @import statement to the richtext.scss file for importing needed theme-vars while building themes. https://www.npmjs.com/package/gulp-header * Adapt gulpfile for building themes dinamically That way, the _richtext.css file can be dinamically generated for each theme too. * Fix richtext Sass file By using $yast-text variable instead of $yast-black. * Update *richtext.css files With content generated by `npx gulp`. * Share icon definitions * Fix missusage of Sass rgba global function The alpha channel was using a percentage without the "%" symbol, which was producing the rgb color instead. See https://sass-lang.com/documentation/modules#rgb
The alpha channel can be specified as either a unitless number between 0 and 1 (inclusive), or a percentage between 0% and 100% (inclusive)
* Avoid using the built-in rgba function Because it produces a CSS rgba function not fully compatible with Qt rgba function, which expect the alpha channel in a percentaje value between 0 and 100, instead of a unitless one between 0 and 1. https://doc.qt.io/qt-5/stylesheet-reference.html * Move SCSS sources to the src/ directory So they are not installed/packaged * Better label * Improved CI * CI fix * Rename files and simplify build * Better header, fixed lint errors * Use stylelint-config-standard-scss stylelint configuration * Change the alpha to better match the old look * Fix spacing * lint only the SCSS sources * CI - run stylelint * More generic fix for the theme switcher button * More generic fix for the theme switcher button * update README * Fixed CheckBoxFrame indicator size (bsc#1184780) * Added missing inst_checkbox-off-disabled-light.png currently just a copy of inst_checkbox-off-disabled.png * Fixed scroll buttons in tab header * cleanup * update README * Small fixes * Lint fixes * Update README Co-authored-by: Jesus Herman-Marina <jherman@suse.com> Co-authored-by: David Díaz González <dgonzalez@suse.de>
participants (1)
-
Ladislav Slezák