examples

Documentation

Index

• Variables

Variables

var Alerts = []gcss.Style{
	{
		Selector: ".alert",
		Props: gcss.Props{
			BackgroundColor: props.ColorTransparent(),
			BorderStyle:     props.BorderStyleSolid,
			BorderWidth:     props.UnitPx(1),
			BorderRadius:    radius,
			Padding:         spacing4,
		},
	},
	{
		Selector: ".alert-primary",
		Props: gcss.Props{
			BorderColor: primary,
			Color:       primary,
		},
	},
	{
		Selector: ".alert-destructive",
		Props: gcss.Props{
			BorderColor: destructive,
			Color:       destructive,
		},
	},
}

var Badges = []gcss.Style{
	{
		Selector: ".badge",
		Props: gcss.Props{
			AlignItems:    props.AlignItemsCenter,
			Display:       props.DisplayInlineFlex,
			BorderRadius:  radiusFull,
			FontSize:      fontXs,
			FontWeight:    props.FontWeightSemiBold,
			LineHeight:    leadingNone,
			PaddingTop:    spacing1,
			PaddingRight:  spacing3,
			PaddingBottom: spacing1,
			PaddingLeft:   spacing3,
		},
	},
	{
		Selector: ".badge-primary",
		Props: gcss.Props{
			BackgroundColor: primary,
			Color:           primaryForeground,
		},
	},
	{
		Selector: ".badge-secondary",
		Props: gcss.Props{
			BackgroundColor: secondary,
			Color:           secondaryForeground,
		},
	},
	{
		Selector: ".badge-destructive",
		Props: gcss.Props{
			BackgroundColor: destructive,
			Color:           destructiveForeground,
		},
	},
	{
		Selector: ".badge-outline",
		Props: gcss.Props{
			BackgroundColor: props.ColorTransparent(),
			Border: props.Border{
				Color: borderColor,
				Style: props.BorderStyleSolid,
				Width: props.UnitPx(1),
			},
		},
	},
}

var Buttons = []gcss.Style{
	{
		Selector: ".button",
		Props: gcss.Props{
			AlignItems:     props.AlignItemsCenter,
			BorderRadius:   radius,
			Display:        props.DisplayInlineFlex,
			FontSize:       fontSm,
			FontWeight:     props.FontWeightMedium,
			Height:         spacing10,
			JustifyContent: props.JustifyContentCenter,
			LineHeight:     leadingTight,
			PaddingTop:     spacing2,
			PaddingRight:   spacing4,
			PaddingBottom:  spacing2,
			PaddingLeft:    spacing4,
		},
	},
	{
		Selector: ".button-primary",
		Props: gcss.Props{
			BackgroundColor: primary,
			Color:           primaryForeground,
		},
	},
	{
		Selector: ".button-primary:hover",
		Props: gcss.Props{
			BackgroundColor: primary.Alpha(230),
		},
	},
	{
		Selector: ".button-secondary",
		Props: gcss.Props{
			BackgroundColor: secondary,
			Color:           secondaryForeground,
		},
	},
	{
		Selector: ".button-secondary:hover",
		Props: gcss.Props{
			BackgroundColor: secondary.Alpha(204),
		},
	},
	{
		Selector: ".button-destructive",
		Props: gcss.Props{
			BackgroundColor: destructive,
			Color:           destructiveForeground,
		},
	},
	{
		Selector: ".button-destructive:hover",
		Props: gcss.Props{
			BackgroundColor: destructive.Alpha(230),
		},
	},
	{
		Selector: ".button-outline",
		Props: gcss.Props{
			BackgroundColor: props.ColorTransparent(),
			Border: props.Border{
				Width: props.UnitPx(1),
				Style: props.BorderStyleSolid,
				Color: borderColor,
			},
		},
	},
	{
		Selector: ".button-outline:hover",
		Props: gcss.Props{
			BackgroundColor: secondary.Alpha(230),
		},
	},
	{
		Selector: ".button-ghost",
		Props: gcss.Props{
			BackgroundColor: props.ColorTransparent(),
		},
	},
	{
		Selector: ".button-ghost:hover",
		Props: gcss.Props{
			BackgroundColor: secondary.Alpha(230),
		},
	},
	{
		Selector: ".button-icon",
		Props: gcss.Props{
			BackgroundColor: props.ColorTransparent(),
			Border: props.Border{
				Width: props.UnitPx(1),
				Style: props.BorderStyleSolid,
				Color: borderColor,
			},
			Padding: props.UnitInitial(),
			Width:   spacing10,
		},
	},
	{
		Selector: ".button-icon:hover",
		Props: gcss.Props{
			BackgroundColor: secondary.Alpha(230),
		},
	},
}

