https://3drv.com/_assets/admin.documentation.color-scheme-DoSoKyer.js

1import{r as u,j as e,L as f,ar as v,ce as k,z as y,D as C,B as N,p as b,br as g,al as j}from"./vendor-DrT0ezAj.js";import{H as w}from"./Helmet-8gTvwaaE.js";import{T,a as B,b as x,c as p}from"./Tabs-CASRLXuT.js";import{B as D}from"./index-xgku-_Dc.js";import"./index-BbP3371Q.js";const S="_container_18cm5_1",L="_breadcrumbs_18cm5_13",P="_backLink_18cm5_17",F="_header_18cm5_31",I="_headerIcon_18cm5_51",H="_title_18cm5_81",O="_subtitle_18cm5_95",A="_content_18cm5_102",V="_section_18cm5_108",R="_sectionTitle_18cm5_114",z="_grid_18cm5_124",E="_swatchCard_18cm5_130",U="_swatchColor_18cm5_144",G="_copyOverlay_18cm5_151",M="_swatchInfo_18cm5_167",$="_swatchLabel_18cm5_174",K="_swatchVariable_18cm5_181",W="_swatchHex_18cm5_191",q="_swatchDescription_18cm5_197",Y="_designSystemInfo_18cm5_204",J="_infoBox_18cm5_251",Q="_infoBoxHeader_18cm5_260",X="_infoList_18cm5_270",Z="_tabsContainer_18cm5_285",ee="_tabsList_18cm5_289",se="_tabTrigger_18cm5_298",re="_themePreview_18cm5_304",ie="_lightThemeOverride_18cm5_320",oe="_darkThemeOverride_18cm5_353",te="_distinctionBox_18cm5_402",ae="_distinctionTitle_18cm5_410",ne="_distinctionText_18cm5_418",ce="_distinctionGrid_18cm5_425",le="_distinctionItem_18cm5_440",de="_distinctionLabel_18cm5_447",he="_distinctionColorPreview_18cm5_455",me="_distinctionDescription_18cm5_463",ue="_distinctionList_18cm5_470",xe="_distinctionCallout_18cm5_488",pe="_standardButtonsSection_18cm5_503",be="_sectionSubtitle_18cm5_509",ge="_buttonGrid_18cm5_516",je="_buttonCard_18cm5_534",_e="_buttonPreviewArea_18cm5_543",fe="_buttonInfo_18cm5_553",ve="_buttonHeader_18cm5_560",ke="_buttonName_18cm5_568",ye="_variantCopy_18cm5_576",Ce="_buttonDescription_18cm5_598",Ne="_colorDetails_18cm5_606",we="_colorDetailRow_18cm5_614",Te="_colorLabel_18cm5_621",Be="_colorValue_18cm5_629",s={container:S,breadcrumbs:L,backLink:P,header:F,headerIcon:I,title:H,subtitle:O,content:A,section:V,sectionTitle:R,grid:z,swatchCard:E,swatchColor:U,copyOverlay:G,swatchInfo:M,swatchLabel:$,swatchVariable:K,swatchHex:W,swatchDescription:q,designSystemInfo:Y,infoBox:J,infoBoxHeader:Q,infoList:X,tabsContainer:Z,tabsList:ee,tabTrigger:se,themePreview:re,lightThemeOverride:ie,darkThemeOverride:oe,distinctionBox:te,distinctionTitle:ae,distinctionText:ne,distinctionGrid:ce,distinctionItem:le,distinctionLabel:de,distinctionColorPreview:he,distinctionDescription:me,distinctionList:ue,distinctionCallout:xe,standardButtonsSection:pe,sectionSubtitle:be,buttonGrid:ge,buttonCard:je,buttonPreviewArea:_e,buttonInfo:fe,buttonHeader:ve,buttonName:ke,variantCopy:ye,buttonDescription:Ce,colorDetails:Ne,colorDetailRow:we,colorLabel:Te,colorValue:Be},De={"--background":"oklch(92.13% 0.0388 282.36)","--foreground":"oklch(0% 0 0)","--surface":"oklch(100% 0 0)","--surface-foreground":"oklch(0% 0 0)","--sidebar":"oklch(100% 0 0)","--sidebar-foreground":"oklch(0% 0 0)","--card":"oklch(66.34% 0.1806 277.2)","--card-foreground":"oklch(0% 0 0)","--header":"hsl(171 100% 75%)","--header-foreground":"oklch(0% 0 0)","--popup":"oklch(100% 0 0)","--popup-foreground":"oklch(0% 0 0)","--primary":"oklch(66.34% 0.1806 277.2)","--primary-foreground":"oklch(0% 0 0)","--secondary":"oklch(26.58% 0.0737 283.96)","--secondary-foreground":"oklch(100% 0 0)","--accent":"oklch(66.34% 0.1806 277.2)","--accent-foreground":"oklch(0% 0 0)","--muted":"oklch(85% 0.02 282)","--muted-foreground":"oklch(40% 0 0)","--border":"oklch(0% 0 0)","--success":"hsl(160 100% 42%)","--success-foreground":"oklch(0% 0 0)","--error":"hsl(358 100% 65%)","--error-foreground":"oklch(0% 0 0)","--warning":"hsl(48 100% 50%)","--warning-foreground":"oklch(0% 0 0)","--info":"hsl(203 100% 50%)","--info-foreground":"oklch(0% 0 0)","--info-hover":"hsl(203 100% 45%)","--info-active":"hsl(203 100% 40%)","--chart-color-1":"#7A83FF","--chart-color-2":"#FACC00","--chart-color-3":"#FF4D50","--chart-color-4":"#00D696","--chart-color-5":"#0099FF"},Se={"--background":"oklch(26.58% 0.0737 283.96)","--foreground":"oklch(92.49% 0 0)","--surface":"oklch(23.93% 0 0)","--surface-foreground":"oklch(92.49% 0 0)","--sidebar":"oklch(23.93% 0 0)","--sidebar-foreground":"oklch(92.49% 0 0)","--card":"oklch(66.34% 0.1806 277.2)","--card-foreground":"oklch(0% 0 0)","--header":"hsl(171 100% 75%)","--header-foreground":"oklch(0% 0 0)","--popup":"oklch(23.93% 0 0)","--popup-foreground":"oklch(92.49% 0 0)","--primary":"oklch(66.34% 0.1806 277.2)","--primary-foreground":"oklch(0% 0 0)","--secondary":"oklch(92.13% 0.0388 282.36)","--secondary-foreground":"oklch(0% 0 0)","--accent":"oklch(66.34% 0.1806 277.2)","--accent-foreground":"oklch(0% 0 0)","--muted":"oklch(35% 0.03 284)","--muted-foreground":"oklch(70% 0 0)","--border":"oklch(0% 0 0)","--success":"hsl(160 95% 37%)","--success-foreground":"oklch(100% 0 0)","--error":"hsl(358 100% 70%)","--error-foreground":"oklch(0% 0 0)","--warning":"hsl(48 100% 44%)","--warning-foreground":"oklch(0% 0 0)","--info":"hsl(203 100% 45%)","--info-foreground":"oklch(100% 0 0)","--info-hover":"hsl(203 100% 50%)","--info-active":"hsl(203 100% 40%)","--chart-color-1":"#7A83FF","--chart-color-2":"#E0B700","--chart-color-3":"#FF6669","--chart-color-4":"#00BD84","--chart-color-5":"#008AE5"},Le=(r,o)=>{navigator.clipboard.writeText(r),j.success(`Copied ${r} to clipboard`)},i=({variable:r,label:o,description:t,hex:n,activeMode:d})=>{const[h,c]=u.useState(!1),m=()=>{const _=(d==="light"?De:Se)[r]||`var(${r})`;Le(_),c(!0),setTimeout(()=>c(!1),2e3)};return e.jsxs("div",{className:s.swatchCard,onClick:m,children:[e.jsx("div",{className:s.swatchColor,style:{backgroundColor:`var(${r})`},children:e.jsx("div",{className:s.copyOverlay,children:h?e.jsx(b,{size:24}):e.jsx(g,{size:24})})}),e.jsxs("div",{className:s.swatchInfo,children:[e.jsx("h4",{className:s.swatchLabel,children:o}),e.jsx("code",{className:s.swatchVariable,children:r}),n&&e.jsx("span",{className:s.swatchHex,children:n}),t&&e.jsx("p",{className:s.swatchDescription,children:t})]})]})},a=({title:r,children:o})=>e.jsxs("section",{className:s.section,children:[e.jsx("h3",{className:s.sectionTitle,children:r}),e.jsx("div",{className:s.grid,children:o})]}),l=({name:r,variant:o,baseColors:t,hoverColors:n,description:d})=>{const[h,c]=u.useState(!1),m=()=>{navigator.clipboard.writeText(o),j.success(`Copied variant="${o}" to clipboard`),c(!0),setTimeout(()=>c(!1),2e3)};return e.jsxs("div",{className:s.buttonCard,children:[e.jsx("div",{className:s.buttonPreviewArea,children:e.jsx(D,{variant:o,size:"lg",children:r})}),e.jsxs("div",{className:s.buttonInfo,children:[e.jsxs("div",{className:s.buttonHeader,children:[e.jsx("h4",{className:s.buttonName,children:r}),e.jsxs("button",{className:s.variantCopy,onClick:m,title:"Copy variant name",children:[e.jsxs("code",{children:['variant="',o,'"']}),h?e.jsx(b,{size:14}):e.jsx(g,{size:14})]})]}),e.jsx("p",{className:s.buttonDescription,children:d}),e.jsxs("div",{className:s.colorDetails,children:[e.jsxs("div",{className:s.colorDetailRow,children:[e.jsx("span",{className:s.colorLabel,children:"Base:"}),e.jsx("span",{className:s.colorValue,children:t})]}),e.jsxs("div",{className:s.colorDetailRow,children:[e.jsx("span",{className:s.colorLabel,children:"Hover:"}),e.jsx("span",{className:s.colorValue,children:n})]})]})]})]})},Ve=()=>{const[r,o]=u.useState("light"),t=()=>e.jsxs(e.Fragment,{children:[e.jsxs(a,{title:"Brand Colors",children:[e.jsx(i,{variable:"--primary",label:"Primary",description:"Vibrant Purple (OKLCH). The main brand color used for primary actions and interactive elements.",activeMode:r}),e.jsx(i,{variable:"--primary-foreground",label:"Primary Foreground",description:"Always black text for maximum contrast.",activeMode:r}),e.jsx(i,{variable:"--secondary",label:"Secondary",description:"Electric Cyan. Used for secondary accents and highlights.",activeMode:r}),e.jsx(i,{variable:"--secondary-foreground",label:"Secondary Foreground",description:"Always black text for maximum contrast.",activeMode:r})]}

1),e.jsxs(a,{title:"Background & Surfaces",children:[e.jsx(i,{variable:"--background",label:"Background",description:"Light purple-tinted background (light mode). Dark purple background (dark mode). Uses OKLCH colors.",activeMode:r}),e.jsx(i,{variable:"--surface",label:"Surface",description:"Neutral backgrounds for all structural elements. Pure white in light mode, dark gray in dark mode. Used for page containers, headers, navigation, footers, filters, panels, and form containers.",activeMode:r}),e.jsx(i,{variable:"--sidebar",label:"Sidebar",description:"Sidebar and navigation backgrounds.",activeMode:r}),e.jsx(i,{variable:"--card",label:"Card",description:"Bold purple background in BOTH light and dark modes. Used for individual repeating content items like product cards, list items, and content units. This creates visual impact and hierarchy.",activeMode:r}),e.jsx(i,{variable:"--popup",label:"Popup / Modal",description:"High contrast background for modals and popovers. Solid white/gray.",activeMode:r})]}),e.jsx(a,{title:"Surface vs Card: Key Distinction",children:e.jsxs("div",{className:s.distinctionBox,children:[e.jsx("h4",{className:s.distinctionTitle,children:"Understanding the Semantic Difference"}),e.jsxs("p",{className:s.distinctionText,children:["In our neobrutalism design system, ",e.jsx("strong",{children:"Surface"})," and ",e.jsx("strong",{children:"Card"})," serve distinct purposes to create clear visual hierarchy and impact:"]}),e.jsxs("div",{className:s.distinctionGrid,children:[e.jsxs("div",{className:s.distinctionItem,children:[e.jsx("h5",{className:s.distinctionLabel,children:"Surface (Neutral)"}),e.jsx("div",{className:s.distinctionColorPreview,style:{backgroundColor:"var(--surface)"}}),e.jsxs("p",{className:s.distinctionDescription,children:[e.jsx("strong",{children:"Purpose:"})," All structural and container elements"]}),e.jsxs("p",{className:s.distinctionDescription,children:[e.jsx("strong",{children:"Behavior:"})," White in light mode, dark gray in dark mode"]}),e.jsx("p",{className:s.distinctionDescription,children:e.jsx("strong",{children:"Use Cases:"})}),e.jsxs("ul",{className:s.distinctionList,children:[e.jsx("li",{children:"Headers and navigation bars"}),e.jsx("li",{children:"Footers and persistent navigation"}),e.jsx("li",{children:"Filter bars and search panels"}),e.jsx("li",{children:"Form containers and input groups"}),e.jsx("li",{children:"Content area backgrounds"}),e.jsx("li",{children:"Settings sections and configuration panels"}),e.jsx("li",{children:"Reading areas and text-heavy sections"})]})]}),e.jsxs("div",{className:s.distinctionItem,children:[e.jsx("h5",{className:s.distinctionLabel,children:"Card (Bold)"}),e.jsx("div",{className:s.distinctionColorPreview,style:{backgroundColor:"var(--card)"}}),e.jsxs("p",{className:s.distinctionDescription,children:[e.jsx("strong",{children:"Purpose:"})," Individual repeating content items"]}),e.jsxs("p",{className:s.distinctionDescription,children:[e.jsx("strong",{children:"Behavior:"})," Purple in BOTH light and dark modes"]}),e.jsx("p",{className:s.distinctionDescription,children:e.jsx("strong",{children:"Use Cases:"})}),e.jsxs("ul",{className:s.distinctionList,children:[e.jsx("li",{children:"Product cards in grid layouts"}),e.jsx("li",{children:"Order items in lists"}),e.jsx("li",{children:"Individual RV listings"}),e.jsx("li",{children:"Content units in feeds"}),e.jsx("li",{children:"Gallery items and media cards"})]})]})]}),e.jsxs("div",{className:s.distinctionCallout,children:[e.jsx("strong",{children:"Two-Tier Neobrutalist Hierarchy:"}),` Purple cards make content pop dramatically ("here's the content"), while neutral surfaces provide calm, readable backgrounds for all other UI including navigation, headers, footers, and containers. This bold use of color for semantic meaning is a key characteristic of our neobrutalism approach—using contrast and color boldly rather than subtly to communicate function.`]})]})}),e.jsxs(a,{title:"Text & Foreground",children:[e.jsx(i,{variable:"--foreground",label:"Foreground",description:"Primary text color. Black in light mode, Light Gray in dar

1k mode.",activeMode:r}),e.jsx(i,{variable:"--surface-foreground",label:"Surface Foreground",description:"Text color on surface elements.",activeMode:r}),e.jsx(i,{variable:"--muted-foreground",label:"Muted Foreground",description:"Secondary text, captions, and placeholders.",activeMode:r})]}),e.jsxs(a,{title:"Status Colors",children:[e.jsx(i,{variable:"--success",label:"Success",description:"Positive actions, completion, valid states.",activeMode:r}),e.jsx(i,{variable:"--error",label:"Error",description:"Destructive actions, validation errors, alerts.",activeMode:r}),e.jsx(i,{variable:"--warning",label:"Warning",description:"Cautionary states, pending actions.",activeMode:r}),e.jsx(i,{variable:"--info",label:"Info",description:"Informational messages, help text.",activeMode:r})]}),e.jsx(a,{title:"Borders & Dividers",children:e.jsx(i,{variable:"--border",label:"Border",description:"Always black borders in both light AND dark mode. This is a key neobrutalism characteristic.",activeMode:r})}),e.jsxs(a,{title:"Chart & Data Visualization",children:[e.jsx(i,{variable:"--chart-color-1",label:"Chart 1",description:"#7A83FF (Purple-Blue). Primary data series.",activeMode:r}),e.jsx(i,{variable:"--chart-color-2",label:"Chart 2",description:"#FACC00 / #E0B700. Yellow (darker in dark mode).",activeMode:r}),e.jsx(i,{variable:"--chart-color-3",label:"Chart 3",description:"#FF4D50 / #FF6669. Red-Pink tertiary series.",activeMode:r}),e.jsx(i,{variable:"--chart-color-4",label:"Chart 4",description:"#00D696 / #00BD84. Teal-Green quaternary series.",activeMode:r}),e.jsx(i,{variable:"--chart-color-5",label:"Chart 5",description:"#0099FF / #008AE5. Blue quinary series.",activeMode:r})]})]});return e.jsxs(e.Fragment,{children:[e.jsxs(w,{children:[e.jsx("title",{children:"Color Scheme | 3DRV Admin"}),e.jsx("meta",{name:"description",content:"Official color palette and CSS variables for 3DRV."})]}),e.jsxs("div",{className:s.container,children:[e.jsx("div",{className:s.breadcrumbs,children:e.jsxs(f,{to:"/admin/documentation",className:s.backLink,children:[e.jsx(v,{size:16}),"Back to Documentation"]})}),e.jsxs("header",{className:s.header,children:[e.jsx("div",{className:s.headerIcon,children:e.jsx(k,{size:32})}),e.jsxs("div",{children:[e.jsx("h1",{className:s.title,children:"Color Scheme"}),e.jsx("p",{className:s.subtitle,children:"The official 3DRV neobrutalism color palette. Click any swatch to copy its actual color value. Use the tabs below to switch between light and dark mode values."})]})]}),e.jsxs("div",{className:s.designSystemInfo,children:[e.jsx("h2",{children:"Neobrutalism Design System"}),e.jsxs("p",{children:["Our design system is built on ",e.jsx("strong",{children:"Neobrutalism"})," principles using the ",e.jsx("strong",{children:"OKLCH"})," color space for superior perceptual uniformity. Key characteristics include:"]}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Hard Shadows:"})," 4px × 4px offset with no blur."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Borders:"})," Always black (2px), even in dark mode."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Typography:"})," Bold headings (700) and medium body text (500)."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Solidity:"})," No glassmorphism or transparency. Elements are solid and distinct."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Radius:"})," Consistent 8px border radius for most elements."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Two-Tier Color Hierarchy:"})," Purple cards for content that pops, and neutral surfaces for everything else (headers, navigation, containers, reading areas). Each color serves a clear semantic purpose."]})]})]}),e.jsxs("div",{className:s.infoBox,children:[e.jsxs("div",{className:s.infoBoxHeader,children:[e.jsx(y,{size:20}),e.jsx("h3",{children:"Light vs Dark Mode Differences"})]}),e.jsxs("ul",{className:s.infoList,children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Backgroun

1d:"})," Light purple → Dark purple"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Surfaces:"})," Pure white → Dark gray (all containers, headers, navigation)"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Cards:"})," Purple → Purple (same bold color in both modes!)"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Text:"})," Black → Light gray"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Borders:"})," Black → Black (unique to neobrutalism!)"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Primary/Secondary colors:"})," Same in both modes"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Shadows:"})," Always use border color (black)"]})]})]}),e.jsxs("section",{className:s.standardButtonsSection,children:[e.jsx("h2",{className:s.sectionTitle,children:"Standardized Button Styles"}),e.jsx("p",{className:s.sectionSubtitle,children:"These 4 button variants use absolute OKLCH colors and maintain their appearance regardless of the light/dark mode preference. They are designed for consistent CTA hierarchy throughout the platform."}),e.jsxs("div",{className:s.buttonGrid,children:[e.jsx(l,{name:"Purple Button",variant:"purple-solid",baseColors:"Bg: oklch(66% 0.18 277), Text: Black",hoverColors:"Bg: oklch(63% 0.18 277), Text: Black",description:"Solid purple background. Use for primary CTAs and main actions."}),e.jsx(l,{name:"Dark Button",variant:"dark-solid",baseColors:"Bg: oklch(24% 0 0), Text: White",hoverColors:"Bg: oklch(92% 0.04 282), Text: White",description:"High contrast dark gray/white combination. Use for inverted styles and emphasis."}),e.jsx(l,{name:"Light Purple Button",variant:"light-purple-solid",baseColors:"Bg: oklch(92% 0.04 282), Text: oklch(24% 0 0)",hoverColors:"Bg: oklch(85% 0.06 280), Text: oklch(24% 0 0)",description:"Soft purple background. Use for secondary actions and softer emphasis."}),e.jsx(l,{name:"Transparent Button",variant:"transparent-hover",baseColors:"Bg: Transparent, Text: oklch(24% 0 0)",hoverColors:"Bg: oklch(92% 0.04 282), Text: oklch(24% 0 0)",description:"Transparent with hover effect. Use for category filters and tertiary actions."})]})]}),e.jsxs(T,{defaultValue:"light",className:s.tabsContainer,onValueChange:n=>o(n),children:[e.jsxs(B,{className:s.tabsList,children:[e.jsxs(x,{value:"light",className:s.tabTrigger,children:[e.jsx(C,{size:16})," Light Mode"]}),e.jsxs(x,{value:"dark",className:s.tabTrigger,children:[e.jsx(N,{size:16})," Dark Mode"]})]}),e.jsx(p,{value:"light",className:s.tabContent,children:e.jsx("div",{className:`${s.themePreview} ${s.lightThemeOverride}`,"data-theme":"light",children:e.jsx("div",{className:s.content,children:t()})})}),e.jsx(p,{value:"dark",className:s.tabContent,children:e.jsx("div",{className:`${s.themePreview} ${s.darkThemeOverride}`,"data-theme":"dark",children:e.jsx("div",{className:s.content,children:t()})})})]})]})]})};export{Ve as default};