@gitlab/ui 93.0.0 → 93.2.0

package/src/scss/typescale/_index.scss

@@ -1,10 +1,10 @@
 @mixin gl-typescale-ui($selector: 'body') {
   #{$selector} {
-    @include gl-font-base;
+    @apply gl-text-base;
     @include gl-text-gray-900;
     @include gl-font-regular;
-    @include gl-font-weight-normal;
-    @include gl-line-height-normal;
+    @apply gl-font-normal;
+    @apply gl-leading-normal;
   }
 
   h1,
@@ -20,7 +20,7 @@
   .gl-h4,
   .gl-h5,
   .gl-h6 {
-    @include gl-font-weight-bold;
+    @apply gl-font-bold;
     @apply gl-mt-0;
     @apply gl-mb-0;
   }
@@ -44,29 +44,29 @@
 
   h3,
   .gl-h3 {
-    @include gl-font-lg;
-    @include gl-line-height-20;
+    @apply gl-text-lg;
+    @apply gl-leading-20;
   }
 
   h4,
   .gl-h4 {
-    @include gl-font-base;
-    @include gl-line-height-20;
+    @apply gl-text-base;
+    @apply gl-leading-20;
   }
 
   h5,
   .gl-h5,
   h6,
   .gl-h6 {
-    @include gl-font-base;
-    @include gl-line-height-20;
+    @apply gl-text-base;
+    @apply gl-leading-20;
     @include gl-text-gray-700;
   }
 
   p,
   .gl-paragraph {
-    @include gl-font-base;
-    @include gl-line-height-20;
+    @apply gl-text-base;
+    @apply gl-leading-20;
     @apply gl-mt-0;
     @apply gl-mb-0;
 
@@ -76,16 +76,16 @@
     }
 
     &.lg {
-      @include gl-line-height-24;
+      @apply gl-leading-24;
     }
   }
 
   .sm {
-    @include gl-font-sm;
+    @apply gl-text-sm;
   }
 
   .lg {
-    @include gl-font-lg;
+    @apply gl-text-lg;
   }
 
   .monospace {

package/src/tokens/build/css/tokens.css

@@ -426,6 +426,7 @@
   --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, 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-warning: var(--gl-color-orange-600); /* Used for text that requires caution or careful attention. */
   --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. */
   --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */

package/src/tokens/build/css/tokens.dark.css

@@ -426,6 +426,7 @@
   --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, 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-warning: var(--gl-color-orange-300); /* Used for text that requires caution or careful attention. */
   --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. */
   --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */

package/src/tokens/build/js/tokens.dark.js

@@ -904,6 +904,7 @@ export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3'; // Used for supplemental text tha
 export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest contrast.
 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_WARNING = '#d99530'; // Used for text that requires caution or careful attention.
 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, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

package/src/tokens/build/js/tokens.js

@@ -904,6 +904,7 @@ export const GL_TEXT_COLOR_SUBTLE = '#626168'; // Used for supplemental text tha
 export const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest contrast.
 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_WARNING = '#9e5400'; // Used for text that requires caution or careful attention.
 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, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

package/src/tokens/build/json/tokens.dark.json

@@ -20706,6 +20706,28 @@
           "link"
         ]
       },
+      "warning": {
+        "value": "#d99530",
+        "$type": "color",
+        "comment": "Used for text that requires caution or careful attention.",
+        "filePath": "src/tokens/text.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "comment": "Used for text that requires caution or careful attention."
+        },
+        "name": "TEXT_COLOR_WARNING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "warning"
+        ]
+      },
       "danger": {
         "value": "#f57f6c",
         "$type": "color",

package/src/tokens/build/json/tokens.json

@@ -20706,6 +20706,28 @@
           "link"
         ]
       },
