feat: (add darkmode version of filterbar, form-group, heading, input,…

… input-file, input-group, input-password, input-pin, input-range, label, main, modal, nav, navbar, overlay, page, pagination, pdf-object, pdf-viewer, progress and radio)
privy-open-source · Apr 5, 2023 · 752a4f4 · 752a4f4
1 parent e3eeb82
commit 752a4f4
Show file tree

Hide file tree

Showing 57 changed files with 468 additions and 212 deletions.
diff --git a/packages/tailwind-preset/index.js b/packages/tailwind-preset/index.js
@@ -168,7 +168,7 @@ module.exports = {
           'inverse': theme.colors.gray[0],
           'subtle' : {
             DEFAULT: theme.colors.gray[100],
-            alpha  : `rgba(${theme.colors.gray[70]}, ${theme.opacity[10]})`,
+            alpha  : `rgba(${theme.colors.gray[20]}, ${theme.opacity[10]})`,
           },
           'info': {
             DEFAULT : theme.colors.blue[90],

diff --git a/src/components/avatar/Avatar.vue b/src/components/avatar/Avatar.vue
@@ -135,7 +135,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .avatar {
-  @apply rounded-full inline-flex items-center justify-center overflow-hidden text-subtle dark:text-dark-subtle bg-subtle dark:bg-dark-subtle;
+  @apply rounded-full inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
+  @apply dark:text-dark-subtle dark:bg-dark-subtle;
 
   &__image {
     @apply w-full h-full object-cover;

diff --git a/src/components/badge/Badge.vue b/src/components/badge/Badge.vue
@@ -59,7 +59,7 @@ export default defineComponent({
   * of badge
   */
   --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
-  --p-color-dark-primary-light: lighten(theme(colors.dark.brand.accent), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
 
   @apply inline-block font-bold text-xs px-2 py-0.5 text-on-emphasis dark:text-dark-on-emphasis rounded-full;
 
@@ -74,27 +74,33 @@ export default defineComponent({
       &--default {
         --p-bg-variant-default: theme(backgroundColor.inverse);
         --p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
-        @apply bg-[color:var(--p-bg-variant-default)] dark:bg-[color:var(--p-bg-dark-variant-default)];
+        @apply bg-[color:var(--p-bg-variant-default)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-default)];
       }
 
       &--primary {
-        @apply bg-brand-accent dark:bg-dark-brand-accent;
+        @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
       }
 
       &--info {
-        @apply bg-info-emphasis dark:bg-dark-info-emphasis;
+        @apply bg-info-emphasis;
+        @apply dark:bg-dark-info-emphasis;
       }
 
       &--success {
-        @apply bg-success-emphasis dark:bg-dark-success-emphasis;
+        @apply bg-success-emphasis;
+        @apply dark:bg-dark-success-emphasis;
       }
 
       &--warning {
-        @apply bg-warning-emphasis dark:bg-dark-warning-emphasis;
+        @apply bg-warning-emphasis;
+        @apply dark:bg-dark-warning-emphasis;
       }
 
       &--danger {
-        @apply bg-danger-emphasis dark:bg-dark-danger-emphasis;
+        @apply bg-danger-emphasis;
+        @apply dark:bg-dark-danger-emphasis;
       }
     }
   }
@@ -109,27 +115,33 @@ export default defineComponent({
       &--default {
         --p-color-variant-inverse: theme(textColor.subtle);
         --p-color-dark-variant-inverse: theme(textColor.dark.subtle);
-        @apply text-[color:var(--p-color-variant-inverse)] dark:text-[color:var(--p-color-dark-variant-inverse)];
+        @apply text-[color:var(--p-color-variant-inverse)];
+        @apply dark:text-[color:var(--p-color-dark-variant-inverse)];
       }
 
       &--primary {
-        @apply text-brand-accent dark:text-dark-brand-accent;
+        @apply text-brand-accent;
+        @apply dark:text-dark-brand-accent;
       }
 
       &--info {
-        @apply text-info dark:text-dark-info;
+        @apply text-info;
+        @apply dark:text-dark-info;
       }
 
       &--success {
-        @apply text-success dark:text-dark-success;
+        @apply text-success;
+        @apply dark:text-dark-success;
       }
 
       &--warning {
-        @apply text-warning dark:text-dark-warning;
+        @apply text-warning;
+        @apply dark:text-dark-warning;
       }
 
       &--danger {
-        @apply text-danger dark:text-dark-danger;
+        @apply text-danger;
+        @apply dark:text-dark-danger;
       }
     }
   }
@@ -143,27 +155,33 @@ export default defineComponent({
       &--default {
         --p-bg-variant-light: theme(backgroundColor.subtle.alpha);
         --p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
-        @apply bg-[color:var(--p-bg-variant-light)] dark:bg-[color:var(--p-bg-dark-variant-light)];
+        @apply bg-[color:var(--p-bg-variant-light)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-light)];
       }
 
       &--primary {
-        @apply bg-[color:var(--p-color-primary-light)] dark:bg-[color:var(--p-color-dark-primary-light)];
+        @apply bg-[color:var(--p-color-primary-light)];
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)];
       }
 
       &--info {
-        @apply bg-info dark:bg-dark-info;
+        @apply bg-info;
+        @apply dark:bg-dark-info;
       }
 
       &--success {
-        @apply bg-success dark:bg-dark-success;
+        @apply bg-success;
+        @apply dark:bg-dark-success;
       }
 
       &--warning {
-        @apply bg-warning dark:bg-dark-warning;
+        @apply bg-warning;
+        @apply dark:bg-dark-warning;
       }
 
       &--danger {
-        @apply bg-danger dark:bg-dark-danger;
+        @apply bg-danger;
+        @apply dark:bg-dark-danger;
       }
     }
   }
@@ -173,7 +191,8 @@ export default defineComponent({
   * in inverse and dot variant
   */
   &:where(.badge--variant-inverse, .badge--dot) {
-    @apply bg-default dark:bg-dark-default;
+    @apply bg-default;
+    @apply dark:bg-dark-default;
   }
 
   /**

diff --git a/src/components/banner/Banner.vue b/src/components/banner/Banner.vue
@@ -88,11 +88,13 @@ export default defineComponent({
 
 <style lang="postcss">
 .banner {
-  @apply p-4 flex space-x-2 rounded text-subtle dark:text-dark-subtle;
+  @apply p-4 flex space-x-2 rounded text-subtle;
+  @apply dark:text-dark-subtle;
 
   a {
     &:not(.btn) {
-      @apply underline decoration-solid text-info dark:text-dark-info;
+      @apply underline decoration-solid text-info;
+      @apply dark:text-dark-info;
     }
   }
 
@@ -105,18 +107,22 @@ export default defineComponent({
   }
 
   &&--info {
-    @apply bg-base dark:bg-dark-base;
+    @apply bg-base;
+    @apply dark:bg-dark-base;
 
     .banner__icon {
-      @apply text-info dark:text-dark-info;
+      @apply text-info;
+      @apply dark:text-dark-info;
     }
   }
 
   &&--danger {
-    @apply bg-danger dark:bg-dark-danger;
+    @apply bg-danger;
+    @apply dark:bg-dark-danger;
 
     .banner__icon {
-      @apply text-danger dark:text-dark-danger;
+      @apply text-danger;
+      @apply dark:text-dark-danger;
     }
   }
 
@@ -130,7 +136,8 @@ export default defineComponent({
   }
 
   &__close {
-    @apply cursor-pointer text-default/30 hover:text-default/50 dark:text-dark-default/30 hover:dark:text-dark-default/50;
+    @apply cursor-pointer text-default/30 hover:text-default/50;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 }
 </style>
diff --git a/src/components/breadcrumbs/BreadcrumbItem.vue b/src/components/breadcrumbs/BreadcrumbItem.vue
@@ -84,7 +84,8 @@ export default defineComponent({
     }
 
     & > a {
-      @apply text-subtle dark:text-dark-subtle cursor-pointer underline decoration-solid hover:no-underline;
+      @apply text-subtle cursor-pointer underline decoration-solid hover:no-underline;
+      @apply dark:text-dark-subtle;
     }
 
     & > span {

diff --git a/src/components/breadcrumbs/BreadcrumbItemDropdown.vue b/src/components/breadcrumbs/BreadcrumbItemDropdown.vue
@@ -53,16 +53,19 @@ export default defineComponent({
 .breadcrumbs__item {
   &&--dropdown {
     .dropdown__activator {
-      @apply px-0 text-subtle dark:text-dark-subtle bg-transparent dark:bg-transparent border-transparent dark:border-transparent hover:shadow-none hover:border-transparent hover:dark:border-transparent hover:bg-transparent hover:dark:bg-transparent focus:shadow-none focus:border-transparent focus:dark:border-transparent focus:bg-transparent focus:dark:bg-transparent;
+      @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
+      @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
     }
   }
 
   &&--active {
     .dropdown__activator {
-      @apply text-default dark:text-dark-default;
+      @apply text-default;
+      @apply dark:text-dark-default;
 
       & > .dropdown__caret {
-        @apply text-subtle dark:text-dark-subtle;
+        @apply text-subtle;
+        @apply dark:text-dark-subtle;
       }
     }
   }

diff --git a/src/components/button-group/ButtonGroup.vue b/src/components/button-group/ButtonGroup.vue
@@ -100,7 +100,8 @@ export default defineComponent({
       &.btn--success,
       &.btn--warning,
       &.btn--danger {
-        @apply border-l-subtle-alpha dark:border-l-dark-subtle-alpha;
+        @apply border-l-subtle-alpha;
+        @apply dark:border-l-dark-subtle-alpha;
       }
     }
   }
@@ -126,7 +127,8 @@ export default defineComponent({
     */
     &:not(:first-child) {
       .btn {
-        @apply -ml-[1px] rounded-l-none border-l-subtle-alpha dark:border-l-dark-subtle-alpha;
+        @apply -ml-[1px] rounded-l-none border-l-subtle-alpha;
+        @apply dark:border-l-dark-subtle-alpha;
       }
     }
   }