django-usp-theme 0.1.0__py3-none-any.whl

django_usp_theme/static/usp_theme/css/base.css

@@ -0,0 +1,53 @@
+/* ============================================
+   USP Theme — Base
+   ============================================ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--usp-font-sans);
+  font-size: var(--usp-text-base);
+  line-height: var(--usp-leading-normal);
+  color: var(--usp-color-ink);
+  background-color: var(--usp-color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ---------- Typography ---------- */
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  font-weight: var(--usp-weight-semibold);
+  line-height: var(--usp-leading-tight);
+  color: var(--usp-color-ink);
+  text-wrap: balance;
+}
+
+h1 { font-size: var(--usp-text-4xl); }
+h2 { font-size: var(--usp-text-3xl); }
+h3 { font-size: var(--usp-text-2xl); }
+h4 { font-size: var(--usp-text-xl); }
+h5 { font-size: var(--usp-text-lg); }
+h6 { font-size: var(--usp-text-base); }
+
+p {
+  text-wrap: pretty;
+}
+
+.text-muted {
+  color: var(--usp-color-ink-muted) !important;
+}
+
+.text-secondary {
+  color: var(--usp-color-ink-secondary) !important;
+}
+
+small {
+  font-size: var(--usp-text-xs);
+}

django_usp_theme/static/usp_theme/css/components.css

