@appscode/design-system 2.0.54 → 2.0.55

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 (22) hide show
  1. package/main.scss +1 -0
  2. package/package.json +1 -1
  3. package/vue-components/styles/base/utilities/_colors.scss +28 -7
  4. package/vue-components/styles/base/utilities/_global.scss +1 -1
  5. package/vue-components/styles/base/utilities/_root-variables.scss +7 -0
  6. package/vue-components/styles/components/_dropdown.scss +2 -2
  7. package/vue-components/styles/components/_getkeeper.scss +1 -1
  8. package/vue-components/styles/components/_table.scss +2 -2
  9. package/vue-components/styles/components/_terminal.scss +16 -13
  10. package/vue-components/styles/components/cards/_vendor.scss +1 -1
  11. package/vue-components/styles/components/form-fields/_file-upload.scss +1 -1
  12. package/vue-components/styles/components/form-fields/_input-card.scss +1 -1
  13. package/vue-components/styles/components/form-fields/_input.scss +2 -2
  14. package/vue-components/styles/components/navbar/_menu-content.scss +4 -4
  15. package/vue-components/styles/components/navbar/_navbar.scss +1 -1
  16. package/vue-components/styles/components/navbar/_notification.scss +2 -2
  17. package/vue-components/styles/components/select-box/_multi-select.scss +9 -16
  18. package/vue-components/styles/components/sidebar/_left-sidebar.scss +2 -2
  19. package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss +1 -0
  20. package/vue-components/styles/components/ui-builder/_vue-open-api.scss +1 -1
  21. package/vue-components/styles/theme/_dark.scss +1 -1
  22. package/vue-components/v3/table/table-cell/ObjectCell.vue +1 -1
package/main.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  // COMPONENTS
20
20
  // @import "@/components/vue-components/styles/components/all";
21
21
  @import "@/components/vue-components/styles/components/button";
22
+ @import "@/components/vue-components/styles/components/terminal";
22
23
  @import "@/components/vue-components/styles/components/form-fields/input";
23
24
  @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
24
25
  @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.0.54",
3
+ "version": "2.0.55",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/styles/base/utilities/_colors.scss CHANGED
@@ -30,13 +30,34 @@ $primary-97: hsl($primary-hue, $primary-saturation, 97%);
30
30
  $primary-light-grey: hsl($primary-hue, 10%, 96%);
31
31
  $primary-dark-grey: hsl($primary-hue, 10%, 10%);
32
32
 
33
- $color-text: hsl($primary-hue, 10%, 35%);
34
- $color-heading: hsl($primary-hue, 10%, 10%);
35
- $color-label: hsl($primary-hue, 20%, 30%);
36
- $color-link: hsl($primary-hue, 40%, 20%);
37
- $color-border-light: hsl($primary-hue, 40%, 95%);
38
- $color-border: hsl($primary-hue, 10%, 90%);
39
- $color-border-dark: hsl($primary-hue, 10%, 80%);
33
+ $secondary-hue: var(--secondary-hue);
34
+ $secondary-saturation: var(--secondary-saturation);
35
+ $secondary-light: var(--secondary-light);
36
+ $secondary-5: hsl($secondary-hue, $secondary-saturation, 5%);
37
+ $secondary-10: hsl($secondary-hue, $secondary-saturation, 10%);
38
+ $ac-secondary: hsl($secondary-hue, $secondary-saturation, $secondary-light);
39
+ $secondary-20: hsl($secondary-hue, $secondary-saturation, 20%);
40
+ $secondary-30: hsl($secondary-hue, $secondary-saturation, 30%);
41
+ $secondary-40: hsl($secondary-hue, $secondary-saturation, 40%);
42
+ $secondary-50: hsl($secondary-hue, $secondary-saturation, 50%);
43
+ $secondary-60: hsl($secondary-hue, $secondary-saturation, 60%);
44
+ $secondary-70: hsl($secondary-hue, $secondary-saturation, 70%);
45
+ $secondary-80: hsl($secondary-hue, $secondary-saturation, 80%);
46
+ $secondary-90: hsl($secondary-hue, $secondary-saturation, 90%);
47
+ $secondary-93: hsl($secondary-hue, $secondary-saturation, 93%);
48
+ $secondary-95: hsl($secondary-hue, $secondary-saturation, 95%);
49
+ $secondary-97: hsl($secondary-hue, $secondary-saturation, 97%);
50
+
51
+ $secondary-light-grey: hsl($secondary-hue, 10%, 96%);
52
+ $secondary-dark-grey: hsl($secondary-hue, 10%, 10%);
53
+
54
+ $color-text: hsl($secondary-hue, 10%, 35%);
55
+ $color-heading: hsl($secondary-hue, 10%, 10%);
56
+ $color-label: hsl($secondary-hue, 20%, 30%);
57
+ $color-link: hsl($secondary-hue, 40%, 20%);
58
+ $color-border-light: hsl($secondary-hue, 40%, 95%);
59
+ $color-border: hsl($secondary-hue, 10%, 90%);
60
+ $color-border-dark: hsl($secondary-hue, 10%, 80%);
40
61
 
