@elliemae/ds-legacy-system 1.0.13 → 1.0.17
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/cjs/spaceUtilities.js +4 -4
- package/dist/cjs/spaceUtilities.js.map +2 -2
- package/dist/cjs/utils.js +2 -2
- package/dist/cjs/utils.js.map +2 -2
- package/dist/esm/spaceUtilities.js +1 -1
- package/dist/esm/spaceUtilities.js.map +1 -1
- package/dist/esm/utils.js +1 -1
- package/dist/esm/utils.js.map +1 -1
- package/dist/types/styled/styled.d.ts +1 -1
- package/dist/types/styled/styledFunction.d.ts +1 -1
- package/package.json +3 -3
- package/dist/types/styled/styledObject.d.ts +0 -6
- package/dist/types/styled/types.d.ts +0 -42
|
@@ -39,7 +39,7 @@ __export(spaceUtilities_exports, {
|
|
|
39
39
|
});
|
|
40
40
|
module.exports = __toCommonJS(spaceUtilities_exports);
|
|
41
41
|
var React = __toESM(require("react"));
|
|
42
|
-
var
|
|
42
|
+
var import_lodash_es = require("lodash-es");
|
|
43
43
|
var import_theme = require("./theme.js");
|
|
44
44
|
function mapGap(gutter) {
|
|
45
45
|
if (!gutter)
|
|
@@ -55,7 +55,7 @@ function mapGutter(gutter) {
|
|
|
55
55
|
}
|
|
56
56
|
function mapSpace(width) {
|
|
57
57
|
if (typeof width === "string")
|
|
58
|
-
return (0,
|
|
58
|
+
return (0, import_lodash_es.get)(import_theme.theme, width) ? `${(0, import_lodash_es.get)(import_theme.theme, width)}` : width;
|
|
59
59
|
return `${width * 100}%`;
|
|
60
60
|
}
|
|
61
61
|
function fixSpaceGutter(width, gutter) {
|
|
@@ -79,8 +79,8 @@ function numbersToFr(grid) {
|
|
|
79
79
|
return den.map((d) => `${d}fr`);
|
|
80
80
|
}
|
|
81
81
|
function mapGrid(width) {
|
|
82
|
-
if ((0,
|
|
83
|
-
return `${(0,
|
|
82
|
+
if ((0, import_lodash_es.get)(import_theme.theme, width))
|
|
83
|
+
return `${(0, import_lodash_es.get)(import_theme.theme, width)}`;
|
|
84
84
|
if (typeof width === "string")
|
|
85
85
|
return width;
|
|
86
86
|
const den = width < 1 ? Math.floor(1 / width) : width;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/spaceUtilities.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { get } from 'lodash';\nimport { theme } from './theme.js';\n\nexport function mapGap(gutter: number | string): number | string {\n if (!gutter) return '0rem';\n if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n if (!gutter) return '0rem';\n return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n width: string | number | string[] | number[],\n gutter?: string | number,\n): string | string[] {\n if (!width) return '';\n if (width === 'fit-content') return width;\n if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n if (!width) return '';\n if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n if (get(theme, width)) return `${get(theme, width)}`;\n if (typeof width === 'string') return width;\n const den = width < 1 ? Math.floor(1 / width) : width;\n return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number | string | (number | string)[]): string | string[] {\n if (Array.isArray(grid)) {\n if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n return numbersToFr(grid as number[]);\n }\n return mapGrid(grid);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { get } from 'lodash-es';\nimport { theme } from './theme.js';\n\nexport function mapGap(gutter: number | string): number | string {\n if (!gutter) return '0rem';\n if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n if (!gutter) return '0rem';\n return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n width: string | number | string[] | number[],\n gutter?: string | number,\n): string | string[] {\n if (!width) return '';\n if (width === 'fit-content') return width;\n if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n if (!width) return '';\n if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n if (get(theme, width)) return `${get(theme, width)}`;\n if (typeof width === 'string') return width;\n const den = width < 1 ? Math.floor(1 / width) : width;\n return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number | string | (number | string)[]): string | string[] {\n if (Array.isArray(grid)) {\n if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n return numbersToFr(grid as number[]);\n }\n return mapGrid(grid);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAoB;AACpB,mBAAsB;AAEf,SAAS,OAAO,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAAG,WAAO;AAC5E,SAAO,GAAG,mBAAM,MAAM,MAAkC;AAC1D;AAEO,SAAS,UAAU,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,mBAAM,MAAM,MAAkC;AAC1D;AAEO,SAAS,SAAS,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,eAAO,sBAAI,oBAAO,KAAK,IAAI,OAAG,sBAAI,oBAAO,KAAK,MAAM;AACnF,SAAO,GAAG,QAAQ;AACpB;AAEO,SAAS,eACd,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,UAAU;AAAe,WAAO;AACpC,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,CAAC,QAAQ,UAAU,MAAM,KAAK;AACjG,SAAO,QAAQ,SAAS,KAAK,QAAQ,UAAU,MAAM;AACvD;AAEO,SAAS,SAAS,OAAiE;AACxF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC;AAC7D,SAAO,SAAS,KAAK;AACvB;AAEO,SAAS,YAAY,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAE;AAC3D,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK;AAChC;AACO,SAAS,QAAQ,OAAgC;AACtD,UAAI,sBAAI,oBAAO,KAAK;AAAG,WAAO,OAAG,sBAAI,oBAAO,KAAK;AACjD,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD,SAAO,GAAG;AACZ;AAEO,SAAS,gBAAgB,MAAgE;AAC9F,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM,QAAQ;AAAG,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC;AAC9E,WAAO,YAAY,IAAgB;AAAA,EACrC;AACA,SAAO,QAAQ,IAAI;AACrB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils.js
CHANGED
|
@@ -58,7 +58,7 @@ __export(utils_exports, {
|
|
|
58
58
|
module.exports = __toCommonJS(utils_exports);
|
|
59
59
|
var React = __toESM(require("react"));
|
|
60
60
|
var import_polished = require("polished");
|
|
61
|
-
var
|
|
61
|
+
var import_lodash_es = require("lodash-es");
|
|
62
62
|
var import_styled_components = require("@xstyled/styled-components");
|
|
63
63
|
var import_theme = require("./theme.js");
|
|
64
64
|
var import_mobileUtilities = require("./mobileUtilities.js");
|
|
@@ -85,7 +85,7 @@ function disabled() {
|
|
|
85
85
|
`;
|
|
86
86
|
}
|
|
87
87
|
function keyframes(obj) {
|
|
88
|
-
return import_styled_components.keyframes`${(0,
|
|
88
|
+
return import_styled_components.keyframes`${(0, import_lodash_es.reduce)(
|
|
89
89
|
obj,
|
|
90
90
|
(result, value, key) => `
|
|
91
91
|
${result}
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-shadow */\n\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\n\nimport type { Theme } from '@elliemae/pui-theme';\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport type { Keyframes, FlattenSimpleInterpolation } from 'styled-components';\nimport { css, withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\nimport { toMobile } from './mobileUtilities.js';\nimport { th } from './th.js';\n\nexport { withTheme, rgba, useTheme, kfrm };\n\ntype PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\nexport function truncate(width?: string) {\n return (props: PropsWithTheme<{ width?: string }>) => css`\n ${!!width || props.width ? `width: ${(props.width || width) as string};` : ''}\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n}\n\nexport function flexCenter(): string {\n return `\n display: flex;\n justify-content: center;\n align-items: center;\n `;\n}\n\nexport function disabled(): string {\n return `\n cursor: not-allowed;\n pointer-events: none;\n `;\n}\n\nexport function keyframes(obj: Record<string, string>): Keyframes {\n return kfrm`${reduce(\n obj,\n (result, value, key) => `\n ${result}\n ${key}% {\n ${value}\n }\n `,\n '',\n )}\n `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\n// export function color(variant = 'neutral', type: string | number = 400) {\n// return css`\n// color: ${th.color(`${variant}-${type}`)};\n// `;\n// }\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n return (props: { animationKeyframes?: string; animationLength?: string; animationTimingFn?: string }) => css`\n animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n ${props.animationTimingFn || animationTimingFn};\n `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n return () => css`\n outline: none;\n border: 1px solid ${color};\n box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n border-radius: 2px;\n `;\n}\n\nexport function focusAfter(color: string) {\n return css`\n outline: none;\n position: relative;\n &:after {\n content: '';\n z-index: 10;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n ${focus(color)}\n }\n `;\n}\n\nexport function active() {\n return (props: PropsWithTheme) => css`\n outline: none;\n border: 1px solid ${props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function hover() {\n return (props: PropsWithTheme) => css`\n outline: 1px solid ${props.theme.colors.brand[600]};\n outline-offset: -1px;\n `;\n}\n\nexport function textStyle(type: string, weight: keyof Theme['fontWeights'] = 'regular') {\n // eslint-disable-next-line complexity\n return (props: { theme: Theme }): string => {\n let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n // eslint-disable-next-line default-case\n switch (type) {\n case 'h1':\n cssVar += `\n font-size: ${toMobile('2.7692rem')};\n line-height: normal;\n `;\n break;\n case 'h2':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[800])};\n line-height: normal;\n `;\n break;\n case 'h3':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[700])};\n line-height: 1.2;\n `;\n break;\n case 'h4':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[600])};\n line-height: normal;\n `;\n break;\n case 'h5':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n `;\n break;\n case 'section-header':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n text-transform: uppercase;\n `;\n break;\n case 'body':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'body-small':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[300])};\n line-height: normal;\n `;\n break;\n case 'body-micro':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n line-height: normal;\n `;\n break;\n case 'list':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'link':\n cssVar += `\n line-height: ${props.theme.space.xl};\n color: ${props.theme.colors.brand[600]};\n cursor: pointer;\n `;\n break;\n }\n return cssVar;\n };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n return css`\n fill: ${th.color(`${variant}-${type}`)};\n `;\n}\n\nexport function fakeBorder() {\n return css`\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n border-radius: 2px;\n `;\n}\n\nexport function fakeActive() {\n return css`\n outline: none;\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function clearFocus(): string {\n return `\n border: none;\n box-shadow: none;\n `;\n}\n\nexport function buttonLink(): string {\n return `\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n return `\n transition: ${t};\n `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): FlattenSimpleInterpolation => css`\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n`;\n\nexport const onlySafari = (styles: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n `;\n\nexport const onlyFirefox = (styles: string): string => `\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSvB,sBAA8B;AAC9B,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-shadow */\n\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\n\nimport type { Theme } from '@elliemae/pui-theme';\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash-es';\nimport type { Keyframes, FlattenSimpleInterpolation } from 'styled-components';\nimport { css, withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\nimport { toMobile } from './mobileUtilities.js';\nimport { th } from './th.js';\n\nexport { withTheme, rgba, useTheme, kfrm };\n\ntype PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\nexport function truncate(width?: string) {\n return (props: PropsWithTheme<{ width?: string }>) => css`\n ${!!width || props.width ? `width: ${(props.width || width) as string};` : ''}\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n}\n\nexport function flexCenter(): string {\n return `\n display: flex;\n justify-content: center;\n align-items: center;\n `;\n}\n\nexport function disabled(): string {\n return `\n cursor: not-allowed;\n pointer-events: none;\n `;\n}\n\nexport function keyframes(obj: Record<string, string>): Keyframes {\n return kfrm`${reduce(\n obj,\n (result, value, key) => `\n ${result}\n ${key}% {\n ${value}\n }\n `,\n '',\n )}\n `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\n// export function color(variant = 'neutral', type: string | number = 400) {\n// return css`\n// color: ${th.color(`${variant}-${type}`)};\n// `;\n// }\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n return (props: { animationKeyframes?: string; animationLength?: string; animationTimingFn?: string }) => css`\n animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n ${props.animationTimingFn || animationTimingFn};\n `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n return () => css`\n outline: none;\n border: 1px solid ${color};\n box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n border-radius: 2px;\n `;\n}\n\nexport function focusAfter(color: string) {\n return css`\n outline: none;\n position: relative;\n &:after {\n content: '';\n z-index: 10;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n ${focus(color)}\n }\n `;\n}\n\nexport function active() {\n return (props: PropsWithTheme) => css`\n outline: none;\n border: 1px solid ${props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function hover() {\n return (props: PropsWithTheme) => css`\n outline: 1px solid ${props.theme.colors.brand[600]};\n outline-offset: -1px;\n `;\n}\n\nexport function textStyle(type: string, weight: keyof Theme['fontWeights'] = 'regular') {\n // eslint-disable-next-line complexity\n return (props: { theme: Theme }): string => {\n let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n // eslint-disable-next-line default-case\n switch (type) {\n case 'h1':\n cssVar += `\n font-size: ${toMobile('2.7692rem')};\n line-height: normal;\n `;\n break;\n case 'h2':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[800])};\n line-height: normal;\n `;\n break;\n case 'h3':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[700])};\n line-height: 1.2;\n `;\n break;\n case 'h4':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[600])};\n line-height: normal;\n `;\n break;\n case 'h5':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n `;\n break;\n case 'section-header':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n text-transform: uppercase;\n `;\n break;\n case 'body':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'body-small':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[300])};\n line-height: normal;\n `;\n break;\n case 'body-micro':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n line-height: normal;\n `;\n break;\n case 'list':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'link':\n cssVar += `\n line-height: ${props.theme.space.xl};\n color: ${props.theme.colors.brand[600]};\n cursor: pointer;\n `;\n break;\n }\n return cssVar;\n };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n return css`\n fill: ${th.color(`${variant}-${type}`)};\n `;\n}\n\nexport function fakeBorder() {\n return css`\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n border-radius: 2px;\n `;\n}\n\nexport function fakeActive() {\n return css`\n outline: none;\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function clearFocus(): string {\n return `\n border: none;\n box-shadow: none;\n `;\n}\n\nexport function buttonLink(): string {\n return `\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n return `\n transition: ${t};\n `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): FlattenSimpleInterpolation => css`\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n`;\n\nexport const onlySafari = (styles: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n `;\n\nexport const onlyFirefox = (styles: string): string => `\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["kfrm", "kfrm"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/spaceUtilities.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from 'lodash';\nimport { theme } from './theme.js';\n\nexport function mapGap(gutter: number | string): number | string {\n if (!gutter) return '0rem';\n if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n if (!gutter) return '0rem';\n return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n width: string | number | string[] | number[],\n gutter?: string | number,\n): string | string[] {\n if (!width) return '';\n if (width === 'fit-content') return width;\n if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n if (!width) return '';\n if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n if (get(theme, width)) return `${get(theme, width)}`;\n if (typeof width === 'string') return width;\n const den = width < 1 ? Math.floor(1 / width) : width;\n return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number | string | (number | string)[]): string | string[] {\n if (Array.isArray(grid)) {\n if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n return numbersToFr(grid as number[]);\n }\n return mapGrid(grid);\n}\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from 'lodash-es';\nimport { theme } from './theme.js';\n\nexport function mapGap(gutter: number | string): number | string {\n if (!gutter) return '0rem';\n if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;\n return `${theme.space[gutter as keyof typeof theme.space]}`;\n}\n\nexport function mapGutter(gutter: string | number | undefined): string {\n if (!gutter) return '0rem';\n return `${theme.space[gutter as keyof typeof theme.space]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;\n return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n width: string | number | string[] | number[],\n gutter?: string | number,\n): string | string[] {\n if (!width) return '';\n if (width === 'fit-content') return width;\n if (Array.isArray(width)) return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number | string[] | number[]): string | string[] {\n if (!width) return '';\n if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n return mapSpace(width);\n}\n\nexport function numbersToFr(grid: number[]): string[] {\n const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n if (get(theme, width)) return `${get(theme, width)}`;\n if (typeof width === 'string') return width;\n const den = width < 1 ? Math.floor(1 / width) : width;\n return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number | string | (number | string)[]): string | string[] {\n if (Array.isArray(grid)) {\n if (grid.some((w) => typeof w === 'string')) return grid.map((w) => mapGrid(w));\n return numbersToFr(grid as number[]);\n }\n return mapGrid(grid);\n}\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW;AACpB,SAAS,aAAa;AAEf,SAAS,OAAO,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,MAAM,EAAE,SAAS,KAAK,KAAK,OAAO,MAAM,EAAE,SAAS,IAAI;AAAG,WAAO;AAC5E,SAAO,GAAG,MAAM,MAAM,MAAkC;AAC1D;AAEO,SAAS,UAAU,QAA6C;AACrE,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,MAAM,MAAM,MAAkC;AAC1D;AAEO,SAAS,SAAS,OAAgC;AACvD,MAAI,OAAO,UAAU;AAAU,WAAO,IAAI,OAAO,KAAK,IAAI,GAAG,IAAI,OAAO,KAAK,MAAM;AACnF,SAAO,GAAG,QAAQ;AACpB;AAEO,SAAS,eACd,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,UAAU;AAAe,WAAO;AACpC,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,CAAC,QAAQ,UAAU,MAAM,KAAK;AACjG,SAAO,QAAQ,SAAS,KAAK,QAAQ,UAAU,MAAM;AACvD;AAEO,SAAS,SAAS,OAAiE;AACxF,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ,KAAK;AAAG,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC;AAC7D,SAAO,SAAS,KAAK;AACvB;AAEO,SAAS,YAAY,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAE;AAC3D,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK;AAChC;AACO,SAAS,QAAQ,OAAgC;AACtD,MAAI,IAAI,OAAO,KAAK;AAAG,WAAO,GAAG,IAAI,OAAO,KAAK;AACjD,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD,SAAO,GAAG;AACZ;AAEO,SAAS,gBAAgB,MAAgE;AAC9F,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM,QAAQ;AAAG,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC;AAC9E,WAAO,YAAY,IAAgB;AAAA,EACrC;AACA,SAAO,QAAQ,IAAI;AACrB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/utils.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { lighten, rgba } from "polished";
|
|
3
|
-
import { reduce } from "lodash";
|
|
3
|
+
import { reduce } from "lodash-es";
|
|
4
4
|
import { css, withTheme, keyframes as kfrm, useTheme } from "@xstyled/styled-components";
|
|
5
5
|
import { theme } from "./theme.js";
|
|
6
6
|
import { toMobile } from "./mobileUtilities.js";
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-shadow */\n\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\n\nimport type { Theme } from '@elliemae/pui-theme';\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport type { Keyframes, FlattenSimpleInterpolation } from 'styled-components';\nimport { css, withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\nimport { toMobile } from './mobileUtilities.js';\nimport { th } from './th.js';\n\nexport { withTheme, rgba, useTheme, kfrm };\n\ntype PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\nexport function truncate(width?: string) {\n return (props: PropsWithTheme<{ width?: string }>) => css`\n ${!!width || props.width ? `width: ${(props.width || width) as string};` : ''}\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n}\n\nexport function flexCenter(): string {\n return `\n display: flex;\n justify-content: center;\n align-items: center;\n `;\n}\n\nexport function disabled(): string {\n return `\n cursor: not-allowed;\n pointer-events: none;\n `;\n}\n\nexport function keyframes(obj: Record<string, string>): Keyframes {\n return kfrm`${reduce(\n obj,\n (result, value, key) => `\n ${result}\n ${key}% {\n ${value}\n }\n `,\n '',\n )}\n `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\n// export function color(variant = 'neutral', type: string | number = 400) {\n// return css`\n// color: ${th.color(`${variant}-${type}`)};\n// `;\n// }\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n return (props: { animationKeyframes?: string; animationLength?: string; animationTimingFn?: string }) => css`\n animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n ${props.animationTimingFn || animationTimingFn};\n `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n return () => css`\n outline: none;\n border: 1px solid ${color};\n box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n border-radius: 2px;\n `;\n}\n\nexport function focusAfter(color: string) {\n return css`\n outline: none;\n position: relative;\n &:after {\n content: '';\n z-index: 10;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n ${focus(color)}\n }\n `;\n}\n\nexport function active() {\n return (props: PropsWithTheme) => css`\n outline: none;\n border: 1px solid ${props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function hover() {\n return (props: PropsWithTheme) => css`\n outline: 1px solid ${props.theme.colors.brand[600]};\n outline-offset: -1px;\n `;\n}\n\nexport function textStyle(type: string, weight: keyof Theme['fontWeights'] = 'regular') {\n // eslint-disable-next-line complexity\n return (props: { theme: Theme }): string => {\n let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n // eslint-disable-next-line default-case\n switch (type) {\n case 'h1':\n cssVar += `\n font-size: ${toMobile('2.7692rem')};\n line-height: normal;\n `;\n break;\n case 'h2':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[800])};\n line-height: normal;\n `;\n break;\n case 'h3':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[700])};\n line-height: 1.2;\n `;\n break;\n case 'h4':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[600])};\n line-height: normal;\n `;\n break;\n case 'h5':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n `;\n break;\n case 'section-header':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n text-transform: uppercase;\n `;\n break;\n case 'body':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'body-small':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[300])};\n line-height: normal;\n `;\n break;\n case 'body-micro':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n line-height: normal;\n `;\n break;\n case 'list':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'link':\n cssVar += `\n line-height: ${props.theme.space.xl};\n color: ${props.theme.colors.brand[600]};\n cursor: pointer;\n `;\n break;\n }\n return cssVar;\n };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n return css`\n fill: ${th.color(`${variant}-${type}`)};\n `;\n}\n\nexport function fakeBorder() {\n return css`\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n border-radius: 2px;\n `;\n}\n\nexport function fakeActive() {\n return css`\n outline: none;\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function clearFocus(): string {\n return `\n border: none;\n box-shadow: none;\n `;\n}\n\nexport function buttonLink(): string {\n return `\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n return `\n transition: ${t};\n `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): FlattenSimpleInterpolation => css`\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n`;\n\nexport const onlySafari = (styles: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n `;\n\nexport const onlyFirefox = (styles: string): string => `\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n`;\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-shadow */\n\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\n\nimport type { Theme } from '@elliemae/pui-theme';\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash-es';\nimport type { Keyframes, FlattenSimpleInterpolation } from 'styled-components';\nimport { css, withTheme, keyframes as kfrm, useTheme } from '@xstyled/styled-components';\nimport { theme } from './theme.js';\nimport { toMobile } from './mobileUtilities.js';\nimport { th } from './th.js';\n\nexport { withTheme, rgba, useTheme, kfrm };\n\ntype PropsWithTheme<T = Record<string, unknown>> = T & { theme: Theme };\n\nexport function truncate(width?: string) {\n return (props: PropsWithTheme<{ width?: string }>) => css`\n ${!!width || props.width ? `width: ${(props.width || width) as string};` : ''}\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n}\n\nexport function flexCenter(): string {\n return `\n display: flex;\n justify-content: center;\n align-items: center;\n `;\n}\n\nexport function disabled(): string {\n return `\n cursor: not-allowed;\n pointer-events: none;\n `;\n}\n\nexport function keyframes(obj: Record<string, string>): Keyframes {\n return kfrm`${reduce(\n obj,\n (result, value, key) => `\n ${result}\n ${key}% {\n ${value}\n }\n `,\n '',\n )}\n `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\n// export function color(variant = 'neutral', type: string | number = 400) {\n// return css`\n// color: ${th.color(`${variant}-${type}`)};\n// `;\n// }\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n return (props: { animationKeyframes?: string; animationLength?: string; animationTimingFn?: string }) => css`\n animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n ${props.animationTimingFn || animationTimingFn};\n `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n return () => css`\n outline: none;\n border: 1px solid ${color};\n box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n border-radius: 2px;\n `;\n}\n\nexport function focusAfter(color: string) {\n return css`\n outline: none;\n position: relative;\n &:after {\n content: '';\n z-index: 10;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n ${focus(color)}\n }\n `;\n}\n\nexport function active() {\n return (props: PropsWithTheme) => css`\n outline: none;\n border: 1px solid ${props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function hover() {\n return (props: PropsWithTheme) => css`\n outline: 1px solid ${props.theme.colors.brand[600]};\n outline-offset: -1px;\n `;\n}\n\nexport function textStyle(type: string, weight: keyof Theme['fontWeights'] = 'regular') {\n // eslint-disable-next-line complexity\n return (props: { theme: Theme }): string => {\n let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n // eslint-disable-next-line default-case\n switch (type) {\n case 'h1':\n cssVar += `\n font-size: ${toMobile('2.7692rem')};\n line-height: normal;\n `;\n break;\n case 'h2':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[800])};\n line-height: normal;\n `;\n break;\n case 'h3':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[700])};\n line-height: 1.2;\n `;\n break;\n case 'h4':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[600])};\n line-height: normal;\n `;\n break;\n case 'h5':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n `;\n break;\n case 'section-header':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n text-transform: uppercase;\n `;\n break;\n case 'body':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'body-small':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[300])};\n line-height: normal;\n `;\n break;\n case 'body-micro':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n line-height: normal;\n `;\n break;\n case 'list':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'link':\n cssVar += `\n line-height: ${props.theme.space.xl};\n color: ${props.theme.colors.brand[600]};\n cursor: pointer;\n `;\n break;\n }\n return cssVar;\n };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n return css`\n fill: ${th.color(`${variant}-${type}`)};\n `;\n}\n\nexport function fakeBorder() {\n return css`\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n border-radius: 2px;\n `;\n}\n\nexport function fakeActive() {\n return css`\n outline: none;\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function clearFocus(): string {\n return `\n border: none;\n box-shadow: none;\n `;\n}\n\nexport function buttonLink(): string {\n return `\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n return `\n transition: ${t};\n `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): FlattenSimpleInterpolation => css`\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n`;\n\nexport const onlySafari = (styles: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n `;\n\nexport const onlyFirefox = (styles: string): string => `\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ${color};\n }\n`;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const styled: (<C extends import("react").ComponentType<any> |
|
|
2
|
+
export declare const styled: (<C extends string | number | symbol | import("react").ComponentType<any> | import("styled-components").AnyStyledComponent>(tag: C, options?: import("./types.js").Options) => import("./types.js").ThemedStyledFunctionBase<C, import("./types.js").Theme, {}, never> & {
|
|
3
3
|
attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
|
|
4
4
|
[others: string]: any;
|
|
5
5
|
} = {}>(attrs: NewA | ((props: import("styled-components").ThemedStyledProps<import("styled-components").StyledComponentPropsWithRef<C> & U, import("./types.js").Theme>) => NewA)) => import("styled-components").ThemedStyledFunction<C, import("./types.js").Theme, {} & NewA, string | number | symbol | keyof NewA>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';
|
|
3
3
|
import type { Options, Theme, ThemedStyledFunctionBase } from './types.js';
|
|
4
|
-
export declare const styledFunction: <C extends import("react").ComponentType<any> |
|
|
4
|
+
export declare const styledFunction: <C extends string | number | symbol | import("react").ComponentType<any> | AnyStyledComponent>(tag: C, options?: Options) => ThemedStyledFunctionBase<C, Theme, {}, never> & {
|
|
5
5
|
attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
|
|
6
6
|
[others: string]: any;
|
|
7
7
|
} = {}>(attrs: NewA | ((props: import("styled-components").ThemedStyledProps<import("styled-components").StyledComponentPropsWithRef<C> & U, Theme>) => NewA)) => ThemedStyledFunction<C, Theme, {} & NewA, string | number | symbol | keyof NewA>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-legacy-system",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.17",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -100,11 +100,11 @@
|
|
|
100
100
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
101
101
|
"@elliemae/pui-theme": "~2.7.0",
|
|
102
102
|
"styled-components": "~5.3.9",
|
|
103
|
-
"@elliemae/ds-legacy-monorepo-devops": "1.0.
|
|
103
|
+
"@elliemae/ds-legacy-monorepo-devops": "1.0.17"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
106
|
"@elliemae/pui-theme": "^2.7.0",
|
|
107
|
-
"lodash": "^4.17.21",
|
|
107
|
+
"lodash-es": "^4.17.21",
|
|
108
108
|
"react": "~17.0.2",
|
|
109
109
|
"react-dom": "^17.0.2",
|
|
110
110
|
"styled-components": "~5.3.9"
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { CSSObject, Interpolation, InterpolationFunction, StyledComponent, StyledComponentInnerComponent, StyledComponentPropsWithRef, ThemedStyledProps } from 'styled-components';
|
|
3
|
-
import type { Theme as PuiTheme } from '@elliemae/pui-theme';
|
|
4
|
-
export interface Options {
|
|
5
|
-
name: string | null;
|
|
6
|
-
slot: string | null;
|
|
7
|
-
}
|
|
8
|
-
export interface Theme extends PuiTheme {
|
|
9
|
-
components?: {
|
|
10
|
-
[componentName: string]: {
|
|
11
|
-
styleOverrides?: CSSObject;
|
|
12
|
-
variants?: {
|
|
13
|
-
props: Record<string, {
|
|
14
|
-
toString: () => string;
|
|
15
|
-
}>;
|
|
16
|
-
style: CSSObject;
|
|
17
|
-
}[];
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
export type AnyStyledRef<T extends HTMLElement> = React.MutableRefObject<T | null> | ((_ref: T | null) => void) | React.Dispatch<React.SetStateAction<T | null>> | false;
|
|
22
|
-
export type StyleArg<T = any> = TemplateStringsArray | CSSObject | InterpolationFunction<T>;
|
|
23
|
-
export type Expression<T = any> = Interpolation<T>;
|
|
24
|
-
export type Expressions<T = any> = Array<Expression<T>>;
|
|
25
|
-
export type PropsWithTheme<T = Record<string, unknown>> = T & {
|
|
26
|
-
theme: Theme;
|
|
27
|
-
};
|
|
28
|
-
export interface ThemedStyledFunctionBase<C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> {
|
|
29
|
-
<U extends object>(first: StyleArg<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface, T>>, ...rest: Expressions<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U & OwnerInterface, T>>): StyledComponent<C, T, O & U & OwnerInterface, A>;
|
|
30
|
-
}
|
|
31
|
-
export type AttrsFunc<T extends object = Record<string, unknown>> = (props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T>>>) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;
|
|
32
|
-
export type InternalAttrsFunc<T extends object = Record<string, unknown>> = (props: StyledComponentPropsWithRef<StyledComponentInnerComponent<React.ComponentType<T & {
|
|
33
|
-
ref?: AnyStyledRef<HTMLElement>;
|
|
34
|
-
}>>>, meta: {
|
|
35
|
-
options: Options;
|
|
36
|
-
displayName: string | null;
|
|
37
|
-
}) => Partial<StyledComponentPropsWithRef<StyledComponentInnerComponent<any>>>;
|
|
38
|
-
export interface OwnerInterface {
|
|
39
|
-
getOwnerProps?: () => object;
|
|
40
|
-
getOwnerPropsArguments?: () => object;
|
|
41
|
-
}
|
|
42
|
-
export type PartProps = Record<string, unknown> | ((args: object) => Record<string, unknown>) | null | undefined;
|