Move some theming-related functions

parent d0a5b1d9
......@@ -53,6 +53,7 @@
"dependencies": {
"@rocket.chat/css-in-js": "^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';
import { fontScale, FontScale } from '../theming';
export default (_fontScale: FontScale): cssFn => css`
font-size: ${fontScale(_fontScale).fontSize} !important;
font-weight: ${fontScale(_fontScale).fontWeight} !important;
letter-spacing: ${fontScale(_fontScale).letterSpacing} !important;
line-height: ${fontScale(_fontScale).lineHeight} !important;
`;
export default (value: FontScale): cssFn | undefined => {
const values = fontScale(value);
if (!values) {
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 { memoize } from '@rocket.chat/memo';
export type FontScale = keyof typeof tokenTypography['fontScales'];
export const fontScale = (
value: FontScale
): {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
} => {
export const fontScale = memoize((value: FontScale):
| {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
}
| undefined => {
if (!(value in tokenTypography.fontScales)) {
return undefined;
}
const {
fontSize,
fontWeight,
......@@ -17,10 +23,21 @@ export const fontScale = (
letterSpacing,
} = tokenTypography.fontScales[value];
return {
const values = {
fontSize: `${fontSize / 16}rem`,
fontWeight: String(fontWeight),
lineHeight: `${lineHeight / 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 { 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 = {
};
const borderWidthProp = {
toCSSValue: borderWidth,
toCSSValue: (value) => borderWidth(value) ?? value,
propType: createPropType(borderWidth),
};
const borderRadiusProp = {
toCSSValue: borderRadius,
toCSSValue: (value) => borderRadius(value) ?? value,
propType: createPropType(borderRadius),
};
const colorProp = {
toCSSValue: color,
toCSSValue: (value) => color(value) ?? value,
propType: createPropType(color),
};
const sizeProp = {
toCSSValue: size,
toCSSValue: (value) => size(value) ?? value,
propType: createPropType(size),
};
const insetProp = {
toCSSValue: inset,
toCSSValue: (value) => inset(value) ?? value,
propType: createPropType(inset),
};
const marginProp = {
toCSSValue: margin,
toCSSValue: (value) => margin(value) ?? value,
propType: createPropType(margin),
};
const paddingProp = {
toCSSValue: padding,
toCSSValue: (value) => padding(value) ?? value,
propType: createPropType(padding),
};
const fontFamilyProp = {
toCSSValue: fontFamily,
toCSSValue: (value) => fontFamily(value) ?? value,
propType: createPropType(fontFamily),
};
const fontSizeProp = {
toCSSValue: (value) => fontScale(value)?.fontSize || size(value),
toCSSValue: (value) => fontScale(value)?.fontSize ?? size(value) ?? value,
propType: createPropType(
(value) => fontScale(value)?.fontSize || size(value)
(value) => fontScale(value)?.fontSize ?? size(value) ?? value
),
};
......@@ -90,9 +90,9 @@ const fontWeightProp = {
};
const lineHeightProp = {
toCSSValue: (value) => fontScale(value)?.lineHeight || size(value),
toCSSValue: (value) => fontScale(value)?.lineHeight ?? size(value) ?? value,
propType: createPropType(
(value) => fontScale(value)?.lineHeight || size(value)
(value) => fontScale(value)?.lineHeight ?? size(value) ?? value
),
};
......
import { cssSupports } from '@rocket.chat/css-in-js';
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 invariant from 'invariant';
const measure = (computeSpecialValue) =>
memoize((value) => {
if (typeof value === 'number') {
return `${value}px`;
}
if (typeof value !== 'string') {
return undefined;
}
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';
}
});
export {
borderRadius,
borderWidth,
fontFamily,
fontScale,
inset,
margin,
padding,
size,
} from '@rocket.chat/fuselage-box';
const mapTypeToPrefix = {
neutral: 'n',
......@@ -155,61 +124,3 @@ export const color = memoize((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