Here below is the list of all CSS variables defined and their default values:
| CSS Property | Default Value | Description |
|---|---|---|
--gtb-color-space |
oklab | The color space used for color mixing. |
--gtb-base |
hsl(215deg 16.3% 46.9%) |
Defines the base color of the tabber component. |
--gtb-base-10 |
Result of color-mix function | Shade of the base color at 10% brightness. |
--gtb-base-20 |
Result of color-mix function | Shade of the base color at 20% brightness. |
--gtb-base-30 |
Result of color-mix function | Shade of the base color at 30% brightness. |
--gtb-base-40 |
Result of color-mix function | Shade of the base color at 40% brightness. |
--gtb-base-50 |
var(--gtb-base) | The base color itself. |
--gtb-base-60 |
Result of color-mix function | Shade of the base color at 60% brightness. |
--gtb-base-70 |
Result of color-mix function | Shade of the base color at 70% brightness. |
--gtb-base-80 |
Result of color-mix function | Shade of the base color at 80% brightness. |
--gtb-base-90 |
Result of color-mix function | Shade of the base color at 90% brightness. |
--gtb-base-lightest |
var(--gtb-base-10) | The lightest shade of the base color. |
--gtb-base-lighter |
var(--gtb-base-20) | A lighter shade of the base color. |
--gtb-base-light |
var(--gtb-base-40) | A light shade of the base color. |
--gtb-base-dark |
var(--gtb-base-60) | A dark shade of the base color. |
--gtb-base-darker |
var(--gtb-base-80) | A darker shade of the base color. |
--gtb-base-darkest |
var(--gtb-base-90) | The darkest shade of the base color. |
| CSS Property | Default Value | Description |
|---|---|---|
--gtb-color |
var(--gtb-base-darker) | The color used for text and icons in normal state. |
--gtb-color-hover |
var(--gtb-base-darkest) | The color used for text and icons on hover state. |
--gtb-color-focus |
var(--gtb-base-darkest) | The color used for text and icons on focus state. |
--gtb-color-active |
var(--gtb-base-darkest) | The color used for text and icons on active state. |
--gtb-bg |
hsl(0deg 0% 100%) |
The background color of the tabber component. |
--gtb-bg-hover |
var(--gtb-base-lightest) | The background color of the tabber on hover state. |
--gtb-bg-focus |
var(--gtb-base-lightest) | The background color of the tabber on focus state. |
--gtb-bg-active |
var(--gtb-bg) | The background color of the tabber on active state. |
--gtb-border-color |
var(--gtb-base-lighter) | The border color of the tabber component. |
--gtb-border-active |
var(--gtb-base-light) | The border color of the tabber on active state. |
--gtb-nav-bg |
var(--gtb-base-lighter) | The background color of the tab list. |
| CSS Property | Default Value | Description |
|---|---|---|
--gtb-root-width |
100% | The width of the tabber component. |
--gtb-root-max-width |
fit-content | The maximum width of the tabber component. |
--gtb-root-my |
0 | The margin on the y-axis of the tabber component. |
--gtb-root-mx |
0 | The margin on the x-axis of the tabber component. |
--gtb-root-py |
0 | The padding on the y-axis of the tabber component. |
--gtb-root-px |
0 | The padding on the x-axis of the tabber component. |
--gtb-root-border-width |
0 | The top border width of the tabber component. |
--gtb-root-border-style |
solid | The top border style of the tabber component. |
--gtb-root-border-color |
transparent | The top border color of the tabber component. |
--gtb-root-border-raiud |
0 | The top border radius of the tabber component. |
| CSS Property | Default Value | Description |
|---|---|---|
--gtb-tab-list-width |
auto | The width of the tab list. |
--gtb-tab-list-max-width |
calc(100% + 20%) | The maximum width of the tab list. |
--gtb-tab-list-alignment |
flex-start | The alignment of items within the tab list. |
--gtb-tab-list-my |
0 | The margin on the y-axis of the tab list. |
--gtb-tab-list-mx |
0 | The margin on the x-axis of the tab list. |
--gtb-tab-list-py |
0 | The padding on the y-axis of the tab list. |
--gtb-tab-list-px |
0 | The padding on the x-axis of the tab list. |
--gtb-tab-list-gap |
0.5em | The gap between tab list items. |
--gtb-tab-list-bg |
var(--gtb-bg) | The background color of the tab list. |
--gtb-tab-list-border-t-width |
0 | The top border width of the tab list. |
--gtb-tab-list-border-t-style |
solid | The top border style of the tab list. |
--gtb-tab-list-border-t-color |
var(--gtb-border-color) | The top border color of the tab list. |
--gtb-tab-list-border-r-width |
0 | The right border width of the tab list. |
--gtb-tab-list-border-r-style |
solid | The right border style of the tab list. |
--gtb-tab-list-border-r-color |
var(--gtb-border-color) | The right border color of the tab list. |
--gtb-tab-list-border-b-width |
0 | The bottom border width of the tab list. |
--gtb-tab-list-border-b-style |
solid | The bottom border style of the tab list. |
--gtb-tab-list-border-b-color |
var(--gtb-border-color) | The bottom border color of the tab list. |
--gtb-tab-list-border-l-width |
0 | The left border width of the tab list. |
--gtb-tab-list-border-l-style |
solid | The left border style of the tab list. |
--gtb-tab-list-border-l-color |
var(--gtb-border-color) | The left border color of the tab list. |
--gtb-tab-list-border-tl-radius |
0 | The top-left border radius of the tab list. |
--gtb-tab-list-border-tr-radius |
0 | The top-right border radius of the tab list. |
--gtb-tab-list-border-bl-radius |
0 | The bottom-left border radius of the tab list. |
--gtb-tab-list-border-br-radius |
0 | The bottom-right border radius of the tab list. |
| CSS Property | Default Value | Description |
|---|---|---|
--gtb-tab-py |
0.75em | The padding on the y-axis of the tab item. |
--gtb-tab-px |
1em | The padding on the x-axis of the tab item. |
--gtb-tab-color |
var(--gtb-color) | The color of the tab item. |
--gtb-tab-color-hover |
var(--gtb-color-hover) | The color of the tab item on hover. |
--gtb-tab-color-focus |
var(--gtb-color-focus) | The color of the tab item on focus. |
--gtb-tab-color-active |
var(--gtb-color-active) | The color of the active tab item. |
--gtb-tab-font-family |
inherit | The font family of the tab item. |
--gtb-tab-bg |
transparent | The background color of the tab item. |
--gtb-tab-bg-hover |
var(--gtb-bg-hover) | The background color of the tab item on hover. |
--gtb-tab-bg-focus |
var(--gtb-bg-focus) | The background color of the tab item on focus. |
--gtb-tab-bg-active |
var(--gtb-bg-active) | The background color of the active tab item. |
--gtb-tab-border-t-width |
0 | The top border width of the tab item. |
--gtb-tab-border-t-style |
solid | The top border style of the tab item. |
--gtb-tab-border-t-color |
var(--gtb-border-color) | The top border color of the tab item. |
--gtb-tab-border-r-width |
0 | The right border width of the tab item. |
--gtb-tab-border-r-style |
solid | The right border style of the tab item. |
--gtb-tab-border-r-color |
var(--gtb-border-color) | The right border color of the tab item. |
--gtb-tab-border-b-width |
0 | The bottom border width of the tab item. |
--gtb-tab-border-b-style |
solid | The bottom border style of the tab item. |
--gtb-tab-border-b-color |
var(--gtb-border-color) | The bottom border color of the tab item. |
--gtb-tab-border-l-width |
0 | The left border width of the tab item. |
--gtb-tab-border-l-style |
solid | The left border style of the tab item. |
--gtb-tab-border-l-color |
var(--gtb-border-color) | The left border color of the tab item. |
--gtb-tab-border-t-color-hover |
var(--gtb-tab-border-t-color) | The top border color of the tab item on hover. |
--gtb-tab-border-r-color-hover |
var(--gtb-tab-border-r-color) | The right border color of the tab item on hover. |
--gtb-tab-border-b-color-hover |
var(--gtb-tab-border-b-color) | The bottom border color of the tab item on hover. |
--gtb-tab-border-l-color-hover |
var(--gtb-tab-border-l-color) | The left border color of the tab item on hover. |
--gtb-tab-border-tl-radius |
0 | The top-left border radius of the tab item. |
--gtb-tab-border-tr-radius |
0 | The top-right border radius of the tab item. |
--gtb-tab-border-bl-radius |
0 | The bottom-left border radius of the tab item. |
--gtb-tab-border-br-radius |
0 | The bottom-right border radius of the tab item. |
--gtb-tab-ring-width |
0 | The width of the tab item's focus ring. |
--gtb-tab-ring-style |
solid | The style of the tab item's focus ring. |
--gtb-tab-ring-color |
var(--gtb-base-light) | The color of the tab item's focus ring. |
--gtb-tab-ring-offset |
0.125rem | The offset of the tab item's focus ring. |
--gtb-tab-icon-gap-x |
0.3em | The row gap between the icon and the tab label. |
--gtb-tab-icon-gap-y |
0.3em | The column gap between the icon and the tab label. |
--gtb-tab-icon-alignment |
row | The layout direction of the icon and tab label. |
| CSS Property | Default Value | Description |
|---|---|---|
--gtb-panel-width |
100% | The width of the tab panel. |
--gtb-panel-max-width |
680px | The maximum width of the tab panel. |
--gtb-panel-my |
0 | The margin on the y-axis of the tab panel. |
--gtb-panel-mx |
0 | The margin on the x-axis of the tab panel. |
--gtb-panel-py |
1.25em | The padding on the y-axis of the tab panel. |
--gtb-panel-px |
1.25em | The padding on the x-axis of the tab panel. |
--gtb-panel-color |
var(--gtb-base-darker) | The color of the tab panel. |
--gtb-panel-bg |
var(--gtb-bg) | The background color of the tab panel. |
--gtb-panel-border-t-width |
0 | The top border width of the tab panel. |
--gtb-panel-border-t-style |
solid | The top border style of the tab panel. |
--gtb-panel-border-t-color |
var(--gtb-border-color) | The top border color of the tab panel. |
--gtb-panel-border-r-width |
0 | The right border width of the tab panel. |
--gtb-panel-border-r-style |
solid | The right border style of the tab panel. |
--gtb-panel-border-r-color |
var(--gtb-border-color) | The right border color of the tab panel. |
--gtb-panel-border-b-width |
0 | The bottom border width of the tab panel. |
--gtb-panel-border-b-style |
solid | The bottom border style of the tab panel. |
--gtb-panel-border-b-color |
var(--gtb-border-color) | The bottom border color of the tab panel. |
--gtb-panel-border-l-width |
0 | The left border width of the tab panel. |
--gtb-panel-border-l-style |
solid | The left border style of the tab panel. |
--gtb-panel-border-l-color |
var(--gtb-border-color) | The left border color of the tab panel. |
--gtb-panel-border-tl-radius |
0 | The top-left border radius of the tab panel. |
--gtb-panel-border-tr-radius |
0 | The top-right border radius of the tab panel. |
--gtb-panel-border-bl-radius |
0 | The bottom-left border radius of the tab panel. |
--gtb-panel-border-br-radius |
0 | The bottom-right border radius of the tab panel. |