@akinon/ui-theme 0.1.0 → 0.2.0

package/dist/theme.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCssVariables = exports.useToken = exports.theme = exports.fontSize = void 0;
+const antd_1 = require("antd");
+const colors_1 = require("./colors");
+// antd works with numbers. use this to convert px to rem.
+exports.fontSize = 16;
+const colors = {
+    akinon: colors_1.akinon,
+    azure: colors_1.azure,
+    orange: colors_1.orange,
+    red: colors_1.red,
+    green: colors_1.green,
+    purple: colors_1.purple,
+    gray: colors_1.gray,
+    ebonyClay: colors_1.ebonyClay,
+    neutral: colors_1.neutral
+};
+/**
+ * Non-editable akinon theme object.
+ * This object contains both our theme values and
+ * antd's default theme values.
+ *
+ * You can use https://ant.design/theme-editor tool
+ * to learn about properties and their effects.
+ */
+exports.theme = {
+    // We use dark algorithm from antd by default,
+    // since our applications are dark themed.
+    algorithm: antd_1.theme.darkAlgorithm,
+    colors,
+    // We also need to override antd styles with
+    // our current color palette.
+    token: {
+        colorTextBase: colors.neutral['100'],
+        colorText: colors.neutral['100'],
+        colorTextSecondary: colors.gray['500'],
+        colorTextPlaceholder: colors.gray['500'],
+        colorPrimary: colors.azure['500'],
+        colorError: colors.red['500'],
+        colorBgLayout: colors.ebonyClay['500'], // effects layout bg
+        colorBgContainer: colors.ebonyClay['600'], // effects card bg, table bg, input bg
+        colorBgElevated: colors.ebonyClay['400'], // effects dropdown bg, select bg, notification bg
+        controlItemBgHover: colors.ebonyClay['200'], // effects item bg in dropdown item when hovered
+        controlItemBgActive: colors.ebonyClay['300'], // effects active item bg such in dropdown item
+        controlItemBgActiveHover: colors.ebonyClay['300'], // effects active item bg such in dropdown item when hovered
+        colorBgSpotlight: colors.ebonyClay['600'], //TODO: bg color of tooltip?
+        colorBorder: colors.ebonyClay['700'],
+        fontFamily: "'Jost Variable'," + antd_1.theme.getDesignToken().fontFamily,
+        fontSize: exports.fontSize * 0.875
+    },
+    components: {
+        Layout: {
+            headerBg: colors.ebonyClay['500'],
+            siderBg: colors.ebonyClay['500']
+        },
+        Dropdown: {
+            colorPrimary: colors.neutral['100'], // primary color (azure500) doesn't work well with dropdown bg
+            controlPaddingHorizontal: exports.fontSize
+        },
+        Menu: {
+            darkItemBg: colors.ebonyClay['500'],
+            darkSubMenuItemBg: colors.ebonyClay['600'],
+            darkItemSelectedBg: colors.ebonyClay['700'],
+            itemBorderRadius: 0,
+            itemMarginBlock: 0,
+            itemMarginInline: 0,
+            darkItemColor: colors.gray['500'],
+            itemHeight: exports.fontSize * 3.25
+        },
+        Breadcrumb: {
+            fontSize: exports.fontSize * 0.625,
+            lastItemColor: colors.azure['500']
+        },
+        Card: {
+            colorBgContainer: colors.ebonyClay['450'],
+            colorTextDescription: colors.neutral['100'],
+            headerFontSize: exports.fontSize * 1.25,
+            fontSize: exports.fontSize * 0.875
+        },
+        Collapse: {
+            headerPadding: '0 0 12px',
+            // because of ghost prop, we need to use important
+            contentPadding: '0 0 24px !important',
+            fontSizeIcon: exports.fontSize * 1.65,
+            fontSize: exports.fontSize
+        },
+        Form: {
+            itemMarginBottom: 16,
+            labelColor: colors.neutral['100'],
+            verticalLabelPadding: 4
+        },
+        Select: {
+            colorTextDisabled: colors.ebonyClay['350'],
+            colorBgContainerDisabled: colors.gray['925'],
+            colorBgContainer: colors.ebonyClay['475'],
+            fontSizeLG: exports.fontSize * 0.875,
+            colorBorder: colors.ebonyClay['550'],
+            lineWidth: 2
+        },
+        Input: {
+            colorBgContainer: colors.ebonyClay['475'],
+            fontSizeLG: exports.fontSize * 0.875,
+            colorBorder: colors.ebonyClay['550'],
+            lineWidth: 2
+        },
+        InputNumber: {
+            colorBgContainer: colors.ebonyClay['475'],
+            fontSizeLG: exports.fontSize * 0.875,
+            colorBorder: colors.ebonyClay['550'],
+            lineWidth: 2
+        }
+    }
+};
+/**
+ * Used to access antd's token values from react components.
+ * For detailed usage see,
+ * https://ant.design/docs/react/customize-theme#consume-design-token
+ */
+exports.useToken = antd_1.theme.useToken;
+/**
+ * Returns css variable objects for our
+ * theme's custom color palette.
+ *
+ * Outputs css variables like:
+ * --color-primary-100: #f0f8ff;
+ * --color-body-fg: #ffffff;
+ * --color-success-500: #52c41a;
+ * --color-{object_key}-{object_key}: {color_value};
+ */
+const getCssVariables = () => {
+    const { colors } = exports.theme;
+    const prefix = '--color';
+    const result = {};
+    for (const [colorType, colorObject] of Object.entries(colors)) {
+        for (const [colorShade, colorValue] of Object.entries(colorObject)) {
+            const variableName = `${prefix}-${colorType}-${colorShade}`;
+            result[variableName] = colorValue;
+        }
+    }
+    return result;
+};
+exports.getCssVariables = getCssVariables;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-theme",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "Akinon UI's default theme values.",
   "type": "module",
@@ -14,9 +14,10 @@
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "@akinon/typescript-config": "0.0.0",
+    "typescript": "^5.2.2",
+    "@akinon/vite-config": "^0.1.1",
     "@akinon/eslint-config": "0.1.0",
-    "@akinon/vite-config": "^0.1.1"
+    "@akinon/typescript-config": "0.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -33,7 +34,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "tsc && tsc --module commonjs --outDir dist",
     "lint": "eslint *.ts*",
     "test": "vitest run",
     "test:ui": "vitest --ui",