paris 0.23.1 → 0.24.0

package/dist/stories/theme/themes.d.ts

@@ -0,0 +1,513 @@
+import { CSSColor, CSSLength, PixelSize } from '@ssh/csstypes';
+import { Property } from 'csstype';
+import { PartialDeep } from 'type-fest';
+import { TokensT } from './tokens';
+export type FontDefinition = {
+    fontSize: CSSLength;
+    fontWeight: number | 'normal';
+    lineHeight: CSSLength;
+    fontStyle: 'normal' | 'italic';
+    letterSpacing: CSSLength | 'normal';
+    textTransform: Property.TextTransform;
+};
+export type FontClassDefinition = Omit<FontDefinition, 'fontSize' | 'lineHeight'>;
+export type ShadowDefinition = `${PixelSize} ${PixelSize} ${PixelSize} ${PixelSize} ${CSSColor}` | 'none';
+export type ShadowsType = {
+    shallowAbove: ShadowDefinition;
+    deepAbove: ShadowDefinition;
+    shallowBelow: ShadowDefinition;
+    deepBelow: ShadowDefinition;
+    shallowLeft: ShadowDefinition;
+    shallowRight: ShadowDefinition;
+    subtlePopup: ShadowDefinition;
+    shallowPopup: ShadowDefinition;
+    deepPopup: ShadowDefinition;
+};
+export type GlowsType = {
+    glowSubtle1: ShadowDefinition;
+    glowSubtle2: ShadowDefinition;
+    glowSubtle3: ShadowDefinition;
+    glowDeep1: ShadowDefinition;
+    glowDeep2: ShadowDefinition;
+    glowDeep3: ShadowDefinition;
+};
+export type TimingFunction = `cubic-bezier(${number}, ${number}, ${number}, ${number})` | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+export type Duration = `${number}ms` | `${number}s`;
+export type Theme = {
+    new: {
+        tokens: TokensT['new'];
+        utils: {
+            defaultUserSelect: Property.UserSelect;
+        };
+        colors: {
+            contentPrimary: CSSColor;
+            contentSecondary: CSSColor;
+            contentTertiary: CSSColor;
+            contentDisabled: CSSColor;
+            contentAccent: CSSColor;
+            contentNegative: CSSColor;
+            contentWarning: CSSColor;
+            contentPositive: CSSColor;
+            contentLink: CSSColor;
+            contentInversePrimary: CSSColor;
+            contentInverseSecondary: CSSColor;
+            contentInverseTertiary: CSSColor;
+            contentInverseDisabled: CSSColor;
+            backgroundPrimary: CSSColor;
+            backgroundSecondary: CSSColor;
+            backgroundMobilePrimary: CSSColor;
+            backgroundMobileSecondary: CSSColor;
+            backgroundNegative: CSSColor;
+            backgroundNegativeMedium: CSSColor;
+            backgroundNegativeStrong: CSSColor;
+            backgroundWarning: CSSColor;
+            backgroundWarningMedium: CSSColor;
+            backgroundWarningStrong: CSSColor;
+            backgroundPositive: CSSColor;
+            backgroundPositiveMedium: CSSColor;
+            backgroundPositiveStrong: CSSColor;
+            backgroundAccent: CSSColor;
+            backgroundAccentMedium: CSSColor;
+            backgroundAccentStrong: CSSColor;
+            surfacePrimary: CSSColor;
+            surfaceSecondary: CSSColor;
+            surfaceTertiary: CSSColor;
+            surfaceQuaternary: CSSColor;
+            borderSubtle: CSSColor;
+            borderMedium: CSSColor;
+            borderStrong: CSSColor;
+            borderUltrastrong: CSSColor;
+            buttonFill: CSSColor;
+            buttonFillHover: CSSColor;
+            buttonFillDisabled: CSSColor;
+            buttonFillHoverAlt: CSSColor;
+            buttonFillHoverNegative: CSSColor;
+            buttonBorder: CSSColor;
+            buttonBorderDisabled: CSSColor;
+            buttonBorderNegative: CSSColor;
+            inputFill: CSSColor;
+            inputFillFocus: CSSColor;
+            inputFillNegative: CSSColor;
+            inputFillDisabled: CSSColor;
+            inputBorderFocus: CSSColor;
+            inputBorderNegative: CSSColor;
+            overlaySubtle: CSSColor;
+            overlayMedium: CSSColor;
+            overlayStrong: CSSColor;
+            overlayInverseSubtle: CSSColor;
+            overlayInverseMedium: CSSColor;
+            overlayWhiteSubtle: CSSColor;
+            overlayWhiteMedium: CSSColor;
+            overlayWhiteStrong: CSSColor;
+            overlayWhiteUltrastrong: CSSColor;
+            overlayBlackSubtle: CSSColor;
+            overlayBlackMedium: CSSColor;
+            overlayBlackStrong: CSSColor;
+            overlayPageBackground: CSSColor;
+            overlayRed: CSSColor;
+            overlayTeal: CSSColor;
+        };
+        blurs: {
+            strong: string;
+            ultrastrong: string;
+        };
+        typography: {
+            fontFamily: string;
+            italicLetterSpacing: CSSLength;
+            verticalMetricsAdjust: CSSLength;
+            fontWeights: {
+                thin: number;
+                extralight: number;
+                light: number;
+                normal: number;
+                medium: number;
+                semibold: number;
+                bold: number;
+                extrabold: number;
+                black: number;
+                extrablack: number;
+            };
+            fontStyles: {
+                normal: string;
+                italic: string;
+            };
+            styles: {
+                displayLarge: FontDefinition;
+                displayMedium: FontDefinition;
+                display: FontDefinition;
+                displaySmall: FontDefinition;
+                headingLarge: FontDefinition;
+                headingMedium: FontDefinition;
+                headingSmall: FontDefinition;
+                headingXSmall: FontDefinition;
+                headingXXSmall: FontDefinition;
+                labelXLarge: FontDefinition;
+                labelLarge: FontDefinition;
+                labelMedium: FontDefinition;
+                labelSmall: FontDefinition;
+                labelXSmall: FontDefinition;
+                labelXXSmall: FontDefinition;
+                paragraphLarge: FontDefinition;
+                paragraphMedium: FontDefinition;
+                paragraphSmall: FontDefinition;
+                paragraphXSmall: FontDefinition;
+                paragraphXXSmall: FontDefinition;
+            };
+        };
+        lighting: {
+            shallowBelow: ShadowDefinition;
+            deepBelow: ShadowDefinition;
+            shallowAbove: ShadowDefinition;
+            deepAbove: ShadowDefinition;
+            shallowPopup: ShadowDefinition;
+            deepPopup: ShadowDefinition;
+            subtlePopup: ShadowDefinition;
+            shallowLeft: ShadowDefinition;
+            shallowRight: ShadowDefinition;
+            glowSubtle1: ShadowDefinition;
+            glowSubtle2: ShadowDefinition;
+            glowSubtle3: ShadowDefinition;
+            glowDeep1: ShadowDefinition;
+            glowDeep2: ShadowDefinition;
+            glowDeep3: ShadowDefinition;
+        };
+        materials: {
+            whiteThin: {
+                background: CSSColor;
+            };
+            whiteRegular: {
+                background: CSSColor;
+            };
+            whiteThick: {
+                background: CSSColor;
+            };
+            blackThin: {
+                background: CSSColor;
+            };
+            blackRegular: {
+                background: CSSColor;
+            };
+            blackThick: {
+                background: CSSColor;
+            };
+            lightGreyUltrathin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            lightGreyThin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            lightGreyRegular: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            lightGreyThick: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            darkGreyUltrathin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            darkGreyThin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            darkGreyRegular: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            darkGreyThick: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            greyUltrathin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            greyThin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            greyRegular: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            greyThick: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            primaryThin: {
+                background: CSSColor;
+            };
+            primaryRegular: {
+                background: CSSColor;
+            };
+            primaryThick: {
+                background: CSSColor;
+            };
+            secondaryUltrathin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            secondaryThin: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            secondaryRegular: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+            secondaryThick: {
+                background: CSSColor;
+                backgroundBlend: CSSColor;
+                mixBlendMode: Property.MixBlendMode;
+            };
+        };
+        borders: {
+            radius: {
+                pill: CSSLength;
+                circle: CSSLength;
+                rectangle: CSSLength;
+                rounded: CSSLength;
+                roundedSmall: CSSLength;
+                roundedMedium: CSSLength;
+                roundedLarge: CSSLength;
+                roundedXL: CSSLength;
+            };
+            dropdown: {
+                color: CSSColor;
+                shadow: ShadowDefinition;
+                border: `${number}px ${string} ${CSSColor}` | 'none';
+            };
+        };
+        surfaces: {
+            dialog: {
+                border: `${number}px ${string} ${CSSColor}`;
+                outline: `${number}px ${string} ${CSSColor}`;
+                background: CSSColor;
+                backdropFilter: string;
+            };
+        };
+        animations: {
+            interaction: string;
+            timing: {
+                easeInOut: TimingFunction;
+                easeOut: TimingFunction;
+                easeIn: TimingFunction;
+                easeOutQuad: TimingFunction;
+                easeInQuad: TimingFunction;
+                easeInOutExpo: TimingFunction;
+                default: TimingFunction;
+            };
+            duration: {
+                rapid: Duration;
+                fast: Duration;
+                normal: Duration;
+                relaxed: Duration;
+                slow: Duration;
+                gradual: Duration;
+            };
+        };
+        breakpoints: {
+            sm: `${number}px`;
+            md: `${number}px`;
+            lg: `${number}px`;
+            xl: `${number}px`;
+        };
+        layers: {
+            below: number;
+            sticky: number;
+            overlay: number;
+            dropdown: number;
+            popover: number;
+            menu: number;
+        };
+    };
+    tokens: TokensT;
+    utils: {
+        defaultUserSelect: Property.UserSelect;
+    };
+    colors: {
+        black: CSSColor;
+        white: CSSColor;
+        accent: CSSColor;
+        negative: CSSColor;
+        warning: CSSColor;
+        positive: CSSColor;
+        contentPrimary: CSSColor;
+        contentSecondary: CSSColor;
+        contentTertiary: CSSColor;
+        contentDisabled: CSSColor;
+        contentAccent: CSSColor;
+        contentNegative: CSSColor;
+        contentWarning: CSSColor;
+        contentPositive: CSSColor;
+        contentInversePrimary: CSSColor;
+        contentInverseSecondary: CSSColor;
+        contentInverseTertiary: CSSColor;
+        contentInverseDisabled: CSSColor;
+        backgroundSidebar: CSSColor;
+        backgroundPrimary: CSSColor;
+        backgroundSecondary: CSSColor;
+        backgroundTertiary: CSSColor;
+        backgroundAccent: CSSColor;
+        backgroundNegative: CSSColor;
+        backgroundWarning: CSSColor;
+        backgroundPositive: CSSColor;
+        backgroundInverseSidebar: CSSColor;
+        backgroundInversePrimary: CSSColor;
+        backgroundInverseSecondary: CSSColor;
+        backgroundInverseTertiary: CSSColor;
+        backgroundInverseNegative: CSSColor;
+        backgroundInverseWarning: CSSColor;
+        backgroundInversePositive: CSSColor;
+        backgroundOverlayLight: CSSColor;
+        backgroundOverlayXLight: CSSColor;
+        backgroundOverlayGrey: CSSColor;
+        backgroundOverlayDark: CSSColor;
+        backgroundOverlayTeal: CSSColor;
+        borderOpaque: CSSColor;
+        borderSelected: CSSColor;
+        borderAccent: CSSColor;
+        borderNegative: CSSColor;
+        borderWarning: CSSColor;
+        borderPositive: CSSColor;
+        borderInverseOpaque: CSSColor;
+        borderInverseSelected: CSSColor;
+    };
+    typography: {
+        fontFamily: string;
+        italicLetterSpacing: CSSLength;
+        verticalMetricsAdjust: CSSLength;
+        fontWeights: {
+            thin: number;
+            extralight: number;
+            light: number;
+            normal: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+            extrabold: number;
+            black: number;
+            extrablack: number;
+        };
+        fontStyles: {
+            normal: string;
+            italic: string;
+        };
+        styles: {
+            displayLarge: FontDefinition;
+            displayMedium: FontDefinition;
+            display: FontDefinition;
+            displaySmall: FontDefinition;
+            headingLarge: FontDefinition;
+            headingMedium: FontDefinition;
+            headingSmall: FontDefinition;
+            headingXSmall: FontDefinition;
+            headingXXSmall: FontDefinition;
+            labelXLarge: FontDefinition;
+            labelLarge: FontDefinition;
+            labelMedium: FontDefinition;
+            labelSmall: FontDefinition;
+            labelXSmall: FontDefinition;
+            labelXXSmall: FontDefinition;
+            paragraphLarge: FontDefinition;
+            paragraphMedium: FontDefinition;
+            paragraphSmall: FontDefinition;
+            paragraphXSmall: FontDefinition;
+            paragraphXXSmall: FontDefinition;
+        };
+    };
+    lighting: {
+        shallowBelow: ShadowDefinition;
+        deepBelow: ShadowDefinition;
+        shallowAbove: ShadowDefinition;
+        deepAbove: ShadowDefinition;
+        shallowPopup: ShadowDefinition;
+        deepPopup: ShadowDefinition;
+        subtlePopup: ShadowDefinition;
+        shallowLeft: ShadowDefinition;
+        shallowRight: ShadowDefinition;
+    };
+    borders: {
+        radius: {
+            pill: CSSLength;
+            circle: CSSLength;
+            rectangle: CSSLength;
+            rounded: CSSLength;
+            roundedSmall: CSSLength;
+            roundedLarge: CSSLength;
+            roundedXL: CSSLength;
+        };
+        dropdown: {
+            color: CSSColor;
+            shadow: ShadowDefinition;
+            border: `${number}px ${string} ${CSSColor}` | 'none';
+        };
+    };
+    surfaces: {
+        dialog: {
+            border: `${number}px ${string} ${CSSColor}`;
+            outline: `${number}px ${string} ${CSSColor}`;
+            background: CSSColor;
+            backdropFilter: string;
+        };
+    };
+    animations: {
+        interaction: string;
+        timing: {
+            easeInOut: TimingFunction;
+            easeOut: TimingFunction;
+            easeIn: TimingFunction;
+            easeOutQuad: TimingFunction;
+            easeInQuad: TimingFunction;
+            easeInOutExpo: TimingFunction;
+            default: TimingFunction;
+        };
+        duration: {
+            rapid: Duration;
+            fast: Duration;
+            normal: Duration;
+            relaxed: Duration;
+            slow: Duration;
+            gradual: Duration;
+        };
+    };
+    breakpoints: {
+        sm: `${number}px`;
+        md: `${number}px`;
+        lg: `${number}px`;
+        xl: `${number}px`;
+    };
+};
+export type ThemeOverrides = PartialDeep<Theme>;
+export declare const DisplayFontClass: FontClassDefinition;
+export declare const HeadingFontClass: FontClassDefinition;
+export declare const LabelFontClass: FontClassDefinition;
+export declare const ParagraphFontClass: FontClassDefinition;
+export declare const LightTheme: Theme;
+export declare const DarkTheme: Theme;
+export declare const theme: Theme, pvar: (path: import('pte').NestedPaths<Theme>, options?: {
+    prefix?: string | undefined;
+    raw?: boolean | undefined;
+} | undefined) => string, pget: (path: import('pte').NestedPaths<Theme>, options?: {
+    prefix?: string | undefined;
+    selector?: string | undefined;
+} | undefined) => string, updateTheme: (updatedValues: Partial<Theme>) => void, injectTheme: (theme: Theme) => void, generateThemeInjection: (theme: Theme) => string;