feat: add styles for angular material and common override

ui-particles-angular/.storybook/index.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../projects/ui-particles-angular/src' as gio;
+
+$background: map.get(gio.$mat-theme, background);
+$typography: map.get(gio.$mat-theme, typography);
+
+@include gio.mat-theme();
+
+/**
+ * Reset `box-sizing` for all elements
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}

ui-particles-angular/.storybook/preview.ts

@@ -0,0 +1,2 @@
+// Set material classes to the Storybook root div
+window.document.getElementById('root')?.classList.add('mat-typography');

ui-particles-angular/projects/ui-particles-angular/src/index.scss

@@ -0,0 +1 @@
+@forward './scss/index.scss';

ui-particles-angular/projects/ui-particles-angular/src/scss/gio-mat-palettes.scss

@@ -0,0 +1,103 @@
+@use '@angular/material' as mat;
+
+// Primary
+$mat-primary-palette: mat.define-palette(
+  (
+    dark: hsl(236, 50%, 7%),
+    medium: hsl(236, 38%, 17%),
+    light: hsl(220, 38%, 27%),
+    contrast: (
+      dark: #fff,
+      medium: #fff,
+      light: #fff,
+    ),
+  ),
+  medium,
+  light,
+  dark
+);
+
+// Accent
+$mat-accent-palette: mat.define-palette(
+  (
+    dark: hsl(183, 75%, 37%),
+    medium: hsl(183, 75%, 47%),
+    light: hsl(183, 75%, 57%),
+    contrast: (
+      dark: #000,
+      medium: #000,
+      light: #000,
+    ),
+  ),
+  medium,
+  light,
+  dark
+);
+
+// Info color
+$mat-info-palette: mat.define-palette(
+  (
+    dark: #1045a1,
+    default: #2196f3,
+    light: #bbdefb,
+    contrast: (
+      dark: #262626,
+      medium: #262626,
+      light: #262626,
+    ),
+  ),
+  medium,
+  light,
+  dark
+);
+
+// Success color
+$mat-success-palette: mat.define-palette(
+  (
+    dark: hsl(118, 39%, 40%),
+    medium: hsl(122, 39%, 50%),
+    light: hsl(126, 39%, 65%),
+    contrast: (
+      dark: #fff,
+      medium: #fff,
+      light: #fff,
+    ),
+  ),
+  medium,
+  light,
+  dark
+);
+
+// Warning color
+$mat-warning-palette: mat.define-palette(
+  (
+    dark: hsl(30, 100%, 48%),
+    medium: hsl(34, 100%, 50%),
+    light: hsl(38, 100%, 65%),
+    contrast: (
+      dark: #000,
+      medium: #000,
+      light: #000,
+    ),
+  ),
+  medium,
+  light,
+  dark
+);
+
+// Error color
+$mat-error-palette: mat.define-palette(
+  (
+    dark: hsl(356, 80%, 40%),
+    medium: hsl(360, 80%, 50%),
+    light: hsl(4, 80%, 65%),
+    contrast: (
+      dark: #eee,
+      medium: #eee,
+      light: #000,
+    ),
+  ),
+  medium,
+  light,
+  dark
+);

ui-particles-angular/projects/ui-particles-angular/src/scss/gio-mat-theme-variable.scss

@@ -0,0 +1,31 @@
+@use '@angular/material' as mat;
+
+@use './gio-mat-palettes' as palettes;
+
+$mat-typography: mat.define-typography-config(
+  $font-family: '"Libre Franklin", Roboto, "Helvetica Neue", sans-serif',
+  $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
+  $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $display-1: mat.define-typography-level(34px, 40px, 400),
+  $headline: mat.define-typography-level(24px, 32px, 400),
+  $title: mat.define-typography-level(20px, 32px, 500),
+  $subheading-2: mat.define-typography-level(16px, 28px, 400),
+  $subheading-1: mat.define-typography-level(15px, 24px, 400),
+  $body-2: mat.define-typography-level(14px, 24px, 500),
+  $body-1: mat.define-typography-level(14px, 20px, 400),
+  $caption: mat.define-typography-level(13px, 20px, 400),
+  $button: mat.define-typography-level(14px, 14px, 500),
+  $input: mat.define-typography-level(inherit, 1.125, 400),
+);
+
+$mat-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: palettes.$mat-primary-palette,
+      accent: palettes.$mat-accent-palette,
+      warn: palettes.$mat-error-palette,
+    ),
+    typography: $mat-typography,
+  )
+);

ui-particles-angular/projects/ui-particles-angular/src/scss/gio-mat-theme.scss

@@ -0,0 +1,16 @@
+@use '@angular/material' as mat;
+
+@use './gio-mat-theme-variable' as theme-variable;
+
+@use './mat-override' as override;
+
+// Config material theme with gio theme
+@mixin mat-theme() {
+  @include mat.core(theme-variable.$mat-typography);
+  @include mat.all-component-themes(theme-variable.$mat-theme);
+
+  // Gio overrides
+  @include override.mat-form-field();
+  @include override.mat-table();
+  @include override.mat-card();
+}

ui-particles-angular/projects/ui-particles-angular/src/scss/index.scss

@@ -0,0 +1,6 @@
+@forward './gio-mat-palettes' show $mat-primary-palette, $mat-accent-palette, $mat-info-palette, $mat-success-palette, $mat-warning-palette,
+  $mat-error-palette;
+
+@forward './gio-mat-theme-variable' show $mat-theme, $mat-typography;
+
+@forward './gio-mat-theme' show mat-theme;

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/index.scss

@@ -0,0 +1,3 @@
+@forward 'mat-form-field';
+@forward 'mat-table';
+@forward 'mat-card';

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/mat-card.scss

@@ -0,0 +1,7 @@
+@use '@angular/material' as mat;
+
+@mixin mat-card() {
+  .mat-card:not(.mat-card .mat-card):not([class*='mat-elevation-z']) {
+    @include mat.elevation(3);
+  }
+}

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/mat-card.stories.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Story } from '@storybook/angular/dist/ts3.9/client/preview/types-7-0';
+import { MatCardModule } from '@angular/material/card';
+
+export default {
+  title: 'Material Override',
+  decorators: [
+    moduleMetadata({
+      imports: [MatCardModule],
+    }),
+  ],
+  render: () => ({}),
+} as Meta;
+
+export const MatCard: Story = {
+  render: () => ({
+    template: `
+      <p>
+        Default elevation
+      </p>
+      
+      <mat-card>
+        Default elevation is 3
+        <br>
+
+        <mat-card>
+          MatCard inside MatCard keep elevation to lvl 1 by default
+        </mat-card>
+        <br>
+        <mat-card class="mat-elevation-z2">
+          MatCard inside MatCard with custom elevation to lvl 2
+        </mat-card>
+      </mat-card>
+    `,
+  }),
+};

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/mat-form-field.scss

@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+
+@use '../gio-mat-theme-variable' as theme;
+
+@mixin mat-form-field() {
+  .mat-form-field {
+    .mat-hint,
+    .mat-error {
+      font-size: mat.font-size(theme.$mat-typography, caption);
+    }
+  }
+}

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/mat-form-field.stories.ts

@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { Story } from '@storybook/angular/dist/ts3.9/client/preview/types-7-0';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatCardModule } from '@angular/material/card';
+
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+
+export default {
+  title: 'Material Override',
+  decorators: [
+    moduleMetadata({
+      imports: [BrowserAnimationsModule, ReactiveFormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatIconModule],
+    }),
+  ],
+  render: () => ({}),
+} as Meta;
+
+export const MatFormField: Story = {
+  render: () => ({
+    template: `
+      <p>
+      "mat-error" and "mat-hint" should have caption font-size
+      </p>
+      
+      <mat-card>
+        <p>
+          <mat-form-field appearance="fill">
+            <mat-label>Legacy form field</mat-label>
+            <input matInput placeholder="Placeholder" />
+            <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
+            <mat-hint>Hint</mat-hint>
+          </mat-form-field>
+        </p>
+        <p>
+          <mat-form-field appearance="standard">
+            <mat-label>Click to see mat-error</mat-label>
+            <input matInput placeholder="Placeholder" required [formControl]="emailFormControl"/>
+            <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+              Please enter a valid email address
+            </mat-error>
+            <mat-error *ngIf="emailFormControl.hasError('required')">
+              Email is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+        </p>
+      </mat-card>
+    `,
+    props: {
+      emailFormControl: new FormControl('', [Validators.required, Validators.email]),
+    },
+  }),
+};

ui-particles-angular/projects/ui-particles-angular/src/scss/mat-override/mat-table.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@use '../gio-mat-theme-variable' as theme;
+
+$background: map.get(theme.$mat-theme, background);
+
+@mixin mat-table() {
+  .mat-table {
+    tbody tr:hover {
+      background-color: mat.get-color-from-palette($background, hover);
+    }
+  }
+}