@rovula/ui 0.0.32 → 0.0.34

package/dist/esm/types/components/Dialog/Dialog.d.ts

@@ -5,7 +5,10 @@ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dia
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean | undefined;
+    closeButtonClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/index.d.ts

@@ -370,7 +370,10 @@ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dia
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean | undefined;
+    closeButtonClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;

package/dist/src/theme/global.css

@@ -218,6 +218,7 @@
   --function-active-hover-bg: rgba(221 205 0 / 0.08);
   --function-active-stroke: rgba(177 164 0 / 0.48);
   --function-active-icon: #ffffff;
+  --text-black: #000000;
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;
@@ -225,7 +226,7 @@
   --text-grey-medium: #7e7e7e;
   --text-grey-light: #9e9e9e;
   --text-white: #ffffff;
-  --base-color-bg: #ffffff;
+  --base-color-bg: #f5f5f5;
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
@@ -315,13 +316,13 @@
   --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
   --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
   --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
-  --other-transparency-white-08: rgba(255 255 255 / 0.08);
+  --other-transparency-white-8: rgba(255 255 255 / 0.08);
   --other-transparency-white-12: rgba(255 255 255 / 0.12);
   --other-transparency-white-16: rgba(255 255 255 / 0.16);
   --other-transparency-white-24: rgba(255 255 255 / 0.24);
   --other-transparency-white-32: rgba(255 255 255 / 0.32);
   --other-transparency-white-48: rgba(255 255 255 / 0.48);
-  --other-transparency-black-08: rgba(0 0 0 / 0.08);
+  --other-transparency-black-8: rgba(0 0 0 / 0.08);
   --other-transparency-black-12: rgba(0 0 0 / 0.12);
   --other-transparency-black-16: rgba(0 0 0 / 0.16);
   --other-transparency-black-24: rgba(0 0 0 / 0.24);
