### Install utopia-core-scss

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Install the utopia-core-scss package using npm.

```bash
npm install utopia-core-scss
```

--------------------------------

### Install utopia-core-scss

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Install the library using npm. Then, import the SCSS module into your stylesheet.

```bash
npm install utopia-core-scss
```

```scss
@use 'node_modules/utopia-core-scss/src/utopia' as utopia;
```

--------------------------------

### Calculate Multiple Clamp Values as SCSS Data with `calculateClamps()`

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Use `calculateClamps()` to get a list of maps, each containing a label and a `clamp` string, for a batch of arbitrary size pairs sharing the same viewport bounds. This function is useful for generating CSS variables for custom clamp values.

```scss
$clamps: utopia.calculateClamps((
  "minWidth": 320,
  "maxWidth": 1240,
  "pairs": (
    (16, 48),
    (40, 18),
  ),
  /* Optional */
  "usePx": true,
  "relativeTo": "container",
));

// $clamps ==
// (
//   ("label": "16-48", "clamp": "clamp(16px, ...)"),
//   ("label": "40-18", "clamp": "clamp(18px, ...)"),
// )

@each $item in $clamps {
  --custom-#{map.get($item, "label")}: #{map.get($item, "clamp")};
}

```

--------------------------------

### Calculate Type Scale as SCSS Data with `calculateTypeScale()`

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Use `calculateTypeScale()` to get a type scale as a list of SCSS maps. Each map contains step index, computed sizes, and the `clamp()` string. Useful for custom property naming or output formats.

```scss
$scale: utopia.calculateTypeScale((
  "minWidth": 320,
  "maxWidth": 1240,
  "minFontSize": 18,
  "maxFontSize": 20,
  "minTypeScale": 1.2,
  "maxTypeScale": 1.25,
  "positiveSteps": 5,
  "negativeSteps": 2,
  /* Optional */
  "relativeTo": "container",
));

// $scale is a list of maps:
// (
//   ("step": -2, "minSize": 12.5,  "maxSize": 12.8,  "clamp": "clamp(...)"),
//   ("step": -1, "minSize": 15.0,  "maxSize": 16.0,  "clamp": "clamp(...)"),
//   ("step":  0, "minSize": 18.0,  "maxSize": 20.0,  "clamp": "clamp(...)"),
//   ("step":  1, "minSize": 21.6,  "maxSize": 25.0,  "clamp": "clamp(...)"),
//   ...
// )

// Custom output — e.g. writing to a data attribute selector:
@each $step in $scale {
  [data-size="#{map.get($step, 'step')}"] {
    font-size: #{map.get($step, "clamp")};
  }
}

```

--------------------------------

### Import utopia-core-scss

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Import the utopia-core-scss module into your SCSS files.

```scss
@use 'node_modules/utopia-core-scss/src/utopia' as utopia;
```

--------------------------------

### calculateClamp()

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Computes a single CSS `clamp()` string from minimum and maximum width and size values. This function is the foundation for all other fluid sizing utilities in Utopia Core SCSS.

```APIDOC
## `calculateClamp()`

### Description

Returns a single CSS `clamp()` string computed from a min/max width and size pair. All other functions and mixins ultimately delegate to this one.

### Parameters

This function accepts a map with the following keys:

- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **minSize** (number) - Required - The minimum font or spacing size.
- **maxSize** (number) - Required - The maximum font or spacing size.
- **usePx** (boolean) - Optional - If true, sizes are treated as pixels. Defaults to false (rem).
- **relativeTo** (string) - Optional - Specifies the relative unit for viewport-based calculations. Can be 'viewport' (default) or 'container'.

### Usage Examples

```scss
// Example 1: Using default rem units and viewport relative
$clamp-rem: utopia.calculateClamp((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 16,
  "maxSize": 48
));
// Output: "clamp(1rem, 0.3043rem + 3.4783vi, 3rem)"

// Example 2: Using px units and container queries
$clamp-px: utopia.calculateClamp((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 16,
  "maxSize": 48,
  "usePx": true,
  "relativeTo": "container"
));
// Output: "clamp(16px, 4.8696px + 3.4783cqi, 48px)"

// Example 3: Direct use in a CSS property
.hero__title {
  font-size: #{$clamp-rem};
}
```

### Return Value

A string representing the CSS `clamp()` function.
```

