@dukaandost/tokens 1.0.0 → 1.1.0

package/dist/tokens.d.ts

@@ -0,0 +1,493 @@
+export declare const colors: {
+    readonly brand: {
+        readonly primary: "#180C44";
+        readonly accent: "#8A38F5";
+        readonly accentSubtle: "#EBE9F3";
+        readonly accentMuted: "#A499C6";
+        readonly hover: "#3B2395";
+    };
+    readonly semantic: {
+        readonly error: "#E9336C";
+        readonly errorStrong: "#C10000";
+        readonly errorLight: "#EE6691";
+        readonly success: "#099B30";
+        readonly successDark: "#04841B";
+        readonly successDeep: "#065B15";
+        readonly successMuted: "#82AE37";
+        readonly warning: "#FCC13E";
+        readonly warningText: "#E4AC32";
+        readonly info: "#1B4DFF";
+        readonly infoStrong: "#0065F7";
+        readonly infoDark: "#02409A";
+        readonly infoMuted: "#127498";
+    };
+    readonly text: {
+        readonly primary: "#1A1A1A";
+        readonly secondary: "#2E2E2E";
+        readonly tertiary: "#545454";
+        readonly disabled: "#7F7F7F";
+        readonly inverse: "#FFFFFF";
+    };
+    readonly border: {
+        readonly default: "#D3D3D3";
+        readonly subtle: "#E0E0E0";
+        readonly hover: "#A9A9A9";
+    };
+    readonly surface: {
+        readonly default: "#FFFFFF";
+        readonly subtle: "#F5F5F5";
+        readonly subtleHover: "#F6F6F6";
+        readonly accent: "#F4F2FF";
+    };
+    readonly focus: {
+        readonly glow: "#EE6691";
+        readonly border: "#E9336C";
+    };
+    readonly badge: {
+        readonly green: {
+            readonly bg: "#E4FFEC";
+            readonly border: "#5FD87F";
+            readonly text: "#099B30";
+        };
+        readonly darkGreen: {
+            readonly bg: "#B3D9BA";
+            readonly border: "#04841B";
+            readonly text: "#065B15";
+        };
+        readonly blue: {
+            readonly bg: "#E6EFFC";
+            readonly border: "#0065F7";
+            readonly text: "#02409A";
+        };
+        readonly purple: {
+            readonly bg: "#FFE2FF";
+            readonly border: "#DF00DF";
+            readonly text: "#9A009A";
+        };
+        readonly violet: {
+            readonly bg: "#E8C1FF";
+            readonly border: "#B331FF";
+            readonly text: "#921EC3";
+        };
+        readonly yellow: {
+            readonly bg: "#FFF6E2";
+            readonly border: "#FCC13E";
+            readonly text: "#E4AC32";
+        };
+        readonly teal: {
+            readonly bg: "#E3FDFF";
+            readonly border: "#18CBDB";
+            readonly text: "#0DACBB";
+        };
+        readonly pink: {
+            readonly bg: "#FFE7EE";
+            readonly border: "#EE6691";
+            readonly text: "#E30047";
+        };
+        readonly red: {
+            readonly bg: "#FFE2E2";
+            readonly border: "#FF2929";
+            readonly text: "#C10000";
+        };
+        readonly orange: {
+            readonly bg: "#FDE1D4";
+            readonly border: "#FF6924";
+            readonly text: "#F65F1A";
+        };
+        readonly grey: {
+            readonly bg: "#E3E3E3";
+            readonly border: "#7F7F7F";
+            readonly text: "#545454";
+        };
+        readonly brown: {
+            readonly bg: "#F4E8DC";
+            readonly border: "#B87333";
+            readonly text: "#8B5E34";
+        };
+    };
+};
+export declare const gradients: {
+    readonly brandAlpha: "linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)";
+    readonly brandBeta: "linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)";
+    readonly brandGamma: "linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)";
+    readonly brandDelta: "linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)";
+};
+export declare const fontFamily: {
+    readonly heading: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+    readonly body: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+    readonly code: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
+};
+export declare const typography: {
+    readonly display: {
+        readonly size: "40px";
+        readonly weight: 400;
+        readonly lineHeight: 1.37;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+    };
+    readonly headingXl: {
+        readonly size: "32px";
+        readonly weight: 400;
+        readonly lineHeight: 1.37;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+    };
+    readonly headingLg: {
+        readonly size: "24px";
+        readonly weight: 400;
+        readonly lineHeight: 1.37;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+    };
+    readonly headingMd: {
+        readonly size: "20px";
+        readonly weight: 400;
+        readonly lineHeight: 1.37;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+    };
+    readonly headingSm: {
+        readonly size: "18px";
+        readonly weight: 400;
+        readonly lineHeight: 1.36;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+    };
+    readonly bodyLg: {
+        readonly size: "16px";
+        readonly weight: 400;
+        readonly lineHeight: 1.36;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+    };
+    readonly bodyMd: {
+        readonly size: "14px";
+        readonly weight: 400;
+        readonly lineHeight: 1.36;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+    };
+    readonly bodySm: {
+        readonly size: "12px";
+        readonly weight: 400;
+        readonly lineHeight: 1.36;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+    };
+    readonly label: {
+        readonly size: "13px";
+        readonly weight: 500;
+        readonly lineHeight: 1.4;
+        readonly letterSpacing: "0.03em";
+        readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+    };
+    readonly labelSm: {
+        readonly size: "11px";
+        readonly weight: 500;
+        readonly lineHeight: 1.4;
+        readonly letterSpacing: "0.04em";
+        readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+    };
+    readonly code: {
+        readonly size: "13px";
+        readonly weight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0em";
+        readonly fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
+    };
+};
+export declare const spacing: {
+    readonly px: "1px";
+    readonly '0.5': "2px";
+    readonly '1': "4px";
+    readonly '2': "8px";
+    readonly '3': "12px";
+    readonly '4': "16px";
+    readonly '5': "20px";
+    readonly '6': "24px";
+    readonly '8': "32px";
+    readonly '10': "40px";
+    readonly '12': "48px";
+};
+export declare const radius: {
+    readonly none: "0px";
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "16px";
+    readonly xl: "24px";
+    readonly full: "9999px";
+};
+export declare const shadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px rgba(0, 0, 0, 0.06)";
+    readonly sm: "0 2px 6px rgba(0, 0, 0, 0.08)";
+    readonly md: "0 4px 12px rgba(0, 0, 0, 0.12)";
+    readonly lg: "0 8px 24px rgba(0, 0, 0, 0.16)";
+    readonly xl: "0 16px 40px rgba(0, 0, 0, 0.20)";
+    readonly glowAlpha: "0 0 20px rgba(190, 3, 164, 0.50)";
+    readonly glowBeta: "0 0 20px rgba(148, 170, 253, 0.50)";
+    readonly glowGamma: "0 0 20px rgba(130, 174, 55, 0.50)";
+    readonly glowDelta: "0 0 20px rgba(55, 130, 174, 0.50)";
+    readonly button: "0 1px 2px rgba(0, 0, 0, 0.2)";
+    readonly buttonHover: "0 1px 4px rgba(0, 0, 0, 0.2)";
+    readonly focusGlow: "0 0 4px #EE6691";
+};
+export declare const zIndex: {
+    readonly base: 0;
+    readonly raised: 10;
+    readonly dropdown: 100;
+    readonly sticky: 200;
+    readonly overlay: 300;
+    readonly modal: 400;
+    readonly popover: 500;
+    readonly toast: 600;
+};
+export declare const tokens: {
+    readonly colors: {
+        readonly brand: {
+            readonly primary: "#180C44";
+            readonly accent: "#8A38F5";
+            readonly accentSubtle: "#EBE9F3";
+            readonly accentMuted: "#A499C6";
+            readonly hover: "#3B2395";
+        };
+        readonly semantic: {
+            readonly error: "#E9336C";
+            readonly errorStrong: "#C10000";
+            readonly errorLight: "#EE6691";
+            readonly success: "#099B30";
+            readonly successDark: "#04841B";
+            readonly successDeep: "#065B15";
+            readonly successMuted: "#82AE37";
+            readonly warning: "#FCC13E";
+            readonly warningText: "#E4AC32";
+            readonly info: "#1B4DFF";
+            readonly infoStrong: "#0065F7";
+            readonly infoDark: "#02409A";
+            readonly infoMuted: "#127498";
+        };
+        readonly text: {
+            readonly primary: "#1A1A1A";
+            readonly secondary: "#2E2E2E";
+            readonly tertiary: "#545454";
+            readonly disabled: "#7F7F7F";
+            readonly inverse: "#FFFFFF";
+        };
+        readonly border: {
+            readonly default: "#D3D3D3";
+            readonly subtle: "#E0E0E0";
+            readonly hover: "#A9A9A9";
+        };
+        readonly surface: {
+            readonly default: "#FFFFFF";
+            readonly subtle: "#F5F5F5";
+            readonly subtleHover: "#F6F6F6";
+            readonly accent: "#F4F2FF";
+        };
+        readonly focus: {
+            readonly glow: "#EE6691";
+            readonly border: "#E9336C";
+        };
+        readonly badge: {
+            readonly green: {
+                readonly bg: "#E4FFEC";
+                readonly border: "#5FD87F";
+                readonly text: "#099B30";
+            };
+            readonly darkGreen: {
+                readonly bg: "#B3D9BA";
+                readonly border: "#04841B";
+                readonly text: "#065B15";
+            };
+            readonly blue: {
+                readonly bg: "#E6EFFC";
+                readonly border: "#0065F7";
+                readonly text: "#02409A";
+            };
+            readonly purple: {
+                readonly bg: "#FFE2FF";
+                readonly border: "#DF00DF";
+                readonly text: "#9A009A";
+            };
+            readonly violet: {
+                readonly bg: "#E8C1FF";
+                readonly border: "#B331FF";
+                readonly text: "#921EC3";
+            };
+            readonly yellow: {
+                readonly bg: "#FFF6E2";
+                readonly border: "#FCC13E";
+                readonly text: "#E4AC32";
+            };
+            readonly teal: {
+                readonly bg: "#E3FDFF";
+                readonly border: "#18CBDB";
+                readonly text: "#0DACBB";
+            };
+            readonly pink: {
+                readonly bg: "#FFE7EE";
+                readonly border: "#EE6691";
+                readonly text: "#E30047";
+            };
+            readonly red: {
+                readonly bg: "#FFE2E2";
+                readonly border: "#FF2929";
+                readonly text: "#C10000";
+            };
+            readonly orange: {
+                readonly bg: "#FDE1D4";
+                readonly border: "#FF6924";
+                readonly text: "#F65F1A";
+            };
+            readonly grey: {
+                readonly bg: "#E3E3E3";
+                readonly border: "#7F7F7F";
+                readonly text: "#545454";
+            };
+            readonly brown: {
+                readonly bg: "#F4E8DC";
+                readonly border: "#B87333";
+                readonly text: "#8B5E34";
+            };
+        };
+    };
+    readonly gradients: {
+        readonly brandAlpha: "linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)";
+        readonly brandBeta: "linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)";
+        readonly brandGamma: "linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)";
+        readonly brandDelta: "linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)";
+    };
+    readonly fontFamily: {
+        readonly heading: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+        readonly body: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+        readonly code: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
+    };
+    readonly typography: {
+        readonly display: {
+            readonly size: "40px";
+            readonly weight: 400;
+            readonly lineHeight: 1.37;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+        };
+        readonly headingXl: {
+            readonly size: "32px";
+            readonly weight: 400;
+            readonly lineHeight: 1.37;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+        };
+        readonly headingLg: {
+            readonly size: "24px";
+            readonly weight: 400;
+            readonly lineHeight: 1.37;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+        };
+        readonly headingMd: {
+            readonly size: "20px";
+            readonly weight: 400;
+            readonly lineHeight: 1.37;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
+        };
+        readonly headingSm: {
+            readonly size: "18px";
+            readonly weight: 400;
+            readonly lineHeight: 1.36;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+        };
+        readonly bodyLg: {
+            readonly size: "16px";
+            readonly weight: 400;
+            readonly lineHeight: 1.36;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+        };
+        readonly bodyMd: {
+            readonly size: "14px";
+            readonly weight: 400;
+            readonly lineHeight: 1.36;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+        };
+        readonly bodySm: {
+            readonly size: "12px";
+            readonly weight: 400;
+            readonly lineHeight: 1.36;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+        };
+        readonly label: {
+            readonly size: "13px";
+            readonly weight: 500;
+            readonly lineHeight: 1.4;
+            readonly letterSpacing: "0.03em";
+            readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+        };
+        readonly labelSm: {
+            readonly size: "11px";
+            readonly weight: 500;
+            readonly lineHeight: 1.4;
+            readonly letterSpacing: "0.04em";
+            readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
+        };
+        readonly code: {
+            readonly size: "13px";
+            readonly weight: 400;
+            readonly lineHeight: 1.5;
+            readonly letterSpacing: "0em";
+            readonly fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
+        };
+    };
+    readonly spacing: {
+        readonly px: "1px";
+        readonly '0.5': "2px";
+        readonly '1': "4px";
+        readonly '2': "8px";
+        readonly '3': "12px";
+        readonly '4': "16px";
+        readonly '5': "20px";
+        readonly '6': "24px";
+        readonly '8': "32px";
+        readonly '10': "40px";
+        readonly '12': "48px";
+    };
+    readonly radius: {
+        readonly none: "0px";
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "12px";
+        readonly lg: "16px";
+        readonly xl: "24px";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly xs: "0 1px 2px rgba(0, 0, 0, 0.06)";
+        readonly sm: "0 2px 6px rgba(0, 0, 0, 0.08)";
+        readonly md: "0 4px 12px rgba(0, 0, 0, 0.12)";
+        readonly lg: "0 8px 24px rgba(0, 0, 0, 0.16)";
+        readonly xl: "0 16px 40px rgba(0, 0, 0, 0.20)";
+        readonly glowAlpha: "0 0 20px rgba(190, 3, 164, 0.50)";
+        readonly glowBeta: "0 0 20px rgba(148, 170, 253, 0.50)";
+        readonly glowGamma: "0 0 20px rgba(130, 174, 55, 0.50)";
+        readonly glowDelta: "0 0 20px rgba(55, 130, 174, 0.50)";
+        readonly button: "0 1px 2px rgba(0, 0, 0, 0.2)";
+        readonly buttonHover: "0 1px 4px rgba(0, 0, 0, 0.2)";
+        readonly focusGlow: "0 0 4px #EE6691";
+    };
+    readonly zIndex: {
+        readonly base: 0;
+        readonly raised: 10;
+        readonly dropdown: 100;
+        readonly sticky: 200;
+        readonly overlay: 300;
+        readonly modal: 400;
+        readonly popover: 500;
+        readonly toast: 600;
+    };
+};
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DT,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Eb,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAcV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAST,CAAC"}

package/package.json

@@ -1,13 +1,29 @@
 {
   "name": "@dukaandost/tokens",
-  "version": "1.0.0",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "files": ["src"],
-    "publishConfig": {
+  "version": "1.1.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist", "src/tokens.css"],
+  "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./src/tokens.css": "./src/tokens.css"
+  },
   "scripts": {
-    "build": "echo 'Tokens are consumed as source'"
+    "build": "tsc --noEmit && vite build"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^3.9.0"
   }
 }