Initial commit
This commit is contained in:
23
theme-options/README.md
Normal file
23
theme-options/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Theme Options Reference
|
||||
|
||||
All ThemeProvider configuration options from webild-components-2.
|
||||
|
||||
---
|
||||
|
||||
## Folder Structure
|
||||
|
||||
```
|
||||
theme-options/
|
||||
├── colorThemes.json (32 light + 27 dark themes)
|
||||
├── fontThemes.json (17 single fonts + 7 pairings)
|
||||
├── cards/
|
||||
│ └── card-styles.md (14 variants)
|
||||
├── buttons/
|
||||
│ ├── primary-button-styles.md (15 variants)
|
||||
│ └── secondary-button-styles.md (4 variants)
|
||||
├── typography/
|
||||
│ └── text-sizing.md (10 presets)
|
||||
└── layout/
|
||||
├── content-width.md (6 presets)
|
||||
└── border-radius.md (3 presets)
|
||||
```
|
||||
98
theme-options/buttons/primary-button-styles.md
Normal file
98
theme-options/buttons/primary-button-styles.md
Normal file
@@ -0,0 +1,98 @@
|
||||
# Primary Button Styles
|
||||
|
||||
15 primary button style variants available.
|
||||
|
||||
---
|
||||
|
||||
## gradient
|
||||
|
||||
background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary-cta) 75%, transparent), var(--color-primary-cta));
|
||||
box-shadow: color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
|
||||
|
||||
---
|
||||
|
||||
## shadow
|
||||
|
||||
background: var(--color-primary-cta);
|
||||
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-primary-cta) 40%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## radial-glow
|
||||
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
|
||||
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
|
||||
var(--color-primary-cta);
|
||||
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-primary-cta) 30%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## diagonal-gradient
|
||||
|
||||
background: linear-gradient(to bottom right, var(--color-primary-cta) 0%, color-mix(in srgb, var(--color-primary-cta) 65%, var(--color-foreground)) 100%);
|
||||
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-primary-cta) 30%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## double-inset
|
||||
|
||||
background: var(--color-primary-cta);
|
||||
box-shadow: color-mix(in srgb, var(--color-background) 15%, transparent) 0px 4px 10px 0px inset, color-mix(in srgb, var(--color-background) 15%, transparent) 0px -4px 8px 0px inset;
|
||||
|
||||
---
|
||||
|
||||
## primary-glow
|
||||
|
||||
background: var(--color-primary-cta);
|
||||
box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
|
||||
|
||||
---
|
||||
|
||||
## inset-glow
|
||||
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 65%, var(--color-background)) -35%, var(--color-primary-cta) 65%);
|
||||
box-shadow: 0 10px 18px -7px color-mix(in srgb, var(--color-background) 50%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 15%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## soft-glow
|
||||
|
||||
background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--color-primary-cta) 70%, var(--color-foreground)) 0%, var(--color-primary-cta) 70%);
|
||||
box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary-cta) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## glass-shimmer
|
||||
|
||||
background: linear-gradient(165deg, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 0%, var(--color-primary-cta) 40%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
|
||||
box-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--color-foreground) 25%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--color-background) 15%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-primary-cta) 25%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## lifted
|
||||
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-foreground)) 0%, var(--color-primary-cta) 50%, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-background)) 100%);
|
||||
box-shadow: inset 0 2px 3px 0 color-mix(in srgb, var(--color-foreground) 20%, transparent), inset 0 -2px 3px 0 color-mix(in srgb, var(--color-background) 25%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--color-background) 40%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## depth-layers
|
||||
|
||||
background: var(--color-primary-cta);
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 4px 8px color-mix(in srgb, var(--color-primary-cta) 15%, transparent), 0 8px 16px color-mix(in srgb, var(--color-primary-cta) 10%, transparent), 0 16px 32px color-mix(in srgb, var(--color-primary-cta) 5%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## accent-edge
|
||||
|
||||
background: linear-gradient(180deg, var(--color-primary-cta) 0%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-accent) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## metallic
|
||||
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 100%);
|
||||
box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--color-background) 50%, transparent);
|
||||
33
theme-options/buttons/secondary-button-styles.md
Normal file
33
theme-options/buttons/secondary-button-styles.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Secondary Button Styles
|
||||
|
||||
4 secondary button style variants available.
|
||||
|
||||
---
|
||||
|
||||
## glass
|
||||
|
||||
backdrop-filter: blur(8px);
|
||||
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
border: 1px solid var(--color-secondary-cta);
|
||||
|
||||
---
|
||||
|
||||
## solid
|
||||
|
||||
background: var(--color-secondary-cta);
|
||||
|
||||
---
|
||||
|
||||
## layered
|
||||
|
||||
background:
|
||||
linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
|
||||
linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
|
||||
linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
|
||||
linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
|
||||
linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)),
|
||||
var(--color-secondary-cta);
|
||||
box-shadow:
|
||||
2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-primary-cta) 10%, transparent);
|
||||
border: 1px solid var(--color-secondary-cta);
|
||||
69
theme-options/cards/card-styles.md
Normal file
69
theme-options/cards/card-styles.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Card Styles
|
||||
|
||||
14 card style variants available.
|
||||
|
||||
---
|
||||
|
||||
## solid
|
||||
|
||||
background: var(--color-card);
|
||||
|
||||
---
|
||||
|
||||
## outline
|
||||
|
||||
background: var(--color-card);
|
||||
border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## glass-elevated
|
||||
|
||||
backdrop-filter: blur(8px);
|
||||
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
border: 1px solid var(--color-card);
|
||||
|
||||
---
|
||||
|
||||
## gradient-bordered
|
||||
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 5%) -35%, var(--color-card) 65%);
|
||||
box-shadow: 0px 0px 10px 4px color-mix(in srgb, var(--color-accent) 4%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
|
||||
---
|
||||
|
||||
## layered-gradient
|
||||
|
||||
background:
|
||||
linear-gradient(color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 59.26%),
|
||||
linear-gradient(var(--color-card) 0%, var(--color-card) 100%),
|
||||
var(--color-card);
|
||||
box-shadow:
|
||||
20px 18px 7px color-mix(in srgb, var(--color-accent) 0%, transparent),
|
||||
2px 2px 2px color-mix(in srgb, var(--color-accent) 6.5%, transparent),
|
||||
1px 1px 2px color-mix(in srgb, var(--color-accent) 2%, transparent);
|
||||
border: 2px solid var(--color-secondary-cta);
|
||||
|
||||
---
|
||||
|
||||
## soft-shadow
|
||||
|
||||
background: var(--color-card);
|
||||
box-shadow: color-mix(in srgb, var(--color-primary-cta) 5%, transparent) 0px 0.706592px 0.706592px -0.666667px, color-mix(in srgb, var(--color-primary-cta) 3%, transparent) 0px 1.80656px 1.80656px -1.33333px, color-mix(in srgb, var(--color-primary-cta) 2%, transparent) 0px 3.62176px 3.62176px -2px, color-mix(in srgb, var(--color-primary-cta) 2%, transparent) 0px 6.8656px 6.8656px -2.66667px, color-mix(in srgb, var(--color-primary-cta) 2%, transparent) 0px 13.6468px 13.6468px -3.33333px, color-mix(in srgb, var(--color-primary-cta) 2%, transparent) 0px 30px 30px -4px, var(--color-background) 0px 3px 1px 0px inset;
|
||||
|
||||
---
|
||||
|
||||
## subtle-shadow
|
||||
|
||||
background: var(--color-card);
|
||||
box-shadow: color-mix(in srgb, var(--color-foreground) 5%, transparent) 0px 4px 32px 0px;
|
||||
|
||||
---
|
||||
|
||||
## inner-glow
|
||||
|
||||
background: var(--color-card);
|
||||
box-shadow: inset 0 0 30px 0 color-mix(in srgb, var(--color-foreground) 4%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 8%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--color-foreground) 8%, transparent);
|
||||
|
||||
677
theme-options/colorThemes.json
Normal file
677
theme-options/colorThemes.json
Normal file
@@ -0,0 +1,677 @@
|
||||
{
|
||||
"lightTheme": {
|
||||
"minimalDarkBlue": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#f9f9f9",
|
||||
"--foreground": "#000612e6",
|
||||
"--primary-cta": "#15479c",
|
||||
"--secondary-cta": "#f9f9f9",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#000612e6"
|
||||
},
|
||||
"minimalDarkGreen": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#f9f9f9",
|
||||
"--foreground": "#000f06e6",
|
||||
"--primary-cta": "#0a7039",
|
||||
"--secondary-cta": "#f9f9f9",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#000f06e6"
|
||||
},
|
||||
"minimalLightRed": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#f9f9f9",
|
||||
"--foreground": "#120006e6",
|
||||
"--primary-cta": "#e63946",
|
||||
"--secondary-cta": "#f9f9f9",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#120006e6"
|
||||
},
|
||||
"minimalBrightBlue": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#f9f9f9",
|
||||
"--foreground": "#000612e6",
|
||||
"--primary-cta": "#106EFB",
|
||||
"--secondary-cta": "#f9f9f9",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#106EFB",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#000612e6"
|
||||
},
|
||||
"minimalBrightOrange": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#f9f9f9",
|
||||
"--foreground": "#120a00e6",
|
||||
"--primary-cta": "#E34400",
|
||||
"--secondary-cta": "#f9f9f9",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#E34400",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#120a00e6"
|
||||
},
|
||||
"minimalGoldenOrange": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#f9f9f9",
|
||||
"--foreground": "#120a00e6",
|
||||
"--primary-cta": "#FF7B05",
|
||||
"--secondary-cta": "#f9f9f9",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#FF7B05",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#120a00e6"
|
||||
},
|
||||
"minimalLightOrange": {
|
||||
"--background": "#ffffff",
|
||||
"--card": "#f9f9f9",
|
||||
"--foreground": "#120a00e6",
|
||||
"--primary-cta": "#ff8c42",
|
||||
"--secondary-cta": "#f9f9f9",
|
||||
"--accent": "#e2e2e2",
|
||||
"--background-accent": "#c4c4c4",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#120a00e6"
|
||||
},
|
||||
"darkBlue": {
|
||||
"--background": "#f5faff",
|
||||
"--card": "#f1f8ff",
|
||||
"--foreground": "#001122",
|
||||
"--primary-cta": "#15479c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#a8cce8",
|
||||
"--background-accent": "#7ba3cf",
|
||||
"--primary-cta-text": "#f5faff",
|
||||
"--secondary-cta-text": "#001122"
|
||||
},
|
||||
"darkGreen": {
|
||||
"--background": "#fafffb",
|
||||
"--card": "#f7fffa",
|
||||
"--foreground": "#001a0a",
|
||||
"--primary-cta": "#0a7039",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#a8d9be",
|
||||
"--background-accent": "#6bbf8e",
|
||||
"--primary-cta-text": "#fafffb",
|
||||
"--secondary-cta-text": "#001a0a"
|
||||
},
|
||||
"lightRed": {
|
||||
"--background": "#fffafa",
|
||||
"--card": "#fff7f7",
|
||||
"--foreground": "#1a0000",
|
||||
"--primary-cta": "#e63946",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#f5c4c7",
|
||||
"--background-accent": "#f09199",
|
||||
"--primary-cta-text": "#fffafa",
|
||||
"--secondary-cta-text": "#1a0000"
|
||||
},
|
||||
"lightPurple": {
|
||||
"--background": "#fbfaff",
|
||||
"--card": "#f7f5ff",
|
||||
"--foreground": "#0f0022",
|
||||
"--primary-cta": "#8b5cf6",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#d8cef5",
|
||||
"--background-accent": "#c4a8f9",
|
||||
"--primary-cta-text": "#fbfaff",
|
||||
"--secondary-cta-text": "#0f0022"
|
||||
},
|
||||
"warmCream": {
|
||||
"--background": "#f6f0e9",
|
||||
"--card": "#efe7dd",
|
||||
"--foreground": "#2b180a",
|
||||
"--primary-cta": "#2b180a",
|
||||
"--secondary-cta": "#efe7dd",
|
||||
"--accent": "#94877c",
|
||||
"--background-accent": "#afa094",
|
||||
"--primary-cta-text": "#f6f0e9",
|
||||
"--secondary-cta-text": "#2b180a"
|
||||
},
|
||||
"grayBlueAccent": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#1c1c1c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#15479c",
|
||||
"--background-accent": "#a8cce8",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"grayGreenAccent": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#1c1c1c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#159c49",
|
||||
"--background-accent": "#a8e8ba",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"grayRedAccent": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#1c1c1c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e63946",
|
||||
"--background-accent": "#e8bea8",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"grayPurpleAccent": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#1c1c1c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#6139e6",
|
||||
"--background-accent": "#b3a8e8",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"warmBeige": {
|
||||
"--background": "#efebe5",
|
||||
"--card": "#f7f2ea",
|
||||
"--foreground": "#000000",
|
||||
"--primary-cta": "#000000",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#ffffff",
|
||||
"--background-accent": "#e1b875",
|
||||
"--primary-cta-text": "#efebe5",
|
||||
"--secondary-cta-text": "#000000"
|
||||
},
|
||||
"grayTealGreen": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#1f514c",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#159c49",
|
||||
"--background-accent": "#a8e8ba",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"grayNavyBlue": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#1f3251",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#15479c",
|
||||
"--background-accent": "#a8cce8",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"grayBurgundyRed": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#511f1f",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#e63946",
|
||||
"--background-accent": "#e8bea8",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"grayIndigoPurple": {
|
||||
"--background": "#f5f5f5",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1c1c1c",
|
||||
"--primary-cta": "#341f51",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#6139e6",
|
||||
"--background-accent": "#b3a8e8",
|
||||
"--primary-cta-text": "#f5f5f5",
|
||||
"--secondary-cta-text": "#1c1c1c"
|
||||
},
|
||||
"warmgrayPink": {
|
||||
"--background": "#f7f6f7",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1b0c25",
|
||||
"--primary-cta": "#1b0c25",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#ff93e4",
|
||||
"--background-accent": "#e8a8c3",
|
||||
"--primary-cta-text": "#f7f6f7",
|
||||
"--secondary-cta-text": "#1b0c25"
|
||||
},
|
||||
"warmgrayOrange": {
|
||||
"--background": "#f7f6f7",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#25190c",
|
||||
"--primary-cta": "#ff6207",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#ffce93",
|
||||
"--background-accent": "#e8cfa8",
|
||||
"--primary-cta-text": "#f7f6f7",
|
||||
"--secondary-cta-text": "#25190c"
|
||||
},
|
||||
"warmgrayBlue": {
|
||||
"--background": "#f7f6f7",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#0c1325",
|
||||
"--primary-cta": "#0798ff",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#93c7ff",
|
||||
"--background-accent": "#a8cde8",
|
||||
"--primary-cta-text": "#f7f6f7",
|
||||
"--secondary-cta-text": "#0c1325"
|
||||
},
|
||||
"warmgrayIndigo": {
|
||||
"--background": "#f7f6f7",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#0c1325",
|
||||
"--primary-cta": "#0b07ff",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#93b7ff",
|
||||
"--background-accent": "#a8bae8",
|
||||
"--primary-cta-text": "#f7f6f7",
|
||||
"--secondary-cta-text": "#0c1325"
|
||||
},
|
||||
"lavenderPeach": {
|
||||
"--background": "#e3deea",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#27231f",
|
||||
"--primary-cta": "#27231f",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#c68a62",
|
||||
"--background-accent": "#c68a62",
|
||||
"--primary-cta-text": "#e3deea",
|
||||
"--secondary-cta-text": "#27231f"
|
||||
},
|
||||
"lavenderBlue": {
|
||||
"--background": "#e3deea",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1f2027",
|
||||
"--primary-cta": "#1f2027",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#627dc6",
|
||||
"--background-accent": "#627dc6",
|
||||
"--primary-cta-text": "#e3deea",
|
||||
"--secondary-cta-text": "#1f2027"
|
||||
},
|
||||
"warmStone": {
|
||||
"--background": "#f5f4ef",
|
||||
"--card": "#dad6cd",
|
||||
"--foreground": "#2a2928",
|
||||
"--primary-cta": "#2a2928",
|
||||
"--secondary-cta": "#ecebea",
|
||||
"--accent": "#ffffff",
|
||||
"--background-accent": "#c6b180",
|
||||
"--primary-cta-text": "#f5f4ef",
|
||||
"--secondary-cta-text": "#2a2928"
|
||||
},
|
||||
"warmStoneGray": {
|
||||
"--background": "#f5f4f0",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#1a1a1a",
|
||||
"--primary-cta": "#2c2c2c",
|
||||
"--secondary-cta": "#f5f4f0",
|
||||
"--accent": "#8a8a8a",
|
||||
"--background-accent": "#e8e6e1",
|
||||
"--primary-cta-text": "#f5f4f0",
|
||||
"--secondary-cta-text": "#1a1a1a"
|
||||
},
|
||||
"warmGreen": {
|
||||
"--background": "#fffefe",
|
||||
"--card": "#f6f7f4",
|
||||
"--foreground": "#080908",
|
||||
"--primary-cta": "#0e3a29",
|
||||
"--secondary-cta": "#e7eecd",
|
||||
"--accent": "#35c18b",
|
||||
"--background-accent": "#ecebe4",
|
||||
"--primary-cta-text": "#fffefe",
|
||||
"--secondary-cta-text": "#080908"
|
||||
},
|
||||
"warmSand": {
|
||||
"--background": "#fcf6ec",
|
||||
"--card": "#f3ede2",
|
||||
"--foreground": "#2e2521",
|
||||
"--primary-cta": "#2e2521",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#b2a28b",
|
||||
"--background-accent": "#b2a28b",
|
||||
"--primary-cta-text": "#fcf6ec",
|
||||
"--secondary-cta-text": "#2e2521"
|
||||
},
|
||||
"warmgrayRed": {
|
||||
"--background": "#f7f6f7",
|
||||
"--card": "#ffffff",
|
||||
"--foreground": "#250c0d",
|
||||
"--primary-cta": "#b82b40",
|
||||
"--secondary-cta": "#ffffff",
|
||||
"--accent": "#b90941",
|
||||
"--background-accent": "#e8a8b6",
|
||||
"--primary-cta-text": "#f7f6f7",
|
||||
"--secondary-cta-text": "#250c0d"
|
||||
}
|
||||
},
|
||||
"darkTheme": {
|
||||
"minimal": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#ffffffe6",
|
||||
"--primary-cta": "#e6e6e6",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#ffffffe6"
|
||||
},
|
||||
"minimalLightBlue": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f0f8ffe6",
|
||||
"--primary-cta": "#cee7ff",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#f0f8ffe6"
|
||||
},
|
||||
"minimalLightGreen": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f5fffae6",
|
||||
"--primary-cta": "#80da9b",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#f5fffae6"
|
||||
},
|
||||
"minimalLightRed": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fff5f5e6",
|
||||
"--primary-cta": "#ff7a7a",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#fff5f5e6"
|
||||
},
|
||||
"minimalLightPurple": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f8f5ffe6",
|
||||
"--primary-cta": "#c89bff",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#f8f5ffe6"
|
||||
},
|
||||
"lightBlueWhite": {
|
||||
"--background": "#010912",
|
||||
"--card": "#152840",
|
||||
"--foreground": "#e6f0ff",
|
||||
"--primary-cta": "#cee7ff",
|
||||
"--secondary-cta": "#0e1a29",
|
||||
"--accent": "#3f5c79",
|
||||
"--background-accent": "#004a93",
|
||||
"--primary-cta-text": "#010912",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"lime": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f5f5f5",
|
||||
"--primary-cta": "#dfff1c",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#8b9a1b",
|
||||
"--background-accent": "#5d6b00",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"gold": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f5f5f5",
|
||||
"--primary-cta": "#ffdf7d",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#b8860b",
|
||||
"--background-accent": "#8b6914",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"crimson": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#f5f5f5",
|
||||
"--primary-cta": "#ff0000",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#991b1b",
|
||||
"--background-accent": "#7f1d1d",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"midnightIce": {
|
||||
"--background": "#000000",
|
||||
"--card": "#0c0c0c",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#cee7ff",
|
||||
"--secondary-cta": "#000000",
|
||||
"--accent": "#535353",
|
||||
"--background-accent": "#CEE7FF",
|
||||
"--primary-cta-text": "#000000",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"midnightBlue": {
|
||||
"--background": "#000000",
|
||||
"--card": "#0c0c0c",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#106EFB",
|
||||
"--secondary-cta": "#000000",
|
||||
"--accent": "#535353",
|
||||
"--background-accent": "#106EFB",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"blueOrangeAccent": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#1f7cff",
|
||||
"--secondary-cta": "#010101",
|
||||
"--accent": "#1f7cff",
|
||||
"--background-accent": "#f96b2f",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"orangeBlueAccent": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#e34400",
|
||||
"--secondary-cta": "#010101",
|
||||
"--accent": "#ff7b05",
|
||||
"--background-accent": "#106efb",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"minimalBrightOrange": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#e34400",
|
||||
"--secondary-cta": "#010101",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#e34400",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#ffffff"
|
||||
},
|
||||
"minimalLightOrange": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fffaf5e6",
|
||||
"--primary-cta": "#ffaa70",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#fffaf5e6"
|
||||
},
|
||||
"minimalLightYellow": {
|
||||
"--background": "#0a0a0a",
|
||||
"--card": "#1a1a1a",
|
||||
"--foreground": "#fffffae6",
|
||||
"--primary-cta": "#fde047",
|
||||
"--secondary-cta": "#1a1a1a",
|
||||
"--accent": "#737373",
|
||||
"--background-accent": "#737373",
|
||||
"--primary-cta-text": "#0a0a0a",
|
||||
"--secondary-cta-text": "#fffffae6"
|
||||
},
|
||||
"lightBlue": {
|
||||
"--background": "#010912",
|
||||
"--card": "#152840",
|
||||
"--foreground": "#e6f0ff",
|
||||
"--primary-cta": "#cee7ff",
|
||||
"--secondary-cta": "#0e1a29",
|
||||
"--accent": "#3f5c79",
|
||||
"--background-accent": "#004a93",
|
||||
"--primary-cta-text": "#010912",
|
||||
"--secondary-cta-text": "#e6f0ff"
|
||||
},
|
||||
"lightGreen": {
|
||||
"--background": "#000802",
|
||||
"--card": "#0b1a0b",
|
||||
"--foreground": "#e6ffe6",
|
||||
"--primary-cta": "#80da9b",
|
||||
"--secondary-cta": "#07170b",
|
||||
"--accent": "#38714a",
|
||||
"--background-accent": "#2c6541",
|
||||
"--primary-cta-text": "#000802",
|
||||
"--secondary-cta-text": "#e6ffe6"
|
||||
},
|
||||
"lightRed": {
|
||||
"--background": "#080000",
|
||||
"--card": "#1e0d0d",
|
||||
"--foreground": "#ffe6e6",
|
||||
"--primary-cta": "#ff7a7a",
|
||||
"--secondary-cta": "#1e0909",
|
||||
"--accent": "#7b4242",
|
||||
"--background-accent": "#65292c",
|
||||
"--primary-cta-text": "#080000",
|
||||
"--secondary-cta-text": "#ffe6e6"
|
||||
},
|
||||
"darkRed": {
|
||||
"--background": "#060000",
|
||||
"--card": "#1d0d0d",
|
||||
"--foreground": "#ffe6e6",
|
||||
"--primary-cta": "#ff3d4a",
|
||||
"--secondary-cta": "#1f0a0a",
|
||||
"--accent": "#7b2d2d",
|
||||
"--background-accent": "#b8111f",
|
||||
"--primary-cta-text": "#ffffff",
|
||||
"--secondary-cta-text": "#ffe6e6"
|
||||
},
|
||||
"lightPurple": {
|
||||
"--background": "#050012",
|
||||
"--card": "#040121",
|
||||
"--foreground": "#f0e6ff",
|
||||
"--primary-cta": "#c89bff",
|
||||
"--secondary-cta": "#1d123b",
|
||||
"--accent": "#684f7b",
|
||||
"--background-accent": "#65417c",
|
||||
"--primary-cta-text": "#050012",
|
||||
"--secondary-cta-text": "#f0e6ff"
|
||||
},
|
||||
"lightOrange": {
|
||||
"--background": "#080200",
|
||||
"--card": "#1a0d0b",
|
||||
"--foreground": "#ffe6d5",
|
||||
"--primary-cta": "#ffaa70",
|
||||
"--secondary-cta": "#170b07",
|
||||
"--accent": "#7b5e4a",
|
||||
"--background-accent": "#b8541e",
|
||||
"--primary-cta-text": "#080200",
|
||||
"--secondary-cta-text": "#ffe6d5"
|
||||
},
|
||||
"deepBlue": {
|
||||
"--background": "#020617",
|
||||
"--card": "#0f172a",
|
||||
"--foreground": "#e2e8f0",
|
||||
"--primary-cta": "#c4d8f9",
|
||||
"--secondary-cta": "#041633",
|
||||
"--accent": "#2d30f3",
|
||||
"--background-accent": "#1d4ed8",
|
||||
"--primary-cta-text": "#020617",
|
||||
"--secondary-cta-text": "#e2e8f0"
|
||||
},
|
||||
"violet": {
|
||||
"--background": "#030128",
|
||||
"--card": "#241f48",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ffffff",
|
||||
"--secondary-cta": "#131136",
|
||||
"--accent": "#44358a",
|
||||
"--background-accent": "#b597fe",
|
||||
"--primary-cta-text": "#030128",
|
||||
"--secondary-cta-text": "#d5d4f6"
|
||||
},
|
||||
"ruby": {
|
||||
"--background": "#000000",
|
||||
"--card": "#481f1f",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ffffff",
|
||||
"--secondary-cta": "#361311",
|
||||
"--accent": "#51000b",
|
||||
"--background-accent": "#ff2231",
|
||||
"--primary-cta-text": "#280101",
|
||||
"--secondary-cta-text": "#f6d4d4"
|
||||
},
|
||||
"emerald": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1f4035",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ffffff",
|
||||
"--secondary-cta": "#0d2b1f",
|
||||
"--accent": "#0d5238",
|
||||
"--background-accent": "#10b981",
|
||||
"--primary-cta-text": "#051a12",
|
||||
"--secondary-cta-text": "#d4f6e8"
|
||||
},
|
||||
"indigo": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1f1f40",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ffffff",
|
||||
"--secondary-cta": "#0d0d2b",
|
||||
"--accent": "#3d2880",
|
||||
"--background-accent": "#663cff",
|
||||
"--primary-cta-text": "#0a051a",
|
||||
"--secondary-cta-text": "#d4d4f6"
|
||||
},
|
||||
"forest": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1a2f1d",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ffffff",
|
||||
"--secondary-cta": "#0d200f",
|
||||
"--accent": "#1a3d1f",
|
||||
"--background-accent": "#355e3b",
|
||||
"--primary-cta-text": "#0a1a0c",
|
||||
"--secondary-cta-text": "#d4f6d8"
|
||||
},
|
||||
"mint": {
|
||||
"--background": "#000000",
|
||||
"--card": "#1a2a1a",
|
||||
"--foreground": "#ffffff",
|
||||
"--primary-cta": "#ffffff",
|
||||
"--secondary-cta": "#0d1a0d",
|
||||
"--accent": "#2d4a2d",
|
||||
"--background-accent": "#c1e1c1",
|
||||
"--primary-cta-text": "#0a150a",
|
||||
"--secondary-cta-text": "#e1f6e1"
|
||||
}
|
||||
}
|
||||
}
|
||||
237
theme-options/fontThemes.json
Normal file
237
theme-options/fontThemes.json
Normal file
@@ -0,0 +1,237 @@
|
||||
{
|
||||
"singleFonts": {
|
||||
"interTight": {
|
||||
"name": "Inter Tight",
|
||||
"import": "import { Inter_Tight } from \"next/font/google\";",
|
||||
"initialization": "const interTight = Inter_Tight({\n variable: \"--font-inter-tight\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});",
|
||||
"className": "${interTight.variable}",
|
||||
"cssVariable": "font-family: var(--font-inter-tight), sans-serif;"
|
||||
},
|
||||
"inter": {
|
||||
"name": "Inter",
|
||||
"import": "import { Inter } from \"next/font/google\";",
|
||||
"initialization": "const inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${inter.variable}",
|
||||
"cssVariable": "font-family: var(--font-inter), sans-serif;"
|
||||
},
|
||||
"poppins": {
|
||||
"name": "Poppins",
|
||||
"import": "import { Poppins } from \"next/font/google\";",
|
||||
"initialization": "const poppins = Poppins({\n variable: \"--font-poppins\",\n subsets: [\"latin\"],\n weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});",
|
||||
"className": "${poppins.variable}",
|
||||
"cssVariable": "font-family: var(--font-poppins), sans-serif;"
|
||||
},
|
||||
"montserrat": {
|
||||
"name": "Montserrat",
|
||||
"import": "import { Montserrat } from \"next/font/google\";",
|
||||
"initialization": "const montserrat = Montserrat({\n variable: \"--font-montserrat\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${montserrat.variable}",
|
||||
"cssVariable": "font-family: var(--font-montserrat), sans-serif;"
|
||||
},
|
||||
"roboto": {
|
||||
"name": "Roboto",
|
||||
"import": "import { Roboto } from \"next/font/google\";",
|
||||
"initialization": "const roboto = Roboto({\n variable: \"--font-roboto\",\n subsets: [\"latin\"],\n weight: [\"100\", \"300\", \"400\", \"500\", \"700\", \"900\"],\n});",
|
||||
"className": "${roboto.variable}",
|
||||
"cssVariable": "font-family: var(--font-roboto), sans-serif;"
|
||||
},
|
||||
"openSans": {
|
||||
"name": "Open Sans",
|
||||
"import": "import { Open_Sans } from \"next/font/google\";",
|
||||
"initialization": "const openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${openSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-open-sans), sans-serif;"
|
||||
},
|
||||
"lato": {
|
||||
"name": "Lato",
|
||||
"import": "import { Lato } from \"next/font/google\";",
|
||||
"initialization": "const lato = Lato({\n variable: \"--font-lato\",\n subsets: [\"latin\"],\n weight: [\"100\", \"300\", \"400\", \"700\", \"900\"],\n});",
|
||||
"className": "${lato.variable}",
|
||||
"cssVariable": "font-family: var(--font-lato), sans-serif;"
|
||||
},
|
||||
"dmSans": {
|
||||
"name": "DM Sans",
|
||||
"import": "import { DM_Sans } from \"next/font/google\";",
|
||||
"initialization": "const dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${dmSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-dm-sans), sans-serif;"
|
||||
},
|
||||
"manrope": {
|
||||
"name": "Manrope",
|
||||
"import": "import { Manrope } from \"next/font/google\";",
|
||||
"initialization": "const manrope = Manrope({\n variable: \"--font-manrope\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${manrope.variable}",
|
||||
"cssVariable": "font-family: var(--font-manrope), sans-serif;"
|
||||
},
|
||||
"sourceSans3": {
|
||||
"name": "Source Sans 3",
|
||||
"import": "import { Source_Sans_3 } from \"next/font/google\";",
|
||||
"initialization": "const sourceSans3 = Source_Sans_3({\n variable: \"--font-source-sans-3\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${sourceSans3.variable}",
|
||||
"cssVariable": "font-family: var(--font-source-sans-3), sans-serif;"
|
||||
},
|
||||
"publicSans": {
|
||||
"name": "Public Sans",
|
||||
"import": "import { Public_Sans } from \"next/font/google\";",
|
||||
"initialization": "const publicSans = Public_Sans({\n variable: \"--font-public-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${publicSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-public-sans), sans-serif;"
|
||||
},
|
||||
"mulish": {
|
||||
"name": "Mulish",
|
||||
"import": "import { Mulish } from \"next/font/google\";",
|
||||
"initialization": "const mulish = Mulish({\n variable: \"--font-mulish\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${mulish.variable}",
|
||||
"cssVariable": "font-family: var(--font-mulish), sans-serif;"
|
||||
},
|
||||
"nunito": {
|
||||
"name": "Nunito",
|
||||
"import": "import { Nunito } from \"next/font/google\";",
|
||||
"initialization": "const nunito = Nunito({\n variable: \"--font-nunito\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${nunito.variable}",
|
||||
"cssVariable": "font-family: var(--font-nunito), sans-serif;"
|
||||
},
|
||||
"nunitoSans": {
|
||||
"name": "Nunito Sans",
|
||||
"import": "import { Nunito_Sans } from \"next/font/google\";",
|
||||
"initialization": "const nunitoSans = Nunito_Sans({\n variable: \"--font-nunito-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${nunitoSans.variable}",
|
||||
"cssVariable": "font-family: var(--font-nunito-sans), sans-serif;"
|
||||
},
|
||||
"raleway": {
|
||||
"name": "Raleway",
|
||||
"import": "import { Raleway } from \"next/font/google\";",
|
||||
"initialization": "const raleway = Raleway({\n variable: \"--font-raleway\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${raleway.variable}",
|
||||
"cssVariable": "font-family: var(--font-raleway), sans-serif;"
|
||||
},
|
||||
"archivo": {
|
||||
"name": "Archivo",
|
||||
"import": "import { Archivo } from \"next/font/google\";",
|
||||
"initialization": "const archivo = Archivo({\n variable: \"--font-archivo\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${archivo.variable}",
|
||||
"cssVariable": "font-family: var(--font-archivo), sans-serif;"
|
||||
},
|
||||
"figtree": {
|
||||
"name": "Figtree",
|
||||
"import": "import { Figtree } from \"next/font/google\";",
|
||||
"initialization": "const figtree = Figtree({\n variable: \"--font-figtree\",\n subsets: [\"latin\"],\n});",
|
||||
"className": "${figtree.variable}",
|
||||
"cssVariable": "font-family: var(--font-figtree), sans-serif;"
|
||||
}
|
||||
},
|
||||
"fontPairings": {
|
||||
"interOpenSans": {
|
||||
"name": "Inter + Open Sans",
|
||||
"description": "Neutral headings with friendly body. Clean and approachable.",
|
||||
"headingFont": "inter",
|
||||
"bodyFont": "openSans",
|
||||
"imports": "import { Inter } from \"next/font/google\";\nimport { Open_Sans } from \"next/font/google\";",
|
||||
"initializations": "const inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});\n\nconst openSans = Open_Sans({\n variable: \"--font-open-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${inter.variable} ${openSans.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-open-sans), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-open-sans), sans-serif",
|
||||
"headingsFontFamily": "var(--font-inter), sans-serif"
|
||||
}
|
||||
},
|
||||
"dmSansInter": {
|
||||
"name": "DM Sans + Inter",
|
||||
"description": "Modern geometric headings with neutral body. Contemporary and clean.",
|
||||
"headingFont": "dmSans",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { DM_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${dmSans.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-dm-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-dm-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"manropeDmSans": {
|
||||
"name": "Manrope + DM Sans",
|
||||
"description": "Geometric headings with clean body. Modern and professional.",
|
||||
"headingFont": "manrope",
|
||||
"bodyFont": "dmSans",
|
||||
"imports": "import { Manrope } from \"next/font/google\";\nimport { DM_Sans } from \"next/font/google\";",
|
||||
"initializations": "const manrope = Manrope({\n variable: \"--font-manrope\",\n subsets: [\"latin\"],\n});\n\nconst dmSans = DM_Sans({\n variable: \"--font-dm-sans\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${manrope.variable} ${dmSans.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-dm-sans), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-manrope), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-dm-sans), sans-serif",
|
||||
"headingsFontFamily": "var(--font-manrope), sans-serif"
|
||||
}
|
||||
},
|
||||
"publicSansInter": {
|
||||
"name": "Public Sans + Inter",
|
||||
"description": "Government-inspired headings with neutral body. Professional and trustworthy.",
|
||||
"headingFont": "publicSans",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Public_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const publicSans = Public_Sans({\n variable: \"--font-public-sans\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${publicSans.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-public-sans), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-public-sans), sans-serif"
|
||||
}
|
||||
},
|
||||
"mulishInter": {
|
||||
"name": "Mulish + Inter",
|
||||
"description": "Minimal headings with neutral body. Clean and modern.",
|
||||
"headingFont": "mulish",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Mulish } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const mulish = Mulish({\n variable: \"--font-mulish\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${mulish.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-mulish), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-mulish), sans-serif"
|
||||
}
|
||||
},
|
||||
"montserratInter": {
|
||||
"name": "Montserrat + Inter",
|
||||
"description": "Geometric sans-serif headings with neutral body. Popular and reliable.",
|
||||
"headingFont": "montserrat",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Montserrat } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const montserrat = Montserrat({\n variable: \"--font-montserrat\",\n subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${montserrat.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-montserrat), sans-serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-montserrat), sans-serif"
|
||||
}
|
||||
},
|
||||
"libreBaskervilleInter": {
|
||||
"name": "Libre Baskerville + Inter",
|
||||
"description": "Classic serif headings with neutral body. Elegant and readable.",
|
||||
"headingFont": "libreBaskerville",
|
||||
"bodyFont": "inter",
|
||||
"imports": "import { Libre_Baskerville } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
|
||||
"initializations": "const libreBaskerville = Libre_Baskerville({\n variable: \"--font-libre-baskerville\",\n subsets: [\"latin\"],\n weight: [\"400\", \"700\"],\n});\n\nconst inter = Inter({\n variable: \"--font-inter\",\n subsets: [\"latin\"],\n});",
|
||||
"classNames": "${libreBaskerville.variable} ${inter.variable}",
|
||||
"globalsCss": {
|
||||
"instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
|
||||
"bodyRule": "body {\n /* ... existing properties ... */\n font-family: var(--font-inter), sans-serif;\n}",
|
||||
"headingsRule": "h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-libre-baskerville), serif;\n}",
|
||||
"bodyFontFamily": "var(--font-inter), sans-serif",
|
||||
"headingsFontFamily": "var(--font-libre-baskerville), serif"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
21
theme-options/layout/border-radius.md
Normal file
21
theme-options/layout/border-radius.md
Normal file
@@ -0,0 +1,21 @@
|
||||
# Border Radius Presets
|
||||
|
||||
3 border radius presets available.
|
||||
|
||||
---
|
||||
|
||||
## rounded
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
---
|
||||
|
||||
## smooth
|
||||
|
||||
--radius: 0.75rem;
|
||||
|
||||
---
|
||||
|
||||
## soft
|
||||
|
||||
--radius: 1.5rem;
|
||||
32
theme-options/layout/content-width.md
Normal file
32
theme-options/layout/content-width.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Content Width Presets
|
||||
|
||||
4 content width presets available.
|
||||
|
||||
---
|
||||
|
||||
## small
|
||||
|
||||
Desktop: --width-content-width: clamp(40rem, 65vw, 100rem);
|
||||
Mobile: --width-content-width: 80vw;
|
||||
|
||||
---
|
||||
|
||||
## compact
|
||||
|
||||
Desktop: --width-content-width: clamp(40rem, 67.5vw, 100rem);
|
||||
Mobile: --width-content-width: 80vw;
|
||||
|
||||
---
|
||||
|
||||
## mediumSmall
|
||||
|
||||
Desktop: --width-content-width: clamp(40rem, 70vw, 100rem);
|
||||
Mobile: --width-content-width: 80vw;
|
||||
|
||||
---
|
||||
|
||||
## medium
|
||||
|
||||
Desktop: --width-content-width: clamp(40rem, 72.5vw, 100rem);
|
||||
Mobile: --width-content-width: 80vw;
|
||||
|
||||
375
theme-options/typography/text-sizing.md
Normal file
375
theme-options/typography/text-sizing.md
Normal file
@@ -0,0 +1,375 @@
|
||||
# Text Sizing Presets
|
||||
|
||||
10 text sizing presets available. Each preset defines 14 text sizes for desktop and mobile.
|
||||
|
||||
---
|
||||
|
||||
## medium
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 7vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.5vw;
|
||||
--text-xs: 2.75vw;
|
||||
--text-sm: 3vw;
|
||||
--text-base: 3.25vw;
|
||||
--text-lg: 3.5vw;
|
||||
--text-xl: 4.25vw;
|
||||
--text-2xl: 5vw;
|
||||
--text-3xl: 6vw;
|
||||
--text-4xl: 7vw;
|
||||
--text-5xl: 7.5vw;
|
||||
--text-6xl: 8.5vw;
|
||||
--text-7xl: 10vw;
|
||||
--text-8xl: 12vw;
|
||||
--text-9xl: 14vw;
|
||||
|
||||
---
|
||||
|
||||
## mediumLarge
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.651vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.756vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.861vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 0.966vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.05vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.155vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.365vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.68vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.1vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 2.8875vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.465vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4.2vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 4.725vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 7.35vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.625vw;
|
||||
--text-xs: 2.8875vw;
|
||||
--text-sm: 3.15vw;
|
||||
--text-base: 3.4125vw;
|
||||
--text-lg: 3.675vw;
|
||||
--text-xl: 4.4625vw;
|
||||
--text-2xl: 5.25vw;
|
||||
--text-3xl: 6.3vw;
|
||||
--text-4xl: 7.35vw;
|
||||
--text-5xl: 7.875vw;
|
||||
--text-6xl: 8.925vw;
|
||||
--text-7xl: 10.5vw;
|
||||
--text-8xl: 12.6vw;
|
||||
--text-9xl: 14.7vw;
|
||||
|
||||
---
|
||||
|
||||
## largeSmall
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.682vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.792vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.902vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 1.012vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.1vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.21vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.43vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.76vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.2vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 3.025vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.63vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4.4vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 4.95vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 7.7vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.75vw;
|
||||
--text-xs: 3.025vw;
|
||||
--text-sm: 3.3vw;
|
||||
--text-base: 3.575vw;
|
||||
--text-lg: 3.85vw;
|
||||
--text-xl: 4.675vw;
|
||||
--text-2xl: 5.5vw;
|
||||
--text-3xl: 6.6vw;
|
||||
--text-4xl: 7.7vw;
|
||||
--text-5xl: 8.25vw;
|
||||
--text-6xl: 9.35vw;
|
||||
--text-7xl: 11vw;
|
||||
--text-8xl: 13.2vw;
|
||||
--text-9xl: 15.4vw;
|
||||
|
||||
---
|
||||
|
||||
## large
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.713vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.828vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.943vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 1.058vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.15vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.265vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.495vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.84vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.3vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.795vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4.6vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 5.175vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 8.05vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.875vw;
|
||||
--text-xs: 3.1625vw;
|
||||
--text-sm: 3.45vw;
|
||||
--text-base: 3.7375vw;
|
||||
--text-lg: 4.025vw;
|
||||
--text-xl: 4.8875vw;
|
||||
--text-2xl: 5.75vw;
|
||||
--text-3xl: 6.9vw;
|
||||
--text-4xl: 8.05vw;
|
||||
--text-5xl: 8.625vw;
|
||||
--text-6xl: 9.775vw;
|
||||
--text-7xl: 11.5vw;
|
||||
--text-8xl: 13.8vw;
|
||||
--text-9xl: 16.1vw;
|
||||
|
||||
---
|
||||
|
||||
## mediumSizeLargeTitles
|
||||
|
||||
Medium body text (2xs-4xl) with large title sizes (5xl-9xl).
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.795vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4.6vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 5.175vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 8.05vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.5vw;
|
||||
--text-xs: 2.75vw;
|
||||
--text-sm: 3vw;
|
||||
--text-base: 3.25vw;
|
||||
--text-lg: 3.5vw;
|
||||
--text-xl: 4.25vw;
|
||||
--text-2xl: 5vw;
|
||||
--text-3xl: 6vw;
|
||||
--text-4xl: 7vw;
|
||||
--text-5xl: 8.625vw;
|
||||
--text-6xl: 9.775vw;
|
||||
--text-7xl: 11.5vw;
|
||||
--text-8xl: 13.8vw;
|
||||
--text-9xl: 16.1vw;
|
||||
|
||||
---
|
||||
|
||||
## largeSizeMediumTitles
|
||||
|
||||
Large body text (2xs-4xl) with medium title sizes (5xl-9xl).
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.713vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.828vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.943vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 1.058vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.15vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.265vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.495vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.84vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.3vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 7vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.875vw;
|
||||
--text-xs: 3.1625vw;
|
||||
--text-sm: 3.45vw;
|
||||
--text-base: 3.7375vw;
|
||||
--text-lg: 4.025vw;
|
||||
--text-xl: 4.8875vw;
|
||||
--text-2xl: 5.75vw;
|
||||
--text-3xl: 6.9vw;
|
||||
--text-4xl: 8.05vw;
|
||||
--text-5xl: 7.5vw;
|
||||
--text-6xl: 8.5vw;
|
||||
--text-7xl: 10vw;
|
||||
--text-8xl: 12vw;
|
||||
--text-9xl: 14vw;
|
||||
|
||||
---
|
||||
|
||||
## mediumLargeSizeLargeTitles
|
||||
|
||||
MediumLarge body text (2xs-4xl) with large title sizes (5xl-9xl).
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.651vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.756vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.861vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 0.966vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.05vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.155vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.365vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.68vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.1vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.795vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4.6vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 5.175vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 8.05vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.625vw;
|
||||
--text-xs: 2.8875vw;
|
||||
--text-sm: 3.15vw;
|
||||
--text-base: 3.4125vw;
|
||||
--text-lg: 3.675vw;
|
||||
--text-xl: 4.4625vw;
|
||||
--text-2xl: 5.25vw;
|
||||
--text-3xl: 6.3vw;
|
||||
--text-4xl: 7.35vw;
|
||||
--text-5xl: 8.625vw;
|
||||
--text-6xl: 9.775vw;
|
||||
--text-7xl: 11.5vw;
|
||||
--text-8xl: 13.8vw;
|
||||
--text-9xl: 16.1vw;
|
||||
|
||||
---
|
||||
|
||||
## largeSmallSizeLargeTitles
|
||||
|
||||
LargeSmall body text (2xs-4xl) with large title sizes (5xl-9xl).
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.682vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.792vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.902vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 1.012vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.1vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.21vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.43vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.76vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.2vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.795vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4.6vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 5.175vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 8.05vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.75vw;
|
||||
--text-xs: 3.025vw;
|
||||
--text-sm: 3.3vw;
|
||||
--text-base: 3.575vw;
|
||||
--text-lg: 3.85vw;
|
||||
--text-xl: 4.675vw;
|
||||
--text-2xl: 5.5vw;
|
||||
--text-3xl: 6.6vw;
|
||||
--text-4xl: 7.7vw;
|
||||
--text-5xl: 8.625vw;
|
||||
--text-6xl: 9.775vw;
|
||||
--text-7xl: 11.5vw;
|
||||
--text-8xl: 13.8vw;
|
||||
--text-9xl: 16.1vw;
|
||||
|
||||
---
|
||||
|
||||
## mediumLargeSizeMediumTitles
|
||||
|
||||
MediumLarge body text (2xs-4xl) with medium title sizes (5xl-9xl).
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.651vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.756vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.861vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 0.966vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.05vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.155vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.365vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.68vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.1vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 7vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.625vw;
|
||||
--text-xs: 2.8875vw;
|
||||
--text-sm: 3.15vw;
|
||||
--text-base: 3.4125vw;
|
||||
--text-lg: 3.675vw;
|
||||
--text-xl: 4.4625vw;
|
||||
--text-2xl: 5.25vw;
|
||||
--text-3xl: 6.3vw;
|
||||
--text-4xl: 7.35vw;
|
||||
--text-5xl: 7.5vw;
|
||||
--text-6xl: 8.5vw;
|
||||
--text-7xl: 10vw;
|
||||
--text-8xl: 12vw;
|
||||
--text-9xl: 14vw;
|
||||
|
||||
---
|
||||
|
||||
## largeSmallSizeMediumTitles
|
||||
|
||||
LargeSmall body text (2xs-4xl) with medium title sizes (5xl-9xl).
|
||||
|
||||
Desktop:
|
||||
--text-2xs: clamp(0.465rem, 0.682vw, 0.62rem);
|
||||
--text-xs: clamp(0.54rem, 0.792vw, 0.72rem);
|
||||
--text-sm: clamp(0.615rem, 0.902vw, 0.82rem);
|
||||
--text-base: clamp(0.69rem, 1.012vw, 0.92rem);
|
||||
--text-lg: clamp(0.75rem, 1.1vw, 1rem);
|
||||
--text-xl: clamp(0.825rem, 1.21vw, 1.1rem);
|
||||
--text-2xl: clamp(0.975rem, 1.43vw, 1.3rem);
|
||||
--text-3xl: clamp(1.2rem, 1.76vw, 1.6rem);
|
||||
--text-4xl: clamp(1.5rem, 2.2vw, 2rem);
|
||||
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
|
||||
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
|
||||
--text-7xl: clamp(3rem, 4vw, 4rem);
|
||||
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
|
||||
--text-9xl: clamp(5.25rem, 7vw, 7rem);
|
||||
|
||||
Mobile:
|
||||
--text-2xs: 2.75vw;
|
||||
--text-xs: 3.025vw;
|
||||
--text-sm: 3.3vw;
|
||||
--text-base: 3.575vw;
|
||||
--text-lg: 3.85vw;
|
||||
--text-xl: 4.675vw;
|
||||
--text-2xl: 5.5vw;
|
||||
--text-3xl: 6.6vw;
|
||||
--text-4xl: 7.7vw;
|
||||
--text-5xl: 7.5vw;
|
||||
--text-6xl: 8.5vw;
|
||||
--text-7xl: 10vw;
|
||||
--text-8xl: 12vw;
|
||||
--text-9xl: 14vw;
|
||||
Reference in New Issue
Block a user