@fulldevlabs/fullui/src/css/sizes.css

A component library built for Astro

:root,
.full-density-base {
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;

  --text-element-sm: 12px;
  --text-element-md: 14px;
  --text-element-lg: 16px;

  --text-heading-xs: 20px;
  --text-heading-sm: 24px;
  --text-heading-md: 30px;
  --text-heading-lg: 36px;
  --text-heading-xl: 36px;
  --text-heading-2xl: 36px;

  @media (min-width: 1024px) {
    --text-sm: 16px;
    --text-md: 18px;
    --text-lg: 20px;

    --text-element-sm: 14px;
    --text-element-md: 16px;
    --text-element-lg: 16px;

    --text-heading-xs: 24px;
    --text-heading-sm: 30px;
    --text-heading-md: 36px;
    --text-heading-lg: 48px;
    --text-heading-xl: 60px;
    --text-heading-2xl: 72px;
  }

  --space-sm-1: 3px;
  --space-sm-2: 6px;
  --space-sm-3: 12px;
  --space-sm-4: 24px;
  --space-sm-5: 48px;
  --space-sm-6: 96px;
  --space-md-1: 4px;
  --space-md-2: 8px;
  --space-md-3: 16px;
  --space-md-4: 32px;
  --space-md-5: 64px;
  --space-md-6: 128px;
  --space-lg-1: 5px;
  --space-lg-2: 10px;
  --space-lg-3: 20px;
  --space-lg-4: 40px;
  --space-lg-5: 80px;
  --space-lg-6: 160px;

  --space-element-sm-1: 6px;
  --space-element-sm-2: 9px;
  --space-element-sm-3: 12px;
  --space-element-md-1: 8px;
  --space-element-md-2: 12px;
  --space-element-md-3: 16px;
  --space-element-lg-1: 10px;
  --space-element-lg-2: 16px;
  --space-element-lg-3: 20px;
}

.full-density-compact {
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;

  --text-element-sm: 12px;
  --text-element-md: 14px;
  --text-element-lg: 14px;

  --text-heading-xs: 12px;
  --text-heading-sm: 14px;
  --text-heading-md: 16px;
  --text-heading-lg: 18px;
  --text-heading-xl: 20px;
  --text-heading-2xl: 24px;
  --text-heading-3xl: 24px;
  --text-heading-4xl: 24px;
  --text-heading-5xl: 24px;

  --space-sm-1: 3px;
  --space-sm-2: 6px;
  --space-sm-3: 9px;
  --space-sm-4: 12px;
  --space-sm-5: 15px;
  --space-sm-6: 18px;
  --space-md-1: 4px;
  --space-md-2: 8px;
  --space-md-3: 12px;
  --space-md-4: 16px;
  --space-md-5: 20px;
  --space-md-6: 24px;
  --space-lg-1: 5px;
  --space-lg-2: 10px;
  --space-lg-3: 15px;
  --space-lg-4: 20px;
  --space-lg-5: 25px;
  --space-lg-6: 30px;

  --space-element-sm-1: 6px;
  --space-element-sm-2: 8px;
  --space-element-sm-3: 10px;
  --space-element-md-1: 8px;
  --space-element-md-2: 10px;
  --space-element-md-3: 12px;
  --space-element-lg-1: 10px;
  --space-element-lg-2: 12px;
  --space-element-lg-3: 14px;
}

/* --------------------------- */
/* Generate sizes */
/* --------------------------- */

.full-size-xs,
.full-size-xs
  *:not(
    .full-size-xs,
    .full-size-xs *,
    .full-size-sm,
    .full-size-sm *,
    .full-size-md,
    .full-size-md *,
    .full-size-lg,
    .full-size-lg *,
    .full-size-xl,
    .full-size-xl *,
    .full-size-2xl,
    .full-size-2xl *
  ) {
  --text: var(--text-xs);
  --text-heading: var(--text-heading-xs);
}

.full-size-sm,
.full-size-sm
  *:not(
    .full-size-xs,
    .full-size-xs *,
    .full-size-sm,
    .full-size-sm *,
    .full-size-md,
    .full-size-md *,
    .full-size-lg,
    .full-size-lg *,
    .full-size-xl,
    .full-size-xl *,
    .full-size-2xl,
    .full-size-2xl *
  ) {
  --text: var(--text-sm);
  --text-heading: var(--text-heading-sm);
  --text-element: var(--text-element-sm);

  --space-1: var(--space-sm-1);
  --space-2: var(--space-sm-2);
  --space-3: var(--space-sm-3);
  --space-4: var(--space-sm-4);
  --space-5: var(--space-sm-5);
  --space-6: var(--space-sm-6);

  --space-element-1: var(--space-element-sm-1);
  --space-element-2: var(--space-element-sm-2);
  --space-element-3: var(--space-element-sm-3);
}

:root,
:where([class*='full-density-']),
.full-size-md,
.full-size-md
  *:not(
    .full-size-xs,
    .full-size-xs *,
    .full-size-sm,
    .full-size-sm *,
    .full-size-md,
    .full-size-md *,
    .full-size-lg,
    .full-size-lg *,
    .full-size-xl,
    .full-size-xl *,
    .full-size-2xl,
    .full-size-2xl *
  ) {
  --text: var(--text-md);
  --text-heading: var(--text-heading-md);
  --text-element: var(--text-element-md);

  --space-1: var(--space-md-1);
  --space-2: var(--space-md-2);
  --space-3: var(--space-md-3);
  --space-4: var(--space-md-4);
  --space-5: var(--space-md-5);
  --space-6: var(--space-md-6);

  --space-element-1: var(--space-element-md-1);
  --space-element-2: var(--space-element-md-2);
  --space-element-3: var(--space-element-md-3);
}

.full-size-lg,
.full-size-lg
  *:not(
    .full-size-xs,
    .full-size-xs *,
    .full-size-sm,
    .full-size-sm *,
    .full-size-md,
    .full-size-md *,
    .full-size-lg,
    .full-size-lg *,
    .full-size-xl,
    .full-size-xl *,
    .full-size-2xl,
    .full-size-2xl *
  ) {
  --text: var(--text-lg);
  --text-heading: var(--text-heading-lg);
  --text-element: var(--text-element-lg);

  --space-1: var(--space-lg-1);
  --space-2: var(--space-lg-2);
  --space-3: var(--space-lg-3);
  --space-4: var(--space-lg-4);
  --space-5: var(--space-lg-5);
  --space-6: var(--space-lg-6);

  --space-element-1: var(--space-element-lg-1);
  --space-element-2: var(--space-element-lg-2);
  --space-element-3: var(--space-element-lg-3);
}

.full-size-xl,
.full-size-xl
  *:not(
    .full-size-xs,
    .full-size-xs *,
    .full-size-sm,
    .full-size-sm *,
    .full-size-md,
    .full-size-md *,
    .full-size-lg,
    .full-size-lg *,
    .full-size-xl,
    .full-size-xl *,
    .full-size-2xl,
    .full-size-2xl *
  ) {
  --text: var(--text-xl);
  --text-heading: var(--text-heading-xl);
}

.full-size-2xl,
.full-size-2xl
  *:not(
    .full-size-xs,
    .full-size-xs *,
    .full-size-sm,
    .full-size-sm *,
    .full-size-md,
    .full-size-md *,
    .full-size-lg,
    .full-size-lg *,
    .full-size-xl,
    .full-size-xl *,
    .full-size-2xl,
    .full-size-2xl *
  ) {
  --text-heading: var(--text-heading-2xl);
}