@@ -0,0 +1,537 @@
+/* ============================================
+   USP Theme — Components
+   ============================================ */
+
+/* ---------- Buttons ---------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--usp-space-2);
+  padding: var(--usp-space-2) var(--usp-space-4);
+  font-family: var(--usp-font-sans);
+  font-size: var(--usp-text-sm);
+  font-weight: var(--usp-weight-medium);
+  line-height: 1.5;
+  border: 1px solid transparent;
+  border-radius: var(--usp-radius-md);
+  cursor: pointer;
+  transition: background var(--usp-transition-fast), border-color var(--usp-transition-fast), color var(--usp-transition-fast), box-shadow var(--usp-transition-fast);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--usp-color-bg), 0 0 0 4px var(--usp-color-primary);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-sm {
+  padding: var(--usp-space-1) var(--usp-space-3);
+  font-size: var(--usp-text-xs);
+}
+
+.btn-lg {
+  padding: var(--usp-space-3) var(--usp-space-6);
+  font-size: var(--usp-text-base);
+}
+
+/* Primary */
+.btn-primary {
+  background: var(--usp-color-primary);
+  color: var(--usp-color-primary-text);
+  border-color: var(--usp-color-primary);
+}
+
+.btn-primary:hover {
+  background: var(--usp-color-primary-hover);
+  border-color: var(--usp-color-primary-hover);
+}
+
+.btn-primary:active {
+  background: var(--usp-color-primary-active);
+  border-color: var(--usp-color-primary-active);
+}
+
+/* Secondary */
+.btn-secondary {
+  background: var(--usp-color-surface);
+  color: var(--usp-color-ink);
+  border-color: var(--usp-color-border);
+}
+
+.btn-secondary:hover {
+  background: var(--usp-color-border);
+}
+
+/* Danger */
+.btn-danger {
+  background: var(--usp-color-danger);
+  color: var(--usp-color-danger-text);
+  border-color: var(--usp-color-danger);
+}
+
+.btn-danger:hover {
+  background: #a93226;
+  border-color: #a93226;
+}
+
+/* Warning */
+.btn-warning {
+  background: var(--usp-color-warning);
+  color: var(--usp-color-warning-text);
+  border-color: var(--usp-color-warning);
+}
+
+/* Info */
+.btn-info {
+  background: var(--usp-color-info);
+  color: var(--usp-color-info-text);
+  border-color: var(--usp-color-info);
+}
+
+.btn-info:hover {
+  background: #4fb8c8;
+  border-color: #4fb8c8;
+}
+
+/* Success */
+.btn-success {
+  background: var(--usp-color-success);
+  color: var(--usp-color-success-text);
+  border-color: var(--usp-color-success);
+}
+
+.btn-success:hover {
+  background: #256b4a;
+  border-color: #256b4a;
+}
+
+/* Outline variants */
+.btn-outline-primary {
+  background: transparent;
+  color: var(--usp-color-primary);
+  border-color: var(--usp-color-primary);
+}
+
+.btn-outline-primary:hover {
+  background: var(--usp-color-primary);
+  color: var(--usp-color-primary-text);
+}
+
+.btn-outline-secondary {
+  background: transparent;
+  color: var(--usp-color-ink-secondary);
+  border-color: var(--usp-color-border);
+}
+
+.btn-outline-secondary:hover {
+  background: var(--usp-color-surface);
+  border-color: var(--usp-color-border-strong);
+}
+
+.btn-outline-danger {
+  background: transparent;
+  color: var(--usp-color-danger);
+  border-color: var(--usp-color-danger);
+}
+
+.btn-outline-danger:hover {
+  background: var(--usp-color-danger);
+  color: var(--usp-color-danger-text);
+}
+
+.btn-outline-info {
+  background: transparent;
+  color: var(--usp-color-info);
+  border-color: var(--usp-color-info);
+}
+
+.btn-outline-info:hover {
+  background: var(--usp-color-info);
+  color: var(--usp-color-info-text);
+}
+
+.btn-outline-warning {
+  background: transparent;
+  color: #e5a31d;
+  border-color: var(--usp-color-warning);
+}
+
+.btn-outline-warning:hover {
+  background: var(--usp-color-warning);
+  color: var(--usp-color-warning-text);
+}
+
+
+/* ---------- Forms ---------- */
+
+.form-label {
+  display: block;
+  margin-bottom: var(--usp-space-1);
+  font-size: var(--usp-text-sm);
+  font-weight: var(--usp-weight-medium);
+  color: var(--usp-color-ink);
+}
+
+.form-control,
+.form-select {
+  display: block;
+  width: 100%;
+  padding: var(--usp-space-2) var(--usp-space-3);
+  font-family: var(--usp-font-sans);
+  font-size: var(--usp-text-sm);
+  line-height: 1.5;
+  color: var(--usp-color-ink);
+  background: var(--usp-color-bg);
+  border: 1px solid var(--usp-color-border-strong);
+  border-radius: var(--usp-radius-md);
+  transition: border-color var(--usp-transition-fast), box-shadow var(--usp-transition-fast);
+  appearance: none;
+}
+
+.form-control:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--usp-color-primary);
+  box-shadow: 0 0 0 3px rgba(16, 148, 171, 0.15);
+}
+
+.form-control::placeholder {
+  color: var(--usp-color-ink-muted);
+}
+
+.form-control[readonly] {
+  background: var(--usp-color-surface);
+  cursor: default;
+}
+
+.form-check-input {
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.125rem;
+  vertical-align: top;
+  cursor: pointer;
+}
+
+.form-check-input:focus {
+  box-shadow: 0 0 0 3px rgba(16, 148, 171, 0.15);
+}
+
+.form-check-label {
+  font-size: var(--usp-text-sm);
+  color: var(--usp-color-ink);
+}
+
+.form-text {
+  font-size: var(--usp-text-xs);
+  color: var(--usp-color-ink-muted);
+}
+
+.text-danger {
+  color: var(--usp-color-danger) !important;
+}
+
+.invalid-feedback {
+  display: block;
+  margin-top: var(--usp-space-1);
+  font-size: var(--usp-text-xs);
+  color: var(--usp-color-danger);
+}
+
+.flatpickr-input {
+  background-color: var(--usp-color-bg) !important;
+}
+
+.input-group .form-control {
+  border-radius: 0;
+}
+
+.input-group .form-control:first-child {
+  border-radius: var(--usp-radius-md) 0 0 var(--usp-radius-md);
+}
+
+.input-group .form-control:last-child {
+  border-radius: 0 var(--usp-radius-md) var(--usp-radius-md) 0;
+}
+
+
+/* ---------- Tables ---------- */
+
+.table {
+  width: 100%;
+  margin-bottom: var(--usp-color-ink-muted);
+  font-size: var(--usp-text-sm);
+  color: var(--usp-color-ink);
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table > :not(caption) > * > * {
+  padding: var(--usp-space-3) var(--usp-space-4);
+  background-color: var(--usp-color-bg);
+  border-bottom: 1px solid var(--usp-color-border);
+}
+
+.table > thead {
+  vertical-align: bottom;
+}
+
+.table > thead > tr > th {
+  padding: var(--usp-space-3) var(--usp-space-4);
+  font-size: var(--usp-text-xs);
+  font-weight: var(--usp-weight-semibold);
+  color: #ffffff;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--usp-color-primary);
+  border-bottom: 2px solid var(--usp-color-primary-active);
+  white-space: nowrap;
+}
+
+.table > tbody > tr:hover > * {
+  background-color: var(--usp-color-surface);
+}
+
+.table > tbody > tr > td {
+  vertical-align: middle;
+}
+
+.table-hover > tbody > tr:hover > * {
+  background-color: var(--usp-color-surface);
+}
+
+.table td:first-child,
+.table th:first-child {
+  padding-left: var(--usp-space-6);
+}
+
+.table td:last-child,
+.table th:last-child {
+  padding-right: var(--usp-space-6);
+}
+
+.table-responsive {
+  border-radius: var(--usp-radius-lg);
+  border: 1px solid var(--usp-color-border);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table-responsive > .table {
+  margin-bottom: 0;
+}
+
+.table-responsive > .table > :not(caption) > * > * {
+  border-bottom-color: var(--usp-color-border);
+}
+
+
+/* ---------- Cards ---------- */
+
+.card {
+  background: var(--usp-color-surface-raised);
+  border: 1px solid var(--usp-color-border);
+  border-radius: var(--usp-radius-lg);
+  box-shadow: var(--usp-shadow-sm);
+}
+
+.card-header {
+  padding: var(--usp-space-4) var(--usp-space-6);
+  background: var(--usp-color-surface);
+  border-bottom: 1px solid var(--usp-color-border);
+}
+
+.card-header h3,
+.card-header h4 {
+  margin: 0;
+  font-size: var(--usp-text-lg);
+  font-weight: var(--usp-weight-semibold);
+  color: var(--usp-color-ink);
+}
+
+.card-body {
+  padding: var(--usp-space-6);
+}
+
+.card.shadow-sm {
+  box-shadow: var(--usp-shadow-sm) !important;
+}
+
+.card.shadow {
+  box-shadow: var(--usp-shadow-md) !important;
+}
+
+
+/* ---------- Alerts ---------- */
+
+.alert {
+  padding: var(--usp-space-3) var(--usp-space-4);
+  border-radius: var(--usp-radius-md);
+  font-size: var(--usp-text-sm);
+  border: 1px solid transparent;
+}
+
+.alert-success {
+  background: #e8f5e9;
+  color: #1b5e20;
+  border-color: #a5d6a7;
+}
+
+.alert-danger {
+  background: #fbe9e7;
+  color: #b71c1c;
+  border-color: #ef9a9a;
+}
+
+.alert-warning {
+  background: #fff8e1;
+  color: #f57f17;
+  border-color: #ffe082;
+}
+
+.alert-info {
+  background: #e0f7fa;
+  color: #006064;
+  border-color: #80deea;
+}
+
+
+/* ---------- Badges ---------- */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--usp-space-1) var(--usp-space-2);
+  font-size: var(--usp-text-xs);
+  font-weight: var(--usp-weight-medium);
+  border-radius: var(--usp-radius-sm);
+  white-space: nowrap;
+}
+
+.badge.bg-primary {
+  background: var(--usp-color-primary) !important;
+  color: var(--usp-color-primary-text) !important;
+}
+
+.badge.bg-secondary {
+  background: var(--usp-color-surface) !important;
+  color: var(--usp-color-ink-secondary) !important;
+  border: 1px solid var(--usp-color-border);
+}
+
+.badge.bg-success {
+  background: var(--usp-color-success) !important;
+  color: var(--usp-color-success-text) !important;
+}
+
+.badge.bg-danger {
+  background: var(--usp-color-danger) !important;
+  color: var(--usp-color-danger-text) !important;
+}
+
+.badge.bg-info {
+  background: var(--usp-color-info) !important;
+  color: var(--usp-color-info-text) !important;
+}
+
+.badge.bg-warning {
+  background: var(--usp-color-warning) !important;
+  color: var(--usp-color-warning-text) !important;
+}
+
+
+/* ---------- Modals ---------- */
+
+.modal-content {
+  border: 1px solid var(--usp-color-border);
+  border-radius: var(--usp-radius-lg);
+  box-shadow: var(--usp-shadow-md);
+}
+
+.modal-header {
+  padding: var(--usp-space-4) var(--usp-space-6);
+  border-bottom: 1px solid var(--usp-color-border);
+}
+
+.modal-body {
+  padding: var(--usp-space-6);
+}
+
+.modal-footer {
+  padding: var(--usp-space-4) var(--usp-space-6);
+  border-top: 1px solid var(--usp-color-border);
+}
+
+
+/* ---------- Loading & Empty States ---------- */
+
+.spinner-border {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.125em;
+}
+
+.btn .spinner-border {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.btn-loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+
+.btn-loading::after {
+  content: "";
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: usp-btn-spin 0.6s linear infinite;
+}
+
+.btn-loading.btn-primary::after {
+  border-color: var(--usp-color-primary-text);
+  border-right-color: transparent;
+}
+
+@keyframes usp-btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+.empty-state {
+  text-align: center;
+  padding: var(--usp-space-10) var(--usp-space-6);
+  color: var(--usp-color-ink-muted);
+}
+
+.empty-state i {
+  font-size: 2.5rem;
+  margin-bottom: var(--usp-space-3);
+  opacity: 0.5;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: var(--usp-text-sm);
+}
+
+.empty-state .btn {
+  margin-top: var(--usp-space-4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn-loading::after {
+    animation-duration: 1.2s;
+  }
+}

django_usp_theme/static/usp_theme/css/layout.css

@@ -0,0 +1,196 @@
+/* ============================================
+   USP Theme — Layout
+   ============================================ */
+
+/* ---------- Container ---------- */
+
+.container {
+  max-width: 1200px;
+  padding-inline: 1.05rem;
+}
+
+main {
+  padding-block: var(--usp-space-8);
+}
+
+/* ---------- Page Header ---------- */
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--usp-space-6);
+}
+
+.page-header h3 {
+  margin: 0;
+}
+
+/* ---------- Content Card ---------- */
+
+.content-card {
+  background: var(--usp-color-surface-raised);
+  border: 1px solid var(--usp-color-border);
+  border-radius: var(--usp-radius-lg);
+  box-shadow: var(--usp-shadow-sm);
+}
+
+.content-card-header {
+  padding: var(--usp-space-4) var(--usp-space-6);
+  border-bottom: 1px solid var(--usp-color-border);
+  background: var(--usp-color-surface);
+}
+
+.content-card-header h3,
+.content-card-header h4 {
+  margin: 0;
+  font-size: var(--usp-text-lg);
+  font-weight: var(--usp-weight-semibold);
+  color: var(--usp-color-ink);
+}
+
+.content-card-body {
+  padding: var(--usp-space-6);
+}
+
+
+/* ---------- Header ---------- */
+
+.usp-header {
+  background: var(--usp-color-bg);
+}
+
+.usp-header .container-fluid {
+  display: flex;
+  align-items: center;
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-block: var(--usp-space-3);
+  padding-inline: 1.05rem;
+}
+
+.usp-header img {
+  height: 56px;
+}
+
+.usp-header img + img {
+  height: 32px;
+  margin-left: var(--usp-space-4);
+}
+
+.usp-header-strip {
+  height: 30px;
+  background: url('../img/bg-headtop.gif') repeat-x;
+  background-size: auto 100%;
+}
+
+
+/* ---------- Navigation ---------- */
+
+.usp-nav {
+  background: var(--usp-color-surface);
+  border-bottom: 1px solid var(--usp-color-border);
+}
+
+.usp-nav .container-fluid {
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-inline: 1.05rem;
+  display: flex;
+  align-items: center;
+  gap: var(--usp-space-8);
+}
+
+.usp-nav .navbar-brand {
+  color: var(--usp-color-primary);
+  font-size: var(--usp-text-lg);
+  font-weight: var(--usp-weight-bold);
+  text-decoration: none;
+  padding: var(--usp-space-3) 0;
+}
+
+.usp-nav .navbar-brand:hover {
+  color: var(--usp-color-primary-hover);
+}
+
+.usp-nav .navbar-nav {
+  display: flex;
+  flex-direction: row;
+  gap: var(--usp-space-1);
+}
+
+.usp-nav .nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--usp-space-2);
+  padding: var(--usp-space-3) var(--usp-space-4);
+  color: var(--usp-color-ink-secondary);
+  font-size: var(--usp-text-sm);
+  font-weight: var(--usp-weight-medium);
+  text-decoration: none;
+  border-radius: var(--usp-radius-md);
+  transition: background var(--usp-transition-fast), color var(--usp-transition-fast);
+}
+
+.usp-nav .nav-link:hover {
+  background: var(--usp-color-surface);
+  color: var(--usp-color-primary);
+}
+
+.usp-nav .nav-link.active {
+  background: var(--usp-color-surface);
+  color: var(--usp-color-primary);
+  font-weight: var(--usp-weight-semibold);
+}
+
+.usp-nav .nav-item.dropdown {
+  position: relative;
+}
+
+.usp-nav .nav-item.dropdown .dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 220px;
+  background: var(--usp-color-bg);
+  border: 1px solid var(--usp-color-border);
+  border-radius: var(--usp-radius-md);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  padding: var(--usp-space-2) 0;
+  z-index: 1000;
+  list-style: none;
+  margin: 0;
+}
+
+.usp-nav .nav-item.dropdown.show .dropdown-menu,
+.usp-nav .nav-item.dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+.usp-nav .nav-item.dropdown .dropdown-item {
+  display: block;
+  padding: var(--usp-space-2) var(--usp-space-4);
+  color: var(--usp-color-ink-secondary);
+  font-size: var(--usp-text-sm);
+  text-decoration: none;
+  transition: background var(--usp-transition-fast), color var(--usp-transition-fast);
+}
+
+.usp-nav .nav-item.dropdown .dropdown-item:hover {
+  background: var(--usp-color-surface);
+  color: var(--usp-color-primary);
+}
+
+.usp-nav .nav-user {
+  display: flex;
+  align-items: center;
+  gap: var(--usp-space-3);
+  margin-left: auto;
+  font-size: var(--usp-text-sm);
+  color: var(--usp-color-ink-secondary);
+}
+
+.usp-nav .nav-user .btn {
+  font-size: var(--usp-text-xs);
+}

