@graphty/compact-mantine 0.9.29 → 0.9.31

package/dist/index.d.cts

@@ -678,6 +678,9 @@ export declare const COMPACT_SIZING: {
     readonly SECTION_GAP: 4;
 };
 
+/** The accents the theme ships: Figma's blue, or the graphty brand lime and ink. */
+export declare type CompactAccent = "figma" | "graphty";
+
 /**
  * The accent palette, the theme's `primaryColor` (spec 3.3). Mantine reads shade 6 filled and
  * 7 hover in light (#0d99ff / #007be5), 8 / 9 in dark (#0c8ce9 / #0a6dc2), and shade 4 as the
@@ -881,12 +884,13 @@ export declare interface CompactColorInputProps {
 }
 
 /**
- * Color configuration for the compact theme: every Mantine color, the neutral `dark` ramp and
- * the `brand` accent.
+ * Color configuration for the compact theme: every Mantine color, the neutral `dark` ramp, the
+ * `brand` accent and the `graphty` accent.
  */
 export declare const compactColors: {
     dark: MantineColorsTuple;
     brand: MantineColorsTuple;
+    graphty: MantineColorsTuple;
     gray: MantineColorsTuple;
     red: MantineColorsTuple;
     pink: MantineColorsTuple;
@@ -915,13 +919,22 @@ export declare const compactColors: {
 export declare const compactDarkColors: MantineColorsTuple;
 
 /**
- * The whole stylesheet, for SSR or a shadow root. With `highContrast` the AA tokens are also
- * applied unconditionally, so the result needs no `data-cm-contrast` attribute.
+ * The whole stylesheet, for SSR or a shadow root. With `highContrast` the AA tokens, and with
+ * `accent: "graphty"` the graphty accent tokens, are also applied unconditionally, so the result
+ * needs no `data-cm-contrast` or `data-cm-accent` attribute.
  * @param options - the theme options
  * @returns the CSS text
  */
 export declare function compactGlobalCss(options?: CompactThemeOptions): string;
 
+/**
+ * The graphty brand lime, the `primaryColor` of `createCompactTheme({ accent: "graphty" })`, for
+ * the Mantine components that read the primary palette directly: 0 the lime-50 tint, 6 the mark
+ * green #97c800 (the light fill), 7 the olive #588300 (light text), 8 the bright lime #c4f23a
+ * (the dark fill). The `--cm-*` accent tokens take their values from CM_GRAPHTY_ACCENT.
+ */
+export declare const compactGraphtyColors: MantineColorsTuple;
+
 /**
  * Every user-visible or assistive-technology-visible string this library
  * produces.
@@ -1246,6 +1259,12 @@ export declare interface CompactThemeOptions {
      * Apply the WCAG 2.2 AA token set (spec 2.9). Default false: exact Figma.
      */
     highContrast?: boolean;
+    /**
+     * The accent: `"figma"` (default) is Figma's blue; `"graphty"` is the graphty brand lime,
+     * with ink labels on lime fills and olive text on light, which meets AA in both contrast
+     * modes. It sets the theme's `primaryColor` to `"graphty"`.
+     */
+    accent?: CompactAccent;
 }
 
 /**
@@ -1426,6 +1445,7 @@ export declare const compactThemeOverride: {
         } | undefined;
         compact?: {
             highContrast?: boolean | undefined;
+            accent?: CompactAccent | undefined;
         } | undefined;
     } | undefined;
 };
@@ -1905,7 +1925,8 @@ export declare function createColorStop(offset: number, color: string): ColorSto
  *
  * Light and dark are Mantine's own color scheme (`defaultColorScheme`, `forceColorScheme`,
  * `useMantineColorScheme`); one theme object serves both.
- * @param options - `highContrast` switches on the AA tokens
+ * @param options - `highContrast` switches on the AA tokens; `accent: "graphty"` the graphty
+ * brand accent
  * @returns a theme override for `MantineProvider`
  * @example
  * ```tsx
@@ -3833,8 +3854,16 @@ export declare const PANEL_INK: {
     readonly DIVIDER: "var(--cm-border)";
     /** a filled accent surface: primary button, checked box (#0d99ff / #0c8ce9) */
     readonly ACCENT: "var(--cm-bg-brand)";
-    /** text and glyphs on the accent (#fff) */
+    /** text and glyphs on the accent (#fff; ink on the graphty lime) */
     readonly ON_ACCENT: "var(--cm-text-onbrand)";
+    /**
+     * an accent graphic that has to be seen on the panel: a status dot, a meter's fill, a
+     * highlighted bar, a stroke (= ACCENT, except where the accent fill is too light to read as
+     * a graphic: the graphty olive #588300 on light)
+     */
+    readonly ACCENT_GRAPHIC: "var(--cm-graphic-brand)";
+    /** the white label on the danger, success and inverse fills, which no accent changes */
+    readonly ON_SOLID: "var(--cm-text-onsolid)";
     /** warning (#ffcd29 / #f3c11b) */
     readonly WARNING: "var(--cm-bg-warning)";
     /** success (#14ae5c / #198f51) */
@@ -7133,6 +7162,7 @@ declare module "@mantine/core" {
         /** The options this theme was created with, resolved. */
         compact?: {
             highContrast: boolean;
+            accent?: CompactAccent;
         };
     }
 }

