From 6d0c5801a3881dbb65170578f8ccf3ca5fb8adce Mon Sep 17 00:00:00 2001 From: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Wed, 17 Sep 2025 16:43:22 -0400 Subject: [PATCH 1/3] make it possible to have custom CSS by defining Django setting --- pattern_library/__init__.py | 5 ++ .../pattern_library/src/scss/_config.scss | 18 ++++++-- .../src/scss/abstracts/_base.scss | 2 +- .../src/scss/components/_list.scss | 2 +- .../src/scss/components/_tabbed-listing.scss | 4 +- .../src/scss/layout/_header.scss | 4 +- .../templates/pattern_library/base.html | 2 + pattern_library/templatetags/__init__.py | 1 + .../templatetags/pattern_library_tags.py | 46 +++++++++++++++++++ 9 files changed, 74 insertions(+), 10 deletions(-) create mode 100644 pattern_library/templatetags/__init__.py create mode 100644 pattern_library/templatetags/pattern_library_tags.py diff --git a/pattern_library/__init__.py b/pattern_library/__init__.py index 88b173e7..349b6d2c 100644 --- a/pattern_library/__init__.py +++ b/pattern_library/__init__.py @@ -35,6 +35,11 @@ ("templates", ["patterns/templates"]), ("pages", ["patterns/pages"]), ), + # CUSTOM_CSS allows users to override pattern library styles by providing a path to a CSS file + # (relative to STATIC_URL) that contains CSS custom properties. This file will be included + # after the main bundle to override default styles. + # Example: "css/pattern-library-custom.css" + "CUSTOM_CSS": None, } diff --git a/pattern_library/static/pattern_library/src/scss/_config.scss b/pattern_library/static/pattern_library/src/scss/_config.scss index 9865eb17..0b0f6e4d 100644 --- a/pattern_library/static/pattern_library/src/scss/_config.scss +++ b/pattern_library/static/pattern_library/src/scss/_config.scss @@ -1,7 +1,17 @@ -// Overwrite the title, main colour and font family here -$site-title: 'Django Pattern Library'; -$color-primary: #34b2b2; -$family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; +// Configuration with support for runtime customization via CSS custom properties + +// Default SCSS variables for compile-time usage (needed for Sass functions) +$site-title: 'Django Pattern Library' !default; +$color-primary: #34b2b2 !default; +$family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default; + +// CSS Custom Properties for runtime customization +// These will override the compiled styles where used directly (not in Sass functions) +:root { + --site-title: #{$site-title}; + --color-primary: #{$color-primary}; + --family-primary: #{$family-primary}; +} // $color--primary + $family--primary are in _config.scss $white: #fff; diff --git a/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss b/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss index 51a0ccd6..ae4cdc24 100644 --- a/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss +++ b/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss @@ -9,7 +9,7 @@ html, body { margin: 0; - font-family: $family-primary; + font-family: var(--family-primary); height: 100%; } diff --git a/pattern_library/static/pattern_library/src/scss/components/_list.scss b/pattern_library/static/pattern_library/src/scss/components/_list.scss index e715575e..fbe7fb54 100644 --- a/pattern_library/static/pattern_library/src/scss/components/_list.scss +++ b/pattern_library/static/pattern_library/src/scss/components/_list.scss @@ -70,7 +70,7 @@ &:hover, &.is-active { background: $white; - border-left: 5px solid $color-primary; + border-left: 5px solid var(--color-primary); } } } diff --git a/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss b/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss index f84e34ee..ac0d4d43 100644 --- a/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss +++ b/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss @@ -25,14 +25,14 @@ &:hover { color: #000; - background-color: $color-primary; + background-color: var(--color-primary); } } &--active { > a { color: #000; - background-color: $color-primary; + background-color: var(--color-primary); } } diff --git a/pattern_library/static/pattern_library/src/scss/layout/_header.scss b/pattern_library/static/pattern_library/src/scss/layout/_header.scss index 07bb24fd..446ad73f 100644 --- a/pattern_library/static/pattern_library/src/scss/layout/_header.scss +++ b/pattern_library/static/pattern_library/src/scss/layout/_header.scss @@ -1,7 +1,7 @@ @use "../config" as *; .header { - background-color: $color-primary; + background-color: var(--color-primary); display: flex; align-items: center; height: 45px; @@ -19,7 +19,7 @@ margin-left: 15px; &::after { - content: $site-title; + content: var(--site-title); } @media only screen and (min-width: 600px) { diff --git a/pattern_library/templates/pattern_library/base.html b/pattern_library/templates/pattern_library/base.html index f84a814b..bfaabe14 100644 --- a/pattern_library/templates/pattern_library/base.html +++ b/pattern_library/templates/pattern_library/base.html @@ -1,4 +1,5 @@ {% load static %} +{% load pattern_library_tags %} @@ -9,6 +10,7 @@ + {% pattern_library_custom_css %} diff --git a/pattern_library/templatetags/__init__.py b/pattern_library/templatetags/__init__.py new file mode 100644 index 00000000..885f18d7 --- /dev/null +++ b/pattern_library/templatetags/__init__.py @@ -0,0 +1 @@ +# Template tags for django-pattern-library \ No newline at end of file diff --git a/pattern_library/templatetags/pattern_library_tags.py b/pattern_library/templatetags/pattern_library_tags.py new file mode 100644 index 00000000..3702c2a5 --- /dev/null +++ b/pattern_library/templatetags/pattern_library_tags.py @@ -0,0 +1,46 @@ +from django import template +from django.utils.safestring import mark_safe +from django.templatetags.static import static +from pattern_library import get_setting +import os + +register = template.Library() + + +@register.simple_tag +def pattern_library_custom_css(): + """ + Include custom CSS file for pattern library customization. + + This tag reads the CUSTOM_CSS setting from PATTERN_LIBRARY and includes + the CSS file as a tag. The CSS file should contain CSS custom properties + that override the default pattern library styles. + + Usage in templates: + {% load pattern_library_tags %} + {% pattern_library_custom_css %} + + Example PATTERN_LIBRARY setting: + PATTERN_LIBRARY = { + "CUSTOM_CSS": "css/pattern-library-custom.css" # relative to STATIC_URL + } + + Example custom CSS file content: + :root { + --color-primary: #ff6b6b; + --family-primary: 'Custom Font', sans-serif; + --site-title: 'My Custom Library'; + } + """ + custom_css_path = get_setting('CUSTOM_CSS') + + if not custom_css_path: + return '' + + # Generate static URL for the CSS file + try: + css_url = static(custom_css_path) + return mark_safe(f'') + except Exception: + # If static file handling fails, return empty string + return '' \ No newline at end of file From 5000765764d66f441a1ffd22242935b105357bcd Mon Sep 17 00:00:00 2001 From: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Wed, 17 Sep 2025 17:08:46 -0400 Subject: [PATCH 2/3] for simplicity, use a Django setting to set site title Also, using a Django setting allows us to avoid CSS pseudo-selector issues --- pattern_library/__init__.py | 2 + .../pattern_library/src/scss/_config.scss | 5 +-- .../src/scss/layout/_header.scss | 6 +-- .../templates/pattern_library/base.html | 2 +- .../templatetags/pattern_library_tags.py | 44 ++++++++++--------- 5 files changed, 29 insertions(+), 30 deletions(-) diff --git a/pattern_library/__init__.py b/pattern_library/__init__.py index 349b6d2c..c96367fb 100644 --- a/pattern_library/__init__.py +++ b/pattern_library/__init__.py @@ -40,6 +40,8 @@ # after the main bundle to override default styles. # Example: "css/pattern-library-custom.css" "CUSTOM_CSS": None, + # SITE_TITLE allows users to customize the pattern library title displayed in the header + "SITE_TITLE": "Django Pattern Library", } diff --git a/pattern_library/static/pattern_library/src/scss/_config.scss b/pattern_library/static/pattern_library/src/scss/_config.scss index 0b0f6e4d..684dbdc9 100644 --- a/pattern_library/static/pattern_library/src/scss/_config.scss +++ b/pattern_library/static/pattern_library/src/scss/_config.scss @@ -1,14 +1,11 @@ // Configuration with support for runtime customization via CSS custom properties // Default SCSS variables for compile-time usage (needed for Sass functions) -$site-title: 'Django Pattern Library' !default; $color-primary: #34b2b2 !default; $family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default; // CSS Custom Properties for runtime customization -// These will override the compiled styles where used directly (not in Sass functions) -:root { - --site-title: #{$site-title}; +html, :root { --color-primary: #{$color-primary}; --family-primary: #{$family-primary}; } diff --git a/pattern_library/static/pattern_library/src/scss/layout/_header.scss b/pattern_library/static/pattern_library/src/scss/layout/_header.scss index 446ad73f..1b516cd1 100644 --- a/pattern_library/static/pattern_library/src/scss/layout/_header.scss +++ b/pattern_library/static/pattern_library/src/scss/layout/_header.scss @@ -17,10 +17,8 @@ letter-spacing: 1px; font-size: 16px; margin-left: 15px; - - &::after { - content: var(--site-title); - } + margin-top: 0; + margin-bottom: 0; @media only screen and (min-width: 600px) { font-size: 22px; diff --git a/pattern_library/templates/pattern_library/base.html b/pattern_library/templates/pattern_library/base.html index bfaabe14..388fb263 100644 --- a/pattern_library/templates/pattern_library/base.html +++ b/pattern_library/templates/pattern_library/base.html @@ -21,7 +21,7 @@

Pattern Library - {# Set in _config.scss #} + {% pattern_library_site_title %}