@x-plat/design-system 0.2.1 → 0.2.3

package/dist/index.js

@@ -5596,131 +5596,9 @@ var Alert = (props) => {
 Alert.displayName = "Alert";
 var Alert_default = Alert;
 
-// src/tokens/colors.ts
-var colors = {
-  xplat: {
-    red: {
-      50: "#FFF0F0",
-      100: "#FFDDDE",
-      200: "#FFC1C2",
-      300: "#FF9698",
-      400: "#FF5A5D",
-      500: "#FF272B",
-      600: "#F80409",
-      700: "#D40105",
-      800: "#AE0609",
-      900: "#900C0F"
-    },
-    green: {
-      50: "#E5F6EA",
-      100: "#C1E7CC",
-      200: "#98D8AC",
-      300: "#6CCA8B",
-      400: "#47BE72",
-      500: "#10B259",
-      600: "#00A34F",
-      700: "#009143",
-      800: "#007F38",
-      900: "#006024"
-    },
-    orange: {
-      50: "#FFF8EC",
-      100: "#FFF0D3",
-      200: "#FFDDA5",
-      300: "#FFC46D",
-      400: "#FF9F32",
-      500: "#FF820A",
-      600: "#FF6900",
-      700: "#CC4B02",
-      800: "#A13A0B",
-      900: "#82320C"
-    },
-    yellow: {
-      50: "#FFFDE7",
-      100: "#FFFAC1",
-      200: "#FFF186",
-      300: "#FFE041",
-      400: "#FFCC0D",
-      500: "#F0B100",
-      600: "#D18800",
-      700: "#A66002",
-      800: "#894B0A",
-      900: "#743D0F"
-    },
-    blue: {
-      50: "#F1F4FD",
-      100: "#DFE7FA",
-      200: "#C5D4F8",
-      300: "#9EB8F2",
-      400: "#7093EA",
-      500: "#4D6DE3",
-      600: "#3950D7",
-      700: "#303EC5",
-      800: "#2D35A0",
-      900: "#29317F"
-    },
-    lightblue: {
-      50: "#EEFAFF",
-      100: "#D9F4FF",
-      200: "#BBEDFF",
-      300: "#8DE3FF",
-      400: "#57D0FF",
-      500: "#30B6FF",
-      600: "#1999F7",
-      700: "#1280E3",
-      800: "#1566B8",
-      900: "#175791"
-    },
-    purple: {
-      50: "#FBF6FE",
-      100: "#F5EAFD",
-      200: "#EDD8FC",
-      300: "#E0BAF8",
-      400: "#CD8DF3",
-      500: "#B961EB",
-      600: "#A541DC",
-      700: "#9230C5",
-      800: "#782B9E",
-      900: "#62247F"
-    },
-    pink: {
-      50: "#FFF4FE",
-      100: "#FFE7FD",
-      200: "#FFCFFA",
-      300: "#FEA9F1",
-      400: "#FD75E7",
-      500: "#F553DA",
-      600: "#D821B6",
-      700: "#B31892",
-      800: "#921676",
-      900: "#781761"
-    },
-    neutral: {
-      50: "#FAFAFA",
-      100: "#F5F5F5",
-      200: "#E5E5E5",
-      300: "#D4D4D4",
-      400: "#A1A1A1",
-      500: "#737373",
-      600: "#525252",
-      700: "#404040",
-      800: "#262626",
-      900: "#171717"
-    },
-    black: "#000000",
-    white: "#FFFFFF"
-  },
-  test: {
-    default: "#ffffff"
-  }
-};
-
 // src/util/getColor.ts
 var getColorClass = (namespace, palette, shade) => {
-  const namespaceMap = colors[namespace];
-  const paletteMap = namespaceMap[palette];
-  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
-  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
 };
 
 // src/components/Avatar/Avatar.tsx
@@ -5906,6 +5784,125 @@ var CardTab_default = CardTab;
 // src/components/Chart/Chart.tsx
 import React3 from "react";
 
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
 // ../../node_modules/@kurkle/color/dist/color.esm.js
 function round(v) {
   return v + 0.5 | 0;

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/dist/tokens/index.d.cts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.cjs';
-export { d as ColorDepth, b as ColorName, a as ColorNamespace, e as ColorProps, C as CustomColors, c as colors } from '../colors-DmMsWD7G.cjs';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, f as ColorProps, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-BNxEsOY3.cjs';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.js';
-export { d as ColorDepth, b as ColorName, a as ColorNamespace, e as ColorProps, C as CustomColors, c as colors } from '../colors-DmMsWD7G.js';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, f as ColorProps, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-BNxEsOY3.js';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",