@marigold/theme-rui 0.4.0 → 1.0.0

package/dist/theme.css

@@ -1,4 +1,4 @@
-@import './mixins.css';
+@import './utils.css';
 
 /*
     TODO: how to do normalization so we doesn't break everything?

package/dist/utils.css

@@ -0,0 +1,61 @@
+/*
+ * Custom Tailwind utilities
+ *
+ * This file contains reusable utility functions and class shortcuts that
+ * encapsulate common design decisions across the theme. These include
+ * standardized styling for interactive states like keyboard focus, disabled
+ * components, and other consistent UI patterns.
+ */
+
+/*
+ * Applies a consistent visual style for keyboard focus states across components.
+ * This utility sets a colored focus ring and border based on the given theme color,
+ * while removing the default outline.
+ *
+ * Use this as a default for all components (that don't have their own border).
+ */
+@utility util-focus-* {
+  border-color: --value(--color- *);
+  outline-style: none;
+
+  --tw-ring-color: --alpha(--value(--color- *) / 50%);
+  --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+/*
+ * Applies a consistent visual style for keyboard focus states across components.
+ * This utility sets a colored focus ring based on the given theme color,
+ * while removing the default outline.
+ *
+ * Use this when the component has its own border and you need to keep it.
+ */
+@utility util-focus-borderless-* {
+  outline-style: none;
+
+  --tw-ring-color: --alpha(--value(--color- *) / 50%);
+  --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+/*
+ * Defines a consistent visual and behavioral style for disabled UI elements.
+ */
+@utility util-disabled {
+  background-color: var(--color-disabled);
+  color: var(--color-disabled-foreground);
+
+  cursor: not-allowed;
+
+  --tw-border-style: none;
+  border-style: none;
+
+  --tw-shadow: 0 0 #0000;
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/theme-rui",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "Marigold RUI Theme",
   "license": "MIT",
   "keywords": [
@@ -43,21 +43,21 @@
     "directory": "themes/theme-rui"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.0.17",
+    "@tailwindcss/postcss": "4.1.3",
     "cssnano": "7.0.6",
     "postcss-cli": "11.0.1",
-    "tailwindcss": "4.0.17",
-    "tsup": "8.3.6",
+    "tailwindcss": "4.1.3",
+    "tsup": "8.4.0",
     "@marigold/tsconfig": "0.4.0"
   },
   "dependencies": {
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-react-aria-components": "2.0.0",
-    "@marigold/components": "11.3.0",
-    "@marigold/system": "11.3.0",
+    "@marigold/components": "11.4.1",
+    "@marigold/system": "11.4.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 src/global.css src/mixins.css dist/"
+    "build": "NODE_ENV=production tsup && postcss -o dist/styles.css src/styles.css && cp src/theme.css src/global.css src/utils.css dist/"
   }
 }

package/dist/mixins.css

@@ -1,54 +0,0 @@
-/*
-  File: tailwind-components.css
-
-  Description
-  -----------
-  This file defines custom Tailwind CSS component classes by bundling commonly used utility classes
-  with the @apply directive. The goal is to reduce duplication, enhance maintainability, and ensure
-  a consistent styling pattern across various components.
-
-  Usage
-  -----
-  Import this file into your main stylesheet or reference it in your Tailwind CSS configuration.
-
-  Best Practices
-  --------------
-  - Encapsulate frequently used utility combinations into custom classes for better reusability.
-  - Update the definitions here to maintain consistency in our design system across all components.
-  - Keep custom classes focused on specific styling concerns to preserve clarity.
-*/
-
-@layer utilities {
-  /*==============*/
-  /*     Focus    */
-  /*==============*/
-  .mixin-ring-focus-visible {
-    @apply focus-visible:border-ring focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px];
-  }
-
-  .mixin-ring-has-focus-visible {
-    @apply has-focus-visible:border-border has-focus-visible:ring-ring/50 has-focus-visible:ring-[3px];
-  }
-
-  /* TODO: rename the groups to something common? e.g. "control" or something */
-  .mixin-ring-focus-visible-checkbox {
-    @apply group-focus-visible/checkbox:ring-ring/50 group-focus-visible/checkbox:ring-[3px];
-  }
-  .mixin-ring-focus-visible-radio {
-    @apply group-focus-visible/radio:ring-ring/50 group-focus-visible/radio:ring-[3px];
-  }
-  .mixin-ring-focus-visible-switch {
-    @apply group-focus-visible/switch:ring-ring/50 group-focus-visible/switch:ring-[3px];
-  }
-
-  .mixin-ring-focus-visible-borderless {
-    @apply focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px];
-  }
-
-  /*==============*/
-  /*   Disabled   */
-  /*==============*/
-  .mixin-disabled {
-    @apply disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed disabled:border-none disabled:shadow-none;
-  }
-}