easemotion-css 1.0.0

package/core/utilities.css

@@ -0,0 +1,277 @@
+/* ============================================================
+   EaseMotion CSS — utilities.css
+   Human-readable layout and spacing utility classes
+   ============================================================ */
+
+/* ────────────────────────────────────────────────────────────
+   DISPLAY
+   ──────────────────────────────────────────────────────────── */
+
+.ease-block        { display: block; }
+.ease-inline       { display: inline; }
+.ease-inline-block { display: inline-block; }
+.ease-hidden       { display: none; }
+
+/* ────────────────────────────────────────────────────────────
+   FLEXBOX
+   ──────────────────────────────────────────────────────────── */
+
+.ease-flex         { display: flex; }
+.ease-inline-flex  { display: inline-flex; }
+
+/* Center everything: the most-used utility */
+.ease-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ease-flex-col     { flex-direction: column; }
+.ease-flex-row     { flex-direction: row; }
+.ease-flex-wrap    { flex-wrap: wrap; }
+.ease-flex-nowrap  { flex-wrap: nowrap; }
+
+.ease-items-start    { align-items: flex-start; }
+.ease-items-center   { align-items: center; }
+.ease-items-end      { align-items: flex-end; }
+.ease-items-stretch  { align-items: stretch; }
+
+.ease-justify-start    { justify-content: flex-start; }
+.ease-justify-center   { justify-content: center; }
+.ease-justify-end      { justify-content: flex-end; }
+.ease-justify-between  { justify-content: space-between; }
+.ease-justify-around   { justify-content: space-around; }
+.ease-justify-evenly   { justify-content: space-evenly; }
+
+.ease-flex-1    { flex: 1 1 0%; }
+.ease-flex-auto { flex: 1 1 auto; }
+.ease-flex-none { flex: none; }
+
+.ease-grow   { flex-grow: 1; }
+.ease-shrink { flex-shrink: 1; }
+
+/* ────────────────────────────────────────────────────────────
+   GRID
+   ──────────────────────────────────────────────────────────── */
+
+.ease-grid       { display: grid; }
+.ease-inline-grid { display: inline-grid; }
+
+.ease-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.ease-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.ease-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.ease-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+/* Auto-fit responsive columns */
+.ease-grid-auto {
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.ease-col-span-2 { grid-column: span 2 / span 2; }
+.ease-col-span-3 { grid-column: span 3 / span 3; }
+.ease-col-full   { grid-column: 1 / -1; }
+
+/* ────────────────────────────────────────────────────────────
+   GAP
+   ──────────────────────────────────────────────────────────── */
+
+.ease-gap-1  { gap: var(--ease-space-1); }
+.ease-gap-2  { gap: var(--ease-space-2); }
+.ease-gap-3  { gap: var(--ease-space-3); }
+.ease-gap    { gap: var(--ease-space-4); }   /* default alias */
+.ease-gap-4  { gap: var(--ease-space-4); }
+.ease-gap-6  { gap: var(--ease-space-6); }
+.ease-gap-8  { gap: var(--ease-space-8); }
+.ease-gap-10 { gap: var(--ease-space-10); }
+
+/* ────────────────────────────────────────────────────────────
+   PADDING
+   ──────────────────────────────────────────────────────────── */
+
+.ease-padding    { padding: var(--ease-space-4); }  /* default alias */
+.ease-padding-1  { padding: var(--ease-space-1); }
+.ease-padding-2  { padding: var(--ease-space-2); }
+.ease-padding-3  { padding: var(--ease-space-3); }
+.ease-padding-4  { padding: var(--ease-space-4); }
+.ease-padding-6  { padding: var(--ease-space-6); }
+.ease-padding-8  { padding: var(--ease-space-8); }
+.ease-padding-10 { padding: var(--ease-space-10); }
+.ease-padding-12 { padding: var(--ease-space-12); }
+
+.ease-pt-4 { padding-top:    var(--ease-space-4); }
+.ease-pr-4 { padding-right:  var(--ease-space-4); }
+.ease-pb-4 { padding-bottom: var(--ease-space-4); }
+.ease-pl-4 { padding-left:   var(--ease-space-4); }
+
+.ease-px-4 { padding-left: var(--ease-space-4); padding-right:  var(--ease-space-4); }
+.ease-py-4 { padding-top:  var(--ease-space-4); padding-bottom: var(--ease-space-4); }
+.ease-px-8 { padding-left: var(--ease-space-8); padding-right:  var(--ease-space-8); }
+.ease-py-8 { padding-top:  var(--ease-space-8); padding-bottom: var(--ease-space-8); }
+
+/* ────────────────────────────────────────────────────────────
+   MARGIN
+   ──────────────────────────────────────────────────────────── */
+
+.ease-margin     { margin: var(--ease-space-4); }   /* default alias */
+.ease-margin-1   { margin: var(--ease-space-1); }
+.ease-margin-2   { margin: var(--ease-space-2); }
+.ease-margin-3   { margin: var(--ease-space-3); }
+.ease-margin-4   { margin: var(--ease-space-4); }
+.ease-margin-6   { margin: var(--ease-space-6); }
+.ease-margin-8   { margin: var(--ease-space-8); }
+.ease-margin-auto { margin: auto; }
+
+.ease-mx-auto { margin-left: auto; margin-right: auto; }
+.ease-my-4    { margin-top: var(--ease-space-4); margin-bottom: var(--ease-space-4); }
+.ease-my-8    { margin-top: var(--ease-space-8); margin-bottom: var(--ease-space-8); }
+
+.ease-mt-4  { margin-top:    var(--ease-space-4); }
+.ease-mr-4  { margin-right:  var(--ease-space-4); }
+.ease-mb-4  { margin-bottom: var(--ease-space-4); }
+.ease-ml-4  { margin-left:   var(--ease-space-4); }
+
+/* ────────────────────────────────────────────────────────────
+   WIDTH & HEIGHT
+   ──────────────────────────────────────────────────────────── */
+
+.ease-w-full    { width: 100%; }
+.ease-w-screen  { width: 100vw; }
+.ease-w-auto    { width: auto; }
+.ease-h-full    { height: 100%; }
+.ease-h-screen  { height: 100vh; }
+.ease-h-auto    { height: auto; }
+
+/* Max-width container */
+.ease-container {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--ease-space-6);
+  padding-right: var(--ease-space-6);
+}
+
+/* ────────────────────────────────────────────────────────────
+   POSITIONING
+   ──────────────────────────────────────────────────────────── */
+
+.ease-relative  { position: relative; }
+.ease-absolute  { position: absolute; }
+.ease-fixed     { position: fixed; }
+.ease-sticky    { position: sticky; top: 0; }
+
+/* ────────────────────────────────────────────────────────────
+   OVERFLOW
+   ──────────────────────────────────────────────────────────── */
+
+.ease-overflow-hidden  { overflow: hidden; }
+.ease-overflow-auto    { overflow: auto; }
+.ease-overflow-scroll  { overflow: scroll; }
+.ease-overflow-x-auto  { overflow-x: auto; }
+.ease-overflow-y-auto  { overflow-y: auto; }
+
+/* ────────────────────────────────────────────────────────────
+   TEXT
+   ──────────────────────────────────────────────────────────── */
+
+.ease-text-xs   { font-size: var(--ease-text-xs); }
+.ease-text-sm   { font-size: var(--ease-text-sm); }
+.ease-text-base { font-size: var(--ease-text-base); }
+.ease-text-lg   { font-size: var(--ease-text-lg); }
+.ease-text-xl   { font-size: var(--ease-text-xl); }
+.ease-text-2xl  { font-size: var(--ease-text-2xl); }
+.ease-text-3xl  { font-size: var(--ease-text-3xl); }
+.ease-text-4xl  { font-size: var(--ease-text-4xl); }
+
+.ease-text-left    { text-align: left; }
+.ease-text-center  { text-align: center; }
+.ease-text-right   { text-align: right; }
+
+.ease-font-light    { font-weight: 300; }
+.ease-font-regular  { font-weight: 400; }
+.ease-font-medium   { font-weight: 500; }
+.ease-font-semibold { font-weight: 600; }
+.ease-font-bold     { font-weight: 700; }
+
+.ease-uppercase   { text-transform: uppercase; }
+.ease-lowercase   { text-transform: lowercase; }
+.ease-capitalize  { text-transform: capitalize; }
+
+.ease-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ────────────────────────────────────────────────────────────
+   COLORS (text + background)
+   ──────────────────────────────────────────────────────────── */
+
+.ease-text-primary   { color: var(--ease-color-primary); }
+.ease-text-success   { color: var(--ease-color-success); }
+.ease-text-danger    { color: var(--ease-color-danger); }
+.ease-text-warning   { color: var(--ease-color-warning); }
+.ease-text-muted     { color: var(--ease-color-muted); }
+.ease-text-white     { color: #ffffff; }
+
+.ease-bg-primary     { background-color: var(--ease-color-primary); }
+.ease-bg-success     { background-color: var(--ease-color-success); }
+.ease-bg-danger      { background-color: var(--ease-color-danger); }
+.ease-bg-warning     { background-color: var(--ease-color-warning); }
+.ease-bg-white       { background-color: #ffffff; }
+.ease-bg-surface     { background-color: var(--ease-color-surface); }
+.ease-bg-neutral     { background-color: var(--ease-color-neutral-100); }
+
+/* ────────────────────────────────────────────────────────────
+   BORDER & RADIUS
+   ──────────────────────────────────────────────────────────── */
+
+.ease-border        { border: 1px solid var(--ease-color-neutral-200); }
+.ease-border-2      { border: 2px solid var(--ease-color-neutral-200); }
+.ease-border-primary { border-color: var(--ease-color-primary); }
+
+.ease-rounded-sm   { border-radius: var(--ease-radius-sm); }
+.ease-rounded      { border-radius: var(--ease-radius-md); }
+.ease-rounded-lg   { border-radius: var(--ease-radius-lg); }
+.ease-rounded-xl   { border-radius: var(--ease-radius-xl); }
+.ease-rounded-full { border-radius: var(--ease-radius-full); }
+
+/* ────────────────────────────────────────────────────────────
+   SHADOW
+   ──────────────────────────────────────────────────────────── */
+
+.ease-shadow-sm  { box-shadow: var(--ease-shadow-sm); }
+.ease-shadow     { box-shadow: var(--ease-shadow-md); }
+.ease-shadow-lg  { box-shadow: var(--ease-shadow-lg); }
+.ease-shadow-xl  { box-shadow: var(--ease-shadow-xl); }
+.ease-shadow-none { box-shadow: none; }
+
+/* ────────────────────────────────────────────────────────────
+   OPACITY
+   ──────────────────────────────────────────────────────────── */
+
+.ease-opacity-0   { opacity: 0; }
+.ease-opacity-25  { opacity: 0.25; }
+.ease-opacity-50  { opacity: 0.50; }
+.ease-opacity-75  { opacity: 0.75; }
+.ease-opacity-100 { opacity: 1; }
+
+/* ────────────────────────────────────────────────────────────
+   CURSOR
+   ──────────────────────────────────────────────────────────── */
+
+.ease-cursor-pointer  { cursor: pointer; }
+.ease-cursor-default  { cursor: default; }
+.ease-cursor-not-allowed { cursor: not-allowed; }
+
+/* ────────────────────────────────────────────────────────────
+   RESPONSIVE HELPERS
+   ──────────────────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .ease-sm-hidden    { display: none; }
+  .ease-sm-full      { width: 100%; }
+  .ease-sm-flex-col  { flex-direction: column; }
+  .ease-sm-grid-cols-1 { grid-template-columns: 1fr; }
+  .ease-sm-text-center { text-align: center; }
+}

package/core/variables.css

@@ -0,0 +1,106 @@
+/* ============================================================
+   EaseMotion CSS — variables.css
+   Design Tokens: the single source of truth for all values
+   ============================================================ */
+
+:root {
+
+  /* ── Transition Speeds ─────────────────────────────────── */
+  --ease-speed-fast:    150ms;
+  --ease-speed-medium:  300ms;
+  --ease-speed-slow:    600ms;
+
+  --ease-ease:          cubic-bezier(0.4, 0, 0.2, 1);   /* smooth ease-in-out */
+  --ease-ease-out:      cubic-bezier(0, 0, 0.2, 1);
+  --ease-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ── Color Palette ─────────────────────────────────────── */
+  --ease-color-primary:       #6c63ff;
+  --ease-color-primary-light: #a09af8;
+  --ease-color-primary-dark:  #4b44cc;
+
+  --ease-color-success:       #22c55e;
+  --ease-color-success-light: #86efac;
+  --ease-color-success-dark:  #15803d;
+
+  --ease-color-danger:        #ef4444;
+  --ease-color-danger-light:  #fca5a5;
+  --ease-color-danger-dark:   #b91c1c;
+
+  --ease-color-warning:       #f59e0b;
+  --ease-color-warning-light: #fcd34d;
+  --ease-color-warning-dark:  #b45309;
+
+  --ease-color-neutral-50:  #f8fafc;
+  --ease-color-neutral-100: #f1f5f9;
+  --ease-color-neutral-200: #e2e8f0;
+  --ease-color-neutral-300: #cbd5e1;
+  --ease-color-neutral-400: #94a3b8;
+  --ease-color-neutral-500: #64748b;
+  --ease-color-neutral-600: #475569;
+  --ease-color-neutral-700: #334155;
+  --ease-color-neutral-800: #1e293b;
+  --ease-color-neutral-900: #0f172a;
+
+  --ease-color-bg:      var(--ease-color-neutral-50);
+  --ease-color-surface: #ffffff;
+  --ease-color-text:    var(--ease-color-neutral-800);
+  --ease-color-muted:   var(--ease-color-neutral-500);
+
+  /* ── Spacing Scale ─────────────────────────────────────── */
+  --ease-space-1:  0.25rem;   /*  4px */
+  --ease-space-2:  0.5rem;    /*  8px */
+  --ease-space-3:  0.75rem;   /* 12px */
+  --ease-space-4:  1rem;      /* 16px */
+  --ease-space-5:  1.25rem;   /* 20px */
+  --ease-space-6:  1.5rem;    /* 24px */
+  --ease-space-8:  2rem;      /* 32px */
+  --ease-space-10: 2.5rem;    /* 40px */
+  --ease-space-12: 3rem;      /* 48px */
+  --ease-space-16: 4rem;      /* 64px */
+
+  /* ── Border Radius ─────────────────────────────────────── */
+  --ease-radius-sm:   0.25rem;
+  --ease-radius-md:   0.5rem;
+  --ease-radius-lg:   1rem;
+  --ease-radius-xl:   1.5rem;
+  --ease-radius-full: 9999px;
+
+  /* ── Shadows ───────────────────────────────────────────── */
+  --ease-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08),
+                     0 1px 2px rgba(0, 0, 0, 0.05);
+  --ease-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10),
+                     0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --ease-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10),
+                     0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --ease-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10),
+                     0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  --ease-glow-primary: 0 0 16px rgba(108, 99, 255, 0.45);
+  --ease-glow-success: 0 0 16px rgba(34, 197, 94, 0.45);
+  --ease-glow-danger:  0 0 16px rgba(239, 68, 68, 0.45);
+
+  /* ── Typography ────────────────────────────────────────── */
+  --ease-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
+  --ease-font-mono:  'JetBrains Mono', 'Fira Code', monospace;
+
+  --ease-text-xs:   0.75rem;
+  --ease-text-sm:   0.875rem;
+  --ease-text-base: 1rem;
+  --ease-text-lg:   1.125rem;
+  --ease-text-xl:   1.25rem;
+  --ease-text-2xl:  1.5rem;
+  --ease-text-3xl:  1.875rem;
+  --ease-text-4xl:  2.25rem;
+
+  --ease-leading-tight:  1.25;
+  --ease-leading-normal: 1.6;
+  --ease-leading-loose:  1.9;
+
+  /* ── Z-Index Scale ─────────────────────────────────────── */
+  --ease-z-base:    0;
+  --ease-z-raised:  10;
+  --ease-z-overlay: 100;
+  --ease-z-modal:   1000;
+  --ease-z-toast:   9999;
+}

