@llmnative/react 2.0.1 → 2.1.0

package/dist/types/src/App.d.ts

@@ -13,8 +13,11 @@ import { type I18nConfig } from "./I18n";
 import { type ServicesConfig, type GoogleProviderConfig, type SupabaseProviderConfig, type MockProviderConfig } from "./providers/manifest";
 interface MenuItem {
     path: string;
+    /** The label of the entry in a menu (`SideNav`, `Menu`). A route without it is never an entry. */
     title?: string;
     icon?: string;
+    /** A route only, never an entry of a menu, title or not (CR-126): a page reached by a link. */
+    hidden?: boolean;
     children?: MenuItem[];
     page?: React.ComponentType;
     layout?: React.ComponentType;
@@ -124,5 +127,11 @@ export declare const getContextMenu: () => string[];
  */
 export declare function AppProvider({ contextProviders, providers, appName, scrapeConfig, iconProvider, googleMaps, themeProvider, i18n, children, errorReportUrl, debug, basename, }: AppProviderProps): React.JSX.Element;
 declare function App({ importPage, LayoutDefault, menuConfig, children, ...providerProps }: AppProps): React.JSX.Element;
+/**
+ * Whether a route of `menuConfig` is a page to navigate to: it has a title, it is not `hidden`, and its path has
+ * no parameter (`/invite/:token`) and no wildcard (`*`). The others are routes only, never entries of a menu
+ * (CR-126). A parent stays when one of its children is an entry.
+ */
+export declare function isMenuEntry(item: MenuItem): boolean;
 export declare const useMenu: (type: string) => UseMenuItem[];
 export default App;

package/dist/types/src/Theme.d.ts

@@ -39,6 +39,22 @@ export interface ColorScale {
     border?: string;
     input?: string;
     ring?: string;
+    /** Top bar of the app (`bg-header`): the title bar of the IDE. */
+    header?: string;
+    headerForeground?: string;
+    /** The line under the top bar (`border-header-border`). */
+    headerBorder?: string;
+    /** Side navigation (`bg-sidebar`): the side bar of the IDE. */
+    sidebar?: string;
+    sidebarForeground?: string;
+    sidebarBorder?: string;
+    /** The selected entry of the side navigation (`bg-sidebar-accent`). */
+    sidebarAccent?: string;
+    sidebarAccentForeground?: string;
+    /** Bottom bar of the app (`bg-footer`): the status bar of the IDE. */
+    footer?: string;
+    footerForeground?: string;
+    footerBorder?: string;
 }
 export interface MenuTheme {
     wrapperClassName?: string;

package/llms-full.txt

@@ -98,6 +98,15 @@ The VS Code and Tokyo Night themes are compiled from the original VS Code theme
 
 `ColorScale` tokens: `background`, `foreground`, `canvas` (page floor behind cards and panels, `bg-canvas`; falls back to `background`), `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `success`, `warning`, `info` (each with its `*Foreground`), `border`, `input` (border of form fields), `ring`. A consumer bridging the tokens in its own `@theme inline` adds `--color-canvas: hsl(var(--rf-canvas, var(--rf-background)));`.
 
+**The frame of the app** (CR-126), as the title bar, side bar and status bar of the IDE: `header`, `headerForeground`, `headerBorder`, `sidebar`, `sidebarForeground`, `sidebarBorder`, `sidebarAccent` (the selected entry), `sidebarAccentForeground`, `footer`, `footerForeground`, `footerBorder`. The IDE themes carry them (VS Code Light+: gray title bar, blue status bar); a theme without them falls back to the base tokens (header and footer on `background`, sidebar on `card`, borders on `border`). Utilities: `bg-header text-header-foreground border-header-border`, `bg-sidebar …`, `bg-footer …`. `SideNav` draws itself with the sidebar tokens. The top bar and status bar of a layout:
+
+```tsx
+<header className="flex h-14 shrink-0 items-center gap-3 border-b border-header-border bg-header px-4 text-header-foreground">…</header>
+<footer className="shrink-0 border-t border-footer-border bg-footer px-4 py-1.5 text-xs text-footer-foreground">…</footer>
+```
+
+A border without a color class (`border`, `border-b`) is the theme's `border`, not the text color. The scaffold (`npx @llmnative/react create`) starts in `vscode-light-modern` and bridges all these tokens in `src/styles/globals.css`; a consumer scaffolded before adds the `--color-header…`/`--color-sidebar…`/`--color-footer…` lines of `src/globals.css` to its own `@theme inline`.
+
 ---
 
 ## Provider System
@@ -147,6 +156,27 @@ export const menuConfig: MenuConfig = {
 
 La home va dichiarata con `path: '/'`: senza quella voce, `/` mostra "Missing Page".
 
+### Voci di menu e rotte
+
+`SideNav menuKey="main"` e `Menu menuKey="main"` mostrano solo le **voci**: le route di quella chiave con `title`,
+senza `hidden: true`, senza parametri (`:token`) e senza `*`. Le altre sono rotte e basta (CR-126). Ogni voce
+mostrata ha `title` **e** `icon`. Una pagina raggiunta da un link (accesso, invito, impostazioni dal menu utente)
+sta in una chiave che nessun menu mostra, oppure ha `hidden: true`:
+
+```tsx
+export const menuConfig: MenuConfig = {
+  main: [
+    { path: '/', title: 'Dashboard', icon: 'layout-dashboard', page: HomePage },
+    { path: '/contacts', title: 'Contatti', icon: 'users', page: ContactsPage },
+    { path: '/settings', title: 'Impostazioni', icon: 'settings', page: SettingsPage, hidden: true },
+  ],
+  routes: [
+    { path: '/invite/:token', page: InvitePage, layout: AccessLayout },
+    { path: '*', page: NotFoundPage },
+  ],
+};
+```
+
 ### Hooks
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/scripts/cli/setup-project.js

@@ -6,6 +6,14 @@ const root = process.cwd();
 const args = process.argv.slice(2);
 const shouldReset = args.includes('--reset');
 
+// The built-in themes (BUILT_IN_THEME_IDS of src/Theme.tsx), those of the IDEs first: a new app starts in the
+// colors of an IDE, frame included (CR-126).
+const THEMES = [
+    'vscode-light-modern', 'vscode-dark-modern', 'vscode-light-plus', 'vscode-dark-plus',
+    'tokyo-night-light', 'tokyo-night', 'default', 'flat', 'cyber',
+];
+const DEFAULT_THEME = 'vscode-light-modern';
+
 function getArg(name, fallback = '') {
     const prefix = `--${name}=`;
     const arg = args.find((item) => item.startsWith(prefix));
@@ -88,10 +96,10 @@ async function askInteractive(callback) {
             ? iconProviderInput.trim()
             : 'lucide';
 
-        const themeInput = await question('Which theme? (default, flat, cyber; default: default) ');
-        const theme = ['default', 'flat', 'cyber'].includes(themeInput.trim())
+        const themeInput = await question(`Which theme? (${THEMES.join(', ')}; default: ${DEFAULT_THEME}) `);
+        const theme = THEMES.includes(themeInput.trim())
             ? themeInput.trim()
-            : 'default';
+            : DEFAULT_THEME;
 
         const localeInput = await question('Default locale? (en, it, fr, de, es; default: en) ');
         const locale = localeInput.trim() || 'en';
@@ -433,6 +441,18 @@ function createSourceFiles(params) {
     --color-border:                 hsl(var(--rf-border));
     --color-input:                  hsl(var(--rf-input));
     --color-ring:                   hsl(var(--rf-ring));
+    /* The frame of the app: the title bar, side bar and status bar of the theme. */
+    --color-header:                 hsl(var(--rf-header, var(--rf-background)));
+    --color-header-foreground:      hsl(var(--rf-header-foreground, var(--rf-foreground)));
+    --color-header-border:          hsl(var(--rf-header-border, var(--rf-border)));
+    --color-sidebar:                hsl(var(--rf-sidebar, var(--rf-card)));
+    --color-sidebar-foreground:     hsl(var(--rf-sidebar-foreground, var(--rf-foreground)));
+    --color-sidebar-border:         hsl(var(--rf-sidebar-border, var(--rf-border)));
+    --color-sidebar-accent:         hsl(var(--rf-sidebar-accent, var(--rf-accent)));
+    --color-sidebar-accent-foreground: hsl(var(--rf-sidebar-accent-foreground, var(--rf-accent-foreground)));
+    --color-footer:                 hsl(var(--rf-footer, var(--rf-background)));
+    --color-footer-foreground:      hsl(var(--rf-footer-foreground, var(--rf-muted-foreground)));
+    --color-footer-border:          hsl(var(--rf-footer-border, var(--rf-border)));
     --radius: 0.5rem;
 }
 
@@ -587,7 +607,7 @@ function scaffoldProject() {
             aiProvider:   getArg('ai-provider', 'none'),
             proxyProvider: getArg('proxy-provider', 'none'),
             iconProvider: getArg('icon-provider', 'lucide'),
-            theme:        getArg('theme', getArg('theme-provider', 'default')),
+            theme:        getArg('theme', getArg('theme-provider', DEFAULT_THEME)),
             locale:       getArg('locale', 'en'),
             template:     getArg('template', 'blank'),
             hosting:      getArg('hosting', 'n'),

package/templates/_shared/sections/Footer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Footer() {
     return (
-        <footer className="shrink-0 border-t bg-background px-4 py-2 text-end text-sm text-muted-foreground">
+        <footer className="shrink-0 border-t border-footer-border bg-footer px-4 py-1.5 text-end text-xs text-footer-foreground">
             Powered by [projectname]
         </footer>
     );

package/templates/_shared/sections/Header.tsx

@@ -7,7 +7,7 @@ type HeaderProps = {
 
 export default function Header({ onMenuToggle }: HeaderProps) {
     return (
-        <header className="flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4">
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-header-border bg-header px-4 text-header-foreground">
             <ActionButton
                 icon="menu"
                 ariaLabel="Toggle navigation"

package/themes/default.ts

@@ -367,27 +367,28 @@ export const components: Theme = {
     },
     SideNav: {
         wrapperClassName: '',
-        shellClassName: 'border-r border-border bg-card/80 text-foreground backdrop-blur supports-[backdrop-filter]:bg-card/70',
+        // The side bar of the theme (CR-126): `sidebar*` tokens, the base ones when the theme has none.
+        shellClassName: 'border-r border-sidebar-border bg-sidebar text-sidebar-foreground',
         overlayClassName: 'shadow-xl',
-        headerClassName: 'border-b border-border/60 px-1.5 py-2',
+        headerClassName: 'border-b border-sidebar-border px-1.5 py-2',
         navClassName: 'px-1.5 py-2',
-        bottomNavClassName: 'border-t border-border/60 px-1.5 py-2',
-        footerClassName: 'border-t border-border/60 px-1.5 py-2',
-        groupLabelClassName: 'text-[10.5px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none',
-        groupDividerClassName: 'bg-border/50',
+        bottomNavClassName: 'border-t border-sidebar-border px-1.5 py-2',
+        footerClassName: 'border-t border-sidebar-border px-1.5 py-2',
+        groupLabelClassName: 'text-[10.5px] font-semibold uppercase tracking-widest text-sidebar-foreground/60 select-none',
+        groupDividerClassName: 'bg-sidebar-border',
         itemClassName: 'rounded-lg',
-        itemActiveClassName: 'bg-primary/10 text-primary font-medium shadow-sm',
-        itemChildActiveClassName: 'bg-accent/80 text-foreground font-medium',
-        itemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
+        itemActiveClassName: 'bg-sidebar-accent text-sidebar-accent-foreground font-medium',
+        itemChildActiveClassName: 'bg-sidebar-accent/60 text-sidebar-accent-foreground font-medium',
+        itemInactiveClassName: 'text-sidebar-foreground/80 hover:text-sidebar-accent-foreground hover:bg-sidebar-accent/70',
         itemIconClassName: '',
         itemTextClassName: '',
         itemBadgeClassName: 'ml-auto shrink-0 text-[10px] font-semibold leading-none px-1.5 py-[3px] rounded-full bg-primary/15 text-primary',
         itemCollapsedBadgeClassName: 'absolute -top-0.5 -right-1 h-[7px] w-[7px] rounded-full bg-primary ring-1 ring-card',
         itemToggleClassName: 'shrink-0 flex items-center justify-center w-6 h-6 rounded-md transition-colors text-muted-foreground/50 hover:text-foreground hover:bg-accent/70',
         subItemClassName: 'rounded-md',
-        subItemActiveClassName: 'bg-primary/10 text-primary font-medium',
-        subItemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
-        collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent/70',
+        subItemActiveClassName: 'bg-sidebar-accent text-sidebar-accent-foreground font-medium',
+        subItemInactiveClassName: 'text-sidebar-foreground/80 hover:text-sidebar-accent-foreground hover:bg-sidebar-accent/70',
+        collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-sidebar-foreground/70 hover:text-sidebar-accent-foreground hover:bg-sidebar-accent/70',
     },
     Toolbar: {
         wrapperClassName: 'z-20 w-full',

package/themes/tokyo-night-light.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '224.3 17.6% 25.7%',
                 border: '230 5.1% 76.9%',
                 input: '230 5.1% 76.9%',
-                ring: '226.7 10.1% 82.5%'
+                ring: '226.7 10.1% 82.5%',
+                header: '226.7 12.3% 85.7%',
+                headerForeground: '224.3 17.6% 25.7%',
+                headerBorder: '230 5.1% 76.9%',
+                sidebar: '226.7 12.3% 85.7%',
+                sidebarForeground: '224.3 17.6% 25.7%',
+                sidebarBorder: '230 5.1% 76.9%',
+                sidebarAccent: '231.4 16.3% 91.6%',
+                sidebarAccentForeground: '224.3 17.6% 25.7%',
+                footer: '226.7 12.3% 85.7%',
+                footerForeground: '224.3 17.6% 25.7%',
+                footerBorder: '230 5.1% 76.9%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '229.3 35.4% 75.1%',
                 border: '240 11.1% 7.1%',
                 input: '240 14.3% 6.9%',
-                ring: '233.3 19.1% 18.4%'
+                ring: '233.3 19.1% 18.4%',
+                header: '240 15.4% 10.2%',
+                headerForeground: '232.7 13.9% 53.5%',
+                headerBorder: '240 11.1% 7.1%',
+                sidebar: '240 15.4% 10.2%',
+                sidebarForeground: '232.7 13.9% 53.5%',
+                sidebarBorder: '240 11.1% 7.1%',
+                sidebarAccent: '235.4 18.8% 13.5%',
+                sidebarAccentForeground: '229.3 35.4% 75.1%',
+                footer: '240 15.4% 10.2%',
+                footerForeground: '232.7 13.9% 53.5%',
+                footerBorder: '240 11.1% 7.1%'
             },
         },
     },

package/themes/tokyo-night.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '224.3 17.6% 25.7%',
                 border: '230 5.1% 76.9%',
                 input: '230 5.1% 76.9%',
-                ring: '226.7 10.1% 82.5%'
+                ring: '226.7 10.1% 82.5%',
+                header: '226.7 12.3% 85.7%',
+                headerForeground: '224.3 17.6% 25.7%',
+                headerBorder: '230 5.1% 76.9%',
+                sidebar: '226.7 12.3% 85.7%',
+                sidebarForeground: '224.3 17.6% 25.7%',
+                sidebarBorder: '230 5.1% 76.9%',
+                sidebarAccent: '231.4 16.3% 91.6%',
+                sidebarAccentForeground: '224.3 17.6% 25.7%',
+                footer: '226.7 12.3% 85.7%',
+                footerForeground: '224.3 17.6% 25.7%',
+                footerBorder: '230 5.1% 76.9%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '229.3 35.4% 75.1%',
                 border: '240 11.1% 7.1%',
                 input: '240 14.3% 6.9%',
-                ring: '233.3 19.1% 18.4%'
+                ring: '233.3 19.1% 18.4%',
+                header: '240 15.4% 10.2%',
+                headerForeground: '232.7 13.9% 53.5%',
+                headerBorder: '240 11.1% 7.1%',
+                sidebar: '240 15.4% 10.2%',
+                sidebarForeground: '232.7 13.9% 53.5%',
+                sidebarBorder: '240 11.1% 7.1%',
+                sidebarAccent: '235.4 18.8% 13.5%',
+                sidebarAccentForeground: '229.3 35.4% 75.1%',
+                footer: '240 15.4% 10.2%',
+                footerForeground: '232.7 13.9% 53.5%',
+                footerBorder: '240 11.1% 7.1%'
             },
         },
     },

package/themes/vscode-dark-modern.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 23.1%',
                 border: '0 0% 89.8%',
                 input: '0 0% 80.8%',
-                ring: '209 100% 36.1%'
+                ring: '209 100% 36.1%',
+                header: '0 0% 97.3%',
+                headerForeground: '0 0% 11.8%',
+                headerBorder: '0 0% 89.8%',
+                sidebar: '0 0% 97.3%',
+                sidebarForeground: '0 0% 23.1%',
+                sidebarBorder: '0 0% 89.8%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 23.1%',
+                footer: '0 0% 97.3%',
+                footerForeground: '0 0% 23.1%',
+                footerBorder: '0 0% 89.8%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 16.9%',
                 input: '0 0% 23.5%',
-                ring: '206 100% 41.6%'
+                ring: '206 100% 41.6%',
+                header: '0 0% 9.4%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 16.9%',
+                sidebar: '0 0% 9.4%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '0 0% 16.9%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '0 0% 9.4%',
+                footerForeground: '0 0% 80%',
+                footerBorder: '0 0% 16.9%'
             },
         },
     },

package/themes/vscode-dark-plus.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 38%',
                 border: '0 0% 82.7%',
                 input: '0 0% 80.8%',
-                ring: '204.1 100% 47.3%'
+                ring: '204.1 100% 47.3%',
+                header: '0 0% 86.7%',
+                headerForeground: '0 0% 20%',
+                headerBorder: '0 0% 86.7%',
+                sidebar: '0 0% 95.3%',
+                sidebarForeground: '0 0% 38%',
+                sidebarBorder: '0 0% 95.3%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 38%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 27.1%',
                 input: '0 0% 23.5%',
-                ring: '204.1 100% 41.6%'
+                ring: '204.1 100% 41.6%',
+                header: '0 0% 23.5%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 23.5%',
+                sidebar: '240 1.3% 14.7%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '240 1.3% 14.7%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
     },

package/themes/vscode-light-modern.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 23.1%',
                 border: '0 0% 89.8%',
                 input: '0 0% 80.8%',
-                ring: '209 100% 36.1%'
+                ring: '209 100% 36.1%',
+                header: '0 0% 97.3%',
+                headerForeground: '0 0% 11.8%',
+                headerBorder: '0 0% 89.8%',
+                sidebar: '0 0% 97.3%',
+                sidebarForeground: '0 0% 23.1%',
+                sidebarBorder: '0 0% 89.8%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 23.1%',
+                footer: '0 0% 97.3%',
+                footerForeground: '0 0% 23.1%',
+                footerBorder: '0 0% 89.8%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 16.9%',
                 input: '0 0% 23.5%',
-                ring: '206 100% 41.6%'
+                ring: '206 100% 41.6%',
+                header: '0 0% 9.4%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 16.9%',
+                sidebar: '0 0% 9.4%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '0 0% 16.9%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '0 0% 9.4%',
+                footerForeground: '0 0% 80%',
+                footerBorder: '0 0% 16.9%'
             },
         },
     },

package/themes/vscode-light-plus.ts

@@ -28,7 +28,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 38%',
                 border: '0 0% 82.7%',
                 input: '0 0% 80.8%',
-                ring: '204.1 100% 47.3%'
+                ring: '204.1 100% 47.3%',
+                header: '0 0% 86.7%',
+                headerForeground: '0 0% 20%',
+                headerBorder: '0 0% 86.7%',
+                sidebar: '0 0% 95.3%',
+                sidebarForeground: '0 0% 38%',
+                sidebarBorder: '0 0% 95.3%',
+                sidebarAccent: '230.8 31.7% 92%',
+                sidebarAccentForeground: '0 0% 38%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
         dark: {
@@ -51,7 +62,18 @@ const definition: ThemeDefinition = {
                 accentForeground: '0 0% 80%',
                 border: '0 0% 27.1%',
                 input: '0 0% 23.5%',
-                ring: '204.1 100% 41.6%'
+                ring: '204.1 100% 41.6%',
+                header: '0 0% 23.5%',
+                headerForeground: '0 0% 80%',
+                headerBorder: '0 0% 23.5%',
+                sidebar: '240 1.3% 14.7%',
+                sidebarForeground: '0 0% 80%',
+                sidebarBorder: '240 1.3% 14.7%',
+                sidebarAccent: '240 5.2% 22.7%',
+                sidebarAccentForeground: '0 0% 80%',
+                footer: '204.1 100% 40%',
+                footerForeground: '0 0% 100%',
+                footerBorder: '204.1 100% 40%'
             },
         },
     },