@kinetixui/tokens 0.1.0

package/dist/web/tokens.ts

@@ -0,0 +1,489 @@
+// Do not edit directly — generated by Style Dictionary (pnpm build:tokens)
+
+export const tokens = {
+  "color": {
+    "blue": {
+      "0": "#f6fbff",
+      "50": "#f0f7ff",
+      "100": "#92b2c8",
+      "150": "#83a4b9",
+      "200": "#7495ab",
+      "300": "#57778d",
+      "400": "#395a70",
+      "500": "#1b3c53",
+      "600": "#163042",
+      "700": "#102432",
+      "800": "#0b1821",
+      "850": "#081219",
+      "900": "#050c11",
+      "950": "#030608",
+      "1000": "#000000"
+    },
+    "green": {
+      "0": "#ffffff",
+      "50": "#f1f3f1",
+      "100": "#e3e7e3",
+      "150": "#d5dbd5",
+      "200": "#c7cfc7",
+      "300": "#acb8ab",
+      "400": "#90a08f",
+      "500": "#748873",
+      "600": "#5d6d5c",
+      "700": "#465245",
+      "800": "#2e362e",
+      "850": "#232923",
+      "900": "#171b17",
+      "950": "#0c0e0c",
+      "1000": "#000000"
+    },
+    "taupe": {
+      "0": "#ffffff",
+      "50": "#fbf9f8",
+      "100": "#f6f3f0",
+      "150": "#f2ece9",
+      "200": "#ede6e2",
+      "300": "#e4dad3",
+      "400": "#dbcdc5",
+      "500": "#d2c1b6",
+      "600": "#b4a499",
+      "700": "#96867c",
+      "800": "#78695f",
+      "850": "#695a51",
+      "900": "#5a4b42",
+      "950": "#4b3d34",
+      "1000": "#3c2e25"
+    },
+    "cream": {
+      "0": "#ffffff",
+      "50": "#fefefd",
+      "100": "#fefdfc",
+      "150": "#fdfbfa",
+      "200": "#fdfaf9",
+      "300": "#fbf8f5",
+      "400": "#faf5f2",
+      "500": "#f9f3ef",
+      "600": "#e3d4ca",
+      "700": "#cdb5a4",
+      "800": "#b8957f",
+      "850": "#ad866c",
+      "900": "#a27659",
+      "950": "#976747",
+      "1000": "#8c5734"
+    },
+    "amber": {
+      "0": "#ffffff",
+      "50": "#fff8ee",
+      "100": "#fff2dd",
+      "150": "#ffebcb",
+      "200": "#ffe4ba",
+      "300": "#ffd798",
+      "400": "#ffc975",
+      "500": "#ffbc53",
+      "600": "#d49c42",
+      "700": "#aa7b32",
+      "800": "#7f5b21",
+      "850": "#6a4b19",
+      "900": "#553a11",
+      "950": "#3f2a08",
+      "1000": "#2a1a00"
+    },
+    "red": {
+      "0": "#fff9f9",
+      "50": "#f9e1e1",
+      "100": "#f4c9c9",
+      "150": "#eeb1b1",
+      "200": "#e89999",
+      "300": "#dd6a6a",
+      "400": "#d13a3a",
+      "500": "#c60a0a",
+      "600": "#9e0808",
+      "700": "#770606",
+      "800": "#4f0404",
+      "850": "#3b0303",
+      "900": "#280202",
+      "950": "#140101",
+      "1000": "#000000"
+    },
+    "neutral": {
+      "0": "#ffffff",
+      "50": "#fafafa",
+      "100": "#f6f6f6",
+      "200": "#ededed",
+      "300": "#e0e0e0",
+      "400": "#c2c2c2",
+      "500": "#9e9e9e",
+      "600": "#6d6d6d",
+      "700": "#4f4f4f",
+      "800": "#333333",
+      "900": "#1f1f1f",
+      "1000": "#000000"
+    },
+    "static": {
+      "white": "#ffffff",
+      "black": "#000000"
+    },
+    "background": "#ffffff",
+    "foreground": "#050c11",
+    "card": "#ffffff",
+    "card-foreground": "#050c11",
+    "popover": "#ffffff",
+    "popover-foreground": "#050c11",
+    "primary": "#1b3c53",
+    "primary-foreground": "#f0f7ff",
+    "secondary": "#f1f3f1",
+    "secondary-foreground": "#748873",
+    "muted": "#f6f6f6",
+    "muted-foreground": "#6d6d6d",
+    "accent": "#f0f7ff",
+    "accent-foreground": "#1b3c53",
+    "destructive": "#ec5047",
+    "destructive-foreground": "#fef3f2",
+    "success": "#5d6d5c",
+    "success-foreground": "#f1f3f1",
+    "warning": "#f97907",
+    "warning-foreground": "#fff8eb",
+    "border": "#92b2c8",
+    "input": "#92b2c8",
+    "ring": "#1b3c53",
+    "semantic": {
+      "error": "#ec5047",
+      "on-error": "#fef3f2",
+      "error-container": "#fef3f2",
+      "on-error-container": "#ec5047",
+      "warning-container": "#fff8eb",
+      "on-warning-container": "#f97907",
+      "success-container": "#f1f3f1",
+      "on-success-container": "#465245",
+      "warning": "#f97907",
+      "info-container": "#f0f7ff",
+      "on-info-container": "#395a70"
+    },
+    "chart-1": "#1b3c53",
+    "chart-2": "#748873",
+    "chart-3": "#ffbc53",
+    "chart-4": "#d13a3a",
+    "chart-5": "#b4a499",
+    "sidebar": "#fafafa",
+    "sidebar-foreground": "#050c11",
+    "sidebar-primary": "#1b3c53",
+    "sidebar-primary-foreground": "#f0f7ff",
+    "sidebar-accent": "#f0f7ff",
+    "sidebar-accent-foreground": "#1b3c53",
+    "sidebar-border": "#e0e0e0",
+    "sidebar-ring": "#1b3c53",
+    "tertiary": "#b0b0b0",
+    "tertiary-foreground": "#f0f7ff",
+    "info": "#57778d",
+    "info-foreground": "#f0f7ff"
+  },
+  "spacing": {
+    "0": "0",
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "7": "28px",
+    "8": "32px"
+  },
+  "radius": {
+    "none": "0",
+    "sm": "4px",
+    "md": "8px",
+    "lg": "12px",
+    "xl": "16px",
+    "full": "9999px"
+  },
+  "borderWidth": {
+    "default": "1px",
+    "focus": "2px"
+  },
+  "font": {
+    "family": {
+      "sans": "Montserrat, ui-sans-serif, system-ui, sans-serif"
+    },
+    "weight": {
+      "regular": "400",
+      "medium": "500",
+      "semibold": "600"
+    }
+  },
+  "fontSize": {
+    "display-lg": "57px",
+    "display-md": "45px",
+    "display-sm": "36px",
+    "headline-lg": "32px",
+    "headline-md": "28px",
+    "headline-sm": "24px",
+    "title-lg": "22px",
+    "title-md": "16px",
+    "title-sm": "14px",
+    "title-dialog": "18px",
+    "label-lg": "14px",
+    "label-md": "12px",
+    "label-sm": "11px",
+    "body-lg": "16px",
+    "body-md": "14px",
+    "body-sm": "12px"
+  },
+  "lineHeight": {
+    "display-lg": "64px",
+    "display-md": "52px",
+    "display-sm": "44px",
+    "headline-lg": "40px",
+    "headline-md": "36px",
+    "headline-sm": "32px",
+    "title-lg": "28px",
+    "title-md": "24px",
+    "title-sm": "20px",
+    "title-dialog": "24px",
+    "label-lg": "20px",
+    "label-md": "16px",
+    "label-sm": "16px",
+    "body-lg": "24px",
+    "body-md": "20px",
+    "body-sm": "16px"
+  },
+  "letterSpacing": {
+    "tighter": "-0.25px",
+    "normal": "0",
+    "wide-1": "0.1px",
+    "wide-15": "0.15px",
+    "wide-25": "0.25px",
+    "wide-5": "0.5px"
+  },
+  "shadow": {
+    "sm": [
+      {
+        "color": "#0000000d",
+        "offsetX": "0",
+        "offsetY": "1",
+        "blur": "2",
+        "spread": "0"
+      }
+    ],
+    "md": [
+      {
+        "color": "#0000001f",
+        "offsetX": "0",
+        "offsetY": "1",
+        "blur": "1",
+        "spread": "0"
+      },
+      {
+        "color": "#676e7614",
+        "offsetX": "0",
+        "offsetY": "2",
+        "blur": "5",
+        "spread": "0"
+      }
+    ],
+    "lg": [
+      {
+        "color": "#00000012",
+        "offsetX": "0",
+        "offsetY": "4",
+        "blur": "6",
+        "spread": "-1"
+      },
+      {
+        "color": "#0000000f",
+        "offsetX": "0",
+        "offsetY": "2",
+        "blur": "4",
+        "spread": "-2"
+      }
+    ],
+    "xl": [
+      {
+        "color": "#0000001f",
+        "offsetX": "0",
+        "offsetY": "4",
+        "blur": "24",
+        "spread": "0"
+      }
+    ],
+    "focus": [
+      {
+        "color": "#1b3c53",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "1"
+      },
+      {
+        "color": "#1b3c5333",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "4"
+      }
+    ],
+    "focus-destructive": [
+      {
+        "color": "#ec5047",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "1"
+      },
+      {
+        "color": "#ec504733",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "4"
+      }
+    ],
+    "focus-success": [
+      {
+        "color": "#5d6d5c",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "1"
+      },
+      {
+        "color": "#5d6d5c33",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "4"
+      }
+    ],
+    "focus-warning": [
+      {
+        "color": "#f97907",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "1"
+      },
+      {
+        "color": "#f9790733",
+        "offsetX": "0",
+        "offsetY": "0",
+        "blur": "0",
+        "spread": "4"
+      }
+    ]
+  },
+  "text": {
+    "display-lg": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "500",
+      "fontSize": "57px",
+      "lineHeight": "64px",
+      "letterSpacing": "-0.25px"
+    },
+    "display-md": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "500",
+      "fontSize": "45px",
+      "lineHeight": "52px",
+      "letterSpacing": "0"
+    },
+    "display-sm": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "400",
+      "fontSize": "36px",
+      "lineHeight": "44px",
+      "letterSpacing": "0"
+    },
+    "headline-lg": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "600",
+      "fontSize": "32px",
+      "lineHeight": "40px",
+      "letterSpacing": "0"
+    },
+    "headline-md": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "400",
+      "fontSize": "28px",
+      "lineHeight": "36px",
+      "letterSpacing": "0"
+    },
+    "headline-sm": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "400",
+      "fontSize": "24px",
+      "lineHeight": "32px",
+      "letterSpacing": "0"
+    },
+    "title-lg": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "400",
+      "fontSize": "22px",
+      "lineHeight": "28px",
+      "letterSpacing": "0"
+    },
+    "title-md": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "500",
+      "fontSize": "16px",
+      "lineHeight": "24px",
+      "letterSpacing": "0.15px"
+    },
+    "title-sm": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "500",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "letterSpacing": "0.1px"
+    },
+    "title-dialog": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "600",
+      "fontSize": "18px",
+      "lineHeight": "24px",
+      "letterSpacing": "0"
+    },
+    "label-lg": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "500",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "letterSpacing": "0.1px"
+    },
+    "label-md": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "500",
+      "fontSize": "12px",
+      "lineHeight": "16px",
+      "letterSpacing": "0.5px"
+    },
+    "label-sm": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "500",
+      "fontSize": "11px",
+      "lineHeight": "16px",
+      "letterSpacing": "0.5px"
+    },
+    "body-lg": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "400",
+      "fontSize": "16px",
+      "lineHeight": "24px",
+      "letterSpacing": "0.5px"
+    },
+    "body-md": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "400",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "letterSpacing": "0.25px"
+    },
+    "body-sm": {
+      "fontFamily": "Montserrat, ui-sans-serif, system-ui, sans-serif",
+      "fontWeight": "400",
+      "fontSize": "12px",
+      "lineHeight": "16px",
+      "letterSpacing": "0"
+    }
+  }
+} as const;
+
+export type Tokens = typeof tokens;
+export default tokens;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@kinetixui/tokens",
+  "version": "0.1.0",
+  "description": "KinetixUI design tokens — CSS variables, a TypeScript object, and native SwiftUI / Jetpack Compose / Flutter text styles, compiled by Style Dictionary.",
+  "keywords": [
+    "design-tokens",
+    "design-system",
+    "style-dictionary",
+    "css-variables",
+    "kinetixui"
+  ],
+  "license": "MIT",
+  "author": "KinetixUI",
+  "homepage": "https://kinetixui.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ziadfteha/kinetixui.git",
+    "directory": "packages/tokens"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/web/tokens.d.ts",
+      "import": "./dist/web/tokens.js"
+    },
+    "./css": "./dist/web/globals.css",
+    "./css/dark": "./dist/web/globals.dark.css",
+    "./css/extras": "./dist/web/extras.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "style-dictionary": "^4.3.0"
+  },
+  "scripts": {
+    "build": "node ../../style-dictionary/build.mjs",
+    "clean": "rimraf dist"
+  }
+}