solana-app-kit

---

solana-app-kit / components/tokenMill/BondingCurveConfigurator.styles / BondingCurveConfiguratorStyles

​

Variable: BondingCurveConfiguratorStyles

const BondingCurveConfiguratorStyles: object

Defined in: src/components/tokenMill/BondingCurveConfigurator.styles.ts:31

Styles for the BondingCurveConfigurator component

​

Type declaration

​

chartContainer

chartContainer: object

Container for the chart visualization

​

chartContainer.alignItems

alignItems: "center" = 'center'

​

chartContainer.marginVertical

marginVertical: number = 12

​

chartContainer.width

width: "100%" = '100%'

​

container

container: object

Main container for the entire component

​

container.backgroundColor

backgroundColor: string = '#fafafa'

​

container.borderRadius

borderRadius: number = 10

​

container.padding

padding: number = 16

​

container.width

width: "100%" = '100%'

​

curveSelectionContainer

curveSelectionContainer: object

Container for curve type selection buttons

​

curveSelectionContainer.flexDirection

flexDirection: "row" = 'row'

​

curveSelectionContainer.flexWrap

flexWrap: "wrap" = 'wrap'

​

curveSelectionContainer.justifyContent

justifyContent: "center" = 'center'

​

curveSelectionContainer.marginBottom

marginBottom: number = 16

​

curveTypeButton

curveTypeButton: object

Base style for curve type selection buttons

​

curveTypeButton.alignItems

alignItems: "center" = 'center'

​

curveTypeButton.backgroundColor

backgroundColor: string = '#eee'

​

curveTypeButton.borderRadius

borderRadius: number = 20

​

curveTypeButton.margin

margin: number = 4

​

curveTypeButton.minWidth

minWidth: number = 80

​

curveTypeButton.paddingHorizontal

paddingHorizontal: number = 12

​

curveTypeButton.paddingVertical

paddingVertical: number = 8

​

curveTypeButtonActive

curveTypeButtonActive: object

Style for the active curve type button

​

curveTypeButtonActive.backgroundColor

backgroundColor: string = '#333'

​

curveTypeButtonText

curveTypeButtonText: object

Text style for curve type button labels

​

curveTypeButtonText.color

color: string = '#444'

​

curveTypeButtonText.fontSize

fontSize: number = 14

​

curveTypeButtonText.fontWeight

fontWeight: "500" = '500'

​

curveTypeButtonTextActive

curveTypeButtonTextActive: object

Text style for active curve type button

​

curveTypeButtonTextActive.color

color: string = '#fff'

​

curveTypeButtonTextActive.fontWeight

fontWeight: "700" = '700'

​

label

label: object

Style for slider labels

​

label.color

color: string = '#555'

​

label.fontSize

fontSize: number = 14

​

label.fontWeight

fontWeight: "600" = '600'

​

readoutCell

readoutCell: object

Style for individual cells in the price readout table

​

readoutCell.color

color: string = '#444'

​

readoutCell.flex

flex: number = 1

​

readoutCell.fontSize

fontSize: number = 13

​

readoutCell.textAlign

textAlign: "center" = 'center'

​

readoutContainer

readoutContainer: object

Container for price readout information

​

readoutContainer.backgroundColor

backgroundColor: string = '#f9f9f9'

​

readoutContainer.borderRadius

borderRadius: number = 8

​

readoutContainer.marginTop

marginTop: number = 8

​

readoutContainer.padding

padding: number = 10

​

readoutContainer.width

width: "100%" = '100%'

​

readoutHeaderText

readoutHeaderText: object

Text style for readout table headers

​

readoutHeaderText.color

color: string = '#333'

​

readoutHeaderText.fontWeight

fontWeight: "700" = '700'

​

readoutRow

readoutRow: object

Style for each row in the price readout table

​

readoutRow.borderBottomColor

borderBottomColor: string = '#eee'

​

readoutRow.borderBottomWidth

borderBottomWidth: number = StyleSheet.hairlineWidth

​

readoutRow.flexDirection

flexDirection: "row" = 'row'

​

readoutRow.paddingVertical

paddingVertical: number = 4

​

readoutTableHeader

readoutTableHeader: object

Header row for the price readout table

​

readoutTableHeader.borderBottomColor

borderBottomColor: string = '#ccc'

​

readoutTableHeader.borderBottomWidth

borderBottomWidth: number = 1

​

readoutTableHeader.flexDirection

flexDirection: "row" = 'row'

​

readoutTableHeader.marginBottom

marginBottom: number = 6

​

readoutTableHeader.paddingBottom

paddingBottom: number = 4

​

readoutTitle

readoutTitle: object

Title for the price readout section

​

readoutTitle.color

color: string = '#333'

​

readoutTitle.fontSize

fontSize: number = 16

​

readoutTitle.fontWeight

fontWeight: "700" = '700'

​

readoutTitle.marginBottom

marginBottom: number = 6

​

readoutTitle.textAlign

textAlign: "center" = 'center'

​

sectionTitle

sectionTitle: object

Title text for each section

​

sectionTitle.color

color: string = '#333'

​

sectionTitle.fontSize

fontSize: number = 20

​

sectionTitle.fontWeight

fontWeight: "700" = '700'

​

sectionTitle.marginBottom

marginBottom: number = 16

​

sectionTitle.textAlign

textAlign: "center" = 'center'

​

slider

slider: object

Style for slider component

​

slider.marginBottom

marginBottom: number = 12

​

slider.width

width: "100%" = '100%'

​

sliderRow

sliderRow: object

Container for slider controls and their labels

​

sliderRow.flexDirection

flexDirection: "row" = 'row'

​

sliderRow.justifyContent

justifyContent: "space-between" = 'space-between'

​

sliderRow.marginBottom

marginBottom: number = 2

​

sliderRow.marginTop

marginTop: number = 8

​

sliderRow.width

width: "100%" = '100%'

​

valueText

valueText: object

Style for slider value display

​

valueText.color

color: string = '#111'

​

valueText.fontSize

fontSize: number = 14

​

valueText.fontWeight

fontWeight: "600" = '600'

​

Description

A comprehensive style object that defines the visual appearance of the BondingCurveConfigurator component. Includes styles for:

• Container layout and appearance
• Curve type selection buttons
• Slider controls and labels
• Chart container and dimensions
• Price readout table

The styles use a clean, modern design with:

• Consistent spacing and padding
• Clear visual hierarchy
• Responsive layout
• Platform-agnostic measurements