@autofleet/theme 0.1.0 → 0.1.1

package/src/colors/tokens/color-tokens.ts

@@ -0,0 +1,110 @@
+export const COLOR_TOKENS = [
+  'bg-primary',
+  'bg-secondary',
+  'bg-info',
+  'bg-success',
+  'bg-warning',
+  'bg-error',
+  'divider-neutral',
+  'divider-invert',
+  'divider-brand',
+  'divider-info',
+  'divider-success',
+  'divider-warning',
+  'divider-error',
+  'primary-btn',
+  'primary-btn-hover',
+  'primary-btn-opa-01',
+  'primary-btn-opa-02',
+  'other',
+  'other-hover',
+  'other-opa-01',
+  'other-opa-02',
+  'other-text',
+  'neutral',
+  'neutral-dark',
+  'neutral-text',
+  'neutral-charcoal',
+  'neutral-light',
+  'neutral-invert',
+  'neutral-opa-01',
+  'neutral-opa-02',
+  'info-hover',
+  'info',
+  'info-opa-01',
+  'info-opa-02',
+  'info-text',
+  'success-hover',
+  'success',
+  'success-opa-01',
+  'success-opa-02',
+  'success-text',
+  'warning-hover',
+  'warning',
+  'warning-opa-01',
+  'warning-opa-02',
+  'warning-text',
+  'error-hover',
+  'error',
+  'error-opa-01',
+  'error-opa-02',
+  'error-text',
+  'purple',
+  'purple-opa-01',
+  'purple-opa-02',
+  'purple-text',
+  'orange',
+  'orange-opa-01',
+  'orange-opa-02',
+  'orange-text',
+  'turquoise',
+  'turquoise-opa-01',
+  'turquoise-opa-02',
+  'turquoise-text',
+  'pink',
+  'pink-opa-01',
+  'pink-opa-02',
+  'pink-text',
+  'ultramarine',
+  'ultramarine-opa-01',
+  'ultramarine-opa-02',
+  'ultramarine-text',
+  'peach',
+  'peach-opa-01',
+  'peach-opa-02',
+  'peach-text',
+  'apple',
+  'apple-opa-01',
+  'apple-opa-02',
+  'apple-text',
+  'bubblegum',
+  'bubblegum-opa-01',
+  'bubblegum-opa-02',
+  'bubblegum-text',
+  'ocher',
+  'ocher-opa-01',
+  'ocher-opa-02',
+  'ocher-text',
+  'blueberry',
+  'blueberry-opa-01',
+  'blueberry-opa-02',
+  'blueberry-text',
+] as const;
+
+type NoDash<T> = T extends `${string}-${string}` ? never : T;
+type WithText<T> = T extends `${infer P}-text` ? P : never;
+type COLOR_TOKEN = (typeof COLOR_TOKENS)[number];
+/**
+ * Colors that are used as primary colors in the design system.
+ */
+export type MAIN_COLOR_TOKEN = NoDash<COLOR_TOKEN>; // | PrefixNoDash<COLOR_TOKEN>;
+/**
+ * {@link MAIN_COLOR_TOKEN} with text colors only. TODO: Maintain this list manually.
+ */
+export type MAIN_COLOR_TOKEN_WITH_TEXT = WithText<COLOR_TOKEN>;
+/**
+ * The main colors in the design system, i.e colors that are not shades or opacities.
+ */
+export const mainColorTokens = COLOR_TOKENS.filter(
+  (token: COLOR_TOKEN): token is NoDash<COLOR_TOKEN> => !token.includes('-')
+);

package/src/colors-utils.ts

