valtech-components 2.0.8 → 2.0.9

package/src/lib/components/styles/typography.scss

@@ -0,0 +1,189 @@
+@import './variables.scss';
+@import './functions.scss';
+@import './media-queries.scss';
+
+@mixin text($fontSize, $lineHeight, $fontSizeMobile, $lineHeightMobile, $fontWeight) {
+  font-size: pxToRem($fontSizeMobile);
+  line-height: pxToRem($lineHeightMobile);
+  font-weight: $fontWeight;
+
+  @include media-medium {
+    font-size: pxToRem($fontSize);
+    line-height: pxToRem($lineHeight);
+  }
+}
+
+@mixin display-xlarge {
+  @include text(
+    $font-size-display-xlarge,
+    $line-height-display-xlarge,
+    $font-size-display-xlarge-responsive,
+    $line-height-display-xlarge-responsive,
+    $font-weight-extra-bold
+  );
+}
+
+@mixin display-large {
+  @include text(
+    $font-size-display-large,
+    $line-height-display-large,
+    $font-size-display-large-responsive,
+    $line-height-display-large-responsive,
+    $font-weight-extra-bold
+  );
+}
+
+@mixin display-medium {
+  @include text(
+    $font-size-display-medium,
+    $line-height-display-medium,
+    $font-size-display-medium-responsive,
+    $line-height-display-medium-responsive,
+    $font-weight-extra-bold
+  );
+}
+
+@mixin display-small {
+  @include text(
+    $font-size-display-small,
+    $line-height-display-small,
+    $font-size-display-small-responsive,
+    $line-height-display-small-responsive,
+    $font-weight-extra-bold
+  );
+}
+
+@mixin title-large {
+  @include text(
+    $font-size-title-large,
+    $line-height-title-large,
+    $font-size-title-large-responsive,
+    $line-height-title-large-responsive,
+    $font-weight-bold
+  );
+}
+
+@mixin title-medium {
+  @include text(
+    $font-size-title-medium,
+    $line-height-title-medium,
+    $font-size-title-medium-responsive,
+    $line-height-title-medium-responsive,
+    $font-weight-bold
+  );
+}
+
+@mixin title-small {
+  @include text(
+    $font-size-title-small,
+    $line-height-title-small,
+    $font-size-title-small-responsive,
+    $line-height-title-small-responsive,
+    $font-weight-bold
+  );
+}
+
+@mixin body-xlarge {
+  @include text(
+    $font-size-body-xlarge,
+    $line-height-body-xlarge,
+    $font-size-body-xlarge-responsive,
+    $line-height-body-xlarge-responsive,
+    $font-weight-regular
+  );
+}
+
+@mixin body-xlarge-bold {
+  @include text(
+    $font-size-body-xlarge,
+    $line-height-body-xlarge,
+    $font-size-body-xlarge-responsive,
+    $line-height-body-xlarge-responsive,
+    $font-weight-bold
+  );
+}
+
+@mixin body-large {
+  @include text(
+    $font-size-body-large,
+    $line-height-body-large,
+    $font-size-body-large-responsive,
+    $line-height-body-large-responsive,
+    $font-weight-regular
+  );
+}
+
+@mixin body-large-bold {
+  @include text(
+    $font-size-body-large,
+    $line-height-body-large,
+    $font-size-body-large-responsive,
+    $line-height-body-large-responsive,
+    $font-weight-bold
+  );
+}
+
+@mixin body-medium {
+  @include text(
+    $font-size-body-medium,
+    $line-height-body-medium,
+    $font-size-body-medium-responsive,
+    $line-height-body-medium-responsive,
+    $font-weight-regular
+  );
+}
+
+@mixin body-medium-bold {
+  @include text(
+    $font-size-body-medium,
+    $line-height-body-medium,
+    $font-size-body-medium-responsive,
+    $line-height-body-medium-responsive,
+    $font-weight-bold
+  );
+}
+
+@mixin body-small {
+  font-size: pxToRem($font-size-body-small-responsive);
+  line-height: pxToRem($line-height-body-small);
+  font-weight: $font-weight-regular;
+}
+
+@mixin body-small-bold {
+  font-size: pxToRem($font-size-body-small-responsive);
+  line-height: pxToRem($line-height-body-small);
+  font-weight: $font-weight-bold;
+}
+
+@mixin caption {
+  font-size: pxToRem($font-size-body-small-responsive);
+  line-height: pxToRem($line-height-body-small);
+  font-weight: $font-weight-regular;
+}
+
+@mixin section-title {
+  @include text(
+    $font-size-display-medium,
+    $line-height-display-medium,
+    $font-size-title-large,
+    $line-height-title-large,
+    $font-weight-extra-bold
+  );
+  color: $color-title;
+}
+
+@mixin header-subtitle-no-responsive {
+  font-size: pxToRem($font-size-body-large);
+  line-height: pxToRem($line-height-body-large);
+}
+
+@mixin header-subtitle {
+  font-size: pxToRem($font-size-body-large-responsive);
+  line-height: pxToRem($line-height-body-large-responsive);
+  font-weight: $font-weight-regular;
+  font-style: italic;
+
+  @include media-medium {
+    @include header-subtitle-no-responsive;
+  }
+}