django_usp_theme/static/usp_theme/css/tokens.css

@@ -0,0 +1,86 @@
+/* ============================================
+   USP Theme — Design Tokens
+   ============================================ */
+
+:root {
+  /* Primary */
+  --usp-color-primary: #1094ab;
+  --usp-color-primary-hover: #0d7a8f;
+  --usp-color-primary-active: #0a6172;
+  --usp-color-primary-text: #ffffff;
+
+  /* Accent */
+  --usp-color-accent: #fcb421;
+  --usp-color-accent-hover: #e5a31d;
+
+  /* Secondary */
+  --usp-color-secondary: #64c4d2;
+  --usp-color-secondary-hover: #4fb8c8;
+
+  /* Surface scale */
+  --usp-color-bg: #ffffff;
+  --usp-color-surface: #f4f7f8;
+  --usp-color-surface-raised: #ffffff;
+  --usp-color-border: #dce3e5;
+  --usp-color-border-strong: #b8c7cb;
+
+  /* Ink scale */
+  --usp-color-ink: #1a2b32;
+  --usp-color-ink-secondary: #3d5a66;
+  --usp-color-ink-muted: #6b8a94;
+
+  /* Semantic */
+  --usp-color-success: #2e7d5a;
+  --usp-color-success-text: #ffffff;
+  --usp-color-danger: #c0392b;
+  --usp-color-danger-text: #ffffff;
+  --usp-color-warning: #fcb421;
+  --usp-color-warning-text: #1a2b32;
+  --usp-color-info: #64c4d2;
+  --usp-color-info-text: #1a2b32;
+
+  /* Typography */
+  --usp-font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --usp-font-mono: 'SFMono-Regular', Menlo, Consolas, monospace;
+
+  --usp-text-xs: 0.8125rem;
+  --usp-text-sm: 0.9375rem;
+  --usp-text-base: 1rem;
+  --usp-text-lg: 1.125rem;
+  --usp-text-xl: 1.25rem;
+  --usp-text-2xl: 1.375rem;
+  --usp-text-3xl: 1.625rem;
+  --usp-text-4xl: 2rem;
+
+  --usp-leading-tight: 1.25;
+  --usp-leading-normal: 1.5;
+
+  --usp-weight-normal: 400;
+  --usp-weight-medium: 500;
+  --usp-weight-semibold: 600;
+  --usp-weight-bold: 700;
+
+  /* Spacing */
+  --usp-space-1: 0.25rem;
+  --usp-space-2: 0.5rem;
+  --usp-space-3: 0.75rem;
+  --usp-space-4: 1rem;
+  --usp-space-5: 1.25rem;
+  --usp-space-6: 1.5rem;
+  --usp-space-8: 2rem;
+  --usp-space-10: 2.5rem;
+  --usp-space-12: 3rem;
+
+  /* Radius */
+  --usp-radius-sm: 0.25rem;
+  --usp-radius-md: 0.375rem;
+  --usp-radius-lg: 0.5rem;
+
+  /* Shadows */
+  --usp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --usp-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+
+  /* Motion */
+  --usp-transition-fast: 150ms ease-out;
+  --usp-transition-normal: 200ms ease-out;
+}

