upd(mox:upload): add light mode for mox:upload comp.

addon/components/mox/upload.hbs

@@ -1,12 +1,19 @@
 <div data-test-mox-upload ...attributes>
   <div class="flex items-center justify-between" data-test-mox-upload-description>
     {{#if @label}}
-      <Mox::Label class="text-white" for={{concat "credential-paste-field-" this.fieldName}} @isRequired={{true}} data-test-mox-upload-label>
+      <Mox::Label
+        for={{concat "credential-paste-field-" this.fieldName}}
+        @isRequired={{true}}
+        data-test-mox-upload-label
+      >
         {{@label}}
       </Mox::Label>
     {{/if}}
     {{#if @format}}
-      <span class="text-xs text-white text-right">
+      <span
+        class="text-xs text-gray-800 dark:text-white text-right"
+        data-test-mox-upload-format-requirements
+      >
         {{@format}}
         and .txt format required
       </span>
@@ -15,16 +22,27 @@
   {{#if (not this.isPasting)}}
     <div
       class="flex items-center justify-center
-        {{if @isCompact "p-2" "p-4"}}
-         text-center rounded border border-gray-400 space-x-1"
+        {{if @isCompact 'p-2' 'p-4'}}
+        text-center rounded border space-x-1 text-gray-800 dark:text-white border-gray-400 dark:border-gray-500 focus:border-cyan-500 focus:ring-cyan-500"
+      data-test-mox-upload-start-upload
     >
-      <button class="text-cyan-500 font-semibold" data-test-mox-upload-paste type="button" {{on "click" (fn (mut this.isPasting) true)}}>
+      <button
+        class="font-semibold {{this.ctaClasses}}"
+        data-test-mox-upload-paste
+        type="button"
+        {{on "click" (fn (mut this.isPasting) true)}}
+      >
         Paste text
       </button>
-      <span class="text-white">
+      <span>
         or
       </span>
-      <button class="text-cyan-500 font-semibold" data-test-mox-upload-file-upload type="button" {{on "click" this.clickHiddenFileInput}}>
+      <button
+        class="font-semibold {{this.ctaClasses}}"
+        data-test-mox-upload-file-upload
+        type="button"
+        {{on "click" this.clickHiddenFileInput}}
+      >
         browse file
       </button>
     </div>
@@ -36,7 +54,12 @@
       @onInput={{@onInput}}
       data-test-mox-upload-paste-field
     />
-    <button class="text-xs text-cyan-500 font-semibold" type="button" {{on "click" this.clickHiddenFileInput}} data-test-mox-upload-go-back-to-file-upload>
+    <button
+      class="text-xs {{this.ctaClasses}} font-semibold"
+      type="button"
+      {{on "click" this.clickHiddenFileInput}}
+      data-test-mox-upload-go-back-to-file-upload
+    >
       Browse file
     </button>
   {{/if}}
@@ -48,4 +71,4 @@
     {{on "change" this.handleFileInput}}
     data-test-mox-upload-file-upload-field
   />
-</div>
+</div>

addon/components/mox/upload.js

@@ -11,6 +11,9 @@ export default class MoxUploadComponent extends Component {
   @tracked
   pastingValue = '';
 
+  ctaClasses =
+    'text-cyan-700 dark:text-cyan-500 hover:text-cyan-500 focus:text-cyan-500 hover:dark:text-white focus:dark:text-white transition duration-300';
+
   get fieldName() {
     let label = this.args.label || 'file-upload';
     return dasherize(label);

stories/mox-upload-light.stories.js

@@ -0,0 +1,52 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@ember/object';
+
+export default {
+  title: 'Mox Light/Mox::Upload',
+  parameters: {
+    backgrounds: {
+      default: 'Mute',
+      values: [
+        {
+          name: 'White',
+          value: '#ffffff',
+        },
+        {
+          name: 'Mute',
+          value: '#F3F4F6',
+        },
+      ],
+    },
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`<div class="w-72">
+    <Mox::Upload @isActive={{this.isActive}}
+      @label={{this.label}}
+      @format={{this.format}}
+      @isCompact={{this.isCompact}}
+      @onInput={{this.inputAction}} />
+    </div>`,
+  context: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Pokemon',
+  format: '.jpeg',
+  isCompact: false,
+  inputAction: action(function (value) {
+    this.set('currentValue', value);
+  }),
+};
+
+export const Compact = Template.bind({});
+Compact.args = {
+  label: 'Digimon',
+  format: '.csv,.png',
+  isCompact: true,
+  inputAction: action(function (value) {
+    this.set('currentValue', value);
+  }),
+};

stories/mox-upload.stories.js

@@ -6,12 +6,22 @@ export default {
   parameters: {
     backgrounds: {
       default: 'Dark',
+      values: [
+        {
+          name: 'Dark',
+          value: '#111827',
+        },
+        {
+          name: 'Sky',
+          value: '#06B6D4',
+        },
+      ],
     },
   },
 };
 
 const Template = (args) => ({
-  template: hbs`<div class="w-72">
+  template: hbs`<div class="dark w-72">
     <Mox::Upload @isActive={{this.isActive}}
       @label={{this.label}}
       @format={{this.format}}

tests/integration/components/mox/upload-test.js

@@ -129,17 +129,89 @@ module('Integration | Component | mox/upload', function (hooks) {
     assert.dom('[data-test-mox-upload-paste-field]').hasValue('Caperezoson');
   });
 
-  test('it is accessible', async function (assert) {
-    await render(hbs`
-      <div class="bg-gray-900">
-        <Mox::Upload
-          @label="Charizard"
-          @format=".pdf"
-          @onInput={{this.dummyAction}} />
-      </div>
-    `);
+  module('dark mode', function () {
+    test('it renders correctly', async function (assert) {
+      await render(hbs`
+        <div class="dark bg-gray-900">
+          <Mox::Upload
+            @label="Charizard"
+            @format=".pdf"
+            @onInput={{this.dummyAction}} />
+        </div>
+      `);
+
+      assert
+        .dom('[data-test-mox-upload-label]')
+        .hasStyle({ color: 'rgb(209, 213, 219)' });
+      assert
+        .dom('[data-test-mox-upload-start-upload]')
+        .hasStyle({ borderColor: 'rgb(107, 114, 128)' });
+      assert
+        .dom('[data-test-mox-upload-paste]')
+        .hasStyle({ color: 'rgb(6, 182, 212)' });
+      assert
+        .dom('[data-test-mox-upload-file-upload]')
+        .hasStyle({ color: 'rgb(6, 182, 212)' });
+      assert
+        .dom('[data-test-mox-upload-format-requirements]')
+        .hasStyle({ color: 'rgb(255, 255, 255)' });
+    });
 
-    await a11yAudit();
-    assert.ok(true, 'it is accessible');
+    test('it is accessible', async function (assert) {
+      await render(hbs`
+        <div class="dark bg-gray-900">
+          <Mox::Upload
+            @label="Charizard"
+            @format=".pdf"
+            @onInput={{this.dummyAction}} />
+        </div>
+      `);
+
+      await a11yAudit();
+      assert.ok(true, 'it is accessible');
+    });
+  });
+
+  module('light mode', function () {
+    test('it renders correctly', async function (assert) {
+      await render(hbs`
+        <div class="bg-gray-50">
+          <Mox::Upload
+            @label="Charizard"
+            @format=".pdf"
+            @onInput={{this.dummyAction}} />
+        </div>
+      `);
+
+      assert
+        .dom('[data-test-mox-upload-label]')
+        .hasStyle({ color: 'rgb(55, 65, 81)' });
+      assert
+        .dom('[data-test-mox-upload-start-upload]')
+        .hasStyle({ borderColor: 'rgb(156, 163, 175)' });
+      assert
+        .dom('[data-test-mox-upload-paste]')
+        .hasStyle({ color: 'rgb(14, 116, 144)' });
+      assert
+        .dom('[data-test-mox-upload-file-upload]')
+        .hasStyle({ color: 'rgb(14, 116, 144)' });
+      assert
+        .dom('[data-test-mox-upload-format-requirements]')
+        .hasStyle({ color: 'rgb(31, 41, 55)' });
+    });
+
+    test('it is accessible', async function (assert) {
+      await render(hbs`
+        <div class="bg-gray-50">
+          <Mox::Upload
+            @label="Charizard"
+            @format=".pdf"
+            @onInput={{this.dummyAction}} />
+        </div>
+      `);
+
+      await a11yAudit();
+      assert.ok(true, 'it is accessible');
+    });
   });
 });