Skip to content

Commit 521bed3

Browse files
committed
feat: use new color variants
1 parent 9368cc2 commit 521bed3

10 files changed

Lines changed: 54 additions & 22 deletions

File tree

src/blocks/FlowExampleBlock.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,8 @@ export const FlowExampleBlock: Block = {
114114
{ label: "Aqua", value: "aqua" },
115115
{ label: "Blue", value: "blue" },
116116
{ label: "Pink", value: "pink" },
117+
{ label: "Lime", value: "lime" },
118+
{ label: "Magenta", value: "magenta" },
117119
],
118120
},
119121
{

src/blocks/ScrollCardBlock.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,14 @@ export const ScrollCardBlock: Block = {
8787
label: "Brand",
8888
value: "brand",
8989
},
90+
{
91+
label: "Lime",
92+
value: "lime",
93+
},
94+
{
95+
label: "Magenta",
96+
value: "magenta",
97+
},
9098
{
9199
label: "Neutral",
92100
value: "neutral",

src/blocks/StandaloneBlock.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,14 @@ export const StandaloneBlock: Block = {
8181
label: "Brand",
8282
value: "brand",
8383
},
84+
{
85+
label: "Lime",
86+
value: "lime",
87+
},
88+
{
89+
label: "Magenta",
90+
value: "magenta",
91+
},
8492
{
8593
label: "Neutral",
8694
value: "neutral",

src/components/SubscriptionConfigurator.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Card } from "./ui/Card"
1818

1919
type DeploymentMode = "self-hosted" | "cloud"
2020
type CustomerType = "b2b" | "b2c"
21-
type OptionAccent = "aqua" | "yellow" | "pink" | "blue" | "brand"
21+
type OptionAccent = "aqua" | "yellow" | "pink" | "blue" | "brand" | "lime" | "magenta"
2222
type SubscriptionSelection = {
2323
deployment: DeploymentMode
2424
customerType: CustomerType

src/components/cards/FeatureCard.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"
22
import { ReactNode } from "react"
33
import { Card } from "../ui/Card"
44

5-
type FeatureCardTone = "brand" | "aqua" | "blue" | "pink" | "yellow"
5+
type FeatureCardTone = "brand" | "aqua" | "blue" | "pink" | "yellow" | "lime" | "magenta"
66
type FeatureCardStyle = {
77
glow?: string
88
orb?: string
@@ -29,6 +29,14 @@ const toneStyles: Record<FeatureCardTone, Required<FeatureCardStyle>> = {
2929
glow: "from-yellow/22 via-yellow/8 to-transparent",
3030
orb: "bg-yellow/18",
3131
},
32+
lime: {
33+
glow: "from-lime/22 via-lime/8 to-transparent",
34+
orb: "bg-lime/18",
35+
},
36+
magenta: {
37+
glow: "from-magenta/22 via-magenta/8 to-transparent",
38+
orb: "bg-magenta/18",
39+
},
3240
}
3341

3442
interface FeatureCardProps {

src/components/nodes/NodeDisplay.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ import { IconNote, IconVariable } from "@tabler/icons-react"
66
import type { ReactNode } from "react"
77

88
export type NodeSegmentType = "text" | "literal" | "reference" | "node"
9-
export type NodeAccent = "brand" | "yellow" | "aqua" | "blue" | "pink"
9+
export type NodeAccent = "brand" | "yellow" | "aqua" | "blue" | "pink" | "lime" | "magenta"
1010

1111
const ICON_COLOR_MAP: Record<NodeAccent, string> = {
1212
brand: "var(--bg-brand)",
1313
yellow: "var(--bg-yellow)",
1414
aqua: "var(--bg-aqua)",
1515
blue: "var(--bg-blue)",
1616
pink: "var(--bg-pink)",
17+
lime: "var(--bg-lime)",
18+
magenta: "var(--bg-magenta)",
1719
}
1820

1921
export function getNodeAccentColor(accent: NodeAccent) {

src/components/ui/Card.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority"
55
import { cn } from "@/lib/utils"
66

77
const cardGradients = {
8-
blue: "rgba(114,201,248,0.2)",
9-
yellow: "rgba(248,241,114,0.2)",
10-
pink: "rgba(248,114,226,0.2)",
11-
aqua: "rgba(122,203,255,0.2)",
12-
brand: "rgba(145,232,120,0.2)",
13-
neutral: "rgba(255,255,255,0.1)",
8+
blue: "oklch(0.6232 0.1948 279.8 / 0.2)",
9+
yellow: "oklch(0.9391 0.1483 106.03 / 0.2)",
10+
pink: "oklch(0.7477 0.2075 334.16 / 0.2)",
11+
aqua: "oklch(0.7991 0.1074 233.93 / 0.2)",
12+
brand: "oklch(0.9018 0.165 157.04 / 0.2)",
13+
lime: "oklch(0.9332 0.1813 127.46 / 0.2)",
14+
magenta: "oklch(0.7321 0.2231 319.1 / 0.2)",
15+
neutral: "oklch(1 0 0 / 0.1)",
1416
} as const
1517

1618
const gradientDirections = {

src/globals/subscriptionConfig.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ const accentColorOptions = [
77
{ label: "Yellow", value: "yellow" },
88
{ label: "Aqua", value: "aqua" },
99
{ label: "Blue", value: "blue" },
10+
{ label: "Lime", value: "lime" },
11+
{ label: "Magenta", value: "magenta" },
1012
]
1113

1214
const iconField = payloadIconField({

src/lib/cms.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,13 +124,13 @@ export interface SubscriptionConfigData {
124124
title: string
125125
description: string
126126
icon: string
127-
color: "brand" | "pink" | "yellow" | "aqua" | "blue"
127+
color: "brand" | "pink" | "yellow" | "aqua" | "blue" | "lime" | "magenta"
128128
}
129129
cloud: {
130130
title: string
131131
description: string
132132
icon: string
133-
color: "brand" | "pink" | "yellow" | "aqua" | "blue"
133+
color: "brand" | "pink" | "yellow" | "aqua" | "blue" | "lime" | "magenta"
134134
}
135135
}
136136
customerType: {
@@ -139,13 +139,13 @@ export interface SubscriptionConfigData {
139139
title: string
140140
description: string
141141
icon: string
142-
color: "brand" | "pink" | "yellow" | "aqua" | "blue"
142+
color: "brand" | "pink" | "yellow" | "aqua" | "blue" | "lime" | "magenta"
143143
}
144144
b2c: {
145145
title: string
146146
description: string
147147
icon: string
148-
color: "brand" | "pink" | "yellow" | "aqua" | "blue"
148+
color: "brand" | "pink" | "yellow" | "aqua" | "blue" | "lime" | "magenta"
149149
}
150150
}
151151
paymentPeriod: {

src/payload-types.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -857,7 +857,7 @@ export interface Page {
857857
showImageBorder?: boolean | null;
858858
sectionLayout:
859859
'imageRight' | 'imageLeft' | 'imageFullscreen' | 'imageRightFullscreen' | 'imageLeftFullscreen';
860-
gradient?: ('blue' | 'yellow' | 'pink' | 'aqua' | 'brand' | 'neutral') | null;
860+
gradient?: ('blue' | 'yellow' | 'pink' | 'aqua' | 'brand' | 'lime' | 'magenta' | 'neutral') | null;
861861
gradientDirection?: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight') | null;
862862
bulletPoints?: string[] | null;
863863
image?: (number | null) | Media;
@@ -877,7 +877,7 @@ export interface Page {
877877
showImageBorder?: boolean | null;
878878
sectionLayout:
879879
'imageRight' | 'imageLeft' | 'imageFullscreen' | 'imageRightFullscreen' | 'imageLeftFullscreen';
880-
gradient?: ('blue' | 'yellow' | 'pink' | 'aqua' | 'brand' | 'neutral') | null;
880+
gradient?: ('blue' | 'yellow' | 'pink' | 'aqua' | 'brand' | 'lime' | 'magenta' | 'neutral') | null;
881881
gradientDirection?: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight') | null;
882882
bulletPoints?: string[] | null;
883883
image?: (number | null) | Media;
@@ -997,7 +997,7 @@ export interface Page {
997997
items?:
998998
| {
999999
icon: string;
1000-
color: 'brand' | 'yellow' | 'aqua' | 'blue' | 'pink';
1000+
color: 'brand' | 'yellow' | 'aqua' | 'blue' | 'pink' | 'lime' | 'magenta';
10011001
outline?: boolean | null;
10021002
segments: {
10031003
type: 'text' | 'literal' | 'reference' | 'node';
@@ -2544,13 +2544,13 @@ export interface SubscriptionConfig {
25442544
title?: string | null;
25452545
description?: string | null;
25462546
icon: string;
2547-
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue') | null;
2547+
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue' | 'lime' | 'magenta') | null;
25482548
};
25492549
cloud: {
25502550
title?: string | null;
25512551
description?: string | null;
25522552
icon: string;
2553-
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue') | null;
2553+
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue' | 'lime' | 'magenta') | null;
25542554
};
25552555
};
25562556
customerType: {
@@ -2559,13 +2559,13 @@ export interface SubscriptionConfig {
25592559
title?: string | null;
25602560
description?: string | null;
25612561
icon: string;
2562-
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue') | null;
2562+
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue' | 'lime' | 'magenta') | null;
25632563
};
25642564
b2c: {
25652565
title?: string | null;
25662566
description?: string | null;
25672567
icon: string;
2568-
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue') | null;
2568+
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue' | 'lime' | 'magenta') | null;
25692569
};
25702570
};
25712571
subscriptionTier: {
@@ -2574,13 +2574,13 @@ export interface SubscriptionConfig {
25742574
title?: string | null;
25752575
description?: string | null;
25762576
icon: string;
2577-
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue') | null;
2577+
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue' | 'lime' | 'magenta') | null;
25782578
};
25792579
team: {
25802580
title?: string | null;
25812581
description?: string | null;
25822582
icon: string;
2583-
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue') | null;
2583+
color?: ('brand' | 'pink' | 'yellow' | 'aqua' | 'blue' | 'lime' | 'magenta') | null;
25842584
};
25852585
};
25862586
paymentPeriod?: {

0 commit comments

Comments
 (0)