@appscode/design-system 2.0.54 → 2.0.55-alpha.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 (18) 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/_getkeeper.scss +1 -1
  7. package/vue-components/styles/components/_table.scss +1 -1
  8. package/vue-components/styles/components/_terminal.scss +12 -12
  9. package/vue-components/styles/components/cards/_vendor.scss +1 -1
  10. package/vue-components/styles/components/form-fields/_file-upload.scss +1 -1
  11. package/vue-components/styles/components/form-fields/_input-card.scss +1 -1
  12. package/vue-components/styles/components/form-fields/_input.scss +2 -2
  13. package/vue-components/styles/components/navbar/_navbar.scss +1 -1
  14. package/vue-components/styles/components/select-box/_multi-select.scss +3 -0
  15. package/vue-components/styles/components/sidebar/_left-sidebar.scss +2 -2
  16. package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss +1 -0
  17. package/vue-components/styles/theme/_dark.scss +1 -1
  18. 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-alpha.1",
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/_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
@@ -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: $ac-secondary;
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
  }
@@ -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,8 @@
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
286
 
287
287
  span {
288
288
  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/_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/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;
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/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"