@primer/brand-css 0.68.0-rc.01cf5f7c → 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 +7 -59
  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
@@ -7,7 +7,7 @@
7
7
 
8
8
  .Pillar--has-border {
9
9
  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
10
- border-radius: var(--brand-borderRadius-xlarge);
10
+ border-radius: var(--brand-borderRadius-medium);
11
11
  padding: var(--base-size-32);
12
12
  }
13
13
 
@@ -33,8 +33,12 @@
33
33
  }
34
34
 
35
35
  .Pillar__icon {
36
- display: flex;
37
- margin-bottom: var(--base-size-24);
36
+ margin-bottom: var(--base-size-48);
37
+ }
38
+
39
+ .Pillar__icon--with-background > svg {
40
+ width: 100%;
41
+ height: 100%;
38
42
  }
39
43
 
40
44
  .Pillar__heading {
@@ -48,59 +52,3 @@
48
52
  .Pillar__link {
49
53
  margin-top: auto;
50
54
  }
51
-
52
- .Pillar__icon--color-default {
53
- color: var(--brand-Pillar-icon-color-default);
54
- }
55
-
56
- .Pillar__icon--color-blue {
57
- color: var(--brand-Pillar-icon-color-blue);
58
- }
59
-
60
- .Pillar__icon--color-coral {
61
- color: var(--brand-Pillar-icon-color-coral);
62
- }
63
-
64
- .Pillar__icon--color-green {
65
- color: var(--brand-Pillar-icon-color-green);
66
- }
67
-
68
- .Pillar__icon--color-gray {
69
- color: var(--brand-Pillar-icon-color-gray);
70
- }
71
-
72
- .Pillar__icon--color-indigo {
73
- color: var(--brand-Pillar-icon-color-indigo);
74
- }
75
-
76
- .Pillar__icon--color-lemon {
77
- color: var(--brand-Pillar-icon-color-lemon);
78
- }
79
-
80
- .Pillar__icon--color-lime {
81
- color: var(--brand-Label-color-lime);
82
- }
83
-
84
- .Pillar__icon--color-orange {
85
- color: var(--brand-Pillar-icon-color-orange);
86
- }
87
-
88
- .Pillar__icon--color-pink {
89
- color: var(--brand-Pillar-icon-color-pink);
90
- }
91
-
92
- .Pillar__icon--color-purple {
93
- color: var(--brand-Pillar-icon-color-purple);
94
- }
95
-
96
- .Pillar__icon--color-red {
97
- color: var(--brand-Pillar-icon-color-red);
98
- }
99
-
100
- .Pillar__icon--color-teal {
101
- color: var(--brand-Pillar-icon-color-teal);
102
- }
103
-
104
- .Pillar__icon--color-yellow {
105
- color: var(--brand-Pillar-icon-color-yellow);
106
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/brand-css",
3
- "version": "0.68.0-rc.01cf5f7c",
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
  },