valtech-components 2.0.7 → 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/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/valtech-components",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-    "assets": [
-    "src/lib/components/styles",
-    "./styles"
-  ]
-}

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

@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'val-hello-world',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <p>
-      hello-world works!
-    </p>
-  `,
-  styles: ``
-})
-export class HelloWorldComponent {
-
-}

package/src/public-api.ts

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of valtech-components
- */
-
-export * from './lib/components/hello-world/hello-world.component';

package/tsconfig.lib.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}