/** * Do not edit directly, this file was auto-generated * from the design token sources in src/tokens. */ import type { KdsDimension } from "./types.js"; export type KdsDimensionTokens = { readonly component: { readonly height: { /** * Extra small component height (2px). Use for thin dividers and minimal height elements. */ readonly "0.125x": KdsDimension; /** * Extra small component height (4px). Use for thin dividers and minimal height elements. */ readonly "0.25x": KdsDimension; /** * Small component height (12px). Use for compact inline elements and badges. */ readonly "0.75x": KdsDimension; /** * Small-medium component height (14px). Use for compact buttons and form elements. */ readonly "0.88x": KdsDimension; /** * Base component height (16px). Standard height for icons and small interactive elements. */ readonly "1x": KdsDimension; /** * Medium-small component height (20px). Use for small buttons and compact controls. */ readonly "1.25x": KdsDimension; /** * Medium component height (24px). Use for standard icons and small form elements. */ readonly "1.5x": KdsDimension; /** * Medium-large component height (28px). Use for small buttons and compact input fields. */ readonly "1.75x": KdsDimension; /** * Large component height (36px). Use for standard buttons and form inputs. */ readonly "2.25x": KdsDimension; /** * Component height (44px). Used for donut chart. */ readonly "2.75x": KdsDimension; /** * Large-extra component height (40px). Use for prominent buttons and larger inputs. */ readonly "2.5x": KdsDimension; /** * Extra large component height (64px). Use for large interactive elements and cards. */ readonly "4x": KdsDimension; /** * Extra large component height (80px). Use for max height of table header */ readonly "5x": KdsDimension; /** * Intended for max-height on elements */ readonly "12x": KdsDimension; /** * Intended for donut charts */ readonly "12.5x": KdsDimension; /** * Intended for max-height on elements */ readonly "20x": KdsDimension; /** * Intended for max-height on elements */ readonly "25x": KdsDimension; /** * Intended for max-height on elements */ readonly "45x": KdsDimension; }; readonly width: { /** * Extra small component width (2px). Use for thin dividers and minimal width elements. */ readonly "0.125x": KdsDimension; /** * Extra small component width (4px). Use for thin dividers and minimal width elements. */ readonly "0.25x": KdsDimension; /** * Small component width (12px). Use for compact inline elements. */ readonly "0.75x": KdsDimension; /** * Small-medium component width (14px). Use for compact elements. */ readonly "0.88x": KdsDimension; /** * Base component width (16px). Standard width for icons and small elements. */ readonly "1x": KdsDimension; /** * Medium-small component width (20px). Use for small icons and compact controls. */ readonly "1.25x": KdsDimension; /** * Medium component width (24px). Use for standard icons. */ readonly "1.5x": KdsDimension; /** * Medium-large component width (28px). Use for larger icons and compact buttons. */ readonly "1.75x": KdsDimension; /** * Base component width (32px). Standard width for small elements or the selected column in table. */ readonly "2x": KdsDimension; /** * Large component width (36px). Use for square buttons and larger icons. */ readonly "2.25x": KdsDimension; /** * Component width (44px). Use for donut charts. */ readonly "2.75x": KdsDimension; /** * Extra large component width (64px). Use for large interactive elements. */ readonly "4x": KdsDimension; /** * Extra large component width (96px). Use for width and max-width sizing of multi-column content or components that must align with surrounding layout. */ readonly "6x": KdsDimension; /** * Extra large component width (128px). Use for width and max-width sizing of components that must align with a wider layout unit. */ readonly "8x": KdsDimension; /** * Container width (192px). Use for listContainer and menuContainer. */ readonly "12x": KdsDimension; /** * Intended for donut charts */ readonly "12.5x": KdsDimension; /** * Container width (256px). Use for narrow tooltips or popovers to prevent text stretching. */ readonly "16x": KdsDimension; /** * Container width (280px). Use for default, max, min width of panels and containers */ readonly "17.5x": KdsDimension; /** * Container width (320px). Use for default, max, min width of panels and containers */ readonly "20x": KdsDimension; /** * Container width (400px). Use for narrow sidepanels and modal widths. */ readonly "25x": KdsDimension; /** * Medium container width (512px). Use for standard sidepanels and dialogs. */ readonly "32x": KdsDimension; /** * Medium container width (560px). Use for Editor panels and max width. */ readonly "35x": KdsDimension; /** * Large container width (720px). Use for wide sidepanels and content areas. */ readonly "45x": KdsDimension; /** * Large container width (840px). Use for wide sidepanels and content areas or max width. */ readonly "52.5x": KdsDimension; /** * Extra large container width (976px). Use for full-width content panels. */ readonly "61x": KdsDimension; }; }; readonly icon: { /** * Extra small icon size (9px). Use for micro icons in compact contexts. */ readonly "0.56x": KdsDimension; /** * Small icon size (12px). Use for small icons in tight spaces and inline text. */ readonly "0.75x": KdsDimension; /** * Base icon size (16px). Standard icon size for most UI elements. */ readonly "1x": KdsDimension; /** * Large icon size (20px). Use for prominent icons and larger interactive elements. */ readonly "1.25x": KdsDimension; }; readonly chart: { /** * Chart data stroke (1.5px). Line series, candlestick borders, radar lines. Below the 2px core border max — a data stroke is not a border. */ readonly "line-width": KdsDimension; /** * Separator stroke width (0.75px) between touching segments — pie, donut, stacked bar, nightingale, theme river. Color: kds.color.chart.segment. Guarantees adjacent-segment distinction where hue contrast alone fails (WCAG 1.4.11 non-text contrast). */ readonly "segment-gap": KdsDimension; }; }; export declare const dimension: KdsDimensionTokens;