@eui/styles 14.0.6 → 15.0.0-next.2

package/package.json

@@ -9,6 +9,6 @@
     "description": "eUI core styling",
     "author": "ec.europa.eui@gmail.com",
     "license": "EUPL-1.1",
-    "version": "14.0.6",
-    "tag": "latest"
+    "version": "15.0.0-next.2",
+    "tag": "next"
 }

package/src/styles/00-reset/_module.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/00-reset/module';

package/src/styles/02-base/mixins/_ux-clearable-input.scss

@@ -22,7 +22,7 @@
         }
 
         &::before {
-            content: $eui-icon-close-m;
+            // content: $eui-icon-close-m; // TO DO v15 svg remplacement
             font-family: 'eui-icons' !important;
         }
     }

package/src/styles/03-assets/_module.scss

@@ -1 +1,2 @@
-@import '@eui/styles-base/src/styles/05-assets/module';
+@import '@eui/styles-base/src/styles/05-assets/module-icons-svg';
+@import '@eui/styles-base/src/styles/05-assets/module-icons-font';

package/src/styles/05-material/_module.scss

@@ -1,2 +1,2 @@
-@import 'themes/default/module';
-@import 'components/module';
+// @import 'themes/default/module'; // TODO eUI 15 migration
+// @import 'components/module'; // TODO eUI 15 migration

package/src/styles/05-material/themes/default/_variables.scss

@@ -1,9 +1,9 @@
 @import '@angular/material/theming';
 
 // Define the main palette with default and optional lighter and darker hue values
