@dbcdk/react-components 0.0.149 → 0.0.150

package/dist/components/overlay/modal/Modal.cjs

@@ -18,6 +18,7 @@ function Modal({
   onRequestClose,
   header,
   subheader,
+  headerAddition,
   content,
   children,
   primaryAction,
@@ -143,6 +144,7 @@ function Modal({
                 size: 2,
                 disableMargin: true,
                 subheader,
+                addition: headerAddition,
                 children: header
               }
             ),

package/dist/components/overlay/modal/Modal.d.ts

@@ -14,6 +14,7 @@ export type ModalProps = {
     onRequestClose: () => void;
     header?: ReactNode;
     subheader?: ReactNode;
+    headerAddition?: ReactNode;
     content?: ReactNode;
     children?: ReactNode;
     primaryAction?: ModalActionConfig;
@@ -25,4 +26,4 @@ export type ModalProps = {
     width?: number | string;
     ariaLabel?: string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, subheader, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, subheader, headerAddition, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, ariaLabel, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -12,6 +12,7 @@ function Modal({
   onRequestClose,
   header,
   subheader,
+  headerAddition,
   content,
   children,
   primaryAction,
@@ -137,6 +138,7 @@ function Modal({
                 size: 2,
                 disableMargin: true,
                 subheader,
+                addition: headerAddition,
                 children: header
               }
             ),

package/dist/styles/styles.css

@@ -237,7 +237,7 @@ body.dbc-app {
   color: var(--color-code-fg, inherit);
   background-color: var(--color-code-bg, var(--color-bg-contextual));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs);
   font-family: var(--font-family-mono);
   font-size: 0.9em;
   box-decoration-break: clone;

package/dist/styles/themes/dbc/colors.css

@@ -55,6 +55,8 @@ html {
 
   --dbc-amber-700: light-dark(#b45309, #f59e0b);
   --dbc-amber-100: light-dark(#fff7ed, #2b1b00);
+  /* Fixed (not light-dark): needs to stay a legible pale gold behind dark ink in both schemes */
+  --dbc-amber-200: #fde68a;
   --dbc-amber-800: light-dark(#92400e, #fcd34d);
   --dbc-amber-400: light-dark(#f59e0b, #fbbf24);
 
@@ -99,8 +101,8 @@ html {
   --color-bg-selected-hover: var(--dbc-blue-150);
 
   /* Highlight */
-  --color-highlight-bg: var(--color-bg-selected-hover);
-  --color-highlight-fg: var(--color-fg-default);
+  --color-highlight-bg: var(--dbc-amber-200);
+  --color-highlight-fg: #1a1a1a;
 
   --color-neutral: var(--dbc-neutral-200);
 

package/dist/styles.css

@@ -237,7 +237,7 @@ body.dbc-app {
   color: var(--color-code-fg, inherit);
   background-color: var(--color-code-bg, var(--color-bg-contextual));
   border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xs);
+  padding-inline: var(--spacing-xxs);
   font-family: var(--font-family-mono);
   font-size: 0.9em;
   box-decoration-break: clone;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.149",
+  "version": "0.0.150",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",

package/dist/styles/themes/forfatterweb/light.css

@@ -1,121 +0,0 @@
-:root {
-  /* Colors */
-  --color-primary: #1e88e5;
-  --color-primary-hover: #007bb0;
-  --color-highlight: #3b99e0;
-  --focus-ring: 0 0 0 2px #3b99e0;
-  --color-primary-hover: #0932b6;
-  --color-secondary: #6b7280;
-  --color-secondary-hover: #4b5563;
-  --color-accent: #ec4899;
-  --color-accent-hover: #be185d;
-
-  --color-highlight: #0932b6;
-  --color-hover: var(--opac-bg-light);
-
-  --color-background: #ffffff;
-
-  --color-text: #111827;
-  --color-text-on-primary: var(--color-text-inverse);
-  --color-text-on-highlight: var(--color-text-inverse);
-  --color-text-on-secondary: var(--color-text-inverse);
-  --color-text-muted: #6b7280;
-  --color-text-inverse: #ffffff;
-
-  --color-border: #e5e7eb;
-  --color-border-strong: #d1d5db;
-
-  --color-success: #16a34a;
-  --color-warning: #f59e0b;
-  --color-error: #dc2626;
-  --color-info: #0ea5e9;
-
-  --color-chart-empty: color-mix(in srgb, var(--color-text-muted) 15%, rgb(255 255 255 / 0));
-  --color-chart-neutral: color-mix(in srgb, var(--color-text-muted) 25%, rgb(255 255 255 / 0));
-  --color-chart-primary: color-mix(in srgb, var(--color-primary) 75%, rgb(255 255 255 / 0));
-  --color-chart-success: color-mix(in srgb, var(--color-success) 75%, rgb(255 255 255 / 0));
-  --color-chart-warning: color-mix(in srgb, var(--color-warning) 75%, rgb(255 255 255 / 0));
-  --color-chart-brand: color-mix(in srgb, var(--color-accent) 75%, rgb(255 255 255 / 0));
-  --color-chart-info: color-mix(in srgb, var(--color-info) 75%, rgb(255 255 255 / 0));
-  --color-chart-error: color-mix(in srgb, var(--color-error) 75%, rgb(255 255 255 / 0));
-
-  /* Legacy aliases */
-  --color-chart-blue: var(--color-chart-primary);
-  --color-chart-green: var(--color-chart-success);
-  --color-chart-amber: var(--color-chart-warning);
-  --color-chart-pink: var(--color-chart-brand);
-  --color-chart-sky: var(--color-chart-info);
-  --color-chart-red: var(--color-chart-error);
-
-  --opac-bg-light: rgba(0, 0, 0, 0.025);
-  --opac-bg-default: rgba(0, 0, 0, 0.05);
-  --opac-bg-dark: rgba(0, 0, 0, 0.1);
-  --opac-bg-dark-inverse: rgba(255, 255, 255, 0.1);
-
-  /* Spacing */
-  --spacing-xxs: 0.25rem;
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 0.75rem;
-  --spacing-md: 1rem;
-  --spacing-lg: 1.5rem;
-  --spacing-xl: 2rem;
-  --spacing-2xl: 3rem;
-
-  --icon-size: 20px;
-
-  --component-size-xs: 1.5rem;
-  --component-size-sm: 2rem;
-  --component-size-md: 2.5rem;
-  --component-size-lg: 3rem;
-  --component-size-xl: 4rem;
-
-  /* Borders */
-
-  --border-width-thin: 1px;
-  --border-width-thick: 2px;
-
-  --border-radius-none: 0;
-  --border-radius-default: 0.25rem;
-  --border-radius-rounded: 2rem;
-  --border-radius-round: 50%;
-
-  /* Typography */
-  --font-family: Roboto, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, monospace;
-
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-md: 1rem;
-  --font-size-lg: 1.25rem;
-  --font-size-xl: 2rem;
-  --font-size-2xl: 3rem;
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 700;
-
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-
-  /* Overlay */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
-
-  /* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-normal: 250ms ease-in-out;
-  --transition-slow: 400ms ease-in-out;
-
-  --focus-ring: 0 0 0 2px var(--color-primary);
-
-  /* Layers */
-  --z-dropdown: 1000;
-  --z-sticky: 1100;
-  --z-modal: 1200;
-  --z-popover: 1300;
-  --z-tooltip: 1400;
-}

package/dist/themes/forfatterweb.css

@@ -1,2 +0,0 @@
-@import '../styles/themes/forfatterweb/light.css';
-@import '../index.css';