skills.rest
saleor
saleorOFFICIAL
Explore all skills by this author →
Website𝕏@getsaleorGitHub

saleor-dashboard-smooth-shadow

Applies smooth-shadow-ring elevation styling to floating UI surfaces in Saleor Dashboard.

1.0k|1.2k|Updated Jun 19, 2019
Search Tags:#CSS#ui elevation#Dark mode#CSS modules#Design tokens#box-shadow#saleor dashboard
One-click install
npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-smooth-shadow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saleor-dashboard-smooth-shadow
Source: https://github.com/saleor/saleor-dashboard/tree/main/.claude/skills/saleor-dashboard-smooth-shadow
Command: npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-smooth-shadow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Combining a border and a box-shadow on the same elevated element produces a visible double edge that looks heavy and cheap. This Skill defines when and how to apply smooth-shadow-ring elevation in Saleor Dashboard so floating surfaces get one continuous edge instead of stacked strokes.

Core Features & Use Cases

  • Elevation policy: Restricts shadows to truly floating surfaces (modals, popovers, dropdowns, menus, tooltips, sheets, toasts) while keeping in-page cards flat with border tokens.
  • Smooth-shadow-ring pattern: Bakes a 1px hairline ring into the final shadow layer, replacing border + shadow combinations, with light and dark theme ring colors.
  • CSS Modules reference port: Points to ChannelSetupCard.module.css as the canonical implementation using macaw tokens instead of Tailwind utilities.
  • Use Case: When building a new dropdown or elevated checklist card, follow the checklist to remove borders from the shadowed node, place the hairline as the last shadow layer, and verify dark-mode ring alpha.

Quick Start

Ask the assistant to style a new floating dropdown component in Saleor Dashboard following the smooth-shadow-ring elevation rules.

Frequently Asked Questions about saleor-dashboard-smooth-shadow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add elevation shadows to a modal in Saleor Dashboard?▼

Use the smooth-shadow-ring pattern: stack soft box-shadow layers and make the final layer a 1px hairline ring (0 0 0 1px var(--smooth-ring-color)). Remove any border from the same element, and copy the reference implementation in ChannelSetupCard.module.css.

Why does border plus box-shadow look bad on elevated surfaces?▼

A border paints a hard 1px stroke and the shadow begins just outside it, producing a visible double edge that looks heavy and cheap. Smooth-shadow-ring bakes the hairline into the shadow stack so the edge dissolves into one continuous stroke.

When should I use shadows versus borders on dashboard cards?▼

Use shadows only on surfaces that truly float above the page, such as modals, popovers, dropdowns, menus, tooltips, sheets, and toasts. In-page settings cards like DetailSettingsCard and datagrids stay flat with a 1px border token and no shadow.

Does Saleor Dashboard use the Tailwind shadow-plugin package?▼

No, the shadow-plugin package is not installed. Saleor Dashboard ports the smooth-shadow-ring idea manually into CSS Modules with macaw tokens, using ChannelSetupCard.module.css as the reference implementation.

How do I handle shadow ring colors in dark mode?▼

The ring defaults to rgba(0,0,0,0.05) in light mode and flips to rgba(255,255,255,0.18) in dark mode via an .elevatedDark class. The higher dark alpha is intentional because the ring paints outside the surface and picks up the page color behind it.

Related Skills

Explore More Design & Creative Skills→
RoleModelRoleModel
6

optics-context

Apply Optics design framework classes and tokens to standardize CSS styling.

Official
Intermediate
rilldatarilldata
47

rill-theme

Define and apply custom color themes to Rill dashboards.

Official
Basic
saleorsaleor
1.6k

saleor-paper-storefront

Guides development of the Saleor Paper Next.js 16 storefront across caching, checkout, and product pages.

Official
Advanced
korwlik23korwlik23

remove-shadow-utilities

Remove box-shadow, text-shadow, and drop-shadow effects from CSS and Tailwind utilities.

Community
Intermediate