@x-plat/design-system 0.2.0 → 0.2.2

package/dist/layout/index.css

@@ -1,3 +1,379 @@
+/* src/styles/style.css */
+:root {
+  --xplat-red-50: #FFF0F0;
+  --xplat-red-100: #FFDDDE;
+  --xplat-red-200: #FFC1C2;
+  --xplat-red-300: #FF9698;
+  --xplat-red-400: #FF5A5D;
+  --xplat-red-500: #FF272B;
+  --xplat-red-600: #F80409;
+  --xplat-red-700: #D40105;
+  --xplat-red-800: #AE0609;
+  --xplat-red-900: #900C0F;
+  --xplat-green-50: #E5F6EA;
+  --xplat-green-100: #C1E7CC;
+  --xplat-green-200: #98D8AC;
+  --xplat-green-300: #6CCA8B;
+  --xplat-green-400: #47BE72;
+  --xplat-green-500: #10B259;
+  --xplat-green-600: #00A34F;
+  --xplat-green-700: #009143;
+  --xplat-green-800: #007F38;
+  --xplat-green-900: #006024;
+  --xplat-orange-50: #FFF8EC;
+  --xplat-orange-100: #FFF0D3;
+  --xplat-orange-200: #FFDDA5;
+  --xplat-orange-300: #FFC46D;
+  --xplat-orange-400: #FF9F32;
+  --xplat-orange-500: #FF820A;
+  --xplat-orange-600: #FF6900;
+  --xplat-orange-700: #CC4B02;
+  --xplat-orange-800: #A13A0B;
+  --xplat-orange-900: #82320C;
+  --xplat-yellow-50: #FFFDE7;
+  --xplat-yellow-100: #FFFAC1;
+  --xplat-yellow-200: #FFF186;
+  --xplat-yellow-300: #FFE041;
+  --xplat-yellow-400: #FFCC0D;
+  --xplat-yellow-500: #F0B100;
+  --xplat-yellow-600: #D18800;
+  --xplat-yellow-700: #A66002;
+  --xplat-yellow-800: #894B0A;
+  --xplat-yellow-900: #743D0F;
+  --xplat-blue-50: #F1F4FD;
+  --xplat-blue-100: #DFE7FA;
+  --xplat-blue-200: #C5D4F8;
+  --xplat-blue-300: #9EB8F2;
+  --xplat-blue-400: #7093EA;
+  --xplat-blue-500: #4D6DE3;
+  --xplat-blue-600: #3950D7;
+  --xplat-blue-700: #303EC5;
+  --xplat-blue-800: #2D35A0;
+  --xplat-blue-900: #29317F;
+  --xplat-lightblue-50: #EEFAFF;
+  --xplat-lightblue-100: #D9F4FF;
+  --xplat-lightblue-200: #BBEDFF;
+  --xplat-lightblue-300: #8DE3FF;
+  --xplat-lightblue-400: #57D0FF;
+  --xplat-lightblue-500: #30B6FF;
+  --xplat-lightblue-600: #1999F7;
+  --xplat-lightblue-700: #1280E3;
+  --xplat-lightblue-800: #1566B8;
+  --xplat-lightblue-900: #175791;
+  --xplat-purple-50: #FBF6FE;
+  --xplat-purple-100: #F5EAFD;
+  --xplat-purple-200: #EDD8FC;
+  --xplat-purple-300: #E0BAF8;
+  --xplat-purple-400: #CD8DF3;
+  --xplat-purple-500: #B961EB;
+  --xplat-purple-600: #A541DC;
+  --xplat-purple-700: #9230C5;
+  --xplat-purple-800: #782B9E;
+  --xplat-purple-900: #62247F;
+  --xplat-pink-50: #FFF4FE;
+  --xplat-pink-100: #FFE7FD;
+  --xplat-pink-200: #FFCFFA;
+  --xplat-pink-300: #FEA9F1;
+  --xplat-pink-400: #FD75E7;
+  --xplat-pink-500: #F553DA;
+  --xplat-pink-600: #D821B6;
+  --xplat-pink-700: #B31892;
+  --xplat-pink-800: #921676;
+  --xplat-pink-900: #781761;
+  --xplat-neutral-50: #FAFAFA;
+  --xplat-neutral-100: #F5F5F5;
+  --xplat-neutral-200: #E5E5E5;
+  --xplat-neutral-300: #D4D4D4;
+  --xplat-neutral-400: #A1A1A1;
+  --xplat-neutral-500: #737373;
+  --xplat-neutral-600: #525252;
+  --xplat-neutral-700: #404040;
+  --xplat-neutral-800: #262626;
+  --xplat-neutral-900: #171717;
+  --xplat-black: #000000;
+  --xplat-white: #FFFFFF;
+  --test-default: #ffffff;
+}
+.xplat-red-50 {
+  --ds-color: var(--xplat-red-50);
+}
+.xplat-red-100 {
+  --ds-color: var(--xplat-red-100);
+}
+.xplat-red-200 {
+  --ds-color: var(--xplat-red-200);
+}
+.xplat-red-300 {
+  --ds-color: var(--xplat-red-300);
+}
+.xplat-red-400 {
+  --ds-color: var(--xplat-red-400);
+}
+.xplat-red-500 {
+  --ds-color: var(--xplat-red-500);
+}
+.xplat-red-600 {
+  --ds-color: var(--xplat-red-600);
+}
+.xplat-red-700 {
+  --ds-color: var(--xplat-red-700);
+}
+.xplat-red-800 {
+  --ds-color: var(--xplat-red-800);
+}
+.xplat-red-900 {
+  --ds-color: var(--xplat-red-900);
+}
+.xplat-green-50 {
+  --ds-color: var(--xplat-green-50);
+}
+.xplat-green-100 {
+  --ds-color: var(--xplat-green-100);
+}
+.xplat-green-200 {
+  --ds-color: var(--xplat-green-200);
+}
+.xplat-green-300 {
+  --ds-color: var(--xplat-green-300);
+}
+.xplat-green-400 {
+  --ds-color: var(--xplat-green-400);
+}
+.xplat-green-500 {
+  --ds-color: var(--xplat-green-500);
+}
+.xplat-green-600 {
+  --ds-color: var(--xplat-green-600);
+}
+.xplat-green-700 {
+  --ds-color: var(--xplat-green-700);
+}
+.xplat-green-800 {
+  --ds-color: var(--xplat-green-800);
+}
+.xplat-green-900 {
+  --ds-color: var(--xplat-green-900);
+}
+.xplat-orange-50 {
+  --ds-color: var(--xplat-orange-50);
+}
+.xplat-orange-100 {
+  --ds-color: var(--xplat-orange-100);
+}
+.xplat-orange-200 {
+  --ds-color: var(--xplat-orange-200);
+}
+.xplat-orange-300 {
+  --ds-color: var(--xplat-orange-300);
+}
+.xplat-orange-400 {
+  --ds-color: var(--xplat-orange-400);
+}
+.xplat-orange-500 {
+  --ds-color: var(--xplat-orange-500);
+}
+.xplat-orange-600 {
+  --ds-color: var(--xplat-orange-600);
+}
+.xplat-orange-700 {
+  --ds-color: var(--xplat-orange-700);
+}
+.xplat-orange-800 {
+  --ds-color: var(--xplat-orange-800);
+}
+.xplat-orange-900 {
+  --ds-color: var(--xplat-orange-900);
+}
+.xplat-yellow-50 {
+  --ds-color: var(--xplat-yellow-50);
+}
+.xplat-yellow-100 {
+  --ds-color: var(--xplat-yellow-100);
+}
+.xplat-yellow-200 {
+  --ds-color: var(--xplat-yellow-200);
+}
+.xplat-yellow-300 {
+  --ds-color: var(--xplat-yellow-300);
+}
+.xplat-yellow-400 {
+  --ds-color: var(--xplat-yellow-400);
+}
+.xplat-yellow-500 {
+  --ds-color: var(--xplat-yellow-500);
+}
+.xplat-yellow-600 {
+  --ds-color: var(--xplat-yellow-600);
+}
+.xplat-yellow-700 {
+  --ds-color: var(--xplat-yellow-700);
+}
+.xplat-yellow-800 {
+  --ds-color: var(--xplat-yellow-800);
+}
+.xplat-yellow-900 {
+  --ds-color: var(--xplat-yellow-900);
+}
+.xplat-blue-50 {
+  --ds-color: var(--xplat-blue-50);
+}
+.xplat-blue-100 {
+  --ds-color: var(--xplat-blue-100);
+}
+.xplat-blue-200 {
+  --ds-color: var(--xplat-blue-200);
+}
+.xplat-blue-300 {
+  --ds-color: var(--xplat-blue-300);
+}
+.xplat-blue-400 {
+  --ds-color: var(--xplat-blue-400);
+}
+.xplat-blue-500 {
+  --ds-color: var(--xplat-blue-500);
+}
+.xplat-blue-600 {
+  --ds-color: var(--xplat-blue-600);
+}
+.xplat-blue-700 {
+  --ds-color: var(--xplat-blue-700);
+}
+.xplat-blue-800 {
+  --ds-color: var(--xplat-blue-800);
+}
+.xplat-blue-900 {
+  --ds-color: var(--xplat-blue-900);
+}
+.xplat-lightblue-50 {
+  --ds-color: var(--xplat-lightblue-50);
+}
+.xplat-lightblue-100 {
+  --ds-color: var(--xplat-lightblue-100);
+}
+.xplat-lightblue-200 {
+  --ds-color: var(--xplat-lightblue-200);
+}
+.xplat-lightblue-300 {
+  --ds-color: var(--xplat-lightblue-300);
+}
+.xplat-lightblue-400 {
+  --ds-color: var(--xplat-lightblue-400);
+}
+.xplat-lightblue-500 {
+  --ds-color: var(--xplat-lightblue-500);
+}
+.xplat-lightblue-600 {
+  --ds-color: var(--xplat-lightblue-600);
+}
+.xplat-lightblue-700 {
+  --ds-color: var(--xplat-lightblue-700);
+}
+.xplat-lightblue-800 {
+  --ds-color: var(--xplat-lightblue-800);
+}
+.xplat-lightblue-900 {
+  --ds-color: var(--xplat-lightblue-900);
+}
+.xplat-purple-50 {
+  --ds-color: var(--xplat-purple-50);
+}
+.xplat-purple-100 {
+  --ds-color: var(--xplat-purple-100);
+}
+.xplat-purple-200 {
+  --ds-color: var(--xplat-purple-200);
+}
+.xplat-purple-300 {
+  --ds-color: var(--xplat-purple-300);
+}
+.xplat-purple-400 {
+  --ds-color: var(--xplat-purple-400);
+}
+.xplat-purple-500 {
+  --ds-color: var(--xplat-purple-500);
+}
+.xplat-purple-600 {
+  --ds-color: var(--xplat-purple-600);
+}
+.xplat-purple-700 {
+  --ds-color: var(--xplat-purple-700);
+}
+.xplat-purple-800 {
+  --ds-color: var(--xplat-purple-800);
+}
+.xplat-purple-900 {
+  --ds-color: var(--xplat-purple-900);
+}
+.xplat-pink-50 {
+  --ds-color: var(--xplat-pink-50);
+}
+.xplat-pink-100 {
+  --ds-color: var(--xplat-pink-100);
+}
+.xplat-pink-200 {
+  --ds-color: var(--xplat-pink-200);
+}
+.xplat-pink-300 {
+  --ds-color: var(--xplat-pink-300);
+}
+.xplat-pink-400 {
+  --ds-color: var(--xplat-pink-400);
+}
+.xplat-pink-500 {
+  --ds-color: var(--xplat-pink-500);
+}
+.xplat-pink-600 {
+  --ds-color: var(--xplat-pink-600);
+}
+.xplat-pink-700 {
+  --ds-color: var(--xplat-pink-700);
+}
+.xplat-pink-800 {
+  --ds-color: var(--xplat-pink-800);
+}
+.xplat-pink-900 {
+  --ds-color: var(--xplat-pink-900);
+}
+.xplat-neutral-50 {
+  --ds-color: var(--xplat-neutral-50);
+}
+.xplat-neutral-100 {
+  --ds-color: var(--xplat-neutral-100);
+}
+.xplat-neutral-200 {
+  --ds-color: var(--xplat-neutral-200);
+}
+.xplat-neutral-300 {
+  --ds-color: var(--xplat-neutral-300);
+}
+.xplat-neutral-400 {
+  --ds-color: var(--xplat-neutral-400);
+}
+.xplat-neutral-500 {
+  --ds-color: var(--xplat-neutral-500);
+}
+.xplat-neutral-600 {
+  --ds-color: var(--xplat-neutral-600);
+}
+.xplat-neutral-700 {
+  --ds-color: var(--xplat-neutral-700);
+}
+.xplat-neutral-800 {
+  --ds-color: var(--xplat-neutral-800);
+}
+.xplat-neutral-900 {
+  --ds-color: var(--xplat-neutral-900);
+}
+.xplat-black {
+  --ds-color: var(--xplat-black);
+}
+.xplat-white {
+  --ds-color: var(--xplat-white);
+}
+.test-default {
+  --ds-color: var(--test-default);
+}
+
 /* src/layout/Grid/FullGrid/fullgrid.scss */
 .lib-xplat-full-grid {
   display: grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",
@@ -50,7 +50,8 @@
   ],
   "scripts": {
     "generate-grid": "tsx generate_grid.ts",
-    "build": "npm run clean && npm run generate-grid && tsc --noEmit && NODE_OPTIONS='--max-old-space-size=8192' tsup",
+    "inject-tokens": "tsx scripts/inject-tokens.ts",
+    "build": "npm run clean && npm run inject-tokens && npm run generate-grid && tsc --noEmit && NODE_OPTIONS='--max-old-space-size=8192' tsup",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "lint": "eslint src",
@@ -61,16 +62,16 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@x-plat/tokens-default": "*",
+    "@x-plat/tokens-default": "*"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "framer-motion": "^12.23.19",
     "react-chartjs-2": "^5.3.1",
     "react-datepicker": "^9.1.0",
-    "swiper": "^12.0.2"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.15.0",
+    "swiper": "^12.0.2",
     "@types/node": "^24.10.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",