django_usp_theme/static/usp_theme/css/usp_theme.css

@@ -0,0 +1,9 @@
+/* ============================================
+   USP Theme — Unified Stylesheet
+   ============================================ */
+
+@import url('tokens.css');
+@import url('base.css');
+@import url('components.css');
+@import url('layout.css');
+@import url('utilities.css');

django_usp_theme/static/usp_theme/css/utilities.css

@@ -0,0 +1,121 @@
+/* ============================================
+   USP Theme — Utilities
+   ============================================ */
+
+/* ---------- Focus & Accessibility ---------- */
+
+:focus-visible {
+  outline: 2px solid var(--usp-color-primary);
+  outline-offset: 2px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin: -1rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: var(--usp-space-4);
+  z-index: 9999;
+  padding: var(--usp-space-2) var(--usp-space-4);
+  background: var(--usp-color-primary);
+  color: var(--usp-color-primary-text);
+  font-weight: var(--usp-weight-semibold);
+  text-decoration: none;
+  border-radius: 0 0 var(--usp-radius-md) var(--usp-radius-md);
+  transition: top var(--usp-transition-fast);
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+
+/* ---------- Section Dividers ---------- */
+
+.section-divider {
+  border: none;
+  border-top: 1px solid var(--usp-color-border);
+  margin: var(--usp-space-5) 0;
+}
+
+.section-label {
+  display: flex;
+  align-items: center;
+  gap: var(--usp-space-2);
+  margin-bottom: var(--usp-space-4);
+  font-size: var(--usp-text-sm);
+  font-weight: var(--usp-weight-medium);
+  color: var(--usp-color-ink-secondary);
+}
+
+.section-label i {
+  font-size: var(--usp-text-base);
+  opacity: 0.7;
+}
+
+.section-label::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--usp-color-border);
+}
+
+
+/* ---------- Spacing ---------- */
+
+.gap-1 { gap: var(--usp-space-1); }
+.gap-2 { gap: var(--usp-space-2); }
+.gap-3 { gap: var(--usp-space-3); }
+.gap-4 { gap: var(--usp-space-4); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: var(--usp-space-1); }
+.mb-2 { margin-bottom: var(--usp-space-2); }
+.mb-3 { margin-bottom: var(--usp-space-3); }
+.mb-4 { margin-bottom: var(--usp-space-4); }
+.mb-5 { margin-bottom: var(--usp-space-6); }
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: var(--usp-space-1); }
+.mt-2 { margin-top: var(--usp-space-2); }
+.mt-3 { margin-top: var(--usp-space-3); }
+.mt-4 { margin-top: var(--usp-space-4); }
+
+.pt-3 { padding-top: var(--usp-space-3); }
+.pb-3 { padding-bottom: var(--usp-space-3); }
+
+.border-bottom {
+  border-bottom: 1px solid var(--usp-color-border) !important;
+}
+
+
+/* ---------- Print ---------- */
+
+@media print {
+  .usp-header,
+  .usp-nav,
+  .btn,
+  .no-print {
+    display: none !important;
+  }
+
+  .container {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .card {
+    border: none;
+    box-shadow: none;
+  }
+}

django_usp_theme/templates/usp_theme/base.html

@@ -0,0 +1,73 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css" rel="stylesheet">
+    <link href="{% static 'usp_theme/css/usp_theme.css' %}" rel="stylesheet">
+    {% block extra_css %}{% endblock %}
+</head>
+
+<body>
+    <a class="skip-link" href="#content">Ir para o conteúdo</a>
+
+    <header class="usp-header">
+        <div class="container-fluid d-flex align-items-center">
+            {% block header_logo %}{% endblock %}
+        </div>
+    </header>
+    <div class="usp-header-strip"></div>
+
+    <nav class="usp-nav" aria-label="{% block nav_aria_label %}Navegação principal{% endblock %}">
+        <div class="container-fluid d-flex justify-content-between align-items-center">
+            <a class="navbar-brand" href="{% block brand_url %}/{% endblock %}">
+                {% block brand %}App{% endblock %}
+            </a>
+
+            {% block nav %}{% endblock %}
+
+            {% block nav_user %}{% endblock %}
+        </div>
+    </nav>
+
+    <main id="content">
+        <div class="container">
+            {% include "usp_theme/components/alert_messages.html" %}
+            {% block content %}{% endblock %}
+        </div>
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/pt-BR.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            flatpickr('.data-brasileira', {
+                locale: 'pt',
+                dateFormat: 'Y-m-d',
+                altInput: true,
+                altFormat: 'd/m/Y',
+            });
+        });
+    </script>
+    {% block extra_js %}{% endblock %}
+</body>
+
+</html>