package/dist/index.d.ts

@@ -678,6 +678,9 @@ export declare const COMPACT_SIZING: {
     readonly SECTION_GAP: 4;
 };
 
+/** The accents the theme ships: Figma's blue, or the graphty brand lime and ink. */
+export declare type CompactAccent = "figma" | "graphty";
+
 /**
  * The accent palette, the theme's `primaryColor` (spec 3.3). Mantine reads shade 6 filled and
  * 7 hover in light (#0d99ff / #007be5), 8 / 9 in dark (#0c8ce9 / #0a6dc2), and shade 4 as the
@@ -881,12 +884,13 @@ export declare interface CompactColorInputProps {
 }
 
 /**
- * Color configuration for the compact theme: every Mantine color, the neutral `dark` ramp and
- * the `brand` accent.
+ * Color configuration for the compact theme: every Mantine color, the neutral `dark` ramp, the
+ * `brand` accent and the `graphty` accent.
  */
 export declare const compactColors: {
     dark: MantineColorsTuple;
     brand: MantineColorsTuple;
+    graphty: MantineColorsTuple;
     gray: MantineColorsTuple;
     red: MantineColorsTuple;
     pink: MantineColorsTuple;
@@ -915,13 +919,22 @@ export declare const compactColors: {
 export declare const compactDarkColors: MantineColorsTuple;
 
 /**
- * The whole stylesheet, for SSR or a shadow root. With `highContrast` the AA tokens are also
- * applied unconditionally, so the result needs no `data-cm-contrast` attribute.
+ * The whole stylesheet, for SSR or a shadow root. With `highContrast` the AA tokens, and with
+ * `accent: "graphty"` the graphty accent tokens, are also applied unconditionally, so the result
+ * needs no `data-cm-contrast` or `data-cm-accent` attribute.
  * @param options - the theme options
  * @returns the CSS text
  */
 export declare function compactGlobalCss(options?: CompactThemeOptions): string;
 
+/**
+ * The graphty brand lime, the `primaryColor` of `createCompactTheme({ accent: "graphty" })`, for
+ * the Mantine components that read the primary palette directly: 0 the lime-50 tint, 6 the mark
+ * green #97c800 (the light fill), 7 the olive #588300 (light text), 8 the bright lime #c4f23a
+ * (the dark fill). The `--cm-*` accent tokens take their values from CM_GRAPHTY_ACCENT.
+ */
+export declare const compactGraphtyColors: MantineColorsTuple;
+
 /**
  * Every user-visible or assistive-technology-visible string this library
  * produces.
@@ -1246,6 +1259,12 @@ export declare interface CompactThemeOptions {
      * Apply the WCAG 2.2 AA token set (spec 2.9). Default false: exact Figma.
      */
     highContrast?: boolean;
+    /**
+     * The accent: `"figma"` (default) is Figma's blue; `"graphty"` is the graphty brand lime,
+     * with ink labels on lime fills and olive text on light, which meets AA in both contrast
+     * modes. It sets the theme's `primaryColor` to `"graphty"`.
+     */
+    accent?: CompactAccent;
 }
 
 /**
@@ -1426,6 +1445,7 @@ export declare const compactThemeOverride: {
         } | undefined;
         compact?: {
             highContrast?: boolean | undefined;
+            accent?: CompactAccent | undefined;
         } | undefined;
     } | undefined;
 };
@@ -1905,7 +1925,8 @@ export declare function createColorStop(offset: number, color: string): ColorSto
  *
  * Light and dark are Mantine's own color scheme (`defaultColorScheme`, `forceColorScheme`,
  * `useMantineColorScheme`); one theme object serves both.
- * @param options - `highContrast` switches on the AA tokens
+ * @param options - `highContrast` switches on the AA tokens; `accent: "graphty"` the graphty
+ * brand accent
  * @returns a theme override for `MantineProvider`
  * @example
  * ```tsx
@@ -3833,8 +3854,16 @@ export declare const PANEL_INK: {
     readonly DIVIDER: "var(--cm-border)";
     /** a filled accent surface: primary button, checked box (#0d99ff / #0c8ce9) */
     readonly ACCENT: "var(--cm-bg-brand)";
-    /** text and glyphs on the accent (#fff) */
+    /** text and glyphs on the accent (#fff; ink on the graphty lime) */
     readonly ON_ACCENT: "var(--cm-text-onbrand)";
+    /**
+     * an accent graphic that has to be seen on the panel: a status dot, a meter's fill, a
+     * highlighted bar, a stroke (= ACCENT, except where the accent fill is too light to read as
+     * a graphic: the graphty olive #588300 on light)
+     */
+    readonly ACCENT_GRAPHIC: "var(--cm-graphic-brand)";
+    /** the white label on the danger, success and inverse fills, which no accent changes */
+    readonly ON_SOLID: "var(--cm-text-onsolid)";
     /** warning (#ffcd29 / #f3c11b) */
     readonly WARNING: "var(--cm-bg-warning)";
     /** success (#14ae5c / #198f51) */
@@ -7133,6 +7162,7 @@ declare module "@mantine/core" {
         /** The options this theme was created with, resolved. */
         compact?: {
             highContrast: boolean;
+            accent?: CompactAccent;
         };
     }
 }