@upstart.gg/style-system 0.0.23

package/dist/twind.config.js

@@ -0,0 +1,201 @@
+import { defineConfig } from "@twind/core";
+import presetAutoprefix from "@twind/preset-autoprefix";
+import presetTailwind from "@twind/preset-tailwind";
+import presetExt from "@twind/preset-ext";
+import presetLineClamp from "@twind/preset-line-clamp";
+import presetForms from "@twind/preset-tailwind-forms";
+import presetTypo from "@twind/preset-typography";
+import presetContainerQueries from "@twind/preset-container-queries";
+import { modularScale } from "polished";
+export default defineConfig({
+    darkMode: "media",
+    presets: [
+        presetAutoprefix(),
+        presetTailwind({ disablePreflight: false }),
+        presetContainerQueries(),
+        presetExt(),
+        presetLineClamp(),
+        presetForms(),
+        presetTypo(),
+    ],
+    variants: [["hasChildMenudHover", "&:has(.container-menu-wrapper:hover)"]],
+    rules: [
+        [
+            "brick-container",
+            {
+                display: "grid",
+                gridTemplateColumns: "subgrid",
+                gridTemplateRows: "subgrid",
+                gridColumn: "1 / span 12",
+            },
+        ],
+        [
+            // specific padding classes for bricks
+            "brick-p-",
+            ({ $$ }) => ({ padding: `${$$ === "1" ? "1px" : $$ === "0" ? "0" : `${modularScale(+$$, "1rem")}`}` }),
+        ],
+        // ["family-", ({ $$ }) => ({ fontFamily: `var(--font-${$$})` })],
+        ["bg-neutral-", ({ $$ }) => ({ backgroundColor: `var(--color-neutral-${$$})` })],
+        ["bg-accent-", ({ $$ }) => ({ backgroundColor: `var(--color-accent-${$$})` })],
+        ["bg-primary-", ({ $$ }) => ({ backgroundColor: `var(--color-primary-${$$})` })],
+        ["bg-secondary-", ({ $$ }) => ({ backgroundColor: `var(--color-secondary-${$$})` })],
+        ["border-neutral-", ({ $$ }) => ({ borderColor: `var(--color-neutral-${$$})` })],
+        ["border-accent-", ({ $$ }) => ({ borderColor: `var(--color-accent-${$$})` })],
+        ["border-primary-", ({ $$ }) => ({ borderColor: `var(--color-primary-${$$})` })],
+        ["border-secondary-", ({ $$ }) => ({ borderColor: `var(--color-secondary-${$$})` })],
+        /**
+         * Can be used with text-neutral-500, but also text-neutral-500-subtle, text-neutral-500-tonal-subtle, text-neutral-500-strong, etc.
+         */
+        ["text-neutral-", ({ $$ }) => ({ color: `var(--text-neutral-${$$})` })],
+        ["text-accent-", ({ $$ }) => ({ color: `var(--text-accent-${$$})` })],
+        ["text-primary-", ({ $$ }) => ({ color: `var(--text-primary-${$$})` })],
+        ["text-secondary-", ({ $$ }) => ({ color: `var(--text-secondary-${$$})` })],
+        ["outline-primary-", ({ $$ }) => ({ outlineColor: `var(--color-primary-${$$})` })],
+        ["outline-secondary-", ({ $$ }) => ({ outlineColor: `var(--color-secondary-${$$})` })],
+        ["outline-accent-", ({ $$ }) => ({ outlineColor: `var(--color-accent-${$$})` })],
+        ["outline-neutral-", ({ $$ }) => ({ outlineColor: `var(--color-neutral-${$$})` })],
+        ["color-", ({ $$ }) => ({ color: `var(--color-${$$})` })],
+        [
+            "neutral-",
+            ({ $$ }) => ({ backgroundColor: `var(--color-neutral-${$$})`, color: `var(--text-neutral-${$$})` }),
+        ],
+        [
+            "accent-",
+            ({ $$ }) => ({ backgroundColor: `var(--color-accent-${$$})`, color: `var(--text-accent-${$$})` }),
+        ],
+        [
+            "primary-",
+            ({ $$ }) => ({ backgroundColor: `var(--color-primary-${$$})`, color: `var(--text-primary-${$$})` }),
+        ],
+        [
+            "secondary-",
+            ({ $$ }) => ({ backgroundColor: `var(--color-secondary-${$$})`, color: `var(--text-secondary-${$$})` }),
+        ],
+        ["brick-light-", ({ $$ }) => `bg-${$$}-300 text-${$$}-50`],
+        ["brick-normal-", ({ $$ }) => `bg-${$$}-500 text-${$$}-100`],
+        ["brick-dark-", ({ $$ }) => `bg-${$$}-800 text-${$$}-200`],
+        ["hero-1", { fontSize: "clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem)", lineHeight: "1.25" }],
+        ["hero-2", { fontSize: "clamp(2rem, 1.75vw + 1.375rem, 2.875rem)", lineHeight: "1.25" }],
+        ["hero-3", { fontSize: "clamp(2.25rem, 2vw + 1.5rem, 3.25rem)", lineHeight: "1.25" }],
+        ["hero-4", { fontSize: "clamp(2.5rem, 2.25vw + 1.625rem, 3.625rem)", lineHeight: "1.25" }],
+        ["hero-5", { fontSize: "clamp(2.75rem, 2.5vw + 1.75rem, 4rem)", lineHeight: "1.25" }],
+        ["scrollbar-thin", { scrollbarWidth: "thin" }],
+        ["scrollbar-color-", ({ $$ }) => ({ scrollbarColor: `var(--${$$}-6) var(--${$$}-surface)` })],
+        [
+            "button",
+            {
+                color: "var(--color-button-text)",
+                backgroundColor: "var(--color-button-bg)",
+                padding: "0.5rem 1rem",
+                borderRadius: "0.25rem",
+                fontSize: "1rem",
+                cursor: "pointer",
+            },
+        ],
+        [
+            "button-sm",
+            {
+                padding: "0.25rem 0.5rem",
+                fontSize: "0.875rem",
+            },
+        ],
+        [
+            "button-lg",
+            {
+                padding: "0.75rem 1.5rem",
+                fontSize: "1.25rem",
+            },
+        ],
+        [
+            "button-xl",
+            {
+                padding: "1rem 2rem",
+                fontSize: "1.5rem",
+            },
+        ],
+    ],
+    theme: {
+        extend: {
+            colors: {
+                upstart: {
+                    50: "#f2f4fb",
+                    100: "#e7ecf8",
+                    200: "#d3daf2",
+                    300: "#b8c2e9",
+                    400: "#9ba3de",
+                    500: "#8186d3",
+                    600: "#7270c6",
+                    700: "#5b57ab",
+                    800: "#4b498a",
+                    900: "#40406f",
+                    950: "#262541",
+                },
+                dark: {
+                    50: "#f6f6f6",
+                    100: "#e7e7e7",
+                    200: "#d1d1d1",
+                    300: "#b0b0b0",
+                    400: "#888888",
+                    500: "#6d6d6d",
+                    600: "#5d5d5d",
+                    700: "#4f4f4f",
+                    800: "#454545",
+                    900: "#333333",
+                    950: "#262626",
+                },
+                primary: {
+                    50: "var(--color-primary-50)",
+                    100: "var(--color-primary-100)",
+                    200: "var(--color-primary-200)",
+                    300: "var(--color-primary-300)",
+                    400: "var(--color-primary-400)",
+                    500: "var(--color-primary-500)",
+                    600: "var(--color-primary-600)",
+                    700: "var(--color-primary-700)",
+                    800: "var(--color-primary-800)",
+                    900: "var(--color-primary-900)",
+                },
+                secondary: {
+                    50: "var(--color-secondary-50)",
+                    100: "var(--color-secondary-100)",
+                    200: "var(--color-secondary-200)",
+                    300: "var(--color-secondary-300)",
+                    400: "var(--color-secondary-400)",
+                    500: "var(--color-secondary-500)",
+                    600: "var(--color-secondary-600)",
+                    700: "var(--color-secondary-700)",
+                    800: "var(--color-secondary-800)",
+                    900: "var(--color-secondary-900)",
+                },
+                accent: {
+                    50: "var(--color-accent-50)",
+                    100: "var(--color-accent-100)",
+                    200: "var(--color-accent-200)",
+                    300: "var(--color-accent-300)",
+                    400: "var(--color-accent-400)",
+                    500: "var(--color-accent-500)",
+                    600: "var(--color-accent-600)",
+                    700: "var(--color-accent-700)",
+                    800: "var(--color-accent-800)",
+                    900: "var(--color-accent-900)",
+                },
+                neutral: {
+                    50: "var(--color-neutral-50)",
+                    100: "var(--color-neutral-100)",
+                    200: "var(--color-neutral-200)",
+                    300: "var(--color-neutral-300)",
+                    400: "var(--color-neutral-400)",
+                    500: "var(--color-neutral-500)",
+                    600: "var(--color-neutral-600)",
+                    700: "var(--color-neutral-700)",
+                    800: "var(--color-neutral-800)",
+                    900: "var(--color-neutral-900)",
+                },
+            },
+            containers: {
+                mobile: "1px",
+                desktop: "1024px",
+            },
+        },
+    },
+});

