chuijs 3.6.2 → 3.6.4

package/framework/appLayout/default/main_theme_style.css

@@ -1,101 +1,118 @@
-@media (prefers-color-scheme: light) {
-    :root {
-        /* Текст */
-        --text_color: rgb(45, 45, 45);
-        --text_color_disabled: rgba(45, 45, 45, 0.65);
-        --text_color_hover: rgb(255, 255, 255);
-        --text_color_hover_disable: rgba(255, 255, 255, 0.65);
-        /* Основные цвета */
-        --main_background: rgb(255, 255, 255);
-        --header_background: rgba(226, 226, 226, 0.65);
-        --header_background_drop: rgb(246, 246, 246, 1);
-        /* Обводка */
-        --border_color: rgb(240, 240, 240);
-        /* Элементы */
-        /* Кнопка */
-        --button_border_color: rgb(240, 240, 240);
-        --button_border_color_hover: rgb(0, 122, 245);
-        --button_background: rgb(240, 240, 240);
-        --button_background_hover: rgb(0, 122, 245);
-        --button_background_disabled: rgba(240, 240, 240, 0.65);
-        /* Модальное окно */
-        --modal_background: rgba(255, 255, 255, 0.7);
-        /* Элементы */
-        --element_background: rgb(240, 240, 240);
-        --element_background_disabled: rgba(240, 240, 240, 0.65);
-        --element_background_2: rgb(226, 226, 226);
-        --element_background_disabled_2: rgba(226, 226, 226, 0.65);
-        --element_background_prime: rgb(0, 102, 225);
-        --element_background_disabled_prime: rgba(0, 102, 225, 0.65);
-        /* Акцент */
-        --blue_prime_background: rgb(0, 122, 245);
-        --blue_prime_background_trans: rgba(0, 122, 245, 0.65);
-        --red_prime_background: rgb(246, 52, 40);
-        /* Бэйджи */
-        --badge_error_back: rgba(255, 59, 48, 0.5);
-        --badge_error_text: rgb(194, 6, 24);
-        --badge_success_back: rgba(52, 199, 89, 0.5);
-        --badge_success_text: rgb(0, 112, 24);
-        --badge_cancel_back: rgba(142, 142, 147, 0.5);
-        --badge_cancel_text: rgb(97, 97, 101);
-        --badge_warning_back: rgba(255, 204, 0, 0.5);
-        --badge_warning_text: rgb(146, 81, 0);
-        /* Аудиоплеер */
-        --ap_input_background: rgba(255, 255, 255, 0.65);
-        --ap_main_background: rgba(226, 226, 226, 0.65);
-        --ap_main_background_2: rgba(220, 220, 220, 0.65);
-        --ap_slider_background: rgba(220, 220, 220, 0.65);
-        --ap_slider_buf_background: rgba(0, 122, 245, 0.65);
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        /* Текст */
-        --text_color: rgb(255, 255, 255);
-        --text_color_disabled: rgba(255, 255, 255, 0.65);
-        --text_color_hover: rgb(255, 255, 255);
-        --text_color_hover_disable: rgba(255, 255, 255, 0.65);
-        /* Основные цвета */
-        --main_background: rgb(27, 27, 27);
-        --header_background: rgba(40, 40, 40, 0.65);
-        --header_background_drop: rgba(48, 48, 48, 1);
-        /* Обводка */
-        --border_color: rgb(54, 54, 54);
-        /* Элементы */
-        /* Кнопка */
-        --button_border_color: rgb(54, 54, 54);
-        --button_border_color_hover: rgb(64, 156, 255);
-        --button_background: rgb(54, 54, 54);
-        --button_background_hover: rgb(64, 156, 255);
-        --button_background_disabled: rgba(54, 54, 54, 0.65);
-        /* Модальное окно */
-        --modal_background: rgba(27, 27, 27, 0.7);
-        /* Элементы */
-        --element_background: rgb(54, 54, 54);
-        --element_background_disabled: rgba(54, 54, 54, 0.65);
-        --element_background_2: rgb(68, 68, 68);
-        --element_background_disabled_2: rgba(68, 68, 68, 0.65);
-        --element_background_prime: rgb(34, 126, 225);
-        --element_background_disabled_prime: rgba(34, 126, 225, 0.65);
-        /* Акцент */
-        --blue_prime_background: rgb(64, 156, 255);
-        --blue_prime_background_trans: rgba(64, 156, 255, 0.65);
-        --red_prime_background: rgb(255, 105, 97);
-        /* Бэйджи */
-        --badge_error_back: rgba(255, 69, 58, 0.5);
-        --badge_error_text: rgb(255, 105, 94);
-        --badge_success_back: rgba(48, 209, 88, 0.5);
-        --badge_success_text: rgb(49, 222, 75);
-        --badge_cancel_back: rgba(142, 142, 147, 0.5);
-        --badge_cancel_text: rgb(182, 182, 187);
-        --badge_warning_back: rgba(255, 214, 10, 0.5);
-        --badge_warning_text: rgb(255, 212, 38);
-        /* Аудиоплеер */
-        --ap_input_background: rgba(30, 30, 30, 0.65);
-        --ap_main_background: rgba(40, 40, 40, 0.65);
-        --ap_main_background_2: rgba(73, 73, 73, 0.65);
-        --ap_slider_background: rgba(73, 73, 73, 0.65);
-        --ap_slider_buf_background: rgba(64, 156, 255, 0.65);
-    }
-}
+/* Палитры в стиле Apple flat (macOS/iOS system colors).
+
+   Иерархия поверхностей повторяет iOS/macOS «grouped»:
+   - --main_background  — подложка страницы (светло-серая / чёрная);
+   - --element_background_2 — карточки и контент-блоки (белые / #1c1c1e);
+   - --element_background, --button_background — полупрозрачные нейтральные
+     заливки контролов (iOS systemFill), поэтому элемент читается и на белой
+     карточке, и на серой подложке, независимо от того, где он лежит;
+   - --element_background_hover — та же заливка, но плотнее (ховер контрола);
+   - --element_background_disabled_2 — полупрозрачный «белый» токен оставлен
+     для совместимости, хайрлайны рисуются через --border_color.
+
+   Прозрачность и blur оставлены только для «материалов», которые реально
+   всплывают над контентом (шапка, модалки, поповеры, меню, уведомления). */
+
+@media (prefers-color-scheme: light) {
+    :root {
+        /* Текст */
+        --text_color: #1d1d1f;
+        --text_color_disabled: rgba(60, 60, 67, 0.6);
+        --text_color_hover: #ffffff;
+        --text_color_hover_disable: rgba(255, 255, 255, 0.7);
+        /* Поверхности: серая подложка страницы + белые карточки */
+        --main_background: #f2f2f7;
+        --header_background: rgba(250, 250, 252, 0.72);
+        /* Обводка (hairline) */
+        --border_color: rgba(60, 60, 67, 0.18);
+        /* Кнопка */
+        --button_border_color: rgba(60, 60, 67, 0.2);
+        --button_border_color_hover: #007aff;
+        --button_background: rgba(120, 120, 128, 0.2);
+        --button_background_hover: #007aff;
+        --button_background_disabled: rgba(120, 120, 128, 0.09);
+        /* Модальное окно */
+        --modal_background: rgba(250, 250, 252, 0.78);
+        /* Элементы */
+        --element_background: rgba(120, 120, 128, 0.2);
+        --element_background_hover: rgba(120, 120, 128, 0.32);
+        --element_background_disabled: rgba(120, 120, 128, 0.09);
+        --element_background_2: #ffffff;
+        --element_background_disabled_2: rgba(255, 255, 255, 0.6);
+        --element_background_prime: #007aff;
+        --element_background_disabled_prime: rgba(0, 122, 255, 0.6);
+        /* Акцент */
+        --blue_prime_background: #007aff;
+        --blue_prime_background_trans: rgba(0, 122, 255, 0.6);
+        --red_prime_background: #ff3b30;
+        /* Бэйджи */
+        --badge_error_back: rgba(255, 59, 48, 0.16);
+        --badge_error_text: #d70015;
+        --badge_success_back: rgba(52, 199, 89, 0.16);
+        --badge_success_text: #248a3d;
+        --badge_cancel_back: rgba(142, 142, 147, 0.16);
+        --badge_cancel_text: #6c6c70;
+        --badge_warning_back: rgba(255, 204, 0, 0.2);
+        --badge_warning_text: #b25000;
+        /* Аудиоплеер: полупрозрачные заливки под backdrop-filter */
+        --ap_input_background: rgba(120, 120, 128, 0.18);
+        --ap_main_background: rgba(120, 120, 128, 0.16);
+        --ap_main_background_2: rgba(120, 120, 128, 0.26);
+        --ap_slider_background: rgba(120, 120, 128, 0.3);
+        --ap_slider_buf_background: rgba(0, 122, 255, 0.65);
+        /* Скроллбар */
+        --scrollbar_thumb: rgba(120, 120, 128, 0.45);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Текст */
+        --text_color: #ffffff;
+        --text_color_disabled: rgba(235, 235, 245, 0.6);
+        --text_color_hover: #ffffff;
+        --text_color_hover_disable: rgba(255, 255, 255, 0.7);
+        /* Основные цвета */
+        --main_background: #000000;
+        --header_background: rgba(28, 28, 30, 0.72);
+        /* Обводка (hairline) */
+        --border_color: rgba(255, 255, 255, 0.16);
+        /* Кнопка */
+        --button_border_color: rgba(255, 255, 255, 0.2);
+        --button_border_color_hover: #0a84ff;
+        --button_background: rgba(120, 120, 128, 0.3);
+        --button_background_hover: #0a84ff;
+        --button_background_disabled: rgba(120, 120, 128, 0.14);
+        /* Модальное окно */
+        --modal_background: rgba(30, 30, 32, 0.78);
+        /* Элементы */
+        --element_background: rgba(120, 120, 128, 0.3);
+        --element_background_hover: rgba(120, 120, 128, 0.45);
+        --element_background_disabled: rgba(120, 120, 128, 0.14);
+        --element_background_2: #1c1c1e;
+        --element_background_disabled_2: rgba(28, 28, 30, 0.6);
+        --element_background_prime: #0a84ff;
+        --element_background_disabled_prime: rgba(10, 132, 255, 0.6);
+        /* Акцент */
+        --blue_prime_background: #0a84ff;
+        --blue_prime_background_trans: rgba(10, 132, 255, 0.6);
+        --red_prime_background: #ff453a;
+        /* Бэйджи */
+        --badge_error_back: rgba(255, 69, 58, 0.2);
+        --badge_error_text: #ff6961;
+        --badge_success_back: rgba(48, 209, 88, 0.2);
+        --badge_success_text: #30d158;
+        --badge_cancel_back: rgba(142, 142, 147, 0.2);
+        --badge_cancel_text: #aeaeb2;
+        --badge_warning_back: rgba(255, 214, 10, 0.2);
+        --badge_warning_text: #ffd60a;
+        /* Аудиоплеер: полупрозрачные заливки под backdrop-filter */
+        --ap_input_background: rgba(120, 120, 128, 0.28);
+        --ap_main_background: rgba(120, 120, 128, 0.24);
+        --ap_main_background_2: rgba(120, 120, 128, 0.36);
+        --ap_slider_background: rgba(120, 120, 128, 0.42);
+        --ap_slider_buf_background: rgba(10, 132, 255, 0.65);
+        /* Скроллбар */
+        --scrollbar_thumb: rgba(120, 120, 128, 0.5);
+    }
+}

