@gitlab/ui 49.6.0 → 49.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/components/base/broadcast_message/broadcast_message.js +1 -1
  3. package/package.json +3 -3
  4. package/scss_to_js/scss_variables.js +11 -0
  5. package/scss_to_js/scss_variables.json +55 -0
  6. package/src/components/base/broadcast_message/broadcast_message.vue +2 -2
  7. package/src/scss/variables.scss +13 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ # [49.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.7.0...v49.8.0) (2022-11-11)
2
+
3
+
4
+ ### Features
5
+
6
+ * Add brand colours to the variables list ([4baab55](https://gitlab.com/gitlab-org/gitlab-ui/commit/4baab5507f0b6209ede3acbab4b692502f539a6e))
7
+
8
+ # [49.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.6.0...v49.7.0) (2022-11-10)
9
+
10
+
11
+ ### Features
12
+
13
+ * **BroadcastMessage:** Equal top and bottom margin ([8b548f1](https://gitlab.com/gitlab-org/gitlab-ui/commit/8b548f1b3f86f9d6586dfb0c63deb2d0aa3fdd97))
14
+ * **BroadcastMessage:** Refine alignment ([c59fc65](https://gitlab.com/gitlab-org/gitlab-ui/commit/c59fc65622d0bf8d64ebb4bb98c1f8676b9ad49d))
15
+
1
16
  # [49.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.5.1...v49.6.0) (2022-11-09)
2
17
 
3
18
 
package/dist/components/base/broadcast_message/broadcast_message.js CHANGED
@@ -52,7 +52,7 @@ var script = {
52
52
  const __vue_script__ = script;
53
53
 
54
54
  /* template */
55
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-broadcast-message",class:_vm.theme,attrs:{"role":"alert"}},[_c('div',{staticClass:"gl-broadcast-message-content"},[_c('div',{staticClass:"gl-broadcast-message-icon"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-broadcast-message-text"},[_vm._t("default")],2)]),_vm._v(" "),_c('close-button',{ref:"dismiss",staticClass:"gl-close-btn-color-inherit gl-broadcast-message-dismiss",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}})],1)};
55
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-broadcast-message",class:_vm.theme,attrs:{"role":"alert"}},[_c('div',{staticClass:"gl-broadcast-message-content"},[_c('div',{staticClass:"gl-broadcast-message-icon gl-line-height-normal"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-broadcast-message-text gl-my-n1"},[_vm._t("default")],2)]),_vm._v(" "),_c('close-button',{ref:"dismiss",staticClass:"gl-close-btn-color-inherit gl-broadcast-message-dismiss",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}})],1)};
56
56
  var __vue_staticRenderFns__ = [];
57
57
 
58
58
  /* style */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "49.6.0",
3
+ "version": "49.8.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -78,8 +78,8 @@
78
78
  },
79
79
  "devDependencies": {
80
80
  "@arkweid/lefthook": "0.7.7",
81
- "@babel/core": "^7.19.6",
82
- "@babel/preset-env": "^7.19.4",
81
+ "@babel/core": "^7.20.2",
82
+ "@babel/preset-env": "^7.20.2",
83
83
  "@gitlab/eslint-plugin": "18.1.0",
84
84
  "@gitlab/stylelint-config": "4.1.0",
85
85
  "@gitlab/svgs": "3.7.0",
package/scss_to_js/scss_variables.js CHANGED
@@ -102,6 +102,17 @@ export const gray700 = '#535158'
102
102
  export const gray800 = '#434248'
103
103
  export const gray900 = '#333238'
104
104
  export const gray950 = '#1f1e24'
105
+ export const brandCharcoal = '#171321'
106
+ export const brandOrange01 = '#fca326'
107
+ export const brandOrange02 = '#fc6d26'
108
+ export const brandOrange03 = '#e24329'
109
+ export const brandPurple01 = '#a989f5'
110
+ export const brandPurple02 = '#7759c2'
111
+ export const brandGray01 = '#d1d0d3'
112
+ export const brandGray02 = '#a2a1a6'
113
+ export const brandGray03 = '#74717a'
114
+ export const brandGray04 = '#45424d'
115
+ export const brandGray05 = '#2b2838'
105
116
  export const themeIndigo50 = '#f1f1ff'
106
117
  export const themeIndigo100 = '#dbdbf8'
107
118
  export const themeIndigo200 = '#c7c7f2'
package/scss_to_js/scss_variables.json CHANGED
@@ -547,6 +547,61 @@
547
547
  "value": "#1f1e24",
548
548
  "compiledValue": "#1f1e24"
549
549
  },
