Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: calculate fluid tokens based on provider width (#29316)

Browse Source 
## Description

- I added `--provider-width` CSS variable to the provider, which we get
with the help of [ResizeObserver
hook](https://github.com/jaredLunde/react-hook/tree/master/packages/resize-observer),
the variable is calculated through
[debounces](https://github.com/jaredLunde/react-hook/tree/master/packages/debounce)
every 100 ms.
- Styles for typography are now calculated only through CSS
- Split useFluidTokens hook into several, now there are separate hook
for sizing, spacing and typography
- Create a separate folder for hooks in the theme package

#### PR fixes following issue(s)
Fixes #29177 

#### Media

https://github.com/appsmithorg/appsmith/assets/11555074/7778c5a0-9ed9-4f9c-a2b6-787784ed3e1f



#### Type of change
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced fluid sizing, spacing, and typography hooks for responsive
design adjustments.
- Added global font stack utility for consistent typography across
platforms.
  - Enhanced theming capabilities with new hooks and utilities.

- **Improvements**
- Updated `ThemeProvider` to support new styling hooks and responsive
design features.
- Refined typography utilities for dynamic class name generation based
on design tokens.

- **Documentation**
- Added comments to clarify the use of `className` and `style`
properties in `ThemeProviderProps`.

- **Refactor**
  - Streamlined token access with updated `TokensAccessor` class.
- Consolidated typography and font metric types for better type safety
and clarity.

- **Bug Fixes**
- Fixed modal handling in `ComplexForm` component with improved state
management and accessibility.

- **Breaking Changes**
- Removed exports of deprecated typography module and fluid token
module.
- Changed public interface for theming hooks, which may affect existing
consumers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
This commit is contained in:
Valera Melnikov 2023-12-06 10:38:36 +03:00 committed by GitHub
parent 907a1d4a1e
commit 0c345d8404
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 1278 additions and 658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/packages/design-system/theming/package.json
View File

@ -17,6 +17,8 @@
"@capsizecss/core": "^3.1.1",
"@capsizecss/metrics": "^1.2.0",
"@emotion/sheet": "^1.2.2",
"@react-hook/debounce": "^4.0.0",
"@react-hook/resize-observer": "^1.2.6",
"lodash": "*"
}
}

0
app/client/packages/design-system/theming/src/typography/index.ts → app/client/packages/design-system/theming/src/hooks/index.ts
View File

0
app/client/packages/design-system/theming/src/token/src/fluid/calculateScales.ts → app/client/packages/design-system/theming/src/hooks/src/calculateScales.ts
View File

6
app/client/packages/design-system/theming/src/hooks/src/index.ts Normal file
View File

@ -0,0 +1,6 @@
export * from "./useFluidSizing";
export * from "./useFluidSpacing";
export * from "./useFluidTypography";
export * from "./useTheme";
export * from "./useCssTokens";
export * from "./types";

4
app/client/packages/design-system/theming/src/token/src/fluid/types.ts → app/client/packages/design-system/theming/src/hooks/src/types.ts
View File

@ -26,7 +26,3 @@ export interface Scale {
v: number;
r: number;
}
export interface FluidScale {
fluid: number;
}

103
app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx Normal file
View File

@ -0,0 +1,103 @@
import { css } from "@emotion/css";
import { useEffect, useState } from "react";
import { cssRule, getTypographyClassName } from "../../utils";
import type { Theme } from "../../theme";
import type { FontFamily, Typography } from "../../token";
const fontFamilyCss = (fontFamily?: FontFamily) => {
const fontFamilyCss =
fontFamily && fontFamily !== "System Default"
? `${fontFamily}, sans-serif`
: "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu'";
return `font-family: ${fontFamilyCss}; --font-family: ${fontFamilyCss}`;
};
const getTypographyCss = (typography: Typography) => {
return css`
${Object.keys(typography).reduce((prev, key) => {
const currentKey = key as keyof Typography;
const { after, before, fontSize, lineHeight } = typography[currentKey];
return (
prev +
`
& .${getTypographyClassName(currentKey)} {
font-size: ${fontSize};
line-height: ${lineHeight};
&::before {
content: "";
display: table;
margin-bottom: ${before.marginBottom};
}
&::after {
content: "";
display: table;
margin-top: ${after.marginTop};
}
}
`
);
}, "")}
`;
};
interface UseCssTokensProps extends Theme {
width: number | null;
}
export function useCssTokens(props: UseCssTokensProps) {
const { colorMode, fontFamily, typography, width, ...restTokens } = props;
const [typographyClassname, setTypographyClassName] = useState<string>();
const [widthClassName, setWidthClassName] = useState<string>();
const [fontFamilyClassName, setFontFamilyClassName] = useState<string>();
const [colorModeClassName, setColorModeClassName] = useState<string>();
const [providerClassName, setProviderClassName] = useState<string>();
useEffect(() => {
if (typography != null) {
setTypographyClassName(css`
${getTypographyCss(typography)}
`);
}
}, [typography]);
useEffect(() => {
if (fontFamily != null) {
setFontFamilyClassName(css`
${fontFamilyCss(fontFamily)}
`);
}
}, [fontFamily]);
useEffect(() => {
setProviderClassName(css`
${cssRule(restTokens)};
`);
}, [restTokens]);
useEffect(() => {
if (width != null) {
setWidthClassName(css`
--provider-width: ${width}px;
`);
}
}, [width]);
useEffect(() => {
if (colorMode != null) {
setColorModeClassName(css`
color-scheme: ${colorMode};
`);
}
}, [colorMode]);
return {
typographyClassname,
widthClassName,
fontFamilyClassName,
colorModeClassName,
providerClassName,
};
}

24
app/client/packages/design-system/theming/src/token/src/fluid/getFluidSizing.ts → app/client/packages/design-system/theming/src/hooks/src/useFluidSizing.tsx
View File

@ -1,5 +1,8 @@
import { useEffect, useState } from "react";
import { calculateScales } from "./calculateScales";
import type { TokenObj } from "../../token";
import type { FluidConfig } from "./types";
import type { ScaleConfig } from "./types";
const getFluidValue = (
@ -29,7 +32,7 @@ const getFluidValue = (
maxVw,
)[0];
return `clamp(${minSize}px, calc(${v}vw + ${r}px), ${maxSize}px)`;
return `clamp(${minSize}px, calc(${v} * var(--provider-width) / 100 + ${r}px), ${maxSize}px)`;
};
export const getFluidSizing = (
@ -60,3 +63,22 @@ export const getFluidSizing = (
},
);
};
export const useFluidSizing = (
fluidConfig: FluidConfig,
userDensity = 1,
userSizing = 1,
) => {
const { maxVw, minVw, sizing: sizingConfig } = fluidConfig;
const [sizing, setSizing] = useState<TokenObj>();
useEffect(() => {
setSizing(
getFluidSizing(maxVw, minVw, sizingConfig, userDensity, userSizing),
);
}, [userDensity, userSizing, maxVw, minVw, sizingConfig]);
return {
sizing,
};
};

