@alexandregme/zljs 1.7.0 → 1.8.0

package/README.md

@@ -43,6 +43,30 @@ import { FormProvider, FormInput } from "@alexandregme/zljs/rhf";
 <Button onClick={handleClick}>Submit</Button>;
 ```
 
+## Colors
+
+The components work with no setup, using the default colors. To use your own, redefine the values you want after importing the styles:
+
+```css
+@import "tailwindcss";
+@import "@alexandregme/zljs/styles.css";
+
+@theme {
+  --color-zl-primary: #2e7d32;
+}
+```
+
+`primary`, `success`, `danger`, `warning`, `info` and `muted` each take one value (`--color-zl-<color>`), used for text and the focus outline. The others follow it, and you can redefine them too:
+
+| Value                       | Used for               | Default                                    |
+| --------------------------- | ---------------------- | ------------------------------------------ |
+| `--color-zl-<color>-strong` | Link hover             | 30% darker                                 |
+| `--color-zl-<color>-bg`     | Button background      | The color itself (`warning`: `yellow-500`) |
+| `--color-zl-<color>-hover`  | Button hover           | The background, 15% darker                 |
+| `--color-zl-<color>-on`     | Text on the background | White (`warning`: `gray-900`)              |
+
+Only the defaults are checked for contrast. Check your own choice: 4.5:1 for text, on `--color-zl-<color>` against the page and on `-on` against `-bg`, and 3:1 for the focus outline. A value set on a nested element doesn't reach the values derived from it, so set them in `@theme` or `:root`.
+
 ## Getting Started
 
 ```bash

package/dist/{chunk-GDE6UMXP.js → chunk-WZNUKE6S.js}

@@ -28,7 +28,7 @@ import { forwardRef, useId } from "react";
 // core/forms/error/error.styles.ts
 import { tv } from "tailwind-variants";
 var error = tv({
-  base: "text-sm text-red-600"
+  base: "text-sm text-zl-danger"
 });
 
 // core/forms/error/error.tsx

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   FormInput,
   FormProvider,
   Input
-} from "./chunk-GDE6UMXP.js";
+} from "./chunk-WZNUKE6S.js";
 
 // core/icon/icon.tsx
 import * as LucideIcons from "lucide-react";