41
62
  // tweak sidebar bg color. update value (--sidebar-light)
42
63
  $color-sidebar: hsl(
package/vue-components/styles/base/utilities/_global.scss CHANGED
@@ -340,7 +340,7 @@ hr {
340
340
 
341
341
  .is-transparent {
342
342
  border: none;
343
- background-color: transparent;
343
+ background-color: transparent !important;
344
344
  }
345
345
 
346
346
  p.is-danger {
package/vue-components/styles/base/utilities/_root-variables.scss CHANGED
@@ -2,7 +2,14 @@
2
2
  // --primary-hue: 208;
3
3
  // --primary-saturation: 77%;
4
4
  // --primary-light: 40%;
5
+
6
+ // appscode green
5
7
  --primary-hue: 149;
6
8
  --primary-saturation: 100%;
7
9
  --primary-light: 30%;
10
+
11
+ // appscode dark
12
+ --secondary-hue: 196;
13
+ --secondary-saturation: 50%;
14
+ --secondary-light: 20%;
8
15
  }
package/vue-components/styles/components/_dropdown.scss CHANGED
@@ -24,8 +24,8 @@
24
24
  padding: 8px 16px;
25
25
  color: $color-text;
26
26
  &:hover {
27
- background-color: $primary-97;
28
- color: $ac-primary;
27
+ background-color: $primary-light-grey;
28
+ color: $color-heading;
29
29
  }
30
30
  }
31
31
  }
