feat(BaseCard): add colors, update class bindings

shuriken-ui · Feb 21, 2024 · 022a6cb · 022a6cb
1 parent d6d5853
commit 022a6cb
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/.playground/pages/tests/base/card.vue b/.playground/pages/tests/base/card.vue
@@ -80,7 +80,7 @@ definePageMeta({
 
       <NuiPreview title="Contrast" description="Card component contrasts">
         <div class="grid gap-4 md:grid-cols-2 max-w-3xl">
-          <BaseCard color="white" rounded="md" class="p-6">
+          <BaseCard color="default" rounded="md" class="p-6">
             <BaseHeading
               as="h4"
               size="sm"
@@ -96,7 +96,7 @@ definePageMeta({
             </BaseParagraph>
           </BaseCard>
 
-          <BaseCard color="white-contrast" rounded="md" class="p-6">
+          <BaseCard color="default-contrast" rounded="md" class="p-6">
             <BaseHeading
               as="h4"
               size="sm"
@@ -148,7 +148,7 @@ definePageMeta({
 
       <NuiPreview title="Color" description="Card component colors">
         <div class="grid gap-4 md:grid-cols-2 max-w-3xl">
-          <BaseCard color="white" rounded="md" class="p-6">
+          <BaseCard color="default" rounded="md" class="p-6">
             <BaseHeading
               as="h4"
               size="sm"
@@ -243,6 +243,38 @@ definePageMeta({
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </BaseParagraph>
           </BaseCard>
+
+          <BaseCard color="dark" rounded="md" class="p-6">
+            <BaseHeading
+              as="h4"
+              size="sm"
+              weight="semibold"
+              lead="tight"
+              class="dark:text-muted-800 mb-2 text-white"
+            >
+              Iam a card
+            </BaseHeading>
+
+            <BaseParagraph size="sm" lead="tight" class="text-muted-400">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </BaseParagraph>
+          </BaseCard>
+
+          <BaseCard color="black" rounded="md" class="p-6">
+            <BaseHeading
+              as="h4"
+              size="sm"
+              weight="semibold"
+              lead="tight"
+              class="dark:text-muted-800 mb-2 text-white"
+            >
+              Iam a card
+            </BaseHeading>
+
+            <BaseParagraph size="sm" lead="tight" class="text-muted-400">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </BaseParagraph>
+          </BaseCard>
         </div>
       </NuiPreview>
 

diff --git a/app.config.ts b/app.config.ts
@@ -46,7 +46,7 @@ export default defineAppConfig({
     },
     BaseCard: {
       rounded: 'sm',
-      color: 'white',
+      color: 'default',
     },
     BaseCheckbox: {
       rounded: 'sm',

diff --git a/components/base/BaseCard.vue b/components/base/BaseCard.vue
@@ -12,13 +12,15 @@ const props = withDefaults(
     /**
      * The color of the card.
      *
-     * @default 'white'
+     * @default 'default'
      */
     color?:
-      | 'white'
-      | 'white-contrast'
+      | 'default'
+      | 'default-contrast'
       | 'muted'
       | 'muted-contrast'
+      | 'dark'
+      | 'black'
       | 'primary'
       | 'info'
       | 'success'
@@ -43,16 +45,18 @@ const color = useNuiDefaultProperty(props, 'BaseCard', 'color')
 
 const radiuses = {
   none: '',
-  sm: 'nui-card-rounded',
-  md: 'nui-card-smooth',
-  lg: 'nui-card-curved',
+  sm: 'nui-card-rounded-sm',
+  md: 'nui-card-rounded-md',
+  lg: 'nui-card-rounded-lg',
 } as Record<string, string>
 
 const colors = {
-  white: 'nui-card-white',
-  'white-contrast': 'nui-card-white-contrast',
+  default: 'nui-card-default',
+  'default-contrast': 'nui-card-default-contrast',
   muted: 'nui-card-muted',
   'muted-contrast': 'nui-card-muted-contrast',
+  dark: 'nui-card-dark',
+  black: 'nui-card-black',
   primary: 'nui-card-primary',
   info: 'nui-card-info',
   success: 'nui-card-success',