development/1c5ed85d-d70f-49af-b971-2b6fd503d4c3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
DK
2026-02-09 15:38:54 +00:00
commit 545151f702
656 changed files with 77365 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/providers/themeProvider/styles/cardStyles.ts Normal file
View File

@@ -0,0 +1,107 @@
import type { CardStyleVariant } from "../config/types";
export const cardStyleMap: Record<CardStyleVariant, string> = {
"solid": `
position: relative;
background: var(--color-card);
`,
"outline": `
position: relative;
background: var(--color-card);
border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
`,
"elevated": `
position: relative;
background: var(--color-card);
box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-foreground) 10%, transparent);
`,
"gradient-mesh": `
position: relative;
background:
radial-gradient(at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0px, transparent 50%),
radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0px, transparent 50%),
radial-gradient(at 100% 100%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0px, transparent 50%),
radial-gradient(at 0% 100%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0px, transparent 50%),
var(--color-card);
`,
"gradient-radial": `
position: relative;
background: radial-gradient(circle at center, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 20%) 0%, var(--color-card) 90%);
`,
"inset": `
position: relative;
background: color-mix(in srgb, var(--color-card) 95%, var(--color-accent) 5%);
box-shadow:
inset 2px 2px 4px color-mix(in srgb, var(--color-accent) 15%, transparent),
inset -2px -2px 4px color-mix(in srgb, var(--color-background) 20%, transparent);
`,
"glass-elevated": `
position: relative;
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);
`,
"glass-depth": `
position: relative;
background: color-mix(in srgb, var(--color-card) 80%, transparent);
backdrop-filter: blur(14px);
box-shadow:
inset 0 0 20px 0 color-mix(in srgb, var(--color-accent) 7.5%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 7.5%, transparent);
`,
"gradient-bordered": `
position: relative;
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);
`,
"layered-gradient": `
position: relative;
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": `
position: relative;
background: var(--color-card);
box-shadow: color-mix(in srgb, var(--color-foreground) 10%, transparent) 0px 0.706592px 0.706592px -0.666667px, color-mix(in srgb, var(--color-foreground) 8%, transparent) 0px 1.80656px 1.80656px -1.33333px, color-mix(in srgb, var(--color-foreground) 7%, transparent) 0px 3.62176px 3.62176px -2px, color-mix(in srgb, var(--color-foreground) 7%, transparent) 0px 6.8656px 6.8656px -2.66667px, color-mix(in srgb, var(--color-foreground) 5%, transparent) 0px 13.6468px 13.6468px -3.33333px, color-mix(in srgb, var(--color-foreground) 2%, transparent) 0px 30px 30px -4px, var(--color-background) 0px 3px 1px 0px inset;
`,
"subtle-shadow": `
position: relative;
background: var(--color-card);
box-shadow: color-mix(in srgb, var(--color-foreground) 5%, transparent) 0px 4px 32px 0px;
`,
};
export const getGradientBorderedPseudo = (cardStyle: CardStyleVariant): string => {
if (cardStyle !== "gradient-bordered") return '';
return `
.card::before {
content: "";
position: absolute;
pointer-events: none;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(
160deg,
color-mix(in srgb, var(--color-accent) 25%, transparent) 0%,
color-mix(in srgb, var(--color-accent) 5%, transparent) 35%,
color-mix(in srgb, var(--color-foreground) 5%, transparent) 75%,
color-mix(in srgb, var(--color-background-accent) 15%, transparent) 100%
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
`;
};

39
src/providers/themeProvider/styles/primaryButtonStyles.ts Normal file
View File

@@ -0,0 +1,39 @@
import type { PrimaryButtonStyleVariant } from "../config/types";
export const primaryButtonStyleMap: Record<PrimaryButtonStyleVariant, string> = {
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);
`,
flat: `
background: var(--color-primary-cta);
box-shadow: none;
`,
"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-accent) 30%, transparent);
`,
"diagonal-gradient": `
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-primary-cta) 80%, transparent), var(--color-foreground));
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 30%, transparent);
`,
"inset-glow": `
background: var(--color-primary-cta);
box-shadow: color-mix(in srgb, var(--color-background) 15%, transparent) 0px 0px 20px 1.64px inset, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-foreground) 13%, transparent) 0px 50px 30px -2.5px;
`,
"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;
`,
};

33
src/providers/themeProvider/styles/secondaryButtonStyles.ts Normal file
View File

@@ -0,0 +1,33 @@
import type { SecondaryButtonStyleVariant } from "../config/types";
export const secondaryButtonStyleMap: Record<SecondaryButtonStyleVariant, string> = {
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);
box-shadow: none;
`,
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-accent) 10%, transparent);
border: 1px solid var(--color-secondary-cta);
`,
"radial-glow": `
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
var(--color-secondary-cta);
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
`,
};