update dependencies

package.json

@@ -21,23 +21,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^20.1.0",
+    "@angular/cdk": "^21.1.2",
-    "@angular/compiler": "^20.1.0",
+    "@angular/common": "^21.1.2",
-    "@angular/core": "^20.1.0",
+    "@angular/compiler": "^21.1.2",
-    "@angular/forms": "^20.1.0",
+    "@angular/core": "^21.1.2",
-    "@angular/platform-browser": "^20.1.0",
+    "@angular/forms": "^21.1.2",
-    "@angular/platform-server": "^20.1.0",
+    "@angular/platform-browser": "^21.1.2",
-    "@angular/router": "^20.1.0",
+    "@angular/platform-server": "^21.1.2",
-    "@angular/ssr": "^20.1.5",
+    "@angular/router": "^21.1.2",
-    "express": "^5.1.0",
+    "@angular/ssr": "^21.1.2",
     "@ng-icons/core": "^25.0.1",
+    "express": "^5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.5",
+    "@angular/build": "^21.1.2",
-    "@angular/cli": "^20.1.5",
+    "@angular/cli": "^21.1.2",
-    "@angular/compiler-cli": "^20.1.0",
+    "@angular/compiler-cli": "^21.1.2",
     "@types/express": "^5.0.1",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^20.17.19",
@@ -47,7 +48,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^20.1.0",
+    "ng-packagr": "^21.1.0",
-    "typescript": "~5.8.2"
+    "typescript": "~5.9.3"
   }
 }

projects/qd-design-demo/src/app/app.css

@@ -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 */
+  --font-family-title: Roboto, sans-serif;
-  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --font-family-content: Roboto, sans-serif;
-  --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 - large */
-  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --display-large-font-size: 57px;
-  --md-sys-typescale-display-large-font-family-style: Regular;
+  --display-large-font-weight: 400px;
-  --md-sys-typescale-display-large-font-size: 51px;
+  --display-large-letter-spacing: -0.25px;
-  --md-sys-typescale-display-large-font-weight: 400px;
+  --display-large-line-height: 64px;
-  --md-sys-typescale-display-large-letter-spacing: -0.25px;
-  --md-sys-typescale-display-large-line-height: 61px;
   /* display - medium */
-  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --display-medium-font-size: 45px;
-  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --display-medium-font-weight: 400px;
-  --md-sys-typescale-display-medium-font-size: 42px;
+  --display-medium-letter-spacing: 0px;
-  --md-sys-typescale-display-medium-font-weight: 400px;
+  --display-medium-line-height: 52px;
-  --md-sys-typescale-display-medium-letter-spacing: 0px;
-  --md-sys-typescale-display-medium-line-height: 52px;
   /* display - small */
-  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --display-small-font-size: 36px;
-  --md-sys-typescale-display-small-font-family-style: Regular;
+  --display-small-font-weight: 400px;
-  --md-sys-typescale-display-small-font-size: 40px;
+  --display-small-letter-spacing: 0px;
-  --md-sys-typescale-display-small-font-weight: 400px;
+  --display-small-line-height: 44px;
-  --md-sys-typescale-display-small-letter-spacing: 0px;
-  --md-sys-typescale-display-small-line-height: 50px;
   /* headline - large */
-  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --headline-large-font-size: 32px;
-  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --headline-large-font-weight: 400px;
-  --md-sys-typescale-headline-large-font-size: 36px;
+  --headline-large-letter-spacing: 0px;
-  --md-sys-typescale-headline-large-font-weight: 400px;
+  --headline-large-line-height: 40px;
-  --md-sys-typescale-headline-large-letter-spacing: 0px;
-  --md-sys-typescale-headline-large-line-height: 44px;
   /* headline - medium */
-  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --headline-medium-font-size: 28px;
-  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --headline-medium-font-weight: 400px;
-  --md-sys-typescale-headline-medium-font-size: 32px;
+  --headline-medium-letter-spacing: 0px;
-  --md-sys-typescale-headline-medium-font-weight: 400px;
+  --headline-medium-line-height: 36px;
-  --md-sys-typescale-headline-medium-letter-spacing: 0px;
-  --md-sys-typescale-headline-medium-line-height: 36px;
   /* headline - small */
-  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --headline-small-font-size: 24px;
-  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --headline-small-font-weight: 400px;
-  --md-sys-typescale-headline-small-font-size: 28px;
+  --headline-small-letter-spacing: 0px;
-  --md-sys-typescale-headline-small-font-weight: 400px;
+  --headline-small-line-height: 32px;
-  --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;
   /* title - large */
-  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --title-large-font-size: 22px;
-  --md-sys-typescale-title-large-font-family-style: Regular;
+  --title-large-font-weight: 400px;
-  --md-sys-typescale-title-large-font-size: 25px;
+  --title-large-letter-spacing: 0px;
-  --md-sys-typescale-title-large-font-weight: 400px;
+  --title-large-line-height: 28px;
-  --md-sys-typescale-title-large-letter-spacing: 0px;
-  --md-sys-typescale-title-large-line-height: 31px;
   /* title - medium */
-  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --title-medium-font-size: 18px;
-  --md-sys-typescale-title-medium-font-family-style: Regular;
+  --title-medium-font-weight: 500px;
-  --md-sys-typescale-title-medium-font-size: 22px;
+  --title-medium-letter-spacing: 0.15px;
-  --md-sys-typescale-title-medium-font-weight: 500px;
+  --title-medium-line-height: 26px;
-  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
-  --md-sys-typescale-title-medium-line-height: 28px;
   /* title - small */
-  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --title-small-font-size: 16px;
-  --md-sys-typescale-title-small-font-family-style: Regular;
+  --title-small-font-weight: 500px;
-  --md-sys-typescale-title-small-font-size: 20px;
+  --title-small-letter-spacing: 0.10px;
-  --md-sys-typescale-title-small-font-weight: 500px;
+  --title-small-line-height: 24px;
-  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+  /* body - large */
-  --md-sys-typescale-title-small-line-height: 16px;
+  --body-large-font-size: 18px;
-}
+  --body-large-font-weight: 400px;
-
+  --body-large-letter-spacing: 0.50px;
-.display-large {
+  --body-large-line-height: 26px;
-  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  /* body - medium */
-  font-size: var(--md-sys-typescale-display-large-font-size);
+  --body-medium-font-size: 16px;
-  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  --body-medium-font-weight: 400px;
-  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  --body-medium-letter-spacing: 0.25px;
-  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  --body-medium-line-height: 24px;
-  line-height: var(--md-sys-typescale-display-large-line-height);
+  /* body - small */
-  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+  --body-small-font-size: 14px;
-  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  --body-small-font-weight: 400px;
-}
+  --body-small-letter-spacing: 0.40px;
-
+  --body-small-line-height: 20px;
-.display-medium {
+  /* label - large */
-  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  --label-large-font-size: 14px;
-  font-size: var(--md-sys-typescale-display-medium-font-size);
+  --label-large-font-weight: 500px;
-  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  --label-large-letter-spacing: 0.10px;
-  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  --label-large-line-height: 20px;
-  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  /* label - medium */
-  line-height: var(--md-sys-typescale-display-medium-line-height);
+  --label-medium-font-size: 12px;
-  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+  --label-medium-font-weight: 500px;
-  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  --label-medium-letter-spacing: 0.50px;
-}
+  --label-medium-line-height: 16px;
-
+  /* label - small */
-.display-small {
+  --label-small-font-size: 11px;
-  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  --label-small-font-weight: 500px;
-  font-size: var(--md-sys-typescale-display-small-font-size);
+  --label-small-letter-spacing: 0.50px;
-  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  --label-small-line-height: 16px;
-  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);
 }
 
 .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 */

