@massimo-cassandro/minimo 0.10.3 → 0.10.5

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

@@ -37,6 +37,12 @@
       }
     },
     "control": {
+      "accent": {
+        "color": {
+          "$type": "color",
+          "$value": "{accent.100}"
+        }
+      },
       "static": {
         "color": {
           "$type": "color",

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

@@ -33,6 +33,14 @@ export default {
     },
 
     control: {
+
+      accent: {
+        color: {
+          $value: '{accent.100}',
+          $type: 'color'
+        }
+      },
+
       static: {
         color: {
           $value: '{form.control.text.color}',

package/package.json

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

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

@@ -3,10 +3,9 @@
 
   &[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);
     }

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

@@ -8,10 +8,10 @@
   justify-content: stretch;
   padding-block: var(--form-group-padding-block);
 
-  &:has(textarea) {
+  /* &:has(textarea) {
     height: 100%;
-  }
-  
+  } */
+
   .grid & {
     padding-block-end: 0;
   }

package/src/css/forms/forms.css

@@ -38,8 +38,8 @@
   color: var(--form-label-color);
 }
 
-/* la classe form-select è mantenuta per compatibilità con bootstrap  */
-.form-control, .form-control-static, .form-select {
+
+.form-control, .form-control-static {
   display: block;
   width: 100%;
   font-family: var(--font-family);
@@ -47,6 +47,7 @@
   font-weight: var(--font-weight-regular);
   line-height: var(--form-control-line-height);
   color: var(--form-control-text-color);
+  accent-color: var(--form-control-accent-color);
   background-color: var(--form-control-background-color);
   border: 1px solid var(--form-control-border-color);
   border-radius: var(--form-control-border-radius);
@@ -87,9 +88,8 @@
 }
 
 /* da bootstrap */
-select.form-control, .form-select {
+select.form-control {
 
-  /* --_form-select-trigger-icon-color: var(--form-control-text-color); */
   --_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
   --_bg-img-inline-size: 16px;
 
@@ -146,10 +146,9 @@ input::-webkit-calendar-picker-trigger-icon { /* solo in chromium, non in safari
 }
 
 
-
-
 textarea.form-control {
   flex: 1;
+  min-height: calc(3.5lh + var(--form-control-padding-block) * 2);
 }
 
 

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

@@ -8,7 +8,7 @@
   justify-content: center;
   width: 100%;
 
-  > .form-control, > .form-select {
+  > .form-control {
     z-index: 2;
     flex: 1;
     border-inline-end: none;

package/src/css/forms/validation.css

@@ -13,8 +13,7 @@
     color: var(--_status-color);
   }
 
-  /* TODO .form-select è necessario? */
-  .form-control, .form-select, .form-control-static {
+  .form-control, .form-control-static {
     outline: var(--form-validation-outline-width) solid var(--_status-color);
     outline-offset: var(--form-validation-outline-offset);
 

package/src/custom-properties-default.css

@@ -107,6 +107,7 @@
   --font-weight-xbold: 900;
   --font-weight-xlight: 200;
   --font-weight-xxlight: 100;
+  --form-control-accent-color: var(--accent-100);
   --form-control-background-color: var(--body-background-color);
   --form-control-border-color: #666;
   --form-control-border-radius: var(--radius-xxs);