style-forge.helpers/src/var.css

Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.

@import './units/all.css';

:root {
  /* border */
  --sf-bd-w: 1px;

  /* outline */
  --sf-ol-w: 1px;

  /* gap */
  --sf-gap-x: var(--sf-rem-sm); --sf-gap-y: var(--sf-rem-sm);
  --sf-gap-x-xs: var(--sf-rem-xs); --sf-gap-y-xs: var(--sf-rem-xs);
  --sf-gap-x-sm: var(--sf-rem-sm); --sf-gap-y-sm: var(--sf-rem-sm);
  --sf-gap-x-s: var(--sf-rem-s); --sf-gap-y-s: var(--sf-rem-s);
  --sf-gap-x-ms: var(--sf-rem-ms); --sf-gap-y-ms: var(--sf-rem-ms);
  --sf-gap-x-ls: var(--sf-rem-ls); --sf-gap-y-ls: var(--sf-rem-ls);
  --sf-gap-x-md: var(--sf-rem-md); --sf-gap-y-md: var(--sf-rem-md);
  --sf-gap-x-lg: var(--sf-rem-lg); --sf-gap-y-lg: var(--sf-rem-lg);
  --sf-gap-x-xl: var(--sf-rem-xl); --sf-gap-y-xl: var(--sf-rem-xl);
  --sf-gap-x-2xl: var(--sf-rem-2xl); --sf-gap-y-2xl: var(--sf-rem-2xl);
  --sf-gap-x-3xl: var(--sf-rem-3xl); --sf-gap-y-3xl: var(--sf-rem-3xl);
  --sf-gap-x-4xl: var(--sf-rem-4xl); --sf-gap-y-4xl: var(--sf-rem-4xl);
  --sf-gap-x-5xl: var(--sf-rem-5xl); --sf-gap-y-5xl: var(--sf-rem-5xl);
  --sf-gap-x-6xl: var(--sf-rem-6xl); --sf-gap-y-6xl: var(--sf-rem-6xl);
  --sf-gap-x-7xl: var(--sf-rem-7xl); --sf-gap-y-7xl: var(--sf-rem-7xl);
  --sf-gap-x-8xl: var(--sf-rem-8xl); --sf-gap-y-8xl: var(--sf-rem-8xl);
  --sf-gap-x-9xl: var(--sf-rem-9xl); --sf-gap-y-9xl: var(--sf-rem-9xl);
  --sf-gap-x-10xl: var(--sf-rem-10xl); --sf-gap-y-10xl: var(--sf-rem-10xl);
  --sf-gap-x-11xl: var(--sf-rem-11xl); --sf-gap-y-11xl: var(--sf-rem-11xl);
  --sf-gap-x-12xl: var(--sf-rem-12xl); --sf-gap-y-12xl: var(--sf-rem-12xl);

  /* text */
  --sf-lh: 0.8;
  --sf-lh-normal: 1.1875;

  --sf-ff-sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --sf-ff-serif: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --sf-ff-monospace: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --sf-ff-cursive: cursive;
  --sf-ff-fantasy: fantasy;
  --sf-ff-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
  --sf-ff-math: math;
  --sf-ff-fangsong: fangsong;

  --sf-fz: 1rem;
  --sf-fz-0: 0;
  --sf-fz-bold: 1rem;

  --sf-fz-h1: 3rem;
  --sf-fz-h2: 2.5rem;
  --sf-fz-h3: 2rem;
  --sf-fz-h4: 1.5rem;
  --sf-fz-h5: 1.25rem;
  --sf-fz-h6: 1rem;

  --sf-fz-small: 0.75rem;

  --sf-fz-15: 0.9375rem;
  --sf-fz-14: 0.875rem;
  --sf-fz-13: 0.8125rem;
  --sf-fz-12: 0.75rem;
  --sf-fz-11: 0.6875rem;
  --sf-fz-10: 0.625rem;

  --sf-fw: 400;
  --sf-fw-bold: 600;
  --sf-fw-small: 300;

  --sf-fw-h1: 700;
  --sf-fw-h2: 700;
  --sf-fw-h3: 700;
  --sf-fw-h4: 600;
  --sf-fw-h5: 600;
  --sf-fw-h6: 600;
}