@massimo-cassandro/minimo 0.10.11 → 0.11.0

package/design-tokens/components/snackbar.minimo.tokens.jsonc

@@ -6,27 +6,121 @@
 // -----------------------------------------------------------------------
 {
   "snackbar": {
-    "font": {
-      "size": {
-        "$type": "dimension",
-        "$value": "{font.size.sm}"
+    "outer": {
+      "drop-shadow": {
+        "$type": "shadow",
+        "$value": "{box-shadow.base}"
+      },
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "{secondary.100}"
+        }
+      },
+      "border": {
+        "$type": "string",
+        "$value": "none"
+      },
+      "border-radius": {
+        "$type": "color",
+        "$value": "{radius.xs}"
+      },
+      "padding": {
+        "block": {
+          "$type": "dimension",
+          "$value": 0
+        },
+        "inline": {
+          "$type": "dimension",
+          "$value": 0
+        }
       }
     },
-    "border": {
-      "radius": {
+    "text": {
+      "color": {
         "$type": "color",
-        "$value": "{radius.sm}"
+        "$value": "{secondary.100-fg}"
       }
     },
-    "text": {
+    "background": {
       "color": {
         "$type": "color",
-        "$value": "{text.color}"
+        "$value": "{secondary.100}"
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "color",
+        "$value": "{radius.xs}"
+      }
+    },
+    "font": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.size.sm}"
       }
     },
-    "duration": {
-      "$type": "duration",
-      "$value": "5s"
+    "btn-close": {
+      "size": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "icon": {
+        "color": {
+          "$type": "color",
+          "$value": "{snackbar.text.color}"
+        }
+      },
+      "hover": {
+        "background": {
+          "color": {
+            "$type": "color",
+            "$value": "color-mix(in srgb, {snackbar.text.color} 40%, transparent)"
+          }
+        },
+        "border": {
+          "color": {
+            "$type": "color",
+            "$value": "transparent"
+          }
+        },
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{snackbar.background.color}"
+          }
+        }
+      },
+      "focus": {
+        "outline": {
+          "width": {
+            "$type": "dimension",
+            "$value": "2px"
+          },
+          "offset": {
+            "$type": "dimension",
+            "$value": "2px"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "color-mix(in srgb, {snackbar.text.color} 50%, transparent)"
+          }
+        }
+      },
+      "active": {
+        "background": {
+          "color": {
+            "$type": "color",
+            "$value": "transparent"
+          }
+        },
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{snackbar.text.color}"
+          }
+        }
+      }
     }
   }
 }

package/design-tokens/shadows.minimo.tokens.jsonc

@@ -0,0 +1,19 @@
+// -----------------------------------------------------------------------
+// Generated file — do not edit manually.
+// This file is produced by the design-token build pipeline.
+// Source of truth: the token files in the project source directory.
+// Re-generate with: node build-tokens.mjs --config <path/to/config>
+// -----------------------------------------------------------------------
+{
+  "box-shadow": {
+    "base": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgb(0 0 0 / .25)",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "12px"
+      }
+    }
+  }
+}

package/design-tokens/z-index.minimo.tokens.jsonc

@@ -9,6 +9,10 @@
     "overlay": {
       "$type": "number",
       "$value": 99
+    },
+    "snackbar": {
+      "$type": "number",
+      "$value": 100
     }
   }
 }

package/design-tokens-src/_readme.md

@@ -15,7 +15,7 @@
   * Name of the font family or list (array).  ("Inter", ["Helvetica", "Arial"] )
 * **Font Weight** (`fontWeight`)
   * Font weight (number or text alias).  (700, "bold", "light" )
-* **Edge** (`border`)
+* **border** (`border`)
   * Compound: requires color, width, style.  ({"color": "#000", "width": "1px", "style": "solid"} )
 * **Shadow** (`shadow`)
   * Compound: color, offsetX, offsetY, blur, spread, inset.  ({"color": "#0003", "offsetX": "0px", "offsetY": "4px", "blur": "10px"} )

package/design-tokens-src/badge.minimo.tokens.mjs

@@ -0,0 +1,36 @@
+export default {
+  badge: {
+    background: {
+      color: {
+        $value: '{primary.100}',
+        $type: 'color'
+      }
+    },
+    color: {
+      $value: '{primary.100-fg}',
+      $type: 'color'
+    },
+    font: {
+      size: {
+        $value: '{font.size.xs}',
+        $type: 'dimension'
+      },
+      weight: {
+        $value: '{font.weight.semibold}',
+        $type: 'number'
+      }
+    },
+    lg: {
+      font: {
+        size: {
+          $value: '{font.size.base}',
+          $type: 'dimension'
+        },
+        weight: {
+          $value: '{badge.font.weight}',
+          $type: 'number'
+        }
+      }
+    }
+  } // end badge
+};

package/design-tokens-src/btn-close.minimo.tokens.mjs