projects/qd-design-demo/src/app/app.css.map

@@ -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"}

projects/qd-design-demo/src/app/app.html

@@ -1,5 +1,5 @@
 <div class="horizontal">
-  <qd-button variant="elevated" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
+  <qd-button variant="elevated" tooltip="tooltip" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
   <qd-button variant="elevated" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
 
   <qd-button variant="filled" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
@@ -15,7 +15,20 @@
   <qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
 </div>
 <div class="horizontal">
-  <qd-card clickable style="width: 300px" (click)="onClick()">
+  <qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" tooltip="tooltip"></qd-icon-button>
+  <qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+
+  <qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
+  <qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+
+  <qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
+  <qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+
+  <qd-icon-button variant="standard" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
+  <qd-icon-button variant="standard" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+</div>
+<div class="horizontal">
+  <qd-card clickable tooltip="tooltip" style="width: 300px" (click)="onClick()">
     <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>
@@ -51,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>
@@ -65,3 +75,12 @@
     <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-input-password [formField]="loginForm.password"/>
+    <qd-input-file [formField]="loginForm.file"/>
+    <qd-button variant="filled" [text]="'Confirm'" [iconName]="'checkmark'" [type]="'submit'" [disabled]="loginForm().invalid()"></qd-button>
+  </form>
+</div>

projects/qd-design-demo/src/app/app.scss

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

projects/qd-design-demo/src/app/app.ts

@@ -1,20 +1,52 @@
-import { Component, signal } from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
-import {QdButtonType} from '../../../qd-design/src/enums/qd-button-type.enum';
+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 {QdInputPassword}  from '../../../qd-design/src/lib/qd-input-password/qd-input-password';
+import {QdInputFile}  from '../../../qd-design/src/lib/qd-input-file/qd-input-file';
 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, QdCard, NgOptimizedImage],
+  imports: [
+    QdButton,
+    QdIconButton,
+    QdCard,
+    NgOptimizedImage,
+    QdTooltipDirective,
+    QdInputText,
+    QdInputPassword,
+    QdInputFile,
+    FormField,
+    FormsModule,
+    ReactiveFormsModule
+  ],
   templateUrl: './app.html',
+  standalone: true,
   styleUrl: './app.scss'
 })
 export class App {
   protected readonly title = signal('qd-design-demo');
-  protected readonly QdButtonType = QdButtonType;
+  loginModel = signal({checkEmail: true, email: '', password: '', file: new File([], "", undefined)});
+  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))
+      required(schemaPath.password, {message: 'Password is required'});
+  });
 
   public onClick() {
     console.log('clicked');
   }
+
+  public confirmForm() {
+    console.log(this.loginModel().email);
+    console.log(this.loginModel().checkEmail);
+    console.log(this.loginModel().password);
+    console.log(this.loginModel().file.bytes());
+  }
 }

projects/qd-design-demo/src/index.html

@@ -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>

projects/qd-design-demo/src/main.server.ts

@@ -1,7 +1,7 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { App } from './app/app';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(App, config);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
 
 export default bootstrap;

projects/qd-design/ng-package.json

@@ -3,5 +3,8 @@
   "dest": "../../dist/qd-design",
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
+  },
+  "assets": [
+    "src/styles/**/*.scss"
+  ]
 }

projects/qd-design/package.json

@@ -1,9 +1,13 @@
 {
-  "name": "qd-design",
+  "name": "@qd/qd-design",
-  "version": "0.0.1",
+  "version": "0.1.2",
+  "publishConfig": {
+    "registry": "https://git.quentinduwa.fr/api/packages/quentin_duwa/npm/"
+  },
   "peerDependencies": {
-    "@angular/common": "^20.1.0",
+    "@angular/common": "^22.0.1",
-    "@angular/core": "^20.1.0"
+    "@angular/core": "^22.0.1",
+    "@angular/cdk": "^22.0.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/qd-design/src/directives/qd-button-variant.ts

@@ -1,11 +1,14 @@
-import {Directive, HostBinding, Input} from '@angular/core';
+import {Directive, input} from '@angular/core';
 
 export type QdButtonVariant = 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
 
 @Directive({
   standalone: true,
-  selector: 'qd-button[variant]'
+  selector: 'qd-button[variant]',
+  host: {
+    '[attr.data-variant]': 'variant()'
+  }
 })
 export class QdButtonVariantDirective {
-  @Input() @HostBinding('attr.data-variant') variant: QdButtonVariant = 'filled';
+  variant = input<QdButtonVariant>('filled');
 }

projects/qd-design/src/directives/qd-card-variant.ts

@@ -1,11 +1,14 @@
-import {Directive, HostBinding, Input} from '@angular/core';
+import {Directive, input} from '@angular/core';
 
 export type QdCardVariant = 'elevated' | 'filled' | 'outlined';
 
 @Directive({
   standalone: true,
-  selector: 'qd-card[variant]'
+  selector: 'qd-card[variant]',
+  host: {
+    '[attr.data-variant]': 'variant()'
+  }
 })
 export class QdCardVariantDirective {
-  @Input() @HostBinding('attr.data-variant') variant: QdCardVariant = 'filled';
+  variant = input<QdCardVariant>('filled');
 }

projects/qd-design/src/directives/qd-icon-button-variant.ts

@@ -0,0 +1,15 @@
+import {Directive, input} from '@angular/core';
+
+
+export type QdIconButtonVariant = 'filled' | 'filled-tonal' | 'outlined' | 'standard';
+
+@Directive({
+  standalone: true,
+  selector: 'qd-icon-button[variant]',
+  host: {
+    '[attr.data-variant]': 'variant()'
+  }
+})
+export class QdIconButtonVariantDirective {
+  variant = input<QdIconButtonVariant>('filled');
+}

projects/qd-design/src/directives/qd-tooltip-directive.ts

@@ -1,11 +1,16 @@
-import {Directive, ElementRef} from '@angular/core';
+import {ComponentRef, Directive, ElementRef, HostListener, input} from '@angular/core';
 import { Overlay, OverlayRef, OverlayPositionBuilder, ConnectionPositionPair } from '@angular/cdk/overlay';
+import {ComponentPortal} from '@angular/cdk/portal';
+import {QdPlainTooltip} from '../lib/qd-plain-tooltip/qd-plain-tooltip';
 
 @Directive({
   standalone: true,
   selector: '[tooltip]'
 })
 export class QdTooltipDirective {
+  text = input<string>('', { alias: 'tooltip' });
+  private overlayRef: OverlayRef | null = null;
+  private tooltipRef: ComponentRef<QdPlainTooltip> | null = null;
 
   constructor(
     private elementRef: ElementRef,
@@ -13,4 +18,55 @@ export class QdTooltipDirective {
     private positionBuilder: OverlayPositionBuilder
   ) {}
 
+  ngOnInit(): void {
+    // Top
+    const positionTop = new ConnectionPositionPair(
+      { originX: 'center', originY: 'top' },
+      { overlayX: 'center', overlayY: 'bottom' },
+      0, -8
+    );
+
+    // Bottom
+    const positionBottom = new ConnectionPositionPair(
+      { originX: 'center', originY: 'bottom' },
+      { overlayX: 'center', overlayY: 'top' },
+      0, 8
+    );
+
+    const positionStrategy = this.positionBuilder
+      .flexibleConnectedTo(this.elementRef)
+      .withPositions([positionTop, positionBottom])
+      .withPush(true);
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+      hasBackdrop: false
+    });
+  }
+
+  @HostListener('mouseenter')
+  show(): void {
+    const content = this.text();
+
+    if (!this.overlayRef || !content || this.overlayRef.hasAttached()) return;
+
+    const tooltipPortal = new ComponentPortal(QdPlainTooltip);
+    this.tooltipRef = this.overlayRef.attach(tooltipPortal);
+
+    this.tooltipRef.setInput("text", content);
+  }
+
+  @HostListener('mouseleave')
+  hide(): void {
+    if (this.overlayRef) {
+      this.overlayRef.detach();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+    }
+  }
 }

projects/qd-design/src/enums/qd-button-type.enum.ts

@@ -1,7 +0,0 @@
-export enum QdButtonType {
-  ELEVATED = 'elevated',
-  FILLED = 'filled',
-  FILLED_TONAL = 'filled-tonal',
-  OUTLINED = 'outlined',
-  TEXT = 'text',
-}

projects/qd-design/src/lib/qd-button/qd-button.css

@@ -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 */
+  --font-family-title: Roboto, sans-serif;
-  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --font-family-content: Roboto, sans-serif;
-  --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 - large */
-  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --display-large-font-size: 57px;
-  --md-sys-typescale-display-large-font-family-style: Regular;
+  --display-large-font-weight: 400px;
-  --md-sys-typescale-display-large-font-size: 51px;
+  --display-large-letter-spacing: -0.25px;
-  --md-sys-typescale-display-large-font-weight: 400px;
+  --display-large-line-height: 64px;
-  --md-sys-typescale-display-large-letter-spacing: -0.25px;
-  --md-sys-typescale-display-large-line-height: 61px;
   /* display - medium */
-  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --display-medium-font-size: 45px;
-  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --display-medium-font-weight: 400px;
-  --md-sys-typescale-display-medium-font-size: 42px;
+  --display-medium-letter-spacing: 0px;
-  --md-sys-typescale-display-medium-font-weight: 400px;
+  --display-medium-line-height: 52px;
-  --md-sys-typescale-display-medium-letter-spacing: 0px;
-  --md-sys-typescale-display-medium-line-height: 52px;
   /* display - small */
-  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --display-small-font-size: 36px;
-  --md-sys-typescale-display-small-font-family-style: Regular;
+  --display-small-font-weight: 400px;
-  --md-sys-typescale-display-small-font-size: 40px;
+  --display-small-letter-spacing: 0px;
-  --md-sys-typescale-display-small-font-weight: 400px;
+  --display-small-line-height: 44px;
-  --md-sys-typescale-display-small-letter-spacing: 0px;
-  --md-sys-typescale-display-small-line-height: 50px;
   /* headline - large */
-  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --headline-large-font-size: 32px;
-  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --headline-large-font-weight: 400px;
-  --md-sys-typescale-headline-large-font-size: 36px;
+  --headline-large-letter-spacing: 0px;
-  --md-sys-typescale-headline-large-font-weight: 400px;
+  --headline-large-line-height: 40px;
-  --md-sys-typescale-headline-large-letter-spacing: 0px;
-  --md-sys-typescale-headline-large-line-height: 44px;
   /* headline - medium */
-  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --headline-medium-font-size: 28px;
-  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --headline-medium-font-weight: 400px;
-  --md-sys-typescale-headline-medium-font-size: 32px;
+  --headline-medium-letter-spacing: 0px;
-  --md-sys-typescale-headline-medium-font-weight: 400px;
+  --headline-medium-line-height: 36px;
-  --md-sys-typescale-headline-medium-letter-spacing: 0px;
-  --md-sys-typescale-headline-medium-line-height: 36px;
   /* headline - small */
-  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --headline-small-font-size: 24px;
-  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --headline-small-font-weight: 400px;
-  --md-sys-typescale-headline-small-font-size: 28px;
+  --headline-small-letter-spacing: 0px;
-  --md-sys-typescale-headline-small-font-weight: 400px;
+  --headline-small-line-height: 32px;
-  --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;
   /* title - large */
-  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --title-large-font-size: 22px;
-  --md-sys-typescale-title-large-font-family-style: Regular;
+  --title-large-font-weight: 400px;
-  --md-sys-typescale-title-large-font-size: 25px;
+  --title-large-letter-spacing: 0px;
-  --md-sys-typescale-title-large-font-weight: 400px;
+  --title-large-line-height: 28px;
-  --md-sys-typescale-title-large-letter-spacing: 0px;
-  --md-sys-typescale-title-large-line-height: 31px;
   /* title - medium */
-  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --title-medium-font-size: 18px;
-  --md-sys-typescale-title-medium-font-family-style: Regular;
+  --title-medium-font-weight: 500px;
-  --md-sys-typescale-title-medium-font-size: 22px;
+  --title-medium-letter-spacing: 0.15px;
-  --md-sys-typescale-title-medium-font-weight: 500px;
+  --title-medium-line-height: 26px;
-  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
-  --md-sys-typescale-title-medium-line-height: 28px;
   /* title - small */
-  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --title-small-font-size: 16px;
-  --md-sys-typescale-title-small-font-family-style: Regular;
+  --title-small-font-weight: 500px;
-  --md-sys-typescale-title-small-font-size: 20px;
+  --title-small-letter-spacing: 0.10px;
-  --md-sys-typescale-title-small-font-weight: 500px;
+  --title-small-line-height: 24px;
-  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+  /* body - large */
-  --md-sys-typescale-title-small-line-height: 16px;
+  --body-large-font-size: 18px;
-}
+  --body-large-font-weight: 400px;
-
+  --body-large-letter-spacing: 0.50px;
-.display-large {
+  --body-large-line-height: 26px;
-  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  /* body - medium */
-  font-size: var(--md-sys-typescale-display-large-font-size);
+  --body-medium-font-size: 16px;
-  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  --body-medium-font-weight: 400px;
-  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  --body-medium-letter-spacing: 0.25px;
-  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  --body-medium-line-height: 24px;
-  line-height: var(--md-sys-typescale-display-large-line-height);
+  /* body - small */
-  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+  --body-small-font-size: 14px;
-  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  --body-small-font-weight: 400px;
-}
+  --body-small-letter-spacing: 0.40px;
-
+  --body-small-line-height: 20px;
-.display-medium {
+  /* label - large */
-  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  --label-large-font-size: 14px;
-  font-size: var(--md-sys-typescale-display-medium-font-size);
+  --label-large-font-weight: 500px;
-  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  --label-large-letter-spacing: 0.10px;
-  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  --label-large-line-height: 20px;
-  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  /* label - medium */
-  line-height: var(--md-sys-typescale-display-medium-line-height);
+  --label-medium-font-size: 12px;
-  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+  --label-medium-font-weight: 500px;
-  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  --label-medium-letter-spacing: 0.50px;
-}
+  --label-medium-line-height: 16px;
-
+  /* label - small */
-.display-small {
+  --label-small-font-size: 11px;
-  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  --label-small-font-weight: 500px;
-  font-size: var(--md-sys-typescale-display-small-font-size);
+  --label-small-letter-spacing: 0.50px;
-  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  --label-small-line-height: 16px;
-  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);
 }
 
 .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,12 @@ body.dark-theme {
   height: fit-content;
   width: fit-content;
 }
