Merge pull request #1017 from IgniteUI/apetrov/improving-file-input-samples

refactor(file-input): improving file input styling sample

Author: simeonoff

package-lock.json

@@ -42,7 +42,7 @@
     "core-js": "^3.6.5",
     "file-saver": "^2.0.2",
     "igniteui-dockmanager": "1.16.0",
-    "igniteui-webcomponents": "6.1.0",
+    "igniteui-webcomponents": "6.1.2",
     "igniteui-webcomponents-charts": "6.0.0",
     "igniteui-webcomponents-core": "6.0.0",
     "igniteui-webcomponents-dashboards": "6.0.0",

package.json

@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "6.1.0",
+    "igniteui-webcomponents": "6.1.2",
     "lit": "^3.2.0",
     "lit-html": "^3.2.0",
     "tslib": "^2.0.0"

samples/inputs/file-input/styling/package.json

@@ -1,24 +1,24 @@
-igc-file-input {
-    --blackground: var(--ig-primary-700);
-    --foreground: var(--ig-primary-700-contrast);
+igc-file-input::part(label) {
+    color: var(--ig-gray-600);
 }
 
-igc-file-input:focus::part(suffix),
-igc-file-input::part(file-selector-button),
 igc-file-input::part(suffix) {
-    /* Style the file selector button */
-    --input-prefix-background: var(--blackground);
-    --input-prefix-color: var(--foreground);
-
-    /* Style the custom suffix */
-    --input-suffix-background: var(--blackground);
-    --input-suffix-background--focused: var(--blackground);
-    --input-suffix-background--filled: var(--blackground);
-
-    color: var(--foreground);
+    background: var(--ig-primary-700);
+    color: var(--ig-primary-700-contrast);
 }
 
-igc-file-input::part(label) {
-    color: var(--ig-gray-600);
+igc-file-input::part(file-names) {
+    --file-names-foreground: var(--ig-gray-400);
+    --file-names-foreground--filled: var(--ig-gray-900);
+
+    background: var(--ig-primary-50);
 }
 
+igc-file-input::part(file-selector-button) {
+    --file-selector-button-foreground: var(--ig-primary-700-contrast);
+    --file-selector-button-background: var(--ig-primary-700);
+    --file-selector-button-foreground--focused: var(--ig-primary-900-contrast);
+    --file-selector-button-background--focused: var(--ig-primary-900);
+    --file-selector-button-foreground--filled: var(--ig-primary-700-contrast);
+    --file-selector-button-background--filled: var(--ig-primary-700);
+}