Grappelli support (#6)

* initial grappelli theme adapter (needs adjustment)

* resolve h1 spacing issues with h1 and icon placements under grappelli

* fix several issues with buttons and inputs and spacing

* update docs readme and add grappelli hub image

---------

Co-authored-by: Yasser Toruno <yasser@yassers-mbp.lan>

Author: yassi

README.md

@@ -0,0 +1,123 @@
+/*
+   DJ CONTROL ROOM - Grappelli Theme Adapter  (themes/grappelli.css)
+
+   Not loaded automatically. Opt in per panel via EXTRA_CSS:
+
+       DJ_<PANEL>_SETTINGS = {
+           "EXTRA_CSS": ["dj_control_room_base/css/themes/grappelli.css"],
+       }
+*/
+
+/* Grappelli's palette is hardcoded (no CSS vars), copied here directly.
+   !important since Grappelli has no dark mode and must beat design-system's
+   `prefers-color-scheme` query. Tokens with no Grappelli equivalent just
+   repeat the light defaults so they survive that query too. */
+:root {
+   --dcr-color-text: #444444 !important;
+   --dcr-color-text-muted: #9a9a9a !important;
+   --dcr-color-text-inverse: #ffffff !important;
+
+   --dcr-color-bg: #ffffff !important;
+   --dcr-color-bg-subtle: #eeeeee !important;
+   --dcr-color-border: #cccccc !important;
+   --dcr-color-muted: #9a9a9a !important;
+   --dcr-color-muted-bg: rgba(154, 154, 154, 0.14) !important;
+
+   --dcr-color-accent: #309bbf !important;
+   --dcr-color-accent-bg: rgba(48, 155, 191, 0.10) !important;
+
+   --dcr-color-danger: #bf3030 !important;
+   --dcr-color-danger-bg: rgba(191, 48, 48, 0.10) !important;
+
+   /* No Grappelli equivalent - design-system's light defaults. */
+   --dcr-color-success: #2e7d32 !important;
+   --dcr-color-success-bg: #e8f5e9 !important;
+   --dcr-color-warning: #b45309 !important;
+   --dcr-color-warning-bg: #fffbeb !important;
+   --dcr-color-info: #01579b !important;
+   --dcr-color-info-bg: #e1f5fe !important;
+   --dcr-color-purple: #7c3aed !important;
+   --dcr-color-purple-bg: #ede9fe !important;
+   --dcr-color-indigo: #4338ca !important;
+   --dcr-color-indigo-bg: #e0e7ff !important;
+
+   /* Match Grappelli's tighter 2-5px radius scale. */
+   --dcr-radius: 2px !important;
+   --dcr-radius-md: 3px !important;
+   --dcr-radius-lg: 3px !important;
+   --dcr-radius-xl: 5px !important;
+}
+
+/* Hardcoded dark bg, not a --dcr-* token - Grappelli never goes dark. */
+.dcr-bar-chart__bar {
+   background: rgba(46, 125, 50, 0.40) !important;
+}
+
+.dcr-btn {
+   font-weight: bold !important;
+}
+
+/* Grappelli styles a bare `button` selector (meant for its own tiny
+   related-lookup popup icon) with a -25px left margin and a forced 25x25
+   size. That leaks onto every dcr-* button (dcr-btn, dcr-tabs__tab,
+   dcr-dropdown__item), shifting each one under its predecessor. No
+   !important needed - `.dcr-panel .dcr-classname` already outspecifies a
+   bare element selector. Margin-left/right only, so dcr-tabs__tab's own
+   `margin-bottom: -1px` survives. */
+.dcr-panel .dcr-btn,
+.dcr-panel .dcr-tabs__tab,
+.dcr-panel .dcr-dropdown__item {
+   margin-left: 0;
+   margin-right: 0;
+   height: auto;
+   overflow: visible;
+   vertical-align: baseline;
+}
+
+/* dcr-dropdown__item needs its own width: 100% to fill its menu. */
+.dcr-panel .dcr-btn,
+.dcr-panel .dcr-tabs__tab {
+   width: auto;
+}
+
+/* dcr-copy-btn is a dcr-btn too, but needs its own position: absolute to
+   overlay a code block. */
+.dcr-panel .dcr-btn:not(.dcr-copy-btn),
+.dcr-panel .dcr-tabs__tab,
+.dcr-panel .dcr-dropdown__item {
+   position: static;
+}
+
+/* Grappelli's `input[type=...]` rule out-specifies a single dcr-* class,
+   crushing inputs to a bold 25px-tall, 118px-wide box. min-height (not
+   height) neutralises it without breaking dcr-input-group__input's
+   `height: 100%` flex-stretch. */
+.dcr-panel input[type="text"],
+.dcr-panel input[type="password"],
+.dcr-panel input[type="url"],
+.dcr-panel input[type="email"],
+.dcr-panel input[type="number"],
+.dcr-panel input:not([type]) {
+   width: 100% !important;
+   min-height: 42px !important;
+   font-weight: 400 !important;
+   line-height: 1.4 !important;
+   overflow: visible !important;
+}
+
+/* Split out so it doesn't clobber components with their own focus ring
+   (e.g. dcr-inline-edit__input). */
+.dcr-panel input[type="text"]:not(:focus),
+.dcr-panel input[type="password"]:not(:focus),
+.dcr-panel input[type="url"]:not(:focus),
+.dcr-panel input[type="email"]:not(:focus),
+.dcr-panel input[type="number"]:not(:focus),
+.dcr-panel input:not([type]):not(:focus) {
+   box-shadow: none !important;
+}
+
+/* Resolve spacing issues with h1s in page headers. */
+h1.dcr-page-header__title {
+   padding-top: 0 !important;
+   padding-bottom: 0 !important;
+}

dj_control_room_base/static/dj_control_room_base/css/themes/grappelli.css

@@ -70,8 +70,8 @@ Additional stylesheets to inject after the default bundle (or after nothing, if
 DJ_CONTROL_ROOM_BASE_SETTINGS = {
     "LOAD_DEFAULT_CSS": True,
     "EXTRA_CSS": [
-        "my_panel/css/overrides.css",            # resolved via staticfiles
-        "https://cdn.example.com/theme.css",     # used as-is
+        "my_panel/css/overrides.css",  # resolved via staticfiles
+        "https://cdn.example.com/theme.css",  # used as-is
     ],
 }
 ```
@@ -100,12 +100,8 @@ Currently available:
 |---|---|
 | `themes/unfold.css` | Projects using [django-unfold](https://github.com/unfoldadmin/django-unfold) as their admin skin. |
 | `themes/jazzmin.css` | Projects using [django-jazzmin](https://github.com/farridav/django-jazzmin) as their admin skin. |
+| `themes/grappelli.css` | Projects using [django-grappelli](https://github.com/sehmaschine/django-grappelli) as their admin skin. |
 
-`themes/unfold.css` maps DCR's tokens onto [django-unfold](https://github.com/unfoldadmin/django-unfold)'s own CSS variables, so panels automatically pick up the host site's configured brand color. `themes/jazzmin.css` does the same for [django-jazzmin](https://github.com/farridav/django-jazzmin), tracking whichever Bootswatch theme (light or dark) is configured via `JAZZMIN_UI_TWEAKS["theme"]`. Both only touch tokens, never `dcr-*` component rules, and dark mode is handled automatically - no extra configuration needed beyond loading the stylesheet.
-
-Because this is opt-in per panel rather than hub-wide, each panel you want themed needs its own `EXTRA_CSS` entry for now.
-
-![Django Control Room running with the django-unfold admin theme](https://raw.githubusercontent.com/django-control-room/dj-control-room-base/main/images/dcr-base-unfold.png)
 
 You can also make your own theme adapters easily by following the `unfold.css` or
 `jazzmin.css` examples. This works very well for any Tailwind CSS or Bootstrap
@@ -164,7 +160,6 @@ DJ_CONTROL_ROOM_BASE_SETTINGS = {
     # Panel-wide defaults (apply to any view not listed in SCOPE_PERMISSIONS)
     "ALLOWED_GROUPS": [],
     "REQUIRE_SUPERUSER": False,
-
     "SCOPE_PERMISSIONS": {
         # Only superusers can reach the design-system view
         "design-system": {

docs/configuration.md

@@ -76,6 +76,10 @@ The only runtime dependency is Django. `dj-control-room` is optional and only ne
 
 ![Django Control Room running with the django-jazzmin admin theme](https://raw.githubusercontent.com/django-control-room/dj-control-room-base/main/images/dcr-base-jazzmin.png)
 
+**django-grappelli support** - a [theme adapter](configuration.md#theme-adapters) maps panels onto Grappelli's own hardcoded palette, since Grappelli predates CSS custom properties and has no dark mode of its own.
+
+![Django Control Room running with the django-grappelli admin theme](https://raw.githubusercontent.com/django-control-room/dj-control-room-base/main/images/dcr-base-grappelli.png)
+
 See [Theme Adapters](themes.md) for the full gallery of supported admin skins.
 
 ---

docs/index.md

@@ -23,55 +23,25 @@ pip install dj-control-room-base dj-control-room
 
 ## 2. Add to `INSTALLED_APPS`
 
-=== "Standalone (library or panel only)"
-
-    ```python
-    INSTALLED_APPS = [
-        "django.contrib.admin",
-        "django.contrib.auth",
-        "django.contrib.contenttypes",
-        "django.contrib.sessions",
-        "django.contrib.messages",
-        "django.contrib.staticfiles",
-        "dj_control_room_base",
-    ]
-    ```
-
-=== "With Control Room hub"
-
-    ```python
+```python
     INSTALLED_APPS = [
         "django.contrib.admin",
         "django.contrib.auth",
         "django.contrib.contenttypes",
         "django.contrib.sessions",
         "django.contrib.messages",
         "django.contrib.staticfiles",
-        "dj_control_room",        # hub dashboard
-        "dj_control_room_base",   # this panel / core library
+        "dj_control_room_base",  # this panel / core library
+        # any panels you want to add go here
+        "dj_control_room",  # hub dashboard
     ]
-    ```
+```
 
 ---
 
 ## 3. Include URLs
 
-=== "Standalone"
-
-    ```python
-    # urls.py
-    from django.contrib import admin
-    from django.urls import path, include
-
-    urlpatterns = [
-        path("admin/dj-control-room-base/", include("dj_control_room_base.urls")),
-        path("admin/", admin.site.urls),
-    ]
-    ```
-
-=== "With Control Room hub"
-
-    ```python
+```python
     # urls.py
     from django.contrib import admin
     from django.urls import path, include
@@ -81,7 +51,7 @@ pip install dj-control-room-base dj-control-room
         path("admin/dj-control-room/", include("dj_control_room.urls")),
         path("admin/", admin.site.urls),
     ]
-    ```
+```
 
 The URL prefix (`admin/dj-control-room-base/`) can be changed to whatever fits your project. The admin sidebar entry will still redirect users to the correct view via the named URL `dj_control_room_base:index`.
 

docs/installation.md

@@ -50,6 +50,20 @@ See [`ui_customisation`](https://django-jazzmin.readthedocs.io/ui_customisation/
 
 ---
 
+## django-grappelli
+
+[`django-grappelli`](https://github.com/sehmaschine/django-grappelli) support via `themes/grappelli.css`, matching its teal accent and boxy, light-only look.
+
+```python
+DJ_MY_PANEL_SETTINGS = {
+    "EXTRA_CSS": ["dj_control_room_base/css/themes/grappelli.css"],
+}
+```
+
+![Django Control Room running with the django-grappelli admin theme](https://raw.githubusercontent.com/django-control-room/dj-control-room-base/main/images/dcr-base-grappelli.png)
+
+---
+
 ## Build your own
 
-Both adapters follow the same recipe: remap `--dcr-*` tokens to the host skin's own variables, with sensible fallbacks. This works well for any Tailwind CSS or Bootstrap admin skin that exposes its palette as CSS custom properties - use `unfold.css` or `jazzmin.css` as a starting point.
+Want to support another admin skin? Use `unfold.css`, `jazzmin.css`, or `grappelli.css` as a starting point and remap the `--dcr-*` tokens to match.