Skip to content

Commit d2bffb2

Browse files
janfaracikjanfaracik
authored
Refine 'Colors' page (#426)
1 parent ee74fe6 commit d2bffb2

File tree

7 files changed

+61
-62
lines changed

7 files changed

+61
-62
lines changed

‎src/main/java/io/jenkins/plugins/designlibrary/Colors.java‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ public String getIconFileName() {
1313

1414
@Override
1515
public String getDescription() {
16-
return "Defines the palette for consistent use of color throughout the design system.";
16+
return "Defines the palette for consistent use of color.";
1717
}
1818

1919
@Override
@@ -23,24 +23,25 @@ public Category getCategory() {
2323

2424
public List<Semantic> getSemantics() {
2525
return List.of(
26-
new Semantic("Accent", "Use for branding", "accent-color"),
27-
new Semantic("Text", "Use for text", "text-color"),
28-
new Semantic("Secondary text", "Use for secondary text", "text-color-secondary"),
29-
new Semantic("Success", "Use for success states", "success-color"),
30-
new Semantic("Warning", "Use for warning states", "warning-color"),
31-
new Semantic("Error", "Use for error states", "error-color"),
32-
new Semantic("Build", "Use for build kickoff", "build-color", "play"),
33-
new Semantic("Destructive", "Use for destructive actions", "destructive-color", "trash"));
26+
new Semantic("Accent", "Use for primary actions.", "accent-color"),
27+
new Semantic("Text", "Use for text.", "text-color"),
28+
new Semantic("Secondary text", "Use for secondary text.", "text-color-secondary"),
29+
new Semantic("Success", "Use for success states.", "success-color"),
30+
new Semantic("Warning", "Use for warning states.", "warning-color"),
31+
new Semantic("Error", "Use for error states.", "error-color"),
32+
new Semantic("Build", "Use for build kickoff.", "build-color", "play"),
33+
new Semantic("Destructive", "Use for destructive actions.", "destructive-color", "trash"));
3434
}
3535

3636
public List<Color> getColors() {
3737
List<Color> colors = List.of(
3838
new Color("Red", "red"),
39-
new Color("Green", "green"),
4039
new Color("Orange", "orange"),
4140
new Color("Yellow", "yellow"),
41+
new Color("Green", "green"),
4242
new Color("Blue", "blue"),
4343
new Color("Cyan", "cyan"),
44+
new Color("Teal", "teal"),
4445
new Color("Indigo", "indigo"),
4546
new Color("Purple", "purple"),
4647
new Color("Pink", "pink"),

‎src/main/resources/io/jenkins/plugins/designlibrary/Colors/index.jelly‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ THE SOFTWARE.
2828
<d:tag name="item">
2929
<li>
3030
<div class="jdl-colors__item" style="--color: var(--${item.className ?: item.variable}, grey);">
31-
<p class="jdl-colors__item__title" >
31+
<p class="jdl-colors__item__title ${item.className.contains('light') ? 'jdl-colors__item__title--light' : ''} ${item.className.contains('dark') ? 'jdl-colors__item__title--dark' : ''}">
3232
<j:if test="${item.symbol != null}">
3333
<l:icon src="symbol-${item.symbol}" />
3434
</j:if>
@@ -39,12 +39,12 @@ THE SOFTWARE.
3939
<p class="jdl-colors__item__contents__description">${item.description}</p>
4040
</j:if>
4141
<div class="jdl-colors__item__contents__line">
42-
<span>var(--${item.className ?: item.variable})</span>
43-
<l:copyButton message="${%successfullyCopied}" tooltip="${%clickToCopy}" text="var(--${item.className ?: item.variable})" iconOnly="true" />
44-
</div>
45-
<div class="jdl-colors__item__contents__line">
46-
<span>.jenkins-!-${item.variable}</span>
47-
<l:copyButton message="${%successfullyCopied}" tooltip="${%clickToCopy}" text="jenkins-!-${item.variable}" iconOnly="true" />
42+
<l:copyButton label="Class"
43+
text="jenkins-!-${item.variable}"
44+
iconOnly="true" />
45+
<l:copyButton label="CSS variable"
46+
text="var(--${item.className ?: item.variable})"
47+
iconOnly="true" />
4848
</div>
4949
</div>
5050
</div>
@@ -62,13 +62,10 @@ THE SOFTWARE.
6262
<tr>
6363
<td>${%tip-third}</td>
6464
</tr>
65-
<tr>
66-
<td>${%tip-fourth}</td>
67-
</tr>
6865
</s:dos-donts>
6966
</s:section>
7067

71-
<s:section title="${%Semantics}">
68+
<s:section title="${%Semantic}">
7269
<ol class="jdl-colors">
7370
<j:forEach var="item" items="${it.semantics}">
7471
<local:item item="${item}" />

‎src/main/resources/io/jenkins/plugins/designlibrary/Colors/index.properties‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
tip-first=Use <span class="jdl-colors-tag">color</span> to draw attention to important parts of your interface.
22
tip-second=Color shouldn''t be the only way a piece of information is conveyed, use text or symbols along with it.
3-
tip-third=It''s best to use colors provided by Jenkins as they will automatically adapt to the user''s theme.
3+
tip-third=Use colors provided by Jenkins as they will automatically adapt to the user''s theme.
44
tip-fourth=Primarily use semantic colors in your interface, you can create your own semantic colors using the palette below.
5-
clickToCopy=Click to copy
6-
successfullyCopied=Copied

‎src/main/resources/scss/components/_dos-donts.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
font-weight: 500;
3333
font-size: 1.125rem;
3434
text-align: left;
35+
text-box: cap alphabetic;
36+
margin-bottom: 0.3125rem;
3537
}
3638
}
3739

@@ -52,6 +54,7 @@
5254
top: -4px;
5355
left: 0;
5456
border-radius: 100%;
57+
border: var(--jenkins-border--subtle);
5558
}
5659

5760
&::after {

‎src/main/resources/scss/components/_section.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@
1313
font-size: 1.125rem;
1414
line-height: 1;
1515
margin: 0;
16+
text-box: cap alphabetic;
1617
}
1718

1819
&__description {
1920
@include mixins.base-text;
2021
max-width: 95ch;
2122
color: var(--text-color-secondary);
2223
margin: 0;
24+
text-box: cap alphabetic;
2325
}
2426

2527
&--no-border {

‎src/main/resources/scss/pages/_colors.scss‎

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -47,37 +47,33 @@
4747
display: flex;
4848
flex-direction: column;
4949
align-items: start;
50-
gap: calc(var(--jdl-spacing) * 0.4);
51-
52-
.copy-button {
53-
opacity: 0;
54-
transition: var(--standard-transition);
55-
}
56-
57-
&:hover {
58-
.copy-button {
59-
opacity: 1;
60-
}
61-
}
50+
gap: calc(var(--jdl-spacing) * 0.5);
6251

6352
.jdl-colors__item__title {
6453
@include mixins.base-text;
6554
display: flex;
6655
align-items: center;
6756
gap: 0.5rem;
68-
font-weight: 450;
57+
font-weight: var(--font-bold-weight);
6958
margin: 0;
70-
font-size: 0.875rem;
71-
padding: 0.35rem 0.9rem;
59+
padding: 0 1rem;
60+
min-height: 2.25rem;
7261
background: var(--color);
73-
text-shadow: 0 2px 2px
74-
color-mix(in srgb, var(--text-color) 10%, transparent);
7562
border-radius: 100px;
63+
border: var(--jenkins-border--subtle);
7664
color: var(--background);
7765

7866
svg {
79-
width: 1rem;
80-
height: 1rem;
67+
width: 1.125rem;
68+
height: 1.125rem;
69+
}
70+
71+
&--light {
72+
color: oklch(from var(--color) 0.2 c h);
73+
}
74+
75+
&--dark {
76+
color: oklch(from var(--color) 1.5 c h);
8177
}
8278
}
8379

@@ -86,23 +82,10 @@
8682
display: flex;
8783
flex-direction: column;
8884
gap: inherit;
89-
padding-left: calc(2rem + 2px);
90-
91-
&::before {
92-
content: "";
93-
position: absolute;
94-
top: 0.2rem;
95-
left: 1rem;
96-
bottom: 0.2rem;
97-
background: var(--color);
98-
border-radius: 100px;
99-
width: var(--jenkins-border-width);
100-
opacity: 0.2;
101-
}
85+
padding-left: 1rem;
10286

10387
.jdl-colors__item__contents__description {
10488
@include mixins.base-text;
105-
color: var(--text-color-secondary);
10689
margin: 0;
10790
}
10891

@@ -112,11 +95,27 @@
11295
justify-content: start;
11396
font-family: var(--font-family-mono);
11497
color: var(--text-color-secondary);
115-
opacity: 0.85;
98+
gap: 1.5rem;
11699

117100
.jenkins-button {
118-
margin-block: -0.66rem;
119-
margin-inline-start: 0.33rem;
101+
--text-color: var(--text-color-secondary);
102+
103+
min-height: 0;
104+
padding: 0.5rem 0.625rem;
105+
margin: -0.5rem -0.625rem;
106+
transition: color var(--standard-transition);
107+
108+
.jenkins-copy-button__icon {
109+
scale: 0.9;
110+
transition:
111+
all var(--standard-transition),
112+
color 0s;
113+
}
114+
115+
&:hover,
116+
&:focus {
117+
--text-color: unset;
118+
}
120119
}
121120
}
122121
}

‎src/main/resources/scss/pages/_home.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
position: relative;
1818
display: flex;
1919
flex-direction: column;
20-
overflow: hidden;
2120
color: var(--text-color) !important;
2221
text-decoration: none !important;
2322
gap: 0.15rem;
@@ -26,7 +25,7 @@
2625
gap: var(--jdl-spacing);
2726

2827
.jdl-section__title {
29-
margin-bottom: calc(var(--jdl-spacing) * -0.75);
28+
margin-bottom: calc(var(--jdl-spacing) * -0.25);
3029
}
3130

3231
.jdl-section__description {

0 commit comments

Comments
 (0)