Skip to content

Commit d69096b

Browse files
kdmccormickclaude
kdmccormick
and
claude
committed
feat: Change brand-sample from Purple to 'Autumn'
Also, make the readme steps copy-able Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent d4f3801 commit d69096b

7 files changed

Lines changed: 378 additions & 81 deletions

File tree

‎brand-sample/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# brand-sample
22

3-
**This is a simple example brand package that changes the `brand` color to purple.**
3+
**This is a simple example brand package that changes the `brand` colors to an autumn-inspired palette.**
44

55
### Before
66
![Screenshot of the Authn MFE with this brand package enabled](./docs/images/authn-without-theme.png)

‎brand-sample/dist/light.css‎

Lines changed: 211 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,216 @@
77
--pgn-size-btn-focus-width: 2px;
88
--pgn-size-input-btn-focus-width: 1px;
99
--pgn-spacing-input-btn-padding-y: 0.5625rem;
10-
--pgn-color-brand-100: #E9D4FFFF;
11-
--pgn-color-brand-200: #DAB2FFFF;
12-
--pgn-color-brand-300: #C27AFFFF;
13-
--pgn-color-brand-400: #AD46FFFF;
14-
--pgn-color-brand-600: #8200DBFF;
15-
--pgn-color-brand-700: #6E11B0FF;
16-
--pgn-color-brand-800: #59168BFF;
17-
--pgn-color-brand-900: #3C0366FF;
18-
--pgn-color-brand-base: #9810FAFF;
10+
--pgn-color-white: #FFFFFFFF;
11+
--pgn-color-black: #000000FF;
12+
--pgn-color-blue: #324A6BFF;
13+
--pgn-color-red: #8B2332FF;
14+
--pgn-color-green: #3C5A3EFF;
15+
--pgn-color-yellow: #D4A537FF;
16+
--pgn-color-teal: #4F7373FF;
17+
--pgn-color-accent-a: #E8A33DFF;
18+
--pgn-color-accent-b: #5A8042FF;
19+
--pgn-color-gray-100: #EFEAE3FF;
20+
--pgn-color-gray-200: #D7CFC4FF;
21+
--pgn-color-gray-300: #BAB0A2FF;
22+
--pgn-color-gray-400: #968B7CFF;
23+
--pgn-color-gray-600: #565047FF;
24+
--pgn-color-gray-700: #423E37FF;
25+
--pgn-color-gray-800: #2F2C27FF;
26+
--pgn-color-gray-900: #1C1A17FF;
27+
--pgn-color-gray-base: #6B6358FF;
28+
--pgn-color-primary-base: #6B1A28FF;
29+
--pgn-color-brand-base: #C5572AFF;
30+
--pgn-color-light-base: #F4EDE2FF;
31+
--pgn-color-dark-base: #2A201AFF;
1932
--pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
20-
--pgn-color-brand-500: var(--pgn-color-brand-base); /** Brand color of level 500. */
21-
--pgn-color-action-default-brand-100: #CFA1FFFF;
22-
--pgn-color-action-default-brand-200: #C17FFFFF;
23-
--pgn-color-action-default-brand-300: #AB47FFFF;
24-
--pgn-color-action-default-brand-400: #9613FFFF;
25-
--pgn-color-action-default-brand-600: #6400A8FF;
26-
--pgn-color-action-default-brand-700: #510D81FF;
27-
--pgn-color-action-default-brand-800: #3D0F5FFF;
28-
--pgn-color-action-default-brand-900: #1F0234FF;
29-
--pgn-color-action-default-brand-base: #7C04D3FF;
30-
--pgn-color-action-default-brand-500: #7C04D3FF;
33+
--pgn-color-gray-500: var(--pgn-color-gray-base);
34+
--pgn-color-primary-100: #F6F1F2FF;
35+
--pgn-color-primary-200: #DAC6C9FF;
36+
--pgn-color-primary-300: #B58D94FF;
37+
--pgn-color-primary-400: #90535EFF;
38+
--pgn-color-primary-500: var(--pgn-color-primary-base);
39+
--pgn-color-primary-600: #601724FF;
40+
--pgn-color-primary-700: #561520FF;
41+
--pgn-color-primary-800: #50141EFF;
42+
--pgn-color-primary-900: #4B121CFF;
43+
--pgn-color-secondary-base: var(--pgn-color-gray-700);
44+
--pgn-color-brand-100: #FCF5F2FF;
45+
--pgn-color-brand-200: #F1D5CAFF;
46+
--pgn-color-brand-300: #E2AB95FF;
47+
--pgn-color-brand-400: #D4815FFF;
48+
--pgn-color-brand-500: var(--pgn-color-brand-base);
49+
--pgn-color-brand-600: #B14E26FF;
50+
--pgn-color-brand-700: #9E4622FF;
51+
--pgn-color-brand-800: #944120FF;
52+
--pgn-color-brand-900: #8A3D1DFF;
53+
--pgn-color-success-base: var(--pgn-color-green);
54+
--pgn-color-info-base: var(--pgn-color-teal);
55+
--pgn-color-warning-base: var(--pgn-color-yellow);
56+
--pgn-color-danger-base: var(--pgn-color-red);
57+
--pgn-color-light-100: #FEFEFDFF;
58+
--pgn-color-light-200: #FCFBF8FF;
59+
--pgn-color-light-300: #FAF6F1FF;
60+
--pgn-color-light-400: #F7F2E9FF;
61+
--pgn-color-light-500: var(--pgn-color-light-base);
62+
--pgn-color-light-600: #DCD5CBFF;
63+
--pgn-color-light-700: #C3BEB5FF;
64+
--pgn-color-light-800: #B7B2AAFF;
65+
--pgn-color-light-900: #ABA69EFF;
66+
--pgn-color-dark-100: #F2F2F1FF;
67+
--pgn-color-dark-200: #CAC7C6FF;
68+
--pgn-color-dark-300: #95908DFF;
69+
--pgn-color-dark-400: #5F5853FF;
70+
--pgn-color-dark-500: var(--pgn-color-dark-base);
71+
--pgn-color-dark-600: #261D17FF;
72+
--pgn-color-dark-700: #221A15FF;
73+
--pgn-color-dark-800: #201814FF;
74+
--pgn-color-dark-900: #1D1612FF;
75+
--pgn-color-action-default-gray-100: #DCD2C3FF;
76+
--pgn-color-action-default-gray-200: #C2B6A6FF;
77+
--pgn-color-action-default-gray-300: #A49785FF;
78+
--pgn-color-action-default-gray-400: #7C7163FF;
79+
--pgn-color-action-default-gray-600: #3A3630FF;
80+
--pgn-color-action-default-gray-700: #262420FF;
81+
--pgn-color-action-default-gray-800: #131210FF;
82+
--pgn-color-action-default-gray-900: #000000FF;
83+
--pgn-color-action-default-gray-base: #4F4941FF;
84+
--pgn-color-action-default-primary-base: #421019FF;
85+
--pgn-color-action-default-brand-base: #9B4421FF;
86+
--pgn-color-action-default-light-base: #E6D6BDFF;
87+
--pgn-color-action-default-dark-base: #0A0806FF;
88+
--pgn-color-action-default-accent-a: #D88B1AFF;
89+
--pgn-color-action-default-accent-b: #425E31FF;
90+
--pgn-color-secondary-100: #F4F3F3FF;
91+
--pgn-color-secondary-200: #D0CFCDFF;
92+
--pgn-color-secondary-300: #A19F9BFF;
93+
--pgn-color-secondary-400: #716E69FF;
94+
--pgn-color-secondary-500: var(--pgn-color-secondary-base);
95+
--pgn-color-secondary-600: #3B3832FF;
96+
--pgn-color-secondary-700: #35322CFF;
97+
--pgn-color-secondary-800: #322F29FF;
98+
--pgn-color-secondary-900: #2E2B27FF;
99+
--pgn-color-success-100: #F3F5F3FF;
100+
--pgn-color-success-200: #CED6CFFF;
101+
--pgn-color-success-300: #9EAD9FFF;
102+
--pgn-color-success-400: #6D836EFF;
103+
--pgn-color-success-500: var(--pgn-color-success-base);
104+
--pgn-color-success-600: #365138FF;
105+
--pgn-color-success-700: #304832FF;
106+
--pgn-color-success-800: #2D442FFF;
107+
--pgn-color-success-900: #2A3F2BFF;
108+
--pgn-color-info-100: #F4F7F7FF;
109+
--pgn-color-info-200: #D3DCDCFF;
110+
--pgn-color-info-300: #A7B9B9FF;
111+
--pgn-color-info-400: #7B9696FF;
112+
--pgn-color-info-500: var(--pgn-color-info-base);
113+
--pgn-color-info-600: #476868FF;
114+
--pgn-color-info-700: #3F5C5CFF;
115+
--pgn-color-info-800: #3B5656FF;
116+
--pgn-color-info-900: #375151FF;
117+
--pgn-color-warning-100: #FCFAF3FF;
118+
--pgn-color-warning-200: #F4E9CDFF;
119+
--pgn-color-warning-300: #EAD29BFF;
120+
--pgn-color-warning-400: #DFBC69FF;
121+
--pgn-color-warning-500: var(--pgn-color-warning-base);
122+
--pgn-color-warning-600: #BF9532FF;
123+
--pgn-color-warning-700: #AA842CFF;
124+
--pgn-color-warning-800: #9F7C29FF;
125+
--pgn-color-warning-900: #947427FF;
126+
--pgn-color-danger-100: #F8F2F3FF;
127+
--pgn-color-danger-200: #E2C8CCFF;
128+
--pgn-color-danger-300: #C59199FF;
129+
--pgn-color-danger-400: #A85A65FF;
130+
--pgn-color-danger-500: var(--pgn-color-danger-base);
131+
--pgn-color-danger-600: #7D202DFF;
132+
--pgn-color-danger-700: #6F1C28FF;
133+
--pgn-color-danger-800: #681A26FF;
134+
--pgn-color-danger-900: #611923FF; /** Danger color of level 900. */
135+
--pgn-color-action-default-gray-500: #4F4941FF;
136+
--pgn-color-action-default-primary-100: #E2D2D5FF;
137+
--pgn-color-action-default-primary-200: #C6A7ACFF;
138+
--pgn-color-action-default-primary-300: #A16E77FF;
139+
--pgn-color-action-default-primary-400: #704049FF;
140+
--pgn-color-action-default-primary-500: #421019FF;
141+
--pgn-color-action-default-primary-600: #370D15FF;
142+
--pgn-color-action-default-primary-700: #2D0B11FF;
143+
--pgn-color-action-default-primary-800: #270A0FFF;
144+
--pgn-color-action-default-primary-900: #22080DFF;
145+
--pgn-color-action-default-secondary-base: #262420FF;
146+
--pgn-color-action-default-brand-100: #F2D5C9FF;
147+
--pgn-color-action-default-brand-200: #E6B5A2FF;
148+
--pgn-color-action-default-brand-300: #D78B6DFF;
149+
--pgn-color-action-default-brand-400: #C96137FF;
150+
--pgn-color-action-default-brand-500: #9B4421FF;
151+
--pgn-color-action-default-brand-600: #873B1DFF;
152+
--pgn-color-action-default-brand-700: #743319FF;
153+
--pgn-color-action-default-brand-800: #6A2F17FF;
154+
--pgn-color-action-default-brand-900: #602A14FF;
155+
--pgn-color-action-default-success-base: #283B29FF;
156+
--pgn-color-action-default-info-base: #3A5555FF;
157+
--pgn-color-action-default-warning-base: #B28826FF;
158+
--pgn-color-action-default-danger-base: #621923FF;
159+
--pgn-color-action-default-light-100: #EDEDDBFF;
160+
--pgn-color-action-default-light-200: #EDE7D4FF;
161+
--pgn-color-action-default-light-300: #EDDECBFF;
162+
--pgn-color-action-default-light-400: #E9DCC4FF;
163+
--pgn-color-action-default-light-500: #E6D6BDFF;
164+
--pgn-color-action-default-light-600: #C7BCADFF;
165+
--pgn-color-action-default-light-700: #ACA599FF;
166+
--pgn-color-action-default-light-800: #A0998EFF;
167+
--pgn-color-action-default-light-900: #938D83FF;
168+
--pgn-color-action-default-dark-100: #D9D9D7FF;
169+
--pgn-color-action-default-dark-200: #B1ADACFF;
170+
--pgn-color-action-default-dark-300: #7C7673FF;
171+
--pgn-color-action-default-dark-400: #443F3BFF;
172+
--pgn-color-action-default-dark-500: #0A0806FF;
173+
--pgn-color-action-default-dark-600: #060504FF;
174+
--pgn-color-action-default-dark-700: #020202FF;
175+
--pgn-color-action-default-dark-800: #010000FF;
176+
--pgn-color-action-default-dark-900: #000000FF;
177+
--pgn-color-action-default-secondary-100: #DCD8D8FF;
178+
--pgn-color-action-default-secondary-200: #B7B6B3FF;
179+
--pgn-color-action-default-secondary-300: #888681FF;
180+
--pgn-color-action-default-secondary-400: #575450FF;
181+
--pgn-color-action-default-secondary-500: #262420FF;
182+
--pgn-color-action-default-secondary-600: #1F1E1BFF;
183+
--pgn-color-action-default-secondary-700: #191815FF;
184+
--pgn-color-action-default-secondary-800: #161512FF;
185+
--pgn-color-action-default-secondary-900: #121110FF;
186+
--pgn-color-action-default-success-100: #D7DED7FF;
187+
--pgn-color-action-default-success-200: #B2BFB4FF;
188+
--pgn-color-action-default-success-300: #829684FF;
189+
--pgn-color-action-default-success-400: #566757FF;
190+
--pgn-color-action-default-success-500: #283B29FF;
191+
--pgn-color-action-default-success-600: #223223FF;
192+
--pgn-color-action-default-success-700: #1C291DFF;
193+
--pgn-color-action-default-success-800: #19251AFF;
194+
--pgn-color-action-default-success-900: #162016FF;
195+
--pgn-color-action-default-info-100: #D6E2E2FF;
196+
--pgn-color-action-default-info-200: #B7C5C5FF;
197+
--pgn-color-action-default-info-300: #8BA2A2FF;
198+
--pgn-color-action-default-info-400: #627C7CFF;
199+
--pgn-color-action-default-info-500: #3A5555FF;
200+
--pgn-color-action-default-info-600: #324A4AFF;
201+
--pgn-color-action-default-info-700: #2A3E3EFF;
202+
--pgn-color-action-default-info-800: #263838FF;
203+
--pgn-color-action-default-info-900: #223333FF;
204+
--pgn-color-action-default-warning-100: #F2E9CAFF;
205+
--pgn-color-action-default-warning-200: #EBD7A3FF;
206+
--pgn-color-action-default-warning-300: #E1BF71FF;
207+
--pgn-color-action-default-warning-400: #D6A93FFF;
208+
--pgn-color-action-default-warning-500: #B28826FF;
209+
--pgn-color-action-default-warning-600: #977527FF;
210+
--pgn-color-action-default-warning-700: #816522FF;
211+
--pgn-color-action-default-warning-800: #765C1FFF;
212+
--pgn-color-action-default-warning-900: #6C541CFF;
213+
--pgn-color-action-default-danger-100: #E6D1D4FF;
214+
--pgn-color-action-default-danger-200: #D0A7ADFF;
215+
--pgn-color-action-default-danger-300: #B3707AFF;
216+
--pgn-color-action-default-danger-400: #884751FF;
217+
--pgn-color-action-default-danger-500: #621923FF;
218+
--pgn-color-action-default-danger-600: #54161EFF;
219+
--pgn-color-action-default-danger-700: #461219FF;
220+
--pgn-color-action-default-danger-800: #3F1017FF;
221+
--pgn-color-action-default-danger-900: #380F14FF;
31222
}

0 commit comments

Comments
 (0)