@appscode/design-system 2.4.27-alpha-2 → 2.4.27-alpha-4
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
CHANGED
|
@@ -56,16 +56,7 @@ $secondary-dark-grey: hsl($secondary-hue, 10%, 10%);
|
|
|
56
56
|
$secondary-light-gray: hsl($secondary-hue, 10%, 96%);
|
|
57
57
|
$secondary-dark-gray: hsl($secondary-hue, 10%, 10%);
|
|
58
58
|
|
|
59
|
-
$color-text: hsl($secondary-hue, 10%, 25%);
|
|
60
|
-
$color-heading: hsl($secondary-hue, 10%, 10%);
|
|
61
|
-
$color-label: hsl($secondary-hue, 20%, 30%);
|
|
62
|
-
$color-link: hsl($secondary-hue, 40%, 20%);
|
|
63
|
-
$color-border-light: hsl($secondary-hue, 40%, 95%);
|
|
64
|
-
$color-border: hsl($secondary-hue, 10%, 90%);
|
|
65
|
-
$color-border-dark: hsl($secondary-hue, 10%, 80%);
|
|
66
|
-
|
|
67
59
|
// tweak sidebar bg color. update value (--sidebar-light)
|
|
68
|
-
$color-sidebar: hsl($primary-hue, $primary-saturation, var(--sidebar-light, 5%));
|
|
69
60
|
|
|
70
61
|
// green color guides
|
|
71
62
|
$green-hue: 141;
|
|
@@ -190,6 +181,17 @@ $slate-80: #e2e8f0;
|
|
|
190
181
|
$slate-90: #f1f5f9;
|
|
191
182
|
$slate-95: #f8fafc;
|
|
192
183
|
|
|
184
|
+
$color-text: $slate-40;
|
|
185
|
+
$color-heading: $slate-5;
|
|
186
|
+
$color-label: $slate-30;
|
|
187
|
+
$color-link: $slate-20;
|
|
188
|
+
$color-border-light: $slate-90;
|
|
189
|
+
$color-border: $slate-80;
|
|
190
|
+
$color-border-dark: $slate-70;
|
|
191
|
+
|
|
192
|
+
// $color-sidebar: hsl($primary-hue, $primary-saturation, var(--sidebar-light, 5%));
|
|
193
|
+
$color-sidebar: $slate-5;
|
|
194
|
+
|
|
193
195
|
// Box Shadow
|
|
194
196
|
$ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
|
|
195
197
|
$ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// Typography
|
|
2
1
|
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
|
|
3
2
|
|
|
4
3
|
$font-heading: "Roboto", sans-serif;
|
|
@@ -8,16 +7,16 @@ html,
|
|
|
8
7
|
body {
|
|
9
8
|
background-color: $white-100;
|
|
10
9
|
font-family: $font-paragraph;
|
|
11
|
-
font-weight:
|
|
12
|
-
font-size: 14px;
|
|
10
|
+
font-weight: $weight-normal;
|
|
11
|
+
font-size: 14px; // Base font size
|
|
13
12
|
color: $color-text;
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
p {
|
|
17
|
-
font-size:
|
|
16
|
+
font-size: $size-6; // 14px
|
|
18
17
|
font-family: $font-paragraph;
|
|
19
|
-
font-weight:
|
|
20
|
-
line-height:
|
|
18
|
+
font-weight: $weight-normal;
|
|
19
|
+
line-height: 1.5;
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
h1,
|
|
@@ -27,64 +26,51 @@ h4,
|
|
|
27
26
|
h5,
|
|
28
27
|
h6 {
|
|
29
28
|
font-family: $font-heading;
|
|
30
|
-
font-weight:
|
|
29
|
+
font-weight: $weight-semibold;
|
|
31
30
|
color: $color-heading;
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
h1 {
|
|
35
34
|
font-size: $size-1;
|
|
36
35
|
}
|
|
37
|
-
|
|
38
36
|
h2 {
|
|
39
37
|
font-size: $size-2;
|
|
40
38
|
}
|
|
41
|
-
|
|
42
39
|
h3 {
|
|
43
40
|
font-size: $size-3;
|
|
44
41
|
}
|
|
45
|
-
|
|
46
42
|
h4 {
|
|
47
43
|
font-size: $size-4;
|
|
48
44
|
}
|
|
49
|
-
|
|
50
45
|
h5 {
|
|
51
46
|
font-size: $size-5;
|
|
52
47
|
}
|
|
53
|
-
|
|
54
48
|
h6 {
|
|
55
49
|
font-size: $size-6;
|
|
56
50
|
}
|
|
57
51
|
|
|
58
52
|
h6 {
|
|
59
53
|
&.is-tiny {
|
|
60
|
-
font-size:
|
|
61
|
-
line-height:
|
|
62
|
-
}
|
|
63
|
-
|
|
54
|
+
font-size: $size-7;
|
|
55
|
+
line-height: 1.2;
|
|
56
|
+
} // 11px
|
|
64
57
|
&.is-extra-small {
|
|
65
|
-
font-size:
|
|
66
|
-
line-height:
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
&.is-small {
|
|
70
|
-
font-size: 14px;
|
|
71
|
-
line-height: 14px + 10;
|
|
72
|
-
}
|
|
73
|
-
|
|
58
|
+
font-size: 0.857rem;
|
|
59
|
+
line-height: 1.2;
|
|
60
|
+
} // 12px
|
|
61
|
+
&.is-small,
|
|
74
62
|
&.is-normal {
|
|
75
|
-
font-size:
|
|
76
|
-
line-height:
|
|
77
|
-
}
|
|
78
|
-
|
|
63
|
+
font-size: $size-6;
|
|
64
|
+
line-height: 1.2;
|
|
65
|
+
} // 14px
|
|
79
66
|
&.is-semi-normal {
|
|
80
|
-
font-size:
|
|
81
|
-
line-height:
|
|
82
|
-
}
|
|
83
|
-
|
|
67
|
+
font-size: 1.071rem;
|
|
68
|
+
line-height: 1.2;
|
|
69
|
+
} // 15px
|
|
84
70
|
&.is-medium {
|
|
85
|
-
font-size:
|
|
86
|
-
line-height:
|
|
87
|
-
}
|
|
71
|
+
font-size: $size-5;
|
|
72
|
+
line-height: 1.2;
|
|
73
|
+
} // 16px
|
|
88
74
|
}
|
|
89
75
|
|
|
90
76
|
.content {
|
|
@@ -104,33 +90,44 @@ h6 {
|
|
|
104
90
|
a:not(.ac-button) {
|
|
105
91
|
font-family: $font-paragraph;
|
|
106
92
|
color: $ac-primary;
|
|
107
|
-
p {
|
|
108
|
-
color: $color-text;
|
|
109
|
-
}
|
|
110
93
|
&:hover {
|
|
111
94
|
color: $ac-primary;
|
|
112
95
|
}
|
|
113
96
|
}
|
|
114
97
|
|
|
115
98
|
.text-xm {
|
|
116
|
-
font-size: 0.
|
|
117
|
-
}
|
|
118
|
-
|
|
99
|
+
font-size: 0.714rem;
|
|
100
|
+
} // 10px
|
|
119
101
|
.text-sm {
|
|
120
|
-
font-size:
|
|
121
|
-
}
|
|
122
|
-
|
|
102
|
+
font-size: $size-7;
|
|
103
|
+
} // 11px
|
|
104
|
+
.text-xs {
|
|
105
|
+
font-size: 0.857rem;
|
|
106
|
+
} // 12px
|
|
123
107
|
.text-base {
|
|
124
|
-
font-size:
|
|
125
|
-
}
|
|
126
|
-
|
|
108
|
+
font-size: $size-6;
|
|
109
|
+
} // 14px
|
|
127
110
|
.text-lg {
|
|
128
|
-
font-size:
|
|
129
|
-
}
|
|
130
|
-
|
|
111
|
+
font-size: $size-5;
|
|
112
|
+
} // 16px
|
|
131
113
|
.text-xl {
|
|
132
|
-
font-size: 1.
|
|
133
|
-
}
|
|
114
|
+
font-size: 1.286rem;
|
|
115
|
+
} // 18px
|
|
116
|
+
.text-2xl {
|
|
117
|
+
font-size: 1.429rem;
|
|
118
|
+
} // 20px
|
|
119
|
+
.text-3xl {
|
|
120
|
+
font-size: 1.714rem;
|
|
121
|
+
} // 24px
|
|
122
|
+
.text-4xl {
|
|
123
|
+
font-size: 2.143rem;
|
|
124
|
+
} // 30px
|
|
125
|
+
.text-5xl {
|
|
126
|
+
font-size: 2.571rem;
|
|
127
|
+
} // 36px
|
|
128
|
+
.text-6xl {
|
|
129
|
+
font-size: 3rem;
|
|
130
|
+
} // 42px
|
|
134
131
|
|
|
135
132
|
hr {
|
|
136
133
|
background-color: $gray-60;
|
|
@@ -144,12 +141,17 @@ strong {
|
|
|
144
141
|
color: $color-text;
|
|
145
142
|
}
|
|
146
143
|
|
|
144
|
+
.is-font-light {
|
|
145
|
+
font-weight: $weight-light;
|
|
146
|
+
}
|
|
147
147
|
.is-font-medium {
|
|
148
|
-
font-weight:
|
|
148
|
+
font-weight: $weight-medium;
|
|
149
|
+
}
|
|
150
|
+
.is-font-semibold {
|
|
151
|
+
font-weight: $weight-semibold;
|
|
149
152
|
}
|
|
150
|
-
|
|
151
153
|
.is-font-bold {
|
|
152
|
-
font-weight:
|
|
154
|
+
font-weight: $weight-bold;
|
|
153
155
|
}
|
|
154
156
|
|
|
155
157
|
.material-icons {
|