Here below is the list of all CSS variables defined and their default values:
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-color-space |
oklab | The color space used for color mixing. |
--gdd-primary |
hsl(215deg 16.3% 46.9%) |
Defines the primary color of the dropdown component. |
--gdd-primary-10 |
Result of color-mix function | Shade of the primary color at 10% brightness. |
--gdd-primary-20 |
Result of color-mix function | Shade of the primary color at 20% brightness. |
--gdd-primary-30 |
Result of color-mix function | Shade of the primary color at 30% brightness. |
--gdd-primary-40 |
Result of color-mix function | Shade of the primary color at 40% brightness. |
--gdd-primary-50 |
var(--gdd-primary) | The primary color itself. |
--gdd-primary-60 |
Result of color-mix function | Shade of the primary color at 60% brightness. |
--gdd-primary-70 |
Result of color-mix function | Shade of the primary color at 70% brightness. |
--gdd-primary-80 |
Result of color-mix function | Shade of the primary color at 80% brightness. |
--gdd-primary-90 |
Result of color-mix function | Shade of the primary color at 90% brightness. |
--gdd-primary-lightest |
var(--gdd-primary-10) | The lightest shade of the primary color. |
--gdd-primary-lighter |
var(--gdd-primary-20) | A lighter shade of the primary color. |
--gdd-primary-light |
var(--gdd-primary-30) | A light shade of the primary color. |
--gdd-primary-dark |
var(--gdd-primary-70) | A dark shade of the primary color. |
--gdd-primary-darker |
var(--gdd-primary-80) | A darker shade of the primary color. |
--gdd-primary-darkest |
var(--gdd-primary-90) | The darkest shade of the primary color. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-button-min-w |
4.5em | Minimum width of the dropdown button. |
--gdd-button-py |
1ch | Padding on the y-axis of the dropdown button. |
--gdd-button-px |
2ch | Padding on the x-axis of the dropdown button. |
--gdd-button-icon-space |
0.5ch | Space between the dropdown button label and icon. |
--gdd-button-font-size |
1rem | Font size of the dropdown button label. |
--gdd-button-font-family |
inherit | Font family of the dropdown button label. |
--gdd-button-font-weight |
500 | Font weight of the dropdown button label. |
--gdd-button-line-height |
1.25 | Line height of the dropdown button label. |
--gdd-button-letter-spacing |
0.025em | Letter spacing of the dropdown button label. |
--gdd-button-border-width |
1px | Border width of the dropdown button. |
--gdd-button-border-style |
solid | Border style of the dropdown button. |
--gdd-button-border-color |
transparent | Border color of the dropdown button. |
--gdd-button-border-radius |
0.25rem | Border radius of the dropdown button. |
--gdd-button-transition-property |
background | CSS property to transition for the dropdown button. |
--gdd-button-transition-duration |
300ms | Duration of the transition for the dropdown button. |
--gdd-button-transition-timing-function |
cubic-bezier(0.4, 0, 0.2, 1) | Timing function of the transition for the dropdown button. |
--gdd-button-ring-width |
2px | Width of the focus ring around the dropdown button. |
--gdd-button-ring-style |
solid | Style of the focus ring around the dropdown button. |
--gdd-button-ring-offset |
1px | Offset of the focus ring around the dropdown button. |
--gdd-button-animation-open-name |
flipOutX | Animation property (name) for button icon when dropdown is open. |
--gdd-button-animation-close-name |
flipInX | Animation property (name) for button icon when dropdown is close. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-button-color |
var(--gdd-primary-darker) | Text color of the dropdown button. |
--gdd-button-color-hover |
var(--gdd-primary-darker) | Text color of the dropdown button on hover. |
--gdd-button-color-focus |
var(--gdd-primary-darker) | Text color of the dropdown button on focus. |
--gdd-button-bg |
var(--gdd-primary-lightest) | Background color of the dropdown button. |
--gdd-button-bg-hover |
var(--gdd-primary-lighter) | Background color of the dropdown button on hover. |
--gdd-button-bg-focus |
var(--gdd-primary-lighter) | Background color of the dropdown button on focus. |
--gdd-button-ring-color |
var(--gdd-primary-light) | Color of the focus ring around the dropdown button. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-button-color |
var(--gdd-primary-lighter) | Text color of the dropdown button. |
--gdd-button-color-hover |
var(--gdd-primary-lighter) | Text color of the dropdown button on hover. |
--gdd-button-color-focus |
var(--gdd-primary-lighter) | Text color of the dropdown button on focus. |
--gdd-button-bg |
var(--gdd-primary-dark) | Background color of the dropdown button. |
--gdd-button-bg-hover |
var(--gdd-primary-darker) | Background color of the dropdown button on hover. |
--gdd-button-bg-focus |
var(--gdd-primary-darker) | Background color of the dropdown button on focus. |
--gdd-button-ring-color |
var(--gdd-primary) | Color of the focus ring around the dropdown button. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-content-w |
13rem | Width of the dropdown content. |
--gdd-content-max-w |
16rem | Maximum width of the dropdown content. |
--gdd-content-mx |
0 | Margin on the x-axis of the dropdown content. |
--gdd-content-my |
0.25em | Margin on the y-axis of the dropdown content. |
--gdd-content-px |
0.375em | Padding on the x-axis of the dropdown content. |
--gdd-content-py |
0.5em | Padding on the y-axis of the dropdown content. |
--gdd-content-border-width |
1px | Border width of the dropdown content. |
--gdd-content-border-style |
solid | Border style of the dropdown content. |
--gdd-content-border-radius |
0.25rem | Border radius of the dropdown content. |
--gdd-content-animation-entrance-duration |
0.3s | Duration of the entrance animation for the dropdown content. |
--gdd-content-animation-entrance-timing-function |
ease-in-out | Timing function of the entrance animation for the dropdown content. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-content-bg-color |
#ffffff |
Background color of the dropdown content. |
--gdd-content-border-color |
var(--gdd-primary-lighter) | Border color of the dropdown content. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-content-bg-color |
var(--gdd-primary-darker) | Background color of the dropdown content. |
--gdd-content-border-color |
var(--gdd-primary-darkest) | Border color of the dropdown content. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-item-px |
0.375em | Padding on the x-axis of the dropdown item. |
--gdd-item-py |
0.375em | Padding on the y-axis of the dropdown item. |
--gdd-item-icon-space |
1ch | Space between the dropdown item label and icon. |
--gdd-item-font-family |
inherit | Font family of the dropdown item label. |
--gdd-item-font-size |
1rem | Font size of the dropdown item label. |
--gdd-item-font-weight |
500 | Font weight of the dropdown item label. |
--gdd-item-line-height |
1.25 | Line height of the dropdown item label. |
--gdd-item-letter-spacing |
0.025em | Letter spacing of the dropdown item label. |
--gdd-item-border-width |
1px | Border width of the dropdown item. |
--gdd-item-border-style |
solid | Border style of the dropdown item. |
--gdd-item-border-color |
transparent | Border color of the dropdown item. |
--gdd-item-border-radius |
0.25rem | Border radius of the dropdown item. |
--gdd-item-ring-width |
1px | Width of the focus ring around the dropdown item. |
--gdd-item-ring-style |
solid | Style of the focus ring around the dropdown item. |
--gdd-item-ring-offset |
0 | Offset of the focus ring around the dropdown item. |
--gdd-item-ring-color |
transparent | Color of the focus ring around the dropdown item. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-item-color |
var(--gdd-primary-dark) | Color of the item text. |
--gdd-item-color-hover |
var(--gdd-primary-darker) | Color of the item text on hover. |
--gdd-item-color-focus |
var(--gdd-primary-darker) | Color of the item text on focus. |
--gdd-item-bg |
transparent | Background color of the item. |
--gdd-item-bg-hover |
var(--gdd-primary-lightest) | Background color of the item on hover. |
--gdd-item-bg-focus |
var(--gdd-primary-lightest) | Background color of the item on focus. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-item-color |
var(--gdd-primary-light) | Color of the item text. |
--gdd-item-color-hover |
var(--gdd-primary-lightest) | Color of the item text on hover. |
--gdd-item-color-focus |
var(--gdd-primary-lightest) | Color of the item text on focus. |
--gdd-item-bg |
transparent | Background color of the item. |
--gdd-item-bg-hover |
var(--gdd-primary-60) | Background color of the item on hover. |
--gdd-item-bg-focus |
var(--gdd-primary-60) | Background color of the item on focus. |
| CSS Property | Default Value | Description |
|---|---|---|
--gdd-item-divider-width |
1px | Width of the divider between dropdown items. |
--gdd-item-divider-style |
solid | Style of the divider between dropdown items (e.g., solid, dashed). |
--gdd-item-divider-color |
var(--gdd-primary) | Color of the item divider. |