--------------------------------

### Use calculateClamp() output in CSS property

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Demonstrates how to directly use the output of `calculateClamp()` within a CSS property, such as `font-size`. This allows for inline fluid sizing.

```scss
.hero__title {
  font-size: #{$clamp-rem};
}
```

--------------------------------

### calculateClamp()

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Calculates a single clamp calculation based on minimum and maximum widths and sizes. It defaults to using `rem` and `vi` units but can be configured to use `px` and `cqi` units by setting the `usePx` parameter to true. The `relativeTo` parameter can specify the reference for calculations.

```APIDOC
## `calculateClamp()`

### Description
Calculate a single clamp calculation from a min/max width & size. Default to using `rem` and `vi` but this can be overriden to use `px` and `cqi`.

### Parameters
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **minSize** (number) - Required - The minimum size value.
- **maxSize** (number) - Required - The maximum size value.
- **usePx** (boolean) - Optional - Whether to use pixels (`px`) for calculations. Defaults to `false` (rem).
- **relativeTo** (string) - Optional - The reference for relative calculations (e.g., 'container').

### Example
```scss
$clamp: utopia.calculateClamp((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 16,
  "maxSize": 48,
  /* Optional params */
  "usePx": true,
  "relativeTo": "container"
))

// clamp(1rem, 0.3043rem + 3.4783vi, 3rem);
```
```

--------------------------------

### Calculate clamp() string with px and cqi units for container queries

Source: https://context7.com/trys/utopia-core-scss/llms.txt

This variant of calculateClamp() generates a CSS clamp() string using pixel units and container query units (cqi). Set `"usePx": true` and `"relativeTo": "container"` for container query compatibility. This is useful for fully encapsulated fluid components.

```scss
$clamp-px: utopia.calculateClamp((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 16,
  "maxSize": 48,
  "usePx": true,
  "relativeTo": "container",
));
// → "clamp(16px, 4.8696px + 3.4783cqi, 48px)"
```

--------------------------------

### calculateClamps()

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Calculates multiple clamp calculations from a single set of minimum and maximum widths. It accepts an array of number pairs to interpolate between, allowing for the generation of various responsive clamp values. Optionally, it can use pixels (`px`) instead of rems and specify the reference for relative calculations.

```APIDOC
## `calculateClamps()`

### Description
Calculate multiple clamps from a single set of min/max widths. Supply an array of number pairs to interpolate between.

### Parameters
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **pairs** (array of arrays of numbers) - Required - Pairs of values to interpolate between.
- **usePx** (boolean) - Optional - Whether to use pixels (`px`) for calculations. Defaults to `false` (rem).
- **relativeTo** (string) - Optional - The reference for relative calculations (e.g., 'container').

### Example
```scss
$clamps: utopia.calculateClamps((
  "minWidth": 320,
  "maxWidth": 1240,
  "pairs": (
    (16, 48),
    (40, 18)
  ),
  /* Optional params */
  "usePx": true,
  "relativeTo": "container"
))

// $clamps == (
//    (
//      "label": "16-48",
//      "clamp": clamp(...),
//    ),
//    (
//      "label": "40-16",
//      "clamp": clamp(...),
//    )
//  )
```
```

--------------------------------

### calculateSpaceScale()

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Calculates a set of fluid spaces from minimum and maximum width and size values, along with positive and negative step multipliers. It automatically generates fluid spaces and one-up pairs, and allows for custom pairs by specifying interpolation keys. Clamped values are provided in both `rem` and `px`.

```APIDOC
## `calculateSpaceScale()`

### Description
Calculate a set of fluid spaces from min/max width/base sizes, and a number of positive/negative multipliers. Fluid spaces & one-up pairs are automatically created, and custom pairs can be created by supplying the keys you wish to interpolate between. Clamp provided in `rem` and `px`.

### Parameters
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **minSize** (number) - Required - The minimum font size or spacing value.
- **maxSize** (number) - Required - The maximum font size or spacing value.
- **positiveSteps** (array of numbers) - Required - Multipliers for positive steps.
- **negativeSteps** (array of numbers) - Required - Multipliers for negative steps.
- **customSizes** (array of strings) - Optional - Keys for custom size interpolation.
- **relativeTo** (string) - Optional - The reference for relative calculations (e.g., 'container').

### Example
```scss
$spaceScales: utopia.calculateSpaceScale((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 18,
  "maxSize": 20,
  "positiveSteps": (1.5, 2, 3, 4, 6),
  "negativeSteps": (0.75, 0.5, 0.25),
  "customSizes": ("s-l", "l-s",),
  /* Optional params */
  "relativeTo": "container",
))

