src/styles/partials/_vars.scss
/*
  Arcjet's global vars
*/

@use "@/styles/mixins/layout";

// UNITS
//////////////////////////////////////////////////////////////////////////////////////////
:root,
:root.aj {
  // Spacing Unit
  // The common unit for all spacing.
  --sp: 8px;
}

// TYPOGRAPHY
//////////////////////////////////////////////////////////////////////////////////////////
:root,
:root.aj {
  // Font
  // Expects --aj-fontFamily-jost, --aj-fontFamily-figtree, --aj-fontFamily-ibmPlexMono
  // to be defined, eg. see: "@arcjet-design-system/next/typographyClasses".
  // TODO(#3102): Figure out how to make these fonts available to all design system
  // component libraries.
  --aj-fontFamily-display: "Jost Variable", "SF Pro", sans-serif;
  --aj-fontFamily-body: "Figtree Variable", "SF Pro", sans-serif;
  --aj-fontFamily-body-graphic: "Jost Variable", "SF Pro", sans-serif;
  --aj-fontFamily-code: "IBM Plex Mono", "monospace";

  // Weight
  --aj-fontWeight-sm: 250;
  --aj-fontWeight-md: 350;
  --aj-fontWeight-site-md: 400;
  --aj-fontWeight-lg: 500;
  --aj-fontWeight-xl: 550;
  --aj-fontWeight-xxl: 700;

  // Size
  --aj-fontSize-xl5: 56px;
  --aj-fontSize-xl4: 40px;
  --aj-fontSize-xl5-mobile: 42px;
  --aj-fontSize-xl4-mobile: 34px;
  --aj-fontSize-xl3: 24px;
  --aj-fontSize-xl2: 22px;
  --aj-fontSize-xl: 20px;
  --aj-fontSize-lg: 18px;
  --aj-fontSize-md: 16px;
  --aj-fontSize-sm: 14px;
  --aj-fontSize-xs: 12px;
  --aj-fontSize-xxs: 11px;
  --aj-fontSize-xxxs: 10px;
}

// APPEARANCE
//////////////////////////////////////////////////////////////////////////////////////////
:root,
:root.aj {
  // Box background blur
  --blur1: calc(var(--sp) * 4);

  --scrollable-fade-top: linear-gradient(
    rgba(var(--colorBgRgb) / 1),
    rgba(var(--colorBgRgb) / 0)
  );

  --scrollable-fade-bottom: linear-gradient(
    rgba(var(--colorBgRgb) / 0),
    rgba(var(--colorBgRgb) / 1)
  );
}

// ANIMATION
//////////////////////////////////////////////////////////////////////////////////////////
:root,
:root.aj {
  --easing-default: ease-in-out;
  --time-md: 0.2s;
  --time-sm: 0.1s;
}

// LAYOUT
//////////////////////////////////////////////////////////////////////////////////////////
:root,
:root.aj {
  // Metrics for Arcjet's base layout.
  // -------------------------------------------------------------------------------------
  @include layout.content-default-1184;
  @include layout.content-max-1552;

  // The default grid gap.
  --grid-gap: calc(var(--sp) * 4);

  // Header values
  // -------------------------------------------------------------------------------------
  --header-max-width: var(--content-size-max);
  // Padding is x3 at size-max
  --header-hPadding: calc(var(--sp) * 3);
  // Header always maxes out layout width
  --header-columns: var(--content-cols-max);

  --Header-height: calc(var(--sp) * 8);
  --logo-indent: 0px;

  // Content values
  // -------------------------------------------------------------------------------------
  --content-max-width: var(--content-size-default);
  // Padding is x4 at size-default
  --content-hPadding: calc(var(--sp) * 4);
  // Content defaults layout default
  --content-columns: var(--content-cols-default);

  --content-bottom-padding: calc(var(--sp) * 6);

  // Other
  // -------------------------------------------------------------------------------------
  --text-max-width: 640px;
}

@media (max-width: 1551px) {
  :root,
  :root.aj {
    // At this max width the max content size is reduced to 14 cols.
    @include layout.content-max-1360;
  }
}

@media (max-width: 1359px) {
  :root,
  :root.aj {
    // At this max width the max content size is reduced to 12 cols.
    @include layout.content-max-1184;

    // At this max width content padding is reduced to match that of the header.
    --content-hPadding: calc(var(--sp) * 3);

    // At this max width we align the main mark center to the content left line.
    --logo-indent: calc(var(--sp) * -1.5);
  }
}

