refactor: wt-datepicker colors [WTEL-3926]

webitel · Dec 1, 2023 · 16493df · 16493df
1 parent 4ed6a22
commit 16493df
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 109 deletions.
diff --git a/docs/pages/webitel-ui/components/wt-datepicker/Readme.md b/docs/pages/webitel-ui/components/wt-datepicker/Readme.md
@@ -0,0 +1,31 @@
+<script setup>
+import Docs from './wt-datepicker-docs.vue';
+import ExampleDatepicker from './examples/example-datepicker.vue';
+import ExampleDatepickerDatetimeMode from './examples/example-datepicker-datetime-mode.vue';
+</script>
+
+# WtDatepicker
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example Datepicker
+::: raw
+<ExampleDatepicker/>
+:::
+
+::: details Code
+<<< ./examples/example-datepicker.vue
+:::
+
+## Example Datepicker Datetime Mode
+::: raw
+<ExampleDatepickerDatetimeMode/>
+:::
+
+::: details Code
+<<< ./examples/example-datepicker-datetime-mode.vue
+:::
+
diff --git a/docs/pages/webitel-ui/components/wt-datepicker/examples/example-datepicker-datetime-mode.vue b/docs/pages/webitel-ui/components/wt-datepicker/examples/example-datepicker-datetime-mode.vue
@@ -0,0 +1,19 @@
+<script setup>
+
+import { ref } from 'vue';
+
+const value = ref(Date.now());
+</script>
+
+<template>
+  <wt-datepicker
+    :value="value"
+    label="Date Time picker"
+    mode="datetime"
+    @input="value = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-datepicker/examples/example-datepicker.vue b/docs/pages/webitel-ui/components/wt-datepicker/examples/example-datepicker.vue
@@ -0,0 +1,18 @@
+<script setup>
+
+import { ref } from 'vue';
+
+const value = ref(Date.now());
+</script>
+
+<template>
+  <wt-datepicker
+    :value="value"
+    label="Datepicker"
+    @input="value = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-datepicker/wt-datepicker-docs.vue b/docs/pages/webitel-ui/components/wt-datepicker/wt-datepicker-docs.vue
@@ -1,105 +1,83 @@
 <template>
-  <section>
-    <h2>Datepicker</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-datepicker
-          v-model="value"
-          label="Datepicker"
-        />
-        <pre><code class="language-html">&lt;wt-datepicker v-model="value" label="Datepicker"&gt;&lt;/wt-datepicker&gt;</code></pre>
-        <span>value: {{ value }}</span>
-      </div>
-      <div class="example-wrapper">
-        <wt-datepicker
-          v-model="value"
-          mode="datetime"
-          label="Datepicker"
-        />
-        <pre><code class="language-html">&lt;wt-datepicker v-model="value" label="Datepicker" mode="datetime"&gt;&lt;/wt-datepicker&gt;</code></pre>
-        <span>value: {{ value }}</span>
-      </div>
-    </article>
-    <h3>
-      Full docs: <a
-        class="full-docs-link"
-        href="https://vue3datepicker.com/"
-      >Vue
-        Datepicker</a>
-    </h3>
-    <component-model
-      prop="value"
-      event="input"
-    />
-    <component-props
-      :properties="properties"
-    />
-    <component-events
-      :events="events"
-    />
-    <component-slots
-      :slots="slots"
-    />
-  </section>
+  <h3>
+    Full docs: <a
+    class="full-docs-link"
+    href="https://vue3datepicker.com/"
+  >Vue
+    Datepicker</a>
+  </h3>
+  <component-model
+    prop="value"
+    event="input"
+  />
+  <component-props
+    :properties="properties"
+  />
+  <component-events
+    :events="events"
+  />
+  <component-slots
+    :slots="slots"
+  />
 </template>
 
 <script>
-  import Prism from 'prismjs';
+import Prism from 'prismjs';
 
