laif-ds/dist/css-for-template.css

Design System di Laif con componenti React basati su principi di Atomic Design

/* This files contains everything that should be imported in the template */

@theme inline {
  --radius-d-sm: calc(var(--d-radius) - 4px);
  --radius-d-md: calc(var(--d-radius) - 2px);
  --radius-d-lg: var(--d-radius);
  --radius-d-xl: calc(var(--d-radius) + 4px);
  --color-d-background: var(--d-background);
  --color-d-foreground: var(--d-foreground);
  --color-d-card: var(--d-card);
  --color-d-card-foreground: var(--d-card-foreground);
  --color-d-popover: var(--d-popover);
  --color-d-popover-foreground: var(--d-popover-foreground);
  --color-d-primary: var(--d-primary);
  --color-d-primary-foreground: var(--d-primary-foreground);
  --color-d-secondary: var(--d-secondary);
  --color-d-secondary-foreground: var(--d-secondary-foreground);
  --color-d-muted: var(--d-muted);
  --color-d-muted-foreground: var(--d-muted-foreground);
  --color-d-accent: var(--d-accent);
  --color-d-accent-foreground: var(--d-accent-foreground);
  --color-d-destructive: var(--d-destructive);
  --color-d-destructive-foreground: var(--d-destructive-foreground);
  --color-d-warning: var(--d-warning);
  --color-d-warning-background: var(--d-warning);
  --color-d-warning-foreground: var(--d-warning-foreground);
  --color-d-success: var(--d-success);
  --color-d-success-background: var(--d-success);
  --color-d-success-foreground: var(--d-success-foreground);
  --color-d-border: var(--d-border);
  --color-d-input: var(--d-input);
  --color-d-ring: var(--d-ring);
  --color-d-chart-1: var(--d-chart-1);
  --color-d-chart-2: var(--d-chart-2);
  --color-d-chart-3: var(--d-chart-3);
  --color-d-chart-4: var(--d-chart-4);
  --color-d-chart-5: var(--d-chart-5);
  --color-d-sidebar: var(--d-sidebar);
  --color-d-sidebar-foreground: var(--d-sidebar-foreground);
  --color-d-sidebar-primary: var(--d-sidebar-primary);
  --color-d-sidebar-primary-foreground: var(--d-sidebar-primary-foreground);
  --color-d-sidebar-accent: var(--d-sidebar-accent);
  --color-d-sidebar-accent-foreground: var(--d-sidebar-accent-foreground);
  --color-d-sidebar-border: var(--d-sidebar-border);
  --color-d-sidebar-ring: var(--d-sidebar-ring);
}

/* Force checkbox column to have fixed width */
[data-column-id="data-table-integrated-checkbox-column"] {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
}

/* Base styles */
* {
  outline-color: color-mix(in oklab, var(--d-ring) 50%, transparent);
}

body {
  background-color: var(--d-background);
  color: var(--d-foreground);
}