Initial commit
This commit is contained in:
15
src/providers/themeProvider/config/background.ts
Normal file
15
src/providers/themeProvider/config/background.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import CircleGradientBackground from "@/components/background/CircleGradientBackground";
|
||||
import AuroraBackground from "@/components/background/AuroraBackground";
|
||||
import FloatingGradientBackground from "@/components/background/floatingGradientBackground/FloatingGradientBackground";
|
||||
import type { BackgroundType } from "./types";
|
||||
|
||||
interface BackgroundComponentProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const backgroundComponents: Record<BackgroundType, React.ComponentType<BackgroundComponentProps> | null> = {
|
||||
none: null,
|
||||
circleGradient: CircleGradientBackground,
|
||||
aurora: AuroraBackground,
|
||||
floatingGradient: FloatingGradientBackground,
|
||||
};
|
||||
44
src/providers/themeProvider/config/baseVw.ts
Normal file
44
src/providers/themeProvider/config/baseVw.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import type { SizingPreset } from "./types";
|
||||
|
||||
export const baseVwMap: Record<SizingPreset, { desktop: string; mobile: string }> = {
|
||||
medium: {
|
||||
desktop: "clamp(0.5rem, 0.8vw, 1rem)",
|
||||
mobile: "3vw",
|
||||
},
|
||||
mediumLarge: {
|
||||
desktop: "clamp(0.5rem, 0.84vw, 1rem)",
|
||||
mobile: "3.15vw",
|
||||
},
|
||||
largeSmall: {
|
||||
desktop: "clamp(0.5rem, 0.88vw, 1rem)",
|
||||
mobile: "3.30vw",
|
||||
},
|
||||
large: {
|
||||
desktop: "clamp(0.5rem, 0.92vw, 1rem)",
|
||||
mobile: "3.45vw",
|
||||
},
|
||||
mediumSizeLargeTitles: {
|
||||
desktop: "clamp(0.5rem, 0.8vw, 1rem)",
|
||||
mobile: "3vw",
|
||||
},
|
||||
largeSizeMediumTitles: {
|
||||
desktop: "clamp(0.5rem, 0.92vw, 1rem)",
|
||||
mobile: "3.45vw",
|
||||
},
|
||||
mediumLargeSizeLargeTitles: {
|
||||
desktop: "clamp(0.5rem, 0.84vw, 1rem)",
|
||||
mobile: "3.15vw",
|
||||
},
|
||||
largeSmallSizeLargeTitles: {
|
||||
desktop: "clamp(0.5rem, 0.88vw, 1rem)",
|
||||
mobile: "3.30vw",
|
||||
},
|
||||
mediumLargeSizeMediumTitles: {
|
||||
desktop: "clamp(0.5rem, 0.84vw, 1rem)",
|
||||
mobile: "3.15vw",
|
||||
},
|
||||
largeSmallSizeMediumTitles: {
|
||||
desktop: "clamp(0.5rem, 0.88vw, 1rem)",
|
||||
mobile: "3.30vw",
|
||||
},
|
||||
};
|
||||
15
src/providers/themeProvider/config/borderRadius.ts
Normal file
15
src/providers/themeProvider/config/borderRadius.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { BorderRadiusPreset } from "./types";
|
||||
|
||||
export const borderRadiusMap: Record<BorderRadiusPreset, string> = {
|
||||
sharp: "0",
|
||||
rounded: "var(--radius)",
|
||||
soft: "var(--radius-lg)",
|
||||
pill: "var(--radius-full)",
|
||||
};
|
||||
|
||||
export const borderRadiusCappedMap: Record<BorderRadiusPreset, string> = {
|
||||
sharp: "0",
|
||||
rounded: "var(--radius)",
|
||||
soft: "var(--radius-lg)",
|
||||
pill: "var(--radius-xl)", // Capped at xl instead of full
|
||||
};
|
||||
7
src/providers/themeProvider/config/constants.ts
Normal file
7
src/providers/themeProvider/config/constants.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
// Re-export all config modules for backward compatibility
|
||||
export { borderRadiusMap, borderRadiusCappedMap } from "./borderRadius";
|
||||
export { contentWidthMap, expandedContentWidthMap } from "./contentWidth";
|
||||
export { textSizingMap, type TextSizingValues } from "./textSizing";
|
||||
export { baseVwMap } from "./baseVw";
|
||||
export { backgroundComponents } from "./background";
|
||||
export { headingFontWeightMap, type TextboxLayout, type InvertedBackground } from "./shared";
|
||||
82
src/providers/themeProvider/config/contentWidth.ts
Normal file
82
src/providers/themeProvider/config/contentWidth.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import type { ContentWidthPreset } from "./types";
|
||||
|
||||
export const contentWidthMap: Record<ContentWidthPreset, { desktop: string; mobile: string }> = {
|
||||
small: {
|
||||
desktop: "clamp(40rem, 70vw, 100rem)",
|
||||
mobile: "80vw",
|
||||
},
|
||||
smallMedium: {
|
||||
desktop: "clamp(40rem, 72.5vw, 100rem)",
|
||||
mobile: "80vw",
|
||||
},
|
||||
compact: {
|
||||
desktop: "clamp(40rem, 75vw, 100rem)",
|
||||
mobile: "80vw",
|
||||
},
|
||||
mediumSmall: {
|
||||
desktop: "clamp(40rem, 77.5vw, 100rem)",
|
||||
mobile: "80vw",
|
||||
},
|
||||
medium: {
|
||||
desktop: "clamp(40rem, 80vw, 100rem)",
|
||||
mobile: "80vw",
|
||||
},
|
||||
mediumLarge: {
|
||||
desktop: "clamp(40rem, 82.5vw, 100rem)",
|
||||
mobile: "85vw",
|
||||
},
|
||||
};
|
||||
|
||||
function calculateExpandedWidth(width: string): string {
|
||||
const clampMatch = width.match(/clamp\(([\d.]+)rem,\s*([\d.]+)vw,\s*([\d.]+)rem\)/);
|
||||
if (clampMatch) {
|
||||
const minRem = clampMatch[1];
|
||||
const vwValue = parseFloat(clampMatch[2]);
|
||||
const maxRem = clampMatch[3];
|
||||
|
||||
const remainingVw = 100 - vwValue;
|
||||
const expandedVw = vwValue + (remainingVw / 2);
|
||||
|
||||
const expandedMin = `calc(${minRem}rem - (${minRem}rem - 100vw) / 2)`;
|
||||
const expandedMax = `calc(${maxRem}rem + (100vw - ${maxRem}rem) / 2)`;
|
||||
|
||||
return `clamp(${expandedMin}, ${expandedVw}vw, ${expandedMax})`;
|
||||
}
|
||||
|
||||
const vwMatch = width.match(/([\d.]+)vw/);
|
||||
if (vwMatch) {
|
||||
const vwValue = parseFloat(vwMatch[1]);
|
||||
const remainingVw = 100 - vwValue;
|
||||
const expandedVw = vwValue + (remainingVw / 2);
|
||||
return `${expandedVw}vw`;
|
||||
}
|
||||
|
||||
return width;
|
||||
}
|
||||
|
||||
export const expandedContentWidthMap: Record<ContentWidthPreset, { desktop: string; mobile: string }> = {
|
||||
small: {
|
||||
desktop: calculateExpandedWidth(contentWidthMap.small.desktop),
|
||||
mobile: calculateExpandedWidth(contentWidthMap.small.mobile),
|
||||
},
|
||||
smallMedium: {
|
||||
desktop: calculateExpandedWidth(contentWidthMap.smallMedium.desktop),
|
||||
mobile: calculateExpandedWidth(contentWidthMap.smallMedium.mobile),
|
||||
},
|
||||
compact: {
|
||||
desktop: calculateExpandedWidth(contentWidthMap.compact.desktop),
|
||||
mobile: calculateExpandedWidth(contentWidthMap.compact.mobile),
|
||||
},
|
||||
mediumSmall: {
|
||||
desktop: calculateExpandedWidth(contentWidthMap.mediumSmall.desktop),
|
||||
mobile: calculateExpandedWidth(contentWidthMap.mediumSmall.mobile),
|
||||
},
|
||||
medium: {
|
||||
desktop: calculateExpandedWidth(contentWidthMap.medium.desktop),
|
||||
mobile: calculateExpandedWidth(contentWidthMap.medium.mobile),
|
||||
},
|
||||
mediumLarge: {
|
||||
desktop: calculateExpandedWidth(contentWidthMap.mediumLarge.desktop),
|
||||
mobile: calculateExpandedWidth(contentWidthMap.mediumLarge.mobile),
|
||||
},
|
||||
};
|
||||
16
src/providers/themeProvider/config/shared.ts
Normal file
16
src/providers/themeProvider/config/shared.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { HeadingFontWeight } from "./types";
|
||||
|
||||
/**
|
||||
* Shared component layout and styling type definitions
|
||||
*/
|
||||
export type TextboxLayout = "default" | "split" | "split-actions" | "split-description" | "inline-image";
|
||||
export type InvertedBackground = "noInvert" | "invertDefault";
|
||||
|
||||
export const headingFontWeightMap: Record<HeadingFontWeight, string> = {
|
||||
light: "300",
|
||||
normal: "400",
|
||||
medium: "500",
|
||||
semibold: "600",
|
||||
bold: "700",
|
||||
extrabold: "800",
|
||||
};
|
||||
385
src/providers/themeProvider/config/textSizing.ts
Normal file
385
src/providers/themeProvider/config/textSizing.ts
Normal file
@@ -0,0 +1,385 @@
|
||||
import type { SizingPreset } from "./types";
|
||||
|
||||
export interface TextSizingValues {
|
||||
text2xs: string;
|
||||
textXs: string;
|
||||
textSm: string;
|
||||
textBase: string;
|
||||
textLg: string;
|
||||
textXl: string;
|
||||
text2xl: string;
|
||||
text3xl: string;
|
||||
text4xl: string;
|
||||
text5xl: string;
|
||||
text6xl: string;
|
||||
text7xl: string;
|
||||
text8xl: string;
|
||||
text9xl: string;
|
||||
}
|
||||
|
||||
export const textSizingMap: Record<SizingPreset, { desktop: TextSizingValues; mobile: TextSizingValues }> = {
|
||||
medium: {
|
||||
desktop: {
|
||||
text2xs: "clamp(0.465rem, 0.62vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.72vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.82vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 0.92vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.1vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.3vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.6vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2vw, 2rem)",
|
||||
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
text2xs: "2.5vw",
|
||||
textXs: "2.75vw",
|
||||
textSm: "3vw",
|
||||
textBase: "3.25vw",
|
||||
textLg: "3.5vw",
|
||||
textXl: "4.25vw",
|
||||
text2xl: "5vw",
|
||||
text3xl: "6vw",
|
||||
text4xl: "7vw",
|
||||
text5xl: "7.5vw",
|
||||
text6xl: "8.5vw",
|
||||
text7xl: "10vw",
|
||||
text8xl: "12vw",
|
||||
text9xl: "14vw",
|
||||
},
|
||||
},
|
||||
mediumLarge: {
|
||||
desktop: {
|
||||
text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.05vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
|
||||
text5xl: "clamp(2.025rem, 2.8875vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.465vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4.2vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 4.725vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 7.35vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
text2xs: "2.625vw",
|
||||
textXs: "2.8875vw",
|
||||
textSm: "3.15vw",
|
||||
textBase: "3.4125vw",
|
||||
textLg: "3.675vw",
|
||||
textXl: "4.4625vw",
|
||||
text2xl: "5.25vw",
|
||||
text3xl: "6.3vw",
|
||||
text4xl: "7.35vw",
|
||||
text5xl: "7.875vw",
|
||||
text6xl: "8.925vw",
|
||||
text7xl: "10.5vw",
|
||||
text8xl: "12.6vw",
|
||||
text9xl: "14.7vw",
|
||||
},
|
||||
},
|
||||
largeSmall: {
|
||||
desktop: {
|
||||
text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.1vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
|
||||
text5xl: "clamp(2.025rem, 3.025vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.63vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4.4vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 4.95vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 7.7vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
text2xs: "2.75vw",
|
||||
textXs: "3.025vw",
|
||||
textSm: "3.3vw",
|
||||
textBase: "3.575vw",
|
||||
textLg: "3.85vw",
|
||||
textXl: "4.675vw",
|
||||
text2xl: "5.5vw",
|
||||
text3xl: "6.6vw",
|
||||
text4xl: "7.7vw",
|
||||
text5xl: "8.25vw",
|
||||
text6xl: "9.35vw",
|
||||
text7xl: "11vw",
|
||||
text8xl: "13.2vw",
|
||||
text9xl: "15.4vw",
|
||||
},
|
||||
},
|
||||
large: {
|
||||
desktop: {
|
||||
text2xs: "clamp(0.465rem, 0.713vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.828vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.943vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 1.058vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.15vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.265vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.495vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.84vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.3vw, 2rem)",
|
||||
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
text2xs: "2.875vw",
|
||||
textXs: "3.1625vw",
|
||||
textSm: "3.45vw",
|
||||
textBase: "3.7375vw",
|
||||
textLg: "4.025vw",
|
||||
textXl: "4.8875vw",
|
||||
text2xl: "5.75vw",
|
||||
text3xl: "6.9vw",
|
||||
text4xl: "8.05vw",
|
||||
text5xl: "8.625vw",
|
||||
text6xl: "9.775vw",
|
||||
text7xl: "11.5vw",
|
||||
text8xl: "13.8vw",
|
||||
text9xl: "16.1vw",
|
||||
},
|
||||
},
|
||||
mediumSizeLargeTitles: {
|
||||
desktop: {
|
||||
// Medium body text sizes: use medium values
|
||||
text2xs: "clamp(0.465rem, 0.62vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.72vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.82vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 0.92vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.1vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.3vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.6vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2vw, 2rem)",
|
||||
// Large title sizes: use large preset values
|
||||
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
// Medium body text sizes: use medium values
|
||||
text2xs: "2.5vw",
|
||||
textXs: "2.75vw",
|
||||
textSm: "3vw",
|
||||
textBase: "3.25vw",
|
||||
textLg: "3.5vw",
|
||||
textXl: "4.25vw",
|
||||
text2xl: "5vw",
|
||||
text3xl: "6vw",
|
||||
text4xl: "7vw",
|
||||
// Large title sizes: use large preset values
|
||||
text5xl: "8.625vw",
|
||||
text6xl: "9.775vw",
|
||||
text7xl: "11.5vw",
|
||||
text8xl: "13.8vw",
|
||||
text9xl: "16.1vw",
|
||||
},
|
||||
},
|
||||
largeSizeMediumTitles: {
|
||||
desktop: {
|
||||
// Large body text sizes: use large values
|
||||
text2xs: "clamp(0.465rem, 0.713vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.828vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.943vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 1.058vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.15vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.265vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.495vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.84vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.3vw, 2rem)",
|
||||
// Medium title sizes: use medium preset values
|
||||
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
// Large body text sizes: use large values
|
||||
text2xs: "2.875vw",
|
||||
textXs: "3.1625vw",
|
||||
textSm: "3.45vw",
|
||||
textBase: "3.7375vw",
|
||||
textLg: "4.025vw",
|
||||
textXl: "4.8875vw",
|
||||
text2xl: "5.75vw",
|
||||
text3xl: "6.9vw",
|
||||
text4xl: "8.05vw",
|
||||
// Medium title sizes: use medium preset values
|
||||
text5xl: "7.5vw",
|
||||
text6xl: "8.5vw",
|
||||
text7xl: "10vw",
|
||||
text8xl: "12vw",
|
||||
text9xl: "14vw",
|
||||
},
|
||||
},
|
||||
mediumLargeSizeLargeTitles: {
|
||||
desktop: {
|
||||
// MediumLarge body text sizes
|
||||
text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.05vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
|
||||
// Large title sizes
|
||||
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
// MediumLarge body text sizes
|
||||
text2xs: "2.625vw",
|
||||
textXs: "2.8875vw",
|
||||
textSm: "3.15vw",
|
||||
textBase: "3.4125vw",
|
||||
textLg: "3.675vw",
|
||||
textXl: "4.4625vw",
|
||||
text2xl: "5.25vw",
|
||||
text3xl: "6.3vw",
|
||||
text4xl: "7.35vw",
|
||||
// Large title sizes
|
||||
text5xl: "8.625vw",
|
||||
text6xl: "9.775vw",
|
||||
text7xl: "11.5vw",
|
||||
text8xl: "13.8vw",
|
||||
text9xl: "16.1vw",
|
||||
},
|
||||
},
|
||||
largeSmallSizeLargeTitles: {
|
||||
desktop: {
|
||||
// LargeSmall body text sizes
|
||||
text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.1vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
|
||||
// Large title sizes
|
||||
text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4.6vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
// LargeSmall body text sizes
|
||||
text2xs: "2.75vw",
|
||||
textXs: "3.025vw",
|
||||
textSm: "3.3vw",
|
||||
textBase: "3.575vw",
|
||||
textLg: "3.85vw",
|
||||
textXl: "4.675vw",
|
||||
text2xl: "5.5vw",
|
||||
text3xl: "6.6vw",
|
||||
text4xl: "7.7vw",
|
||||
// Large title sizes
|
||||
text5xl: "8.625vw",
|
||||
text6xl: "9.775vw",
|
||||
text7xl: "11.5vw",
|
||||
text8xl: "13.8vw",
|
||||
text9xl: "16.1vw",
|
||||
},
|
||||
},
|
||||
mediumLargeSizeMediumTitles: {
|
||||
desktop: {
|
||||
// MediumLarge body text sizes
|
||||
text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.05vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
|
||||
// Medium title sizes
|
||||
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
// MediumLarge body text sizes
|
||||
text2xs: "2.625vw",
|
||||
textXs: "2.8875vw",
|
||||
textSm: "3.15vw",
|
||||
textBase: "3.4125vw",
|
||||
textLg: "3.675vw",
|
||||
textXl: "4.4625vw",
|
||||
text2xl: "5.25vw",
|
||||
text3xl: "6.3vw",
|
||||
text4xl: "7.35vw",
|
||||
// Medium title sizes
|
||||
text5xl: "7.5vw",
|
||||
text6xl: "8.5vw",
|
||||
text7xl: "10vw",
|
||||
text8xl: "12vw",
|
||||
text9xl: "14vw",
|
||||
},
|
||||
},
|
||||
largeSmallSizeMediumTitles: {
|
||||
desktop: {
|
||||
// LargeSmall body text sizes
|
||||
text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
|
||||
textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
|
||||
textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
|
||||
textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
|
||||
textLg: "clamp(0.75rem, 1.1vw, 1rem)",
|
||||
textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
|
||||
text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
|
||||
text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
|
||||
text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
|
||||
// Medium title sizes
|
||||
text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
|
||||
text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
|
||||
text7xl: "clamp(3rem, 4vw, 4rem)",
|
||||
text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
|
||||
text9xl: "clamp(5.25rem, 7vw, 7rem)",
|
||||
},
|
||||
mobile: {
|
||||
// LargeSmall body text sizes
|
||||
text2xs: "2.75vw",
|
||||
textXs: "3.025vw",
|
||||
textSm: "3.3vw",
|
||||
textBase: "3.575vw",
|
||||
textLg: "3.85vw",
|
||||
textXl: "4.675vw",
|
||||
text2xl: "5.5vw",
|
||||
text3xl: "6.6vw",
|
||||
text4xl: "7.7vw",
|
||||
// Medium title sizes
|
||||
text5xl: "7.5vw",
|
||||
text6xl: "8.5vw",
|
||||
text7xl: "10vw",
|
||||
text8xl: "12vw",
|
||||
text9xl: "14vw",
|
||||
},
|
||||
},
|
||||
};
|
||||
43
src/providers/themeProvider/config/types.ts
Normal file
43
src/providers/themeProvider/config/types.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import type { CTAButtonVariant } from "@/components/button/types";
|
||||
import type { AnimationType } from "@/components/text/types";
|
||||
|
||||
export type BorderRadiusPreset = "sharp" | "rounded" | "soft" | "pill";
|
||||
export type ContentWidthPreset = "small" | "smallMedium" | "compact" | "mediumSmall" | "medium" | "mediumLarge";
|
||||
export type SizingPreset = "medium" | "mediumLarge" | "largeSmall" | "large" | "mediumSizeLargeTitles" | "mediumLargeSizeLargeTitles" | "largeSmallSizeLargeTitles" | "largeSizeMediumTitles" | "mediumLargeSizeMediumTitles" | "largeSmallSizeMediumTitles";
|
||||
export type HeadingFontWeight = "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold";
|
||||
export type BackgroundType =
|
||||
| "none"
|
||||
| "circleGradient"
|
||||
| "aurora"
|
||||
| "floatingGradient";
|
||||
|
||||
export type CardStyleVariant = "solid" | "outline" | "elevated" | "gradient-mesh" | "gradient-radial" | "inset" | "glass-elevated" | "glass-depth" | "gradient-bordered" | "layered-gradient" | "soft-shadow" | "subtle-shadow";
|
||||
export type PrimaryButtonStyleVariant = "gradient" | "shadow" | "flat" | "radial-glow" | "diagonal-gradient" | "inset-glow" | "double-inset" | "primary-glow";
|
||||
export type SecondaryButtonStyleVariant = "glass" | "solid" | "layered" | "radial-glow";
|
||||
|
||||
export interface ThemeConfig {
|
||||
defaultButtonVariant: CTAButtonVariant;
|
||||
defaultTextAnimation: AnimationType;
|
||||
borderRadius: BorderRadiusPreset;
|
||||
contentWidth: ContentWidthPreset;
|
||||
sizing: SizingPreset;
|
||||
background: BackgroundType;
|
||||
cardStyle: CardStyleVariant;
|
||||
primaryButtonStyle: PrimaryButtonStyleVariant;
|
||||
secondaryButtonStyle: SecondaryButtonStyleVariant;
|
||||
headingFontWeight: HeadingFontWeight;
|
||||
}
|
||||
|
||||
export interface ThemeProviderProps {
|
||||
children: React.ReactNode;
|
||||
defaultButtonVariant: CTAButtonVariant;
|
||||
defaultTextAnimation: AnimationType;
|
||||
borderRadius: BorderRadiusPreset;
|
||||
contentWidth: ContentWidthPreset;
|
||||
sizing: SizingPreset;
|
||||
background: BackgroundType;
|
||||
cardStyle: CardStyleVariant;
|
||||
primaryButtonStyle: PrimaryButtonStyleVariant;
|
||||
secondaryButtonStyle: SecondaryButtonStyleVariant;
|
||||
headingFontWeight: HeadingFontWeight;
|
||||
}
|
||||
Reference in New Issue
Block a user