93
app/client/packages/design-system/theming/src/hooks/src/useFluidSpacing.tsx Normal file
View File

@ -0,0 +1,93 @@
import { useEffect, useState } from "react";
import { calculateScales } from "./calculateScales";
import type { TokenObj } from "../../token";
import type { FluidConfig } from "./types";
import type { ScaleConfig } from "./types";
export const getFluidSpacing = (
maxVw: number,
minVw: number,
spacing: ScaleConfig,
userDensity = 1,
userSizing = 1,
) => {
const {
maxV,
minV,
userDensityRatio = 1,
userSizingRatio = 1,
...rest
} = spacing;
const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio;
const scales = calculateScales(
{
minV: minV * ratio,
maxV: maxV * ratio,
...rest,
},
minVw,
maxVw,
);
return scales.reduce(
(acc, currentValue, index) => {
const { maxSize, minSize, r, v } = currentValue;
const value = `clamp(${minSize}px, calc(${v} * var(--provider-width) / 100 + ${r}px), ${maxSize}px)`;
return {
...acc,
[index + 1]: value,
};
},
{
0: 0,
},
);
};
export const useFluidSpacing = (
fluidConfig: FluidConfig,
userDensity = 1,
userSizing = 1,
) => {
const {
innerSpacing: innerSpacingConfig,
maxVw,
minVw,
outerSpacing: outerSpacingConfig,
} = fluidConfig;
const [outerSpacing, setOuterSpacing] = useState<TokenObj>();
const [innerSpacing, setInnerSpacing] = useState<TokenObj>();
useEffect(() => {
setOuterSpacing(
getFluidSpacing(
maxVw,
minVw,
outerSpacingConfig,
userDensity,
userSizing,
),
);
}, [userDensity, userSizing, maxVw, minVw, outerSpacingConfig]);
useEffect(() => {
setInnerSpacing(
getFluidSpacing(
maxVw,
minVw,
innerSpacingConfig,
userDensity,
userSizing,
),
);
}, [userDensity, userSizing, maxVw, minVw, innerSpacingConfig]);
return {
outerSpacing,
innerSpacing,
};
};

117
app/client/packages/design-system/theming/src/hooks/src/useFluidTypography.tsx Normal file
View File

@ -0,0 +1,117 @@
import { useEffect, useState } from "react";
import { FONT_METRICS, TYPOGRAPHY_VARIANTS } from "../../token";
import { calculateScales } from "./calculateScales";
import { createStyleObject } from "@capsizecss/core";
import appleSystem from "@capsizecss/metrics/appleSystem";
import type { FluidConfig } from "./types";
import type {
FontFamily,
Typography,
TypographyVariantMetric,
} from "../../token";
import type { ScaleConfig } from "./types";
const getFontMetrics = (fontFamily?: FontFamily) => {
return !Boolean(fontFamily) ||
fontFamily == null ||
fontFamily === "System Default"
? appleSystem
: FONT_METRICS[fontFamily];
};
export const getFluidTypography = (
maxVw: number,
minVw: number,
typography: ScaleConfig,
userDensity = 1,
userSizing = 1,
fontFamily?: FontFamily,
) => {
const {
maxV,
minV,
userDensityRatio = 1,
userSizingRatio = 1,
...rest
} = typography;
const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio;
const scales = calculateScales(
{
minV: minV * ratio,
maxV: maxV * ratio,
...rest,
},
minVw,
maxVw,
);
const styles = scales.reduce(
(metrics: TypographyVariantMetric[], currentValue) => {
const { maxSize, minSize, r, v } = currentValue;
const minTypographyStyle = createStyleObject({
capHeight: minSize,
lineGap: minSize,
fontMetrics: getFontMetrics(fontFamily),
});
const maxTypographyStyle = createStyleObject({
capHeight: maxSize,
lineGap: maxSize,
fontMetrics: getFontMetrics(fontFamily),
});
// Calculate the ratio between the initial config value and the font size
const fontSizeRatio =
Number(minTypographyStyle.fontSize.replace("px", "")) / minSize;
// The ratio for lineHeight is a constant since it doesn't change based on passing values
const lineHeightRatio = 2;
metrics.push({
fontSize: `clamp(${minTypographyStyle.fontSize}, calc((${v} * var(--provider-width) / 100 + ${r}px) * ${fontSizeRatio}), ${maxTypographyStyle.fontSize})`,
lineHeight: `clamp(${minTypographyStyle.lineHeight}, calc((${v} * var(--provider-width) / 100 + ${r}px) * ${lineHeightRatio}), ${maxTypographyStyle.lineHeight})`,
// we take before and after values from min config since they are always the same for any font size
before: minTypographyStyle["::before"],
after: minTypographyStyle["::after"],
});
return metrics;
},
[],
);
return Object.keys(TYPOGRAPHY_VARIANTS).reduce((prev, current, index) => {
return {
...prev,
[current]: styles[index],
};
}, {} as Typography);
};
export const useFluidTypography = (
fluidConfig: FluidConfig,
fontFamily?: FontFamily,
userDensity = 1,
userSizing = 1,
) => {
const { maxVw, minVw, typography: typographyConfig } = fluidConfig;
const [typography, setTypography] = useState<Typography | null>(null);
useEffect(() => {
setTypography(
getFluidTypography(
maxVw,
minVw,
typographyConfig,
userDensity,
userSizing,
fontFamily,
),
);
}, [userDensity, userSizing, fontFamily, maxVw, minVw, typographyConfig]);
return {
typography,
};
};

67
app/client/packages/design-system/theming/src/theme/src/useTheme.tsx → app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx
View File

