diff --git a/i18n/en.json b/i18n/en.json index f5b19e2..6b9e301 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -23,16 +23,29 @@ "lakeus-theme-designer-test-theme": "Test theme", "lakeus-theme-designer-clear-theme": "End testing", "lakeus-theme-designer-reset-theme": "Reset", + "lakeus-theme-designer-invert-auto-calculate-selection": "Invert auto calculate selection", "lakeus-theme-designer-copied": "Theme code has been copied to your clipboard.", "lakeus-theme-designer-copy-failed": "Failed to copy the theme code to your clipboard; result is at the end of the designer.", "lakeus-theme-designer-reload": "Reload", "lakeus-theme-designer-color-picker-fallback": "Use text input for color pickers", "lakeus-theme-designer-alpha-channel": "Alpha (Opacity)", + "lakeus-theme-designer-basic": "Basic", + "lakeus-theme-designer-color-primary": "Primary color (foreground)", + "lakeus-theme-designer-color-secondary": "Secondary color (background)", "lakeus-theme-designer-global": "Global", "lakeus-theme-designer-background-color-base": "HTML background color", "lakeus-theme-designer-color-link": "Link color", "lakeus-theme-designer-color-link--visited": "Visited link color", "lakeus-theme-designer-color-link--active": "Active link color", + "lakeus-theme-designer-color-link-new": "New link color", + "lakeus-theme-designer-color-link-new--visited": "Visited new link color", + "lakeus-theme-designer-color-link-new--active": "Active new link color", + "lakeus-theme-designer-color-link-footer": "Footer link color", + "lakeus-theme-designer-color-link-footer--visited": "Visited footer link color", + "lakeus-theme-designer-color-link-footer--active": "Active footer link color", + "lakeus-theme-designer-color-link-external": "External link color", + "lakeus-theme-designer-color-link-external--visited": "Visited external link color", + "lakeus-theme-designer-color-link-external--active": "Active external link color", "lakeus-theme-designer-elevation": "Elevation", "lakeus-theme-designer-font-family": "Default font family", "lakeus-theme-designer-font-family-serif": "Default font family (Serif)", @@ -66,6 +79,28 @@ "lakeus-theme-designer-font-family-headings": "Headings font family", "lakeus-theme-designer-background-color-edit-options": "Edit options background color", "lakeus-theme-designer-border-color-edit-options": "Edit options border color", + "lakeus-theme-designer-background-color-toc": "Table of contents background color", + "lakeus-theme-designer-border-color-toc": "Table of contents border color", + "lakeus-theme-designer-color-toc-number": "Table of contents number text color", + "lakeus-theme-designer-border-color-interface-message-box-neutral": "Interface message box neutral border color", + "lakeus-theme-designer-background-color-interface-message-box-neutral": "Interface message box neutral background color", + "lakeus-theme-designer-text-color-interface-message-box-neutral": "Interface message box neutral text color", + "lakeus-theme-designer-border-color-interface-message-box-warning": "Interface message box warning border color", + "lakeus-theme-designer-background-color-interface-message-box-warning": "Interface message box warning background color", + "lakeus-theme-designer-text-color-interface-message-box-warning": "Interface message box warning text color", + "lakeus-theme-designer-border-color-interface-message-box-error": "Interface message box error border color", + "lakeus-theme-designer-background-color-interface-message-box-error": "Interface message box error background color", + "lakeus-theme-designer-text-color-interface-message-box-error": "Interface message box error text color", + "lakeus-theme-designer-border-color-interface-message-box-success": "Interface message box success border color", + "lakeus-theme-designer-background-color-interface-message-box-success": "Interface message box success background color", + "lakeus-theme-designer-text-color-interface-message-box-success": "Interface message box success text color", + "lakeus-theme-designer-border-color-user-message": "Interface message box user message border color", + "lakeus-theme-designer-background-color-user-message": "Interface message box user message background color", + "lakeus-theme-designer-text-color-user-message": "Interface message box user message text color", + "lakeus-theme-designer-background-color-wikitable": "Table background color", + "lakeus-theme-designer-border-color-wikitable": "Table border color", + "lakeus-theme-designer-background-color-wikitable-table-head": "Table header background color", + "lakeus-theme-designer-text-color-wikitable": "Table text color", "lakeus-theme-designer-portlet": "Dropdown menus", "lakeus-theme-designer-background-color-portlet-body": "Dropdown menu background color", "lakeus-theme-designer-background-color-portlet-item-hover": "Dropdown menu items hover color", @@ -83,4 +118,4 @@ "lakeus-theme-designer-color-accent-header-tab-selected": "Action header selected tab text color", "lakeus-theme-designer-color-accent-header-tab-new": "Action header new tab text color", "lakeus-theme-designer-danger-zone": "Danger zone" -} \ No newline at end of file +} diff --git a/i18n/qqq.json b/i18n/qqq.json index d266ceb..a6f9aec 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -22,16 +22,29 @@ "lakeus-theme-designer-test-theme": "A form button. Click it to test the theme out.", "lakeus-theme-designer-clear-theme": "A form button. Click it to end testing.", "lakeus-theme-designer-reset-theme": "A form button. Click it to reset the form.", + "lakeus-theme-designer-invert-auto-calculate-selection": "A form button. Click it to invert the automatic calculation selection.", "lakeus-theme-designer-copied": "A notification text. Shows when theme code is successfully copied to the clipboard.", "lakeus-theme-designer-copy-failed": "A notification text. Shows when theme code fails to be copied to the clipboard, instead going into the <pre> element at the end of the designer.", "lakeus-theme-designer-reload": "A form button. Click it to reload the designer.", "lakeus-theme-designer-color-picker-fallback": "A checkbox label. Checking it will change color pickers to text inputs for fallback use.", "lakeus-theme-designer-alpha-channel": "A form input placeholder for alpha channel (opacity). It's probably a good idea to keep Alpha as-is, but don't if your language's grammar is against it.", + "lakeus-theme-designer-basic": "A form section title. Settings in this section is the most important ones, as they are the base variables that auto calculation depends on.", + "lakeus-theme-designer-color-primary": "A label of a setting. The primary (or accent, foreground) color.", + "lakeus-theme-designer-color-secondary": "A label of a setting. The secondary (used as background) color.", "lakeus-theme-designer-global": "A form section title. Settings in this section will affect the whole page.", "lakeus-theme-designer-background-color-base": "HTML background color, or the background color of the <html> element.", "lakeus-theme-designer-color-link": "A label of a setting. The color of normal links.", "lakeus-theme-designer-color-link--visited": "A label of a setting. The color of visited links.", "lakeus-theme-designer-color-link--active": "A label of a setting. The color of active links.", + "lakeus-theme-designer-color-link-new": "A label of a setting. The color of new links.", + "lakeus-theme-designer-color-link-new--visited": "A label of a setting. The color of visited new links.", + "lakeus-theme-designer-color-link-new--active": "A label of a setting. The color of active new links.", + "lakeus-theme-designer-color-link-footer": "A label of a setting. The color of footer links.", + "lakeus-theme-designer-color-link-footer--visited": "A label of a setting. The color of visited footer links.", + "lakeus-theme-designer-color-link-footer--active": "A label of a setting. The color of active footer links.", + "lakeus-theme-designer-color-link-external": "A label of a setting. The color of external links.", + "lakeus-theme-designer-color-link-external--visited": "A label of a setting. The color of visited external links.", + "lakeus-theme-designer-color-link-external--active": "A label of a setting. The color of active external links.", "lakeus-theme-designer-elevation": "A label of a setting. Shadow setting that is used by several elements.", "lakeus-theme-designer-font-family": "A label of a setting. Default font family that is applied to the whole page.", "lakeus-theme-designer-font-family-serif": "A label of a setting. Default serif font family. Could be applied to the headings.", @@ -65,6 +78,28 @@ "lakeus-theme-designer-font-family-headings": "A label of a setting. Font family of the headings.", "lakeus-theme-designer-background-color-edit-options": "A label of a setting. The background color of these edit options in wiki editor.", "lakeus-theme-designer-border-color-edit-options": "A label of a setting. The border color of these edit options in wiki editor.", + "lakeus-theme-designer-background-color-toc": "A label of a setting. The background color of the table of contents.", + "lakeus-theme-designer-border-color-toc": "A label of a setting. The border color of the table of contents.", + "lakeus-theme-designer-color-toc-number": "A label of a setting. The text color of the title numbers in the table of contents.", + "lakeus-theme-designer-border-color-interface-message-box-neutral": "A label of a setting. The border color of the neutral message box.", + "lakeus-theme-designer-background-color-interface-message-box-neutral": "A label of a setting. The background color of the neutral message box.", + "lakeus-theme-designer-text-color-interface-message-box-neutral": "A label of a setting. The text color of the neutral message box.", + "lakeus-theme-designer-border-color-interface-message-box-warning": "A label of a setting. The border color of the warning message box.", + "lakeus-theme-designer-background-color-interface-message-box-warning": "A label of a setting. The background color of the warning message box.", + "lakeus-theme-designer-text-color-interface-message-box-warning": "A label of a setting. The text color of the warning message box.", + "lakeus-theme-designer-border-color-interface-message-box-error": "A label of a setting. The border color of the error message box.", + "lakeus-theme-designer-background-color-interface-message-box-error": "A label of a setting. The background color of the error message box.", + "lakeus-theme-designer-text-color-interface-message-box-error": "A label of a setting. The text color of the error message box.", + "lakeus-theme-designer-border-color-interface-message-box-success": "A label of a setting. The border color of the success message box.", + "lakeus-theme-designer-background-color-interface-message-box-success": "A label of a setting. The background color of the success message box.", + "lakeus-theme-designer-text-color-interface-message-box-success": "A label of a setting. The text color of the success message box.", + "lakeus-theme-designer-border-color-user-message": "A label of a setting. The border color of the message box informing users about their talk pages.", + "lakeus-theme-designer-background-color-user-message": "A label of a setting. The background color of the message box informing users about their talk pages.", + "lakeus-theme-designer-text-color-user-message": "A label of a setting. The text color of the message box informing users about their talk pages.", + "lakeus-theme-designer-background-color-wikitable": "A label of a setting. The background color of the table.", + "lakeus-theme-designer-border-color-wikitable": "A label of a setting. The border color of the table.", + "lakeus-theme-designer-background-color-wikitable-table-head": "A label of a setting. The background color of the table header.", + "lakeus-theme-designer-text-color-wikitable": "A label of a setting. The text color of the table.", "lakeus-theme-designer-portlet": "A form section title. Settings in this section will affect the dropdown menus.", "lakeus-theme-designer-background-color-portlet-body": "A label of a setting. The background color of dropdown menus.", "lakeus-theme-designer-background-color-portlet-item-hover": "A label of a setting. The color of the dropdown menu items hovered on.", diff --git a/includes/Hooks.php b/includes/Hooks.php new file mode 100644 index 0000000..58f974f --- /dev/null +++ b/includes/Hooks.php @@ -0,0 +1,23 @@ + 'check', + 'label-message' => 'lakeus-preferences-enable-theme-designer', // a system message + 'help-message' => 'lakeus-preferences-enable-theme-designer-desc', + 'section' => 'rendering/skin/skin-prefs', + 'hide-if' => [ '!==', 'wpskin', 'lakeus' ], + ]; + } +} diff --git a/includes/SkinLakeus.php b/includes/SkinLakeus.php index cc0a0a8..167b09a 100644 --- a/includes/SkinLakeus.php +++ b/includes/SkinLakeus.php @@ -1,7 +1,4 @@ header, > main, @@ -20,12 +23,46 @@ body { } } -a { +/* Links */ + +a, body a { color: @color-link; &:visited { color: @color-link--visited; } + + &:active { + color: @color-link--active; + } +} + +a.new, body a.new, +#p-personal a.new, body #p-personal a.new { + color: @color-link-new; +} + +a.new:visited, body a.new:visited { + color: @color-link-new--visited; +} + +a.new:active, body a.new:active { + color: @color-link-new--active; +} + +.mw-parser-output a.extiw, body .mw-parser-output a.extiw, +.mw-parser-output a.external, body .mw-parser-output a.external { + color: @color-link-external; +} + +.mw-parser-output a.extiw:visited, body .mw-parser-output a.extiw:visited, +.mw-parser-output a.external:visited, body .mw-parser-output a.external:visited { + color: @color-link-external--visited; +} + +.mw-parser-output a.extiw:active, body .mw-parser-output a.extiw:active, +.mw-parser-output a.external:active, body .mw-parser-output a.external:active { + color: @color-link-external--active; } .mw-editsection { @@ -66,10 +103,10 @@ a { .mw-header { background-color: @color-header; min-height: 50px; - box-shadow: @elevation; + box-shadow: @header-elevation; top: 0; left: 0; - margin: auto; + /* margin: auto; */ height: 0; padding: 0 20px 20px 20px; display: flex; @@ -109,9 +146,11 @@ a { } margin: 40px auto 0; padding-bottom: 8px; + color: @text-color-body; &.has-border { box-sizing: border-box; background-color: @background-color-content; + color: @text-color-content; border: 1px solid @border-color-content; border-radius: 3px; box-shadow: @elevation; @@ -137,7 +176,7 @@ a { #searchInput { background-image: url( 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3Esearch%3C%2Ftitle%3E%3Cg%20fill%3D%22%2354595d%22%3E%3Cpath%20d%3D%22M7.5%2013a5.5%205.5%200%20100-11%205.5%205.5%200%20000%2011zm4.55.46A7.43%207.43%200%20017.5%2015a7.5%207.5%200%20115.96-2.95l6.49%206.49-1.41%201.41-6.49-6.49z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E' ); /* TODO: Variablize */ - background-color: #fff; /* TODO: Variablize */ + background-color: @background-color-search-input; /* TODO: Variablize */ background-size: 18px; -webkit-appearance: none; @@ -204,6 +243,14 @@ a { display: flex; align-items: center; flex-grow: 1; + + h1 { + color: @text-color-header; + } +} + +#p-notifications { + filter: @icon-filter-header; } #p-user-tools { @@ -250,6 +297,8 @@ a { background-position: center top; overflow: hidden; display: flex; + opacity: 0.8; + filter: @icon-filter-header; } .mw-portlet-body { @@ -291,13 +340,16 @@ a { display: block; padding: 8px; border-radius: 3px; + color: @text-color-toggle-list-item; &:hover { background: @background-color-toggle-list-item-hover; + color: @text-color-toggle-list-item-hover; } &:focus { background: @background-color-toggle-list-item-focus; + color: @text-color-toggle-list-item-focus; } } @@ -323,6 +375,7 @@ a { background: @background-color-toggle-list-card; #toggle-list__article-counter { + color: @logo-text-color-toggle-list; float: right; span { @@ -362,7 +415,7 @@ a { #pt-anonuserpage { display: block; - padding: 8px; + padding: 0.2em 0.75em; } /* CONTENT */ @@ -373,7 +426,7 @@ a { */ main { - border-bottom: solid 20px @background-color-base; + border-bottom: solid 20px @background-color-content; } .mw-body { @@ -385,6 +438,7 @@ main { h6, dt { font-family: @font-family-headings; + color: @text-color-content; } } @@ -440,13 +494,14 @@ main { #content { @media screen and ( min-width: @width-breakpoint-tablet ) { - max-width: 70%; + min-width: 70%; margin: 10px auto 40px; } @media screen and ( max-width: @width-breakpoint-mobile ) { max-width: 100%; } + color: @text-color-content; max-width: 1200px; background-color: @background-color-content; position: relative; @@ -519,6 +574,10 @@ div.editOptions { &:focus { background: @background-color-portlet-item-focus; } + + &:visited { + color: inherit; + } } } @@ -596,6 +655,16 @@ div.editOptions { li.selected { border-bottom: 2px solid @color-accent-header-tab; margin-bottom: -1px; + a { + color: @color-accent-header-tab-selected; + } + + } + + li.new { + a { + color: @color-accent-header-tab-new; + } } } @@ -628,6 +697,75 @@ div.editOptions { overflow: visible; } +/* TOC */ +.toc, body .toc, +.toccolours, body .toccolours { + border-color: @border-color-toc; + background-color: @background-color-toc; +} + +.tocnumber, body .tocnumber { + color: @color-toc-number; +} + +.toctogglelabel, body .toctogglelabel { + color: @color-link; +} + +/* INTERFACE MESSAGE BOXES */ +.messagebox, body .messagebox { + background-color: @background-color-interface-message-box-neutral; + border-color: @border-color-interface-message-box-neutral; + color: @text-color-interface-message-box-neutral; +} + +.errorbox, body .errorbox { + background-color: @background-color-interface-message-box-error; + border-color: @border-color-interface-message-box-error; + color: @text-color-interface-message-box-error; +} + +.warningbox, body .warningbox { + background-color: @background-color-interface-message-box-warning; + border-color: @border-color-interface-message-box-warning; + color: @text-color-interface-message-box-warning; +} + +.successbox, body .successbox { + background-color: @background-color-interface-message-box-success; + border-color: @border-color-interface-message-box-success; + color: @text-color-interface-message-box-success; +} + +.usermessage, body .usermessage { + background-color: @background-color-user-message; + border-color: @border-color-user-message; + color: @text-color-user-message; + font-weight: bold; + margin: 2em 0 1em; + padding: 0.5em 1em; + vertical-align: middle; +} + +/* TABLES */ +.wikitable, body .wikitable { + background-color: @background-color-wikitable; + color: @text-color-wikitable; + border-color: @border-color-wikitable; + + > tr > th, + > tr > td, + > * > tr > th, + > * > tr > td { + border-color: @border-color-wikitable; + } + + > tr > th, + > * > tr > th { + background-color: @background-color-wikitable-table-head; + } +} + /* CATEGORIES */ #catlinks { @@ -647,6 +785,8 @@ div.editOptions { body > footer { background: @background-color-footer; + color: @text-color-footer; + flex-grow: 1; @media screen and ( min-width: @width-breakpoint-desktop ) { padding: 20px 15%; @@ -660,6 +800,18 @@ body > footer { display: inline-block; margin-right: 5px; } + + a { + color: @color-footer-link; + + &:active { + color: @color-footer-link--active; + } + + &:visited { + color: @color-footer-link--visited; + } + } } #footer-info li { @@ -741,13 +893,11 @@ body > footer { width: 20px; display: block; height: 20px; + opacity: 0.8; + filter: @icon-filter-header; background-image: url( 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E' ); } -.toctogglelabel { - color: inherit; -} - .visualClear { clear: both; } diff --git a/resources/themeDesigner.css b/resources/themeDesigner.css index d569eda..823e0d4 100644 --- a/resources/themeDesigner.css +++ b/resources/themeDesigner.css @@ -6,7 +6,81 @@ z-index: 199; } -#lakeus-theme-designer #lakeus-theme-designer-button { +#lakeus-theme-designer-title { + font-size: 100%; + font-weight: bold; + margin-bottom: 0.6em; + border-bottom: 1px solid #a2a9b1; +} + +#lakeus-theme-designer-portlet { + position: relative; +} + +#lakeus-theme-designer-portlet #lakeus-theme-designer-modal-checkbox-hack { + display: block; + position: absolute; + opacity: 0; + cursor: pointer; + top: 0; + left: 0; + z-index: 200; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +@keyframes theme-designer-animation-menu-show { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + +@keyframes theme-designer-animation-menu-hide { + from { + opacity: 1; + visibility: visible; + } + + to { + opacity: 0; + } +} + +#lakeus-theme-designer-portlet #lakeus-theme-designer-modal-checkbox-hack:checked ~ #lakeus-theme-designer-portlet-body { + animation-name: theme-designer-animation-menu-show; + animation-duration: 0.2s; +} + +#lakeus-theme-designer-portlet #lakeus-theme-designer-modal-checkbox-hack:checked ~ #lakeus-theme-designer-portlet-body #lakeus-theme-designer-portlet-body-container { + opacity: 1; + visibility: visible; +} + +#lakeus-theme-designer-portlet #lakeus-theme-designer-portlet-body { + display: block; + visibility: hidden; + bottom: 100%; + position: absolute; + animation-name: theme-designer-animation-menu-hide; + animation-duration: 0.2s; +} + +#lakeus-theme-designer-portlet-body #lakeus-theme-designer-portlet-body-container { + background: white; + overflow-y: scroll; + box-shadow: 0 5px 17px 0 rgba(0,0,0,0.24),0 0 1px #a2a9b1; + border-radius: 3px; + padding: 0.4em; + max-height: 600px; +} + +#lakeus-theme-designer #lakeus-theme-designer-modal-button { color: #fff; background: #fff; text-align: center; @@ -20,4 +94,69 @@ padding: 0; margin: 0; cursor: pointer; +} + +#lakeus-theme-designer-portlet-body input[type="text"], +#lakeus-theme-designer-portlet-body input[type="password"], +#lakeus-theme-designer-portlet-body input[type="email"], +#lakeus-theme-designer-portlet-body input[type="url"], +#lakeus-theme-designer-portlet-body input[type="date"], +#lakeus-theme-designer-portlet-body input[type="month"], +#lakeus-theme-designer-portlet-body input[type="time"], +#lakeus-theme-designer-portlet-body input[type="datetime"], +#lakeus-theme-designer-portlet-body input[type="datetime-local"], +#lakeus-theme-designer-portlet-body input[type="week"], +#lakeus-theme-designer-portlet-body input[type="number"], +#lakeus-theme-designer-portlet-body input[type="search"], +#lakeus-theme-designer-portlet-body input[type="tel"], +#lakeus-theme-designer-portlet-body input[type="color"], +#lakeus-theme-designer-portlet-body input[type="file"], +#lakeus-theme-designer-portlet-body select, +#lakeus-theme-designer-portlet-body label, +#lakeus-theme-designer-portlet-body textarea { + display: block; + margin: 0.25em 0; +} + +#lakeus-theme-designer-portlet-body input[type="checkbox"], +#lakeus-theme-designer-portlet-body input[type="radio"] { + margin-right: 0.2em; +} + +#lakeus-theme-designer-portlet-body #lakeus-theme-designer-action-buttons { + position: sticky; + background: #fff; + bottom: 0; + margin-top: -1px; + border-top: 1px solid #c8ccd1; + padding: 1em 0; + box-shadow: 0 -4px 4px -4px rgb(0 0 0 / 25%); +} + +#lakeus-theme-designer-portlet-body .lakeus-theme-designer-action-button { + padding: 0.35em; + margin: 0.25em; + background-color: #fff; + border-color: #ccc; + border-style: solid; + border-width: 1px; + border-radius: 2px; +} + +#lakeus-theme-designer-action-buttons #lakeus-theme-designer-copy-theme-button { + background-color: #36c; + border-color: #36c; + color: white; +} + +#lakeus-theme-designer-portlet-body .lakeus-theme-designer-action-button-progressive { + background-color: #36c; + border-color: #36c; + color: white; +} + +#lakeus-theme-designer-portlet-body .lakeus-theme-designer-action-button-danger { + background-color: #d33; + border-color: #d33; + color: white; } \ No newline at end of file diff --git a/resources/themeDesigner.js b/resources/themeDesigner.js index 971789d..f678d0a 100644 --- a/resources/themeDesigner.js +++ b/resources/themeDesigner.js @@ -1,9 +1,1602 @@ window.Lakeus = window.Lakeus || {}; +/* + TODO List: + 1. [X] Use chroma("color") in Lakeus.variablesList for default and value; + 2. [X] Use function.prototype.bind to replace each calculate property in Lakeus.variablesList; + 3. Remove deprecated functions and their calls; + 4. [X] Add a "reset" button to the form; + 5. [X] Implement Alpha channel next to the color input; + 5.1. [X] This also requires to implement a field in the variables list for the alpha channel; + 6. [ ] Reimplement the function of calculating actual values of the RGBA colors into the variables list; + 7. [X] Implement variables for TOC; + 8. [X] Implement variables for feature `interface-message-box`; + 9. [X] Implement variables for feature `content-table`; + 10. [ ] Implement variables for and its alike; + 11. Test it out. +*/ + Lakeus.initThemeDesigner = function () { + console.log("[Lakeus] Theme Designer is loading..."); - var stylePath = mw.config.get('stylepath'); - $('head').append(''); - $("body").append('
'); - console.log("[Lakeus] Theme Designer is loaded."); -}; \ No newline at end of file + $.when(mw.loader.using(['mediawiki.api', 'mediawiki.jqueryMsg']), $.ready).then(function () { + return new mw.Api().loadMessagesIfMissing([ + "lakeus-theme-designer", + "lakeus-theme-designer-system-messages-loaded", + "lakeus-theme-designer-all-loaded", + "lakeus-theme-designer-auto-calculate", + "lakeus-theme-designer-copy-theme", + "lakeus-theme-designer-paste-theme", + "lakeus-theme-designer-test-theme", + "lakeus-theme-designer-clear-theme", + "lakeus-theme-designer-reset-theme", + "lakeus-theme-designer-invert-auto-calculate-selection", + "lakeus-theme-designer-copied", + "lakeus-theme-designer-copy-failed", + "lakeus-theme-designer-reload", + "lakeus-theme-designer-color-picker-fallback", + "lakeus-theme-designer-alpha-channel", + "lakeus-theme-designer-basic", + "lakeus-theme-designer-color-primary", + "lakeus-theme-designer-color-secondary", + "lakeus-theme-designer-global", + "lakeus-theme-designer-background-color-base", + "lakeus-theme-designer-color-link", + "lakeus-theme-designer-color-link--visited", + "lakeus-theme-designer-color-link--active", + "lakeus-theme-designer-color-link-new", + "lakeus-theme-designer-color-link-new--visited", + "lakeus-theme-designer-color-link-new--active", + "lakeus-theme-designer-color-link-footer", + "lakeus-theme-designer-color-link-footer--visited", + "lakeus-theme-designer-color-link-footer--active", + "lakeus-theme-designer-color-link-external", + "lakeus-theme-designer-color-link-external--visited", + "lakeus-theme-designer-color-link-external--active", + "lakeus-theme-designer-elevation", + "lakeus-theme-designer-font-family", + "lakeus-theme-designer-font-family-serif", + "lakeus-theme-designer-page-header", + "lakeus-theme-designer-color-header", + "lakeus-theme-designer-header-elevation", + "lakeus-theme-designer-icon-filter-header", + "lakeus-theme-designer-background-color-search-suggestions", + "lakeus-theme-designer-border-color-search-suggestions", + "lakeus-theme-designer-color-search-suggestions-text", + "lakeus-theme-designer-background-color-search-suggestions-current", + "lakeus-theme-designer-color-search-suggestions-text-current", + "lakeus-theme-designer-background-color-search-input", + "lakeus-theme-designer-border-color-search-bar", + "lakeus-theme-designer-toggle-list", + "lakeus-theme-designer-background-color-toggle-list", + "lakeus-theme-designer-background-color-toggle-list-card", + "lakeus-theme-designer-logo-text-color-toggle-list", + "lakeus-theme-designer-background-color-toggle-list-item-hover", + "lakeus-theme-designer-background-color-toggle-list-item-focus", + "lakeus-theme-designer-border-color-toggle-list", + "lakeus-theme-designer-subheader-color-toggle-list", + "lakeus-theme-designer-mask-background", + "lakeus-theme-designer-body", + "lakeus-theme-designer-background-color-content", + "lakeus-theme-designer-background-color-body", + "lakeus-theme-designer-border-color-content", + "lakeus-theme-designer-color-accent-header-tab", + "lakeus-theme-designer-border-color-header-tab", + "lakeus-theme-designer-color-tagline", + "lakeus-theme-designer-font-family-headings", + "lakeus-theme-designer-background-color-edit-options", + "lakeus-theme-designer-border-color-edit-options", + "lakeus-theme-designer-background-color-toc", + "lakeus-theme-designer-border-color-toc", + "lakeus-theme-designer-color-toc-number", + "lakeus-theme-designer-border-color-interface-message-box-neutral", + "lakeus-theme-designer-background-color-interface-message-box-neutral", + "lakeus-theme-designer-text-color-interface-message-box-neutral", + "lakeus-theme-designer-border-color-interface-message-box-warning", + "lakeus-theme-designer-background-color-interface-message-box-warning", + "lakeus-theme-designer-text-color-interface-message-box-warning", + "lakeus-theme-designer-border-color-interface-message-box-error", + "lakeus-theme-designer-background-color-interface-message-box-error", + "lakeus-theme-designer-text-color-interface-message-box-error", + "lakeus-theme-designer-border-color-interface-message-box-success", + "lakeus-theme-designer-background-color-interface-message-box-success", + "lakeus-theme-designer-text-color-interface-message-box-success", + "lakeus-theme-designer-border-color-user-message", + "lakeus-theme-designer-background-color-user-message", + "lakeus-theme-designer-text-color-user-message", + "lakeus-theme-designer-background-color-wikitable", + "lakeus-theme-designer-border-color-wikitable", + "lakeus-theme-designer-background-color-wikitable-table-head", + "lakeus-theme-designer-text-color-wikitable", + "lakeus-theme-designer-portlet", + "lakeus-theme-designer-background-color-portlet-body", + "lakeus-theme-designer-background-color-portlet-item-hover", + "lakeus-theme-designer-background-color-portlet-item-focus", + "lakeus-theme-designer-border-color-portlet-body", + "lakeus-theme-designer-footer", + "lakeus-theme-designer-background-color-footer", + "lakeus-theme-designer-text-color-footer", + "lakeus-theme-designer-text-color-toggle-list-item", + "lakeus-theme-designer-text-color-toggle-list-item-hover", + "lakeus-theme-designer-text-color-toggle-list-item-focus", + "lakeus-theme-designer-text-color-content", + "lakeus-theme-designer-text-color-header", + "lakeus-theme-designer-text-color-body", + "lakeus-theme-designer-color-accent-header-tab-selected", + "lakeus-theme-designer-color-accent-header-tab-new", + "lakeus-theme-designer-danger-zone", + ]); + }).then(function () { + console.log("[Lakeus] " + mw.message('lakeus-theme-designer-system-messages-loaded')); + $.getScript("https://cdn.jsdelivr.net/npm/chroma-js@2.1.2/chroma.min.js", function () { + + /* Leaving it as-is since 50% contrast method works differently */ + Lakeus.getContrastYIQ = function (hexcolor, black, white) { + hexcolor = hexcolor.replace("#", ""); + var r = parseInt(hexcolor.substr(0, 2), 16); + var g = parseInt(hexcolor.substr(2, 2), 16); + var b = parseInt(hexcolor.substr(4, 2), 16); + var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; + return (yiq >= 128) ? (black ? black : '#000000') : (white ? white : '#ffffff'); + } + + Lakeus.calculateRGBAActualValue = function (frontRGBA, backgroundRGB){ + + var rtrn = {}; + //allows the function to just accept a front colour and assume the background is a plain white. + backgroundRGB = backgroundRGB || chroma([255, 255, 255]); + + //allows a RGB value to be passed in assuming full alpha channel. + frontRGBA.alpha(frontRGBA.alpha() || 1); + + //normalise the alpha channel across the foreground and background. + rtrn.r = ((1 - frontRGBA.alpha()) * backgroundRGB.get("rgb.r")) + (frontRGBA.alpha() * frontRGBA.get("rgb.r")); + rtrn.g = ((1 - frontRGBA.alpha()) * backgroundRGB.get("rgb.g")) + (frontRGBA.alpha() * frontRGBA.get("rgb.g")); + rtrn.b = ((1 - frontRGBA.alpha()) * backgroundRGB.get("rgb.b")) + (frontRGBA.alpha() * frontRGBA.get("rgb.b")); + + //just check that we don't end up with a value greater than 255 for any channel. + rtrn.r = (rtrn.r > 255) ? 255 : rtrn.r; + rtrn.g = (rtrn.g > 255) ? 255 : rtrn.g; + rtrn.b = (rtrn.b > 255) ? 255 : rtrn.b; + + return chroma(rtrn); + + } + + Lakeus.changeColorBrightnessByContrast = function (foregroundColor, backgroundColor, brightenCoefficient, darkenCoefficient) { + return (Lakeus.getContrastYIQ(backgroundColor.hex(), "black", "white") === "white" ? foregroundColor.brighten(brightenCoefficient) : foregroundColor.darken(darkenCoefficient)); + } + + /* CSS Variables List */ + Lakeus.variablesList = { + "color-primary": { + fieldset: "lakeus-theme-designer-basic", + rule: "manual", + input: "color", + allowAlpha: false, + default: chroma("#54595d"), + value: chroma("#54595d"), + calculate: function (i) { + return i; + }, + }, + "color-secondary": { + fieldset: "lakeus-theme-designer-basic", + rule: "manual", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculate: function (i) { + return i; + }, + }, + "color-header": { + fieldset: "lakeus-theme-designer-basic", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculate: function (i) { + return i; + }, + }, + "color-link": { + fieldset: "lakeus-theme-designer-basic", + rule: "calculateWhenNeeded", + input: "color", + allowAlpha: false, + default: chroma("#0645ad"), + value: chroma("#0645ad"), + calculateFrom: [ + "color-primary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "font-family": { + fieldset: "lakeus-theme-designer-global", + rule: "manual", + input: "text", + default: "'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif", + value: "'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif", + calculate: function (i) { + return i; + }, + }, + "font-family-serif": { + fieldset: "lakeus-theme-designer-global", + rule: "manual", + input: "text", + default: "'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif", + value: "'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif", + calculate: function (i) { + return i; + }, + }, + "elevation": { + fieldset: "lakeus-theme-designer-global", + rule: "manual", + input: "text", + default: "0 2px 2px rgba( 0, 0, 0, 10% )", + value: "0 2px 2px rgba( 0, 0, 0, 10% )", + calculate: function (i) { + return i; + }, + }, + "background-color-base": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculateFrom: [ + "color-secondary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "color-link--visited": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#0b0080"), + value: chroma("#0b0080"), + calculateFrom: [ + "color-link", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 1, 1); + }, + }, + "color-link--active": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#faa700"), + value: chroma("#faa700"), + calculateFrom: [ + "color-link", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value.brighten(1); + }, + }, + "color-link-new": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNeeded", + input: "color", + allowAlpha: false, + default: chroma("#d33"), + value: chroma("#d33"), + calculateFrom: [ + "color-primary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value.set('hsl.h', '+180') || this.default; + }, + }, + "color-link-new--visited": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#a55858"), + value: chroma("#a55858"), + calculateFrom: [ + "color-link-new", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 1, 1); + }, + }, + "color-link-new--active": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#faa700"), + value: chroma("#faa700"), + calculateFrom: [ + "color-link-new", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value.brighten(1); + }, + }, + "color-link-external": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#36b"), + value: chroma("#36b"), + calculateFrom: [ + "color-link", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 0.2, 0.2); + }, + }, + "color-link-external--visited": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#636"), + value: chroma("#636"), + calculateFrom: [ + "color-link-external", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 1, 1); + }, + }, + "color-link-external--active": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#b63"), + value: chroma("#b63"), + calculateFrom: [ + "color-link-external", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value.brighten(1); + }, + }, + "header-elevation": { + fieldset: "lakeus-theme-designer-page-header", + rule: "manual", + input: "text", + default: "var(--elevation)", + value: "var(--elevation)", + calculate: function (i) { + return i; + }, + }, + "text-color-header": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "color-header", + "background-color-body" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value).hex('rgb'))); + }, + }, + "icon-filter-header": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "text", + default: "unset", + value: "unset", + calculateFrom: [ + "color-header", + "background-color-body" + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value).hex('rgb'), "unset", "invert(1) hue-rotate(180deg)"); + } + }, + "background-color-search-suggestions": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculateFrom: [ + "color-secondary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "border-color-search-suggestions": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#c8ccd1"), + value: chroma("#c8ccd1"), + calculateFrom: [ + "background-color-search-suggestions", + "color-header", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 2, 2); + }, + }, + "background-color-search-suggestions-current": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#1d5492"), + value: chroma("#1d5492"), + calculateFrom: [ + "color-primary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "color-search-suggestions-text": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-search-suggestions" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'))); + }, + }, + "color-search-suggestions-text-current": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculateFrom: [ + "background-color-search-suggestions-current" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'))); + }, + }, + "background-color-search-input": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculateFrom: [ + "color-secondary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "border-color-search-bar": { + fieldset: "lakeus-theme-designer-page-header", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#eaecf0"), + value: chroma("#eaecf0"), + calculateFrom: [ + "background-color-search-input", + "color-header", + "background-color-body" + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 2, 2); + }, + }, + "background-color-toggle-list": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculateFrom: [ + "color-secondary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "background-color-toggle-list-card": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#eeeeee"), + value: chroma("#eeeeee"), + calculateFrom: [ + "color-primary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "text-color-toggle-list-item": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#1c1c1c"), + value: chroma("#1c1c1c"), + calculateFrom: [ + "background-color-toggle-list" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'))); + }, + }, + "background-color-toggle-list-item-hover": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#000000").alpha(0.1), + value: chroma("#000000").alpha(0.1), + calculate: function (i) { + return i; + }, + }, + "text-color-toggle-list-item-hover": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#3a3a3a"), + value: chroma("#3a3a3a"), + calculateFrom: [ + "background-color-toggle-list-item-hover", + "background-color-toggle-list", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value).hex('rgb'))); + }, + }, + "background-color-toggle-list-item-focus": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000").alpha(0.2), + value: chroma("#000000").alpha(0.2), + calculateFrom: [ + "background-color-toggle-list-item-hover", + "background-color-toggle-list", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value, 0.2, 0.2).alpha(0.2); + }, + }, + "text-color-toggle-list-item-focus": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#3a3a3a"), + value: chroma("#3a3a3a"), + calculateFrom: [ + "background-color-toggle-list-item-focus", + "background-color-toggle-list", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value).hex('rgb'))); + }, + }, + "border-color-toggle-list": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#dddddd"), + value: chroma("#dddddd"), + calculateFrom: [ + "background-color-toggle-list", + "background-color-toggle-list", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value, 2, 2); + }, + }, + "subheader-color-toggle-list": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#909aa1"), + value: chroma("#909aa1"), + calculateFrom: [ + "background-color-toggle-list-card" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'), Lakeus.variablesList[this.calculateFrom[0]].value.brighten(0.4), Lakeus.variablesList[this.calculateFrom[0]].value.darken(0.4))); + }, + }, + "logo-text-color-toggle-list": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-toggle-list-card" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'))); + }, + }, + "mask-background": { + fieldset: "lakeus-theme-designer-toggle-list", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#000000").alpha(0.8), + value: chroma("#000000").alpha(0.8), + calculate: function (i) { + return i; + }, + }, + "background-color-content": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculateFrom: [ + "color-secondary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "text-color-content": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-content" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'))); + }, + }, + "background-color-body": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculateFrom: [ + "color-secondary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "text-color-body": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-body" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'))); + }, + }, + "border-color-content": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#cccccc"), + value: chroma("#cccccc"), + calculateFrom: [ + "border-color-content", + "background-color-content", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value, 0.3, 0.3); + }, + }, + "color-accent-header-tab": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#54595d"), + value: chroma("#54595d"), + calculateFrom: [ + "color-primary", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value || this.default; + }, + }, + "color-accent-header-tab-selected": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#54595d"), + value: chroma("#54595d"), + calculateFrom: [ + "color-accent-header-tab", + "background-color-content" + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[1]].value.hex('rgb')), 0, 0.4)); + }, + }, + "color-accent-header-tab-new": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#54595d"), + value: chroma("#54595d"), + calculateFrom: [ + "color-accent-header-tab", + "background-color-content" + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[1]].value.hex('rgb')), 0.4, 0.4)); + }, + }, + "border-color-header-tab": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#eaecf0"), + value: chroma("#eaecf0"), + calculate: function (i) { + return i; + }, + }, + "color-tagline": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000").alpha(0.5), + value: chroma("#000000").alpha(0.5), + calculateFrom: [ + "background-color-body" + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[0]].value.hex('rgb'))).alpha(0.5); + }, + }, + "font-family-headings": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "text", + default: "var(--font-family-serif)", + value: "var(--font-family-serif)", + calculate: function (i) { + return i; + }, + }, + "background-color-edit-options": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#eeeeee"), + value: chroma("#eeeeee"), + calculate: function (i) { + return i; + }, + }, + "border-color-edit-options": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#c8ccd1"), + value: chroma("#c8ccd1"), + calculate: function (i) { + return i; + }, + }, + "background-color-toc": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#f8f9fa"), + value: chroma("#f8f9fa"), + calculateFrom: [ + "background-color-body", + "background-color-content", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value, 0.5, 0.5); + }, + }, + "border-color-toc": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#a2a9b1"), + value: chroma("#a2a9b1"), + calculateFrom: [ + "background-color-toc", + "background-color-content", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value, 1, 1); + }, + }, + "color-toc-number": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#202122"), + value: chroma("#202122"), + calculateFrom: [ + "background-color-toc", + "background-color-content", + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value).hex('rgb'), chroma("#000000").brighten(0.2), chroma("#ffffff").darken(0.2)); + }, + }, + "border-color-interface-message-box-neutral": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: false, + default: chroma("#a2a9b1"), + value: chroma("#a2a9b1"), + calculate: function (i) { + return i; + }, + }, + "background-color-interface-message-box-neutral": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#eaecf0"), + value: chroma("#eaecf0"), + calculateFrom: [ + "border-color-interface-message-box-neutral", + "background-color-content", + "background-color-body" + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.8), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.1)); + }, + }, + "text-color-interface-message-box-neutral": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-interface-message-box-neutral", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value), Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'))); + }, + }, + "border-color-interface-message-box-warning": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: false, + default: chroma("#ffcc33"), + value: chroma("#ffcc33"), + calculate: function (i) { + return i; + }, + }, + "background-color-interface-message-box-warning": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#fef6e7"), + value: chroma("#fef6e7"), + calculateFrom: [ + "border-color-interface-message-box-warning", + "background-color-content", + "background-color-body" + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.8), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.1)); + }, + }, + "text-color-interface-message-box-warning": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-interface-message-box-warning", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value), Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'))); + }, + }, + "border-color-interface-message-box-error": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: false, + default: chroma("#dd3333"), + value: chroma("#dd3333"), + calculate: function (i) { + return i; + }, + }, + "background-color-interface-message-box-error": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#fee7e6"), + value: chroma("#fee7e6"), + calculateFrom: [ + "border-color-interface-message-box-error", + "background-color-content", + "background-color-body" + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.8), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.1)); + }, + }, + "text-color-interface-message-box-error": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-interface-message-box-error", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value), Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'))); + }, + }, + "border-color-interface-message-box-success": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: false, + default: chroma("#14866d"), + value: chroma("#14866d"), + calculate: function (i) { + return i; + }, + }, + "background-color-interface-message-box-success": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#d5fdf4"), + value: chroma("#d5fdf4"), + calculateFrom: [ + "border-color-interface-message-box-success", + "background-color-content", + "background-color-body" + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.8), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.1)); + }, + }, + "text-color-interface-message-box-success": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-interface-message-box-success", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value), Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'))); + }, + }, + "border-color-user-message": { + fieldset: "lakeus-theme-designer-body", + rule: "manual", + input: "color", + allowAlpha: false, + default: chroma("#ffa500"), + value: chroma("#ffa500"), + calculate: function (i) { + return i; + }, + }, + "background-color-user-message": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#ffce7b"), + value: chroma("#ffce7b"), + calculateFrom: [ + "border-color-user-message", + "background-color-content", + "background-color-body" + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.8), Lakeus.variablesList[this.calculateFrom[0]].value.luminance(0.1)); + }, + }, + "text-color-user-message": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-user-message", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value), Lakeus.variablesList[this.calculateFrom[2]].value).hex('rgb'))); + }, + }, + "background-color-wikitable": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#f8f9fa"), + value: chroma("#f8f9fa"), + calculateFrom: [ + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value)), Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value)), 0.1, 0.1); + }, + }, + "text-color-wikitable": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#202122"), + value: chroma("#202122"), + calculateFrom: [ + "background-color-wikitable", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value)).hex('rgb'), chroma("#000000").brighten(0.05), chroma("#ffffff").darken(0.05)); + }, + }, + "border-color-wikitable": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#a2a9b1"), + value: chroma("#a2a9b1"), + calculateFrom: [ + "background-color-wikitable", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 1, 1.5); + }, + }, + "background-color-wikitable-table-head": { + fieldset: "lakeus-theme-designer-body", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#eaecf0"), + value: chroma("#eaecf0"), + calculateFrom: [ + "background-color-wikitable", + "background-color-content", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 1, 0.2); + }, + }, + "background-color-portlet-body": { + fieldset: "lakeus-theme-designer-portlet", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#ffffff"), + value: chroma("#ffffff"), + calculate: function (i) { + return i; + }, + }, + "background-color-portlet-item-hover": { + fieldset: "lakeus-theme-designer-portlet", + rule: "manual", + input: "color", + allowAlpha: true, + default: chroma("#000000").alpha(0.1), + value: chroma("#000000").alpha(0.1), + calculate: function (i) { + return i; + }, + }, + "background-color-portlet-item-focus": { + fieldset: "lakeus-theme-designer-portlet", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000").alpha(0.2), + value: chroma("#000000").alpha(0.2), + calculateFrom: [ + "background-color-portlet-item-hover", + "background-color-portlet-body" + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[1]].value.hex('rgb')), 0.2, 0.2)); + }, + }, + "border-color-portlet-body": { + fieldset: "lakeus-theme-designer-portlet", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#a2a9b1"), + value: chroma("#a2a9b1"), + calculateFrom: [ + "background-color-portlet-body", + "background-color-content" + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, chroma(Lakeus.getContrastYIQ(Lakeus.variablesList[this.calculateFrom[1]].value.hex('rgb')), 2, 2)); + }, + }, + "background-color-footer": { + fieldset: "lakeus-theme-designer-footer", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#eeeeee"), + value: chroma("#eeeeee"), + calculateFrom: [ + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[0]].value, 0.4, 0.4); + } + }, + "text-color-footer": { + fieldset: "lakeus-theme-designer-footer", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: true, + default: chroma("#000000"), + value: chroma("#000000"), + calculateFrom: [ + "background-color-footer", + "background-color-body", + ], + calculate: function (i) { + return i || chroma(Lakeus.getContrastYIQ(Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.variablesList[this.calculateFrom[1]].value).hex('rgb'))); + }, + }, + "color-footer-link": { + fieldset: "lakeus-theme-designer-basic", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#0645ad"), + value: chroma("#0645ad"), + calculateFrom: [ + "color-link", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value; + }, + }, + "color-footer-link--visited": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#0b0080"), + value: chroma("#0b0080"), + calculateFrom: [ + "color-footer-link", + "background-color-footer", + "background-color-body", + ], + calculate: function (i) { + return i || Lakeus.changeColorBrightnessByContrast(Lakeus.variablesList[this.calculateFrom[0]].value, Lakeus.calculateRGBAActualValue(Lakeus.variablesList[this.calculateFrom[1]].value, Lakeus.variablesList[this.calculateFrom[2]].value), 1, 1); + }, + }, + "color-footer-link--active": { + fieldset: "lakeus-theme-designer-global", + rule: "calculateWhenNotNeeded", + input: "color", + allowAlpha: false, + default: chroma("#faa700"), + value: chroma("#faa700"), + calculateFrom: [ + "color-footer-link", + ], + calculate: function (i) { + return i || Lakeus.variablesList[this.calculateFrom[0]].value.brighten(1); + }, + }, + }; + + function constructThemeDesignerBody() { + var fieldsetList = []; + var result = ''; + $.each(Lakeus.variablesList, function (k, v) { + if (!(fieldsetList.includes(v.fieldset))) { + fieldsetList.push(v.fieldset); + } + }) + for (fieldset of fieldsetList) { + var fieldsetElement = '
'; + var legendElement = '' + mw.message(fieldset) + ''; + var settingsElement = ''; + $.each(Lakeus.variablesList, function (k, v) { + if (v.fieldset === fieldset) { + settingsElement += constructVariableItem(k, v); + } + }); + fieldsetElement += legendElement + settingsElement + '
'; + result += fieldsetElement; + } + return result; + } + + function constructVariableItem(variableName, variableContent) { + var settingElement = '