@@ -0,0 +1,101 @@
+export default {
+  btn: {
+    close: {
+      size: {
+        $value: '1.5rem',
+        $type: 'dimension'
+      },
+      padding: {
+        $value: '3px',
+        $type: 'dimension'
+      },
+      border: {
+        width: {
+          $value: '2px',
+          $type: 'dimension'
+        },
+        color: {
+          $value: '{btn.close.icon.color}',
+          $type: 'color'
+        },
+        radius: {
+          $value: '50%',
+          $type: 'dimension'
+        }
+
+      },
+      background: {
+        color: {
+          $value: '{body.background.color}',
+          $type: 'color'
+        },
+
+      },
+      icon: {
+        color: {
+          $value: '{text.color}',
+          $type: 'color'
+        },
+        bar: {
+          size: {
+            $value: '2px',
+            $type: 'dimension'
+          }
+        }
+
+      },
+
+      hover: {
+        background: {
+          color: {
+            $value: '{btn.close.icon.color}',
+            $type: 'color'
+          }
+        },
+        border: {
+          color: {
+            $value: '{btn.close.icon.color}',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{btn.close.background.color}',
+            $type: 'color'
+          }
+        }
+      },
+
+      focus: {
+        outline: {
+          width: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          offset: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          color: {
+            $value: '{link.focus.outline.color}',
+            $type: 'color'
+          }
+        }
+      },
+      active: {
+        background: {
+          color: {
+            $value: '{btn.close.background.color}',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{link.active.color}',
+            $type: 'color'
+          }
+        }
+      }
+    } // end close
+  } // end btn
+};

package/design-tokens-src/components/snackbar.minimo.tokens.mjs