package/dist/twind.d.ts

@@ -0,0 +1,20 @@
+import { css as css$, observe as observe$ } from "@twind/core";
+export { getSheet } from "@twind/core";
+export { default as inline } from "@twind/with-react/inline";
+export declare const colors: Record<string, Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>>;
+export declare const sheet: import("@twind/core").Sheet<string[]> | import("@twind/core").Sheet<CSSStyleSheet>;
+export declare const tw: import("@twind/core").Twind<import("@twind/core").BaseTheme & import("@twind/preset-tailwind").TailwindTheme & import("@twind/preset-container-queries").ContainerQueriesTheme & import("@twind/preset-line-clamp").LineClampTheme & import("@twind/preset-typography").TypographyTheme & {
+    extend: never;
+}, string[]>;
+export declare function setupTwindReact(prod?: any): void;
+export declare const tx: import("@twind/core").TxFunction;
+export declare const css: typeof css$;
+export declare const style: import("@twind/core").StyleFunction;
+export declare const apply: import("@twind/core").Nested;
+export declare const observe: typeof observe$;
+export declare const injectGlobal: import("@twind/core").InjectGlobalFunction;
+export declare const keyframes: import("@twind/core").KeyframesFunction & {
+    [label: string]: import("@twind/core").KeyframesFunction;
+} & {
+    [label: string]: import("@twind/core").KeyframesFunction;
+};

