From 0c345d8404bd0a6210371b2d73e107cd67ca6284 Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Wed, 6 Dec 2023 10:38:36 +0300 Subject: [PATCH] fix: calculate fluid tokens based on provider width (#29316) ## 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 ## 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. --------- Co-authored-by: Aishwarya UR --- .../design-system/theming/package.json | 2 + .../src/{typography => hooks}/index.ts | 0 .../fluid => hooks/src}/calculateScales.ts | 0 .../theming/src/hooks/src/index.ts | 6 + .../{token/src/fluid => hooks/src}/types.ts | 4 - .../theming/src/hooks/src/useCssTokens.tsx | 103 ++ .../src/useFluidSizing.tsx} | 24 +- .../theming/src/hooks/src/useFluidSpacing.tsx | 93 ++ .../src/hooks/src/useFluidTypography.tsx | 117 +++ .../src/{theme => hooks}/src/useTheme.tsx | 67 +- .../design-system/theming/src/index.ts | 3 +- .../theming/src/theme/src/ThemeProvider.tsx | 65 +- .../theming/src/theme/src/index.ts | 1 - .../theming/src/theme/src/types.ts | 15 +- .../theming/src/token/src/TokensAccessor.ts | 10 +- .../token/src/fluid/calculateFluidScales.ts | 16 - .../src/token/src/fluid/getFluidSpacing.ts | 45 - .../src/token/src/fluid/getFluidTypography.ts | 47 - .../theming/src/token/src/fluid/index.ts | 4 - .../src/token/src/fluid/useFluidTokens.ts | 92 -- .../theming/src/token/src/index.ts | 1 - .../theming/src/token/src/styles.module.css | 896 +++++++++++++----- .../theming/src/token/src/types.ts | 74 +- .../theming/src/typography/src/index.ts | 2 - .../theming/src/typography/src/types.ts | 63 -- .../theming/src/typography/src/typography.ts | 66 -- .../src/utils/getTypographyClassName.ts | 7 + .../theming/src/utils/globalFontStack.ts | 15 + .../design-system/theming/src/utils/index.ts | 2 + .../theming/src/utils/tokensToCss.ts | 11 +- .../widgets/src/testing/ComplexForm.tsx | 41 +- app/client/yarn.lock | 44 + 32 files changed, 1278 insertions(+), 658 deletions(-) rename app/client/packages/design-system/theming/src/{typography => hooks}/index.ts (100%) rename app/client/packages/design-system/theming/src/{token/src/fluid => hooks/src}/calculateScales.ts (100%) create mode 100644 app/client/packages/design-system/theming/src/hooks/src/index.ts rename app/client/packages/design-system/theming/src/{token/src/fluid => hooks/src}/types.ts (90%) create mode 100644 app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx rename app/client/packages/design-system/theming/src/{token/src/fluid/getFluidSizing.ts => hooks/src/useFluidSizing.tsx} (61%) create mode 100644 app/client/packages/design-system/theming/src/hooks/src/useFluidSpacing.tsx create mode 100644 app/client/packages/design-system/theming/src/hooks/src/useFluidTypography.tsx rename app/client/packages/design-system/theming/src/{theme => hooks}/src/useTheme.tsx (73%) delete mode 100644 app/client/packages/design-system/theming/src/token/src/fluid/calculateFluidScales.ts delete mode 100644 app/client/packages/design-system/theming/src/token/src/fluid/getFluidSpacing.ts delete mode 100644 app/client/packages/design-system/theming/src/token/src/fluid/getFluidTypography.ts delete mode 100644 app/client/packages/design-system/theming/src/token/src/fluid/index.ts delete mode 100644 app/client/packages/design-system/theming/src/token/src/fluid/useFluidTokens.ts delete mode 100644 app/client/packages/design-system/theming/src/typography/src/index.ts delete mode 100644 app/client/packages/design-system/theming/src/typography/src/types.ts delete mode 100644 app/client/packages/design-system/theming/src/typography/src/typography.ts create mode 100644 app/client/packages/design-system/theming/src/utils/getTypographyClassName.ts create mode 100644 app/client/packages/design-system/theming/src/utils/globalFontStack.ts create mode 100644 app/client/packages/design-system/theming/src/utils/index.ts diff --git a/app/client/packages/design-system/theming/package.json b/app/client/packages/design-system/theming/package.json index 93f303b8f0..70af9f1c13 100644 --- a/app/client/packages/design-system/theming/package.json +++ b/app/client/packages/design-system/theming/package.json @@ -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": "*" } } diff --git a/app/client/packages/design-system/theming/src/typography/index.ts b/app/client/packages/design-system/theming/src/hooks/index.ts similarity index 100% rename from app/client/packages/design-system/theming/src/typography/index.ts rename to app/client/packages/design-system/theming/src/hooks/index.ts diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/calculateScales.ts b/app/client/packages/design-system/theming/src/hooks/src/calculateScales.ts similarity index 100% rename from app/client/packages/design-system/theming/src/token/src/fluid/calculateScales.ts rename to app/client/packages/design-system/theming/src/hooks/src/calculateScales.ts diff --git a/app/client/packages/design-system/theming/src/hooks/src/index.ts b/app/client/packages/design-system/theming/src/hooks/src/index.ts new file mode 100644 index 0000000000..0899a81d12 --- /dev/null +++ b/app/client/packages/design-system/theming/src/hooks/src/index.ts @@ -0,0 +1,6 @@ +export * from "./useFluidSizing"; +export * from "./useFluidSpacing"; +export * from "./useFluidTypography"; +export * from "./useTheme"; +export * from "./useCssTokens"; +export * from "./types"; diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/types.ts b/app/client/packages/design-system/theming/src/hooks/src/types.ts similarity index 90% rename from app/client/packages/design-system/theming/src/token/src/fluid/types.ts rename to app/client/packages/design-system/theming/src/hooks/src/types.ts index 0b21e71bbe..40142d1409 100644 --- a/app/client/packages/design-system/theming/src/token/src/fluid/types.ts +++ b/app/client/packages/design-system/theming/src/hooks/src/types.ts @@ -26,7 +26,3 @@ export interface Scale { v: number; r: number; } - -export interface FluidScale { - fluid: number; -} diff --git a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx new file mode 100644 index 0000000000..c290e6ae13 --- /dev/null +++ b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx @@ -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(); + const [widthClassName, setWidthClassName] = useState(); + const [fontFamilyClassName, setFontFamilyClassName] = useState(); + const [colorModeClassName, setColorModeClassName] = useState(); + const [providerClassName, setProviderClassName] = useState(); + + 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, + }; +} diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/getFluidSizing.ts b/app/client/packages/design-system/theming/src/hooks/src/useFluidSizing.tsx similarity index 61% rename from app/client/packages/design-system/theming/src/token/src/fluid/getFluidSizing.ts rename to app/client/packages/design-system/theming/src/hooks/src/useFluidSizing.tsx index 62451c2522..8d7dd54be5 100644 --- a/app/client/packages/design-system/theming/src/token/src/fluid/getFluidSizing.ts +++ b/app/client/packages/design-system/theming/src/hooks/src/useFluidSizing.tsx @@ -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(); + + useEffect(() => { + setSizing( + getFluidSizing(maxVw, minVw, sizingConfig, userDensity, userSizing), + ); + }, [userDensity, userSizing, maxVw, minVw, sizingConfig]); + + return { + sizing, + }; +}; diff --git a/app/client/packages/design-system/theming/src/hooks/src/useFluidSpacing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useFluidSpacing.tsx new file mode 100644 index 0000000000..53fbab5e72 --- /dev/null +++ b/app/client/packages/design-system/theming/src/hooks/src/useFluidSpacing.tsx @@ -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(); + const [innerSpacing, setInnerSpacing] = useState(); + + 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, + }; +}; diff --git a/app/client/packages/design-system/theming/src/hooks/src/useFluidTypography.tsx b/app/client/packages/design-system/theming/src/hooks/src/useFluidTypography.tsx new file mode 100644 index 0000000000..c20484acae --- /dev/null +++ b/app/client/packages/design-system/theming/src/hooks/src/useFluidTypography.tsx @@ -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(null); + + useEffect(() => { + setTypography( + getFluidTypography( + maxVw, + minVw, + typographyConfig, + userDensity, + userSizing, + fontFamily, + ), + ); + }, [userDensity, userSizing, fontFamily, maxVw, minVw, typographyConfig]); + + return { + typography, + }; +}; diff --git a/app/client/packages/design-system/theming/src/theme/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx similarity index 73% rename from app/client/packages/design-system/theming/src/theme/src/useTheme.tsx rename to app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index b66144b08f..c433b8ccb2 100644 --- a/app/client/packages/design-system/theming/src/theme/src/useTheme.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx @@ -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 }; } diff --git a/app/client/packages/design-system/theming/src/index.ts b/app/client/packages/design-system/theming/src/index.ts index 7cd3e510bf..4a8e289275 100644 --- a/app/client/packages/design-system/theming/src/index.ts +++ b/app/client/packages/design-system/theming/src/index.ts @@ -1,4 +1,5 @@ -export * from "./typography"; export * from "./token"; export * from "./theme"; export * from "./color"; +export * from "./utils"; +export * from "./hooks"; diff --git a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx index ac368c7c18..07421f24a9 100644 --- a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx +++ b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx @@ -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(null, 100); + const providerRef = useRef(null); + + useResizeObserver(providerRef as RefObject, (entry) => + setWidth(entry.contentRect.width), + ); + + const { + colorModeClassName, + fontFamilyClassName, + providerClassName, + typographyClassname, + widthClassName, + } = useCssTokens({ ...theme, width }); return (
{children} diff --git a/app/client/packages/design-system/theming/src/theme/src/index.ts b/app/client/packages/design-system/theming/src/theme/src/index.ts index 594fd26808..9d681df8bc 100644 --- a/app/client/packages/design-system/theming/src/theme/src/index.ts +++ b/app/client/packages/design-system/theming/src/theme/src/index.ts @@ -1,4 +1,3 @@ export * from "./ThemeContext"; export * from "./ThemeProvider"; export * from "./types"; -export * from "./useTheme"; diff --git a/app/client/packages/design-system/theming/src/theme/src/types.ts b/app/client/packages/design-system/theming/src/theme/src/types.ts index 1d1743c98d..9d472b8599 100644 --- a/app/client/packages/design-system/theming/src/theme/src/types.ts +++ b/app/client/packages/design-system/theming/src/theme/src/types.ts @@ -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; -} diff --git a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts index 236df96c27..7694683155 100644 --- a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts +++ b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts @@ -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; diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/calculateFluidScales.ts b/app/client/packages/design-system/theming/src/token/src/fluid/calculateFluidScales.ts deleted file mode 100644 index 1f39f253a9..0000000000 --- a/app/client/packages/design-system/theming/src/token/src/fluid/calculateFluidScales.ts +++ /dev/null @@ -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; -}; diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/getFluidSpacing.ts b/app/client/packages/design-system/theming/src/token/src/fluid/getFluidSpacing.ts deleted file mode 100644 index 65c0635d9a..0000000000 --- a/app/client/packages/design-system/theming/src/token/src/fluid/getFluidSpacing.ts +++ /dev/null @@ -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, - }, - ); -}; diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/getFluidTypography.ts b/app/client/packages/design-system/theming/src/token/src/fluid/getFluidTypography.ts deleted file mode 100644 index e66b71bea8..0000000000 --- a/app/client/packages/design-system/theming/src/token/src/fluid/getFluidTypography.ts +++ /dev/null @@ -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); -}; diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/index.ts b/app/client/packages/design-system/theming/src/token/src/fluid/index.ts deleted file mode 100644 index 9eef79acb0..0000000000 --- a/app/client/packages/design-system/theming/src/token/src/fluid/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from "./useFluidTokens"; -export * from "./getFluidSizing"; -export * from "./getFluidSpacing"; -export * from "./getFluidTypography"; diff --git a/app/client/packages/design-system/theming/src/token/src/fluid/useFluidTokens.ts b/app/client/packages/design-system/theming/src/token/src/fluid/useFluidTokens.ts deleted file mode 100644 index 6db629fd08..0000000000 --- a/app/client/packages/design-system/theming/src/token/src/fluid/useFluidTokens.ts +++ /dev/null @@ -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(); - const [sizing, setSizing] = useState(); - const [outerSpacing, setOuterSpacing] = useState(); - const [innerSpacing, setInnerSpacing] = useState(); - - 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, - }; -}; diff --git a/app/client/packages/design-system/theming/src/token/src/index.ts b/app/client/packages/design-system/theming/src/token/src/index.ts index 7db55b7e36..4b37e79abb 100644 --- a/app/client/packages/design-system/theming/src/token/src/index.ts +++ b/app/client/packages/design-system/theming/src/token/src/index.ts @@ -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"; diff --git a/app/client/packages/design-system/theming/src/token/src/styles.module.css b/app/client/packages/design-system/theming/src/token/src/styles.module.css index 09145568de..1549eeffe7 100644 --- a/app/client/packages/design-system/theming/src/token/src/styles.module.css +++ b/app/client/packages/design-system/theming/src/token/src/styles.module.css @@ -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%); diff --git a/app/client/packages/design-system/theming/src/token/src/types.ts b/app/client/packages/design-system/theming/src/token/src/types.ts index 3a43976c35..9621bff800 100644 --- a/app/client/packages/design-system/theming/src/token/src/types.ts +++ b/app/client/packages/design-system/theming/src/token/src/types.ts @@ -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; +}; diff --git a/app/client/packages/design-system/theming/src/typography/src/index.ts b/app/client/packages/design-system/theming/src/typography/src/index.ts deleted file mode 100644 index 6e90b17bc0..0000000000 --- a/app/client/packages/design-system/theming/src/typography/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./typography"; -export * from "./types"; diff --git a/app/client/packages/design-system/theming/src/typography/src/types.ts b/app/client/packages/design-system/theming/src/typography/src/types.ts deleted file mode 100644 index c8f18bd5d0..0000000000 --- a/app/client/packages/design-system/theming/src/typography/src/types.ts +++ /dev/null @@ -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; -}; diff --git a/app/client/packages/design-system/theming/src/typography/src/typography.ts b/app/client/packages/design-system/theming/src/typography/src/typography.ts deleted file mode 100644 index e9cc8539c5..0000000000 --- a/app/client/packages/design-system/theming/src/typography/src/typography.ts +++ /dev/null @@ -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", - }, - ); -}; diff --git a/app/client/packages/design-system/theming/src/utils/getTypographyClassName.ts b/app/client/packages/design-system/theming/src/utils/getTypographyClassName.ts new file mode 100644 index 0000000000..ee1377a80f --- /dev/null +++ b/app/client/packages/design-system/theming/src/utils/getTypographyClassName.ts @@ -0,0 +1,7 @@ +import { TYPOGRAPHY_VARIANTS } from "../token"; + +export const getTypographyClassName = ( + key: keyof typeof TYPOGRAPHY_VARIANTS, +) => { + return `wds-${TYPOGRAPHY_VARIANTS[key]}-text`; +}; diff --git a/app/client/packages/design-system/theming/src/utils/globalFontStack.ts b/app/client/packages/design-system/theming/src/utils/globalFontStack.ts new file mode 100644 index 0000000000..b0cc25a478 --- /dev/null +++ b/app/client/packages/design-system/theming/src/utils/globalFontStack.ts @@ -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", + }, + ); +}; diff --git a/app/client/packages/design-system/theming/src/utils/index.ts b/app/client/packages/design-system/theming/src/utils/index.ts new file mode 100644 index 0000000000..3ec36099bf --- /dev/null +++ b/app/client/packages/design-system/theming/src/utils/index.ts @@ -0,0 +1,2 @@ +export { getTypographyClassName } from "./getTypographyClassName"; +export { cssRule } from "./cssRule"; diff --git a/app/client/packages/design-system/theming/src/utils/tokensToCss.ts b/app/client/packages/design-system/theming/src/utils/tokensToCss.ts index 0e0793a2d4..4cbfd3f9f3 100644 --- a/app/client/packages/design-system/theming/src/utils/tokensToCss.ts +++ b/app/client/packages/design-system/theming/src/utils/tokensToCss.ts @@ -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; diff --git a/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx b/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx index 918cf86f01..83fc9ff3eb 100644 --- a/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx +++ b/app/client/packages/design-system/widgets/src/testing/ComplexForm.tsx @@ -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 ( @@ -92,19 +97,29 @@ export const ComplexForm = () => { If you cancel, you will lose your order - - - - - -
    -
  • Hamburger — XL
    • -
  • French fries — L
    • -
  • Coca-Cola — S
    • -
- - - + + + + + + +
    +
  • Hamburger — XL
    • +
  • French fries — L
    • +
  • Coca-Cola — S
    • +
+ + + + diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 62330cb7e2..220744d07d 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -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"