@@ -0,0 +1,196 @@
+const RGBToHSL = (color: string) => {
+  const colorArray = color.split(',').map((c) => parseInt(c, 10));
+  const r = colorArray[0] / 255;
+  const g = colorArray[1] / 255;
+  const b = colorArray[2] / 255;
+  const l = Math.max(r, g, b);
+  const s = l - Math.min(r, g, b);
+  const h = s
+    ? l === r
+      ? (g - b) / s
+      : l === g
+        ? 2 + (b - r) / s
+        : 4 + (r - g) / s
+    : 0;
+  return [
+    60 * h < 0 ? 60 * h + 360 : 60 * h,
+    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
+    (100 * (2 * l - s)) / 2,
+  ];
+};
+
+const HSLToRGB = (h: number, s: number, l: number) => {
+  const saturationValue = s / 100;
+  const lightnessValue = l / 100;
+  const calculateKValue = (n: number) => (n + h / 30) % 12;
+  const calculateAValue =
+    saturationValue * Math.min(lightnessValue, 1 - lightnessValue);
+  const calculateFValue = (n: number) =>
+    lightnessValue -
+    calculateAValue *
+    Math.max(
+      -1,
+      Math.min(calculateKValue(n) - 3, Math.min(9 - calculateKValue(n), 1))
+    );
+  const red = 255 * calculateFValue(0);
+  const green = 255 * calculateFValue(8);
+  const blue = 255 * calculateFValue(4);
+  return [red, green, blue];
+};
+
+export const adjustBrightness = (color: string) => {
+  const hsl = RGBToHSL(color);
+
+  // Adjust the lightness value
+  const adjustedL = hsl[2] + (hsl[2] * -24) / 100;
+
+  const [r, g, b] = HSLToRGB(hsl[0], hsl[1], adjustedL);
+  return `${r}, ${g}, ${b}`;
+};
+
+type ColorVariant = Record<string, string>;
+
+interface IColorVariants {
+  [key: string]: string | ColorVariant;
+  infoColor: string;
+  infoColorHover: string;
+  infoColorOpacityWeak: string;
+  infoColorOpacityStrong: string;
+  infoHoverComponentBgColor: string;
+  errorColor: string;
+  errorColorHover: string;
+  errorColorOpacityWeak: string;
+  errorColorOpacityStrong: string;
+  errorHoverComponentBgColor: string;
+  successColor: string;
+  successColorHover: string;
+  successColorOpacityWeak: string;
+  successColorOpacityStrong: string;
+  successHoverComponentBgColor: string;
+  warningColor: string;
+  warningColorHover: string;
+  warningColorOpacityWeak: string;
+  warningColorOpacityStrong: string;
+  warningHoverComponentBgColor: string;
+  primaryColor: string;
+  primaryColorHover: string;
+  primaryColorOpacityWeak: string;
+  primaryColorOpacityStrong: string;
+  primaryHoverComponentBgColor: string;
+  primaryBackgroundText: string;
+  primaryBackgroundHoverText: string;
+  primaryTextColor: string;
+  secondaryTextColor: string;
+  disabledTextColor: string;
+  placeholderTextColor: string;
+  primaryBackgroundColor: string;
+  secondaryBackgroundColor: string;
+  dividerColor: string;
+  secondaryButtonsHoverColor: string;
+}
+
+const HOVER_COMPONENT_BG_COLORS: Record<string, Record<string, string>> = {
+  info: {
+    light: 'rgba(231, 246, 255, 1)',
+    dark: 'rgba(30, 55, 75, 1)',
+  },
+  error: {
+    light: 'rgba(254, 235, 236, 1)',
+    dark: 'rgba(67, 37, 45, 1)',
+  },
+  success: {
+    light: 'rgba(233, 248, 239, 1)',
+    dark: 'rgba(34, 58, 50, 1)',
+  },
+  warning: {
+    light: 'rgba(254, 246, 231, 1)',
+    dark: 'rgba(68, 55, 37, 1)',
+  },
+  primary: {
+    light: 'rgba(231, 246, 255, 1)',
+    dark: 'rgba(30, 55, 75, 1)',
+  },
+};
+
+const createColorVariants = (
+  name: string,
+  color: string,
+  type: 'light' | 'dark'
+) => ({
+  [`${name}Color`]: `rgba(${color}, 1)`,
+  [`${name}ColorHover`]: `rgba(${adjustBrightness(color)}, 1)`,
+  [`${name}ColorOpacityWeak`]: `rgba(${color}, 0.32)`,
+  [`${name}ColorOpacityStrong`]: `rgba(${color}, ${type === 'light' ? 0.1 : 0.16
+  })`,
+  [`${name}HoverComponentBgColor`]: HOVER_COMPONENT_BG_COLORS[name][type],
+});
+
+const COLORS = [
+  ['info', '17, 164, 255'],
+  ['error', '248, 55, 67'],
+  ['success', '37, 184, 97'],
+  ['warning', '250, 166, 19'],
+];
+
+const getTextContrastColor = (rgb: string) => {
+  // Calculate the relative luminance of the background color
+  const [r, g, b] = rgb.split(',').map((c: string) => parseInt(c, 10));
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+
+  // Set the text color based on the contrast ratio
+  const textColor = luminance > 0.6 ? '#000000' : '#FFFFFF';
+
+  return textColor;
+};
+
+export const COLORS_DARK_MODE_HANDLED = {
+  primaryTextColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(244, 245, 248, 1)' : 'rgba(33, 34, 41, 1)',
+  secondaryTextColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(173, 174, 186, 1)' : 'rgba(102, 105, 117, 1)',
+  disabledTextColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(102, 105, 117, 1)' : 'rgba(173, 174, 186, 1)',
+  placeholderTextColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(102, 105, 117, 1)' : 'rgba(173, 174, 186, 1)',
+  primaryBackgroundColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(33, 34, 41, 1)' : 'rgba(255, 255, 255, 1)',
+  secondaryBackgroundColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(43, 45, 51, 1)' : 'rgba(244, 245, 248, 1)',
+  dividerColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(125, 139, 172, 0.32)' : 'rgba(125, 139, 172, 0.24)',
+  secondaryButtonsHoverColor: (isDarkMode: boolean): string =>
+    isDarkMode ? 'rgba(124, 134, 163, 0.16)' : 'rgba(124, 134, 163, 0.1)',
+};
+
+const buildColorsObject = (type: 'light' | 'dark') =>
+  Object.fromEntries(
+    Object.entries(COLORS_DARK_MODE_HANDLED).map(
+      ([colorKey, colorFunction]) => [colorKey, colorFunction(type === 'dark')]
+    )
+  );
+
+export const getColorVariants = (
+  givenPrimary: string,
+  type: 'light' | 'dark'
+): IColorVariants => {
+  const variants: Partial<IColorVariants> = [
+    ...COLORS,
+    ['primary', givenPrimary],
+  ]
+    .map(([name, color]) => createColorVariants(name, color, type))
+    .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+  return {
+    ...variants,
+    primaryBackgroundText: getTextContrastColor(givenPrimary),
+    primaryBackgroundHoverText: getTextContrastColor(
+      adjustBrightness(givenPrimary)
+    ),
+    ...buildColorsObject(type),
+  } as IColorVariants;
+};
+
+export interface RGBColor {
+  red: number;
+  green: number;
+  blue: number;
+}