+      "warning": {
+        "value": "#9e5400",
+        "$type": "color",
+        "comment": "Used for text that requires caution or careful attention.",
+        "filePath": "src/tokens/text.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "comment": "Used for text that requires caution or careful attention."
+        },
+        "name": "TEXT_COLOR_WARNING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "warning"
+        ]
+      },
       "danger": {
         "value": "#c91c00",
         "$type": "color",

package/src/tokens/build/scss/_tokens.dark.scss

@@ -424,6 +424,7 @@ $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used f
 $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, 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-warning: $gl-color-orange-300; // Used for text that requires caution or careful attention.
 $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.
 $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.

package/src/tokens/build/scss/_tokens.scss

@@ -424,6 +424,7 @@ $gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used f
 $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, 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-warning: $gl-color-orange-600; // Used for text that requires caution or careful attention.
 $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.
 $gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -904,6 +904,7 @@ $gl-text-color-subtle: var(--gl-text-color-subtle);
 $gl-text-color-strong: var(--gl-text-color-strong);
 $gl-text-color-heading: var(--gl-text-color-heading);
 $gl-text-color-link: var(--gl-text-color-link);
+$gl-text-color-warning: var(--gl-text-color-warning);
 $gl-text-color-danger: var(--gl-text-color-danger);
 $gl-text-color-success: var(--gl-text-color-success);
 $gl-text-color-disabled: var(--gl-text-color-disabled);

package/src/tokens/build/tailwind/tokens.cjs

@@ -209,6 +209,7 @@ const textColors = {
   strong: 'var(--gl-text-color-strong, var(--gl-color-neutral-950, #18171d))',
   heading: 'var(--gl-text-color-heading, var(--gl-color-neutral-950, #18171d))',
   link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
+  warning: 'var(--gl-text-color-warning, var(--gl-color-orange-600, #9e5400))',
   danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
   success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
   disabled: 'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',

package/src/tokens/text.tokens.json

@@ -68,6 +68,14 @@
         "$type": "color",
         "$description": "Used for default text links."
       },
+      "warning": {
+        "$value": {
+          "default": "{color.orange.600}",
+          "dark": "{color.orange.300}"
+        },
+        "$type": "color",
+        "$description": "Used for text that requires caution or careful attention."
+      },
       "danger": {
         "$value": {
           "default": "{color.red.600}",

package/src/utils/set_utils.js

@@ -0,0 +1,24 @@
+import isObject from 'lodash/isObject';
+
+/**
+ * Purpose is a substitute of Vue.set but with preserving reactivity
+ * New object can be assigned to data property of aa component
+ * @param source
+ * @param key
+ * @param value
+ * @returns {*}
+ */
+export const setObjectProperty = (source, key, value = '') => {
+  if (!source || !key || !isObject(source)) {
+    return {};
+  }
+
+  if (typeof key !== 'string') {
+    return source;
+  }
+
+  return {
+    ...source,
+    [key]: value,
+  };
+};

package/translations.js

@@ -11,12 +11,45 @@ export default {
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoChat.chatCancelLabel': 'Cancel',
+  'GlDuoChat.chatCloseLabel': 'Close the Code Explanation',
+  'GlDuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',
+  'GlDuoChat.chatDefaultPredefinedPromptsCloneRepository': 'How do I clone a repository?',
+  'GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
+  'GlDuoChat.chatDefaultPredefinedPromptsForkProject': 'How do I fork a project?',
+  'GlDuoChat.chatDefaultTitle': 'GitLab Duo Chat',
+  'GlDuoChat.chatEmptyStateDesc': 'GitLab Duo Chat is your AI-powered assistant.',
+  'GlDuoChat.chatEmptyStateSecondaryDesc': 'Responses may be inaccurate. Verify before use.',
+  'GlDuoChat.chatEmptyStateTitle': 'Ask a question',
+  'GlDuoChat.chatLegalDisclaimer':
+    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  'GlDuoChat.chatLegalGeneratedByAI': 'Responses generated by AI',
+  'GlDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
+  'GlDuoChat.chatPromptPlaceholderWithCommands': 'Type "/" for slash commands',
+  'GlDuoChat.chatSubmitLabel': 'Send chat message.',
   'GlDuoChatContextItemMenu.emptyStateMessage': 'No results found',
   'GlDuoChatContextItemMenu.loadingMessage': 'Loading...',
   'GlDuoChatContextItemMenu.searchInputPlaceholder': 'Search %{categoryLabel}...',
   'GlDuoChatContextItemMenu.selectedContextItemsTitle': 'Included references',
+  'GlDuoChatConversation.newChat': 'New chat',
+  'GlDuoChatLoader.gitlabDuo': 'GitLab Duo',
+  'GlDuoChatLoader.loaderLoadingMessage': '%{tool} is %{transition} an answer',
+  'GlDuoChatLoader.loaderLoadingTransitionsFinding': 'finding',
+  'GlDuoChatLoader.loaderLoadingTransitionsGenerating': 'generating',
+  'GlDuoChatLoader.loaderLoadingTransitionsProducing': 'producing',
+  'GlDuoChatLoader.loaderLoadingTransitionsWorkingOn': 'working on',
   'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
   'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
+  'GlDuoChatMessage.modalAlertText':
+    'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
+  'GlDuoChatMessage.modalBetterResponse': 'How the response might better meet your needs.',
+  'GlDuoChatMessage.modalDidWhat': 'What were you doing?',
+  'GlDuoChatMessage.modalImproveWhat': 'How could the response be improved?',
+  'GlDuoChatMessage.modalInteraction':
+    'The situation in which you interacted with GitLab Duo Chat.',
+  'GlDuoChatMessage.modalMessageError': 'Error sending the message',
+  'GlDuoChatMessage.modalTitle': 'Give feedback on GitLab Duo Chat',
+  'GlDuoChatMessageSources.messageSources': null,
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',
   'GlDuoWorkflowPanel.expandButtonTitle': 'Expand',
   'GlDuoWorkflowPrompt.cancelButtonText': 'Cancel',