@gitlab/ui 49.7.0 → 49.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [49.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.7.0...v49.8.0) (2022-11-11)
+
+
+### Features
+
+* Add brand colours to the variables list ([4baab55](https://gitlab.com/gitlab-org/gitlab-ui/commit/4baab5507f0b6209ede3acbab4b692502f539a6e))
+
 # [49.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.6.0...v49.7.0) (2022-11-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.7.0",
+  "version": "49.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,8 +78,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.7.0",

package/scss_to_js/scss_variables.js

@@ -102,6 +102,17 @@ export const gray700 = '#535158'
 export const gray800 = '#434248'
 export const gray900 = '#333238'
 export const gray950 = '#1f1e24'
+export const brandCharcoal = '#171321'
+export const brandOrange01 = '#fca326'
+export const brandOrange02 = '#fc6d26'
+export const brandOrange03 = '#e24329'
+export const brandPurple01 = '#a989f5'
+export const brandPurple02 = '#7759c2'
+export const brandGray01 = '#d1d0d3'
+export const brandGray02 = '#a2a1a6'
+export const brandGray03 = '#74717a'
+export const brandGray04 = '#45424d'
+export const brandGray05 = '#2b2838'
 export const themeIndigo50 = '#f1f1ff'
 export const themeIndigo100 = '#dbdbf8'
 export const themeIndigo200 = '#c7c7f2'

package/scss_to_js/scss_variables.json

@@ -547,6 +547,61 @@
       "value": "#1f1e24",
       "compiledValue": "#1f1e24"
     },
+    {
+      "name": "$brand-charcoal",
+      "value": "#171321",
+      "compiledValue": "#171321"
+    },
+    {
+      "name": "$brand-orange-01",
+      "value": "#fca326",
+      "compiledValue": "#fca326"
+    },
+    {
+      "name": "$brand-orange-02",
+      "value": "#fc6d26",
+      "compiledValue": "#fc6d26"
+    },
+    {
+      "name": "$brand-orange-03",
+      "value": "#e24329",
+      "compiledValue": "#e24329"
+    },
+    {
+      "name": "$brand-purple-01",
+      "value": "#a989f5",
+      "compiledValue": "#a989f5"
+    },
+    {
+      "name": "$brand-purple-02",
+      "value": "#7759c2",
+      "compiledValue": "#7759c2"
+    },
+    {
+      "name": "$brand-gray-01",
+      "value": "#d1d0d3",
+      "compiledValue": "#d1d0d3"
+    },
+    {
+      "name": "$brand-gray-02",
+      "value": "#a2a1a6",
+      "compiledValue": "#a2a1a6"
+    },
+    {
+      "name": "$brand-gray-03",
+      "value": "#74717a",
+      "compiledValue": "#74717a"
+    },
+    {
+      "name": "$brand-gray-04",
+      "value": "#45424d",
+      "compiledValue": "#45424d"
+    },
+    {
+      "name": "$brand-gray-05",
+      "value": "#2b2838",
+      "compiledValue": "#2b2838"
+    },
     {
       "name": "$theme-indigo-50",
       "value": "#f1f1ff",

package/src/scss/variables.scss

@@ -150,6 +150,19 @@ $gray-800: #434248 !default;
 $gray-900: #333238 !default;
 $gray-950: #1f1e24 !default;
 
+// Brand colours https://design.gitlab.com/brand-design/color
+$brand-charcoal: #171321 !default;
+$brand-orange-01: #fca326 !default;
+$brand-orange-02: #fc6d26 !default;
+$brand-orange-03: #e24329 !default;
+$brand-purple-01: #a989f5 !default;
+$brand-purple-02: #7759c2 !default;
+$brand-gray-01: #d1d0d3 !default;
+$brand-gray-02: #a2a1a6 !default;
+$brand-gray-03: #74717a !default;
+$brand-gray-04: #45424d !default;
+$brand-gray-05: #2b2838 !default;
+
 // The indigo light and indigo dark use $theme-indigo variables.
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-100: #dbdbf8 !default;