django_usp_theme/templates/usp_theme/components/alert_messages.html

@@ -0,0 +1,12 @@
+{% if messages %}
+<div class="row justify-content-center">
+    <div class="col-lg-8">
+        {% for message in messages %}
+        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
+            {{ message }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endif %}

django_usp_theme/templates/usp_theme/components/content_card.html

@@ -0,0 +1,10 @@
+<div class="content-card">
+    {% if card_title %}
+    <div class="content-card-header">
+        <h4>{{ card_title }}</h4>
+    </div>
+    {% endif %}
+    <div class="content-card-body">
+        {% block card_content %}{% endblock %}
+    </div>
+</div>

django_usp_theme/templates/usp_theme/components/empty_state.html

@@ -0,0 +1,5 @@
+<div class="empty-state">
+    <i class="bi {% block empty_icon %}bi-inbox{% endblock %}"></i>
+    <p>{% block empty_text %}Nenhum registro encontrado.{% endblock %}</p>
+    {% block empty_action %}{% endblock %}
+</div>

django_usp_theme/templates/usp_theme/components/loading_button.html

@@ -0,0 +1,8 @@
+{% load static %}
+<button type="{{ type|default:'submit' }}"
+        class="btn {{ button_class|default:'btn-primary' }} {% if loading %}btn-loading{% endif %}"
+        {% if disabled %}disabled{% endif %}
+        {% block button_attrs %}{% endblock %}>
+    {% if not loading %}<i class="bi {{ icon }}"></i>{% endif %}
+    {% block button_text %}{{ text }}{% endblock %}
+</button>

