@awes-io/ui 2.73.0 → 2.73.1

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 (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/assets/css/components/_index.css +1 -0
  3. package/assets/css/components/alert.css +6 -1
  4. package/assets/css/components/label.css +6 -0
  5. package/assets/css/components/page.css +1 -1
  6. package/assets/css/components/tooltip.css +3 -5
  7. package/assets/js/styles.js +93 -31
  8. package/components/1_atoms/AwLabel.vue +27 -5
  9. package/components/2_molecules/AwAlert.vue +23 -10
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.73.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.73.0...@awes-io/ui@2.73.1) (2023-10-06)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * colors from design system ([1ba4cc0](https://github.com/awes-io/client/commit/1ba4cc0204d34bd63a453b9942e81724b388e240))
12
+
13
+
14
+
15
+
16
+
6
17
  # [2.73.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.72.0...@awes-io/ui@2.73.0) (2023-09-29)
7
18
 
8
19
 
package/assets/css/components/_index.css CHANGED
@@ -46,6 +46,7 @@
46
46
  @import './info.css';
47
47
  @import './island.css';
48
48
  @import './island-avatar.css';
49
+ @import './label.css';
49
50
  @import './sub-headline.css';
50
51
  @import './address-block.css';
51
52
  @import './gmap.css';
package/assets/css/components/alert.css CHANGED
@@ -41,7 +41,8 @@
41
41
  margin-left: theme('spacing.4', 1rem);
42
42
  }
43
43
 
44
- .aw-icon, a {
44
+ .aw-icon,
45
+ a {
45
46
  color: var(--aw-alert-on-color);
46
47
  }
47
48
  }
@@ -51,6 +52,10 @@
51
52
  align-items: start;
52
53
  }
53
54
  }
55
+
56
+ &--color-default {
57
+ border: 1px solid var(--c-mono-800);
58
+ }
54
59
  }
55
60
 
56
61
  @screen lg {
package/assets/css/components/label.css ADDED
@@ -0,0 +1,6 @@
1
+ .aw-label {
2
+ @apply whitespace-no-wrap leading-none relative inline-block rounded-lg text-xs;
3
+
4
+ color: var(--aw-label-on-color, var(--c-on-surface, '#121212'));
5
+ background-color: var(--aw-label-bg, var(--c-surface, '#fafafa'));
6
+ }
package/assets/css/components/page.css CHANGED
@@ -58,7 +58,7 @@
58
58
  */
59
59
 
60
60
  .aw-page {
61
- @apply bg-mono-900;
61
+ @apply bg-page-bg;
62
62
  width: 100%;
63
63
  min-height: 100vh;
64
64
  /* min-height: -webkit-fill-available; */
package/assets/css/components/tooltip.css CHANGED
@@ -54,9 +54,7 @@
54
54
  }
55
55
  }
56
56
 
