feat: UIG-3123 - vl-title-next, vl-form-label-next - styling stuurbaa…

…r gemaakt

De CSS van vl-form-label-next gemigreerd.
Custom variables voorzien voor de h2 van de `vl-title-next` om gepaste styling te kunnen aanbieden.
Cypress testen uitgebreid.

libs/common/utilities/src/css/mixin/title.mixin.css.ts

@@ -1,82 +1,82 @@
-import { CSSResult, css } from 'lit';
+import { css, CSSResult } from 'lit';
 import { mediaQueryMedium, mediaQuerySmall } from './media-queries.mixin.css';
 
 const titleSizes = {
     1: css`
-        font-size: 4.4rem;
+        font-size: var(--vl-h1-font-size);
         margin-bottom: 6rem;
         line-height: 1.18;
 
         ${mediaQueryMedium(
             css`
-                font-size: 4rem;
+                font-size: var(--vl-h1-font-size-medium);
                 margin-bottom: 4.5rem;
             `
         )}
 
         ${mediaQuerySmall(
             css`
-                font-size: 3rem;
+                font-size: var(--vl-h1-font-size-small);
                 margin-bottom: 3rem;
             `
         )}
     `,
     2: css`
-        font-size: 3.2rem;
+        font-size: var(--vl-h2-font-size);
         margin-bottom: 2rem;
         line-height: 1.24;
 
         ${mediaQuerySmall(
             css`
-                font-size: 2.6rem;
+                font-size: var(--vl-h2-font-size-small);
                 margin-bottom: 1.5rem;
             `
         )}
     `,
     3: css`
-        font-size: 2.6rem;
+        font-size: var(--vl-h3-font-size);
         margin-bottom: 2rem;
         line-height: 1.3;
 
         ${mediaQuerySmall(
             css`
-                font-size: 2.2rem;
+                font-size: var(--vl-h3-font-size-small);
                 margin-bottom: 1.5rem;
             `
         )}
     `,
     4: css`
-        font-size: 2.2rem;
+        font-size: var(--vl-h4-font-size);
         margin-bottom: 1.8rem;
         line-height: 1.36;
 
         ${mediaQuerySmall(
             css`
-                font-size: 2rem;
+                font-size: var(--vl-h4-font-size-small);
                 margin-bottom: 1.4rem;
             `
         )}
     `,
     5: css`
-        font-size: 2rem;
+        font-size: var(--vl-h5-font-size);
         margin-bottom: 1.6rem;
         line-height: 1.4;
 
         ${mediaQuerySmall(
             css`
-                font-size: 1.8rem;
+                font-size: var(--vl-h5-font-size-small);
                 margin-bottom: 1.2rem;
             `
         )}
     `,
     6: css`
-        font-size: 1.8rem;
+        font-size: var(--vl-h6-font-size);
         margin-bottom: 1.4rem;
         line-height: 1.44;
 
         ${mediaQuerySmall(
             css`
-                font-size: 1.8rem;
+                font-size: var(--vl-h6-font-size-small);
                 margin-bottom: 1rem;
             `
         )}

libs/common/utilities/src/css/vars/general.var.css.ts

@@ -1,8 +1,31 @@
-import { CSSResult, css } from 'lit';
+import { css, CSSResult } from 'lit';
 
 const styles: CSSResult = css`
     :root {
         --vl-border-radius: 0.3rem;
+
+        --vl-label-font-weight: 500;
+        --vl-label-font-size: 1.6rem;
+        --vl-label-font-size-small: 1.6rem;
+
+        --vl-h1-font-size: 4.4rem;
+        --vl-h1-font-size-medium: 4rem;
+        --vl-h1-font-size-small: 3rem;
+
+        --vl-h2-font-size: 3.2rem;
+        --vl-h2-font-size-small: 2.6rem;
+
+        --vl-h3-font-size: 2.6rem;
+        --vl-h3-font-size-small: 2.2rem;
+
+        --vl-h4-font-size: 2.2rem;
+        --vl-h4-font-size-small: 2rem;
+
+        --vl-h5-font-size: 2rem;
+        --vl-h5-font-size-small: 1.8rem;
+
+        --vl-h6-font-size: 1.8rem;
+        --vl-h6-font-size-small: 1.8rem;
     }
 `;
 

libs/form/src/next/form-label/vl-form-label.component.cy.ts

@@ -28,7 +28,7 @@ describe('component - vl-form-label-next', () => {
     it('should set label', () => {
         cy.mount(html`<vl-form-label-next label="Naam"></vl-form-label-next>`);
 
-        cy.get('vl-form-label-next').shadow().find('label').should('have.text', 'Naam');
+        cy.get('vl-form-label-next').shadow().find('label').contains('Naam');
     });
 
     it('should set block', () => {

libs/form/src/next/form-label/vl-form-label.component.ts

@@ -1,10 +1,12 @@
 import { BaseLitElement, webComponent } from '@domg-wc/common-utilities';
+import { globalStylesNext } from '@domg-wc/common-utilities/css/global-styles-decorator';
 import { resetStyle } from '@domg/govflanders-style/common';
-import { formMessageStyle } from '@domg/govflanders-style/component';
 import { CSSResult, html, PropertyDeclarations, TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { formLabelStyles } from './vl-form-label.css';
 import { formLabelDefaults } from './vl-form-label.defaults';
 
+@globalStylesNext()
 @webComponent('vl-form-label-next')
 export class VlFormLabelComponent extends BaseLitElement {
     // Attributes
@@ -14,7 +16,7 @@ export class VlFormLabelComponent extends BaseLitElement {
     private light = formLabelDefaults.light;
 
     static get styles(): CSSResult[] {
-        return [resetStyle, formMessageStyle];
+        return [resetStyle, formLabelStyles];
     }
 
     static get properties(): PropertyDeclarations {
@@ -54,7 +56,7 @@ export class VlFormLabelComponent extends BaseLitElement {
             'vl-form__label--light': this.light,
         };
 
-        return html`<label for=${this.for} class=${classMap(classList)}>${this.label}</label>`;
+        return html` <label for=${this.for} class=${classMap(classList)} part="label"> ${this.label} </label> `;
     }
 
     private getFormControl(): HTMLElement | null {

libs/form/src/next/form-label/vl-form-label.css.ts

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+
+export const formLabelStyles = css`
+    .vl-form__label {
+        font-size: var(--vl-label-font-size);
+        font-weight: var(--vl-label-font-weight);
+        color: #4d4d4b;
+        display: inline-block;
+        line-height: 1;
+        margin-right: 0.5rem;
+        margin-bottom: 0.7rem;
+    }
+
+    @media screen and (max-width: 767px) {
+        .vl-form__label {
+            /* font-size is hetzelfde als de body font-size; overgenomen van DV */
+            font-size: var(--vl-label-font-size);
+        }
+    }
+
+    .vl-form__label--block {
+        display: block;
+        margin-right: 0;
+        margin-bottom: 0.7rem;
+    }
+
+    .vl-form__label--offset {
+        margin-top: 1rem;
+    }
+
+    .vl-form__label--light {
+        color: #687483;
+    }
+
+    .vl-form__label__message {
+        font-weight: normal;
+        color: #687483;
+        font-size: var(--vl-label-font-size-small);
+        line-height: 2rem;
+    }
+
+    .vl-form__label--standalone {
+        margin-bottom: 0;
+    }
+`;