quentin_duwa/qd-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

input text

Browse Source
This commit is contained in:
MastersGame
2026-03-20 18:21:39 +01:00
parent 888def0186
commit 7aaa675875
27 changed files with 1236 additions and 1608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
projects/qd-design-demo/src/app/app.css
View File

@@ -1,276 +1,84 @@
/* You can add global styles to this file, and also import other styles files */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-size: 18px;
--md-sys-typescale-body-large-font-weight: 400px;
--md-sys-typescale-body-large-letter-spacing: 0.50px;
--md-sys-typescale-body-large-line-height: 22px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-size: 16px;
--md-sys-typescale-body-medium-font-weight: 400px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
--md-sys-typescale-body-medium-line-height: 20px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-size: 14px;
--md-sys-typescale-body-small-font-weight: 400px;
--md-sys-typescale-body-small-letter-spacing: 0.40px;
--md-sys-typescale-body-small-line-height: 18px;
--font-family-title: Roboto, sans-serif;
--font-family-content: Roboto, sans-serif;
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-size: 51px;
--md-sys-typescale-display-large-font-weight: 400px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
--md-sys-typescale-display-large-line-height: 61px;
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-size: 42px;
--md-sys-typescale-display-medium-font-weight: 400px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
--md-sys-typescale-display-medium-line-height: 52px;
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-size: 40px;
--md-sys-typescale-display-small-font-weight: 400px;
--md-sys-typescale-display-small-letter-spacing: 0px;
--md-sys-typescale-display-small-line-height: 50px;
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-size: 36px;
--md-sys-typescale-headline-large-font-weight: 400px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
--md-sys-typescale-headline-large-line-height: 44px;
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-size: 32px;
--md-sys-typescale-headline-medium-font-weight: 400px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
--md-sys-typescale-headline-medium-line-height: 36px;
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-size: 28px;
--md-sys-typescale-headline-small-font-weight: 400px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
--md-sys-typescale-headline-small-line-height: 36px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Regular;
--md-sys-typescale-label-large-font-size: 12px;
--md-sys-typescale-label-large-font-weight: 500px;
--md-sys-typescale-label-large-letter-spacing: 0.10px;
--md-sys-typescale-label-large-line-height: 14px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Regular;
--md-sys-typescale-label-medium-font-size: 11px;
--md-sys-typescale-label-medium-font-weight: 500px;
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
--md-sys-typescale-label-medium-line-height: 15px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Regular;
--md-sys-typescale-label-small-font-size: 10px;
--md-sys-typescale-label-small-font-weight: 500px;
--md-sys-typescale-label-small-letter-spacing: 0.50px;
--md-sys-typescale-label-small-line-height: 14px;
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-size: 25px;
--md-sys-typescale-title-large-font-weight: 400px;
--md-sys-typescale-title-large-letter-spacing: 0px;
--md-sys-typescale-title-large-line-height: 31px;
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Regular;
--md-sys-typescale-title-medium-font-size: 22px;
--md-sys-typescale-title-medium-font-weight: 500px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
--md-sys-typescale-title-medium-line-height: 28px;
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Regular;
--md-sys-typescale-title-small-font-size: 20px;
--md-sys-typescale-title-small-font-weight: 500px;
--md-sys-typescale-title-small-letter-spacing: 0.10px;
--md-sys-typescale-title-small-line-height: 16px;
}
.display-large {
font-family: var(--md-sys-typescale-display-large-font-family-name);
font-size: var(--md-sys-typescale-display-large-font-size);
font-style: var(--md-sys-typescale-display-large-font-family-style);
font-weight: var(--md-sys-typescale-display-large-font-weight);
letter-spacing: var(--md-sys-typescale-display-large-tracking);
line-height: var(--md-sys-typescale-display-large-line-height);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
text-transform: var(--md-sys-typescale-display-large-text-transform);
}
.display-medium {
font-family: var(--md-sys-typescale-display-medium-font-family-name);
font-size: var(--md-sys-typescale-display-medium-font-size);
font-style: var(--md-sys-typescale-display-medium-font-family-style);
font-weight: var(--md-sys-typescale-display-medium-font-weight);
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
}
.display-small {
font-family: var(--md-sys-typescale-display-small-font-family-name);
font-size: var(--md-sys-typescale-display-small-font-size);
font-style: var(--md-sys-typescale-display-small-font-family-style);
font-weight: var(--md-sys-typescale-display-small-font-weight);
letter-spacing: var(--md-sys-typescale-display-small-tracking);
line-height: var(--md-sys-typescale-display-small-line-height);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
text-transform: var(--md-sys-typescale-display-small-text-transform);
}
.headline-large {
font-family: var(--md-sys-typescale-headline-large-font-family-name);
font-size: var(--md-sys-typescale-headline-large-font-size);
font-style: var(--md-sys-typescale-headline-large-font-family-style);
font-weight: var(--md-sys-typescale-headline-large-font-weight);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
}
.headline-medium {
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
font-size: var(--md-sys-typescale-headline-medium-font-size);
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
}
.headline-small {
font-family: var(--md-sys-typescale-headline-small-font-family-name);
font-size: var(--md-sys-typescale-headline-small-font-size);
font-style: var(--md-sys-typescale-headline-small-font-family-style);
font-weight: var(--md-sys-typescale-headline-small-font-weight);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
}
.body-large {
font-family: var(--md-sys-typescale-body-large-font-family-name);
font-size: var(--md-sys-typescale-body-large-font-size);
font-style: var(--md-sys-typescale-body-large-font-family-style);
font-weight: var(--md-sys-typescale-body-large-font-weight);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
line-height: var(--md-sys-typescale-body-large-line-height);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
text-transform: var(--md-sys-typescale-body-large-text-transform);
}
.body-medium {
font-family: var(--md-sys-typescale-body-medium-font-family-name);
font-size: var(--md-sys-typescale-body-medium-font-size);
font-style: var(--md-sys-typescale-body-medium-font-family-style);
font-weight: var(--md-sys-typescale-body-medium-font-weight);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
}
.body-small {
font-family: var(--md-sys-typescale-body-small-font-family-name);
font-size: var(--md-sys-typescale-body-small-font-size);
font-style: var(--md-sys-typescale-body-small-font-family-style);
font-weight: var(--md-sys-typescale-body-small-font-weight);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
line-height: var(--md-sys-typescale-body-small-line-height);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
text-transform: var(--md-sys-typescale-body-small-text-transform);
}
.label-large {
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-style: var(--md-sys-typescale-label-large-font-family-style);
font-weight: var(--md-sys-typescale-label-large-font-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
text-transform: var(--md-sys-typescale-label-large-text-transform);
}
.label-medium {
font-family: var(--md-sys-typescale-label-medium-font-family-name);
font-size: var(--md-sys-typescale-label-medium-font-size);
font-style: var(--md-sys-typescale-label-medium-font-family-style);
font-weight: var(--md-sys-typescale-label-medium-font-weight);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
}
.label-small {
font-family: var(--md-sys-typescale-label-small-font-family-name);
font-size: var(--md-sys-typescale-label-small-font-size);
font-style: var(--md-sys-typescale-label-small-font-family-style);
font-weight: var(--md-sys-typescale-label-small-font-weight);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
line-height: var(--md-sys-typescale-label-small-line-height);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
text-transform: var(--md-sys-typescale-label-small-text-transform);
}
.title-large {
font-family: var(--md-sys-typescale-title-large-font-family-name);
font-size: var(--md-sys-typescale-title-large-font-size);
font-style: var(--md-sys-typescale-title-large-font-family-style);
font-weight: var(--md-sys-typescale-title-large-font-weight);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
line-height: var(--md-sys-typescale-title-large-line-height);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
text-transform: var(--md-sys-typescale-title-large-text-transform);
}
.title-medium {
font-family: var(--md-sys-typescale-title-medium-font-family-name);
font-size: var(--md-sys-typescale-title-medium-font-size);
font-style: var(--md-sys-typescale-title-medium-font-family-style);
font-weight: var(--md-sys-typescale-title-medium-font-weight);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
}
.title-small {
font-family: var(--md-sys-typescale-title-small-font-family-name);
font-size: var(--md-sys-typescale-title-small-font-size);
font-style: var(--md-sys-typescale-title-small-font-family-style);
font-weight: var(--md-sys-typescale-title-small-font-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
line-height: var(--md-sys-typescale-title-small-line-height);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
text-transform: var(--md-sys-typescale-title-small-text-transform);
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}
.scrollable-y {
@@ -353,7 +161,7 @@ body {
--md-sys-color-surface-container: rgb(238 237 244);
--md-sys-color-surface-container-high: rgb(232 231 239);
--md-sys-color-surface-container-highest: rgb(227 226 233);
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {
@@ -494,4 +302,20 @@ body {
display: none;
}
.display-large {
font-family: var(--font-family-title);
font-size: var(--display-large-font-size);
font-weight: var(--display-large-font-weight);
letter-spacing: var(--display-large-letter-spacing);
line-height: var(--display-large-line-height);
}
.body-medium {
font-family: var(--font-family-content);
font-size: var(--body-medium-font-size);
font-weight: var(--body-medium-font-weight);
letter-spacing: var(--body-medium-letter-spacing);
line-height: var(--body-medium-line-height);
}
/*# sourceMappingURL=app.css.map */

2
projects/qd-design-demo/src/app/app.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../styles.scss","../../../qd-design/src/styles/qd_design_system.scss","../../../qd-design/src/styles/typography/typography.token.scss","../../../qd-design/src/styles/typography/typography.module.scss","../../../qd-design/src/styles/design/look_and_feel.scss","../../../qd-design/src/styles/colors/light-theme.scss","../../../qd-design/src/styles/colors/dark-theme.scss","app.scss"],"names":[],"mappings":"AAAA;ACQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AN9CF;EACE;;;AOFF;EHWE;EACA,gBGX0B;EHgB1B;EGfA;EACA;EACA;;;AAGF;EHIE;EACA,gBGJ0B;EHS1B;;;AGNF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"app.css"}
{"version":3,"sourceRoot":"","sources":["../styles.scss","../../../qd-design/src/styles/qd_design_system.scss","../../../qd-design/src/styles/typography/typography.token.scss","../../../qd-design/src/styles/design/look_and_feel.scss","../../../qd-design/src/styles/colors/light-theme.scss","../../../qd-design/src/styles/colors/dark-theme.scss","app.scss","../../../qd-design/src/styles/typography/typography.module.scss"],"names":[],"mappings":"AAAA;ACQQ;AACA;ACTR;EAEE;EAEA;AAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AChDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AFhDF;EGVE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHnCA;;;AAGF;EACE;IIjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AJ1BF;EItBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AL9CF;EACE;;;AMFF;EHWE;EACA,gBGX0B;EHgB1B;EGfA;EACA;EACA;;;AAGF;EHIE;EACA,gBGJ0B;EHS1B;;;AGNF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EC5BE;EACA;EACA;EACA;EACA;;;AD4BF;ECwBE;EACA;EACA;EACA;EACA","file":"app.css"}

10
projects/qd-design-demo/src/app/app.html
View File

@@ -64,9 +64,6 @@
<div class="body-medium">Description</div>
</qd-card>
<qd-card clickable [variant]="'outlined'" style="width: 300px">
<figure image class="image-wrapper">
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
</figure>
<div class="display-large">Coucou</div>
<div class="body-medium">Description</div>
</qd-card>
@@ -78,3 +75,10 @@
<div class="body-medium">Description</div>
</qd-card>
</div>
<div class="horizontal">
<form novalidate (ngSubmit)="confirmForm()">
<input class="checkbox" type="checkbox" [formField]="loginForm.checkEmail"/>
<qd-input-text [formField]="loginForm.email" />
<qd-button variant="filled" [text]="'Confirm'" [iconName]="'checkmark'" [type]="'submit'" [disabled]="loginForm().invalid()"></qd-button>
</form>
</div>

8
projects/qd-design-demo/src/app/app.scss
View File

@@ -26,3 +26,11 @@
display: none;
}
}
.display-large {
@include styles.display-large;
}
.body-medium {
@include styles.body-medium;
}

16
projects/qd-design-demo/src/app/app.ts
View File

@@ -1,21 +1,35 @@
import {Component, signal} from '@angular/core';
import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
import {QdIconButton} from '../../../qd-design/src/lib/qd-icon-button/qd-icon-button';
import {QdInputText} from '../../../qd-design/src/lib/qd-input-text/qd-input-text';
import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card';
import {NgOptimizedImage} from '@angular/common';
import {QdTooltipDirective} from '../../../qd-design/src/directives/qd-tooltip-directive';
import {disabled, email, form, FormField, required} from '@angular/forms/signals';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@Component({
selector: 'app-root',
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective],
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective, QdInputText, FormField, FormsModule, ReactiveFormsModule],
templateUrl: './app.html',
standalone: true,
styleUrl: './app.scss'
})
export class App {
protected readonly title = signal('qd-design-demo');
loginModel = signal({checkEmail: true, email: ''});
loginForm = form(this.loginModel, (schemaPath) => {
required(schemaPath.email, {message: 'Email is required'});
email(schemaPath.email, {message: 'Enter a valid email address'});
disabled(schemaPath.email, ({valueOf}) => valueOf(schemaPath.checkEmail))
});
public onClick() {
console.log('clicked');
}
public confirmForm() {
console.log(this.loginModel().email);
console.log(this.loginModel().checkEmail);
}
}

