Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d7a2d83

Browse files
Update buttons style (#1122)
* Buttons updated to reflect the design system.
1 parent a36524e commit d7a2d83

File tree

15 files changed

+67
-156
lines changed

15 files changed

+67
-156
lines changed

‎arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -598,7 +598,7 @@ export class ArduinoFrontendContribution
598598
'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
599599
},
600600
{
601-
id: 'arduino.toolbar.background',
601+
id: 'arduino.toolbar.button.background',
602602
defaults: {
603603
dark: 'button.background',
604604
light: 'button.background',
@@ -608,7 +608,7 @@ export class ArduinoFrontendContribution
608608
'Background color of the toolbar items. Such as Upload, Verify, etc.',
609609
},
610610
{
611-
id: 'arduino.toolbar.hoverBackground',
611+
id: 'arduino.toolbar.button.hoverBackground',
612612
defaults: {
613613
dark: 'button.hoverBackground',
614614
light: 'button.foreground',

‎arduino-ide-extension/src/browser/data/arduino.color-theme.json‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

‎arduino-ide-extension/src/browser/data/dark.color-theme.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"colors": {
55
"list.highlightForeground": "#0ca1a6",
66
"list.activeSelectionForeground": "#dae3e3",
7-
"list.activeSelectionBackground": "#434f54",
7+
"list.activeSelectionBackground": "#0ca1a64d",
88
"list.inactiveSelectionForeground": "#dae3e3",
99
"list.inactiveSelectionBackground": "#434f54",
1010
"list.hoverBackground": "#1f272a",
@@ -45,7 +45,8 @@
4545
"arduino.foreground": "#edf1f1",
4646
"arduino.output.foreground": "#ffffff",
4747
"arduino.output.background": "#000000",
48-
"arduino.toolbar.hoverBackground": "#dae3e3",
48+
"arduino.toolbar.button.hoverBackground": "#dae3e3",
49+
"arduino.toolbar.button.background": "#0ca1a6",
4950
"sideBar.background": "#101618",
5051
"sideBar.foreground": "#dae3e3",
5152
"input.background": "#000000",

‎arduino-ide-extension/src/browser/data/default.color-theme.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"colors": {
55
"list.highlightForeground": "#008184",
66
"list.activeSelectionForeground": "#4e5b61",
7-
"list.activeSelectionBackground": "#dae3e3",
7+
"list.activeSelectionBackground": "#00818433",
88
"list.inactiveSelectionForeground": "#4e5b61",
99
"list.inactiveSelectionBackground": "#dae3e3",
1010
"list.hoverBackground": "#ecf1f1",
@@ -22,7 +22,7 @@
2222
"menu.selectionBackground": "#dae3e3",
2323
"menu.selectionForeground": "#212121",
2424
"editorGroupHeader.tabsBackground": "#ecf1f1",
25-
"button.background": "#7fcbcd",
25+
"button.background": "#008184",
2626
"button.foreground": "#f7f9f9",
2727
"button.hoverBackground": "#005C5F",
2828
"titleBar.activeBackground": "#006d70",
@@ -45,7 +45,8 @@
4545
"arduino.foreground": "#edf1f1",
4646
"arduino.output.foreground": "#ffffff",
4747
"arduino.output.background": "#000000",
48-
"arduino.toolbar.hoverBackground": "#f7f9f9",
48+
"arduino.toolbar.button.hoverBackground": "#f7f9f9",
49+
"arduino.toolbar.button.background": "#7fcbcd",
4950
"sideBar.background": "#f7f9f9",
5051
"sideBar.foreground": "#4e5b61",
5152
"input.background": "#ffffff",

‎arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const CertificateUploaderComponent = ({
9494
>
9595
<button
9696
type="button"
97-
className="theia-button primary add-cert-btn"
97+
className="theia-button secondary add-cert-btn"
9898
onClick={() => {
9999
showAdd ? setShowAdd(false) : setShowAdd(true);
100100
}}

‎arduino-ide-extension/src/browser/style/dialogs.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@
5555
}
5656

5757
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow:first-child {
58-
margin-top: 0px;
58+
margin-top: 0px;
59+
height: 32px;
5960
}
6061

6162
.fl1{
@@ -69,4 +70,4 @@
6970

7071
.fa.disabled {
7172
opacity: .4;
72-
}
73+
}

‎arduino-ide-extension/src/browser/style/fonts.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@font-face {
2+
font-family: 'Open Sans';
3+
src: url('fonts/OpenSans-Bold-webfont.woff') format('woff');
4+
}
5+
16
@font-face {
27
font-family: 'FontAwesome';
38
src:
20.2 KB
Binary file not shown.
20.2 KB
Binary file not shown.

‎arduino-ide-extension/src/browser/style/index.css‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,25 +60,51 @@
6060
/* Overrule the default Theia CSS button styles. */
6161
button.theia-button,
6262
.theia-button {
63-
border: 1px solid var(--theia-dropdown-border);
63+
align-items: center;
64+
display: flex;
65+
font-family: 'Open Sans',sans-serif;
66+
font-style: normal;
67+
font-weight: 700;
68+
font-size: 14px;
69+
justify-content: center;
70+
cursor: pointer;
71+
letter-spacing: .01em;
72+
line-height: 24px;
73+
outline: none;
74+
padding: 0 16px;
75+
position: relative;
76+
text-align: center;
77+
text-decoration: none;
78+
border-width: 2px;
79+
border-radius: 32px;
80+
text-transform: uppercase;
81+
transition: none;
82+
box-shadow: none;
6483
}
6584

66-
button.theia-button:hover,
67-
.theia-button:hover {
68-
border:1px solid var(--theia-focusBorder);
85+
button.theia-button {
86+
height:28px;
87+
max-width: none;
6988
}
7089

71-
button.theia-button {
72-
height: 31px;
90+
.theia-button:active,
91+
.theia-button:focus {
92+
box-shadow: 0 0 0 2px var(--theia-focusBorder);
7393
}
7494

7595
button.theia-button.secondary {
76-
background-color: var(--theia-secondaryButton-background);
77-
color: var(--theia-secondaryButton-foreground);
96+
border: 2px solid var(--theia-secondaryButton-foreground);
7897
}
7998

80-
button.theia-button.main {
99+
button.theia-button[disabled], .theia-button[disabled] {
100+
opacity: 0.5;
81101
color: var(--theia-button-foreground);
102+
background-color: var(--theia-button-background);
103+
}
104+
105+
button.secondary[disabled], .theia-button.secondary[disabled] {
106+
color: var(--theia-secondaryButton-foreground);
107+
background-color: var(--theia-secondaryButton-background);
82108
}
83109

84110
/* To make the progress-bar slightly thicker, and use the color from the status bar */

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /