feat(core): font rework (#713)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Aug 22, 2023 · 6cc51f6 · 6cc51f6
1 parent 01d9f4f
commit 6cc51f6
Show file tree

Hide file tree

Showing 149 changed files with 1,445 additions and 326 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -2098,6 +2098,28 @@ export declare interface IxTreeItem extends Components.IxTreeItem {
 }
 
 
+@ProxyCmp({
+  inputs: ['bold', 'color', 'format', 'textDecoration']
+})
+@Component({
+  selector: 'ix-typography',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['bold', 'color', 'format', 'textDecoration'],
+})
+export class IxTypography {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IxTypography extends Components.IxTypography {}
+
+
 @ProxyCmp({
   inputs: ['accept', 'disabled', 'i18nUploadDisabled', 'i18nUploadFile', 'loadingText', 'multiline', 'multiple', 'selectFileText', 'state', 'uploadFailedText', 'uploadSuccessText'],
   methods: ['setFilesToUpload']

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -81,6 +81,7 @@ export const DIRECTIVES = [
   d.IxToggleButton,
   d.IxTooltip,
   d.IxTreeItem,
+  d.IxTypography,
   d.IxUpload,
   d.IxValidationTooltip,
   d.IxWorkflowStep,

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -10827,6 +10827,205 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "dirPath": "./src/components/typography",
+      "filePath": "./src/components/typography/typography.tsx",
+      "fileName": "typography.tsx",
+      "readmePath": "./src/components/typography/readme.md",
+      "usagesDir": "./src/components/typography/usage",
+      "tag": "ix-typography",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "2.0.0"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [
+        "ix-action-card",
+        "ix-card-list",
+        "ix-content-header",
+        "ix-dropdown-header",
+        "ix-empty-state",
+        "ix-menu-about-news",
+        "ix-menu-category",
+        "ix-modal-header",
+        "ix-pagination",
+        "ix-push-card",
+        "ix-time-picker",
+        "ix-tooltip"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "ix-action-card": [
+          "ix-typography"
+        ],
+        "ix-card-list": [
+          "ix-typography"
+        ],
+        "ix-content-header": [
+          "ix-typography"
+        ],
+        "ix-dropdown-header": [
+          "ix-typography"
+        ],
+        "ix-empty-state": [
+          "ix-typography"
+        ],
+        "ix-menu-about-news": [
+          "ix-typography"
+        ],
+        "ix-menu-category": [
+          "ix-typography"
+        ],
+        "ix-modal-header": [
+          "ix-typography"
+        ],
+        "ix-pagination": [
+          "ix-typography"
+        ],
+        "ix-push-card": [
+          "ix-typography"
+        ],
+        "ix-time-picker": [
+          "ix-typography"
+        ],
+        "ix-tooltip": [
+          "ix-typography"
+        ]
+      },
+      "props": [
+        {
+          "name": "bold",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "bold",
+          "reflectToAttr": false,
+          "docs": "Display text bold",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "\"alarm\" | \"contrast\" | \"inv-contrast\" | \"inv-soft\" | \"inv-std\" | \"inv-weak\" | \"soft\" | \"std\" | \"weak\"",
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "Text color based on theme variables",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "alarm",
+              "type": "string"
+            },
+            {
+              "value": "contrast",
+              "type": "string"
+            },
+            {
+              "value": "inv-contrast",
+              "type": "string"
+            },
+            {
+              "value": "inv-soft",
+              "type": "string"
+            },
+            {
+              "value": "inv-std",
+              "type": "string"
+            },
+            {
+              "value": "inv-weak",
+              "type": "string"
+            },
+            {
+              "value": "soft",
+              "type": "string"
+            },
+            {
+              "value": "std",
+              "type": "string"
+            },
+            {
+              "value": "weak",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "TypographyFormatLabel | TypographyFormatBody | TypographyFormatDisplay | TypographyFormatHeading | TypographyFormatCode",
+          "mutable": false,
+          "attr": "format",
+          "reflectToAttr": false,
+          "docs": "Text format",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "TypographyFormatLabel"
+            },
+            {
+              "type": "TypographyFormatBody"
+            },
+            {
+              "type": "TypographyFormatDisplay"
+            },
+            {
+              "type": "TypographyFormatHeading"
+            },
+            {
+              "type": "TypographyFormatCode"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "textDecoration",
+          "type": "\"line-through\" | \"none\" | \"underline\"",
+          "mutable": false,
+          "attr": "text-decoration",
+          "reflectToAttr": false,
+          "docs": "Text decoration",
+          "docsTags": [],
+          "default": "'none'",
+          "values": [
+            {
+              "value": "line-through",
+              "type": "string"
+            },
+            {
+              "value": "none",
+              "type": "string"
+            },
+            {
+              "value": "underline",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/upload",
       "filePath": "./src/components/upload/upload.tsx",

diff --git a/packages/core/scss/components/_fonts.scss b/packages/core/scss/components/_fonts.scss
@@ -0,0 +1,131 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@import 'mixins/font';
+
+@mixin font-label {
+  .typography-label {
+    @include typography-label;
+  }
+
+  .typography-label-xs {
+    @include typography-label-xs;
+  }
+
+  .typography-label-sm {
+    @include typography-label-sm;
+  }
+
+  .typography-label-lg {
+    @include typography-label-lg;
+  }
+
+  .typography-body {
+    @include typography-body;
+  }
+
+  .typography-body-xs {
+    @include typography-body-xs;
+  }
+
+  .typography-body-sm {
+    @include typography-body-sm;
+  }
+
+  .typography-body-lg {
+    @include typography-body-lg;
+  }
+
+  .typography-display {
+    @include typography-display;
+  }
+
+  .typography-display-xs {
+    @include typography-display-xs;
+  }
+
+  .typography-display-sm {
+    @include typography-display-sm;
+  }
+
+  .typography-display-lg {
+    @include typography-display-lg;
+  }
+
+  .typography-display-xl {
+    @include typography-display-xl;
+  }
+
+  .typography-display-xxl {
+    @include typography-display-xxl;
+  }
+
+  h6,
+  .typography-h6 {
+    @include typography-h6;
+  }
+
+  h5,
+  .typography-h5 {
+    @include typography-h5;
+  }
+
+  h4,
+  .typography-h4 {
+    @include typography-h4;
+  }
+
+  h3,
+  .typography-h3 {
+    @include typography-h3;
+  }
+
+  h2,
+  .typography-h2 {
+    @include typography-h2;
+  }
+
+  h1,
+  .typography-h1 {
+    @include typography-h1;
+  }
+
+  .typography-code {
+    @include typography-code;
+  }
+
+  .typography-code-lg {
+    @include typography-code-lg;
+  }
+
+  .typography-code-sm {
+    @include typography-code-sm;
+  }
+
+  .typography-decoration-none {
+    text-decoration: none !important;
+  }
+
+  .typography-decoration-underline {
+    text-decoration: underline !important;
+  }
+
+  .typography-decoration-line-through {
+    text-decoration: line-through !important;
+  }
+
+  .typography-weight-bold {
+    font-weight: 700 !important;
+  }
+
+  a {
+    color: var(--theme-color-primary);
+  }
+}
+
+@include font-label();
diff --git a/packages/core/scss/components/_table.scss b/packages/core/scss/components/_table.scss
@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-@import 'mixins/fonts';
+@import 'legacy/mixins/fonts';
 
 .table {
   @include text-default;