@@ -51,18 +51,18 @@ var button = tv({
   base: "cursor-pointer font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center",
   variants: {
     variant: {
-      default: "px-4 py-2 text-white text-sm gap-2 rounded-md",
+      default: "px-4 py-2 text-sm gap-2 rounded-md",
       icon: "p-1 bg-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md",
       // The invisible ::after grows the touch target to 44px without changing the layout.
       link: "relative text-xs hover:underline rounded-sm after:absolute after:top-1/2 after:left-1/2 after:h-11 after:w-full after:min-w-11 after:-translate-x-1/2 after:-translate-y-1/2"
     },
     color: {
-      primary: "bg-blue-600 hover:bg-blue-700 focus-visible:outline-blue-600",
-      success: "bg-green-700 hover:bg-green-800 focus-visible:outline-green-700",
-      danger: "bg-red-600 hover:bg-red-700 focus-visible:outline-red-600",
-      warning: "bg-yellow-500 hover:bg-yellow-600 focus-visible:outline-yellow-700 text-gray-900",
-      info: "bg-cyan-700 hover:bg-cyan-800 focus-visible:outline-cyan-700",
-      muted: "bg-gray-500 hover:bg-gray-600 focus-visible:outline-gray-500",
+      primary: "bg-zl-primary-bg hover:bg-zl-primary-hover text-zl-primary-on focus-visible:outline-zl-primary",
+      success: "bg-zl-success-bg hover:bg-zl-success-hover text-zl-success-on focus-visible:outline-zl-success",
+      danger: "bg-zl-danger-bg hover:bg-zl-danger-hover text-zl-danger-on focus-visible:outline-zl-danger",
+      warning: "bg-zl-warning-bg hover:bg-zl-warning-hover text-zl-warning-on focus-visible:outline-zl-warning",
+      info: "bg-zl-info-bg hover:bg-zl-info-hover text-zl-info-on focus-visible:outline-zl-info",
+      muted: "bg-zl-muted-bg hover:bg-zl-muted-hover text-zl-muted-on focus-visible:outline-zl-muted",
       ghost: "bg-transparent text-current hover:text-current hover:bg-neutral-500/20",
       none: ""
     },
@@ -104,32 +104,32 @@ var button = tv({
     {
       variant: "link",
       color: "primary",
-      class: "text-blue-600 hover:text-blue-800"
+      class: "text-zl-primary hover:text-zl-primary-strong"
     },
     {
       variant: "link",
       color: "success",
-      class: "text-green-700 hover:text-green-900"
+      class: "text-zl-success hover:text-zl-success-strong"
     },
     {
       variant: "link",
       color: "danger",
-      class: "text-red-600 hover:text-red-800"
+      class: "text-zl-danger hover:text-zl-danger-strong"
     },
     {
       variant: "link",
       color: "warning",
-      class: "text-yellow-700 hover:text-yellow-900"
+      class: "text-zl-warning hover:text-zl-warning-strong"
     },
     {
       variant: "link",
       color: "info",
-      class: "text-cyan-700 hover:text-cyan-900"
+      class: "text-zl-info hover:text-zl-info-strong"
     },
     {
       variant: "link",
       color: "muted",
-      class: "text-gray-500 hover:text-gray-700"
+      class: "text-zl-muted hover:text-zl-muted-strong"
     },
     {
       variant: "link",
@@ -224,7 +224,7 @@ var innerWrapper = tv2({
   variants: {
     variant: {
       default: "w-fit items-center gap-2",
-      card: "items-start gap-3 rounded-lg border border-gray-500 p-3 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 has-disabled:bg-gray-100"
+      card: "items-start gap-3 rounded-lg border border-gray-500 p-3 has-checked:border-zl-primary has-checked:ring-1 has-checked:ring-zl-primary has-disabled:bg-gray-100"
     }
   },
   defaultVariants: {
@@ -678,6 +678,19 @@ var DataGrid = ({
 
 // core/text/text.styles.ts
 import { tv as tv8 } from "tailwind-variants";
+
+// core/types/colors.const.ts
+var semanticTextColors = {
+  primary: "text-zl-primary",
+  success: "text-zl-success",
+  danger: "text-zl-danger",
+  warning: "text-zl-warning",
+  info: "text-zl-info",
+  muted: "text-zl-muted",
+  none: ""
+};
+
+// core/text/text.styles.ts
 var text = tv8({
   variants: {
     variant: {
@@ -685,15 +698,7 @@ var text = tv8({
       caption: "text-sm",
       display: "text-3xl font-bold"
     },
-    color: {
-      primary: "text-blue-600",
-      success: "text-green-700",
-      danger: "text-red-600",
-      warning: "text-yellow-700",
-      info: "text-sky-700",
-      muted: "text-gray-500",
-      none: ""
-    }
+    color: semanticTextColors
   },
   defaultVariants: {
     variant: "body"
@@ -858,15 +863,7 @@ var heading = tv11({
       5: "text-base font-medium",
       6: "text-sm font-medium"
     },
-    color: {
-      primary: "text-blue-600",
-      success: "text-green-700",
-      danger: "text-red-600",
-      warning: "text-yellow-700",
-      info: "text-sky-700",
-      muted: "text-gray-500",
-      none: ""
-    }
+    color: semanticTextColors
   },
   defaultVariants: {
     level: 1

package/dist/rhf/index.js

@@ -2,7 +2,7 @@
 import {
   FormInput,
   FormProvider
-} from "../chunk-GDE6UMXP.js";
+} from "../chunk-WZNUKE6S.js";
 export {
   FormInput,
   FormProvider

package/dist/styles/ag-grid.css

@@ -0,0 +1,32 @@
+/* AG Grid Custom Styles */
+.ag-theme-alpine {
+  --ag-header-background-color: #f8fafc;
+  --ag-header-foreground-color: #334155;
+  --ag-header-cell-hover-background-color: #e2e8f0;
+  --ag-odd-row-background-color: #f8fafc;
+  --ag-row-hover-color: #e0f2fe;
+  --ag-selected-row-background-color: #dbeafe;
+  --ag-border-color: #e2e8f0;
+  --ag-font-family: inherit;
+  --ag-font-size: 14px;
+}
+
+.ag-theme-alpine .ag-header-cell {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  border-right: 1px solid #475569;
+}
+
+.ag-theme-alpine .ag-header-cell:last-child {
+  border-right: none;
+}
+
+.ag-theme-alpine .ag-row {
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.ag-theme-alpine .ag-row:hover {
+  background-color: var(--ag-row-hover-color);
+}

package/dist/styles/colors.css

@@ -0,0 +1,57 @@
+/* The semantic colors of the components. Works with no setup; an app changes a
+   color by redefining its --color-zl-* value in its own @theme, after importing
+   the styles. Only the defaults are checked for contrast.
+
+   Each color has five values, and the others follow the first unless redefined:
+     --color-zl-<color>         text and focus outline
+     --color-zl-<color>-strong  link hover
+     --color-zl-<color>-bg      button background
+     --color-zl-<color>-hover   button hover
+     --color-zl-<color>-on      text on the background
+
+   Prettier is off for this block to keep one value per line. */
+
+/* prettier-ignore */
+@theme {
+  /* Primary */
+  --color-zl-primary:        var(--color-blue-600);
+  --color-zl-primary-strong: color-mix(in oklab, var(--color-zl-primary), black 30%);
+  --color-zl-primary-bg:     var(--color-zl-primary);
+  --color-zl-primary-hover:  color-mix(in oklab, var(--color-zl-primary-bg), black 15%);
+  --color-zl-primary-on:     var(--color-white);
+
+  /* Success */
+  --color-zl-success:        var(--color-green-700);
+  --color-zl-success-strong: color-mix(in oklab, var(--color-zl-success), black 30%);
+  --color-zl-success-bg:     var(--color-zl-success);
+  --color-zl-success-hover:  color-mix(in oklab, var(--color-zl-success-bg), black 15%);
+  --color-zl-success-on:     var(--color-white);
+
+  /* Danger */
+  --color-zl-danger:        var(--color-red-600);
+  --color-zl-danger-strong: color-mix(in oklab, var(--color-zl-danger), black 30%);
+  --color-zl-danger-bg:     var(--color-zl-danger);
+  --color-zl-danger-hover:  color-mix(in oklab, var(--color-zl-danger-bg), black 15%);
+  --color-zl-danger-on:     var(--color-white);
+
+  /* Warning */
+  --color-zl-warning:        var(--color-yellow-700);
+  --color-zl-warning-strong: color-mix(in oklab, var(--color-zl-warning), black 30%);
+  --color-zl-warning-bg:     var(--color-yellow-500);
+  --color-zl-warning-hover:  color-mix(in oklab, var(--color-zl-warning-bg), black 15%);
+  --color-zl-warning-on:     var(--color-gray-900);
+
+  /* Info */
+  --color-zl-info:        var(--color-cyan-700);
+  --color-zl-info-strong: color-mix(in oklab, var(--color-zl-info), black 30%);
+  --color-zl-info-bg:     var(--color-zl-info);
+  --color-zl-info-hover:  color-mix(in oklab, var(--color-zl-info-bg), black 15%);
+  --color-zl-info-on:     var(--color-white);
+
+  /* Muted */
+  --color-zl-muted:        var(--color-gray-500);
+  --color-zl-muted-strong: color-mix(in oklab, var(--color-zl-muted), black 30%);
+  --color-zl-muted-bg:     var(--color-zl-muted);
+  --color-zl-muted-hover:  color-mix(in oklab, var(--color-zl-muted-bg), black 15%);
+  --color-zl-muted-on:     var(--color-white);
+}

package/dist/styles/scrollbar.css

@@ -0,0 +1,17 @@
+/* Global Scrollbar */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(228, 231, 234, 0.5);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.75);
+}

package/dist/styles.css

@@ -1,54 +1,7 @@
+@import "./styles/colors.css";
+@import "./styles/scrollbar.css";
+@import "./styles/ag-grid.css";
+
 /* Makes the consumer's Tailwind scan the component classes. The path is
    relative to this file, so it works from core/ and from the copy in dist/. */
 @source "./";
-
-/* Global Scrollbar */
-::-webkit-scrollbar {
-  width: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(228, 231, 234, 0.5);
-  border-radius: 2px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.75);
-}
-
-/* AG Grid Custom Styles */
-.ag-theme-alpine {
-  --ag-header-background-color: #f8fafc;
-  --ag-header-foreground-color: #334155;
-  --ag-header-cell-hover-background-color: #e2e8f0;
-  --ag-odd-row-background-color: #f8fafc;
-  --ag-row-hover-color: #e0f2fe;
-  --ag-selected-row-background-color: #dbeafe;
-  --ag-border-color: #e2e8f0;
-  --ag-font-family: inherit;
-  --ag-font-size: 14px;
-}
-
-.ag-theme-alpine .ag-header-cell {
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 12px;
-  letter-spacing: 0.05em;
-  border-right: 1px solid #475569;
-}
-
-.ag-theme-alpine .ag-header-cell:last-child {
-  border-right: none;
-}
-
-.ag-theme-alpine .ag-row {
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.ag-theme-alpine .ag-row:hover {
-  background-color: var(--ag-row-hover-color);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",