'; + if (variableContent.input === 'color') { + settingElement += + ''; + } else if (variableContent.input === 'text') { + settingElement += + ''; + } else if (variableContent.input === 'textarea') { + settingElement += + ''; + } + + if (variableContent.rule === 'calculateWhenNotNeeded') { + settingElement += + ''; + } else if (variableContent.rule === 'calculateWhenNeeded') { + settingElement += + ''; + } + + settingElement += '

' + return settingElement; + } + + Lakeus.constructColorDatalist = function (id, presetColors) { + id = id || 'lakeus-theme-designer-preset-colors'; + // community-background-color (27) + presetColors = presetColors || ["#9cd6cc","#1b2a34","#1e5aa8","#1c58a7","#58ab41","#9dc3f7","#fcac00","#ffec6c","#ff9ecd","#8a12a8","#543324","#645a4c","#6c96bf","#dfc176","#3cb371","#aa4d8e","#cecece","#764d3b","#ff6d77","#469bc3","#19325a","#0e3e9a","#646464","#352100","#ad6140","#00451a","#545955","#91501c","#d3359d","#720012","#897d62","#069d9f","#d86d2c","#7f7f7f","#d0d0d0","#ae7a59","#d27744","#cf8a47","#78fc78","#ff8014","#ff94c2","#83724f","#898788","#bb805a","#ffffff","#923978","#8c00ff","#e0ffb0","#bdc6ad","#f5f3d7","#00852b","#cda4de","#d3f2ea","#97cbd9","#969696","#ffc995","#add9a8","#8a928d","#deea92","#f9a777","#fa9c1c","#fecccf","#f9b7a5","#00aaa4","#afbed6","#ffd67f","#564e9d","#a5ca18","#abd9ff","#901f76","#656761","#ffff80","#68c3e2","#7396c8","#aa7d55","#f785b1","#7fc475","#a06eb9","#441a91","#b7d425","#f58624","#4861ac","#5b7590","#0a1327","#d60026","#c27f53","#008e3c","#6d6e5c","#dbac34","#6a7944","#767676","#eeeeee","#77774e","#d67923","#484d48","#aa7f2e","#deac66","#a0a0a0","#989b99","#f6f2df","#f6a9bb","#671f81","#b40000","#5f3109","#ac8247","#8e5597","#fcfcfc","#f5cd2f","#f4f4f4","#fac80a","#872b17","#f06d61","#70819a","#708e7c","#75657d","#88605e","#77c9d8","#ab6038","#b0a06f","#635f52","#000000","#56e646","#fcb76d","#96709f","#0020a0","#df6695","#fbe890","#237841","#aee9ef","#6babe4","#7dc291","#559ab7","#c0ff00","#ff800d","#dab000","#f08f1c","#fc97ac","#a5a5cb","#c91a09","#c281a5","#c1dff0","#c8c8c8","#bcb4a5","#fdc383","#26469a","#e2f99a",]; + var result = ''; + for (var i = 0; i < presetColors.length; i++) { + result += ''; + return result; + } + + function constructThemeDesigner() { + $("body").append( + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '

