hrenpack-theme-style 1.0.0 → 2.0.0

package/README.md

@@ -0,0 +1,127 @@
+# hrenpack-theme-style
+## Описание
+`hrenpack-theme-style` — это пакет для быстрой настройки тематического оформления веб-сайтов с поддержкой светлой и тёмной темы. Он предоставляет готовые CSS-стили, компоненты для переключения тем и интеграцию с системными настройками пользователя.
+
+Пакет идеально подходит для проектов, где требуется гибкое управление цветовыми схемами с минимальными усилиями.
+
+## Установка
+
+```shell
+npm install hrenpack-theme-style
+```
+
+## Использование
+### Подключение стилей
+Добавьте следующие стили в ваш HTML-файл:
+
+```html
+<!-- Обязательно именно этот id! -->
+<link id="hrenpack-theme-stylesheet" rel="stylesheet" href="node_modules/hrenpack-theme-style/style.css">
+```
+
+### Подключение скриптов
+```html
+<!-- Подключите основной скрипт темы -->
+<script type="module" src="node_modules/hrenpack-theme-style/script.js"></script>
+
+<!-- Для работы темной темы -->
+<script type="module" src="node_modules/hrenpack-theme-style/dark-theme.js"></script>
+```
+
+### Добавление кнопки переключения темы
+Добавьте в HTML-разметку кнопку для переключения между темами:
+
+```html
+<div id="hrenpack-change-theme-div"> <!-- div с таким id не обязателен -->
+    <button id="hrenpack-toggle-theme" class="btn-hren">Переключить тему</button>
+</div>
+```
+
+Кнопка будет автоматически обработана скриптом `dark-theme.ts`.
+
+## Компоненты
+### Стили
+- `style.css` — базовые стили и CSS-переменные для светлой темы
+
+- `style_light.css` — расширение базовых стилей (импортирует `style.css`)
+
+- `style_dark.css` — переопределение переменных для тёмной темы
+
+### Скрипты
+- `script.js` — основной скрипт пакета
+
+- `dark-theme.js` — управление переключением тем, сохранение выбора в `localStorage` и cookies
+
+- `input-reversed.js` — утилита для обработки порядка элементов `input` и `label` внутри формы
+
+### CSS-переменные
+Пакет использует CSS-переменные для управления цветами. Основные переменные:
+
+- `--hrenpack-background` — цвет фона
+
+- `--hrenpack-foreground` — цвет текста
+
+- `--hrenpack-a-hover-coloк` — цвет ссылок при наведении
+
+- `--hrenpack-button-hover-color` — цвет кнопок при наведении
+
+- `--hrenpack-fcu-border-color` — цвет границ полей ввода
+
+- И многие другие
+
+Все переменные переопределяются в `style_dark.css` для тёмной темы.
+
+### Классы
+`.btn-hren`
+Стандартная кнопка пакета. Автоматически получает цвета из CSS-переменных.
+
+`.btn-hren-ahren`
+Альтернативный стиль кнопки (инвертированные цвета).
+
+`.form-control-hrenpack`
+Стилизованное поле ввода.
+
+`.form`
+Готовый стиль для форм с градиентным фоном.
+
+`.grid-div` и `.grid-panel`
+Сетка для отображения карточек контента.
+
+`.singular-panel`, `.panel`
+Панели для выделения контента.
+
+## Зависимости
+- `hrenpack_js` (^2.0.5) — базовые утилиты для работы с cookies, темами и DOM
+
+## Совместимость
+- Поддерживает современные браузеры (ES2020+)
+
+- TypeScript 5.9.3 и выше
+
+- Работает в средах с поддержкой модулей ES
+
+## Разработка
+Для сборки из исходников:
+
+```shell
+git clone https://github.com/MagIlyasDOMA/hrenpack-theme-style.git
+cd hrenpack-theme-style
+npm install
+npx tsc
+```
+
+## Лицензия
+#### MIT © MagIlyasDOMA
+
+---
+
+## Ссылки
+- [GitHub репозиторий](https://github.com/MagIlyasDOMA/hrenpack-theme-style)
+
+- [npm пакет](https://www.npmjs.com/package/hrenpack-theme-style)
+
+- [Баг-трекер](https://github.com/MagIlyasDOMA/hrenpack-theme-style/issues)
+
+---
+
+*Примечание: Пакет находится в активной разработке. Пожалуйста, сообщайте об ошибках и предлагайте улучшения через Issues на GitHub.*

package/dark-theme.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dark-theme.d.ts.map

package/dark-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark-theme.d.ts","sourceRoot":"","sources":["dark-theme.ts"],"names":[],"mappings":""}

package/dark-theme.js

@@ -0,0 +1,29 @@
+import { getCookie, getScriptSite, getSystemTheme, setCookie } from "hrenpack_js";
+const tt_button = document.querySelector('#hrenpack-toggle-theme');
+const stylesheet = document.querySelector('#hrenpack-theme-stylesheet');
+const cookieTheme = getCookie?.('theme'), lsTheme = localStorage.getItem('theme');
+const theme_url_prefix = getScriptSite(document.currentScript) + '/hrenpack-theme-style/';
+const theme_light = theme_url_prefix + 'style_light.css', theme_dark = theme_url_prefix + 'style_dark.css';
+let currentTheme;
+if (cookieTheme)
+    currentTheme = cookieTheme;
+else if (lsTheme)
+    currentTheme = lsTheme;
+else
+    currentTheme = getSystemTheme() || 'light';
+if (stylesheet) {
+    stylesheet.setAttribute('href', currentTheme === 'light' ? theme_light : theme_dark);
+}
+if (tt_button) {
+    tt_button.addEventListener('click', () => {
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        localStorage.setItem('theme', newTheme);
+        if (stylesheet) {
+            stylesheet.setAttribute('href', newTheme === 'light' ? theme_light : theme_dark);
+        }
+        currentTheme = newTheme;
+        btn_hren_update();
+        setCookie?.('theme', newTheme);
+    });
+}
+//# sourceMappingURL=dark-theme.js.map

package/dark-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark-theme.js","sourceRoot":"","sources":["dark-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAGhF,MAAM,SAAS,GAAsB,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC;AACvF,MAAM,UAAU,GAAoB,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAE,CAAC;AAC1F,MAAM,WAAW,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;AACjF,MAAM,gBAAgB,GAAW,aAAa,CAAC,QAAQ,CAAC,aAAkC,CAAC,GAAG,wBAAwB,CAAA;AACtH,MAAM,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,EAAE,UAAU,GAAG,gBAAgB,GAAG,gBAAgB,CAAA;AAC1G,IAAI,YAAoB,CAAC;AAEzB,IAAI,WAAW;IACX,YAAY,GAAG,WAAW,CAAC;KAC1B,IAAI,OAAO;IACZ,YAAY,GAAG,OAAO,CAAC;;IAEvB,YAAY,GAAG,cAAc,EAAE,IAAI,OAAO,CAAC;AAE/C,IAAI,UAAU,EAAE,CAAC;IACb,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;AACzF,CAAC;AAED,IAAI,SAAS,EAAE,CAAC;IACZ,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACrC,MAAM,QAAQ,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7D,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACxC,IAAI,UAAU,EAAE,CAAC;YACb,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QACrF,CAAC;QACD,YAAY,GAAG,QAAQ,CAAC;QACxB,eAAe,EAAE,CAAC;QAClB,SAAS,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;AACP,CAAC"}

package/input-reversed.d.ts

@@ -0,0 +1,8 @@
+interface IsInputFirstOutput {
+    input: Node;
+    label: Node;
+    isFirst: boolean;
+}
+declare function isInputFirst(paragraph: HTMLParagraphElement): IsInputFirstOutput;
+declare function formInputReversed(form: HTMLFormElement): void;
+//# sourceMappingURL=input-reversed.d.ts.map

package/input-reversed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-reversed.d.ts","sourceRoot":"","sources":["input-reversed.ts"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IACxB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,oBAAoB,GAAG,kBAAkB,CAmBzE;AAED,iBAAS,iBAAiB,CAAC,IAAI,EAAE,eAAe,QAW/C"}

package/input-reversed.js

@@ -0,0 +1,32 @@
+"use strict";
+function isInputFirst(paragraph) {
+    const input = paragraph.querySelector('input');
+    const label = paragraph.querySelector('label');
+    const output = { input: input, label: label, isFirst: false };
+    if (input && label) {
+        const elements = paragraph.children;
+        let inputIndex = -1;
+        let labelIndex = -1;
+        for (let i = 0; i < elements.length; i++) {
+            if (elements[i] === input)
+                inputIndex = i;
+            if (elements[i] === label)
+                labelIndex = i;
+        }
+        output.isFirst = inputIndex !== -1 && labelIndex !== -1 && inputIndex < labelIndex;
+    }
+    return output;
+}
+function formInputReversed(form) {
+    form.querySelectorAll('p').forEach(paragraph => {
+        const { input, label, isFirst } = isInputFirst(paragraph);
+        if (isFirst) {
+            const wrapper = document.createElement('wrapper');
+            wrapper.appendChild(input);
+            wrapper.appendChild(label);
+            paragraph.appendChild(wrapper);
+            paragraph.classList.add('input-reversed');
+        }
+    });
+}
+//# sourceMappingURL=input-reversed.js.map

package/input-reversed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-reversed.js","sourceRoot":"","sources":["input-reversed.ts"],"names":[],"mappings":";AAMA,SAAS,YAAY,CAAC,SAA+B;IACjD,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,EAAC,KAAK,EAAE,KAAa,EAAE,KAAK,EAAE,KAAa,EAAE,OAAO,EAAE,KAAK,EAAC,CAAA;IAG3E,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;QACjB,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;QACpC,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC;QACpB,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC;QAEpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK;gBAAE,UAAU,GAAG,CAAC,CAAC;YAC1C,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK;gBAAE,UAAU,GAAG,CAAC,CAAC;QAC9C,CAAC;QAED,MAAM,CAAC,OAAO,GAAG,UAAU,KAAK,CAAC,CAAC,IAAI,UAAU,KAAK,CAAC,CAAC,IAAI,UAAU,GAAG,UAAU,CAAA;IACtF,CAAC;IACD,OAAO,MAAM,CAAA;AACjB,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAqB;IAC5C,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;QAC3C,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;QACxD,IAAI,OAAO,EAAE,CAAC;YACV,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAClD,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC1B,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC1B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;YAC9B,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QAC7C,CAAC;IACL,CAAC,CAAC,CAAA;AACN,CAAC"}

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "hrenpack-theme-style",
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MagIlyasDOMA/hrenpack-theme-style.git"
@@ -10,7 +9,7 @@
     "hrenpack",
     "frontend",
     "css",
-	"bootstrap",
+    "bootstrap",
     "dark-theme"
   ],
   "author": "MagIlyasDOMA",
@@ -21,9 +20,10 @@
   "homepage": "https://github.com/MagIlyasDOMA/hrenpack-theme-style#readme",
   "description": "",
   "dependencies": {
-	"hrenpack_js": "^1.0.1"
+    "bootstrap": "^5.3.8",
+    "hrenpack_js": "^2.0.5"
   },
   "devDependencies": {
-	"typescript": "^5.9.3"
+    "typescript": "^5.9.3"
   }
 }

