@primer/brand-css 0.68.0-rc.0198e801 → 0.68.0-rc.0963e67e

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/components/ActionMenu/ActionMenu.css +4 -0
  2. package/components/Button/Button.css +30 -55
  3. package/components/Pillar/Pillar.css +1 -1
  4. package/package.json +2 -2
package/components/ActionMenu/ActionMenu.css CHANGED
@@ -70,6 +70,10 @@
70
70
  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */
71
71
  }
72
72
 
73
+ .ActionMenu__inner-button-dropdown-icon {
74
+ vertical-align: middle !important;
75
+ }
76
+
73
77
  .ActionMenu__innerButton--split-button:last-child {
74
78
  border-top-left-radius: 0;
75
79
  border-bottom-left-radius: 0;
package/components/Button/Button.css CHANGED
@@ -38,6 +38,13 @@
38
38
  position: relative;
39
39
  }
40
40
 
41
+ .Button--label {
42
+ font-family: var(--brand-body-fontFamily);
43
+ font-style: normal;
44
+ font-weight: var(--base-text-weight-medium);
45
+ text-align: center;
46
+ }
47
+
41
48
  .Button__icon-visual {
42
49
  display: flex;
43
50
  align-self: center;
@@ -63,19 +70,20 @@
63
70
  .Button--primary {
64
71
  color: var(--brand-button-primary-fgColor-rest);
65
72
  background-color: var(--brand-button-primary-bgColor-rest);
66
- border: solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest);
73
+ }
74
+
75
+ .Button--size-small.Button--primary {
76
+ border-width: var(--brand-borderWidth-thin);
67
77
  }
68
78
 
69
79
  .Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
70
- background-color: var(--brand-button-primary-bgColor-hover);
71
- border-color: var(--brand-button-primary-borderColor-hover);
80
+ background: var(--brand-button-primary-bgColor-hover);
72
81
  }
73
82
 
74
83
  .Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
75
84
  .Button--primary[aria-expanded='true'] {
76
- background-color: var(--brand-button-primary-bgColor-active);
85
+ background: var(--brand-button-primary-bgColor-active);
77
86
  border-color: var(--brand-button-primary-borderColor-active);
78
- box-shadow: var(--brand-button-primary-shadow-active);
79
87
  }
80
88
 
81
89
  .Button--label-primary {
@@ -86,7 +94,6 @@
86
94
  .Button--primary[aria-disabled='true'],
87
95
  .Button--primary.Button--disabled {
88
96
  background-color: var(--brand-button-primary-bgColor-disabled);
89
- border-color: var(--brand-button-primary-borderColor-disabled);
90
97
  }
91
98
 
92
99
  .Button--primary:disabled .Button-arrow--disabled,
@@ -99,61 +106,24 @@
99
106
  color: var(--brand-button-primary-fgColor-disabled);
100
107
  }
101
108
 
102
- /* accent */
103
-
104
- .Button--accent {
105
- color: var(--brand-button-accent-fgColor-rest);
106
- background-color: var(--brand-button-accent-bgColor-rest);
107
- }
108
-
109
- .Button--size-small.Button--accent {
110
- border-width: var(--brand-borderWidth-thin);
111
- }
112
-
113
- .Button--accent:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
114
- background: var(--brand-button-accent-bgColor-hover);
115
- }
116
-
117
- .Button--accent:not(.Button[disabled], .Button[aria-disabled='true']):active,
118
- .Button--accent[aria-expanded='true'] {
119
- background-color: var(--brand-button-accent-bgColor-active);
120
- border-color: var(--brand-button-accent-borderColor-active);
121
- }
122
-
123
- .Button--label-accent {
124
- color: var(--brand-button-accent-fgColor-rest);
125
- }
126
-
127
- .Button--accent:disabled,
128
- .Button--accent[aria-disabled='true'],
129
- .Button--accent.Button--disabled {
130
- background-color: var(--brand-button-accent-bgColor-disabled);
131
- }
132
-
133
- .Button--accent:disabled .Button-arrow--disabled,
134
- .Button--accent[aria-disabled='true'] .Button-arrow--disabled,
135
- .Button--accent.Button--disabled .Button-arrow--disabled,
136
- .Button--accent:disabled .Button__icon-visual--disabled,
137
- .Button--accent[aria-disabled='true'] .Button__icon-visual--disabled,
138
- .Button--accent.Button--disabled .Button__icon-visual--disabled,
139
- .Button--label-accent.Button-label--disabled {
140
- color: var(--brand-button-accent-fgColor-disabled);
141
- }
142
-
143
109
  /* secondary */
