sharix-open-webapp-design-template

ShariX Open Design Template

Shared presentation package for ShariX Open and ShariX Platform. Theme selection is optional and falls back to sharix_admin/css/base_colors.css; the repository also owns product-neutral UI primitives that must be visually identical in both assemblies.

Shared password visibility control

static/design_template/password_input.css and password_input.js provide the canonical eye control for password fields. Canonical Open and Platform shells load these assets once; the script automatically enhances password inputs, so individual forms must not implement a second toggle or require per-field opt-in. The same assets are loaded by the shared Django admin/registration shells.

Theme layout

Each theme is one theme.css file containing both modes:

:root {
  --primary: #318ce7;
}

body.dark-theme {
  --primary: #5aa8ff;
}

A theme may omit values. Missing custom properties continue to come from webapp_base's base_colors.css.

Built-in themes are versioned with this repository:

static/design_template/themes/<code>/theme.css

Installation-local editable themes are stored outside source repositories:

<webapp-root>/design-template-real/themes/<code>/theme.css

design-template-real is ignored by the main webapp repository and may be a symlink or its own Git repository, similarly to conf-real.

Selection

In the webapp .env:

DESIGN_TEMPLATE=builtin/classic-blue

or:

DESIGN_TEMPLATE=local/customer-theme

An empty value uses only base_colors.css. The historical default and dark values remain temporary aliases for builtin/classic-blue and builtin/graphite.

After changing .env.example, normalize the real .env:

python3 conf/utils/normalize_env.py --only-root --diff
python3 conf/utils/normalize_env.py --only-root --write
python3 conf/utils/normalize_env.py --only-root --check

Commands

List themes:

./venv/bin/python manage.py design_theme_list

Validate themes:

./venv/bin/python manage.py design_theme_check --all
./venv/bin/python manage.py design_theme_check builtin/classic-blue

Create a local editable copy:

./venv/bin/python manage.py design_theme_clone \
  builtin/classic-blue \
  customer-theme

Then run collectstatic, set DESIGN_TEMPLATE=local/customer-theme, and restart the service.

Scope

Theme editing manages colors only. The package additionally owns neutral shared UI primitives whose behavior and geometry must remain product-neutral across Open and Platform. Existing logo and favicon handling remains unchanged. The old positional color editor was removed; a structured theme editor will be implemented separately.

Web editor

Stage 3 adds a superuser-only file editor at:

/design/themes/

It is also linked from Django admin and from the VisualSettings change list. The editor:

• creates local themes from built-in or local sources;
• edits light and dark custom properties without writing colors to the database;
• shows values inherited from base_colors.css;
• offers browser color pickers, EyeDropper support and explicit related-color updates;
• previews buttons, forms, alerts, navigation and tables;
• reports WCAG contrast ratios for important foreground/background pairs;
• saves theme.css atomically and retains the latest 20 backups in .backups;
• publishes the changed CSS into STATIC_ROOT without a full collectstatic;
• activates a theme by updating DESIGN_TEMPLATE in the real .env, preserving a timestamped backup and optionally scheduling the Django service restart.

Built-in themes remain read-only. The logo and favicon part of VisualSettings is unchanged.

Copying visible text controls

design_template/components/copy_control.html is a presentation-only control. Pass a unique target_id for an already authorized, visible text input/textarea and optionally button_class. Load design_template/copy_value.css and design_template/copy_value.js once on the page. The button never submits a form. It copies only after a user action; if clipboard access is unavailable it selects the text and explains manual copying. Without JavaScript the original input remains usable and the inactive copy button stays hidden. Password/hidden inputs and invisible or disabled controls are not copied. The component does not fetch, log or persist values, infer permissions, or contain Open/Platform business logic.