var Form = []gcss.Style{
	{
		Selector: ".input",
		Props: gcss.Props{
			BackgroundColor: input,
			Border: props.Border{
				Width: props.UnitPx(1),
				Style: props.BorderStyleSolid,
				Color: borderColor,
			},
			BorderRadius:  radius,
			Display:       props.DisplayFlex,
			FontSize:      fontSm,
			Height:        spacing10,
			LineHeight:    leadingTight,
			PaddingTop:    spacing2,
			PaddingRight:  spacing3,
			PaddingBottom: spacing2,
			PaddingLeft:   spacing3,
			Width:         props.UnitPercent(100),
		},
	},
	{
		Selector: ".input::file-selector-button",
		Props: gcss.Props{
			BackgroundColor: props.ColorTransparent(),
			BorderWidth:     props.UnitRaw(0),
			FontSize:        fontSm,
			FontWeight:      props.FontWeightMedium,
		},
	},
	{
		Selector: ".input-label",
		Props: gcss.Props{
			FontSize:   fontSm,
			FontWeight: props.FontWeightMedium,
			LineHeight: leadingTight,
		},
	},
	{
		Selector: ".input-help",
		Props: gcss.Props{
			Color:    mutedForeground,
			FontSize: fontSm,
		},
	},
	{
		Selector: ".input-error",
		Props: gcss.Props{
			Color:    destructive,
			FontSize: fontSm,
		},
	},
	{
		Selector: ".select",
		Props: gcss.Props{
			BackgroundColor: input,
			Border: props.Border{
				Width: props.UnitPx(1),
				Style: props.BorderStyleSolid,
				Color: borderColor,
			},
			BorderRadius:  radius,
			Display:       props.DisplayFlex,
			FontSize:      fontSm,
			Height:        spacing10,
			LineHeight:    leadingTight,
			PaddingTop:    spacing2,
			PaddingRight:  spacing3,
			PaddingBottom: spacing2,
			PaddingLeft:   spacing3,
			Width:         props.UnitPercent(100),
		},
	},
	{
		Selector: ".select:not([size])",
		Props: gcss.Props{
			Appearance:       props.AppearanceNone,
			PaddingRight:     spacing10,
			PrintColorAdjust: props.PrintColorAdjustExact,
			BackgroundImage:  iconChevronDown,
			BackgroundPosition: props.BackgroundPositionEdges(
				props.BackgroundPositionEdge{Position: props.BackgroundPositionRight, Unit: spacing3},
				props.BackgroundPositionEdge{Position: props.BackgroundPositionCenter},
			),
			BackgroundRepeat: props.BackgroundRepeatNoRepeat,
			BackgroundSize:   props.BackgroundSizeDimension(props.UnitEm(1), props.UnitEm(1)),
		},
	},
}

var Tables = []gcss.Style{
	{
		Selector: ".table",
		Props: gcss.Props{
			CaptionSide: props.CaptionSideBottom,
			FontSize:    fontSm,
			LineHeight:  leadingTight,
			Width:       props.UnitPercent(100),
		},
	},
	{
		Selector: ".table-caption",
		Props: gcss.Props{
			MarginTop: spacing4,
		},
	},
	{
		Selector: ".table-tr",
		Props: gcss.Props{
			BorderBottom: props.Border{
				Width: props.UnitPx(1),
				Style: props.BorderStyleSolid,
				Color: borderColor,
			},
		},
	},
	{
		Selector: ".table-tfoot-tr",
		Props: gcss.Props{
			Color:           mutedForeground,
			BackgroundColor: muted,
		},
	},
	{
		Selector: ".table-td,.table-th",
		Props: gcss.Props{
			PaddingTop:    spacing2,
			PaddingRight:  spacing3,
			PaddingBottom: spacing2,
			PaddingLeft:   spacing3,
			TextAlign:     props.TextAlignLeft,
		},
	},
	{
		Selector: ".table-scroller",
		Props: gcss.Props{
			OverflowX: props.OverflowAuto,
		},
	},
}