-$eui-t-color-primary: mat-palette($mat-eui-primary, 500, 300, 900);     // $palette-name, $default: 500, $lighter: 100, $darker: 700
-$eui-t-color-accent:  mat-palette($mat-eui-accent, A200, A100, A400);
-$eui-t-color-warn:    mat-palette($mat-eui-danger, 500, A700, 900);     // The warn palette is optional (default: $mat-red)
+$eui-t-color-primary: legacy-mat-palette($mat-eui-primary, 500, 300, 900);     // $palette-name, $default: 500, $lighter: 100, $darker: 700
+$eui-t-color-accent:  legacy-mat-palette($mat-eui-accent, A200, A100, A400);
+$eui-t-color-warn:    legacy-mat-palette($mat-eui-danger, 500, A700, 900);     // The warn palette is optional (default: $mat-red)
 
 // Background palette properties
 $eui-t-color-background: (

package/src/styles/06-shared/_module.scss

@@ -1,253 +1,8 @@
-@import 'eui-inline-edit';      // eUI13+
-@import 'eui-input-maxlength';  // eUI13+ DS aligned
-@import 'inputs-placeholder';   // eUI13 + legacy (common)
-@import 'inputs-maxlength';     // KEEP for legacy
-@import 'inputs-ngvalidation';  // KEEP for legacy
-@import 'flex';
-
-// put here extra overrides for elements - coming after all for a reason
-
-a,
-a:not([href]):not([tabindex]) {
-    color: v(eui-base-color-link);
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-        color: v(eui-base-color-link);
-        text-decoration: underline;
-    }
-}
-
-a {
-    background-color: transparent;
-    text-decoration: none;
-}
-
-a:focus {
-    text-decoration: underline;
-}
-
-p {
-    margin-top: v(eui-base-spacing-m);
-}
-
-table {
-    border: 0 transparent;
-}
-
-:focus {
-    outline: 0;
-}
-
-hr {
-    margin: v(eui-base-spacing-m) 0;
-}
-
-ul {
-    margin-bottom: 0;
-    padding: 0;
-
-    li {
-        list-style: none;
-    }
-}
-
-ul.square {
-    li {
-        list-style-position: inside;
-        list-style-type: square;
-    }
-}
-
-ul.circle {
-    li {
-        list-style-position: inside;
-        list-style-type: circle;
-    }
-}
-
-.tag {
-    font-size: 100%;
-}
-
-sup {
-    font-size: 75%;
-}
-
-
-// HEADINGS
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
-.h7,
-.h8,
-.h9 {
-    @include eui-font-family();
-    color: inherit;
-    // font-family: v(eui-base-font-family);
-    // font-weight: normal;
-}
-
-h1,
-.h1 {
-    @include eui-font(4xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h2,
-.h2 {
-    @include eui-font(3xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h3,
-.h3 {
-    @include eui-font(2xl, ui);
-    line-height: v(eui-base-line-height);
-}
+// @import 'eui-inline-edit';      // eUI13+
+// @import 'eui-input-maxlength';  // eUI13+ DS aligned
+// @import 'inputs-placeholder';   // eUI13 + legacy (common)
+// @import 'inputs-maxlength';     // KEEP for legacy
+// @import 'inputs-ngvalidation';  // KEEP for legacy
 
-h4,
-.h4 {
-    @include eui-font(xl, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h5,
-.h5 {
-    @include eui-font(l, ui);
-    line-height: v(eui-base-line-height);
-}
-
-h6,
-.h6 {
-    @include eui-font(m, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h7,
-.small {
-    @include eui-font(s, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h8,
-.smaller {
-    @include eui-font(xs, ui);
-    line-height: v(eui-base-line-height);
-}
-
-.h9,
-.smallest,
-.tiny {
-    @include eui-font(2xs, ui);
-    line-height: v(eui-base-line-height);
-}
-
-// SHOWCASE
-.inner-title {
-    color: v(eui-base-color-grey-100);
-    font-size: v(eui-base-font-size-l);
-    padding: v(eui-base-spacing-m) 0 v(eui-base-spacing-s) 0;
-    @include eui-font-family-light;
-
-    &.first {
-        padding-top: v(eui-base-spacing-s);
-    }
-}
-
-h1.section-title,
-.section-title.big {
-    border-bottom: 1px solid v(eui-base-color-grey-75);
-    color: v(eui-base-color-primary-100);
-    font-size: v(eui-base-font-size-4xl);
-    margin: v(eui-base-font-size-3xl) 0 v(eui-base-font-size-2xl);
-    padding-bottom: v(eui-base-spacing-m);
-    text-align: center;
-    width: 100%;
-    @include eui-font-family-light;
-
-    &.first {
-        margin-top: v(eui-base-spacing-m);
-    }
-}
-
-h3.section-title {
-    border-bottom: 1px solid v(eui-base-color-grey-25);
-    color: v(eui-base-color-primary-100);
-    font-size: v(eui-base-font-size-3xl);
-    margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
-    padding-bottom: v(eui-base-spacing-s);
-    width: 100%;
-    @include eui-font-family-light;
-
-    &.first {
-        margin-top: v(eui-base-spacing-l);
-    }
-}
-
-h4.section-title,
-h5.section-title,
-.section-title {
-    border-bottom: 1px solid v(eui-base-color-grey-25);
-    color: v(eui-base-color-primary);
-    font-size: v(eui-base-font-size-l);
-    margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
-    padding-bottom: v(eui-base-spacing-s);
-    width: 100%;
-    @include eui-font-family-light;
-
-    &.noborder {
-        border-bottom: none;
-        padding-bottom: v(eui-base-spacing-2xs);
-        margin-bottom: v(eui-base-spacing-m);
-    }
-
-    &.first {
-        margin-top: v(eui-base-spacing-l);
-    }
-}
-
-h6.section-title,
-.section-title.small {
-    color: v(eui-base-color-info-110);
-    display: table;
-    font-family: v(eui-base-font-family);
-    font-size: v(eui-base-font-size-l);
-    font-weight: 500;
-    letter-spacing: -0.25px;
-    margin: v(eui-base-spacing-2xl) 0 v(eui-base-spacing-s);
-    padding-bottom: v(eui-base-spacing-2xs);
-    width: auto;
-
-    &.border {
-        display: block;
-        border-bottom: 1px solid v(eui-base-color-grey-25);
-    }
-
-    &.noborder {
-        border-bottom: none;
-    }
-
-    &.first {
-        margin-top: v(eui-base-spacing-m);
-    }
-}
-
-.section-subtitle {
-    color: v(eui-base-color-grey-50);
-    margin: 0;
-}
-
-abbr[title] {
-    text-decoration: none;  // TODO: underline dotted is the default and recommended usage
-}
+@import 'flex';
+@import 'typography';

package/src/styles/06-shared/_old-to-review/_elements-typography.scss

@@ -0,0 +1,72 @@
+// TODO v15 transfer to own cmp styles for some
+
+a,
+a:not([href]):not([tabindex]) {
+    color: v(eui-base-color-link);
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+        color: v(eui-base-color-link);
+        text-decoration: underline;
+    }
+}
+
+a {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:focus {
+    text-decoration: underline;
+}
+
+p {
+    margin-top: v(eui-base-spacing-m);
+}
+
+table {
+    border: 0 transparent;
+}
+
+:focus {
+    outline: 0;
+}
+
+hr {
+    margin: v(eui-base-spacing-m) 0;
+}
+
+ul {
+    margin-bottom: 0;
+    padding: 0;
+
+    li {
+        list-style: none;
+    }
+}
+
+ul.square {
+    li {
+        list-style-position: inside;
+        list-style-type: square;
+    }
+}
+
+ul.circle {
+    li {
+        list-style-position: inside;
+        list-style-type: circle;
+    }
+}
+
+.tag {
+    font-size: 100%;
+}
+
+sup {
+    font-size: 75%;
+}
+
+
+

package/src/styles/06-shared/_typography.scss

@@ -0,0 +1,84 @@
+// TODO v15 transfer to styles base ?
+
+// HEADINGS
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.h7,
+.h8,
+.h9 {
+    @include eui-font-family();
+    color: inherit;
+    // font-family: v(eui-base-font-family);
+    // font-weight: normal;
+}
+
+h1,
+.h1 {
+    @include eui-font(4xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h2,
+.h2 {
+    @include eui-font(3xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h3,
+.h3 {
+    @include eui-font(2xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h4,
+.h4 {
+    @include eui-font(xl, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h5,
+.h5 {
+    @include eui-font(l, ui);
+    line-height: v(eui-base-line-height);
+}
+
+h6,
+.h6 {
+    @include eui-font(m, ui);
+    line-height: v(eui-base-line-height);
+}
+
+.h7,
+.small {
+    @include eui-font(s, ui);
+    line-height: v(eui-base-line-height);
+}
+
+.h8,
+.smaller {
+    @include eui-font(xs, ui);
+    line-height: v(eui-base-line-height);
+}
+
+.h9,
+.smallest,
+.tiny {
+    @include eui-font(2xs, ui);
+    line-height: v(eui-base-line-height);
+}
+
+
+
+abbr[title] {
+    text-decoration: none;  // TODO: underline dotted is the default and recommended usage
+}

package/src/styles/07-elements/_module-legacy.scss

@@ -1,15 +1,15 @@
 @import 'legacy/form';
 @import 'legacy/form-compact';
-@import 'legacy/inputs';
-@import 'legacy/input-checkbox-default';
-@import 'legacy/input-radio-default';
-@import 'legacy/input-group';
+// @import 'legacy/inputs';
+// @import 'legacy/input-checkbox-default';
+// @import 'legacy/input-radio-default';
+// @import 'legacy/input-group';
 // @import 'legacy/input-placeholders';
-@import 'legacy/ux-control-feedback';
-@import 'legacy/ux-form-control';
-@import 'legacy/ux-form-group';
-@import 'legacy/ux-card';
-@import 'legacy/ux-tree';
+// @import 'legacy/ux-control-feedback';
+// @import 'legacy/ux-form-control';
+// @import 'legacy/ux-form-group';
+// @import 'legacy/ux-card';
+// @import 'legacy/ux-tree';
 
 .label, abbr, blockquote, del, label, mark, p {
     font-size: v(eui-base-font-size);

package/src/styles/07-elements/_module.scss

@@ -1,3 +1,2 @@
 @import '@eui/styles-base/src/styles/04-elements/module';
-
 @import 'eui-table-default/eui-table-default';

package/src/styles/07-elements/legacy/_input-checkbox-default.scss

@@ -91,7 +91,7 @@ table {
         &::after {
             background: transparent;
             color: v(eui-base-color-white);
-            content: $eui-icon-check-m !important;
+            // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
             font-family: eui-icons, sans-serif;
             font-weight: bold;
         }
@@ -129,7 +129,7 @@ table {
         &:checked::after {
             background: transparent;
             color: v(eui-base-color-grey-20);
-            content: $eui-icon-check-m !important;
+            // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
             font-family: eui-icons, sans-serif;
             font-weight: bold;
             position: relative;
@@ -185,7 +185,7 @@ table {
             // The checkbox
             &::after {
                 color: v(eui-base-color-white);
-                content: $eui-icon-check-m !important;
+                // content: $eui-icon-check-m !important; // TO DO v15 svg remplacement
                 font-family: eui-icons, sans-serif;
                 font-weight: bold;
             }
@@ -255,7 +255,7 @@ table {
             &::after {
                 background: transparent;
                 color: v(eui-base-color-white);
-                content: $eui-icon-check-m;
+                // content: $eui-icon-check-m; // TO DO v15 svg remplacement
                 font-family: eui-icons, sans-serif;
                 font-weight: bold;
             }
@@ -352,7 +352,7 @@ table {
                 // The checkbox
                 &::after {
                     color: v(eui-base-color-white);
-                    content: $eui-icon-check-m;
+                    // content: $eui-icon-check-m; // TO DO v15 svg remplacement
                     font-family: eui-icons, sans-serif;
                     font-weight: bold;
                 }

package/src/styles/999-showcase/_module.scss

@@ -1,3 +1,4 @@
 @import 'prism-theme';
 @import 'component-demo-exports';
 @import 'docpage-navigation';
+@import 'specific-typography';

package/src/styles/999-showcase/_specific-typography.scss

@@ -0,0 +1,94 @@
+// SHOWCASE
+.inner-title {
+    color: v(eui-base-color-grey-100);
+    font-size: v(eui-base-font-size-l);
+    padding: v(eui-base-spacing-m) 0 v(eui-base-spacing-s) 0;
+    @include eui-font-family-light;
+
+    &.first {
+        padding-top: v(eui-base-spacing-s);
+    }
+}
+
+h1.section-title,
+.section-title.big {
+    border-bottom: 1px solid v(eui-base-color-grey-75);
+    color: v(eui-base-color-primary-100);
+    font-size: v(eui-base-font-size-4xl);
+    margin: v(eui-base-font-size-3xl) 0 v(eui-base-font-size-2xl);
+    padding-bottom: v(eui-base-spacing-m);
+    text-align: center;
+    width: 100%;
+    @include eui-font-family-light;
+
+    &.first {
+        margin-top: v(eui-base-spacing-m);
+    }
+}
+
+h3.section-title {
+    border-bottom: 1px solid v(eui-base-color-grey-25);
+    color: v(eui-base-color-primary-100);
+    font-size: v(eui-base-font-size-3xl);
+    margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
+    padding-bottom: v(eui-base-spacing-s);
+    width: 100%;
+    @include eui-font-family-light;
+
+    &.first {
+        margin-top: v(eui-base-spacing-l);
+    }
+}
+
+h4.section-title,
+h5.section-title,
+.section-title {
+    border-bottom: 1px solid v(eui-base-color-grey-25);
+    color: v(eui-base-color-primary);
+    font-size: v(eui-base-font-size-l);
+    margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
+    padding-bottom: v(eui-base-spacing-s);
+    width: 100%;
+    @include eui-font-family-light;
+
+    &.noborder {
+        border-bottom: none;
+        padding-bottom: v(eui-base-spacing-2xs);
+        margin-bottom: v(eui-base-spacing-m);
+    }
+
+    &.first {
+        margin-top: v(eui-base-spacing-l);
+    }
+}
+
+h6.section-title,
+.section-title.small {
+    color: v(eui-base-color-info-110);
+    display: table;
+    font-family: v(eui-base-font-family);
+    font-size: v(eui-base-font-size-l);
+    font-weight: 500;
+    letter-spacing: -0.25px;
+    margin: v(eui-base-spacing-2xl) 0 v(eui-base-spacing-s);
+    padding-bottom: v(eui-base-spacing-2xs);
+    width: auto;
+
+    &.border {
+        display: block;
+        border-bottom: 1px solid v(eui-base-color-grey-25);
+    }
+
+    &.noborder {
+        border-bottom: none;
+    }
+
+    &.first {
+        margin-top: v(eui-base-spacing-m);
+    }
+}
+
+.section-subtitle {
+    color: v(eui-base-color-grey-50);
+    margin: 0;
+}

package/src/styles/_base.scss

@@ -3,4 +3,4 @@
 
 // specific eUI base imports
 @import '02-base/module';
-@import '05-material/themes/default/variables';
+// @import '05-material/themes/default/variables'; // TODO eui15 migration