@windstream/react-shared-components 0.0.46 → 0.0.48

package/src/utils/index.ts

@@ -1,49 +1,49 @@
-import { clsx, type ClassValue } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-
-const twMerge = extendTailwindMerge({
-  // Define class groups so twMerge knows which classes override each other
-  extend: {
-    classGroups: {
-      ["font-variants" as any]: [
-        "heading1",
-        "heading2",
-        "heading3",
-        "heading4",
-        "heading5",
-        "heading6",
-        "subheading1",
-        "subheading2",
-        "subheading3",
-        "subheading4",
-        "subheading5",
-        "subheading6",
-        "body1",
-        "body2",
-        "body3",
-        "footnote",
-        "micro",
-        "label1",
-        "label2",
-        "label3",
-        "label4",
-      ],
-      ["button-sizes" as any]: [
-        "btn-small",
-        "btn-medium",
-        "btn-large",
-        "btn-x-large",
-      ],
-    },
-  },
-});
-
-/**
- * Utility function to combine class names using clsx
- * @param inputs - Class values to combine
- * @returns Combined class string
- */
-export const cx = (...val: ClassValue[]) => twMerge(clsx(...val));
-
-export { clsx };
-export type { ClassValue };
+import { clsx, type ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  // Define class groups so twMerge knows which classes override each other
+  extend: {
+    classGroups: {
+      ["font-variants" as any]: [
+        "heading1",
+        "heading2",
+        "heading3",
+        "heading4",
+        "heading5",
+        "heading6",
+        "subheading1",
+        "subheading2",
+        "subheading3",
+        "subheading4",
+        "subheading5",
+        "subheading6",
+        "body1",
+        "body2",
+        "body3",
+        "footnote",
+        "micro",
+        "label1",
+        "label2",
+        "label3",
+        "label4",
+      ],
+      ["button-sizes" as any]: [
+        "btn-small",
+        "btn-medium",
+        "btn-large",
+        "btn-x-large",
+      ],
+    },
+  },
+});
+
+/**
+ * Utility function to combine class names using clsx
+ * @param inputs - Class values to combine
+ * @returns Combined class string
+ */
+export const cx = (...val: ClassValue[]) => twMerge(clsx(...val));
+
+export { clsx };
+export type { ClassValue };

package/tailwind.config.cjs

@@ -29,6 +29,7 @@ module.exports = {
           },
           success: "var(--color-border-success)",
           tertiary: "var(--color-border-tertiary)",
+          accent: "var(--color-border-accent)",
         },
 
         icon: {
@@ -37,7 +38,7 @@ module.exports = {
             accent: "var(--color-icon-brand-accent)",
           },
           critical: "var(--color-icon-critical)",
-          default: "var(--color-icon-default)",
+          DEFAULT: "var(--color-icon)",
           info: "var(--color-icon-info)",
           inverse: {
             DEFAULT: "var(--color-icon-inverse)",
@@ -45,6 +46,7 @@ module.exports = {
           },
           secondary: "var(--color-icon-secondary)",
           success: "var(--color-icon-success)",
+          disabled: "var(--color-icon-disabled)",
         },
 
         // Specialty
@@ -134,6 +136,7 @@ module.exports = {
             fill: "var(--color-toggle-bg-fill)",
             surface: {
               active: "var(--color-toggle-bg-surface-active)",
+              inactive: "var(--color-toggle-bg-surface-inactive)",
               disabled: "var(--color-toggle-bg-surface-disabled)",
             },
           },
@@ -242,6 +245,9 @@ module.exports = {
           },
           secondary: "var(--color-text-secondary)",
           success: "var(--color-text-success)",
+          accent: {
+            "on-bg-inverse": "var(--color-text-accent-on-bg-inverse)",
+          },
         },
       },
       fontSize: {