Releases: AWikia/CentralProcessingEnd_Language
Releases · AWikia/CentralProcessingEnd_Language
Version 25T1
55th Release of CPE Language
Highlights
- Hand cursor now shows up on dropdown links, buttons and floating buttons only if the link actually points to something (aka the
hrefattribute is used) otherwise the default cursor is used. If any of the aforementioned element opens a dropdown upon clicking on it, the context menu cursor is instead used. - You can make a dropdown open by hovering on its toggle by adding the
opens-on-hoverclass tocpe-dropdown - Improved accessibility for keyboard users in much of the CPE Language and Evelution elements by providing distinct focus state styling from the base ones (Which in turn the focus state styling is the same as the active state styling). In the default styling, a border that matches the foreground color of the container (Either black or white outside of High Contrast Mode) is used and those styles apply when
:focus-visiblematches - Introduced the ability to set Hyperlink color dynamically, previously on OS level only. When
--hyperlink-background-coloris set toauto, it will be set to a color that exists in the image but inverted to ensure that light backgrounds will produce light themes. If the theme lacks a background image, then the color will be the same as the Desktop Color albeit inverted for the same reason. In cases where color cannot be found, the fallback#3366ccones is used. This takes advantage of another color.js library and async functions. Do note that image filters won't affect the final color meaning setting to the theme an image, adding anopacity(0)filter to the image and setting all color variables to auto will create a dynamic theme with a preselected color from the background image that would normally be seen that has no image- With this, all color variables default to
autoand can become dynamic.
- With this, all color variables default to
- Added a new monospaced font, Patty Console and is available for use in themes, Goes best with the Level font being set as sans-serif font
- Fixed up emoji (That have defined variation sequences and default to color presentation) in monospaced contexts and high contrast being displayed in color (In System's native font) instead in the expected BW style (Noto Emoji)
- This fix is for Chrome 131.0.0 onward, and will apply browsers that support
font-variant-emoji - Removed all RGB theming variables and replaced them with the Relative color syntax. This means more efficiency in some cases
- Moved certain hover theming variables from JS to CSS to improve performance in several cases
- Some JS is used to construct the new
*-background-color-hover-ratiovariables that will be used to construct the hover variables (Which are now done with Relative Color) - Removed the
*-foreground-color-invertedvariables and replaced their uses with the*-foreground-colorones
- Some JS is used to construct the new
- The base foreground and text background colors in their hover form are now constructed with Relative Colors instead of being set in a hardcoded absolute color
- Made created banner notifications fade in as in MediaWiki
- Tweaks to transition timings in some elements
- Introduced
--contrast-box-shadowproperty that sets box shadow to an element in High Contrast mode - Removed the ability for themes to change
--system-acryllic-opacity(Now spelled as--system-acrylic-opacity)property in favor of calculating it automatically like how the tabs opacity is done (And it depends on it too)- In addition, BG Opacity on elements that can become accented now depends whether Luna Lavccent is active or not
- Optimized several theming code by moving certain theming variables from JS to CSS
- Merged
*-alternative-foreground-colorvariables with the existing*-text-colorvariables (Or with similar ones)- As a result, the preset text color variables have been dropped
- Moved many foreground color definitions from JS to CSS (Including all foreground color variables belonging to text color variables)
- Made APCA mandatory and enabled by default
- Removed the Modern Color Filters implementation and replaced it with an updated version of the legacy ones. In addition, it now works on Disabled Color Management as well
- Also, the color style filters now apply in the resulted filter last, not after the inverted filter. This is done to ensure that when for instance Tritanopia is used, the colors the user will see will always be colors that be seen in Tritanopia
- Unused code was removed as well
Version 24T3
54th Release of CPE Language
Highlights
- Dropped Support for PaleMoon and removed the required CSS fallbacks for that browser as well
- Introduced CPE Language 6.0.0 with the following changes:
- Better Mouse and Touch support
- Slightly different semantics
- Switched all uses of the legacy color syntax to the modern ones (Which the unsupported PaleMoon can understand). The old syntax can no longer be used with RGB variables any longer as they're now space-separated values
- Buttons, Inputs and Dropdowns and are now more compact for mouse users.
- Added support for using APCA guidelines for color contrast, disabled by default
- As a result, some dynamic dark themes have been edited to have lighter hyperlink colors, only to be still dark.
- Should you encounter a bug, report it.
- With APCA, you can see lighter generic colors in Light Mode compared with WCAG. Color contrasts of 3.0 and 4.5 in the latter guidelines correspond to 45 and 60 in the former ones.
- Changed how contrast levels behave, and now plays nicely with APCA contrast rules
- Made autocolorization of Active Text and Active Caption colors contain a 30deg hue shift, to match Material Design 3 even more
- Bundled almost all fonts that weren't bundled with CPE Language but were with Evelution
- Brileback Xtreme, Evelution Terminal, Evelution Sans, Level and PowerPlus fonts are now bundled as well
- Margins on Floating Button group buttons have been replaced with the
gapproperty inside the Floating Button group itself. This allows developers to hide the very first button without leaving a gap to the top - Updated Chroma.js library to version 3.1.0 to enable APCA. This will be regularly updated for more APCA updates
Version 24T2
53rd Release of CPE Language
Highlights
- Temporarily disabled the new
scrollbar-colorandscrollbar-widthproperties in Chromium-based browsers as the styling of hovered elements in scrollbar isn't distinctive from the style of non-hovered elements in scrollbar compared to the scrollbar-styling in Firefox and the CPE-styled scrollbars in Chromium and Webkit-based browsers - Updated Graph Colors once again and added hover versions of them
- Added the ability to make dropdowns being landscape only in Landscape Mode (While keeping them portrait in Portrait Mode)
- In Evelution Skin, those are used only on Global Navigation
- Added an orange graph color used for NPU and updated the graph variable names
- Many bug fixes
Version 24T1
52nd Release of CPE Language
Highlights
- Tweaked Automatic Canvas Color Calculation
- Rearranged several code in
CompileThemingEngine()function - Made Dynamic Color more integrated with color filters
- Increased opacity of disabled elements to 75%
- Bug fixes
Version 23H3
51st Release of CPE Language
Highlights
- Moved Settings fieldset styles to
CPE.cssand adjusted their styling:- Reduced top and bottom margins
- Made shadow less notable and border radius match wiki's theme, akin to Cards in Q.Qore Updater
- In 3D visual mode, they're presented with 3D motif and not 2D
- Removed code related to Low-End Skins and Interpreters as it goes unused going forward
- Fixed some issues with certain configurations of custom fonts
- Added the ability to horizontally and vertically stretch icons, using the
--icon-stretch-xand--icon-stretch-yvariables oncpe-iconelements - Selected dropdown items that open a nested dropdown now use filled icons
- Removed OOUI Code from
CPE.css - Added more
.wikitablestyles and added.fancytabletable styling with special stylin - Changed how Select Inputs are handled with JS
AliasFandomComponents()function now properly handles WDS dropdowns opening from the right (aka Landscape dropdowns)- Renamed
cpe-dropdown-level-2classes tocpe-dropdown-level-nested. You don't have to do anything in your HTML content as elements with the former classes will be automatically changed to the latter ones (i.e.cpe-dropdown-level-2__contenttocpe-dropdown-level-nested__content) - Reinserted support for the
theme-colormeta tag after being absent since the 41st release of CPE Language - Added Screensaver Highlight color for use in containers with
#0c0c0cbackground color - Unified Purple Graph color hue between Light and Dark Themes
- Default fallback font switched to sans-serif
- In lightweight mode, dreamy Evelution users now have the system font stack enforced in all browsers, instead of fallbacking to specific fonts
- Renamed
fieldsettocpe-settings-fieldsetto emphasize that these are used in Settings content only. Also, those can be optionally collapsed as well - Renamed some functions and added RGB versions of the graph colors.
- Added Noto Sans Symbols 2 to Emoji font stack as the new Symbol font family
- Switched the default Color Scheme to
autoto encourage Light/Dark support without any user modifications to the default CPE Language settings though existing browser configuration will not be affected so you will keep the Color Scheme setting oflightif you had it before - Bug fixes
Version 23H2
50th Release of CPE Language
Highlights
- Adjusted styles of Progress Bars and Range Inputs to match secondary buttons and inputs
- When Disabled Color Management is enabled, rounded corners are now disabled when they're forcibly disabled due to low-end device
- Made Dropdown Header color slightly translucent when transparency effects are enabled
- Made CPE dropdowns for non-touch devices compact.
- Input boxes can be mixed with buttons in button groups.
- In addition, button groups no longer have special behavior with tertiary buttons
- Input boxes in dropdowns now use secondary canvas text color as text color in order to avoid illegible text in cases where primary and secondary canvas color differ drastically and the primary canvas text color is not legible against the secondary canvas color
- In Forced Colors Mode, default visual mode in the configuration now Standard when no configuration for CPE Language is present in Local Storage, though this makes no difference as in Forced Colors Mode you are stuck with the High Contrast Visual Mode
- You can no longer see the
visualmode--class in the<html>container anymore - Buttons and Input boxes no longer use a Rounded font stack as some of the rounded fonts contain special effects like the diverge Rubik font selection such as Rubik Maze
- Changed default hyperlink color in CPE Language core from Red to Blue
- Dropped support for Chrome 84-99, Firefox 84-99, Edge 84-99, Safari 14 and Pale Moon 29. Support for those browsers was deprecated in Evelution 135.0.0
- Updated Material Symbols to latest
- Renamed
--transitionerto--transition-timing-functionand replaced numerous usages of fixed values of transition duration with the--transition-durationand--outline-transition-durationvariables. As a result, transition duration in most elements has been unified - Switched uses of
lchcolor system tooklchcolor system which makes slight changes on how color invertion is handled ColorInvert()function now handles color invertion with theColorStyleAdjust()function instead of using separate code to reduce code duplication- Renamed all
windowvalues inserted by the theming engine to replace theMW18prefix with theThemingEngine_ones - Horizontally-oriented dropdowns are now properly-aligned when the
is-left-aligned(For Top Alignment) or theis-right-aligned(For Bottom Alignment) classes are absent (For Center Alignment). - Added the updated graph colors to be used in Task Manager. Those change to Canvas Text Color in high contrast mode
- Revised Generic Colors in order to provide better contrast in Dark Mode
Version 23H1
49th Release of CPE Language
Highlights
- Added a 3D Visual Mode
- This Visual Mode inserts visual cues from the Retro Visual Style Evelution once had into the other Visual Styles but in Neumorphism form.
- This visual mode is not enabled by default
- Nested Dropdowns in the browser version will receive 3D effects as well
- Updated Material Symbols fonts to latest revision
- Luna Levit's blur radius is now
9vhinstead of80pxin order to be consistent across screen sizes - Dropdown Links that open a nested dropdown no longer have rounded corners on all sides
- Tweaked when a fixed positioned dropdown (Used on local nav wiki-tools overflow menu) becomes more compact
- Added the ability to force plain
cpe-buttonbe frameless by default. Just put theforce-textclass in the element that houses the CPE buttons. You can add to an inner button theis-primaryclass to make buttons inside that containers primary such as:
<div class="cpe-button-group force-text">
<button class="cpe-button">Test</button>
<button class="cpe-button is-primary">Test 2</button>
<button class="cpe-button">Test 3</button>
</div>- When links have poor contrast with the text color, an underline text decoration will be added, even if they're not hovered into.
- Disabled elements are now done with reduced opacity, instead with a grayscale filter
- Added one more Fandom theming variable that was missing and the page text opacities are no longer fixed to a specific value
- Renamed several variables in theming JS in the
CompileThemingEngine()function in order to make them nicer - Moved Theme Downloading Code to a not-loaded Debugging JS
- Introduced CPE Language 5.0.0 with the following changes:
- Links in CPE Dropdown Menus that are not inside an icon grid are now a bit compact
- Borders in Buttons and Inputs are now a bit compact
- Adjusted Colors on tabs and inputs to match Windows 11
- Ability for themes to use a different icon style
- Gave a BG Color to Secondary Buttons. Minor color contrast changes have occured as a result of this but should not be so major. This change is absent from High Contrast Mode
- Added translucent bg to checkbox elements
- Rewrote Visual Color Compiling a bit to be faster and better
- Overhauled DCM Support to be simpler and be distinguishable from regular color schemes. One of the changes are the removal of the Theme Slots from DCM (User couldn't select one anyway but now it no longer depends on them)
- You can force icons be filled at all times
Version 22H3
48th Release of CPE Language
Highlights
- Renamed various function names inside theming JS
- When theme cannot be applied, an error will be logged in the console for debugging
- Added contrast checks to Captions
- Text-based Progress color now use the same color as the Background-based ones (Intended for 95.0.0)
- Automatic Inactive Titlebar color is now better (Uses 75% canvas color and 25% active caption color instead of 100% Inactive Text)
- Styling fixes for the Classic Visual Style
- Floating boxes behave like buttons in classes (Except for Secondary variant) and base styling and the default styling is the Hyperlink ones
- Added Alternate Accented, Warning Color, Progress Color and Message Color stylings.
- Added more contrast levels
- Secondary Canvas Color can no longer be a color that it is legible with the canvas color when used against it as a form control (Or Large Text) color, mimicking the Inactive Caption Color
- Automatic Color adjustment now happens by 1% lightness adjustment instead of 2% in order to make the Indeterminate Color Contrast Levels more notable and does not hurt performance too much on newer hardware
- This does not apply to Generic Colors as those are fixed to specific lightness values that are multiple of 2% and do not match between various contrast modes or wiki themes
- Added the ability to automate DCM Types based on the current Active System Theme. Has no effect on Forced Colors Mode
- Renamed
ForcedColors()toDisabledColorManagement(). The former function name has been repurposed for different check - You can set Desktop Color to autocolorization which will lock it to Canvas Color
- You can set Canvas Color to autocolorization which will make a dynamic theme based on the color of the links
- If Hyperlink Color is a light color, it will create a dark Canvas Color
- If Hyperlink Color is a dark color, it will create a light Canvas Color
- This makes possible for a theme to specify only one color value, with the rest being set to
auto. The target color is the Hyperlink Color. Does not work the same as Android 12+ but similarly. - Evelution Color Schemes now rely on this addition
- Renamed
GetCanvasShort()toGetCanvas()and the formerGetCanvas()has been removed as it was used only once in the theming JS. This does not affect DisabledColorManagement - Overhauled Autocolorization of certain theming variables
- Highlight Color now autopicks a darker (lighter for Dark themes) variant of link color
- Active Caption Color now autopicks a lighter (darker for Dark themes) variant of link color
- All text-related theming variables (Except Secondary Canvas Text which locks itself to Canvas Text) now autopick an inverted version of the non-text theming variable
- Visited Hyperlink and Active Text Colors still autopick the chosen Hyperlink Color as those are mostly intended to be left unaltered from the regular hyperlink Color, per Windows High Contrast Mode theming
- This should make a dynamic theme more unique
- Desktop Text color now adjusts for contrast at ALL cases
- Inactive Luna State with Luna Lavccent now behaves like the active state with different colors (As Inactive Caption color will have much lower contrast than the active ones)
- Does not affect the unaccented luna state as both the active and inactive state are made using the Secondary Canvas Color
- Fixed up Automated Highlight Color being too dark. This means that while on some themes that color will be less distinctive than before, it will have lower contrast level as well, not to mention that Highlight Color has less stricter contrast level requirements than Hyperlink Color.
- Active Text color is now distinct from the regular hyperlink color when it is set to
auto- It is calculated in the same manner Highlight Color used to be
- As Inactive Caption is meant to be less notable, inactive caption text has less stricter contrast requirements than the Active Caption Text
- When Highlight Text, Active Caption Text, Inactive Caption and Inactive Caption Text are set to autocolorization, they won't be adjusted, like the autocolorized Inactive Text due to inheriting it from parent colors. This affected the Dark Color Mode as well as the Reversi, Single Reversi, Hot Temperature and Cold Temperature Color Styles
- Inactive Luna State theming now matches the ones found in High Contrast Mode when Luna Lavccent is disabled
- When using the
standardvisual mode, you will notice the transparency effects disabled, making the distinguishing still possible
- When using the
- Fixed up Desktop color being used in the
<body>element, when theming engine hasn't been loaded. - Re-added
background-hover-rgbtheming variables for all theming variables and some are used in the Simple Visual Style theming - Background Color of Links in Simple Visual Style (i.e. in Dropdowns) now respect acrylic opacity to make things better
- Renamed
dropdown-opacitytoacrylic-opacity - Renamed
acryllic(Except insystem-acryllic-opacity) toacrylic - Default
mica-opacityfor disabled transparency effects has been changed from 2 to 1 - Theming JS now loads before Base JS, making page load times a bit smaller due to the overhead being added by the Theming Engine
- As a result, code for select inputs and range inputs has been copied to the Theming JS as well
- Moved all code that does not compiles the Theming Engine after the function that forces the theming engine to be recompiled (In this case,
VisualColor()function)- As a result, the code the compiles the Visual Colors and Styles has been split into two. The code that compiles Visual Styles is called after the theming engine has been compiled, while the ones that compile Visual Colors before.
- Removed fallback theming variables from the engine and restricted the transition disable hack to Evelution Skin for now
- Theming-loaded class is now handled in Base JS instead of Theming JS, to avoid weird effects with modules
- CPE Language now runs under Pale Moon browser, instead of dying. Version 29 or newer is required and you'll experience the following limitations:
- You won't have transparency effects and you will be stuck with square corners
- You won't have focused state of icons
- You won't have support for Color Modes in DCM (The Correspnding Menu to change them during DCM is also hidden)
- You will have degraded DCM experience as most of the cutting-edge System Colors are not supported. You'll have
Window,WindowText,ButtonFace,ButtonText,GrayText,HighlightandHighlightTextas the only system colors to see in DCM. The rest are aliases to those. - Similar to old supported Chrome and Firefox releases, automatic contrast level is the same as low (On Windows, it is at all times when a High Contrast theme is not set anyways)
- You won't have CPE Language themed checkboxes and radios because in that browser they're treated like in an older version of Firefox
- Acrylic and Mica blurs are now consistent across themes (Before, setting a higher elements opacity would make the blurs smaller and vice versa)
- You can set the unhovered floating button shadow opacity to a different value than the 1/2 of the hovered ones
- You can set the border opacity in hovered taskbar links to a different value than the 1/2 of the background color opacity of the hovered taskbar links
- Simplified the code that checks the browser version
- As a result, a hack that was present was removed
- Aliased AccentColor system colors to Highlight ones under Forced Colors Mode
- Luna Levit (If shown by editing the HTML classes using F12 tools) now displays properly under Pale Moon
- This adds a
system-mica-opacityvariable which is the opposite value ofsystem-acryllic-opacity(Unless the latter is set to0.5). If the latter is set to0.6, the former will be set to0.4
- This adds a
- Made Roboto Flex the default primary font
- Unlike other new fonts debuted in this release, it is also bundled with CPE Language, along with several Web Qore fonts
- Unaccented Luna Theming now supports the
luna-foreground-color-invertedvariable- Prior to this, it was supported as an alias of
luna-foreground-color
- Prior to this, it was supported as an alias of
- Merged the three
ColorAdjust()functions into one ColorAdjust()now preserves the color's original hue. Before, a small change could be noted.- Split Color Styles into two:
- Color Hue which allows you to set the hue shift amount of all colors to a number between 0 and 360 that it is divisible with 5
- When no special effect has been added, it shifts both LCH and HSL Hue
- When Colorstyle effect has been applied, it shifts only HSL Hue
- When another effect has been applied, it adjusts the HSL Hue, then applies the associated effects (Either Grayscale, or one of the Temperature Scales (Hot or Cold))
- Several Recommended values have been hinted. Those correspond to Red, Yellow, Green, Cyan, Blue and Pink colors for easy access
- Color Styles which apply special effects. Certain may force the theme's color scheme to be according on the active device theme (i.e. If device theme set to
auto-dark, color style is set tosingleand System's color scheme is Light, then theme's color scheme will be Dark even if the theme's color scheme is Light) compared to allow both Light and Dark themes at once regardless of device theme (This is inversed if Device Theme is computed toDark)- Renamed
Single ColortoColorscale
- Renamed
- As a result, removed the
Reversi,Single Reversiand all but oneSingle ColorColor Styles. In addition, reduced the amount of Special Color Effects processed by the Color Style Adjustment from 9 to 4 - Added the ability to change the color saturation independently from the color styles, allowing more control over colo...
- Color Hue which allows you to set the hue shift amount of all colors to a number between 0 and 360 that it is divisible with 5
Version 22H2
47th Release of CPE Language
Highlights
- Added the ability to force plain
cpe-buttonbe secondary or tertiary by default. Just put theforce-secondaryandforce-tertiaryclasses respectively in the element that houses the CPE buttons. You can add to an inner button theis-primaryclass to make buttons inside that containers primary such as:
<div class="cpe-button-group force-secondary">
<button class="cpe-button">Test</button>
<button class="cpe-button is-primary">Test 2</button>
<button class="cpe-button">Test 3</button>
</div>- Dropped all Tunic Skin Code
- Reverted the behavior of Inactive Titlebar color back to its original ones
- Changes some checkbox CSS to avoid conflict with some extensions that rely on checkboxes and radios and hide them
- Centered Dropdown opening to the bottom or top now display properly under RTL languages
- Added more control over Floating buttons using CSS Variables
- They now have a visual border around it
- Tweaked its appearance on various Visual Styles (Only a few have notable ones)
- Renamed one variable
- Removed the
luna-contrast-selectedvariables as those were barely used and replaced them with the highlight variables in places where used - Tweaks to theming:
- Canvas Text background now darkens on hover if the color itself is light instead of the canvas color is dark
- Different text color variables (Desktop Text and Canvas Text Secondary) now darken on hover if the canvas color is light
- Checkboxes and Radio boxes now use icon fonts instead of SVG Masks to render their icons, reducing code.
- The corresponding variables were also removed
- Gradient Variables now calculate properly in all case and account for the Double Foreground Color Support in Servelution clients
- Remodeled the
ColorTest()function once again and improved some theming - Simplified Dropdown Code Styling using new variables
- Color adjustment should no longer be done on secondary text color when both primary and secondary text colors are set to autocolorization
- Minor edits to buttons
- Lowered Border Radius on CPE dropdown menus and Table of Contents (Including links)
- Overhauled the Standard Visual Style once again, featuring theme-aware selected items instead of accent-aware ones
- Dropdowns that open to the left no longer have some notable glitches (Dropdown arrow incorrectly positioned, Dropdown Content Container not filling the entire viewport of the contents inside it)
- Tweaked theming in active links in Top Actions, Minibar, Taskbar and Titlebars to avoid its similarity with the Simple Visual Styles
- Cleaned up some JS and renamed some functions
- Tweaked the
isLightColor()function - Renames all three backdrop filter variables and tweaked the Acryllic (Luna Lovit) filter
- Fixed gradient values of Desktop Text color
- Introduced CPE Language 3.0.0 with the following changes:
- Restyled Floating buttons, with some styling foreshadowed from later CPE Language 2.0.0 builds
- New Luna Levit that works in all browsers
- As a result, you can no longer set a desktop background mode for your theme
- Added the ability to shift the Hue of Generic colors by -10 to 10 degrees
- All current Fandom theming variables should now be usable
- Combined all theming variables done via JS into a single CSS rule
- Fixed up Luna theming and added two new mica variables
- Fixed loading times being high when switching between Light and Dark themes
- Split Visual Styles into two:
- Visual Modes which changes the behavior of Visual Styles (Choice between Standard, Lite and Contrast but user cannot change this, it is set to Contrast if in Forced Colors Mode, Standard otherwise)
- Visual Styles which changes the way Evelution is displayed (Not used here)
- Added all base Contrast Styles that affect CPE Components to
CPE.css, which was previously part ofVisual_Styles.cssof Evelution SKin.
- Replaced the existing Material Icons iconography with the new Material Symbols iconography which brings much better icon design and display
- Switched default icon styling to Outlined and made filled styling be used only on selected and focused state of an element (Akin to some Website implementations)
- Icons will now inherit the font weight from the parent, instead of being fixed as the recent iconography update can adapt the many font weights
- Added the ability to apply a blend mode to the desktop background image which will be mixed with the current Desktop Backgrouund Mode
- This is not used by default
- Desktop Text Background Color is now also adjusted for contrast when no background image is set to the desktop, in addition of when using a Temperature Color Style
- When changing a Select input value via the UI and then with JS, when opening the dropdown of the said element, the value changed via JS will be preserved
- Unfocused Luna Theming without Luna Lavccent is now similar with the focused ones (To match Luna Levit theming)
- Hardened out Forced Colors Mode more
- CPE Elements are always presented in their High Contrast versions
- Banner Notifications in Contrast Mode now display better on the rest of Visual Styles
- Improved Primary and Secondary button styling while hovering on them in High Contrast Visual Mode
- Added the ability to change the text colors of Highlight, Active Title and Inacitve Title colors
- Highlight Text is used mostly on High Contrast mode, the rest are used in conjunction with Luna Theming
- Changed Selection Styling in non-contrast mode to behave like the ones from Contrast Mode
- Added Accent color back to progress bars
- Improvements to Progress bars and Primary Button theming in High Contrast Mode
- Generic Color Hue Shift now accepts values as low as -15 and as high as 15 instead of -10 and 10 respectively
- Fixed Active and Inactive Caption Text colors being locked to autocolor when Highlight Text Color was set to automatic
- Fixed up Mica Background Color when forcing inactive state of Luna Theming
- Replaced the Teiledin Color Contrast System with the RioBrioDrio (RBD) Contrast System. As a result, some changes have been done:
- Text now requires min contrast of 4.5 instead of 3.0
- Form Controls (Highlight) and Disabled Text now requires min contrast of 3.0 instead of 1.25
- Text-based Pause and Warning colors now use the same colors as the Background-based ones
- Text-based progress and message color now map to Highlight and Inactive Text respectively under High Contrast instead of Hyperlink and Canvas Text
- Improved Checkbox in many ways:
- Now use opaque Highlight Style instead of translucent Hyperlink Style
- Now render properly under High Contrast
- Added the ability to set the Saturation of Generic colors to a value that it is multiple of five from 25% to 100%
- Simplified
BestAlertColor()code and message color can no longer be set to a colorful hue, only to grayscale - Added the ability to use a different color for Visited links other than the base hyperlink ones
- Only the Standard Color Scheme has distinct Visited Link color from the Non-Visited ones
- This only applies to plain links, not buttons
- Implemented the final base theming variable, the Active Text which is currently used in Active state of all plainlinks and in Secondary Alternate Buttons
- Restyles the Base boxes with better styling:
- Semi-translucent instead of opaque background color
- Respects theme's border radius
- Has double border width
- Has exclusive High Contrast Styling
- Input boxes behave like buttons in classes and base styling and the default styling is the Highlight ones (Hyperlink is still used on OOUI Buttoned Numbered Inputs)
- Caret Color is now based on the Active Text color for legibility
- Checkboxes now respect theme's border radius (Albeit set to 60% of that value)
- Patches up a critical icon issue when a wiki uses the universal selector to apply font-family. That caused some icons, like the accent toggle ones not to show
- Redesigned CPE Toggle Inputs and those are now core components instead of being provided at Fandom Design System Compatibility level with similar styling.
- Stripped down all foreground variables from High Contrast Mode, and are mapped to:
- Regular ones to Text variants
- Text variants to Regular ones
- Everything without a text Variant to Canvas color
- Various Bug fixes
- Doubled the amount of DCM Modes:
- Added Lite, General, High Contrast and Retro DCM Modes
- DCM Modes order is this:
- Standard
- Lite
- General
- Basic
- Simple
- Classic
- High Contrast
- Retro
- More information can be found here
- All DCM Modes now use distinct desktop text color instead of autocolored ones
- Browsers without
mix-blend-modeofcolor(No supported has this trait currently) will not get Luna Levit transparency effects - Removed the five used Deprecated System Colors (
background,activecaption,captiontext,inactivecaption,inactivecaptiontext) and made the Standard and Simple DCM Modes use non-deprecated system colors in place of these- Added all non-deprecated system colors for use in the CPE Language Forced Colors engine. All of them except
markandmarktextare used - Certain special
moz-prefixedsystem colors (Which are two) are also no longer used (And thus have been removed from the engine)
- Added all non-deprecated system colors for use in the CPE Language Forced Colors engine. All of them except
- Selected dropdown links and active links inside link groups now turn the text colored according to the hyperlink color instead of keeping it black or white depending on the theme
- Changes to theming:
- In Standard and Lite, background i...
Build 46 (Version 22H1)
46th Release of CPE Language
Highlights
- Did tons of code cleanup and improvements over the Theming JS, resulting in minor performance improvements
- Merged some functions with others, reduced code duplication and added some new
window.MW18prefixed settings to simplify things up.
- Merged some functions with others, reduced code duplication and added some new
- Tweaks to Forced Colors mode and automatic title bar colors
- Hardcoded the alternative foreground colors and tweaked the light ones (The ones used for light themes)
- Added new attributes (
force-activeandforce-inactive) which allows a specific element to have a specific Luna State (Active or Inactive, used on Window Previews) - Fixed some bugs related to Color Modes and manual color set of desktop text color. That would happen on higher contrast presets
- Classicfied the Acryllic transparency on Luna theming and simplified it a lot:
- Added the ability to change acryllic's opacity (Between 40 to 80 percent, default is 60) for each theme. On lesser opacity, you'll have more blurs while on more opacity less.
- Fixed up performance when using dark themes
- Made floating buttons have their active state at all time it should have, not just when a dropdown is opened under it
- Replaced the following attributes with the following classes inside the
HTMLelement:accentedattribute withhas-accentsclassthemeattribute withtheme-Xclass where X is a letter from A to Hvisualcolorsatribute withvisualcolors-Xclass where X is the name of visual color packvisualthemeattribute withvisualstyle-Xclass where X is the name of visual style- Syntax changes also happened. For instance:
[accented="true"]becomes.has-accents[accented="false"][theme="G"]becomes:not(.has-accents).theme-G[visualtheme="classic"][visualcolors="standard"]becomes.visualstyle-classic.visualcolors-standard
- Changed the
has-iconattribute with thehas-iconclass to improve slightly performance - Invertion filter now also applies to Logos and images inside document areas (such as the Article Area in Evelution)
- New links that are buttons are now rendered with the Alert color instead of the user's selected color
- Introduced CPE Language 2.0.0 with the following changes:
- Restyled Inputs, Buttons and Checkboxes
- Some inner shadow changes on Inputs and Floating buttons to be fully sharp
- Ability to set a custom primary font for each theme as part of Servelution 3.0.0
- Tweaked generic animations once again
- Increased button paddings to be more better
- Fixed up button groups with tertiary buttons
- Changed Syntax for Icons inside dropdown items to be much better
- Redesigned Range Inputs and Stylized Progress bars
- Removed the 1920px screen size limit
- Material Icons no longer cause site content to overflow
- Added multiline support in CPE tooltips
- Moved Community background color stylings from a dedicated container to
<body>element as max app width has been abandoned - Introduced a new background mode:
- It is entitled Half
- It spans the backgrounud to the upper half of the screen with the bottom half being faded to the background color of the desktop, similar to the standard ones
- Highlight background color can be set to
auto. This will fix that color to the chosen hyperlink background color - Replaced the background image opacity slider
--desktop-background-image-opacitywith a filter-based engine which supports translucency--desktop-background-image-filter:- Merged the Two Techno Theme Images and the eight Cubes Images into one and applied their manipulations using the newly added property instead of using different images which can be a pain on slower connections
- Existing theme definitions (Usually found at Evelution.css) can add
--desktop-background-image-filter:;to remove the default image filter from stock themes. - This means that to apply 50% transparency to desktop image without any other filters, you need to use
--desktop-background-image-filter:opacity(50%)instead of--desktop-background-image-opacity:50%
- Renamed all
body-*classes todesktop-* - Users can disable color management when no high contrast theme is being used (Not used anywhere by default)
- Overhauled theming engine
.theme-Xand.visualcolors-Xclasses no longer live inside the<html>element and instead live into inner elements. Theming variables are now gathered from these new inner containers, which will improve performance- Hardened ThemeToggler script to only accent slots A to H, with the rest fallbacking to slot A
- Hardened VisualColor script to only accept standard, nocolormanagement and any other installed color scheme (Such as forced in case of Evelution), with the rest fallbacking to standard
- All theming variables are now compiled with JS (With the ones that didn't previously being the same as the user-set values for that theme)
- CSS required for disabled color management mode is now added with JS instead of living into
CPE.cssfile
- When Color mode is not set to Duo Light (Or Solo Light and Solo Dark if theme is Light and Dark respectively), Desktop background image should no longer appear statically positioned
- Added Luna Levit which brings compatibility layer of Mica Material (Not used anywhere)
- Moved some classes from
<container>to<body> - Acryllic and Mica material no longer show when app is not focused
- Added Reduced Motion and Transparency styles support (Including fallback of Luna Lovit to solid color) out of the box
- Added new Generic Colors (Progress and Pause) and tweaked the hues of the three existing ones
- All generic colors generated have contrast of 3 or above (Depending on the contrast level set)
- Buttons and banners with these colors can also be made as well
- Recent Changes filters color highlighting is now properly themed
- Tweaked fadeout colors
- Progress bars, unlike range inputs now use generic colors for its filler (Progress for general, Success for completed, Pause for halted and Alert for Failed. Warning and Message colors are never used as filler colors)
- Stub links are now themed using the Progress color
- Renamed some banner notification classes (i.e.
cpe-alertbecomesis-alert) - Added new background modes (One and Three quarters)
- Existing background modes got new names but the old ones are still supported along with new synonyms
- This setting is now ignored when no background image is set to the theme
- Introduced the ability to use a custom color for dropdown menus (Both Backgrond and Text Colors)
- Some adjustments to Disabled Color Management and Forced Colors mode
- Added GPU detection support to help improve performance:
- Level 3 GPU is required for Luna Lovit and Luna Levit
- Level 2 GPU is required for the
--border-radiustheming variable
- Tweaks to Inactive Title and Generic Colors
- Changed default rounded corners value to 5px
- Icon font is now done using a variable, to reduce code
- Updated Material Icons fonts
- You can now omit the
url()notation in the--desktop-background-imagecustomization and will be automatically added by the Theming Engine compilationnonekeyword in desktop background image is now treated as no background image at all
- Redesigned Banner Notifications to look like the ones found in recent Fandom Design System updates (Fandomdesktop). Changes include:
- Limited width to 480px maximum
- They now float to the bottom left corner instead of being placed above the taskbar
- Border radius position in the icons have been swapped
- The entire container no longer has box shadow in it, the banners have it instead.
- Borders are now placed around the banners and they have a bottom margin instead of being separated by borders
- Banners now slide to the left when they disappear instead of scaling down to 0 height in addition of becoming fully transparent