fix: change color of progressbar and progress indicator, add warning variant of banner, change warning color in light mode

Author: Afriq Yasin Ramadhan

packages/tailwind-preset/index.js

@@ -102,7 +102,7 @@ module.exports = {
         'state-emphasis': theme.colors.gray[0],
         'info'          : theme.colors.blue[60],
         'success'       : theme.colors.green[60],
-        'warning'       : theme.colors.orange[70],
+        'warning'       : theme.colors.orange[60],
         'danger'        : theme.colors.red[60],
         'dark'          : {
           'DEFAULT'       : theme.colors.gray[0],

src/components/banner/Banner.vue

@@ -30,7 +30,8 @@
 
 <script lang="ts" setup>
 import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
-import IconDanger from '@privyid/persona-icon/vue/exclamation-circle-solid/20.vue'
+import IconDanger from '@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue'
+import IconWarning from '@privyid/persona-icon/vue/exclamation-circle-solid/20.vue'
 import IconClose from '@privyid/persona-icon/vue/close/16.vue'
 import type {
   PropType,
@@ -41,8 +42,9 @@ import { ref, computed } from 'vue-demi'
 import type { StyleVariant } from '.'
 
 const BannerIcons = {
-  danger: IconDanger,
-  info  : IconInfo,
+  danger : IconDanger,
+  info   : IconInfo,
+  warning: IconWarning,
 }
 
 const props = defineProps({
@@ -184,6 +186,16 @@ defineSlots<{
     }
   }
 
+  &&--warning {
+    @apply bg-warning;
+    @apply dark:bg-dark-warning;
+
+    .banner__icon {
+      @apply text-warning;
+      @apply dark:text-dark-warning;
+    }
+  }
+
   &__body {
     @apply grow text-sm;
   }

src/components/banner/index.md

@@ -133,14 +133,19 @@ description: Alert to convey information or actions
 
 ## Variants
 
-Banner have 2 variants: `info` and `danger`, default is `info`
+Banner have 3 variants: `info`, `warning` and `danger`, default is `info`
 
 <preview class="flex-col space-y-3">
   <p-banner variant="info">
     Every sign will requires privy balance.
     Please make sure you have enough privy balance
     before sign the document(s)
   </p-banner>
+  <p-banner variant="warning">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
   <p-banner variant="danger">
     Every sign will requires privy balance.
     Please make sure you have enough privy balance
@@ -155,6 +160,11 @@ Banner have 2 variants: `info` and `danger`, default is `info`
     Please make sure you have enough privy balance
     before sign the document(s)
   </p-banner>
+  <p-banner variant="warning">
+    Every sign will requires privy balance.
+    Please make sure you have enough privy balance
+    before sign the document(s)
+  </p-banner>
   <p-banner variant="danger">
     Every sign will requires privy balance.
     Please make sure you have enough privy balance
@@ -246,7 +256,7 @@ Banner use local CSS variables on `.banner` for enhanced real-time customization
 
 | Props               |   Type    | Default | Description                                     |
 |---------------------|:---------:|:-------:|-------------------------------------------------|
-| `variant`           | `String`  | `info`  | Banner variant, valid value is `info`, `danger` |
+| `variant`           | `String`  | `info`  | Banner variant, valid value is `info`, `warning` & `danger` |
 | `dismissable`       | `Boolean` | `true`  | Show / Hide dismiss button                      |
 | `backgroundUrl`     | `String`  |    -    | Custom background image of banner               |
 | `backgroundDarkUrl` | `String`  |    -    | Custom background image of banner in Dark Mode  |

src/components/banner/index.ts

@@ -1 +1 @@
-export type StyleVariant = 'info' | 'danger'
+export type StyleVariant = 'info' | 'danger' | 'warning'

src/components/dropdown/index.md

@@ -9,6 +9,7 @@ description: Base dropdown button, suit for action menus
   import pDropdown from "./Dropdown.vue"
   import pDropdownItem from "./DropdownItem.vue"
   import pDropdownHeader from './DropdownHeader.vue'
+  import pAccordionItem from '../accordion/AccordionItem.vue'
   import Banner from '../banner/Banner.vue'
   import pCheckbox from '../checkbox/Checkbox.vue'
   import pRadio from '../radio/Radio.vue'
@@ -19,6 +20,7 @@ description: Base dropdown button, suit for action menus
 
   const show     = ref(false)
   const selected = ref('')
+  const sample = ref(false)
 </script>
 
 # Dropdown

src/components/input/index.md

@@ -10,6 +10,7 @@ description: Base text-input form.
   import IconCheck from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
   import IconEmail from '@privyid/persona-icon/vue/email/20.vue'
   import PSpinner from '../spinner/Spinner.vue'
+  import PBanner from '../banner/Banner.vue'
 
   const value  = ref('')
   const result = ref('')
@@ -105,6 +106,10 @@ Add clear button to input with prop `clearable`.
 ## Prepend & Append
 Input has append & prepend feature to place content inside input field. But the content that can be inserted is limited, which is only an icon.
 
+<p-banner :dismissable="false">
+  When the prepend of <code>Textfield</code> was an icon, the color of icon must be <code>fg.subtle</code> (<code>.text-subtle</code>) and or <code>fg.subtlest</code> (<code>.text-subtlest</code>).
+</p-banner>
+
 ### Prepend
 <preview class="flex-col space-y-3">
   <p-input>
@@ -136,6 +141,10 @@ Input has append & prepend feature to place content inside input field. But the
 
 ### Append
 
+<p-banner :dismissable="false" class="mt-4">
+  When the append of <code>Textfield</code> was an icon, the color of icon must be <a href="/design-system/foundation/colors/#brand">brand</a> and or <a href="/design-system/foundation/colors/#foregrounds">state(roles)</a> foregrounds. The spinner (circle loading) of <code>Textfield</code> must be <a href="/design-system/foundation/colors/#brand">brand</a>, <code>fg.subtle</code> (<code>.text-subtle</code>) and or <code>fg.subtlest</code> (<code>.text-subtlest</code>).
+</p-banner>
+
 <preview class="flex-col space-y-3">
   <p-input>
     <template #append>

src/components/progress-indicator/ProgressIndicator.vue

@@ -84,18 +84,25 @@ function setValue (value: number) {
 
 <style lang="postcss">
 .progress-indicator {
+  --p-bg-indicator-item: theme(backgroundColor.subtle.alpha);
+  --p-bg-dark-indicator-item: theme(backgroundColor.dark.subtle.alpha);
+  --p-bg-indicator-item-active: theme(backgroundColor.brand.accent);
+  --p-bg-dark-indicator-item-active: theme(backgroundColor.dark.brand.accent);
+
   @apply relative;
 
   &__container {
     @apply flex flex-1;
   }
 
   &__item {
-    @apply bg-gray-50/30 cursor-pointer;
+    @apply bg-[color:var(--p-bg-indicator-item)] cursor-pointer;
+    @apply dark:bg-[color:var(--p-bg-dark-indicator-item)];
 
     &--active {
       @apply absolute top-0 left-0 transition-transform;
-      @apply bg-gray-50 pointer-events-none;
+      @apply bg-[color:var(--p-bg-indicator-item-active)] pointer-events-none;
+      @apply dark:bg-[color:var(--p-bg-dark-indicator-item-active)];
     }
   }
 

src/components/progress/Progress.vue

@@ -111,8 +111,8 @@ const item = computed<ProgressLabel>(() => {
   }
 
   &__point {
-    @apply w-7 h-7 rounded-full bg-subtle flex items-center justify-center text-default;
-    @apply dark:bg-dark-subtle dark:text-dark-default;
+    @apply w-7 h-7 rounded-full bg-[color:var(--p-bg-bar-normal-state)] flex items-center justify-center text-default;
+    @apply dark:bg-[color:var(--p-bg-dark-bar-normal-state)] dark:text-dark-default;
   }
 
   &__bar {

src/components/progressbar/Progressbar.vue

@@ -69,8 +69,12 @@ const classNames = computed(() => {
 
 <style lang="postcss">
 .progressbar {
-  @apply bg-base w-full h-1 rounded-full overflow-hidden;
-  @apply dark:bg-dark-base;
+  /* --p-bg-progress-default: theme(backgroundColor.base.DEFAULT); */
+  --p-bg-progress-default: theme(backgroundColor.subtle.alpha);
+  --p-bg-dark-progress-default: theme(backgroundColor.dark.subtle.alpha);
+
+  @apply bg-[color:var(--p-bg-progress-default)] w-full h-1 rounded-full overflow-hidden;
+  @apply dark:[color:var(--p-bg-dark-progress-default)];
 
   &__bar {
     @apply transition-[width] will-change-[width] duration-75 ease-out;

src/components/spinner/SpinnerRing.spec.ts

@@ -10,5 +10,5 @@ it('should render properly without any props', () => {
   const spinner = screen.getByTestId('spinner')
 
   expect(spinner).toBeInTheDocument()
-  expect(spinner).toHaveClass('spinner', 'spinner-ring')
+  expect(spinner).toHaveClass('spinner', 'spinner--ring')
 })