Add Stygia 2.1.1 (dark theme for phpMyAdmin 6.0)

stygia/CHANGELOG.md

@@ -0,0 +1,78 @@
+# Changelog
+
+## 2.1.1 — 2026-08-21
+
+Modal and field-editor polish: datepicker/timepicker, jQuery UI dialogs, Bootstrap overlays.
+
+### Editors and overlays
+
+- Fix calendar trigger: ship `img/b_calendar.png` (host JS path) and paint via SVG mask
+- Modernize `#ui-datepicker-div`: circular day selection, Inter chrome, roomier padding
+- Rebuild `.ui-timepicker-div` as CSS grid (no float label hack); compact time input + green sliders
+- Theme `.ui-widget-overlay`, dialog close via `close.svg`, stronger buttonpane layout
+- New `scss/_modals.scss`: Bootstrap modal shell, `#enum_editor`, GIS editor, inline `.cEdit` overflow
+- RTL overrides for picker chevrons, time grid, dialog close, calendar trigger
+
+## 2.1.0 — 2026-08-21
+
+Usability and design polish: 20 targeted improvements plus a visual QA pass (login, tabs, typed cells, chrome).
+
+### Design system
+
+- Expose Sass tokens as `--stygia-*` CSS custom properties on `:root` (`scss/_tokens.scss`)
+- Inter 300 bundled; body stays 400, paragraphs/labels use 300, headings 500 — reserve 600 for lockups
+- Optional system font: **FiraCode Nerd Font** (Propo for UI, Mono for SQL) when installed; otherwise Inter / JetBrains Mono
+- Stronger muted/disabled text; denser-but-breathing type rhythm
+- Login: river-mark badge + `phpMyAdmin · STYGIA` lockup, single centered column, glow, `prefers-reduced-motion`
+- Sidebar lockup is CSS-only so phpMyAdmin’s leftover `<h1>` cannot double-render the wordmark
+
+### Shell and navigation
+
+- `nav-pills` restyled as underline tabs (not green CTA pills); active icons match the accent
+- Media queries for toolbars, `#page_nav_icons`, charts, alerts/toasts at 1280 / 1024 / 768
+- Discoverable `.navItemControls` (`focus-within`); larger hit targets on chrome and sidebar icons (14px glyphs in 28–32px boxes)
+- Breadcrumb / floating menubar stacking and contrast
+- Console: `left`/`right` instead of `calc(100% - 240px)`; collapsed state hides the prompt ghost; clearer toolbar
+
+### Data and SQL
+
+- Browse tables: denser headers, stronger zebra/hover, quieter ON DELETE / ON UPDATE labels
+- Cell values colored with [One Dark Pro](https://github.com/Binaryify/OneDark-Pro) tokens (`scss/_datatypes.scss`) — int, string, date, blob, json, bit, null, …
+- CodeMirror and SQL hues share the same One Dark Pro palette (keywords, strings, numbers, comments, errors)
+- Privileges / index layouts: flex instead of floats; unified input heights and focus rings
+
+### Chrome and assets
+
+- Modals/overlays deduped; datepicker/dialogs aligned to Stygia tokens (less invert)
+- Remove orphan legacy PNGs from `img/`; drop typo `field-index-uinique.svg`
+- Logo SVGs redrawn (login mark, sidebar lockup, GitHub mark)
+
+## 2.0.1 — 2026-08-13
+
+Bugfix release after defect audit.
+
+- **RTL:** full `theme.rtl.css` via `rtlcss(theme.css)` + `_rtl-overrides.scss` (no more 2 KB stub)
+- **jQuery UI:** ship `jquery/jquery-ui.css` + images (dark base) for datepicker/dialogs
+- Map missing `.ic_s_tbl`; fix PK tint after mask; spinner usable with CSS spin
+- Remap Bootstrap `$light` / emphasis tokens so `.table-light` stays dark
+- Stop forcing all text inputs to LTR in RTL; SQL/CodeMirror only
+- Logos via `background-image` (not `content: url()` on `<img>`)
+- `npm run watch` rebuilds LTR + RTL; pack/CI include `jquery/`
+
+## 2.0.0 — 2026-08-13
+
+Standalone, portfolio-ready release of Stygia for phpMyAdmin 6.x.
+
+- Compile with `npm install && npm run build` (Bootstrap 5.3.3 via npm)
+- Replace missing PNG/GIF icon maps with SVG + `mask-image`
+- Load Inter and JetBrains Mono as local woff2
+- Semantic colors distinct from the accent (success, info, SQL hues)
+- Branded login, SVG mark, real `screen.png`
+- In-app logo is single-line **phpMyAdmin - Stygia**; portfolio mark alone for GitHub/docs
+- Console expands only when `.expanded` (no hover trap)
+- WCAG AA contrast pass for body, links, and primary buttons
+- MIT `LICENSE`, GitHub Actions zip, design notes in `docs/DESIGN.md`
+
+## 1.0.0
+
+Initial dark theme (tokens + PMA overrides).

stygia/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Horacio Dominguez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

stygia/README.md

@@ -0,0 +1,162 @@
+# Stygia — phpMyAdmin Dark Theme
+
+A dark, elegant theme for [phpMyAdmin](https://www.phpmyadmin.net/) 6.x inspired by the mythological river Styx. Deep green accents, accessible contrast, RTL overrides, and a dense but calm admin UI.
+
+[![phpMyAdmin](https://img.shields.io/badge/phpMyAdmin-6.x-3ecf8e?style=flat-square)](https://www.phpmyadmin.net/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-2e2e2e?style=flat-square)](LICENSE)
+[![Contrast](https://img.shields.io/badge/contrast-WCAG%20AA-3ecf8e?style=flat-square)](docs/DESIGN.md)
+
+![Stygia theme preview](screen.png)
+
+<p align="center">
+  <img src="docs/tour.gif" alt="Stygia login and browse tour" width="640">
+</p>
+
+## Features
+
+- **Deep dark surfaces** — `#121212` body, stepped elevation for cards and popovers
+- **Stygia green** — `#3ecf8e` accent with a darker primary button (`#006239`) that stays readable
+- **Accessible** — `:focus-visible`, `prefers-reduced-motion`, `prefers-contrast`, `forced-colors`; body/link/button pairs target WCAG AA
+- **RTL** — full `theme.rtl.css` via rtlcss(theme.css) plus Stygia overrides (SQL stays LTR)
+- **Typography** — bundled Inter (300–600) + JetBrains Mono (woff2, no CDN). If **FiraCode Nerd Font** is installed, it is used first (Propo for UI, Mono for SQL)
+- **Tabs** — phpMyAdmin `nav-pills` restyled as underline tabs; green pills stay on Go/Save only
+- **Typed cells** — browse/insert values colored with [One Dark Pro](https://github.com/Binaryify/OneDark-Pro) tokens (int, string, date, json, …)
+- **SQL editor** — CodeMirror highlighting on the same One Dark Pro palette
+- **Inspectable tokens** — Sass variables mirrored on `:root` as `--stygia-*`
+- **Branding** — in-app: river mark + `phpMyAdmin · STYGIA`; portfolio: Stygia mark alone
+- **jQuery UI** — dark ui-darkness base + Stygia color overrides for datepicker/dialogs
+
+## Requirements
+
+- phpMyAdmin 6.0 or higher
+- Modern browser (Chrome, Firefox, Safari, Edge)
+
+## Installation
+
+1. Download `stygia.zip` from [Releases](https://github.com/horaciodominguez/stygia/releases) or clone this repository
+2. Place the `stygia` folder in your phpMyAdmin themes directory:
+
+```
+phpMyAdmin/
+└── themes/
+    └── stygia/
+        ├── css/
+        ├── fonts/
+        ├── img/
+        ├── jquery/
+        ├── scss/
+        ├── theme.json
+        └── screen.png
+```
+
+3. phpMyAdmin → Appearance Settings → Theme → **Stygia** → Save
+
+## Build from source
+
+The GitHub clone compiles without a phpMyAdmin tree:
+
+```bash
+npm install
+npm run build
+```
+
+Watch mode:
+
+```bash
+npm run watch
+```
+
+Package a distributable zip:
+
+```bash
+npm run zip
+```
+
+## Theme structure
+
+```
+stygia/
+├── css/                 # theme.css + theme.rtl.css (rtlcss) + maps
+├── fonts/               # Inter + JetBrains Mono (OFL)
+├── img/                 # SVG icons + logo
+├── jquery/              # Dark jQuery UI + images
+├── scss/
+│   ├── theme.scss       # Entry
+│   ├── _variables.scss  # Design tokens
+│   ├── _tokens.scss     # :root --stygia-* custom properties
+│   ├── _fonts.scss
+│   ├── _icons.scss
+│   ├── _nav.scss        # Underline tabs (nav-pills)
+│   ├── _datatypes.scss  # One Dark Pro cell colors
+│   ├── _login.scss
+│   ├── _console.scss
+│   ├── _rtl-overrides.scss
+│   └── ...
+├── docs/DESIGN.md       # Case study + contrast notes
+├── theme.json
+└── screen.png
+```
+
+## Customization
+
+Edit `scss/_variables.scss`, then:
+
+```bash
+npm run build
+```
+
+Runtime-inspectable copies live on `:root` as `--stygia-*` (see `scss/_tokens.scss`).
+
+To force bundled Inter / JetBrains (ignore a local Nerd Font), remove the FiraCode names from `$font-family-base` / `$font-family-monospace` and rebuild.
+
+| Token | Hex | Role |
+| --- | --- | --- |
+| `$accent-green` | `#3ecf8e` | Links, focus, active nav |
+| `$accent-green-deep` | `#006239` | Primary buttons |
+| `$bg-body` | `#121212` | Page background |
+| `$bg-surface` | `#1a1a1a` | Cards / inputs |
+| `$bg-popover` | `#242424` | Dropdowns / datepicker |
+| `$text-primary` | `#fafafa` | Body text |
+| `$text-secondary` | `#c8c8c8` | Secondary text |
+| `$color-success` | `#5dd39e` | Success (not the same as primary) |
+| `$color-danger` | `#f07178` | Errors |
+| `$color-warning` | `#f5a623` | Warnings |
+| `$color-info` | `#4ecdc4` | Info |
+
+### One Dark Pro (SQL + typed cells)
+
+| Token | Hex | Browse / SQL |
+| --- | --- | --- |
+| `$odp-whiskey` | `#d19a66` | int, real, numbers |
+| `$odp-green` | `#98c379` | strings |
+| `$odp-fountain-blue` | `#56b6c2` | dates / times |
+| `$odp-coral` | `#e06c75` | blob, hex, errors |
+| `$odp-malibu` | `#61afef` | json, geometry, builtins |
+| `$odp-purple` | `#c678dd` | bit, keywords |
+| `$odp-chalky` | `#e5c07b` | types, enum/set, UUID |
+| `$odp-light-dark` | `#7f848e` | comments, null-ish |
+
+Palette from [One Dark Pro](https://github.com/Binaryify/OneDark-Pro) (zhuangtongfa / Binaryify).
+
+## Accessibility
+
+Measured on `#121212` unless noted:
+
+| Pair | Ratio | AA |
+| --- | --- | --- |
+| `#fafafa` on `#121212` | ~18:1 | Pass (normal) |
+| `#c8c8c8` on `#121212` | ~11.5:1 | Pass (normal) |
+| `#b0b0b0` on `#121212` | ~8.6:1 | Pass (normal) |
+| `#3ecf8e` on `#121212` | ~9.4:1 | Pass (normal) |
+| `#fafafa` on `#006239` | ~7.2:1 | Pass (normal) |
+| `#949494` on `#121212` | ~6.0:1 | Pass (normal AA) |
+
+Keyboard focus uses a 2px green outline (`:focus-visible`). Reduced motion disables console and hover transitions. This theme cannot inject a skip link into phpMyAdmin HTML; the `.skip-link` class is styled if the host page provides one.
+
+## License
+
+MIT — see [LICENSE](LICENSE). Fonts: SIL Open Font License (see [fonts/README.md](fonts/README.md)). jQuery UI dark pack adapted from [BooDark](https://github.com/adorade/boodark) (MIT). One Dark Pro token hues used by permission of the [MIT-licensed](https://github.com/Binaryify/OneDark-Pro/blob/master/LICENSE.md) VS Code theme.
+
+## Credits
+
+Created by [Horacio Dominguez](https://github.com/horaciodominguez) for phpMyAdmin 6.x. Design notes: [docs/DESIGN.md](docs/DESIGN.md).

stygia/fonts/README.md

@@ -0,0 +1,15 @@
+Inter
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+SIL Open Font License 1.1 — https://scripts.sil.org/OFL
+
+JetBrains Mono
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+SIL Open Font License 1.1 — https://scripts.sil.org/OFL
+
+These woff2 files are Latin subsets from @fontsource, redistributed under the OFL.
+
+Weights shipped (bundled woff2): Inter 300 / 400 / 500 / 600; JetBrains Mono 400 / 500 (+ italic 400).
+
+**Local trial:** `$font-family-base` / `$font-family-monospace` prefer system
+`FiraCode Nerd Font` (Propo for UI, Mono for SQL) when installed; otherwise Inter / JetBrains.
+To revert UI to Inter only, edit `scss/_variables.scss` and rebuild.