Unverified Commit 7554115d authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files

Move some runtime styles

parent 6fa48851
......@@ -114,6 +114,7 @@ module.exports = {
},
},
],
'no-confusing-arrow': 'off',
'no-empty-function': 'off',
'no-extra-parens': 'off',
'no-redeclare': 'off',
......
import { css } from '@rocket.chat/css-in-js';
import PropTypes from 'prop-types';
import React, { createElement, forwardRef, memo } from 'react';
import { appendClassName } from '../../helpers/appendClassName';
import { prependClassName } from '../../helpers/prependClassName';
import { useStyle } from '../../hooks/useStyle';
import { useStyleSheet } from '../../hooks/useStyleSheet';
import {
/* propTypes as stylingPropsPropTypes, */ useStylingProps,
} from './stylingProps';
import { useStylingProps } from './stylingProps';
import { useBoxTransform, BoxTransforms } from './transforms';
export const useArrayLikeClassNameProp = (props) => {
......@@ -82,20 +79,7 @@ export const Box = memo(
})
);
if (process.env.NODE_ENV !== 'production') {
Box.displayName = 'Box';
Box.propTypes = {
is: PropTypes.elementType,
className: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.array,
]),
// ...stylingPropsPropTypes,
};
}
Box.displayName = 'Box';
Box.defaultProps = {
is: 'div',
......
import { css } from '@rocket.chat/css-in-js';
import PropTypes from 'prop-types';
import { appendClassName } from '../../../helpers/appendClassName';
import { createPropType } from '../../../helpers/createPropType';
import { fromCamelToKebab } from '../../../helpers/fromCamelToKebab';
import { useStyle } from '../../../hooks/useStyle';
import { appendClassName } from '../../helpers/appendClassName';
import { fromCamelToKebab } from '../../helpers/fromCamelToKebab';
import { useStyle } from '../../hooks/useStyle';
import {
borderWidth,
borderRadius,
......@@ -15,12 +13,14 @@ import {
padding,
fontFamily,
fontScale,
} from '../../../styleTokens';
import richContentStyle from './richContentStyle';
} from '../../styleTokens';
import { elevation } from '../../styles/runtime/elevation';
import { invisible } from '../../styles/runtime/invisible';
import { withRichContent } from '../../styles/runtime/withRichContent';
import { withTruncatedText } from '../../styles/runtime/withTruncatedText';
const stringProp = {
toCSSValue: (value) => (typeof value === 'string' ? value : undefined),
propType: PropTypes.string,
};
const numberOrStringProp = {
......@@ -29,71 +29,54 @@ const numberOrStringProp = {
return String(value);
}
},
propType: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
const borderWidthProp = {
toCSSValue: borderWidth,
propType: createPropType(borderWidth),
};
const borderRadiusProp = {
toCSSValue: borderRadius,
propType: createPropType(borderRadius),
};
const colorProp = {
toCSSValue: color,
propType: createPropType(color),
};
const sizeProp = {
toCSSValue: size,
propType: createPropType(size),
};
const insetProp = {
toCSSValue: inset,
propType: createPropType(inset),
};
const marginProp = {
toCSSValue: margin,
propType: createPropType(margin),
};
const paddingProp = {
toCSSValue: padding,
propType: createPropType(padding),
};
const fontFamilyProp = {
toCSSValue: fontFamily,
propType: createPropType(fontFamily),
};
const fontSizeProp = {
toCSSValue: (value) => fontScale(value)?.fontSize || size(value),
propType: createPropType(
(value) => fontScale(value)?.fontSize || size(value)
),
};
const fontWeightProp = {
toCSSValue: (value) => fontScale(value)?.fontWeight || value,
propType: createPropType((value) => fontScale(value)?.fontWeight || value),
};
const lineHeightProp = {
toCSSValue: (value) => fontScale(value)?.lineHeight || size(value),
propType: createPropType(
(value) => fontScale(value)?.lineHeight || size(value)
),
};
const letterSpacingProp = {
toCSSValue: (value) => fontScale(value)?.letterSpacing || value,
propType: createPropType((value) => fontScale(value)?.letterSpacing || value),
};
const aliasOf = (propName) => ({
......@@ -217,52 +200,16 @@ const propDefs = {
textDecorationLine: stringProp,
elevation: {
toStyle: (value) => {
if (value === '0') {
return css`
box-shadow: none;
`;
}
if (value === '1') {
return css`
box-shadow: 0px 0px 12px 0px ${color('neutral-800-10')};
`;
}
if (value === '2') {
return css`
box-shadow: 0px 0px 2px 0px ${color('neutral-800-8')},
0px 0px 12px 0px ${color('neutral-800-12')};
`;
}
},
propType: PropTypes.oneOf(['0', '1', '2']),
toStyle: elevation,
},
invisible: {
toStyle: (value) =>
value
? css`
visibility: hidden;
opacity: 0;
`
: undefined,
propType: PropTypes.bool,
toStyle: invisible,
},
withRichContent: {
toStyle: (value) => (value ? richContentStyle : undefined),
propType: PropTypes.bool,
toStyle: withRichContent,
},
withTruncatedText: {
toStyle: (value) =>
value
? css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`
: undefined,
propType: PropTypes.bool,
toStyle: withTruncatedText,
},
size: {
toStyle: (value) =>
......@@ -272,7 +219,6 @@ const propDefs = {
height: ${size(value)} !important;
`
: undefined,
propType: createPropType(size),
},
minSize: {
toStyle: (value) =>
......@@ -282,7 +228,6 @@ const propDefs = {
min-height: ${size(value)} !important;
`
: undefined,
propType: createPropType(size),
},
maxSize: {
toStyle: (value) =>
......@@ -292,7 +237,6 @@ const propDefs = {
max-height: ${size(value)} !important;
`
: undefined,
propType: createPropType(size),
},
fontScale: {
toStyle: (value) => css`
......@@ -301,24 +245,9 @@ const propDefs = {
letter-spacing: ${fontScale(value)?.letterSpacing} !important;
line-height: ${fontScale(value)?.lineHeight} !important;
`,
propType: PropTypes.oneOf(fontScale.values),
},
};
export const propTypes = Object.entries(propDefs).reduce(
(obj, [propName, propDef]) => {
if (propDef.aliasOf) {
propDef = propDefs[propDef.aliasOf];
}
obj[propName] = propDef.propType;
return obj;
},
{
htmlSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
);
export const useStylingProps = (originalProps) => {
const { htmlSize, ...props } = originalProps;
......
import { css } from '@rocket.chat/css-in-js';
import {
borderWidth,
borderRadius,
color,
margin,
padding,
fontFamily,
fontScale,
} from '../../../styleTokens';
export default css`
strong,
em,
b,
i,
a,
q,
cite,
code,
time,
dfn,
abbr,
del,
ins,
sup,
sub,
kbd,
var,
small,
h1,
h2,
h3,
h4,
h5,
h6,
p {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
strong,
b {
font-weight: bolder;
}
em,
i {
font-style: italic;
}
a {
&:link {
text-decoration: none;
color: ${color('link')};
}
&:visited,
&.is-visited {
color: ${color('visited-link')};
}
&:active,
&.is-active {
color: ${color('active-link')};
}
&:hover,
&.is-hovered {
text-decoration: underline;
}
}
q {
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
cite {
font-style: italic;
}
}
code {
padding: ${padding('x4')} ${padding('x8')};
border-radius: ${borderRadius('x2')};
background-color: ${color('neutral-300')};
font-family: ${fontFamily('mono')};
-webkit-font-smoothing: auto;
}
time {
color: ${color('info')};
}
dfn {
color: ${color('info')};
font-style: italic;
}
abbr {
&[title] {
text-decoration: underline dashed;
border-block-end-width: ${borderWidth('none')};
}
}
del {
text-decoration: line-through solid;
}
ins {
text-decoration: underline solid;
}
sup,
sub {
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
}
sup {
inset-block-start: -0.5em;
}
sub {
inset-block-start: -0.25em;
}
kbd {
padding: ${padding('x4')} ${padding('x8')};
border-width: ${borderWidth('x1')};
border-style: solid;
border-color: currentColor;
border-radius: ${borderRadius('x2')};
font-family: ${fontFamily('mono')};
-webkit-font-smoothing: auto;
}
var {
font-style: italic;
}
small {
font-size: 80%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
pre {
display: block;
margin: ${margin('x16')} ${margin('none')};
}
h1 {
font-size: ${fontScale('h1')?.fontSize};
font-weight: ${fontScale('h1')?.fontWeight};
line-height: ${fontScale('h1')?.lineHeight};
letter-spacing: ${fontScale('h1')?.letterSpacing};
}
h2 {
font-size: ${fontScale('s2')?.fontSize};
font-weight: ${fontScale('s2')?.fontWeight};
line-height: ${fontScale('s2')?.lineHeight};
letter-spacing: ${fontScale('s2')?.letterSpacing};
}
h3 {
font-size: ${fontScale('p2')?.fontSize};
font-weight: ${fontScale('p2')?.fontWeight};
line-height: ${fontScale('p2')?.lineHeight};
letter-spacing: ${fontScale('p2')?.letterSpacing};
}
h4 {
font-size: ${fontScale('c2')?.fontSize};
font-weight: ${fontScale('c2')?.fontWeight};
line-height: ${fontScale('c2')?.lineHeight};
letter-spacing: ${fontScale('c2')?.letterSpacing};
}
h5 {
font-size: ${fontScale('micro')?.fontSize};
font-weight: ${fontScale('micro')?.fontWeight};
line-height: ${fontScale('micro')?.lineHeight};
letter-spacing: ${fontScale('micro')?.letterSpacing};
}
h6 {
font-size: ${fontScale('micro')?.fontSize};
font-weight: ${fontScale('micro')?.fontWeight};
line-height: ${fontScale('micro')?.lineHeight};
letter-spacing: ${fontScale('micro')?.letterSpacing};
}
p {
font-size: ${fontScale('p1')?.fontSize};
font-weight: ${fontScale('p1')?.fontWeight};
line-height: ${fontScale('p1')?.lineHeight};
letter-spacing: ${fontScale('p1')?.letterSpacing};
}
ul,
ol {
padding-inline-start: ${padding('x40')};
}
ul {
font-size: ${fontScale('p1')?.fontSize};
font-weight: ${fontScale('p1')?.fontWeight};
line-height: ${fontScale('p1')?.lineHeight};
letter-spacing: ${fontScale('p1')?.letterSpacing};
list-style-type: disc;
}
ol {
font-size: ${fontScale('p1')?.fontSize};
font-weight: ${fontScale('p1')?.fontWeight};
line-height: ${fontScale('p1')?.lineHeight};
letter-spacing: ${fontScale('p1')?.letterSpacing};
list-style-type: decimal;
}
li {
display: list-item;
text-align: inherit;
}
pre {
font-family: ${fontFamily('mono')};
code {
display: block;
padding: ${padding('x16')};
}
}
`;
import { css } from '@rocket.chat/css-in-js';
import { color } from '../../styleTokens';
export const elevation = (
value: '0' | '1' | '2'
): ReturnType<typeof css> | undefined => {
if (value === '0') {
return css`
box-shadow: none;
`;
}
if (value === '1') {
return css`
box-shadow: 0px 0px 12px 0px ${color('neutral-800-10')};
`;
}
if (value === '2') {
return css`
box-shadow: 0px 0px 2px 0px ${color('neutral-800-8')},
0px 0px 12px 0px ${color('neutral-800-12')};
`;
}
return undefined;
};
import { css } from '@rocket.chat/css-in-js';
export const invisible = (enabled: boolean): ReturnType<typeof css> | null =>
enabled
? css`
visibility: hidden;
opacity: 0;
`
: null;
import { css } from '@rocket.chat/css-in-js';
import { color, fontFamily, fontScale } from '../../styleTokens';
export const withRichContent = (
enabled: boolean
): ReturnType<typeof css> | null =>
enabled
? css`
strong,
em,
b,
i,
a,
q,
cite,
code,
time,
dfn,
abbr,
del,
ins,
sup,
sub,
kbd,
var,
small,
h1,
h2,
h3,
h4,
h5,
h6,
p {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
strong,
b {
font-weight: bolder;
}
em,