@gradio/button 0.3.0-beta.6 → 0.3.0

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/CHANGELOG.md +30 -0
  2. package/dist/shared/Button.svelte +21 -9
  3. package/package.json +5 -5
  4. package/shared/Button.svelte +21 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @gradio/button
2
2
 
3
+ ## 0.3.0
4
+
5
+ ### Features
6
+
7
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Adding new themes to Gradio 5.0
8
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Redesign `gr.Button()`
9
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`
10
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - UI theme fixes
11
+
12
+ ### Fixes
13
+
14
+
15
+ - [#8843](https://github.com/gradio-app/gradio/pull/8843) [`6f95286`](https://github.com/gradio-app/gradio/commit/6f95286337459efbccb95c9cfac63355669df9ee) - Center icon in button when no text is present
16
+
17
+ ### Dependencies
18
+
19
+ - @gradio/client@1.6.0
20
+ - @gradio/upload@0.13.0
21
+ - @gradio/utils@0.7.0
22
+
23
+ ## 0.3.0-beta.7
24
+
25
+ ### Features
26
+
27
+ - [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0. Thanks @allisonwhilden!
28
+
29
+ ### Dependency updates
30
+
31
+ - @gradio/upload@0.13.0-beta.7
32
+
3
33
  ## 0.3.0-beta.6
4
34
 
5
35
  ### Dependency updates
package/dist/shared/Button.svelte CHANGED
@@ -67,18 +67,15 @@ export let min_width = void 0;
67
67
  transition: var(--button-transition);
68
68
  padding: var(--size-0-5) var(--size-2);
69
69
  text-align: center;
70
- box-shadow: var(--button-shadow);
71
70
  }
72
71
 
73
72
  button:hover {
74
73
  transform: var(--button-transform-hover);
75
- box-shadow: var(--button-shadow-hover);
76
74
  }
77
75
 
78
76
  button:active,
79
77
  a:active {
80
78
  transform: var(--button-transform-active);
81
- box-shadow: var(--button-shadow-active);
82
79
  }
83
80
 
84
81
  button[disabled],
@@ -97,6 +94,7 @@ export let min_width = void 0;
97
94
  border: var(--button-border-width) solid var(--button-primary-border-color);
98
95
  background: var(--button-primary-background-fill);
99
96
  color: var(--button-primary-text-color);
97
+ box-shadow: var(--button-primary-shadow);
100
98
  }
101
99
  .primary:hover,
102
100
  .primary[disabled] {
@@ -106,6 +104,10 @@ export let min_width = void 0;
106
104
 
107
105
  .primary:hover {
108
106
  border-color: var(--button-primary-border-color-hover);
107
+ box-shadow: var(--button-primary-shadow-hover);
108
+ }
109
+ .primary:active {
110
+ box-shadow: var(--button-primary-shadow-active);
109
111
  }
110
112
 
111
113
  .primary[disabled] {
@@ -117,12 +119,7 @@ export let min_width = void 0;
117
119
  var(--button-secondary-border-color);
118
120
  background: var(--button-secondary-background-fill);
119
121
  color: var(--button-secondary-text-color);
120
- }
121
-
122
- .huggingface {
123
- border: var(--button-border-width) solid
124
- var(--button-secondary-border-color);
125
- background: var(--background-fill-primary);
122
+ box-shadow: var(--button-secondary-shadow);
126
123
  }
127
124
 
128
125
  .secondary:hover,
@@ -133,6 +130,10 @@ export let min_width = void 0;
133
130
 
134
131
  .secondary:hover {
135
132
  border-color: var(--button-secondary-border-color-hover);
133
+ box-shadow: var(--button-secondary-shadow-hover);
134
+ }
135
+ .secondary:active {
136
+ box-shadow: var(--button-secondary-shadow-active);
136
137
  }
137
138
 
138
139
  .secondary[disabled] {
@@ -143,6 +144,7 @@ export let min_width = void 0;
143
144
  background: var(--button-cancel-background-fill);
144
145
  color: var(--button-cancel-text-color);
145
146
  border: var(--button-border-width) solid var(--button-cancel-border-color);
147
+ box-shadow: var(--button-secondary-shadow);
146
148
  }
147
149
 
148
150
  .stop:hover,
@@ -152,6 +154,10 @@ export let min_width = void 0;
152
154
 
153
155
  .stop:hover {
154
156
  border-color: var(--button-cancel-border-color-hover);
157
+ box-shadow: var(--button-secondary-shadow-hover);
158
+ }
159
+ .stop:active {
160
+ box-shadow: var(--button-secondary-shadow-active);
155
161
  }
156
162
 
157
163
  .stop[disabled] {
@@ -179,4 +185,10 @@ export let min_width = void 0;
179
185
  .button-icon.right-padded {
180
186
  margin-right: var(--spacing-xl);
181
187
  }
188
+
189
+ .huggingface {
190
+ border: var(--button-border-width) solid
191
+ var(--button-secondary-border-color);
192
+ background: var(--background-fill-primary);
193
+ }
182
194
  </style>
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@gradio/button",
3
- "version": "0.3.0-beta.6",
3
+ "version": "0.3.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
7
7
  "license": "ISC",
8
8
  "private": false,
9
9
  "dependencies": {
10
- "@gradio/client": "^1.6.0-beta.4",
11
- "@gradio/upload": "^0.13.0-beta.6",
12
- "@gradio/utils": "^0.7.0-beta.2"
10
+ "@gradio/client": "^1.6.0",
11
+ "@gradio/utils": "^0.7.0",
12
+ "@gradio/upload": "^0.13.0"
13
13
  },
14
14
  "devDependencies": {
15
- "@gradio/preview": "^0.11.2-beta.0"
15
+ "@gradio/preview": "^0.12.0"
16
16
  },
17
17
  "main": "./Index.svelte",
18
18
  "main_changeset": true,
package/shared/Button.svelte CHANGED
@@ -70,18 +70,15 @@
70
70
  transition: var(--button-transition);
71
71
  padding: var(--size-0-5) var(--size-2);
72
72
  text-align: center;
73
- box-shadow: var(--button-shadow);
74
73
  }
75
74
 
76
75
  button:hover {
77
76
  transform: var(--button-transform-hover);
78
- box-shadow: var(--button-shadow-hover);
79
77
  }
80
78
 
81
79
  button:active,
82
80
  a:active {
83
81
  transform: var(--button-transform-active);
84
- box-shadow: var(--button-shadow-active);
85
82
  }
86
83
 
87
84
  button[disabled],
@@ -100,6 +97,7 @@
100
97
  border: var(--button-border-width) solid var(--button-primary-border-color);
101
98
  background: var(--button-primary-background-fill);
102
99
  color: var(--button-primary-text-color);
100
+ box-shadow: var(--button-primary-shadow);
103
101
  }
104
102
  .primary:hover,
105
103
  .primary[disabled] {
@@ -109,6 +107,10 @@
109
107
 
110
108
  .primary:hover {
111
109
  border-color: var(--button-primary-border-color-hover);
110
+ box-shadow: var(--button-primary-shadow-hover);
111
+ }
112
+ .primary:active {
113
+ box-shadow: var(--button-primary-shadow-active);
112
114
  }
113
115
 
114
116
  .primary[disabled] {
@@ -120,12 +122,7 @@
120
122
  var(--button-secondary-border-color);
121
123
  background: var(--button-secondary-background-fill);
122
124
  color: var(--button-secondary-text-color);
123
- }
124
-
125
- .huggingface {
126
- border: var(--button-border-width) solid
127
- var(--button-secondary-border-color);
128
- background: var(--background-fill-primary);
125
+ box-shadow: var(--button-secondary-shadow);
129
126
  }
130
127
 
131
128
  .secondary:hover,
@@ -136,6 +133,10 @@
136
133
 
137
134
  .secondary:hover {
138
135
  border-color: var(--button-secondary-border-color-hover);
136
+ box-shadow: var(--button-secondary-shadow-hover);
137
+ }
138
+ .secondary:active {
139
+ box-shadow: var(--button-secondary-shadow-active);
139
140
  }
140
141
 
141
142
  .secondary[disabled] {
@@ -146,6 +147,7 @@
146
147
  background: var(--button-cancel-background-fill);
147
148
  color: var(--button-cancel-text-color);
148
149
  border: var(--button-border-width) solid var(--button-cancel-border-color);
150
+ box-shadow: var(--button-secondary-shadow);
149
151
  }
150
152
 
151
153
  .stop:hover,
@@ -155,6 +157,10 @@
155
157
 
156
158
  .stop:hover {
157
159
  border-color: var(--button-cancel-border-color-hover);
160
+ box-shadow: var(--button-secondary-shadow-hover);
161
+ }
162
+ .stop:active {
163
+ box-shadow: var(--button-secondary-shadow-active);
158
164
  }
159
165
 
160
166
  .stop[disabled] {
@@ -182,4 +188,10 @@
182
188
  .button-icon.right-padded {
183
189
  margin-right: var(--spacing-xl);
184
190
  }
191
+
192
+ .huggingface {
193
+ border: var(--button-border-width) solid
194
+ var(--button-secondary-border-color);
195
+ background: var(--background-fill-primary);
196
+ }
185
197
  </style>