html, body {
position: relative;
width: 100%;
height: 100%;
}
/*
Manually propagate Carbon g100 tokens to root for global elements.
This ensures that elements outside the wrapper (like body, native inputs)
pick up the correct dark mode colors when the 'theme' attribute is set on .
*/
[theme="g100"] {
--cds-ui-background: #161616;
--cds-text-primary: #f4f4f4;
--cds-text-secondary: #c6c6c6;
--cds-link-primary: #78a9ff;
--cds-link-visited: #8a3ffc;
--cds-field-01: #262626;
--cds-ui-04: #393939;
--cds-text-disabled: #525252;
--cds-layer-active: #525252;
--cds-focus: #ffffff;
--cds-layer-01: #262626;
--cds-layer-02: #393939;
--cds-layer-03: #525252;
--cds-ui-01: #262626;
--cds-ui-03: #393939;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
color: var(--cds-text-primary, #333);
margin: 0;
padding: 8px;
font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
background-color: var(--cds-ui-background); /* Ensure body matches theme if visible */
}
a {
color: var(--cds-link-primary, rgb(0,100,200));
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--cds-link-visited, rgb(0,80,160));
}
label {
display: block;
}
input:not([class*="bx--"]),
button:not([class*="bx--"]),
select:not([class*="bx--"]),
textarea:not([class*="bx--"]) {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid var(--cds-ui-04, #ccc);
border-radius: 2px;
color: var(--cds-text-primary, #333);
background-color: var(--cds-field-01, #f4f4f4);
outline: none;
}
input:disabled, button:disabled {
color: var(--cds-text-disabled, #ccc);
}
input[type="range"] {
height: 0;
}
button:not([class*="bx--"]):not(:disabled):active {
background-color: var(--cds-layer-active, #ddd);
}
button:not([class*="bx--"]):focus {
border-color: var(--cds-focus, #666);
}