package/src/const.ts

@@ -0,0 +1,4 @@
+export const LABEL_OPTIONS = {
+  AUTOFLEET: 'autofleet',
+  WHITE_LABELED: 'whiteLabel',
+} as const;

package/src/fonts/atomic-fonts.ts

@@ -0,0 +1,102 @@
+interface IFontFormat<
+  TSize extends string,
+  TStyle extends string,
+  TWeight extends string,
+  TLineHeight extends string,
+  TFamily extends string = string
+> {
+  family?: TFamily;
+  size: TSize;
+  style: TStyle;
+  weight: TWeight;
+  lineHeight: TLineHeight;
+}
+
+const buildAtomicFontCss = <
+  TSize extends string,
+  TStyle extends string,
+  TWeight extends string,
+  TLineHeight extends string,
+  TFamily extends string = 'Montserrat, sans-serif !important'
+>({
+    size,
+    style,
+    weight,
+    lineHeight,
+    family = 'Montserrat, sans-serif !important' as TFamily,
+  }: IFontFormat<TSize, TStyle, TWeight, TLineHeight, TFamily>) =>
+  `
+    font-family: ${family};
+    font-size: ${size};
+    font-style: ${style};
+    font-weight: ${weight};
+    line-height: ${lineHeight};` as const;
+
+export const ATOMIC_FONTS = {
+  'typo-11': buildAtomicFontCss({
+    size: '48px',
+    style: 'normal',
+    weight: '700',
+    lineHeight: '60px',
+  }),
+  'typo-10': buildAtomicFontCss({
+    size: '24px',
+    style: 'normal',
+    weight: '700',
+    lineHeight: '60px',
+  }),
+  'typo-9': buildAtomicFontCss({
+    size: '24px',
+    style: 'normal',
+    weight: '400',
+    lineHeight: '30px',
+  }),
+  'typo-8': buildAtomicFontCss({
+    size: '20px',
+    style: 'normal',
+    weight: '700',
+    lineHeight: '26px',
+  }),
+  'typo-7': buildAtomicFontCss({
+    size: '18px',
+    style: 'normal',
+    weight: '700',
+    lineHeight: '24px',
+  }),
+  'typo-6': buildAtomicFontCss({
+    size: '16px',
+    style: 'normal',
+    weight: '500',
+    lineHeight: '24px',
+  }),
+  'typo-5': buildAtomicFontCss({
+    size: '16px',
+    style: 'normal',
+    weight: '700',
+    lineHeight: '24px',
+  }),
+  'typo-4': buildAtomicFontCss({
+    size: '14px',
+    style: 'normal',
+    weight: '500',
+    lineHeight: '20px',
+  }),
+  'typo-3': buildAtomicFontCss({
+    size: '14px',
+    style: 'normal',
+    weight: '700',
+    lineHeight: '20px',
+  }),
+  'typo-2': buildAtomicFontCss({
+    size: '12px',
+    style: 'normal',
+    weight: '700',
+    lineHeight: '16px',
+  }),
+  'typo-1': buildAtomicFontCss({
+    size: '12px',
+    style: 'normal',
+    weight: '500',
+    lineHeight: '16px',
+  }),
+};