144
110
 
145
111
  .Button--secondary {
146
- transition: background-color, border-color 200ms;
112
+ transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
113
+ background: var(--brand-button-secondary-bgColor-rest);
147
114
  border-color: var(--brand-button-secondary-borderColor-rest);
148
115
  color: var(--brand-button-secondary-fgColor-rest);
116
+ backdrop-filter: blur(var(--base-size-20));
149
117
  }
150
118
 
151
119
  .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
120
+ background: var(--brand-button-secondary-bgColor-hover);
152
121
  border-color: var(--brand-button-secondary-borderColor-hover);
153
122
  }
154
123
 
155
124
  .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,
156
125
  .Button--secondary[aria-expanded='true'] {
126
+ background: var(--brand-button-secondary-bgColor-active);
157
127
  border-color: var(--brand-button-secondary-borderColor-active);
158
128
  }
159
129
 
@@ -174,19 +144,23 @@
174
144
  /* subtle */
175
145
 
176
146
  .Button--subtle {
177
- background-color: var(--brand-button-subtle-bgColor-rest);
147
+ transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
148
+ background: var(--brand-button-subtle-bgColor-rest);
149
+ border-width: var(--brand-borderWidth-thin);
150
+ border-color: var(--brand-button-subtle-borderColor-rest);
178
151
  color: var(--brand-color-text-default);
179
- transition: background-color, border-color var(--brand-animation-duration-faster);
152
+ backdrop-filter: blur(var(--base-size-20));
180
153
  }
181
154
 
182
155
  .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
183
- background-color: var(--brand-button-subtle-bgColor-hover);
156
+ background: var(--brand-button-subtle-bgColor-hover);
157
+ border-color: var(--brand-button-subtle-borderColor-hover);
184
158
  }
185
159
 
186
160
  .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,
187
161
  .Button--subtle[aria-expanded='true'] {
188
- background-color: var(--brand-button-subtle-bgColor-active);
189
- border-color: transparent;
162
+ background: var(--brand-button-subtle-bgColor-active);
163
+ border-color: var(--brand-button-subtle-borderColor-active);
190
164
  }
191
165
 
192
166
  .Button--label-subtle {
@@ -227,8 +201,9 @@
227
201
  }
228
202
 
229
203
  .Button--label-medium {
230
- font-size: var(--brand-text-subhead-size-medium);
231
- line-height: var(--brand-text-subhead-lineHeight-medium);
204
+ font-size: var(--brand-text-size-200);
205
+ line-height: var(--brand-text-lineHeight-200);
206
+ letter-spacing: 0.01rem;
232
207
  }
233
208
 
234
209
  .Button--label-large {
package/components/Pillar/Pillar.css CHANGED
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  .Pillar__icon {
36
- margin-bottom: var(--base-size-24);
36
+ margin-bottom: var(--base-size-48);
37
37
  }
38
38
 
39
39
  .Pillar__icon--with-background > svg {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/brand-css",
3
- "version": "0.68.0-rc.0198e801",
3
+ "version": "0.68.0-rc.0963e67e",
4
4
  "description": "CSS stylesheets for Primer Brand components",
5
5
  "keywords": [
6
6
  "primer",
@@ -32,7 +32,7 @@
32
32
  "devDependencies": {
33
33
  "@types/node": "24.12.0",
34
34
  "autoprefixer": "10.4.27",
35
- "postcss": "8.5.8",
35
+ "postcss": "8.5.10",
36
36
  "tsx": "^4.21.0",
37
37
  "typescript": "5.9.3"
38
38
  },