@appscode/design-system 2.0.41-alpha.6 → 2.0.41-alpha.8

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 (13) hide show
  1. package/package.json +1 -1
  2. package/vue-components/styles/base/utilities/_colors.scss +4 -0
  3. package/vue-components/styles/base/utilities/_global.scss +2 -2
  4. package/vue-components/styles/base/utilities/_typography.scss +15 -1
  5. package/vue-components/styles/components/_button.scss +3 -0
  6. package/vue-components/styles/components/_table.scss +1 -1
  7. package/vue-components/styles/components/_terminal.scss +1 -1
  8. package/vue-components/styles/components/cards/_cluster.scss +5 -4
  9. package/vue-components/styles/components/cards/_monitoring.scss +1 -0
  10. package/vue-components/styles/components/cards/_vendor.scss +1 -1
  11. package/vue-components/styles/theme/_appscode.scss +9 -24
  12. package/vue-components/styles/theme/_dark.scss +48 -0
  13. package/vue-components/v3/sidebar/Steps.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.0.41-alpha.6",
3
+ "version": "2.0.41-alpha.8",
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
@@ -3,6 +3,9 @@
3
3
  --primary-saturation: 77%;
4
4
  --primary-light: 40%;
5
5
  }
6
+ :root {
7
+ --theme-mode: light;
8
+ }
6
9
 
7
10
  // white and black
8
11
  $white-100: hsl(0, 0%, 100%);
@@ -12,6 +15,7 @@ $black-100: hsl(0, 0%, 0%);
12
15
  $primary-hue: var(--primary-hue);
13
16
  $primary-saturation: var(--primary-saturation);
14
17
  $primary-light: var(--primary-light);
18
+ $theme-mode: var(--theme-mode);
15
19
 
16
20
  $primary-5: hsl($primary-hue, $primary-saturation, 5%);
17
21
  $primary-10: hsl($primary-hue, $primary-saturation, 10%);
