@massimo-cassandro/minimo 0.4.2 → 0.5.0

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

@@ -40,6 +40,7 @@ const PENPOT_TRANSFORMS = [
  *                                                   Collected from sd.allTokens after SD initialisation.
  *                                                   Ignored when penpotDestFile is set.
  * @param {'keep'|'calc'|'resolve'} opts.penpotExpressions  How to handle math expressions in dimension tokens.
+ * @param {string[]}        opts.colorScalePrefixes  Color token prefixes for numeric scale zero-padding.
  * @returns {object} platforms object ready for Style Dictionary config
  */
 export const buildPlatforms = ({
@@ -49,6 +50,7 @@ export const buildPlatforms = ({
   penpotDestFile,
   penpotFormat,
   penpotExpressions = 'keep',
+  colorScalePrefixes = [],
   concreteFilePaths = [],
 }) => {
   const platforms = {
@@ -62,6 +64,7 @@ export const buildPlatforms = ({
           options: {
             outputReferences: true,
             showFileHeader: true,
+            colorScalePrefixes,
           },
         },
       ],
@@ -72,7 +75,7 @@ export const buildPlatforms = ({
     platforms.penpot = {
       buildPath: penpotBuildPath + '/',
       transforms: PENPOT_TRANSFORMS,
-      files: buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions),
+      files: buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions, colorScalePrefixes),
     };
   }
 

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

@@ -28,6 +28,7 @@ import {
   penpotDestFile,
   penpotFormat,
   penpotExpressions,
+  colorScalePrefixes,
   source,
 } from './build-tokens-src/config.mjs';
 
@@ -71,6 +72,7 @@ const sd = new StyleDictionary({
     penpotDestFile,
     penpotFormat,
     penpotExpressions,
+    colorScalePrefixes,
     concreteFilePaths,
   }),
 });
@@ -94,7 +96,7 @@ console.log(styleText(['yellow'], `[build-tokens] source      : ${source.map(sho
 console.log(styleText(['yellow'], `[build-tokens] dest file   : ${short(path.join(buildPath, destFile))}`));
 
 if (penpotBuildPath) {
-  const penpotFiles = buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions);
+  const penpotFiles = buildPenpotFiles(concreteFilePaths, penpotDestFile, penpotFormat, penpotExpressions, colorScalePrefixes);
   if (penpotFiles.length === 1) {
     console.log(styleText(['yellow'],
       `[build-tokens] penpot json : ${short(path.join(penpotBuildPath, penpotFiles[0].destination))}`

package/design-tokens-utilities/check-unresolved-custom-props.mjs

@@ -8,17 +8,18 @@
 //
 // Usage: node check-unresolved-custom-props.mjs --config ./path/to/config.mjs
 
-// TODO rimuovere/non generare file result se vuoto
+
+/* globals process */
 
 import path from 'path';
 import fs from 'node:fs';
-import { fileURLToPath, pathToFileURL } from 'url';
-import { dirname } from 'path';
+import { /* fileURLToPath,  */pathToFileURL } from 'url';
+// import { dirname } from 'path';
 import { glob } from 'node:fs/promises';
 import { styleText, parseArgs } from 'node:util';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname  = dirname(__filename);
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname  = dirname(__filename);
 
 // ---------------------------------------------------------------------------
 // 1. Parse flags
@@ -118,15 +119,21 @@ async function run() {
       `${unresolved_props.length} unresolved custom properties found -> ${path.relative(process.cwd(), result_file)}`
     ));
 
-    fs.writeFileSync(
-      result_file,
-      unresolved_props
-        .map(item =>
-          `* [${path.basename(item.file)} :: ${item.line}](${item.file}#L${item.line}) -> var(${item.prop})`
-        )
-        .join('\n'),
-      'utf-8'
-    );
+    if(unresolved_props.length) {
+      fs.writeFileSync(
+        result_file,
+        unresolved_props
+          .map(item =>
+            `* [${path.basename(item.file, '.css')}](${item.file}#L${item.line}) -> \`${item.prop}\``
+          )
+          .join('\n'),
+        'utf-8'
+      );
+    } else {
+      if (fs.existsSync(result_file)) {
+        fs.unlinkSync(result_file);
+      }
+    }
 
     console.log(styleText(['green'], '**** DONE ****'));
 

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

@@ -75,6 +75,12 @@ const config = {
   //               e.g. {size.base} = 16px, "{size.base} * .25" -> "4px"
   penpotExpressions: 'resolve',
 
+  // Color token prefixes for which the numeric scale segment is zero-padded
+  // to 3 digits in both CSS output and Penpot token files.
+  // e.g. --neutral-80 -> --neutral-080, --primary-5 -> --primary-005
+  // Set to an empty array or omit to disable.
+  colorScalePrefixes: ['primary', 'secondary', 'neutral'],
+
   // ---------------------------------------------------------------------------
   // check-unresolved-custom-props.mjs settings
   // ---------------------------------------------------------------------------

package/package.json

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

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-foreground);
+  --malert-success-color-fg: var(--status-success-fg);
 
   --malert-info-color: var(--status-info-color);
-  --malert-info-color-fg: var(--status-info-foreground);
+  --malert-info-color-fg: var(--status-info-fg);
 
   --malert-warning-color: var(--status-warning-color);
-  --malert-warning-color-fg: var(--status-warning-foreground);
+  --malert-warning-color-fg: var(--status-warning-fg);
 
   --malert-error-color: var(--status-danger-color);
-  --malert-error-color-fg: var(--status-danger-foreground);
+  --malert-error-color-fg: var(--status-danger-fg);
 
   --malert-confirm-color: var(--status-warning-color);
-  --malert-confirm-color-fg: var(--status-warning-foreground);
+  --malert-confirm-color-fg: var(--status-warning-fg);
 
   /* --malert-marks-stroke-width: 6px; */
   --malert-backdrop: rgb(0 0 0 / .3);

package/src/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(--neutral-base);
+    border: 1px solid var(--neutral-100);
     border-radius: 50%;
     box-shadow: var(--shadow-3);
 

package/src/components/recaptcha/recaptcha.css

@@ -50,7 +50,7 @@
       left: 50%;
       display: block;
       padding: var(--size-xs);
-      color: var(--recaptcha-alert-foreground, #fff);
+      color: var(--recaptcha-alert-fg, #fff);
       background-color: var(--recaptcha-alert-background-color, #000);
       border: .5px solid currentColor;
       border-radius: var(--radius-xs);

package/src/components/sf-macro/readme.md

@@ -0,0 +1,55 @@
+# sf-macro
+
+
+## Usage
+
+```javascript
+import { sf_macro } from '@minimo/components/sf-macro/sf-macro.js';
+
+sf_macro({
+  wrapper_selector: '.sf-macro-wrapper',
+  row_selector: '.sf-macro-riga',
+  add_callback: null,
+  del_callback: null
+});
+```
+
+## Twig macro
+
+```twig
+<fieldset class="sf-macro-wrapper">
+  <legend>XXXXX</legend>
+
+  {%- macro makeRow(row) -%}
+    {% set anno = row.vars.value.anno %}
+
+    <div class="sf-macro-riga">
+      <div class="grid">
+
+        {{ form_row(row.__field__, {
+          label: "__label__",
+          attr: {}
+        }) }}
+
+      </div> {# end .grid #}
+
+      <button type="button" class="btn-reset sf-macro-close-btn" aria-label="Elimina riga">
+        Elimina riga
+      </button>
+    </div> {# end .sf-macro-riga #}
+  {%- endmacro -%}
+  {% import _self as m %}
+
+  <div class="my-3 sf-macro-container" data-template="{{-
+    m.makeRow(form.ciclo.vars.prototype)|e('html_attr')
+  -}}">
+    {% for row in form.ciclo %}
+      {{ m.makeRow(row) }}
+    {% endfor %}
+  </div>
+
+  <div class="mt text-right">
+    <button type="button" class="btn btn-outline-secondary sf-macro-riga-add">Aggiungi XXX</button>
+  </div>
+</fieldset>
+```

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

@@ -38,6 +38,19 @@
   border: var(--sf-macro-rows-border);
   border-radius: var(--sf-macro-rows-border-radius);
 
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    text-indent: -999em;
+    /* TODO content nelle custom properties */
+    content: url(../../icons/x-bold.svg?cssInline);
+    translate: -50% -50%;
+  }
+
   &:nth-child(even) {
     background-color: var(--sf-macro-rows-even-background-color);
   }

package/src/css/alerts.css

@@ -26,24 +26,24 @@
 
   /* alert-error / alert-danger (default) */
   --_alert-bg-color: var(--status-danger-background-color);
-  --_alert-fg-color: var(--status-danger-foreground);
+  --_alert-fg-color: var(--status-danger-fg);
   --_alert-border-color: var(--status-danger-border-color);
 
   position: relative;
 
   &.alert-warning, &.alert-notice {
     --_alert-bg-color: var(--status-warning-color);
-    --_alert-fg-color: var(--status-warning-foreground);
+    --_alert-fg-color: var(--status-warning-fg);
     --_alert-border-color: var(--status-warning-border-color);
   }
   &.alert-info {
     --_alert-bg-color: var(--status-info-color);
-    --_alert-fg-color: var(--status-info-foreground);
+    --_alert-fg-color: var(--status-info-fg);
     --_alert-border-color: var(--status-info-border-color);
   }
   &.alert-success {
     --_alert-bg-color: var(--status-success-color);
-    --_alert-fg-color: var(--status-success-foreground);
+    --_alert-fg-color: var(--status-success-fg);
     --_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-foreground);
+    --_fg: var(--status-success-fg);
     --_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-foreground);
+    --_fg: var(--status-info-fg);
     --_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-foreground);
+    --_fg: var(--status-danger-fg);
     --_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-foreground);
+    --_fg: var(--status-warning-fg);
     --_btn-bg-color: var(--_bg);
     --_btn-fg-color: var(--_fg);
     --_btn-border-color: var(--status-warning-border-color);

package/src/css/forms/form-disabled-readonly.css

@@ -0,0 +1,41 @@
+
+.form-control {
+
+  &[disabled] {
+    color: var(--form-control-disabled-color);
+    /* border-color: $form-select-disabled-border-color; */
+    cursor: not-allowed;
+    background-color: var(--form-control-disabled-background-color);
+    
+    &, &::placeholder {
+      font-style: var(--form-control-disabled-font-style);
+    }
+  }
+
+  &[readonly] {
+    color: var(--form-control-readonly-color);
+    pointer-events: none;
+    user-select: none;
+    background-color: var(--form-control-readonly-background-color);
+  }
+
+}
+
+.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);
+    }
+  }
+
+  &:has([readonly]) {
+    opacity: var(--form-control-readonly-opacity);
+    .form-label {
+      font-style: var(--form-control-readonly-font-style);
+      color: var(--form-control-readonly-color);
+    }
+  }
+
+}

