@x-green/components 0.1.0

package/dist/tokens/primitives/colors.d.ts

@@ -0,0 +1,234 @@
+export declare const colorShadeOpacity: {
+    readonly 25: "5%";
+    readonly 50: "10%";
+    readonly 100: "20%";
+    readonly 200: "40%";
+    readonly 300: "60%";
+    readonly 400: "80%";
+    readonly 500: "100%";
+    readonly 600: "80%";
+    readonly 700: "60%";
+    readonly 800: "40%";
+    readonly 900: "20%";
+    readonly 950: "10%";
+};
+export declare const colors: {
+    readonly neutral: {
+        readonly 25: "#EBF0F6";
+        readonly 50: "#E5EAF1";
+        readonly 100: "#DAE0E7";
+        readonly 200: "#C5CAD3";
+        readonly 300: "#AFB5C0";
+        readonly 400: "#9A9FAC";
+        readonly 500: "#848A98";
+        readonly 600: "#6A6E7A";
+        readonly 700: "#4F535B";
+        readonly 800: "#35373D";
+        readonly 900: "#1A1C1E";
+        readonly 950: "#0D0E0F";
+    };
+    readonly green: {
+        readonly 50: "#E6F6EF";
+        readonly 100: "#CCECCC";
+        readonly 200: "#99D999";
+        readonly 300: "#66C766";
+        readonly 400: "#33B433";
+        readonly 500: "#00A000";
+        readonly 600: "#008100";
+        readonly 700: "#006100";
+        readonly 800: "#004000";
+        readonly 900: "#002000";
+        readonly 950: "#001000";
+    };
+    readonly blue: {
+        readonly 50: "#E6ECF6";
+        readonly 100: "#CCD9EC";
+        readonly 200: "#99B3D9";
+        readonly 300: "#668CC6";
+        readonly 400: "#3366B3";
+        readonly 500: "#0040A0";
+        readonly 600: "#003380";
+        readonly 700: "#002660";
+        readonly 800: "#001A40";
+        readonly 900: "#000D20";
+        readonly 950: "#000610";
+    };
+    readonly purple: {
+        readonly 50: "#EDE6F6";
+        readonly 100: "#DBCCEC";
+        readonly 200: "#B899D9";
+        readonly 300: "#9466C6";
+        readonly 400: "#7133B3";
+        readonly 500: "#4D00A0";
+        readonly 600: "#3E0080";
+        readonly 700: "#2E0060";
+        readonly 800: "#1F0040";
+        readonly 900: "#0F0020";
+        readonly 950: "#080010";
+    };
+    readonly red: {
+        readonly 50: "#FDECEC";
+        readonly 100: "#FBD8D8";
+        readonly 200: "#F7B1B1";
+        readonly 300: "#F28A8A";
+        readonly 400: "#EE6363";
+        readonly 500: "#EA3C3C";
+        readonly 600: "#BB3030";
+        readonly 700: "#8C2424";
+        readonly 800: "#5E1818";
+        readonly 900: "#2F0C0C";
+        readonly 950: "#170606";
+    };
+    readonly orange: {
+        readonly 50: "#FFF1E8";
+        readonly 100: "#FFE4D0";
+        readonly 200: "#FFC8A1";
+        readonly 300: "#FFAD73";
+        readonly 400: "#FF9144";
+        readonly 500: "#FF7615";
+        readonly 600: "#CC5E11";
+        readonly 700: "#99470D";
+        readonly 800: "#662F08";
+        readonly 900: "#331804";
+        readonly 950: "#190C02";
+    };
+    readonly yellow: {
+        readonly 50: "#FFF8E8";
+        readonly 100: "#FFF2D0";
+        readonly 200: "#FFE5A1";
+        readonly 300: "#FFD773";
+        readonly 400: "#FFCA44";
+        readonly 500: "#FFBD15";
+        readonly 600: "#CC9711";
+        readonly 700: "#99710D";
+        readonly 800: "#664C08";
+        readonly 900: "#332604";
+        readonly 950: "#191302";
+    };
+    readonly cyan: {
+        readonly 50: "#E8FFFC";
+        readonly 100: "#D0FFFA";
+        readonly 200: "#A1FFF4";
+        readonly 300: "#73FFEF";
+        readonly 400: "#44FFE9";
+        readonly 500: "#15FFE4";
+        readonly 600: "#11CCB6";
+        readonly 700: "#0D9989";
+        readonly 800: "#08665B";
+        readonly 900: "#04332E";
+        readonly 950: "#021917";
+    };
+};
+export type Colors = typeof colors;
+export type ColorFamilyName = keyof Colors;
+export type ColorShade = keyof typeof colorShadeOpacity;
+export type ColorFamily<Name extends ColorFamilyName = ColorFamilyName> = Colors[Name];
+export declare const colorCssVariables: Record<string, string>;
+export declare const colorCssVars: {
+    readonly neutral: {
+        readonly 25: "var(--color-neutral-25)";
+        readonly 50: "var(--color-neutral-50)";
+        readonly 100: "var(--color-neutral-100)";
+        readonly 200: "var(--color-neutral-200)";
+        readonly 300: "var(--color-neutral-300)";
+        readonly 400: "var(--color-neutral-400)";
+        readonly 500: "var(--color-neutral-500)";
+        readonly 600: "var(--color-neutral-600)";
+        readonly 700: "var(--color-neutral-700)";
+        readonly 800: "var(--color-neutral-800)";
+        readonly 900: "var(--color-neutral-900)";
+        readonly 950: "var(--color-neutral-950)";
+    };
+    readonly green: {
+        readonly 50: "var(--color-green-50)";
+        readonly 100: "var(--color-green-100)";
+        readonly 200: "var(--color-green-200)";
+        readonly 300: "var(--color-green-300)";
+        readonly 400: "var(--color-green-400)";
+        readonly 500: "var(--color-green-500)";
+        readonly 600: "var(--color-green-600)";
+        readonly 700: "var(--color-green-700)";
+        readonly 800: "var(--color-green-800)";
+        readonly 900: "var(--color-green-900)";
+        readonly 950: "var(--color-green-950)";
+    };
+    readonly blue: {
+        readonly 50: "var(--color-blue-50)";
+        readonly 100: "var(--color-blue-100)";
+        readonly 200: "var(--color-blue-200)";
+        readonly 300: "var(--color-blue-300)";
+        readonly 400: "var(--color-blue-400)";
+        readonly 500: "var(--color-blue-500)";
+        readonly 600: "var(--color-blue-600)";
+        readonly 700: "var(--color-blue-700)";
+        readonly 800: "var(--color-blue-800)";
+        readonly 900: "var(--color-blue-900)";
+        readonly 950: "var(--color-blue-950)";
+    };
+    readonly purple: {
+        readonly 50: "var(--color-purple-50)";
+        readonly 100: "var(--color-purple-100)";
+        readonly 200: "var(--color-purple-200)";
+        readonly 300: "var(--color-purple-300)";
+        readonly 400: "var(--color-purple-400)";
+        readonly 500: "var(--color-purple-500)";
+        readonly 600: "var(--color-purple-600)";
+        readonly 700: "var(--color-purple-700)";
+        readonly 800: "var(--color-purple-800)";
+        readonly 900: "var(--color-purple-900)";
+        readonly 950: "var(--color-purple-950)";
+    };
+    readonly red: {
+        readonly 50: "var(--color-red-50)";
+        readonly 100: "var(--color-red-100)";
+        readonly 200: "var(--color-red-200)";
+        readonly 300: "var(--color-red-300)";
+        readonly 400: "var(--color-red-400)";
+        readonly 500: "var(--color-red-500)";
+        readonly 600: "var(--color-red-600)";
+        readonly 700: "var(--color-red-700)";
+        readonly 800: "var(--color-red-800)";
+        readonly 900: "var(--color-red-900)";
+        readonly 950: "var(--color-red-950)";
+    };
+    readonly orange: {
+        readonly 50: "var(--color-orange-50)";
+        readonly 100: "var(--color-orange-100)";
+        readonly 200: "var(--color-orange-200)";
+        readonly 300: "var(--color-orange-300)";
+        readonly 400: "var(--color-orange-400)";
+        readonly 500: "var(--color-orange-500)";
+        readonly 600: "var(--color-orange-600)";
+        readonly 700: "var(--color-orange-700)";
+        readonly 800: "var(--color-orange-800)";
+        readonly 900: "var(--color-orange-900)";
+        readonly 950: "var(--color-orange-950)";
+    };
+    readonly yellow: {
+        readonly 50: "var(--color-yellow-50)";
+        readonly 100: "var(--color-yellow-100)";
+        readonly 200: "var(--color-yellow-200)";
+        readonly 300: "var(--color-yellow-300)";
+        readonly 400: "var(--color-yellow-400)";
+        readonly 500: "var(--color-yellow-500)";
+        readonly 600: "var(--color-yellow-600)";
+        readonly 700: "var(--color-yellow-700)";
+        readonly 800: "var(--color-yellow-800)";
+        readonly 900: "var(--color-yellow-900)";
+        readonly 950: "var(--color-yellow-950)";
+    };
+    readonly cyan: {
+        readonly 50: "var(--color-cyan-50)";
+        readonly 100: "var(--color-cyan-100)";
+        readonly 200: "var(--color-cyan-200)";
+        readonly 300: "var(--color-cyan-300)";
+        readonly 400: "var(--color-cyan-400)";
+        readonly 500: "var(--color-cyan-500)";
+        readonly 600: "var(--color-cyan-600)";
+        readonly 700: "var(--color-cyan-700)";
+        readonly 800: "var(--color-cyan-800)";
+        readonly 900: "var(--color-cyan-900)";
+        readonly 950: "var(--color-cyan-950)";
+    };
+};
+export type ColorCssVars = typeof colorCssVars;