-  export default {
-    name: 'WtDatepickerDocs',
-    data: () => ({
-      value: Date.now(),
-      properties: [
-        {
-          value: 'value',
-          code: '<wt-datepicker :value="value"></wt-datepicker>',
-          type: "['String', 'Number'] -- timestamp",
-          default: 'Date.now()',
-        },
-        {
-          value: 'label',
-          code: '<wt-datepicker label="Label"></wt-datepicker>',
-          type: 'String',
-          default: '',
-        },
-        {
-          value: 'disabled',
-          code: '<wt-datepicker disabled></wt-datepicker>',
-          type: 'Boolean',
-          default: 'false',
-        },
-        {
-          value: 'labelProps',
-          code: '<wt-checkbox :label-props="{}"></wt-checkbox>',
-          type: 'Object',
-          description: 'Object with props, passed down to wt-label as props',
-        },
-        {
-          value: 'PLUS ALL VUE DATEPICKER NATIVE PROPS',
-          description: 'All passed but not declared props are passed to <vue-datepicker> component as attributes',
-        },
-      ],
-      events: [
-        {
-          value: 'input',
-          params: [
-            { name: 'timestamp value', type: 'Number' },
-          ],
-        },
-      ],
-      slots: [
-        {
-          name: 'label',
-          scope: [{ name: 'label' }],
-          description: 'Custom label slot',
-        },
-      ],
-    }),
-    mounted() {
-      Prism.highlightAll();
-    },
-  };
+export default {
+  name: 'WtDatepickerDocs',
+  data: () => ({
+    value: Date.now(),
+    properties: [
+      {
+        value: 'value',
+        code: '<wt-datepicker :value="value"></wt-datepicker>',
+        type: '[\'String\', \'Number\'] -- timestamp',
+        default: 'Date.now()',
+      },
+      {
+        value: 'label',
+        code: '<wt-datepicker label="Label"></wt-datepicker>',
+        type: 'String',
+        default: '',
+      },
+      {
+        value: 'disabled',
+        code: '<wt-datepicker disabled></wt-datepicker>',
+        type: 'Boolean',
+        default: 'false',
+      },
+      {
+        value: 'labelProps',
+        code: '<wt-checkbox :label-props="{}"></wt-checkbox>',
+        type: 'Object',
+        description: 'Object with props, passed down to wt-label as props',
+      },
+      {
+        value: 'PLUS ALL VUE DATEPICKER NATIVE PROPS',
+        description: 'All passed but not declared props are passed to <vue-datepicker> component as attributes',
+      },
+    ],
+    events: [
+      {
+        value: 'input',
+        params: [
+          { name: 'timestamp value', type: 'Number' },
+        ],
+      },
+    ],
+    slots: [
+      {
+        name: 'label',
+        scope: [{ name: 'label' }],
+        description: 'Custom label slot',
+      },
+    ],
+  }),
+  mounted() {
+    Prism.highlightAll();
+  },
+};
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/wt-datepicker/_variables.scss b/src/components/wt-datepicker/_variables.scss
@@ -34,23 +34,23 @@
 }
 
 .dp__theme_light {
-  --dp-background-color: var(--main-color);
-  --dp-text-color: var(--contrast-color);
-  --dp-hover-color: var(--secondary-color-50);
-  --dp-hover-text-color: var(--contrast-color);
-  --dp-hover-icon-color: var(--icon-color--hover);
+  --dp-background-color: var(--content-wrapper-color);
+  --dp-text-color: var(--text-main-color);
+  //--dp-hover-color: var(--secondary-color-50);
+  //--dp-hover-text-color: var(--contrast-color);
+  --dp-hover-icon-color: var(--icon-btn-hover-color);
   --dp-primary-color: var(--primary-color);
-  --dp-primary-text-color: var(--main-color);
+  --dp-primary-text-color: var(--primary-on-color);
   --dp-secondary-color: var(--secondary-color);
-  --dp-border-color: var(--form-border-color);
+  --dp-border-color: var(--wt-text-field-input-border-color);
   --dp-menu-border-color: transparent;
-  --dp-border-color-hover: var(--form-border--hover-color);
-  --dp-disabled-color: var(--disabled-color);
+  //--dp-border-color-hover: var(--form-border--hover-color);
+  --dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
+  --dp-success-color: var(--success-color);
+  --dp-icon-color: var(--icon-color);
+  --dp-danger-color: var(--error-color);
   //--dp-scroll-bar-background: #f3f3f3;
   //--dp-scroll-bar-color: #959595;
-  --dp-success-color: var(--true-color);
   //--dp-success-color-disabled: #a3d9b1;
-  --dp-icon-color: var(--icon-color);
-  --dp-danger-color: var(--false-color);
   //--dp-highlight-color: rgba(25, 118, 210, 0.1);
 }