@mozaic-ds/vue/src/components/Color.mdx

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';

<style>
  {`
  .css-1gwggp0 span {
    display: none;
  }
  `}
</style>

<Meta title="Foundations/Color" />

# Color

Colors are foundational elements of the interface used to convey meaning, establish hierarchy, and reinforce brand identity. They help guide user attention, communicate status, and ensure readability across different contexts and themes.

Each color should be used according to its designated role to preserve visual consistency, contrast, and usability across the interface.

<br />

### Text

Text colors define the appearance of all written content. Use primary and secondary text colors for readability and hierarchy, tertiary for subtle information, accent for emphasis, and inverse variants for dark backgrounds.

<ColorPalette>
  {/* Text */}
  <ColorItem
    title="Text / Primary"
    colors={{
      '--color-text-primary': 'var(--color-text-primary)',
    }}
  />

<ColorItem
  title="Text / Secondary"
  colors={{
    '--color-text-secondary': 'var(--color-text-secondary)',
  }}
/>

<ColorItem
  title="Text / Tertiary"
  colors={{
    '--color-text-tertiary': 'var(--color-text-tertiary)',
  }}
/>

<ColorItem
  title="Text / Accent"
  colors={{
    '--color-text-accent': 'var(--color-text-accent)',
  }}
/>

<ColorItem
  title="Text / Disabled"
  colors={{
    '--color-text-disabled': 'var(--color-text-disabled)',
  }}
/>

<ColorItem
  title="Text / Primary Inverse"
  colors={{
    '--color-text-primary-inverse': 'var(--color-text-primary-inverse)',
  }}
/>

  <ColorItem
    title="Text / Secondary Inverse"
    colors={{
      '--color-text-secondary-inverse':
        'var(--color-text-secondary-inverse)',
    }}
  />
</ColorPalette>

### Background

Background colors are used to create contrast and define sections of the interface. Primary is the default canvas, secondary provides subtle separation, accent highlights areas, ghost is for overlays, and inverse variants for dark parts.

<ColorPalette>
  {/* Background */}
  <ColorItem
    title="Background / Primary"
    colors={{
      '--color-background-primary': 'var(--color-background-primary)',
    }}
  />

<ColorItem
  title="Background / Secondary"
  colors={{
    '--color-background-secondary': 'var(--color-background-secondary)',
  }}
/>

<ColorItem
  title="Background / Secondary Inverse"
  colors={{
    '--color-background-secondary-inverse':
      'var(--color-background-secondary-inverse)',
  }}
/>

<ColorItem
  title="Background / Accent"
  colors={{
    '--color-background-accent': 'var(--color-background-accent)',
  }}
/>

<ColorItem
  title="Background / Accent Inverse"
  colors={{
    '--color-background-accent-inverse':
      'var(--color-background-accent-inverse)',
  }}
/>

<ColorItem
  title="Background / Ghost"
  colors={{
    '--color-background-ghost': 'var(--color-background-ghost)',
  }}
/>

  <ColorItem
    title="Background / Disabled"
    colors={{
      '--color-background-disabled': 'var(--color-background-disabled)',
    }}
  />
</ColorPalette>

### Border

Border colors provide visual separation between interface elements. Use primary for main borders, secondary and tertiary for subtle dividers, and inverse for dark backgrounds.

<ColorPalette>
  {/* Border */}
  <ColorItem
    title="Border / Primary"
    colors={{
      '--color-border-primary': 'var(--color-border-primary)',
    }}
  />

<ColorItem
  title="Border / Secondary"
  colors={{
    '--color-border-secondary': 'var(--color-border-secondary)',
  }}
/>

<ColorItem
  title="Border / Tertiary"
  colors={{
    '--color-border-tertiary': 'var(--color-border-tertiary)',
  }}
/>

  <ColorItem
    title="Border / Inverse"
    colors={{
      '--color-border-inverse': 'var(--color-border-inverse)',
    }}
  />
</ColorPalette>

### Icon

Icon colors communicate meaning and status. Primary icons are default, secondary and tertiary support hierarchy, accent icons draw attention, disabled icons indicate inactivity, and inverse variants are for dark backgrounds.

<ColorPalette>
  {/* Icon */}
  <ColorItem
    title="Icon / Primary"
    colors={{
      '--color-icon-primary': 'var(--color-icon-primary)',
    }}
  />

<ColorItem
  title="Icon / Secondary"
  colors={{
    '--color-icon-secondary': 'var(--color-icon-secondary)',
  }}
/>

<ColorItem
  title="Icon / Tertiary"
  colors={{
    '--color-icon-tertiary': 'var(--color-icon-tertiary)',
  }}
/>

<ColorItem
  title="Icon / Accent"
  colors={{
    '--color-icon-accent': 'var(--color-icon-accent)',
  }}
/>

<ColorItem
  title="Icon / Disabled"
  colors={{
    '--color-icon-disabled': 'var(--color-icon-disabled)',
  }}
/>

<ColorItem
  title="Icon / Primary Inverse"
  colors={{
    '--color-icon-primary-inverse': 'var(--color-icon-primary-inverse)',
  }}
/>

  <ColorItem
    title="Icon / Secondary Inverse"
    colors={{
      '--color-icon-secondary-inverse':
        'var(--color-icon-secondary-inverse)',
    }}
  />
</ColorPalette>