// $spaceScales == (
//  "sizes": (
//    (
//      "label": "s",
//      "minSize": 18,
//      "maxSize": 20,
//      "clamp": clamp(),
//      "clampPx": clamp(),
//    ),
//  ),
//  "oneUpPairs": (),
//  "customPairs": (),
//  "allPairs": (),
// )
```
```

--------------------------------

### generateSpaceScale()

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Generates a fluid spacing system as CSS custom properties, with a base size and multipliers for positive and negative steps, creating various size combinations.

```APIDOC
## generateSpaceScale()

### Description
Generates a fluid spacing system as CSS custom properties. The base size (`s`) is set by `minSize`/`maxSize`; positive step multipliers grow the scale upward (m, l, xl, 2xl…) and negative step multipliers shrink it downward (xs, 2xs…). One-up pairs (e.g. `--space-s-m`) are created automatically; custom pairs (e.g. `--space-s-l`) can be requested explicitly. Setting `allPairs: true` generates every possible size combination.

### Parameters
#### Mixin Parameters
- **minWidth** (number) - Required - viewport width (px) at which min sizes apply
- **maxWidth** (number) - Required - viewport width (px) at which max sizes apply
- **minSize** (number) - Required - base size (px) at minWidth
- **maxSize** (number) - Required - base size (px) at maxWidth
- **positiveSteps** (array of numbers) - Required - multipliers for positive steps (e.g., `(1.5, 2, 3)` for m, l, xl)
- **negativeSteps** (array of numbers) - Required - multipliers for negative steps (e.g., `(0.75, 0.5)` for xs, 2xs)
- **customSizes** (array of strings) - Optional - explicit non-adjacent pairs (e.g., `("s-l", "xs-xl")`)
- **usePx** (boolean) - Optional - use px instead of rem (defaults to false)
- **relativeTo** (string) - Optional - "container" (cqi) | "viewport" (vi) | "viewport-width" (vw) (defaults to "viewport")
- **prefix** (string) - Optional - custom property name prefix (defaults to "space-")
- **allPairs** (boolean) - Optional - true = all combinations (defaults to false)

### Request Example
```scss
:root {
  @include utopia.generateSpaceScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 18,
    "maxSize": 20,
    "positiveSteps": (1.5, 2, 3),
    "negativeSteps": (0.75, 0.5),
    "customSizes": ("s-l", "xs-xl"),
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
    "allPairs": false,
  ));
}
```

### Response Example
```css
:root {
  /* Emits individual sizes: */
  --space-2xs: clamp(9px, ...);
  --space-xs:  clamp(14px, ...);
  --space-s:   clamp(18px, ...);
  --space-m:   clamp(27px, ...);
  --space-l:   clamp(36px, ...);
  --space-xl:  clamp(54px, ...);
  /* One-up pairs: */
  --space-2xs-xs: clamp(9px, ...);
  --space-xs-s:   clamp(14px, ...);
  --space-s-m:    clamp(18px, ...);
  --space-m-l:    clamp(27px, ...);
  --space-l-xl:   clamp(36px, ...);
  /* Custom pairs: */
  --space-s-l:   clamp(18px, ...);
  --space-xs-xl: clamp(14px, ...);
}
```
```

--------------------------------

### Generate Multiple Clamps with utopia.generateClamps

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Use the generateClamps mixin to create multiple clamp CSS custom properties from a single set of min/max widths. Supply an array of number pairs to interpolate between. You can optionally use px units and specify the relative unit.

```scss
:root {
  // Calling this:
  @include utopia.generateClamps((
    "minWidth": 320,
    "maxWidth": 1240,
    "pairs": (
      (16, 48),
      (40, 18)
    ),
    /* Optional params */
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
  ))

  // Generates this:
  --space-16-48: clamp(...);
  --space-40-18: clamp(...);
}
```

--------------------------------