' + mw.message("lakeus-theme-designer") + '

' + + Lakeus.constructColorDatalist() + + constructThemeDesignerBody() + + '
' + + '' + mw.message("lakeus-theme-designer-danger-zone") + '' + + '' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + ); + $(".lakeus-theme-designer-auto-calculate-checkbox").on('change', function () { + var checked = $(this).prop('checked'); + $("#" + $(this).attr("name").replace("auto-calculate-", "lakeus-theme-designer-input-")).prop('disabled', checked); + $("#" + $(this).attr("name").replace("auto-calculate-", "lakeus-theme-designer-input-") + "-alpha").prop('disabled', checked); + }); + $(".lakeus-theme-designer-auto-calculate-checkbox:checked").each(function () { + $("#" + $(this).attr("name").replace("auto-calculate-", "lakeus-theme-designer-input-")).prop('disabled', true); + $("#" + $(this).attr("name").replace("auto-calculate-", "lakeus-theme-designer-input-") + "-alpha").prop('disabled', true); + }); + $("#lakeus-theme-designer-color-picker-fallback-checkbox").on('change', function () { + var checked = $(this).prop('checked'); + $(".lakeus-theme-designer-input-color").attr("type", (checked ? "text" : "color")); + }); + $("#lakeus-theme-designer-copy-theme-button").click(function (e) { e.preventDefault; Lakeus.copyTheme(); }); + $("#lakeus-theme-designer-paste-theme-button").click(function (e) { e.preventDefault; Lakeus.pasteThemeFromCurrentSettings(); }); + $("#lakeus-theme-designer-test-theme-button").click(function (e) { e.preventDefault; Lakeus.testTheme(); }); + $("#lakeus-theme-designer-clear-theme-button").click(function (e) { e.preventDefault; Lakeus.clearTheme(); }); + $("#lakeus-theme-designer-reset-theme-button").click(function (e) { e.preventDefault; Lakeus.resetFormFromVariablesList(); }); + $("#lakeus-theme-designer-reload-button").click(function (e) { e.preventDefault; Lakeus.reloadThemeDesigner(); }); + $("#lakeus-theme-designer-invert-auto-calculate-selection-button").click(function (e) { e.preventDefault; Lakeus.invertAutoCalculateSelection(); }); + $("#lakeus-theme-designer-portlet-body").submit(function (e) { e.preventDefault; }); + Lakeus.updateVariablesListFromForm(); + } + var stylePath = mw.config.get('stylepath'); + $('head').append(''); + constructThemeDesigner(); + console.log("[Lakeus] " + mw.message('lakeus-theme-designer-all-loaded')); + }); + }); +}; + +/* Moving these functions into the init function */ + +Lakeus.updateVariablesListFromForm = function () { + $.each(Lakeus.variablesList, function (k, v) { + var inputElement = $("#lakeus-theme-designer-input-" + k); + if (!(inputElement.prop('disabled'))) { + if (inputElement.attr('type') === 'color') { + var inputElementAlpha = $("#lakeus-theme-designer-input-" + k + "-alpha"); + Lakeus.variablesList[k].value = chroma(inputElement.val()).alpha((Number(inputElementAlpha.val()) <= 1 && Number(inputElementAlpha.val()) >= 0) ? Number(inputElementAlpha.val()) : 1); + } else { + Lakeus.variablesList[k].value = inputElement.val(); + } + } else { + Lakeus.variablesList[k].value = Lakeus.variablesList[k].calculate(undefined); + } + }); +}; + +Lakeus.updateFormFromVariablesList = function () { + $.each(Lakeus.variablesList, function (k, v) { + var inputElement = $("#lakeus-theme-designer-input-" + k); + if (v.value) { + if (v.input === 'color') { + inputElement.val(v.value.hex('rgb')); + $("#lakeus-theme-designer-input-" + k + "-alpha").val(v.value.alpha()); + } else { + inputElement.val(v.value); + } + } + }) +} + +Lakeus.resetFormFromVariablesList = function () { + $.each(Lakeus.variablesList, function (k, v) { + var inputElement = $("#lakeus-theme-designer-input-" + k); + if (v.input === 'color') { + inputElement.val(v.default.hex('rgb')); + $("#lakeus-theme-designer-input-" + k + "-alpha").val(v.default.alpha()); + } else { + inputElement.val(v.default); + } + }) +} + +Lakeus.generateTheme = function () { + var result = ':root {\n'; + $.each(Lakeus.variablesList, function (k, v) { + if (v.input === 'color') { + if (v.value.alpha() < 1) { + result += ' ' + k + ': ' + v.value.css() + ';\n'; + } else { + result += ' ' + k + ': ' + v.value.hex() + ';\n'; + } + } else { + result += ' ' + '--' + k + ': ' + v.value + ';\n'; + } + }); + result += '}\n'; + return result; +} + +Lakeus.copyTheme = function () { + if (!($("body").attr("testing") === 'true')) { + Lakeus.updateVariablesListFromForm(); + } + + generatedCode = Lakeus.generateTheme(); + if (navigator.clipboard) { + navigator.clipboard.writeText(generatedCode).then(function () { + mw.notify(mw.message("lakeus-theme-designer-copied")); + }, function () { + mw.notify(mw.message("lakeus-theme-designer-copy-failed")); + $("lakeus-theme-designer-result").empty().append( + '
' +
+                generatedCode +
+                '
' + ); + }); + } else { + mw.notify(mw.message("lakeus-theme-designer-copy-failed")); + $("lakeus-theme-designer-result").empty().append( + '
' +
+            generatedCode +
+            '
' + ); + } +} + +Lakeus.pasteThemeFromCurrentSettings = function () { + $.each(Lakeus.variablesList, function (k, v) { + if (v.input === 'color') { + Lakeus.variablesList[k].value = chroma(window.getComputedStyle(document.querySelector('html')).getPropertyValue("--" + k)) || v.default; + } else { + Lakeus.variablesList[k].value = window.getComputedStyle(document.querySelector('html')).getPropertyValue("--" + k) || v.default; + } + }) + Lakeus.updateFormFromVariablesList(); +} + +Lakeus.testTheme = function () { + Lakeus.updateVariablesListFromForm(); + Lakeus.updateFormFromVariablesList(); + $("body").attr("testing", "true"); + $("#lakeus-theme-designer-test-theme-button").prop('disabled', true); + $("#lakeus-theme-designer-clear-theme-button").prop('disabled', false); + $(".lakeus-theme-designer-fieldset").prop('disabled', true); + $.each(Lakeus.variablesList, function (k, v) { + if (v.input === 'color') { + if (v.value.alpha() < 1) { + document.querySelector('html').style.setProperty('--' + k, v.value.css()); + } else { + document.querySelector('html').style.setProperty("--" + k, v.value.hex()); + } + } else { + document.querySelector('html').style.setProperty("--" + k, v.value); + } + }); +} + +Lakeus.clearTheme = function () { + $("body").attr("testing", "false"); + $("#lakeus-theme-designer-test-theme-button").prop('disabled', false); + $("#lakeus-theme-designer-clear-theme-button").prop('disabled', true); + $(".lakeus-theme-designer-fieldset").prop('disabled', false); + $.each(Lakeus.variablesList, function (k, v) { + document.querySelector('html').style.removeProperty("--" + k); + }); +} + +Lakeus.invertAutoCalculateSelection = function () { + $(".lakeus-theme-designer-auto-calculate-checkbox").each(function () { + var checked = $(this).prop('checked'); + $(this).prop('checked', !checked).trigger('change'); + }); +} + +Lakeus.unloadThemeDesigner = function () { + $("#lakeus-theme-designer").remove(); + $("#lakeus-theme-designer-style").remove(); +} + +Lakeus.reloadThemeDesigner = function () { + Lakeus.unloadThemeDesigner(); + Lakeus.initThemeDesigner(); +} + +Lakeus.validateContrast = function (color1, color2, contrast) { + return (chroma.contrast(color1, color2) >= (contrast || 4.5) ? true : false) +} + +/* Load Theme Designer when enabled in user's preferences */ + +$.when(mw.loader.using(['mediawiki.api', 'mediawiki.jqueryMsg', 'user.defaults']), $.ready).then(function () { + if (mw.user.options.get('lakeus-enable-theme-designer')) { + Lakeus.initThemeDesigner(); + } +}); \ No newline at end of file diff --git a/resources/variables.less b/resources/variables.less index 244d8a6..1fd3fb6 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -3,19 +3,28 @@ /* Make less variables to CSS ones */ :root { --background-color-base: white; - --background-color-article: white; + --background-color-body: white; --background-color-content: white; --background-color-footer: #eee; --background-color-toggle-list: white; --background-color-portlet-body: white; --background-color-toggle-list-card: #eee; - --background-color-toggle-list-item-hover: #eee; - --background-color-toggle-list-item-focus: #ccc; - --background-color-portlet-item-hover: #eee; - --background-color-portlet-item-focus: #ccc; + --background-color-toggle-list-item-hover: rgba(0, 0, 0, 0.1); + --background-color-toggle-list-item-focus: rgba(0, 0, 0, 0.2); + --background-color-portlet-item-hover: rgba(0, 0, 0, 0.1); + --background-color-portlet-item-focus: rgba(0, 0, 0, 0.2); --background-color-edit-options: #eee; --background-color-search-suggestions: #fff; --background-color-search-suggestions-current: #1d5492; + --background-color-search-input: #fff; + --background-color-toc: #f8f9fa; + --background-color-interface-message-box-neutral: #eaecf0; + --background-color-interface-message-box-error: #fee7e6; + --background-color-interface-message-box-warning: #fef6e7; + --background-color-interface-message-box-success: #d5fdf4; + --background-color-user-message: #ffce7b; + --background-color-wikitable: #f8f9fa; + --background-color-wikitable-table-head: #eaecf0; --border-color-edit-options: #c8ccd1; --border-color-content: #ccc; --border-color-toggle-list: #ddd; @@ -23,27 +32,62 @@ --border-color-search-bar: var(--color-gray-2); --border-color-portlet-body: var(--color-gray); --border-color-header-tab: var(--color-gray-2); - --subheader-color-toggle-list: rgba( 0, 0, 0, 0.6 ); - --logo-text-color-toggle-list: inherit; + --border-color-toc: #a2a9b1; + --border-color-interface-message-box-neutral: #a2a9b1; + --border-color-interface-message-box-error: #d33; + --border-color-interface-message-box-warning: #fc3; + --border-color-interface-message-box-success: #14866d; + --border-color-user-message: #ffa500; + --border-color-wikitable: #a2a9b1; + --subheader-color-toggle-list: #6a6a6a; + --logo-text-color-toggle-list: #000000; + --text-color-toggle-list-item: #1c1c1c; + --text-color-toggle-list-item-hover: #3a3a3a; + --text-color-toggle-list-item-focus: #3a3a3a; + --text-color-content: #000000; + --text-color-header: #000000; + --text-color-body: #000000; + --text-color-footer: #000000; + --text-color-interface-message-box-neutral: #000000; + --text-color-interface-message-box-error: #000000; + --text-color-interface-message-box-warning: #000000; + --text-color-interface-message-box-success: #000000; + --text-color-user-message: #000000; + --text-color-wikitable: #202122; + --icon-filter-header: unset; --color-search-suggestions-text: #000; --color-search-suggestions-text-current: #fff; --color-tagline: var(--color-base); --color-accent-header-tab: var(--color-base); + --color-accent-header-tab-selected: #54595d; + --color-accent-header-tab-new: #54595d; --color-header: white; --color-base: #54595d; --color-gray: #a2a9b1; --color-gray-2: #eaecf0; --color-link: #0645ad; --color-link--visited: #0b0080; + --color-link--active: #faa700; + --color-link-new: #d33; + --color-link-new--visited: #a55858; + --color-link-new--active: #faa700; + --color-link-external: #36b; + --color-link-external--visited: #636; + --color-link-external--active: #b63; + --color-footer-link: #0645ad; + --color-footer-link--visited: #0b0080; + --color-footer-link--active: #faa700; + --color-toc-number: #202122; --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif; --font-family-headings: var(--font-family-serif); --elevation: 0 2px 2px rgba( 0, 0, 0, 10% ); + --header-elevation: var(--elevation); --mask-background: rgba( 0, 0, 0, 0.8 ); } @background-color-base: var( --background-color-base ); -@background-color-article: var( --background-color-article ); +@background-color-body: var( --background-color-body ); @background-color-content: var( --background-color-content ); @background-color-footer: var( --background-color-footer ); @background-color-toggle-list: var( --background-color-toggle-list ); @@ -54,6 +98,15 @@ @background-color-edit-options: var( --background-color-edit-options ); @background-color-search-suggestions: var( --background-color-search-suggestions ); @background-color-search-suggestions-current: var( --background-color-search-suggestions-current ); +@background-color-search-input: var( --background-color-search-input ); +@background-color-toc: var( --background-color-toc ); +@background-color-interface-message-box-neutral: var( --background-color-interface-message-box-neutral ); +@background-color-interface-message-box-error: var( --background-color-interface-message-box-error ); +@background-color-interface-message-box-warning: var( --background-color-interface-message-box-warning ); +@background-color-interface-message-box-success: var( --background-color-interface-message-box-success ); +@background-color-user-message: var( --background-color-user-message ); +@background-color-wikitable: var( --background-color-wikitable ); +@background-color-wikitable-table-head: var( --background-color-wikitable-table-head ); @border-color-edit-options: var( --border-color-edit-options ); @background-color-portlet-item-hover: var( --background-color-portlet-item-hover ); @background-color-portlet-item-focus: var( --background-color-portlet-item-focus ); @@ -63,18 +116,52 @@ @border-color-search-bar: var( --border-color-search-bar ); @border-color-portlet-body: var( --border-color-portlet-body ); @border-color-header-tab: var( --border-color-header-tab ); +@border-color-toc: var( --border-color-toc ); +@border-color-interface-message-box-neutral: var( --border-color-interface-message-box-neutral ); +@border-color-interface-message-box-error: var( --border-color-interface-message-box-error ); +@border-color-interface-message-box-warning: var( --border-color-interface-message-box-warning ); +@border-color-interface-message-box-success: var( --border-color-interface-message-box-success ); +@border-color-user-message: var( --border-color-user-message ); +@border-color-wikitable: var( --border-color-wikitable ); @subheader-color-toggle-list: var( --subheader-color-toggle-list ); @logo-text-color-toggle-list: var( --logo-text-color-toggle-list ); +@text-color-content: var( --text-color-content ); +@text-color-header: var( --text-color-header ); +@text-color-toggle-list-item: var( --text-color-toggle-list-item ); +@text-color-toggle-list-item-hover: var( --text-color-toggle-list-item-hover ); +@text-color-toggle-list-item-focus: var( --text-color-toggle-list-item-focus ); +@text-color-body: var( --text-color-body ); +@text-color-footer: var( --text-color-footer ); +@text-color-interface-message-box-neutral: var( --text-color-interface-message-box-neutral ); +@text-color-interface-message-box-error: var( --text-color-interface-message-box-error ); +@text-color-interface-message-box-warning: var( --text-color-interface-message-box-warning ); +@text-color-interface-message-box-success: var( --text-color-interface-message-box-success ); +@text-color-user-message: var( --text-color-user-message ); +@text-color-wikitable: var( --text-color-wikitable ); +@icon-filter-header: var( --icon-filter-header ); @color-search-suggestions-text: var( --color-search-suggestions-text ); @color-search-suggestions-text-current: var( --color-search-suggestions-text-current ); @color-tagline: var( --color-tagline ); @color-accent-header-tab: var( --color-accent-header-tab ); +@color-accent-header-tab-selected: var( --color-accent-header-tab-selected ); +@color-accent-header-tab-new: var( --color-accent-header-tab-new ); @color-header: var( --color-header ); @color-base: var( --color-base ); @color-gray: var( --color-gray ); @color-gray-2: var( --color-gray-2 ); @color-link: var( --color-link ); @color-link--visited: var( --color-link--visited ); +@color-link--active: var( --color-link--active ); +@color-link-new: var( --color-link-new ); +@color-link-new--visited: var( --color-link-new--visited ); +@color-link-new--active: var( --color-link-new--active ); +@color-link-external: var( --color-link-external ); +@color-link-external--visited: var( --color-link-external--visited ); +@color-link-external--active: var( --color-link-external--active ); +@color-footer-link: var( --color-footer-link ); +@color-footer-link--visited: var( --color-footer-link--visited ); +@color-footer-link--active: var( --color-footer-link--active ); +@color-toc-number: var( --color-toc-number ); @font-family: var( --font-family ); @font-family-headings: var( --font-family-headings ); @font-family-serif: var( --font-family-serif ); @@ -83,5 +170,6 @@ @width-breakpoint-tablet: 720px; @width-breakpoint-semi-mobile: 500px; @width-breakpoint-mobile: 320px; +@header-elevation: var( --header-elevation ); @elevation: var( --elevation ); @mask-background: var( --mask-background ); \ No newline at end of file diff --git a/skin.json b/skin.json index 9a191f1..c7187ba 100644 --- a/skin.json +++ b/skin.json @@ -1,6 +1,6 @@ { "name": "Lakeus", - "version": "1.0.20", + "version": "1.1.0", "namemsg": "skinname-lakeus", "descriptionmsg": "lakeus-skin-desc", "url": "https://github.com/lakejason0/mediawiki-skins-Lakeus", @@ -21,7 +21,7 @@ "lakeus": { "class": "SkinLakeus", "services": [ - "LocalServerObjectCache" + "LocalServerObjectCache" ], "args": [ { @@ -32,7 +32,9 @@ "otherlanguages", "tagline", "lakeus-openmainmenu", - "lakeus-articlecount" + "lakeus-articlecount", + "lakeus-preferences-enable-theme-designer", + "lakeus-preferences-enable-theme-designer-desc" ], "styles": [ "mediawiki.ui.icon", @@ -41,7 +43,8 @@ "skins.lakeus.styles" ], "scripts": [ - "skins.lakeus" + "skins.lakeus", + "skins.lakeus.designer" ], "responsive": true } @@ -90,6 +93,127 @@ "packageFiles": [ "resources/skin.js" ] + }, + "skins.lakeus.designer": { + "es6": true, + "targets": [ + "desktop", + "mobile" + ], + "messages": [ + "lakeus-theme-designer", + "lakeus-theme-designer-system-messages-loaded", + "lakeus-theme-designer-all-loaded", + "lakeus-theme-designer-auto-calculate", + "lakeus-theme-designer-copy-theme", + "lakeus-theme-designer-paste-theme", + "lakeus-theme-designer-test-theme", + "lakeus-theme-designer-clear-theme", + "lakeus-theme-designer-reset-theme", + "lakeus-theme-designer-invert-auto-calculate-selection", + "lakeus-theme-designer-copied", + "lakeus-theme-designer-copy-failed", + "lakeus-theme-designer-reload", + "lakeus-theme-designer-color-picker-fallback", + "lakeus-theme-designer-alpha-channel", + "lakeus-theme-designer-basic", + "lakeus-theme-designer-color-primary", + "lakeus-theme-designer-color-secondary", + "lakeus-theme-designer-global", + "lakeus-theme-designer-background-color-base", + "lakeus-theme-designer-color-link", + "lakeus-theme-designer-color-link--visited", + "lakeus-theme-designer-color-link--active", + "lakeus-theme-designer-color-link-new", + "lakeus-theme-designer-color-link-new--visited", + "lakeus-theme-designer-color-link-new--active", + "lakeus-theme-designer-color-link-footer", + "lakeus-theme-designer-color-link-footer--visited", + "lakeus-theme-designer-color-link-footer--active", + "lakeus-theme-designer-color-link-external", + "lakeus-theme-designer-color-link-external--visited", + "lakeus-theme-designer-color-link-external--active", + "lakeus-theme-designer-elevation", + "lakeus-theme-designer-font-family", + "lakeus-theme-designer-font-family-serif", + "lakeus-theme-designer-page-header", + "lakeus-theme-designer-color-header", + "lakeus-theme-designer-header-elevation", + "lakeus-theme-designer-icon-filter-header", + "lakeus-theme-designer-background-color-search-suggestions", + "lakeus-theme-designer-border-color-search-suggestions", + "lakeus-theme-designer-color-search-suggestions-text", + "lakeus-theme-designer-background-color-search-suggestions-current", + "lakeus-theme-designer-color-search-suggestions-text-current", + "lakeus-theme-designer-background-color-search-input", + "lakeus-theme-designer-border-color-search-bar", + "lakeus-theme-designer-toggle-list", + "lakeus-theme-designer-background-color-toggle-list", + "lakeus-theme-designer-background-color-toggle-list-card", + "lakeus-theme-designer-logo-text-color-toggle-list", + "lakeus-theme-designer-background-color-toggle-list-item-hover", + "lakeus-theme-designer-background-color-toggle-list-item-focus", + "lakeus-theme-designer-border-color-toggle-list", + "lakeus-theme-designer-subheader-color-toggle-list", + "lakeus-theme-designer-mask-background", + "lakeus-theme-designer-body", + "lakeus-theme-designer-background-color-content", + "lakeus-theme-designer-background-color-body", + "lakeus-theme-designer-border-color-content", + "lakeus-theme-designer-color-accent-header-tab", + "lakeus-theme-designer-border-color-header-tab", + "lakeus-theme-designer-color-tagline", + "lakeus-theme-designer-font-family-headings", + "lakeus-theme-designer-background-color-edit-options", + "lakeus-theme-designer-border-color-edit-options", + "lakeus-theme-designer-background-color-toc", + "lakeus-theme-designer-border-color-toc", + "lakeus-theme-designer-color-toc-number", + "lakeus-theme-designer-border-color-interface-message-box-neutral", + "lakeus-theme-designer-background-color-interface-message-box-neutral", + "lakeus-theme-designer-text-color-interface-message-box-neutral", + "lakeus-theme-designer-border-color-interface-message-box-warning", + "lakeus-theme-designer-background-color-interface-message-box-warning", + "lakeus-theme-designer-text-color-interface-message-box-warning", + "lakeus-theme-designer-border-color-interface-message-box-error", + "lakeus-theme-designer-background-color-interface-message-box-error", + "lakeus-theme-designer-text-color-interface-message-box-error", + "lakeus-theme-designer-border-color-interface-message-box-success", + "lakeus-theme-designer-background-color-interface-message-box-success", + "lakeus-theme-designer-text-color-interface-message-box-success", + "lakeus-theme-designer-border-color-user-message", + "lakeus-theme-designer-background-color-user-message", + "lakeus-theme-designer-text-color-user-message", + "lakeus-theme-designer-background-color-wikitable", + "lakeus-theme-designer-border-color-wikitable", + "lakeus-theme-designer-background-color-wikitable-table-head", + "lakeus-theme-designer-text-color-wikitable", + "lakeus-theme-designer-portlet", + "lakeus-theme-designer-background-color-portlet-body", + "lakeus-theme-designer-background-color-portlet-item-hover", + "lakeus-theme-designer-background-color-portlet-item-focus", + "lakeus-theme-designer-border-color-portlet-body", + "lakeus-theme-designer-footer", + "lakeus-theme-designer-background-color-footer", + "lakeus-theme-designer-text-color-footer", + "lakeus-theme-designer-text-color-toggle-list-item", + "lakeus-theme-designer-text-color-toggle-list-item-hover", + "lakeus-theme-designer-text-color-toggle-list-item-focus", + "lakeus-theme-designer-text-color-content", + "lakeus-theme-designer-text-color-header", + "lakeus-theme-designer-text-color-body", + "lakeus-theme-designer-color-accent-header-tab-selected", + "lakeus-theme-designer-color-accent-header-tab-new", + "lakeus-theme-designer-danger-zone" + ], + "packageFiles": [ + "resources/themeDesigner.js" + ], + "dependencies": [ + "mediawiki.api", + "mediawiki.jqueryMsg", + "user.defaults" + ] } }, "ResourceModuleSkinStyles": { @@ -105,6 +229,12 @@ "AutoloadNamespaces": { "Lakeus\\": "includes/" }, + "Hooks": { + "GetPreferences": "Lakeus\\Hooks::onGetPreferences" + }, + "DefaultUserOptions": { + "lakeus-enable-theme-designer": 0 + }, "config": { "LakeusShowRepositoryLink": { "value": true, @@ -115,4 +245,4 @@ "description": "Whether to add a border to site notice. Useful for plain text notices." } } -} +} \ No newline at end of file