550
+ {
551
+ "name": "$brand-charcoal",
552
+ "value": "#171321",
553
+ "compiledValue": "#171321"
554
+ },
555
+ {
556
+ "name": "$brand-orange-01",
557
+ "value": "#fca326",
558
+ "compiledValue": "#fca326"
559
+ },
560
+ {
561
+ "name": "$brand-orange-02",
562
+ "value": "#fc6d26",
563
+ "compiledValue": "#fc6d26"
564
+ },
565
+ {
566
+ "name": "$brand-orange-03",
567
+ "value": "#e24329",
568
+ "compiledValue": "#e24329"
569
+ },
570
+ {
571
+ "name": "$brand-purple-01",
572
+ "value": "#a989f5",
573
+ "compiledValue": "#a989f5"
574
+ },
575
+ {
576
+ "name": "$brand-purple-02",
577
+ "value": "#7759c2",
578
+ "compiledValue": "#7759c2"
579
+ },
580
+ {
581
+ "name": "$brand-gray-01",
582
+ "value": "#d1d0d3",
583
+ "compiledValue": "#d1d0d3"
584
+ },
585
+ {
586
+ "name": "$brand-gray-02",
587
+ "value": "#a2a1a6",
588
+ "compiledValue": "#a2a1a6"
589
+ },
590
+ {
591
+ "name": "$brand-gray-03",
592
+ "value": "#74717a",
593
+ "compiledValue": "#74717a"
594
+ },
595
+ {
596
+ "name": "$brand-gray-04",
597
+ "value": "#45424d",
598
+ "compiledValue": "#45424d"
599
+ },
600
+ {
601
+ "name": "$brand-gray-05",
602
+ "value": "#2b2838",
603
+ "compiledValue": "#2b2838"
604
+ },
550
605
  {
551
606
  "name": "$theme-indigo-50",
552
607
  "value": "#f1f1ff",
package/src/components/base/broadcast_message/broadcast_message.vue CHANGED
@@ -52,10 +52,10 @@ export default {
52
52
  <template>
53
53
  <div class="gl-broadcast-message" :class="theme" role="alert">
54
54
  <div class="gl-broadcast-message-content">
55
- <div class="gl-broadcast-message-icon">
55
+ <div class="gl-broadcast-message-icon gl-line-height-normal">
56
56
  <gl-icon :name="iconName" />
57
57
  </div>
58
- <div class="gl-broadcast-message-text">
58
+ <div class="gl-broadcast-message-text gl-my-n1">
59
59
  <!-- @slot The broadcast message's text -->
60
60
  <slot></slot>
61
61
  </div>
package/src/scss/variables.scss CHANGED
@@ -150,6 +150,19 @@ $gray-800: #434248 !default;
150
150
  $gray-900: #333238 !default;
151
151
  $gray-950: #1f1e24 !default;
152
152
 
153
+ // Brand colours https://design.gitlab.com/brand-design/color
154
+ $brand-charcoal: #171321 !default;
155
+ $brand-orange-01: #fca326 !default;
156
+ $brand-orange-02: #fc6d26 !default;
157
+ $brand-orange-03: #e24329 !default;
158
+ $brand-purple-01: #a989f5 !default;
159
+ $brand-purple-02: #7759c2 !default;
160
+ $brand-gray-01: #d1d0d3 !default;
161
+ $brand-gray-02: #a2a1a6 !default;
162
+ $brand-gray-03: #74717a !default;
163
+ $brand-gray-04: #45424d !default;
164
+ $brand-gray-05: #2b2838 !default;
165
+
153
166
  // The indigo light and indigo dark use $theme-indigo variables.
154
167
  $theme-indigo-50: #f1f1ff !default;
155
168
  $theme-indigo-100: #dbdbf8 !default;