Skip to content

Commit 222a4c4

Browse files
author
[email protected]
committed
added color schemes, adjusted style guide styles
1 parent 37b66c9 commit 222a4c4

File tree

3 files changed

+397
-140
lines changed

3 files changed

+397
-140
lines changed

‎src/components/style-guide/editor.scss

Lines changed: 128 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,179 @@
1+
$guide-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
2+
@mixin guide-titles {
3+
font-family: $guide-font-family;
4+
font-size: 1.1em;
5+
font-weight: 400;
6+
}
7+
18
.ugb-style-guide {
9+
&,
10+
p {
11+
font-size: 16px;
12+
}
13+
214
.ugb-style-guide__content {
15+
background: #fff; // This is needed for the export
316
padding: 70px;
417
}
518

19+
.ugb-style-guide__title {
20+
font-family: $guide-font-family;
21+
font-size: 1.1em;
22+
font-weight: 400;
23+
}
24+
625
.ugb-style-guide__columns {
726
display: grid;
827
grid-template-columns: 1fr 1fr;
928
gap: 50px;
1029
}
1130

1231
.ugb-style-guide__section-title {
13-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
14-
font-size: 2em;
32+
font-family: $guide-font-family;
33+
font-size: 32.44px;
1534
font-weight: 700;
1635
border-bottom: 1px solid #eee;
1736
line-height: 1.2;
1837
padding: 0 0 8px;
1938
margin-bottom: 1em;
2039
&:not(:first-child) {
21-
margin-top: 2em;
40+
margin-top: 2.5em;
2241
}
2342
}
2443

2544
.ugb-style-guide__section-subheading {
26-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
27-
font-size: 1.1em;
45+
font-family: $guide-font-family;
46+
font-size: 25.63px;
2847
font-weight: 400;
2948
margin-bottom: 1em;
49+
color: #999;
3050
&:not(:first-child) {
31-
margin-top: 1.5em;
51+
margin-top: 2.5em;
3252
}
3353
}
34-
.ugb-style-guide__label {
35-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
36-
font-size: 1em;
37-
font-weight: 500;
54+
55+
// Color Schemes
56+
57+
.ugb-style-guide__color-container {
58+
border-radius: 16px;
59+
border: 1px solid #eee;
60+
padding: 24px;
61+
}
62+
63+
.ugb-style-guide__color-schemes {
64+
gap: 20px;
65+
margin-top: 20px;
66+
display: grid;
67+
grid-template-columns: repeat(3, 1fr);
68+
69+
.ugb-style-guide__color-scheme-title {
70+
margin: 0 0 48px;
71+
}
72+
}
73+
74+
.ugb-style-guide__color-scheme__subtitle {
75+
font-size: 14.22px;
76+
margin-bottom: 8px;
3877
line-height: 1;
78+
}
3979

40-
p:first-child {
41-
margin: 0;
80+
.ugb-style-guide__color-scheme__heading {
81+
font-size: 28.83px;
82+
font-weight: 600;
83+
margin-bottom: 24px;
84+
line-height: 1.2;
85+
}
86+
87+
.ugb-style-guide__color-scheme__body {
88+
font-size: 16px;
89+
line-height: 1.6;
90+
a:hover {
91+
color: var(--hover-color) !important;
4292
}
93+
}
94+
95+
.ugb-style-guide__color-scheme__links {
96+
display: flex;
97+
gap: 16px;
98+
margin-top: 24px;
99+
}
43100

44-
p:last-child {
45-
margin-top: 4px;
46-
margin-bottom: 0;
101+
.ugb-style-guide__color-scheme__button,
102+
.ugb-style-guide__color-scheme__button--outline {
103+
padding: 12px 24px;
104+
border: 0;
105+
border-radius: 4px;
106+
}
107+
.ugb-style-guide__color-scheme__button {
108+
&:hover {
109+
background-color: var(--hover-background-color) !important;
110+
color: var(--hover-color) !important;
111+
}
112+
}
113+
.ugb-style-guide__color-scheme__button--outline {
114+
background: transparent;
115+
border-width: 2px;
116+
border-style: solid;
117+
&:hover {
118+
border-color: var(--hover-border-color) !important;
119+
color: var(--hover-color) !important;
47120
}
48121
}
49122

123+
.ugb-style-guide__color-scheme__colors {
124+
margin-top: 16px;
125+
p {
126+
margin: 0;
127+
line-height: 1.6;
128+
font-size: 14.22px;
129+
}
130+
}
131+
132+
.ugb-style-guide__color-indicator {
133+
border: 1px solid #eee;
134+
width: 1em;
135+
height: 1em;
136+
border-radius: 100%;
137+
display: inline-block;
138+
vertical-align: middle;
139+
margin: -4px 4px 0;
140+
}
141+
142+
// Colors
143+
50144
.ugb-style-guide__colors {
51145
gap: 20px;
52146
margin-top: 20px;
53147
display: flex;
54148
flex-wrap: wrap;
55149
.ugb-style-guide__column {
56150
flex: 1 1 200px;
57-
height: 100px;
58-
border-radius: 10px;
59-
border: 1px solid #eee;
151+
height: 130px;
60152
display: flex;
61153
align-items: flex-end;
62-
padding: 12px;
154+
max-width: calc(50% - 10px);
63155
}
64156
}
65157

158+
.ugb-style-guide__color-label {
159+
@include guide-titles;
160+
font-size: 18px;
161+
font-weight: 600;
162+
line-height: 1.2;
163+
display: flex;
164+
flex-direction: column;
165+
gap: 4px;
166+
}
66167
}
67-
.ugb-style-guide-popover__title {
168+
.ugb-style-guide-popover__heading {
68169
margin: 70px 70px 0;
170+
.ugb-style-guide-popover__title {
171+
margin-inline-end: 150px;
172+
font-size: 39.81px;
173+
}
174+
.ugb-style-guide-popover__description {
175+
max-width: 50%;
176+
}
69177
}
70178

71179
.ugb-style-guide__print-button {
@@ -83,10 +191,6 @@
83191
margin-top: 10px;
84192
}
85193

86-
.ugb-style-guide__print-button {
87-
margin: -1em 70px 0 0;
88-
}
89-
90194
> .components-popover__content {
91195
margin-top: 20px;
92196
margin-left: 20px;

0 commit comments

Comments
 (0)