@bitrise/bitkit 12.100.0 → 12.101.1-alpha.0

package/src/tokens/tokens.ts

@@ -1,49 +1,20 @@
 import tokensJson from './tokens.json';
-import { looper } from './tokensUtils';
+import { getFontSizes, looper } from './tokensUtils';
 
-const legacyTokens = {
-  brand: {
-    primary: 'pal.purple.30',
+const tokens = {
+  fonts: {
+    body: `"Figtree", sans-serif`,
+    mono: `"Source Code Pro", monospace`,
   },
-  separator: {
-    primary: 'pal.neutral.90',
+  fontSizes: getFontSizes(tokensJson.core.fontSizes),
+  fontWeights: {
+    bold: 700,
+    demiBold: 600,
+    normal: 400,
+    semibold: 600,
   },
-  text: {
-    body: 'pal.neutral.10',
-    link: 'pal.purple.50',
-    linkHover: 'pal.purple.30',
-    secondary: 'pal.neutral.40',
-  },
-};
-
-const commonColors = (({ background, border, icon, text }) => ({ background, border, icon, text }))(
-  tokensJson.comp.color,
-);
-
-const paletteColors = looper(tokensJson.core.color.pal);
-
-export const colors = {
-  pal: paletteColors,
-  ...paletteColors,
+  letterSpacings: looper(tokensJson.core.letterSpacings),
+  lineHeights: looper(tokensJson.core.lineHeights),
 };
 
-export const semanticTokens = {
-  colors: {
-    ...legacyTokens,
-    sys: looper(tokensJson.system.color.sys),
-    ...looper(commonColors),
-  },
-};
-
-export type TypeColors = `${
-  | 'neutral'
-  | 'purple'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'green'
-  | 'turquoise'
-  | 'purple'
-  | 'blue'}.${'10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '93' | '95' | '100'}`;
-
-export type ColorScheme = 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'purple' | 'neutral';
+export default tokens;

package/src/tokens/tokensUtils.ts

@@ -3,18 +3,61 @@ type JsonValue = {
   value: string;
 };
 
-const valueFormatter = (obj: JsonValue) => {
-  return obj.value.replace(/\{color\.(.*)\}/, '$1');
+const VALUE_REGEXPS = {
+  color: /\{color\.(.*)\}/,
+  typography: /\{typography\.(.*)\}/,
 };
 
-export const looper = (obj: any) => {
+const VALUE_FORMATTERS = {
+  color: (value: string) => value.replace(VALUE_REGEXPS.color, '$1'),
+  fontSize: (value: string) => {
+    const number = value.split('*')[1] || '1';
+    return `${number.trim()}rem`;
+  },
+  typography: (value: string) => {
+    if (!value) {
+      return value;
+    }
+    return value.replace(VALUE_REGEXPS.typography, '$1').replace(/\{(.*)\}/, '$1');
+  },
+};
+
+export const looper = (
+  obj: any,
+  formatterType?: keyof typeof VALUE_FORMATTERS,
+  formatterFunction?: (key: string, value: string) => any,
+) => {
+  const returnObject: any = {};
+  Object.keys(obj).forEach((key) => {
+    const val: JsonValue | string = obj[key];
+    let finalValue = typeof val === 'string' ? val : val.value;
+    if (formatterType) {
+      finalValue = VALUE_FORMATTERS[formatterType](finalValue);
+    }
+    if (formatterFunction) {
+      finalValue = formatterFunction(key, finalValue);
+    }
+    if (finalValue) {
+      returnObject[key] = finalValue;
+    }
+  });
+  return returnObject;
+};
+
+export const colorLooper = (obj: any) => {
   const returnObject: any = {};
   Object.keys(obj).forEach((color) => {
     returnObject[color] = {};
     Object.keys(obj[color]).forEach((key: string) => {
       const valueObj: JsonValue = obj[color][key];
-      returnObject[color][key] = valueFormatter(valueObj);
+      returnObject[color][key] = VALUE_FORMATTERS.color(valueObj.value);
     });
   });
   return returnObject;
 };
+
+export const getFontSizes = (json: any) => {
+  const returnObj: Record<string, string> = looper(json, 'fontSize');
+
+  return returnObj;
+};

package/src/types/colors.ts

@@ -0,0 +1,12 @@
+export type TypeColors = `${
+  | 'neutral'
+  | 'purple'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'turquoise'
+  | 'purple'
+  | 'blue'}.${'10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '93' | '95' | '100'}`;
+
+export type ColorScheme = 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'purple' | 'neutral';

package/src/types/typography.ts

@@ -0,0 +1,19 @@
+export const TOKEN_STRINGS = [
+  'heading.h1',
+  'heading.h2',
+  'heading.h3',
+  'heading.h4',
+  'heading.h5',
+  'heading.h6',
+  'body.lg.regular',
+  'body.lg.semibold',
+  'body.lg.underline',
+  'body.md.regular',
+  'body.md.semibold',
+  'body.sm.regular',
+  'body.sm.semibold',
+  'code.lg',
+  'code.md',
+] as const;
+
+export type TokenStrings = (typeof TOKEN_STRINGS)[number];

package/src/utils/utils.ts

@@ -36,3 +36,17 @@ export function useDebounce<T>(value: T, delay?: number): T {
 
   return debouncedValue;
 }
+
+export function isObject(value: any): boolean {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function getTokenValue(tokenString: string, tokenObject: any) {
+  let returnValue = {};
+  try {
+    returnValue = tokenString.split('.').reduce((o, i) => o[i], tokenObject);
+  } catch (e) {
+    returnValue = {};
+  }
+  return isObject(returnValue) ? returnValue : {};
+}

package/src/Foundations/Colors/CommonTokens.tsx

@@ -1,21 +0,0 @@
-import { semanticTokens } from '../../tokens/tokens';
-import Card from '../../Components/Card/Card';
-import Text from '../../Components/Text/Text';
-import TokenTable from '../docComponents/TokenTable';
-
-const commonColorKeys = ['background', 'border', 'icon', 'text'];
-
-const CommonTokens = () => (
-  <>
-    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
-      Common Tokens
-    </Text>
-    <Card boxShadow="medium" padding="24">
-      {commonColorKeys.map((groupName) => (
-        <TokenTable key={groupName} data={semanticTokens.colors[groupName]} groupName={groupName} marginBottom="24" />
-      ))}
-    </Card>
-  </>
-);
-
-export default CommonTokens;

package/src/Foundations/Colors/SystemTokens.tsx

@@ -1,27 +0,0 @@
-import { semanticTokens } from '../../tokens/tokens';
-import Card from '../../Components/Card/Card';
-import Text from '../../Components/Text/Text';
-import TokenTable from '../docComponents/TokenTable';
-
-const systemColorKeys = Object.keys(semanticTokens.colors.sys);
-
-const SystemTokens = () => (
-  <>
-    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
-      System Tokens
-    </Text>
-    <Card boxShadow="medium" padding="24">
-      {systemColorKeys.map((groupName) => (
-        <TokenTable
-          key={groupName}
-          data={semanticTokens.colors.sys[groupName]}
-          groupName={groupName}
-          marginBottom="24"
-          tokenPrefix="sys."
-        />
-      ))}
-    </Card>
-  </>
-);
-
-export default SystemTokens;

package/src/Foundations/Typography/Typography.ts

@@ -1,69 +0,0 @@
-const typography = {
-  fonts: {
-    body: `"TT Norms Pro", sans-serif`,
-    mono: `"Source Code Pro Bitrise", monospace`,
-  },
-  fontSizes: {
-    '1': '0.6875rem',
-    '2': '0.875rem',
-    '3': '1rem',
-    '4': '1.1875rem',
-    '5': '1.5rem',
-    '6': '1.875rem',
-    '7': '2.25rem',
-    '8': '3rem',
-  },
-  fontWeights: {
-    bold: 700,
-    demiBold: 600,
-    normal: 400,
-  },
-  letterSpacings: {
-    '1': '0.00625rem',
-    '2': '0.009375rem',
-    '3': '0.0175rem',
-    '4': '0.0375rem',
-    '5': '0.05rem',
-  },
-};
-
-export const textSizes = {
-  sizes: {
-    '1': {
-      fontSize: '1',
-      lineHeight: '1rem',
-    },
-    '2': {
-      fontSize: '2',
-      lineHeight: '1.25rem',
-    },
-    '3': {
-      fontSize: '3',
-      lineHeight: '1.5rem',
-    },
-    '4': {
-      fontSize: '4',
-      lineHeight: '1.75rem',
-    },
-    '5': {
-      fontSize: '5',
-      lineHeight: '2.25rem',
-    },
-    '6': {
-      fontSize: '6',
-      lineHeight: '2.5rem',
-    },
-    '7': {
-      fontSize: '7',
-      lineHeight: '3rem',
-    },
-    '8': {
-      fontSize: '8',
-      lineHeight: '3.75rem',
-    },
-  },
-};
-
-export type TextSizes = keyof typeof textSizes.sizes;
-
-export default typography;