### generateSpaceScale() Mixin

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Generates a set of fluid spaces from min/max width/base sizes, and a number of positive/negative multipliers. It supports creating fluid spaces, one-up pairs, and custom pairs, with an option to use pixels and control pair generation.

```APIDOC
## generateSpaceScale()

### Description
Generates a set of fluid spaces from min/max width/base sizes, and a number of positive/negative multipliers. Fluid spaces & one-up pairs are automatically created, and custom pairs can be created by supplying the keys you wish to interpolate between. Pass `usePx: true` to separate space from browser text zoom preferences. Custom property `prefix` can be overriden from `space-`.

### Method
`@include utopia.generateSpaceScale()`

### Parameters
#### Arguments (Map)
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **minSize** (number) - Required - The minimum base size for spacing.
- **maxSize** (number) - Required - The maximum base size for spacing.
- **positiveSteps** (list of numbers) - Required - Multipliers for positive space steps.
- **negativeSteps** (list of numbers) - Required - Multipliers for negative space steps.
- **customSizes** (list of strings) - Optional - Keys for custom space pairs to interpolate between.
- **usePx** (boolean) - Optional - Whether to use pixels instead of rem for spacing. Defaults to false.
- **relativeTo** (string) - Optional - The reference for fluid scaling ('viewport' or 'container'). Defaults to 'viewport'.
- **prefix** (string) - Optional - The prefix for generated custom properties. Defaults to 'space-'.
- **allPairs** (boolean) - Optional - Whether to generate all possible pairs of positive/negative steps. Defaults to false.

### Example
```scss
:root {
  @include utopia.generateSpaceScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 18,
    "maxSize": 20,
    "positiveSteps": (1.5, 2),
    "negativeSteps": (0.75),
    "customSizes": ("s-l",),
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
    "allPairs": false,
  ));
}
```

### Output Example
```css
:root {
  --space-xs: clamp(...);
  --space-s: clamp(...);
  --space-m: clamp(...);
  --space-l: clamp(...);
  /* One-up pairs */
  --space-xs-s: clamp(...);
  --space-s-m: clamp(...);
  --space-m-l: clamp(...);
  /* Custom pairs */
  --space-s-l: clamp(...);
}
```
```

--------------------------------

### Calculate Multiple Clamps with Utopia SCSS

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Calculates multiple clamp calculations from a single set of min/max widths and an array of number pairs. Optionally uses px units and specifies the relative container. Useful for defining multiple fluid typography scales simultaneously.

```scss
$clamps: utopia.calculateClamps((
  "minWidth": 320,
  "maxWidth": 1240,
  "pairs": (
    (16, 48),
    (40, 18)
  ),
  /* Optional params */
  "usePx": true,
  "relativeTo": "container"
))

// $clamps == (
//    (
//      "label": "16-48",
//      "clamp": clamp(...),
//    ),
//    (
//      "label": "40-16",
//      "clamp": clamp(...)
//    )
//  )
```

--------------------------------

### Generate Single Clamp with utopia.generateClamp

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Use the generateClamp mixin to create a single clamp CSS custom property. It interpolates between a minimum and maximum size based on viewport width. You can override the default rem and vi units to use px and cqi.

```scss
:root {
  // Calling this:
  @include utopia.generateClamp((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 16,
    "maxSize": 20,
    /* Optional params */
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
  ))

  // Generates this:
  --space-16-20: clamp(...);
}
```

--------------------------------

### Calculate Space Scale with Utopia SCSS

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Generates fluid spaces, one-up pairs, and custom pairs based on min/max widths, sizes, and multiplier steps. Supports custom interpolation keys and clamping in rem/px. Use when defining a comprehensive set of fluid spacing values.

```scss
$spaceScales: utopia.calculateSpaceScale((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 18,
  "maxSize": 20,
  "positiveSteps": (1.5, 2, 3, 4, 6),
  "negativeSteps": (0.75, 0.5, 0.25),
  "customSizes": ("s-l", "l-s",),
  /* Optional params */
  "relativeTo": "container",
))

// $spaceScales == (
//  "sizes": (
//    (
//      "label": "s",
//      "minSize": 18,
//      "maxSize": 20,
//      "clamp": clamp(),
//      "clampPx": clamp(),
//    ),
//  ),
//  "oneUpPairs": (),
//  "customPairs": (),
//  "allPairs": (),
// )
```

