@ctlyst.id/voila-ui-core 3.0.0-beta.0 → 3.0.0-beta.1

package/dist/tokens.d.mts

@@ -0,0 +1,718 @@
+declare const transitionDurations: {
+    '150': string;
+    '300': string;
+    '600': string;
+    '3000': string;
+};
+declare const transitionProperties: {
+    none: string;
+    all: string;
+    default: string;
+    colors: string;
+    opacity: string;
+    shadow: string;
+    transform: string;
+};
+declare const transitionEasingFunctions: {
+    linear: string;
+    in: string;
+    out: string;
+    inOut: string;
+};
+
+declare const borderStyles: {
+    none: string;
+    solid: string;
+};
+declare const borderWidths: {
+    '0': string;
+    '1': string;
+    '2': string;
+};
+
+declare const breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+
+type ColorScheme = 'dark' | 'light';
+type ColorSchemeSetting = ColorScheme | 'system';
+declare const colors: {
+    blackTypoHigh: string;
+    blackTypoMedium: string;
+    blackTypoLow: string;
+    whiteTypoHigh: string;
+    whiteTypoMedium: string;
+    whiteTypoLow: string;
+    redSurface1: string;
+    redSurface2: string;
+    yellowSurface1: string;
+    yellowSurface2: string;
+    blueSurface1: string;
+    blueSurface2: string;
+    greenSurface1: string;
+    greenSurface2: string;
+    redAccent1: string;
+    redAccent2: string;
+    redAccent3: string;
+    yellowAccent1: string;
+    yellowAccent2: string;
+    yellowAccent3: string;
+    blueAccent1: string;
+    blueAccent2: string;
+    blueAccent3: string;
+    greenAccent1: string;
+    greenAccent2: string;
+    greenAccent3: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    yellow1: string;
+    yellow2: string;
+    yellow3: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    primary: string;
+    secondary: string;
+    black: string;
+    white: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    grey4: string;
+    transparent: string;
+};
+
+declare const opacity: {
+    '0': string;
+    '30': string;
+    '60': string;
+    '90': string;
+    '100': string;
+};
+
+declare const radii: {
+    none: string;
+    rounded: string;
+    full: string;
+};
+
+declare const shadows: {
+    none: string;
+    raised: string;
+    floating: string;
+};
+
+declare const space: {
+    '0': string;
+    '1': string;
+    '2': string;
+    '4': string;
+    '6': string;
+    '8': string;
+    '10': string;
+    '12': string;
+    '14': string;
+    '16': string;
+    '18': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '32': string;
+    '40': string;
+    '48': string;
+    '56': string;
+    '64': string;
+    '72': string;
+    '80': string;
+    '88': string;
+    '96': string;
+    '104': string;
+    '112': string;
+    auto: string;
+    full: string;
+    fitContent: string;
+    maxContent: string;
+    minContent: string;
+    '100vh': string;
+    '100vw': string;
+    gapX: string;
+    gapY: string;
+    '1-12': string;
+    '2-12': string;
+    '3-12': string;
+    '4-12': string;
+    '5-12': string;
+    '6-12': string;
+    '7-12': string;
+    '8-12': string;
+    '9-12': string;
+    '10-12': string;
+    '11-12': string;
+    '12-12': string;
+};
+declare const sizes: {
+    '0': string;
+    '1': string;
+    '2': string;
+    '4': string;
+    '6': string;
+    '8': string;
+    '10': string;
+    '12': string;
+    '14': string;
+    '16': string;
+    '18': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '32': string;
+    '40': string;
+    '48': string;
+    '56': string;
+    '64': string;
+    '72': string;
+    '80': string;
+    '88': string;
+    '96': string;
+    '104': string;
+    '112': string;
+    auto: string;
+    full: string;
+    fitContent: string;
+    maxContent: string;
+    minContent: string;
+    '100vh': string;
+    '100vw': string;
+    gapX: string;
+    gapY: string;
+    '1-12': string;
+    '2-12': string;
+    '3-12': string;
+    '4-12': string;
+    '5-12': string;
+    '6-12': string;
+    '7-12': string;
+    '8-12': string;
+    '9-12': string;
+    '10-12': string;
+    '11-12': string;
+    '12-12': string;
+};
+
+declare const fonts: {
+    readonly playfair: "'Playfair Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    readonly poppins: "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+};
+declare const fontSizes: {
+    readonly heading1: "48px";
+    readonly heading2: "40px";
+    readonly heading3: "32px";
+    readonly heading4: "24px";
+    readonly heading5: "20px";
+    readonly heading6: "16px";
+    readonly subheading1: "32px";
+    readonly subheading2: "24px";
+    readonly subtitle1: "20px";
+    readonly subtitle2: "18px";
+    readonly body1: "16px";
+    readonly body2: "14px";
+    readonly caption: "12px";
+    readonly footer: "10px";
+};
+declare const lineHeights: {
+    readonly normal: "normal";
+    readonly none: "1";
+    readonly '16': "16px";
+    readonly '20': "20px";
+    readonly '24': "24px";
+    readonly '28': "28px";
+    readonly '32': "32px";
+    readonly '40': "40px";
+    readonly '48': "48px";
+    readonly '56': "56px";
+};
+declare const letterSpacings: {
+    readonly tighter: "-0.2px";
+    readonly tight: "-0.05px";
+    readonly normal: "0px";
+    readonly wide: "0.2px";
+    readonly wider: "0.5px";
+};
+declare const fontWeights: {
+    readonly hairline: "100";
+    readonly thin: "200";
+    readonly light: "300";
+    readonly reguler: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+    readonly extrabold: "800";
+    readonly black: "900";
+};
+declare const textStyles: {
+    readonly heading: {
+        readonly 1: {
+            readonly fontSize: "48px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "56px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 2: {
+            readonly fontSize: "40px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "48px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 3: {
+            readonly fontSize: "32px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "40px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 4: {
+            readonly fontSize: "24px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 5: {
+            readonly fontSize: "20px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "28px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 6: {
+            readonly fontSize: "16px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly subheading: {
+        readonly 1: {
+            readonly fontSize: "32px";
+            readonly lineHeight: "40px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 2: {
+            readonly fontSize: "24px";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly subtitle: {
+        readonly 1: {
+            readonly fontSize: "20px";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 2: {
+            readonly fontSize: "18px";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly body: {
+        readonly 1: {
+            readonly fontSize: "16px";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 2: {
+            readonly fontSize: "14px";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly caption: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "16px";
+        readonly letterSpacing: "0px";
+    };
+    readonly footer: {
+        readonly fontSize: "10px";
+        readonly lineHeight: "16px";
+        readonly letterSpacing: "0.5px";
+    };
+};
+
+declare const zIndices: {
+    hide: string;
+    auto: string;
+    base: string;
+    docked: string;
+    dropdown: string;
+    sticky: string;
+    banner: string;
+    overlay: string;
+    modal: string;
+    popover: string;
+    skipLink: string;
+    toast: string;
+    tooltip: string;
+};
+
+declare const tokens: {
+    breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderStyles: {
+        none: string;
+        solid: string;
+    };
+    borderWidths: {
+        '0': string;
+        '1': string;
+        '2': string;
+    };
+    colors: {
+        blackTypoHigh: string;
+        blackTypoMedium: string;
+        blackTypoLow: string;
+        whiteTypoHigh: string;
+        whiteTypoMedium: string;
+        whiteTypoLow: string;
+        redSurface1: string;
+        redSurface2: string;
+        yellowSurface1: string;
+        yellowSurface2: string;
+        blueSurface1: string;
+        blueSurface2: string;
+        greenSurface1: string;
+        greenSurface2: string;
+        redAccent1: string;
+        redAccent2: string;
+        redAccent3: string;
+        yellowAccent1: string;
+        yellowAccent2: string;
+        yellowAccent3: string;
+        blueAccent1: string;
+        blueAccent2: string;
+        blueAccent3: string;
+        greenAccent1: string;
+        greenAccent2: string;
+        greenAccent3: string;
+        red1: string;
+        red2: string;
+        red3: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        green1: string;
+        green2: string;
+        green3: string;
+        primary: string;
+        secondary: string;
+        black: string;
+        white: string;
+        grey1: string;
+        grey2: string;
+        grey3: string;
+        grey4: string;
+        transparent: string;
+    };
+    fonts: {
+        readonly playfair: "'Playfair Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+        readonly poppins: "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    };
+    fontSizes: {
+        readonly heading1: "48px";
+        readonly heading2: "40px";
+        readonly heading3: "32px";
+        readonly heading4: "24px";
+        readonly heading5: "20px";
+        readonly heading6: "16px";
+        readonly subheading1: "32px";
+        readonly subheading2: "24px";
+        readonly subtitle1: "20px";
+        readonly subtitle2: "18px";
+        readonly body1: "16px";
+        readonly body2: "14px";
+        readonly caption: "12px";
+        readonly footer: "10px";
+    };
+    fontWeights: {
+        readonly hairline: "100";
+        readonly thin: "200";
+        readonly light: "300";
+        readonly reguler: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+        readonly black: "900";
+    };
+    letterSpacings: {
+        readonly tighter: "-0.2px";
+        readonly tight: "-0.05px";
+        readonly normal: "0px";
+        readonly wide: "0.2px";
+        readonly wider: "0.5px";
+    };
+    lineHeights: {
+        readonly normal: "normal";
+        readonly none: "1";
+        readonly '16': "16px";
+        readonly '20': "20px";
+        readonly '24': "24px";
+        readonly '28': "28px";
+        readonly '32': "32px";
+        readonly '40': "40px";
+        readonly '48': "48px";
+        readonly '56': "56px";
+    };
+    textStyles: {
+        readonly heading: {
+            readonly 1: {
+                readonly fontSize: "48px";
+                readonly fontWeight: "700";
+                readonly lineHeight: "56px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 2: {
+                readonly fontSize: "40px";
+                readonly fontWeight: "700";
+                readonly lineHeight: "48px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 3: {
+                readonly fontSize: "32px";
+                readonly fontWeight: "700";
+                readonly lineHeight: "40px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 4: {
+                readonly fontSize: "24px";
+                readonly fontWeight: "700";
+                readonly lineHeight: "32px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 5: {
+                readonly fontSize: "20px";
+                readonly fontWeight: "700";
+                readonly lineHeight: "28px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 6: {
+                readonly fontSize: "16px";
+                readonly fontWeight: "700";
+                readonly lineHeight: "24px";
+                readonly letterSpacing: "0px";
+            };
+        };
+        readonly subheading: {
+            readonly 1: {
+                readonly fontSize: "32px";
+                readonly lineHeight: "40px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 2: {
+                readonly fontSize: "24px";
+                readonly lineHeight: "32px";
+                readonly letterSpacing: "0px";
+            };
+        };
+        readonly subtitle: {
+            readonly 1: {
+                readonly fontSize: "20px";
+                readonly lineHeight: "32px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 2: {
+                readonly fontSize: "18px";
+                readonly lineHeight: "24px";
+                readonly letterSpacing: "0px";
+            };
+        };
+        readonly body: {
+            readonly 1: {
+                readonly fontSize: "16px";
+                readonly lineHeight: "24px";
+                readonly letterSpacing: "0px";
+            };
+            readonly 2: {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly letterSpacing: "0px";
+            };
+        };
+        readonly caption: {
+            readonly fontSize: "12px";
+            readonly lineHeight: "16px";
+            readonly letterSpacing: "0px";
+        };
+        readonly footer: {
+            readonly fontSize: "10px";
+            readonly lineHeight: "16px";
+            readonly letterSpacing: "0.5px";
+        };
+    };
+    opacity: {
+        '0': string;
+        '30': string;
+        '60': string;
+        '90': string;
+        '100': string;
+    };
+    radii: {
+        none: string;
+        rounded: string;
+        full: string;
+    };
+    space: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '4': string;
+        '6': string;
+        '8': string;
+        '10': string;
+        '12': string;
+        '14': string;
+        '16': string;
+        '18': string;
+        '20': string;
+        '22': string;
+        '24': string;
+        '32': string;
+        '40': string;
+        '48': string;
+        '56': string;
+        '64': string;
+        '72': string;
+        '80': string;
+        '88': string;
+        '96': string;
+        '104': string;
+        '112': string;
+        auto: string;
+        full: string;
+        fitContent: string;
+        maxContent: string;
+        minContent: string;
+        '100vh': string;
+        '100vw': string;
+        gapX: string;
+        gapY: string;
+        '1-12': string;
+        '2-12': string;
+        '3-12': string;
+        '4-12': string;
+        '5-12': string;
+        '6-12': string;
+        '7-12': string;
+        '8-12': string;
+        '9-12': string;
+        '10-12': string;
+        '11-12': string;
+        '12-12': string;
+    };
+    transitionDurations: {
+        '150': string;
+        '300': string;
+        '600': string;
+        '3000': string;
+    };
+    transitionEasingFunctions: {
+        linear: string;
+        in: string;
+        out: string;
+        inOut: string;
+    };
+    transitionProperties: {
+        none: string;
+        all: string;
+        default: string;
+        colors: string;
+        opacity: string;
+        shadow: string;
+        transform: string;
+    };
+    sizes: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '4': string;
+        '6': string;
+        '8': string;
+        '10': string;
+        '12': string;
+        '14': string;
+        '16': string;
+        '18': string;
+        '20': string;
+        '22': string;
+        '24': string;
+        '32': string;
+        '40': string;
+        '48': string;
+        '56': string;
+        '64': string;
+        '72': string;
+        '80': string;
+        '88': string;
+        '96': string;
+        '104': string;
+        '112': string;
+        auto: string;
+        full: string;
+        fitContent: string;
+        maxContent: string;
+        minContent: string;
+        '100vh': string;
+        '100vw': string;
+        gapX: string;
+        gapY: string;
+        '1-12': string;
+        '2-12': string;
+        '3-12': string;
+        '4-12': string;
+        '5-12': string;
+        '6-12': string;
+        '7-12': string;
+        '8-12': string;
+        '9-12': string;
+        '10-12': string;
+        '11-12': string;
+        '12-12': string;
+    };
+    shadows: {
+        none: string;
+        raised: string;
+        floating: string;
+    };
+    zIndices: {
+        hide: string;
+        auto: string;
+        base: string;
+        docked: string;
+        dropdown: string;
+        sticky: string;
+        banner: string;
+        overlay: string;
+        modal: string;
+        popover: string;
+        skipLink: string;
+        toast: string;
+        tooltip: string;
+    };
+};
+
+type Tokens = typeof tokens;
+
+export { type ColorScheme, type ColorSchemeSetting, type Tokens, borderStyles, borderWidths, breakpoints, colors, fontSizes, fontWeights, fonts, letterSpacings, lineHeights, opacity, radii, shadows, sizes, space, textStyles, tokens, transitionDurations, transitionEasingFunctions, transitionProperties, zIndices };