package/dist/twind.js

@@ -0,0 +1,40 @@
+import install from "@twind/with-react";
+import { twind, virtual, cssom, tx as tx$, css as css$, style as style$, apply as apply$, injectGlobal as injectGlobal$, keyframes as keyframes$, observe as observe$, } from "@twind/core";
+import config from "./twind.config";
+export { getSheet } from "@twind/core";
+export { default as inline } from "@twind/with-react/inline";
+export const colors = config.theme.colors;
+function isProd() {
+    //@ts-ignore
+    if (typeof import.meta.env !== "undefined") {
+        //@ts-ignore
+        return import.meta.env.PROD ?? false;
+    }
+    else if (typeof process !== "undefined" && typeof process.env !== "undefined") {
+        return process.env.NODE_ENV === "production";
+    }
+    return true;
+}
+// export default install(config, isProd());
+export const sheet = typeof document === "undefined" ? virtual() : cssom("style[data-library]");
+// @ts-ignore
+export const tw = /* #__PURE__ */ twind(config, 
+// support SSR and use a different selector to not get the twind default style sheet
+sheet);
+export function setupTwindReact(prod = isProd()) {
+    install(config, prod);
+    addEventListener("warning", (event) => {
+        // @ts-ignore
+        const warning = event.detail;
+        if (warning.code === "TWIND_INVALID_CLASS") {
+            event.preventDefault();
+        }
+    });
+}
+export const tx = /* #__PURE__ */ tx$.bind(tw);
+export const css = /* #__PURE__ */ css$.bind(tw);
+export const style = /* #__PURE__ */ style$.bind(tw);
+export const apply = /* #__PURE__ */ apply$.bind(tw);
+export const observe = /* #__PURE__ */ observe$.bind(tw);
+export const injectGlobal = /* #__PURE__ */ injectGlobal$.bind(tw);
+export const keyframes = /* #__PURE__ */ keyframes$.bind(tw);

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@upstart.gg/style-system",
+  "version": "0.0.23",
+  "description": "Base tailwindcss setup with some extra plugins as well as colors and editor styles",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/system.d.ts",
+      "import": "./dist/system.js"
+    },
+    "./twind-ssr": {
+      "types": "./dist/twind-ssr.d.ts",
+      "import": "./dist/twind-ssr.js"
+    },
+    "./twind": {
+      "types": "./dist/twind.d.ts",
+      "import": "./dist/twind.js"
+    },
+    "./*.css": {
+      "import": "./src/*.css"
+    },
+    "./tailwind-preset": {
+      "import": "./src/tailwind.config.js",
+      "require": "./src/tailwind.config.js"
+    },
+    "./colors": {
+      "import": "./src/colors.js",
+      "require": "./src/colors.js"
+    }
+  },
+  "keywords": [],
+  "author": "Matthias Etienne",
+  "license": "AGPL-3.0-only",
+  "dependencies": {
+    "@formkit/auto-animate": "0.8.2",
+    "@radix-ui/react-context-menu": "2.2.2",
+    "@radix-ui/react-toggle-group": "1.1.0",
+    "@radix-ui/themes": "3.1.4",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.13",
+    "@twind/core": "1.1.3",
+    "@twind/preset-autoprefix": "1.0.7",
+    "@twind/preset-container-queries": "1.0.7",
+    "@twind/preset-ext": "1.0.7",
+    "@twind/preset-line-clamp": "1.0.7",
+    "@twind/preset-tailwind": "1.1.4",
+    "@twind/preset-tailwind-forms": "1.1.2",
+    "@twind/preset-typography": "1.0.7",
+    "@twind/with-react": "1.1.3",
+    "@whiterussianstudio/tailwind-easing": "^1.0.0",
+    "animate.css": "^4.1.1",
+    "csstype": "3.1.3",
+    "polished": "4.3.1",
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss": "3.4.10",
+    "tailwindcss-animate": "1.0.7",
+    "tailwindcss-opentype": "1.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w"
+  }
+}

