django admin CSS theming

src/registrar/assets/sass/_theme/_admin.scss

@@ -1,3 +1,94 @@
+@use "cisa_colors" as *;
+@use "uswds-core" as *;
+
+// We'll use Django's CSS vars: https://docs.djangoproject.com/en/4.2/ref/contrib/admin/#theming-support 
+// and assign Uswds theme vars whenever possible
+// If needed (see below), we'll use the Uswds hex value
+// As a last resort, we'll use CISA colors to supplement the palette
+:root {
+    --primary: #{$theme-color-primary};
+    --secondary: #{$theme-color-primary-darkest};
+    --accent: #{$theme-color-accent-cool};
+    // --primary-fg: #fff;
+
+    // Uswds theme vars that are set to a token, such as #{$theme-color-base-darker}
+    // would interpolate to 'gray-cool-70' and output invalid CSS, so we use the hex
+    // source value instead: https://designsystem.digital.gov/design-tokens/color/system-tokens/
+    --body-fg: #3d4551;
+    // --body-bg: #fff;
+    --body-quiet-color: #{$theme-color-base-dark};
+    // --body-loud-color: #000;
+
+    --header-color: var( --primary-fg);
+    --header-branding-color:  var( --primary-fg);
+    // --header-bg: var(--secondary);
+    // --header-link-color: var(--primary-fg);
+
+    --breadcrumbs-fg: #{$theme-color-accent-cool-lighter};
+    // --breadcrumbs-link-fg: var(--body-bg);
+    --breadcrumbs-bg: #{$theme-color-primary-dark};
+
+    // #{$theme-link-color} would interpolate to 'primary', so we use the source value instead
+    --link-fg: #{$theme-color-primary};
+    --link-hover-color: #{$theme-color-primary-darker};
+    // $theme-link-visited-color - violet-70v
+    --link-selected-fg: #54278f;
+
+    --hairline-color: #{$dhs-gray-15};
+    // $theme-color-base-lightest - gray-5
+    --border-color: #f0f0f0;
+
+    --error-fg: #{$theme-color-error};
+
+    --message-success-bg: #{$theme-color-success-lighter};
+    // $theme-color-warning-lighter - yellow-5
+    --message-warning-bg: #faf3d1;
+    --message-error-bg: #{$theme-color-error-lighter};
+
+    --darkened-bg: #{$dhs-gray-15}; /* A bit darker than --body-bg */
+    --selected-bg: var(--border-color); /* E.g. selected table cells */
+    --selected-row: var(--message-warning-bg);
+
+    // --button-fg: #fff;
+    // --button-bg: var(--secondary);
+    --button-hover-bg: #{$theme-color-primary-darker};
+    --default-button-bg: #{$theme-color-primary-dark};
+    --default-button-hover-bg: #{$theme-color-primary-darkest};
+    // #{$theme-color-base} - 'gray-cool-50'
+    --close-button-bg: #71767a;
+    // #{$theme-color-base-darker} - 'gray-cool-70'
+    --close-button-hover-bg: #3d4551;
+    --delete-button-bg: #{$theme-color-error};
+    --delete-button-hover-bg: #{$theme-color-error-dark};
+
+    // --object-tools-fg: var(--button-fg);
+    // --object-tools-bg: var(--close-button-bg);
+    // --object-tools-hover-bg: var(--close-button-hover-bg);
+
+    --font-family-primary:
+        "Public Sans Web",
+        "Segoe UI",
+        system-ui,
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji";
+}
+
+#branding h1 a:link, #branding h1 a:visited {
+    color: var(--primary-fg);
+}
+
+// 'Delete button' layout bug
+.submit-row a.deletelink {
+    height: auto!important;
+}
+
+// Keep th from collapsing 
 .min-width-25 {
     min-width: 25px;
 }

src/registrar/templates/admin/base_site.html

@@ -3,7 +3,9 @@
 
 {% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
 
-{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}" />{% endblock %}
+{% block extrastyle %}{{ block.super }}
+<link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}" />
+{% endblock %}
 
 {% block branding %}
 <h1 id="site-name"><a href="{% url 'admin:index' %}">.gov admin</a></h1>