revert package lock changes, address CSS feedback on typography, color and grid

This commit is contained in:
rachidatecs 2023-08-04 13:31:49 -04:00
parent 5dd2fbaeda
commit 4296352f0f
No known key found for this signature in database
GPG key ID: 3CEBBFA7325E5525
2 changed files with 28 additions and 29 deletions

16
src/package-lock.json generated
View file

@ -1072,9 +1072,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001517", "version": "1.0.30001450",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz",
"integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==", "integrity": "sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -1084,10 +1084,6 @@
{ {
"type": "tidelift", "type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite" "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
} }
] ]
}, },
@ -7794,9 +7790,9 @@
"dev": true "dev": true
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001517", "version": "1.0.30001450",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz",
"integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==", "integrity": "sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==",
"dev": true "dev": true
}, },
"check-types": { "check-types": {

View file

@ -2,8 +2,8 @@
@use "uswds-core" as *; @use "uswds-core" as *;
// We'll use Django's CSS vars: https://docs.djangoproject.com/en/4.2/ref/contrib/admin/#theming-support // 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 // and assign USWDS theme vars whenever possible
// If needed (see below), we'll use the Uswds hex value // If needed (see below), we'll use the USWDS hex value
// As a last resort, we'll use CISA colors to supplement the palette // As a last resort, we'll use CISA colors to supplement the palette
:root { :root {
--primary: #{$theme-color-primary}; --primary: #{$theme-color-primary};
@ -11,7 +11,7 @@
--accent: #{$theme-color-accent-cool}; --accent: #{$theme-color-accent-cool};
// --primary-fg: #fff; // --primary-fg: #fff;
// Uswds theme vars that are set to a token, such as #{$theme-color-base-darker} // 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 // 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/ // source value instead: https://designsystem.digital.gov/design-tokens/color/system-tokens/
--body-fg: #3d4551; --body-fg: #3d4551;
@ -24,7 +24,7 @@
// --header-bg: var(--secondary); // --header-bg: var(--secondary);
// --header-link-color: var(--primary-fg); // --header-link-color: var(--primary-fg);
--breadcrumbs-fg: #{$theme-color-accent-cool-lighter}; --breadcrumbs-fg: #{$theme-color-accent-cool-lightest};
// --breadcrumbs-link-fg: var(--body-bg); // --breadcrumbs-link-fg: var(--body-bg);
--breadcrumbs-bg: #{$theme-color-primary-dark}; --breadcrumbs-bg: #{$theme-color-primary-dark};
@ -64,19 +64,6 @@
// --object-tools-fg: var(--button-fg); // --object-tools-fg: var(--button-fg);
// --object-tools-bg: var(--close-button-bg); // --object-tools-bg: var(--close-button-bg);
// --object-tools-hover-bg: var(--close-button-hover-bg); // --object-tools-hover-bg: var(--close-button-hover-bg);
--font-family-primary:
"Public Sans Pro Web",
"Segoe UI",
system-ui,
Roboto,
"Helvetica Neue",
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
} }
// Fold dark theme settings into our main CSS // Fold dark theme settings into our main CSS
@ -117,6 +104,8 @@
} }
// Fix dark mode bug // Fix dark mode bug
// The structure of our CSS messes with the cascade and causes some body copy in tables
//to have light mode colors in dark mode, resulting in a severe contrast issue.
body { body {
color: var(--body-fg)!important; color: var(--body-fg)!important;
} }
@ -126,6 +115,20 @@
color: var(--primary-fg); color: var(--primary-fg);
} }
#branding h1,
h1, h2, h3 {
font-weight: font-weight('bold');
}
table > caption > a {
font-weight: font-weight('bold');
text-transform: none;
}
#nav-sidebar {
padding-top: 20px;
}
// 'Delete button' layout bug // 'Delete button' layout bug
.submit-row a.deletelink { .submit-row a.deletelink {
height: auto!important; height: auto!important;