@codecademy/gamut-styles 20.1.1-alpha.319fdb.0 → 20.1.1-alpha.32f379.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.
|
@@ -1,36 +1,14 @@
|
|
|
1
1
|
type ThemeColors = Record<string, string>;
|
|
2
|
-
/**
|
|
3
|
-
* The visual treatment of a surface at a single elevation state.
|
|
4
|
-
* These are type aliases rather than interfaces so they keep the implicit
|
|
5
|
-
* index signatures `addScale`'s constraint requires.
|
|
6
|
-
*/
|
|
7
2
|
export type ElevationStateStyles = {
|
|
8
3
|
shadow: string;
|
|
9
4
|
transform: string;
|
|
10
5
|
};
|
|
11
|
-
/**
|
|
12
|
-
* State keys are camelCase: variance's `LiteralPaths` splits token paths on
|
|
13
|
-
* `-`, so a hyphenated key like `hover-mirrored` would resolve to `never` and
|
|
14
|
-
* drop out of the theme type. `hoverMirrored` is for surfaces that cast their
|
|
15
|
-
* shadow to the opposite side (e.g. Card's `patternRight` shadow).
|
|
16
|
-
*/
|
|
17
6
|
export type ElevationScale = {
|
|
18
7
|
rest: ElevationStateStyles;
|
|
19
8
|
hover: ElevationStateStyles;
|
|
20
9
|
hoverMirrored: ElevationStateStyles;
|
|
21
10
|
};
|
|
22
11
|
export type ElevationState = keyof ElevationScale;
|
|
23
|
-
/**
|
|
24
|
-
* Elevation scales describe how a surface renders shadow and lift at rest and
|
|
25
|
-
* on hover. Each theme provides its own scale via
|
|
26
|
-
* `.addScale('elevation', ...)`, which passes in that theme's `colors` — so
|
|
27
|
-
* `colors['shadow-primary']` resolves per theme and per color mode without
|
|
28
|
-
* this file ever importing a theme (which would be a circular dependency).
|
|
29
|
-
*
|
|
30
|
-
* The shared return type guarantees every theme emits the same elevation
|
|
31
|
-
* tokens, so lookups like `theme.elevation['hover-shadow']` are safe under
|
|
32
|
-
* any theme.
|
|
33
|
-
*/
|
|
34
12
|
export type ElevationScaleFactory = (theme: {
|
|
35
13
|
colors: ThemeColors;
|
|
36
14
|
}) => ElevationScale;
|
|
@@ -1,28 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The visual treatment of a surface at a single elevation state.
|
|
3
|
-
* These are type aliases rather than interfaces so they keep the implicit
|
|
4
|
-
* index signatures `addScale`'s constraint requires.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* State keys are camelCase: variance's `LiteralPaths` splits token paths on
|
|
9
|
-
* `-`, so a hyphenated key like `hover-mirrored` would resolve to `never` and
|
|
10
|
-
* drop out of the theme type. `hoverMirrored` is for surfaces that cast their
|
|
11
|
-
* shadow to the opposite side (e.g. Card's `patternRight` shadow).
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Elevation scales describe how a surface renders shadow and lift at rest and
|
|
16
|
-
* on hover. Each theme provides its own scale via
|
|
17
|
-
* `.addScale('elevation', ...)`, which passes in that theme's `colors` — so
|
|
18
|
-
* `colors['shadow-primary']` resolves per theme and per color mode without
|
|
19
|
-
* this file ever importing a theme (which would be a circular dependency).
|
|
20
|
-
*
|
|
21
|
-
* The shared return type guarantees every theme emits the same elevation
|
|
22
|
-
* tokens, so lookups like `theme.elevation['hover-shadow']` are safe under
|
|
23
|
-
* any theme.
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
1
|
export const coreElevation = ({
|
|
27
2
|
colors
|
|
28
3
|
}) => {
|
package/dist/variance/utils.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { ThemeProps } from '@codecademy/variance';
|
|
2
|
+
import type React from 'react';
|
|
2
3
|
import { all as allProps } from './config';
|
|
3
4
|
declare const allPropnames: ["mode", "variant", ...[keyof typeof allProps]];
|
|
4
5
|
export type SystemPropNames = (typeof allPropnames)[number];
|
|
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>;
|
|
6
|
+
export type ElementOrProps = keyof React.JSX.IntrinsicElements | ThemeProps;
|
|
7
|
+
export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof React.JSX.IntrinsicElements ? keyof React.JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
|
|
7
8
|
export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
|
|
8
9
|
shouldForwardProp: (prop: PropertyKey) => prop is ForwardableProps<El, Additional>;
|
|
9
10
|
};
|
|
@@ -24,6 +25,6 @@ export declare function createStyledOptions<El extends ElementOrProps = 'div', A
|
|
|
24
25
|
*
|
|
25
26
|
*/
|
|
26
27
|
export declare const styledOptions: typeof createStyledOptions & {
|
|
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
|
|
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" | "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 React.ClassAttributes<HTMLDivElement>;
|
|
28
29
|
};
|
|
29
30
|
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": "20.1.1-alpha.
|
|
4
|
+
"version": "20.1.1-alpha.32f379.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.32f379.0",
|
|
8
8
|
"@emotion/is-prop-valid": "^1.1.0",
|
|
9
|
-
"framer-motion": "^
|
|
9
|
+
"framer-motion": "^12.0.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 || ^19.0.0",
|
|
30
30
|
"stylis": "^4.0.7"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|