@@ -3286,6 +3287,11 @@ body {
   background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-bg {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-bg2 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3296,6 +3302,11 @@ body {
   background-color: color-mix(in srgb, var(--base-color-bg3) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-guideline-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-guideline-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-popup {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3306,11 +3317,26 @@ body {
   background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-popup-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-popup-highlight {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-base-workspace-stroke {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -3616,11 +3642,6 @@ body {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-grey {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-grey-default) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .bg-grey-10 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3701,11 +3722,6 @@ body {
   background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-grey-foreground {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .bg-grey-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-grey-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3736,11 +3752,6 @@ body {
   background-color: color-mix(in srgb, var(--other-transparency-grey-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-grey2 {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-grey2-default) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .bg-grey2-100 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey2-grey2-100) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3791,11 +3802,6 @@ body {
   background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-grey2-foreground {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
-}
-
 .bg-grey2-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-grey2-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4076,6 +4082,21 @@ body {
   background-color: color-mix(in srgb, var(--state-color-primary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-primary-text-outline {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-primary-text-pressed {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-primary-text-solid {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-primary-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-primary-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4226,6 +4247,21 @@ body {
   background-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-secondary-text-outline {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-secondary-text-pressed {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-secondary-text-solid {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-secondary-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-secondary-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4266,6 +4302,66 @@ body {
   background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-success {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-100 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-200 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-300 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-400 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-50 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-500 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-600 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-700 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-800 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-900 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-success-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-success-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-success-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4301,6 +4397,11 @@ body {
   background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-tertiary {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-tertiary-10 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4386,6 +4487,11 @@ body {
   background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-tertiary-foreground {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--tertiary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-tertiary-hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4406,6 +4512,21 @@ body {
   background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-tertiary-text-outline {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-tertiary-text-pressed {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
+.bg-tertiary-text-solid {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-tertiary-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4436,6 +4557,11 @@ body {
   background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-text-black {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-text-dark {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5301,6 +5427,11 @@ body {
   color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-button-error-flat-default {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * var(--tw-text-opacity)), transparent);

package/dist/stories/ColorGroupPreview.js

@@ -6,16 +6,12 @@ export default function ColorGroupPreview() {
                     "bg-primary-foreground",
                     "bg-secondary",
                     "bg-secondary-foreground",
-                    "bg-tertinary",
-                    "bg-tertinary-foreground",
-                    "bg-grey",
-                    "bg-grey-foreground",
-                    "bg-grey2",
-                    "bg-grey2-foreground",
+                    "bg-tertiary",
+                    "bg-tertiary-foreground",
                     "bg-info",
                     "bg-info-foreground",
-                    "bg-sucess",
-                    "bg-sucess-foreground",
+                    "bg-success",
+                    "bg-success-foreground",
                     "bg-warning",
                     "bg-warning-foreground",
                     "bg-error",
@@ -147,16 +143,16 @@ export default function ColorGroupPreview() {
                     "bg-info-800",
                     "bg-info-900",
                 ] }), _jsx(ColorItems, { title: "Success", col: 5, colors: [
-                    "bg-sucess-50",
-                    "bg-sucess-100",
-                    "bg-sucess-200",
-                    "bg-sucess-300",
-                    "bg-sucess-400",
-                    "bg-sucess-500",
-                    "bg-sucess-600",
-                    "bg-sucess-700",
-                    "bg-sucess-800",
-                    "bg-sucess-900",
+                    "bg-success-50",
+                    "bg-success-100",
+                    "bg-success-200",
+                    "bg-success-300",
+                    "bg-success-400",
+                    "bg-success-500",
+                    "bg-success-600",
+                    "bg-success-700",
+                    "bg-success-800",
+                    "bg-success-900",
                 ] }), _jsx(ColorItems, { title: "Warning", col: 5, colors: [
                     "bg-warning-50",
                     "bg-warning-100",
@@ -250,14 +246,16 @@ export default function ColorGroupPreview() {
                     "bg-black-transparent-32",
                     "bg-black-transparent-48",
                 ] }), _jsx(ColorItems, { title: "Base color", colors: [
-                    "bg-base-bg1",
+                    "bg-base-bg",
                     "bg-base-bg2",
                     "bg-base-bg3",
-                    "bg-base-wrokspace-stroke",
-                    "bg-base-guildline-stroke",
+                    "bg-base-stroke",
+                    "bg-base-workspace-stroke",
+                    "bg-base-guideline-stroke",
                     "bg-base-popup",
-                    "bg-base-popup-hightlight",
+                    "bg-base-popup-highlight",
                     "bg-base-popup-curtain",
+                    "bg-base-popup-foreground",
                 ] }), _jsx(ColorItems, { title: "Input color", col: 3, colors: [
                     "bg-input-default-text",
                     "bg-input-default-stroke",

package/dist/theme/presets/colors.js

@@ -25,6 +25,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        "text-black": withColorMixin("--text-black"),
         "text-dark": withColorMixin("--text-dark"),
         "text-medium": withColorMixin("--text-medium"),
         "text-light": withColorMixin("--text-light"),

package/dist/theme/tokens/color.css

@@ -24,6 +24,7 @@
   --function-active-stroke: rgba(177 164 0 / 0.48);
   --function-active-icon: #ffffff;
 
+  --text-black: #000000;
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;
@@ -32,7 +33,7 @@
   --text-grey-light: #9e9e9e;
   --text-white: #ffffff;
 
-  --base-color-bg: #ffffff;
+  --base-color-bg: #f5f5f5;
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;

package/dist/theme/tokens/transparent.css

@@ -53,13 +53,13 @@
   --other-transparency-grey2-24: rgba(145 158 171 / 0.24);
   --other-transparency-grey2-32: rgba(145 158 171 / 0.32);
   --other-transparency-grey2-48: rgba(145 158 171 / 0.48);
-  --other-transparency-white-08: rgba(255 255 255 / 0.08);
+  --other-transparency-white-8: rgba(255 255 255 / 0.08);
   --other-transparency-white-12: rgba(255 255 255 / 0.12);
   --other-transparency-white-16: rgba(255 255 255 / 0.16);
   --other-transparency-white-24: rgba(255 255 255 / 0.24);
   --other-transparency-white-32: rgba(255 255 255 / 0.32);
   --other-transparency-white-48: rgba(255 255 255 / 0.48);
-  --other-transparency-black-08: rgba(0 0 0 / 0.08);
+  --other-transparency-black-8: rgba(0 0 0 / 0.08);
   --other-transparency-black-12: rgba(0 0 0 / 0.12);
   --other-transparency-black-16: rgba(0 0 0 / 0.16);
   --other-transparency-black-24: rgba(0 0 0 / 0.24);

package/dist/theme/utils.js

@@ -13,7 +13,7 @@ export const generateColorConfig = (
   });
 
   colors[`${baseName}-foreground`] = withColorMixin(`--${baseName}-foreground`);
-  colors[`${baseName}`] = withColorMixin(`--state-color-${baseName}-default`);
+  colors[`${baseName}`] = withColorMixin(`--state-color-${baseName}-default`); // TODO should be dynamic
   colors[`${baseName}-default`] = withColorMixin(
     `--state-color-${baseName}-default`
   );
@@ -33,6 +33,17 @@ export const generateColorConfig = (
     `--state-color-${baseName}-active`
   );
 
+  // text
+  colors[`${baseName}-text-solid`] = withColorMixin(
+    `--state-color-${baseName}-text-solid`
+  );
+  colors[`${baseName}-text-outline`] = withColorMixin(
+    `--state-color-${baseName}-text-outline`
+  );
+  colors[`${baseName}-text-pressed`] = withColorMixin(
+    `--state-color-${baseName}-text-pressed`
+  );
+
   return colors;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,8 @@
     "storybook:serve-css": "npx tailwindcss -i ./src/theme/global.css -o ./dist/src/theme/global.css",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee"
+    "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee",
+    "deploy-storybook": "npx wrangler pages deploy storybook-static --project-name=rovula-ui --branch=main"
   },
   "files": [
     "dist/**/*",

package/src/components/Dialog/Dialog.tsx

@@ -31,26 +31,47 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground">
-        <XMarkIcon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    closeButtonClassName?: string;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      showCloseButton = false,
+      closeButtonClassName,
+      ...props
+    },
+    ref
+  ) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            className={cn(
+              "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground",
+              closeButtonClassName
+            )}
+          >
+            <XMarkIcon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

package/src/stories/ColorGroupPreview.tsx

@@ -12,16 +12,12 @@ export default function ColorGroupPreview() {
           "bg-primary-foreground",
           "bg-secondary",
           "bg-secondary-foreground",
-          "bg-tertinary",
-          "bg-tertinary-foreground",
-          "bg-grey",
-          "bg-grey-foreground",
-          "bg-grey2",
-          "bg-grey2-foreground",
+          "bg-tertiary",
+          "bg-tertiary-foreground",
           "bg-info",
           "bg-info-foreground",
-          "bg-sucess",
-          "bg-sucess-foreground",
+          "bg-success",
+          "bg-success-foreground",
           "bg-warning",
           "bg-warning-foreground",
           "bg-error",
@@ -206,16 +202,16 @@ export default function ColorGroupPreview() {
         title="Success"
         col={5}
         colors={[
-          "bg-sucess-50",
-          "bg-sucess-100",
-          "bg-sucess-200",
-          "bg-sucess-300",
-          "bg-sucess-400",
-          "bg-sucess-500",
-          "bg-sucess-600",
-          "bg-sucess-700",
-          "bg-sucess-800",
-          "bg-sucess-900",
+          "bg-success-50",
+          "bg-success-100",
+          "bg-success-200",
+          "bg-success-300",
+          "bg-success-400",
+          "bg-success-500",
+          "bg-success-600",
+          "bg-success-700",
+          "bg-success-800",
+          "bg-success-900",
         ]}
       />
       <ColorItems
@@ -342,14 +338,16 @@ export default function ColorGroupPreview() {
       <ColorItems
         title="Base color"
         colors={[
-          "bg-base-bg1",
+          "bg-base-bg",
           "bg-base-bg2",
           "bg-base-bg3",
-          "bg-base-wrokspace-stroke",
-          "bg-base-guildline-stroke",
+          "bg-base-stroke",
+          "bg-base-workspace-stroke",
+          "bg-base-guideline-stroke",
           "bg-base-popup",
-          "bg-base-popup-hightlight",
+          "bg-base-popup-highlight",
           "bg-base-popup-curtain",
+          "bg-base-popup-foreground",
         ]}
       />
       <ColorItems

package/src/theme/presets/colors.js

@@ -25,6 +25,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        "text-black": withColorMixin("--text-black"),
         "text-dark": withColorMixin("--text-dark"),
         "text-medium": withColorMixin("--text-medium"),
         "text-light": withColorMixin("--text-light"),

package/src/theme/tokens/color.css

@@ -24,6 +24,7 @@
   --function-active-stroke: rgba(177 164 0 / 0.48);
   --function-active-icon: #ffffff;
 
+  --text-black: #000000;
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;
@@ -32,7 +33,7 @@
   --text-grey-light: #9e9e9e;
   --text-white: #ffffff;
 
-  --base-color-bg: #ffffff;
+  --base-color-bg: #f5f5f5;
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;