@massimo-cassandro/minimo 0.10.10 → 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.10",
+  "version": "0.11.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -19,8 +19,8 @@
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "upd@m": "npx upd@m",
     "npm-publish": "npm publish",
-    "webpack DEMO": "NODE_ENV=development webpack serve --config ./demo-src/_src/webpack.config.mjs",
-    "webpack DEMO build": "NODE_ENV=production webpack --config ./demo-src/_src/webpack.config.mjs",
+    "webpack DEMO": "NODE_ENV=development webpack serve --config ./demo-src/webpack.config.mjs",
+    "webpack DEMO build": "NODE_ENV=production webpack --config ./demo-src/webpack.config.mjs",
     "build-tokens": "node ./design-tokens-utilities/build-tokens.mjs --config ./tokens-config.mjs",
     "check unresolved props": "node ./design-tokens-utilities/check-unresolved-custom-props.mjs --config ./tokens-config.mjs"
   },