uibee 2.13.3 → 2.15.0

package/dist/src/components/index.d.ts

@@ -24,4 +24,5 @@ export { default as Alert } from './alert/alert';
 export { MenuButton } from './table/menu';
 export { default as Table } from './table/table';
 export { default as Pagination } from './table/pagination';
+export { default as MarkdownRender } from './markdownrender/markdownRender';
 export { default as ConfirmPopup } from './confirm/confirmPopup';

package/dist/src/components/index.js

@@ -34,5 +34,7 @@ export { default as Alert } from './alert/alert';
 export { MenuButton } from './table/menu';
 export { default as Table } from './table/table';
 export { default as Pagination } from './table/pagination';
+// Markdown
+export { default as MarkdownRender } from './markdownrender/markdownRender';
 // Confirm
 export { default as ConfirmPopup } from './confirm/confirmPopup';

package/dist/src/components/inputs/shared/fieldWrapper.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import InputLabel from './inputLabel';
 import InputInfo from './inputInfo';
 import InputError from './inputError';
+import MarkdownRender from '../../markdownrender/markdownRender';
 export default function FieldWrapper({ label, name, required, info, error, description, textSize = 'sm', children, className, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: `ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}` })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("p", { className: 'text-sm text-login-100 ml-1 mb-1', children: description })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
+    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: `ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}` })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("div", { className: 'text-login-100 **:text-xs! ml-1 mb-1', children: _jsx(MarkdownRender, { MDstr: String(description || '') }) })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
 }

package/dist/src/components/inputs/textarea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { Eye, Pencil } from 'lucide-react';
 import { FieldWrapper } from './shared';
