@agorapulse/ui-theme 0.0.3 → 1.0.0-SNAPSHOT

package/assets/style/components-custom-style/_mat-menu.scss

@@ -1,32 +1,38 @@
 @import '../variables';
 
-.mat-menu-panel:not(.pop-menu) {
+.mat-mdc-menu-panel:not(.pop-menu) {
     box-shadow: 0 7px 50px rgba(0, 0, 0, 0.08);
     min-width: unset !important;
     border-radius: 4px;
     background-color: $color-white;
 
-    .mat-menu-item {
+    .mat-mdc-menu-item {
         color: map_get($colors-grey, 100);
         height: unset;
-        line-height: $font-line-height;
         padding: $padding-s $padding-m;
         display: flex;
-        font-size: $font-size;
         background: none;
+        min-height: unset;
+
+        span {
+            line-height: $font-line-height;
+            font-size: $font-size;
+            display: flex;
+        }
 
         &::after {
             color: map_get($colors-grey, 100);
         }
 
-        &:hover:not([disabled]), &.mat-menu-item-highlighted:not([disabled]) {
+        &:hover:not([disabled]),
+        &.mat-mdc-menu-item-highlighted:not([disabled]) {
             background-color: map_get($colors-electric-blue, 10);
             color: map_get($colors-electric-blue, 100);
             &::after {
                 color: map_get($colors-electric-blue, 100);
             }
             ap-symbol .svg {
-                fill:  map_get($colors-electric-blue, 100) !important;
+                fill: map_get($colors-electric-blue, 100) !important;
             }
         }
 
@@ -37,46 +43,46 @@
     }
 }
 
-.mat-menu-panel.pop-menu {
+.mat-mdc-menu-panel.pop-menu {
     max-width: unset;
     background-color: white;
     padding: 0px;
-    border: none!important;
+    border: none !important;
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);
 
     &.shadow {
-        filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25))
+        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
     }
 
     &.shadow-no-border {
         box-shadow: 0px 7px 50px rgba(0, 0, 0, 0.08);
     }
 
-    &.arrow-left{
+    &.arrow-left {
         background: transparent;
-        .mat-menu-content {
+        .mat-mdc-menu-content {
             margin-left: 8px;
         }
     }
-    &.arrow-top{
+    &.arrow-top {
         background: transparent;
-        .mat-menu-content {
+        .mat-mdc-menu-content {
             margin-top: 8px;
         }
     }
-    &.arrow-right{
+    &.arrow-right {
         background: transparent;
-        .mat-menu-content {
+        .mat-mdc-menu-content {
             margin-right: 8px;
         }
     }
-    &.arrow-bottom{
+    &.arrow-bottom {
         background: transparent;
-        .mat-menu-content {
+        .mat-mdc-menu-content {
             margin-bottom: 8px;
         }
     }
-    .mat-menu-content {
+    .mat-mdc-menu-content {
         background-color: white;
         padding: 0px;
         position: relative;
@@ -93,26 +99,26 @@
             height: 8px;
             transform: rotate(135deg);
             z-index: 99999;
-            &.arrow-left{
+            &.arrow-left {
                 bottom: 12px;
                 left: -4px;
                 -webkit-transform: rotate(45deg);
                 transform: rotate(45deg);
             }
-            &.arrow-right{
+            &.arrow-right {
                 bottom: 12px;
                 right: -4px;
                 -webkit-transform: rotate(45deg);
                 transform: rotate(45deg);
             }
-            &.arrow-top{
+            &.arrow-top {
                 top: -4px;
                 left: 50%;
                 -webkit-transform: rotate(45deg);
                 transform: rotate(45deg);
                 //box-shadow: -3px 0px 0px 0px rgba(0, 0, 0, 0.05);
             }
-            &.arrow-bottom{
+            &.arrow-bottom {
                 bottom: -4px;
                 left: 50%;
                 -webkit-transform: rotate(45deg);
@@ -149,29 +155,34 @@
         }
     }
 
-    .mat-menu-item {
+    .mat-mdc-menu-item {
         line-height: unset;
     }
 
     &.no-background {
         background-color: transparent;
-        .mat-menu-content {
+        .mat-mdc-menu-content {
             background-color: transparent;
         }
     }
 }
 
-.mat-menu-panel.button-dropdown {
+.mat-mdc-menu-panel.button-dropdown {
     margin-bottom: $padding-sm;
-    .mat-menu-item {
-        font-weight: $font-weight-bold;
-        display: flex;
-        flex-direction: column;
-        .caption {
-            font-weight: normal;
-            color: map_get($colors-grey, 60);
-            margin-top: 0px;
+    .mat-mdc-menu-item {
+        .mat-mdc-menu-item-text {
+            display: flex;
+            flex-direction: column;
+            font-weight: $font-weight-bold;
+            width: 100%;
+
+            .caption {
+                font-weight: normal;
+                color: map_get($colors-grey, 60);
+                margin-top: 0px;
+            }
         }
+
         &:hover {
             .caption {
                 color: map_get($colors-electric-blue, 85);

package/assets/style/components-custom-style/_mat-table.scss

@@ -0,0 +1,3 @@
+.mat-mdc-table {
+    --mat-table-header-headline-size: var(--sys-text-style-caption-size);
+}

package/assets/style/components-custom-style/_ng-select.scss

@@ -1,4 +1,4 @@
-@import '~@ng-select/ng-select/themes/default.theme.css';
+@import '@ng-select/ng-select/themes/default.theme.css';
 @import '../variables';
 
 @mixin select-state-style($color) {
@@ -7,8 +7,9 @@
     }
 }
 
-.ng-select {
-    div, span {
+.ng-select:not(.ap-select) {
+    div,
+    span {
         font-weight: normal !important;
     }
     input {
@@ -39,6 +40,11 @@
                 ap-symbol {
                     padding-right: $padding-s;
                 }
+                ap-avatar {
+                    ap-symbol {
+                        padding: 0 !important;
+                    }
+                }
             }
         }
     }
@@ -53,7 +59,7 @@
     &.ng-select-single {
         .ng-select-container {
             .ng-value-container {
-                .ng-input  {
+                .ng-input {
                     padding-left: $padding-m;
                 }
             }
@@ -87,9 +93,15 @@ form.submitted {
         box-shadow: 0 7px 50px rgba(0, 0, 0, 0.08);
         margin-top: $padding-sm;
     }
+    &.ng-select-top {
+        border-radius: $border-radius;
+        box-shadow: 0 7px 50px rgba(0, 0, 0, 0.08);
+        margin-bottom: $padding-sm;
+    }
     .ng-dropdown-panel-items {
         padding: $padding-s 0;
-        .ng-option, .ng-optgroup {
+        .ng-option,
+        .ng-optgroup {
             padding: $padding-s $padding-m;
             span {
                 color: $form-control-selected-font-color;
@@ -97,6 +109,27 @@ form.submitted {
                 ap-symbol {
                     padding-right: $padding-s;
                 }
+                ap-avatar {
+                    ap-symbol {
+                        padding: 0 !important;
+                    }
+                }
+                .checkmark {
+                    ap-symbol {
+                        padding-right: 0;
+                    }
+                }
+            }
+
+            ap-avatar {
+                ap-symbol {
+                    .ap-symbol {
+                        color: var(--ref-color-white);
+                    }
+                }
+                .initials {
+                    color: var(--ref-color-white);
+                }
             }
             &.ng-option-selected {
                 background-color: unset;
@@ -106,6 +139,13 @@ form.submitted {
                         fill: map_get($colors-electric-blue, 100) !important;
                     }
                 }
+                span.checkbox {
+                    .checkmark {
+                        ap-symbol .svg {
+                            fill: white !important;
+                        }
+                    }
+                }
             }
             &.ng-option-marked {
                 background-color: map_get($colors-electric-blue, 10);
@@ -115,11 +155,23 @@ form.submitted {
                         fill: map_get($colors-electric-blue, 100) !important;
                     }
                 }
+                span.checkbox {
+                    .checkmark {
+                        ap-symbol .svg {
+                            fill: white !important;
+                        }
+                    }
+                }
             }
         }
     }
 }
 
+.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+
 .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;

package/assets/style/theme.scss

@@ -2,31 +2,59 @@
  * THEMING
  * See https://material.angular.io/guide/theming
  */
-@use '~@angular/material/index' as mat;
+@use '@angular/material' as mat;
 @include mat.core();
 
+@import '_tooltip.scss';
+@import '_link.scss';
+@import '_input.scss';
+@import '_select.scss';
 
 @import 'font-face';
 @import 'colors';
 @import 'variables';
 
-// Custom palettes
-@include mat.all-component-themes(mat.define-light-theme(
-    $primary: mat.define-palette($colors-primary),
-    $accent: mat.define-palette($colors-accent),
-    $warn: mat.define-palette($colors-warn)
-));
-
 /*
  * TYPOGRAPHY
+ * See https://material.angular.io/guide/typography
  */
 
-@import 'mat-typography';
+// Override typography for all Angular Material, including mat-base-typography and all components.
+$custom-typography: mat.m2-define-typography-config(
+    $font-family: $font-family,
+    $headline-1: mat.m2-define-typography-level($font-size-h1, $font-line-height-h1, $font-weight-semibold),
+    $headline-2: mat.m2-define-typography-level($font-size-h2, $font-line-height-h2, $font-weight-semibold),
+    $body-1: mat.m2-define-typography-level($font-size, $font-line-height, $font-weight),
+    $body-2: mat.m2-define-typography-level($font-size, $font-line-height, $font-weight),
+    $caption: mat.m2-define-typography-level($font-size-s, $font-line-height-s, $font-weight),
+);
+@include mat.all-component-typographies($custom-typography);
+
+// https://material.angular.io/guide/theming#defining-a-theme
+$primary: mat.m2-define-palette($colors-primary);
+$accent: mat.m2-define-palette($colors-accent);
+$warn: mat.m2-define-palette($colors-warn);
+
+// Custom palettes
+@include mat.all-component-themes(
+    mat.m2-define-light-theme(
+        (
+            color: (
+                primary: $primary,
+                accent: $accent,
+                warn: $warn,
+            ),
+            typography: $custom-typography,
+            density: 0,
+        )
+    )
+);
 
 /*
- * GRID
+ * TYPOGRAPHY
  */
-@import 'grid';
+
+@import 'mat-typography';
 
 /*
  * HELPERS
@@ -43,15 +71,13 @@
 @import 'components-custom-style/notification';
 @import 'components-custom-style/mat-button';
 @import 'components-custom-style/mat-button-toggle-group';
-@import 'components-custom-style/mat-checkbox';
 @import 'components-custom-style/mat-dialog';
 @import 'components-custom-style/mat-divider';
 @import 'components-custom-style/mat-expansion-panel';
 @import 'components-custom-style/mat-list';
 @import 'components-custom-style/mat-menu';
-@import 'components-custom-style/mat-radio-button';
-@import 'components-custom-style/mat-slide-toggle';
 @import 'components-custom-style/mat-snack-bar';
+@import 'components-custom-style/mat-table';
 @import 'components-custom-style/ng-select';
 @import 'components-custom-style/select';
 @import 'components-custom-style/sign';
@@ -59,7 +85,9 @@
 @import 'components-custom-style/clickable-text';
 @import 'components-custom-style/input-error';
 
-.mat-ripple { display: none; }
+.mat-ripple {
+    display: none;
+}
 
 /*
 * {
@@ -72,6 +100,3 @@ a, button {
     cursor: pointer;
 }
 */
-
-
-

package/package.json

@@ -1,19 +1,24 @@
 {
-  "name": "@agorapulse/ui-theme",
-  "version": "0.0.3",
-  "description": "Agorapulse UI Theme Library",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/agorapulse/design.git"
-  },
-  "author": "Arnaud BUSO",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/agorapulse/design/issues"
-  },
-  "homepage": "https://github.com/agorapulse/design#readme",
-  "peerDependencies": {
-      "@angular/material": "^12.2.3",
-      "@ng-select/ng-select": "^7.2.0"
-  }
-}
+    "name": "@agorapulse/ui-theme",
+    "version": "1.0.0-SNAPSHOT",
+    "description": "Agorapulse UI Theme Library",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/agorapulse/design.git"
+    },
+    "author": "Arnaud BUSO",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/agorapulse/design/issues"
+    },
+    "scripts": {
+        "generate-tokens": "cd src && node build.js && cd ../assets && git add mobile_variables.css && git add desktop_variables.css"
+    },
+    "homepage": "https://github.com/agorapulse/design#readme",
+    "peerDependencies": {
+        "@angular/material": "18.2.9"
+    },
+    "devDependencies": {
+        "style-dictionary": "^3.7.2"
+    }
+}

package/src/README.md

@@ -0,0 +1,42 @@
+# Agorapulse Style Dictionary
+
+To generate the style dictionary based on the config file, you'll have to run the following command:
+
+```bash
+style-dictionary build
+```
+
+You should see something like this output:
+
+```
+Copying starter files...
+
+Source style dictionary starter files created!
+
+Running `style-dictionary build` for the first time to generate build artifacts.
+
+css
+✔︎  assets/variables.css
+```
+
+If everything goes well, you'll should have the following architecture.
+
+```
+├── README.md
+├── config.json
+├── tokens/
+│   ├── reference/
+│       ├── border-radius.json
+│       ├── color.json
+│       ├── font.json
+│       ├── spacing.json
+│   ├── system/
+│       ├── border.json
+│       ├── color.json
+│       ├── icon.json
+│       ├── text.json
+├── build/
+│   ├── css/
+│      ├── variables.css
+
+```

package/src/build.js

@@ -0,0 +1,6 @@
+const styleDictionary = require('style-dictionary');
+const mobileStyleDictionary = styleDictionary.extend('mobile_config.js');
+mobileStyleDictionary.buildAllPlatforms();
+
+const desktopStyleDictionary = styleDictionary.extend('desktop_config.js');
+desktopStyleDictionary.buildAllPlatforms();

package/src/desktop_config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    source: ['tokens/reference/*.json', 'tokens/system/*.json', 'tokens/system/desktop/*.json', 'tokens/components/*.json'],
+    platforms: {
+        desktop: {
+            transformGroup: 'css',
+            transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'size/px'],
+            files: [
+                {
+                    format: 'css/variables',
+                    destination: '../assets/desktop_variables.css',
+                    options: {
+                        showFileHeader: false,
+                    },
+                },
+            ],
+        },
+    },
+};

package/src/mobile_config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    source: ['tokens/reference/*.json', 'tokens/system/*.json', 'tokens/system/mobile/*.json', 'tokens/components/*.json'],
+    platforms: {
+        mobile: {
+            transformGroup: 'css',
+            transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'size/px'],
+            files: [
+                {
+                    format: 'css/variables',
+                    destination: '../assets/mobile_variables.css',
+                    options: {
+                        showFileHeader: false,
+                    },
+                },
+            ],
+        },
+    },
+};

package/src/tokens/components/badge.json

@@ -0,0 +1,53 @@
+{
+    "comp": {
+        "badge": {
+            "text": {
+                "style": {
+                    "font-family": {
+                        "value": "{sys.text.style.captionBold.font-family}"
+                    },
+                    "size": {
+                        "value": "{sys.text.style.captionBold.size}"
+                    },
+                    "font-weight": {
+                        "value": "{sys.text.style.captionBold.weight}"
+                    },
+                    "line-height": {
+                        "value": "{sys.text.style.captionBold.line-height}"
+                    }
+                }
+            },
+            "height": {
+                "value": "{ref.font.lineHeight.xs}"
+            },
+            "padding": {
+                "left": {
+                    "value": "2px"
+                },
+                "right": {
+                    "value": "2px"
+                }
+            },
+            "orange": {
+                "color": {
+                    "value": "{ref.color.white}"
+                },
+                "background": {
+                    "color": {
+                        "value": "{sys.color.main.default.bg.default}"
+                    }
+                }
+            },
+            "blue": {
+                "color": {
+                    "value": "{sys.color.accent.light.text}"
+                },
+                "background": {
+                    "color": {
+                        "value": "{ref.color.electricBlue.10}"
+                    }
+                }
+            }
+        }
+    }
+}

package/src/tokens/components/button.json

@@ -0,0 +1,37 @@
+{
+    "comp": {
+        "button": {
+            "text": {
+                "size": {
+                    "value": "{sys.text.style.h4.size}"
+                },
+                "font-family": {
+                    "value": "{sys.text.style.h4.font-family}"
+                },
+                "weight": {
+                    "value": "{sys.text.style.h4.weight}"
+                },
+                "lineHeight": {
+                    "value": "{sys.text.style.h4.line-height}"
+                }
+            },
+            "padding": {
+                "horizontal": {
+                    "value": "{ref.spacing.xxs}"
+                },
+                "vertical": {
+                    "value": "{ref.spacing.sm}"
+                }
+            },
+            "height": {
+                "value": "{sys.button.height}"
+            },
+            "borderRadius": {
+                "value": "{sys.border.radius.md}"
+            },
+            "spacing": {
+                "value": "{ref.spacing.xxs}"
+            }
+        }
+    }
+}