tessl/npm-keystone-ui--core

Core design system components and utilities for KeystoneJS applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Core Application Wrapper

Name: tessl/npm-keystone-ui--core
Author: tessl

The Core component serves as the root application wrapper that provides global styles, CSS normalization, and foundational theme integration for KeystoneJS applications.

Capabilities

Core Component

Root application wrapper component that applies global styles, CSS normalization, and theme-based foundational styling to the entire application.

/**
 * Root application wrapper with global styles and normalization
 * @param props - Core configuration and children props
 * @returns JSX element providing global application foundation
 */
function Core(props: CoreProps): JSX.Element;

interface CoreProps {
  /** Child components of the application */
  children: ReactNode;
  /** Whether to include CSS normalization styles */
  includeNormalize?: boolean;
  /** Whether to optimize text rendering with CSS properties */
  optimizeLegibility?: boolean;
}

Default Values:

includeNormalize: true
optimizeLegibility: true

Usage Examples:

import { Core, ThemeProvider, theme } from "@keystone-ui/core";

// Basic setup with default options
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Core>
        <div>Your application content</div>
      </Core>
    </ThemeProvider>
  );
}

// Custom configuration
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Core 
        includeNormalize={false}
        optimizeLegibility={false}
      >
        <div>Your application content</div>
      </Core>
    </ThemeProvider>
  );
}

// Typical KeystoneJS setup
function KeystoneApp() {
  return (
    <ThemeProvider theme={theme}>
      <Core>
        <header>Navigation</header>
        <main>
          <h1>Dashboard</h1>
          <p>Application content here</p>
        </main>
        <footer>Footer content</footer>
      </Core>
    </ThemeProvider>
  );
}

Global Styles Applied

CSS Normalization

When includeNormalize is true (default), Core applies normalize.css v8.0.1 to ensure consistent styling across browsers. This includes:

Consistent margins and padding reset
Standardized form element styling
Cross-browser typography normalization
Focus outline removal (replaced with theme-based focus styles)

Note: The normalization styles are also available as a standalone export if needed:

import { normalize } from "@keystone-ui/core";
// normalize is an Emotion CSS object containing normalize.css v8.0.1

Base Typography Styles

Core applies foundational typography styles using theme values:

html {
  font-size: initial !important; /* Respects user font-size preferences */
}

body {
  background-color: theme.colors.background;
  color: theme.colors.foreground;
  font-size: 1rem;
  font-weight: theme.typography.fontWeight.regular;
  line-height: theme.typography.leading.base;
  font-family: theme.typography.fontFamily.body;
}

Link Styling

Default link colors from the theme:

a {
  color: theme.colors.linkColor;
}

a:hover {
  color: theme.colors.linkHoverColor;
}

Box Model Reset

Universal box-sizing and border defaults:

*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: theme.colors.border;
}

Text Rendering Optimization

When optimizeLegibility is true (default), applies text rendering optimizations:

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Integration with Theme System

Core automatically consumes theme values through the useTheme hook, ensuring that global styles reflect the current theme configuration:

import { Core, ThemeProvider } from "@keystone-ui/core";

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    background: '#f8f9fa',
    foreground: '#2d3748'
  },
  typography: {
    ...theme.typography,
    fontFamily: {
      ...theme.typography.fontFamily,
      body: 'Inter, system-ui, sans-serif'
    }
  }
};

// Custom theme values will be applied globally by Core
<ThemeProvider theme={customTheme}>
  <Core>
    <App />
  </Core>
</ThemeProvider>

Best Practices

Application Structure

Place Core as close to the root as possible, typically inside ThemeProvider:

// ✓ Recommended structure
<ThemeProvider theme={theme}>
  <Core>
    <Router>
      <App />
    </Router>
  </Core>
</ThemeProvider>

// ✗ Avoid nesting Core deeply
<ThemeProvider theme={theme}>
  <Router>
    <App>
      <Core>
        <Content />
      </Core>
    </App>
  </Router>
</ThemeProvider>

CSS Reset Considerations

If your application already includes a CSS reset or normalization library:

// Disable built-in normalization
<Core includeNormalize={false}>
  <App />
</Core>

Performance Considerations

Text rendering optimization can impact performance on some devices:

// Disable for performance-critical applications
<Core optimizeLegibility={false}>
  <App />
</Core>

Server-Side Rendering

Core is fully compatible with server-side rendering and will apply styles consistently across client and server:

// SSR-compatible setup
import { renderToString } from 'react-dom/server';

const html = renderToString(
  <ThemeProvider theme={theme}>
    <Core>
      <App />
    </Core>
  </ThemeProvider>
);

Relationship to Other Components

Core provides the foundation that all other @keystone-ui/core components build upon:

Theme Integration: Ensures theme values are available globally
Typography Base: Provides font family and sizing foundation for Text and Heading components
Color Foundation: Establishes default text and background colors
Box Model: Sets up consistent box-sizing for layout components
Focus Management: Establishes focus ring styles used by interactive components

Core should always be used in conjunction with ThemeProvider to provide complete functionality.