+import MarkdownRender from '../markdownrender/markdownRender';
 function isValidJson(str) {
     try {
         JSON.parse(str);
@@ -18,13 +18,11 @@ export default function Textarea(props) {
     const [preview, setPreview] = useState(false);
     const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
     const displayError = jsonError || error;
+    console.log(value);
     return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, description: description, error: displayError, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview && (_jsx("div", { className: `
                             w-full rounded-md bg-login-500/50 border border-login-500 
-                            text-login-text 
-                            p-3
-                            prose prose-invert prose-base max-w-none overflow-y-auto
-                            ${error ? 'border-red-500' : ''}
-                        `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })), _jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                            p-3 overflow-y-auto ${error ? 'border-red-500' : ''}
+                        `, children: _jsx(MarkdownRender, { MDstr: String(value || '') }) })), _jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         ${type === 'markdown' && preview ? 'hidden' : ''}
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200

package/dist/src/components/markdownrender/markdownRender.d.ts

@@ -0,0 +1,3 @@
+export default function MarkdownRender({ MDstr }: {
+    MDstr: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/markdownrender/markdownRender.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+export default function MarkdownRender({ MDstr }) {
+    return (_jsx("div", { className: 'prose prose-sm prose-custom max-w-none', children: _jsx(Markdown, { components: { h1: ({ ...props }) => _jsx("h2", { ...props }) }, remarkPlugins: [remarkGfm], children: MDstr.replace(/\\n/g, '\n') }) }));
+}

package/dist/src/globals.css

@@ -826,145 +826,145 @@
     font-size: 1.2rem;
     font-weight: 500;
   }
-  .prose-base {
-    font-size: 1rem;
-    line-height: 1.75;
+  .prose-sm {
+    font-size: 0.875rem;
+    line-height: 1.7142857;
     :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
     }
     :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 1.25em;
-      line-height: 1.6;
-      margin-top: 1.2em;
-      margin-bottom: 1.2em;
+      font-size: 1.2857143em;
+      line-height: 1.5555556;
+      margin-top: 0.8888889em;
+      margin-bottom: 0.8888889em;
     }
     :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.6em;
-      margin-bottom: 1.6em;
-      padding-inline-start: 1em;
+      margin-top: 1.3333333em;
+      margin-bottom: 1.3333333em;
+      padding-inline-start: 1.1111111em;
     }
     :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 2.25em;
+      font-size: 2.1428571em;
       margin-top: 0;
-      margin-bottom: 0.8888889em;
-      line-height: 1.1111111;
+      margin-bottom: 0.8em;
+      line-height: 1.2;
     }
     :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 1.5em;
-      margin-top: 2em;
-      margin-bottom: 1em;
-      line-height: 1.3333333;
+      font-size: 1.4285714em;
+      margin-top: 1.6em;
+      margin-bottom: 0.8em;
+      line-height: 1.4;
     }
     :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 1.25em;
-      margin-top: 1.6em;
-      margin-bottom: 0.6em;
-      line-height: 1.6;
+      font-size: 1.2857143em;
+      margin-top: 1.5555556em;
+      margin-bottom: 0.4444444em;
+      line-height: 1.5555556;
     }
     :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.5em;
-      margin-bottom: 0.5em;
-      line-height: 1.5;
+      margin-top: 1.4285714em;
+      margin-bottom: 0.5714286em;
+      line-height: 1.4285714;
     }
     :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
       margin-bottom: 0;
     }
     :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
+      font-size: 0.8571429em;
       border-radius: 0.3125rem;
-      padding-top: 0.1875em;
-      padding-inline-end: 0.375em;
-      padding-bottom: 0.1875em;
-      padding-inline-start: 0.375em;
+      padding-top: 0.1428571em;
+      padding-inline-end: 0.3571429em;
+      padding-bottom: 0.1428571em;
+      padding-inline-start: 0.3571429em;
     }
     :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
+      font-size: 0.8571429em;
     }
     :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
+      font-size: 0.9em;
     }
     :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.9em;
+      font-size: 0.8888889em;
     }
     :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
-      line-height: 1.7142857;
-      margin-top: 1.7142857em;
-      margin-bottom: 1.7142857em;
-      border-radius: 0.375rem;
-      padding-top: 0.8571429em;
-      padding-inline-end: 1.1428571em;
-      padding-bottom: 0.8571429em;
-      padding-inline-start: 1.1428571em;
+      font-size: 0.8571429em;
+      line-height: 1.6666667;
+      margin-top: 1.6666667em;
+      margin-bottom: 1.6666667em;
+      border-radius: 0.25rem;
+      padding-top: 0.6666667em;
+      padding-inline-end: 1em;
+      padding-bottom: 0.6666667em;
+      padding-inline-start: 1em;
     }
     :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
-      padding-inline-start: 1.625em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
+      padding-inline-start: 1.5714286em;
     }
     :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
-      padding-inline-start: 1.625em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
+      padding-inline-start: 1.5714286em;
     }
     :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.5em;
-      margin-bottom: 0.5em;
+      margin-top: 0.2857143em;
+      margin-bottom: 0.2857143em;
     }
     :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-inline-start: 0.375em;
+      padding-inline-start: 0.4285714em;
     }
     :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-inline-start: 0.375em;
+      padding-inline-start: 0.4285714em;
     }
-    :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.75em;
-      margin-bottom: 0.75em;
+    :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.5714286em;
+      margin-bottom: 0.5714286em;
     }
-    :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
+    :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.1428571em;
     }
-    :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-bottom: 1.25em;
+    :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.1428571em;
     }
-    :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
+    :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.1428571em;
     }
-    :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-bottom: 1.25em;
+    :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.1428571em;
     }
     :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.75em;
-      margin-bottom: 0.75em;
+      margin-top: 0.5714286em;
+      margin-bottom: 0.5714286em;
     }
     :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
     }
     :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
+      margin-top: 1.1428571em;
     }
     :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.5em;
-      padding-inline-start: 1.625em;
+      margin-top: 0.2857143em;
+      padding-inline-start: 1.5714286em;
     }
     :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 3em;
-      margin-bottom: 3em;
+      margin-top: 2.8571429em;
+      margin-bottom: 2.8571429em;
     }
     :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
@@ -979,13 +979,13 @@
       margin-top: 0;
     }
     :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
-      line-height: 1.7142857;
+      font-size: 0.8571429em;
+      line-height: 1.5;
     }
     :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-inline-end: 0.5714286em;
-      padding-bottom: 0.5714286em;
-      padding-inline-start: 0.5714286em;
+      padding-inline-end: 1em;
+      padding-bottom: 0.6666667em;
+      padding-inline-start: 1em;
     }
     :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       padding-inline-start: 0;
@@ -994,10 +994,10 @@
       padding-inline-end: 0;
     }
     :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-top: 0.5714286em;
-      padding-inline-end: 0.5714286em;
-      padding-bottom: 0.5714286em;
-      padding-inline-start: 0.5714286em;
+      padding-top: 0.6666667em;
+      padding-inline-end: 1em;
+      padding-bottom: 0.6666667em;
+      padding-inline-start: 1em;
     }
     :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       padding-inline-start: 0;
@@ -1006,22 +1006,22 @@
       padding-inline-end: 0;
     }
     :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
       margin-bottom: 0;
     }
     :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
-      line-height: 1.4285714;
-      margin-top: 0.8571429em;
+      font-size: 0.8571429em;
+      line-height: 1.3333333;
+      margin-top: 0.6666667em;
     }
-    :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
     }
-    :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-bottom: 0;
     }
   }
@@ -2218,25 +2218,23 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .prose-invert {
-    --tw-prose-body: var(--tw-prose-invert-body);
-    --tw-prose-headings: var(--tw-prose-invert-headings);
-    --tw-prose-lead: var(--tw-prose-invert-lead);
-    --tw-prose-links: var(--tw-prose-invert-links);
-    --tw-prose-bold: var(--tw-prose-invert-bold);
-    --tw-prose-counters: var(--tw-prose-invert-counters);
-    --tw-prose-bullets: var(--tw-prose-invert-bullets);
-    --tw-prose-hr: var(--tw-prose-invert-hr);
-    --tw-prose-quotes: var(--tw-prose-invert-quotes);
-    --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
-    --tw-prose-captions: var(--tw-prose-invert-captions);
-    --tw-prose-kbd: var(--tw-prose-invert-kbd);
-    --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
-    --tw-prose-code: var(--tw-prose-invert-code);
-    --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
-    --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
-    --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
-    --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
+  .prose-custom {
+    --tw-prose-body: var(--color-login-text);
+    --tw-prose-headings: var(--color-login-text);
+    --tw-prose-lead: var(--color-login-300);
+    --tw-prose-links: var(--color-login);
+    --tw-prose-bold: var(--color-login-text);
+    --tw-prose-counters: var(--color-login-400);
+    --tw-prose-bullets: var(--color-login-400);
+    --tw-prose-hr: var(--color-login-300);
+    --tw-prose-quotes: var(--color-login-text);
+    --tw-prose-quote-borders: var(--color-login-300);
+    --tw-prose-captions: var(--color-login-300);
+    --tw-prose-code: var(--color-login-text);
+    --tw-prose-pre-code: var(--color-login-text);
+    --tw-prose-pre-bg: var(--color-login-800);
+    --tw-prose-th-borders: var(--color-login-500);
+    --tw-prose-td-borders: var(--color-login-500);
   }
   .outline-none {
     --tw-outline-style: none;
@@ -2249,6 +2247,12 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .\*\*\:text-xs\! {
+    :is(& *) {
+      font-size: var(--text-xs) !important;
+      line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.13.3",
+  "version": "2.15.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -54,6 +54,7 @@
     "lucide-react": "^0.577.0",
     "react-dom": "19.2.4",
     "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "utilbee": "^1.4.1"
   }
 }

package/src/components/index.ts

@@ -44,5 +44,8 @@ export { MenuButton } from './table/menu'
 export { default as Table } from './table/table'
 export { default as Pagination } from './table/pagination'
 
+// Markdown
+export { default as MarkdownRender } from './markdownrender/markdownRender'
+
 // Confirm
 export { default as ConfirmPopup } from './confirm/confirmPopup'

package/src/components/inputs/shared/fieldWrapper.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import InputLabel from './inputLabel'
 import InputInfo from './inputInfo'
 import InputError from './inputError'
+import MarkdownRender from '@components/markdownrender/markdownRender'
 
 interface FieldWrapperProps {
     label?: string
@@ -42,9 +43,9 @@ export default function FieldWrapper({
                 </div>
             )}
             {description && (
-                <p className='text-sm text-login-100 ml-1 mb-1'>
-                    {description}
-                </p>
+                <div className='text-login-100 **:text-xs! ml-1 mb-1'>
+                    <MarkdownRender MDstr={String(description || '')} />
+                </div>
             )}
             {children}
             <InputError error={error} id={`${name}-error`} />

package/src/components/inputs/textarea.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import ReactMarkdown from 'react-markdown'
 import { Eye, Pencil } from 'lucide-react'
 import { FieldWrapper } from './shared'
+import MarkdownRender from '@components/markdownrender/markdownRender'
 
 export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     name: string
@@ -31,6 +31,8 @@ export default function Textarea(props: TextareaProps) {
     const jsonError = type === 'json' && value ? isValidJson(value as string) : undefined
     const displayError = jsonError || error
 
+    console.log(value)
+
     return (
         <FieldWrapper
             label={label}
@@ -60,14 +62,10 @@ export default function Textarea(props: TextareaProps) {
                     <div
                         className={`
                             w-full rounded-md bg-login-500/50 border border-login-500 
-                            text-login-text 
-                            p-3
-                            prose prose-invert prose-base max-w-none overflow-y-auto
-                            ${error ? 'border-red-500' : ''}
+                            p-3 overflow-y-auto ${error ? 'border-red-500' : ''}
                         `}
-                        style={{ minHeight: `${rows * 1.5}rem` }}
                     >
-                        <ReactMarkdown>{String(value || '')}</ReactMarkdown>
+                        <MarkdownRender MDstr={String(value || '')} />
                     </div>
                 )}
 

package/src/components/markdownrender/markdownRender.tsx

@@ -0,0 +1,17 @@
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+export default function MarkdownRender({MDstr}: {MDstr: string}) {
+    return (
+        <div className='prose prose-sm prose-custom max-w-none'>
+            <Markdown
+                components={{ h1: ({...props}) => <h2 {...props} /> }}
+                remarkPlugins={
+                    [remarkGfm]
+                }
+            >
+                {MDstr.replace(/\\n/g, '\n')}
+            </Markdown>
+        </div>
+    )
+}

package/src/globals.css

@@ -33,6 +33,7 @@
     --color-login-300: #5e5e5e;
     --color-login-200: #727272;
     --color-login-100: #b0b0b0;
+    --color-login-75: #e4e4e4;
     --color-login-50: #ededed;
     
     --color-login-text: #ededed;
@@ -98,6 +99,25 @@
     --color-login-text: #0e0e0e;
 }
 
+@utility prose-custom {
+    --tw-prose-body: var(--color-login-text);
+    --tw-prose-headings: var(--color-login-text);
+    --tw-prose-lead: var(--color-login-300);
+    --tw-prose-links: var(--color-login);
+    --tw-prose-bold: var(--color-login-text);
+    --tw-prose-counters: var(--color-login-400);
+    --tw-prose-bullets: var(--color-login-400);
+    --tw-prose-hr: var(--color-login-300);
+    --tw-prose-quotes: var(--color-login-text);
+    --tw-prose-quote-borders: var(--color-login-300);
+    --tw-prose-captions: var(--color-login-300);
+    --tw-prose-code: var(--color-login-text);
+    --tw-prose-pre-code: var(--color-login-text);
+    --tw-prose-pre-bg: var(--color-login-800);
+    --tw-prose-th-borders: var(--color-login-500);
+    --tw-prose-td-borders: var(--color-login-500);
+}
+
 @keyframes jump {
     40% {
         transform: translateY(-0.3rem);