diff --git a/submissions/examples/aspect-ratio-tm-v2/README.md b/submissions/examples/aspect-ratio-tm-v2/README.md new file mode 100644 index 0000000000..7b105e9185 --- /dev/null +++ b/submissions/examples/aspect-ratio-tm-v2/README.md @@ -0,0 +1,33 @@ +# Aspect Ratio + +This submission demonstrates the CSS `aspect-ratio-tm-v2` property with practical examples using the EaseMotion CSS design system tokens. + +## Features + +- Multiple size variants (sm, md, lg, xl) +- Color variants using `--ease-color-*` design tokens +- Interactive state demonstrations (hover, focus, active, disabled) +- Fully responsive grid layout with CSS Grid +- Dark mode support via `prefers-color-scheme: dark` +- Reduced motion support via `prefers-reduced-motion: reduce` +- Uses `--ease-*` CSS custom properties from `core/variables.css` + +## Usage + +```html + +
Content
+ + +
Success
+
Danger
+ + +
Hover me
+
Click me
+
Disabled
+``` + +## Why is it useful? + +The `aspect-ratio-tm-v2` property is a fundamental CSS tool for building consistent UI components. By using EaseMotion's `--ease-*` design tokens, these demonstrations integrate seamlessly with the broader design system, ensuring visual consistency across all submissions in the repository. diff --git a/submissions/examples/aspect-ratio-tm-v2/demo.html b/submissions/examples/aspect-ratio-tm-v2/demo.html new file mode 100644 index 0000000000..77a239a613 --- /dev/null +++ b/submissions/examples/aspect-ratio-tm-v2/demo.html @@ -0,0 +1,65 @@ + + + + + + Aspect Ratio - EaseMotion CSS + + + +
+
+

Aspect Ratio

+

CSS aspect-ratio property for responsive media containers

+
+ +
+

Variant Sizes

+
+
+ Small +

Compact variant for dense layouts

+
+
+ Medium +

Regular variant for standard use

+
+
+ Large +

Large variant for prominent sections

+
+
+ Extra Large +

XL variant for hero sections

+
+
+
+ +
+

Color Variants

+
+
Primary

Primary color theme

+
Secondary

Secondary color theme

+
Success

Success color theme

+
Danger

Danger color theme

+
Warning

Warning color theme

+
Info

Info color theme

+
+
+ +
+

Interactive Examples

+
+
Hover and focus demonstration
+
Interactive hover state
+
Active click state
+
Disabled state
+
+
+ +
+

Built with EaseMotion CSS Design System — using --ease-* design tokens

+
+
+ + \ No newline at end of file diff --git a/submissions/examples/aspect-ratio-tm-v2/style.css b/submissions/examples/aspect-ratio-tm-v2/style.css new file mode 100644 index 0000000000..6f9383c440 --- /dev/null +++ b/submissions/examples/aspect-ratio-tm-v2/style.css @@ -0,0 +1,274 @@ +/* ── Reset ─────────────────────────────────────── */ +* { margin: 0; padding: 0; box-sizing: border-box; } + +body { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 40px 20px; + background: var(--ease-color-bg); + color: var(--ease-color-text); + font-family: var(--ease-font-sans); +} + +.container { + width: 100%; + max-width: 900px; + padding: 40px; + background: var(--ease-color-surface); + border-radius: var(--ease-radius-lg); + box-shadow: var(--ease-shadow-lg); +} + +.header { + margin-bottom: 40px; + padding-bottom: 24px; + border-bottom: 1px solid var(--ease-color-neutral-200); +} + +.header h1 { + font-size: var(--ease-text-3xl); + font-weight: 700; + color: var(--ease-color-primary); + margin-bottom: 8px; +} + +.header p { + font-size: var(--ease-text-base); + color: var(--ease-color-muted); +} + +/* ── Demo Grid ──────────────────────────────────── */ +.demo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 24px; + margin-bottom: 40px; +} + +.aspect-ratio-tm-v2-card { + padding: 28px 24px; + background: var(--ease-color-surface); + border: 1px solid var(--ease-color-neutral-200); + border-radius: var(--ease-radius-md); + transition: all var(--ease-speed-medium) var(--ease-ease); + cursor: default; +} + +.aspect-ratio-tm-v2-card:hover { + border-color: var(--ease-color-primary); + box-shadow: var(--ease-glow-primary); + transform: translateY(-2px); +} + +.aspect-ratio-tm-v2-card .label { + display: inline-block; + padding: 4px 10px; + background: var(--ease-color-primary-alpha); + color: var(--ease-color-primary); + border-radius: var(--ease-radius-full); + font-size: var(--ease-text-xs); + font-weight: 600; + margin-bottom: 16px; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* ── Size Variants ──────────────────────────────── */ +.aspect-ratio-tm-v2-sm { + padding: 12px; +} + +.aspect-ratio-tm-v2-md { + padding: 20px; +} + +.aspect-ratio-tm-v2-lg { + padding: 28px; +} + +.aspect-ratio-tm-v2-xl { + padding: 36px; +} + +/* ── Color Variants ─────────────────────────────── */ +.aspect-ratio-tm-v2-primary { + background: var(--ease-color-primary); + color: var(--ease-color-surface); + border-color: var(--ease-color-primary); +} + +.aspect-ratio-tm-v2-secondary { + background: var(--ease-color-secondary); + color: var(--ease-color-surface); + border-color: var(--ease-color-secondary); +} + +.aspect-ratio-tm-v2-success { + background: var(--ease-color-success); + color: var(--ease-color-surface); + border-color: var(--ease-color-success); +} + +.aspect-ratio-tm-v2-danger { + background: var(--ease-color-danger); + color: var(--ease-color-surface); + border-color: var(--ease-color-danger); +} + +.aspect-ratio-tm-v2-warning { + background: var(--ease-color-warning); + color: var(--ease-color-surface); + border-color: var(--ease-color-warning); +} + +.aspect-ratio-tm-v2-info { + background: var(--ease-color-info); + color: var(--ease-color-surface); + border-color: var(--ease-color-info); +} + +/* ── State Variants ────────────────────────────── */ +.state-hover { + cursor: pointer; +} + +.state-active { + transform: scale(0.97); +} + +.state-focus { + outline: 2px solid var(--ease-color-primary); + outline-offset: 2px; +} + +.state-disabled { + opacity: 0.45; + pointer-events: none; + cursor: not-allowed; +} + +/* ── Section ────────────────────────────────────── */ +.section { + margin-bottom: 32px; +} + +.section-title { + font-size: var(--ease-text-lg); + font-weight: 600; + color: var(--ease-color-neutral-800); + margin-bottom: 16px; + padding-bottom: 8px; + border-bottom: 1px solid var(--ease-color-neutral-200); +} + +/* ── Interactive Demo ──────────────────────────── */ +.interactive-demo { + padding: 24px; + background: var(--ease-color-neutral-100); + border-radius: var(--ease-radius-md); + margin-bottom: 24px; +} + +.interactive-demo .demo-item { + padding: 16px 20px; + margin-bottom: 12px; + background: var(--ease-color-surface); + border-radius: var(--ease-radius-sm); + border-left: 4px solid var(--ease-color-primary); + transition: all var(--ease-speed-fast) var(--ease-ease); +} + +.interactive-demo .demo-item:hover { + padding-left: 28px; + background: var(--ease-color-primary-alpha); + border-left-color: var(--ease-color-primary-dark); +} + +.interactive-demo .demo-item:last-child { + margin-bottom: 0; +} + +/* ── Footer ─────────────────────────────────────── */ +.footer { + margin-top: 40px; + padding-top: 24px; + border-top: 1px solid var(--ease-color-neutral-200); + text-align: center; + color: var(--ease-color-muted); + font-size: var(--ease-text-sm); +} + +/* ── Dark Mode ──────────────────────────────────── */ +@media (prefers-color-scheme: dark) { + body { + background: var(--ease-color-neutral-900); + color: var(--ease-color-neutral-100); + } + + .container { + background: var(--ease-color-neutral-800); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); + } + + .header { + border-bottom-color: var(--ease-color-neutral-700); + } + + .header p { + color: var(--ease-color-neutral-400); + } + + .aspect-ratio-tm-v2-card { + background: var(--ease-color-neutral-800); + border-color: var(--ease-color-neutral-700); + } + + .aspect-ratio-tm-v2-card:hover { + border-color: var(--ease-color-primary-light); + } + + .state-focus { + outline-color: var(--ease-color-primary-light); + } + + .interactive-demo { + background: var(--ease-color-neutral-900); + } + + .interactive-demo .demo-item { + background: var(--ease-color-neutral-800); + } + + .interactive-demo .demo-item:hover { + background: rgba(108, 99, 255, 0.15); + } + + .section-title { + border-bottom-color: var(--ease-color-neutral-700); + color: var(--ease-color-neutral-100); + } + + .footer { + border-top-color: var(--ease-color-neutral-700); + color: var(--ease-color-neutral-500); + } +} + +/* ── Reduced Motion ─────────────────────────────── */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .aspect-ratio-tm-v2-card { + transition: none; + } + + .interactive-demo .demo-item { + transition: none; + } +}