--------------------------------

### generateClamp() Mixin

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Generates a single clamp custom property from a min/max width and size. It defaults to using rem and vi but can be overridden to use px and cqi, with options for pixel usage and relativeTo parameter.

```APIDOC
## generateClamp()

### Description
Generates a single clamp custom property from a min/max width & size. Default to using `rem` and `vi` but this can be overriden to use `px` and `cqi`. Pass `usePx: true` to separate space from browser text zoom preferences. Custom property `prefix` can be overriden from `space-`.

### Method
`@include utopia.generateClamp()`

### Parameters
#### Arguments (Map)
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **minSize** (number) - Required - The minimum size for the clamp.
- **maxSize** (number) - Required - The maximum size for the clamp.
- **usePx** (boolean) - Optional - Whether to use pixels instead of rem for spacing. Defaults to false.
- **relativeTo** (string) - Optional - The reference for fluid scaling ('viewport' or 'container'). Defaults to 'viewport'.
- **prefix** (string) - Optional - The prefix for generated custom properties. Defaults to 'space-'.

### Example
```scss
:root {
  @include utopia.generateClamp((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 16,
    "maxSize": 20,
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
  ))
}
```

### Output Example
```css
:root {
  --space-16-20: clamp(...);
}
```
```

--------------------------------

### Generate Fluid Space Scale with utopia.generateSpaceScale

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Use the generateSpaceScale mixin to create fluid spaces. It generates CSS custom properties for fluid spaces and one-up pairs, interpolating between minimum and maximum sizes. You can specify custom pairs, control whether to use px units, and set the relative unit (viewport or container). The prefix for custom properties can also be overridden.

```scss
:root {
  // Calling this:
  @include utopia.generateSpaceScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 18,
    "maxSize": 20,
    "positiveSteps": (1.5, 2),
    "negativeSteps": (0.75),
    /* Optional params */
    "customSizes": ("s-l",),
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
    "allPairs": false,
  ));

  // Generates this:
  --space-xs: clamp(...);
  --space-s: clamp(...);
  --space-m: clamp(...);
  --space-l: clamp(...);
  // One-up pairs
  --space-xs-s: clamp(...);
  --space-s-m: clamp(...);
  --space-m-l: clamp(...);
  // Custom pairs
  --space-s-l: clamp(...);
}
```

--------------------------------

### Calculate Single Clamp with Utopia SCSS

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Calculates a single clamp calculation using min/max width and size. Defaults to rem and vi units but can be configured to use px and cqi. Ideal for defining a single fluid typography or spacing value.

```scss
$clamp: utopia.calculateClamp((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 16,
  "maxSize": 48,
  /* Optional params */
  "usePx": true,
  "relativeTo": "container"
))

// clamp(1rem, 0.3043rem + 3.4783vi, 3rem);
```

--------------------------------

### Calculate clamp() string with rem and vi units

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Use this function to generate a CSS clamp() string for fluid typography or spacing using rem units and viewport units (vi). Ensure the input values for minWidth, maxWidth, minSize, and maxSize are provided.

```scss
$clamp-rem: utopia.calculateClamp((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 16,
  "maxSize": 48,
));
// → "clamp(1rem, 0.3043rem + 3.4783vi, 3rem)"
```

--------------------------------

### Generate Multiple Clamp Custom Properties with `generateClamps()`

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Use `generateClamps()` to create multiple `clamp()` custom properties from a single set of viewport bounds and arbitrary `(minSize, maxSize)` pairs. This is useful for ad-hoc fluid values.

```scss
:root {
  @include utopia.generateClamps((
    "minWidth": 320,
    "maxWidth": 1240,
    "pairs": (
      (16, 48),   // --space-16-48
      (24, 64),   // --space-24-64
      (40, 18),   // --space-40-18  (shrinking value is supported)
    ),
    /* Optional */
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
  ));

  // Emits:
  // --space-16-48: clamp(16px, ...);
  // --space-24-64: clamp(24px, ...);
  // --space-40-18: clamp(18px, ...);
}

```

--------------------------------

### Calculate Space Scale as SCSS Data with `calculateSpaceScale()`

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Use `calculateSpaceScale()` to obtain a space scale as an SCSS map. It includes individual sizes, adjacent pairs, custom pairs, and all possible combinations, with `label`, `minSize`, `maxSize`, `clamp` (rem), and `clampPx` (px) for each.

