@autofleet/theme 0.0.1 → 0.1.1

package/.nvmrc

@@ -0,0 +1 @@
+22.9.0

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@autofleet/theme",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "type": "module",
   "main": "./src/index.js",
-  "typings": "./src/index.d.ts",
-  "module": "./src/index.js"
+  "typings": "./src/index.d.ts"
 }

package/project.json

@@ -0,0 +1,40 @@
+{
+  "name": "theme",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "version": "0",
+  "sourceRoot": "packages/theme/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/theme",
+        "main": "packages/theme/src/index.ts",
+        "tsConfig": "packages/theme/tsconfig.lib.json",
+        "assets": ["packages/theme/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "../../coverage/packages/theme"
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/theme",
+        "commands": ["npx tsc -p tsconfig.lib.json --noEmit"],
+        "forwardAllArgs": false,
+        "description": "Type check with tsc"
+      }
+    }
+  },
+  
+  "tags": []
+}

package/src/colors/atomic-colors.ts

@@ -0,0 +1,169 @@
+import { type RGBColor, adjustBrightness } from '../colors-utils';
+
+export const ATOMIC_COLORS = {
+  // neutral colors
+  'n-00': 'rgba(255, 255, 255, 1)',
+  'n-01': 'rgba(244, 245, 248, 1)',
+  'n-02': 'rgba(173, 174, 186, 1)',
+  'n-03': 'rgba(102, 105, 117, 1)',
+  'n-04': 'rgba(52, 55, 64, 1)',
+  'n-05': 'rgba(33, 34, 41, 1)',
+  'n-opa-10': 'rgba(124, 134, 163, 0.1)',
+  'n-opa-16': 'rgba(124, 134, 163, 0.16)',
+  'n-opa-24': 'rgba(124, 134, 163, 0.24)',
+  'n-opa-32': 'rgba(125, 139, 172, 0.32)',
+  'n-00-opa-32': 'rgba(255, 255, 255, 0.32)',
+
+  // brand colors
+  brand: 'rgba(17, 164, 255, 1)',
+  'brand-hover': 'rgba(0, 132, 214, 1)',
+  'brand-opa-10': 'rgba(17, 164, 255, 0.1)',
+  'brand-opa-16': 'rgba(17, 164, 255, 0.16)',
+  'brand-opa-24': 'rgba(17, 164, 255, 0.24)',
+  'brand-opa-32': 'rgba(17, 164, 255, 0.32)',
+
+  // blue colors
+  'b-01': 'rgba(231, 246, 255, 1)',
+  'b-02': 'rgba(17, 164, 255, 1)',
+  'b-03': 'rgba(0, 132, 214, 1)',
+  'b-04': 'rgba(30, 55, 75, 1)',
+  'b-05': 'rgba(66, 183, 255, 1)',
+  'b-06': 'rgba(0, 75, 122, 1)',
+  'b-07': 'rgba(158, 218, 255, 1)',
+  'b-opa-10': 'rgba(17, 164, 255, 0.1)',
+  'b-opa-16': 'rgba(17, 164, 255, 0.16)',
+  'b-opa-24': 'rgba(17, 164, 255, 0.24)',
+  'b-opa-32': 'rgba(17, 164, 255, 0.32)',
+
+  // green colors
+  'g-01': 'rgba(233, 248, 239, 1)',
+  'g-02': 'rgba(37, 184, 97, 1)',
+  'g-03': 'rgba(28, 140, 74, 1)',
+  'g-04': 'rgba(34, 58, 50, 1)',
+  'g-05': 'rgba(55, 215, 120, 1)',
+  'g-06': 'rgba(17, 85, 44, 1)',
+  'g-07': 'rgba(136, 231, 174, 1)',
+  'g-opa-10': 'rgba(37, 184, 97, 0.1)',
+  'g-opa-16': 'rgba(37, 184, 97, 0.16)',
+  'g-opa-24': 'rgba(37, 184, 97, 0.24)',
+  'g-opa-32': 'rgba(37, 184, 97, 0.32)',
+
+  // yellow colors
+  'y-01': 'rgba(254, 246, 231, 1)',
+  'y-02': 'rgba(244, 156, 0, 1)',
+  'y-03': 'rgba(214, 138, 5, 1)',
+  'y-04': 'rgba(68, 55, 37, 1)',
+  'y-05': 'rgba(251, 185, 70, 1)',
+  'y-06': 'rgba(107, 68, 0, 1)',
+  'y-07': 'rgba(255, 210, 133, 1)',
+  'y-opa-10': 'rgba(244, 156, 0, 0.1)',
+  'y-opa-16': 'rgba(244, 156, 0, 0.16)',
+  'y-opa-24': 'rgba(244, 156, 0, 0.24)',
+  'y-opa-32': 'rgba(244, 156, 0, 0.32)',
+
+  // red colors
+  'r-01': 'rgba(254, 235, 236, 1)',
+  'r-02': 'rgba(248, 55, 67, 1)',
+  'r-03': 'rgba(197, 7, 19, 1)',
+  'r-04': 'rgba(67, 37, 45, 1)',
+  'r-05': 'rgba(249, 103, 112, 1)',
+  'r-06': 'rgba(137, 6, 14, 1)',
+  'r-07': 'rgba(248, 180, 186, 1)',
+  'r-opa-10': 'rgba(248, 55, 67, 0.1)',
+  'r-opa-16': 'rgba(248, 55, 67, 0.16)',
+  'r-opa-24': 'rgba(248, 55, 67, 0.24)',
+  'r-opa-32': 'rgba(248, 55, 67, 0.32)',
+
+  // purple colors
+  'pu-02': 'rgba(143, 101, 255, 1)',
+  'pu-06': 'rgba(58, 0, 219, 1)',
+  'pu-07': 'rgba(209, 194, 255, 1)',
+  'pu-opa-10': 'rgba(143, 101, 255, 0.1)',
+  'pu-opa-16': 'rgba(143, 101, 255, 0.16)',
+  'pu-opa-24': 'rgba(143, 101, 255, 0.24)',
+
+  // orange colors
+  'or-02': 'rgba(255, 116, 87, 1)',
+  'or-06': 'rgba(143, 24, 0, 1)',
+  'or-07': 'rgba(255, 198, 189, 1)',
+  'or-opa-10': 'rgba(255, 117, 87, 0.1)',
+  'or-opa-16': 'rgba(255, 117, 87, 0.16)',
+  'or-opa-24': 'rgba(255, 117, 87, 0.24)',
+
+  // turquoise colors
+  'tu-02': 'rgba(0, 198, 181, 1)',
+  'tu-06': 'rgba(0, 82, 72, 1)',
+  'tu-07': 'rgba(0, 245, 224, 1)',
+  'tu-opa-10': 'rgba(0, 198, 181, 0.1)',
+  'tu-opa-16': 'rgba(0, 198, 181, 0.16)',
+  'tu-opa-24': 'rgba(0, 198, 181, 0.24)',
+
+  // pink colors
+  'pi-02': 'rgba(255, 85, 138, 1)',
+  'pi-06': 'rgba(143, 0, 45, 1)',
+  'pi-07': 'rgba(255, 189, 210, 1)',
+  'pi-opa-10': 'rgba(255, 85, 138, 0.1)',
+  'pi-opa-16': 'rgba(255, 85, 138, 0.16)',
+  'pi-opa-24': 'rgba(255, 85, 138, 0.24)',
+
+  // ultramarine colors
+  'ul-02': 'rgba(84, 119, 255, 1)',
+  'ul-06': 'rgba(0, 41, 204, 1)',
+  'ul-07': 'rgba(184, 198, 255, 1)',
+  'ul-opa-10': 'rgba(84, 119, 255, 0.1)',
+  'ul-opa-16': 'rgba(84, 119, 255, 0.16)',
+  'ul-opa-24': 'rgba(84, 119, 255, 0.24)',
+
+  // peach colors
+  'pe-02': 'rgba(255, 147, 69, 1)',
+  'pe-06': 'rgba(128, 53, 0, 1)',
+  'pe-07': 'rgba(255, 209, 179, 1)',
+  'pe-opa-10': 'rgba(255, 147, 69, 0.1)',
+  'pe-opa-16': 'rgba(255, 147, 69, 0.16)',
+  'pe-opa-24': 'rgba(255, 147, 69, 0.24)',
+
+  // apple colors
+  'ap-02': 'rgba(127, 185, 81, 1)',
+  'ap-06': 'rgba(54, 81, 31, 1)',
+  'ap-07': 'rgba(198, 225, 173, 1)',
+  'ap-opa-10': 'rgba(127, 185, 81, 0.1)',
+  'ap-opa-16': 'rgba(127, 185, 81, 0.16)',
+  'ap-opa-24': 'rgba(127, 185, 81, 0.24)',
+
+  // bubblegum colors
+  'bu-02': 'rgba(238, 91, 197, 1)',
+  'bu-06': 'rgba(135, 13, 100, 1)',
+  'bu-07': 'rgba(249, 190, 234, 1)',
+  'bu-opa-10': 'rgba(238, 91, 197, 0.1)',
+  'bu-opa-16': 'rgba(238, 91, 197, 0.16)',
+  'bu-opa-24': 'rgba(238, 91, 197, 0.24)',
+
+  // ocher colors
+  'oc-02': 'rgba(251, 171, 0, 1)',
+  'oc-06': 'rgba(102, 70, 0, 1)',
+  'oc-07': 'rgba(255, 218, 138, 1)',
+  'oc-opa-10': 'rgba(251, 171, 0, 0.1)',
+  'oc-opa-16': 'rgba(251, 171, 0, 0.16)',
+  'oc-opa-24': 'rgba(251, 171, 0, 0.24)',
+
+  // bluberry colors
+  'br-02': 'rgba(101, 98, 255, 1)',
+  'br-06': 'rgba(4, 0, 230, 1)',
+  'br-07': 'rgba(95, 194, 255, 1)',
+  'br-opa-10': 'rgba(101, 98, 255, 0.1)',
+  'br-opa-16': 'rgba(101, 98, 255, 0.16)',
+  'br-opa-24': 'rgba(101, 98, 255, 0.24)',
+};
+
+const generateRgbaColor = ({ red, green, blue }: RGBColor, alpha: number) =>
+  `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+export const generateBrandColors = (rgb: RGBColor) => ({
+  brand: generateRgbaColor(rgb, 1),
+  'brand-hover': `rgba(${adjustBrightness(
+    `${rgb.red}, ${rgb.green}, ${rgb.blue}`
+  )}, 1)`,
+  'brand-opa-10': generateRgbaColor(rgb, 0.1),
+  'brand-opa-16': generateRgbaColor(rgb, 0.16),
+  'brand-opa-24': generateRgbaColor(rgb, 0.24),
+  'brand-opa-32': generateRgbaColor(rgb, 0.32),
+});

package/src/colors/index.ts

@@ -0,0 +1,31 @@
+import type { RGBColor } from '../colors-utils';
+import type { LABEL_OPTIONS } from '../const';
+import { ATOMIC_COLORS, generateBrandColors } from './atomic-colors';
+import { COLOR_TOKEN_MAP } from './tokens/color-token-mapping';
+
+export interface ThemeColorOptions {
+  lightMode: 'dark' | 'light';
+  label: (typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS];
+  primaryColor?: RGBColor;
+}
+
+export type ColorTokenResponse = {
+  [type in keyof typeof COLOR_TOKEN_MAP]: string;
+};
+
+export const generateColorsForTheme = (
+  themeOptions: ThemeColorOptions
+): ColorTokenResponse => {
+  const { lightMode, label, primaryColor } = themeOptions;
+  const atomicColorsWithBrand = {
+    ...ATOMIC_COLORS,
+    ...(primaryColor ? generateBrandColors(primaryColor) : {}),
+  };
+  return Object.fromEntries(
+    Object.entries(COLOR_TOKEN_MAP).map(([key, value]) => {
+      const relevantAtomicColor = value[label][lightMode];
+      const rawRgbValue = atomicColorsWithBrand[relevantAtomicColor];
+      return [key, rawRgbValue];
+    })
+  ) as ColorTokenResponse;
+};