@codecademy/gamut-styles 17.12.2-alpha.fbf911.0 → 17.13.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/LICENSE +21 -0
- package/dist/Background.d.ts +10 -1
- package/dist/Background.js +9 -1
- package/dist/ColorMode.d.ts +12 -11
- package/dist/GamutProvider.d.ts +3 -3
- package/dist/themes/lxStudio.d.ts +4 -1
- package/dist/variance/utils.d.ts +3 -3
- package/package.json +4 -3
- package/dist/__tests__/testUtils.d.ts +0 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Codecademy LLC
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/Background.d.ts
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import { ComponentProps } from 'react';
|
|
2
|
-
import { ColorMode, Colors } from './ColorMode';
|
|
2
|
+
import { ColorMode, ColorModeShape, Colors } from './ColorMode';
|
|
3
3
|
export interface BackgroundProps extends Omit<ComponentProps<typeof ColorMode>, 'mode' | 'alwaysSetVariables' | 'bg'> {
|
|
4
4
|
bg: Colors;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* Type guard that checks whether a color is a semantic alias in the given mode
|
|
8
|
+
* (e.g. "text", "primary") rather than a raw theme color key.
|
|
9
|
+
*
|
|
10
|
+
* @param mode - The color mode shape to check against
|
|
11
|
+
* @param color - The color key to test
|
|
12
|
+
* @returns `true` if `color` is a key in `mode` (i.e. a ColorAlias)
|
|
13
|
+
*/
|
|
14
|
+
export declare const isColorAlias: (mode: ColorModeShape, color: Colors) => color is "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary";
|
|
6
15
|
export declare const Background: import("react").ForwardRefExoticComponent<Omit<BackgroundProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
package/dist/Background.js
CHANGED
|
@@ -2,7 +2,15 @@ import { getContrast } from 'polished';
|
|
|
2
2
|
import { forwardRef, useCallback, useMemo } from 'react';
|
|
3
3
|
import { ColorMode, useColorModes } from './ColorMode';
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Type guard that checks whether a color is a semantic alias in the given mode
|
|
7
|
+
* (e.g. "text", "primary") rather than a raw theme color key.
|
|
8
|
+
*
|
|
9
|
+
* @param mode - The color mode shape to check against
|
|
10
|
+
* @param color - The color key to test
|
|
11
|
+
* @returns `true` if `color` is a key in `mode` (i.e. a ColorAlias)
|
|
12
|
+
*/
|
|
13
|
+
export const isColorAlias = (mode, color) => {
|
|
6
14
|
return Object.keys(mode).includes(color);
|
|
7
15
|
};
|
|
8
16
|
export const Background = /*#__PURE__*/forwardRef(({
|
package/dist/ColorMode.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ThemeProps } from '@codecademy/variance';
|
|
2
3
|
import { CSSObject, Theme } from '@emotion/react';
|
|
3
4
|
export type Colors = keyof Theme['colors'];
|
|
@@ -702,7 +703,7 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
|
|
|
702
703
|
};
|
|
703
704
|
}>>]>>;
|
|
704
705
|
export declare const modeColorProps: ({ theme, mode, }: ThemeProps<{
|
|
705
|
-
mode?:
|
|
706
|
+
mode?: "light" | "dark" | undefined;
|
|
706
707
|
}>) => import("@codecademy/variance").CSSObject;
|
|
707
708
|
export declare function useColorModes(): [
|
|
708
709
|
ColorModes,
|
|
@@ -713,8 +714,8 @@ export declare function useColorModes(): [
|
|
|
713
714
|
export declare function useCurrentMode(mode?: ColorModes): "light" | "dark";
|
|
714
715
|
export declare function usePrefersDarkMode(): boolean;
|
|
715
716
|
export declare const VariableProvider: import("@emotion/styled").StyledComponent<{
|
|
716
|
-
theme?: Theme;
|
|
717
|
-
as?:
|
|
717
|
+
theme?: Theme | undefined;
|
|
718
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
718
719
|
} & {
|
|
719
720
|
color?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
720
721
|
readonly property: "color";
|
|
@@ -1340,14 +1341,14 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
|
|
|
1340
1341
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
1341
1342
|
}>;
|
|
1342
1343
|
} & {
|
|
1343
|
-
theme?: Theme;
|
|
1344
|
+
theme?: Theme | undefined;
|
|
1344
1345
|
} & {
|
|
1345
|
-
variables?: CSSObject;
|
|
1346
|
-
alwaysSetVariables?: boolean;
|
|
1346
|
+
variables?: CSSObject | undefined;
|
|
1347
|
+
alwaysSetVariables?: boolean | undefined;
|
|
1347
1348
|
}, 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
1349
|
export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<Omit<{
|
|
1349
|
-
theme?: Theme;
|
|
1350
|
-
as?:
|
|
1350
|
+
theme?: Theme | undefined;
|
|
1351
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
1351
1352
|
} & {
|
|
1352
1353
|
color?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
1353
1354
|
readonly property: "color";
|
|
@@ -1973,8 +1974,8 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
|
|
|
1973
1974
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
1974
1975
|
}>;
|
|
1975
1976
|
} & {
|
|
1976
|
-
theme?: Theme;
|
|
1977
|
+
theme?: Theme | undefined;
|
|
1977
1978
|
} & {
|
|
1978
|
-
variables?: CSSObject;
|
|
1979
|
-
alwaysSetVariables?: boolean;
|
|
1979
|
+
variables?: CSSObject | undefined;
|
|
1980
|
+
alwaysSetVariables?: boolean | undefined;
|
|
1980
1981
|
} & 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>>;
|
package/dist/GamutProvider.d.ts
CHANGED
|
@@ -21,9 +21,9 @@ export interface GamutProviderProps {
|
|
|
21
21
|
useLogicalProperties?: boolean;
|
|
22
22
|
}
|
|
23
23
|
export declare const GamutContext: React.Context<{
|
|
24
|
-
hasGlobals?: boolean;
|
|
25
|
-
hasCache?: boolean;
|
|
26
|
-
nonce?: string;
|
|
24
|
+
hasGlobals?: boolean | undefined;
|
|
25
|
+
hasCache?: boolean | undefined;
|
|
26
|
+
nonce?: string | undefined;
|
|
27
27
|
}>;
|
|
28
28
|
/**
|
|
29
29
|
* Returns the CSP nonce passed to GamutProvider, if any.
|
|
@@ -113,7 +113,10 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
113
113
|
readonly 16: string;
|
|
114
114
|
readonly 24: string;
|
|
115
115
|
readonly 32: string;
|
|
116
|
-
readonly 40: string;
|
|
116
|
+
readonly 40: string; /**
|
|
117
|
+
* @description This is an extended theme for the lx studio with an expanded set of tokens
|
|
118
|
+
* That are not needed for the rest of the application.
|
|
119
|
+
*/
|
|
117
120
|
readonly 48: string;
|
|
118
121
|
readonly 64: string;
|
|
119
122
|
readonly 96: string;
|
package/dist/variance/utils.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ThemeProps } from '@codecademy/variance';
|
|
2
|
-
|
|
3
|
-
declare const allPropnames: ["mode", "variant", ...[keyof typeof allProps]];
|
|
3
|
+
declare const allPropnames: ["mode", "variant", "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom"];
|
|
4
4
|
export type SystemPropNames = (typeof allPropnames)[number];
|
|
5
5
|
export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
|
|
6
6
|
export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
|
|
7
7
|
export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
|
|
8
|
-
shouldForwardProp: (prop: PropertyKey) => prop is
|
|
8
|
+
shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "mode" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "variant" | Additional>;
|
|
9
9
|
};
|
|
10
10
|
/**
|
|
11
11
|
* @description
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut-styles",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "17.
|
|
4
|
+
"version": "17.13.0",
|
|
5
5
|
"author": "Jake Hiller <jake@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@codecademy/variance": "0.26.
|
|
7
|
+
"@codecademy/variance": "0.26.0",
|
|
8
8
|
"@emotion/is-prop-valid": "^1.1.0",
|
|
9
9
|
"framer-motion": "^11.18.0",
|
|
10
10
|
"get-nonce": "^1.0.0",
|
|
@@ -35,5 +35,6 @@
|
|
|
35
35
|
"repository": "git@github.com:Codecademy/gamut.git",
|
|
36
36
|
"scripts": {
|
|
37
37
|
"build": "nx build @codecademy/gamut-styles"
|
|
38
|
-
}
|
|
38
|
+
},
|
|
39
|
+
"gitHead": "502f9c61b71cb0479cbe5ff3bcd7301041a3c3bd"
|
|
39
40
|
}
|