@codecademy/gamut
68.2.268.2.3-alpha.d44ad5.0
dist/Tip/shared/styles/styles.d.ts~
dist/Tip/shared/styles/styles.d.tsModified+26−19
Index: package/dist/Tip/shared/styles/styles.d.ts
===================================================================
--- package/dist/Tip/shared/styles/styles.d.ts
+++ package/dist/Tip/shared/styles/styles.d.ts
@@ -25,45 +25,52 @@
readonly bottom: "0";
readonly my: "auto";
};
declare const beakBackgroundRotation: {
- above: string;
- below: string;
- right: string;
- left: string;
+ readonly above: "rotate(45deg)";
+ readonly below: "rotate(-135deg)";
+ readonly right: "rotate(135deg)";
+ readonly left: "rotate(-45deg)";
};
+type SideCenterBeakSide = 'left' | 'right';
+/** Popover beak is a real node; `:dir(rtl)` applies on that element (not under `&::after`). */
+export declare const horizontalCenterBeakRtlPopover: (side: SideCenterBeakSide) => {
+ '&:dir(rtl)': {
+ transform: "rotate(135deg)" | "rotate(-45deg)";
+ };
+};
type GetBeakBackgroundType = {
alignment: keyof typeof beakBackgroundRotation;
color: typeof tooltipBgColor | typeof popoverPrimaryBgColor;
};
export declare const getBeakBgAndRotation: ({ alignment, color, }: GetBeakBackgroundType) => {
- transform: string;
+ transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
backgroundImage: string;
};
export declare const beakStylesBase: {
borderColor: string;
borderWidth: string;
};
export declare const beakTopStyles: {
- transform: string;
+ transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
backgroundImage: string;
borderColor: string;
borderWidth: string;
};
export declare const beakBottomStyles: {
- transform: string;
+ transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
backgroundImage: string;
borderColor: string;
borderWidth: string;
};
export declare const beakRightCenterStyles: {
- transform: string;
+ transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
backgroundImage: string;
borderColor: string;
borderWidth: string;
};
export declare const beakLeftCenterStyles: {
- transform: string;
+ transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
backgroundImage: string;
borderColor: string;
borderWidth: string;
};
@@ -72,9 +79,9 @@
readonly pb: 12;
};
export declare const topStylesAfter: {
readonly bottom: "0.25rem";
- readonly transform: string;
+ readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
readonly backgroundImage: string;
readonly borderColor: string;
readonly borderWidth: string;
};
@@ -102,16 +109,16 @@
width: string;
};
export declare const bottomStylesAfter: {
readonly top: "0.25rem";
- readonly transform: string;
+ readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
readonly backgroundImage: string;
readonly borderColor: string;
readonly borderWidth: string;
};
export declare const rightAlignStyles: {
- readonly pl: 12;
- readonly left: "100%";
+ paddingInlineStart: number;
+ insetInlineStart: string;
};
export declare const horizontalCenterStyles: {
readonly maxWidth: number;
readonly top: "0";
@@ -120,10 +127,10 @@
readonly height: "fit-content";
readonly minWidth: 4;
};
export declare const leftAlignStyles: {
- readonly pr: 12;
- readonly right: "100%";
+ paddingInlineEnd: number;
+ insetInlineEnd: string;
};
export declare const verticalCenterStyles: {
readonly left: "calc(50% - 4rem)";
readonly width: "70vw";
@@ -146,20 +153,20 @@
export declare const rightVertStylesAfter: {
readonly left: "1.5rem";
};
export declare const rightAlignStylesAfter: {
- readonly transform: string;
+ readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
readonly backgroundImage: string;
readonly borderColor: string;
readonly borderWidth: string;
- readonly left: "4px";
+ readonly insetInlineStart: "4px";
};
export declare const leftAlignStylesAfter: {
- readonly transform: string;
+ readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
readonly backgroundImage: string;
readonly borderColor: string;
readonly borderWidth: string;
- readonly right: "4px";
+ readonly insetInlineEnd: "4px";
};
export declare const tooltipVariantStyles: {
[k: string]: {};
};