@ztwoint/z-ui 0.1.10 → 0.1.12

package/README.md

@@ -19,6 +19,7 @@ npm install @ztwoint/z-ui
 # or
 yarn add @ztwoint/z-ui
 ```
+
 > Note: To use this package on a remote server, you need to set up an SSH key with access to this repository.
 
-This package will be published to npm registry later.
+This package will be published to npm registry later.

package/dist/components/assets/icons/circle-check-filled.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function CircleCheckFilled({ fill, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default CircleCheckFilled;

package/dist/components/assets/icons/media-record.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function MediaRecord({ fill, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default MediaRecord;

package/dist/components/button/button.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as x, Fragment as g } from "react/jsx-runtime";
 import { Slot as O } from "@radix-ui/react-slot";
 import { cva as z } from "class-variance-authority";
 import * as w from "react";
-import { cn as n } from "../../lib/utils.js";
+import { cn as d } from "../../lib/utils.js";
 const N = z(
   "box-border h-7.5 leading-none-medium-sm flex items-center justify-center whitespace-nowrap rounded-lg  select-none hover:cursor-pointer active:outline-none border-solid",
   {
@@ -13,10 +13,10 @@ const N = z(
         ghost: [""]
       },
       shade: {
-        neutral: "button-primary-neutral-surface-default border-black  text-inverted  hover:button-primary-neutral-surface-hover active:button-primary-neutral-surface-pressed  disabled:button-primary-neutral-surface-disabled disabled:text-inverted-disabled",
-        brand: "button-primary-brand-surface-default border-(--color-accent-600)  text-inverted hover:button-primary-brand-surface-hover active:button-primary-brand-surface-pressed disabled:button-primary-brand-surface-disabled disabled:text-inverted-disabled",
-        danger: "button-primary-danger-surface-default border-(--color-rose-600) text-inverted hover:button-primary-danger-surface-hover active:button-primary-danger-surface-pressed disabled:button-primary-danger-surface-disabled disabled:text-inverted-disabled",
-        neutralGhost: "text-default-primary  active:text-default-disabled disabled:text-default-disabled"
+        neutral: "button-primary-neutral-surface-default border-black disabled:border-none text-inverted-primary  hover:button-primary-neutral-surface-hover active:button-primary-neutral-surface-pressed  disabled:button-primary-neutral-surface-disabled disabled:text-neutral-muted",
+        brand: "button-primary-brand-surface-default border-(--color-accent-600)  text-inverted-primary hover:button-primary-brand-surface-hover active:button-primary-brand-surface-pressed disabled:button-primary-brand-surface-disabled disabled:text-neutral-muted",
+        danger: "button-primary-danger-surface-default border-(--color-red-600) text-inverted-primary hover:button-primary-danger-surface-hover active:button-primary-danger-surface-pressed disabled:button-primary-danger-surface-disabled disabled:text-neutral-muted",
+        neutralGhost: "text-neutral-primary hover:text-neutral-secondary active:text-neutral-muted disabled:text-neutral-muted"
       },
       size: {
         large: "gap-1",
@@ -72,24 +72,24 @@ const N = z(
   }
 ), k = w.forwardRef(
   ({
-    className: u,
+    className: i,
     shade: c,
     size: b,
     variant: f,
     asChild: o = !1,
     leftIcon: a,
     rightIcon: t,
-    label: p,
+    label: m,
     children: l,
-    ...m
-  }, v) => {
-    const y = o ? O : "button", r = p || l, s = !r && !!(a || t), i = s ? a || t : null, h = n(
-      N({ shade: c, size: b, variant: f, iconOnly: s, className: u })
-    ), d = "w-3.5 h-3.5";
-    return /* @__PURE__ */ e(y, { className: h, ref: v, ...m, children: o ? l : s ? i ? /* @__PURE__ */ e("span", { className: d, children: i }) : null : /* @__PURE__ */ x(g, { children: [
-      a && /* @__PURE__ */ e("span", { className: n(d), children: a }),
+    ...p
+  }, y) => {
+    const v = o ? O : "button", r = m || l, n = !r && !!(a || t), u = n ? a || t : null, h = d(
+      N({ shade: c, size: b, variant: f, iconOnly: n, className: i })
+    ), s = "w-3.5 h-3.5";
+    return /* @__PURE__ */ e(v, { className: h, ref: y, ...p, children: o ? l : n ? u ? /* @__PURE__ */ e("span", { className: s, children: u }) : null : /* @__PURE__ */ x(g, { children: [
+      a && /* @__PURE__ */ e("span", { className: d(s), children: a }),
       r && /* @__PURE__ */ e("span", { children: r }),
-      t && /* @__PURE__ */ e("span", { className: n(d), children: t })
+      t && /* @__PURE__ */ e("span", { className: d(s), children: t })
     ] }) });
   }
 );

package/dist/components/button/button.stories.d.ts

@@ -14,6 +14,15 @@ export declare const Small: Story;
 export declare const DisabledFilled: Story;
 export declare const DisabledStroke: Story;
 export declare const DisabledGhost: Story;
+export declare const DisabledFilledNeutral: Story;
+export declare const DisabledFilledBrand: Story;
+export declare const DisabledFilledDanger: Story;
+export declare const DisabledStrokeNeutral: Story;
+export declare const DisabledStrokeBrand: Story;
+export declare const DisabledStrokeDanger: Story;
+export declare const DisabledGhostNeutral: Story;
+export declare const DisabledGhostBrand: Story;
+export declare const DisabledGhostDanger: Story;
 export declare const WithLeftIcon: Story;
 export declare const WithRightIcon: Story;
 export declare const WithBothIcons: Story;

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,12 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare function Z2Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {}): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Z2Dialog, Z2DialogContent, Z2DialogDescription, Z2DialogFooter, Z2DialogHeader, Z2DialogOverlay, Z2DialogPortal, Z2DialogClose, Z2DialogTitle, Z2DialogTrigger, };

package/dist/components/dialog/dialog.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Z2Dialog } from './dialog';
+declare const meta: Meta<typeof Z2Dialog>;
+export default meta;
+type Story = StoryObj<typeof Z2Dialog>;
+export declare const Default: Story;
+export declare const WithLongDescription: Story;
+export declare const CustomFooter: Story;
+export declare const Fullscreen: Story;
+export declare const CloseInHeader: Story;

package/dist/components/stepper/stepper-item/stepper-item.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const z2StepperItemVariants: (props?: ({
+    state?: "disabled" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface Z2StepperItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof z2StepperItemVariants> {
+    label: string;
+}
+export declare const Z2StepperItem: React.ForwardRefExoticComponent<Z2StepperItemProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/stepper/stepper-item/stepper-item.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Z2StepperItem as StepperItem } from './stepper-item';
+declare const meta: Meta<typeof StepperItem>;
+export default meta;
+type Story = StoryObj<typeof StepperItem>;
+export declare const WithLabelActive: Story;
+export declare const WithLabelCompleted: Story;
+export declare const WithLabelDisabled: Story;
+export declare const WithoutLabelActive: Story;
+export declare const WithoutLabelCompleted: Story;
+export declare const WithoutLabelDisabled: Story;

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type StepperState = 'active' | 'completed' | 'disabled';
+export type StepperItemType = {
+    id: string;
+    label: string;
+    state?: StepperState;
+};
+export type StepperHandle = {
+    handleNext: (label?: string) => void;
+    handlePrev: (label?: string) => void;
+    reset: () => void;
+    setStepState: (index: number, state: StepperState) => void;
+};
+declare const Z2Stepper: React.ForwardRefExoticComponent<{
+    items: StepperItemType[];
+} & React.RefAttributes<StepperHandle>>;
+export default Z2Stepper;

package/dist/components/stepper/stepper.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Z2Stepper } from './stepper';
+declare const meta: Meta<typeof Z2Stepper>;
+export default meta;
+type Story = StoryObj<typeof Z2Stepper>;
+export declare const Default: Story;
+export declare const WithState: Story;
+export declare const AllCompleted: Story;
+export declare const AllDisabled: Story;
+export declare const CustomLabels: Story;
+export declare const ImperativeApi: Story;

package/dist/css/config/colors/backgrounds.css

@@ -16,5 +16,5 @@
 }
 
 @utility bg-neutral-transparent {
-  background-color: var(--color-alpha-white-00);
+  background-color: var(--color-alpha-two-00);
 }

package/dist/css/config/colors/components/alert.css

@@ -1,6 +1,6 @@
 /* NEUTRAL */
 .c-alert-neutral-stroke {
-  border-color: var(--color-alpha-white-50);
+  border-color: var(--color-alpha-two-50);
 }
 
 .c-alert-neutral-bg {

package/dist/css/config/colors/components/button.css

@@ -36,15 +36,15 @@
 
 /* Type : Filled Style : Danger */
 @utility button-primary-danger-surface-default {
-  background-color: var(--color-rose-600);
+  background-color: var(--color-red-600);
 }
 
 @utility button-primary-danger-surface-hover {
-  background-color: var(--color-rose-700);
+  background-color: var(--color-red-700);
 }
 
 @utility button-primary-danger-surface-pressed {
-  background-color: var(--color-rose-500);
+  background-color: var(--color-red-500);
 }
 
 @utility button-primary-danger-surface-disabled {
@@ -82,12 +82,12 @@
 }
 
 @utility text-default-danger {
-  color: var(--color-rose-600);
+  color: var(--color-red-600);
 }
 
 /* Shadow utility class */
 @utility shadow-default {
   box-shadow:
-    0px 1px 2px 0px var(--color-alpha-dark-50),
+    0px 1px 2px 0px var(--color-alpha-one-50),
     0px 0px 0px 0.5px var(--color-neutral-150);
 }

package/dist/css/config/colors/components/tab.css

@@ -57,4 +57,4 @@
 /* Hover state for icon */
 [data-slot='tabs-trigger']:hover .tab-icon {
   color: var(--color-neutral-950) !important;
-}
+}

package/dist/css/config/colors/defaults.css

@@ -25,17 +25,17 @@
   --color-accent-900: #1e3a8a;
   --color-accent-950: #172554;
 
-  --color-rose-50: #fef2f2;
-  --color-rose-100: #fee2e2;
-  --color-rose-200: #fecaca;
-  --color-rose-300: #fca5a5;
-  --color-rose-400: #f87171;
-  --color-rose-500: #ef4444;
-  --color-rose-600: #dc2626;
-  --color-rose-700: #b91c1c;
-  --color-rose-800: #991b1b;
-  --color-rose-900: #7f1d1d;
-  --color-rose-950: #450a0a;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
 
   --color-amber-50: #fffbeb;
   --color-amber-100: #fef3c7;
@@ -85,29 +85,53 @@
   --color-sky-900: #0c4a6e;
   --color-sky-950: #082f49;
 
-  --color-alpha-dark-00: rgba(0, 0, 0, 0);
-  --color-alpha-dark-50: rgba(0, 0, 0, 0.05);
-  --color-alpha-dark-100: rgba(0, 0, 0, 0.1);
-  --color-alpha-dark-150: rgba(0, 0, 0, 0.15);
-  --color-alpha-dark-200: rgba(0, 0, 0, 0.2);
-  --color-alpha-dark-300: rgba(0, 0, 0, 0.3);
-  --color-alpha-dark-400: rgba(0, 0, 0, 0.4);
-  --color-alpha-dark-500: rgba(0, 0, 0, 0.5);
-  --color-alpha-dark-600: rgba(0, 0, 0, 0.6);
-  --color-alpha-dark-700: rgba(0, 0, 0, 0.7);
-  --color-alpha-dark-800: rgba(0, 0, 0, 0.8);
-  --color-alpha-dark-900: rgba(0, 0, 0, 0.9);
+  --color-alpha-one-00: rgba(0, 0, 0, 0);
+  --color-alpha-one-50: rgba(0, 0, 0, 0.05);
+  --color-alpha-one-100: rgba(0, 0, 0, 0.1);
+  --color-alpha-one-150: rgba(0, 0, 0, 0.15);
+  --color-alpha-one-200: rgba(0, 0, 0, 0.2);
+  --color-alpha-one-300: rgba(0, 0, 0, 0.3);
+  --color-alpha-one-400: rgba(0, 0, 0, 0.4);
+  --color-alpha-one-500: rgba(0, 0, 0, 0.5);
+  --color-alpha-one-600: rgba(0, 0, 0, 0.6);
+  --color-alpha-one-700: rgba(0, 0, 0, 0.7);
+  --color-alpha-one-800: rgba(0, 0, 0, 0.8);
+  --color-alpha-one-900: rgba(0, 0, 0, 0.9);
 
-  --color-alpha-white-00: rgba(255, 255, 255, 0);
-  --color-alpha-white-50: rgba(255, 255, 255, 0.05);
-  --color-alpha-white-100: rgba(255, 255, 255, 0.1);
-  --color-alpha-white-150: rgba(255, 255, 255, 0.15);
-  --color-alpha-white-200: rgba(255, 255, 255, 0.2);
-  --color-alpha-white-300: rgba(255, 255, 255, 0.3);
-  --color-alpha-white-400: rgba(255, 255, 255, 0.4);
-  --color-alpha-white-500: rgba(255, 255, 255, 0.5);
-  --color-alpha-white-600: rgba(255, 255, 255, 0.6);
-  --color-alpha-white-700: rgba(255, 255, 255, 0.7);
-  --color-alpha-white-800: rgba(255, 255, 255, 0.8);
-  --color-alpha-white-900: rgba(255, 255, 255, 0.9);
+  --color-alpha-two-00: rgba(255, 255, 255, 0);
+  --color-alpha-two-50: rgba(255, 255, 255, 0.05);
+  --color-alpha-two-100: rgba(255, 255, 255, 0.1);
+  --color-alpha-two-150: rgba(255, 255, 255, 0.15);
+  --color-alpha-two-200: rgba(255, 255, 255, 0.2);
+  --color-alpha-two-300: rgba(255, 255, 255, 0.3);
+  --color-alpha-two-400: rgba(255, 255, 255, 0.4);
+  --color-alpha-two-500: rgba(255, 255, 255, 0.5);
+  --color-alpha-two-600: rgba(255, 255, 255, 0.6);
+  --color-alpha-two-700: rgba(255, 255, 255, 0.7);
+  --color-alpha-two-800: rgba(255, 255, 255, 0.8);
+  --color-alpha-two-900: rgba(255, 255, 255, 0.9);
+
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #ede9fe;
+  --color-purple-200: #ddd6fe;
+  --color-purple-300: #c4b5fd;
+  --color-purple-400: #a78bfa;
+  --color-purple-500: #8b5cf6;
+  --color-purple-600: #7c3aed;
+  --color-purple-700: #6d28d9;
+  --color-purple-800: #5b21b6;
+  --color-purple-900: #4c1d95;
+  --color-purple-950: #2e1065;
+
+  --color-purple-alt-50: #201b2b;
+  --color-purple-alt-100: #382a58;
+  --color-purple-alt-200: #503885;
+  --color-purple-alt-300: #6746b2;
+  --color-purple-alt-400: #7f55df;
+  --color-purple-alt-500: #8b5cf6;
+  --color-purple-alt-600: #976cf7;
+  --color-purple-alt-700: #ae8df9;
+  --color-purple-alt-800: #c5adfb;
+  --color-purple-alt-900: #dccefc;
+  --color-purple-alt-950: #f3efff;
 }

package/dist/css/config/colors/icons.css

@@ -45,11 +45,11 @@
 
 /* inverted */
 @utility icon-inverted {
-  fill: var(--color-alpha-white-500);
+  fill: var(--color-alpha-two-500);
 }
 
 @utility icon-inverted-disabled {
-  fill: var(--color-alpha-white-400);
+  fill: var(--color-alpha-two-400);
 }
 
 @utility icon-inverted-attention {

package/dist/css/config/colors/overlay.css

@@ -1,3 +1,3 @@
 @utility overlay {
-  background-color: var(--color-alpha-dark-500);
+  background-color: var(--color-alpha-one-500);
 }

package/dist/css/config/colors/shape.css

@@ -24,7 +24,7 @@
 }
 
 @utility shape-neutral-danger {
-  fill: var(--color-rose-600);
+  fill: var(--color-red-600);
 }
 
 @utility shape-neutral-warning {
@@ -45,11 +45,11 @@
 
 /* shape: inverted */
 @utility shape-inverted-default {
-  fill: var(--color-alpha-white-500);
+  fill: var(--color-alpha-two-500);
 }
 
 @utility shape-inverted-disabled {
-  fill: var(--color-alpha-white-400);
+  fill: var(--color-alpha-two-400);
 }
 
 @utility shape-inverted-attention {
@@ -61,7 +61,7 @@
 }
 
 @utility shape-inverted-danger {
-  fill: var(--color-rose-500);
+  fill: var(--color-red-500);
 }
 
 @utility shape-inverted-warning {
@@ -127,11 +127,11 @@
 
 /* shape-bg: inverted */
 @utility shape-bg-inverted-default {
-  background-color: var(--color-alpha-white-500);
+  background-color: var(--color-alpha-two-500);
 }
 
 @utility shape-bg-inverted-disabled {
-  background-color: var(--color-alpha-white-400);
+  background-color: var(--color-alpha-two-400);
 }
 
 @utility shape-bg-inverted-attention {

package/dist/css/config/colors/stroke.css

@@ -1,9 +1,17 @@
-/* For stroke/borders accross ui */
+/* For stroke/borders across ui */
 /* solid */
-@utility stroke-solid-default {
+@utility stroke-solid-light {
+  border-color: var(--color-neutral-100);
+}
+
+@utility stroke-solid-medium {
   border-color: var(--color-neutral-150);
 }
 
+@utility stroke-solid-high {
+  border-color: var(--color-neutral-200);
+}
+
 @utility stroke-solid-hover {
   border-color: var(--color-neutral-300);
 }
@@ -13,7 +21,7 @@
 }
 
 @utility stroke-solid-attention {
-  border-color: var(--color-amber-600);
+  border-color: var(--color-neutral-950);
 }
 
 @utility stroke-solid-highlight {
@@ -21,12 +29,21 @@
 }
 
 /* transparent */
-@utility stroke-transparent-default {
-  border-color: var(--color-alpha-dark-150);
+
+@utility stroke-transparent-light {
+  border-color: var(--color-alpha-one-100);
+}
+
+@utility stroke-transparent-medium {
+  border-color: var(--color-alpha-one-150);
+}
+
+@utility stroke-transparent-high {
+  border-color: var(--color-alpha-one-200);
 }
 
 @utility stroke-transparent-hover {
-  border-color: var(--color-alpha-dark-300);
+  border-color: var(--color-alpha-one-300);
 }
 
 @utility stroke-transparent-active {
@@ -34,20 +51,19 @@
 }
 
 @utility stroke-transparent-attention {
-  border-color: var(--color-amber-600);
+  border-color: var(--color-neutral-950);
 }
 
 @utility stroke-transparent-highlight {
   border-color: var(--color-accent-300);
 }
 
-/* inverted */
 @utility stroke-inverted-default {
-  border-color: var(--color-alpha-white-100);
+  border-color: var(--color-alpha-two-100);
 }
 
 @utility stroke-inverted-hover {
-  border-color: var(--color-alpha-white-300);
+  border-color: var(--color-alpha-two-300);
 }
 
 @utility stroke-inverted-active {

package/dist/css/config/colors/surfaces.css

@@ -18,7 +18,7 @@
 }
 
 @utility surface-neutral-elevated {
-  background-color: var(--color-alpha-white-100);
+  background-color: var(--color-alpha-two-100);
 }
 
 /* Brand surfaces */
@@ -57,15 +57,15 @@
 
 /* Danger surfaces */
 @utility surface-danger-default {
-  background-color: var(--color-rose-600);
+  background-color: var(--color-red-600);
 }
 
 @utility surface-danger-hover {
-  background-color: var(--color-rose-700);
+  background-color: var(--color-red-700);
 }
 
 @utility surface-danger-pressed {
-  background-color: var(--color-rose-400);
+  background-color: var(--color-red-400);
 }
 
 @utility surface-danger-disabled {
@@ -125,15 +125,15 @@
 
 /* Inverted surfaces */
 @utility surface-inverted-default {
-  background-color: var(--color-alpha-white-150);
+  background-color: var(--color-alpha-two-150);
 }
 
 @utility surface-inverted-hover {
-  background-color: var(--color-alpha-white-300);
+  background-color: var(--color-alpha-two-300);
 }
 
 @utility surface-inverted-pressed {
-  background-color: var(--color-alpha-white-00);
+  background-color: var(--color-alpha-two-00);
 }
 
 @utility surface-inverted-disabled {

package/dist/css/config/colors/text.css

@@ -1,3 +1,88 @@
+/*neutral*/
+
+@utility text-neutral-primary {
+  color: var(--color-neutral-950);
+}
+
+@utility text-neutral-secondary {
+  color: var(--color-neutral-600);
+}
+
+@utility text-neutral-muted {
+  color: var(--color-neutral-400);
+}
+
+/* Inverted */
+@utility text-inverted-primary {
+  color: var(--color-neutral-00);
+}
+
+@utility text-inverted-secondary {
+  color: var(--color-alpha-two-600);
+}
+
+@utility text-inverted-static {
+  color: var(--color-neutral-00);
+}
+
+/*brand*/
+@utility text-brand-primary {
+  color: var(--color-brand-950);
+}
+
+@utility text-brand-secondary {
+  color: var(--color-brand-600);
+}
+
+/*success*/
+@utility text-success-primary {
+  color: var(--color-green-950);
+}
+
+@utility text-success-secondary {
+  color: var(--color-green-600);
+}
+
+/*danger*/
+@utility text-danger-primary {
+  color: var(--color-red-950);
+}
+
+@utility text-danger-secondary {
+  color: var(--color-red-600);
+}
+/*warning*/
+@utility text-warning-primary {
+  color: var(--color-amber-950);
+}
+
+@utility text-warning-secondary {
+  color: var(--color-amber-600);
+}
+
+/*purple*/
+@utility text-purple-primary {
+  color: var(--color-purple-950);
+}
+
+@utility text-purple-secondary {
+  color: var(--color-purple-600);
+}
+
+/*body*/
+@utility text-body-primary {
+  color: var(--color-neutral-950);
+}
+
+@utility text-body-long {
+  color: var(--color-neutral-800);
+}
+
+@utility text-body-short {
+  color: var(--color-neutral-700);
+}
+
+/*pre-exisitng-colors*/
 /* title */
 @utility text-title {
   color: var(--color-neutral-950);
@@ -6,7 +91,6 @@
 @utility text-title-secondary {
   color: var(--color-neutral-400);
 }
-
 /* link */
 @utility text-link {
   color: var(--color-accent-600);
@@ -42,14 +126,6 @@
   color: var(--color-neutral-950);
 }
 
-@utility text-body-long {
-  color: var(--color-neutral-800);
-}
-
-@utility text-body-short {
-  color: var(--color-neutral-700);
-}
-
 /* underline */
 @utility text-underline-highlight {
   color: var(--color-amber-500);
@@ -59,19 +135,6 @@
   color: var(--color-neutral-200);
 }
 
-/* inverted */
-@utility text-inverted {
-  color: var(--color-neutral-00);
-}
-
-@utility text-inverted-secondary {
-  color: var(--color-alpha-white-700);
-}
-
-@utility text-inverted-disabled {
+@utility text-default-muted {
   color: var(--color-neutral-400);
 }
-
-.text-default-muted {
-  color: var(--color-neutral-400);
-}