```scss
$space: utopia.calculateSpaceScale((
  "minWidth": 320,
  "maxWidth": 1240,
  "minSize": 18,
  "maxSize": 20,
  "positiveSteps": (1.5, 2, 3, 4, 6),
  "negativeSteps": (0.75, 0.5, 0.25),
  "customSizes": ("s-l", "l-s"),
  /* Optional */
  "relativeTo": "container",
));

// map.get($space, "sizes") →
// (
//   ("label": "3xs", "minSize": 5,  "maxSize": 5,  "clamp": "clamp(...)", "clampPx": "clamp(...)"),
//   ("label": "2xs", "minSize": 9,  "maxSize": 10, "clamp": "clamp(...)", "clampPx": "clamp(...)"),
//   ("label": "xs",  "minSize": 14, "maxSize": 15, "clamp": "clamp(...)", "clampPx": "clamp(...)"),
//   ("label": "s",   "minSize": 18, "maxSize": 20, "clamp": "clamp(...)", "clampPx": "clamp(...)"),
//   ("label": "m",   "minSize": 27, "maxSize": 30, "clamp": "clamp(...)", "clampPx": "clamp(...)"),
//   ...
// )

// Emit all sizes with a custom prefix:
@each $size in map.get($space, "sizes") {
  --fluid-#{map.get($size, "label")}: #{map.get($size, "clamp")};
}

// Emit one-up pairs:
@each $pair in map.get($space, "oneUpPairs") {
  --fluid-#{map.get($pair, "label")}: #{map.get($pair, "clamp")};
}

```

--------------------------------

### generateClamps() Mixin

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Generates multiple clamp custom properties from a single set of min/max widths by supplying an array of number pairs to interpolate between. It also allows for pixel usage and overriding the relativeTo parameter.

```APIDOC
## generateClamps()

### Description
Generates multiple clamps from a single set of min/max widths. Supply an array of number pairs to interpolate between. Pass `usePx: true` to separate space from browser text zoom preferences. Custom property `prefix` can be overriden from `space-`.

### Method
`@include utopia.generateClamps()`

### Parameters
#### Arguments (Map)
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **pairs** (list of lists of numbers) - Required - An array of number pairs to interpolate between.
- **usePx** (boolean) - Optional - Whether to use pixels instead of rem for spacing. Defaults to false.
- **relativeTo** (string) - Optional - The reference for fluid scaling ('viewport' or 'container'). Defaults to 'viewport'.
- **prefix** (string) - Optional - The prefix for generated custom properties. Defaults to 'space-'.

### Example
```scss
:root {
  @include utopia.generateClamps((
    "minWidth": 320,
    "maxWidth": 1240,
    "pairs": (
      (16, 48),
      (40, 18)
    ),
    "usePx": true,
    "relativeTo": "container",
    "prefix": "space-",
  ))
}
```

### Output Example
```css
:root {
  --space-16-48: clamp(...);
  --space-40-18: clamp(...);
}
```
```

--------------------------------

### generateTypeScale()

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Generates a complete fluid type scale as CSS custom properties, calculating font sizes at each step based on modular scale ratios and interpolating between minimum and maximum viewport widths.

