@ssa-ui-kit/core 3.20.1 → 3.20.3

package/dist/styles/floatingSurface.d.ts

@@ -0,0 +1,113 @@
+import { SerializedStyles, Theme } from '@emotion/react';
+/**
+ * Shared skin for floating surfaces (Tooltip, Popover).
+ *
+ * Tooltip and Popover stay separate components on purpose — they have
+ * different roles, interactions and focus behavior — but they render the same
+ * surface, so the visual tokens live here instead of being duplicated (and
+ * drifting) in each component's own styles.
+ *
+ * The two deliberately disagree on what an *unset* surface means, because they
+ * started from different places:
+ * - Tooltip has always drawn a surface of its own, so it defaults to
+ *   `color: 'grey'` and `hasShadow: true`.
+ * - Popover has always been a bare positioned container whose content brings
+ *   its own surface, so `color` is unset by default and `hasShadow` follows it
+ *   (`Boolean(color)`) — leaving every popover written before these props
+ *   existed rendering exactly as it did.
+ *
+ * Everything below the defaults — the tokens themselves — is identical for
+ * both.
+ */
+/**
+ * Color scheme of a floating surface — mirrors the `Color` dimension of the
+ * design.
+ * - `grey`: light grey surface with dark text
+ * - `white`: white surface with dark text — bordered by default
+ * - `dark`: dark surface with white text
+ * - `nonOpaque`: semi-transparent white surface with dark text
+ */
+export type FloatingSurfaceColor = 'grey' | 'white' | 'dark' | 'nonOpaque';
+/** Padding/typography scale of a floating surface. */
+export type FloatingSurfaceSize = 'small' | 'medium' | 'large';
+export declare const small: SerializedStyles;
+export declare const medium: SerializedStyles;
+export declare const large: SerializedStyles;
+export declare const surfaceSizes: Record<FloatingSurfaceSize, SerializedStyles>;
+/** The two colors a surface is built from. */
+interface SurfacePalette {
+    /** Surface background — also fills the arrow. */
+    background: (theme: Theme) => string | undefined;
+    /**
+     * Surface text color, as an explicit value.
+     *
+     * Needed wherever `currentColor`/inheritance can't be relied on — a global
+     * `* { color: … }` reset (Storybook ships one, and consumer apps often do
+     * too) sets the computed color of every element it matches, including nested
+     * SVGs, so `currentColor` there resolves to the reset's value rather than the
+     * surface's.
+     */
+    text: (theme: Theme) => string | undefined;
+}
+/**
+ * Single source of truth for the surface colors. The `background`/`text`/`css`
+ * lookups below are all derived from it, so a variant can't end up with a
+ * background from one map and a text color from another.
+ */
+export declare const surfacePalettes: Record<FloatingSurfaceColor, SurfacePalette>;
+export declare const grey: (theme: Theme) => SerializedStyles;
+export declare const white: (theme: Theme) => SerializedStyles;
+export declare const dark: (theme: Theme) => SerializedStyles;
+export declare const nonOpaque: (theme: Theme) => SerializedStyles;
+export declare const surfaceColors: Record<FloatingSurfaceColor, (theme: Theme) => SerializedStyles>;
+/** Background color of a surface — also used to fill its arrow. */
+export declare const surfaceBackgrounds: Record<FloatingSurfaceColor, (theme: Theme) => string | undefined>;
+/** Text color of a surface, as an explicit value. */
+export declare const surfaceTextColors: Record<FloatingSurfaceColor, (theme: Theme) => string | undefined>;
+export declare const border: (theme: Theme) => SerializedStyles;
+export declare const shadow: (theme: Theme) => SerializedStyles;
+export declare const radius: SerializedStyles;
+/**
+ * Headline rendered above the surface content.
+ *
+ * `color` is declared rather than left to plain inheritance: a global
+ * `* { color: … }` reset (Storybook ships one, and consumer apps often do too)
+ * outranks an inherited value, so the headline would otherwise ignore the
+ * surface color.
+ */
+export declare const title: SerializedStyles;
+/** Applied to the surface when a title is rendered alongside its content. */
+export declare const withTitle: SerializedStyles;
+/**
+ * Whether a border is drawn by default for a given color — only the white
+ * surface is outlined in the design, but the two are independent and either
+ * default can be overridden.
+ */
+export declare const isBorderedByDefault: (color?: FloatingSurfaceColor) => color is "white";
+/** Arrow attributes a consumer may override, e.g. through `arrowProps`. */
+export interface SurfaceArrowOverrides {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+}
+export interface SurfaceArrowOptions {
+    theme: Theme;
+    /**
+     * Surface color the arrow is filled from. Unset falls back to
+     * {@link FALLBACK_ARROW_SURFACE}, since an unpainted arrow renders black.
+     */
+    color?: FloatingSurfaceColor;
+    /** Whether the surface itself is outlined. */
+    hasBorder?: boolean;
+    overrides?: SurfaceArrowOverrides;
+}
+/**
+ * Resolves a floating arrow's paint from the surface it points out of, so
+ * Tooltip and Popover can't drift apart on it.
+ *
+ * The outline is tied to the surface's own: an arrow is a cut-out of the
+ * surface, so a stroke on it only reads correctly when the surface is bordered
+ * too. Without a border there is no stroke, whatever `arrowProps` asks for.
+ */
+export declare const resolveSurfaceArrowProps: ({ theme, color, hasBorder, overrides, }: SurfaceArrowOptions) => SurfaceArrowOverrides;
+export {};