package/vue-components/styles/base/utilities/_global.scss CHANGED
@@ -154,7 +154,7 @@ hr {
154
154
  .is-dark-theme {
155
155
  .toasted-container {
156
156
  i.fa {
157
- color: #ffffff !important;
157
+ color: $white-100 !important;
158
158
  }
159
159
  }
160
160
  }
@@ -675,7 +675,7 @@ body:has(.has-info-content) {
675
675
 
676
676
  .tag:not(body) {
677
677
  &.is-primary {
678
- background-color: $primary;
678
+ background-color: $ac-primary;
679
679
  color: $white-100;
680
680
  &.is-light {
681
681
  color: $ac-primary;
package/vue-components/styles/base/utilities/_typography.scss CHANGED
@@ -6,7 +6,7 @@ $font-paragraph: "Roboto", sans-serif;
6
6
 
7
7
  html,
8
8
  body {
9
- background-color: transparent;
9
+ background-color: $white-100;
10
10
  font-family: $font-paragraph;
11
11
  font-weight: 400;
12
12
  font-size: 13px;
@@ -87,6 +87,20 @@ h6 {
87
87
  }
88
88
  }
89
89
 
90
+ .content {
91
+ h1,
92
+ h2,
93
+ h3,
94
+ h4,
95
+ h5,
96
+ h6 {
97
+ color: $color-heading;
98
+ }
99
+ p {
100
+ color: $color-text;
101
+ }
102
+ }
103
+
90
104
  a:not(.ac-button) {
91
105
  font-family: $font-paragraph;
92
106
  color: $ac-primary;
package/vue-components/styles/components/_button.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  .button {
2
+ color: $color-text;
3
+ background-color: $white-100;
4
+
2
5
  &.ac-button {
3
6
  padding: 8px 16px;
4
7
  font-weight: 500;
package/vue-components/styles/components/_table.scss CHANGED
@@ -390,7 +390,7 @@
390
390
  .table-inner-shadow {
391
391
  border-radius: 0px;
392
392
  background: $color-border;
393
- box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
393
+ box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px $white-100;
394
394
  }
395
395
 
396
396
  @keyframes expand {
package/vue-components/styles/components/_terminal.scss CHANGED
@@ -233,7 +233,7 @@
233
233
  text-align: center;
234
234
  padding: 4px 20px;
235
235
  border-radius: 4px;
236
- color: #ffffff !important;
236
+ color: $white-100 !important;
237
237
  text-transform: uppercase;
238
238
 
239
239
  &.is-success {
package/vue-components/styles/components/cards/_cluster.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  // cluster-card
2
+
2
3
  .card-details.cluster {
3
4
  border: 1px solid $color-border;
4
5
  padding: 24px 20px;
@@ -42,10 +43,10 @@
42
43
  h4 {
43
44
  font-size: 18px;
44
45
  line-height: 130%;
45
- color: #030d17;
46
+ color: $color-heading;
46
47
  }
47
48
  .icon {
48
- color: #0c365a;
49
+ color: $color-text;
49
50
  cursor: pointer;
50
51
  position: relative;
51
52
  z-index: 1;
@@ -84,11 +85,11 @@
84
85
 
85
86
  span {
86
87
  font-size: 11px;
87
- color: #666666;
88
+ color: $color-label;
88
89
  display: block;
89
90
  }
90
91
  strong {
91
- color: #061b2d;
92
+ color: $color-heading;
92
93
  font-size: 13px;
93
94
  font-weight: 400;
94
95
  }
package/vue-components/styles/components/cards/_monitoring.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  min-width: 290px;
6
6
  position: relative;
7
7
  border-radius: 2px;
8
+ background-color: $white-100;
8
9
 
9
10
  .required {
10
11
  position: absolute;
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-97;
9
+ background-color: $primary-light-grey;
10
10
  min-width: 215px;
11
11
  padding: 30px 20px 20px;
12
12
  cursor: pointer;
package/vue-components/styles/theme/_appscode.scss CHANGED
@@ -1,28 +1,13 @@
1
- $primary-hue: 149;
2
- $primary-saturation: 100%;
3
- $primary-5: hsl($primary-hue, $primary-saturation, 5%);
4
- $primary-10: hsl($primary-hue, $primary-saturation, 10%);
5
- $primary-20: hsl($primary-hue, $primary-saturation, 20%);
6
- $primary: hsl($primary-hue, $primary-saturation, 30%);
7
- $primary-30: hsl($primary-hue, $primary-saturation, 30%);
8
- $primary-40: hsl($primary-hue, $primary-saturation, 40%);
9
- $primary-50: hsl($primary-hue, $primary-saturation, 50%);
10
- $primary-60: hsl($primary-hue, $primary-saturation, 60%);
11
- $primary-70: hsl($primary-hue, $primary-saturation, 70%);
12
- $primary-80: hsl($primary-hue, $primary-saturation, 80%);
13
- $primary-90: hsl($primary-hue, $primary-saturation, 90%);
14
- $primary-93: hsl($primary-hue, $primary-saturation, 93%);
15
- $primary-95: hsl($primary-hue, $primary-saturation, 95%);
16
- $primary-97: hsl($primary-hue, $primary-saturation, 97%);
1
+ :root {
2
+ --primary-hue: 149;
3
+ --primary-saturation: 100%;
4
+ --primary-light: 30%;
5
+ }
6
+ $primary-hue: var(--primary-hue);
7
+ $primary-saturation: var(--primary-saturation);
8
+ $primary-light: var(--primary-light);
17
9
 
18
- $primary-light-grey: hsl($primary-hue, 30%, 96%);
19
- $primary-dark-grey: hsl($primary-hue, 30%, 10%);
10
+ $ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
20
11
 
21
- $color-text: hsl($primary-hue, 10%, 35%);
22
- $color-heading: hsl($primary-hue, 10%, 10%);
23
- $color-label: hsl($primary-hue, 20%, 50%);
24
- $color-link: hsl($primary-hue, 40%, 20%);
25
- $color-border-light: hsl($primary-hue, 30%, 95%);
26
12
  $color-border: hsl($primary-hue, 30%, 90%);
27
- $color-border-dark: hsl($primary-hue, 10%, 80%);
28
13
  $color-sidebar: hsl($primary-hue, $primary-saturation, 5%);
package/vue-components/styles/theme/_dark.scss ADDED
@@ -0,0 +1,48 @@
1
+ // :root {
2
+ // --primary-hue: 208;
3
+ // --primary-saturation: 77%;
4
+ // --primary-light: 40%;
5
+ // }
6
+ // :root {
7
+ // --theme-mode: dark;
8
+ // }
9
+ // // primary color guides
10
+ // $primary-hue: var(--primary-hue);
11
+ // $primary-saturation: var(--primary-saturation);
12
+ // $primary-light: var(--primary-light);
13
+ // $theme-mode: var(--theme-mode);
14
+
15
+ // $primary-5: hsl($primary-hue, $primary-saturation, 95%);
16
+ // $primary-10: hsl($primary-hue, $primary-saturation, 90%);
17
+ // $primary-20: hsl($primary-hue, $primary-saturation, 80%);
18
+ // $primary-30: hsl($primary-hue, $primary-saturation, 70%);
19
+ // $primary-40: hsl($primary-hue, $primary-saturation, 60%);
20
+ // $ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
21
+ // $primary-50: hsl($primary-hue, $primary-saturation, 50%);
22
+ // $primary-60: hsl($primary-hue, $primary-saturation, 40%);
23
+ // $primary-70: hsl($primary-hue, $primary-saturation, 30%);
24
+ // $primary-80: hsl($primary-hue, $primary-saturation, 20%);
25
+ // $primary-90: hsl($primary-hue, $primary-saturation, 10%);
26
+ // $primary-93: hsl($primary-hue, $primary-saturation, 7%);
27
+ // $primary-95: hsl($primary-hue, $primary-saturation, 5%);
28
+ // $primary-97: hsl($primary-hue, $primary-saturation, 3%);
29
+
30
+ // $primary-light-grey: hsl($primary-hue, 30%, 20%);
31
+ // $primary-dark-grey: hsl($primary-hue, 30%, 90%);
32
+
33
+ // // white and black
34
+ // $white-100: hsl($primary-hue, 50%, 5%);
35
+ // $black-100: hsl(0, 0%, 90%);
36
+
37
+ // $color-text: hsl($primary-hue, 10%, 80%);
38
+ // $color-heading: hsl($primary-hue, 10%, 90%);
39
+ // $color-label: hsl($primary-hue, 20%, 50%);
40
+ // $color-link: hsl($primary-hue, 40%, 80%);
41
+ // $color-border-light: hsl($primary-hue, 30%, 20%);
42
+ // $color-border: hsl($primary-hue, 30%, 20%);
43
+ // $color-border-dark: hsl($primary-hue, 10%, 30%);
44
+ // $color-sidebar: hsl($primary-hue, $primary-saturation, 10%);
45
+
46
+ // .ac-left-sidebar .menu-list.ac-menu-list li a {
47
+ // color: $color-text;
48
+ // }
package/vue-components/v3/sidebar/Steps.vue CHANGED
@@ -88,7 +88,7 @@ ul {
88
88
  cursor: pointer;
89
89
  strong {
90
90
  /* colors/white */
91
- color: #ffffff;
91
+ color: $white-100;
92
92
  display: flex;
93
93
  align-items: center;
94
94