2
projects/qd-design-demo/src/index.html
View File

@@ -6,8 +6,6 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet">
</head>
<body>
<app-root></app-root>

340
projects/qd-design/src/lib/qd-button/qd-button.css
View File

@@ -1,275 +1,83 @@
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-size: 18px;
--md-sys-typescale-body-large-font-weight: 400px;
--md-sys-typescale-body-large-letter-spacing: 0.50px;
--md-sys-typescale-body-large-line-height: 22px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-size: 16px;
--md-sys-typescale-body-medium-font-weight: 400px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
--md-sys-typescale-body-medium-line-height: 20px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-size: 14px;
--md-sys-typescale-body-small-font-weight: 400px;
--md-sys-typescale-body-small-letter-spacing: 0.40px;
--md-sys-typescale-body-small-line-height: 18px;
--font-family-title: Roboto, sans-serif;
--font-family-content: Roboto, sans-serif;
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-size: 51px;
--md-sys-typescale-display-large-font-weight: 400px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
--md-sys-typescale-display-large-line-height: 61px;
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-size: 42px;
--md-sys-typescale-display-medium-font-weight: 400px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
--md-sys-typescale-display-medium-line-height: 52px;
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-size: 40px;
--md-sys-typescale-display-small-font-weight: 400px;
--md-sys-typescale-display-small-letter-spacing: 0px;
--md-sys-typescale-display-small-line-height: 50px;
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-size: 36px;
--md-sys-typescale-headline-large-font-weight: 400px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
--md-sys-typescale-headline-large-line-height: 44px;
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-size: 32px;
--md-sys-typescale-headline-medium-font-weight: 400px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
--md-sys-typescale-headline-medium-line-height: 36px;
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-size: 28px;
--md-sys-typescale-headline-small-font-weight: 400px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
--md-sys-typescale-headline-small-line-height: 36px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Regular;
--md-sys-typescale-label-large-font-size: 12px;
--md-sys-typescale-label-large-font-weight: 500px;
--md-sys-typescale-label-large-letter-spacing: 0.10px;
--md-sys-typescale-label-large-line-height: 14px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Regular;
--md-sys-typescale-label-medium-font-size: 11px;
--md-sys-typescale-label-medium-font-weight: 500px;
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
--md-sys-typescale-label-medium-line-height: 15px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Regular;
--md-sys-typescale-label-small-font-size: 10px;
--md-sys-typescale-label-small-font-weight: 500px;
--md-sys-typescale-label-small-letter-spacing: 0.50px;
--md-sys-typescale-label-small-line-height: 14px;
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-size: 25px;
--md-sys-typescale-title-large-font-weight: 400px;
--md-sys-typescale-title-large-letter-spacing: 0px;
--md-sys-typescale-title-large-line-height: 31px;
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Regular;
--md-sys-typescale-title-medium-font-size: 22px;
--md-sys-typescale-title-medium-font-weight: 500px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
--md-sys-typescale-title-medium-line-height: 28px;
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Regular;
--md-sys-typescale-title-small-font-size: 20px;
--md-sys-typescale-title-small-font-weight: 500px;
--md-sys-typescale-title-small-letter-spacing: 0.10px;
--md-sys-typescale-title-small-line-height: 16px;
}
.display-large {
font-family: var(--md-sys-typescale-display-large-font-family-name);
font-size: var(--md-sys-typescale-display-large-font-size);
font-style: var(--md-sys-typescale-display-large-font-family-style);
font-weight: var(--md-sys-typescale-display-large-font-weight);
letter-spacing: var(--md-sys-typescale-display-large-tracking);
line-height: var(--md-sys-typescale-display-large-line-height);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
text-transform: var(--md-sys-typescale-display-large-text-transform);
}
.display-medium {
font-family: var(--md-sys-typescale-display-medium-font-family-name);
font-size: var(--md-sys-typescale-display-medium-font-size);
font-style: var(--md-sys-typescale-display-medium-font-family-style);
font-weight: var(--md-sys-typescale-display-medium-font-weight);
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
}
.display-small {
font-family: var(--md-sys-typescale-display-small-font-family-name);
font-size: var(--md-sys-typescale-display-small-font-size);
font-style: var(--md-sys-typescale-display-small-font-family-style);
font-weight: var(--md-sys-typescale-display-small-font-weight);
letter-spacing: var(--md-sys-typescale-display-small-tracking);
line-height: var(--md-sys-typescale-display-small-line-height);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
text-transform: var(--md-sys-typescale-display-small-text-transform);
}
.headline-large {
font-family: var(--md-sys-typescale-headline-large-font-family-name);
font-size: var(--md-sys-typescale-headline-large-font-size);
font-style: var(--md-sys-typescale-headline-large-font-family-style);
font-weight: var(--md-sys-typescale-headline-large-font-weight);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
}
.headline-medium {
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
font-size: var(--md-sys-typescale-headline-medium-font-size);
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
}
.headline-small {
font-family: var(--md-sys-typescale-headline-small-font-family-name);
font-size: var(--md-sys-typescale-headline-small-font-size);
font-style: var(--md-sys-typescale-headline-small-font-family-style);
font-weight: var(--md-sys-typescale-headline-small-font-weight);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
}
.body-large {
font-family: var(--md-sys-typescale-body-large-font-family-name);
font-size: var(--md-sys-typescale-body-large-font-size);
font-style: var(--md-sys-typescale-body-large-font-family-style);
font-weight: var(--md-sys-typescale-body-large-font-weight);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
line-height: var(--md-sys-typescale-body-large-line-height);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
text-transform: var(--md-sys-typescale-body-large-text-transform);
}
.body-medium {
font-family: var(--md-sys-typescale-body-medium-font-family-name);
font-size: var(--md-sys-typescale-body-medium-font-size);
font-style: var(--md-sys-typescale-body-medium-font-family-style);
font-weight: var(--md-sys-typescale-body-medium-font-weight);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
}
.body-small {
font-family: var(--md-sys-typescale-body-small-font-family-name);
font-size: var(--md-sys-typescale-body-small-font-size);
font-style: var(--md-sys-typescale-body-small-font-family-style);
font-weight: var(--md-sys-typescale-body-small-font-weight);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
line-height: var(--md-sys-typescale-body-small-line-height);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
text-transform: var(--md-sys-typescale-body-small-text-transform);
}
.label-large, .button-content, :host[data-variant=elevated] .button .content, :host[data-variant=filled] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=text] .button .content {
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-style: var(--md-sys-typescale-label-large-font-family-style);
font-weight: var(--md-sys-typescale-label-large-font-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
text-transform: var(--md-sys-typescale-label-large-text-transform);
}
.label-medium {
font-family: var(--md-sys-typescale-label-medium-font-family-name);
font-size: var(--md-sys-typescale-label-medium-font-size);
font-style: var(--md-sys-typescale-label-medium-font-family-style);
font-weight: var(--md-sys-typescale-label-medium-font-weight);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
}
.label-small {
font-family: var(--md-sys-typescale-label-small-font-family-name);
font-size: var(--md-sys-typescale-label-small-font-size);
font-style: var(--md-sys-typescale-label-small-font-family-style);
font-weight: var(--md-sys-typescale-label-small-font-weight);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
line-height: var(--md-sys-typescale-label-small-line-height);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
text-transform: var(--md-sys-typescale-label-small-text-transform);
}
.title-large {
font-family: var(--md-sys-typescale-title-large-font-family-name);
font-size: var(--md-sys-typescale-title-large-font-size);
font-style: var(--md-sys-typescale-title-large-font-family-style);
font-weight: var(--md-sys-typescale-title-large-font-weight);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
line-height: var(--md-sys-typescale-title-large-line-height);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
text-transform: var(--md-sys-typescale-title-large-text-transform);
}
.title-medium {
font-family: var(--md-sys-typescale-title-medium-font-family-name);
font-size: var(--md-sys-typescale-title-medium-font-size);
font-style: var(--md-sys-typescale-title-medium-font-family-style);
font-weight: var(--md-sys-typescale-title-medium-font-weight);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
}
.title-small {
font-family: var(--md-sys-typescale-title-small-font-family-name);
font-size: var(--md-sys-typescale-title-small-font-size);
font-style: var(--md-sys-typescale-title-small-font-family-style);
font-weight: var(--md-sys-typescale-title-small-font-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
line-height: var(--md-sys-typescale-title-small-line-height);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
text-transform: var(--md-sys-typescale-title-small-text-transform);
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}
.scrollable-y {
@@ -352,7 +160,7 @@ body {
--md-sys-color-surface-container: rgb(238 237 244);
--md-sys-color-surface-container-high: rgb(232 231 239);
--md-sys-color-surface-container-highest: rgb(227 226 233);
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {
@@ -494,6 +302,11 @@ body.dark-theme {
width: 24px;
}
.button-content, :host[data-variant=text] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=filled] .button .content, :host[data-variant=elevated] .button .content {
font-family: var(--font-family-content);
font-size: var(--label-large-font-size);
font-weight: var(--label-large-font-weight);
letter-spacing: var(--label-large-letter-spacing);
line-height: var(--label-large-line-height);
background-color: transparent;
height: fit-content;
margin: auto 8px;
@@ -752,9 +565,6 @@ body.dark-theme {
color: var(--md-sys-color-on-surface-variant);
}
:host[data-variant=text] .button {
padding: 0 4px;
}
:host[data-variant=text] .button:enabled:hover, :host[data-variant=text] .button:hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

2
projects/qd-design/src/lib/qd-button/qd-button.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;ECpDE;EDsDA;;AC0BA;EA5EA;EDsDE;;AC0BF;EAhFA;EDsDE;;ACWF;EACE;EAlEF;ED2DE;;ACWF;EAtEA;ED2DE;;ACJF;EAvDA;EDgEE;;ACLF;EA3DA;EDgEE;;ACrBF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACPA;EAhFA;ED2FE;;ACPF;EApFA;ED2FE;;ACtBF;EACE;EAtEF;EDgGE;;ACtBF;EA1EA;EDgGE;;ACrCF;EA3DA;EDqGE;;ACtCF;EA/DA;EDqGE;;ACtDF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACxCA;ED2CE;EACA;;ACxCF;EDuCE;EACA;;ACvDF;EACE;ED0DA;EACA;;ACvDF;EDsDE;EACA;;ACtEF;ED0EE;EACA;;ACvEF;EDsEE;EACA;;ACvFF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;AC1EA;ED6EE;;ACzEF;EDyEE;;ACxFF;EACE;ED2FA;;ACvFF;EDuFE;;ACtGF;ED0GE;;ACtGF;EDsGE;;ACtHF;EACE;EDyHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDoHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;AC1GA;ED6GE;;ACzGF;EDyGE;;ACxHF;EACE;ED2HA;;ACvHF;EDuHE;;ACtIF;ED0IE;;ACtIF;EDsIE;;ACtJF;EACE;EDyJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDoJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0LF;EAEE;;AAGF;EAEE","file":"qd-button.css"}
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-button.scss","../../styles/design/overall-design.scss","../../styles/typography/typography.module.scss"],"names":[],"mappings":"AAQQ;AACA;ACTR;EAEE;EAEA;AAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AChDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AFhDF;EGVE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHnCA;;;AAGF;EACE;IIjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AJ1BF;EItBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEsBA;EACA;EACA;EACA;EACA;EFxBE;EACA;EACA;EACA;;;AAIJ;ECpDE;EDsDA;;AC0BA;EA5EA;EDsDE;;AC0BF;EAhFA;EDsDE;;ACWF;EACE;EAlEF;ED2DE;;ACWF;EAtEA;ED2DE;;ACJF;EAvDA;EDgEE;;ACLF;EA3DA;EDgEE;;ACrBF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACPA;EAhFA;ED2FE;;ACPF;EApFA;ED2FE;;ACtBF;EACE;EAtEF;EDgGE;;ACtBF;EA1EA;EDgGE;;ACrCF;EA3DA;EDqGE;;ACtCF;EA/DA;EDqGE;;ACtDF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACxCA;ED2CE;EACA;;ACxCF;EDuCE;EACA;;ACvDF;EACE;ED0DA;EACA;;ACvDF;EDsDE;EACA;;ACtEF;ED0EE;EACA;;ACvEF;EDsEE;EACA;;ACvFF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;AC1EA;ED6EE;;ACzEF;EDyEE;;ACxFF;EACE;ED2FA;;ACvFF;EDuFE;;ACtGF;ED0GE;;ACtGF;EDsGE;;ACtHF;EACE;EDyHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDoHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;ACrGF;ED4GE;;ACxGF;EDwGE;;ACvHF;EACE;ED0HA;;ACtHF;EDsHE;;ACrIF;EDyIE;;ACrIF;EDqIE;;ACrJF;EACE;EDwJA;EAhMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDmJA;EAhMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyLF;EAEE;;AAGF;EAEE","file":"qd-button.css"}

3
projects/qd-design/src/lib/qd-button/qd-button.scss
View File

@@ -50,7 +50,7 @@
}
&-content {
@extend .label-large;
@include qd.label-large;
background-color: transparent;
height: fit-content;
margin: auto 8px;
@@ -192,7 +192,6 @@
}
:host[data-variant='text'] .button {
padding: 0 4px;
@include qd.hover {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);

332
projects/qd-design/src/lib/qd-card/qd-card.css
View File

@@ -1,275 +1,83 @@
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-size: 18px;
--md-sys-typescale-body-large-font-weight: 400px;
--md-sys-typescale-body-large-letter-spacing: 0.50px;
--md-sys-typescale-body-large-line-height: 22px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-size: 16px;
--md-sys-typescale-body-medium-font-weight: 400px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
--md-sys-typescale-body-medium-line-height: 20px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-size: 14px;
--md-sys-typescale-body-small-font-weight: 400px;
--md-sys-typescale-body-small-letter-spacing: 0.40px;
--md-sys-typescale-body-small-line-height: 18px;
--font-family-title: Roboto, sans-serif;
--font-family-content: Roboto, sans-serif;
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-size: 51px;
--md-sys-typescale-display-large-font-weight: 400px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
--md-sys-typescale-display-large-line-height: 61px;
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-size: 42px;
--md-sys-typescale-display-medium-font-weight: 400px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
--md-sys-typescale-display-medium-line-height: 52px;
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-size: 40px;
--md-sys-typescale-display-small-font-weight: 400px;
--md-sys-typescale-display-small-letter-spacing: 0px;
--md-sys-typescale-display-small-line-height: 50px;
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-size: 36px;
--md-sys-typescale-headline-large-font-weight: 400px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
--md-sys-typescale-headline-large-line-height: 44px;
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-size: 32px;
--md-sys-typescale-headline-medium-font-weight: 400px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
--md-sys-typescale-headline-medium-line-height: 36px;
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-size: 28px;
--md-sys-typescale-headline-small-font-weight: 400px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
--md-sys-typescale-headline-small-line-height: 36px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Regular;
--md-sys-typescale-label-large-font-size: 12px;
--md-sys-typescale-label-large-font-weight: 500px;
--md-sys-typescale-label-large-letter-spacing: 0.10px;
--md-sys-typescale-label-large-line-height: 14px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Regular;
--md-sys-typescale-label-medium-font-size: 11px;
--md-sys-typescale-label-medium-font-weight: 500px;
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
--md-sys-typescale-label-medium-line-height: 15px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Regular;
--md-sys-typescale-label-small-font-size: 10px;
--md-sys-typescale-label-small-font-weight: 500px;
--md-sys-typescale-label-small-letter-spacing: 0.50px;
--md-sys-typescale-label-small-line-height: 14px;
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-size: 25px;
--md-sys-typescale-title-large-font-weight: 400px;
--md-sys-typescale-title-large-letter-spacing: 0px;
--md-sys-typescale-title-large-line-height: 31px;
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Regular;
--md-sys-typescale-title-medium-font-size: 22px;
--md-sys-typescale-title-medium-font-weight: 500px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
--md-sys-typescale-title-medium-line-height: 28px;
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Regular;
--md-sys-typescale-title-small-font-size: 20px;
--md-sys-typescale-title-small-font-weight: 500px;
--md-sys-typescale-title-small-letter-spacing: 0.10px;
--md-sys-typescale-title-small-line-height: 16px;
}
.display-large {
font-family: var(--md-sys-typescale-display-large-font-family-name);
font-size: var(--md-sys-typescale-display-large-font-size);
font-style: var(--md-sys-typescale-display-large-font-family-style);
font-weight: var(--md-sys-typescale-display-large-font-weight);
letter-spacing: var(--md-sys-typescale-display-large-tracking);
line-height: var(--md-sys-typescale-display-large-line-height);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
text-transform: var(--md-sys-typescale-display-large-text-transform);
}
.display-medium {
font-family: var(--md-sys-typescale-display-medium-font-family-name);
font-size: var(--md-sys-typescale-display-medium-font-size);
font-style: var(--md-sys-typescale-display-medium-font-family-style);
font-weight: var(--md-sys-typescale-display-medium-font-weight);
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
}
.display-small {
font-family: var(--md-sys-typescale-display-small-font-family-name);
font-size: var(--md-sys-typescale-display-small-font-size);
font-style: var(--md-sys-typescale-display-small-font-family-style);
font-weight: var(--md-sys-typescale-display-small-font-weight);
letter-spacing: var(--md-sys-typescale-display-small-tracking);
line-height: var(--md-sys-typescale-display-small-line-height);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
text-transform: var(--md-sys-typescale-display-small-text-transform);
}
.headline-large {
font-family: var(--md-sys-typescale-headline-large-font-family-name);
font-size: var(--md-sys-typescale-headline-large-font-size);
font-style: var(--md-sys-typescale-headline-large-font-family-style);
font-weight: var(--md-sys-typescale-headline-large-font-weight);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
}
.headline-medium {
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
font-size: var(--md-sys-typescale-headline-medium-font-size);
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
}
.headline-small {
font-family: var(--md-sys-typescale-headline-small-font-family-name);
font-size: var(--md-sys-typescale-headline-small-font-size);
font-style: var(--md-sys-typescale-headline-small-font-family-style);
font-weight: var(--md-sys-typescale-headline-small-font-weight);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
}
.body-large {
font-family: var(--md-sys-typescale-body-large-font-family-name);
font-size: var(--md-sys-typescale-body-large-font-size);
font-style: var(--md-sys-typescale-body-large-font-family-style);
font-weight: var(--md-sys-typescale-body-large-font-weight);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
line-height: var(--md-sys-typescale-body-large-line-height);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
text-transform: var(--md-sys-typescale-body-large-text-transform);
}
.body-medium {
font-family: var(--md-sys-typescale-body-medium-font-family-name);
font-size: var(--md-sys-typescale-body-medium-font-size);
font-style: var(--md-sys-typescale-body-medium-font-family-style);
font-weight: var(--md-sys-typescale-body-medium-font-weight);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
}
.body-small {
font-family: var(--md-sys-typescale-body-small-font-family-name);
font-size: var(--md-sys-typescale-body-small-font-size);
font-style: var(--md-sys-typescale-body-small-font-family-style);
font-weight: var(--md-sys-typescale-body-small-font-weight);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
line-height: var(--md-sys-typescale-body-small-line-height);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
text-transform: var(--md-sys-typescale-body-small-text-transform);
}
.label-large {
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-style: var(--md-sys-typescale-label-large-font-family-style);
font-weight: var(--md-sys-typescale-label-large-font-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
text-transform: var(--md-sys-typescale-label-large-text-transform);
}
.label-medium {
font-family: var(--md-sys-typescale-label-medium-font-family-name);
font-size: var(--md-sys-typescale-label-medium-font-size);
font-style: var(--md-sys-typescale-label-medium-font-family-style);
font-weight: var(--md-sys-typescale-label-medium-font-weight);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
}
.label-small {
font-family: var(--md-sys-typescale-label-small-font-family-name);
font-size: var(--md-sys-typescale-label-small-font-size);
font-style: var(--md-sys-typescale-label-small-font-family-style);
font-weight: var(--md-sys-typescale-label-small-font-weight);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
line-height: var(--md-sys-typescale-label-small-line-height);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
text-transform: var(--md-sys-typescale-label-small-text-transform);
}
.title-large {
font-family: var(--md-sys-typescale-title-large-font-family-name);
font-size: var(--md-sys-typescale-title-large-font-size);
font-style: var(--md-sys-typescale-title-large-font-family-style);
font-weight: var(--md-sys-typescale-title-large-font-weight);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
line-height: var(--md-sys-typescale-title-large-line-height);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
text-transform: var(--md-sys-typescale-title-large-text-transform);
}
.title-medium {
font-family: var(--md-sys-typescale-title-medium-font-family-name);
font-size: var(--md-sys-typescale-title-medium-font-size);
font-style: var(--md-sys-typescale-title-medium-font-family-style);
font-weight: var(--md-sys-typescale-title-medium-font-weight);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
}
.title-small {
font-family: var(--md-sys-typescale-title-small-font-family-name);
font-size: var(--md-sys-typescale-title-small-font-size);
font-style: var(--md-sys-typescale-title-small-font-family-style);
font-weight: var(--md-sys-typescale-title-small-font-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
line-height: var(--md-sys-typescale-title-small-line-height);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
text-transform: var(--md-sys-typescale-title-small-text-transform);
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}
.scrollable-y {
@@ -352,7 +160,7 @@ body {
--md-sys-color-surface-container: rgb(238 237 244);
--md-sys-color-surface-container-high: rgb(232 231 239);
--md-sys-color-surface-container-highest: rgb(227 226 233);
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {

2
projects/qd-design/src/lib/qd-card/qd-card.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-card.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EHWE;EACA,gBGXiB;EACjB;EACA;;ACkDA;EACE;ED/CE;EACA;EACA;;ACiDJ;EACE;EDpDE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;;AAEA;EHoCA;;AIyBA;EAhFA;EDuBI;;AC6DJ;EApFA;EDuBI;;AC8CJ;EACE;EAtEF;ED4BI;;AC8CJ;EA1EA;ED4BI;;AC+BJ;EA3DA;EDiCI;;AC8BJ;EA/DA;EDiCI;;ACcJ;EACE;;AAIF;EACE;;;ADZJ;EACE;EACA;;AAEA;EHUA;;AIyBA;EDhCI;;ACoCJ;EDpCI;;ACqBJ;EACE;EDlBE;;ACsBJ;EDtBI;;ACOJ;EDHI;;ACOJ;EDPI;;ACTJ;EACE;EDYE;EACA;;ACTJ;EACE;EDOE;EACA;;;AAKN;EClEE;EDoEA;;AAEA;EHfA;;AIRA;EACE;EAhDF;;AAoDA;EACE;EArDF;;AAgFA;EA5EA;ED0EI;;ACMJ;EAhFA;ED0EI;;ACTJ;EACE;EAlEF;ED+EI;;ACTJ;EAtEA;ED+EI;;ACxBJ;EAvDA;EDoFI;;ACzBJ;EA3DA;EDoFI;;;AAKN;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"qd-card.css"}
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-card.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;AACA;ACTR;EAEE;EAEA;AAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AChDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AFhDF;EGVE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHnCA;;;AAGF;EACE;IIjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AJ1BF;EItBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EHWE;EACA,gBGXiB;EACjB;EACA;;ACkDA;EACE;ED/CE;EACA;EACA;;ACiDJ;EACE;EDpDE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;;AAEA;EHoCA;;AIyBA;EAhFA;EDuBI;;AC6DJ;EApFA;EDuBI;;AC8CJ;EACE;EAtEF;ED4BI;;AC8CJ;EA1EA;ED4BI;;AC+BJ;EA3DA;EDiCI;;AC8BJ;EA/DA;EDiCI;;ACcJ;EACE;;AAIF;EACE;;;ADZJ;EACE;EACA;;AAEA;EHUA;;AIyBA;EDhCI;;ACoCJ;EDpCI;;ACqBJ;EACE;EDlBE;;ACsBJ;EDtBI;;ACOJ;EDHI;;ACOJ;EDPI;;ACTJ;EACE;EDYE;EACA;;ACTJ;EACE;EDOE;EACA;;;AAKN;EClEE;EDoEA;;AAEA;EHfA;;AIRA;EACE;EAhDF;;AAoDA;EACE;EArDF;;AAgFA;EA5EA;ED0EI;;ACMJ;EAhFA;ED0EI;;ACTJ;EACE;EAlEF;ED+EI;;ACTJ;EAtEA;ED+EI;;ACxBJ;EAvDA;EDoFI;;ACzBJ;EA3DA;EDoFI;;;AAKN;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"qd-card.css"}

350
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.css
View File

@@ -1,275 +1,83 @@
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-size: 18px;
--md-sys-typescale-body-large-font-weight: 400px;
--md-sys-typescale-body-large-letter-spacing: 0.50px;
--md-sys-typescale-body-large-line-height: 22px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-size: 16px;
--md-sys-typescale-body-medium-font-weight: 400px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
--md-sys-typescale-body-medium-line-height: 20px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-size: 14px;
--md-sys-typescale-body-small-font-weight: 400px;
--md-sys-typescale-body-small-letter-spacing: 0.40px;
--md-sys-typescale-body-small-line-height: 18px;
--font-family-title: Roboto, sans-serif;
--font-family-content: Roboto, sans-serif;
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-size: 51px;
--md-sys-typescale-display-large-font-weight: 400px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
--md-sys-typescale-display-large-line-height: 61px;
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-size: 42px;
--md-sys-typescale-display-medium-font-weight: 400px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
--md-sys-typescale-display-medium-line-height: 52px;
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-size: 40px;
--md-sys-typescale-display-small-font-weight: 400px;
--md-sys-typescale-display-small-letter-spacing: 0px;
--md-sys-typescale-display-small-line-height: 50px;
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-size: 36px;
--md-sys-typescale-headline-large-font-weight: 400px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
--md-sys-typescale-headline-large-line-height: 44px;
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-size: 32px;
--md-sys-typescale-headline-medium-font-weight: 400px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
--md-sys-typescale-headline-medium-line-height: 36px;
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-size: 28px;
--md-sys-typescale-headline-small-font-weight: 400px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
--md-sys-typescale-headline-small-line-height: 36px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Regular;
--md-sys-typescale-label-large-font-size: 12px;
--md-sys-typescale-label-large-font-weight: 500px;
--md-sys-typescale-label-large-letter-spacing: 0.10px;
--md-sys-typescale-label-large-line-height: 14px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Regular;
--md-sys-typescale-label-medium-font-size: 11px;
--md-sys-typescale-label-medium-font-weight: 500px;
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
--md-sys-typescale-label-medium-line-height: 15px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Regular;
--md-sys-typescale-label-small-font-size: 10px;
--md-sys-typescale-label-small-font-weight: 500px;
--md-sys-typescale-label-small-letter-spacing: 0.50px;
--md-sys-typescale-label-small-line-height: 14px;
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-size: 25px;
--md-sys-typescale-title-large-font-weight: 400px;
--md-sys-typescale-title-large-letter-spacing: 0px;
--md-sys-typescale-title-large-line-height: 31px;
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Regular;
--md-sys-typescale-title-medium-font-size: 22px;
--md-sys-typescale-title-medium-font-weight: 500px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
--md-sys-typescale-title-medium-line-height: 28px;
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Regular;
--md-sys-typescale-title-small-font-size: 20px;
--md-sys-typescale-title-small-font-weight: 500px;
--md-sys-typescale-title-small-letter-spacing: 0.10px;
--md-sys-typescale-title-small-line-height: 16px;
}
.display-large {
font-family: var(--md-sys-typescale-display-large-font-family-name);
font-size: var(--md-sys-typescale-display-large-font-size);
font-style: var(--md-sys-typescale-display-large-font-family-style);
font-weight: var(--md-sys-typescale-display-large-font-weight);
letter-spacing: var(--md-sys-typescale-display-large-tracking);
line-height: var(--md-sys-typescale-display-large-line-height);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
text-transform: var(--md-sys-typescale-display-large-text-transform);
}
.display-medium {
font-family: var(--md-sys-typescale-display-medium-font-family-name);
font-size: var(--md-sys-typescale-display-medium-font-size);
font-style: var(--md-sys-typescale-display-medium-font-family-style);
font-weight: var(--md-sys-typescale-display-medium-font-weight);
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
}
.display-small {
font-family: var(--md-sys-typescale-display-small-font-family-name);
font-size: var(--md-sys-typescale-display-small-font-size);
font-style: var(--md-sys-typescale-display-small-font-family-style);
font-weight: var(--md-sys-typescale-display-small-font-weight);
letter-spacing: var(--md-sys-typescale-display-small-tracking);
line-height: var(--md-sys-typescale-display-small-line-height);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
text-transform: var(--md-sys-typescale-display-small-text-transform);
}
.headline-large {
font-family: var(--md-sys-typescale-headline-large-font-family-name);
font-size: var(--md-sys-typescale-headline-large-font-size);
font-style: var(--md-sys-typescale-headline-large-font-family-style);
font-weight: var(--md-sys-typescale-headline-large-font-weight);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
}
.headline-medium {
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
font-size: var(--md-sys-typescale-headline-medium-font-size);
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
}
.headline-small {
font-family: var(--md-sys-typescale-headline-small-font-family-name);
font-size: var(--md-sys-typescale-headline-small-font-size);
font-style: var(--md-sys-typescale-headline-small-font-family-style);
font-weight: var(--md-sys-typescale-headline-small-font-weight);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
}
.body-large {
font-family: var(--md-sys-typescale-body-large-font-family-name);
font-size: var(--md-sys-typescale-body-large-font-size);
font-style: var(--md-sys-typescale-body-large-font-family-style);
font-weight: var(--md-sys-typescale-body-large-font-weight);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
line-height: var(--md-sys-typescale-body-large-line-height);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
text-transform: var(--md-sys-typescale-body-large-text-transform);
}
.body-medium {
font-family: var(--md-sys-typescale-body-medium-font-family-name);
font-size: var(--md-sys-typescale-body-medium-font-size);
font-style: var(--md-sys-typescale-body-medium-font-family-style);
font-weight: var(--md-sys-typescale-body-medium-font-weight);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
}
.body-small {
font-family: var(--md-sys-typescale-body-small-font-family-name);
font-size: var(--md-sys-typescale-body-small-font-size);
font-style: var(--md-sys-typescale-body-small-font-family-style);
font-weight: var(--md-sys-typescale-body-small-font-weight);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
line-height: var(--md-sys-typescale-body-small-line-height);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
text-transform: var(--md-sys-typescale-body-small-text-transform);
}
.label-large, .button-content, :host[data-variant=filled] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=text] .button .content {
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-style: var(--md-sys-typescale-label-large-font-family-style);
font-weight: var(--md-sys-typescale-label-large-font-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
text-transform: var(--md-sys-typescale-label-large-text-transform);
}
.label-medium {
font-family: var(--md-sys-typescale-label-medium-font-family-name);
font-size: var(--md-sys-typescale-label-medium-font-size);
font-style: var(--md-sys-typescale-label-medium-font-family-style);
font-weight: var(--md-sys-typescale-label-medium-font-weight);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
}
.label-small {
font-family: var(--md-sys-typescale-label-small-font-family-name);
font-size: var(--md-sys-typescale-label-small-font-size);
font-style: var(--md-sys-typescale-label-small-font-family-style);
font-weight: var(--md-sys-typescale-label-small-font-weight);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
line-height: var(--md-sys-typescale-label-small-line-height);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
text-transform: var(--md-sys-typescale-label-small-text-transform);
}
.title-large {
font-family: var(--md-sys-typescale-title-large-font-family-name);
font-size: var(--md-sys-typescale-title-large-font-size);
font-style: var(--md-sys-typescale-title-large-font-family-style);
font-weight: var(--md-sys-typescale-title-large-font-weight);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
line-height: var(--md-sys-typescale-title-large-line-height);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
text-transform: var(--md-sys-typescale-title-large-text-transform);
}
.title-medium {
font-family: var(--md-sys-typescale-title-medium-font-family-name);
font-size: var(--md-sys-typescale-title-medium-font-size);
font-style: var(--md-sys-typescale-title-medium-font-family-style);
font-weight: var(--md-sys-typescale-title-medium-font-weight);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
}
.title-small {
font-family: var(--md-sys-typescale-title-small-font-family-name);
font-size: var(--md-sys-typescale-title-small-font-size);
font-style: var(--md-sys-typescale-title-small-font-family-style);
font-weight: var(--md-sys-typescale-title-small-font-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
line-height: var(--md-sys-typescale-title-small-line-height);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
text-transform: var(--md-sys-typescale-title-small-text-transform);
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}
.scrollable-y {
@@ -352,7 +160,7 @@ body {
--md-sys-color-surface-container: rgb(238 237 244);
--md-sys-color-surface-container-high: rgb(232 231 239);
--md-sys-color-surface-container-highest: rgb(227 226 233);
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {
@@ -493,12 +301,6 @@ body.dark-theme {
padding: 0;
width: 24px;
}
.button-content, :host[data-variant=text] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=filled] .button .content {
background-color: transparent;
height: fit-content;
margin: auto 8px;
padding: 0;
}
:host[data-variant=filled] .button {
background-color: var(--md-sys-color-primary);
@@ -559,9 +361,6 @@ body.dark-theme {
:host[data-variant=filled] .button .icon {
color: var(--md-sys-color-on-primary);
}
:host[data-variant=filled] .button .content {
color: var(--md-sys-color-on-primary);
}
:host[data-variant=filled-tonal] .button {
background-color: var(--md-sys-color-secondary-container);
@@ -622,9 +421,6 @@ body.dark-theme {
:host[data-variant=filled-tonal] .button .icon {
color: var(--md-sys-color-on-secondary-container);
}
:host[data-variant=filled-tonal] .button .content {
color: var(--md-sys-color-on-secondary-container);
}
:host[data-variant=outlined] .button {
background-color: transparent;
@@ -684,9 +480,6 @@ body.dark-theme {
:host[data-variant=outlined] .button .icon {
color: var(--md-sys-color-on-surface-variant);
}
:host[data-variant=outlined] .button .content {
color: var(--md-sys-color-on-surface-variant);
}
:host[data-variant=text] .button {
padding: 0 4px;
@@ -743,8 +536,5 @@ body.dark-theme {
:host[data-variant=text] .button .icon {
color: var(--md-sys-color-primary);
}
:host[data-variant=text] .button .content {
color: var(--md-sys-color-primary);
}
/*# sourceMappingURL=qd-icon-button.css.map */

2
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-icon-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EACE;;AC2BA;EAhFA;EDyDE;;AC2BF;EApFA;EDyDE;;ACYF;EACE;EAtEF;ED8DE;;ACYF;EA1EA;ED8DE;;ACHF;EA3DA;EDmEE;;ACJF;EA/DA;EDmEE;;ACpBF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAuDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACNA;EDSE;EACA;;ACNF;EDKE;EACA;;ACrBF;EACE;EDwBA;EACA;;ACrBF;EDoBE;EACA;;ACpCF;EDwCE;EACA;;ACrCF;EDoCE;EACA;;ACrDF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;ACxCA;ED2CE;;ACvCF;EDuCE;;ACtDF;EACE;EDyDA;;ACrDF;EDqDE;;ACpEF;EDwEE;;ACpEF;EDoEE;;ACpFF;EACE;EDuFA;EACA;EAhIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDkFA;EACA;EAhIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyHF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACxEA;ED2EE;;ACvEF;EDuEE;;ACtFF;EACE;EDyFA;;ACrFF;EDqFE;;ACpGF;EDwGE;;ACpGF;EDoGE;;ACpHF;EACE;EDuHA;EA/JF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDkHA;EA/JF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwJF;EAEE;;AAGF;EAEE","file":"qd-icon-button.css"}
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-icon-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;AACA;ACTR;EAEE;EAEA;AAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AChDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AFhDF;EGVE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHnCA;;;AAGF;EACE;IIjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AJ1BF;EItBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;ACmCA;EAhFA;EDiDE;;ACmCF;EApFA;EDiDE;;ACoBF;EACE;EAtEF;EDsDE;;ACoBF;EA1EA;EDsDE;;ACKF;EA3DA;ED2DE;;ACIF;EA/DA;ED2DE;;ACZF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA+CF;EAEE;;;AAIJ;EACE;;ACOA;EDJE;EACA;;ACOF;EDRE;EACA;;ACRF;EACE;EDWA;EACA;;ACRF;EDOE;EACA;;ACvBF;ED2BE;EACA;;ACxBF;EDuBE;EACA;;ACxCF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2EF;EAEE;;;AAIJ;EACE;EACA;;ACtBA;EDyBE;;ACrBF;EDqBE;;ACpCF;EACE;EDuCA;;ACnCF;EDmCE;;AClDF;EDsDE;;AClDF;EDkDE;;AClEF;EACE;EDqEA;EACA;EA9GF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDgEA;EACA;EA9GF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAuGF;EAEE;;;AAIJ;EACE;;ACjDA;EDoDE;;AChDF;EDgDE;;AC/DF;EACE;EDkEA;;AC9DF;ED8DE;;AC7EF;EDiFE;;AC7EF;ED6EE;;AC7FF;EACE;EDgGA;EAxIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED2FA;EAxIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAiIF;EAEE","file":"qd-icon-button.css"}

28
projects/qd-design/src/lib/qd-icon-button/qd-icon-button.scss
View File

@@ -48,14 +48,6 @@
padding: 0;
width: 24px;
}
&-content {
@extend .label-large;
background-color: transparent;
height: fit-content;
margin: auto 8px;
padding: 0;
}
}
:host[data-variant='filled'] .button {
@@ -84,11 +76,6 @@
@extend .button-icon;
color: var(--md-sys-color-on-primary);
}
.content {
@extend .button-content;
color: var(--md-sys-color-on-primary);
}
}
:host[data-variant='filled-tonal'] .button {
@@ -117,11 +104,6 @@
@extend .button-icon;
color: var(--md-sys-color-on-secondary-container);
}
.content {
@extend .button-content;
color: var(--md-sys-color-on-secondary-container);
}
}
:host[data-variant='outlined'] .button {
@@ -150,11 +132,6 @@
@extend .button-icon;
color: var(--md-sys-color-on-surface-variant);
}
.content {
@extend .button-content;
color: var(--md-sys-color-on-surface-variant);
}
}
:host[data-variant='text'] .button {
@@ -181,9 +158,4 @@
@extend .button-icon;
color: var(--md-sys-color-primary);
}
.content {
@extend .button-content;
color: var(--md-sys-color-primary);
}
}

402
projects/qd-design/src/lib/qd-input-text/qd-input-text.css Normal file
View File

@@ -0,0 +1,402 @@
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
--font-family-title: Roboto, sans-serif;
--font-family-content: Roboto, sans-serif;
/* display - large */
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}
.scrollable-y {
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.height-100 {
height: 100%;
max-height: 100%;
min-height: 100%;
}
.height-100-vh {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
.width-100 {
max-width: 100%;
min-width: 100%;
width: 100%;
}
.width-100-vw {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
body {
--md-sys-color-primary: rgb(73 93 146);
--md-sys-color-surface-tint: rgb(73 93 146);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(218 225 255);
--md-sys-color-on-primary-container: rgb(49 69 120);
--md-sys-color-secondary: rgb(88 94 113);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(221 226 249);
--md-sys-color-on-secondary-container: rgb(65 70 89);
--md-sys-color-tertiary: rgb(115 84 113);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(255 214 249);
--md-sys-color-on-tertiary-container: rgb(90 61 88);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(147 0 10);
--md-sys-color-background: rgb(250 248 255);
--md-sys-color-on-background: rgb(26 27 33);
--md-sys-color-surface: rgb(250 248 255);
--md-sys-color-on-surface: rgb(26 27 33);
--md-sys-color-surface-variant: rgb(225 226 236);
--md-sys-color-on-surface-variant: rgb(69 70 79);
--md-sys-color-outline: rgb(117 118 128);
--md-sys-color-outline-variant: rgb(197 198 208);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(47 48 54);
--md-sys-color-inverse-on-surface: rgb(241 240 247);
--md-sys-color-inverse-primary: rgb(179 197 255);
--md-sys-color-primary-fixed: rgb(218 225 255);
--md-sys-color-on-primary-fixed: rgb(0 24 73);
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
--md-sys-color-secondary-fixed: rgb(221 226 249);
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
--md-sys-color-tertiary-fixed: rgb(255 214 249);
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
--md-sys-color-surface-dim: rgb(218 217 224);
--md-sys-color-surface-bright: rgb(250 248 255);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(244 243 250);
--md-sys-color-surface-container: rgb(238 237 244);
--md-sys-color-surface-container-high: rgb(232 231 239);
--md-sys-color-surface-container-highest: rgb(227 226 233);
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {
body:not(.light-theme) {
--md-sys-color-primary: rgb(179 197 255);
--md-sys-color-surface-tint: rgb(179 197 255);
--md-sys-color-on-primary: rgb(25 46 96);
--md-sys-color-primary-container: rgb(49 69 120);
--md-sys-color-on-primary-container: rgb(218 225 255);
--md-sys-color-secondary: rgb(193 198 221);
--md-sys-color-on-secondary: rgb(42 48 66);
--md-sys-color-secondary-container: rgb(65 70 89);
--md-sys-color-on-secondary-container: rgb(221 226 249);
--md-sys-color-tertiary: rgb(225 187 220);
--md-sys-color-on-tertiary: rgb(66 39 65);
--md-sys-color-tertiary-container: rgb(90 61 88);
--md-sys-color-on-tertiary-container: rgb(255 214 249);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(18 19 24);
--md-sys-color-on-background: rgb(227 226 233);
--md-sys-color-surface: rgb(18 19 24);
--md-sys-color-on-surface: rgb(227 226 233);
--md-sys-color-surface-variant: rgb(69 70 79);
--md-sys-color-on-surface-variant: rgb(197 198 208);
--md-sys-color-outline: rgb(143 144 154);
--md-sys-color-outline-variant: rgb(69 70 79);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(227 226 233);
--md-sys-color-inverse-on-surface: rgb(47 48 54);
--md-sys-color-inverse-primary: rgb(73 93 146);
--md-sys-color-primary-fixed: rgb(218 225 255);
--md-sys-color-on-primary-fixed: rgb(0 24 73);
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
--md-sys-color-secondary-fixed: rgb(221 226 249);
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
--md-sys-color-tertiary-fixed: rgb(255 214 249);
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
--md-sys-color-surface-dim: rgb(18 19 24);
--md-sys-color-surface-bright: rgb(56 57 63);
--md-sys-color-surface-container-lowest: rgb(13 14 19);
--md-sys-color-surface-container-low: rgb(26 27 33);
--md-sys-color-surface-container: rgb(30 31 37);
--md-sys-color-surface-container-high: rgb(41 42 47);
--md-sys-color-surface-container-highest: rgb(51 52 58);
}
}
body.dark-theme {
--md-sys-color-primary: rgb(179 197 255);
--md-sys-color-surface-tint: rgb(179 197 255);
--md-sys-color-on-primary: rgb(25 46 96);
--md-sys-color-primary-container: rgb(49 69 120);
--md-sys-color-on-primary-container: rgb(218 225 255);
--md-sys-color-secondary: rgb(193 198 221);
--md-sys-color-on-secondary: rgb(42 48 66);
--md-sys-color-secondary-container: rgb(65 70 89);
--md-sys-color-on-secondary-container: rgb(221 226 249);
--md-sys-color-tertiary: rgb(225 187 220);
--md-sys-color-on-tertiary: rgb(66 39 65);
--md-sys-color-tertiary-container: rgb(90 61 88);
--md-sys-color-on-tertiary-container: rgb(255 214 249);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(18 19 24);
--md-sys-color-on-background: rgb(227 226 233);
--md-sys-color-surface: rgb(18 19 24);
--md-sys-color-on-surface: rgb(227 226 233);
--md-sys-color-surface-variant: rgb(69 70 79);
--md-sys-color-on-surface-variant: rgb(197 198 208);
--md-sys-color-outline: rgb(143 144 154);
--md-sys-color-outline-variant: rgb(69 70 79);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(227 226 233);
--md-sys-color-inverse-on-surface: rgb(47 48 54);
--md-sys-color-inverse-primary: rgb(73 93 146);
--md-sys-color-primary-fixed: rgb(218 225 255);
--md-sys-color-on-primary-fixed: rgb(0 24 73);
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
--md-sys-color-secondary-fixed: rgb(221 226 249);
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
--md-sys-color-tertiary-fixed: rgb(255 214 249);
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
--md-sys-color-surface-dim: rgb(18 19 24);
--md-sys-color-surface-bright: rgb(56 57 63);
--md-sys-color-surface-container-lowest: rgb(13 14 19);
--md-sys-color-surface-container-low: rgb(26 27 33);
--md-sys-color-surface-container: rgb(30 31 37);
--md-sys-color-surface-container-high: rgb(41 42 47);
--md-sys-color-surface-container-highest: rgb(51 52 58);
}
:host {
display: block;
margin-top: 8px;
margin-bottom: 16px;
}
.inputTextContainer {
position: relative;
display: inline-flex;
width: 100%;
min-height: 56px;
}
.inputTextContainer .input {
font-family: var(--font-family-content);
font-size: var(--body-medium-font-size);
font-weight: var(--body-medium-font-weight);
letter-spacing: var(--body-medium-letter-spacing);
line-height: var(--body-medium-line-height);
width: 100%;
padding: 0 16px;
color: var(--md-sys-color-on-surface);
background: transparent;
overflow: hidden;
border: none;
outline: none;
z-index: 1;
}
.inputTextContainer .input:-webkit-autofill, .inputTextContainer .input:-webkit-autofill:hover, .inputTextContainer .input:-webkit-autofill:focus, .inputTextContainer .input:-webkit-autofill:active {
-webkit-text-fill-color: var(--md-sys-color-on-surface);
transition: background-color 5000s ease-in-out 0s;
}
.inputTextContainer .input::placeholder {
color: var(--md-sys-color-on-surface-variant);
opacity: 0.6;
}
.inputTextContainer .input:disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
}
.inputTextContainer .label {
font-family: var(--font-family-content);
font-size: var(--body-medium-font-size);
font-weight: var(--body-medium-font-weight);
letter-spacing: var(--body-medium-letter-spacing);
line-height: var(--body-medium-line-height);
position: absolute;
left: 16px;
top: 16px;
color: var(--md-sys-color-on-surface-variant);
pointer-events: none;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
z-index: 2;
}
.inputTextContainer .outline {
position: absolute;
inset: -5px 0 0 0;
pointer-events: none;
border: 1px solid var(--md-sys-color-outline);
border-radius: 4px;
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.inputTextContainer .notch {
font-family: var(--font-family-content);
font-size: var(--label-medium-font-size);
font-weight: var(--label-medium-font-weight);
letter-spacing: var(--label-medium-letter-spacing);
line-height: var(--label-medium-line-height);
display: block;
width: auto;
max-width: 0.01px;
padding: 0;
visibility: hidden;
transition: max-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.inputTextContainer .notch .notch-text {
padding-inline: 4px;
}
.inputTextContainer.focused .label, .inputTextContainer.populated .label {
transform: translateY(-24px) translateX(4px) scale(0.75);
}
.inputTextContainer.focused .notch, .inputTextContainer.populated .notch {
max-width: 100%;
}
.inputTextContainer:hover:not(.disabled):not(.focused) .outline {
border-color: var(--md-sys-color-on-surface);
}
.inputTextContainer.focused .label {
color: var(--md-sys-color-primary);
}
.inputTextContainer.focused .outline {
border: 2px solid var(--md-sys-color-primary);
}
.inputTextContainer.disabled .outline {
border-color: color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
}
.inputTextContainer.disabled .label {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
}
.inputTextContainer.error .outline {
border-color: var(--md-sys-color-error);
}
.inputTextContainer.error .label {
color: var(--md-sys-color-error);
}
.inputTextContainer.error:hover:not(.disabled) .outline {
border-color: var(--md-sys-color-on-error-container);
}
.inputTextContainer.error.focused .outline {
border: 2px solid var(--md-sys-color-error);
}
.error-messages {
font-family: var(--font-family-content);
font-size: var(--body-small-font-size);
font-weight: var(--body-small-font-weight);
letter-spacing: var(--body-small-letter-spacing);
line-height: var(--body-small-line-height);
color: var(--md-sys-color-error);
margin: 4px 16px;
}
.disabled-reasons {
font-family: var(--font-family-content);
font-size: var(--body-small-font-size);
font-weight: var(--body-small-font-weight);
letter-spacing: var(--body-small-letter-spacing);
line-height: var(--body-small-line-height);
color: var(--md-sys-color-on-surface-variant);
margin: 4px 16px;
}
/*# sourceMappingURL=qd-input-text.css.map */

1
projects/qd-design/src/lib/qd-input-text/qd-input-text.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-input-text.scss","../../styles/typography/typography.module.scss"],"names":[],"mappings":"AAQQ;AACA;ACTR;EAEE;EAEA;AAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AChDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AFhDF;EGVE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHnCA;;;AAGF;EACE;IIjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AJ1BF;EItBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EC2CA;EACA;EACA;EACA;EACA;ED7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAIE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;ECcA;EACA;EACA;EACA;EACA;EDhBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;ECiBA;EACA;EACA;EACA;EACA;EDnBE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;;AAGF;EACE;;AAKF;EACE;;AAKF;EACE;;AAEF;EACE;;AAKF;EACE;;AAEF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EClEE;EACA;EACA;EACA;EACA;EDgEA;EACA;;;AAGF;ECxEE;EACA;EACA;EACA;EACA;EDsEA;EACA","file":"qd-input-text.css"}

45
projects/qd-design/src/lib/qd-input-text/qd-input-text.html Normal file
View File

@@ -0,0 +1,45 @@
<div class="inputTextContainer"
[class.focused]="isFocused()"
[class.populated]="isPopulated()"
[class.disabled]="disabled()"
[class.error]="invalid()">
<input
class="input"
type="text"
[value]="value()"
(input)="onInput($event)"
(focus)="onFocus()"
[placeholder]="currentPlaceholder()"
[disabled]="disabled()"
[readonly]="readonly()"
[class.invalid]="invalid()"
[attr.aria-invalid]="invalid()"
(blur)="onBlur()"
/>
<label class="label">{{ placeholder() }}</label>
<fieldset class="outline" aria-hidden="true">
<legend class="notch">
<span class="notch-text">{{ placeholder() }}</span>
</legend>
</fieldset>
</div>
@if (invalid()) {
<div class="error-messages" role="alert">
@for (error of errors(); track error) {
<span class="error">{{ error.message }}</span>
}
</div>
}
@if (disabled() && disabledReasons().length > 0) {
<div class="disabled-reasons">
@for (reason of disabledReasons(); track reason) {
<span>{{ reason.message }}</span>
}
</div>
}

142
projects/qd-design/src/lib/qd-input-text/qd-input-text.scss Normal file
View File

@@ -0,0 +1,142 @@
@use '../../styles/qd_design_system' as qd;
:host {
display: block;
margin-top: 8px;
margin-bottom: 16px;
}
.inputTextContainer {
position: relative;
display: inline-flex;
width: 100%;
min-height: 56px;
.input {
@include qd.body-medium;
width: 100%;
padding: 0 16px;
color: var(--md-sys-color-on-surface);
background: transparent;
overflow: hidden;
border: none;
outline: none;
z-index: 1;
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-text-fill-color: var(--md-sys-color-on-surface);
transition: background-color 5000s ease-in-out 0s;
}
&::placeholder {
color: var(--md-sys-color-on-surface-variant);
opacity: 0.6;
}
&:disabled {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
}
}
.label {
@include qd.body-medium;
position: absolute;
left: 16px;
top: 16px;
color: var(--md-sys-color-on-surface-variant);
pointer-events: none;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
z-index: 2;
}
.outline {
position: absolute;
inset: -5px 0 0 0;
pointer-events: none;
border: 1px solid var(--md-sys-color-outline);
border-radius: 4px;
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.notch {
@include qd.label-medium;
display: block;
width: auto;
max-width: 0.01px;
padding: 0;
visibility: hidden;
transition: max-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
.notch-text {
padding-inline: 4px;
}
}
&.focused, &.populated {
.label {
transform: translateY(-24px) translateX(4px) scale(0.75);
}
.notch {
max-width: 100%;
}
}
&:hover:not(.disabled):not(.focused) {
.outline {
border-color: var(--md-sys-color-on-surface);
}
}
&.focused {
.label {
color: var(--md-sys-color-primary);
}
.outline {
border: 2px solid var(--md-sys-color-primary);
}
}
&.disabled {
.outline {
border-color: color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);;
}
.label {
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);;
}
}
&.error {
.outline {
border-color: var(--md-sys-color-error);
}
.label {
color: var(--md-sys-color-error);
}
&:hover:not(.disabled) .outline {
border-color: var(--md-sys-color-on-error-container);
}
&.focused .outline {
border: 2px solid var(--md-sys-color-error);
}
}
}
.error-messages {
@include qd.body-small;
color: var(--md-sys-color-error);
margin: 4px 16px
}
.disabled-reasons {
@include qd.body-small;
color: var(--md-sys-color-on-surface-variant);
margin: 4px 16px
}

23
projects/qd-design/src/lib/qd-input-text/qd-input-text.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { QdInputText } from './qd-input-text';
describe('QdInputText', () => {
let component: QdInputText;
let fixture: ComponentFixture<QdInputText>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [QdInputText]
})
.compileComponents();
fixture = TestBed.createComponent(QdInputText);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

43
projects/qd-design/src/lib/qd-input-text/qd-input-text.ts Normal file
View File

@@ -0,0 +1,43 @@
import {ChangeDetectionStrategy, Component, computed, input, model, signal} from '@angular/core';
import {QdIcon} from '../qd-icon/qd-icon';
import {DisabledReason, FormValueControl, ValidationError, WithOptionalField} from '@angular/forms/signals';
@Component({
standalone: true,
selector: 'qd-input-text',
templateUrl: './qd-input-text.html',
styleUrl: './qd-input-text.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class QdInputText implements FormValueControl<string> {
value = model<string>('');
placeholder = input<string>('Placeholder');
// Writable interaction state - control updates these
touched = model<boolean>(false);
// Read-only state - form system manages these
disabled = input<boolean>(false);
disabledReasons = input<readonly WithOptionalField<DisabledReason>[]>([]);
readonly = input<boolean>(false);
hidden = input<boolean>(false);
invalid = input<boolean>(false);
errors = input<readonly WithOptionalField<ValidationError>[]>([]);
isFocused = signal<boolean>(false);
isPopulated = computed(() => this.value().length > 0);
currentPlaceholder = computed(() => this.isFocused() ? this.placeholder() : '');
onInput(event: Event) {
const val = (event.target as HTMLInputElement).value;
this.value.set(val);
}
onFocus() {
this.isFocused.set(true);
}
onBlur() {
this.isFocused.set(false);
this.touched.set(true)
}
}

339
projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css
View File

@@ -1,275 +1,83 @@
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto");
:root {
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-size: 18px;
--md-sys-typescale-body-large-font-weight: 400px;
--md-sys-typescale-body-large-letter-spacing: 0.50px;
--md-sys-typescale-body-large-line-height: 22px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-size: 16px;
--md-sys-typescale-body-medium-font-weight: 400px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
--md-sys-typescale-body-medium-line-height: 20px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-size: 14px;
--md-sys-typescale-body-small-font-weight: 400px;
--md-sys-typescale-body-small-letter-spacing: 0.40px;
--md-sys-typescale-body-small-line-height: 18px;
--font-family-title: Roboto, sans-serif;
--font-family-content: Roboto, sans-serif;
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-size: 51px;
--md-sys-typescale-display-large-font-weight: 400px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
--md-sys-typescale-display-large-line-height: 61px;
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-size: 42px;
--md-sys-typescale-display-medium-font-weight: 400px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
--md-sys-typescale-display-medium-line-height: 52px;
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-size: 40px;
--md-sys-typescale-display-small-font-weight: 400px;
--md-sys-typescale-display-small-letter-spacing: 0px;
--md-sys-typescale-display-small-line-height: 50px;
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-size: 36px;
--md-sys-typescale-headline-large-font-weight: 400px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
--md-sys-typescale-headline-large-line-height: 44px;
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-size: 32px;
--md-sys-typescale-headline-medium-font-weight: 400px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
--md-sys-typescale-headline-medium-line-height: 36px;
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-size: 28px;
--md-sys-typescale-headline-small-font-weight: 400px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
--md-sys-typescale-headline-small-line-height: 36px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Regular;
--md-sys-typescale-label-large-font-size: 12px;
--md-sys-typescale-label-large-font-weight: 500px;
--md-sys-typescale-label-large-letter-spacing: 0.10px;
--md-sys-typescale-label-large-line-height: 14px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Regular;
--md-sys-typescale-label-medium-font-size: 11px;
--md-sys-typescale-label-medium-font-weight: 500px;
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
--md-sys-typescale-label-medium-line-height: 15px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Regular;
--md-sys-typescale-label-small-font-size: 10px;
--md-sys-typescale-label-small-font-weight: 500px;
--md-sys-typescale-label-small-letter-spacing: 0.50px;
--md-sys-typescale-label-small-line-height: 14px;
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-size: 25px;
--md-sys-typescale-title-large-font-weight: 400px;
--md-sys-typescale-title-large-letter-spacing: 0px;
--md-sys-typescale-title-large-line-height: 31px;
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Regular;
--md-sys-typescale-title-medium-font-size: 22px;
--md-sys-typescale-title-medium-font-weight: 500px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
--md-sys-typescale-title-medium-line-height: 28px;
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Regular;
--md-sys-typescale-title-small-font-size: 20px;
--md-sys-typescale-title-small-font-weight: 500px;
--md-sys-typescale-title-small-letter-spacing: 0.10px;
--md-sys-typescale-title-small-line-height: 16px;
}
.display-large {
font-family: var(--md-sys-typescale-display-large-font-family-name);
font-size: var(--md-sys-typescale-display-large-font-size);
font-style: var(--md-sys-typescale-display-large-font-family-style);
font-weight: var(--md-sys-typescale-display-large-font-weight);
letter-spacing: var(--md-sys-typescale-display-large-tracking);
line-height: var(--md-sys-typescale-display-large-line-height);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
text-transform: var(--md-sys-typescale-display-large-text-transform);
}
.display-medium {
font-family: var(--md-sys-typescale-display-medium-font-family-name);
font-size: var(--md-sys-typescale-display-medium-font-size);
font-style: var(--md-sys-typescale-display-medium-font-family-style);
font-weight: var(--md-sys-typescale-display-medium-font-weight);
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
}
.display-small {
font-family: var(--md-sys-typescale-display-small-font-family-name);
font-size: var(--md-sys-typescale-display-small-font-size);
font-style: var(--md-sys-typescale-display-small-font-family-style);
font-weight: var(--md-sys-typescale-display-small-font-weight);
letter-spacing: var(--md-sys-typescale-display-small-tracking);
line-height: var(--md-sys-typescale-display-small-line-height);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
text-transform: var(--md-sys-typescale-display-small-text-transform);
}
.headline-large {
font-family: var(--md-sys-typescale-headline-large-font-family-name);
font-size: var(--md-sys-typescale-headline-large-font-size);
font-style: var(--md-sys-typescale-headline-large-font-family-style);
font-weight: var(--md-sys-typescale-headline-large-font-weight);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
}
.headline-medium {
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
font-size: var(--md-sys-typescale-headline-medium-font-size);
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
}
.headline-small {
font-family: var(--md-sys-typescale-headline-small-font-family-name);
font-size: var(--md-sys-typescale-headline-small-font-size);
font-style: var(--md-sys-typescale-headline-small-font-family-style);
font-weight: var(--md-sys-typescale-headline-small-font-weight);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
}
.body-large {
font-family: var(--md-sys-typescale-body-large-font-family-name);
font-size: var(--md-sys-typescale-body-large-font-size);
font-style: var(--md-sys-typescale-body-large-font-family-style);
font-weight: var(--md-sys-typescale-body-large-font-weight);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
line-height: var(--md-sys-typescale-body-large-line-height);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
text-transform: var(--md-sys-typescale-body-large-text-transform);
}
.body-medium {
font-family: var(--md-sys-typescale-body-medium-font-family-name);
font-size: var(--md-sys-typescale-body-medium-font-size);
font-style: var(--md-sys-typescale-body-medium-font-family-style);
font-weight: var(--md-sys-typescale-body-medium-font-weight);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
}
.body-small {
font-family: var(--md-sys-typescale-body-small-font-family-name);
font-size: var(--md-sys-typescale-body-small-font-size);
font-style: var(--md-sys-typescale-body-small-font-family-style);
font-weight: var(--md-sys-typescale-body-small-font-weight);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
line-height: var(--md-sys-typescale-body-small-line-height);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
text-transform: var(--md-sys-typescale-body-small-text-transform);
}
.label-large {
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-style: var(--md-sys-typescale-label-large-font-family-style);
font-weight: var(--md-sys-typescale-label-large-font-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
text-transform: var(--md-sys-typescale-label-large-text-transform);
}
.label-medium {
font-family: var(--md-sys-typescale-label-medium-font-family-name);
font-size: var(--md-sys-typescale-label-medium-font-size);
font-style: var(--md-sys-typescale-label-medium-font-family-style);
font-weight: var(--md-sys-typescale-label-medium-font-weight);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
}
.label-small {
font-family: var(--md-sys-typescale-label-small-font-family-name);
font-size: var(--md-sys-typescale-label-small-font-size);
font-style: var(--md-sys-typescale-label-small-font-family-style);
font-weight: var(--md-sys-typescale-label-small-font-weight);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
line-height: var(--md-sys-typescale-label-small-line-height);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
text-transform: var(--md-sys-typescale-label-small-text-transform);
}
.title-large {
font-family: var(--md-sys-typescale-title-large-font-family-name);
font-size: var(--md-sys-typescale-title-large-font-size);
font-style: var(--md-sys-typescale-title-large-font-family-style);
font-weight: var(--md-sys-typescale-title-large-font-weight);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
line-height: var(--md-sys-typescale-title-large-line-height);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
text-transform: var(--md-sys-typescale-title-large-text-transform);
}
.title-medium {
font-family: var(--md-sys-typescale-title-medium-font-family-name);
font-size: var(--md-sys-typescale-title-medium-font-size);
font-style: var(--md-sys-typescale-title-medium-font-family-style);
font-weight: var(--md-sys-typescale-title-medium-font-weight);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
}
.title-small {
font-family: var(--md-sys-typescale-title-small-font-family-name);
font-size: var(--md-sys-typescale-title-small-font-size);
font-style: var(--md-sys-typescale-title-small-font-family-style);
font-weight: var(--md-sys-typescale-title-small-font-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
line-height: var(--md-sys-typescale-title-small-line-height);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
text-transform: var(--md-sys-typescale-title-small-text-transform);
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}
.scrollable-y {
@@ -352,7 +160,7 @@ body {
--md-sys-color-surface-container: rgb(238 237 244);
--md-sys-color-surface-container-high: rgb(232 231 239);
--md-sys-color-surface-container-highest: rgb(227 226 233);
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {
@@ -466,6 +274,11 @@ body.dark-theme {
.tooltip-container {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
font-family: var(--font-family-content);
font-size: var(--body-small-font-size);
font-weight: var(--body-small-font-weight);
letter-spacing: var(--body-small-letter-spacing);
line-height: var(--body-small-line-height);
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
padding: 4px 8px;
@@ -473,7 +286,7 @@ body.dark-theme {
max-width: 250px;
pointer-events: none;
overflow: hidden;
animation: tooltip-fade 0.5s cubic-bezier(0, 0, 0.2, 1);
animation: tooltip-fade 0.33s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes tooltip-fade {

2
projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-plain-tooltip.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;;;AAGF;ECEE;EDAA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IAAO;IAAY;;EACnB;IAAK;IAAY","file":"qd-plain-tooltip.css"}
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-plain-tooltip.scss","../../styles/design/overall-design.scss","../../styles/typography/typography.module.scss"],"names":[],"mappings":"AAQQ;AACA;ACTR;EAEE;EAEA;AAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AChDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AFhDF;EGVE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EHnCA;;;AAGF;EACE;IIjBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AJ1BF;EItBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;;;AAGF;ECEE;ECyDA;EACA;EACA;EACA;EACA;EF5DA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IAAO;IAAY;;EACnB;IAAK;IAAY","file":"qd-plain-tooltip.css"}

2
projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.html
View File

@@ -1,3 +1,3 @@
<div class="tooltip-container body-small">
<div class="tooltip-container">
{{ text() }}
</div>

3
projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss
View File

@@ -6,6 +6,7 @@
.tooltip-container {
@include qd.elevation-1;
@include qd.body-small;
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
padding: 4px 8px;
@@ -14,7 +15,7 @@
pointer-events: none;
overflow: hidden;
animation: tooltip-fade 0.5s cubic-bezier(0, 0, 0.2, 1);
animation: tooltip-fade 0.33s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes tooltip-fade {

3
projects/qd-design/src/styles/qd_design_system.scss
View File

@@ -7,11 +7,12 @@
@use 'colors/dark-theme';
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
@include light-theme.light-theme-colors-tokens;
transition: background-color 0.3s, color 0.3s;
transition: background-color 0.33s, color 0.33s;
}
@media (prefers-color-scheme: dark) {

225
projects/qd-design/src/styles/typography/typography.module.scss
View File

@@ -1,164 +1,119 @@
.display-large {
font-family: var(--md-sys-typescale-display-large-font-family-name);
font-size: var(--md-sys-typescale-display-large-font-size);
font-style: var(--md-sys-typescale-display-large-font-family-style);
font-weight: var(--md-sys-typescale-display-large-font-weight);
letter-spacing: var(--md-sys-typescale-display-large-tracking);
line-height: var(--md-sys-typescale-display-large-line-height);
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
text-transform: var(--md-sys-typescale-display-large-text-transform);
@mixin display-large {
font-family: var(--font-family-title);
font-size: var(--display-large-font-size);
font-weight: var(--display-large-font-weight);
letter-spacing: var(--display-large-letter-spacing);
line-height: var(--display-large-line-height);
}
.display-medium {
font-family: var(--md-sys-typescale-display-medium-font-family-name);
font-size: var(--md-sys-typescale-display-medium-font-size);
font-style: var(--md-sys-typescale-display-medium-font-family-style);
font-weight: var(--md-sys-typescale-display-medium-font-weight);
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
line-height: var(--md-sys-typescale-display-medium-line-height);
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
text-transform: var(--md-sys-typescale-display-medium-text-transform);
@mixin display-medium {
font-family: var(--font-family-title);
font-size: var(--display-medium-font-size);
font-weight: var(--display-medium-font-weight);
letter-spacing: var(--display-medium-letter-spacing);
line-height: var(--display-medium-line-height);
}
.display-small {
font-family: var(--md-sys-typescale-display-small-font-family-name);
font-size: var(--md-sys-typescale-display-small-font-size);
font-style: var(--md-sys-typescale-display-small-font-family-style);
font-weight: var(--md-sys-typescale-display-small-font-weight);
letter-spacing: var(--md-sys-typescale-display-small-tracking);
line-height: var(--md-sys-typescale-display-small-line-height);
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
text-transform: var(--md-sys-typescale-display-small-text-transform);
@mixin display-small {
font-family: var(--font-family-title);
font-size: var(--display-small-font-size);
font-weight: var(--display-small-font-weight);
letter-spacing: var(--display-small-letter-spacing);
line-height: var(--display-small-line-height);
}
.headline-large {
font-family: var(--md-sys-typescale-headline-large-font-family-name);
font-size: var(--md-sys-typescale-headline-large-font-size);
font-style: var(--md-sys-typescale-headline-large-font-family-style);
font-weight: var(--md-sys-typescale-headline-large-font-weight);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
line-height: var(--md-sys-typescale-headline-large-line-height);
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
text-transform: var(--md-sys-typescale-headline-large-text-transform);
@mixin headline-large {
font-family: var(--font-family-title);
font-size: var(--headline-large-font-size);
font-weight: var(--headline-large-font-weight);
letter-spacing: var(--headline-large-letter-spacing);
line-height: var(--headline-large-line-height);
}
.headline-medium {
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
font-size: var(--md-sys-typescale-headline-medium-font-size);
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
line-height: var(--md-sys-typescale-headline-medium-line-height);
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
@mixin headline-medium {
font-family: var(--font-family-title);
font-size: var(--headline-medium-font-size);
font-weight: var(--headline-medium-font-weight);
letter-spacing: var(--headline-medium-letter-spacing);
line-height: var(--headline-medium-line-height);
}
.headline-small {
font-family: var(--md-sys-typescale-headline-small-font-family-name);
font-size: var(--md-sys-typescale-headline-small-font-size);
font-style: var(--md-sys-typescale-headline-small-font-family-style);
font-weight: var(--md-sys-typescale-headline-small-font-weight);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
line-height: var(--md-sys-typescale-headline-small-line-height);
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
text-transform: var(--md-sys-typescale-headline-small-text-transform);
@mixin headline-small {
font-family: var(--font-family-title);
font-size: var(--headline-small-font-size);
font-weight: var(--headline-small-font-weight);
letter-spacing: var(--headline-small-letter-spacing);
line-height: var(--headline-small-line-height);
}
.body-large {
font-family: var(--md-sys-typescale-body-large-font-family-name);
font-size: var(--md-sys-typescale-body-large-font-size);
font-style: var(--md-sys-typescale-body-large-font-family-style);
font-weight: var(--md-sys-typescale-body-large-font-weight);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
line-height: var(--md-sys-typescale-body-large-line-height);
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
text-transform: var(--md-sys-typescale-body-large-text-transform);
@mixin body-large {
font-family: var(--font-family-content);
font-size: var(--body-large-font-size);
font-weight: var(--body-large-font-weight);
letter-spacing: var(--body-large-letter-spacing);
line-height: var(--body-large-line-height);
}
.body-medium {
font-family: var(--md-sys-typescale-body-medium-font-family-name);
font-size: var(--md-sys-typescale-body-medium-font-size);
font-style: var(--md-sys-typescale-body-medium-font-family-style);
font-weight: var(--md-sys-typescale-body-medium-font-weight);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
line-height: var(--md-sys-typescale-body-medium-line-height);
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
text-transform: var(--md-sys-typescale-body-medium-text-transform);
@mixin body-medium {
font-family: var(--font-family-content);
font-size: var(--body-medium-font-size);
font-weight: var(--body-medium-font-weight);
letter-spacing: var(--body-medium-letter-spacing);
line-height: var(--body-medium-line-height);
}
.body-small {
font-family: var(--md-sys-typescale-body-small-font-family-name);
font-size: var(--md-sys-typescale-body-small-font-size);
font-style: var(--md-sys-typescale-body-small-font-family-style);
font-weight: var(--md-sys-typescale-body-small-font-weight);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
line-height: var(--md-sys-typescale-body-small-line-height);
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
text-transform: var(--md-sys-typescale-body-small-text-transform);
@mixin body-small {
font-family: var(--font-family-content);
font-size: var(--body-small-font-size);
font-weight: var(--body-small-font-weight);
letter-spacing: var(--body-small-letter-spacing);
line-height: var(--body-small-line-height);
}
.label-large {
font-family: var(--md-sys-typescale-label-large-font-family-name);
font-size: var(--md-sys-typescale-label-large-font-size);
font-style: var(--md-sys-typescale-label-large-font-family-style);
font-weight: var(--md-sys-typescale-label-large-font-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
text-transform: var(--md-sys-typescale-label-large-text-transform);
@mixin label-large {
font-family: var(--font-family-content);
font-size: var(--label-large-font-size);
font-weight: var(--label-large-font-weight);
letter-spacing: var(--label-large-letter-spacing);
line-height: var(--label-large-line-height);
}
.label-medium {
font-family: var(--md-sys-typescale-label-medium-font-family-name);
font-size: var(--md-sys-typescale-label-medium-font-size);
font-style: var(--md-sys-typescale-label-medium-font-family-style);
font-weight: var(--md-sys-typescale-label-medium-font-weight);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
line-height: var(--md-sys-typescale-label-medium-line-height);
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
text-transform: var(--md-sys-typescale-label-medium-text-transform);
@mixin label-medium {
font-family: var(--font-family-content);
font-size: var(--label-medium-font-size);
font-weight: var(--label-medium-font-weight);
letter-spacing: var(--label-medium-letter-spacing);
line-height: var(--label-medium-line-height);
}
.label-small {
font-family: var(--md-sys-typescale-label-small-font-family-name);
font-size: var(--md-sys-typescale-label-small-font-size);
font-style: var(--md-sys-typescale-label-small-font-family-style);
font-weight: var(--md-sys-typescale-label-small-font-weight);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
line-height: var(--md-sys-typescale-label-small-line-height);
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
text-transform: var(--md-sys-typescale-label-small-text-transform);
@mixin label-small {
font-family: var(--font-family-content);
font-size: var(--label-small-font-size);
font-weight: var(--label-small-font-weight);
letter-spacing: var(--label-small-letter-spacing);
line-height: var(--label-small-line-height);
}
.title-large {
font-family: var(--md-sys-typescale-title-large-font-family-name);
font-size: var(--md-sys-typescale-title-large-font-size);
font-style: var(--md-sys-typescale-title-large-font-family-style);
font-weight: var(--md-sys-typescale-title-large-font-weight);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
line-height: var(--md-sys-typescale-title-large-line-height);
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
text-transform: var(--md-sys-typescale-title-large-text-transform);
@mixin title-large {
font-family: var(--font-family-content);
font-size: var(--title-large-font-size);
font-weight: var(--title-large-font-weight);
letter-spacing: var(--title-large-letter-spacing);
line-height: var(--title-large-line-height);
}
.title-medium {
font-family: var(--md-sys-typescale-title-medium-font-family-name);
font-size: var(--md-sys-typescale-title-medium-font-size);
font-style: var(--md-sys-typescale-title-medium-font-family-style);
font-weight: var(--md-sys-typescale-title-medium-font-weight);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
line-height: var(--md-sys-typescale-title-medium-line-height);
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
text-transform: var(--md-sys-typescale-title-medium-text-transform);
@mixin title-medium {
font-family: var(--font-family-content);
font-size: var(--title-medium-font-size);
font-weight: var(--title-medium-font-weight);
letter-spacing: var(--title-medium-letter-spacing);
line-height: var(--title-medium-line-height);
}
.title-small {
font-family: var(--md-sys-typescale-title-small-font-family-name);
font-size: var(--md-sys-typescale-title-small-font-size);
font-style: var(--md-sys-typescale-title-small-font-family-style);
font-weight: var(--md-sys-typescale-title-small-font-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
line-height: var(--md-sys-typescale-title-small-line-height);
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
text-transform: var(--md-sys-typescale-title-small-text-transform);
@mixin title-small {
font-family: var(--font-family-content);
font-size: var(--title-small-font-size);
font-weight: var(--title-small-font-weight);
letter-spacing: var(--title-small-letter-spacing);
line-height: var(--title-small-line-height);
}

167
projects/qd-design/src/styles/typography/typography.token.scss
View File

@@ -1,107 +1,82 @@
:root {
/* body - large */
--md-sys-typescale-body-large-font-family-name: Roboto;
--md-sys-typescale-body-large-font-family-style: Regular;
--md-sys-typescale-body-large-font-size: 18px;
--md-sys-typescale-body-large-font-weight: 400px;
--md-sys-typescale-body-large-letter-spacing: 0.50px;
--md-sys-typescale-body-large-line-height: 22px;
/* body - medium */
--md-sys-typescale-body-medium-font-family-name: Roboto;
--md-sys-typescale-body-medium-font-family-style: Regular;
--md-sys-typescale-body-medium-font-size: 16px;
--md-sys-typescale-body-medium-font-weight: 400px;
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
--md-sys-typescale-body-medium-line-height: 20px;
/* body - small */
--md-sys-typescale-body-small-font-family-name: Roboto;
--md-sys-typescale-body-small-font-family-style: Regular;
--md-sys-typescale-body-small-font-size: 14px;
--md-sys-typescale-body-small-font-weight: 400px;
--md-sys-typescale-body-small-letter-spacing: 0.40px;
--md-sys-typescale-body-small-line-height: 18px;
// Display & Headline font
--font-family-title: Roboto, sans-serif;
// Title, body & label font
--font-family-content: Roboto, sans-serif;
/* display - large */
--md-sys-typescale-display-large-font-family-name: Roboto;
--md-sys-typescale-display-large-font-family-style: Regular;
--md-sys-typescale-display-large-font-size: 51px;
--md-sys-typescale-display-large-font-weight: 400px;
--md-sys-typescale-display-large-letter-spacing: -0.25px;
--md-sys-typescale-display-large-line-height: 61px;
--display-large-font-size: 57px;
--display-large-font-weight: 400px;
--display-large-letter-spacing: -0.25px;
--display-large-line-height: 64px;
/* display - medium */
--md-sys-typescale-display-medium-font-family-name: Roboto;
--md-sys-typescale-display-medium-font-family-style: Regular;
--md-sys-typescale-display-medium-font-size: 42px;
--md-sys-typescale-display-medium-font-weight: 400px;
--md-sys-typescale-display-medium-letter-spacing: 0px;
--md-sys-typescale-display-medium-line-height: 52px;
--display-medium-font-size: 45px;
--display-medium-font-weight: 400px;
--display-medium-letter-spacing: 0px;
--display-medium-line-height: 52px;
/* display - small */
--md-sys-typescale-display-small-font-family-name: Roboto;
--md-sys-typescale-display-small-font-family-style: Regular;
--md-sys-typescale-display-small-font-size: 40px;
--md-sys-typescale-display-small-font-weight: 400px;
--md-sys-typescale-display-small-letter-spacing: 0px;
--md-sys-typescale-display-small-line-height: 50px;
--display-small-font-size: 36px;
--display-small-font-weight: 400px;
--display-small-letter-spacing: 0px;
--display-small-line-height: 44px;
/* headline - large */
--md-sys-typescale-headline-large-font-family-name: Roboto;
--md-sys-typescale-headline-large-font-family-style: Regular;
--md-sys-typescale-headline-large-font-size: 36px;
--md-sys-typescale-headline-large-font-weight: 400px;
--md-sys-typescale-headline-large-letter-spacing: 0px;
--md-sys-typescale-headline-large-line-height: 44px;
--headline-large-font-size: 32px;
--headline-large-font-weight: 400px;
--headline-large-letter-spacing: 0px;
--headline-large-line-height: 40px;
/* headline - medium */
--md-sys-typescale-headline-medium-font-family-name: Roboto;
--md-sys-typescale-headline-medium-font-family-style: Regular;
--md-sys-typescale-headline-medium-font-size: 32px;
--md-sys-typescale-headline-medium-font-weight: 400px;
--md-sys-typescale-headline-medium-letter-spacing: 0px;
--md-sys-typescale-headline-medium-line-height: 36px;
--headline-medium-font-size: 28px;
--headline-medium-font-weight: 400px;
--headline-medium-letter-spacing: 0px;
--headline-medium-line-height: 36px;
/* headline - small */
--md-sys-typescale-headline-small-font-family-name: Roboto;
--md-sys-typescale-headline-small-font-family-style: Regular;
--md-sys-typescale-headline-small-font-size: 28px;
--md-sys-typescale-headline-small-font-weight: 400px;
--md-sys-typescale-headline-small-letter-spacing: 0px;
--md-sys-typescale-headline-small-line-height: 36px;
/* label - large */
--md-sys-typescale-label-large-font-family-name: Roboto;
--md-sys-typescale-label-large-font-family-style: Regular;
--md-sys-typescale-label-large-font-size: 12px;
--md-sys-typescale-label-large-font-weight: 500px;
--md-sys-typescale-label-large-letter-spacing: 0.10px;
--md-sys-typescale-label-large-line-height: 14px;
/* label - medium */
--md-sys-typescale-label-medium-font-family-name: Roboto;
--md-sys-typescale-label-medium-font-family-style: Regular;
--md-sys-typescale-label-medium-font-size: 11px;
--md-sys-typescale-label-medium-font-weight: 500px;
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
--md-sys-typescale-label-medium-line-height: 15px;
/* label - small */
--md-sys-typescale-label-small-font-family-name: Roboto;
--md-sys-typescale-label-small-font-family-style: Regular;
--md-sys-typescale-label-small-font-size: 10px;
--md-sys-typescale-label-small-font-weight: 500px;
--md-sys-typescale-label-small-letter-spacing: 0.50px;
--md-sys-typescale-label-small-line-height: 14px;
--headline-small-font-size: 24px;
--headline-small-font-weight: 400px;
--headline-small-letter-spacing: 0px;
--headline-small-line-height: 32px;
/* title - large */
--md-sys-typescale-title-large-font-family-name: Roboto;
--md-sys-typescale-title-large-font-family-style: Regular;
--md-sys-typescale-title-large-font-size: 25px;
--md-sys-typescale-title-large-font-weight: 400px;
--md-sys-typescale-title-large-letter-spacing: 0px;
--md-sys-typescale-title-large-line-height: 31px;
--title-large-font-size: 22px;
--title-large-font-weight: 400px;
--title-large-letter-spacing: 0px;
--title-large-line-height: 28px;
/* title - medium */
--md-sys-typescale-title-medium-font-family-name: Roboto;
--md-sys-typescale-title-medium-font-family-style: Regular;
--md-sys-typescale-title-medium-font-size: 22px;
--md-sys-typescale-title-medium-font-weight: 500px;
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
--md-sys-typescale-title-medium-line-height: 28px;
--title-medium-font-size: 18px;
--title-medium-font-weight: 500px;
--title-medium-letter-spacing: 0.15px;
--title-medium-line-height: 26px;
/* title - small */
--md-sys-typescale-title-small-font-family-name: Roboto;
--md-sys-typescale-title-small-font-family-style: Regular;
--md-sys-typescale-title-small-font-size: 20px;
--md-sys-typescale-title-small-font-weight: 500px;
--md-sys-typescale-title-small-letter-spacing: 0.10px;
--md-sys-typescale-title-small-line-height: 16px;
--title-small-font-size: 16px;
--title-small-font-weight: 500px;
--title-small-letter-spacing: 0.10px;
--title-small-line-height: 24px;
/* body - large */
--body-large-font-size: 18px;
--body-large-font-weight: 400px;
--body-large-letter-spacing: 0.50px;
--body-large-line-height: 26px;
/* body - medium */
--body-medium-font-size: 16px;
--body-medium-font-weight: 400px;
--body-medium-letter-spacing: 0.25px;
--body-medium-line-height: 24px;
/* body - small */
--body-small-font-size: 14px;
--body-small-font-weight: 400px;
--body-small-letter-spacing: 0.40px;
--body-small-line-height: 20px;
/* label - large */
--label-large-font-size: 14px;
--label-large-font-weight: 500px;
--label-large-letter-spacing: 0.10px;
--label-large-line-height: 20px;
/* label - medium */
--label-medium-font-size: 12px;
--label-medium-font-weight: 500px;
--label-medium-letter-spacing: 0.50px;
--label-medium-line-height: 16px;
/* label - small */
--label-small-font-size: 11px;
--label-small-font-weight: 500px;
--label-small-letter-spacing: 0.50px;
--label-small-line-height: 16px;
}