package/src/lib/components/styles/variables.scss

@@ -0,0 +1,82 @@
+$size-base: 16;
+/* FONT STYLES */
+
+$font-size: $size-base + px;
+$font-size-mobile: 14px;
+
+$font-weight-extra-light: 200;
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;
+$font-weight-extra-bold: 800;
+$font-weight-black: 900;
+
+$font-size-display-xlarge: 56;
+$font-size-display-xlarge-responsive: 48;
+$font-size-display-large: 48;
+$font-size-display-large-responsive: 40;
+$font-size-display-medium: 40;
+$font-size-display-medium-responsive: 32;
+$font-size-display-small: 32;
+$font-size-display-small-responsive: 24;
+$font-size-title-large: 24;
+$font-size-title-large-responsive: 18;
+$font-size-title-medium: 18;
+$font-size-title-medium-responsive: 16;
+$font-size-title-small: 16;
+$font-size-title-small-responsive: 14;
+$font-size-body-xlarge: 24;
+$font-size-body-xlarge-responsive: 18;
+$font-size-body-large: 18;
+$font-size-body-large-responsive: 16;
+$font-size-body-medium: 16;
+$font-size-body-medium-responsive: 14;
+$font-size-body-small: 14;
+$font-size-body-small-responsive: 12;
+
+$line-height-display-xlarge: 64;
+$line-height-display-xlarge-responsive: 56;
+$line-height-display-large: 56;
+$line-height-display-large-responsive: 48;
+$line-height-display-medium: 48;
+$line-height-display-medium-responsive: 40;
+$line-height-display-small: 40;
+$line-height-display-small-responsive: 32;
+$line-height-title-large: 32;
+$line-height-title-large-responsive: 24;
+$line-height-title-medium: 24;
+$line-height-title-medium-responsive: 24;
+$line-height-title-small: 24;
+$line-height-title-small-responsive: 24;
+$line-height-body-xlarge: 32;
+$line-height-body-xlarge-responsive: 24;
+$line-height-body-large: 24;
+$line-height-body-large-responsive: 24;
+$line-height-body-medium: 24;
+$line-height-body-medium-responsive: 24;
+$line-height-body-small: 20;
+
+/* SIZES */
+
+$icon-size-small: 16;
+$icon-size-medium: 24;
+$icon-size-large: 32;
+$icon-size-xlarge: 40;
+
+$container-max-xlarge: 1200;
+$container-max-large: 960;
+$container-max-medium: 720;
+$container-max-small: 540;
+
+$border-radius-small: 8;
+$border-radius: 12;
+
+/* COLORS */
+$color-classic-white: #ffffff;
+$color-alternative-white: #f5f7fa;
+$color-default-hr: #878ca0;
+$color-default-border: #dde3ed;
+$color-default-shadow: #121954;
+$color-default-placeholder: #afbacc;

package/esm2022/lib/components/hello-world/hello-world.component.mjs

@@ -1,20 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import * as i0 from "@angular/core";
-export class HelloWorldComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HelloWorldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HelloWorldComponent, isStandalone: true, selector: "val-hello-world", ngImport: i0, template: `
-    <p>
-      hello-world works!
-    </p>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HelloWorldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hello-world', standalone: true, imports: [CommonModule], template: `
-    <p>
-      hello-world works!
-    </p>
-  ` }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVsbG8td29ybGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGVjaC1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9oZWxsby13b3JsZC9oZWxsby13b3JsZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBYTFDLE1BQU0sT0FBTyxtQkFBbUI7K0dBQW5CLG1CQUFtQjttR0FBbkIsbUJBQW1CLDJFQVBwQjs7OztHQUlULHlFQUxTLFlBQVk7OzRGQVFYLG1CQUFtQjtrQkFYL0IsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsWUFDYjs7OztHQUlUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YWwtaGVsbG8td29ybGQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8cD5cbiAgICAgIGhlbGxvLXdvcmxkIHdvcmtzIVxuICAgIDwvcD5cbiAgYCxcbiAgc3R5bGVzOiBgYFxufSlcbmV4cG9ydCBjbGFzcyBIZWxsb1dvcmxkQ29tcG9uZW50IHtcblxufVxuIl19

package/lib/components/hello-world/hello-world.component.d.ts

@@ -1,5 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class HelloWorldComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<HelloWorldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HelloWorldComponent, "val-hello-world", never, {}, {}, never, never, true, never>;
-}