Unverified Commit ba89a84d authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files

Convert styleTokens module

parent 7554115d
export default {
xs: {
minViewportWidth: null,
columns: 4,
gutterWidth: 16,
},
sm: {
minViewportWidth: 600,
columns: 8,
gutterWidth: 16,
},
md: {
minViewportWidth: 768,
columns: 8,
gutterWidth: 24,
},
lg: {
minViewportWidth: 1024,
columns: 12,
gutterWidth: 24,
},
xl: {
minViewportWidth: 1440,
columns: 12,
gutterWidth: 24,
},
} as const;
export default {
// Neutral
n100: '#f7f8fa',
n200: '#f2f3f5',
n300: '#eeeff1',
n400: '#e4e7ea',
n500: '#cbced1',
n600: '#9ea2a8',
n700: '#6c727a',
n800: '#2f343d',
n900: '#1f2329',
// Blues
b100: '#e8f2ff',
b200: '#d1ebfe',
b300: '#76b7fc',
b400: '#549df9',
b500: '#1d74f5',
b600: '#095ad2',
b700: '#10529e',
b800: '#01336b',
b900: '#012247',
// Greens
g100: '#e5fbf4',
g200: '#c0f6e4',
g300: '#96f0d2',
g400: '#6ce9c0',
g500: '#2de0a5',
g600: '#1ecb92',
g700: '#19ac7c',
g800: '#158d65',
g900: '#106d4f',
// Reds
r100: '#fddade',
r200: '#fbb5be',
r300: '#f98f9d',
r400: '#f76a7d',
r500: '#f5455c',
r600: '#db0c27',
r700: '#b30a20',
r800: '#8b0719',
r900: '#630512',
// Yellows
y100: '#fff6d6',
y200: '#ffecad',
y300: '#ffe383',
y400: '#ffd95a',
y500: '#ffd031',
y600: '#f3be08',
y700: '#dfac00',
y800: '#b68d00',
y900: '#8e6d00',
// Purples
p100: '#f9effc',
p200: '#edd0f7',
p300: '#dca0ef',
p400: '#ca71e7',
p500: '#9f22c7',
p600: '#7f1b9f',
p700: '#5f1477',
p800: '#4a105d',
p900: '#350b42',
// Oranges
o100: '#fde8d7',
o200: '#fad1b0',
o300: '#f7b27b',
o400: '#f59b53',
o500: '#f38c39',
o600: '#e26d0e',
o700: '#bd5a0b',
o800: '#974809',
o900: '#713607',
white: '#ffffff',
} as const;
const fontSans = [
'Inter',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Helvetica Neue',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Meiryo UI',
'Arial',
'sans-serif',
] as const;
const fontMono = [
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
] as const;
export default {
fontFamilies: {
sans: fontSans,
mono: fontMono,
},
fontScales: {
h1: {
fontSize: 22,
fontWeight: 400,
letterSpacing: 0,
lineHeight: 32,
},
s1: {
fontSize: 16,
fontWeight: 400,
letterSpacing: 0,
lineHeight: 22,
},
s2: {
fontSize: 16,
fontWeight: 500,
letterSpacing: 0,
lineHeight: 22,
},
p1: {
fontSize: 14,
fontWeight: 400,
letterSpacing: 0,
lineHeight: 20,
},
p2: {
fontSize: 14,
fontWeight: 500,
letterSpacing: 0,
lineHeight: 20,
},
c1: {
fontSize: 12,
fontWeight: 400,
letterSpacing: 0,
lineHeight: 16,
},
c2: {
fontSize: 12,
fontWeight: 600,
letterSpacing: 0,
lineHeight: 16,
},
micro: {
fontSize: 10,
fontWeight: 600,
letterSpacing: 0.2,
lineHeight: 12,
},
},
} as const;
......@@ -125,6 +125,8 @@ module.exports = {
'no-use-before-define': 'off',
'operator-linebreak': 'off',
'prettier/prettier': 2,
'quote-props': 'off',
'space-before-function-paren': 'off',
'template-curly-spacing': 'off',
},
env: {
......
......@@ -50,7 +50,6 @@
"dependencies": {
"@rocket.chat/css-in-js": "^0.19.0",
"@rocket.chat/fuselage-tokens": "^0.19.0",
"invariant": "^2.2.4",
"react-keyed-flatten-children": "^1.2.0"
},
"devDependencies": {
......
const store = new WeakMap();
const store = new WeakMap<(arg: unknown) => unknown, Map<unknown, unknown>>();
export const memoize = (fn) => {
const cache = new Map();
export const memoize = <A, R>(fn: (arg: A) => R): typeof fn => {
const cache = new Map<A, R>();
const memoized = function (arg) {
const memoized: typeof fn = function (this: unknown, arg) {
if (cache.has(arg)) {
return cache.get(arg);
}
......@@ -20,8 +20,10 @@ export const memoize = (fn) => {
return memoized;
};
export const clear = (fn) => {
if (store.has(fn)) {
store.get(fn).clear();
export const clear = <A, R>(fn: (arg: A) => R): void => {
const x = store.get(fn);
if (x) {
x.clear();
}
};
import { cssSupports } from '@rocket.chat/css-in-js';
import tokenColors from '@rocket.chat/fuselage-tokens/colors';
import tokenTypography from '@rocket.chat/fuselage-tokens/typography';
import invariant from 'invariant';
import { memoize } from './helpers/memoize';
const measure = (computeSpecialValue) =>
memoize((value) => {
const measure = <V>(
computeSpecialValue: (value: V) => string | undefined
): ((value: V) => string | undefined) =>
memoize((value: V): string | undefined => {
if (typeof value === 'number') {
return `${value}px`;
}
......@@ -17,7 +18,9 @@ const measure = (computeSpecialValue) =>
const xRegExp = /^(neg-|-)?x(\d+)$/;
if (xRegExp.test(value)) {
const [, negativeMark, measureInPixelsAsString] = xRegExp.exec(value);
const [, negativeMark, measureInPixelsAsString] = xRegExp.exec(
value
) as any;
const measureInPixels =
(negativeMark ? -1 : 1) * parseInt(measureInPixelsAsString, 10);
return `${measureInPixels / 16}rem`;
......@@ -30,13 +33,17 @@ const measure = (computeSpecialValue) =>
return value;
});
export const borderWidth = measure((value) => {
export const borderWidth = measure((value: 'none'): string | undefined => {
if (value === 'none') {
return '0px';
}
return undefined;
});
export const borderRadius = measure((value) => {
export const borderRadius = measure((value: 'none' | 'full'):
| string
| undefined => {
if (value === 'none') {
return '0px';
}
......@@ -44,6 +51,8 @@ export const borderRadius = measure((value) => {
if (value === 'full') {
return '9999px';
}
return undefined;
});
const mapTypeToPrefix = {
......@@ -53,33 +62,35 @@ const mapTypeToPrefix = {
success: 'g',
warning: 'y',
danger: 'r',
};
const getPaletteColor = (type, grade, alpha) => {
invariant(
grade % 100 === 0 && grade / 100 >= 1 && grade / 100 <= 9,
'invalid color grade'
);
invariant(
alpha === undefined || (alpha >= 0 && alpha <= 1),
'invalid color alpha'
);
} as const;
type PaletteColorType = keyof typeof mapTypeToPrefix;
type PaletteColorGrade =
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900';
const getPaletteColor = (
type: PaletteColorType,
grade: PaletteColorGrade,
alpha: number | undefined
): [string, string] => {
const prefix = mapTypeToPrefix[type];
invariant(!!prefix, 'invalid color type');
const baseColor = tokenColors[`${prefix}${grade}`];
invariant(!!baseColor, 'invalid color reference');
const matches = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/.exec(
baseColor
);
invariant(!!matches, 'invalid color token format');
if (alpha !== undefined) {
const [, r, g, b] = matches;
const [, r, g, b] = matches as any;
return [
`--rcx-color-${type}-${grade}-${(alpha * 100).toFixed(0)}`,
`rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${
......@@ -104,18 +115,20 @@ const foregroundColors = {
'link': tokenColors.b500,
'visited-link': tokenColors.p500,
'active-link': tokenColors.r500,
};
} as const;
type ForegroundColorType = keyof typeof foregroundColors;
const getForegroundColor = (type) => {
const getForegroundColor = (type: ForegroundColorType): [string, string] => {
const color = foregroundColors[type];
invariant(!!color, 'invalid foreground color');
return [`--rcx-color-foreground-${type}`, color];
};
const paletteColorRegex = /^(neutral|primary|info|success|warning|danger)-(\d+)(-(\d+))?$/;
export const color = memoize((propValue) => {
export const color = memoize(
(propValue: 'surface' | ForegroundColorType | string) => {
if (typeof propValue !== 'string') {
return;
}
......@@ -123,8 +136,13 @@ export const color = memoize((propValue) => {
const paletteMatches = paletteColorRegex.exec(String(propValue));
if (paletteMatches) {
const [, type, gradeString, , alphaString] = paletteMatches;
const grade = parseInt(gradeString, 10);
const [, type, grade, , alphaString] = (paletteMatches as unknown) as [
undefined,
PaletteColorType,
PaletteColorGrade,
undefined,
string
];
const alpha =
alphaString !== undefined ? parseInt(alphaString, 10) / 100 : undefined;
const [customProperty, color] = getPaletteColor(type, grade, alpha);
......@@ -144,8 +162,10 @@ export const color = memoize((propValue) => {
return 'white';
}
if (foregroundColors[String(propValue)]) {
const [customProperty, color] = getForegroundColor(String(propValue));
if (propValue in foregroundColors) {
const [customProperty, color] = getForegroundColor(
propValue as ForegroundColorType
);
if (customProperty && cssSupports('(--foo: bar)')) {
return `var(${customProperty}, ${color})`;
......@@ -155,9 +175,10 @@ export const color = memoize((propValue) => {
}
return propValue;
});
}
);
export const size = measure((value) => {
export const size = measure((value: any): any => {
if (value === 'none') {
return '0px';
}
......@@ -175,25 +196,25 @@ export const size = measure((value) => {
}
});
export const inset = measure((value) => {
export const inset = measure((value: any): any => {
if (value === 'none') {
return '0px';
}
});
export const margin = measure((value) => {
export const margin = measure((value: any): any => {
if (value === 'none') {
return '0px';
}
});
export const padding = measure((value) => {
export const padding = measure((value: any): any => {
if (value === 'none') {
return '0px';
}
});
export const fontFamily = memoize((value) => {
export const fontFamily = memoize((value: any): any => {
if (typeof value !== 'string') {
return;
}
......@@ -203,7 +224,9 @@ export const fontFamily = memoize((value) => {
}
const fontFamily = tokenTypography.fontFamilies[value]
.map((fontFace) => (fontFace.includes(' ') ? `'${fontFace}'` : fontFace))
.map((fontFace: any) =>
fontFace.includes(' ') ? `'${fontFace}'` : fontFace
)
.join(', ');
if (cssSupports('(--foo: bar)')) {
......@@ -213,7 +236,9 @@ export const fontFamily = memoize((value) => {
return fontFamily;
});
export const fontScale = (value) => {
export const fontScale = (
value: keyof typeof tokenTypography.fontScales
): any => {
if (!tokenTypography.fontScales[value]) {
return;
}
......
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