package/dist/tokens/primitives/typography.d.ts

@@ -0,0 +1,32 @@
+export declare const fontFamily: {
+    readonly sans: "var(--default-font-family)";
+};
+export declare const fontWeight: {
+    readonly regular: 400;
+    readonly semibold: 600;
+};
+export declare const fontSize: {
+    readonly xs: "12px";
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "20px";
+    readonly xl: "24px";
+    readonly '2xl': "32px";
+    readonly '3xl': "40px";
+    readonly '4xl': "48px";
+    readonly '5xl': "60px";
+};
+export declare const lineHeight: {
+    readonly 16: "16px";
+    readonly 20: "20px";
+    readonly 24: "24px";
+    readonly 28: "28px";
+    readonly 40: "40px";
+    readonly 48: "48px";
+    readonly 56: "56px";
+    readonly 72: "72px";
+};
+export type FontFamily = (typeof fontFamily)[keyof typeof fontFamily];
+export type FontWeight = (typeof fontWeight)[keyof typeof fontWeight];
+export type FontSize = (typeof fontSize)[keyof typeof fontSize];
+export type LineHeight = (typeof lineHeight)[keyof typeof lineHeight];

package/dist/tokens/semantic/colors.d.ts

@@ -0,0 +1,201 @@
+export declare const semanticColors: {
+    readonly primary: "#008149";
+    readonly 'primary-hover': "#006137";
+    readonly outline: "#F0F5FB";
+    readonly error: "#BB3030";
+    readonly 'error-hover': "#8C2424";
+};
+export declare const semanticColorCssVariables: Record<string, string>;
+export declare const button: {
+    readonly primary: {
+        readonly default: {
+            readonly background: "#008149";
+            readonly border: "#008149";
+        };
+        readonly hover: {
+            readonly background: "#006137";
+            readonly border: "#006137";
+        };
+        readonly focus: {
+            readonly background: "#008149";
+            readonly border: "#008149";
+        };
+        readonly disabled: {
+            readonly background: "#E5EAF1";
+            readonly border: "#848A98";
+            readonly text: "#848A98";
+        };
+    };
+    readonly outline: {
+        readonly default: {
+            readonly background: "#F0F5FB";
+            readonly border: "#008149";
+        };
+        readonly hover: {
+            readonly background: "#F0F5FB";
+            readonly border: "#006137";
+        };
+        readonly focus: {
+            readonly background: "#F0F5FB";
+            readonly border: "#008149";
+        };
+        readonly disabled: {
+            readonly background: "#E5EAF1";
+            readonly border: "#848A98";
+            readonly text: "#848A98";
+        };
+    };
+    readonly transparent: {
+        readonly default: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#008149";
+        };
+        readonly hover: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#006137";
+        };
+        readonly focus: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#008149";
+        };
+        readonly disabled: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#848A98";
+        };
+    };
+    readonly error: {
+        readonly default: {
+            readonly background: "#BB3030";
+            readonly border: "#BB3030";
+        };
+        readonly hover: {
+            readonly background: "#8C2424";
+            readonly border: "#8C2424";
+        };
+        readonly focus: {
+            readonly background: "#BB3030";
+            readonly border: "#BB3030";
+        };
+        readonly disabled: {
+            readonly background: "#E5EAF1";
+            readonly border: "#848A98";
+            readonly text: "#848A98";
+        };
+    };
+    readonly 'outline-error': {
+        readonly default: {
+            readonly background: "#F0F5FB";
+            readonly border: "#BB3030";
+            readonly text: "#BB3030";
+        };
+        readonly hover: {
+            readonly background: "#F0F5FB";
+            readonly border: "#8C2424";
+            readonly text: "#8C2424";
+        };
+        readonly focus: {
+            readonly background: "#F0F5FB";
+            readonly border: "#BB3030";
+            readonly text: "#BB3030";
+        };
+        readonly disabled: {
+            readonly background: "#E5EAF1";
+            readonly border: "#848A98";
+            readonly text: "#848A98";
+        };
+    };
+    readonly 'transparent-error': {
+        readonly default: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#BB3030";
+        };
+        readonly hover: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#8C2424";
+        };
+        readonly focus: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#BB3030";
+        };
+        readonly disabled: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#848A98";
+        };
+    };
+    readonly neutral: {
+        readonly default: {
+            readonly background: "#F0F5FB";
+            readonly border: "#C5CAD3";
+            readonly text: "#35373D";
+        };
+        readonly hover: {
+            readonly background: "#E5EAF1";
+            readonly border: "#AFB5C0";
+            readonly text: "#35373D";
+        };
+        readonly focus: {
+            readonly background: "#F0F5FB";
+            readonly border: "#C5CAD3";
+            readonly text: "#35373D";
+        };
+        readonly disabled: {
+            readonly background: "#E5EAF1";
+            readonly border: "#848A98";
+            readonly text: "#848A98";
+        };
+    };
+    readonly 'outline-neutral': {
+        readonly default: {
+            readonly background: "#F0F5FB";
+            readonly border: "#C5CAD3";
+            readonly text: "#35373D";
+        };
+        readonly hover: {
+            readonly background: "#F0F5FB";
+            readonly border: "#AFB5C0";
+            readonly text: "#35373D";
+        };
+        readonly focus: {
+            readonly background: "#F0F5FB";
+            readonly border: "#C5CAD3";
+            readonly text: "#35373D";
+        };
+        readonly disabled: {
+            readonly background: "#E5EAF1";
+            readonly border: "#848A98";
+            readonly text: "#848A98";
+        };
+    };
+    readonly 'transparent-neutral': {
+        readonly default: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#35373D";
+        };
+        readonly hover: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#1A1C1E";
+        };
+        readonly focus: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#35373D";
+        };
+        readonly disabled: {
+            readonly background: "transparent";
+            readonly border: "transparent";
+            readonly text: "#848A98";
+        };
+    };
+};
+export type SemanticColors = typeof semanticColors;
+export type ButtonTokens = typeof button;

