StyleX X Utopia

globalTokens.stylex.ts

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 *
 */

import stylex from '@stylexjs/stylex';
import { calculateSpaceScale, calculateTypeScale } from 'utopia-core';

/**
 * o--o o    o   o o-O-o o-o       o--o  o-o  o   o o-O-o  o-o
 * |    |    |   |   |   |  \      |    o   o |\  |   |   |
 * O-o  |    |   |   |   |   O     O-o  |   | | \ |   |    o-o
 * |    |    |   |   |   |  /      |    o   o |  \|   |       |
 * o    O---o o-o  o-O-o o-o       o     o-o  o   o   o   o--o
 *
 * Reference: https://utopia.fyi/type/calculator
 *
 * The following constants are used to calculate fluid typography.
 * Feel free to change these initial numbers to suit your needs.
 *
 * StyleX can compute all of this at compile time as all the information
 * is statically available in the same file and the only functions used are
 * the Math.pow and Math.round functions.
 *
 * NOTE: Any custom functions will not be able to be computed at compile time.
 */
const MIN_WIDTH = 320;
const MAX_WIDTH = 1240;
const MIN_SCALE = 1.2;
const MAX_SCALE = 1.333;
const MIN_BASE_SIZE = 16;
const MAX_BASE_SIZE = 20;

const typeScale = calculateTypeScale({
  minWidth: MIN_WIDTH,
  maxWidth: MAX_WIDTH,
  minTypeScale: MIN_SCALE,
  maxTypeScale: MAX_SCALE,
  minFontSize: MIN_BASE_SIZE,
  maxFontSize: MAX_BASE_SIZE,
  negativeSteps: 3,
  positiveSteps: 5,
});

export const text = stylex.defineVars({
  xxs: typeScale.find(({ step }) => step === -3)?.clamp || '',
  xs: typeScale.find(({ step }) => step === -2)?.clamp || '',
  sm: typeScale.find(({ step }) => step === -1)?.clamp || '',
  p: typeScale.find(({ step }) => step === 0)?.clamp || '',
  h5: typeScale.find(({ step }) => step === 1)?.clamp || '',
  h4: typeScale.find(({ step }) => step === 2)?.clamp || '',
  h3: typeScale.find(({ step }) => step === 3)?.clamp || '',
  h2: typeScale.find(({ step }) => step === 4)?.clamp || '',
  h1: typeScale.find(({ step }) => step === 5)?.clamp || '',
});

/**
 * o--o o    o   o o-O-o o-o        o-o  o--o    O    o-o o--o
 * |    |    |   |   |   |  \      |     |   |  / \  /    |
 * O-o  |    |   |   |   |   O      o-o  O--o  o---oO     O-o
 * |    |    |   |   |   |  /          | |     |   | \    |
 * o    O---o o-o  o-O-o o-o       o--o  o     o   o  o-o o--o
 *
 * Reference: https://utopia.fyi/space/calculator
 *
 * Similar to the fluid typography, we can create fluid values for spacing.
 * Using similar formulas and similar scales.
 *
 * NOTE: It is common to have more varied needs for spacing than for font-size.
 * So feel free to add some more values by following the pattern below.
 *
 * EXCEPT: We are using `px` instead of `rem`
 * ------------------------------------------
 * When talking about font-size, it is the best practice to use
 * `rem` so that an end user can change the font-size using the
 * browser's font-size setting.
 *
 * However, when talking about spacing, it is the best practice to
 * use `px` because using `rems` here makes font-size behave like zoom.
 *
 * Users that prefer larger text, don't necessarily want larger spacing as well.
 *
 */

const spaceScale = calculateSpaceScale({
  minWidth: MIN_WIDTH,
  maxWidth: MAX_WIDTH,
  minSize: MIN_BASE_SIZE,
  maxSize: MAX_BASE_SIZE,
  negativeSteps: [0.75, 0.5, 0.25],
  positiveSteps: [1.5, 2, 3, 4, 6, 8],
});

export const spacing = stylex.defineVars({
  xxxs: spaceScale.sizes.find(({ label }) => label === '3xs')?.clampPx || '',
  xxs: spaceScale.sizes.find(({ label }) => label === '2xs')?.clampPx || '',
  xs: spaceScale.sizes.find(({ label }) => label === 'xs')?.clampPx || '',
  sm: spaceScale.sizes.find(({ label }) => label === 's')?.clampPx || '',
  md: spaceScale.sizes.find(({ label }) => label === 'm')?.clampPx || '',
  lg: spaceScale.sizes.find(({ label }) => label === 'l')?.clampPx || '',
  xl: spaceScale.sizes.find(({ label }) => label === 'xl')?.clampPx || '',
  xxl: spaceScale.sizes.find(({ label }) => label === '2xl')?.clampPx || '',
  xxxl: spaceScale.sizes.find(({ label }) => label === '3xl')?.clampPx || '',
  xxxxl: spaceScale.sizes.find(({ label }) => label === '4xl')?.clampPx || '',
});