+:host.disabled:disabled, :host.disabled:disabled:active, :host.disabled:disabled:hover, :host.disabled:disabled:focus {
+  pointer-events: none;
+}
+:host.disabled.disabled {
+  pointer-events: none;
+}
 
 .button {
   display: flex;
@@ -488,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;
@@ -746,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);
 }

projects/qd-design/src/lib/qd-button/qd-button.css.map

@@ -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;;;AAmBF;EHZE;EACA,gBGYiB;EHqCjB;EGnCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EC9CE;EDgDA;;ACgCA;EA5EA;EDgDE;;ACgCF;EAhFA;EDgDE;;ACiBF;EACE;EAlEF;EDqDE;;ACiBF;EAtEA;EDqDE;;ACEF;EAvDA;ED0DE;;ACCF;EA3DA;ED0DE;;ACfF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACDA;EAhFA;EDqFE;;ACDF;EApFA;EDqFE;;AChBF;EACE;EAtEF;ED0FE;;AChBF;EA1EA;ED0FE;;AC/BF;EA3DA;ED+FE;;AChCF;EA/DA;ED+FE;;AChDF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;AClCA;EDqCE;EACA;;AClCF;EDiCE;EACA;;ACjDF;EACE;EDoDA;EACA;;ACjDF;EDgDE;EACA;;AChEF;EDoEE;EACA;;ACjEF;EDgEE;EACA;;ACjFF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;ACpEA;EDuEE;;ACnEF;EDmEE;;AClFF;EACE;EDqFA;;ACjFF;EDiFE;;AChGF;EDoGE;;AChGF;EDgGE;;AChHF;EACE;EDmHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8GA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACpGA;EDuGE;;ACnGF;EDmGE;;AClHF;EACE;EDqHA;;ACjHF;EDiHE;;AChIF;EDoIE;;AChIF;EDgIE;;AChJF;EACE;EDmJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8IA;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"}

projects/qd-design/src/lib/qd-button/qd-button.scss

@@ -5,6 +5,12 @@
   background-color: transparent;
   height: fit-content;
   width: fit-content;
+
+  &.disabled {
+    @include qd.disabled {
+
+    }
+  }
 }
 
 @mixin button-disabled {
@@ -44,7 +50,7 @@
   }
 
   &-content {
-    @extend .label-large;
+    @include qd.label-large;
     background-color: transparent;
     height: fit-content;
     margin: auto 8px;
@@ -186,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);

projects/qd-design/src/lib/qd-button/qd-button.ts

@@ -7,6 +7,7 @@ import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
   imports: [
     QdIcon
   ],
+  standalone: true,
   templateUrl: './qd-button.html',
   styleUrl: './qd-button.scss',
   hostDirectives: [
@@ -14,10 +15,12 @@ import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
       directive: QdButtonVariantDirective,
       inputs: ['variant']
     }
