@massimo-cassandro/minimo 1.20.15 → 1.20.16

package/design-tokens/_src/link.minimo.tokens.mjs

@@ -1,5 +1,17 @@
 export default {
   link: {
+    font: {
+      weight: {
+        $type: 'string',
+        $value: '{font.weight.semibold}',
+      }
+    },
+    text: {
+      decoration: {
+        $type: 'string',
+        $value: 'none',
+      },
+    },
     color: {
       $type: 'color',
       $value: '#0d12ae'
@@ -11,29 +23,48 @@ export default {
       },
     },
     hover: {
-      color: null
+      color: {
+        $type: 'color',
+        $value: '{link.color}'
+      },
+      text: {
+        decoration: {
+          $type: 'string',
+          $value: 'underline',
+        },
+        underline: {
+          offset: {
+            $type: 'dimension',
+            $value: '2px',
+          }
+        }
+      }
     },
     focus: {
       outline: {
         color: {
           $type: 'color',
-          $value: '{link.color}'
+          $value: 'color-mix(in srgb, {link.color} 60%, transparent)'
         },
         width: {
           $type: 'dimension',
           $value: '2px'
         },
+        offset: {
+          $type: 'dimension',
+          $value: '2px'
+        },
       }
     },
     active: {
       color: {
         $type: 'color',
-        $value: '#51054C'
+        $value: '{body.background.color}'
       },
       background: {
         color: {
           $type: 'color',
-          $value: 'transparent'
+          $value: '{primary.100}'
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.20.15",
+  "version": "1.20.16",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

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

@@ -99,27 +99,27 @@ const defaults = {
 /**
  * @typedef {Object} ModalAlertParams
  * @property {string} [type] - Dialog type: `success`, `error`, `warning`, `info`, or `confirm`.
- * @property {string | null} [extraClass] - optional dialog extra class
+ * @property {string | null} [title] - title text
+ * @property {string | null} [mes] - text message (plain or html)
+ * @property {((arg?: *) => void) | null} [callback] - optional callback dialog after user choice
+ * @property {number | null} [timer] - timer for autoclose (ms). `null` for disable
  * @property {(() => void) | null} [onOpen] - optional callback on dialog open
  * @property {(() => void) | null} [onClose] - optional callback on dialog close
+ * @property {string | null} [extraClass] - optional dialog extra class
+ * @property {string} [okBtnText] - text for 'ok' button
+ * @property {string} [okBtnClass] - alternative class for 'ok' button. It replaces the default one
+ * @property {string} [cancelBtnText] - text for 'cancel' button
+ * @property {string} [cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
+ * @property {boolean} [cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
+ * @property {string | null} [headingClass] - optional extra class for heading
+ * @property {DomBuilderItem | null} [extraBtn] - optional extra button (as domBuilder object)
+ * @property {boolean} [extraBtnFocus] - true if the extra button should be focused when the dialog box opens (overrides any focus assigned to the 'cancel' button)
  * @property {boolean} [animation] - if true, dialog will be animated
  * @property {boolean} [showMarks] - if true, mark iconswill be showed
- * @property {((arg?: *) => void) | null} [callback] - optional callback dialog after user choice
- * @property {number | null} [timer] - timer for autoclose (ms). `null` for disable
- * @property {string | null} [title] - title text
- * @property {string | null} [mes] - text message (plain or html)
- * @property {string | null} [headingClass] - optional extra class for heading
  * @property {string | null} [textClass] - optional extra class for text
  * @property {string | null} [icon] - Icon markup used for the dialog; defaults to the type's icon.
  * @property {string | null} [altIcon] - Alternate icon markup, used instead of `icon` when `useAltIcon` is `true`.
  * @property {boolean} [useAltIcon] - When `true`, uses `altIcon` instead of `icon` (e.g. the `danger` icon on a `warning` dialog, or the `warning` icon on a `confirm` dialog).
- * @property {DomBuilderItem | null} [extraBtn] - optional extra button (as domBuilder object)
- * @property {boolean} [extraBtnFocus] - true if the extra button should be focused when the dialog box opens (overrides any focus assigned to the 'cancel' button)
- * @property {string} [okBtnText] - text for 'ok' button
- * @property {string} [okBtnClass] - alternative class for 'ok' button. It replaces the default one
- * @property {string} [cancelBtnText] - text for 'cancel' button
- * @property {string} [cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
- * @property {boolean} [cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
  */
 
 /**

package/src/css/{anchors.css → links.css}

@@ -3,9 +3,9 @@
 a:link, .btn-link {
   /* TODO rivedere, forse più complicato del necessario */
   &:not(.btn) {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--link-font-weight);
     color: var(--link-color);
-    text-decoration: none;
+    text-decoration: var(--link-text-decoration);
   }
 }
 
@@ -25,21 +25,21 @@ a:not(.btn), .btn-link {
   }
 
   &:focus-visible {
-    outline: 1px solid color-mix(in srgb, var(--link-color) 60%, transparent);
-    outline-offset: 2px;
+    outline: var(--link-focus-outline-width) solid color-mix(in srgb, var(--link-focus-outline-color) 60%, transparent);
+    outline-offset: var(--link-focus-outline-offset);
   }
   @media (hover: hover) {
     &:hover {
-      text-decoration: underline;
-      text-underline-offset: 2px;
+      color: var(--link-hover-color);
+      text-decoration: var(--link-hover-text-decoration);
+      text-underline-offset: var(--link-hover-text-underline-offset);
     }
   }
   &:active {
     /* TODO rivedere, sostituire con colori specifici da custom props */
     /* stylelint-disable-next-line declaration-no-important */
-    color: var(--body-background-color) !important;
-    outline: 2px solid var(--link-color);
-    background-color: var(--link-color);
+    color: var(--link-active-color) !important;
+    background-color: var(--link-active-background-color);
     offset: 0;
   }
 }

package/src/custom-properties.css

@@ -219,11 +219,17 @@
   --line-height-sm: 1.4;
   --line-height-xs: 1.25;
 
-  --link-active-background-color: transparent;
-  --link-active-color: #51054c;
+  --link-active-background-color: var(--primary-100);
+  --link-active-color: var(--body-background-color);
   --link-color: #0d12ae;
-  --link-focus-outline-color: var(--link-color);
+  --link-focus-outline-color: color-mix(in srgb, var(--link-color) 60%, transparent);
+  --link-focus-outline-offset: 2px;
   --link-focus-outline-width: 2px;
+  --link-font-weight: var(--font-weight-semibold);
+  --link-hover-color: var(--link-color);
+  --link-hover-text-decoration: underline;
+  --link-hover-text-underline-offset: 2px;
+  --link-text-decoration: none;
   --link-visited-color: #ae0da3;
 
   --malert-backdrop: rgb(0 0 0 / .7);

package/src/minimo.css

@@ -24,7 +24,7 @@
 
 @import '@minimo/css/badge.css';
 @import '@minimo/css/text.css';
-@import '@minimo/css/anchors.css';
+@import '@minimo/css/links.css';
 @import '@minimo/css/headings.css';
 @import '@minimo/css/alerts.css';
 @import '@minimo/css/icons.css';