package/easemotion.css

@@ -0,0 +1,23 @@
+/* ============================================================
+   EaseMotion CSS — easemotion.css
+   Single entry point. Import this one file to use the entire
+   framework. Order matters: variables must load first.
+   ============================================================
+
+   Usage:
+     <link rel="stylesheet" href="easemotion.css" />
+
+   Or in CSS:
+     @import "easemotion.css";
+
+   ============================================================ */
+
+/* ── Core (required, load in this order) ─────────────────── */
+@import "./core/variables.css";
+@import "./core/base.css";
+@import "./core/animations.css";
+@import "./core/utilities.css";
+
+/* ── Components (tree-shakeable in future versions) ──────── */
+@import "./components/buttons.css";
+@import "./components/cards.css";

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "easemotion-css",
+  "version": "1.0.0",
+  "description": "Human-readable, animation-first CSS framework. Zero dependencies. Link one file and start building.",
+  "main": "easemotion.css",
+  "style": "easemotion.css",
+  "files": [
+    "easemotion.css",
+    "core/",
+    "components/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "test": "echo \"No tests yet\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SAPTARSHI-coder/EaseMotion-css.git"
+  },
+  "keywords": [
+    "css",
+    "animation",
+    "framework",
+    "easemotion",
+    "ui",
+    "hover",
+    "transitions",
+    "utilities",
+    "no-build",
+    "readable"
+  ],
+  "author": "Saptarshi Sadhu <https://github.com/SAPTARSHI-coder>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/SAPTARSHI-coder/EaseMotion-css/issues"
+  },
+  "homepage": "https://github.com/SAPTARSHI-coder/EaseMotion-css#readme"
+}