@massimo-cassandro/minimo 0.3.6 → 0.4.1

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.6",
+  "version": "0.4.1",
   "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/{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/css/forms/form-group.css

@@ -11,7 +11,7 @@
   &:has(textarea) {
     height: 100%;
   }
-
+  
   .grid & {
     padding-block-end: 0;
   }

package/src/css/forms/forms.css

@@ -4,7 +4,7 @@
 /* TODO classe grid specifica per i form ?? (.form-grid?) */
 /* TODO customizable select */
 
-.form-group:has([required]) .form-label {
+.form-group:has([required]):not(:has([disabled])) .form-label {
   position: relative;
   padding-inline-start: var(--size-base);
   &::before {
@@ -45,17 +45,23 @@
   }
 
   &[disabled] {
-    /* color: $form-select-disabled-color;
-    background-color: $form-select-disabled-bg;
-    border-color: $form-select-disabled-border-color; */
+    color: var(--form-control-disabled-color);
+    /* border-color: $form-select-disabled-border-color; */
     background-color: var(--form-control-disabled-background-color);
-    /* opacity: .6; */
-    &::placeholder {
-      font-style: italic;
+    &, &::placeholder {
+      font-style: var(--form-control-disabled-font-style);
     }
   }
 }
 
+.form-group:has([disabled]) {
+  opacity: var(--form-control-disabled-opacity);
+  .form-label {
+    font-style: var(--form-control-disabled-font-style);
+    color: var(--form-control-disabled-color);
+  }
+}
+
 .form-control, .form-control-static {
 
   padding: var(--form-control-padding-block) var(--form-control-padding-inline);

package/src/custom-properties-default.css

@@ -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);
@@ -96,7 +96,9 @@
   --form-control-border-color: #666;
   --form-control-border-radius: var(--radius-xxs);
   --form-control-border-width: .0625rem;
-  --form-control-disabled-background-color: #999;
+  --form-control-disabled-background-color: #ddd;
+  --form-control-disabled-color: #999;
+  --form-control-disabled-font-style: italic;
   --form-control-disabled-opacity: .3;
   --form-control-focus-color: hsl(205 69% 45% / .508);
   --form-control-focus-outline-width: .25rem;
@@ -181,7 +183,7 @@
   --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);
@@ -189,7 +191,7 @@
   --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: color-mix(in srgb, var(--body-background-color) 95%, #000);
+  --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;

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
 

package/src/web-components/simple-datatable/simple-datatable.module.css

@@ -80,19 +80,19 @@
 
   &:not(.sortAscending):not(.sortDescending){
     .sortBtn::after {
-      content: url('./icons/arrows-down-up.svg?cssInline');
+      content: url('../../icons/arrows-down-up.svg?cssInline');
       opacity: .4;
     }
   }
 }
 .sortAscending {
   .sortBtn::after {
-    content: url('./icons/arrow-up.svg?cssInline');
+    content: url('../../icons/arrow-up.svg?cssInline');
   }
 }
 .sortDescending {
   .sortBtn::after {
-    content: url('./icons/arrow-down.svg?cssInline');
+    content: url('../../icons/arrow-down.svg?cssInline');
   }
 }
 

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

@@ -6,8 +6,8 @@ import { classnames } from '@massimo-cassandro/js-utilities/index.js';
 
 import * as styles from '../simple-datatable.module.css';
 
-import checkIcon from '../icons/check-bold.svg?inline';
-import xIcon from '../icons/x-bold.svg?inline';
+import checkIcon from '../../../icons/check-bold.svg?inline';
+import xIcon from '../../../icons/x-bold.svg?inline';
 
 // col_obj è l'oggetto che descrive una singola colonna del datatable
 // vine utilizzato per produrre l'oggetto columns di simple-datatable

package/src/design-tokens/TODO.md

@@ -1,2 +0,0 @@
-* conversione in js?
-* automatizzare la creazione di proprietà ricorrenti (es il padding)

package/src/design-tokens/alerts.minimo.tokens.jsonc

@@ -1,25 +0,0 @@
-{
-  "alert": {
-    "border": {
-      "radius": {
-        "$value": "{radius.sm}",
-        "$type": "dimension"
-      },
-    },
-
-    "box-shadow": {
-      // "$type": "string",
-      // "$value": "none"
-      "$type": "shadow",
-      "$value": [
-        {
-          "offsetX": 0,
-          "offsetY": 0,
-          "blur": "8px",
-          "spread": 0,
-          "color": "oklch(0 0 0 / 0.5)"
-        }
-      ]
-    }
-  }
-}

package/src/design-tokens/size.minimo.tokens.jsonc

@@ -1,101 +0,0 @@
-{
-
-
-  // in attesa di modifica dello script per il parser automatico delle espressioni
-  // NB: "$type": "string" necessario, dimension converte i valori come se fossero px
-  "size": {
-    "xs": {
-      "$value": ".5rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "md": {
-      "$value": "1.2rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "3xl": {
-      "$value": "4rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "2xl": {
-      "$value": "3rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "base": {
-      "$value": "1rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "lg": {
-      "$value": "1.5rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "xxs": {
-      "$value": ".25rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "xl": {
-      "$value": "2rem",
-      "$type": "dimension",
-      "$description": ""
-    },
-    "sm": {
-      "$value": ".75rem",
-      "$type": "dimension",
-      "$description": ""
-    }
-  },
-
-  // "size": {
-  //   "xxs": {
-  //     "$value": "{size.base} * .25",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "xs": {
-  //     "$value": "{size.base} * .5",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "sm": {
-  //     "$value": "{size.base} * .75",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "base": {
-  //     "$value": "1rem",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "md": {
-  //     "$value": "{size.base} * 1.2",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "lg": {
-  //     "$value": "{size.base} * 1.5",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "xl": {
-  //     "$value": "{size.base} * 2",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "2xl": {
-  //     "$value": "{size.base} * 3",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   },
-  //   "3xl": {
-  //     "$value": "{size.base} * 4",
-  //     "$type": "dimension",
-  //     "$description": ""
-  //   }
-  // }
-}