@massimo-cassandro/minimo 0.3.5 → 0.4.0

package/design-tokens-utilities/readme.md

@@ -0,0 +1,185 @@
+# Design Token Utilities
+
+A set of Node.js scripts for managing CSS design tokens in a project. Built on top of [Style Dictionary v5](https://styledictionary.com/).
+
+## Scripts
+
+| Script | Purpose |
+|---|---|
+| `build-tokens.mjs` | Generates a CSS custom properties file from design token source files |
+| `check-unresolved-custom-props.mjs` | Scans CSS files and reports any `var(--...)` references not found in the generated token file |
+
+Both scripts share the same config file, passed via `--config`.
+
+## Setup
+
+The scripts are intended to be used as npm scripts. Add them to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "build tokens": "npx buildTokens --config ./path/to/tokens-config.mjs",
+    "check unresolved props": "npx checkUnresolvedProps --config ./path/to/tokens-config.mjs"
+  }
+}
+```
+
+### Dependencies
+
+The following packages must be present in your project:
+
+```json
+{
+  "style-dictionary": "^5",
+  "stylelint": "^16"
+}
+```
+
+## Configuration file
+
+Both scripts read a shared config file passed with `--config`. Use `tokens-config-sample.mjs` as a starting point.
+
+Read comments inside the sample file for more info.
+
+
+## `build-tokens.mjs`
+
+Reads design token source files and generates:
+- A **CSS file** containing all tokens as custom properties inside `:root { ... }`
+- Optionally, one or more **W3C DTCG JSON/JSONC** files to import into Penpot/Figma (use in Figma requires a plugin).
+
+### Usage
+
+```sh
+npx buildTokens --config ./path/to/tokens-config.mjs
+```
+
+### Source files
+
+The `source` array accepts any combination of:
+- Concrete file paths: `'./tokens/colors.jsonc'`
+- Glob patterns: `'./tokens/**/*.{json,jsonc,mjs}'`
+
+**Supported formats:**
+- `.json` / `.jsonc` — parsed directly as token data
+- `.mjs` / `.js` — imported as ES modules; must export a W3C DTCG-compliant object as `default`
+
+
+### Token file format (JS example)
+
+When using `.mjs` source files, export a default object following the [W3C Design Token Community Group format](https://design-tokens.github.io/community-group/format/):
+
+```js
+// colors.tokens.mjs
+export default {
+  color: {
+    brand: {
+      primary: { $type: 'color', $value: '#0057FF' },
+      secondary: { $type: 'color', $value: '#FF6B00' },
+    },
+    neutral: {
+      '100': { $type: 'color', $value: '#F5F5F5' },
+      '900': { $type: 'color', $value: '#1A1A1A' },
+    },
+  },
+  semantic: {
+    color: {
+      text: {
+        primary: { $type: 'color', $value: '{color.neutral.900}' }, // alias
+      },
+    },
+  },
+};
+```
+
+The main advantage of `.mjs` over `.json` is the ability to use JavaScript variables, comments, and computed values within the token definition.
+
+Values can be expressions like `"{size.base} * .25"`, see `tokens-config-sample.mjs` for more info.
+
+### Custom transforms
+
+The following transforms are registered on top of Style Dictionary's built-ins:
+
+| Name | Type | Description |
+|---|---|---|
+| `shadow/css` | value | Converts shadow objects (single or array) to a `box-shadow` CSS string. px values are converted to rem. |
+| `size/pxToRem-smart` | value | Converts `dimension` token values from px to rem. Skips values already in rem. |
+| `color/css-modern` | value | Color passthrough with transitive alias support. |
+| `gradient/css` | value | Converts gradient objects to CSS `linear-gradient`, `radial-gradient` or `conic-gradient`. |
+| `composite/css` | value | Converts `border`, `outline`, `transition` and `animation` objects to their CSS shorthand. |
+| `typography/css` | value | Typography passthrough — the format handles exploding the value into individual properties. |
+
+### CSS output
+
+All tokens are output as CSS custom properties inside `:root`, sorted alphabetically.
+
+Typography tokens are expanded into multiple properties:
+- `--token-name-font` — a `font` shorthand (when both `fontSize` and `fontFamily` are present)
+- `--token-name-letter-spacing`, `--token-name-text-transform`, `--token-name-text-decoration` — individual properties
+
+The generated file is linted and auto-fixed with stylelint using the config specified in `stylelintConfigPath`.
+
+### Penpot output
+
+When `penpotBuildPath` is set, the script also generates W3C DTCG token files for import into Penpot via the [Design Tokens plugin](https://penpot.app/penpot-files/design-tokens).
+
+**Single file** (`penpotDestFile` is a string):
+```
+penpotBuildPath/tokens.jsonc   ← all tokens in one file
+```
+
+**One file per source** (`penpotDestFile` is `null` or omitted):
+```
+penpotBuildPath/colors.tokens.jsonc
+penpotBuildPath/spacing.tokens.jsonc
+penpotBuildPath/typography.tokens.jsonc
+```
+
+The `penpotFormat` option controls the output:
+
+| Value | Extension | Disclaimer header |
+|---|---|---|
+| `'jsonc'` | `.jsonc` | Yes |
+| `'json'` | `.json` | No |
+
+Alias references (`{color.brand.primary}`) are preserved in the output so Penpot maintains token links between primitive and semantic tokens.
+
+> Penpot token files intentionally use a minimal set of transforms (no px→rem conversion, no shorthand expansion) because Penpot expects original values and structured objects, not resolved CSS strings.
+
+---
+
+## `check-unresolved-custom-props.mjs`
+
+Scans all `.css` files in `dir_to_check` (recursively) and reports any `var(--...)` references that are not defined in the generated token CSS file or in any `extra_custom_props_files`.
+
+Results are written to `unresolved-props.md` in the same directory as the config file.
+
+### Usage
+
+```sh
+npx checkUnresolvedProps --config ./path/to/tokens-config.mjs
+```
+
+### Output
+
+The script creates a `unresolved-props.md` file next to the config file. Each line links to the file and line number where the unresolved property is used:
+
+```markdown
+* [components.css :: 42](../src/components.css#L42) -> var(--color-action-hover)
+* [layout.css :: 17](../src/layout.css#L17) -> var(--spacing-missing)
+```
+
+In VS Code, Option/Alt-clicking on the URL opens the file at the required line.
+
+
+### Excluding properties
+
+Use `exclude_pattern` to suppress false positives — for example, internal/private custom properties that are defined dynamically or inline:
+
+```js
+// skips all custom props starting with `--_` or `--js-`
+exclude_pattern: [
+  /^--_/,          
+  /^--js-/,        
+]
+```

package/design-tokens-utilities/tokens-config-sample.mjs

@@ -0,0 +1,98 @@
+// tokens-config-sample.mjs
+// Sample project config for build-tokens.mjs and check-unresolved-custom-props.mjs.
+// Copy and adapt this file for each project; pass it via the --config flag.
+//
+// All paths are relative to this config file (not to the CWD).
+
+// import { homedir } from 'os';
+import path from 'path';
+
+// Path to the design token source files.
+// You can use an absolute path, a relative path, or build it programmatically.
+
+// Example using a local node_modules package (JS source files)
+const minimo_path = '../../node_modules/@massimo-cassandro/minimo/design-tokens-src';
+
+// Alternative: pre-built JSONC files from the same package
+// const minimo_path = '../../node_modules/@massimo-cassandro/minimo/design-tokens';
+
+// For local testing
+// const minimo_path = path.resolve(homedir(), 'Sites/minimo/src');
+
+const config = {
+
+  // ---------------------------------------------------------------------------
+  // build-tokens.mjs settings
+  // ---------------------------------------------------------------------------
+
+  // Path to the stylelint config used to lint the generated CSS file
+  stylelintConfigPath: '../../stylelint.config.mjs',
+
+  // Output directory for the CSS file generated by Style Dictionary
+  buildPath: '../src/css',
+
+  // Output filename for the generated CSS file
+  destFile: 'custom-properties.css',
+
+  // Source token files — accepts paths, globs, or a mix of both.
+  // Supported formats: .json, .jsonc, .mjs (must export a DTCG-compliant default object)
+  //
+  // WARNING: do not use path.join() to build glob patterns — it may corrupt
+  // the pattern syntax. Use template literals instead:
+  //   OK:  `${minimo_path}/**/*.{json,mjs}`
+  //   NO:  path.join(minimo_path, '/**/*.{json,mjs}')
+  source: [
+    `${minimo_path}/**/*.{jsonc,json,mjs}`,
+    './project-tokens/*.jsonc',
+
+    // optional extra token source (in this example, openProps, https://open-props.style/)
+    // '../../node_modules/open-props/open-props.style-dictionary-tokens.json',
+  ],
+
+  // ---------------------------------------------------------------------------
+  // Optional design tokens output
+  // Generates one or more json(c) files in addition to the CSS output file, for use
+  // in Penpot or Figma projects or as an alternative to the .mjs source files
+  // ---------------------------------------------------------------------------
+  // Output format for Penpot token files: 'jsonc' or 'json'
+  //   'jsonc' -> adds a generated-file disclaimer header, uses .jsonc extension
+  //   'json'  -> plain JSON, no disclaimer
+  penpotFormat: 'jsonc',
+
+  // Output directory for the Penpot design token files.
+  // Set to null (or omit) to disable json output entirely.
+  penpotBuildPath: './path/to/generated/design-tokens-dir',
+
+  // Base name (without extension) for the aggregated Penpot output file.
+  // The extension is added automatically based on penpotFormat.
+  // Set to null (or omit) to generate one file per .mjs source file instead.
+  penpotDestFile: 'tokens',
+
+  // How to handle math expressions in dimension token $values (e.g. "{size.base} * .25"):
+  //   'keep'    write the expression unchanged
+  //   'calc'    — wrap in CSS calc(): "calc({size.base} * .25)"
+  //   'resolve' — (default) evaluate numerically, inheriting the unit from the first referenced token
+  //               e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
+  penpotExpressions: 'resolve',
+
+  // ---------------------------------------------------------------------------
+  // check-unresolved-custom-props.mjs settings
+  // ---------------------------------------------------------------------------
+
+  // Additional CSS files that define custom properties used in the project
+  // but not generated by build-tokens (e.g. third-party libraries)
+  extra_custom_props_files: [
+    // '../../node_modules/open-props/open-props.min.css'
+  ],
+
+  // Directory containing the CSS files to scan for unresolved custom properties
+  dir_to_check: '../../src',
+
+  // Regular expressions for custom property names to exclude from the check.
+  // Useful for intentionally private/internal props (e.g. prefixed with --_).
+  exclude_pattern: [
+    /^--_/,
+  ],
+};
+
+export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Light css framework",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
@@ -8,8 +8,8 @@
     "url": "https://github.com/massimo-cassandro/minimo/issues"
   },
   "bin": {
-    "buildTokens": "./src/design-tokens-utilities/build-tokens.mjs",
-    "checkUnresolvedProps": "./src/design-tokens-utilities/check-unresolved-custom-props.mjs"
+    "buildTokens": "./design-tokens-utilities/build-tokens.mjs",
+    "checkUnresolvedProps": "./design-tokens-utilities/check-unresolved-custom-props.mjs"
   },
   "repository": {
     "type": "git",
@@ -19,8 +19,8 @@
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "upd@m": "npx upd@m",
     "npm-publish": "npm publish",
-    "build-tokens": "node ./src/design-tokens-utilities/build-tokens.mjs --config ./test/tokens-test/tokens-config.mjs",
-    "check unresolved props": "node ./src/design-tokens-utilities/check-unresolved-custom-props.mjs --config ./test/tokens-test/tokens-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"
   },
   "license": "MIT",
   "author": "Massimo Cassandro",
@@ -29,10 +29,14 @@
   },
   "main": "./src/index.js",
   "files": [
-    "src/**/*.{js,mjs,css,svg,tokens.json,tokens.jsonc,md}"
+    "src/**/*.{js,mjs,css,svg,md}",
+    "design-tokens/**/*.{tokens.json,tokens.jsonc}",
+    "design-tokens-src/**/*.{tokens.json,tokens.jsonc,mjs,js,md}",
+    "design-tokens-utilities/**/*.{mjs,md}"
   ],
   "devDependencies": {
     "@massimo-cassandro/dev-updater": "^3.0.3",
+    "@massimo-cassandro/eslint-config": "^3.0.6",
     "@massimo-cassandro/stylelint-config": "^2.3.4",
     "style-dictionary": "^5.4.0"
   }

package/src/components/auto-datatable/auto-datatable.css

@@ -144,9 +144,9 @@
 
   /* animation-timeline: scroll(self);
   animation: detect-scroll linear;
-  --bg-if-can-scroll: var(--can-scroll) lime;
-  --bg-if-cant-scroll: red;
-  background: var(--bg-if-can-scroll, var(--bg-if-cant-scroll)); */
+  --_bg-if-can-scroll: var(--_can-scroll) lime;
+  --_bg-if-cant-scroll: red;
+  background: var(--_bg-if-can-scroll, var(--_bg-if-cant-scroll)); */
 
 
   .table thead th {
@@ -207,7 +207,7 @@
 /*
 @keyframes detect-scroll {
   from, to {
-    --can-scroll:;
+    --_can-scroll:;
   }
 } */
 

package/src/components/modal-alert/modal-alert.css

@@ -5,19 +5,19 @@
 
 .modal-alert {
   --malert-success-color: var(--status-success-color);
-  --malert-success-color-fg: var(--status-success-fg-color);
+  --malert-success-color-fg: var(--status-success-foreground);
 
   --malert-info-color: var(--status-info-color);
-  --malert-info-color-fg: var(--status-info-fg-color);
+  --malert-info-color-fg: var(--status-info-foreground);
 
   --malert-warning-color: var(--status-warning-color);
-  --malert-warning-color-fg: var(--status-warning-fg-color);
+  --malert-warning-color-fg: var(--status-warning-foreground);
 
   --malert-error-color: var(--status-danger-color);
-  --malert-error-color-fg: var(--status-danger-fg-color);
+  --malert-error-color-fg: var(--status-danger-foreground);
 
   --malert-confirm-color: var(--status-warning-color);
-  --malert-confirm-color-fg: var(--status-warning-fg-color);
+  --malert-confirm-color-fg: var(--status-warning-foreground);
 
   /* --malert-marks-stroke-width: 6px; */
   --malert-backdrop: rgb(0 0 0 / .3);

package/src/components/{overlay.js → overlay/overlay.js}

@@ -1,4 +1,4 @@
-// import './overlay.css'; incorporato nel css principale
+import './overlay.css'; 
 
 export function overlay(context = document.body, scroll_lock = false) {
   context.insertAdjacentHTML('beforeend', '<div class="overlay"/>');

package/src/{css/dialog-content.css → components/popup-page/popup-page.css}

@@ -37,7 +37,7 @@
     aspect-ratio: 1;
     padding: 4px;
     background-color: var(--body-background-color);
-    border: 1px solid var(--gray-4);
+    border: 1px solid var(--neutral-base);
     border-radius: 50%;
     box-shadow: var(--shadow-3);
 

package/src/components/{dialog-content.js → popup-page/popup-page.js}

@@ -1,6 +1,8 @@
-import './dialog-content.css';
-import x_icon from '@icone/x.svg?inline';
-import { spinner } from './spinner/spinner';
+// TODO completare
+
+import './popup-page.css';
+import xIcon from '@icone/x.svg?inline';
+import { spinner } from '../spinner/spinner';
 /**
   `indicator_class`: classe da aggiungere al wrapper per indicare in modo univoco il dialog
  */
@@ -9,7 +11,7 @@ export function content_dialog_markup(indicator_class) {
   return `<dialog class="${indicator_class} content-dialog">` +
     '<div class="content-dialog-inner">' +
       '<div class="content-dialog-close">' +
-        `<button type="button" class="btn-reset content-dialog-close-btn" aria-label="Chiudi finestra">${x_icon}</button>` +
+        `<button type="button" class="btn-reset content-dialog-close-btn" aria-label="Chiudi finestra">${xIcon}</button>` +
       '</div>' +
       '<div class="content-dialog-body"></div>' +
     '</div>'+

package/src/components/sf-macro/sf-macro.css

@@ -1,16 +1,9 @@
 
 .sf-macro-wrapper {
-  --sf-macro-rows-padding: .5rem;
-  --sf-macro-rows-margin-bottom: 1rem;
-  --sf-macro-rows-border-radius: .4rem;
-  --sf-macro-rows-hover-bg-color: color-mix(in srgb, var(--body-bg-color) 95%, #000);
-  --sf-macro-even-rows-bg-color: var(--body-bg-color); /* rgb(0 0 0 / .05); */
-  --sf-macro-rows-border: 1px solid var(--stone-5);
-  --sf-macro-close-btn-size: 2rem;
 
 
   /* etichette campi righe successive alla prima */
-  @media (--desktop-up) {
+  @media (--media-large-viewport-up) {
     &:not(.always-show-labels) {
       .sf-macro-riga {
         &:not(:first-child) {
@@ -41,17 +34,17 @@
 .sf-macro-riga {
   position: relative;
   padding: var(--sf-macro-rows-padding);
-  margin-bottom: var(--sf-macro-rows-margin-bottom);
+  margin-bottom: var(--sf-macro-rows-margin-block-end);
   border: var(--sf-macro-rows-border);
   border-radius: var(--sf-macro-rows-border-radius);
 
   &:nth-child(even) {
-    background-color: var(--sf-macro-even-rows-bg-color);
+    background-color: var(--sf-macro-rows-even-background-color);
   }
 
 
   &:hover {
-    background-color: var(--sf-macro-rows-hover-bg-color);
+    background-color: var(--sf-macro-rows-hover-background-color);
   }
 
   .form-group {
@@ -75,11 +68,11 @@
   right: -.5rem;
   z-index: 1;
   display: block;
-  width: var(--sf-macro-close-btn-size);
-  height: var(--sf-macro-close-btn-size);
+  width: var(--sf-macro-btn-close-size);
+  height: var(--sf-macro-btn-close-size);
   padding: 1px;
   color: currentColor;
-  background-color: var(--body-content-bg);
+  background-color: var(--sf-macro-btn-close-background-color);
   border-radius: 50%;
 
 

package/src/css/alerts.css

@@ -33,17 +33,17 @@
 
   &.alert-warning, &.alert-notice {
     --_alert-bg-color: var(--status-warning-color);
-    --_alert-fg-color: var(--status-warning-fg);
+    --_alert-fg-color: var(--status-warning-foreground);
     --_alert-border-color: var(--status-warning-border-color);
   }
   &.alert-info {
     --_alert-bg-color: var(--status-info-color);
-    --_alert-fg-color: var(--status-info-fg);
+    --_alert-fg-color: var(--status-info-foreground);
     --_alert-border-color: var(--status-info-border-color);
   }
   &.alert-success {
     --_alert-bg-color: var(--status-success-color);
-    --_alert-fg-color: var(--status-success-fg);
+    --_alert-fg-color: var(--status-success-foreground);
     --_alert-border-color: var(--status-success-border-color);
   }
 

package/src/css/buttons/status-buttons.css

@@ -2,21 +2,21 @@
 
   &.btn-success {
     --_bg: var(--status-success-color);
-    --_fg: var(--status-success-fg-color);
+    --_fg: var(--status-success-foreground);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-success-border-color);
   }
   &.btn-info {
     --_bg: var(--status-info-color);
-    --_fg: var(--status-info-fg-color);
+    --_fg: var(--status-info-foreground);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-info-border-color);
   }
   &.btn-danger, &.btn-error {
     --_bg: var(--status-danger-color);
-    --_fg: var(--status-danger-fg-color);
+    --_fg: var(--status-danger-foreground);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-danger-border-color);
@@ -25,7 +25,7 @@
 
   &.btn-warning {
     --_bg: var(--status-warning-color);
-    --_fg: var(--status-warning-fg-color);
+    --_fg: var(--status-warning-foreground);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-warning-border-color);

package/src/css/forms/fieldset.css

@@ -44,8 +44,8 @@ fieldset.form-group, fieldset.form-collection-fset {
     font-size: .9rem;
     font-weight: var(--font-weight-semibold);
     line-height: 1.2;
-    color: var(--form-fieldset-legend-color);
-    background-color: var(--form-fieldset-legend-background-color);
+    color: var(--form-legend-color);
+    background-color: var(--form-legend-background-color);
     border-radius: var(--btn-border-radius) var(--btn-border-radius) var(--btn-border-radius) 0;
   }
 

package/src/custom-properties-default.css

@@ -1,8 +1,8 @@
 :root {
   --accent-base: #567d0d;
   --accent-on-base: #fff;
-  --alert-border-radius: var(--radius-md);
-  --alert-drop-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
+  --alert-border-radius: var(--radius-sm);
+  --alert-box-shadow: 0 0 .5rem 0 oklch(0% 0 0 / .5);
   --badge-background-color: var(--primary-base);
   --badge-color: var(--primary-on-base);
   --badge-font-size: var(--font-size-xs);
@@ -44,16 +44,16 @@
   --btn-md-padding-inline: var(--size-sm);
   --btn-padding-block: var(--size-xs);
   --btn-padding-inline: var(--size-base);
-  --btn-primary-active-background-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, #000);
+  --btn-primary-active-background-color: calc(color-mix(in srgb, var(--btn-primary-background-color) 60%, #000) ;);
   --btn-primary-active-border-color: var(--btn-primary-active-background-color);
   --btn-primary-active-color: var(--btn-primary-color);
   --btn-primary-background-color: var(--primary-base);
   --btn-primary-border-color: var(--btn-primary-background-color);
   --btn-primary-color: var(--primary-on-base);
-  --btn-primary-focus-outline-color: color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent);
+  --btn-primary-focus-outline-color: calc(color-mix(in srgb, var(--btn-primary-background-color) 60%, transparent) ;);
   --btn-primary-hollow-background-color: var(--btn-primary-color);
   --btn-primary-hollow-color: var(--btn-primary-background-color);
-  --btn-primary-hollow-hover-background-color: color-mix(in srgb, var(--btn-primary-hollow-color) 20%, transparent);
+  --btn-primary-hollow-hover-background-color: calc(color-mix(in srgb, var(--btn-primary-hollow-color) 20%, transparent) ;);
   --btn-primary-hollow-hover-color: var(--btn-primary-hollow-color);
   --btn-primary-hover-background-color: var(--btn-primary-color);
   --btn-primary-hover-border-color: var(--btn-primary-hover-color);
@@ -134,13 +134,13 @@
   --form-end-margin-block-end: var(--size-base);
   --form-end-margin-block-start: var(--size-base);
   --form-fieldset-border-width: .0625rem;
-  --form-fieldset-legend-background-color: transparent;
-  --form-fieldset-legend-color: var(--text-color);
   --form-group-padding-block: 0 var(--size-base);
   --form-input-group-background-color: transparent;
   --form-label-color: var(--text-color);
   --form-label-font-size: var(--font-size-sm);
   --form-label-font-weight: var(--font-weight-semibold);
+  --form-legend-background-color: transparent;
+  --form-legend-color: var(--text-color);
   --form-user-info-color: var(--text-muted);
   --form-user-info-font-size: var(--font-size-xs);
   --grid-cols: 3;
@@ -181,9 +181,17 @@
   --sdt-pagination-border: var(--btn-border-width) var(--neutral-base);
   --sdt-pagination-padding-block: var(--size-xxs);
   --sdt-pagination-padding-inline: var(--size-xs);
-  --sdt-thead-hover-background-color: color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-base));
+  --sdt-thead-hover-background-color: calc(color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-base)));
   --secondary-base: #650853;
   --secondary-on-base: #fff;
+  --sf-macro-btn-close-background-color: var(--body-background-color);
+  --sf-macro-btn-close-size: 2rem;
+  --sf-macro-rows-border: 1px solid var(--neutral-base);
+  --sf-macro-rows-border-radius: var(--radius-xs);
+  --sf-macro-rows-even-background-color: var(--body-background-color);
+  --sf-macro-rows-hover-background-color: calc(color-mix(in srgb, var(--body-background-color) 95%, #000));
+  --sf-macro-rows-margin-block-end: var(--size-base);
+  --sf-macro-rows-padding: var(--size-xs);
   --size-2xl: 3rem;
   --size-3xl: 4rem;
   --size-base: 1rem;
@@ -196,18 +204,22 @@
   --spinner-color: var(--primary-base);
   --spinner-size: var(--size-lg);
   --spinner-stroke-width: .125rem;
+  --status-danger-background-color: var(--status-danger-color);
   --status-danger-border-color: var(--status-danger-color);
   --status-danger-color: #c00;
-  --status-danger-fg: #fff;
+  --status-danger-foreground: #fff;
+  --status-info-background-color: var(--status-info-color);
   --status-info-border-color: var(--status-info-color);
   --status-info-color: #0665c5;
-  --status-info-fg: #fff;
+  --status-info-foreground: #fff;
+  --status-success-background-color: var(--status-success-color);
   --status-success-border-color: var(--status-success-color);
   --status-success-color: #046d19;
-  --status-success-fg: #fff;
+  --status-success-foreground: #fff;
+  --status-warning-background-color: var(--status-warning-color);
   --status-warning-border-color: var(--status-warning-color);
   --status-warning-color: #fc0;
-  --status-warning-fg: #4f2900;
+  --status-warning-foreground: #4f2900;
   --table-body-border-width: .0625rem;
   --table-body-tr-alt-bg-color: #efefef;
   --table-body-tr-hover-bg-color: #cbcbcb;

package/src/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>

package/src/web-components/simple-datatable/simple-datatable.js

@@ -6,8 +6,8 @@ import { parseCols } from './src/parse-cols.js';
 
 import * as styles from './simple-datatable.module.css';
 
-import caretLeftIcon from './icons/caret-left.svg?inline';
-import caretRightIcon from './icons/caret-right.svg?inline';
+import caretLeftIcon from '../../icons/caret-left.svg?inline';
+import caretRightIcon from '../../icons/caret-right.svg?inline';
 
 // TODO possibilità di definizione cols anche da js. In questo caso, in presenza ANCHE dell'attributo, deve prevalere quest'ultimo