@felloinnovations/brand-kit 0.4.0 → 0.5.1

package/dist/toast.d.ts

@@ -11,6 +11,20 @@ export { toast } from 'sonner';
  * the skin, so that is all this file is.
  *
  * sonner is an optional peer dependency. Install it in the consuming app.
+ *
+ * In step with `.ws-toast` (design-system/components/Toast/style.css), Seth's
+ * navy pill: the act fill with the act's words (12.71:1), no border, 18px
+ * corners, the pop drop, 13px words, the detail in the act's words at 76%
+ * (8.0:1), and the act as underlined words, never a second fill. It is the act
+ * fill, so it turns light on a dark page by itself. A toast is a receipt, never
+ * an error, so error and success keep the pill's words: the old red and green
+ * tones were AA on a white card and fail on the navy.
+ *
+ * sonner injects its own unlayered stylesheet, which beats any Tailwind class
+ * (those sit in a cascade layer), so every class that must win is
+ * `!important`: the description (sonner's #3f3f3f) and the focus ring that
+ * replaces sonner's `outline: none`. On touch the two buttons are 40px tall
+ * instead of sonner's 24.
  */
 declare function Toaster(props: ToasterProps): react.JSX.Element;
 

package/dist/toast.js

@@ -3,45 +3,49 @@
 // src/components/toast.tsx
 import { Toaster as SonnerToaster, toast } from "sonner";
 import { jsx } from "react/jsx-runtime";
+var ring = "focus-visible:outline-solid! focus-visible:outline-[length:var(--ws-focus-width)]! focus-visible:outline-[color:var(--ws-on-act)]! focus-visible:outline-offset-[var(--ws-focus-offset)]!";
+var button = `${ring} focus-visible:shadow-none! pointer-coarse:min-h-[var(--ws-touch)] hover:decoration-[length:var(--ws-focus-width)]!`;
+var act = {
+  background: "none",
+  color: "var(--ws-on-act)",
+  borderRadius: "var(--ws-radius-control)",
+  padding: "0 var(--space-xxs)",
+  fontFamily: "var(--font-body)",
+  fontSize: "var(--ws-text-control)",
+  lineHeight: "var(--ws-leading-control)",
+  textDecoration: "underline",
+  textUnderlineOffset: "var(--space-3xs)"
+};
 function Toaster(props) {
   return /* @__PURE__ */ jsx(
     SonnerToaster,
     {
       position: "bottom-right",
+      mobileOffset: { bottom: "calc(var(--space-6xl) + var(--space-xs))" },
       toastOptions: {
         style: {
-          background: "var(--color-white)",
-          color: "var(--color-text-body)",
-          border: "1px solid var(--color-border-default)",
-          borderRadius: "var(--radius-sm)",
-          boxShadow: "var(--shadow-card-hover)",
-          fontFamily: "var(--font-body)",
-          fontSize: "var(--font-size-sm)"
-        },
-        // The action buttons take *Style rather than classNames: sonner ships
-        // its own inline styles for them, which win over a Tailwind class and
-        // leave the button sonner's default black instead of brand salmon.
-        actionButtonStyle: {
-          background: "var(--color-brand-salmon)",
-          color: "var(--color-white)",
-          borderRadius: "var(--radius-sm)",
-          fontFamily: "var(--font-body)",
-          fontSize: "var(--font-size-2xs)",
-          fontWeight: 600
-        },
-        cancelButtonStyle: {
-          background: "var(--color-gray-2)",
-          color: "var(--color-text-body)",
-          borderRadius: "var(--radius-sm)",
+          background: "var(--color-text-heading)",
+          // The title inherits this (sonner sets it to inherit).
+          color: "var(--ws-on-act)",
+          border: 0,
+          borderRadius: "calc(var(--space-md) + var(--space-3xs))",
+          boxShadow: "var(--ws-shadow-pop)",
+          padding: "var(--space-xs) var(--space-sm-plus)",
+          gap: "var(--space-sm)",
           fontFamily: "var(--font-body)",
-          fontSize: "var(--font-size-2xs)",
-          fontWeight: 500
+          fontSize: "var(--ws-text-control)",
+          lineHeight: "var(--ws-leading-control)"
         },
+        // The buttons take *Style rather than classNames: sonner ships its own
+        // inline styles for them, which win over a Tailwind class.
+        actionButtonStyle: { ...act, fontWeight: 600 },
+        cancelButtonStyle: { ...act, fontWeight: 500 },
         classNames: {
-          title: "font-medium text-[color:var(--color-text-heading)]",
-          description: "text-[color:var(--color-text-muted)]",
-          error: "text-[color:var(--color-feedback-error)]",
-          success: "text-[color:var(--color-feedback-success-text)]"
+          toast: ring,
+          title: "font-medium",
+          description: "text-[color:color-mix(in_srgb,var(--ws-on-act)_76%,transparent)]!",
+          actionButton: button,
+          cancelButton: button
         }
       },
       ...props