orca-design-system 0.4.1__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- orca_design_system-0.4.1/LICENSE +24 -0
- orca_design_system-0.4.1/PKG-INFO +245 -0
- orca_design_system-0.4.1/README.md +225 -0
- orca_design_system-0.4.1/orca/__init__.py +16 -0
- orca_design_system-0.4.1/orca/__main__.py +76 -0
- orca_design_system-0.4.1/orca/apps.py +10 -0
- orca_design_system-0.4.1/orca/build.py +91 -0
- orca_design_system-0.4.1/orca/calendar_views.py +250 -0
- orca_design_system-0.4.1/orca/catalogue/__init__.py +3 -0
- orca_design_system-0.4.1/orca/catalogue/actions.py +194 -0
- orca_design_system-0.4.1/orca/catalogue/charts.py +78 -0
- orca_design_system-0.4.1/orca/catalogue/components/__init__.py +8 -0
- orca_design_system-0.4.1/orca/catalogue/components/actions.py +124 -0
- orca_design_system-0.4.1/orca/catalogue/components/building_blocks.py +363 -0
- orca_design_system-0.4.1/orca/catalogue/components/calendar_parts.py +214 -0
- orca_design_system-0.4.1/orca/catalogue/components/content.py +117 -0
- orca_design_system-0.4.1/orca/catalogue/components/data_display.py +458 -0
- orca_design_system-0.4.1/orca/catalogue/components/docs_site.py +66 -0
- orca_design_system-0.4.1/orca/catalogue/components/feedback.py +222 -0
- orca_design_system-0.4.1/orca/catalogue/components/forms.py +450 -0
- orca_design_system-0.4.1/orca/catalogue/components/identity_controls.py +97 -0
- orca_design_system-0.4.1/orca/catalogue/components/navigation.py +289 -0
- orca_design_system-0.4.1/orca/catalogue/components/pickers.py +167 -0
- orca_design_system-0.4.1/orca/catalogue/components/plan_items.py +221 -0
- orca_design_system-0.4.1/orca/catalogue/components/planning_selectors.py +148 -0
- orca_design_system-0.4.1/orca/catalogue/components/schedule_parts.py +166 -0
- orca_design_system-0.4.1/orca/catalogue/form_text.py +126 -0
- orca_design_system-0.4.1/orca/catalogue/format.py +210 -0
- orca_design_system-0.4.1/orca/catalogue/foundations.py +335 -0
- orca_design_system-0.4.1/orca/catalogue/guide.py +122 -0
- orca_design_system-0.4.1/orca/catalogue/icons.py +78 -0
- orca_design_system-0.4.1/orca/catalogue/identity.py +65 -0
- orca_design_system-0.4.1/orca/catalogue/imagery.py +161 -0
- orca_design_system-0.4.1/orca/catalogue/inputs.py +276 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/__init__.py +8 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/calendar_views.py +152 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/charts.py +82 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/composites.py +93 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/data_filtering.py +182 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/editorial.py +36 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/email.py +24 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/event_editing.py +127 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/forms.py +152 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/grids.py +96 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/marketing.py +127 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/media.py +81 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/page_frame.py +235 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/planning_boards.py +215 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/process.py +28 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/records.py +108 -0
- orca_design_system-0.4.1/orca/catalogue/patterns/scheduler.py +217 -0
- orca_design_system-0.4.1/orca/catalogue/planning.py +387 -0
- orca_design_system-0.4.1/orca/catalogue/progress.py +98 -0
- orca_design_system-0.4.1/orca/catalogue/registry.py +293 -0
- orca_design_system-0.4.1/orca/catalogue/render.py +80 -0
- orca_design_system-0.4.1/orca/catalogue/server_code.py +1201 -0
- orca_design_system-0.4.1/orca/catalogue/status.py +130 -0
- orca_design_system-0.4.1/orca/catalogue/structure.py +205 -0
- orca_design_system-0.4.1/orca/catalogue/templates/__init__.py +5 -0
- orca_design_system-0.4.1/orca/catalogue/templates/generic.py +128 -0
- orca_design_system-0.4.1/orca/catalogue/templates/layouts.py +172 -0
- orca_design_system-0.4.1/orca/catalogue/templates/page_types.py +92 -0
- orca_design_system-0.4.1/orca/catalogue/templates/slots.py +153 -0
- orca_design_system-0.4.1/orca/catalogue/templates/structure.py +103 -0
- orca_design_system-0.4.1/orca/catalogue/text.py +363 -0
- orca_design_system-0.4.1/orca/charts.py +93 -0
- orca_design_system-0.4.1/orca/checks.py +38 -0
- orca_design_system-0.4.1/orca/color.py +136 -0
- orca_design_system-0.4.1/orca/components.py +275 -0
- orca_design_system-0.4.1/orca/conf.py +182 -0
- orca_design_system-0.4.1/orca/data/about/g01.json +866 -0
- orca_design_system-0.4.1/orca/data/about/g02.json +707 -0
- orca_design_system-0.4.1/orca/data/about/g03.json +648 -0
- orca_design_system-0.4.1/orca/data/about/g04.json +731 -0
- orca_design_system-0.4.1/orca/data/about/g05.json +794 -0
- orca_design_system-0.4.1/orca/data/about/g06.json +794 -0
- orca_design_system-0.4.1/orca/data/about/g07.json +686 -0
- orca_design_system-0.4.1/orca/data/about/g08.json +687 -0
- orca_design_system-0.4.1/orca/data/about/g09.json +618 -0
- orca_design_system-0.4.1/orca/data/about/g10.json +686 -0
- orca_design_system-0.4.1/orca/data/about/g11.json +611 -0
- orca_design_system-0.4.1/orca/data/about/g12.json +720 -0
- orca_design_system-0.4.1/orca/data/icons_vanilla.json +1 -0
- orca_design_system-0.4.1/orca/icons.py +149 -0
- orca_design_system-0.4.1/orca/management/__init__.py +0 -0
- orca_design_system-0.4.1/orca/management/commands/__init__.py +0 -0
- orca_design_system-0.4.1/orca/management/commands/orca_element.py +22 -0
- orca_design_system-0.4.1/orca/management/commands/orca_lint.py +96 -0
- orca_design_system-0.4.1/orca/management/commands/orca_site.py +17 -0
- orca_design_system-0.4.1/orca/mixins.py +110 -0
- orca_design_system-0.4.1/orca/previews.py +177 -0
- orca_design_system-0.4.1/orca/samples.py +75 -0
- orca_design_system-0.4.1/orca/site.py +111 -0
- orca_design_system-0.4.1/orca/static/orca/css/components.css +728 -0
- orca_design_system-0.4.1/orca/static/orca/css/orca.css +611 -0
- orca_design_system-0.4.1/orca/static/orca/css/patterns.css +468 -0
- orca_design_system-0.4.1/orca/static/orca/css/templates.css +119 -0
- orca_design_system-0.4.1/orca/static/orca/css/tokens.css +532 -0
- orca_design_system-0.4.1/orca/static/orca/fonts/JetBrainsMono-Latin-Variable.woff2 +0 -0
- orca_design_system-0.4.1/orca/static/orca/fonts/JetBrainsMono-LatinExt-Variable.woff2 +0 -0
- orca_design_system-0.4.1/orca/static/orca/fonts/UbuntuSans-Italic-Variable.woff2 +0 -0
- orca_design_system-0.4.1/orca/static/orca/fonts/UbuntuSans-Variable.woff2 +0 -0
- orca_design_system-0.4.1/orca/static/orca/fonts/UbuntuSansMono-Variable.woff2 +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/overview/calendar-page.png +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/overview/dashboard-dark.png +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/overview/dashboard-light.png +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/overview/element-button.png +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/overview/list-page.png +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/overview/planning-board.png +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/overview/scheduler-page.png +0 -0
- orca_design_system-0.4.1/orca/static/orca/img/sample-barcode.svg +1 -0
- orca_design_system-0.4.1/orca/static/orca/img/sample-floor.svg +1 -0
- orca_design_system-0.4.1/orca/static/orca/img/sample-person.svg +1 -0
- orca_design_system-0.4.1/orca/static/orca/img/sample-qr.svg +1 -0
- orca_design_system-0.4.1/orca/static/orca/img/sample-street.svg +1 -0
- orca_design_system-0.4.1/orca/static/orca/js/docs.js +83 -0
- orca_design_system-0.4.1/orca/static/orca/js/orca.js +926 -0
- orca_design_system-0.4.1/orca/static/orca/vendor/chart.umd.js +14 -0
- orca_design_system-0.4.1/orca/static/orca/vendor/highlight.min.js +1245 -0
- orca_design_system-0.4.1/orca/templates/orca/components/donut.html +7 -0
- orca_design_system-0.4.1/orca/templates/orca/components/field.html +18 -0
- orca_design_system-0.4.1/orca/templates/orca/components/form_errors.html +3 -0
- orca_design_system-0.4.1/orca/templates/orca/components/messages.html +3 -0
- orca_design_system-0.4.1/orca/templates/orca/components/mini_calendar.html +11 -0
- orca_design_system-0.4.1/orca/templates/orca/components/pagination.html +8 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/base.html +45 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/element.html +100 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/_base.html +10 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/accessibility.html +42 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/ai-agents.html +78 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/brand-and-themes.html +82 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/installation.html +83 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/localization.html +43 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/principles.html +27 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/roadmap.html +34 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/tooling.html +47 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/guide/usage.html +102 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/home.html +117 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/icons.html +19 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/index.html +71 -0
- orca_design_system-0.4.1/orca/templates/orca/docs/tokens.html +35 -0
- orca_design_system-0.4.1/orca/templates/orca/email/base.html +17 -0
- orca_design_system-0.4.1/orca/templates/orca/errors/403.html +5 -0
- orca_design_system-0.4.1/orca/templates/orca/errors/404.html +6 -0
- orca_design_system-0.4.1/orca/templates/orca/errors/500.html +6 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/_empty.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/_filter_button.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/_filter_drawer.html +5 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/_table.html +6 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/child_confirm.html +9 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/child_detail.html +7 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/child_form.html +9 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/child_list.html +7 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/confirm_action.html +10 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/confirm_delete.html +16 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/detail.html +8 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/form.html +10 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/list.html +12 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/parent_base.html +15 -0
- orca_design_system-0.4.1/orca/templates/orca/generic/parent_detail.html +5 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/app.html +34 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/auth.html +14 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/base.html +18 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/blog.html +32 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/board.html +12 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/booking.html +8 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/calendar.html +12 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/dashboard.html +7 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/docs.html +8 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/error.html +14 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/event_editor.html +11 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/feed.html +10 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/home.html +9 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/marketing.html +14 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/people.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/scheduler.html +7 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/simple_data.html +9 -0
- orca_design_system-0.4.1/orca/templates/orca/layouts/timeline.html +6 -0
- orca_design_system-0.4.1/orca/templates/orca/patterns/agenda.html +4 -0
- orca_design_system-0.4.1/orca/templates/orca/patterns/chart.html +10 -0
- orca_design_system-0.4.1/orca/templates/orca/patterns/gantt.html +6 -0
- orca_design_system-0.4.1/orca/templates/orca/patterns/month_calendar.html +13 -0
- orca_design_system-0.4.1/orca/templates/orca/patterns/scheduler.html +5 -0
- orca_design_system-0.4.1/orca/templates/orca/patterns/time_grid.html +11 -0
- orca_design_system-0.4.1/orca/templates/orca/patterns/year.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/app-shell.html +6 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/auth-layout.html +3 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/blog-layout.html +15 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/booking-flow.html +5 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/calendar-page.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/dashboard.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/docs-layout.html +10 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/email-layout.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/error-layouts.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/event-editor-page.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/feed-skeleton.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/generic-confirm-action.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/generic-confirm-delete.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/generic-detail.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/generic-form.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/generic-list.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/homepage-template.html +4 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/marketing-layout.html +9 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/parent-base.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/parent-child-confirm.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/parent-child-detail.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/parent-child-form.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/parent-child-list.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/parent-detail.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/person-block-grid.html +2 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/planning-board-page.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/scheduler-page.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/simple-data-page.html +1 -0
- orca_design_system-0.4.1/orca/templates/orca/previews/timeline-page.html +1 -0
- orca_design_system-0.4.1/orca/templatetags/__init__.py +0 -0
- orca_design_system-0.4.1/orca/templatetags/orca.py +391 -0
- orca_design_system-0.4.1/orca/tokens.py +413 -0
- orca_design_system-0.4.1/orca/urls.py +19 -0
- orca_design_system-0.4.1/orca/views.py +216 -0
- orca_design_system-0.4.1/orca_design_system.egg-info/PKG-INFO +245 -0
- orca_design_system-0.4.1/orca_design_system.egg-info/SOURCES.txt +226 -0
- orca_design_system-0.4.1/orca_design_system.egg-info/dependency_links.txt +1 -0
- orca_design_system-0.4.1/orca_design_system.egg-info/entry_points.txt +2 -0
- orca_design_system-0.4.1/orca_design_system.egg-info/requires.txt +1 -0
- orca_design_system-0.4.1/orca_design_system.egg-info/top_level.txt +1 -0
- orca_design_system-0.4.1/pyproject.toml +37 -0
- orca_design_system-0.4.1/setup.cfg +4 -0
- orca_design_system-0.4.1/tests/test_orca.py +844 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Sami Ferr
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
22
|
+
|
|
23
|
+
Third-party material (Vanilla framework values and icons, LGPL-3.0; Ubuntu Sans
|
|
24
|
+
fonts, Ubuntu Font Licence 1.0) keeps its own licence: see THIRD_PARTY_NOTICES.md.
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: orca-design-system
|
|
3
|
+
Version: 0.4.1
|
|
4
|
+
Summary: ORCA: a Django design system whose every element documents when and how to use it, for developers and AI coding agents.
|
|
5
|
+
Author: Sami Ferr
|
|
6
|
+
License: MIT AND LGPL-3.0-only AND LicenseRef-Ubuntu-Font-1.0
|
|
7
|
+
Project-URL: Source, https://github.com/samiferr/orca-design-system
|
|
8
|
+
Keywords: django,design-system,ui,accessibility,ai
|
|
9
|
+
Classifier: Framework :: Django
|
|
10
|
+
Classifier: Framework :: Django :: 4.2
|
|
11
|
+
Classifier: Framework :: Django :: 5.0
|
|
12
|
+
Classifier: Framework :: Django :: 5.1
|
|
13
|
+
Classifier: Framework :: Django :: 5.2
|
|
14
|
+
Classifier: Programming Language :: Python :: 3
|
|
15
|
+
Requires-Python: >=3.10
|
|
16
|
+
Description-Content-Type: text/markdown
|
|
17
|
+
License-File: LICENSE
|
|
18
|
+
Requires-Dist: Django>=4.2
|
|
19
|
+
Dynamic: license-file
|
|
20
|
+
|
|
21
|
+
# ORCA design system
|
|
22
|
+
|
|
23
|
+
ORCA is a Django design system that helps developers and AI coding agents build consistent, accessible interfaces
|
|
24
|
+
without guessing. **Every element has a general description, then when (and when not) and how to use it in ORCA**,
|
|
25
|
+
the tokens and classes it uses, the UX principles it applies, and a copy-ready template example.
|
|
26
|
+
|
|
27
|
+
- **Structure:** five levels from the ORCA Design System Guide, each built from the level before it:
|
|
28
|
+
**Primitives** → **Components** (groups of primitives) → **Patterns** (groups of components) →
|
|
29
|
+
**Templates** (groups of patterns) → **Pages** (templates with real content).
|
|
30
|
+
- **Rules:** *Practical UI* (Dannaway, 2024) and *Laws of UX* (Yablonski, 2024). Each element names the rules it applies.
|
|
31
|
+
- **Base:** the Tangerine system from `wise_people_analyzer` (Vanilla framework 4.59 values): square corners,
|
|
32
|
+
1.5px borders, filled fields, an 8px grid, light / dark / paper themes. ORCA has one appearance, named ORCA.
|
|
33
|
+
- **Grounds:** the same backgrounds as `wise_people_analyzer`: a grey page (`--orca-bg-page`), white panels and
|
|
34
|
+
sidebar (`--orca-bg-panel`), pale yellow stat cards (`--orca-bg-stat`) and a dark brand top bar (`--orca-brand-bar`).
|
|
35
|
+
- **Page filters** always open in a right drawer from a Filters button in the page actions (the `filter-drawer` pattern).
|
|
36
|
+
- **Phase 1: Primitives.** 141 elements covering all 214 primitive items of the guide, including the planning
|
|
37
|
+
primitives (date, time, calendar marks) the guide marks as not built yet.
|
|
38
|
+
- **Phase 2: Components.** 145 elements covering all 154 component items of the guide: form fields,
|
|
39
|
+
pickers, menus, tabs, dialogs, toasts, cards, calendar and schedule parts, plan items. Each lists the primitives it is
|
|
40
|
+
built from, and template tags render the fiddly ones from Django objects.
|
|
41
|
+
- **Phase 3: Patterns.** 97 elements covering all 98 pattern items of the guide: page frame (header,
|
|
42
|
+
sidebar, drawer, settings panel), data tables and filtering, forms and editors, media, record management, eight
|
|
43
|
+
chart types, marketing and docs sections, email frame, calendar views, scheduler, event editing and planning boards.
|
|
44
|
+
Chart.js draws the charts (bundled, and loaded only on pages with charts) and the server renders the calendars, both
|
|
45
|
+
from plain Python data through one template tag.
|
|
46
|
+
- **Phase 4 (this release): Templates.** 60 elements covering all 67 template items of the guide: real Django templates
|
|
47
|
+
you extend (app shell, auth, error, email, marketing, blog and docs layouts), generic list / detail / form / confirm and
|
|
48
|
+
parent-child templates that work with class-based views, page-type skeletons (dashboard, calendar, scheduler, board,
|
|
49
|
+
timeline, booking, event editor, simple data page), structural layouts and the named slots (blocks) you fill.
|
|
50
|
+
|
|
51
|
+
## Install
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
pip install orca-design-system
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```python
|
|
58
|
+
# settings.py
|
|
59
|
+
INSTALLED_APPS = [..., "django.contrib.staticfiles", "orca"]
|
|
60
|
+
|
|
61
|
+
ORCA = {
|
|
62
|
+
"BRAND": { # the only values a project may change
|
|
63
|
+
"name": "Acme",
|
|
64
|
+
"color": "#0f95a1", # brand colour
|
|
65
|
+
"accent": "#0066cc", # interactive colour (links, ticks, switches)
|
|
66
|
+
"logo": "brand/logo.svg",
|
|
67
|
+
"favicon": "brand/favicon.svg",
|
|
68
|
+
},
|
|
69
|
+
"THEME": "auto", # auto | light | dark | paper
|
|
70
|
+
"DENSITY": "comfortable", # comfortable | dense (tighter type, controls and spacing)
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
```django
|
|
75
|
+
{# base.html #}
|
|
76
|
+
{% load orca %}<!doctype html>
|
|
77
|
+
<html {% orca_html_attrs %}>
|
|
78
|
+
<head>
|
|
79
|
+
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
80
|
+
{% orca_head %}
|
|
81
|
+
</head>
|
|
82
|
+
<body>
|
|
83
|
+
<a class="orca-skip-link" href="#main">Skip to main content</a>
|
|
84
|
+
<main id="main" tabindex="-1">
|
|
85
|
+
<h1 class="orca-page-title">Images</h1>
|
|
86
|
+
<button class="orca-button orca-button--primary" type="button">{% icon "plus" %}Add image</button>
|
|
87
|
+
</main>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Documentation website
|
|
93
|
+
|
|
94
|
+
The documentation website is generated from the package itself: an overview, nine guide pages (installation, usage,
|
|
95
|
+
brand and themes, AI agents, principles, accessibility, localization, tooling, roadmap), one page per element with
|
|
96
|
+
live examples, and the token and icon references.
|
|
97
|
+
|
|
98
|
+
```python
|
|
99
|
+
# serve it inside your project, with your brand
|
|
100
|
+
path("orca/", include("orca.urls")),
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
# or export it as static HTML (one file per page, relative links)
|
|
105
|
+
python demo/manage.py orca_site site/
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
`.github/workflows/docs.yml` tests, exports and deploys it to GitHub Pages on every push to `main`
|
|
109
|
+
(enable it once: repository Settings, Pages, Source: GitHub Actions).
|
|
110
|
+
|
|
111
|
+
## Components from Django objects
|
|
112
|
+
|
|
113
|
+
```django
|
|
114
|
+
{% load orca %}
|
|
115
|
+
{% orca_messages %} {# django.contrib.messages as alerts #}
|
|
116
|
+
<form method="post">{% csrf_token %}
|
|
117
|
+
{% orca_form_errors form %} {# non-field errors + linked summary #}
|
|
118
|
+
<div class="orca-fields">
|
|
119
|
+
{% orca_field form.name %} {# label, (optional), help, error, control, ARIA #}
|
|
120
|
+
{% orca_field form.port width="w8" %}
|
|
121
|
+
{% orca_field form.enabled switch=True %}
|
|
122
|
+
</div>
|
|
123
|
+
<div class="orca-form-actions"><button class="orca-button orca-button--primary" type="submit">Save video</button></div>
|
|
124
|
+
</form>
|
|
125
|
+
{% orca_pagination page_obj noun="videos" %} {# keeps filters in the links #}
|
|
126
|
+
{% orca_mini_calendar month selected=day url="/day/{date}/" nav_url="?month={month}" %}
|
|
127
|
+
{% orca_sparkline values "Visitors per hour" %} {% orca_donut segments total_label="Visitors" %}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Patterns from your data
|
|
131
|
+
|
|
132
|
+
```django
|
|
133
|
+
{% orca_chart "bar" data title="Visitors per day" subtitle="This week" %} {# data: {"labels": [...], "series": [{"name", "values"}]} #}
|
|
134
|
+
{% orca_month_calendar events month="2026-11" today=today day_url="?day={date}" %}
|
|
135
|
+
{% orca_week_view events start=monday days=7 today=today now=now %} {# days=1 day view, days=3 multi-day #}
|
|
136
|
+
{% orca_agenda events start=today days=7 %} {% orca_year_view year=2026 events=events %}
|
|
137
|
+
{% extends "orca/email/base.html" %} {# brand-coloured transactional email #}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Events are dicts with `title`, `start`, `end`, `all_day`, `color` (1–8 or any CSS colour), `url`, `location` and
|
|
141
|
+
`status`. `orca.samples.SAMPLE` holds the realistic data every documentation example uses.
|
|
142
|
+
|
|
143
|
+
## Pages from templates
|
|
144
|
+
|
|
145
|
+
```python
|
|
146
|
+
from django.views.generic import ListView
|
|
147
|
+
from orca.mixins import OrcaPageMixin
|
|
148
|
+
|
|
149
|
+
class VideoList(OrcaPageMixin, ListView):
|
|
150
|
+
model = Video
|
|
151
|
+
paginate_by = 25
|
|
152
|
+
template_name = "orca/generic/list.html" # title, Add button, search, table → cards on phones, pager
|
|
153
|
+
list_columns = ["name", "site", "status", ("Counted today", "today")]
|
|
154
|
+
detail_url_name, create_url_name = "video-detail", "video-create"
|
|
155
|
+
update_url_name, delete_url_name = "video-update", "video-delete"
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
```django
|
|
159
|
+
{% extends "orca/layouts/app.html" %} {# or dashboard, calendar, scheduler, board, timeline… #}
|
|
160
|
+
{% block page_actions %}<a class="orca-button orca-button--primary" href="…">Add video</a>{% endblock %}
|
|
161
|
+
{% block content %}…{% endblock %}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Set `nav` (sidebar sections) in a context processor once. Error pages: create `templates/404.html` with
|
|
165
|
+
`{% extends "orca/errors/404.html" %}` (same for 403 and 500).
|
|
166
|
+
|
|
167
|
+
## Brand tokens only
|
|
168
|
+
|
|
169
|
+
A project changes **brand tokens only**, through `settings.ORCA["BRAND"]`:
|
|
170
|
+
|
|
171
|
+
| Key | CSS | What it does |
|
|
172
|
+
|---|---|---|
|
|
173
|
+
| `name` | – | Product name: logo alt text and wordmark |
|
|
174
|
+
| `logo`, `favicon` | – | Static paths of the logo and favicon |
|
|
175
|
+
| `color` | `--orca-brand`, `--orca-brand-strong*`, `--orca-brand-bar*` | Brand colour; fills that carry text are derived to reach 4.5:1; the top bar is the colour mixed with 30% black |
|
|
176
|
+
| `on_color` | `--orca-brand-on` | Text on brand fills (auto black/white when empty) |
|
|
177
|
+
| `accent`, `accent_dark` | `--orca-accent` | Interactive colour per theme; adjusted to reach 4.5:1 |
|
|
178
|
+
| `font_sans`, `font_mono` | `--orca-font-sans`, `--orca-font-mono` | Font stacks |
|
|
179
|
+
|
|
180
|
+
Write colours as `"0F95A1"`, `"#06c"` or `rgb(…)`; ORCA normalises them. If a colour fails contrast, ORCA adjusts it
|
|
181
|
+
and reports the change as the system-check warning `orca.W001`. Unknown keys are errors (`orca.E002`). Every other
|
|
182
|
+
token is fixed, and `python manage.py orca_lint` flags any override of a non-brand `--orca-*` token.
|
|
183
|
+
|
|
184
|
+
## Find the right element
|
|
185
|
+
|
|
186
|
+
```bash
|
|
187
|
+
python -m orca list # every element by category
|
|
188
|
+
python -m orca show button # general description / when / how / example
|
|
189
|
+
python -m orca search date # search names, guide items and classes
|
|
190
|
+
python -m orca icons # icon names and aliases
|
|
191
|
+
python -m orca tokens # token names and usage
|
|
192
|
+
python manage.py orca_element switch
|
|
193
|
+
python manage.py orca_lint templates/ # check templates and CSS against ORCA's rules
|
|
194
|
+
python manage.py orca_site site/ # export the documentation website
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
The same content is in [`docs/primitives/`](docs/primitives/README.md) and [`docs/components/`](docs/components/README.md) and [`docs/patterns/`](docs/patterns/README.md) and [`docs/templates/`](docs/templates/README.md) (Markdown, one file per category) and
|
|
198
|
+
[`docs/catalogue.json`](docs/catalogue.json) (machine-readable). AI agents: start with [`AGENTS.md`](AGENTS.md).
|
|
199
|
+
|
|
200
|
+
## What is in the package
|
|
201
|
+
|
|
202
|
+
| Path | Content |
|
|
203
|
+
|---|---|
|
|
204
|
+
| `orca/tokens.py` | Single source of every token (generated into `static/orca/css/tokens.css`) |
|
|
205
|
+
| `orca/static/orca/css/orca.css` | All primitives, in cascade layers `orca.base`, `orca.primitives`, `orca.utilities` |
|
|
206
|
+
| `orca/static/orca/css/components.css` | All components, in the `orca.components` layer |
|
|
207
|
+
| `orca/static/orca/css/patterns.css` | All patterns, in the `orca.patterns` layer |
|
|
208
|
+
| `orca/static/orca/css/templates.css` | Structural layouts and page frames, in the `orca.templates` layer |
|
|
209
|
+
| `orca/templates/orca/layouts/`, `orca/generic/`, `orca/errors/` | The Django templates you extend |
|
|
210
|
+
| `orca/mixins.py` | `OrcaPageMixin` for class-based views |
|
|
211
|
+
| `orca/charts.py`, `orca/calendar_views.py` | Server side of the chart and calendar pattern tags |
|
|
212
|
+
| `orca/samples.py` | Sample data used by the documentation examples |
|
|
213
|
+
| `orca/static/orca/js/orca.js` | Optional progressive enhancement, opt-in by data attribute: menus, listbox, combobox, tabs, dialogs and confirm, toasts, date shortcuts and ranges, repeating rows, carousel, steppers, OTP, theme |
|
|
214
|
+
| `orca/components.py` | Server side of the component tags (field wiring, page windows, month grids, charts) |
|
|
215
|
+
| `orca/catalogue/` | The element catalogue: when, how, a11y, tokens, classes, principles, examples |
|
|
216
|
+
| `orca/data/about/` | The general description of every element (what it is, use cases, when not to use it, best practices) |
|
|
217
|
+
| `orca/templatetags/orca.py` | `orca_head`, `orca_html_attrs`, `icon`, `status_icon`, `orca_logo`, `orca_illustration`, `orca_timezone_options`, filters `orca_duration`, `orca_initials` |
|
|
218
|
+
| `orca/icons.py`, `orca/data/` | 106 Vanilla glyphs plus ORCA glyphs (home, edit, calendar, clock, …) |
|
|
219
|
+
| `orca/checks.py` | Django system checks for `settings.ORCA` |
|
|
220
|
+
|
|
221
|
+
## Develop
|
|
222
|
+
|
|
223
|
+
```bash
|
|
224
|
+
python -m venv .venv && .venv/bin/pip install -e .
|
|
225
|
+
.venv/bin/python -m orca build # regenerate tokens.css and docs/
|
|
226
|
+
.venv/bin/python -m django test tests --settings=tests.settings
|
|
227
|
+
.venv/bin/python demo/manage.py runserver # catalogue at http://127.0.0.1:8000/orca/
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
The tests check that every guide item is covered, every element has a general description, its when/how and a rendering example,
|
|
231
|
+
documented classes and tokens exist, text and control contrast hold in all three themes, and generated files are current.
|
|
232
|
+
|
|
233
|
+
## Roadmap
|
|
234
|
+
|
|
235
|
+
1. **Primitives** (released): the smallest pieces and the base styles.
|
|
236
|
+
2. **Components** (released): groups of primitives (form field, search bar, date picker, pagination, stat card…).
|
|
237
|
+
3. **Patterns** (released): groups of components (page head with page actions, filter drawer, sidebar, data table…).
|
|
238
|
+
4. **Templates** (this release): groups of patterns (app shell, list page, detail page…).
|
|
239
|
+
5. Pages: templates filled with real content.
|
|
240
|
+
|
|
241
|
+
## Licences
|
|
242
|
+
|
|
243
|
+
ORCA's code is MIT. Token values, component measurements and 106 icon shapes come from Canonical's Vanilla framework
|
|
244
|
+
4.59 (LGPL-3.0) through Tangerine; Ubuntu Sans fonts are under the Ubuntu Font Licence 1.0; the vendored Chart.js 4.4.7 is MIT, highlight.js 11.10 is BSD-3-Clause and JetBrains Mono is under the SIL Open Font Licence 1.1. ORCA is not affiliated with
|
|
245
|
+
Canonical. See [`THIRD_PARTY_NOTICES.md`](THIRD_PARTY_NOTICES.md).
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
# ORCA design system
|
|
2
|
+
|
|
3
|
+
ORCA is a Django design system that helps developers and AI coding agents build consistent, accessible interfaces
|
|
4
|
+
without guessing. **Every element has a general description, then when (and when not) and how to use it in ORCA**,
|
|
5
|
+
the tokens and classes it uses, the UX principles it applies, and a copy-ready template example.
|
|
6
|
+
|
|
7
|
+
- **Structure:** five levels from the ORCA Design System Guide, each built from the level before it:
|
|
8
|
+
**Primitives** → **Components** (groups of primitives) → **Patterns** (groups of components) →
|
|
9
|
+
**Templates** (groups of patterns) → **Pages** (templates with real content).
|
|
10
|
+
- **Rules:** *Practical UI* (Dannaway, 2024) and *Laws of UX* (Yablonski, 2024). Each element names the rules it applies.
|
|
11
|
+
- **Base:** the Tangerine system from `wise_people_analyzer` (Vanilla framework 4.59 values): square corners,
|
|
12
|
+
1.5px borders, filled fields, an 8px grid, light / dark / paper themes. ORCA has one appearance, named ORCA.
|
|
13
|
+
- **Grounds:** the same backgrounds as `wise_people_analyzer`: a grey page (`--orca-bg-page`), white panels and
|
|
14
|
+
sidebar (`--orca-bg-panel`), pale yellow stat cards (`--orca-bg-stat`) and a dark brand top bar (`--orca-brand-bar`).
|
|
15
|
+
- **Page filters** always open in a right drawer from a Filters button in the page actions (the `filter-drawer` pattern).
|
|
16
|
+
- **Phase 1: Primitives.** 141 elements covering all 214 primitive items of the guide, including the planning
|
|
17
|
+
primitives (date, time, calendar marks) the guide marks as not built yet.
|
|
18
|
+
- **Phase 2: Components.** 145 elements covering all 154 component items of the guide: form fields,
|
|
19
|
+
pickers, menus, tabs, dialogs, toasts, cards, calendar and schedule parts, plan items. Each lists the primitives it is
|
|
20
|
+
built from, and template tags render the fiddly ones from Django objects.
|
|
21
|
+
- **Phase 3: Patterns.** 97 elements covering all 98 pattern items of the guide: page frame (header,
|
|
22
|
+
sidebar, drawer, settings panel), data tables and filtering, forms and editors, media, record management, eight
|
|
23
|
+
chart types, marketing and docs sections, email frame, calendar views, scheduler, event editing and planning boards.
|
|
24
|
+
Chart.js draws the charts (bundled, and loaded only on pages with charts) and the server renders the calendars, both
|
|
25
|
+
from plain Python data through one template tag.
|
|
26
|
+
- **Phase 4 (this release): Templates.** 60 elements covering all 67 template items of the guide: real Django templates
|
|
27
|
+
you extend (app shell, auth, error, email, marketing, blog and docs layouts), generic list / detail / form / confirm and
|
|
28
|
+
parent-child templates that work with class-based views, page-type skeletons (dashboard, calendar, scheduler, board,
|
|
29
|
+
timeline, booking, event editor, simple data page), structural layouts and the named slots (blocks) you fill.
|
|
30
|
+
|
|
31
|
+
## Install
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
pip install orca-design-system
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```python
|
|
38
|
+
# settings.py
|
|
39
|
+
INSTALLED_APPS = [..., "django.contrib.staticfiles", "orca"]
|
|
40
|
+
|
|
41
|
+
ORCA = {
|
|
42
|
+
"BRAND": { # the only values a project may change
|
|
43
|
+
"name": "Acme",
|
|
44
|
+
"color": "#0f95a1", # brand colour
|
|
45
|
+
"accent": "#0066cc", # interactive colour (links, ticks, switches)
|
|
46
|
+
"logo": "brand/logo.svg",
|
|
47
|
+
"favicon": "brand/favicon.svg",
|
|
48
|
+
},
|
|
49
|
+
"THEME": "auto", # auto | light | dark | paper
|
|
50
|
+
"DENSITY": "comfortable", # comfortable | dense (tighter type, controls and spacing)
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```django
|
|
55
|
+
{# base.html #}
|
|
56
|
+
{% load orca %}<!doctype html>
|
|
57
|
+
<html {% orca_html_attrs %}>
|
|
58
|
+
<head>
|
|
59
|
+
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
60
|
+
{% orca_head %}
|
|
61
|
+
</head>
|
|
62
|
+
<body>
|
|
63
|
+
<a class="orca-skip-link" href="#main">Skip to main content</a>
|
|
64
|
+
<main id="main" tabindex="-1">
|
|
65
|
+
<h1 class="orca-page-title">Images</h1>
|
|
66
|
+
<button class="orca-button orca-button--primary" type="button">{% icon "plus" %}Add image</button>
|
|
67
|
+
</main>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Documentation website
|
|
73
|
+
|
|
74
|
+
The documentation website is generated from the package itself: an overview, nine guide pages (installation, usage,
|
|
75
|
+
brand and themes, AI agents, principles, accessibility, localization, tooling, roadmap), one page per element with
|
|
76
|
+
live examples, and the token and icon references.
|
|
77
|
+
|
|
78
|
+
```python
|
|
79
|
+
# serve it inside your project, with your brand
|
|
80
|
+
path("orca/", include("orca.urls")),
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
# or export it as static HTML (one file per page, relative links)
|
|
85
|
+
python demo/manage.py orca_site site/
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
`.github/workflows/docs.yml` tests, exports and deploys it to GitHub Pages on every push to `main`
|
|
89
|
+
(enable it once: repository Settings, Pages, Source: GitHub Actions).
|
|
90
|
+
|
|
91
|
+
## Components from Django objects
|
|
92
|
+
|
|
93
|
+
```django
|
|
94
|
+
{% load orca %}
|
|
95
|
+
{% orca_messages %} {# django.contrib.messages as alerts #}
|
|
96
|
+
<form method="post">{% csrf_token %}
|
|
97
|
+
{% orca_form_errors form %} {# non-field errors + linked summary #}
|
|
98
|
+
<div class="orca-fields">
|
|
99
|
+
{% orca_field form.name %} {# label, (optional), help, error, control, ARIA #}
|
|
100
|
+
{% orca_field form.port width="w8" %}
|
|
101
|
+
{% orca_field form.enabled switch=True %}
|
|
102
|
+
</div>
|
|
103
|
+
<div class="orca-form-actions"><button class="orca-button orca-button--primary" type="submit">Save video</button></div>
|
|
104
|
+
</form>
|
|
105
|
+
{% orca_pagination page_obj noun="videos" %} {# keeps filters in the links #}
|
|
106
|
+
{% orca_mini_calendar month selected=day url="/day/{date}/" nav_url="?month={month}" %}
|
|
107
|
+
{% orca_sparkline values "Visitors per hour" %} {% orca_donut segments total_label="Visitors" %}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Patterns from your data
|
|
111
|
+
|
|
112
|
+
```django
|
|
113
|
+
{% orca_chart "bar" data title="Visitors per day" subtitle="This week" %} {# data: {"labels": [...], "series": [{"name", "values"}]} #}
|
|
114
|
+
{% orca_month_calendar events month="2026-11" today=today day_url="?day={date}" %}
|
|
115
|
+
{% orca_week_view events start=monday days=7 today=today now=now %} {# days=1 day view, days=3 multi-day #}
|
|
116
|
+
{% orca_agenda events start=today days=7 %} {% orca_year_view year=2026 events=events %}
|
|
117
|
+
{% extends "orca/email/base.html" %} {# brand-coloured transactional email #}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Events are dicts with `title`, `start`, `end`, `all_day`, `color` (1–8 or any CSS colour), `url`, `location` and
|
|
121
|
+
`status`. `orca.samples.SAMPLE` holds the realistic data every documentation example uses.
|
|
122
|
+
|
|
123
|
+
## Pages from templates
|
|
124
|
+
|
|
125
|
+
```python
|
|
126
|
+
from django.views.generic import ListView
|
|
127
|
+
from orca.mixins import OrcaPageMixin
|
|
128
|
+
|
|
129
|
+
class VideoList(OrcaPageMixin, ListView):
|
|
130
|
+
model = Video
|
|
131
|
+
paginate_by = 25
|
|
132
|
+
template_name = "orca/generic/list.html" # title, Add button, search, table → cards on phones, pager
|
|
133
|
+
list_columns = ["name", "site", "status", ("Counted today", "today")]
|
|
134
|
+
detail_url_name, create_url_name = "video-detail", "video-create"
|
|
135
|
+
update_url_name, delete_url_name = "video-update", "video-delete"
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
```django
|
|
139
|
+
{% extends "orca/layouts/app.html" %} {# or dashboard, calendar, scheduler, board, timeline… #}
|
|
140
|
+
{% block page_actions %}<a class="orca-button orca-button--primary" href="…">Add video</a>{% endblock %}
|
|
141
|
+
{% block content %}…{% endblock %}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Set `nav` (sidebar sections) in a context processor once. Error pages: create `templates/404.html` with
|
|
145
|
+
`{% extends "orca/errors/404.html" %}` (same for 403 and 500).
|
|
146
|
+
|
|
147
|
+
## Brand tokens only
|
|
148
|
+
|
|
149
|
+
A project changes **brand tokens only**, through `settings.ORCA["BRAND"]`:
|
|
150
|
+
|
|
151
|
+
| Key | CSS | What it does |
|
|
152
|
+
|---|---|---|
|
|
153
|
+
| `name` | – | Product name: logo alt text and wordmark |
|
|
154
|
+
| `logo`, `favicon` | – | Static paths of the logo and favicon |
|
|
155
|
+
| `color` | `--orca-brand`, `--orca-brand-strong*`, `--orca-brand-bar*` | Brand colour; fills that carry text are derived to reach 4.5:1; the top bar is the colour mixed with 30% black |
|
|
156
|
+
| `on_color` | `--orca-brand-on` | Text on brand fills (auto black/white when empty) |
|
|
157
|
+
| `accent`, `accent_dark` | `--orca-accent` | Interactive colour per theme; adjusted to reach 4.5:1 |
|
|
158
|
+
| `font_sans`, `font_mono` | `--orca-font-sans`, `--orca-font-mono` | Font stacks |
|
|
159
|
+
|
|
160
|
+
Write colours as `"0F95A1"`, `"#06c"` or `rgb(…)`; ORCA normalises them. If a colour fails contrast, ORCA adjusts it
|
|
161
|
+
and reports the change as the system-check warning `orca.W001`. Unknown keys are errors (`orca.E002`). Every other
|
|
162
|
+
token is fixed, and `python manage.py orca_lint` flags any override of a non-brand `--orca-*` token.
|
|
163
|
+
|
|
164
|
+
## Find the right element
|
|
165
|
+
|
|
166
|
+
```bash
|
|
167
|
+
python -m orca list # every element by category
|
|
168
|
+
python -m orca show button # general description / when / how / example
|
|
169
|
+
python -m orca search date # search names, guide items and classes
|
|
170
|
+
python -m orca icons # icon names and aliases
|
|
171
|
+
python -m orca tokens # token names and usage
|
|
172
|
+
python manage.py orca_element switch
|
|
173
|
+
python manage.py orca_lint templates/ # check templates and CSS against ORCA's rules
|
|
174
|
+
python manage.py orca_site site/ # export the documentation website
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
The same content is in [`docs/primitives/`](docs/primitives/README.md) and [`docs/components/`](docs/components/README.md) and [`docs/patterns/`](docs/patterns/README.md) and [`docs/templates/`](docs/templates/README.md) (Markdown, one file per category) and
|
|
178
|
+
[`docs/catalogue.json`](docs/catalogue.json) (machine-readable). AI agents: start with [`AGENTS.md`](AGENTS.md).
|
|
179
|
+
|
|
180
|
+
## What is in the package
|
|
181
|
+
|
|
182
|
+
| Path | Content |
|
|
183
|
+
|---|---|
|
|
184
|
+
| `orca/tokens.py` | Single source of every token (generated into `static/orca/css/tokens.css`) |
|
|
185
|
+
| `orca/static/orca/css/orca.css` | All primitives, in cascade layers `orca.base`, `orca.primitives`, `orca.utilities` |
|
|
186
|
+
| `orca/static/orca/css/components.css` | All components, in the `orca.components` layer |
|
|
187
|
+
| `orca/static/orca/css/patterns.css` | All patterns, in the `orca.patterns` layer |
|
|
188
|
+
| `orca/static/orca/css/templates.css` | Structural layouts and page frames, in the `orca.templates` layer |
|
|
189
|
+
| `orca/templates/orca/layouts/`, `orca/generic/`, `orca/errors/` | The Django templates you extend |
|
|
190
|
+
| `orca/mixins.py` | `OrcaPageMixin` for class-based views |
|
|
191
|
+
| `orca/charts.py`, `orca/calendar_views.py` | Server side of the chart and calendar pattern tags |
|
|
192
|
+
| `orca/samples.py` | Sample data used by the documentation examples |
|
|
193
|
+
| `orca/static/orca/js/orca.js` | Optional progressive enhancement, opt-in by data attribute: menus, listbox, combobox, tabs, dialogs and confirm, toasts, date shortcuts and ranges, repeating rows, carousel, steppers, OTP, theme |
|
|
194
|
+
| `orca/components.py` | Server side of the component tags (field wiring, page windows, month grids, charts) |
|
|
195
|
+
| `orca/catalogue/` | The element catalogue: when, how, a11y, tokens, classes, principles, examples |
|
|
196
|
+
| `orca/data/about/` | The general description of every element (what it is, use cases, when not to use it, best practices) |
|
|
197
|
+
| `orca/templatetags/orca.py` | `orca_head`, `orca_html_attrs`, `icon`, `status_icon`, `orca_logo`, `orca_illustration`, `orca_timezone_options`, filters `orca_duration`, `orca_initials` |
|
|
198
|
+
| `orca/icons.py`, `orca/data/` | 106 Vanilla glyphs plus ORCA glyphs (home, edit, calendar, clock, …) |
|
|
199
|
+
| `orca/checks.py` | Django system checks for `settings.ORCA` |
|
|
200
|
+
|
|
201
|
+
## Develop
|
|
202
|
+
|
|
203
|
+
```bash
|
|
204
|
+
python -m venv .venv && .venv/bin/pip install -e .
|
|
205
|
+
.venv/bin/python -m orca build # regenerate tokens.css and docs/
|
|
206
|
+
.venv/bin/python -m django test tests --settings=tests.settings
|
|
207
|
+
.venv/bin/python demo/manage.py runserver # catalogue at http://127.0.0.1:8000/orca/
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
The tests check that every guide item is covered, every element has a general description, its when/how and a rendering example,
|
|
211
|
+
documented classes and tokens exist, text and control contrast hold in all three themes, and generated files are current.
|
|
212
|
+
|
|
213
|
+
## Roadmap
|
|
214
|
+
|
|
215
|
+
1. **Primitives** (released): the smallest pieces and the base styles.
|
|
216
|
+
2. **Components** (released): groups of primitives (form field, search bar, date picker, pagination, stat card…).
|
|
217
|
+
3. **Patterns** (released): groups of components (page head with page actions, filter drawer, sidebar, data table…).
|
|
218
|
+
4. **Templates** (this release): groups of patterns (app shell, list page, detail page…).
|
|
219
|
+
5. Pages: templates filled with real content.
|
|
220
|
+
|
|
221
|
+
## Licences
|
|
222
|
+
|
|
223
|
+
ORCA's code is MIT. Token values, component measurements and 106 icon shapes come from Canonical's Vanilla framework
|
|
224
|
+
4.59 (LGPL-3.0) through Tangerine; Ubuntu Sans fonts are under the Ubuntu Font Licence 1.0; the vendored Chart.js 4.4.7 is MIT, highlight.js 11.10 is BSD-3-Clause and JetBrains Mono is under the SIL Open Font Licence 1.1. ORCA is not affiliated with
|
|
225
|
+
Canonical. See [`THIRD_PARTY_NOTICES.md`](THIRD_PARTY_NOTICES.md).
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"""ORCA design system for Django: elements with their when, how and live examples.
|
|
2
|
+
|
|
3
|
+
Quick start::
|
|
4
|
+
|
|
5
|
+
pip install orca-design-system
|
|
6
|
+
INSTALLED_APPS += ["orca"]
|
|
7
|
+
# base template
|
|
8
|
+
{% load orca %}<html {% orca_html_attrs %}><head>{% orca_head %}</head>
|
|
9
|
+
|
|
10
|
+
Look up any element from a terminal: ``python -m orca show button``.
|
|
11
|
+
"""
|
|
12
|
+
|
|
13
|
+
import datetime as _datetime
|
|
14
|
+
|
|
15
|
+
__version__ = "0.4.1"
|
|
16
|
+
__released__ = _datetime.date(2026, 11, 14) # shown as "Last updated" on the documentation pages; set it when you release
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"""Command line for humans and AI agents. No Django project needed.
|
|
2
|
+
|
|
3
|
+
python -m orca list [category] every element id, grouped by category
|
|
4
|
+
python -m orca show <id> when / how / example of one element
|
|
5
|
+
python -m orca search <words> find elements by name, guide item or class
|
|
6
|
+
python -m orca icons all icon names and aliases
|
|
7
|
+
python -m orca tokens brand tokens and every CSS token name
|
|
8
|
+
python -m orca json the whole catalogue as JSON
|
|
9
|
+
python -m orca build regenerate tokens.css and docs/ (maintainers)
|
|
10
|
+
"""
|
|
11
|
+
|
|
12
|
+
from __future__ import annotations
|
|
13
|
+
|
|
14
|
+
import json
|
|
15
|
+
import sys
|
|
16
|
+
|
|
17
|
+
from . import build, icons, tokens
|
|
18
|
+
from .catalogue import registry
|
|
19
|
+
from .catalogue.render import element_text
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
def main(argv: list[str] | None = None) -> int:
|
|
23
|
+
args = list(sys.argv[1:] if argv is None else argv)
|
|
24
|
+
cmd = args.pop(0) if args else "help"
|
|
25
|
+
|
|
26
|
+
if cmd == "list":
|
|
27
|
+
for cat in registry.categories():
|
|
28
|
+
if args and args[0] not in (cat.key, cat.title):
|
|
29
|
+
continue
|
|
30
|
+
print(f"\n{cat.title} ({cat.key})")
|
|
31
|
+
for el in registry.by_category(cat.key):
|
|
32
|
+
print(f" {el.id:<24} {el.summary}")
|
|
33
|
+
return 0
|
|
34
|
+
if cmd == "show" and args:
|
|
35
|
+
el = registry.get(args[0])
|
|
36
|
+
if el is None:
|
|
37
|
+
hits = registry.search(" ".join(args))
|
|
38
|
+
if len(hits) == 1:
|
|
39
|
+
el = hits[0]
|
|
40
|
+
else:
|
|
41
|
+
print(f"No element {args[0]!r}." + (f" Did you mean: {', '.join(h.id for h in hits[:8])}?" if hits else ""))
|
|
42
|
+
return 1
|
|
43
|
+
print(element_text(el))
|
|
44
|
+
return 0
|
|
45
|
+
if cmd == "search" and args:
|
|
46
|
+
for el in registry.search(" ".join(args)):
|
|
47
|
+
print(f"{el.id:<24} {el.name}: {el.summary}")
|
|
48
|
+
return 0
|
|
49
|
+
if cmd == "icons":
|
|
50
|
+
print(" ".join(icons.names()))
|
|
51
|
+
print("\nAliases: " + ", ".join(f"{a} -> {t}" for a, t in sorted(icons.ALIASES.items())))
|
|
52
|
+
return 0
|
|
53
|
+
if cmd == "tokens":
|
|
54
|
+
print("Brand tokens (settings.ORCA['BRAND']):")
|
|
55
|
+
for t in tokens.BRAND_TOKENS:
|
|
56
|
+
print(f" {t.key:<12} {', '.join(t.css) or '(template)':<28} {t.usage}")
|
|
57
|
+
print("\nSemantic colours:")
|
|
58
|
+
for t in tokens.semantic_tokens():
|
|
59
|
+
print(f" --orca-{t.name:<22} {t.usage}")
|
|
60
|
+
print("\nScales:")
|
|
61
|
+
for s in tokens.ALL_SCALES:
|
|
62
|
+
print(f" --orca-{s.name:<22} {s.value:<12} {s.usage}")
|
|
63
|
+
return 0
|
|
64
|
+
if cmd == "json":
|
|
65
|
+
print(json.dumps(registry.as_json(), indent=1, ensure_ascii=False))
|
|
66
|
+
return 0
|
|
67
|
+
if cmd == "build":
|
|
68
|
+
changed = build.write()
|
|
69
|
+
print("\n".join(f"wrote {p}" for p in changed) or "Everything up to date.")
|
|
70
|
+
return 0
|
|
71
|
+
print(__doc__)
|
|
72
|
+
return 0 if cmd in ("help", "-h", "--help") else 1
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
if __name__ == "__main__":
|
|
76
|
+
raise SystemExit(main())
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
from django.apps import AppConfig
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
class OrcaConfig(AppConfig):
|
|
5
|
+
name = "orca"
|
|
6
|
+
verbose_name = "ORCA design system"
|
|
7
|
+
default_auto_field = "django.db.models.AutoField"
|
|
8
|
+
|
|
9
|
+
def ready(self):
|
|
10
|
+
from . import checks # noqa: F401 (registers the system checks)
|