package/script.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=script.d.ts.map

package/script.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.d.ts","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":""}

package/script.js

@@ -0,0 +1,56 @@
+import { stylesRoot } from "hrenpack_js";
+function getButtonColor(button, isHoverOrActive = false) {
+    if (button.classList.contains('btn-hren-ahren')) {
+        return isHoverOrActive
+            ? stylesRoot.getPropertyValue('--hrenpack-button-hover-color')
+            : stylesRoot.getPropertyValue('--hrenpack-background');
+    }
+    else {
+        return isHoverOrActive
+            ? stylesRoot.getPropertyValue('--hrenpack-button-hover-color')
+            : stylesRoot.getPropertyValue('--hrenpack-foreground');
+    }
+}
+function getButtonTextColor(button) {
+    return button.classList.contains('btn-hren-ahren')
+        ? stylesRoot.getPropertyValue('--hrenpack-foreground')
+        : stylesRoot.getPropertyValue('--hrenpack-background');
+}
+function btn_hren_press() {
+    const buttons = document.querySelectorAll('.btn-hren');
+    buttons.forEach(button => {
+        button.style.backgroundColor = getButtonColor(button);
+        button.style.color = getButtonTextColor(button);
+        button.addEventListener('mousedown', function () {
+            button.style.backgroundColor = stylesRoot.getPropertyValue('--hrenpack-button-pressed-color');
+            button.style.color = getButtonTextColor(button);
+        });
+        button.addEventListener('mouseover', function () {
+            button.style.backgroundColor = getButtonColor(button, true);
+            button.style.color = getButtonTextColor(button);
+        });
+        button.addEventListener('mouseout', function () {
+            button.style.backgroundColor = getButtonColor(button);
+            button.style.color = getButtonTextColor(button);
+        });
+        button.addEventListener('mouseup', function () {
+            button.style.backgroundColor = getButtonColor(button, true);
+            button.style.color = getButtonTextColor(button);
+        });
+        button.addEventListener('mouseleave', function () {
+            button.style.backgroundColor = getButtonColor(button);
+            button.style.color = getButtonTextColor(button);
+        });
+    });
+}
+function btn_hren_update() {
+    const buttons = document.querySelectorAll('.btn-hren');
+    buttons.forEach(button => {
+        button.style.backgroundColor = getButtonColor(button);
+        button.style.color = getButtonTextColor(button);
+    });
+}
+window.onload = function () {
+    btn_hren_press();
+};
+//# sourceMappingURL=script.js.map

package/script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.js","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"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"}