@marigold/theme-rui 0.3.2 → 0.4.0

package/dist/theme.css

@@ -93,7 +93,7 @@
   /* 
     muted colors are desaturated colors of the brand color,
     they help create hierarchy for secondary text. 
-    Currently used for: helptext, icons inside inputs, readonly background inside inputs
+    Currently used for: helptext, icons inside inputs, readonly background inside inputs, variant for text 
   */
   --color-muted: var(--color-stone-100);
   --color-muted-foreground: var(--color-stone-500);
@@ -102,7 +102,7 @@
   --color-disabled-foreground: var(--color-stone-400);
 
   /* used for placeholder color */
-  --color-placeholder: --alpha(var(--color-stone-500) / 70%);
+  --color-placeholder: var(--color-stone-500);
   /* used for outline/border as ring*/
   --color-ring: var(--color-stone-400);
 
@@ -129,6 +129,79 @@
   /* Selected color is used when there is an active selection in the component */
   --color-selected: var(--color-stone-100);
 
+  /* easing functions (https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d)*/
+
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+
+  --fade-in-duration: 0.3s;
+  --fade-out-duration: 0.15s;
+
+  --animate-fade-in: fade-in var(--fade-in-duration) var(--ease-out-cubic);
+  --animate-fade-out: fade-in var(--fade-out-duration) reverse;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      filter: blur(6px);
+    }
+    to {
+      opacity: 1;
+      filter: blur(0);
+    }
+  }
+
+  --animate-fade-in-up: fade-in-up var(--fade-in-duration) var(--ease-out-cubic);
+
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(15px);
+      filter: blur(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
+  }
+
+  /* animation slide in */
+  --slide-in-duration: 0.3s;
+  --slide-out-duration: 0.15s;
+
+  --animate-slide-in-right: slide-in-right var(--slide-in-duration)
+    var(--ease-out-expo);
+  --animate-slide-out-right: slide-in-right var(--slide-out-duration) reverse;
+
+  @keyframes slide-in-right {
+    from {
+      transform: translateX(100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
   /* animation and keyframes */
   --animate-rotate-spinner: rotate-spinner 2s linear infinite;
   --animate-progress-cycle: progress-cycle 1.5s linear infinite;
@@ -137,6 +210,7 @@
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
@@ -147,9 +221,11 @@
       transform: rotate(0deg);
       stroke-dashoffset: 75;
     }
+
     30% {
       stroke-dashoffset: 20;
     }
+
     100% {
       transform: rotate(360deg);
       stroke-dashoffset: 75;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/theme-rui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Marigold RUI Theme",
   "license": "MIT",
   "keywords": [
@@ -43,18 +43,18 @@
     "directory": "themes/theme-rui"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.0.12",
+    "@tailwindcss/postcss": "4.0.17",
     "cssnano": "7.0.6",
-    "postcss-cli": "11.0.0",
-    "tailwindcss": "4.0.12",
+    "postcss-cli": "11.0.1",
+    "tailwindcss": "4.0.17",
     "tsup": "8.3.6",
     "@marigold/tsconfig": "0.4.0"
   },
   "dependencies": {
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-react-aria-components": "2.0.0",
-    "@marigold/components": "11.2.3",
-    "@marigold/system": "11.2.3",
+    "@marigold/components": "11.3.0",
+    "@marigold/system": "11.3.0",
     "@marigold/theme-plugins": "1.0.1"
   },
   "scripts": {