package/framework/components/chui_accordion/accordion.js

@@ -1,64 +1,64 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-
-class Accordion {
-    #name = require("randomstring").generate();
-    #chui_accordion = document.createElement(`chui_accordion`);
-    constructor(options = [ { b_text: undefined, p_text: undefined } ]) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Accordion');
-        options.forEach(element => {
-            let main_test = document.createElement(`chui_accordion_main_test`);
-            let ab = document.createElement('accordion_button')
-            ab.setAttribute('name', this.#name)
-            let bt = document.createElement('accordion_button_text')
-            bt.innerHTML = element.b_text
-            let barrow = document.createElement('accordion_button_arrow')
-            barrow.style.marginLeft = 'auto'
-            barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-            ab.appendChild(bt)
-            ab.appendChild(barrow)
-            let ap = document.createElement('accordion_panel')
-            /*if ((options.indexOf(elem) + 1) !== options.length) {
-                ap.style.marginBottom = 'var(--margin)'
-            }*/
-            let html = document.createElement('accordion_panel_html')
-            html.innerHTML = element.p_text
-            ap.appendChild(html)
-            main_test.appendChild(ab)
-            main_test.appendChild(ap)
-            this.#chui_accordion.appendChild(main_test)
-
-            if (options.indexOf(element) > 0) {
-                main_test.style.marginTop = "8px"
-            }
-
-            //ФУНКЦИИ
-            let test = main_test.children;
-            let i;
-            for (i = 0; i < test.length; i++) {
-                let elem = test[i];
-                if (elem.tagName === 'ACCORDION_BUTTON') {
-                    elem.addEventListener('click', (e) => {
-                        elem.classList.toggle('accordion_active')
-                        let panel = elem.nextElementSibling;
-                        if (panel.style.maxHeight) {
-                            elem.children[1].children[0].style.transform = 'rotate(0deg)'
-                            panel.style.maxHeight = null;
-                            elem.style.borderBottomLeftRadius = 'var(--border_radius)'
-                            elem.style.borderBottomRightRadius = 'var(--border_radius)'
-                        } else {
-                            elem.children[1].children[0].style.transform = 'rotate(180deg)'
-                            elem.style.borderBottomLeftRadius = '0px'
-                            elem.style.borderBottomRightRadius = '0px'
-                            panel.style.maxHeight = panel.scrollHeight + "px";
-                        }
-                    })
-                }
-            }
-        })
-    }
-    set() {
-        return this.#chui_accordion;
-    }
-}
-
+const {Icon, Icons} = require("../chui_icons/icons");
+
+class Accordion {
+    #name = require("randomstring").generate();
+    #chui_accordion = document.createElement(`chui_accordion`);
+    constructor(options = [ { b_text: undefined, p_text: undefined } ]) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Accordion');
+        options.forEach(element => {
+            let main_test = document.createElement(`chui_accordion_main_test`);
+            let ab = document.createElement('accordion_button')
+            ab.setAttribute('name', this.#name)
+            let bt = document.createElement('accordion_button_text')
+            bt.innerHTML = element.b_text
+            let barrow = document.createElement('accordion_button_arrow')
+            barrow.style.marginLeft = 'auto'
+            barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
+            ab.appendChild(bt)
+            ab.appendChild(barrow)
+            let ap = document.createElement('accordion_panel')
+            /*if ((options.indexOf(elem) + 1) !== options.length) {
+                ap.style.marginBottom = 'var(--margin)'
+            }*/
+            let html = document.createElement('accordion_panel_html')
+            html.innerHTML = element.p_text
+            ap.appendChild(html)
+            main_test.appendChild(ab)
+            main_test.appendChild(ap)
+            this.#chui_accordion.appendChild(main_test)
+
+            if (options.indexOf(element) > 0) {
+                main_test.style.marginTop = "8px"
+            }
+
+            //ФУНКЦИИ
+            let test = main_test.children;
+            let i;
+            for (i = 0; i < test.length; i++) {
+                let elem = test[i];
+                if (elem.tagName === 'ACCORDION_BUTTON') {
+                    elem.addEventListener('click', (e) => {
+                        elem.classList.toggle('accordion_active')
+                        let panel = elem.nextElementSibling;
+                        if (panel.style.maxHeight) {
+                            elem.children[1].children[0].style.transform = 'rotate(0deg)'
+                            panel.style.maxHeight = null;
+                            elem.style.borderBottomLeftRadius = 'var(--border_radius)'
+                            elem.style.borderBottomRightRadius = 'var(--border_radius)'
+                        } else {
+                            elem.children[1].children[0].style.transform = 'rotate(180deg)'
+                            elem.style.borderBottomLeftRadius = '0px'
+                            elem.style.borderBottomRightRadius = '0px'
+                            panel.style.maxHeight = panel.scrollHeight + "px";
+                        }
+                    })
+                }
+            }
+        })
+    }
+    set() {
+        return this.#chui_accordion;
+    }
+}
+
 exports.Accordion = Accordion

