@marigold/theme-rui 0.1.0 → 0.2.0

package/dist/theme.css

@@ -15,6 +15,11 @@
  text-destructive like used in inputs
 */
 
+@plugin "@marigold/theme-plugins/src/tw-rac-plugins";
+@plugin "@marigold/theme-plugins/src/tw-custom-placement-plugin";
+@plugin "@marigold/theme-plugins/src/tw-custom-aria-variants-plugin";
+@plugin "tailwindcss-animate";
+
 @theme {
   /* orange (use for accent) */
   --color-orange-50: #fff9ed;
@@ -38,18 +43,100 @@
   --color-brand: var(--color-stone-950);
   --color-brand-foreground: var(--color-stone-50);
 
+  /* used for hovering (e.g. calendar, button) */
+  --color-hover: var(--color-stone-300);
+  --color-hover-foreground: var(--color-stone-950);
+
+  /* stone (use for secondary) */
+  --color-secondary: var(--color-stone-50);
+  --color-secondary-foreground: var(--color-stone-950);
+
+  /* accent colors used for highlighting certain parts of components */
+
+  /* used for errormessage, button */
   --color-destructive: var(--color-red-600);
   --color-destructive-foreground: var(--color-white);
 
+  /* muted variant of destructive for badge */
+  --color-destructive-muted-accent: var(--color-red-600);
+  --color-destructive-muted: var(--color-red-100);
+  --color-destructive-muted-foreground: var(--color-red-950);
+
+  /* muted variant of success token, used in badge */
+  --color-success-muted-accent: var(--color-green-600);
+  --color-success-muted: var(--color-green-100);
+  --color-success-muted-foreground: var(--color-green-950);
+
+  /* muted variant of warning token, used in badge */
+  --color-warning-muted-accent: var(--color-yellow-600);
+  --color-warning-muted: var(--color-yellow-100);
+  --color-warning-muted-foreground: var(--color-yellow-950);
+
+  /* muted variant of info token, used in badge */
+  --color-info-muted-accent: var(--color-blue-600);
+  --color-info-muted: var(--color-blue-100);
+  --color-info-muted-foreground: var(--color-blue-950);
+
+  /* 
+    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
+  */
   --color-muted: var(--color-stone-100);
   --color-muted-foreground: var(--color-stone-500);
 
+  --color-disabled: var(--color-stone-200);
+  --color-disabled-foreground: var(--color-stone-400);
+
+  /* used for placeholder color */
   --color-placeholder: --alpha(var(--color-stone-500) / 70%);
+  /* used for outline/border as ring*/
+  --color-ring: var(--color-stone-400);
 
   /* Input tokens */
-  --color-input-border: var(--color-stone-300);
-  --color-input-ring: var(--color-stone-400);
+  /* color input used for inputs as border or e.g. in switch as bg track color */
+  --color-input: var(--color-stone-300);
+  /* component height for input elements */
+  --spacing-input: 2.25rem;
+
+  /* component height for button elements */
+  --spacing-button: 2.25rem;
+
+  /* surface colors used for elevation levels */
+  --color-surface-overlay: var(--color-white);
+
+  --color-border: var(--color-stone-200);
+
+  /* Focus color is used for focusing an element (e.g. segment on Datefield)*/
+  --color-focus: var(--color-stone-100);
+
+  /* Selected color is used when there is an active selection in the component */
+  --color-selected: var(--color-stone-100);
+
+  /* animation and keyframes */
+  --animate-rotate-spinner: rotate-spinner 2s linear infinite;
+  --animate-progress-cycle: progress-cycle 1.5s linear infinite;
+
+  @keyframes rotate-spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 
-  /* component height */
-  --spacing-component: 2.25rem;
+  @keyframes progress-cycle {
+    0% {
+      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.1.0",
+  "version": "0.2.0",
   "description": "Marigold RUI Theme",
   "license": "MIT",
   "keywords": [
@@ -41,16 +41,18 @@
     "directory": "themes/theme-rui"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.0.6",
+    "@tailwindcss/postcss": "4.0.9",
     "cssnano": "7.0.6",
     "postcss-cli": "11.0.0",
-    "tailwindcss": "4.0.6",
-    "tsup": "8.3.5",
+    "tailwindcss": "4.0.9",
+    "tailwindcss-animate": "1.0.7",
+    "tsup": "8.3.6",
     "@marigold/tsconfig": "0.4.0"
   },
   "dependencies": {
-    "@marigold/system": "11.1.1",
-    "@marigold/components": "11.1.1"
+    "@marigold/components": "11.2.1",
+    "@marigold/system": "11.2.1",
+    "@marigold/theme-plugins": "1.0.1"
   },
   "scripts": {
     "build": "NODE_ENV=production tsup && postcss -o dist/styles.css src/styles.css && cp src/theme.css dist/theme.css"