package/src/fonts/index.ts

@@ -0,0 +1,22 @@
+import { ATOMIC_FONTS } from './atomic-fonts';
+
+export const getThemeFonts = () => ({
+  desktop: {
+    largeTitle: ATOMIC_FONTS['typo-11'],
+    mediumTitle: ATOMIC_FONTS['typo-10'],
+    placeHolderTitleInput: ATOMIC_FONTS['typo-9'],
+    smallTitle: ATOMIC_FONTS['typo-7'],
+    fine: ATOMIC_FONTS['typo-1'],
+    fineStrong: ATOMIC_FONTS['typo-2'],
+    bodyStrong: ATOMIC_FONTS['typo-3'],
+    body: ATOMIC_FONTS['typo-4'],
+  },
+  mobile: {
+    bodyStrong: ATOMIC_FONTS['typo-5'],
+    body: ATOMIC_FONTS['typo-6'],
+    smallTitle: ATOMIC_FONTS['typo-8'],
+    largeTitle: ATOMIC_FONTS['typo-10'],
+    fineStrong: ATOMIC_FONTS['typo-3'],
+    fine: ATOMIC_FONTS['typo-4'],
+  },
+});

package/src/index.ts

@@ -0,0 +1,38 @@
+import type { RGBColor } from './colors-utils';
+import { generateColorsForTheme } from './colors';
+import { LABEL_OPTIONS } from './const';
+import { getThemeFonts } from './fonts';
+import { getThemeShadows } from './shadow';
+import { getThemeSpacings } from './spacing';
+
+interface IThemeProps {
+  isDarkMode: boolean;
+  label?: (typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS] | undefined;
+  primaryColor?: RGBColor;
+}
+
+export const loadThemeStyles = ({
+  isDarkMode,
+  label = LABEL_OPTIONS.AUTOFLEET,
+  primaryColor,
+}: IThemeProps) => {
+  const colors = generateColorsForTheme({
+    lightMode: isDarkMode ? 'dark' : 'light',
+    label,
+    primaryColor,
+  });
+  return {
+    ...getThemeSpacings(),
+    colors,
+    fonts: getThemeFonts(),
+    shadows: getThemeShadows(colors),
+  };
+};
+
+type IThemeStyle = ReturnType<typeof loadThemeStyles>;
+export interface ITheme {
+  theme: IThemeStyle;
+}
+
+export * from './colors-utils';
+export * from './colors/tokens/color-tokens';

package/src/shadow/{index.js → index.ts}

@@ -1,14 +1,36 @@
+import type { ColorTokenResponse } from '../colors';
 import { SPACING } from '../spacing/spacing';