package/src/anim.css

@@ -0,0 +1,10 @@
+@import "animate.css";
+
+body {
+  position: relative;
+}
+
+body > section {
+  --animate-duration: 0.8s;
+  --animate-delay: 80ms;
+}

package/src/colors.js

@@ -0,0 +1,249 @@
+export const colors = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: "#000",
+  white: "#fff",
+  "slate-50": "#f8fafc",
+  "slate-100": "#f1f5f9",
+  "slate-200": "#e2e8f0",
+  "slate-300": "#cbd5e1",
+  "slate-400": "#94a3b8",
+  "slate-500": "#64748b",
+  "slate-600": "#475569",
+  "slate-700": "#334155",
+  "slate-800": "#1e293b",
+  "slate-900": "#0f172a",
+  "slate-950": "#020617",
+  "gray-50": "#f9fafb",
+  "gray-100": "#f3f4f6",
+  "gray-200": "#e5e7eb",
+  "gray-300": "#d1d5db",
+  "gray-400": "#9ca3af",
+  "gray-500": "#6b7280",
+  "gray-600": "#4b5563",
+  "gray-700": "#374151",
+  "gray-800": "#1f2937",
+  "gray-900": "#111827",
+  "gray-950": "#030712",
+  "zinc-50": "#fafafa",
+  "zinc-100": "#f4f4f5",
+  "zinc-200": "#e4e4e7",
+  "zinc-300": "#d4d4d8",
+  "zinc-400": "#a1a1aa",
+  "zinc-500": "#71717a",
+  "zinc-600": "#52525b",
+  "zinc-700": "#3f3f46",
+  "zinc-800": "#27272a",
+  "zinc-900": "#18181b",
+  "zinc-950": "#09090b",
+  "neutral-50": "#fafafa",
+  "neutral-100": "#f5f5f5",
+  "neutral-200": "#e5e5e5",
+  "neutral-300": "#d4d4d4",
+  "neutral-400": "#a3a3a3",
+  "neutral-500": "#737373",
+  "neutral-600": "#525252",
+  "neutral-700": "#404040",
+  "neutral-800": "#262626",
+  "neutral-900": "#171717",
+  "neutral-950": "#0a0a0a",
+  "stone-50": "#fafaf9",
+  "stone-100": "#f5f5f4",
+  "stone-200": "#e7e5e4",
+  "stone-300": "#d6d3d1",
+  "stone-400": "#a8a29e",
+  "stone-500": "#78716c",
+  "stone-600": "#57534e",
+  "stone-700": "#44403c",
+  "stone-800": "#292524",
+  "stone-900": "#1c1917",
+  "stone-950": "#0c0a09",
+  "red-50": "#fef2f2",
+  "red-100": "#fee2e2",
+  "red-200": "#fecaca",
+  "red-300": "#fca5a5",
+  "red-400": "#f87171",
+  "red-500": "#ef4444",
+  "red-600": "#dc2626",
+  "red-700": "#b91c1c",
+  "red-800": "#991b1b",
+  "red-900": "#7f1d1d",
+  "red-950": "#450a0a",
+  "orange-50": "#fff7ed",
+  "orange-100": "#ffedd5",
+  "orange-200": "#fed7aa",
+  "orange-300": "#fdba74",
+  "orange-400": "#fb923c",
+  "orange-500": "#f97316",
+  "orange-600": "#ea580c",
+  "orange-700": "#c2410c",
+  "orange-800": "#9a3412",
+  "orange-900": "#7c2d12",
+  "orange-950": "#431407",
+  "amber-50": "#fffbeb",
+  "amber-100": "#fef3c7",
+  "amber-200": "#fde68a",
+  "amber-300": "#fcd34d",
+  "amber-400": "#fbbf24",
+  "amber-500": "#f59e0b",
+  "amber-600": "#d97706",
+  "amber-700": "#b45309",
+  "amber-800": "#92400e",
+  "amber-900": "#78350f",
+  "amber-950": "#451a03",
+  "yellow-50": "#fefce8",
+  "yellow-100": "#fef9c3",
+  "yellow-200": "#fef08a",
+  "yellow-300": "#fde047",
+  "yellow-400": "#facc15",
+  "yellow-500": "#eab308",
+  "yellow-600": "#ca8a04",
+  "yellow-700": "#a16207",
+  "yellow-800": "#854d0e",
+  "yellow-900": "#713f12",
+  "yellow-950": "#422006",
+  "lime-50": "#f7fee7",
+  "lime-100": "#ecfccb",
+  "lime-200": "#d9f99d",
+  "lime-300": "#bef264",
+  "lime-400": "#a3e635",
+  "lime-500": "#84cc16",
+  "lime-600": "#65a30d",
+  "lime-700": "#4d7c0f",
+  "lime-800": "#3f6212",
+  "lime-900": "#365314",
+  "lime-950": "#1a2e05",
+  "green-50": "#f0fdf4",
+  "green-100": "#dcfce7",
+  "green-200": "#bbf7d0",
+  "green-300": "#86efac",
+  "green-400": "#4ade80",
+  "green-500": "#22c55e",
+  "green-600": "#16a34a",
+  "green-700": "#15803d",
+  "green-800": "#166534",
+  "green-900": "#14532d",
+  "green-950": "#052e16",
+  "emerald-50": "#ecfdf5",
+  "emerald-100": "#d1fae5",
+  "emerald-200": "#a7f3d0",
+  "emerald-300": "#6ee7b7",
+  "emerald-400": "#34d399",
+  "emerald-500": "#10b981",
+  "emerald-600": "#059669",
+  "emerald-700": "#047857",
+  "emerald-800": "#065f46",
+  "emerald-900": "#064e3b",
+  "emerald-950": "#022c22",
+  "teal-50": "#f0fdfa",
+  "teal-100": "#ccfbf1",
+  "teal-200": "#99f6e4",
+  "teal-300": "#5eead4",
+  "teal-400": "#2dd4bf",
+  "teal-500": "#14b8a6",
+  "teal-600": "#0d9488",
+  "teal-700": "#0f766e",
+  "teal-800": "#115e59",
+  "teal-900": "#134e4a",
+  "teal-950": "#042f2e",
+  "cyan-50": "#ecfeff",
+  "cyan-100": "#cffafe",
+  "cyan-200": "#a5f3fc",
+  "cyan-300": "#67e8f9",
+  "cyan-400": "#22d3ee",
+  "cyan-500": "#06b6d4",
+  "cyan-600": "#0891b2",
+  "cyan-700": "#0e7490",
+  "cyan-800": "#155e75",
+  "cyan-900": "#164e63",
+  "cyan-950": "#083344",
+  "sky-50": "#f0f9ff",
+  "sky-100": "#e0f2fe",
+  "sky-200": "#bae6fd",
+  "sky-300": "#7dd3fc",
+  "sky-400": "#38bdf8",
+  "sky-500": "#0ea5e9",
+  "sky-600": "#0284c7",
+  "sky-700": "#0369a1",
+  "sky-800": "#075985",
+  "sky-900": "#0c4a6e",
+  "sky-950": "#082f49",
+  "blue-50": "#eff6ff",
+  "blue-100": "#dbeafe",
+  "blue-200": "#bfdbfe",
+  "blue-300": "#93c5fd",
+  "blue-400": "#60a5fa",
+  "blue-500": "#3b82f6",
+  "blue-600": "#2563eb",
+  "blue-700": "#1d4ed8",
+  "blue-800": "#1e40af",
+  "blue-900": "#1e3a8a",
+  "blue-950": "#172554",
+  "indigo-50": "#eef2ff",
+  "indigo-100": "#e0e7ff",
+  "indigo-200": "#c7d2fe",
+  "indigo-300": "#a5b4fc",
+  "indigo-400": "#818cf8",
+  "indigo-500": "#6366f1",
+  "indigo-600": "#4f46e5",
+  "indigo-700": "#4338ca",
+  "indigo-800": "#3730a3",
+  "indigo-900": "#312e81",
+  "indigo-950": "#1e1b4b",
+  "violet-50": "#f5f3ff",
+  "violet-100": "#ede9fe",
+  "violet-200": "#ddd6fe",
+  "violet-300": "#c4b5fd",
+  "violet-400": "#a78bfa",
+  "violet-500": "#8b5cf6",
+  "violet-600": "#7c3aed",
+  "violet-700": "#6d28d9",
+  "violet-800": "#5b21b6",
+  "violet-900": "#4c1d95",
+  "violet-950": "#2e1065",
+  "purple-50": "#faf5ff",
+  "purple-100": "#f3e8ff",
+  "purple-200": "#e9d5ff",
+  "purple-300": "#d8b4fe",
+  "purple-400": "#c084fc",
+  "purple-500": "#a855f7",
+  "purple-600": "#9333ea",
+  "purple-700": "#7e22ce",
+  "purple-800": "#6b21a8",
+  "purple-900": "#581c87",
+  "purple-950": "#3b0764",
+  "fuchsia-50": "#fdf4ff",
+  "fuchsia-100": "#fae8ff",
+  "fuchsia-200": "#f5d0fe",
+  "fuchsia-300": "#f0abfc",
+  "fuchsia-400": "#e879f9",
+  "fuchsia-500": "#d946ef",
+  "fuchsia-600": "#c026d3",
+  "fuchsia-700": "#a21caf",
+  "fuchsia-800": "#86198f",
+  "fuchsia-900": "#701a75",
+  "fuchsia-950": "#4a044e",
+  "pink-50": "#fdf2f8",
+  "pink-100": "#fce7f3",
+  "pink-200": "#fbcfe8",
+  "pink-300": "#f9a8d4",
+  "pink-400": "#f472b6",
+  "pink-500": "#ec4899",
+  "pink-600": "#db2777",
+  "pink-700": "#be185d",
+  "pink-800": "#9d174d",
+  "pink-900": "#831843",
+  "pink-950": "#500724",
+  "rose-50": "#fff1f2",
+  "rose-100": "#ffe4e6",
+  "rose-200": "#fecdd3",
+  "rose-300": "#fda4af",
+  "rose-400": "#fb7185",
+  "rose-500": "#f43f5e",
+  "rose-600": "#e11d48",
+  "rose-700": "#be123c",
+  "rose-800": "#9f1239",
+  "rose-900": "#881337",
+  "rose-950": "#4c0519",
+};