```APIDOC
## generateTypeScale()

### Description
Generates a complete fluid type scale as CSS custom properties. Calculates font sizes at each step by raising a modular scale ratio to the power of the step index, interpolated between a minimum and maximum viewport width. Positive steps go up the scale; negative steps go down. The custom property prefix defaults to `step-` and can be overridden.

### Parameters
#### Mixin Parameters
- **minWidth** (number) - Required - viewport width (px) at which min sizes apply
- **maxWidth** (number) - Required - viewport width (px) at which max sizes apply
- **minFontSize** (number) - Required - base font size (px) at minWidth
- **maxFontSize** (number) - Required - base font size (px) at maxWidth
- **minTypeScale** (number) - Required - modular scale ratio at minWidth (e.g. Minor Third)
- **maxTypeScale** (number) - Required - modular scale ratio at maxWidth (e.g. Major Third)
- **positiveSteps** (number) - Required - number of steps above base (step-1, step-2, step-3)
- **negativeSteps** (number) - Required - number of steps below base (step--1, step--2)
- **relativeTo** (string) - Optional - "viewport" (vi) | "container" (cqi) | "viewport-width" (vw)
- **prefix** (string) - Optional - custom property name prefix

### Request Example
```scss
:root {
  @include utopia.generateTypeScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minFontSize": 18,
    "maxFontSize": 20,
    "minTypeScale": 1.2,
    "maxTypeScale": 1.25,
    "positiveSteps": 3,
    "negativeSteps": 2,
    "relativeTo": "viewport",
    "prefix": "step-",
  ));
}
```

### Response Example
```css
:root {
  --step--2: clamp(0.7813rem, 0.7257rem + 0.2174vi, 0.8rem);
  --step--1: clamp(0.9375rem, 0.8587rem + 0.3261vi, 1rem);
  --step-0:  clamp(1.125rem,  1.0116rem + 0.4891vi, 1.25rem);
  --step-1:  clamp(1.35rem,   1.1922rem + 0.7283vi, 1.5625rem);
  --step-2:  clamp(1.62rem,   1.4053rem + 1.0815vi, 1.9531rem);
  --step-3:  clamp(1.944rem,  1.6559rem + 1.6003vi, 2.4414rem);
}
```
```

--------------------------------

### Generate Single Clamp Custom Property with `generateClamp()`

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Use `generateClamp()` to create a single `clamp()` custom property for a specific min/max size pair. The property name is auto-derived.

```scss
:root {
  @include utopia.generateClamp((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 16,
    "maxSize": 20,
    /* Optional */
    "usePx": false,           // default: rem
    "relativeTo": "viewport", // default: vi
    "prefix": "space-",
  ));

  // Emits:
  // --space-16-20: clamp(1rem, 0.913rem + 0.3478vi, 1.25rem);
}

```

--------------------------------

### Generate Fluid Type Scale with utopia.generateTypeScale

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Use the generateTypeScale mixin to create fluid type scales. It generates CSS custom properties for each step, interpolating between minimum and maximum font sizes based on viewport width. You can customize the number of positive and negative steps, and the prefix for the custom properties.

```scss
:root {
  // Calling this:
  @include utopia.generateTypeScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minFontSize": 18,
    "maxFontSize": 20,
    "minTypeScale": 1.2,
    "maxTypeScale": 1.25,
    "positiveSteps": 2,
    "negativeSteps": 2,
    /* Optional params */
    "relativeTo": "viewport",
    "prefix": "step-",
  ));

  // Generates this:
  --step--2: clamp(...);
  --step--1: clamp(...);
  --step-0: clamp(...);
  --step-1: clamp(...);
  --step-2: clamp(...);
}
```

--------------------------------

### Generate Fluid Type Scale with Mixin

Source: https://context7.com/trys/utopia-core-scss/llms.txt

Use the `generateTypeScale` mixin to emit fluid font sizes as CSS custom properties. Configure minimum/maximum viewport widths, font sizes, type scale ratios, and the number of positive/negative steps. Optional parameters include `relativeTo` (viewport, container, or viewport-width) and a custom `prefix` for custom property names.

```scss
:root {
  @include utopia.generateTypeScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minFontSize": 18,
    "maxFontSize": 20,
    "minTypeScale": 1.2,
    "maxTypeScale": 1.25,
    "positiveSteps": 3,
    "negativeSteps": 2,
    /* Optional */
    "relativeTo": "viewport",
    "prefix": "step-",
  ));

  // Emits:
  // --step--2: clamp(0.7813rem, 0.7257rem + 0.2174vi, 0.8rem);
  // --step--1: clamp(0.9375rem, 0.8587rem + 0.3261vi, 1rem);
  // --step-0:  clamp(1.125rem,  1.0116rem + 0.4891vi, 1.25rem);
  // --step-1:  clamp(1.35rem,   1.1922rem + 0.7283vi, 1.5625rem);
  // --step-2:  clamp(1.62rem,   1.4053rem + 1.0815vi, 1.9531rem);
  // --step-3:  clamp(1.944rem,  1.6559rem + 1.6003vi, 2.4414rem);
}

// Usage in component styles:
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
p  { font-size: var(--step-0); }
small { font-size: var(--step--1); }
```

--------------------------------