package/framework/components/chui_accordion/styles.css

@@ -1,76 +1,80 @@
-chui_accordion {
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-    width: max-content;
-    font-size: var(--font_default_size);
-    font-weight:400;
-    border: none;
-    margin: var(--margin);
-}
-
-chui_accordion_main_test {
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-    width: -webkit-fill-available;
-    font-size: var(--font_default_size);
-    font-weight:400;
-    border-radius: var(--border_radius);
-    border: none;
-}
-
-accordion_button {
-    background: var(--element_background);
-    cursor: pointer;
-    padding: var(--main_padding);
-    width: -webkit-fill-available;
-    text-align: left;
-    outline: none;
-    display: flex;
-    align-items: center;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    border: none;
-}
-
-accordion_panel {
-    background: var(--header_background);
-    padding: 0 10px;
-    display: block;
-    overflow: hidden;
-    width: -webkit-fill-available;
-    max-height: 0;
-    border-bottom-right-radius: var(--border_radius);
-    border-bottom-left-radius: var(--border_radius);
-    color: var(--text_color);
-}
-
-accordion_panel_html {
-    padding: 8px 0;
-    width: -webkit-fill-available;
-    display: flex;
-    border: none
-}
-
-accordion_button:hover {
-    background: var(--blue_prime_background);
-}
-
-accordion_button:hover accordion_button_text {
-    color: var(--text_color_hover);
-}
-
-accordion_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-.accordion_active {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-.accordion_active chui_icon {
-    background: transparent;
-    color: var(--text_color_hover);
+chui_accordion {
+    display: flex;
+    flex-direction: column;
+    height: max-content;
+    width: max-content;
+    font-size: var(--font_default_size);
+    font-weight:400;
+    border: none;
+    margin: var(--margin);
+}
+
+chui_accordion_main_test {
+    display: flex;
+    flex-direction: column;
+    height: max-content;
+    width: -webkit-fill-available;
+    font-size: var(--font_default_size);
+    font-weight:400;
+    border-radius: var(--border_radius);
+    border: none;
+}
+
+accordion_button {
+    background: var(--element_background);
+    cursor: pointer;
+    padding: var(--main_padding);
+    width: -webkit-fill-available;
+    text-align: left;
+    outline: none;
+    display: flex;
+    align-items: center;
+    border-radius: var(--border_radius);
+    color: var(--text_color);
+    border: none;
+}
+
+accordion_panel {
+    background: var(--element_background);
+    padding: 0 10px;
+    display: block;
+    overflow: hidden;
+    width: -webkit-fill-available;
+    max-height: 0;
+    border-bottom-right-radius: var(--border_radius);
+    border-bottom-left-radius: var(--border_radius);
+    color: var(--text_color);
+}
+
+accordion_panel_html {
+    padding: 8px 0;
+    width: -webkit-fill-available;
+    display: flex;
+    border: none
+}
+
+accordion_button:hover {
+    background: var(--blue_prime_background);
+}
+
+accordion_button:active {
+    background: var(--element_background_prime);
+}
+
+accordion_button:hover accordion_button_text {
+    color: var(--text_color_hover);
+}
+
+accordion_button:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+.accordion_active {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.accordion_active chui_icon {
+    background: transparent;
+    color: var(--text_color_hover);
 }

package/framework/components/chui_badge/badge.js

@@ -1,56 +1,56 @@
-const {setStyles, markdownToHtml, htmlToMarkdown} = require('../../modules/chui_functions');
-
-class Badge {
-    #chui_badge = document.createElement(`chui_badge`);
-    constructor(options = {
-        id: String(),
-        text: String(),
-        markdownText: String(),
-        style: undefined
-    }) {
-        setStyles(__dirname + "/styles.css", 'chUiJS_Badge');
-        if (options.id !== undefined) this.#chui_badge.id = options.id;
-        if (options.style !== undefined) this.#chui_badge.classList.add(options.style);
-        // Стили текста баджей
-        if (options.text !== undefined && options.markdownText !== undefined) {
-            throw new Error("Должна быть установлена одна опция text или markdownText");
-        } else {
-            if (options.text !== undefined) this.#chui_badge.innerText = options.text;
-            if (options.markdownText !== undefined) this.#chui_badge.innerHTML = markdownToHtml(options.markdownText);
-        }
-    }
-    // GET
-    getId() {
-        return this.#chui_badge.id;
-    }
-    getText() {
-        return this.#chui_badge.innerText;
-    }
-    getMarkdownText() {
-        return htmlToMarkdown(this.#chui_badge.innerHTML);
-    }
-    // SET
-    setText(text = String()) {
-        this.#chui_badge.innerText = text;
-    }
-    setMarkdownText(text = String()) {
-        this.#chui_badge.innerHTML = markdownToHtml(text);
-    }
-    setId(id = String()) {
-        this.#chui_badge.id = id;
-    }
-    setStyle(style = String()) {
-        this.#chui_badge.classList.add(style);
-    }
-    // RENDER
-    set() {
-        return this.#chui_badge;
-    }
-    static STYLE = {
-        ERROR: 'badge_error',
-        SUCCESS: 'badge_success',
-        WARNING: 'badge_warning'
-    }
-}
-
+const {setStyles, markdownToHtml, htmlToMarkdown} = require('../../modules/chui_functions');
+
+class Badge {
+    #chui_badge = document.createElement(`chui_badge`);
+    constructor(options = {
+        id: String(),
+        text: String(),
+        markdownText: String(),
+        style: undefined
+    }) {
+        setStyles(__dirname + "/styles.css", 'chUiJS_Badge');
+        if (options.id !== undefined) this.#chui_badge.id = options.id;
+        if (options.style !== undefined) this.#chui_badge.classList.add(options.style);
+        // Стили текста баджей
+        if (options.text !== undefined && options.markdownText !== undefined) {
+            throw new Error("Должна быть установлена одна опция text или markdownText");
+        } else {
+            if (options.text !== undefined) this.#chui_badge.innerText = options.text;
+            if (options.markdownText !== undefined) this.#chui_badge.innerHTML = markdownToHtml(options.markdownText);
+        }
+    }
+    // GET
+    getId() {
+        return this.#chui_badge.id;
+    }
+    getText() {
+        return this.#chui_badge.innerText;
+    }
+    getMarkdownText() {
+        return htmlToMarkdown(this.#chui_badge.innerHTML);
+    }
+    // SET
+    setText(text = String()) {
+        this.#chui_badge.innerText = text;
+    }
+    setMarkdownText(text = String()) {
+        this.#chui_badge.innerHTML = markdownToHtml(text);
+    }
+    setId(id = String()) {
+        this.#chui_badge.id = id;
+    }
+    setStyle(style = String()) {
+        this.#chui_badge.classList.add(style);
+    }
+    // RENDER
+    set() {
+        return this.#chui_badge;
+    }
+    static STYLE = {
+        ERROR: 'badge_error',
+        SUCCESS: 'badge_success',
+        WARNING: 'badge_warning'
+    }
+}
+
 exports.Badge = Badge