57
- :root[data-dark="true"] {
58
- .aw-tooltip {
59
- background-color: var(--c-surface);
60
- color: rgba(var(--c-on-surface-rgb), 0.9);
61
- }
57
+ :where(:root[data-dark='true']) .aw-tooltip {
58
+ background-color: var(--c-surface);
59
+ color: rgba(var(--c-on-surface-rgb), 0.9);
62
60
  }
package/assets/js/styles.js CHANGED
@@ -6,11 +6,12 @@ export default {
6
6
  accent: '#56af40',
7
7
  success: '#56af40',
8
8
  info: '#1d6ec5',
9
- notify: '#FFC230',
9
+ notify: '#ffc230',
10
10
  warning: '#fc8800',
11
- error: '#E9555B',
11
+ error: '#e9555b',
12
12
 
13
13
  surface: '#fff',
14
+ 'page-bg': '#f3f5f7',
14
15
  overlay: 'rgba(20, 23, 29, 0.4)',
15
16
  link: '#56af40',
16
17
 
@@ -25,7 +26,19 @@ export default {
25
26
  'mono-700': '#d7dbde',
26
27
  'mono-800': '#e7eaed',
27
28
  'mono-900': '#f3f5f7',
28
- 'mono-1000': '#fff'
29
+ 'mono-1000': '#fff',
30
+
31
+ red: '#fed9d9',
32
+ peach: '#ffe9e3',
33
+ yellow: '#fff2d9',
34
+ magenta: '#fddae9',
35
+ purple: '#ece1fc',
36
+ 'light-blue': '#daf4fe',
37
+ blue: '#e0e8ff',
38
+ green: '#ddefd9',
39
+ lime: '#f1f5d9',
40
+ grey: '#eceded',
41
+ 'light-grey': '#ecf0f5'
29
42
  },
30
43
 
31
44
  onColors: {
@@ -38,6 +51,7 @@ export default {
38
51
  error: '#fff',
39
52
 
40
53
  surface: '#14171d',
54
+ 'page-bg': '#14171d',
41
55
  overlay: '#fff',
42
56
  link: '#fff',
43
57
 
@@ -52,36 +66,61 @@ export default {
52
66
  'mono-700': '#333',
53
67
  'mono-800': '#333',
54
68
  'mono-900': '#383868',
55
- 'mono-1000': '#333'
69
+ 'mono-1000': '#333',
70
+
71
+ red: '#fa0000',
72
+ peach: '#ff6f41',
73
+ yellow: '#ffa800',
74
+ magenta: '#f4056c',
75
+ purple: '#8338ec',
76
+ 'light-blue': '#0ab7fa',
77
+ blue: '#2d67ff',
78
+ green: '#2bb611',
79
+ lime: '#a4bf00',
80
+ grey: '#565656',
81
+ 'light-grey': '#8b9aab'
56
82
  }
57
83
  },
58
84
  dark: {
59
85
  colors: {
60
- brand: '#1E1E1E',
61
- 'brand-tuned': '#1E1E1E',
86
+ brand: '#1e1e1e',
87
+ 'brand-tuned': '#1e1e1e',
62
88
  accent: '#56af40',
63
89
  success: '#56af40',
64
- info: '#4A7FE4',
65
- notify: '#FFC230',
90
+ info: '#4a7fe4',
91
+ notify: '#ffc230',
66
92
  warning: '#fc8800',
67
- error: '#E9555B',
93
+ error: '#e9555b',
68
94
 
69
95
  surface: '#313236',
96
+ 'page-bg': '#1e1e1e',
70
97
  overlay: 'rgba(0, 0, 0, 0.5)',
71
98
  link: '#56af40',
72
99
 
73
- 'mono-0': '#000',
74
- 'mono-50': '#fff',
75
- 'mono-100': '#14171d',
76
- 'mono-200': '#313236',
77
- 'mono-300': '#9A9A9A',
78
- 'mono-400': '#9A9A9A',
79
- 'mono-500': '#9A9A9A',
80
- 'mono-600': '#9A9A9A',
81
- 'mono-700': '#9A9A9A',
82
- 'mono-800': '#383838',
83
- 'mono-900': '#1E1E1E',
84
- 'mono-1000': '#1E1E1E'
100
+ 'mono-0': '#fff',
101
+ 'mono-50': '#f3f5f7',
102
+ 'mono-100': '#e7eaed',
103
+ 'mono-200': '#d7dbde',
104
+ 'mono-300': '#c1c4c7',
105
+ 'mono-400': '#838587',
106
+ 'mono-500': '#838587',
107
+ 'mono-600': '#595d62',
108
+ 'mono-700': '#46474a',
109
+ 'mono-800': '#373c46',
110
+ 'mono-900': '#383838',
111
+ 'mono-1000': '#313236',
112
+
113
+ red: '#431c1c',
114
+ peach: '#33160d',
115
+ yellow: '#3a2e17',
116
+ magenta: '#310116',
117
+ purple: '#271147',
118
+ 'light-blue': '#022532',
119
+ blue: '#202b49',
120
+ green: '#24331b',
121
+ lime: '#212600',
122
+ grey: '#060709',
123
+ 'light-grey': '#2c2e34'
85
124
  },
86
125
 
87
126
  onColors: {
@@ -94,21 +133,44 @@ export default {
94
133
  error: '#fff',
95
134
 
96
135
  surface: '#fff',
136
+ 'page-bg': '#fff',
97
137
  overlay: '#fff',
98
138
  link: '#fff',
99
139
 
100
- 'mono-0': '#fff',
101
- 'mono-50': '#161616',
102
- 'mono-100': '#161616',
103
- 'mono-200': '#fff',
104
- 'mono-300': '#fff',
105
- 'mono-400': '#9A9A9A',
106
- 'mono-500': '#161616',
107
- 'mono-600': '#161616',
108
- 'mono-700': '#313236',
140
+ 'mono-0': '#1e1e1e',
141
+ 'mono-50': '#1e1e1e',
142
+ 'mono-100': '#1e1e1e',
143
+ 'mono-200': '#1e1e1e',
144
+ 'mono-300': '#1e1e1e',
145
+ 'mono-400': '#1e1e1e',
146
+ 'mono-500': '#1e1e1e',
147
+ 'mono-600': '#fff',
148
+ 'mono-700': '#fff',
109
149
  'mono-800': '#fff',
110
150
  'mono-900': '#fff',
111
- 'mono-1000': '#fff'
151
+ 'mono-1000': '#fff',
152
+
153
+ red: '#fa0000',
154
+ peach: '#ff6f41',
155
+ yellow: '#ffa800',
156
+ magenta: '#f4056c',
157
+ purple: '#8338ec',
158
+ 'light-blue': '#0ab7fa',
159
+ blue: '#2d67ff',
160
+ green: '#2bb611',
161
+ lime: '#a4bf00',
162
+ grey: '#565656',
163
+ 'light-grey': '#8b9aab'
112
164
  }
113
165
  }
114
166
  }
167
+
168
+ export const toColor = (color) =>
169
+ (color || '').startsWith('#')
170
+ ? color
171
+ : `var(--c-${(color || '').toLowerCase()})`
172
+
173
+ export const toOnColor = (color) =>
174
+ (color || '').startsWith('#')
175
+ ? color
176
+ : `var(--c-on-${(color || '').replace(/^on-?/, '').toLowerCase()})`
package/components/1_atoms/AwLabel.vue CHANGED
@@ -1,12 +1,11 @@
1
1
  <template>
2
2
  <div
3
3
  v-if="label"
4
- class="whitespace-no-wrap leading-none relative inline-block rounded-lg bg-surface text-xs"
4
+ class="aw-label"
5
+ :style="styleVariables"
5
6
  >
6
7
  <span
7
- :class="`text-${color}`"
8
- class="relative inline-flex items-center leading-5 px-2 rounded-lg"
9
- :style="{ backgroundColor: `rgba(var(--c-${color}-rgb), .2)` }"
8
+ class="aw-label__wrapper relative inline-flex items-center leading-5 px-2 rounded-lg"
10
9
  >
11
10
  <AwIcon
12
11
  v-if="_icon === 'circle'"
@@ -44,6 +43,7 @@
44
43
 
45
44
  <script>
46
45
  import ICONS from '@AwUtils/icons/mono'
46
+ import { toColor, toOnColor } from '@AwUtils/styles'
47
47
 
48
48
  export default {
49
49
  name: 'AwLabel',
@@ -56,7 +56,12 @@ export default {
56
56
 
57
57
  color: {
58
58
  type: String,
59
- default: 'success'
59
+ default: 'green'
60
+ },
61
+
62
+ onColor: {
63
+ type: String,
64
+ default: ''
60
65
  },
61
66
 
62
67
  icon: {
@@ -85,6 +90,23 @@ export default {
85
90
  return this.isSystemIcon(this.iconSecond)
86
91
  ? 'AwIconSystemMono'
87
92
  : 'AwIcon'
93
+ },
94
+
95
+ isCustomColor() {
96
+ return this.color && this.color !== 'default'
97
+ },
98
+
99
+ styleVariables() {
100
+ return {
101
+ '--aw-label-bg': this.isCustomColor
102
+ ? toColor(this.color)
103
+ : null,
104
+ '--aw-label-on-color': this.onColor
105
+ ? toColor(this.onColor)
106
+ : this.isCustomColor
107
+ ? toOnColor(this.color)
108
+ : null
109
+ }
88
110
  }
89
111
  },
90
112
 
package/components/2_molecules/AwAlert.vue CHANGED
@@ -1,5 +1,9 @@
1
1
  <template>
2
- <div class="aw-alert" :style="styleVariables">
2
+ <div
3
+ class="aw-alert"
4
+ :class="{ 'aw-alert--color-default': isDefaultColor }"
5
+ :style="styleVariables"
6
+ >
3
7
  <AwDescription tag="div" class="aw-alert__title">
4
8
  <span v-if="icon || $scopedSlots.icon" class="aw-alert__icon">
5
9
  <slot name="icon">
@@ -22,6 +26,8 @@
22
26
  </template>
23
27
 
24
28
  <script>
29
+ import { toColor, toOnColor } from '@AwUtils/styles'
30
+
25
31
  export default {
26
32
  name: 'AwAlert',
27
33
 
@@ -33,7 +39,7 @@ export default {
33
39
 
34
40
  color: {
35
41
  type: String,
36
- default: ''
42
+ default: 'default'
37
43
  },
38
44
 
39
45
  onColor: {
@@ -53,17 +59,24 @@ export default {
53
59
  },
54
60
 
55
61
  computed: {
62
+ isCustomColor() {
63
+ return this.color && this.color !== 'default'
64
+ },
65
+
66
+ isDefaultColor() {
67
+ return this.color === 'default'
68
+ },
69
+
56
70
  styleVariables() {
57
71
  return {
58
- '--aw-alert-bg': this.color
59
- ? `var(--c-${this.color})`
60
- : 'current',
61
- '--aw-alert-border': this.onColor
62
- ? `var(--c-${this.onColor})`
63
- : 'var(--c-mono-800)',
72
+ '--aw-alert-bg': this.isCustomColor
73
+ ? toColor(this.color)
74
+ : null,
64
75
  '--aw-alert-on-color': this.onColor
65
- ? `var(--c-${this.onColor})`
66
- : 'current'
76
+ ? toColor(this.onColor)
77
+ : this.isCustomColor
78
+ ? toOnColor(this.color)
79
+ : null
67
80
  }
68
81
  }
69
82
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@awes-io/ui",
3
- "version": "2.73.0",
3
+ "version": "2.73.1",
4
4
  "description": "User Interface (UI) components",
5
5
  "keywords": [
6
6
  "ui",
@@ -112,5 +112,5 @@
112
112
  "rollup-plugin-visualizer": "^2.6.0",
113
113
  "rollup-plugin-vue": "^5.0.1"
114
114
  },
115
- "gitHead": "7082e9cda8b1588e4a644c5d802a1819c982de83"
115
+ "gitHead": "17d9d4b22c0424d7a3155d9eb8fa2d83206afd85"
116
116
  }