vault/ui/app/styles/core/element-styling.scss
Vault Automation 796c5fb294
[HDS-5060] UI: Align typography styles to HDS tokens (#10193) (#10360)
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
2025-10-23 16:37:36 -04:00

205 lines
2.8 KiB
SCSS

@use '../utils/size_variables';
/**
* Copyright IBM Corp. 2016, 2025
* SPDX-License-Identifier: BUSL-1.1
*/
/* These come from bulma */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
a:hover,
body,
// default set here is too dark for HDS codeblock
pre:not(.hds-code-block__code),
strong,
table th {
color: var(--token-color-foreground-primary);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: var(--token-typography-font-weight-regular);
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
*:before,
*:after {
box-sizing: inherit;
}
img,
embed,
object {
max-width: 100%;
}
html {
background-color: hsl(0, 0%, 100%);
font-size: var(--token-typography-body-300-font-size); // 16px
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
}
article,
aside,
figure,
footer,
header,
hgroup,
section {
display: block;
}
body,
button,
input,
select,
textarea {
font-family: var(--token-typography-font-stack-text);
}
code,
pre {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: inherit;
font-family: var(--token-typography-font-stack-code);
font-smooth: inherit;
}
a strong,
pre code {
color: currentColor;
}
body {
font-size: var(--token-typography-body-300-font-size);
line-height: var(--token-typography-body-300-line-height);
overflow-x: hidden;
overflow-y: scroll;
}
a {
color: var(--token-color-foreground-action);
cursor: pointer;
text-decoration: underline;
&:hover,
&:active,
&:focus {
position: relative;
}
}
a:hover {
color: var(--token-color-foreground-primary);
}
code {
background-color: transparent;
color: var(--token-color-foreground-faint);
font-size: 1em;
font-weight: var(--token-typography-font-weight-regular);
padding: 0;
}
hr {
background-color: var(--token-color-surface-strong);
border: none;
display: block;
height: 1px;
margin: 1rem 0;
}
img {
height: auto;
max-width: 100%;
}
form {
margin: 0;
}
label {
cursor: pointer;
}
// HDS modifications and overrides
// * ONLY for universal changes (i.e. to address component functionality)
// <Hds::Modal>
.hds-modal {
&:has(.hds-dropdown) {
overflow: unset;
}
}
.hds-modal__body {
&:has(.hds-dropdown) {
overflow: unset;
}
}
// <Hds::Dropdown>
.hds-dropdown-list-item {
> button:disabled {
color: hsl(0, 0%, 4%);
opacity: 0.5;
cursor: not-allowed;
}
}
// <Hds::Text::Code> this applies to code elements that are placed within a surrounding text - not for standalone use
.hds-text.code-in-text {
background-color: var(--token-color-surface-strong);
}