@ -1,13 +1,10 @@
import Color from "colorjs.io";
import { useEffect, useState } from "react";
import type { TokenSource } from "@design-system/theming";
import {
TokensAccessor,
defaultTokens,
useFluidTokens,
} from "@design-system/theming";
import { TokensAccessor, defaultTokens } from "../../token";
import { useFluidSizing, useFluidSpacing, useFluidTypography } from "./";
import type { UseThemeProps } from "./types";
import type { ColorMode } from "../../color";
import type { TokenSource, FontFamily } from "../../token";
const { fluid, ...restDefaultTokens } = defaultTokens;
@ -15,6 +12,15 @@ const tokensAccessor = new TokensAccessor({
...(restDefaultTokens as TokenSource),
});
export interface UseThemeProps {
seedColor?: string;
colorMode?: ColorMode;
borderRadius?: string;
fontFamily?: FontFamily;
userDensity?: number;
userSizing?: number;
}
export function useTheme(props: UseThemeProps = {}) {
const {
borderRadius,
@ -25,11 +31,18 @@ export function useTheme(props: UseThemeProps = {}) {
userSizing = 1,
} = props;
const { innerSpacing, outerSpacing, sizing, typography } = useFluidTokens(
const { sizing } = useFluidSizing(fluid, userDensity, userSizing);
const { innerSpacing, outerSpacing } = useFluidSpacing(
fluid,
userDensity,
userSizing,
);
const { typography } = useFluidTypography(
fluid,
fontFamily,
userDensity,
userSizing,
);
const [theme, setTheme] = useState(tokensAccessor.getAllTokens());
@ -71,9 +84,10 @@ export function useTheme(props: UseThemeProps = {}) {
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
return; // Prevent further execution if color parsing fails
}
if (color) {
if (color != null) {
tokensAccessor.updateSeedColor(seedColor);
setTheme((prevState) => {
@ -87,16 +101,20 @@ export function useTheme(props: UseThemeProps = {}) {
}, [seedColor]);
useEffect(() => {
tokensAccessor.updateFontFamily(fontFamily);
// Check typography, as fontFamily may be undefined
if (typography != null) {
tokensAccessor.updateFontFamily(fontFamily);
tokensAccessor.updateTypography(typography);
setTheme((prevState) => {
return {
...prevState,
typography: tokensAccessor.getTypography(),
fontFamily: tokensAccessor.getFontFamily(),
};
});
}, [fontFamily]);
setTheme((prevState) => {
return {
...prevState,
typography: tokensAccessor.getTypography(),
fontFamily: tokensAccessor.getFontFamily(),
};
});
}
}, [typography, fontFamily]);
useEffect(() => {
if (sizing) {
@ -137,18 +155,5 @@ export function useTheme(props: UseThemeProps = {}) {
}
}, [innerSpacing]);
useEffect(() => {
if (typography) {
tokensAccessor.updateTypography(typography);
setTheme((prevState) => {
return {
...prevState,
typography: tokensAccessor.getTypography(),
};
});
}
}, [typography]);
return { theme, setTheme };
}

3
app/client/packages/design-system/theming/src/index.ts
View File

@ -1,4 +1,5 @@
export * from "./typography";
export * from "./token";
export * from "./theme";
export * from "./color";
export * from "./utils";
export * from "./hooks";

65
app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx
View File

@ -1,48 +1,47 @@
import React from "react";
import {
createGlobalFontStack,
createTypographyStringMap,
} from "../../typography";
import { css, injectGlobal } from "@emotion/css";
import { cssRule } from "../../utils/cssRule";
import React, { useRef } from "react";
import { injectGlobal } from "@emotion/css";
import { globalFontStack } from "../../utils/globalFontStack";
import { ThemeContext } from "./ThemeContext";
import clsx from "clsx";
import { useDebounce } from "@react-hook/debounce";
import useResizeObserver from "@react-hook/resize-observer";
import { useCssTokens } from "../../hooks";
import type { FontFamily } from "../../typography";
import type { Theme, ThemeProviderProps } from "./types";
import type { ThemeProviderProps } from "./types";
import type { RefObject } from "react";
const { fontFaces } = createGlobalFontStack();
injectGlobal(fontFaces);
const fontFamilyCss = (fontFamily?: FontFamily) => {
const fontFamilyCss =
fontFamily && fontFamily !== "System Default"
? `${fontFamily}, sans-serif`
: "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu'";
return `font-family: ${fontFamilyCss}; --font-family: ${fontFamilyCss}`;
};
const providerCss = ({
colorMode,
fontFamily,
typography,
...theme
}: Theme) => css`
${fontFamilyCss(fontFamily)};
${createTypographyStringMap(typography, fontFamily)};
${cssRule(theme)};
color-scheme: ${colorMode};
`;
injectGlobal(globalFontStack());
export const ThemeProvider = (props: ThemeProviderProps) => {
const { children, className, style, theme } = props;
const [width, setWidth] = useDebounce<number | null>(null, 100);
const providerRef = useRef(null);
useResizeObserver(providerRef as RefObject<HTMLElement>, (entry) =>
setWidth(entry.contentRect.width),
);
const {
colorModeClassName,
fontFamilyClassName,
providerClassName,
typographyClassname,
widthClassName,
} = useCssTokens({ ...theme, width });
return (
<ThemeContext.Provider value={theme}>
<div
className={clsx(className, providerCss(theme))}
className={clsx(
className,
colorModeClassName,
fontFamilyClassName,
providerClassName,
typographyClassname,
widthClassName,
)}
data-theme-provider=""
ref={providerRef}
style={style}
>
{children}

1
app/client/packages/design-system/theming/src/theme/src/index.ts
View File

@ -1,4 +1,3 @@
export * from "./ThemeContext";
export * from "./ThemeProvider";
export * from "./types";
export * from "./useTheme";

15
app/client/packages/design-system/theming/src/theme/src/types.ts
View File

@ -1,9 +1,7 @@
import type { CSSProperties } from "react";
import type { ReactNode } from "react";
import type { ColorMode } from "../../color";
import type { FontFamily, Typography } from "../../typography";
import type { ThemeToken } from "../../token";
import type { FontFamily, Typography, ThemeToken } from "../../token";
export type Theme = ThemeToken & {
typography?: Typography;
@ -14,15 +12,8 @@ export type Theme = ThemeToken & {
export interface ThemeProviderProps {
theme: Theme;
children: ReactNode;
/** Sets the CSS className for the content popover. Only use as a **last resort**. */
className?: string;
/** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use style props instead. */
style?: CSSProperties;
}
export interface UseThemeProps {
seedColor?: string;
colorMode?: ColorMode;
borderRadius?: string;
fontFamily?: FontFamily;
userDensity?: number;
userSizing?: number;
}

10
app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts
View File

@ -2,8 +2,14 @@ import kebabCase from "lodash/kebabCase";
import { DarkModeTheme, LightModeTheme } from "../../color";
import type { ColorMode, ColorTypes } from "../../color";
import type { FontFamily, Typography } from "../../typography";
import type { ThemeToken, TokenObj, TokenSource, TokenType } from "./types";
import type {
ThemeToken,
TokenObj,
TokenSource,
TokenType,
FontFamily,
Typography,
} from "./types";
export class TokensAccessor {
private seedColor?: ColorTypes;

16
app/client/packages/design-system/theming/src/token/src/fluid/calculateFluidScales.ts
View File

@ -1,16 +0,0 @@
import type { FluidScale, Scale } from "./types";
export const calculateFluidScales = (scales: Scale[], screenWidth: number) => {
const fluidScales: FluidScale[] = [];
scales.forEach((scale) => {
const { r, v } = scale;
const fluid = (screenWidth / 100) * v + r;
fluidScales.push({
fluid,
});
});
return fluidScales;
};

45
app/client/packages/design-system/theming/src/token/src/fluid/getFluidSpacing.ts
View File

@ -1,45 +0,0 @@
import { calculateScales } from "./calculateScales";
import type { ScaleConfig } from "./types";
export const getFluidSpacing = (
maxVw: number,
minVw: number,
spacing: ScaleConfig,
userDensity = 1,
userSizing = 1,
) => {
const {
maxV,
minV,
userDensityRatio = 1,
userSizingRatio = 1,
...rest
} = spacing;
const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio;
const scales = calculateScales(
{
minV: minV * ratio,
maxV: maxV * ratio,
...rest,
},
minVw,
maxVw,
);
return scales.reduce(
(acc, currentValue, index) => {
const { maxSize, minSize, r, v } = currentValue;
const value = `clamp(${minSize}px, calc(${v}vw + ${r}px), ${maxSize}px)`;
return {
...acc,
[index + 1]: value,
};
},
{
0: 0,
},
);
};

47
app/client/packages/design-system/theming/src/token/src/fluid/getFluidTypography.ts
View File

@ -1,47 +0,0 @@
import type { ScaleConfig } from "./types";
import { calculateScales } from "./calculateScales";
import type { Typography } from "../../../typography";
import { TYPOGRAPHY_VARIANTS } from "../../../typography";
import { calculateFluidScales } from "./calculateFluidScales";
export const getFluidTypography = (
maxVw: number,
minVw: number,
typography: ScaleConfig,
userDensity = 1,
userSizing = 1,
vw: number,
) => {
const {
maxV,
minV,
userDensityRatio = 1,
userSizingRatio = 1,
...rest
} = typography;
const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio;
const scales = calculateFluidScales(
calculateScales(
{
minV: minV * ratio,
maxV: maxV * ratio,
...rest,
},
minVw,
maxVw,
),
vw,
);
return Object.keys(TYPOGRAPHY_VARIANTS).reduce((prev, current, index) => {
return {
...prev,
[current]: {
capHeight: scales[index].fluid,
lineGap: scales[index].fluid,
},
};
}, {} as Typography);
};

4
app/client/packages/design-system/theming/src/token/src/fluid/index.ts
View File

@ -1,4 +0,0 @@
export * from "./useFluidTokens";
export * from "./getFluidSizing";
export * from "./getFluidSpacing";
export * from "./getFluidTypography";

92
app/client/packages/design-system/theming/src/token/src/fluid/useFluidTokens.ts
View File

@ -1,92 +0,0 @@
import { useEffect, useState, useCallback } from "react";
import debounce from "lodash/debounce";
import { getFluidSizing } from "./getFluidSizing";
import { getFluidSpacing } from "./getFluidSpacing";
import { getFluidTypography } from "./getFluidTypography";
import type { Typography } from "../../../typography";
import type { TokenObj } from "../types";
import type { FluidConfig } from "./types";
const RESIZE_DEBOUNCE_TIME = 300;
export const useFluidTokens = (
fluidConfig: FluidConfig,
userDensity = 1,
userSizing = 1,
) => {
const { maxVw, minVw } = fluidConfig;
const [typography, setTypography] = useState<Typography>();
const [sizing, setSizing] = useState<TokenObj>();
const [outerSpacing, setOuterSpacing] = useState<TokenObj>();
const [innerSpacing, setInnerSpacing] = useState<TokenObj>();
const onResize = () => {
setTypography(
getFluidTypography(
maxVw,
minVw,
fluidConfig.typography,
userDensity,
userSizing,
window.innerWidth,
),
);
};
const debouncedResize = useCallback(
debounce(onResize, RESIZE_DEBOUNCE_TIME),
[],
);
useEffect(() => {
setOuterSpacing(
getFluidSpacing(
maxVw,
minVw,
fluidConfig.outerSpacing,
userDensity,
userSizing,
),
);
setInnerSpacing(
getFluidSpacing(
maxVw,
minVw,
fluidConfig.innerSpacing,
userDensity,
userSizing,
),
);
}, [userDensity, userSizing]);
useEffect(() => {
setTypography(
getFluidTypography(
maxVw,
minVw,
fluidConfig.typography,
userDensity,
userSizing,
window.innerWidth,
),
);
setSizing(
getFluidSizing(maxVw, minVw, fluidConfig.sizing, userDensity, userSizing),
);
}, [userDensity, userSizing]);
useEffect(() => {
window.addEventListener("resize", debouncedResize);
return () => {
window.removeEventListener("resize", debouncedResize);
};
}, []);
return {
typography,
outerSpacing,
innerSpacing,
sizing,
};
};

1
app/client/packages/design-system/theming/src/token/src/index.ts
View File

@ -1,6 +1,5 @@
export * from "./TokensAccessor";
export * from "./types";
export * from "./fluid";
export { default as defaultTokens } from "./defaultTokens.json";
export { default as themeTokens } from "./themeTokens.json";

896
app/client/packages/design-system/theming/src/token/src/styles.module.css
View File

@ -1,224 +1,688 @@
/* THIS FILE IS CREATED AUTOMATICALLY. PLEASE DON'T EDIT IT. */
:root {
--outer-spacing-0: 0;
--outer-spacing-1: clamp(4.6px, calc(0.29vw + 3.54px), 9.2px);
--outer-spacing-2: clamp(6.51px, calc(0.43vw + 4.94px), 13.27px);
--outer-spacing-3: clamp(9.2px, calc(0.64vw + 6.91px), 19.14px);
--outer-spacing-4: clamp(13.01px, calc(0.94vw + 9.64px), 27.6px);
--outer-spacing-5: clamp(18.4px, calc(1.37vw + 13.46px), 39.81px);
--outer-spacing-6: clamp(26.02px, calc(2.01vw + 18.78px), 57.41px);
--outer-spacing-7: clamp(36.8px, calc(2.95vw + 26.18px), 82.8px);
--outer-spacing-8: clamp(52.04px, calc(4.32vw + 36.49px), 119.42px);
--outer-spacing-1: clamp(
4.6px,
calc(0.29 * var(--provider-width) / 100 + 3.54px),
9.2px
);
--outer-spacing-2: clamp(
6.51px,
calc(0.43 * var(--provider-width) / 100 + 4.94px),
13.27px
);
--outer-spacing-3: clamp(
9.2px,
calc(0.64 * var(--provider-width) / 100 + 6.91px),
19.14px
);
--outer-spacing-4: clamp(
13.01px,
calc(0.94 * var(--provider-width) / 100 + 9.64px),
27.6px
);
--outer-spacing-5: clamp(
18.4px,
calc(1.37 * var(--provider-width) / 100 + 13.46px),
39.81px
);
--outer-spacing-6: clamp(
26.02px,
calc(2.01 * var(--provider-width) / 100 + 18.78px),
57.41px
);
--outer-spacing-7: clamp(
36.8px,
calc(2.95 * var(--provider-width) / 100 + 26.18px),
82.8px
);
--outer-spacing-8: clamp(
52.04px,
calc(4.32 * var(--provider-width) / 100 + 36.49px),
119.42px
);
--inner-spacing-0: 0;
--inner-spacing-1: clamp(6.19px, calc(0.13vw + 5.71px), 8.25px);
--inner-spacing-2: clamp(8.75px, calc(0.2vw + 8.02px), 11.9px);
--inner-spacing-3: clamp(12.38px, calc(0.31vw + 11.27px), 17.16px);
--inner-spacing-4: clamp(17.5px, calc(0.46vw + 15.83px), 24.75px);
--inner-spacing-5: clamp(24.75px, calc(0.7vw + 22.22px), 35.7px);
--inner-spacing-6: clamp(35px, calc(1.06vw + 31.2px), 51.48px);
--inner-spacing-7: clamp(49.5px, calc(1.59vw + 43.79px), 74.25px);
--inner-spacing-8: clamp(70px, calc(2.38vw + 61.45px), 107.09px);
--inner-spacing-1: clamp(
6.19px,
calc(0.13 * var(--provider-width) / 100 + 5.71px),
8.25px
);
--inner-spacing-2: clamp(
8.75px,
calc(0.2 * var(--provider-width) / 100 + 8.02px),
11.9px
);
--inner-spacing-3: clamp(
12.38px,
calc(0.31 * var(--provider-width) / 100 + 11.27px),
17.16px
);
--inner-spacing-4: clamp(
17.5px,
calc(0.46 * var(--provider-width) / 100 + 15.83px),
24.75px
);
--inner-spacing-5: clamp(
24.75px,
calc(0.7 * var(--provider-width) / 100 + 22.22px),
35.7px
);
--inner-spacing-6: clamp(
35px,
calc(1.06 * var(--provider-width) / 100 + 31.2px),
51.48px
);
--inner-spacing-7: clamp(
49.5px,
calc(1.59 * var(--provider-width) / 100 + 43.79px),
74.25px
);
--inner-spacing-8: clamp(
70px,
calc(2.38 * var(--provider-width) / 100 + 61.45px),
107.09px
);
--sizing-0: 0;
--sizing-1: calc(1 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-2: calc(2 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-3: calc(3 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-4: calc(4 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-5: calc(5 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-6: calc(6 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-7: calc(7 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-8: calc(8 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-9: calc(9 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-10: calc(10 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-11: calc(11 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-12: calc(12 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-13: calc(13 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-14: calc(14 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-15: calc(15 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-16: calc(16 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-17: calc(17 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-18: calc(18 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-19: calc(19 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-20: calc(20 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-21: calc(21 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-22: calc(22 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-23: calc(23 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-24: calc(24 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-25: calc(25 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-26: calc(26 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-27: calc(27 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-28: calc(28 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-29: calc(29 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-30: calc(30 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-31: calc(31 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-32: calc(32 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-33: calc(33 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-34: calc(34 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-35: calc(35 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-36: calc(36 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-37: calc(37 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-38: calc(38 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-39: calc(39 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-40: calc(40 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-41: calc(41 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-42: calc(42 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-43: calc(43 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-44: calc(44 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-45: calc(45 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-46: calc(46 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-47: calc(47 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-48: calc(48 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-49: calc(49 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-50: calc(50 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-51: calc(51 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-52: calc(52 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-53: calc(53 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-54: calc(54 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-55: calc(55 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-56: calc(56 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-57: calc(57 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-58: calc(58 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-59: calc(59 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-60: calc(60 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-61: calc(61 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-62: calc(62 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-63: calc(63 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-64: calc(64 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-65: calc(65 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-66: calc(66 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-67: calc(67 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-68: calc(68 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-69: calc(69 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-70: calc(70 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-71: calc(71 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-72: calc(72 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-73: calc(73 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-74: calc(74 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-75: calc(75 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-76: calc(76 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-77: calc(77 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-78: calc(78 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-79: calc(79 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-80: calc(80 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-81: calc(81 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-82: calc(82 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-83: calc(83 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-84: calc(84 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-85: calc(85 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-86: calc(86 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-87: calc(87 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-88: calc(88 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-89: calc(89 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-90: calc(90 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-91: calc(91 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-92: calc(92 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-93: calc(93 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-94: calc(94 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-95: calc(95 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-96: calc(96 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-97: calc(97 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-98: calc(98 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-99: calc(99 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-100: calc(100 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-101: calc(101 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-102: calc(102 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-103: calc(103 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-104: calc(104 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-105: calc(105 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-106: calc(106 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-107: calc(107 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-108: calc(108 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-109: calc(109 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-110: calc(110 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-111: calc(111 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-112: calc(112 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-113: calc(113 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-114: calc(114 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-115: calc(115 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-116: calc(116 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-117: calc(117 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-118: calc(118 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-119: calc(119 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-120: calc(120 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-121: calc(121 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-122: calc(122 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-123: calc(123 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-124: calc(124 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-125: calc(125 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-126: calc(126 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-127: calc(127 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-128: calc(128 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-129: calc(129 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-130: calc(130 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-131: calc(131 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-132: calc(132 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-133: calc(133 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-134: calc(134 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-135: calc(135 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-136: calc(136 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-137: calc(137 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-138: calc(138 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-139: calc(139 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-140: calc(140 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-141: calc(141 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-142: calc(142 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-143: calc(143 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-144: calc(144 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-145: calc(145 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-146: calc(146 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-147: calc(147 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-148: calc(148 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-149: calc(149 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-150: calc(150 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-151: calc(151 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-152: calc(152 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-153: calc(153 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-154: calc(154 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-155: calc(155 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-156: calc(156 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-157: calc(157 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-158: calc(158 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-159: calc(159 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-160: calc(160 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-161: calc(161 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-162: calc(162 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-163: calc(163 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-164: calc(164 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-165: calc(165 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-166: calc(166 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-167: calc(167 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-168: calc(168 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-169: calc(169 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-170: calc(170 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-171: calc(171 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-172: calc(172 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-173: calc(173 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-174: calc(174 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-175: calc(175 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-176: calc(176 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-177: calc(177 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-178: calc(178 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-179: calc(179 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-180: calc(180 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-181: calc(181 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-182: calc(182 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-183: calc(183 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-184: calc(184 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-185: calc(185 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-186: calc(186 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-187: calc(187 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-188: calc(188 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-189: calc(189 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-190: calc(190 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-191: calc(191 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-192: calc(192 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-193: calc(193 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-194: calc(194 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-195: calc(195 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-196: calc(196 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-197: calc(197 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-198: calc(198 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-199: calc(199 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-200: calc(200 * clamp(3.2px, calc(0.1vw + 2.83px), 4.8px));
--sizing-1: calc(
1 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-2: calc(
2 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-3: calc(
3 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-4: calc(
4 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-5: calc(
5 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-6: calc(
6 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-7: calc(
7 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-8: calc(
8 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-9: calc(
9 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-10: calc(
10 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-11: calc(
11 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-12: calc(
12 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-13: calc(
13 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-14: calc(
14 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-15: calc(
15 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-16: calc(
16 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-17: calc(
17 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-18: calc(
18 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-19: calc(
19 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-20: calc(
20 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-21: calc(
21 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-22: calc(
22 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-23: calc(
23 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-24: calc(
24 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-25: calc(
25 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-26: calc(
26 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-27: calc(
27 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-28: calc(
28 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-29: calc(
29 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-30: calc(
30 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-31: calc(
31 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-32: calc(
32 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-33: calc(
33 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-34: calc(
34 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-35: calc(
35 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-36: calc(
36 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-37: calc(
37 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-38: calc(
38 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-39: calc(
39 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-40: calc(
40 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-41: calc(
41 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-42: calc(
42 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-43: calc(
43 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-44: calc(
44 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-45: calc(
45 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-46: calc(
46 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-47: calc(
47 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-48: calc(
48 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-49: calc(
49 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-50: calc(
50 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-51: calc(
51 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-52: calc(
52 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-53: calc(
53 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-54: calc(
54 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-55: calc(
55 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-56: calc(
56 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-57: calc(
57 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-58: calc(
58 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-59: calc(
59 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-60: calc(
60 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-61: calc(
61 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-62: calc(
62 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-63: calc(
63 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-64: calc(
64 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-65: calc(
65 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-66: calc(
66 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-67: calc(
67 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-68: calc(
68 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-69: calc(
69 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-70: calc(
70 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-71: calc(
71 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-72: calc(
72 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-73: calc(
73 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-74: calc(
74 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-75: calc(
75 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-76: calc(
76 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-77: calc(
77 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-78: calc(
78 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-79: calc(
79 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-80: calc(
80 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-81: calc(
81 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-82: calc(
82 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-83: calc(
83 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-84: calc(
84 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-85: calc(
85 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-86: calc(
86 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-87: calc(
87 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-88: calc(
88 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-89: calc(
89 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-90: calc(
90 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-91: calc(
91 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-92: calc(
92 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-93: calc(
93 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-94: calc(
94 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-95: calc(
95 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-96: calc(
96 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-97: calc(
97 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-98: calc(
98 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-99: calc(
99 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-100: calc(
100 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-101: calc(
101 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-102: calc(
102 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-103: calc(
103 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-104: calc(
104 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-105: calc(
105 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-106: calc(
106 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-107: calc(
107 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-108: calc(
108 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-109: calc(
109 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-110: calc(
110 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-111: calc(
111 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-112: calc(
112 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-113: calc(
113 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-114: calc(
114 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-115: calc(
115 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-116: calc(
116 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-117: calc(
117 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-118: calc(
118 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-119: calc(
119 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-120: calc(
120 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-121: calc(
121 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-122: calc(
122 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-123: calc(
123 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-124: calc(
124 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-125: calc(
125 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-126: calc(
126 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-127: calc(
127 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-128: calc(
128 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-129: calc(
129 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-130: calc(
130 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-131: calc(
131 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-132: calc(
132 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-133: calc(
133 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-134: calc(
134 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-135: calc(
135 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-136: calc(
136 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-137: calc(
137 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-138: calc(
138 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-139: calc(
139 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-140: calc(
140 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-141: calc(
141 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-142: calc(
142 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-143: calc(
143 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-144: calc(
144 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-145: calc(
145 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-146: calc(
146 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-147: calc(
147 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-148: calc(
148 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-149: calc(
149 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-150: calc(
150 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-151: calc(
151 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-152: calc(
152 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-153: calc(
153 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-154: calc(
154 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-155: calc(
155 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-156: calc(
156 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-157: calc(
157 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-158: calc(
158 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-159: calc(
159 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-160: calc(
160 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-161: calc(
161 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-162: calc(
162 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-163: calc(
163 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-164: calc(
164 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-165: calc(
165 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-166: calc(
166 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-167: calc(
167 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-168: calc(
168 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-169: calc(
169 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-170: calc(
170 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-171: calc(
171 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-172: calc(
172 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-173: calc(
173 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-174: calc(
174 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-175: calc(
175 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-176: calc(
176 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-177: calc(
177 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-178: calc(
178 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-179: calc(
179 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-180: calc(
180 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-181: calc(
181 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-182: calc(
182 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-183: calc(
183 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-184: calc(
184 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-185: calc(
185 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-186: calc(
186 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-187: calc(
187 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-188: calc(
188 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-189: calc(
189 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-190: calc(
190 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-191: calc(
191 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-192: calc(
192 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-193: calc(
193 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-194: calc(
194 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-195: calc(
195 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-196: calc(
196 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-197: calc(
197 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-198: calc(
198 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-199: calc(
199 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--sizing-200: calc(
200 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
);
--color-bg: rgb(97.488% 97.871% 100%);
--color-bg-accent: rgb(33.333% 23.922% 91.373%);
--color-bg-accent-hover: rgb(38.033% 31.188% 98.353%);

74
app/client/packages/design-system/theming/src/token/src/types.ts
View File

@ -1,5 +1,4 @@
import type { ColorMode, ColorTypes } from "../../color";
import type { FontFamily, Typography } from "../../typography";
export type ThemeToken = {
[key in TokenType]?: { [key: string]: Token };
@ -39,3 +38,76 @@ export interface TokenSource {
export interface TokenObj {
[key: string]: string | number;
}
import arial from "@capsizecss/metrics/arial";
import inter from "@capsizecss/metrics/inter";
import rubik from "@capsizecss/metrics/rubik";
import roboto from "@capsizecss/metrics/roboto";
import ubuntu from "@capsizecss/metrics/ubuntu";
import poppins from "@capsizecss/metrics/poppins";
import segoeUI from "@capsizecss/metrics/segoeUI";
import openSans from "@capsizecss/metrics/openSans";
import notoSans from "@capsizecss/metrics/notoSans";
import montserrat from "@capsizecss/metrics/montserrat";
import nunitoSans from "@capsizecss/metrics/nunitoSans12pt";
import appleSystem from "@capsizecss/metrics/appleSystem";
import BlinkMacSystemFont from "@capsizecss/metrics/blinkMacSystemFont";
export const FONT_METRICS = {
Poppins: poppins,
Inter: inter,
Roboto: roboto,
Rubik: rubik,
Ubuntu: ubuntu,
"Noto Sans": notoSans,
"Open Sans": openSans,
Montserrat: montserrat,
"Nunito Sans": nunitoSans,
Arial: arial,
"-apple-system": appleSystem,
BlinkMacSystemFont: BlinkMacSystemFont,
"Segoe UI": segoeUI,
} as const;
// we use "as const" here because we need to iterate by variants
export const TYPOGRAPHY_VARIANTS = {
footnote: "footnote",
body: "body",
caption: "caption",
subtitle: "subtitle",
title: "title",
heading: "heading",
} as const;
export const TYPOGRAPHY_FONT_WEIGHTS = {
100: 100,
200: 200,
300: 300,
400: 400,
500: 500,
600: 600,
700: 700,
800: 800,
900: 900,
} as const;
export type FontFamily = keyof typeof FONT_METRICS | "System Default";
export interface TypographyVariantMetric {
fontSize: string;
lineHeight: string;
before: {
content: string;
marginBottom: string;
display: string;
};
after: {
content: string;
marginTop: string;
display: string;
};
}
export type Typography = {
[key in keyof typeof TYPOGRAPHY_VARIANTS]: TypographyVariantMetric;
};

2
app/client/packages/design-system/theming/src/typography/src/index.ts
View File

@ -1,2 +0,0 @@
export * from "./typography";
export * from "./types";

63
app/client/packages/design-system/theming/src/typography/src/types.ts
View File

@ -1,63 +0,0 @@
import arial from "@capsizecss/metrics/arial";
import inter from "@capsizecss/metrics/inter";
import rubik from "@capsizecss/metrics/rubik";
import roboto from "@capsizecss/metrics/roboto";
import ubuntu from "@capsizecss/metrics/ubuntu";
import poppins from "@capsizecss/metrics/poppins";
import segoeUI from "@capsizecss/metrics/segoeUI";
import openSans from "@capsizecss/metrics/openSans";
import notoSans from "@capsizecss/metrics/notoSans";
import montserrat from "@capsizecss/metrics/montserrat";
import nunitoSans from "@capsizecss/metrics/nunitoSans12pt";
import appleSystem from "@capsizecss/metrics/appleSystem";
import BlinkMacSystemFont from "@capsizecss/metrics/blinkMacSystemFont";
export const FONT_METRICS = {
Poppins: poppins,
Inter: inter,
Roboto: roboto,
Rubik: rubik,
Ubuntu: ubuntu,
"Noto Sans": notoSans,
"Open Sans": openSans,
Montserrat: montserrat,
"Nunito Sans": nunitoSans,
Arial: arial,
"-apple-system": appleSystem,
BlinkMacSystemFont: BlinkMacSystemFont,
"Segoe UI": segoeUI,
} as const;
// we use "as const" here because we need to iterate by variants
export const TYPOGRAPHY_VARIANTS = {
footnote: "footnote",
body: "body",
caption: "caption",
subtitle: "subtitle",
title: "title",
heading: "heading",
} as const;
export const TYPOGRAPHY_FONT_WEIGHTS = {
100: 100,
200: 200,
300: 300,
400: 400,
500: 500,
600: 600,
700: 700,
800: 800,
900: 900,
} as const;
export type FontFamily = keyof typeof FONT_METRICS | "System Default";
export interface TypographyVariantMetric {
capHeight: number;
lineGap: number;
fontFamily?: FontFamily;
}
export type Typography = {
[key in keyof typeof TYPOGRAPHY_VARIANTS]: TypographyVariantMetric;
};

66
app/client/packages/design-system/theming/src/typography/src/typography.ts
View File

@ -1,66 +0,0 @@
import { createFontStack, createStyleString } from "@capsizecss/core";
import { FONT_METRICS, TYPOGRAPHY_VARIANTS } from "./types";
import roboto from "@capsizecss/metrics/roboto";
import ubuntu from "@capsizecss/metrics/ubuntu";
import segoeUI from "@capsizecss/metrics/segoeUI";
import appleSystem from "@capsizecss/metrics/appleSystem";
import BlinkMacSystemFont from "@capsizecss/metrics/blinkMacSystemFont";
import type { FontFamily, Typography } from "./types";
export const getTypographyClassName = (
key: keyof typeof TYPOGRAPHY_VARIANTS,
) => {
return `wds-${TYPOGRAPHY_VARIANTS[key]}-text`;
};
export const createTypographyStringMap = (
typography?: Typography,
fontFamily?: FontFamily,
) => {
if (typography == null) return;
return Object.keys(typography).reduce((prev, current) => {
const { capHeight, lineGap } = typography[current as keyof Typography];
return (
prev +
`${createTypographyString(
capHeight,
lineGap,
current as keyof typeof TYPOGRAPHY_VARIANTS,
fontFamily,
)}`
);
}, "");
};
export const createTypographyString = (
capHeight: number,
lineGap: number,
typographyVariant: keyof typeof TYPOGRAPHY_VARIANTS,
fontFamily?: FontFamily,
) => {
// if there is no font family, use the default font stack
if (!fontFamily || fontFamily === "System Default") {
return createStyleString(getTypographyClassName(typographyVariant), {
capHeight,
lineGap,
fontMetrics: appleSystem,
});
}
return createStyleString(getTypographyClassName(typographyVariant), {
capHeight,
lineGap,
fontMetrics: FONT_METRICS[fontFamily],
});
};
export const createGlobalFontStack = () => {
return createFontStack(
[appleSystem, BlinkMacSystemFont, segoeUI, roboto, ubuntu],
{
fontFaceFormat: "styleString",
},
);
};

7
app/client/packages/design-system/theming/src/utils/getTypographyClassName.ts Normal file
View File

@ -0,0 +1,7 @@
import { TYPOGRAPHY_VARIANTS } from "../token";
export const getTypographyClassName = (
key: keyof typeof TYPOGRAPHY_VARIANTS,
) => {
return `wds-${TYPOGRAPHY_VARIANTS[key]}-text`;
};

15
app/client/packages/design-system/theming/src/utils/globalFontStack.ts Normal file
View File

@ -0,0 +1,15 @@
import { createFontStack } from "@capsizecss/core";
import appleSystem from "@capsizecss/metrics/appleSystem";
import BlinkMacSystemFont from "@capsizecss/metrics/blinkMacSystemFont";
import roboto from "@capsizecss/metrics/roboto";
import segoeUI from "@capsizecss/metrics/segoeUI";
import ubuntu from "@capsizecss/metrics/ubuntu";
export const globalFontStack = () => {
return createFontStack(
[appleSystem, BlinkMacSystemFont, segoeUI, roboto, ubuntu],
{
fontFaceFormat: "styleString",
},
);
};

2
app/client/packages/design-system/theming/src/utils/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { getTypographyClassName } from "./getTypographyClassName";
export { cssRule } from "./cssRule";

11
app/client/packages/design-system/theming/src/utils/tokensToCss.ts
View File

@ -1,12 +1,9 @@
import fs from "fs";
import {
TokensAccessor,
defaultTokens,
getFluidSizing,
getFluidSpacing,
} from "../token";
import type { TokenSource } from "../token";
import { TokensAccessor, defaultTokens } from "../token";
import { cssRule } from "./cssRule";
import { getFluidSizing, getFluidSpacing } from "../hooks";
import type { TokenSource } from "../token";
const { fluid, ...restDefaultTokens } = defaultTokens;
const { innerSpacing, maxVw, minVw, outerSpacing, sizing } = fluid;

41
app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx
View File

@ -1,3 +1,4 @@
import { useRef, useState } from "react";
import * as React from "react";
import {
Button,
@ -19,6 +20,7 @@ import {
ModalHeader,
ModalBody,
ModalFooter,
ModalContent,
} from "@design-system/widgets";
// This component is used only for testing purpose and is not used in the prod
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
@ -36,6 +38,9 @@ export const ComplexForm = () => {
);
};
const [isModalOpen, setModalOpen] = useState(false);
const submitRef = useRef(null);
return (
<Flex direction="column" gap="spacing-6">
<Flex direction="column" gap="spacing-3">
@ -92,19 +97,29 @@ export const ComplexForm = () => {
If you cancel, you will lose your order
</TooltipContent>
</TooltipRoot>
<Modal size="small">
<Button>Ok</Button>
<ModalHeader title="Confirmation" />
<ModalBody>
<Text>
<ul>
<li>Hamburger — XL</li>
<li>French fries — L</li>
<li>Coca-Cola — S</li>
</ul>
</Text>
</ModalBody>
<ModalFooter onSubmit={fakeSubmit} submitText="Confirm" />
<Button onPress={() => setModalOpen(!isModalOpen)} ref={submitRef}>
Ok
</Button>
<Modal
initialFocus={2}
isOpen={isModalOpen}
setOpen={setModalOpen}
size="small"
triggerRef={submitRef}
>
<ModalContent>
<ModalHeader title="Confirmation" />
<ModalBody>
<Text>
<ul>
<li>Hamburger — XL</li>
<li>French fries — L</li>
<li>Coca-Cola — S</li>
</ul>
</Text>
</ModalBody>
<ModalFooter onSubmit={fakeSubmit} submitText="Confirm" />
</ModalContent>
</Modal>
</Flex>
</Flex>

44
app/client/yarn.lock
View File

@ -3024,6 +3024,8 @@ __metadata:
"@capsizecss/core": ^3.1.1
"@capsizecss/metrics": ^1.2.0
"@emotion/sheet": ^1.2.2
"@react-hook/debounce": ^4.0.0
"@react-hook/resize-observer": ^1.2.6
lodash: "*"
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
@ -6820,6 +6822,48 @@ __metadata:
languageName: node
linkType: hard
"@react-hook/debounce@npm:^4.0.0":
version: 4.0.0
resolution: "@react-hook/debounce@npm:4.0.0"
dependencies:
"@react-hook/latest": ^1.0.2
peerDependencies:
react: ">=16.8"
checksum: 199f944fd905b6cbeb0665e94ce49805f6a0a6f758f35862d784b87dd5c52760dcf2ce9a66abc5698f5b1418be387df5452a703812e9362d1dda0f9718a5d01d
languageName: node
linkType: hard
"@react-hook/latest@npm:^1.0.2":
version: 1.0.3
resolution: "@react-hook/latest@npm:1.0.3"
peerDependencies:
react: ">=16.8"
checksum: 2408c9cd35c5cfa7697b6da3bc5eebef254a932ade70955074c474f23be7dd3e2f81bbba12edcc9208bd0f89c6ed366d6b11d4f6d7b1052877a0bac8f74afad4
languageName: node
linkType: hard
"@react-hook/passive-layout-effect@npm:^1.2.0":
version: 1.2.1
resolution: "@react-hook/passive-layout-effect@npm:1.2.1"
peerDependencies:
react: ">=16.8"
checksum: 217cb8aa90fb8e677672319a9a466d7752890cf4357c76df000b207696e9cc717cf2ee88080671cc9dae238a82f92093ab4f61ab2f6032d2a8db958fc7d99b5d
languageName: node
linkType: hard
"@react-hook/resize-observer@npm:^1.2.6":
version: 1.2.6
resolution: "@react-hook/resize-observer@npm:1.2.6"
dependencies:
"@juggle/resize-observer": ^3.3.1
"@react-hook/latest": ^1.0.2
"@react-hook/passive-layout-effect": ^1.2.0
peerDependencies:
react: ">=16.8"
checksum: d2ff6c50e847514acad774f2a4010fb1e6782a231ae00c9507c1a98028b3a26399e35f094170918f11b1eeafc581d60da7641bc178d496abf00c56eee8a6b36b
languageName: node
linkType: hard
"@react-spectrum/utils@npm:^3.9.0":
version: 3.9.1
resolution: "@react-spectrum/utils@npm:3.9.1"