feat(Pagination): add new color prop

shuriken-ui · Feb 19, 2024 · 1de22ba · 1de22ba
1 parent 7534198
commit 1de22ba
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 15 deletions.
diff --git a/src/plugins/components/pagination/index.ts b/src/plugins/components/pagination/index.ts
@@ -107,19 +107,55 @@ export default plugin(({ addComponents, theme }) => {
           [`@apply border-${config.link.border.inactive.light} dark:border-${config.link.border.inactive.dark}`]:
             {},
         },
-        //Link:active
-        '&.nui-active': {
+      },
+      '&.nui-pagination-primary': {
+        //Link:primary
+        '.nui-pagination-link.nui-active': {
+          //Color
+          [`@apply text-${config.link.font.color.active.primary.light} dark:text-${config.link.font.color.active.primary.dark}`]:
+            {},
+          //Background
+          [`@apply bg-${config.link.background.active.primary.light} dark:bg-${config.link.background.active.primary.dark}`]:
+            {},
+          //Border:active
+          [`@apply border-${config.link.border.active.primary.light} dark:border-${config.link.border.active.primary.dark}`]:
+            {},
+          //Shadow:active
+          [`@apply shadow-${config.link.shadow.active.size} shadow-${config.link.shadow.active.color.primary.light} dark:shadow-${config.link.shadow.active.color.primary.dark}`]:
+            {},
+        },
+      },
+      '&.nui-pagination-dark': {
+        //Link:dark
+        '.nui-pagination-link.nui-active': {
+          //Color
+          [`@apply text-${config.link.font.color.active.dark.light} dark:text-${config.link.font.color.active.dark.dark}`]:
+            {},
+          //Background
+          [`@apply bg-${config.link.background.active.dark.light} dark:bg-${config.link.background.active.dark.dark}`]:
+            {},
+          //Border:active
+          [`@apply border-${config.link.border.active.dark.light} dark:border-${config.link.border.active.dark.dark}`]:
+            {},
+          //Shadow:active
+          [`@apply shadow-${config.link.shadow.active.size} shadow-${config.link.shadow.active.color.dark.light} dark:shadow-${config.link.shadow.active.color.dark.dark}`]:
+            {},
+        },
+      },
+      '&.nui-pagination-black': {
+        //Link:black
+        '.nui-pagination-link.nui-active': {
           //Color
-          [`@apply text-${config.link.font.color.active.light} dark:text-${config.link.font.color.active.dark}`]:
+          [`@apply text-${config.link.font.color.active.black.light} dark:text-${config.link.font.color.active.black.dark}`]:
             {},
           //Background
-          [`@apply bg-${config.link.background.active.light} dark:bg-${config.link.background.active.dark}`]:
+          [`@apply bg-${config.link.background.active.black.light} dark:bg-${config.link.background.active.black.dark}`]:
             {},
           //Border:active
-          [`@apply border-${config.link.border.active.light} dark:border-${config.link.border.active.dark}`]:
+          [`@apply border-${config.link.border.active.black.light} dark:border-${config.link.border.active.black.dark}`]:
             {},
           //Shadow:active
-          [`@apply shadow-${config.link.shadow.active.size} shadow-${config.link.shadow.active.light} dark:shadow-${config.link.shadow.active.dark}`]:
+          [`@apply shadow-${config.link.shadow.active.size} shadow-${config.link.shadow.active.color.black.light} dark:shadow-${config.link.shadow.active.color.black.dark}`]:
             {},
         },
       },

diff --git a/src/plugins/components/pagination/pagination.component.ts b/src/plugins/components/pagination/pagination.component.ts
@@ -7,11 +7,17 @@ import * as variants from './pagination.variants'
 /**
  * Primary UI component for user interaction
  */
-export const Pagination = ({ rounded, classes, ...attrs }: PaginationAttrs) => {
+export const Pagination = ({
+  rounded,
+  classes,
+  color = 'primary',
+  ...attrs
+}: PaginationAttrs) => {
   return html`
     <div
       class=${[
         'nui-pagination',
+        color && variants.color[color],
         rounded && variants.rounded[rounded],
         classes?.wrapper,
       ]

diff --git a/src/plugins/components/pagination/pagination.config.ts b/src/plugins/components/pagination/pagination.config.ts
@@ -75,8 +75,18 @@ export const defaultConfig = {
       size: 'sm',
       color: {
         active: {
-          light: 'white',
-          dark: 'white',
+          primary: {
+            light: 'primary-invert',
+            dark: 'primary-invert',
+          },
+          dark: {
+            light: 'muted-100',
+            dark: 'muted-900',
+          },
+          black: {
+            light: 'white',
+            dark: 'black',
+          },
         },
         inactive: {
           base: {
@@ -100,8 +110,18 @@ export const defaultConfig = {
         dark: 'muted-700',
       },
       active: {
-        light: 'primary-500',
-        dark: 'primary-500',
+        primary: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+        dark: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+        black: {
+          light: 'black',
+          dark: 'white',
+        },
       },
     },
     background: {
@@ -120,15 +140,37 @@ export const defaultConfig = {
         },
       },
       active: {
-        light: 'primary-500',
-        dark: 'primary-500',
+        primary: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+        dark: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+        black: {
+          light: 'black',
+          dark: 'white',
+        },
       },
     },
     shadow: {
       active: {
-        light: 'primary-500/50',
-        dark: 'primary-500/20',
         size: 'sm',
+        color: {
+          primary: {
+            light: 'primary-500/50',
+            dark: 'primary-500/20',
+          },
+          dark: {
+            light: 'muted-300/30',
+            dark: 'muted-800/20',
+          },
+          black: {
+            light: 'muted-300/30',
+            dark: 'muted-800/20',
+          },
+        },
       },
     },
   },

diff --git a/src/plugins/components/pagination/pagination.stories.ts b/src/plugins/components/pagination/pagination.stories.ts
@@ -10,6 +10,11 @@ const meta = {
   // tags: ['autodocs'],
   render: (args) => Pagination(args),
   argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['dark', 'black', 'primary'],
+      defaultValue: 'primary',
+    },
     rounded: {
       control: { type: 'select' },
       options: ['none', 'sm', 'md', 'lg', 'full'],

diff --git a/src/plugins/components/pagination/pagination.types.ts b/src/plugins/components/pagination/pagination.types.ts
@@ -2,6 +2,7 @@ import type { PropertyVariant } from '~/types/utils'
 
 export interface PaginationProps extends Record<string, unknown> {
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+  color?: 'primary' | 'dark' | 'black'
   classes?: {
     wrapper?: string | string[]
     list?: string | string[]

diff --git a/src/plugins/components/pagination/pagination.variants.ts b/src/plugins/components/pagination/pagination.variants.ts
@@ -7,3 +7,9 @@ export const rounded = {
   lg: 'nui-pagination-curved',
   full: 'nui-pagination-full',
 } as const satisfies PaginationVariant<'rounded'>
+
+export const color = {
+  primary: 'nui-pagination-primary',
+  dark: 'nui-pagination-dark',
+  black: 'nui-pagination-black',
+} as const satisfies PaginationVariant<'color'>