@autofleet/theme 0.1.1 → 0.1.2

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

@@ -1,110 +0,0 @@
-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

@@ -1,196 +0,0 @@
-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

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

package/src/fonts/atomic-fonts.ts

@@ -1,102 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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/spacing/border-radius.ts

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

package/src/spacing/spacing.ts

@@ -1,15 +0,0 @@
-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

@@ -1,22 +0,0 @@
-{
-  "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

@@ -1,10 +0,0 @@
-{
-  "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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,15 +0,0 @@
-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',
-    },
-  },
-});