diff --git a/src/scss/components/file/_hx-drop-fence.scss b/src/scss/components/file/_hx-drop-fence.scss index 96514c62f..749e82b0e 100644 --- a/src/scss/components/file/_hx-drop-fence.scss +++ b/src/scss/components/file/_hx-drop-fence.scss @@ -1,6 +1,7 @@ hx-drop-fence { @include box-size(md); + border: 1px dashed $gray-600; border: 1px dashed var(--hxFile-hxDropFence-border, $gray-600); display: block; font-size: 0.875rem; diff --git a/src/scss/components/file/_hx-drop-zone.scss b/src/scss/components/file/_hx-drop-zone.scss index 253fac9ba..c836b439c 100644 --- a/src/scss/components/file/_hx-drop-zone.scss +++ b/src/scss/components/file/_hx-drop-zone.scss @@ -5,6 +5,7 @@ hx-drop-zone { position: relative; &::after { + border: 4px dashed $blue-500; border: 4px dashed var(--hxFile-hxDropZone-after-border, $blue-500); content: ""; display: none; diff --git a/src/scss/components/file/_hx-file-control.scss b/src/scss/components/file/_hx-file-control.scss index 2628482f7..304b0d4be 100644 --- a/src/scss/components/file/_hx-file-control.scss +++ b/src/scss/components/file/_hx-file-control.scss @@ -48,6 +48,7 @@ hx-file-control > input[type="file"]:active { // ========== DISABLED ========== hx-file-control > input[type="file"]:disabled { ~ label { + color: $gray-700; color: var(--hxFile-hxFileControl-disabled-label-color, $gray-700); > hx-file-input { diff --git a/src/scss/components/file/_hx-file-tile.scss b/src/scss/components/file/_hx-file-tile.scss index 023e1290c..c22583533 100644 --- a/src/scss/components/file/_hx-file-tile.scss +++ b/src/scss/components/file/_hx-file-tile.scss @@ -1,17 +1,21 @@ hx-file-tile { + background-color: $gray-50; background-color: var(--hxFile-hxFileTile-bgcolor, $gray-50); border-radius: 2px; border: 2px solid transparent; + color: $gray-900; color: var(--hxFile-hxFileTile-color, $gray-900); display: block; height: 3.75rem; width: 25rem; // 400px &[progress] { + color: $gray-600; color: var(--hxFile-hxFileTile-progress-color, $gray-600); } &[invalid] { + border-color: $red-status-900; border-color: var(--hxFile-hxFileTile-invalid-border-color, $red-status-900); } }