@gitlab/ui 93.0.0 → 93.2.0

package/src/components/base/toggle/toggle.scss

@@ -23,9 +23,9 @@ $toggle-translate-width: 2 * $grid-size;
 $toggle-height: 2.5 * $grid-size;
 
 .gl-toggle-wrapper {
-  @include gl-line-height-normal;
-  @include gl-font-weight-normal;
-  @include gl-display-inline-flex;
+  @apply gl-leading-normal;
+  @apply gl-font-normal;
+  @apply gl-inline-flex;
 
   &.is-disabled {
     @include gl-cursor-not-allowed;
@@ -57,15 +57,15 @@ $toggle-height: 2.5 * $grid-size;
 .gl-help-label {
   @apply gl-mt-3;
   @include gl-text-gray-500;
-  @include gl-font-weight-normal;
+  @apply gl-font-normal;
 }
 
 .gl-toggle-label-inline {
-  @include gl-flex-direction-row;
-  @include gl-align-items-center;
+  @apply gl-flex-row;
+  @apply gl-items-center;
 
   .gl-toggle-label {
-    @include gl-white-space-nowrap;
+    @apply gl-whitespace-nowrap;
     @apply gl-mb-0;
     @apply gl-mr-3;
   }
@@ -77,13 +77,13 @@ $toggle-height: 2.5 * $grid-size;
 }
 
 .gl-toggle-label {
-  @include gl-font-weight-bold;
+  @apply gl-font-bold;
 }
 
 .gl-toggle {
-  @include gl-display-inline-flex;
-  @include gl-align-items-center;
-  @include gl-justify-content-center;
+  @apply gl-inline-flex;
+  @apply gl-items-center;
+  @apply gl-justify-center;
   @apply gl-border-0;
   @include gl-cursor-pointer;
   @include gl-bg-gray-600;
@@ -94,12 +94,12 @@ $toggle-height: 2.5 * $grid-size;
   user-select: none;
   @include gl-rounded-pill;
   @include gl-transition-slow;
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
 
   &::selection,
   &::before::selection,
   &::after::selection {
-    @include gl-bg-none;
+    @apply gl-bg-transparent;
   }
 
   &:hover,
@@ -123,12 +123,12 @@ $toggle-height: 2.5 * $grid-size;
     @include gl-rounded-full;
     @include gl-bg-white;
     position: absolute;
-    @include gl-display-inline-flex;
-    @include gl-align-items-center;
+    @apply gl-inline-flex;
+    @apply gl-items-center;
     left: $gl-spacing-scale-1;
     top: $gl-spacing-scale-1;
-    @include gl-transition-medium;
-    @include gl-justify-content-center;
+    @apply gl-transition-all;
+    @apply gl-justify-center;
     @apply gl-p-1;
 
     > svg {

package/src/components/base/token/token.scss

@@ -3,9 +3,9 @@
   @include gl-bg-gray-100;
   @include gl-rounded-small;
   @apply gl-pl-3;
-  @include gl-display-inline-flex;
-  @include gl-flex-direction-column;
-  @include gl-justify-content-center;
+  @apply gl-inline-flex;
+  @apply gl-flex-col;
+  @apply gl-justify-center;
 
   &.gl-token-view-only {
     @apply gl-py-2;
@@ -15,21 +15,21 @@
 
 .gl-token-search-type-variant {
   @include gl-bg-gray-100;
-  @include gl-rounded-top-right-none;
-  @include gl-rounded-bottom-right-none;
+  @apply gl-rounded-tr-none;
+  @apply gl-rounded-br-none;
 }
 
 .gl-token-search-value-variant {
-  @include gl-rounded-top-left-none;
-  @include gl-rounded-bottom-left-none;
+  @apply gl-rounded-tl-none;
+  @apply gl-rounded-bl-none;
 }
 
 .gl-token-content {
-  @include gl-font-sm;
-  @include gl-line-height-normal;
-  @include gl-display-flex;
-  @include gl-align-items-center;
-  @include gl-reset-color;
+  @apply gl-text-sm;
+  @apply gl-leading-normal;
+  @apply gl-flex;
+  @apply gl-items-center;
+  @apply gl-text-inherit;
 
   > .gl-avatar:first-child,
   > .gl-spinner-container:first-child {
@@ -39,7 +39,7 @@
 
 .gl-token-close {
   @apply gl-ml-2;
-  @include gl-reset-color;
+  @apply gl-text-inherit;
   @include gl-cursor-pointer;
 
   opacity: 0.8;

package/src/components/base/token/token.vue

@@ -35,6 +35,7 @@ export default {
   },
   computed: {
     variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return `gl-token-${this.variant}-variant`;
     },
     viewOnlyClass() {

package/src/components/base/tooltip/tooltip.scss

@@ -1,11 +1,11 @@
 .gl-tooltip {
-  @include gl-font-sm;
+  @apply gl-text-sm;
   @apply gl-p-2;
 
   .tooltip-inner {
     @apply gl-rounded-base;
-    @include gl-line-height-normal;
-    @include gl-font-weight-normal;
+    @apply gl-leading-normal;
+    @apply gl-font-normal;
     @apply gl-py-3;
     @apply gl-px-4;
     background: var(--gl-feedback-strong-background-color);

package/src/components/charts/legend/legend.scss

@@ -20,7 +20,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
     bottom: 0;
     content: '';
-    @include gl-display-block;
+    @apply gl-block;
     @include gl-h-4;
     position: absolute;
     @include gl-w-full;
@@ -28,20 +28,20 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 }
 
 .gl-legend-inline {
-    @include gl-display-flex;
+    @apply gl-flex;
     @include gl-flex-wrap;
-    @include gl-flex-shrink-0;
+    @apply gl-shrink-0;
 
   .gl-legend-inline-series {
-    @include gl-display-flex;
-    @include gl-flex-shrink-0;
-    @include gl-justify-content-space-between;
-    @include gl-align-items-center;
+    @apply gl-flex;
+    @apply gl-shrink-0;
+    @apply gl-justify-between;
+    @apply gl-items-center;
     @apply gl-pr-5;
 
     &:hover {
       @include gl-cursor-pointer;
-      @include gl-text-decoration-underline;
+      @apply gl-underline;
     }
 
     .gl-legend-inline-series-label {
@@ -52,22 +52,22 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
 .gl-legend-tabular {
   .gl-legend-tabular-header {
-    @include gl-display-flex;
-    @include gl-justify-content-end;
+    @apply gl-flex;
+    @apply gl-justify-end;
   }
 
   .gl-legend-tabular-header-cell,
   .gl-legend-tabular-details-cell {
-    @include gl-white-space-nowrap;
+    @apply gl-whitespace-nowrap;
     @include gl-overflow-hidden;
-    @include gl-text-overflow-ellipsis;
+    @apply gl-text-ellipsis;
     @include gl-text-right;
     @include gl-w-eighth;
   }
 
   .gl-legend-tabular-header-cell {
-    @include gl-font-weight-bold;
-    @include gl-line-height-24;
+    @apply gl-font-bold;
+    @apply gl-leading-24;
     @apply gl-px-3;
   }
 
@@ -77,7 +77,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   }
 
   .gl-legend-tabular-row {
-    @include gl-display-flex;
+    @apply gl-flex;
 
     &:nth-child(odd) {
       background-color: var(--gray-50, #{$gray-50});
@@ -86,12 +86,12 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
   .gl-legend-tabular-title-cell,
   .gl-legend-tabular-details-cell {
-    @include gl-line-height-24;
+    @apply gl-leading-24;
     @apply gl-px-3;
   }
 
   .gl-legend-tabular-title-cell {
     @include gl-overflow-hidden;
-    @include gl-w-half;
+    @apply gl-w-1/2;
   }
 }

package/src/components/charts/series_label/series_label.scss

@@ -1,16 +1,16 @@
 .gl-series-label-container {
-  @include gl-display-flex;
-  @include gl-font-base;
+  @apply gl-flex;
+  @apply gl-text-base;
   @include gl-overflow-hidden;
-  @include gl-overflow-wrap-break;
+  @apply gl-break-words;
 }
 
 .gl-series-label-color {
-  @include gl-flex-shrink-0;
+  @apply gl-shrink-0;
   @apply gl-mr-3;
 
   svg {
-    @include gl-display-block;
+    @apply gl-block;
   }
 }
 
@@ -19,5 +19,5 @@
   // as there are quite a few possible cases where
   // Prometheus queries return long labels with no spaces.
   @include gl-overflow-hidden;
-  @include gl-overflow-wrap-break;
+  @apply gl-break-words;
 }

package/src/components/charts/single_stat/single_stat.scss

@@ -1,5 +1,5 @@
 .gl-single-stat {
-  @include gl-line-height-1;
+  @apply gl-leading-1;
 
   &:hover[tabindex='0'] {
     @include gl-bg-gray-50;

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.md

@@ -6,3 +6,13 @@ mark the beginning of the conversation.
 ```html
 <gl-duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
 ```
+
+Translations for newChatLabel can be set via the props as documented or via translation configuration:
+
+```js
+setConfigs({
+  translations: {
+    'GlDuoWorkflowPrompt.newChat': __('New chat'),
+  },
+});
+```

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -1,8 +1,9 @@
 <script>
 import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+import { translate } from '../../../../../../utils/i18n';
 
 const i18n = {
-  CONVERSATION_NEW_CHAT: 'New chat',
+  CONVERSATION_NEW_CHAT: translate('GlDuoChatConversation.newChat', 'New chat'),
 };
 
 const isMessage = (item) => Boolean(item) && item?.role;

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.scss

@@ -1,5 +1,5 @@
 .duo-chat-loader {
-  @include gl-display-flex;
+  @apply gl-flex;
   @include gl-text-gray-500;
 
   .transition {

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.vue

@@ -1,11 +1,20 @@
 <script>
+import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {
-  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
-  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
-  GITLAB_DUO: 'GitLab Duo',
+  LOADER_LOADING_MESSAGE: translate(
+    'GlDuoChatLoader.loaderLoadingMessage',
+    '%{tool} is %{transition} an answer'
+  ),
+  LOADER_LOADING_TRANSITIONS: [
+    translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing'),
+  ],
+  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', 'GitLab Duo'),
 };
 
 export default {

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -7,13 +7,13 @@
   }
 
   pre {
-    @include gl-reset-color;
+    @apply gl-text-inherit;
     padding: $gl-spacing-scale-3 $gl-spacing-scale-4;
   }
 
   pre code {
-    @include gl-font-sm;
-    @include gl-line-height-1;
+    @apply gl-text-sm;
+    @apply gl-leading-1;
     @include gl-bg-transparent;
     white-space: inherit;
   }
@@ -25,7 +25,7 @@
   copy-code,
   insert-code-snippet {
     position: absolute;
-    @include gl-transition-medium;
+    @apply gl-transition-all;
     @include gl-opacity-0;
     right: $gl-spacing-scale-3;
     top: $gl-spacing-scale-3;

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -7,8 +7,8 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
 import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
-import { sprintf, translatePlural } from '../../../../../../utils/i18n';
 import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '../../constants';
+import { sprintf, translate, translatePlural } from '../../../../../../utils/i18n';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
@@ -18,14 +18,25 @@ import { concatUntilEmpty } from './utils';
 
 export const i18n = {
   MODAL: {
-    TITLE: 'Give feedback on GitLab Duo Chat',
-    ALERT_TEXT:
-      'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
-    DID_WHAT: 'What were you doing?',
-    INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
-    IMPROVE_WHAT: 'How could the response be improved?',
-    BETTER_RESPONSE: 'How the response might better meet your needs.',
-    MESSAGE_ERROR: 'Error sending the message',
+    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+    ALERT_TEXT: translate(
+      'GlDuoChatMessage.modalAlertText',
+      'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
+    ),
+    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
+    INTERACTION: translate(
+      'GlDuoChatMessage.modalInteraction',
+      'The situation in which you interacted with GitLab Duo Chat.'
+    ),
+    IMPROVE_WHAT: translate(
+      'GlDuoChatMessage.modalImproveWhat',
+      'How could the response be improved?'
+    ),
+    BETTER_RESPONSE: translate(
+      'GlDuoChatMessage.modalBetterResponse',
+      'How the response might better meet your needs.'
+    ),
+    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message'),
   },
 };
 

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue

@@ -1,11 +1,12 @@
 <script>
+import { translatePlural } from '../../../../../../utils/i18n';
 import GlIcon from '../../../../../base/icon/icon.vue';
 import GlLink from '../../../../../base/link/link.vue';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 
 export const i18n = {
-  MESSAGE_SOURCE: 'Source',
-  MESSAGE_SOURCES: 'Sources',
+  MESSAGE_SOURCE: (count = 1) =>
+    translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count),
 };
 
 export default {
@@ -25,7 +26,7 @@ export default {
   },
   computed: {
     sourceLabel() {
-      return this.sources.length > 1 ? i18n.MESSAGE_SOURCES : i18n.MESSAGE_SOURCES;
+      return i18n.MESSAGE_SOURCE(this.sources.length);
     },
   },
   methods: {
@@ -53,7 +54,7 @@ export default {
         }
       }
 
-      return i18n.MESSAGE_SOURCE;
+      return this.sourceLabel;
     },
   },
 };

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -37,16 +37,16 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
 .duo-chat-drawer {
   right: 0;
-  @include gl-transition-medium;
+  @apply gl-transition-all;
   position: fixed;
   @include gl-h-full;
   @include gl-w-full;
   @include gl-overflow-y-auto;
   @include gl-shadow-lg;
-  @include gl-font-base;
-  @include gl-line-height-normal;
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
+  @apply gl-flex;
+  @apply gl-flex-col;
 }
 
 .duo-chat-drawer-header {
@@ -60,7 +60,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-body {
-  @include gl-flex-grow-1;
+  @apply gl-grow;
   // prevent safari bug where box shadow is visible
   // above the drawer when hovering interactive elements
   // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
@@ -82,7 +82,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   &::before {
     background: $duo-chat-scrim-gradient;
     top: -$gl-border-size-1;
-    @include gl-translate-y-n100;
+    @apply -gl-translate-y-full;
     content: '';
     left: 0;
     position: absolute;
@@ -124,8 +124,8 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-input {
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
+  @apply gl-flex;
+  @apply gl-flex-col;
   max-height: 240px;
   overflow: hidden;
 
@@ -142,14 +142,14 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
   &::after {
     content: attr(data-value) ' ';
-    @include gl-visibility-hidden;
-    @include gl-white-space-pre-wrap;
+    @apply gl-invisible;
+    @apply gl-whitespace-pre-wrap;
     @apply gl-py-4;
   }
 }
 
 .slash-commands {
-  @include gl-mt-n2;
+  @apply -gl-mt-2;
 
   .active-command {
     @include gl-bg-gray-50;
@@ -157,12 +157,12 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   }
 
   .gl-dropdown-item button.dropdown-item {
-    @include gl-font-sm;
+    @apply gl-text-sm;
     @apply gl-px-3;
-    @include gl-bg-none;
+    @apply gl-bg-transparent;
 
     &:hover {
-      @include gl-bg-none;
+      @apply gl-bg-transparent;
     }
   }
 }

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -12,6 +12,7 @@ import GlForm from '../../../base/form/form.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
 import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
+import { translate } from '../../../../utils/i18n';
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
@@ -25,23 +26,49 @@ import {
 import { INCLUDE_SLASH_COMMAND } from './mock_data';
 
 export const i18n = {
-  CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
-  CHAT_CLOSE_LABEL: 'Close the Code Explanation',
-  CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
-  CHAT_EMPTY_STATE_TITLE: 'Ask a question',
-  CHAT_EMPTY_STATE_DESC: 'GitLab Duo Chat is your AI-powered assistant.',
-  CHAT_EMPTY_STATE_SECONDARY_DESC: 'Responses may be inaccurate. Verify before use.',
-  CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
-  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
-  CHAT_SUBMIT_LABEL: 'Send chat message.',
-  CHAT_CANCEL_LABEL: 'Cancel',
-  CHAT_LEGAL_DISCLAIMER:
-    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
+  CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
+  CHAT_LEGAL_GENERATED_BY_AI: translate(
+    'GlDuoChat.chatLegalGeneratedByAI',
+    'Responses generated by AI'
+  ),
+  CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
+  CHAT_EMPTY_STATE_DESC: translate(
+    'GlDuoChat.chatEmptyStateDesc',
+    'GitLab Duo Chat is your AI-powered assistant.'
+  ),
+  CHAT_EMPTY_STATE_SECONDARY_DESC: translate(
+    'GlDuoChat.chatEmptyStateSecondaryDesc',
+    'Responses may be inaccurate. Verify before use.'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
+    'GlDuoChat.chatPromptPlaceholderDefault',
+    'GitLab Duo Chat'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
+    'GlDuoChat.chatPromptPlaceholderWithCommands',
+    'Type "/" for slash commands'
+  ),
+  CHAT_SUBMIT_LABEL: translate('GlDuoChat.chatSubmitLabel', 'Send chat message.'),
+  CHAT_CANCEL_LABEL: translate('GlDuoChat.chatCancelLabel', 'Cancel'),
+  CHAT_LEGAL_DISCLAIMER: translate(
+    'GlDuoChat.chatLegalDisclaimer',
+    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data."
+  ),
   CHAT_DEFAULT_PREDEFINED_PROMPTS: [
-    'How do I change my password in GitLab?',
-    'How do I fork a project?',
-    'How do I clone a repository?',
-    'How do I create a template?',
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsChangePassword',
+      'How do I change my password in GitLab?'
+    ),
+    translate('GlDuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'),
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsCloneRepository',
+      'How do I clone a repository?'
+    ),
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate',
+      'How do I create a template?'
+    ),
   ],
 };
 

package/src/components/shared_components/charts/tooltip_default_format.scss

@@ -1,18 +1,18 @@
 .gl-charts-tooltip-default-format-series {
-  @include gl-display-flex;
-  @include gl-justify-content-space-between;
+  @apply gl-flex;
+  @apply gl-justify-between;
 
   &-label,
   &-value {
-    @include gl-font-sm;
+    @apply gl-text-sm;
   }
 
   &-label {
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
     @apply gl-mr-7;
   }
 
   &-value {
-    @include gl-font-weight-bold;
+    @apply gl-font-bold;
   }
 }