This collection of CSS files includes modular styling for various layout structures and reusable component templates. It provides a consistent and flexible styling system for building web pages and applications.

emptystate.css

/**
 * EmptyState Component Layout System
 * 
 * This CSS document defines a layout system for the EmptyState component,
 * including the anatomy elements such as illustration, main text, supporting text,
 * primary button, secondary link, border, and variations. The system provides
 * a modular approach for consistent styling and customization of EmptyState components.
 * 
 * EmptyState Anatomy Elements:
 * - Illustration, Main Text, Supporting Text, Primary Button, Secondary Link, Border
 * 
 * Variations:
 * - Icon Illustration, Code Block, Content and Copy, First Time User Experiences,
 *   In a Narrow Contaer
 * 
 * Usage:
 * Apply the provided classes to the EmptyState HTML structure to achieve consistent styling.
 * Customize text, icons, and other content based on specific feature requirements.
 * 
 * Sample Usage:
 * 
 * <div class="emptystate icon-illustration">
 *   <img class="illustration" src="icon.svg" alt="Icon Illustration">
 *   <h2 class="main-text">No items found</h2>
 *   <p class="supporting-text">Explore and add new items to enhance your experience.</p>
 *   <button class="primary-button">Add Item</button>
 *   <a href="#" class="secondary-link">Learn more</a>
 *   <div class="border"></div>
 * </div>
 */

/* EmptyState Anatomy Elements */
.emptystate {
  /* Base styling for the EmptyState component */
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.emptystate .illustration {
  /* Styling for the illustration element within EmptyState */
  margin-bottom: 10px;
}

.emptystate .main-text {
  /* Styling for the main text element within EmptyState */
  font-size: 1.5rem;
  font-weight: bold;
}

.emptystate .supporting-text {
  /* Styling for the supporting text element within EmptyState */
  margin-top: 10px;
  font-size: 1rem;
}

.emptystate .primary-button {
  /* Styling for the primary button within EmptyState */
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #0366d6;
  color: #fff;
  cursor: pointer;
}

.emptystate .secondary-link {
  /* Styling for the secondary link within EmptyState */
  margin-top: 10px;
  font-size: 0.9rem;
  color: #0366d6;
  text-decoration: underline;
}

.emptystate .border {
  /* Styling for the border within EmptyState */
  border: 1px solid #e1e4e8;
  margin-top: 20px;
}

/* EmptyState Variations */
.emptystate.icon-illustration {
  /* Styling for icon illustration variation */
  background-color: #f6f8fa;
  padding: 40px;
}

.emptystate.code-block {
  /* Styling for code block variation */
  background-color: #f6f8fa;
  padding: 20px;
  font-family: 'Courier New', monospace;
}

.emptystate.content-copy {
  /* Styling for content and copy variation */
  background-color: #f6f8fa;
  padding: 20px;
}

.emptystate.first-time-user {
  /* Styling for first time user experience variation */
  background-color: #f6f8fa;
  padding: 40px;
}

.emptystate.in-narrow-container {
  /* Styling for narrow container variation */
  max-width: 400px;
}

layout.css

/**
 * Layout System
 * Filename: layout.css
 * 
 * This CSS document defines a consistent layout system using variables
 * and classes for spacing, width, and flex properties. It provides a
 * modular approach for building layouts with consistent styling.
 * 
 * Layout Variables:
 * - Spacing: margins and paddings
 * - Widths: container and column widths
 * - Flex Properties: flex container and item properties
 * 
 * Layout Classes:
 * - container, row, column
 * - spacing-{size}, margin-{size}, padding-{size}
 * - width-{size}, flex-container, flex-item
 * 
 * Usage:
 * Apply the provided classes to HTML elements for consistent layout styling.
 * Customize spacing, widths, and flex properties by modifying the defined variables.
 * 
 * Example:
 * <div class="container">
 *   <div class="row">
 *     <div class="column width-50 padding-medium">
 *       Content Column 1
 *     </div>
 *     <div class="column width-50 padding-medium">
 *       Content Column 2
 *     </div>
 *   </div>
 * </div>
 */

/* Layout Variables */
:root {
  /* Spacing */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;

  /* Widths */
  --container-width: 100%;
  --column-width: 100%;

  /* Flex Properties */
  --flex-container: 1;
  --flex-item: 1;
}

/* Layout Classes */
.container {
  width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  width: var(--column-width);
}

.spacing-small {
  margin: var(--spacing-small);
}

.spacing-medium {
  margin: var(--spacing-medium);
}

.spacing-large {
  margin: var(--spacing-large);
}

.margin-small {
  margin: var(--spacing-small);
}

.margin-medium {
  margin: var(--spacing-medium);
}

.margin-large {
  margin: var(--spacing-large);
}

.padding-small {
  padding: var(--spacing-small);
}

.padding-medium {
  padding: var(--spacing-medium);
}

.padding-large {
  padding: var(--spacing-large);
}

.width-50 {
  width: 50%;
}

.width-100 {
  width: 100%;
}

.flex-container {
  flex: var(--flex-container);
  display: flex;
}

.flex-item {
  flex: var(--flex-item);
}