django_usp_theme/templates/usp_theme/components/page_header.html

@@ -0,0 +1,6 @@
+<div class="page-header">
+    <h3>{% block page_title %}{% endblock %}</h3>
+    <div class="d-flex gap-2">
+        {% block page_actions %}{% endblock %}
+    </div>
+</div>

django_usp_theme/templatetags/usp_filters.py

@@ -0,0 +1,24 @@
+from django import template
+import os
+
+register = template.Library()
+
+
+@register.filter(name='usp_moeda')
+def usp_moeda(value):
+    """Formata valor para formato brasileiro (R$ 1.234,56)."""
+    if value is None or value == '':
+        return ""
+    try:
+        val = float(value)
+        return f"R$ {val:,.2f}".replace(",", "X").replace(".", ",").replace("X", ".")
+    except (ValueError, TypeError):
+        return value
+
+
+@register.filter(name='usp_filename')
+def usp_filename(value):
+    """Extrai nome do arquivo de um caminho."""
+    if value is None:
+        return ""
+    return os.path.basename(str(value))

django_usp_theme-0.1.0.dist-info/METADATA

@@ -0,0 +1,173 @@
+Metadata-Version: 2.4
+Name: django-usp-theme
+Version: 0.1.0
+Summary: Tema visual USP para aplicações Django — design system, componentes e templates reutilizáveis.
+License-Expression: MIT
+Project-URL: Repository, https://github.com/usp/django-usp-theme
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: django>=4.2
+Dynamic: license-file
+
+# django-usp-theme
+
+Tema visual USP para aplicações Django — design system, componentes e templates reutilizáveis.
+
+## Instalação
+
+```bash
+pip install django-usp-theme
+```
+
+## Configuração
+
+Adicione `django_usp_theme` ao `INSTALLED_APPS`:
+
+```python
+INSTALLED_APPS = [
+    ...
+    'django_usp_theme',
+]
+```
+
+## Uso
+
+### Template base
+
+Estenda o template base em seus templates:
+
+```html
+{% extends "usp_theme/base.html" %}
+{% load static usp_filters %}
+
+{% block title %}Minha Aplicação{% endblock %}
+
+{% block header_logo %}
+<a href="https://www.usp.br">
+    <img src="{% static 'usp_theme/img/usp-logo-f.png' %}" alt="Logo USP">
+</a>
+{% endblock %}
+
+{% block brand %}Minha Aplicação{% endblock %}
+
+{% block nav %}
+<a class="nav-link" href="{% url 'home' %}">INÍCIO</a>
+<a class="nav-link" href="{% url 'lista' %}">LISTA</a>
+{% endblock %}
+
+{% block nav_user %}
+<div class="nav-user">
+    <span>{{ user.username }}</span>
+    <form action="{% url 'logout' %}" method="post" class="mb-0">
+        {% csrf_token %}
+        <button type="submit" class="btn btn-sm btn-outline-secondary">
+            <i class="bi bi-door-open"></i> Sair
+        </button>
+    </form>
+</div>
+{% endblock %}
+
+{% block content %}
+<!-- Conteúdo da página -->
+{% endblock %}
+```
+
+### Componentes
+
+#### Page Header
+
+```html
+{% include "usp_theme/components/page_header.html" %}
+```
+
+Ou com bloco:
+
+```html
+{% include "usp_theme/components/page_header.html" with title="Minha Página" %}
+```
+
+#### Content Card
+
+```html
+{% include "usp_theme/components/content_card.html" with card_title="Título do Card" %}
+```
+
+#### Empty State
+
+```html
+{% include "usp_theme/components/empty_state.html" %}
+```
+
+Ou customizado:
+
+```html
+{% include "usp_theme/components/empty_state.html" with empty_icon="bi-folder" empty_text="Nenhum item encontrado." %}
+```
+
+#### Loading Button
+
+```html
+{% include "usp_theme/components/loading_button.html" with text="Salvar" icon="bi-check-lg" loading=False %}
+```
+
+### Template Tags
+
+#### usp_moeda
+
+Formata valor para formato brasileiro:
+
+```html
+{% load usp_filters %}
+
+{{ valor|usp_moeda }}
+<!-- Saída: R$ 1.234,56 -->
+```
+
+#### usp_filename
+
+Extrai nome do arquivo de um caminho:
+
+```html
+{% load usp_filters %}
+
+{{ caminho|usp_filename }}
+<!-- Saída: arquivo.docx -->
+```
+
+## CSS
+
+O design system é composto por módulos CSS:
+
+- `tokens.css` — Variáveis CSS (cores, tipografia, espaçamento)
+- `base.css` — Reset e tipografia
+- `components.css` — Botões, formulários, tabelas, cards, alertas
+- `layout.css` — Header, navegação, container
+- `utilities.css` — Espaçamento, impressão, acessibilidade
+
+Para usar apenas parte do CSS:
+
+```html
+<link href="{% static 'usp_theme/css/tokens.css' %}" rel="stylesheet">
+<link href="{% static 'usp_theme/css/base.css' %}" rel="stylesheet">
+```
+
+Ou usar o CSS unificado:
+
+```html
+<link href="{% static 'usp_theme/css/usp_theme.css' %}" rel="stylesheet">
+```
+
+## Variáveis CSS
+
+O tema utiliza CSS custom properties com prefixo `--usp-*`. Para customizar:
+
+```css
+:root {
+    --usp-color-primary: #0066cc; /* Cor primária personalizada */
+}
+```
+
+## Licença
+
+MIT

