@massimo-cassandro/minimo 0.5.3 → 0.5.5

package/design-tokens/form-validation.minimo.tokens.jsonc

@@ -0,0 +1,22 @@
+// -----------------------------------------------------------------------
+// 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>
+// -----------------------------------------------------------------------
+{
+  "form": {
+    "validation": {
+      "outline": {
+        "width": {
+          "$type": "dimension",
+          "$value": "3px"
+        },
+        "offset": {
+          "$type": "dimension",
+          "$value": "-3px"
+        }
+      }
+    }
+  }
+}

package/design-tokens/form.minimo.tokens.jsonc

@@ -186,6 +186,10 @@
           "width": {
             "$type": "dimension",
             "$value": "4px"
+          },
+          "offset": {
+            "$type": "dimension",
+            "$value": "-2px"
           }
         }
       },

package/design-tokens-src/form-validation.minimo.tokens.mjs

@@ -0,0 +1,16 @@
+export default {
+  form: {
+    validation: {
+      outline: {
+        width: {
+          $type: 'dimension',
+          $value: '3px'
+        },
+        offset: {
+          $type: 'dimension',
+          $value: '-3px'
+        }
+      }
+    }
+  }
+};

package/design-tokens-src/form.minimo.tokens.mjs

@@ -189,6 +189,10 @@ export default {
           width: {
             $value: '4px',
             $type: 'dimension'
+          },
+          offset: {
+            $value: '-2px',
+            $type: 'dimension'
           }
         }
       },

package/package.json

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

package/src/css/forms/forms.css

@@ -42,6 +42,7 @@
 
   &:focus {
     outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
+    outline-offset: var(--form-control-focus-outline-offset);
   }
 }
 

package/src/css/forms/input-group.css

@@ -21,7 +21,7 @@
     font-size: var(--btn-font-size);
     background-color: var(--form-input-group-background-color);
     border: 1px solid var(--form-control-border-color);
-    border-radius: var(--btn-border-radius);
+    border-radius: var(--form-control-border-radius);
   }
 
   > .btn, .input-group-text {

package/src/css/forms/validation.css

@@ -11,14 +11,16 @@
   .form-label {
     color: var(--_status-color);
   }
+
+  /* TODO .form-select è necessario? */
   .form-control, .form-select {
-    outline: 2px solid var(--_status-color);
-    outline-offset: 2px;
+    outline: var(--form-validation-outline-width) solid var(--_status-color);
+    outline-offset: var(--form-validation-outline-offset);
 
     &:focus {
       /* background-color: var(--_status-color); */
-      outline: var(--btn-focus-outline-width) solid var(--_status-color);
-      outline-offset: 0;
+      outline: var(--form-control-focus-outline-width) solid var(--_status-color);
+      outline-offset: var(--form-control-focus-outline-offset);
     }
   }
 

package/src/custom-properties-default.css

@@ -101,6 +101,7 @@
   --form-control-disabled-font-style: italic;
   --form-control-disabled-opacity: .7;
   --form-control-focus-color: hsl(205 69% 45% / .508);
+  --form-control-focus-outline-offset: -.125rem;
   --form-control-focus-outline-width: .25rem;
   --form-control-font-size: var(--font-size-base);
   --form-control-font-style: normal;
@@ -149,6 +150,8 @@
   --form-legend-color: var(--text-color);
   --form-user-info-color: var(--text-muted);
   --form-user-info-font-size: var(--font-size-xs);
+  --form-validation-outline-offset: -.1875rem;
+  --form-validation-outline-width: .1875rem;
   --grid-cols: 3;
   --grid-min-col-width: 6rem;
   --headings-color: var(--text-color);