package/vue-components/styles/components/_getkeeper.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
  .middle-content {
17
17
  width: 40%;
18
- background-color: $primary-97;
18
+ background-color: $primary-light-grey;
19
19
  .header {
20
20
  padding: 4px 20px;
21
21
  border-bottom: 1px solid $color-border;
package/vue-components/styles/components/_table.scss CHANGED
@@ -115,7 +115,7 @@
115
115
  .tags {
116
116
  .tag {
117
117
  a {
118
- color: $ac-primary;
118
+ color: inherit;
119
119
  transition: 0.3s ease-in-out;
120
120
  font-weight: 500;
121
121
 
@@ -227,7 +227,7 @@
227
227
  thead {
228
228
  tr {
229
229
  th {
230
- background-color: $primary-light-grey;
230
+ background-color: $secondary-light-grey;
231
231
  border-top: 1px solid $color-border-light;
232
232
  border-bottom: 1px solid $color-border-light;
233
233
  border-right: 1px solid $color-border-light;
package/vue-components/styles/components/_terminal.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  position: fixed;
7
7
  width: calc(100% - 250px);
8
8
  bottom: 0;
9
- background-color: $primary-10;
9
+ background-color: rgb(28, 28, 28);
10
10
  color: $white-100;
11
11
  font-size: 13px;
12
12
  height: 360px;
@@ -44,18 +44,18 @@
44
44
  top: -15px;
45
45
 
46
46
  &:hover {
47
- border-bottom: 3px solid $color-border;
47
+ border-bottom: 3px solid $secondary-30;
48
48
  }
49
49
  }
50
50
 
51
51
  .terminal-header {
52
- border-top: 1px solid $color-border;
52
+ border-top: 1px solid $secondary-30;
53
53
  box-shadow: 1px -2px 5px 1px rgba(0, 0, 0, 0.08%);
54
- background-color: $primary-10;
54
+ background-color: $ac-secondary;
55
55
 
56
56
  .tabs {
57
57
  padding: 0 20px 0 20px;
58
- background-color: $primary-10;
58
+ background-color: $ac-secondary;
59
59
  overflow: inherit;
60
60
  height: 40px;
61
61
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  li {
70
70
  &.is-active {
71
- background-color: $primary-20;
71
+ background-color: $secondary-30;
72
72
  }
73
73
  a {
74
74
  margin-bottom: 0 !important;
@@ -141,7 +141,7 @@
141
141
  }
142
142
 
143
143
  .button {
144
- color: $color-border;
144
+ color: $secondary-30;
145
145
  }
146
146
  }
147
147
  }
@@ -209,7 +209,7 @@
209
209
  }
210
210
 
211
211
  .terminal-setting {
212
- background-color: $primary-5;
212
+ background-color: $secondary-5;
213
213
  padding: 5px 20px;
214
214
 
215
215
  .left-content {
@@ -222,7 +222,7 @@
222
222
 
223
223
  .multiselect .multiselect__tags .multiselect__input,
224
224
  .multiselect .multiselect__tags .multiselect__single {
225
- background-color: $primary-10;
225
+ background-color: $ac-secondary;
226
226
  }
227
227
  }
228
228
  }
@@ -265,14 +265,14 @@
265
265
  .button {
266
266
  &.is-transparent {
267
267
  &:hover {
268
- background-color: $color-border;
268
+ background-color: $secondary-30;
269
269
  }
270
270
  }
271
271
  }
272
272
 
273
273
  .multiselect.multiselect--active {
274
274
  .multiselect__tags {
275
- border: 1px solid $primary-30 !important;
275
+ border: 1px solid $color-border !important;
276
276
 
277
277
  .multiselect__input {
278
278
  color: $white-100 !important;
@@ -281,8 +281,11 @@
281
281
  }
282
282
 
283
283
  .multiselect .multiselect__tags {
284
- background-color: $primary-10;
285
- border: 1px solid $primary-20;
284
+ background-color: $ac-secondary;
285
+ border: 1px solid $secondary-30;
286
+ &:hover {
287
+ border-color: $secondary-40;
288
+ }
286
289
 
287
290
  span {
288
291
  color: $white-100;
package/vue-components/styles/components/cards/_vendor.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  justify-content: space-between;
9
- background-color: $primary-light-grey;
9
+ background-color: $secondary-light-grey;
10
10
  min-width: 215px;
11
11
  padding: 30px 20px 20px;
12
12
  cursor: pointer;
package/vue-components/styles/components/form-fields/_file-upload.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  border: 1px dashed $color-border-dark;
3
3
  border-radius: 4px;
4
4
  &:hover {
5
- background-color: $primary-light-grey;
5
+ background-color: $secondary-light-grey;
6
6
 
7
7
  label {
8
8
  .upload-icon {
package/vue-components/styles/components/form-fields/_input-card.scss CHANGED
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  &.is-disabled {
84
- background-color: $primary-97;
84
+ background-color: $primary-light-grey;
85
85
  cursor: not-allowed;
86
86
  opacity: 0.8;
87
87
 
package/vue-components/styles/components/form-fields/_input.scss CHANGED
@@ -544,7 +544,7 @@
544
544
  .file-cta {
545
545
  color: $color-heading;
546
546
  height: 100%;
547
- background-color: $primary-light-grey;
547
+ background-color: $secondary-light-grey;
548
548
  }
549
549
  &:hover {
550
550
  .file-cta,
@@ -559,7 +559,7 @@
559
559
  border: 1px dashed $color-border-dark;
560
560
  border-radius: 4px;
561
561
  &:hover {
562
- background-color: $primary-light-grey;
562
+ background-color: $secondary-light-grey;
563
563
  border-color: $ac-primary;
564
564
 
565
565
  label {
package/vue-components/styles/components/navbar/_menu-content.scss CHANGED
@@ -374,8 +374,8 @@
374
374
  gap: 8px;
375
375
 
376
376
  &:hover {
377
- background-color: $primary-97;
378
- color: $ac-primary;
377
+ background-color: $primary-light-grey;
378
+ color: $ac-secondary;
379
379
  }
380
380
  }
381
381
  }
@@ -433,14 +433,14 @@
433
433
  font-size: 13px;
434
434
  a {
435
435
  display: block;
436
- color: $primary-10 !important;
436
+ color: $color-heading !important;
437
437
  padding: 10px 20px !important;
438
438
  font-size: 13px !important;
439
439
  transition: 0.2s;
440
440
  border-bottom: 1px solid $color-border;
441
441
 
442
442
  &:hover {
443
- background-color: $primary-97 !important;
443
+ background-color: $primary-light-grey !important;
444
444
  }
445
445
 
446
446
  span {
package/vue-components/styles/components/navbar/_navbar.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  width: 100%;
6
6
  top: 0;
7
7
  z-index: 999;
8
- background-color: $primary-light-grey;
8
+ background-color: $secondary-light-grey;
9
9
  border-bottom: 1px solid $color-border;
10
10
 
11
11
  &.is-full {
package/vue-components/styles/components/navbar/_notification.scss CHANGED
@@ -49,9 +49,9 @@
49
49
  justify-content: space-between;
50
50
 
51
51
  &:hover {
52
- background-color: $primary-97;
52
+ background-color: $secondary-97;
53
53
  h6 {
54
- color: $ac-primary;
54
+ color: $ac-secondary;
55
55
  }
56
56
  }
57
57
  .round-icon {
package/vue-components/styles/components/select-box/_multi-select.scss CHANGED
@@ -25,6 +25,9 @@
25
25
  padding: 6px 30px 8px 20px;
26
26
  font-size: 13px;
27
27
  border-radius: 4px;
28
+ &:hover {
29
+ border-color: $ac-primary;
30
+ }
28
31
 
29
32
  .multiselect__placeholder {
30
33
  margin: 0;
@@ -112,30 +115,20 @@
112
115
  }
113
116
 
114
117
  &:hover {
115
- background-color: hsla(
116
- var(--hsl-hue),
117
- var(--hsl-saturation),
118
- var(--hsl-lightness),
119
- 0.2
120
- );
121
- color: $ac-primary;
118
+ background-color: $secondary-light-grey;
119
+ color: $ac-secondary;
122
120
  }
123
121
 
124
122
  &.multiselect__option--highlight {
125
123
  background-color: $white-100;
126
- color: $ac-primary;
124
+ color: $ac-secondary;
127
125
  &:hover {
128
- background-color: $primary-97;
126
+ background-color: $primary-light-grey;
129
127
  }
130
128
 
131
129
  &:after {
132
- background-color: hsla(
133
- var(--hsl-hue),
134
- var(--hsl-saturation),
135
- var(--hsl-lightness),
136
- 0.2
137
- );
138
- color: $ac-primary;
130
+ background-color: $secondary-light-grey;
131
+ color: $ac-secondary;
139
132
  }
140
133
  }
141
134
  }
package/vue-components/styles/components/sidebar/_left-sidebar.scss CHANGED
@@ -90,7 +90,7 @@
90
90
  font-weight: 500;
91
91
  font-size: 13px;
92
92
  line-height: 16px;
93
- color: $primary-97;
93
+ color: $white-100;
94
94
  position: relative;
95
95
  z-index: 1;
96
96
  padding: 10px 15px 10px 24px;
@@ -154,7 +154,7 @@
154
154
  }
155
155
 
156
156
  span {
157
- color: $primary-97;
157
+ color: $white-100;
158
158
 
159
159
  img {
160
160
  filter: brightness(10);
package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  opacity: 0;
31
31
  visibility: hidden;
32
32
  transition: 0.3s ease-in-out;
33
+ border: 1px solid $ac-primary;
33
34
  }
34
35
  &:hover {
35
36
  color: $ac-primary;
package/vue-components/styles/components/ui-builder/_vue-open-api.scss CHANGED
@@ -59,7 +59,7 @@
59
59
 
60
60
  .vue-form-scema-body {
61
61
  .left-content {
62
- background-color: $primary-97;
62
+ background-color: $primary-light-grey;
63
63
  border-right: 1px solid $color-border;
64
64
  padding: 30px;
65
65
  width: 500px;
package/vue-components/styles/theme/_dark.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  // $primary-95: hsl($primary-hue, $primary-saturation, 5%);
28
28
  // $primary-97: hsl($primary-hue, $primary-saturation, 3%);
29
29
 
30
- // $primary-light-grey: hsl($primary-hue, 30%, 20%);
30
+ // $secondary-light-grey: hsl($primary-hue, 30%, 20%);
31
31
  // $primary-dark-grey: hsl($primary-hue, 30%, 90%);
32
32
 
33
33
  // // white and black
package/vue-components/v3/table/table-cell/ObjectCell.vue CHANGED
@@ -69,7 +69,7 @@ const indexOfCharacterLengthExceed = computed(() => {
69
69
  indexOfCharacterLengthExceed
70
70
  )"
71
71
  :key="printableStringOb.key"
72
- modifierClasses="is-primary is-light"
72
+ modifierClasses="is-secondary is-light"
73
73
  >
74
74
  <value-with-modal
75
75
  v-if="printableStringOb.exceededLength"