@a-little-world/little-world-design-system 2.10.0

package/src/storybook/BreakpointDocumentation.tsx

@@ -0,0 +1,126 @@
+// @ts-nocheck
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import Text from '../components/Text/Text';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+
+const BreakpointItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+
+const BreakpointVisual = styled.div<{ $width: string }>`
+  width: ${({ $width }) => $width};
+  height: 60px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid ${({ theme }) => theme.color.border.contrast};
+  position: relative;
+  min-width: 80px;
+`;
+
+const BreakpointInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+
+const BreakpointLabel = styled.div`
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+
+const BreakpointValue = styled.div`
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+
+const BreakpointDescription = styled.div`
+  color: ${({ theme }) => theme.color.text.tertiary};
+  font-size: 0.875rem;
+`;
+
+const BreakpointSection = () => {
+  const theme = useTheme();
+  const breakpointTokens = [
+    {
+      key: 'xsmall',
+      value: theme.breakpoints.xsmall,
+      description: '360px - Mobile devices in portrait mode',
+      useCase: 'Small mobile screens',
+    },
+    {
+      key: 'small',
+      value: theme.breakpoints.small,
+      description: '500px - Small tablets and large mobile devices',
+      useCase: 'Large mobile and small tablets',
+    },
+    {
+      key: 'medium',
+      value: theme.breakpoints.medium,
+      description: '700px - Tablets and small laptops',
+      useCase: 'Tablets and small laptops',
+    },
+    {
+      key: 'large',
+      value: theme.breakpoints.large,
+      description: '900px - Desktop screens and large tablets',
+      useCase: 'Desktop screens',
+    },
+    {
+      key: 'xlarge',
+      value: theme.breakpoints.xlarge,
+      description: '1200px - Large desktop screens',
+      useCase: 'Large desktop screens',
+    },
+    {
+      key: 'xxlarge',
+      value: theme.breakpoints.xxlarge,
+      description: '1600px - Extra large screens and high-resolution displays',
+      useCase: 'Extra large screens',
+    },
+  ];
+
+  return (
+    <Container>
+      {breakpointTokens.map(({ key, value, description, useCase }) => (
+        <BreakpointItem key={key}>
+          <BreakpointVisual $width={value}>
+            <Text type="Body6" style={{ color: 'white', fontSize: '10px' }}>
+              {value}
+            </Text>
+          </BreakpointVisual>
+          <BreakpointInfo>
+            <BreakpointLabel>
+              <Text type="Body4">{key}</Text>
+            </BreakpointLabel>
+            <BreakpointValue>
+              <Text type="Body6">{description}</Text>
+            </BreakpointValue>
+            <BreakpointDescription>
+              <Text type="Body6">{useCase}</Text>
+            </BreakpointDescription>
+          </BreakpointInfo>
+        </BreakpointItem>
+      ))}
+    </Container>
+  );
+};
+
+export default BreakpointSection;

