@gitlab/ui 103.6.1 → 103.7.0

package/dist/tokens/build/js/tokens.dark.js

@@ -85,7 +85,7 @@ const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
 const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
 const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
 const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-const GL_BORDER_COLOR_SUBTLE = '#28272d';
+const GL_BORDER_COLOR_SUBTLE = '#3a383f';
 const GL_BORDER_COLOR_STRONG = '#626168';
 const GL_BORDER_COLOR_SECTION = '#18171d';
 const GL_BORDER_COLOR_TRANSPARENT = 'transparent';

package/dist/tokens/css/tokens.dark.css

@@ -460,7 +460,7 @@
   --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
   --gl-border-color-default: var(--gl-color-neutral-700); /* Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
+  --gl-border-color-subtle: var(--gl-color-neutral-800); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-600); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */

package/dist/tokens/js/tokens.dark.js

@@ -85,7 +85,7 @@ export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
 export const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
 export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-export const GL_BORDER_COLOR_SUBTLE = '#28272d';
+export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
 export const GL_BORDER_COLOR_STRONG = '#626168';
 export const GL_BORDER_COLOR_SECTION = '#18171d';
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';

package/dist/tokens/json/tokens.dark.json

@@ -1976,7 +1976,7 @@
         ]
       },
       "subtle": {
-        "$value": "#28272d",
+        "$value": "#3a383f",
         "$type": "color",
         "$description": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

package/dist/tokens/json/tokens.json

@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

package/dist/tokens/scss/_tokens.dark.scss

@@ -458,7 +458,7 @@ $gl-background-color-overlap: $gl-color-neutral-900; // Used for components, lik
 $gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
-$gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
+$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "103.6.1",
+  "version": "103.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/tokens/border.tokens.json

@@ -12,7 +12,7 @@
       "subtle": {
         "$value": {
           "default": "{color.neutral.50}",
-          "dark": "{color.neutral.900}"
+          "dark": "{color.neutral.800}"
         },
         "$type": "color",
         "$description": "Used for a subtle border in combination with the default background."

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

@@ -460,7 +460,7 @@
   --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
   --gl-border-color-default: var(--gl-color-neutral-700); /* Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
+  --gl-border-color-subtle: var(--gl-color-neutral-800); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-600); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */

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

@@ -85,7 +85,7 @@ export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
 export const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
 export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-export const GL_BORDER_COLOR_SUBTLE = '#28272d';
+export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
 export const GL_BORDER_COLOR_STRONG = '#626168';
 export const GL_BORDER_COLOR_SECTION = '#18171d';
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';

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

@@ -1976,7 +1976,7 @@
         ]
       },
       "subtle": {
-        "$value": "#28272d",
+        "$value": "#3a383f",
         "$type": "color",
         "$description": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

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

@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

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

@@ -458,7 +458,7 @@ $gl-background-color-overlap: $gl-color-neutral-900; // Used for components, lik
 $gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
-$gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
+$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.