@codecademy/gamut-styles 17.13.2-alpha.e3cc4a.0 → 17.13.2-alpha.ea023d.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AssetProvider.d.ts +1 -1
- package/dist/AssetProvider.js +1 -1
- package/dist/ColorMode.d.ts +2 -2
- package/dist/__tests__/testUtils.d.ts +2 -0
- package/dist/globals/Typography.js +2 -2
- package/dist/remoteAssets/fonts.d.ts +1 -1
- package/dist/utilities/elementDir.d.ts +22 -0
- package/dist/utilities/elementDir.js +59 -0
- package/dist/utilities/index.d.ts +2 -0
- package/dist/utilities/index.js +3 -1
- package/dist/utilities/useLogicalProperties.d.ts +7 -0
- package/dist/utilities/useLogicalProperties.js +12 -0
- package/dist/variance/utils.d.ts +3 -4
- package/package.json +4 -4
- /package/dist/{utils → utilities}/fontUtils.d.ts +0 -0
- /package/dist/{utils → utilities}/fontUtils.js +0 -0
package/dist/AssetProvider.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Theme } from '@emotion/react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { FontConfig } from './
|
|
3
|
+
import { FontConfig } from './utilities/fontUtils';
|
|
4
4
|
export declare const createFontLinks: (fonts?: readonly FontConfig[]) => import("react/jsx-runtime").JSX.Element[];
|
|
5
5
|
export declare const AssetProvider: React.FC<{
|
|
6
6
|
theme?: Theme;
|
package/dist/AssetProvider.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { webFonts } from './remoteAssets/fonts';
|
|
3
3
|
import { coreTheme } from './themes';
|
|
4
|
-
import { getFonts } from './
|
|
4
|
+
import { getFonts } from './utilities/fontUtils';
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
7
|
* Only preload woff2 fonts, since woff1 are only included as fallbacks.
|
package/dist/ColorMode.d.ts
CHANGED
|
@@ -1344,7 +1344,7 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
|
|
|
1344
1344
|
} & {
|
|
1345
1345
|
variables?: CSSObject;
|
|
1346
1346
|
alwaysSetVariables?: boolean;
|
|
1347
|
-
}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "
|
|
1347
|
+
}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
|
|
1348
1348
|
export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<Omit<{
|
|
1349
1349
|
theme?: Theme;
|
|
1350
1350
|
as?: React.ElementType;
|
|
@@ -1977,4 +1977,4 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
|
|
|
1977
1977
|
} & {
|
|
1978
1978
|
variables?: CSSObject;
|
|
1979
1979
|
alwaysSetVariables?: boolean;
|
|
1980
|
-
} & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "
|
|
1980
|
+
} & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>>, "bg"> & ColorModeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css, Global } from '@emotion/react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { getFonts } from '../
|
|
3
|
+
import { getFonts } from '../utilities/fontUtils';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Typography component that applies global typography styles to the application.
|
|
@@ -37,7 +37,7 @@ export const Typography = ({
|
|
|
37
37
|
weight = 'normal',
|
|
38
38
|
extensions,
|
|
39
39
|
filePath
|
|
40
|
-
}) => /*#__PURE__*/css("@font-face{font-display:swap;font-family:'", name, "';font-style:", style, ";font-weight:", weight, ";src:", extensions.map(ext => `url("${filePath}.${ext}") format("${ext}")`).join(', '), ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
40
|
+
}) => /*#__PURE__*/css("@font-face{font-display:swap;font-family:'", name, "';font-style:", style, ";font-weight:", weight, ";src:", extensions.map(ext => `url("${filePath}.${ext}") format("${ext}")`).join(', '), ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDNkIiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbHMvVHlwb2dyYXBoeS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgY29yZVRoZW1lIH0gZnJvbSAnLi4vdGhlbWVzJztcbmltcG9ydCB7IEZvbnRDb25maWcsIGdldEZvbnRzIH0gZnJvbSAnLi4vdXRpbGl0aWVzL2ZvbnRVdGlscyc7XG5cbi8qKlxuICogVHlwb2dyYXBoeSBjb21wb25lbnQgdGhhdCBhcHBsaWVzIGdsb2JhbCB0eXBvZ3JhcGh5IHN0eWxlcyB0byB0aGUgYXBwbGljYXRpb24uXG4gKlxuICogVGhpcyBjb21wb25lbnQgZ2VuZXJhdGVzIENTUy1pbi1KUyBzdHlsZXMgZm9yOlxuICogLSBGb250IGZhY2UgZGVjbGFyYXRpb25zIGZvciBhbGwgY29uZmlndXJlZCBmb250c1xuICogLSBHbG9iYWwgaGVhZGluZyBzdHlsZXMgKGgxLWg2KSB3aXRoIHRoZW1lLWJhc2VkIHNpemluZyBhbmQgc3BhY2luZ1xuICogLSBTbWFsbCB0ZXh0IHN0eWxpbmdcbiAqXG4gKiBAcGFyYW0gcHJvcHMgLSBDb21wb25lbnQgcHJvcHNcbiAqIEBwYXJhbSBwcm9wcy50aGVtZSAtIEVtb3Rpb24gdGhlbWUgb2JqZWN0IGNvbnRhaW5pbmcgdHlwb2dyYXBoeSBjb25maWd1cmF0aW9uIGFuZCBhbiBvcHRpb25hbCBuYW1lXG4gKiBAcmV0dXJucyBKU1ggZWxlbWVudCB3aXRoIGdsb2JhbCB0eXBvZ3JhcGh5IHN0eWxlcyBhcHBsaWVkXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYHRzeFxuICogPFR5cG9ncmFwaHkgdGhlbWU9e215VGhlbWV9IC8+XG4gKiBgYGBcbiAqL1xuXG5leHBvcnQgY29uc3QgVHlwb2dyYXBoeTogUmVhY3QuRkM8eyB0aGVtZTogdHlwZW9mIGNvcmVUaGVtZSB9PiA9ICh7XG4gIHRoZW1lLFxufSkgPT4ge1xuICB0cnkge1xuICAgIGNvbnN0IGZvbnRzID0gZ2V0Rm9udHModGhlbWU/Lm5hbWUpO1xuXG4gICAgaWYgKCFBcnJheS5pc0FycmF5KGZvbnRzKSkge1xuICAgICAgLy8gRXJyb3IgaWYgdGhlIGZvbnRzIGFyZSBub3QgYW4gYXJyYXlcbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1jb25zb2xlXG4gICAgICBjb25zb2xlLndhcm4oJ1R5cG9ncmFwaHk6IEludmFsaWQgZm9udHMgZGF0YSByZWNlaXZlZCcpO1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgY29uc3QgdHlwb2dyYXBoeUdsb2JhbHMgPSBjc3NgXG4gICAgICAke2ZvbnRzLm1hcChcbiAgICAgICAgKHtcbiAgICAgICAgICBuYW1lLFxuICAgICAgICAgIHN0eWxlID0gJ25vcm1hbCcsXG4gICAgICAgICAgd2VpZ2h0ID0gJ25vcm1hbCcsXG4gICAgICAgICAgZXh0ZW5zaW9ucyxcbiAgICAgICAgICBmaWxlUGF0aCxcbiAgICAgICAgfTogRm9udENvbmZpZykgPT4gY3NzYFxuICAgICAgICAgIEBmb250LWZhY2Uge1xuICAgICAgICAgICAgZm9udC1kaXNwbGF5OiBzd2FwO1xuICAgICAgICAgICAgZm9udC1mYW1pbHk6ICcke25hbWV9JztcbiAgICAgICAgICAgIGZvbnQtc3R5bGU6ICR7c3R5bGV9O1xuICAgICAgICAgICAgZm9udC13ZWlnaHQ6ICR7d2VpZ2h0fTtcbiAgICAgICAgICAgIHNyYzogJHtleHRlbnNpb25zXG4gICAgICAgICAgICAgIC5tYXAoKGV4dCkgPT4gYHVybChcIiR7ZmlsZVBhdGh9LiR7ZXh0fVwiKSBmb3JtYXQoXCIke2V4dH1cIilgKVxuICAgICAgICAgICAgICAuam9pbignLCAnKX07XG4gICAgICAgICAgfVxuICAgICAgICBgXG4gICAgICApfVxuXG4gICAgICBoMSxcbiAgICBoMixcbiAgICBoMyxcbiAgICBoNCxcbiAgICBoNSxcbiAgICBoNiB7XG4gICAgICAgIG1hcmdpbi1ib3R0b206ICR7dGhlbWUuc3BhY2luZ1sxNl19O1xuICAgICAgICBmb250LXdlaWdodDogJHt0aGVtZS5mb250V2VpZ2h0LnRpdGxlfTtcbiAgICAgICAgbGluZS1oZWlnaHQ6ICR7dGhlbWUubGluZUhlaWdodC50aXRsZX07XG4gICAgICB9XG5cbiAgICAgIGgxIHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzY0XX07XG4gICAgICB9XG4gICAgICBoMiB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVs0NF19O1xuICAgICAgfVxuICAgICAgaDMge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMzRdfTtcbiAgICAgIH1cbiAgICAgIGg0IHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzI2XX07XG4gICAgICB9XG4gICAgICBoNSB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVsyMl19O1xuICAgICAgfVxuICAgICAgaDYge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMjBdfTtcbiAgICAgIH1cblxuICAgICAgc21hbGwge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMTRdfTtcbiAgICAgICAgZm9udC13ZWlnaHQ6ICR7dGhlbWUuZm9udFdlaWdodC5iYXNlfTtcbiAgICAgIH1cbiAgICBgO1xuXG4gICAgcmV0dXJuIDxHbG9iYWwgc3R5bGVzPXt0eXBvZ3JhcGh5R2xvYmFsc30gLz47XG4gIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgLy8gSGFuZGxlIGZvbnQgbG9hZGluZyBlcnJvcnMgZ3JhY2VmdWxseVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1jb25zb2xlXG4gICAgY29uc29sZS53YXJuKCdUeXBvZ3JhcGh5OiBGb250IGxvYWRpbmcgZmFpbGVkOicsIGVycm9yKTtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxufTtcbiJdfQ== */"))), " h1,h2,h3,h4,h5,h6{margin-bottom:", theme.spacing[16], ";font-weight:", theme.fontWeight.title, ";line-height:", theme.lineHeight.title, ";}h1{font-size:", theme.fontSize[64], ";}h2{font-size:", theme.fontSize[44], ";}h3{font-size:", theme.fontSize[34], ";}h4{font-size:", theme.fontSize[26], ";}h5{font-size:", theme.fontSize[22], ";}h6{font-size:", theme.fontSize[20], ";}small{font-size:", theme.fontSize[14], ";font-weight:", theme.fontWeight.base, ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDaUMiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbHMvVHlwb2dyYXBoeS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgY29yZVRoZW1lIH0gZnJvbSAnLi4vdGhlbWVzJztcbmltcG9ydCB7IEZvbnRDb25maWcsIGdldEZvbnRzIH0gZnJvbSAnLi4vdXRpbGl0aWVzL2ZvbnRVdGlscyc7XG5cbi8qKlxuICogVHlwb2dyYXBoeSBjb21wb25lbnQgdGhhdCBhcHBsaWVzIGdsb2JhbCB0eXBvZ3JhcGh5IHN0eWxlcyB0byB0aGUgYXBwbGljYXRpb24uXG4gKlxuICogVGhpcyBjb21wb25lbnQgZ2VuZXJhdGVzIENTUy1pbi1KUyBzdHlsZXMgZm9yOlxuICogLSBGb250IGZhY2UgZGVjbGFyYXRpb25zIGZvciBhbGwgY29uZmlndXJlZCBmb250c1xuICogLSBHbG9iYWwgaGVhZGluZyBzdHlsZXMgKGgxLWg2KSB3aXRoIHRoZW1lLWJhc2VkIHNpemluZyBhbmQgc3BhY2luZ1xuICogLSBTbWFsbCB0ZXh0IHN0eWxpbmdcbiAqXG4gKiBAcGFyYW0gcHJvcHMgLSBDb21wb25lbnQgcHJvcHNcbiAqIEBwYXJhbSBwcm9wcy50aGVtZSAtIEVtb3Rpb24gdGhlbWUgb2JqZWN0IGNvbnRhaW5pbmcgdHlwb2dyYXBoeSBjb25maWd1cmF0aW9uIGFuZCBhbiBvcHRpb25hbCBuYW1lXG4gKiBAcmV0dXJucyBKU1ggZWxlbWVudCB3aXRoIGdsb2JhbCB0eXBvZ3JhcGh5IHN0eWxlcyBhcHBsaWVkXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYHRzeFxuICogPFR5cG9ncmFwaHkgdGhlbWU9e215VGhlbWV9IC8+XG4gKiBgYGBcbiAqL1xuXG5leHBvcnQgY29uc3QgVHlwb2dyYXBoeTogUmVhY3QuRkM8eyB0aGVtZTogdHlwZW9mIGNvcmVUaGVtZSB9PiA9ICh7XG4gIHRoZW1lLFxufSkgPT4ge1xuICB0cnkge1xuICAgIGNvbnN0IGZvbnRzID0gZ2V0Rm9udHModGhlbWU/Lm5hbWUpO1xuXG4gICAgaWYgKCFBcnJheS5pc0FycmF5KGZvbnRzKSkge1xuICAgICAgLy8gRXJyb3IgaWYgdGhlIGZvbnRzIGFyZSBub3QgYW4gYXJyYXlcbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1jb25zb2xlXG4gICAgICBjb25zb2xlLndhcm4oJ1R5cG9ncmFwaHk6IEludmFsaWQgZm9udHMgZGF0YSByZWNlaXZlZCcpO1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgY29uc3QgdHlwb2dyYXBoeUdsb2JhbHMgPSBjc3NgXG4gICAgICAke2ZvbnRzLm1hcChcbiAgICAgICAgKHtcbiAgICAgICAgICBuYW1lLFxuICAgICAgICAgIHN0eWxlID0gJ25vcm1hbCcsXG4gICAgICAgICAgd2VpZ2h0ID0gJ25vcm1hbCcsXG4gICAgICAgICAgZXh0ZW5zaW9ucyxcbiAgICAgICAgICBmaWxlUGF0aCxcbiAgICAgICAgfTogRm9udENvbmZpZykgPT4gY3NzYFxuICAgICAgICAgIEBmb250LWZhY2Uge1xuICAgICAgICAgICAgZm9udC1kaXNwbGF5OiBzd2FwO1xuICAgICAgICAgICAgZm9udC1mYW1pbHk6ICcke25hbWV9JztcbiAgICAgICAgICAgIGZvbnQtc3R5bGU6ICR7c3R5bGV9O1xuICAgICAgICAgICAgZm9udC13ZWlnaHQ6ICR7d2VpZ2h0fTtcbiAgICAgICAgICAgIHNyYzogJHtleHRlbnNpb25zXG4gICAgICAgICAgICAgIC5tYXAoKGV4dCkgPT4gYHVybChcIiR7ZmlsZVBhdGh9LiR7ZXh0fVwiKSBmb3JtYXQoXCIke2V4dH1cIilgKVxuICAgICAgICAgICAgICAuam9pbignLCAnKX07XG4gICAgICAgICAgfVxuICAgICAgICBgXG4gICAgICApfVxuXG4gICAgICBoMSxcbiAgICBoMixcbiAgICBoMyxcbiAgICBoNCxcbiAgICBoNSxcbiAgICBoNiB7XG4gICAgICAgIG1hcmdpbi1ib3R0b206ICR7dGhlbWUuc3BhY2luZ1sxNl19O1xuICAgICAgICBmb250LXdlaWdodDogJHt0aGVtZS5mb250V2VpZ2h0LnRpdGxlfTtcbiAgICAgICAgbGluZS1oZWlnaHQ6ICR7dGhlbWUubGluZUhlaWdodC50aXRsZX07XG4gICAgICB9XG5cbiAgICAgIGgxIHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzY0XX07XG4gICAgICB9XG4gICAgICBoMiB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVs0NF19O1xuICAgICAgfVxuICAgICAgaDMge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMzRdfTtcbiAgICAgIH1cbiAgICAgIGg0IHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzI2XX07XG4gICAgICB9XG4gICAgICBoNSB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVsyMl19O1xuICAgICAgfVxuICAgICAgaDYge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMjBdfTtcbiAgICAgIH1cblxuICAgICAgc21hbGwge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMTRdfTtcbiAgICAgICAgZm9udC13ZWlnaHQ6ICR7dGhlbWUuZm9udFdlaWdodC5iYXNlfTtcbiAgICAgIH1cbiAgICBgO1xuXG4gICAgcmV0dXJuIDxHbG9iYWwgc3R5bGVzPXt0eXBvZ3JhcGh5R2xvYmFsc30gLz47XG4gIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgLy8gSGFuZGxlIGZvbnQgbG9hZGluZyBlcnJvcnMgZ3JhY2VmdWxseVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1jb25zb2xlXG4gICAgY29uc29sZS53YXJuKCdUeXBvZ3JhcGh5OiBGb250IGxvYWRpbmcgZmFpbGVkOicsIGVycm9yKTtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxufTtcbiJdfQ== */"));
|
|
41
41
|
return /*#__PURE__*/_jsx(Global, {
|
|
42
42
|
styles: typographyGlobals
|
|
43
43
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FontConfig } from '../
|
|
1
|
+
import { FontConfig } from '../utilities/fontUtils';
|
|
2
2
|
export declare const FONT_ASSET_PATH = "https://www.codecademy.com/gamut";
|
|
3
3
|
export declare const core: readonly FontConfig[];
|
|
4
4
|
export declare const percipio: readonly FontConfig[];
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { RefObject } from 'react';
|
|
2
|
+
/** Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS `direction`, then document root. */
|
|
3
|
+
export type DirValue = 'rtl' | 'ltr';
|
|
4
|
+
/**
|
|
5
|
+
* Resolves the effective `dir` for an element (`rtl` or `ltr`), including JSDOM where
|
|
6
|
+
* `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
|
|
7
|
+
*/
|
|
8
|
+
export declare function elementDir(el: Element): DirValue;
|
|
9
|
+
/**
|
|
10
|
+
* Ref whose `current` may be any DOM {@link Element} subclass (`HTMLElement`, `SVGElement`,
|
|
11
|
+
* `HTMLButtonElement`, etc.). For structural/minimal types (e.g. tests), intersect with
|
|
12
|
+
* `Element` so `current` is still typed as an `Element` (e.g. `Pick<HTMLAnchorElement, 'id'> & Element`).
|
|
13
|
+
*/
|
|
14
|
+
export type ElementDirRef<T extends Element = Element> = RefObject<T | null>;
|
|
15
|
+
/**
|
|
16
|
+
* Returns the effective `dir` for the resolved element (`rtl` or `ltr`), and updates when `dir`
|
|
17
|
+
* changes on the document subtree or after layout (so `ref.current` is current).
|
|
18
|
+
* Resolution uses {@link elementDir}.
|
|
19
|
+
*
|
|
20
|
+
* @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
|
|
21
|
+
*/
|
|
22
|
+
export declare function useElementDir<T extends Element = Element>(elementRef?: ElementDirRef<T>): DirValue;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { useEffect, useLayoutEffect, useReducer } from 'react';
|
|
2
|
+
|
|
3
|
+
/** Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS `direction`, then document root. */
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Resolves the effective `dir` for an element (`rtl` or `ltr`), including JSDOM where
|
|
7
|
+
* `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
|
|
8
|
+
*/
|
|
9
|
+
export function elementDir(el) {
|
|
10
|
+
const ownDir = el.getAttribute('dir');
|
|
11
|
+
if (ownDir === 'rtl') return 'rtl';
|
|
12
|
+
if (ownDir === 'ltr') return 'ltr';
|
|
13
|
+
const {
|
|
14
|
+
direction
|
|
15
|
+
} = getComputedStyle(el);
|
|
16
|
+
if (direction === 'rtl' || direction === 'ltr') {
|
|
17
|
+
return direction;
|
|
18
|
+
}
|
|
19
|
+
return document.documentElement.getAttribute('dir') === 'rtl' ? 'rtl' : 'ltr';
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Ref whose `current` may be any DOM {@link Element} subclass (`HTMLElement`, `SVGElement`,
|
|
24
|
+
* `HTMLButtonElement`, etc.). For structural/minimal types (e.g. tests), intersect with
|
|
25
|
+
* `Element` so `current` is still typed as an `Element` (e.g. `Pick<HTMLAnchorElement, 'id'> & Element`).
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
function resolveElement(elementRef) {
|
|
29
|
+
return elementRef?.current instanceof Element ? elementRef.current : document.documentElement;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Returns the effective `dir` for the resolved element (`rtl` or `ltr`), and updates when `dir`
|
|
34
|
+
* changes on the document subtree or after layout (so `ref.current` is current).
|
|
35
|
+
* Resolution uses {@link elementDir}.
|
|
36
|
+
*
|
|
37
|
+
* @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
|
|
38
|
+
*/
|
|
39
|
+
export function useElementDir(elementRef) {
|
|
40
|
+
const [, bump] = useReducer(n => n + 1, 0);
|
|
41
|
+
useLayoutEffect(() => {
|
|
42
|
+
bump();
|
|
43
|
+
}, [elementRef]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
const observer = new MutationObserver(() => {
|
|
46
|
+
bump();
|
|
47
|
+
});
|
|
48
|
+
observer.observe(document.documentElement, {
|
|
49
|
+
attributeFilter: ['dir'],
|
|
50
|
+
attributes: true,
|
|
51
|
+
subtree: true
|
|
52
|
+
});
|
|
53
|
+
return () => observer.disconnect();
|
|
54
|
+
}, []);
|
|
55
|
+
if (typeof document === 'undefined') {
|
|
56
|
+
return 'ltr';
|
|
57
|
+
}
|
|
58
|
+
return elementDir(resolveElement(elementRef));
|
|
59
|
+
}
|
package/dist/utilities/index.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.)
|
|
3
|
+
* vs physical (`marginLeft`, etc.).
|
|
4
|
+
*
|
|
5
|
+
* `GamutProvider` always merges an explicit boolean (default `false`).
|
|
6
|
+
*/
|
|
7
|
+
export declare function useLogicalProperties(): boolean | undefined;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useTheme } from '@emotion/react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.)
|
|
5
|
+
* vs physical (`marginLeft`, etc.).
|
|
6
|
+
*
|
|
7
|
+
* `GamutProvider` always merges an explicit boolean (default `false`).
|
|
8
|
+
*/
|
|
9
|
+
export function useLogicalProperties() {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
return theme?.useLogicalProperties;
|
|
12
|
+
}
|
package/dist/variance/utils.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { ThemeProps } from '@codecademy/variance';
|
|
2
|
-
import type React from 'react';
|
|
3
2
|
import { all as allProps } from './config';
|
|
4
3
|
declare const allPropnames: ["mode", "variant", ...[keyof typeof allProps]];
|
|
5
4
|
export type SystemPropNames = (typeof allPropnames)[number];
|
|
6
|
-
export type ElementOrProps = keyof
|
|
7
|
-
export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof
|
|
5
|
+
export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
|
|
6
|
+
export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
|
|
8
7
|
export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
|
|
9
8
|
shouldForwardProp: (prop: PropertyKey) => prop is ForwardableProps<El, Additional>;
|
|
10
9
|
};
|
|
@@ -25,6 +24,6 @@ export declare function createStyledOptions<El extends ElementOrProps = 'div', A
|
|
|
25
24
|
*
|
|
26
25
|
*/
|
|
27
26
|
export declare const styledOptions: typeof createStyledOptions & {
|
|
28
|
-
shouldForwardProp: (prop: PropertyKey) => prop is "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "
|
|
27
|
+
shouldForwardProp: (prop: PropertyKey) => prop is "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>;
|
|
29
28
|
};
|
|
30
29
|
export {};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut-styles",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "17.13.2-alpha.
|
|
4
|
+
"version": "17.13.2-alpha.ea023d.0",
|
|
5
5
|
"author": "Jake Hiller <jake@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@codecademy/variance": "0.26.2-alpha.
|
|
7
|
+
"@codecademy/variance": "0.26.2-alpha.ea023d.0",
|
|
8
8
|
"@emotion/is-prop-valid": "^1.1.0",
|
|
9
|
-
"framer-motion": "^
|
|
9
|
+
"framer-motion": "^11.18.0",
|
|
10
10
|
"get-nonce": "^1.0.0",
|
|
11
11
|
"polished": "^4.1.2"
|
|
12
12
|
},
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"@emotion/react": "^11.4.0",
|
|
27
27
|
"@emotion/styled": "^11.3.0",
|
|
28
28
|
"lodash": "^4.17.23",
|
|
29
|
-
"react": "^17.0.2 || ^18.3.0
|
|
29
|
+
"react": "^17.0.2 || ^18.3.0",
|
|
30
30
|
"stylis": "^4.0.7"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|
|
File without changes
|
|
File without changes
|