@appscode/design-system 2.0.41-alpha.7 → 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.
- package/package.json +1 -1
- package/vue-components/styles/base/utilities/_colors.scss +4 -0
- package/vue-components/styles/base/utilities/_global.scss +2 -2
- package/vue-components/styles/base/utilities/_typography.scss +15 -1
- package/vue-components/styles/components/_button.scss +3 -0
- package/vue-components/styles/components/_table.scss +1 -1
- package/vue-components/styles/components/_terminal.scss +1 -1
- package/vue-components/styles/components/cards/_cluster.scss +5 -4
- package/vue-components/styles/components/cards/_monitoring.scss +1 -0
- package/vue-components/styles/components/cards/_vendor.scss +1 -1
- package/vue-components/styles/theme/_dark.scss +48 -0
- package/vue-components/v3/sidebar/Steps.vue +1 -1
package/package.json
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%);
|
|
@@ -154,7 +154,7 @@ hr {
|
|
|
154
154
|
.is-dark-theme {
|
|
155
155
|
.toasted-container {
|
|
156
156
|
i.fa {
|
|
157
|
-
color:
|
|
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;
|
|
@@ -6,7 +6,7 @@ $font-paragraph: "Roboto", sans-serif;
|
|
|
6
6
|
|
|
7
7
|
html,
|
|
8
8
|
body {
|
|
9
|
-
background-color:
|
|
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;
|
|
@@ -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
|
|
393
|
+
box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px $white-100;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
396
|
@keyframes expand {
|
|
@@ -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:
|
|
46
|
+
color: $color-heading;
|
|
46
47
|
}
|
|
47
48
|
.icon {
|
|
48
|
-
color:
|
|
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:
|
|
88
|
+
color: $color-label;
|
|
88
89
|
display: block;
|
|
89
90
|
}
|
|
90
91
|
strong {
|
|
91
|
-
color:
|
|
92
|
+
color: $color-heading;
|
|
92
93
|
font-size: 13px;
|
|
93
94
|
font-weight: 400;
|
|
94
95
|
}
|
|
@@ -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
|
+
// }
|