/*!
 * Copyright (c) 2026-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */
import type { DesignTokens } from "../../OdysseyDesignTokensContext.js";
/**
 * The chart values that no Odyssey design token supplies. Each entry is either a Highcharts implementation detail that no token will ever cover, or a chart specification value that the design team has not yet turned into a token.
 */
export declare const chartTokens: {
    readonly ChartAnimationDuration: 250;
    readonly ChartLegendRectangleVerticalOffset: 1;
    readonly ChartLegendSymbolSize: 14;
    readonly ChartLineHoverStrokeWidthPlus: 1;
    readonly ChartLineMarkerHoverHaloOpacity: 0.25;
    readonly ChartLineMarkerHoverHaloSize: 20;
    readonly ChartLineMarkerHoverSize: 12;
    readonly ChartLineMarkerSize: 8;
    readonly ChartLineStrokeWidth: 2;
    readonly ChartMinHeight: 400;
    readonly ChartYAxisLabelBaselineCompensation: 8;
};
/**
 * Converts an Odyssey design token length to a pixel number, because the charting library takes numbers and not CSS length strings. The function multiplies a `rem` token by the base font size. The function uses a `px` token without a change, because a `px` value is already absolute. Therefore the function does not scale a value such as `BorderRadiusTight` as a `rem` value.
 */
export declare const getTokenValueAsPixels: ({ tokenValue, typographySizeBase, }: {
    tokenValue: string;
    typographySizeBase: string;
}) => number;
/**
 * Builds the chart values from the Odyssey design tokens. Every value sits in the group named after the part of the chart that it styles, so a chart reads one group per Highcharts child.
 *
 * {@link useChartTokens} wraps this function for a component. This function
 * takes the tokens as an argument, so a test calls it without a React render.
 */
export declare const getChartTokens: ({ odysseyDesignTokens, }: {
    odysseyDesignTokens: DesignTokens;
}) => {
    animationDuration: 250;
    minHeight: string;
    /**
     * The palette that a chart gives to the charting library as its series colors. The library assigns these colors to the series in order. A caller cannot set the color of a series.
     */
    seriesColors: string[];
    axis: {
        categoryHoverBandColor: string;
        crosshairColor: string;
        crosshairWidth: number;
        gridLineWidth: number;
        labelStyle: {
            color: string;
            fontFamily: string;
            fontSize: string;
            fontWeight: string;
            lineHeight: string;
        };
        lineColor: string;
        rotatedLabelSpacing: number;
        uprightLabelSpacing: number;
        valueStyle: {
            color: string;
            fontFamily: string;
            fontSize: string;
            fontWeight: string;
            lineHeight: string;
        };
    };
    bar: {
        radius: string;
    };
    chart: {
        backgroundColor: string;
        edgeSpacing: number;
        fontFamily: string;
        topEdgeSpacing: number;
    };
    focusRing: {
        color: string;
        offset: number;
        radius: string;
        width: number;
    };
    legend: {
        default: {
            symbolHeight: 14;
            symbolRadius: number;
            symbolWidth: 14;
        };
        line: {
            symbolHeight: 8;
            symbolWidth: number;
        };
        shared: {
            alignColumns: boolean;
            borderWidth: number;
            itemDistance: number;
            itemHiddenStyle: {
                color: string;
            };
            itemHoverStyle: {
                color: string;
            };
            itemStyle: {
                color: string;
                fontFamily: string;
                fontSize: string;
                fontWeight: string;
                lineHeight: string;
            };
            margin: number;
            padding: number;
            symbolPadding: number;
        };
    };
    line: {
        hoverStrokeWidthPlus: 1;
        markerHoverHaloOpacity: 0.25;
        markerHoverHaloRadius: number;
        markerHoverRadius: number;
        markerRadius: number;
        strokeWidth: 2;
    };
    popover: {
        backgroundColor: string;
        borderColor: string;
        borderRadius: number;
        borderWidth: number;
        padding: number;
        containerStyle: {
            boxShadow: string;
            color: string;
            fontFamily: string;
            fontSize: string;
            fontWeight: string;
            lineHeight: string;
        };
        content: {
            boldFontWeight: string;
            fontSize: string;
            lineIndicatorSize: string;
            lineIndicatorThickness: string;
            lineMarkerSize: string;
            rowGap: string;
            rowSpacing: string;
            swatchRadius: string;
            swatchSize: string;
            textColor: string;
        };
    };
};
/**
 * Returns the chart values that come from the Odyssey design tokens in context.
 *
 * A chart component calls this one hook, and does not resolve the tokens itself. Therefore the same token choices apply to every chart in the family.
 *
 * The whole object comes from one `useMemo`. A chart passes these values to the React children of the chart library, and that library rebuilds and redraws the whole chart when the identity of a child changes. A new style object on each render therefore costs a redraw. One memo over the whole object keeps every value stable while the tokens stay the same.
 */
export declare const useChartTokens: () => {
    animationDuration: 250;
    minHeight: string;
    /**
     * The palette that a chart gives to the charting library as its series colors. The library assigns these colors to the series in order. A caller cannot set the color of a series.
     */
    seriesColors: string[];
    axis: {
        categoryHoverBandColor: string;
        crosshairColor: string;
        crosshairWidth: number;
        gridLineWidth: number;
        labelStyle: {
            color: string;
            fontFamily: string;
            fontSize: string;
            fontWeight: string;
            lineHeight: string;
        };
        lineColor: string;
        rotatedLabelSpacing: number;
        uprightLabelSpacing: number;
        valueStyle: {
            color: string;
            fontFamily: string;
            fontSize: string;
            fontWeight: string;
            lineHeight: string;
        };
    };
    bar: {
        radius: string;
    };
    chart: {
        backgroundColor: string;
        edgeSpacing: number;
        fontFamily: string;
        topEdgeSpacing: number;
    };
    focusRing: {
        color: string;
        offset: number;
        radius: string;
        width: number;
    };
    legend: {
        default: {
            symbolHeight: 14;
            symbolRadius: number;
            symbolWidth: 14;
        };
        line: {
            symbolHeight: 8;
            symbolWidth: number;
        };
        shared: {
            alignColumns: boolean;
            borderWidth: number;
            itemDistance: number;
            itemHiddenStyle: {
                color: string;
            };
            itemHoverStyle: {
                color: string;
            };
            itemStyle: {
                color: string;
                fontFamily: string;
                fontSize: string;
                fontWeight: string;
                lineHeight: string;
            };
            margin: number;
            padding: number;
            symbolPadding: number;
        };
    };
    line: {
        hoverStrokeWidthPlus: 1;
        markerHoverHaloOpacity: 0.25;
        markerHoverHaloRadius: number;
        markerHoverRadius: number;
        markerRadius: number;
        strokeWidth: 2;
    };
    popover: {
        backgroundColor: string;
        borderColor: string;
        borderRadius: number;
        borderWidth: number;
        padding: number;
        containerStyle: {
            boxShadow: string;
            color: string;
            fontFamily: string;
            fontSize: string;
            fontWeight: string;
            lineHeight: string;
        };
        content: {
            boldFontWeight: string;
            fontSize: string;
            lineIndicatorSize: string;
            lineIndicatorThickness: string;
            lineMarkerSize: string;
            rowGap: string;
            rowSpacing: string;
            swatchRadius: string;
            swatchSize: string;
            textColor: string;
        };
    };
};
/** The chart tokens that {@link getChartTokens} returns. */
export type ChartTokens = ReturnType<typeof getChartTokens>;
//# sourceMappingURL=chartTokens.d.ts.map