package/src/css/forms/forms.css

@@ -43,26 +43,9 @@
   &:focus {
     outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
   }
-
-  &[disabled] {
-    color: var(--form-control-disabled-color);
-    /* border-color: $form-select-disabled-border-color; */
-    cursor: not-allowed;
-    background-color: var(--form-control-disabled-background-color);
-    
-    &, &::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 {
 
@@ -116,7 +99,7 @@ select.form-control, .form-select {
 
 input[type='checkbox'] {
   color: var(--form-control-text-color);
-  accent-color: var(--accent-base);
+  accent-color: var(--accent-100);
   transform-origin: center;
   scale: 1.3;
 }
@@ -158,3 +141,4 @@ textarea.form-control {
   flex: 1;
 }
 
+

package/src/custom-properties-default.css

@@ -1,10 +1,10 @@
 :root {
-  --accent-base: #567d0d;
-  --accent-on-base: #fff;
+  --accent-100: #567d0d;
+  --accent-100-fg: #fff;
   --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-background-color: var(--primary-100);
+  --badge-color: var(--primary-100-fg);
   --badge-font-size: var(--font-size-xs);
   --badge-font-weight: var(--font-weight-semibold);
   --badge-lg-font-size: var(--font-size-base);
@@ -47,9 +47,9 @@
   --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-background-color: var(--primary-100);
   --btn-primary-border-color: var(--btn-primary-background-color);
-  --btn-primary-color: var(--primary-on-base);
+  --btn-primary-color: var(--primary-100-fg);
   --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);
@@ -99,7 +99,7 @@
   --form-control-disabled-background-color: #ddd;
   --form-control-disabled-color: #999;
   --form-control-disabled-font-style: italic;
-  --form-control-disabled-opacity: .3;
+  --form-control-disabled-opacity: .7;
   --form-control-focus-color: hsl(205 69% 45% / .508);
   --form-control-focus-outline-width: .25rem;
   --form-control-font-size: var(--font-size-base);
@@ -118,6 +118,10 @@
   --form-control-placeholder-font-size: var(--form-control-font-size);
   --form-control-placeholder-font-style: italic;
   --form-control-placeholder-opacity: .8;
+  --form-control-readonly-background-color: var(--form-control-background-color);
+  --form-control-readonly-color: #666;
+  --form-control-readonly-font-style: italic;
+  --form-control-readonly-opacity: 1;
   --form-control-required-flag-color: #c00;
   --form-control-required-flag-content: '\002A';
   --form-control-select-trigger-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E');
@@ -162,11 +166,12 @@
   --link-focus-outline-color: var(--link-color);
   --link-focus-outline-width: .125rem;
   --link-visited-color: #ae0da3;
-  --neutral-base: #666;
-  --neutral-on-base: #fff;
+  --neutral-100: #666;
+  --neutral-100-fg: #fff;
   --overlay-color: rgb(0 0 0 / .6);
-  --primary-base: #083865;
-  --primary-on-base: #fff;
+  --primary-100: #083865;
+  --primary-100-fg: #fff;
+  --primary-080: #0957a0;
   --radius-base: var(--size-base);
   --radius-lg: var(--size-lg);
   --radius-md: var(--size-md);
@@ -176,19 +181,19 @@
   --radius-xs: var(--size-xs);
   --radius-xxs: var(--size-xxs);
   --recaptcha-alert-background-color: #000;
-  --recaptcha-alert-foreground: #fff;
+  --recaptcha-alert-fg: #fff;
   --recaptcha-alert-overlay-color: rgb(0 0 0 / .5);
   --sdt-hover-background-color: var(--btn-primary-background-color);
   --sdt-hover-color: var(--btn-primary-color);
-  --sdt-pagination-border: var(--btn-border-width) var(--neutral-base);
+  --sdt-pagination-border: var(--btn-border-width) var(--neutral-100);
   --sdt-pagination-padding-block: var(--size-xxs);
   --sdt-pagination-padding-inline: var(--size-xs);
-  --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;
+  --sdt-thead-hover-background-color: calc(color-mix(in srgb, var(--table-thead-background-color) 90%, var(--accent-100)));
+  --secondary-100: #650853;
+  --secondary-100-fg: #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: 1px solid var(--neutral-100);
   --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));
@@ -203,25 +208,25 @@
   --size-xl: 2rem;
   --size-xs: .5rem;
   --size-xxs: .25rem;
-  --spinner-color: var(--primary-base);
+  --spinner-color: var(--primary-100);
   --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-foreground: #fff;
+  --status-danger-fg: #fff;
   --status-info-background-color: var(--status-info-color);
   --status-info-border-color: var(--status-info-color);
   --status-info-color: #0665c5;
-  --status-info-foreground: #fff;
+  --status-info-fg: #fff;
   --status-success-background-color: var(--status-success-color);
   --status-success-border-color: var(--status-success-color);
   --status-success-color: #046d19;
-  --status-success-foreground: #fff;
+  --status-success-fg: #fff;
   --status-warning-background-color: var(--status-warning-color);
   --status-warning-border-color: var(--status-warning-color);
   --status-warning-color: #fc0;
-  --status-warning-foreground: #4f2900;
+  --status-warning-fg: #4f2900;
   --table-body-border-width: .0625rem;
   --table-body-tr-alt-bg-color: #efefef;
   --table-body-tr-hover-bg-color: #cbcbcb;
@@ -233,7 +238,7 @@
   --table-thead-border-width: .1875rem;
   --text-color: #000;
   --text-dim: var(--text-muted);
-  --text-muted: var(--neutral-base);
+  --text-muted: var(--neutral-100);
   --text-negative: #fff;
   --text-selected-background-color: #ddd;
   --text-selected-text: var(--body-text);

package/src/index-template.css

@@ -18,8 +18,10 @@
 /* @import '@minimo/css/forms/fieldset.css'; */
 /* @import '@minimo/css/forms/form-group.css'; */
 /* @import '@minimo/css/forms/input-group.css'; */
+/* @import '@minimo/css/forms/form-disabled-readonly.css'; */
 /* @import '@minimo/css/forms/validation.css'; */
 /* @import '@minimo/css/forms/form-utilities.css'; */
+
 @import '@minimo/css/buttons/buttons.css';
 /* @import '@minimo/css/buttons/status-buttons.css'; */
 /* @import '@minimo/css/buttons/btn-close.css'; */
@@ -30,7 +32,6 @@
 /* @import '@minimo/css/alerts.css'; */
 /* @import '@minimo/css/icons.css'; */
 @import '@minimo/css/svg.css';
-@import '@minimo/css/overlay.css';
 /* @import '@minimo/css/table.css'; */
 /* @import '@minimo/css/flex.css'; */
 /* @import '@minimo/css/grid.css'; */
@@ -38,9 +39,6 @@
 /* @import '@minimo/css/utilities.css'; */
 
 
-/* componenti */
-/* @import '@minimo/components/spinner/spinner-circle-basic.css'; */
-/* @import '@minimo/components/modal-alert/modal-alert.css'; */
 
 /* file progetto */
 /* @import '@src/path_to/layout.css'; */

package/design-tokens-src/color-accent.minimo.tokens.jsonc

@@ -1,13 +0,0 @@
-{
-  "accent": {
-    "base": {
-      "$value": "#567d0d",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-
-}

package/design-tokens-src/color-neutral.minimo.tokens.jsonc

@@ -1,12 +0,0 @@
-{
-  "neutral": {
-    "base": {
-      "$value": "#666",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-}

package/design-tokens-src/color-primary.minimo.tokens.jsonc

@@ -1,12 +0,0 @@
-{
-  "primary": {
-    "base": {
-      "$value": "#083865",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-}

package/design-tokens-src/color-secondary.minimo.tokens.jsonc

@@ -1,12 +0,0 @@
-{
-  "secondary": {
-    "base": {
-      "$value": "#650853",
-      "$type": "color"
-    },
-    "on-base": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-}