package/src/storybook/Components.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Item = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+  color: ${({ theme }) => theme.color.text.primary};
+
+  > * {
+    margin: 0px !important;
+  }
+`;
+
+const Details = styled.div`
+  font-family: 'Signika Negative', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  line-height: 1.5;
+`;
+
+export const TypographyItem = ({ item, details }: any) => (
+  <Item>
+    {item}
+    <Details>{details}</Details>
+  </Item>
+);

package/src/storybook/Documentation.tsx

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import Text from '../components/Text/Text';
+import { tokensPixelated } from '@a-little-world/little-world-design-system-core';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Panel = styled.div<{ isLight?: boolean }>`
+  background: ${({ isLight }) => (isLight ? '#FFFFFF' : '#000000')};
+  display: flex;
+  flex-direction: column;
+  gap: ${tokensPixelated.spacing.small};
+  align-items: ${({ isLight }) => (isLight ? 'flex-end' : 'flex-start')};
+  padding: ${({ isLight }) =>
+    isLight
+      ? `${tokensPixelated.spacing.large} 0 ${tokensPixelated.spacing.large}
+  ${tokensPixelated.spacing.large}`
+      : `${tokensPixelated.spacing.large} ${tokensPixelated.spacing.large}
+    ${tokensPixelated.spacing.large} 0`};
+  width: 100%;
+`;
+
+const Entry = styled.div<{ isLight?: boolean }>`
+  color: ${({ isLight }) => (isLight ? '#000' : '#FFF')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: ${tokensPixelated.spacing.small};
+  gap: ${tokensPixelated.spacing.small};
+`;
+
+const Example = styled.div<{ $background: string }>`
+  background: ${({ $background }) => $background};
+  width: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+`;
+
+const ColorSection = ({ section }: { section: string }) => {
+  const lightSection = tokensPixelated.color.theme.light[section];
+  const darkSection = tokensPixelated.color.theme.dark[section];
+
+  // Check if sections exist
+  if (!lightSection || !darkSection) {
+    console.warn(`Color section "${section}" not found in tokens`);
+    return (
+      <Container>
+        <Text>Color section "{section}" not found</Text>
+      </Container>
+    );
+  }
+
+  const light = Object.entries(lightSection);
+  const dark = Object.entries(darkSection);
+
+  return (
+    <Container>
+      <Panel isLight>
+        {light.map(([key, value]) => (
+          <Entry key={key} isLight>
+            <Text>{key}</Text>
+            <Example $background={value as string}>{value}</Example>
+          </Entry>
+        ))}
+      </Panel>
+      <Panel>
+        {dark.map(([key, value]) => (
+          <Entry key={key}>
+            <Example $background={value}>{value}</Example>
+            <Text>{key}</Text>
+          </Entry>
+        ))}
+      </Panel>
+    </Container>
+  );
+};
+
+export default ColorSection;

package/src/storybook/RadiusDocumentation.tsx

@@ -0,0 +1,133 @@
+// @ts-nocheck
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import Text from '../components/Text/Text';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+
+const RadiusItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+
+const RadiusVisual = styled.div<{ $radius: string }>`
+  width: 120px;
+  height: 80px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ $radius }) => $radius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid ${({ theme }) => theme.color.border.contrast};
+`;
+
+const RadiusInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+
+const RadiusLabel = styled.div`
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+
+const RadiusValue = styled.div`
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+
+const RadiusSection = () => {
+  const theme = useTheme();
+  const radiusTokens = [
+    {
+      key: 'xxxsmall',
+      value: theme.radius.xxxsmall,
+      description: '4px - Subtle rounding',
+    },
+    {
+      key: 'xxsmall',
+      value: theme.radius.xxsmall,
+      description: '8px - Standard rounding',
+    },
+    {
+      key: 'xsmall',
+      value: theme.radius.xsmall,
+      description: '12px - Comfortable rounding',
+    },
+    {
+      key: 'small',
+      value: theme.radius.small,
+      description: '16px - Noticeable rounding',
+    },
+    {
+      key: 'medium',
+      value: theme.radius.medium,
+      description: '20px - Prominent rounding',
+    },
+    {
+      key: 'large',
+      value: theme.radius.large,
+      description: '24px - Generous rounding',
+    },
+    {
+      key: 'xlarge',
+      value: theme.radius.xlarge,
+      description: '32px - Substantial rounding',
+    },
+    {
+      key: 'xxlarge',
+      value: theme.radius.xxlarge,
+      description: '40px - Maximum rounding',
+    },
+    {
+      key: 'massive',
+      value: theme.radius.massive,
+      description: '100px - Dramatic rounding',
+    },
+    {
+      key: 'half',
+      value: theme.radius.half,
+      description: '50% - Circular elements',
+    },
+    {
+      key: 'full',
+      value: theme.radius.full,
+      description: '100% - Fully rounded',
+    },
+  ];
+
+  return (
+    <Container>
+      {radiusTokens.map(({ key, value, description }) => (
+        <RadiusItem key={key}>
+          <RadiusVisual $radius={value}>
+            <Text type="Body4">{value}</Text>
+          </RadiusVisual>
+          <RadiusInfo>
+            <RadiusLabel>
+              <Text type="Body4">{key}</Text>
+            </RadiusLabel>
+            <RadiusValue>
+              <Text type="Body6">{description}</Text>
+            </RadiusValue>
+          </RadiusInfo>
+        </RadiusItem>
+      ))}
+    </Container>
+  );
+};
+
+export default RadiusSection;

package/src/storybook/SpacingDocumentation.tsx

@@ -0,0 +1,131 @@
+// @ts-nocheck
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import Text from '../components/Text/Text';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+
+const SpacingItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+
+const SpacingVisual = styled.div<{ $size: string }>`
+  width: 200px;
+  height: 24px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+  padding: ${({ $size }) => $size};
+`;
+
+const SpacingInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+
+const SpacingLabel = styled.div`
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+
+const SpacingValue = styled.div`
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+
+const SpacingSection = () => {
+  const theme = useTheme();
+  const spacingTokens = [
+    {
+      key: 'xxxxsmall',
+      value: theme.spacing.xxxxsmall,
+      description: '2px - Minimal spacing',
+    },
+    {
+      key: 'xxxsmall',
+      value: theme.spacing.xxxsmall,
+      description: '4px - Tight spacing',
+    },
+    {
+      key: 'xxsmall',
+      value: theme.spacing.xxsmall,
+      description: '8px - Standard spacing',
+    },
+    {
+      key: 'xsmall',
+      value: theme.spacing.xsmall,
+      description: '12px - Comfortable spacing',
+    },
+    {
+      key: 'small',
+      value: theme.spacing.small,
+      description: '16px - Standard section spacing',
+    },
+    {
+      key: 'medium',
+      value: theme.spacing.medium,
+      description: '24px - Breathing room',
+    },
+    {
+      key: 'large',
+      value: theme.spacing.large,
+      description: '32px - Generous spacing',
+    },
+    {
+      key: 'xlarge',
+      value: theme.spacing.xlarge,
+      description: '40px - Substantial spacing',
+    },
+    {
+      key: 'xxlarge',
+      value: theme.spacing.xxlarge,
+      description: '64px - Maximum spacing',
+    },
+    {
+      key: 'massive',
+      value: theme.spacing.massive,
+      description: '120px - Dramatic spacing',
+    },
+  ];
+
+  return (
+    <Container>
+      {spacingTokens.map(({ key, value, description }) => (
+        <SpacingItem key={key}>
+          <SpacingVisual $size={value}>
+            <Text type="Body4" style={{ color: 'white' }}>
+              {value}
+            </Text>
+          </SpacingVisual>
+          <SpacingInfo>
+            <SpacingLabel>
+              <Text type="Body4">{key}</Text>
+            </SpacingLabel>
+            <SpacingValue>
+              <Text type="Body6">{description}</Text>
+            </SpacingValue>
+          </SpacingInfo>
+        </SpacingItem>
+      ))}
+    </Container>
+  );
+};
+
+export default SpacingSection;

package/src/storybook/breakpoints.mdx

@@ -0,0 +1,83 @@
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../theme';
+
+import BreakpointSection from './BreakpointDocumentation';
+
+<Meta title="Foundations/Breakpoints" />
+
+<CustomThemeProvider>
+  # Breakpoints System
+
+  The breakpoints system defines responsive design breakpoints used throughout the Little World Design System. These breakpoints ensure consistent responsive behavior across all components and layouts.
+
+  ## Breakpoint Tokens
+
+  <Unstyled>
+    <BreakpointSection />
+  </Unstyled>
+
+  ## Usage Guidelines
+
+  - **xsmall (360px)**: Mobile devices in portrait mode
+  - **small (500px)**: Small tablets and large mobile devices
+  - **medium (700px)**: Tablets and small laptops
+  - **large (900px)**: Desktop screens and large tablets
+  - **xlarge (1200px)**: Large desktop screens
+  - **xxlarge (1600px)**: Extra large screens and high-resolution displays
+
+  ## Implementation
+
+  ```tsx
+  // Use breakpoints in styled-components
+  const ResponsiveContainer = styled.div`
+    padding: ${({ theme }) => theme.spacing.small};
+    
+    @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+      padding: ${({ theme }) => theme.spacing.large};
+    }
+    
+    @media (min-width: ${({ theme }) => theme.breakpoints.large}) {
+      padding: ${({ theme }) => theme.spacing.xlarge};
+    }
+  `;
+  ```
+
+  ## Responsive Design Best Practices
+
+  1. **Mobile First**: Start with mobile styles and enhance for larger screens
+  2. **Consistent Breakpoints**: Always use the defined breakpoint tokens
+  3. **Content Priority**: Ensure important content is accessible on all screen sizes
+  4. **Touch Targets**: Maintain minimum 44px touch targets on mobile
+  5. **Performance**: Optimize images and assets for different screen densities
+
+  ## Common Patterns
+
+  ```tsx
+  // Responsive typography
+  const ResponsiveText = styled(Text)`
+    font-size: 1rem; // Mobile default
+    
+    @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+      font-size: 1.25rem;
+    }
+    
+    @media (min-width: ${({ theme }) => theme.breakpoints.large}) {
+      font-size: 1.5rem;
+    }
+  `;
+
+  // Responsive layout
+  const Grid = styled.div`
+    display: grid;
+    grid-template-columns: 1fr; // Single column on mobile
+    
+    @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+      grid-template-columns: repeat(2, 1fr); // Two columns on tablet
+    }
+    
+    @media (min-width: ${({ theme }) => theme.breakpoints.large}) {
+      grid-template-columns: repeat(3, 1fr); // Three columns on desktop
+    }
+  `;
+  ```
+</CustomThemeProvider> 

package/src/storybook/colors.mdx

@@ -0,0 +1,118 @@
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../theme';
+
+import ColorSection from './Documentation';
+
+<Meta title="Foundations/Color System" />
+
+<CustomThemeProvider>
+  # Color System
+
+  All the colors of our app to support theming and complex UI components.
+  The color palette for the Little World Design System is defined by four overarching goals:
+
+  **Comprehensive**
+  The color system supports theming, data visualization, accent colors, and complex user interfaces.
+
+  **Accessible**
+  The color system provides sufficient contrast ratio and adheres to Web Content Accessibility Guidelines where possible.
+
+  **Consistent**
+  The color system enables a consistent appearance across varied products and platforms.
+
+  **Scalable**
+  The color system can be extended with minimal disruption to existing implementations.
+
+  The LW Design System utilises color tokens, which allows a designer or developer to understand how or when to apply our palette and the options available. They are used to bridge the gap between naming and use.
+  Color tokens are semantically named styled labels.
+  Currently we have two themes, light and dark, so each color token is assigned two color values.
+
+  After the theme value, comes the label that represents the UI element that the color is for. The next is the role of that color or it's emphasis.
+
+  ## Text Colors
+  ### Usage Guidelines
+  - **Primary**: Main text content
+  - **Secondary**: Supporting text and descriptions
+  - **Tertiary**: Muted text and placeholders
+  - **Quaternary**: Very subtle text
+  - **Title**: Page and section titles
+  - **Heading**: Component headings
+  - **Link**: Interactive text links
+  - **Button**: Text on button backgrounds
+  - **Control**: Form control labels
+  - **Error**: Error messages and validation
+  - **Success**: Success messages and confirmations
+  - **Accent**: Highlighted or emphasized text
+  - **Highlight**: Important or featured text
+  - **Bold**: Strong emphasis text
+  - **Disabled**: Inactive or disabled text
+  - **Reversed**: Text on dark backgrounds
+
+  <Unstyled>
+    <ColorSection section="text" />
+  </Unstyled>
+
+  ## Surface Colors
+  ### Usage Guidelines
+  - **Background**: Main page background
+  - **Primary**: Primary content areas
+  - **Secondary**: Secondary content areas
+  - **Tertiary**: Tertiary content areas
+  - **Quaternary**: Quaternary content areas
+  - **Contrast**: High contrast surfaces
+  - **Bold**: Prominent surfaces
+  - **Selected**: Selected or active states
+  - **Subtle**: Subtle background variations
+  - **Accent**: Accent color surfaces
+  - **Message**: Message and notification backgrounds
+  - **Indicator**: Status indicators
+  - **Highlight**: Highlighted content areas
+  - **Disabled**: Disabled or inactive surfaces
+  - **Error**: Error state backgrounds
+  - **Success**: Success state backgrounds
+  - **On**: Active or enabled states
+
+  <Unstyled>
+    <ColorSection section="surface" />
+  </Unstyled>
+
+  ## Border Colors
+  ### Usage Guidelines
+  - **Minimal**: Very subtle borders
+  - **Subtle**: Standard subtle borders
+  - **Moderate**: Medium strength borders
+  - **Accent**: Accent color borders
+  - **Bold**: Strong borders
+  - **Selected**: Selected state borders
+  - **Contrast**: High contrast borders
+  - **Reversed**: Borders on dark backgrounds
+  - **Error**: Error state borders
+  - **Success**: Success state borders
+  - **Disabled**: Disabled state borders
+
+  <Unstyled>
+    <ColorSection section="border" />
+  </Unstyled>
+
+  ## Status Colors
+  ### Usage Guidelines
+  - **Info**: Informational messages
+  - **Warning**: Warning messages
+  - **Error**: Error messages
+  - **Success**: Success messages
+
+  <Unstyled>
+    <ColorSection section="status" />
+  </Unstyled>
+
+  ## Implementation
+
+  ```tsx
+  // Use color tokens in styled-components
+  const Card = styled.div`
+    background: ${({ theme }) => theme.color.surface.primary};
+    color: ${({ theme }) => theme.color.text.primary};
+    border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  `;
+  ```
+</CustomThemeProvider>