YOUreka/tools-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): g100 dark theme and more space above page titles

Browse Source 
- all pages (landing, both tools, server error pages) render on Carbon's
  g100 theme via <body class="app cds--g100">; token consumers follow
  automatically, including component shadow styles through the inherited
  --cds-* custom properties
- dark base on <html> so no light flash around the viewport
- step chips and tool icons use the brand blue: layer-selected-inverse
  inverts to a LIGHT token in g100, which had made them white-on-white
- page titles breathe: .page-head top margin 1.5rem -> 2.75rem
- new test asserting every page renders on g100 (44 total)
This commit is contained in:
adebisi-fa
2026-10-01 04:01:44 +01:00
parent 340d8da19d
commit 17c407883d
6 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public/assets/cropper/index.html
+1 -1
View File
@@ -22,7 +22,7 @@
.review-options .form-check { margin-bottom: 0.35rem; }
</style>
</head>
<body class="app">
<body class="app cds--g100">
<div id="app">
<!--app-header-->
tools/public/assets/fp/index.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/progress-bar.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/tag.min.js"></script>
</head>
<body class="app">
<body class="app cds--g100">
<div id="app">
<!--app-header-->
tools/public/assets/style.css
+4 -3
View File
@@ -6,6 +6,7 @@
[v-cloak] { display: none; }
a { text-decoration: none; }
html { background: var(--cds-background, #161616); }
body.app {
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: var(--cds-background, #f4f4f4);
@@ -59,7 +60,7 @@ cds-side-nav[expanded] { pointer-events: auto; }
main.container { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.narrow { max-width: 560px; }
.center-v { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; }
.page-head { margin: 1.5rem auto 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head { margin: 2.75rem auto 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: 0; }
.page-head .sub { color: var(--cds-text-secondary, #525252); margin: 0.25rem 0 0; font-size: 14px; }
@@ -73,7 +74,7 @@ main.container { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.step-chip {
width: 22px; height: 22px; border-radius: 2px; flex: 0 0 auto;
background: var(--cds-layer-selected-inverse, #161616); color: #f4f4f4;
background: var(--cds-button-primary, #0f62fe); color: #fff;
font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
@@ -93,7 +94,7 @@ main.container { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.tool-icon {
width: 40px; height: 40px; border-radius: 4px; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--cds-layer-selected-inverse, #161616); color: #fff;
background: var(--cds-button-primary, #0f62fe); color: #fff;
}
.tool-icon svg { width: 20px; height: 20px; }
.tool-card .go { margin-top: auto; color: var(--cds-link, #0f62fe); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 0.3rem; }