@agorapulse/ui-theme 16.1.4 → 16.1.6

package/assets/desktop_variables.css

@@ -82,6 +82,7 @@
   --ref-color-menthol-80: #1DBEB0;
   --ref-color-menthol-100: #0FA09B;
   --ref-color-menthol-150: #057E7A;
+  --ref-color-web-100: #1F1F1F;
   --ref-color-facebook-10: #e7f1fd;
   --ref-color-facebook-100: #0866FF;
   --ref-color-instagram-10: #fbe9f1;
@@ -333,6 +334,7 @@
   --comp-input-text-font-weight: 400;
   --comp-input-text-line-height: 18px;
   --comp-input-text-default-color: #344563;
+  --comp-input-text-disabled-color: #5D6A82;
   --comp-input-text-placeholder-color: #858FA1;
   --comp-forms-label-font-family: Averta;
   --comp-forms-label-size: 14px;
@@ -376,6 +378,7 @@
   --comp-text-area-text-font-weight: 400;
   --comp-text-area-text-line-height: 18px;
   --comp-text-area-text-default-color: #344563;
+  --comp-text-area-text-disabled-color: #5D6A82;
   --comp-text-area-text-placeholder-color: #858FA1;
   --comp-label-text-style-font-family: Averta;
   --comp-label-text-style-size: 14px;

package/assets/mobile_variables.css

@@ -82,6 +82,7 @@
   --ref-color-menthol-80: #1DBEB0;
   --ref-color-menthol-100: #0FA09B;
   --ref-color-menthol-150: #057E7A;
+  --ref-color-web-100: #1F1F1F;
   --ref-color-facebook-10: #e7f1fd;
   --ref-color-facebook-100: #0866FF;
   --ref-color-instagram-10: #fbe9f1;
@@ -333,6 +334,7 @@
   --comp-input-text-font-weight: 400;
   --comp-input-text-line-height: 18px;
   --comp-input-text-default-color: #344563;
+  --comp-input-text-disabled-color: #5D6A82;
   --comp-input-text-placeholder-color: #858FA1;
   --comp-forms-label-font-family: Averta;
   --comp-forms-label-size: 14px;
@@ -376,6 +378,7 @@
   --comp-text-area-text-font-weight: 400;
   --comp-text-area-text-line-height: 18px;
   --comp-text-area-text-default-color: #344563;
+  --comp-text-area-text-disabled-color: #5D6A82;
   --comp-text-area-text-placeholder-color: #858FA1;
   --comp-label-text-style-font-family: Averta;
   --comp-label-text-style-size: 14px;

package/assets/style/components-custom-style/_input.scss

@@ -35,7 +35,7 @@ textarea {
     // Disabled
     &:disabled {
         background-color: var(--comp-input-fill-disabled-color);
-        color: var(--comp-input-border-disabled-color);
+        color: var(--comp-input-text-disabled-color);
     }
     // Focus
     &:focus:not(.transparent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agorapulse/ui-theme",
-  "version": "16.1.4",
+  "version": "16.1.6",
   "description": "Agorapulse UI Theme Library",
   "repository": {
     "type": "git",

package/src/tokens/components/input.json

@@ -90,6 +90,11 @@
                         "value": "{sys.text.color.default}"
                     }
                 },
+                "disabled": {
+                    "color":  {
+                        "value": "{ref.color.grey.80}"
+                    }  
+                },
                 "placeholder": {
                     "color":  {
                         "value": "{ref.color.grey.60}"
@@ -283,6 +288,11 @@
                         "value": "{sys.text.color.default}"
                     }
                 },
+                "disabled": {
+                    "color":  {
+                        "value": "{ref.color.grey.80}"
+                    }  
+                },
                 "placeholder": {
                     "color":  {
                         "value": "{ref.color.grey.60}"

package/src/tokens/reference/color.json

@@ -101,6 +101,9 @@
                 "20" : { "value": "#CFECEA" },
                 "10" : { "value": "#F1F9F8" }
             },
+            "web": {
+                "100" : { "value": "#1F1F1F" }
+            },
             "facebook": {
                 "100" : { "value": "#0866FF" },
                 "10" : { "value": "#e7f1fd" }