Skip to content
Commits on Source (5)
Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
View file @ 601a9a72
# [87.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.0.0...v87.1.0) (2024-07-24)
### Features
* **GlTabs:** Add animation ([0622f6a](https://gitlab.com/gitlab-org/gitlab-ui/commit/0622f6a2dd07ddc6f5d89bf9f56a9fd9c528a4a6))
# [87.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.15.0...v87.0.0) (2024-07-23)
......
package.json
View file @ 601a9a72
{
"name": "@gitlab/ui",
"version": "87.0.0",
"version": "87.1.0",
"description": "GitLab UI Components",
"license": "MIT",
"main": "dist/index.js",
......
src/components/base/tabs/tabs/tabs.scss
View file @ 601a9a72
......@@ -3,6 +3,7 @@
}
.gl-tab-nav-item {
position: relative;
@include gl-text-gray-900;
@include gl-px-4;
@include gl-py-5;
......@@ -11,15 +12,37 @@
@include gl-display-flex;
@include gl-justify-content-center;
@include gl-overflow-hidden;
transition: box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
border-radius $gl-transition-duration-fast $gl-easing-out-cubic;
&::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
border-bottom: $gl-border-size-2 solid transparent;
translate: 0 $gl-border-size-2;
transition: border-bottom $gl-transition-duration-medium $gl-easing-out-cubic,
translate $gl-transition-duration-medium $gl-easing-out-cubic;
}
transition: box-shadow 100ms linear;
@media (prefers-reduced-motion: reduce) {
&, &::before {
transition-duration: .01ms;
}
}
&:hover {
@include gl-text-gray-900;
}
&:not(.gl-tab-nav-item-active) {
@include gl-inset-border-b-2-gray-200;
}
&:hover:not(.gl-tab-nav-item-active)::before {
border-bottom-color: $gray-200;
translate: 0;
}
&:focus {
border-radius: $gl-border-radius-base;
}
&.disabled {
......@@ -48,13 +71,18 @@
.gl-tab-nav-item-active {
@include gl-font-weight-bold;
@include gl-text-gray-900;
@include gl-inset-border-b-2-blue-500;
z-index: 1;
&:active,
&:focus,
&:focus:active {
box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500, $focus-ring;
@include gl-outline-none;
@include gl-focus;
}
&::before {
border-bottom-color: $blue-500;
translate: 0;
}
}
......
src/tokens/build/css/tokens.css
View file @ 601a9a72
......@@ -417,7 +417,7 @@
--gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /* Used for the background of a neutral action in the hover state. */
--gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /* Used for the background of a neutral action in the default state. */
--gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
--gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
--gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success, completion, approval, addition, or validity. */
--gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
--gl-text-color-link: var(--gl-color-blue-700); /* Used for default text links. */
--gl-text-color-heading: var(--gl-color-neutral-950); /* Used for headings level 1-6. */
......
src/tokens/build/css/tokens.dark.css
View file @ 601a9a72
......@@ -417,7 +417,7 @@
--gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /* Used for the background of a neutral action in the hover state. */
--gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /* Used for the background of a neutral action in the default state. */
--gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
--gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
--gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success, completion, approval, addition, or validity. */
--gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
--gl-text-color-link: var(--gl-color-blue-300); /* Used for default text links. */
--gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */
......
src/tokens/build/js/tokens.dark.js
View file @ 601a9a72
......@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest co
export const GL_TEXT_COLOR_HEADING = '#fff'; // Used for headings level 1-6.
export const GL_TEXT_COLOR_LINK = '#63a6e9'; // Used for default text links.
export const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success, completion, approval, addition, or validity.
export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
src/tokens/build/js/tokens.js
View file @ 601a9a72
......@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest
export const GL_TEXT_COLOR_HEADING = '#18171d'; // Used for headings level 1-6.
export const GL_TEXT_COLOR_LINK = '#0b5cad'; // Used for default text links.
export const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.
export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success, completion, approval, addition, or validity.
export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
src/tokens/build/json/tokens.dark.json
View file @ 601a9a72
......@@ -13585,7 +13585,7 @@
"success": {
"value": "#52b87a",
"$type": "color",
"comment": "Used for text indicating success or validity.",
"comment": "Used for text indicating success, completion, approval, addition, or validity.",
"filePath": "src/tokens/text.tokens.json",
"isSource": true,
"original": {
......@@ -13594,7 +13594,7 @@
"dark": "{color.green.300}"
},
"$type": "color",
"comment": "Used for text indicating success or validity."
"comment": "Used for text indicating success, completion, approval, addition, or validity."
},
"name": "TEXT_COLOR_SUCCESS",
"attributes": {},
......
src/tokens/build/json/tokens.json
View file @ 601a9a72
......@@ -13585,7 +13585,7 @@
"success": {
"value": "#217645",
"$type": "color",
"comment": "Used for text indicating success or validity.",
"comment": "Used for text indicating success, completion, approval, addition, or validity.",
"filePath": "src/tokens/text.tokens.json",
"isSource": true,
"original": {
......@@ -13594,7 +13594,7 @@
"dark": "{color.green.300}"
},
"$type": "color",
"comment": "Used for text indicating success or validity."
"comment": "Used for text indicating success, completion, approval, addition, or validity."
},
"name": "TEXT_COLOR_SUCCESS",
"attributes": {},
......
src/tokens/build/scss/_tokens.dark.scss
View file @ 601a9a72
......@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); // Used f
$gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); // Used for the background of a neutral action in the hover state.
$gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used for the background of a neutral action in the default state.
$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
$gl-text-color-success: $gl-color-green-300; // Used for text indicating success or validity.
$gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
$gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
$gl-text-color-link: $gl-color-blue-300; // Used for default text links.
$gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
......
src/tokens/build/scss/_tokens.scss
View file @ 601a9a72
......@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); // Used for
$gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); // Used for the background of a neutral action in the hover state.
$gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used for the background of a neutral action in the default state.
$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
$gl-text-color-success: $gl-color-green-600; // Used for text indicating success or validity.
$gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
$gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
$gl-text-color-link: $gl-color-blue-700; // Used for default text links.
$gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
......
src/tokens/text.tokens.json
View file @ 601a9a72
......@@ -82,7 +82,7 @@
"dark": "{color.green.300}"
},
"$type": "color",
"$description": "Used for text indicating success or validity."
"$description": "Used for text indicating success, completion, approval, addition, or validity."
},
"disabled": {
"$value": {
......