// Starlight customization
//////////////////////////////////////////////////////////////////////////////////////////
/* Dark mode colors. */
:root {
  --sl-color-accent-low: var(--aj-palette-source-white);
  --sl-color-accent: var(--aj-palette-source-tint-04-12);
  --sl-color-accent-high: var(--aj-palette-source-white);
  --sl-color-text: var(--aj-palette-source-white);
  --sl-color-text-invert: var(--aj-palette-source-black);
  --sl-color-white: var(--aj-palette-source-white);
  --sl-color-gray-1: var(--aj-palette-source-neutral-14);
  --sl-color-gray-2: var(--aj-palette-source-neutral-11);
  --sl-color-gray-3: var(--aj-palette-source-neutral-09);
  --sl-color-gray-4: var(--aj-palette-source-neutral-06);
  --sl-color-gray-5: var(--aj-palette-source-neutral-04);
  --sl-color-gray-6: var(--aj-palette-source-neutral-02);
  --sl-color-gray-7: var(--aj-palette-source-black);
  --sl-color-bg: linear-gradient(
      rgba(var(--aj-palette-source-neutralRgb-00) / 0.4),
      rgba(var(--aj-palette-source-neutralRgb-00) / 0.4)
    ),
    linear-gradient(
      rgba(var(--aj-palette-source-blackRgb) / 1),
      rgba(var(--aj-palette-source-blackRgb) / 1)
    );
  --sl-color-bg-sidebar: linear-gradient(
      rgba(var(--aj-palette-source-neutralRgb-00) / 0.4),
      rgba(var(--aj-palette-source-neutralRgb-00) / 0.4)
    ),
    linear-gradient(
      rgba(var(--aj-palette-source-blackRgb) / 1),
      rgba(var(--aj-palette-source-blackRgb) / 1)
    );
  --sl-color-bg-nav: linear-gradient(
      rgba(var(--aj-palette-source-neutralRgb-00) / 0.4),
      rgba(var(--aj-palette-source-neutralRgb-00) / 0.4)
    ),
    linear-gradient(
      rgba(var(--aj-palette-source-blackRgb) / 1),
      rgba(var(--aj-palette-source-blackRgb) / 1)
    );
  --sl-color-hairline-light: var(--aj-palette-source-neutral-03);
  --sl-color-hairline-shade: var(--aj-palette-source-neutral-03);

  --colorBg: #070708;
  --colorBgRgb: 7 7 8;

  --sidebar-link-hoverBg: var(--aj-palette-source-neutral-01);
  --sidebar-link-activeBg: var(--aj-palette-source-neutral-02);
  --sidebar-link-selectedBg: var(--aj-palette-source-neutral-03);
}

/* Light mode colors. */
:root[data-theme="light"] {
  --sl-color-accent-low: var(--aj-palette-source-tint-04-13);
  --sl-color-accent: var(--aj-palette-source-black);
  --sl-color-accent-high: var(--aj-palette-source-black);
  --sl-color-text: var(--aj-palette-source-black);
  --sl-color-text-invert: var(--aj-palette-source-white);
  --sl-color-white: var(--aj-palette-source-neutral-01);
  --sl-color-gray-1: var(--aj-palette-source-neutral-01);
  --sl-color-gray-2: var(--aj-palette-source-neutral-04);
  --sl-color-gray-3: var(--aj-palette-source-neutral-06);
  --sl-color-gray-4: var(--aj-palette-source-neutral-09);
  --sl-color-gray-5: var(--aj-palette-source-neutral-11);
  --sl-color-gray-6: var(--aj-palette-source-neutral-15);
  --sl-color-gray-7: var(--aj-palette-source-white);
  --sl-color-bg: linear-gradient(
      rgba(var(--aj-palette-source-neutralRgb-15) / 0.4),
      rgba(var(--aj-palette-source-neutralRgb-15) / 0.4)
    ),
    linear-gradient(
      rgba(var(--aj-palette-source-whiteRgb) / 1),
      rgba(var(--aj-palette-source-whiteRgb) / 1)
    );
  --sl-color-bg-sidebar: linear-gradient(
      rgba(var(--aj-palette-source-neutralRgb-15) / 0.4),
      rgba(var(--aj-palette-source-neutralRgb-15) / 0.4)
    ),
    linear-gradient(
      rgba(var(--aj-palette-source-whiteRgb) / 1),
      rgba(var(--aj-palette-source-whiteRgb) / 1)
    );
  --sl-color-bg-nav: linear-gradient(
      rgba(var(--aj-palette-source-neutralRgb-15) / 0.4),
      rgba(var(--aj-palette-source-neutralRgb-15) / 0.4)
    ),
    linear-gradient(
      rgba(var(--aj-palette-source-whiteRgb) / 1),
      rgba(var(--aj-palette-source-whiteRgb) / 1)
    );
  --sl-color-hairline-light: var(--aj-palette-source-neutral-13);
  --sl-color-hairline-shade: var(--aj-palette-source-neutral-13);

  --colorBg: #fcfafd;
  --colorBgRgb: 252 250 253;

  --sidebar-link-hoverBg: var(--aj-palette-source-neutral-14);
  --sidebar-link-activeBg: var(--aj-palette-source-neutral-13);
  --sidebar-link-selectedBg: var(--aj-palette-source-neutral-12);
}