package/dist/tokens/semantic/typography.d.ts

@@ -0,0 +1,100 @@
+export declare const typography: {
+    readonly 'heading-h1': {
+        readonly fontSize: "60px";
+        readonly lineHeight: "72px";
+        readonly fontWeight: 600;
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'heading-h2': {
+        readonly fontSize: "48px";
+        readonly lineHeight: "56px";
+        readonly fontWeight: 600;
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'heading-h3': {
+        readonly fontSize: "40px";
+        readonly lineHeight: "48px";
+        readonly fontWeight: 600;
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'heading-h4': {
+        readonly fontSize: "32px";
+        readonly lineHeight: "40px";
+        readonly fontWeight: 600;
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'heading-h5': {
+        readonly fontSize: "24px";
+        readonly lineHeight: "28px";
+        readonly fontWeight: 600;
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'heading-h6': {
+        readonly fontSize: "20px";
+        readonly lineHeight: "24px";
+        readonly fontWeight: 600;
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'body-sm': {
+        readonly fontSize: "14px";
+        readonly lineHeight: "16px";
+        readonly fontFamily: "var(--default-font-family)";
+        readonly fontWeight: 400;
+    };
+    readonly 'body-sm-semibold': {
+        readonly fontWeight: 600;
+        readonly fontSize: "14px";
+        readonly lineHeight: "16px";
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'body-sm-link': {
+        readonly fontSize: "14px";
+        readonly lineHeight: "16px";
+        readonly fontFamily: "var(--default-font-family)";
+        readonly fontWeight: 400;
+    };
+    readonly 'body-md': {
+        readonly fontSize: "16px";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "var(--default-font-family)";
+        readonly fontWeight: 400;
+    };
+    readonly 'body-md-link': {
+        readonly fontSize: "16px";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "var(--default-font-family)";
+        readonly fontWeight: 400;
+    };
+    readonly 'body-md-semibold': {
+        readonly fontWeight: 600;
+        readonly fontSize: "16px";
+        readonly lineHeight: "20px";
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly 'body-lg': {
+        readonly fontSize: "20px";
+        readonly lineHeight: "24px";
+        readonly fontFamily: "var(--default-font-family)";
+        readonly fontWeight: 400;
+    };
+    readonly 'body-lg-link': {
+        readonly fontSize: "20px";
+        readonly lineHeight: "24px";
+        readonly fontFamily: "var(--default-font-family)";
+        readonly fontWeight: 400;
+    };
+    readonly 'body-lg-semibold': {
+        readonly fontWeight: 600;
+        readonly fontSize: "20px";
+        readonly lineHeight: "24px";
+        readonly fontFamily: "var(--default-font-family)";
+    };
+    readonly caption: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "16px";
+        readonly fontFamily: "var(--default-font-family)";
+        readonly fontWeight: 400;
+    };
+};
+export type TypographyTokenName = keyof typeof typography;
+export type TypographyToken = (typeof typography)[TypographyTokenName];

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@x-green/components",
+  "version": "0.1.0",
+  "description": "Design system Xgreen: tokens e componentes React.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc -b",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json",
+    "prepublishOnly": "npm run typecheck && npm run lint && npm run build:lib",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "tailwind-variants": "^3.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-router": "^1.170.35",
+    "@tanstack/router-plugin": "^1.168.37",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "eslint": "^10.10.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "globals": "^17.12.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.69.0",
+    "vite": "^8.3.0"
+  }
+}