-const changeColorAlpha = (color, newAlpha) => {
-    if (!color.startsWith('rgba('))
-        return color;
-    return color.replace(/(rgba\(\d{1,3},\s?\d{1,3},\s?\d{1,3}(?:,|\s?\/)\s?)((?:\d\.)?\d)(\))/, `$1${newAlpha}$3`);
+
+const changeColorAlpha = (color: string, newAlpha: number) => {
+  if (!color.startsWith('rgba(')) return color;
+  return color.replace(
+    /(rgba\(\d{1,3},\s?\d{1,3},\s?\d{1,3}(?:,|\s?\/)\s?)((?:\d\.)?\d)(\))/,
+    `$1${newAlpha}$3`
+  );
 };
-const getLowShadow = (color, opacity = 12) => `${SPACING.NONE} ${SPACING.XS} ${SPACING.SM} ${changeColorAlpha(color, opacity / 100)}`;
-const getMedShadow = (color, opacity = 12) => `${SPACING.NONE} ${SPACING.SM} ${SPACING.LG} ${changeColorAlpha(color, opacity / 100)}`;
-const getHighShadow = (color, opacity = 16) => `${SPACING.NONE} ${SPACING.LG} ${SPACING['5XL']} ${changeColorAlpha(color, opacity / 100)}`;
-export const getThemeShadows = (colors) => ({
-    'shadow-map-element': `${SPACING.NONE} 3px ${SPACING.LG} ${changeColorAlpha(colors['neutral-dark'], 0.32)}`,
+
+const getLowShadow = (color: string, opacity = 12) =>
+  `${SPACING.NONE} ${SPACING.XS} ${SPACING.SM} ${changeColorAlpha(
+    color,
+    opacity / 100
+  )}` as const;
+const getMedShadow = (color: string, opacity = 12) =>
+  `${SPACING.NONE} ${SPACING.SM} ${SPACING.LG} ${changeColorAlpha(
+    color,
+    opacity / 100
+  )}` as const;
+const getHighShadow = (color: string, opacity = 16) =>
+  `${SPACING.NONE} ${SPACING.LG} ${SPACING['5XL']} ${changeColorAlpha(
+    color,
+    opacity / 100
+  )}` as const;
+
+export const getThemeShadows = (colors: ColorTokenResponse) =>
+  ({
+    'shadow-map-element': `${SPACING.NONE} 3px ${SPACING.LG} ${changeColorAlpha(
+      colors['neutral-dark'],
+      0.32
+    )}` as const,
     // Neutral
     'shadow-neutral-low': getLowShadow(colors['neutral-dark'], 8),
     'shadow-neutral-medium': getMedShadow(colors['neutral-dark'], 8),
@@ -29,5 +51,4 @@ export const getThemeShadows = (colors) => ({
     'shadow-error-low': getLowShadow(colors.error),
     'shadow-error-medium': getMedShadow(colors.error),
     'shadow-error-high': getHighShadow(colors.error),
-});
-//# sourceMappingURL=index.js.map
+  } as const);

package/src/spacing/border-radius.ts

@@ -0,0 +1,8 @@
+export const BORDER_RADIUS = {
+  NONE: '0px',
+  XS: '2px',
+  SM: '4px',
+  MD: '6px',
+  LG: '8px',
+  XL: '16px',
+} as const;

package/src/spacing/{index.js → index.ts}

@@ -1,7 +1,7 @@
 import { BORDER_RADIUS } from './border-radius';
 import { SPACING } from './spacing';
+
 export const getThemeSpacings = () => ({
-    borderRadius: BORDER_RADIUS,
-    spacings: SPACING,
+  borderRadius: BORDER_RADIUS,
+  spacings: SPACING,
 });
-//# sourceMappingURL=index.js.map

package/src/spacing/spacing.ts

@@ -0,0 +1,15 @@
+export const SPACING = {
+  NONE: '0px',
+  XS: '2px',
+  SM: '4px',
+  MD: '6px',
+  LG: '8px',
+  XL: '12px',
+  '2XL': '16px',
+  '3XL': '24px',
+  '4XL': '32px',
+  '5XL': '40px',
+  '6XL': '48px',
+  '7XL': '56px',
+  '8XL': '64px',
+} as const;

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2020",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["vite.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/importMeta", "vite/client", "node", "vitest"]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/theme',
+  plugins: [nxViteTsPaths()],
+  test: {
+    cache: { dir: '../../node_modules/.vitest' },
+    coverage: {
+      reportsDirectory: '../../coverage/libs/theme',
+      provider: 'v8',
+      reporter: 'text',
+    },
+  },
+});