SAPTARSHI-coder · SAPTARSHI-coder · Jun 26, 2026 · Jun 26, 2026
@@ -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
+<!-- Size variant -->
+<div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-md aspect-ratio-tm-v2-primary">Content</div>
+
+<!-- Color variants -->
+<div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-success">Success</div>
+<div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-danger">Danger</div>
+
+<!-- Interactive states -->
+<div class="aspect-ratio-tm-v2-card state-hover state-focus">Hover me</div>
+<div class="aspect-ratio-tm-v2-card state-active">Click me</div>
+<div class="aspect-ratio-tm-v2-card state-disabled">Disabled</div>
+```
+
+## 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.
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Aspect Ratio - EaseMotion CSS</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>Aspect Ratio</h1>
+      <p>CSS aspect-ratio property for responsive media containers</p>
+    </div>
+
+    <div class="section">
+      <h2 class="section-title">Variant Sizes</h2>
+      <div class="demo-grid">
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-sm aspect-ratio-tm-v2-primary">
+          <span class="label">Small</span>
+          <p>Compact variant for dense layouts</p>
+        </div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-md aspect-ratio-tm-v2-secondary">
+          <span class="label">Medium</span>
+          <p>Regular variant for standard use</p>
+        </div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-lg aspect-ratio-tm-v2-success">
+          <span class="label">Large</span>
+          <p>Large variant for prominent sections</p>
+        </div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-xl aspect-ratio-tm-v2-warning">
+          <span class="label">Extra Large</span>
+          <p>XL variant for hero sections</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2 class="section-title">Color Variants</h2>
+      <div class="demo-grid">
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-primary"><span class="label">Primary</span><p>Primary color theme</p></div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-secondary"><span class="label">Secondary</span><p>Secondary color theme</p></div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-success"><span class="label">Success</span><p>Success color theme</p></div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-danger"><span class="label">Danger</span><p>Danger color theme</p></div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-warning"><span class="label">Warning</span><p>Warning color theme</p></div>
+        <div class="aspect-ratio-tm-v2-card aspect-ratio-tm-v2-info"><span class="label">Info</span><p>Info color theme</p></div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2 class="section-title">Interactive Examples</h2>
+      <div class="interactive-demo">
+        <div class="demo-item state-hover state-focus">Hover and focus demonstration</div>
+        <div class="demo-item state-hover">Interactive hover state</div>
+        <div class="demo-item state-active">Active click state</div>
+        <div class="demo-item state-disabled">Disabled state</div>
+      </div>
+    </div>
+
+    <div class="footer">
+      <p>Built with EaseMotion CSS Design System — using <code>--ease-*</code> design tokens</p>
+    </div>
+  </div>
+</body>
+</html>
@@ -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;
+  }
+}