-  ]
+  ],
+  host: {
+    '[class.disabled]': 'disabled()',
+  }
 })
 export class QdButton {
-  // Optional inputs
   iconName = input<String>();
   text = input<string | number>();
   disabled = input<Boolean>(false);

projects/qd-design/src/lib/qd-card/qd-card.css

@@ -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 */
+  --font-family-title: Roboto, sans-serif;
-  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --font-family-content: Roboto, sans-serif;
-  --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 - large */
-  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --display-large-font-size: 57px;
-  --md-sys-typescale-display-large-font-family-style: Regular;
+  --display-large-font-weight: 400px;
-  --md-sys-typescale-display-large-font-size: 51px;
+  --display-large-letter-spacing: -0.25px;
-  --md-sys-typescale-display-large-font-weight: 400px;
+  --display-large-line-height: 64px;
-  --md-sys-typescale-display-large-letter-spacing: -0.25px;
-  --md-sys-typescale-display-large-line-height: 61px;
   /* display - medium */
-  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --display-medium-font-size: 45px;
-  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --display-medium-font-weight: 400px;
-  --md-sys-typescale-display-medium-font-size: 42px;
+  --display-medium-letter-spacing: 0px;
-  --md-sys-typescale-display-medium-font-weight: 400px;
+  --display-medium-line-height: 52px;
-  --md-sys-typescale-display-medium-letter-spacing: 0px;
-  --md-sys-typescale-display-medium-line-height: 52px;
   /* display - small */
-  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --display-small-font-size: 36px;
-  --md-sys-typescale-display-small-font-family-style: Regular;
+  --display-small-font-weight: 400px;
-  --md-sys-typescale-display-small-font-size: 40px;
+  --display-small-letter-spacing: 0px;
-  --md-sys-typescale-display-small-font-weight: 400px;
+  --display-small-line-height: 44px;
-  --md-sys-typescale-display-small-letter-spacing: 0px;
-  --md-sys-typescale-display-small-line-height: 50px;
   /* headline - large */
-  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --headline-large-font-size: 32px;
-  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --headline-large-font-weight: 400px;
-  --md-sys-typescale-headline-large-font-size: 36px;
+  --headline-large-letter-spacing: 0px;
-  --md-sys-typescale-headline-large-font-weight: 400px;
+  --headline-large-line-height: 40px;
-  --md-sys-typescale-headline-large-letter-spacing: 0px;
-  --md-sys-typescale-headline-large-line-height: 44px;
   /* headline - medium */
-  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --headline-medium-font-size: 28px;
-  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --headline-medium-font-weight: 400px;
-  --md-sys-typescale-headline-medium-font-size: 32px;
+  --headline-medium-letter-spacing: 0px;
-  --md-sys-typescale-headline-medium-font-weight: 400px;
+  --headline-medium-line-height: 36px;
-  --md-sys-typescale-headline-medium-letter-spacing: 0px;
-  --md-sys-typescale-headline-medium-line-height: 36px;
   /* headline - small */
-  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --headline-small-font-size: 24px;
-  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --headline-small-font-weight: 400px;
-  --md-sys-typescale-headline-small-font-size: 28px;
+  --headline-small-letter-spacing: 0px;
-  --md-sys-typescale-headline-small-font-weight: 400px;
+  --headline-small-line-height: 32px;
-  --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;
   /* title - large */
-  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --title-large-font-size: 22px;
-  --md-sys-typescale-title-large-font-family-style: Regular;
+  --title-large-font-weight: 400px;
-  --md-sys-typescale-title-large-font-size: 25px;
+  --title-large-letter-spacing: 0px;
-  --md-sys-typescale-title-large-font-weight: 400px;
+  --title-large-line-height: 28px;
-  --md-sys-typescale-title-large-letter-spacing: 0px;
-  --md-sys-typescale-title-large-line-height: 31px;
   /* title - medium */
-  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --title-medium-font-size: 18px;
-  --md-sys-typescale-title-medium-font-family-style: Regular;
+  --title-medium-font-weight: 500px;
-  --md-sys-typescale-title-medium-font-size: 22px;
+  --title-medium-letter-spacing: 0.15px;
-  --md-sys-typescale-title-medium-font-weight: 500px;
+  --title-medium-line-height: 26px;
-  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
-  --md-sys-typescale-title-medium-line-height: 28px;
   /* title - small */
-  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --title-small-font-size: 16px;
-  --md-sys-typescale-title-small-font-family-style: Regular;
+  --title-small-font-weight: 500px;
-  --md-sys-typescale-title-small-font-size: 20px;
+  --title-small-letter-spacing: 0.10px;
-  --md-sys-typescale-title-small-font-weight: 500px;
+  --title-small-line-height: 24px;
-  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+  /* body - large */
-  --md-sys-typescale-title-small-line-height: 16px;
+  --body-large-font-size: 18px;
-}
+  --body-large-font-weight: 400px;
-
+  --body-large-letter-spacing: 0.50px;
-.display-large {
+  --body-large-line-height: 26px;
-  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  /* body - medium */
-  font-size: var(--md-sys-typescale-display-large-font-size);
+  --body-medium-font-size: 16px;
-  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  --body-medium-font-weight: 400px;
-  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  --body-medium-letter-spacing: 0.25px;
-  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  --body-medium-line-height: 24px;
-  line-height: var(--md-sys-typescale-display-large-line-height);
+  /* body - small */
-  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+  --body-small-font-size: 14px;
-  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  --body-small-font-weight: 400px;
-}
+  --body-small-letter-spacing: 0.40px;
-
+  --body-small-line-height: 20px;
-.display-medium {
+  /* label - large */
-  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  --label-large-font-size: 14px;
-  font-size: var(--md-sys-typescale-display-medium-font-size);
+  --label-large-font-weight: 500px;
-  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  --label-large-letter-spacing: 0.10px;
-  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  --label-large-line-height: 20px;
-  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  /* label - medium */
-  line-height: var(--md-sys-typescale-display-medium-line-height);
+  --label-medium-font-size: 12px;
-  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+  --label-medium-font-weight: 500px;
-  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  --label-medium-letter-spacing: 0.50px;
-}
+  --label-medium-line-height: 16px;
-
+  /* label - small */
-.display-small {
+  --label-small-font-size: 11px;
-  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  --label-small-font-weight: 500px;
-  font-size: var(--md-sys-typescale-display-small-font-size);
+  --label-small-letter-spacing: 0.50px;
-  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  --label-small-line-height: 16px;
-  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);
 }
 
 .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) {

projects/qd-design/src/lib/qd-card/qd-card.css.map

@@ -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"}

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.css

@@ -0,0 +1,540 @@
+@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: flex;
+  background-color: transparent;
+  height: fit-content;
+  width: fit-content;
+}
+:host.disabled:disabled, :host.disabled:disabled:active, :host.disabled:disabled:hover, :host.disabled:disabled:focus {
+  pointer-events: none;
+}
+:host.disabled.disabled {
+  pointer-events: none;
+}
+
+.button {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px;
+  transition: all 200ms ease-in-out;
+  width: 40px;
+}
+.button-icon, :host[data-variant=text] .button .icon, :host[data-variant=outlined] .button .icon, :host[data-variant=filled-tonal] .button .icon, :host[data-variant=filled] .button .icon {
+  background-color: transparent;
+  height: 24px;
+  margin: auto;
+  padding: 0;
+  width: 24px;
+}
+
+:host[data-variant=filled] .button {
+  background-color: var(--md-sys-color-primary);
+}
+:host[data-variant=filled] .button:enabled:hover, :host[data-variant=filled] .button:hover {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
+}
+:host[data-variant=filled] .button.hover {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
+}
+:host[data-variant=filled] .button:enabled:focus-visible, :host[data-variant=filled] .button:focus-visible {
+  outline: none;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button.focus {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button:enabled:active, :host[data-variant=filled] .button:active {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button.active {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button:disabled, :host[data-variant=filled] .button:disabled:active, :host[data-variant=filled] .button:disabled:hover, :host[data-variant=filled] .button:disabled:focus {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled] .button:disabled .icon, :host[data-variant=filled] .button:disabled:active .icon, :host[data-variant=filled] .button:disabled:hover .icon, :host[data-variant=filled] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button:disabled .content, :host[data-variant=filled] .button:disabled:active .content, :host[data-variant=filled] .button:disabled:hover .content, :host[data-variant=filled] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button.disabled {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button .icon {
+  color: var(--md-sys-color-on-primary);
+}
+
+:host[data-variant=filled-tonal] .button {
+  background-color: var(--md-sys-color-secondary-container);
+}
+:host[data-variant=filled-tonal] .button:enabled:hover, :host[data-variant=filled-tonal] .button:hover {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button.hover {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button:enabled:focus-visible, :host[data-variant=filled-tonal] .button:focus-visible {
+  outline: none;
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button.focus {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button:enabled:active, :host[data-variant=filled-tonal] .button:active {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button.active {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button:disabled, :host[data-variant=filled-tonal] .button:disabled:active, :host[data-variant=filled-tonal] .button:disabled:hover, :host[data-variant=filled-tonal] .button:disabled:focus {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled-tonal] .button:disabled .icon, :host[data-variant=filled-tonal] .button:disabled:active .icon, :host[data-variant=filled-tonal] .button:disabled:hover .icon, :host[data-variant=filled-tonal] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button:disabled .content, :host[data-variant=filled-tonal] .button:disabled:active .content, :host[data-variant=filled-tonal] .button:disabled:hover .content, :host[data-variant=filled-tonal] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button.disabled {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled-tonal] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button .icon {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+:host[data-variant=outlined] .button {
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+:host[data-variant=outlined] .button:enabled:hover, :host[data-variant=outlined] .button:hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+:host[data-variant=outlined] .button.hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+:host[data-variant=outlined] .button:enabled:focus-visible, :host[data-variant=outlined] .button:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button.focus {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button:enabled:active, :host[data-variant=outlined] .button:active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button.active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button:disabled, :host[data-variant=outlined] .button:disabled:active, :host[data-variant=outlined] .button:disabled:hover, :host[data-variant=outlined] .button:disabled:focus {
+  pointer-events: none;
+  background-color: transparent;
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=outlined] .button:disabled .icon, :host[data-variant=outlined] .button:disabled:active .icon, :host[data-variant=outlined] .button:disabled:hover .icon, :host[data-variant=outlined] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button:disabled .content, :host[data-variant=outlined] .button:disabled:active .content, :host[data-variant=outlined] .button:disabled:hover .content, :host[data-variant=outlined] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button.disabled {
+  pointer-events: none;
+  background-color: transparent;
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=outlined] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button .icon {
+  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);
+}
+:host[data-variant=text] .button.hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+:host[data-variant=text] .button:enabled:focus-visible, :host[data-variant=text] .button:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button.focus {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button:enabled:active, :host[data-variant=text] .button:active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button.active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button:disabled, :host[data-variant=text] .button:disabled:active, :host[data-variant=text] .button:disabled:hover, :host[data-variant=text] .button:disabled:focus {
+  pointer-events: none;
+  background-color: transparent;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=text] .button:disabled .icon, :host[data-variant=text] .button:disabled:active .icon, :host[data-variant=text] .button:disabled:hover .icon, :host[data-variant=text] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button:disabled .content, :host[data-variant=text] .button:disabled:active .content, :host[data-variant=text] .button:disabled:hover .content, :host[data-variant=text] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button.disabled {
+  pointer-events: none;
+  background-color: transparent;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=text] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button .icon {
+  color: var(--md-sys-color-primary);
+}
+
+/*# sourceMappingURL=qd-icon-button.css.map */

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

@@ -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-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"}

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.html

@@ -0,0 +1,8 @@
+<button [class]="'button'"
+        [disabled]="disabled()"
+        [type]="type()">
+  <qd-icon [iconName]="iconName()!"
+           [size]="24"
+           class="icon">
+  </qd-icon>
+</button>

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.scss

@@ -0,0 +1,161 @@
+@use '../../styles/qd_design_system' as qd;
+
+:host {
+  display: flex;
+  background-color: transparent;
+  height: fit-content;
+  width: fit-content;
+
+  &.disabled {
+    @include qd.disabled {
+
+    }
+  }
+}
+
+@mixin button-disabled {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+
+  .icon {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+    background: transparent;
+  }
+
+  .content {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+    background: transparent;
+  }
+}
+
+.button {
+  @include qd.flex(row);
+  @include qd.clickable;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px;
+  transition: all 200ms ease-in-out;
+  width: 40px;
+
+  &-icon {
+    background-color: transparent;
+    height: 24px;
+    margin: auto;
+    padding: 0;
+    width: 24px;
+  }
+}
+
+:host[data-variant='filled'] .button {
+  background-color: var(--md-sys-color-primary);
+
+  @include qd.hover {
+    @include qd.elevation-1;
+    background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
+  }
+
+  @include qd.focus {
+    @include qd.elevation-1;
+    background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+  }
+
+  @include qd.active {
+    @include qd.elevation-1;
+    background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+  }
+
+  @include qd.disabled {
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-on-primary);
+  }
+}
+
+:host[data-variant='filled-tonal'] .button {
+  background-color: var(--md-sys-color-secondary-container);
+
+  @include qd.hover {
+    background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
+    box-shadow: var(--md-sys-elevation-1);
+  }
+
+  @include qd.focus {
+    background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+    box-shadow: var(--md-sys-elevation-1);
+  }
+
+  @include qd.active {
+    background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+    box-shadow: var(--md-sys-elevation-1);
+  }
+
+  @include qd.disabled {
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-on-secondary-container);
+  }
+}
+
+:host[data-variant='outlined']  .button {
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  @include qd.hover {
+    background-color:  color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  @include qd.focus {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.active {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.disabled {
+    background-color: transparent;
+    border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+}
+
+:host[data-variant='text'] .button {
+  padding: 0 4px;
+
+  @include qd.hover {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  @include qd.focus {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.active {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.disabled {
+    background-color: transparent;
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-primary);
+  }
+}

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.spec.ts

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

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.ts

@@ -0,0 +1,28 @@
+import {Component, input} from '@angular/core';
+import {QdIcon} from '../qd-icon/qd-icon';
+import {QdIconButtonVariantDirective} from '../../directives/qd-icon-button-variant';
+
+@Component({
+  selector: 'qd-icon-button',
+  imports: [
+    QdIcon
+  ],
+  templateUrl: './qd-icon-button.html',
+  styleUrl: './qd-icon-button.scss',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: QdIconButtonVariantDirective,
+      inputs: ['variant']
+    }
+  ],
+  host: {
+    '[class.disabled]': 'disabled()',
+  }
+})
+export class QdIconButton {
+  iconName = input<String>();
+  disabled = input<Boolean>(false);
+  type = input<'button' | 'submit' | 'reset'>('button');
+
+}

projects/qd-design/src/lib/qd-icon/qd-icon.ts

@@ -5,6 +5,7 @@ import {NgStyle} from '@angular/common';
   selector: 'qd-icon',
   imports: [NgStyle],
   templateUrl: './qd-icon.html',
+  standalone: true,
   styleUrl: './qd-icon.scss'
 })
 export class QdIcon {

projects/qd-design/src/lib/qd-input-file/qd-input-file.css

@@ -0,0 +1,427 @@
+@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;
+}
+
+.filename {
+  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);
+  background-color: transparent;
+  border: none;
+  color: var(--md-sys-color-on-surface);
+  display: block;
+  flex: 1 1 auto;
+  margin: auto 16px;
+  max-width: 100%;
+  min-width: 40px;
+  overflow: hidden;
+  padding: 4px 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+input[type=file] {
+  display: none;
+}
+
+/*# sourceMappingURL=qd-input-file.css.map */

projects/qd-design/src/lib/qd-input-file/qd-input-file.css.map

@@ -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-file.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;;;AAGF;EC9FE;EACA;EACA;EACA;EACA;ED4FA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE","file":"qd-input-file.css"}

projects/qd-design/src/lib/qd-input-file/qd-input-file.html

@@ -0,0 +1,49 @@
+<div class="inputTextContainer"
+     [class.focused]="isFocused()"
+     [class.populated]="isPopulated()"
+     [class.disabled]="disabled()"
+     [class.error]="invalid()"
+     (click)="fileInput.click()">
+
+  <p class="filename">{{ value().name }}</p>
+
+  <input
+    #fileInput
+    class="input"
+    type="file"
+    [accept]="accept().join(', ')"
+    (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>
+}

projects/qd-design/src/lib/qd-input-file/qd-input-file.scss

@@ -0,0 +1,163 @@
+@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
+}
+
+.filename {
+  @include qd.body-large;
+  background-color: transparent;
+  border: none;
+  color: var(--md-sys-color-on-surface);
+  display: block;
+  flex: 1 1 auto;
+  margin: auto 16px;
+  max-width: 100%;
+  min-width: 40px;
+  overflow: hidden;
+  padding: 4px 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+input[type='file'] {
+  display: none;
+}

projects/qd-design/src/lib/qd-input-file/qd-input-file.spec.ts

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

projects/qd-design/src/lib/qd-input-file/qd-input-file.ts

@@ -0,0 +1,49 @@
+import {ChangeDetectionStrategy, Component, computed, input, model, signal} from '@angular/core';
+import {DisabledReason, FormValueControl, ValidationError, WithOptionalField} from '@angular/forms/signals';
+
+@Component({
+  standalone: true,
+  selector: 'qd-input-file',
+  templateUrl: './qd-input-file.html',
+  styleUrl: './qd-input-file.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QdInputFile implements FormValueControl<File> {
+  value = model<File>(new File([], "", undefined));
+  placeholder = input<string>('File');
+  accept = input<string[]>([]);
+
+  // 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().name.length > 0);
+  currentPlaceholder = computed(() => this.isFocused() ? this.placeholder() : '');
+
+  onInput(event: Event) {
+    const inputElement: HTMLInputElement = event.target as HTMLInputElement;
+    const files: FileList | null = inputElement.files;
+
+    if (files && files.length > 0) {
+      this.value.set(files[0]);
+    } else {
+      this.value.set(new File([], "", undefined));
+    }
+  }
+
+  onFocus() {
+    this.isFocused.set(true);
+  }
+
+  onBlur() {
+    this.isFocused.set(false);
+    this.touched.set(true)
+  }
+}

projects/qd-design/src/lib/qd-input-password/qd-input-password.css

@@ -0,0 +1,413 @@
+@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 .inputIcon {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  width: 100%;
+}
+.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 8px 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 .visibilityIcon {
+  cursor: pointer;
+  margin: auto 16px auto 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.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-password.css.map */

projects/qd-design/src/lib/qd-input-password/qd-input-password.css.map

@@ -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-password.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;EHDA;EACA,gBGCwB;EHIxB;EGHE;;AAGF;ECsCA;EACA;EACA;EACA;EACA;EDxCE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAIE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EHeA;EGbE;EACA;;AAGF;ECGA;EACA;EACA;EACA;EACA;EDLE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;ECMA;EACA;EACA;EACA;EACA;EDRE;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;EC7EE;EACA;EACA;EACA;EACA;ED2EA;EACA;;;AAGF;ECnFE;EACA;EACA;EACA;EACA;EDiFA;EACA","file":"qd-input-password.css"}

projects/qd-design/src/lib/qd-input-password/qd-input-password.html

@@ -0,0 +1,47 @@
+<div class="inputTextContainer"
+     [class.focused]="isFocused()"
+     [class.populated]="isPopulated()"
+     [class.disabled]="disabled()"
+     [class.error]="invalid()">
+
+  <div class="inputIcon">
+    <input
+      class="input"
+      [type]="isPasswordVisible() ? 'text' : 'password'"
+      [value]="value()"
+      (input)="onInput($event)"
+      (focus)="onFocus()"
+      [placeholder]="currentPlaceholder()"
+      [disabled]="disabled()"
+      [readonly]="readonly()"
+      [class.invalid]="invalid()"
+      [attr.aria-invalid]="invalid()"
+      (blur)="onBlur()"
+    />
+    <qd-icon class="visibilityIcon" [iconName]="isPasswordVisible() ? 'visibility_off' : 'visibility'" (click)="onTapChangeVisibility()" />
+  </div>
+
+  <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>
+}

projects/qd-design/src/lib/qd-input-password/qd-input-password.scss

@@ -0,0 +1,153 @@
+@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;
+
+  .inputIcon {
+    @include qd.flex-fill(row);
+    width: 100%;
+  }
+
+  .input {
+    @include qd.body-medium;
+    width: 100%;
+    padding: 0 8px 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);
+    }
+  }
+
+  .visibilityIcon {
+    @include qd.clickable;
+    margin: auto 16px auto 0;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .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
+}

projects/qd-design/src/lib/qd-input-password/qd-input-password.spec.ts

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

projects/qd-design/src/lib/qd-input-password/qd-input-password.ts

@@ -0,0 +1,58 @@
+import {
+  ChangeDetectionStrategy,
+  Component, computed,
+  input,
+  model,
+  signal
+} from '@angular/core';
+import {DisabledReason, FormValueControl, ValidationError, WithOptionalField} from '@angular/forms/signals';
+import {QdIcon} from '../qd-icon/qd-icon';
+
+@Component({
+  standalone: true,
+  selector: 'qd-input-password',
+  templateUrl: './qd-input-password.html',
+  styleUrl: './qd-input-password.scss',
+  imports: [
+    QdIcon
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QdInputPassword implements FormValueControl<string> {
+  value = model<string>('');
+  placeholder = input<string>('Password');
+  isPasswordVisible = signal<Boolean>(false)
+
+  // 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)
+  }
+
+  onTapChangeVisibility() {
+    this.isPasswordVisible.set(!this.isPasswordVisible())
+  }
+
+}

projects/qd-design/src/lib/qd-input-text/qd-input-text.css

@@ -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 */

projects/qd-design/src/lib/qd-input-text/qd-input-text.css.map

@@ -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"}

projects/qd-design/src/lib/qd-input-text/qd-input-text.html

@@ -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>
+}

projects/qd-design/src/lib/qd-input-text/qd-input-text.scss

@@ -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
+}

projects/qd-design/src/lib/qd-input-text/qd-input-text.spec.ts

@@ -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();
+  });
+});

projects/qd-design/src/lib/qd-input-text/qd-input-text.ts

@@ -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)
+  }
+}

projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css

@@ -1,17 +1,292 @@
+@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;
 }
 
-.tooltip-content {
+.tooltip-container {
-  background-color: #1e1e1e;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  color: white;
+  font-family: var(--font-family-content);
-  padding: 8px 12px;
+  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;
   border-radius: 4px;
-  font-size: 13px;
   max-width: 250px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   pointer-events: none;
-  animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
+  overflow: hidden;
+  animation: tooltip-fade 0.33s cubic-bezier(0, 0, 0.2, 1);
 }
 
 @keyframes tooltip-fade {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["qd-plain-tooltip.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;EACA;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"}

projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss

@@ -1,17 +1,21 @@
+@use '../../styles/qd_design_system' as qd;
+
 :host {
   display: block;
 }
-.tooltip-content {
-  background-color: #1e1e1e;
-  color: white;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 13px;
-  max-width: 250px;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
-  pointer-events: none;
 
-  animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
+.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;
+  border-radius: 4px;
+  max-width: 250px;
+  pointer-events: none;
+  overflow: hidden;
+
+  animation: tooltip-fade 0.33s cubic-bezier(0, 0, 0.2, 1);
 }
 
 @keyframes tooltip-fade {

projects/qd-design/src/public-api.ts

@@ -2,5 +2,19 @@
  * Public API Surface of qd-design
  */
 
+// Components
 export * from './lib/qd-button/qd-button';
+export * from './lib/qd-card/qd-card';
+export * from './lib/qd-icon/qd-icon';
+export * from './lib/qd-icon-button/qd-icon-button';
+export * from './lib/qd-input-file/qd-input-file';
+export * from './lib/qd-input-password/qd-input-password';
+export * from './lib/qd-input-text/qd-input-text';
+export * from './lib/qd-plain-tooltip/qd-plain-tooltip';
+
+// Directives
 export * from './directives/qd-button-variant';
+export * from './directives/qd-card-variant';
+export * from './directives/qd-icon-button-variant';
+export * from './directives/qd-tooltip-directive';
+

projects/qd-design/src/styles/qd_design_system.scss

@@ -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) {

projects/qd-design/src/styles/typography/typography.module.scss

@@ -1,164 +1,119 @@
-.display-large {
+@mixin display-large {
-  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-family: var(--font-family-title);
-  font-size: var(--md-sys-typescale-display-large-font-size);
+  font-size: var(--display-large-font-size);
-  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--display-large-font-weight);
-  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  letter-spacing: var(--display-large-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  line-height: var(--display-large-line-height);
-  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 {
+@mixin display-medium {
-  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-family: var(--font-family-title);
-  font-size: var(--md-sys-typescale-display-medium-font-size);
+  font-size: var(--display-medium-font-size);
-  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--display-medium-font-weight);
-  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  letter-spacing: var(--display-medium-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  line-height: var(--display-medium-line-height);
-  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 {
+@mixin display-small {
-  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-family: var(--font-family-title);
-  font-size: var(--md-sys-typescale-display-small-font-size);
+  font-size: var(--display-small-font-size);
-  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--display-small-font-weight);
-  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  letter-spacing: var(--display-small-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  line-height: var(--display-small-line-height);
-  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 {
+@mixin headline-large {
-  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-family: var(--font-family-title);
-  font-size: var(--md-sys-typescale-headline-large-font-size);
+  font-size: var(--headline-large-font-size);
-  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--headline-large-font-weight);
-  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  letter-spacing: var(--headline-large-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  line-height: var(--headline-large-line-height);
-  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 {
+@mixin headline-medium {
-  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-family: var(--font-family-title);
-  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  font-size: var(--headline-medium-font-size);
-  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--headline-medium-font-weight);
-  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  letter-spacing: var(--headline-medium-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  line-height: var(--headline-medium-line-height);
-  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 {
+@mixin headline-small {
-  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-family: var(--font-family-title);
-  font-size: var(--md-sys-typescale-headline-small-font-size);
+  font-size: var(--headline-small-font-size);
-  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--headline-small-font-weight);
-  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  letter-spacing: var(--headline-small-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  line-height: var(--headline-small-line-height);
-  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 {
+@mixin body-large {
-  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-body-large-font-size);
+  font-size: var(--body-large-font-size);
-  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--body-large-font-weight);
-  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  letter-spacing: var(--body-large-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  line-height: var(--body-large-line-height);
-  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 {
+@mixin body-medium {
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
+  font-size: var(--body-medium-font-size);
-  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--body-medium-font-weight);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  letter-spacing: var(--body-medium-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--body-medium-line-height);
-  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 {
+@mixin body-small {
-  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-body-small-font-size);
+  font-size: var(--body-small-font-size);
-  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--body-small-font-weight);
-  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  letter-spacing: var(--body-small-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  line-height: var(--body-small-line-height);
-  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 {
+@mixin label-large {
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-label-large-font-size);
+  font-size: var(--label-large-font-size);
-  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--label-large-font-weight);
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  letter-spacing: var(--label-large-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  line-height: var(--label-large-line-height);
-  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 {
+@mixin label-medium {
-  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-label-medium-font-size);
+  font-size: var(--label-medium-font-size);
-  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--label-medium-font-weight);
-  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  letter-spacing: var(--label-medium-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  line-height: var(--label-medium-line-height);
-  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 {
+@mixin label-small {
-  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-label-small-font-size);
+  font-size: var(--label-small-font-size);
-  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--label-small-font-weight);
-  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  letter-spacing: var(--label-small-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  line-height: var(--label-small-line-height);
-  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 {
+@mixin title-large {
-  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-title-large-font-size);
+  font-size: var(--title-large-font-size);
-  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--title-large-font-weight);
-  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  letter-spacing: var(--title-large-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  line-height: var(--title-large-line-height);
-  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 {
+@mixin title-medium {
-  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-title-medium-font-size);
+  font-size: var(--title-medium-font-size);
-  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--title-medium-font-weight);
-  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  letter-spacing: var(--title-medium-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  line-height: var(--title-medium-line-height);
-  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 {
+@mixin title-small {
-  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-family: var(--font-family-content);
-  font-size: var(--md-sys-typescale-title-small-font-size);
+  font-size: var(--title-small-font-size);
-  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--title-small-font-weight);
-  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  letter-spacing: var(--title-small-letter-spacing);
-  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  line-height: var(--title-small-line-height);
-  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);
 }

projects/qd-design/src/styles/typography/typography.token.scss

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