opencloud/.agents/skills/naive-ui-design-border/SKILL.md

name, description, metadata

name	description	metadata
naive-ui-design-border	Border design specifications for Naive UI components. Invoke when user needs to understand border styles, radius options, or shadow styles used throughout Naive UI.	author version jiaiyan 1.0.0

Border Design Specifications

Naive UI standardizes borders used in buttons, cards, pop-ups, and other components for consistent visual design.

When to Use

• Understanding border style options
• Applying consistent radius styles
• Using shadow styles for depth
• Maintaining design consistency
• Creating themed components with proper borders

---

Border Radius

Naive UI provides standardized border radius values for consistent rounded corners.

CSS Variable	Value	Usage
--border-radius	3px	Base radius for components
--border-radius-small	2px	Small radius for buttons, tags

Usage Examples

<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>

<template>
  <div :style="{ borderRadius: themeVars.borderRadius }">
    Base radius element
  </div>
  <div :style="{ borderRadius: themeVars.borderRadiusSmall }">
    Small radius element
  </div>
</template>

In CSS with n-element

<template>
  <n-el
    tag="div"
    style="
      border-radius: var(--border-radius);
      border: 1px solid var(--border-color);
    "
  >
    Rounded container
  </n-el>
</template>

---

Border Colors

Naive UI uses semantic border colors that adapt to light and dark themes.

Light Theme

CSS Variable	Value	Usage
--border-color	rgb(224, 224, 230)	Default border color
--divider-color	rgb(239, 239, 245)	Divider lines

Dark Theme

CSS Variable	Value	Usage
--border-color	rgba(255, 255, 255, 0.24)	Default border color
--divider-color	rgba(255, 255, 255, 0.09)	Divider lines

---

Box Shadows

Naive UI provides three levels of shadow styles for depth and elevation.

CSS Variable	Usage
--box-shadow-1	Light shadow for cards, dropdowns
--box-shadow-2	Medium shadow for popovers, modals
--box-shadow-3	Heavy shadow for dialogs, overlays

Shadow Values

Light Theme

--box-shadow-1: 0 1px 2px -2px rgba(0, 0, 0, .08), 
                0 3px 6px 0 rgba(0, 0, 0, .06), 
                0 5px 12px 4px rgba(0, 0, 0, .04);

--box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, .12), 
                0 6px 16px 0 rgba(0, 0, 0, .08), 
                0 9px 28px 8px rgba(0, 0, 0, .05);

--box-shadow-3: 0 6px 16px -9px rgba(0, 0, 0, .08), 
                0 9px 28px 0 rgba(0, 0, 0, .05), 
                0 12px 48px 16px rgba(0, 0, 0, .03);

Dark Theme

--box-shadow-1: 0 1px 2px -2px rgba(0, 0, 0, .24), 
                0 3px 6px 0 rgba(0, 0, 0, .18), 
                0 5px 12px 4px rgba(0, 0, 0, .12);

--box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, .24), 
                0 6px 12px 0 rgba(0, 0, 0, .16), 
                0 9px 18px 8px rgba(0, 0, 0, .10);

--box-shadow-3: 0 6px 16px -9px rgba(0, 0, 0, .08), 
                0 9px 28px 0 rgba(0, 0, 0, .05), 
                0 12px 48px 16px rgba(0, 0, 0, .03);

Usage Examples

<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>

<template>
  <div :style="{ boxShadow: themeVars.boxShadow1 }">
    Light elevation
  </div>
  <div :style="{ boxShadow: themeVars.boxShadow2 }">
    Medium elevation
  </div>
  <div :style="{ boxShadow: themeVars.boxShadow3 }">
    Heavy elevation
  </div>
</template>

---

Scrollbar Styles

Naive UI provides customizable scrollbar styles.

CSS Variable	Value	Usage
--scrollbar-color	Light: rgba(0, 0, 0, 0.25)	Scrollbar thumb color
--scrollbar-color-hover	Light: rgba(0, 0, 0, 0.4)	Scrollbar thumb hover
--scrollbar-width	5px	Scrollbar width
--scrollbar-height	5px	Scrollbar height
--scrollbar-border-radius	5px	Scrollbar thumb radius

---

CSS Variables Summary

:root {
  --border-radius: 3px;
  --border-radius-small: 2px;
  
  --border-color: rgb(224, 224, 230);
  --divider-color: rgb(239, 239, 245);
  
  --box-shadow-1: 0 1px 2px -2px rgba(0, 0, 0, .08), 
                  0 3px 6px 0 rgba(0, 0, 0, .06), 
                  0 5px 12px 4px rgba(0, 0, 0, .04);
  --box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, .12), 
                  0 6px 16px 0 rgba(0, 0, 0, .08), 
                  0 9px 28px 8px rgba(0, 0, 0, .05);
  --box-shadow-3: 0 6px 16px -9px rgba(0, 0, 0, .08), 
                  0 9px 28px 0 rgba(0, 0, 0, .05), 
                  0 12px 48px 16px rgba(0, 0, 0, .03);
  
  --scrollbar-width: 5px;
  --scrollbar-height: 5px;
  --scrollbar-border-radius: 5px;
}

---

Transition Timing

Naive UI uses standardized cubic-bezier timing functions for smooth transitions.

CSS Variable	Value	Usage
--cubic-bezier-ease-in-out	cubic-bezier(.4, 0, .2, 1)	General transitions
--cubic-bezier-ease-out	cubic-bezier(0, 0, .2, 1)	Enter animations
--cubic-bezier-ease-in	cubic-bezier(.4, 0, 1, 1)	Exit animations

Usage Example

<template>
  <n-el
    tag="div"
    style="
      transition: all 0.3s var(--cubic-bezier-ease-in-out);
      border-radius: var(--border-radius);
    "
  >
    Smooth transition element
  </n-el>
</template>

---

Best Practices

1. Use CSS Variables: Always use predefined CSS variables for consistency
2. Match Context: Choose appropriate shadow depth based on element importance
3. Dark Mode: Border and shadow colors automatically adjust in dark mode
4. Consistent Radius: Use --border-radius for most components, --border-radius-small for compact elements
5. Smooth Transitions: Use the provided cubic-bezier functions for consistent animation feel
6. Accessibility: Ensure sufficient contrast for borders in both themes

---

Related Resources

Resource	Description
useThemeVars	Access theme variables in JavaScript
n-element	Use CSS variables in templates
Color Design	Color specifications