### generateTypeScale() Mixin

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Generates a fluid type scale between two widths, sizes, and scales. It allows setting the number of positive and negative steps and overriding the default custom property prefix.

```APIDOC
## generateTypeScale()

### Description
Generates a fluid type scale between two widths, sizes and scales. Set the number of positive and negative steps. Custom property `prefix` can be overriden from `step-`.

### Method
`@include utopia.generateTypeScale()`

### Parameters
#### Arguments (Map)
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **minFontSize** (number) - Required - The minimum font size.
- **maxFontSize** (number) - Required - The maximum font size.
- **minTypeScale** (number) - Required - The minimum type scale factor.
- **maxTypeScale** (number) - Required - The maximum type scale factor.
- **positiveSteps** (number) - Required - The number of positive steps to generate.
- **negativeSteps** (number) - Required - The number of negative steps to generate.
- **relativeTo** (string) - Optional - The reference for fluid scaling ('viewport' or 'container'). Defaults to 'viewport'.
- **prefix** (string) - Optional - The prefix for generated custom properties. Defaults to 'step-'.

### Example
```scss
:root {
  @include utopia.generateTypeScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minFontSize": 18,
    "maxFontSize": 20,
    "minTypeScale": 1.2,
    "maxTypeScale": 1.25,
    "positiveSteps": 2,
    "negativeSteps": 2,
    "relativeTo": "viewport",
    "prefix": "step-",
  ));
}
```

### Output Example
```css
:root {
  --step--2: clamp(...);
  --step--1: clamp(...);
  --step-0: clamp(...);
  --step-1: clamp(...);
  --step-2: clamp(...);
}
```
```

--------------------------------

### Calculate Fluid Type Scale with utopia.calculateTypeScale

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Use the calculateTypeScale function to compute a fluid type scale. It returns an array of objects, each containing the step, min/max font sizes, and the calculated clamp value. This function is useful when you need the calculated values to use in your own custom CSS.

```scss
$typeScale: utopia.calculateTypeScale((
  "minWidth": 320,
  "maxWidth": 1240,
  "minFontSize": 18,
  "maxFontSize": 20,
  "minTypeScale": 1.2,
  "maxTypeScale": 1.25,
  "positiveSteps": 5,
  "negativeSteps": 2,
  /* Optional params */
  "relativeTo": "container",
))

// $typeScale == (
//    (
//      "step": 0,
//      "minFontSize": 18,
//      "maxFontSize": 20,
//      "clamp": clamp(...),
//    )
//  )
```

--------------------------------

### calculateTypeScale() Function

Source: https://github.com/trys/utopia-core-scss/blob/main/README.md

Calculates a fluid type scale between two widths, sizes, and scales. It allows setting the number of positive and negative steps, and specifying whether the scale should be relative to the viewport or the container.

```APIDOC
## calculateTypeScale()

### Description
Calculates a fluid type scale between two widths, sizes and scales. Set the number of positive and negative steps, and whether you want the scale to be relative to the `viewport` or the `container`.

### Method
`utopia.calculateTypeScale()`

### Parameters
#### Arguments (Map)
- **minWidth** (number) - Required - The minimum viewport width.
- **maxWidth** (number) - Required - The maximum viewport width.
- **minFontSize** (number) - Required - The minimum font size.
- **maxFontSize** (number) - Required - The maximum font size.
- **minTypeScale** (number) - Required - The minimum type scale factor.
- **maxTypeScale** (number) - Required - The maximum type scale factor.
- **positiveSteps** (number) - Required - The number of positive steps to calculate.
- **negativeSteps** (number) - Required - The number of negative steps to calculate.
- **relativeTo** (string) - Optional - The reference for fluid scaling ('viewport' or 'container'). Defaults to 'viewport'.

### Example
```scss
$typeScale: utopia.calculateTypeScale((
  "minWidth": 320,
  "maxWidth": 1240,
  "minFontSize": 18,
  "maxFontSize": 20,
  "minTypeScale": 1.2,
  "maxTypeScale": 1.25,
  "positiveSteps": 5,
  "negativeSteps": 2,
  "relativeTo": "container",
))
```

### Return Value Example
```scss
// $typeScale == (
//    (
//      "step": 0,
//      "minFontSize": 18,
//      "maxFontSize": 20,
//      "clamp": clamp(...),
//    )
//  )
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.