Bruno Sarlo
4bad273694
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
Generated by DSS Git Backup Hook
109 lines
4.8 KiB
JavaScript
109 lines
4.8 KiB
JavaScript
/**
|
|
* Shadows - Foundation
|
|
* Box shadow scale
|
|
* @generated 2025-12-12T07:46:35.099557
|
|
*/
|
|
export default {
|
|
title: 'Foundation/Effects/Shadows',
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Box shadow tokens for elevation and depth.'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const styles = `
|
|
.shadows-grid { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem; background: #f9fafb; }
|
|
.shadow-card { text-align: center; }
|
|
.box { width: 120px; height: 80px; background: white; border-radius: 8px; margin-bottom: 0.5rem; }
|
|
.name { font-size: 0.75rem; font-weight: 500; }
|
|
.value { font-size: 0.6rem; color: #6b7280; font-family: monospace; max-width: 120px; word-wrap: break-word; }
|
|
`;
|
|
|
|
export const AllShadows = {
|
|
render: () => `
|
|
<style>${styles}</style>
|
|
<div class="shadows-grid">
|
|
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: none;"></div>
|
|
<div class="name">none</div>
|
|
<div class="value">none</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
|
|
<div class="name">xs</div>
|
|
<div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">sm</div>
|
|
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">default</div>
|
|
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">md</div>
|
|
<div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">lg</div>
|
|
<div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">xl</div>
|
|
<div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
|
|
<div class="name">2xl</div>
|
|
<div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);"></div>
|
|
<div class="name">inner</div>
|
|
<div class="value">inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
|
|
<div class="name">shadow-xs</div>
|
|
<div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">shadow-sm</div>
|
|
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">shadow-md</div>
|
|
<div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">shadow-lg</div>
|
|
<div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
|
|
<div class="name">shadow-xl</div>
|
|
<div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
|
|
</div>
|
|
<div class="shadow-card">
|
|
<div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
|
|
<div class="name">shadow-2xl</div>
|
|
<div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|