@appscode/design-system 2.4.27-alpha-3 → 2.4.27-alpha-6

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 (4) hide show
  1. package/package.json +1 -1
  2. package/vue-components/styles/base/utilities/_typography.scss +70 -68
  3. package/vue-components/styles/components/cards/_info.scss +1 -1
  4. package/vue-components/styles/components/sidebar/_left-sidebar.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.4.27-alpha-3",
3
+ "version": "2.4.27-alpha-6",
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/_typography.scss CHANGED
@@ -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: 400;
12
- font-size: 14px;
10
+ font-weight: $weight-normal;
11
+ font-size: 13px; // Base font size
13
12
  color: $color-text;
14
13
  }
15
14
 
16
15
  p {
17
- font-size: 1rem;
16
+ font-size: 1rem; // 13px
18
17
  font-family: $font-paragraph;
19
- font-weight: 400;
20
- line-height: 150%;
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: 600;
29
+ font-weight: $weight-semibold;
31
30
  color: $color-heading;
32
31
  }
33
32
 
34
33
  h1 {
35
- font-size: $size-1;
36
- }
37
-
34
+ font-size: 2.462rem;
35
+ } // 32px
38
36
  h2 {
39
- font-size: $size-2;
40
- }
41
-
37
+ font-size: 2rem;
38
+ } // 26px
42
39
  h3 {
43
- font-size: $size-3;
44
- }
45
-
40
+ font-size: 1.692rem;
41
+ } // 22px
46
42
  h4 {
47
- font-size: $size-4;
48
- }
49
-
43
+ font-size: 1.385rem;
44
+ } // 18px
50
45
  h5 {
51
- font-size: $size-5;
52
- }
53
-
46
+ font-size: 1.231rem;
47
+ } // 16px
54
48
  h6 {
55
- font-size: $size-6;
56
- }
49
+ font-size: 1rem;
50
+ } // 13px
57
51
 
58
52
  h6 {
59
53
  &.is-tiny {
60
- font-size: 11px;
61
- line-height: 11px + 10;
62
- }
63
-
54
+ font-size: 0.846rem;
55
+ line-height: 1.2;
56
+ } // 11px
64
57
  &.is-extra-small {
65
- font-size: 12px;
66
- line-height: 12px + 10;
67
- }
68
-
69
- &.is-small {
70
- font-size: 14px;
71
- line-height: 14px + 10;
72
- }
73
-
58
+ font-size: 0.923rem;
59
+ line-height: 1.2;
60
+ } // 12px
61
+ &.is-small,
74
62
  &.is-normal {
75
- font-size: 14px;
76
- line-height: 14px + 10;
77
- }
78
-
63
+ font-size: 1rem;
64
+ line-height: 1.2;
65
+ } // 13px
79
66
  &.is-semi-normal {
80
- font-size: 15px;
81
- line-height: 15px + 10;
82
- }
83
-
67
+ font-size: 1.077rem;
68
+ line-height: 1.2;
69
+ } // 14px
84
70
  &.is-medium {
85
- font-size: 16px;
86
- line-height: 16px + 10;
87
- }
71
+ font-size: 1.231rem;
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.769rem; //10px
117
- }
118
-
99
+ font-size: 0.769rem;
100
+ } // 10px
119
101
  .text-sm {
120
- font-size: 0.846rem; //11px
121
- }
122
-
102
+ font-size: 0.846rem;
103
+ } // 11px
104
+ .text-xs {
105
+ font-size: 0.923rem;
106
+ } // 12px
123
107
  .text-base {
124
- font-size: 1rem; //14px
125
- }
126
-
108
+ font-size: 1rem;
109
+ } // 13px
127
110
  .text-lg {
128
- font-size: 1.077rem; //14px
129
- }
130
-
111
+ font-size: 1.077rem;
112
+ } // 14px
131
113
  .text-xl {
132
- font-size: 1.231rem; //16px
133
- }
114
+ font-size: 1.231rem;
115
+ } // 16px
116
+ .text-2xl {
117
+ font-size: 1.385rem;
118
+ } // 18px
119
+ .text-3xl {
120
+ font-size: 1.846rem;
121
+ } // 24px
122
+ .text-4xl {
123
+ font-size: 2.308rem;
124
+ } // 30px
125
+ .text-5xl {
126
+ font-size: 2.769rem;
127
+ } // 36px
128
+ .text-6xl {
129
+ font-size: 3.231rem;
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: 500;
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: 700;
154
+ font-weight: $weight-bold;
153
155
  }
154
156
 
155
157
  .material-icons {
package/vue-components/styles/components/cards/_info.scss CHANGED
@@ -43,7 +43,7 @@
43
43
  }
44
44
 
45
45
  strong {
46
- font-size: 14px;
46
+ font-size: 1rem;
47
47
  font-weight: 400;
48
48
  color: $color-heading;
49
49
  }
package/vue-components/styles/components/sidebar/_left-sidebar.scss CHANGED
@@ -89,7 +89,7 @@
89
89
  a {
90
90
  font-style: normal;
91
91
  font-weight: 500;
92
- font-size: 14px;
92
+ font-size: 1rem;
93
93
  line-height: 16px;
94
94
  color: $white-100;
95
95
  position: relative;
@@ -180,7 +180,7 @@
180
180
  li {
181
181
  a {
182
182
  padding-left: 52px;
183
- font-size: 12px;
183
+ font-size: 1rem;
184
184
  padding-top: 10px;
185
185
  padding-bottom: 10px;
186
186
  }