@cds/core
Version:
Clarity Design System - common components, themes, and utilties
1 lines • 20.4 kB
CSS
[cds-text]{font-family:var(--cds-global-typography-font-family);margin-top:0;margin-bottom:0}[cds-text][cds-layout~=grid]::after,[cds-text][cds-layout~=grid]::before,[cds-text][cds-layout~=horizontal]::after,[cds-text][cds-layout~=horizontal]::before,[cds-text][cds-layout~=vertical]::after,[cds-text][cds-layout~=vertical]::before{display:none}[cds-text*=display],[cds-text*=heading],[cds-text*=headline],[cds-text*=section],[cds-text*=subsection],[cds-text*=title]{font-family:var(--cds-global-typography-header-font-family);color:var(--cds-global-typography-color-400)}[cds-text*=body],[cds-text*=caption],[cds-text*=message],[cds-text*=secondary],[cds-text*=smallcaption]{color:var(--cds-global-typography-color-500)}[cds-text*=inline]{width:auto;display:inline-block}[cds-text*=display]{font-size:var(--cds-global-typography-display-font-size);font-weight:var(--cds-global-typography-display-font-weight);line-height:var(--cds-global-typography-display-line-height);letter-spacing:var(--cds-global-typography-display-letter-spacing)}[cds-text*=display]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-display-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=display]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-display-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=heading],[cds-text*=headline]{font-size:var(--cds-global-typography-heading-font-size);font-weight:var(--cds-global-typography-heading-font-weight);line-height:var(--cds-global-typography-heading-line-height);letter-spacing:var(--cds-global-typography-heading-letter-spacing)}[cds-text*=heading]::before,[cds-text*=headline]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-heading-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=heading]::after,[cds-text*=headline]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-heading-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=title]{font-size:var(--cds-global-typography-title-font-size);font-weight:var(--cds-global-typography-title-font-weight);line-height:var(--cds-global-typography-title-line-height);letter-spacing:var(--cds-global-typography-title-letter-spacing)}[cds-text*=title]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-title-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=title]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-title-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=section]{font-size:var(--cds-global-typography-section-font-size);font-weight:var(--cds-global-typography-section-font-weight);line-height:var(--cds-global-typography-section-line-height);letter-spacing:var(--cds-global-typography-section-letter-spacing)}[cds-text*=section]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-section-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=section]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-section-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=subsection]{font-size:var(--cds-global-typography-subsection-font-size);font-weight:var(--cds-global-typography-subsection-font-weight);line-height:var(--cds-global-typography-subsection-line-height);letter-spacing:var(--cds-global-typography-subsection-letter-spacing)}[cds-text*=subsection]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-subsection-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=subsection]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-subsection-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=body]{font-weight:var(--cds-global-typography-body-font-weight);font-size:var(--cds-global-typography-body-font-size);letter-spacing:var(--cds-global-typography-body-letter-spacing);line-height:var(--cds-global-typography-body-line-height)}[cds-text*=body]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-body-line-height) - 1em)/2))*-1) + .1em)}[cds-text*=body]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-body-line-height) - 1em)/2))*-1) - .044em)}body[cds-text*=body]::after,body[cds-text*=body]::before{content:none}[cds-text*=message]{font-size:var(--cds-global-typography-message-font-size);font-weight:var(--cds-global-typography-message-font-weight);line-height:var(--cds-global-typography-message-line-height);letter-spacing:var(--cds-global-typography-message-letter-spacing)}[cds-text*=message]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-message-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=message]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-message-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=secondary]{font-size:var(--cds-global-typography-secondary-font-size);font-weight:var(--cds-global-typography-secondary-font-weight);line-height:var(--cds-global-typography-secondary-line-height);letter-spacing:var(--cds-global-typography-secondary-letter-spacing)}[cds-text*=secondary]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-secondary-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=secondary]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-secondary-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=caption]{font-size:var(--cds-global-typography-caption-font-size);font-weight:var(--cds-global-typography-caption-font-weight);line-height:var(--cds-global-typography-caption-line-height);letter-spacing:var(--cds-global-typography-caption-letter-spacing)}[cds-text*=caption]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-caption-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=caption]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-caption-line-height) - 1em)/2))*-1) - .044em)}[cds-text*=smallcaption]{font-size:var(--cds-global-typography-smallcaption-font-size);font-weight:var(--cds-global-typography-smallcaption-font-weight);line-height:var(--cds-global-typography-smallcaption-line-height);letter-spacing:var(--cds-global-typography-smallcaption-letter-spacing)}[cds-text*=smallcaption]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((var(--cds-global-typography-smallcaption-line-height) - 1em)/2))*-1) + .037em)}[cds-text*=smallcaption]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((var(--cds-global-typography-smallcaption-line-height) - 1em)/2))*-1) - .044em)}[cds-text~=link]{color:var(--cds-global-typography-link-color);text-decoration:underline;line-height:inherit;font-size:inherit}[cds-text~=link]:focus{outline:var(--cds-alias-object-interaction-outline);outline-offset:var(--cds-alias-object-interaction-outline-offset)}[cds-text~=link]:hover{color:var(--cds-global-typography-link-color-hover)}[cds-text~=link]:visited:not([cds-text~=static]),[cds-text~=link][cds-text~=visited]{color:var(--cds-global-typography-link-color-visited)}[cds-text~=link]:visited:not([cds-text~=static]):hover,[cds-text~=link][cds-text~=visited]:hover{color:var(--cds-global-typography-link-color-visited-hover)}@media (-webkit-min-device-pixel-ratio:0){[cds-text=link]:focus{outline:var(--cds-alias-object-interaction-outline-webkit)}}[cds-text~=code]{color:var(--cds-alias-status-danger);font-family:monospace}[cds-divider]{display:block;height:var(--cds-alias-object-border-width-100);overflow:hidden;box-shadow:var(--cds-alias-object-border-color)0 0 0 var(--cds-alias-object-border-width-100) inset}[cds-text~=extrabold]{font-weight:var(--cds-global-typography-font-weight-extrabold)}[cds-text~=bold]{font-weight:var(--cds-global-typography-font-weight-bold)}[cds-text~=semibold]{font-weight:var(--cds-global-typography-font-weight-semibold)}[cds-text~=medium]{font-weight:var(--cds-global-typography-font-weight-medium)}[cds-text~=regular]{font-weight:var(--cds-global-typography-font-weight-regular)}[cds-text~=light]{font-weight:var(--cds-global-typography-font-weight-light)}[cds-text~=capitalize]{text-transform:capitalize}[cds-text~=uppercase]{text-transform:uppercase}[cds-text~=lowercase]{text-transform:lowercase}[cds-text~=truncate]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[cds-text~=truncate]::after,[cds-text~=truncate]::before{content:none}[cds-text~=justify]{text-align:justify}[cds-text~=left]{text-align:left!important}[cds-text~=right]{text-align:right!important}[cds-text~=center]{text-align:center}[cds-text~=monospace]{font-family:var(--cds-global-typography-monospace-font-family)}[cds-text~=lhe]{padding:.05px 0}[cds-text~=lhe]::before{content:"";margin-top:-.124em;display:block;height:0}[cds-text~=lhe]::after{content:"";margin-bottom:-.221em;display:block;height:0}[cds-layout~=disable-lhe]::after,[cds-layout~=disable-lhe]::before,[cds-text~=disable-lhe]::after,[cds-text~=disable-lhe]::before{content:none}[cds-text*=h0],[cds-text*=h1],[cds-text*=h2],[cds-text*=h3],[cds-text*=h4],[cds-text*=h5],[cds-text*=h6]{font-family:var(--cds-global-typography-header-font-family, "Clarity City", "Avenir Next", sans-serif);font-size:2rem;font-weight:200;color:var(--cds-global-typography-color-400);line-height:1.2em;letter-spacing:-.0125em}[cds-text*=h0]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.2em - 1em)/2))*-1) + .037em)}[cds-text*=h0]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em)/2))*-1) - .044em)}[cds-text*=h1],[cds-text*=h2],[cds-text*=h3],[cds-text*=h4],[cds-text*=h5],[cds-text*=h6]{font-size:1.6rem;line-height:1.5em;letter-spacing:-.0156em}[cds-text*=h1]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.5em - 1em)/2))*-1) + .037em)}[cds-text*=h1]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em)/2))*-1) - .044em)}[cds-text*=h2],[cds-text*=h3],[cds-text*=h4],[cds-text*=h5],[cds-text*=h6]{font-size:1.4rem;line-height:1.7143em;letter-spacing:-.017857em}[cds-text*=h2]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.7143em - 1em)/2))*-1) + .037em)}[cds-text*=h2]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.7143em - 1em)/2))*-1) - .044em)}[cds-text*=h3],[cds-text*=h4],[cds-text*=h5],[cds-text*=h6]{font-size:1.1rem;line-height:1.0909em;letter-spacing:-.013636em}[cds-text*=h3]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.0909em - 1em)/2))*-1) + .037em)}[cds-text*=h3]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.0909em - 1em)/2))*-1) - .044em)}[cds-text*=h4],[cds-text*=h5],[cds-text*=h6]{font-size:.9rem;line-height:1.333333em;letter-spacing:-.011111em}[cds-text*=h4]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.333333em - 1em)/2))*-1) + .037em)}[cds-text*=h4]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.333333em - 1em)/2))*-1) - .044em)}[cds-text*=h5],[cds-text*=h6]{font-size:.8rem;font-weight:400;line-height:1.5em;letter-spacing:-.0125em}[cds-text*=h5]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.5em - 1em)/2))*-1) + .037em)}[cds-text*=h5]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em)/2))*-1) - .044em)}[cds-text*=h6]{font-size:.7rem;font-weight:500;letter-spacing:-.03125em}[cds-text*=h6]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.5em - 1em)/2))*-1) + .037em)}[cds-text*=h6]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.5em - 1em)/2))*-1) - .044em)}[cds-text*=p0],[cds-text*=p1]{font-size:1.2rem;font-weight:400;color:var(--cds-global-typography-color-500);line-height:1.16667em;letter-spacing:-.008333em}[cds-text*=p0]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.16667em - 1em)/2))*-1) + .037em)}[cds-text*=p0]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.16667em - 1em)/2))*-1) - .044em)}[cds-text*=p1]{font-size:.7rem;color:var(--cds-global-typography-color-400);line-height:1.71429em;letter-spacing:-.014286em}[cds-text*=p1]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.71429em - 1em)/2))*-1) + .037em)}[cds-text*=p1]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.71429em - 1em)/2))*-1) - .044em)}[cds-text*=p2],[cds-text*=p3],[cds-text*=p4],[cds-text*=p5]{font-size:.65rem;font-weight:500;color:var(--cds-global-typography-color-400);line-height:1.84615em;letter-spacing:-.007692em}[cds-text*=p2]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.84615em - 1em)/2))*-1) + .037em)}[cds-text*=p2]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em)/2))*-1) - .044em)}[cds-text*=p3],[cds-text*=p4],[cds-text*=p5]{font-weight:400}[cds-text*=p3]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.84615em - 1em)/2))*-1) + .037em)}[cds-text*=p3]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.84615em - 1em)/2))*-1) - .044em)}[cds-text*=p4],[cds-text*=p5]{font-size:.6rem;font-weight:600;line-height:2em;letter-spacing:-.008333em}[cds-text*=p4]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((2em - 1em)/2))*-1) + .037em)}[cds-text*=p4]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em)/2))*-1) - .044em)}[cds-text*=p5]{font-weight:400}[cds-text*=p5]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((2em - 1em)/2))*-1) + .037em)}[cds-text*=p5]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((2em - 1em)/2))*-1) - .044em)}[cds-text*=p6],[cds-text*=p7],[cds-text*=p8]{font-size:.55rem;font-weight:600;color:var(--cds-global-typography-color-400);line-height:1.090909em;letter-spacing:.018182em}[cds-text*=p6]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.090909em - 1em)/2))*-1) + .037em)}[cds-text*=p6]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em)/2))*-1) - .044em)}[cds-text*=p7],[cds-text*=p8]{font-weight:400}[cds-text*=p7]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.090909em - 1em)/2))*-1) + .037em)}[cds-text*=p7]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.090909em - 1em)/2))*-1) - .044em)}[cds-text*=p8]{font-size:.5rem;line-height:1.2em;letter-spacing:.02em}[cds-text*=p8]::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((var(--cds-global-typography-top-gap-height) + calc((1.2em - 1em)/2))*-1) + .037em)}[cds-text*=p8]::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - var(--cds-global-typography-top-gap-height) - var(--cds-global-typography-ascender-height) - var(--cds-global-typography-x-height)) + calc((1.2em - 1em)/2))*-1) - .044em)}