fix: Address high-severity bandit issues
This commit is contained in:
@@ -848,4 +848,4 @@
|
||||
}
|
||||
],
|
||||
"links": []
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,4 +22,4 @@ const config = {
|
||||
return config;
|
||||
}
|
||||
};
|
||||
export default config;
|
||||
export default config;
|
||||
|
||||
@@ -20,4 +20,4 @@ const preview = {
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
export default preview;
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
--font-semibold: 600;
|
||||
--font-medium: 500;
|
||||
--font-bold: 700;
|
||||
|
||||
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
|
||||
@@ -25,4 +25,4 @@
|
||||
},
|
||||
"created_at": "2025-12-10T12:52:18.513773",
|
||||
"updated_at": "2025-12-10T13:46:05.807775"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
--font-semibold: 600;
|
||||
--font-medium: 500;
|
||||
--font-bold: 700;
|
||||
|
||||
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
|
||||
@@ -35,7 +35,7 @@ export const AllColors = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="color-container">
|
||||
|
||||
|
||||
<div class="color-section">
|
||||
<h2>Base</h2>
|
||||
<div class="swatch-row">
|
||||
@@ -55,7 +55,7 @@ export const AllColors = {
|
||||
<div class="value">transparent</div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="color-section">
|
||||
<h2>Neutral Scales</h2>
|
||||
<div class="palette-grid">
|
||||
@@ -245,7 +245,7 @@ export const AllColors = {
|
||||
</div></div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="color-section">
|
||||
<h2>Semantic Scales</h2>
|
||||
<div class="palette-grid">
|
||||
|
||||
@@ -59,7 +59,7 @@ export const Overview = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Accordion</h3>
|
||||
@@ -67,7 +67,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">A vertically stacked set of interactive headings that reveal content sections</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -76,21 +76,21 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">An image element with a fallback for user profile images</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">size:</span> <span class="badge">sm</span> <span class="badge">md</span> <span class="badge">lg</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Badge</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a badge or label</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">secondary</span> <span class="badge">destructive</span> <span class="badge">outline</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Carousel</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">A carousel with embla-carousel</p>
|
||||
<div class="variants"></div>
|
||||
@@ -99,7 +99,7 @@ export const Overview = {
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Chart</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Beautiful charts using Recharts</p>
|
||||
<div class="variants"></div>
|
||||
@@ -112,12 +112,12 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">An interactive component that expands/collapses content</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Data Table</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Powerful table with sorting, filtering, pagination</p>
|
||||
<div class="variants"></div>
|
||||
@@ -126,38 +126,38 @@ export const Overview = {
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Item</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Generic list item component</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Kbd</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Keyboard key display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Table</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Styled HTML table</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Typography</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Text styling components</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
@@ -59,24 +59,24 @@ export const Overview = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Alert</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a callout for user attention</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Empty</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Empty state display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -85,21 +85,21 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Progress indicator bar</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Skeleton</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Loading placeholder</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Sonner</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Toast notifications with sonner</p>
|
||||
<div class="variants"></div>
|
||||
@@ -108,11 +108,11 @@ export const Overview = {
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Spinner</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Loading spinner animation</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -121,7 +121,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Toast notification component</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
@@ -59,29 +59,29 @@ export const Overview = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Button</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a button or a component that looks like a button</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span> <span class="badge">outline</span> <span class="badge">secondary</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span> <span class="badge">icon</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Button Group</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Groups multiple buttons together</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Calendar</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">A date picker component with monthly/yearly views</p>
|
||||
<div class="variants"></div>
|
||||
@@ -94,21 +94,21 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">A control that allows toggling between checked and unchecked</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Combobox</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Autocomplete input with command palette</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Command</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Command palette with search and filtering</p>
|
||||
<div class="variants"></div>
|
||||
@@ -117,25 +117,25 @@ export const Overview = {
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Date Picker</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">A date picker built with calendar and popover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Field</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Form field wrapper with label and error</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Form</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Form component with react-hook-form integration</p>
|
||||
<div class="variants"></div>
|
||||
@@ -144,25 +144,25 @@ export const Overview = {
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Input</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Text input field</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Input Group</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Group of inputs with addons</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Input OTP</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">One-time password input</p>
|
||||
<div class="variants"></div>
|
||||
@@ -175,16 +175,16 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Text label for form elements</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Native Select</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Native HTML select element with styling</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -193,7 +193,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Set of mutually exclusive options</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -202,7 +202,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Custom select dropdown</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -211,7 +211,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Range slider input</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -220,16 +220,16 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Toggle switch control</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Textarea</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Multi-line text input</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -238,7 +238,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Two-state button</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">outline</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -247,7 +247,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Group of toggle buttons</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
@@ -59,7 +59,7 @@ export const Overview = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Aspect Ratio</h3>
|
||||
@@ -67,21 +67,21 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Displays content with a desired aspect ratio</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Card</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a card with header, content, and footer</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Resizable</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Resizable panel groups</p>
|
||||
<div class="variants"></div>
|
||||
@@ -94,7 +94,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Custom scrollbar styling</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -103,7 +103,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Visual divider</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">orientation:</span> <span class="badge">horizontal</span> <span class="badge">vertical</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
@@ -59,15 +59,15 @@ export const Overview = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Breadcrumb</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Displays the path to the current page in a hierarchy</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -76,7 +76,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Horizontal menu with dropdowns</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -85,25 +85,25 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Website navigation with mega menus</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Pagination</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Page navigation with previous/next</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Sidebar</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">Application sidebar with collapsible sections</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -112,7 +112,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Tabbed interface</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
@@ -59,7 +59,7 @@ export const Overview = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Alert Dialog</h3>
|
||||
@@ -67,7 +67,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">A modal dialog that interrupts user flow with important information</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -76,7 +76,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Right-click context menu with keyboard support</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -85,12 +85,12 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">A modal dialog for content display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Drawer</h3>
|
||||
|
||||
|
||||
</div>
|
||||
<p class="description">A drawer component extending dialog</p>
|
||||
<div class="variants"></div>
|
||||
@@ -103,7 +103,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Menu displayed on trigger interaction</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -112,7 +112,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Content appearing on hover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -121,7 +121,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Floating content panel</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -130,7 +130,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Side panel overlay</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">side:</span> <span class="badge">top</span> <span class="badge">right</span> <span class="badge">bottom</span> <span class="badge">left</span></div></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
@@ -139,7 +139,7 @@ export const Overview = {
|
||||
</div>
|
||||
<p class="description">Informative popup on hover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
@@ -33,7 +33,7 @@ export const Shadows = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="effects-grid">
|
||||
|
||||
|
||||
<div class="effect-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<span class="name">shadow-xs</span>
|
||||
</div>
|
||||
|
||||
@@ -27,7 +27,7 @@ export const RadiusScale = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="radius-grid">
|
||||
|
||||
|
||||
<div class="radius-item">
|
||||
<div class="box" style="border-radius: 0;"></div>
|
||||
<div class="name">none</div>
|
||||
|
||||
@@ -30,7 +30,7 @@ export const LightTheme = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="semantic-colors">
|
||||
|
||||
|
||||
<div class="token-group">
|
||||
<h3>Surface</h3>
|
||||
<div class="token-row">
|
||||
|
||||
@@ -27,7 +27,7 @@ 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>
|
||||
|
||||
@@ -28,7 +28,7 @@ export const SpacingScale = {
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="spacing-grid">
|
||||
|
||||
|
||||
<div class="spacing-item">
|
||||
<div class="bar" style="width: 1px;"></div>
|
||||
<div class="info">
|
||||
|
||||
@@ -41,7 +41,7 @@ export const FontFamilies = {
|
||||
<div class="typo-container">
|
||||
<div class="section">
|
||||
<h2>Font Families</h2>
|
||||
|
||||
|
||||
<div class="font-sample">
|
||||
<div class="sample-text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
The quick brown fox jumps over the lazy dog
|
||||
@@ -214,7 +214,7 @@ export const TextStyles = {
|
||||
<div class="typo-container">
|
||||
<div class="section">
|
||||
<h2>Composed Text Styles</h2>
|
||||
|
||||
|
||||
<div class="style-sample">
|
||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 3rem; font-weight: 700; line-height: 1;">
|
||||
The quick brown fox
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"author": "DSS Team",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/anthropics/dss",
|
||||
|
||||
|
||||
"metadata": {
|
||||
"type": "design-system",
|
||||
"architecture": "layered-css",
|
||||
|
||||
Reference in New Issue
Block a user