@@ -1,35 +1,127 @@
 // tokens utitilizzati sia da snackaber che da toast
 export default{
   snackbar: {
-
-
-
-
-
-
-    font: {
-      size: {
-        $value: '{font.size.sm}',
-        $type: 'dimension'
+    outer: {
+      'drop-shadow': {
+        $type: 'shadow',
+        $value: '{box-shadow.base}'
       },
-    },
-
-    border: {
-      radius: {
-        $value: '{radius.sm}',
+      background: {
+        color: {
+          $type: 'color',
+          $value: '{secondary.100}'
+        }
+      },
+      border: {
+        $value: 'none',
+        $type: 'string'
+      },
+      'border-radius': {
+        $value: '{radius.xs}',
         $type: 'color'
+      },
+      padding: {
+        block: {
+          $type: 'dimension',
+          $value: 0
+        },
+        inline: {
+          $type: 'dimension',
+          $value: 0
+        },
       }
     },
+
     text: {
       color: {
-        $value: '{text.color}',
+        $type: 'color',
+        $value: '{secondary.100-fg}'
+      }
+    },
+    background: {
+      color: {
+        $type: 'color',
+        $value: '{secondary.100}'
+      }
+    },
+    border: {
+      radius: {
+        $value: '{radius.xs}',
         $type: 'color'
       }
     },
-    duration: {
-      $value: '5s',
-      $type: 'duration'
-    }
-  }
+    font: {
+      size: {
+        $value: '{font.size.sm}',
+        $type: 'dimension'
+      },
+    },
+
+    'btn-close': {
+
+      size: {
+        $value: '1rem',
+        $type: 'dimension'
+      },
+      icon: {
+        color: {
+          $value: '{snackbar.text.color}',
+          $type: 'color'
+        }
+      },
+
+      hover: {
+        background: {
+          color: {
+            $value: 'color-mix(in srgb, {snackbar.text.color} 40%, transparent)',
+            $type: 'color'
+          }
+        },
+        border: {
+          color: {
+            $value: 'transparent',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{snackbar.background.color}',
+            $type: 'color'
+          }
+        }
+      },
+
+      focus: {
+        outline: {
+          width: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          offset: {
+            $value: '2px',
+            $type: 'dimension'
+          },
+          color: {
+            $value: 'color-mix(in srgb, {snackbar.text.color} 50%, transparent)',
+            $type: 'color'
+          }
+        }
+      },
+      active: {
+        background: {
+          color: {
+            $value: 'transparent',
+            $type: 'color'
+          }
+        },
+        icon: {
+          color: {
+            $value: '{snackbar.text.color}',
+            $type: 'color'
+          }
+        }
+      }
+    } // end btn-close
+  } // end snackbar
 
 };

package/design-tokens-src/flex-grid.minimo.tokens.mjs

@@ -0,0 +1,18 @@
+export default {
+  'flex-grid': {
+    gap: {
+      $value: '1.5rem',
+      $type: 'dimension'
+    }
+  },
+  grid: {
+    cols: {
+      $value: 3,
+      $type: 'number'
+    },
+    'min-col-width': {
+      $value: '6rem',
+      $type: 'dimension'
+    }
+  }
+};

package/design-tokens-src/shadows.minimo.tokens.mjs

@@ -0,0 +1,16 @@
+export default {
+  'box-shadow': {
+    base: {
+      $type: 'shadow',
+      $value: {
+        color: 'rgb(0 0 0 / .25)',
+        offsetX: '0',
+        offsetY: '0',
+        blur: '12px'
+      }
+    }
+  }
+};
+
+
+// --box-shadow-base: 0 0 1.2rem 0x00000040;

package/design-tokens-src/z-index.minimo.tokens.mjs

@@ -0,0 +1,14 @@
+export default {
+  'z-index': {
+    overlay: {
+      $value: 99,
+      $type: 'number'
+    },
+
+    snackbar: {
+      $value: 100,
+      $type: 'number'
+    },
+
+  }
+};

package/design-tokens-utilities/build-tokens-src/transforms.mjs

@@ -64,7 +64,8 @@ StyleDictionary.registerTransform({
     const value = token.$value || token.value;
     return (token.$type === 'dimension' || token.type === 'dimension')
       && typeof value === 'string'
-      && !value.endsWith('rem');
+      && !value.endsWith('rem')
+      && !value.endsWith('%');
   },
   transform: (token) => {
     const value      = token.$value || token.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.10.11",
+  "version": "0.11.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

package/src/components/snackbar/snackbar.js

@@ -12,94 +12,88 @@ References
 
 */
 
+// TODO snackbar action
+// TODO gestione snackbar multiple (NO stacking)
+
+
 export function snackbar(message, options = {}){
 
   options = {
 
     status       : null, // danger, warning, info, success
-    duration     : 4000, // ms or false/null to avoid autoclose
+    duration     : 6000, // ms or false/null to avoid autoclose
     close_btn    : true, // true | false
 
-    // TODO snackbar action
     action       : null, // null or function
     action_text  : null, // null or string
 
     ...options
   };
 
-  domBuilder([
+  let _popover, _timeoutID;
+
+  const removePopover = () => {
+    if (_popover?.matches(':popover-open')) {
+      if (_timeoutID) clearTimeout(_timeoutID);
+
+      _popover.classList.add(styles.isHiding);
+
+      _popover.addEventListener('animationend', () => {
+        _popover.hidePopover();
+        _popover.remove();
+      }, { once: true });
+    }
+  };
+
+  _popover = domBuilder([
     {
-      className: classnames(styles.snackbar, options.status? styles[`status-${options.status}`] : null),
+      className: classnames(styles.snackbarOuter, options.status? styles[`status-${options.status}`] : null),
       attrs: {
         popover: 'manual',
-        role: options.action? 'alert' : 'status'
+        role: (options.action || ['danger','warning'].includes(options.status)) ? 'alert' : 'status'
       },
       children: [
         {
-          className: styles.text,
-          content: message
-        },
-        {
-          tag: 'button',
-          attrs: {
-            type: 'button',
-          },
-          className: classnames('btn-reset', styles.action),
-          content: options.action_text?? '_action-text_',
-          condition: options.action && (typeof options.action === 'function'),
-          // callback: el => {}
-        },
-        {
-          tag: 'button',
-          className: classnames('btn-close', styles.closeBtn),
-          attrs: {
-            type: 'button',
-          },
+          className: styles.snackbar,
+          children: [
+            {
+              // className: styles.text,
+              content: message
+            },
+            {
+              condition: options.action != null && (typeof options.action === 'function'),
+              tag: 'button',
+              attrs: {
+                type: 'button',
+              },
+              className: classnames('btn-reset', styles.action),
+              content: options.action_text?? '_action-text_',
+            },
+            {
+              tag: 'button',
+              className: classnames('btn-close', styles.closeBtn),
+              attrs: {
+                type: 'button',
+              },
+              callback: el => el.addEventListener('click', () => removePopover())
+            }
+          ]
         }
       ]
     }
   ], document.body);
 
-}
-
-/*
-export const NotificationCore = {
-
-  createNotificationElement(message, options = {}) {
-
+  _popover.showPopover();
 
 
-    const show = () => {
-      document.body.appendChild(el);
-      el.showPopover();
-      setTimeout(() => hide(), duration);
-    };
+  if(options.duration) {
+    _timeoutID = setTimeout(removePopover, options.duration);
 
-    const hide = () => {
-      if (el.matches(':popover-open')) {
-        el.hidePopover();
-        el.remove(); // Pulizia del DOM
-      }
-    };
+    // mette in pausa il timeout sull'hover
+    _popover.addEventListener('mouseenter', () => clearTimeout(_timeoutID));
+    _popover.addEventListener('mouseleave', () => {
+      _timeoutID = setTimeout(removePopover, options.duration);
+    });
 
-    return { el, show, hide };
   }
-};
-
-
-
-
-toast
-
-import { NotificationCore } from './notifications.js';
-
-export const toast = (message, type = 'info') => {
-  const { el, show } = NotificationCore.createBase(message, { type, duration: 4000 });
-
-  el.classList.add('ui-toast');
-
-  show();
-};
-
-
- */
+}