django_usp_theme-0.1.0.dist-info/RECORD

@@ -0,0 +1,22 @@
+django_usp_theme/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+django_usp_theme/static/usp_theme/css/base.css,sha256=4-k_yGxnCdJJJhwP9509ZaQv9LBt7ePswhJIeiydzqc,1127
+django_usp_theme/static/usp_theme/css/components.css,sha256=Q_ZmPTYcdnwrY9fL61S3SknA7IpTPEZZ1X8NvLsk3Ug,11137
+django_usp_theme/static/usp_theme/css/layout.css,sha256=HX0RHcTHgpXQkMYsErHfA4flUiNLJnLU7fTJ8qsSIWc,4186
+django_usp_theme/static/usp_theme/css/tokens.css,sha256=XIP1wZptPlqFFyJDma_9hy92UAKYQ7Q0Mn2CFnrjKJo,2225
+django_usp_theme/static/usp_theme/css/usp_theme.css,sha256=1TDDuJBhRMfyuTuIYKXiih99ttQrWN2OSWg0O337Iiw,276
+django_usp_theme/static/usp_theme/css/utilities.css,sha256=6N_lWJ1tQiRA9ioFH6h1ykkWQ4GaNTP9bXw-HIL36jg,2522
+django_usp_theme/static/usp_theme/img/bg-headtop.gif,sha256=yFgVhZB8EJxn6lc0kE104cosBCPK6xC8B8E5MTNrFYI,1120
+django_usp_theme/static/usp_theme/img/usp-logo-f.png,sha256=Nsa3EEph1KUzeHdiqnF1AbAXO58OKVjrvV292E0JnEQ,10822
+django_usp_theme/templates/usp_theme/base.html,sha256=_0Vy_SpXcOZEGPlDUvYJXVRSuuYknMM65EpHk8Djr9w,3349
+django_usp_theme/templates/usp_theme/components/alert_messages.html,sha256=nyrNwfUNO8Utei7R6iXQe4LxFZl7r28MWovhlaHHj3Q,416
+django_usp_theme/templates/usp_theme/components/content_card.html,sha256=As-31ZxobbY_ICHW3FWY3FdHcCmp7kn_IxDJBrSfqDg,251
+django_usp_theme/templates/usp_theme/components/empty_state.html,sha256=bORNkrLSIyGSDDBxLD3hN8XY_4iwsq6zf4xjFtKs2L4,219
+django_usp_theme/templates/usp_theme/components/loading_button.html,sha256=5fYbgGsNbAEf9lqD0ehvzLnPkSEzc6F_ebkRq-jIZEc,381
+django_usp_theme/templates/usp_theme/components/page_header.html,sha256=DoFKDxaO_kJOF0sDj785ucK-e_kzWZAvEb17fvR62tI,172
+django_usp_theme/templatetags/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+django_usp_theme/templatetags/usp_filters.py,sha256=8TT47MdSp4XP3ZZiwSv7wcHBLaUNWRGVuca2Y_m8bEU,618
+django_usp_theme-0.1.0.dist-info/licenses/LICENSE,sha256=uY69rMDAyMlBdX3xXcv95E1glkwMJcrez6GQTl7kM5c,1060
+django_usp_theme-0.1.0.dist-info/METADATA,sha256=LMM0KluYgj8QsC7xRM2S_FEsdtT3GcEViyqZYPkNhJY,3535
+django_usp_theme-0.1.0.dist-info/WHEEL,sha256=YVMoNqKzERt-wjUZwJ33xBGAwnFl-4cqbYkTtWa4itE,91
+django_usp_theme-0.1.0.dist-info/top_level.txt,sha256=2DyhknVwesszyT7jBOVZq4XRu4tmmlUNwMhmPO7Br38,17
+django_usp_theme-0.1.0.dist-info/RECORD,,

django_usp_theme-0.1.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (84.0.0)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

django_usp_theme-0.1.0.dist-info/licenses/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 USP
+
+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.

django_usp_theme-0.1.0.dist-info/top_level.txt

@@ -0,0 +1 @@
+django_usp_theme