CSS Variables

Tip Top UI uses CSS variables (custom properties) to define colors, sizes, paddings and other properties. You can customize the CSS variables by defining them in your own stylesheets.

:root {
  --tipTop-color-primary: "#209f47";
  --tipTop-fontFamily-text: "Comic Sans";
}

Variable naming conventions

--tipTop-<ComponentName>-<partName>--<componentVariant>-<state>__<propertyGroup>-<propertyName>--<propertyVariant>: <value>;

• tipTop: Required prefix to avoid naming conflicts with third party CSS variables
• ComponentName: Pascal cased name of the component. Assumed to be the root or top most element of the component.
• partName: Part of the component. Examples:
  • child: The inner most element that contains the children prop
  • slot: The container around a slot
  • etc...
• componentVariant: Variant of the component. Examples:
  • primary
  • secondary
  • success
  • etc...
• state: State of the component. Examples:
  • hovered
  • focused
  • active
  • disabled
• propertyGroup: Namespace to group related properties together. Examples:
  • bgColorMix: Group all properties needed for a background color mix function
  • textColorMix: Group all properties needed for a text color mix function
• property: The required property of the CSS variable. Tends to match the a CSS property name. Examples:
  • color
  • fontSize
  • padding
  • margin
  • borderRadius
  • etc...
• propertyVariant: Variant of the property. Examples:
  • sm
  • md
  • lg
  • etc...

Only the tipTop prefix and the property are required. All other parts are optional and should only be included if they make sense for the specific CSS variable.

Root CSS Variables

note

Check the documentation for each component to see the component specific CSS variables that are available.

Colors

Variable	Value
--tipTop__color--primary	#0577b4
--tipTop__color--secondary	rgb(143, 69, 188)
--tipTop__color--neutral	#7e7e7e
--tipTop__color--danger	#9f2020
--tipTop__color--warning	#ffb700
--tipTop__color--success	#08a900
--tipTop__color--light	#fff
--tipTop__color--dark	#000
--tipTop__color--text	#3d3d3d
--tipTop__color--heading	#20299f

Spacing

Variable	Value	PX Equivalent
--tipTop__space--1	1px	1px
--tipTop__space--0	0	0px
--tipTop__space--0-5	0.125rem	2px
--tipTop__space--1	0.25rem	4px
--tipTop__space--1-5	0.375rem	6px
--tipTop__space--2	0.5rem	8px
--tipTop__space--2-5	0.625rem	10px
--tipTop__space--3	0.75rem	12px
--tipTop__space--3-5	0.875rem	14px
--tipTop__space--4	1rem	16px
--tipTop__space--5	1.25rem	20px
--tipTop__space--6	1.5rem	24px
--tipTop__space--7	1.75rem	28px
--tipTop__space--8	2rem	32px
--tipTop__space--9	2.25rem	36px
--tipTop__space--10	2.5rem	40px
--tipTop__space--11	2.75rem	44px
--tipTop__space--12	3rem	48px
--tipTop__space--14	3.5rem	56px
--tipTop__space--16	4rem	64px
--tipTop__space--20	5rem	80px
--tipTop__space--24	6rem	96px
--tipTop__space--28	7rem	112px
--tipTop__space--32	8rem	128px
--tipTop__space--36	9rem	144px
--tipTop__space--40	10rem	160px
--tipTop__space--44	11rem	176px
--tipTop__space--48	12rem	192px
--tipTop__space--52	13rem	208px
--tipTop__space--56	14rem	224px
--tipTop__space--60	15rem	240px
--tipTop__space--64	16rem	256px
--tipTop__space--72	18rem	288px
--tipTop__space--80	20rem	320px
--tipTop__space--96	24rem	384px

Border

Radius

Variable	Value
--tipTop__borderRadius--sm	0.125rem
--tipTop__borderRadius--normal	0.25rem
--tipTop__borderRadius--md	0.375rem
--tipTop__borderRadius--lg	0.5rem
--tipTop__borderRadius--xl	0.75rem
--tipTop__borderRadius--2xl	1rem
--tipTop__borderRadius--3xl	1.5rem
--tipTop__borderRadius--full	9999px

Width

Variable	Value
--tipTop__borderWidth--normal	1px
--tipTop__borderWidth--md	2px
--tipTop__borderWidth--lg	4px
--tipTop__borderWidth--xl	8px

Typography

Font Family

Variable	Value
--tipTop__fontFamily--heading	ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif
--tipTop__fontFamily--text	system-ui, Arial, "Helvetica Neue", Helvetica, sans-serif
--tipTop__fontFamily--mono	ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace

Font Size

Variable	Value	PX Equivalent
--tipTop__fontSize--2xs	0.625rem	10px
--tipTop__fontSize--xs	0.75rem	12px
--tipTop__fontSize--sm	0.875rem	14px
--tipTop__fontSize--normal	1rem	16px
--tipTop__fontSize--md	1.125rem	18px
--tipTop__fontSize--lg	1.25rem	20px
--tipTop__fontSize--xl	1.5rem	24px
--tipTop__fontSize--2xl	1.875rem	30px
--tipTop__fontSize--3xl	2.25rem	36px
--tipTop__fontSize--4xl	3rem	48px
--tipTop__fontSize--5xl	3.75rem	60px
--tipTop__fontSize--6xl	4.5rem	72px
--tipTop__fontSize--7xl	6rem	96px
--tipTop__fontSize--8xl	8rem	128px

Line Height

Variable	Value
--tipTop__lineHeight--3xs	.75rem
--tipTop__lineHeight--2xs	1rem
--tipTop__lineHeight--xs	1.25rem
--tipTop__lineHeight--sm	1.375rem
--tipTop__lineHeight--normal	1.5rem
--tipTop__lineHeight--md	1.625rem
--tipTop__lineHeight--lg	1.75rem
--tipTop__lineHeight--xl	2.25rem
--tipTop__lineHeight--2xl	2.5rem

Font Weight

Variable	Value
--tipTop__fontWeight--thin	100
--tipTop__fontWeight--extraLight	200
--tipTop__fontWeight--light	300
--tipTop__fontWeight--normal	400
--tipTop__fontWeight--medium	500
--tipTop__fontWeight--semiBold	600
--tipTop__fontWeight--bold	700
--tipTop__fontWeight--extraBold	800
--tipTop__fontWeight--black	900

Letter Spacing

Variable	Value
--tipTop__letterSpacing--tighter	-0.05em
--tipTop__letterSpacing--tight	-0.025em
--tipTop__letterSpacing--normal	0em
--tipTop__letterSpacing--wide	0.025em
--tipTop__letterSpacing--wider	0.05em
--tipTop__letterSpacing--widest	0.1em