Unverified Commit 90aa08aa authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files

Move some theming-related functions

parent d0a5b1d9
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
"dependencies": { "dependencies": {
"@rocket.chat/css-in-js": "^0.20.1", "@rocket.chat/css-in-js": "^0.20.1",
"@rocket.chat/fuselage-hooks": "^0.20.1", "@rocket.chat/fuselage-hooks": "^0.20.1",
"@rocket.chat/fuselage-tokens": "^0.20.1" "@rocket.chat/fuselage-tokens": "^0.20.1",
"@rocket.chat/memo": "^0.20.1"
} }
} }
...@@ -2,9 +2,17 @@ import { css, cssFn } from '@rocket.chat/css-in-js'; ...@@ -2,9 +2,17 @@ import { css, cssFn } from '@rocket.chat/css-in-js';
import { fontScale, FontScale } from '../theming'; import { fontScale, FontScale } from '../theming';
export default (_fontScale: FontScale): cssFn => css` export default (value: FontScale): cssFn | undefined => {
font-size: ${fontScale(_fontScale).fontSize} !important; const values = fontScale(value);
font-weight: ${fontScale(_fontScale).fontWeight} !important;
letter-spacing: ${fontScale(_fontScale).letterSpacing} !important; if (!values) {
line-height: ${fontScale(_fontScale).lineHeight} !important; return undefined;
`; }
return css`
font-size: ${values.fontSize} !important;
font-weight: ${values.fontWeight} !important;
letter-spacing: ${values.letterSpacing} !important;
line-height: ${values.lineHeight} !important;
`;
};
import { memoize } from '@rocket.chat/memo';
import { length } from './length';
export type BorderRadius = number | 'none' | 'full' | string;
export const borderRadius = memoize((value: BorderRadius):
| string
| undefined => {
if (typeof value === 'number') {
return `${value}px`;
}
if (typeof value !== 'string') {
return undefined;
}
if (value === 'none') {
return '0px';
}
if (value === 'full') {
return '9999px';
}
return length(value);
});
import { memoize } from '@rocket.chat/memo';
import { length } from './length';
export type BorderWidth = number | 'none' | string;
export const borderWidth = memoize((value: BorderWidth): string | undefined => {
if (typeof value === 'number') {
return `${value}px`;
}
if (typeof value !== 'string') {
return undefined;
}
if (value === 'none') {
return '0px';
}
return length(value);
});
import { cssSupports } from '@rocket.chat/css-in-js';
import tokenTypography from '@rocket.chat/fuselage-tokens/typography.json';
import { memoize } from '@rocket.chat/memo';
export type FontFamily = keyof typeof tokenTypography['fontFamilies'];
export const fontFamily = memoize((value: FontFamily): string | undefined => {
if (!(value in tokenTypography.fontFamilies)) {
return undefined;
}
const fontFamily = tokenTypography.fontFamilies[value]
.map((fontFace) => (fontFace.includes(' ') ? `'${fontFace}'` : fontFace))
.join(', ');
if (cssSupports('(--foo: bar)')) {
return `var(--rcx-font-family-${value}, ${fontFamily})`;
}
return fontFamily;
});
import { cssSupports } from '@rocket.chat/css-in-js';
import tokenTypography from '@rocket.chat/fuselage-tokens/typography.json'; import tokenTypography from '@rocket.chat/fuselage-tokens/typography.json';
import { memoize } from '@rocket.chat/memo';
export type FontScale = keyof typeof tokenTypography['fontScales']; export type FontScale = keyof typeof tokenTypography['fontScales'];
export const fontScale = ( export const fontScale = memoize((value: FontScale):
value: FontScale | {
): { fontSize: string;
fontSize: string; fontWeight: string;
fontWeight: string; lineHeight: string;
lineHeight: string; letterSpacing: string;
letterSpacing: string; }
} => { | undefined => {
if (!(value in tokenTypography.fontScales)) {
return undefined;
}
const { const {
fontSize, fontSize,
fontWeight, fontWeight,
...@@ -17,10 +23,21 @@ export const fontScale = ( ...@@ -17,10 +23,21 @@ export const fontScale = (
letterSpacing, letterSpacing,
} = tokenTypography.fontScales[value]; } = tokenTypography.fontScales[value];
return { const values = {
fontSize: `${fontSize / 16}rem`, fontSize: `${fontSize / 16}rem`,
fontWeight: String(fontWeight), fontWeight: String(fontWeight),
lineHeight: `${lineHeight / 16}rem`, lineHeight: `${lineHeight / 16}rem`,
letterSpacing: `${letterSpacing / 16}rem`, letterSpacing: `${letterSpacing / 16}rem`,
}; };
};
if (!cssSupports('(--foo: bar)')) {
return values;
}
return {
fontSize: `var(--rcx-font-scale-${value}-font-size, ${values.fontSize})`,
fontWeight: `var(--rcx-font-scale-${value}-font-weight, ${values.fontWeight})`,
lineHeight: `var(--rcx-font-scale-${value}-line-height, ${values.lineHeight})`,
letterSpacing: `var(--rcx-font-scale-${value}-letter-spacing, ${values.letterSpacing})`,
};
});
export { borderRadius, BorderRadius } from './borderRadius';
export { borderWidth, BorderWidth } from './borderWidth';
export { fontFamily, FontFamily } from './fontFamily';
export { fontScale, FontScale } from './fontScale'; export { fontScale, FontScale } from './fontScale';
export { inset, Inset } from './inset';
export { margin, Margin } from './margin';
export { padding, Padding } from './padding';
export { size, Size } from './size';
import { memoize } from '@rocket.chat/memo';
import { length } from './length';
export type Inset = number | 'none' | string;
export const inset = memoize((value: Inset): string | undefined => {
if (typeof value === 'number') {
return `${value}px`;
}
if (typeof value !== 'string') {
return undefined;
}
if (value === 'none') {
return '0px';
}
return length(value);
});
export const length = (value: string): string | undefined => {
const xRegExp = /^(neg-|-)?x(\d+)$/;
const matches = xRegExp.exec(value);
if (!matches) {
return undefined;
}
const [, negativeMark, measureInPixelsAsString] = matches;
const measureInPixels =
(negativeMark ? -1 : 1) * parseInt(measureInPixelsAsString, 10);
return `${measureInPixels}px`;
};
import { memoize } from '@rocket.chat/memo';
import { length } from './length';
export type Margin = number | 'none' | string;
export const margin = memoize((value: Margin): string | undefined => {
if (typeof value === 'number') {
return `${value}px`;
}
if (typeof value !== 'string') {
return undefined;
}
if (value === 'none') {
return '0px';
}
return length(value);
});
import { memoize } from '@rocket.chat/memo';
import { length } from './length';
export type Padding = number | 'none' | string;
export const padding = memoize((value: Padding): string | undefined => {
if (typeof value === 'number') {
return `${value}px`;
}
if (typeof value !== 'string') {
return undefined;
}
if (value === 'none') {
return '0px';
}
return length(value);
});
import { memoize } from '@rocket.chat/memo';
import { length } from './length';
export type Size = number | 'none' | 'full' | 'sw' | 'sh' | string;
export const size = memoize((value: Size): string | undefined => {
if (typeof value === 'number') {
return `${value}px`;
}
if (typeof value !== 'string') {
return undefined;
}
if (value === 'none') {
return '0px';
}
if (value === 'full') {
return '100%';
}
if (value === 'sw') {
return '100vw';
}
if (value === 'sh') {
return '100vh';
}
return length(value);
});
...@@ -38,49 +38,49 @@ const numberOrStringProp = { ...@@ -38,49 +38,49 @@ const numberOrStringProp = {
}; };
const borderWidthProp = { const borderWidthProp = {
toCSSValue: borderWidth, toCSSValue: (value) => borderWidth(value) ?? value,
propType: createPropType(borderWidth), propType: createPropType(borderWidth),
}; };
const borderRadiusProp = { const borderRadiusProp = {
toCSSValue: borderRadius, toCSSValue: (value) => borderRadius(value) ?? value,
propType: createPropType(borderRadius), propType: createPropType(borderRadius),
}; };
const colorProp = { const colorProp = {
toCSSValue: color, toCSSValue: (value) => color(value) ?? value,
propType: createPropType(color), propType: createPropType(color),
}; };
const sizeProp = { const sizeProp = {
toCSSValue: size, toCSSValue: (value) => size(value) ?? value,
propType: createPropType(size), propType: createPropType(size),
}; };
const insetProp = { const insetProp = {
toCSSValue: inset, toCSSValue: (value) => inset(value) ?? value,
propType: createPropType(inset), propType: createPropType(inset),
}; };
const marginProp = { const marginProp = {
toCSSValue: margin, toCSSValue: (value) => margin(value) ?? value,
propType: createPropType(margin), propType: createPropType(margin),
}; };
const paddingProp = { const paddingProp = {
toCSSValue: padding, toCSSValue: (value) => padding(value) ?? value,
propType: createPropType(padding), propType: createPropType(padding),
}; };
const fontFamilyProp = { const fontFamilyProp = {
toCSSValue: fontFamily, toCSSValue: (value) => fontFamily(value) ?? value,
propType: createPropType(fontFamily), propType: createPropType(fontFamily),
}; };
const fontSizeProp = { const fontSizeProp = {
toCSSValue: (value) => fontScale(value)?.fontSize || size(value), toCSSValue: (value) => fontScale(value)?.fontSize ?? size(value) ?? value,
propType: createPropType( propType: createPropType(
(value) => fontScale(value)?.fontSize || size(value) (value) => fontScale(value)?.fontSize ?? size(value) ?? value
), ),
}; };
...@@ -90,9 +90,9 @@ const fontWeightProp = { ...@@ -90,9 +90,9 @@ const fontWeightProp = {
}; };
const lineHeightProp = { const lineHeightProp = {
toCSSValue: (value) => fontScale(value)?.lineHeight || size(value), toCSSValue: (value) => fontScale(value)?.lineHeight ?? size(value) ?? value,
propType: createPropType( propType: createPropType(
(value) => fontScale(value)?.lineHeight || size(value) (value) => fontScale(value)?.lineHeight ?? size(value) ?? value
), ),
}; };
......
import { cssSupports } from '@rocket.chat/css-in-js'; import { cssSupports } from '@rocket.chat/css-in-js';
import tokenColors from '@rocket.chat/fuselage-tokens/colors.json'; import tokenColors from '@rocket.chat/fuselage-tokens/colors.json';
import tokenTypography from '@rocket.chat/fuselage-tokens/typography.json';
import { memoize } from '@rocket.chat/memo'; import { memoize } from '@rocket.chat/memo';
import invariant from 'invariant'; import invariant from 'invariant';
const measure = (computeSpecialValue) => export {
memoize((value) => { borderRadius,
if (typeof value === 'number') { borderWidth,
return `${value}px`; fontFamily,
} fontScale,
inset,
if (typeof value !== 'string') { margin,
return undefined; padding,
} size,
} from '@rocket.chat/fuselage-box';
const xRegExp = /^(neg-|-)?x(\d+)$/;
if (xRegExp.test(value)) {
const [, negativeMark, measureInPixelsAsString] = xRegExp.exec(value);
const measureInPixels =
(negativeMark ? -1 : 1) * parseInt(measureInPixelsAsString, 10);
return `${measureInPixels / 16}rem`;
}
if (computeSpecialValue) {
return computeSpecialValue(value) || value;
}
return value;
});
export const borderWidth = measure((value) => {
if (value === 'none') {
return '0px';
}
});
export const borderRadius = measure((value) => {
if (value === 'none') {
return '0px';
}
if (value === 'full') {
return '9999px';
}
});
const mapTypeToPrefix = { const mapTypeToPrefix = {
neutral: 'n', neutral: 'n',
...@@ -155,61 +124,3 @@ export const color = memoize((propValue) => { ...@@ -155,61 +124,3 @@ export const color = memoize((propValue) => {
return propValue; return propValue;
}); });
export const size = measure((value) => {
if (value === 'none') {
return '0px';
}
if (value === 'full') {
return '100%';
}
if (value === 'sw') {
return '100vw';
}
if (value === 'sh') {
return '100vh';
}
});
export const inset = measure((value) => {
if (value === 'none') {
return '0px';
}
});
export const margin = measure((value) => {
if (value === 'none') {
return '0px';
}
});
export const padding = measure((value) => {
if (value === 'none') {
return '0px';
}
});
export const fontFamily = memoize((value) => {
if (typeof value !== 'string') {
return;
}
if (!tokenTypography.fontFamilies[value]) {
return value;
}
const fontFamily = tokenTypography.fontFamilies[value]
.map((fontFace) => (fontFace.includes(' ') ? `'${fontFace}'` : fontFace))
.join(', ');
if (cssSupports('(--foo: bar)')) {
return `var(--rcx-font-family-${value}, ${fontFamily})`;
}
return fontFamily;
});
export { fontScale } from '@rocket.chat/fuselage-box';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment