@phila/phila-ui-core 2.3.3-beta.1 → 2.4.0-beta.2

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 (17) hide show
  1. package/dist/styles/elements/buttons.css +45 -41
  2. package/dist/styles/elements/icons.css +14 -14
  3. package/dist/styles/generated/extended-colors.css +0 -3
  4. package/dist/styles/generated/other.css +12 -32
  5. package/dist/styles/generated/palettes.css +75 -75
  6. package/dist/styles/generated/primitives.css +20 -27
  7. package/dist/styles/generated/ramps.css +257 -257
  8. package/dist/styles/generated/schemes.css +39 -32
  9. package/dist/styles/generated/size.css +1 -0
  10. package/dist/styles/generated/typography.css +19 -9
  11. package/dist/styles/legacy.css +13 -4
  12. package/dist/styles/raw/PhilaUI 4.0-variables.css +900 -2212
  13. package/dist/styles/typography.css +3 -3
  14. package/dist/styles/utilities/color.css +4 -5
  15. package/dist/styles/utilities/containers.css +1 -1
  16. package/dist/styles/utilities/spacing.css +23 -23
  17. package/package.json +1 -1
package/dist/styles/elements/buttons.css CHANGED
@@ -11,7 +11,7 @@
11
11
  border-radius: var(--border-radius-2xl);
12
12
 
13
13
  /* --- Text styles --- */
14
- color: var(--Schemes-On-Primary-Container);
14
+ color: var(--Schemes-On-Primary);
15
15
  font-family: var(--Label-Default-font-label-default-family, Montserrat);
16
16
  font-size: var(--Label-Default-font-label-default-size, 1rem);
17
17
  font-style: normal;
@@ -37,26 +37,26 @@
37
37
 
38
38
  /* Prevent visited link color changes - maintain button color */
39
39
  &:visited:not(:hover):not(:focus):not(:active) {
40
- color: var(--Schemes-On-Primary-Container);
40
+ color: var(--Schemes-On-Primary);
41
41
  }
42
42
 
43
43
  /* --- Sizing --- */
44
- height: var(--dimension-core-700);
44
+ height: var(--scale-700);
45
45
  max-width: 18.75rem;
46
46
  padding: var(--spacing-xs) var(--spacing-l);
47
47
 
48
48
  &.is-medium {
49
- height: var(--dimension-core-600);
49
+ height: var(--scale-600);
50
50
  padding: var(--spacing-xs) var(--spacing-m);
51
51
  }
52
52
  &.is-small {
53
- height: var(--dimension-core-500);
53
+ height: var(--scale-500);
54
54
  padding: var(--spacing-2xs) var(--spacing-s);
55
55
  }
56
56
  &.is-extra-small:not(.icon-button) {
57
57
  box-shadow: none;
58
- color: var(--Schemes-Primary-Container);
59
- height: var(--dimension-core-400);
58
+ color: var(--Schemes-Primary);
59
+ height: var(--scale-400);
60
60
  padding: var(--spacing-3xs);
61
61
  background-color: inherit !important;
62
62
  font-family: var(--Label-Default-font-label-default-family, Montserrat);
@@ -64,7 +64,7 @@
64
64
  font-style: normal;
65
65
  font-weight: 600;
66
66
  line-height: var(--Label-Small-font-label-small-lineheight);
67
- border-color: var(--Schemes-Surface-Container-Lowest);
67
+ border-color: transparent;
68
68
  border-width: var(--spacing-3xs);
69
69
  border-style: solid;
70
70
  box-sizing: border-box;
@@ -73,12 +73,11 @@
73
73
  border-radius: 0;
74
74
  &:focus:not(:disabled),
75
75
  &:hover:not(:disabled) {
76
- --Schemes-On-Primary-Container: --Schemes-Inverse-Surface;
77
- color: var(--Schemes-Inverse-Surface) !important;
78
- border-bottom-color: var(--Schemes-Inverse-Surface) !important;
76
+ color: var(--Palettes-Primary-Primary-300) !important;
77
+ border-bottom-color: var(--Palettes-Primary-Primary-300) !important;
79
78
  }
80
79
  &:active:not(:disabled) {
81
- color: var(--Schemes-Secondary-Container) !important;
80
+ color: var(--Palettes-Primary-Primary-300) !important;
82
81
  box-sizing: border-box;
83
82
  border: none;
84
83
  }
@@ -89,7 +88,7 @@
89
88
  color: var(--Schemes-Error);
90
89
  }
91
90
  &:visited:not(:hover):not(:focus):not(:active) {
92
- color: var(--Schemes-Primary-Container);
91
+ color: var(--Schemes-Primary);
93
92
  }
94
93
  &.phila-button--destructive:visited:not(:hover):not(:focus):not(:active) {
95
94
  color: var(--Schemes-Error-Container);
@@ -101,13 +100,13 @@
101
100
  &.icon-button:hover:not(:disabled),
102
101
  &.icon-button:focus:not(:disabled) {
103
102
  &:not(:active):not(.phila-button--secondary):not(.icon-button--standard) {
104
- background: var(--Schemes-On-Surface-Variant) !important;
105
- color: var(--Schemes-On-Primary-Container) !important;
103
+ background: var(--Palettes-Primary-Primary-400) !important;
104
+ color: var(--Schemes-On-Primary) !important;
106
105
  }
107
106
  }
108
107
  &:active:not(:disabled):not(.is-extra-small) {
109
- color: var(--Schemes-On-Primary-Container) !important;
110
- background: var(--Schemes-Secondary-Container) !important;
108
+ color: var(--Schemes-On-Primary) !important;
109
+ background: var(--Palettes-Primary-Primary-300) !important;
111
110
  }
112
111
  &:disabled,
113
112
  &[aria-disabled="true"] {
@@ -123,18 +122,18 @@
123
122
 
124
123
  &.phila-button--secondary:not(:disabled) {
125
124
  color: var(--Schemes-Primary);
126
- background: var(--Schemes-Surface-Container-Lowest);
125
+ background: var(--Schemes-Surface-Bright);
127
126
  &:not(:active) {
128
127
  border: var(--border-width-m) solid var(--Schemes-Primary);
129
128
  }
130
129
  &:active:not(:disabled):not(.is-extra-small) {
131
- border-right: var(--border-width-m) solid var(--Schemes-Surface-Container-Lowest);
132
- border-left: var(--border-width-m) solid var(--Schemes-Surface-Container-Lowest);
130
+ border-right: var(--border-width-m) solid var(--Schemes-Surface-Bright);
131
+ border-left: var(--border-width-m) solid var(--Schemes-Surface-Bright);
133
132
  }
134
133
  &:hover:not(:disabled),
135
134
  &:focus:not(:disabled) {
136
- color: var(--Schemes-On-Primary-Container);
137
- background: var(--Schemes-On-Surface-Variant);
135
+ color: var(--Schemes-On-Primary);
136
+ background: var(--Palettes-Primary-Primary-400);
138
137
  }
139
138
  &:visited:not(:hover):not(:focus):not(:active) {
140
139
  color: var(--Schemes-Primary);
@@ -150,46 +149,46 @@
150
149
  /* --- Icon Buttons --- */
151
150
  &.icon-button {
152
151
  padding: 0;
153
- height: var(--dimension-core-700);
154
- width: var(--dimension-core-700);
152
+ height: var(--scale-700);
153
+ width: var(--scale-700);
155
154
  border-radius: var(--border-radius-l);
156
155
 
157
156
  &.is-extra-large {
158
- height: var(--dimension-core-1000);
159
- width: var(--dimension-core-1000);
157
+ height: var(--scale-1000);
158
+ width: var(--scale-1000);
160
159
  border-radius: var(--border-radius-l);
161
160
  }
162
161
 
163
162
  &.is-large {
164
- height: var(--dimension-core-700);
165
- width: var(--dimension-core-700);
163
+ height: var(--scale-700);
164
+ width: var(--scale-700);
166
165
  border-radius: var(--border-radius-m);
167
166
  }
168
167
 
169
168
  &.is-medium {
170
- height: var(--dimension-core-600);
171
- width: var(--dimension-core-600);
169
+ height: var(--scale-600);
170
+ width: var(--scale-600);
172
171
  border-radius: var(--border-radius-s);
173
172
  }
174
173
 
175
174
  &.is-small {
176
- height: var(--dimension-core-400);
177
- width: var(--dimension-core-400);
175
+ height: var(--scale-400);
176
+ width: var(--scale-400);
178
177
  border-radius: var(--border-radius-xs);
179
178
  }
180
179
 
181
180
  &.is-extra-small {
182
- width: var(--dimension-core-300);
183
- height: var(--dimension-core-300);
181
+ width: var(--scale-300);
182
+ height: var(--scale-300);
184
183
  border-radius: var(--border-radius-xs);
185
184
  }
186
185
 
187
186
  &.icon-button--standard:not(:disabled) {
188
187
  box-shadow: none;
189
- color: var(--Schemes-Primary, #003282);
188
+ color: var(--Schemes-Primary, #1034f4);
190
189
  background: transparent;
191
190
  &:visited:not(:hover):not(:focus):not(:active) {
192
- color: var(--Schemes-Primary, #003282);
191
+ color: var(--Schemes-Primary, #1034f4);
193
192
  }
194
193
  }
195
194
  &.phila-button--destructive:not(:disabled) {
@@ -197,15 +196,14 @@
197
196
  background: var(--Schemes-Error-Container);
198
197
  }
199
198
  &:active:not(:disabled) {
200
- color: var(--Schemes-On-Secondary-Container) !important;
201
- background: var(--Schemes-Secondary-Container) !important;
199
+ color: var(--Schemes-On-Primary) !important;
200
+ background: var(--Palettes-Primary-Primary-300) !important;
202
201
  box-sizing: border-box;
203
202
  border: none;
204
203
  }
205
204
  &:hover:not(:disabled),
206
205
  &:focus:not(:disabled) {
207
- &.phila-button--secondary,
208
- &.icon-button--standard {
206
+ &.phila-button--secondary {
209
207
  color: var(--Schemes-Primary);
210
208
  background: var(--Schemes-Surface-Container);
211
209
  border-color: transparent;
@@ -213,6 +211,12 @@
213
211
  0 1px 2px 0 rgba(0, 0, 0, 0.3),
214
212
  0 1px 3px 1px rgba(0, 0, 0, 0.15);
215
213
  }
214
+ &.icon-button--standard {
215
+ color: var(--Schemes-Primary);
216
+ background: var(--Schemes-Surface-Container);
217
+ border-color: transparent;
218
+ box-shadow: none;
219
+ }
216
220
  }
217
221
  }
218
222
 
@@ -243,6 +247,6 @@
243
247
  }
244
248
  &:focus {
245
249
  outline-offset: var(--spacing-xs);
246
- outline: var(--stroke-stroke-thin, 2px) solid var(--Schemes-Primary-Container);
250
+ outline: 2px solid var(--Focus-Ring-Color);
247
251
  }
248
252
  }
package/dist/styles/elements/icons.css CHANGED
@@ -7,51 +7,51 @@
7
7
  font-weight: 900;
8
8
  line-height: normal;
9
9
  font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
10
- height: var(--dimension-core-400);
11
- width: var(--dimension-core-400);
10
+ height: var(--scale-400);
11
+ width: var(--scale-400);
12
12
  padding: var(--spacing-s);
13
13
  }
14
14
 
15
15
  /* Icon size variants */
16
16
  .phila-icon--extra-large {
17
17
  font-size: var(--Icon-Solid-ExtraLarge-font-icon-solid-xl-size);
18
- height: var(--dimension-core-1000);
19
- width: var(--dimension-core-1000);
18
+ height: var(--scale-1000);
19
+ width: var(--scale-1000);
20
20
  padding: var(--spacing-xl);
21
21
  }
22
22
 
23
23
  .phila-icon--large {
24
24
  font-size: var(--Icon-Solid-Large-font-icon-solid-large-size);
25
- height: var(--dimension-core-700);
26
- width: var(--dimension-core-700);
25
+ height: var(--scale-700);
26
+ width: var(--scale-700);
27
27
  padding: var(--spacing-m);
28
28
  }
29
29
 
30
30
  .phila-icon--medium {
31
31
  font-size: var(--Icon-Solid-Default-font-icon-solid-default-size);
32
- height: var(--dimension-core-600);
33
- width: var(--dimension-core-600);
32
+ height: var(--scale-600);
33
+ width: var(--scale-600);
34
34
  padding: var(--spacing-m);
35
35
  }
36
36
 
37
37
  .phila-icon--small {
38
38
  font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
39
- height: var(--dimension-core-400);
40
- width: var(--dimension-core-400);
39
+ height: var(--scale-400);
40
+ width: var(--scale-400);
41
41
  padding: var(--spacing-s);
42
42
  }
43
43
 
44
44
  .phila-icon--extra-small {
45
45
  font-size: var(--Icon-Solid-ExtraSmall-font-icon-solid-xs-size);
46
- height: var(--dimension-core-300);
47
- width: var(--dimension-core-300);
46
+ height: var(--scale-300);
47
+ width: var(--scale-300);
48
48
  padding: var(--spacing-xs);
49
49
  }
50
50
 
51
51
  .phila-icon--xxsmall {
52
52
  font-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
53
- height: var(--dimension-core-300);
54
- width: var(--dimension-core-300);
53
+ height: var(--scale-300);
54
+ width: var(--scale-300);
55
55
  padding: var(--spacing-xs);
56
56
  }
57
57
 
package/dist/styles/generated/extended-colors.css CHANGED
@@ -4,8 +4,5 @@
4
4
 
5
5
  --Extended-Colors-Black: var(--black-400-black);
6
6
  --Extended-Colors-Black-Container: var(--black-450-black);
7
- --Extended-Colors-link-default: var(--Schemes-Primary);
8
- --Extended-Colors-link-hover: var(--Schemes-On-Surface);
9
- --Extended-Colors-link-visited: var(--Palettes-Visited-Visited-450);
10
7
  --Extended-Colors-White: var(--white-400-white);
11
8
  }
package/dist/styles/generated/other.css CHANGED
@@ -2,9 +2,9 @@
2
2
  /* other */
3
3
  /* Generated from Figma CSS export - references preserved */
4
4
 
5
- --border-left-right: 0;
6
- --border-top-bottom: 0;
7
- --border-width: 0;
5
+ --black-25: rgba(0, 0, 0, 0.251);
6
+ --black-50: rgba(0, 0, 0, 0.502);
7
+ --black-75: rgba(0, 0, 0, 0.749);
8
8
  --Breadcrumb-Boolean: 0;
9
9
  --Breadcrumb-Chevron-Visible: 0;
10
10
  --Breadcrumb-Home-Visible: 1;
@@ -17,20 +17,6 @@
17
17
  --Breadcrumb-Links-Visible: 1;
18
18
  --Breadcrumb-Text: "Apply for a Temporary No Parking (TNP) permit";
19
19
  --Breadcrumb-Text-Visible: 1;
20
- --button-buttom-tertiary: 1;
21
- --button-button: 1;
22
- --button-button-primary: 1;
23
- --button-button-secondary: 1;
24
- --Card-media-exdent: 0;
25
- --checkbox: 1;
26
- --color-background-color: rgb(255, 255, 255);
27
- --color-border-color: rgb(255, 255, 255);
28
- --color-button-color: rgb(255, 255, 255);
29
- --color-icon-color: rgb(255, 255, 255);
30
- --color-label-color: rgb(255, 255, 255);
31
- --content-color: var(--Schemes-On-Surface);
32
- --date: 1;
33
- --flag-layout: "Standard";
34
20
  --Footer-Column-1-City-Commissioners: "City Commissioners";
35
21
  --Footer-Column-1-City-Controller: "City Controller";
36
22
  --Footer-Column-1-City-Council: "City Council";
@@ -59,27 +45,22 @@
59
45
  --Footer-vert-rule: 1;
60
46
  --Header-Content-Language-LInk-Label: "English";
61
47
  --Header-Content-Trusted-Banner-Copy: "Here's how you know";
62
- --Header-Content-Trusted-Banner-Icon: "caret-down";
48
+ --Header-Display-Dropdown-Text: 1;
49
+ --Header-Display-Info-Circle: 0;
63
50
  --Header-Display-Language-Links-Visible: 1;
64
51
  --Header-Display-Mayor-Link-Visible: 1;
65
52
  --Header-Display-Mobile-Globe-Visible: 0;
66
53
  --Header-Display-Nav-Link-Visible: 1;
54
+ --Header-Display-Search-Field-Visible: 1;
55
+ --Header-Display-Search-Icon-Mobile: 0;
56
+ --Header-Display-Trusted-banner-caret: 1;
67
57
  --Header-Display-Trusted-Banner-Text-Visible: 1;
68
58
  --Header-Menu-Button-Color: rgb(255, 255, 255);
69
59
  --Header-Size-Header-Width: 1440px;
70
- --headline: 1;
71
60
  --Hover-Alternative-Nested-Off: 0;
72
61
  --Hover-Alternative-Nested-On: 1;
73
62
  --Icon-bars: "bars";
74
- --image-true: 1;
75
- --link: 1;
76
63
  --Links-Color: rgb(255, 255, 255);
77
- --max-height: 9999px;
78
- --max-width: 1216px;
79
- --media: 1;
80
- --min-height: 250px;
81
- --min-width: 400px;
82
- --play-button: 1;
83
64
  --Radio-button-size: var(--scale-250);
84
65
  --Radio-item-1: 0;
85
66
  --Radio-item-2: 0;
@@ -91,11 +72,10 @@
91
72
  --Radio-margin-bottom: var(--spacing-m);
92
73
  --Radio-selected-border-width: var(--border-width-xl);
93
74
  --Radio-selected-item: 0;
94
- --radius: var(--border-radius-l);
95
75
  --Sitewide-alerts-alert-icon: 1;
96
76
  --Sitewide-alerts-alert-width: var(--devices-xl);
97
- --String: "String value";
98
- --surface-color: var(--Schemes-Surface-Bright);
99
- --top-icon-1: 1;
100
- --top-icon-2: 1;
77
+ --Sitewide-alerts-Announced-date-true: 1;
78
+ --Sitewide-alerts-Boolean: 0;
79
+ --Sitewide-alerts-Footer-group-true: 1;
80
+ --Sitewide-alerts-Link-true: 1;
101
81
  }
package/dist/styles/generated/palettes.css CHANGED
@@ -17,21 +17,21 @@
17
17
  --Palettes-Alert-Alert-650: var(--bell-yellow-650-bell-yellow);
18
18
  --Palettes-Alert-Alert-700: var(--bell-yellow-700-bell-yellow);
19
19
  --Palettes-Alert-Alert-750: var(--bell-yellow-750-bell-yellow);
20
- --Palettes-Error-Error-100: var(--red-100-red);
21
- --Palettes-Error-Error-150: var(--red-150-red);
22
- --Palettes-Error-Error-200: var(--red-200-red);
23
- --Palettes-Error-Error-250: var(--red-250-red);
24
- --Palettes-Error-Error-300: var(--red-300-red);
25
- --Palettes-Error-Error-350: var(--red-350-red);
26
- --Palettes-Error-Error-400: var(--red-400-red);
27
- --Palettes-Error-Error-450: var(--red-450-red);
28
- --Palettes-Error-Error-50: var(--red-50-red);
29
- --Palettes-Error-Error-500: var(--red-500-red);
30
- --Palettes-Error-Error-550: var(--red-550-red);
31
- --Palettes-Error-Error-600: var(--red-600-red);
32
- --Palettes-Error-Error-650: var(--red-650-red);
33
- --Palettes-Error-Error-700: var(--red-700-red);
34
- --Palettes-Error-Error-750: var(--red-750-red);
20
+ --Palettes-Error-Error-100: var(--phillies-red-100-phillies-red);
21
+ --Palettes-Error-Error-150: var(--phillies-red-150-phillies-red);
22
+ --Palettes-Error-Error-200: var(--phillies-red-200-phillies-red);
23
+ --Palettes-Error-Error-250: var(--phillies-red-250-phillies-red);
24
+ --Palettes-Error-Error-300: var(--phillies-red-300-phillies-red);
25
+ --Palettes-Error-Error-350: var(--phillies-red-350-phillies-red);
26
+ --Palettes-Error-Error-400: var(--phillies-red-400-phillies-red);
27
+ --Palettes-Error-Error-450: var(--phillies-red-450-phillies-red);
28
+ --Palettes-Error-Error-50: var(--phillies-red-50-phillies-red);
29
+ --Palettes-Error-Error-500: var(--phillies-red-500-phillies-red);
30
+ --Palettes-Error-Error-550: var(--phillies-red-550-phillies-red);
31
+ --Palettes-Error-Error-600: var(--phillies-red-600-phillies-red);
32
+ --Palettes-Error-Error-650: var(--phillies-red-650-phillies-red);
33
+ --Palettes-Error-Error-700: var(--phillies-red-700-phillies-red);
34
+ --Palettes-Error-Error-750: var(--phillies-red-750-phillies-red);
35
35
  --Palettes-Neutral-Neutral-100: var(--medium-grey-100-medium-grey);
36
36
  --Palettes-Neutral-Neutral-150: var(--medium-grey-150-medium-grey);
37
37
  --Palettes-Neutral-Neutral-200: var(--medium-grey-200-medium-grey);
@@ -62,66 +62,66 @@
62
62
  --Palettes-Neutral-Variant-Neutral-Variant-650: var(--dark-grey-650-dark-grey);
63
63
  --Palettes-Neutral-Variant-Neutral-Variant-700: var(--dark-grey-700-dark-grey);
64
64
  --Palettes-Neutral-Variant-Neutral-Variant-750: var(--dark-grey-750-dark-grey);
65
- --Palettes-Primary-Primary-100: var(--blue-100-blue);
66
- --Palettes-Primary-Primary-150: var(--blue-150-blue);
67
- --Palettes-Primary-Primary-200: var(--blue-200-blue);
68
- --Palettes-Primary-Primary-250: var(--blue-250-blue);
69
- --Palettes-Primary-Primary-300: var(--blue-300-blue);
70
- --Palettes-Primary-Primary-350: var(--blue-350-blue);
71
- --Palettes-Primary-Primary-400: var(--blue-400-blue);
72
- --Palettes-Primary-Primary-450: var(--blue-450-blue);
73
- --Palettes-Primary-Primary-50: var(--blue-50-blue);
74
- --Palettes-Primary-Primary-500: var(--blue-500-blue);
75
- --Palettes-Primary-Primary-550: var(--blue-550-blue);
76
- --Palettes-Primary-Primary-600: var(--blue-600-blue);
77
- --Palettes-Primary-Primary-650: var(--blue-650-blue);
78
- --Palettes-Primary-Primary-700: var(--blue-700-blue);
79
- --Palettes-Primary-Primary-750: var(--blue-750-blue);
80
- --Palettes-Secondary-Secondary-100: var(--dark-blue-100-dark-blue);
81
- --Palettes-Secondary-Secondary-150: var(--dark-blue-150-dark-blue);
82
- --Palettes-Secondary-Secondary-200: var(--dark-blue-200-dark-blue);
83
- --Palettes-Secondary-Secondary-250: var(--dark-blue-250-dark-blue);
84
- --Palettes-Secondary-Secondary-300: var(--dark-blue-300-dark-blue);
85
- --Palettes-Secondary-Secondary-350: var(--dark-blue-350-dark-blue);
86
- --Palettes-Secondary-Secondary-400: var(--dark-blue-400-dark-blue);
87
- --Palettes-Secondary-Secondary-450: var(--dark-blue-450-dark-blue);
88
- --Palettes-Secondary-Secondary-50: var(--dark-blue-50-dark-blue);
89
- --Palettes-Secondary-Secondary-500: var(--dark-blue-500-dark-blue);
90
- --Palettes-Secondary-Secondary-550: var(--dark-blue-550-dark-blue);
91
- --Palettes-Secondary-Secondary-600: var(--dark-blue-600-dark-blue);
92
- --Palettes-Secondary-Secondary-650: var(--dark-blue-650-dark-blue);
93
- --Palettes-Secondary-Secondary-700: var(--dark-blue-700-dark-blue);
94
- --Palettes-Secondary-Secondary-750: var(--dark-blue-750-dark-blue);
95
- --Palettes-Success-Success-100: var(--green-100-green);
96
- --Palettes-Success-Success-150: var(--green-150-green);
97
- --Palettes-Success-Success-200: var(--green-200-green);
98
- --Palettes-Success-Success-250: var(--green-250-green);
99
- --Palettes-Success-Success-300: var(--green-300-green);
100
- --Palettes-Success-Success-350: var(--green-350-green);
101
- --Palettes-Success-Success-400: var(--green-400-green);
102
- --Palettes-Success-Success-450: var(--green-450-green);
103
- --Palettes-Success-Success-50: var(--green-50-green);
104
- --Palettes-Success-Success-500: var(--green-500-green);
105
- --Palettes-Success-Success-550: var(--green-550-green);
106
- --Palettes-Success-Success-600: var(--green-600-green);
107
- --Palettes-Success-Success-650: var(--green-650-green);
108
- --Palettes-Success-Success-700: var(--green-700-green);
109
- --Palettes-Success-Success-750: var(--green-750-green);
110
- --Palettes-Tertiary-Tertiary-100: var(--light-blue-100-light-blue);
111
- --Palettes-Tertiary-Tertiary-150: var(--light-blue-150-light-blue);
112
- --Palettes-Tertiary-Tertiary-200: var(--light-blue-200-light-blue);
113
- --Palettes-Tertiary-Tertiary-250: var(--light-blue-250-light-blue);
114
- --Palettes-Tertiary-Tertiary-300: var(--light-blue-300-light-blue);
115
- --Palettes-Tertiary-Tertiary-350: var(--light-blue-350-light-blue);
116
- --Palettes-Tertiary-Tertiary-400: var(--light-blue-400-light-blue);
117
- --Palettes-Tertiary-Tertiary-450: var(--light-blue-450-light-blue);
118
- --Palettes-Tertiary-Tertiary-50: var(--light-blue-50-light-blue);
119
- --Palettes-Tertiary-Tertiary-500: var(--light-blue-500-light-blue);
120
- --Palettes-Tertiary-Tertiary-550: var(--light-blue-550-light-blue);
121
- --Palettes-Tertiary-Tertiary-600: var(--light-blue-600-light-blue);
122
- --Palettes-Tertiary-Tertiary-650: var(--light-blue-650-light-blue);
123
- --Palettes-Tertiary-Tertiary-700: var(--light-blue-700-light-blue);
124
- --Palettes-Tertiary-Tertiary-750: var(--light-blue-750-light-blue);
65
+ --Palettes-Primary-Primary-100: var(--sixers-blue-100-sixers-blue);
66
+ --Palettes-Primary-Primary-150: var(--sixers-blue-150-sixers-blue);
67
+ --Palettes-Primary-Primary-200: var(--sixers-blue-200-sixers-blue);
68
+ --Palettes-Primary-Primary-250: var(--sixers-blue-250-sixers-blue);
69
+ --Palettes-Primary-Primary-300: var(--sixers-blue-300-sixers-blue);
70
+ --Palettes-Primary-Primary-350: var(--sixers-blue-350-sixers-blue);
71
+ --Palettes-Primary-Primary-400: var(--sixers-blue-400-sixers-blue);
72
+ --Palettes-Primary-Primary-450: var(--sixers-blue-450-sixers-blue);
73
+ --Palettes-Primary-Primary-50: var(--sixers-blue-50-sixers-blue);
74
+ --Palettes-Primary-Primary-500: var(--sixers-blue-500-sixers-blue);
75
+ --Palettes-Primary-Primary-550: var(--sixers-blue-550-sixers-blue);
76
+ --Palettes-Primary-Primary-600: var(--sixers-blue-600-sixers-blue);
77
+ --Palettes-Primary-Primary-650: var(--sixers-blue-650-sixers-blue);
78
+ --Palettes-Primary-Primary-700: var(--sixers-blue-700-sixers-blue);
79
+ --Palettes-Primary-Primary-750: var(--sixers-blue-750-sixers-blue);
80
+ --Palettes-Secondary-Secondary-100: var(--powder-blue-100-powder-blue);
81
+ --Palettes-Secondary-Secondary-150: var(--powder-blue-150-powder-blue);
82
+ --Palettes-Secondary-Secondary-200: var(--powder-blue-200-powder-blue);
83
+ --Palettes-Secondary-Secondary-250: var(--powder-blue-250-powder-blue);
84
+ --Palettes-Secondary-Secondary-300: var(--powder-blue-300-powder-blue);
85
+ --Palettes-Secondary-Secondary-350: var(--powder-blue-350-powder-blue);
86
+ --Palettes-Secondary-Secondary-400: var(--powder-blue-400-powder-blue);
87
+ --Palettes-Secondary-Secondary-450: var(--powder-blue-450-powder-blue);
88
+ --Palettes-Secondary-Secondary-50: var(--powder-blue-50-powder-blue);
89
+ --Palettes-Secondary-Secondary-500: var(--powder-blue-500-powder-blue);
90
+ --Palettes-Secondary-Secondary-550: var(--powder-blue-550-powder-blue);
91
+ --Palettes-Secondary-Secondary-600: var(--powder-blue-600-powder-blue);
92
+ --Palettes-Secondary-Secondary-650: var(--powder-blue-650-powder-blue);
93
+ --Palettes-Secondary-Secondary-700: var(--powder-blue-700-powder-blue);
94
+ --Palettes-Secondary-Secondary-750: var(--powder-blue-750-powder-blue);
95
+ --Palettes-Success-Success-100: var(--phanatic-green-100-phanatic-green);
96
+ --Palettes-Success-Success-150: var(--phanatic-green-150-phanatic-green);
97
+ --Palettes-Success-Success-200: var(--phanatic-green-200-phanatic-green);
98
+ --Palettes-Success-Success-250: var(--phanatic-green-250-phanatic-green);
99
+ --Palettes-Success-Success-300: var(--phanatic-green-300-phanatic-green);
100
+ --Palettes-Success-Success-350: var(--phanatic-green-350-phanatic-green);
101
+ --Palettes-Success-Success-400: var(--phanatic-green-400-phanatic-green);
102
+ --Palettes-Success-Success-450: var(--phanatic-green-450-phanatic-green);
103
+ --Palettes-Success-Success-50: var(--phanatic-green-50-phanatic-green);
104
+ --Palettes-Success-Success-500: var(--phanatic-green-500-phanatic-green);
105
+ --Palettes-Success-Success-550: var(--phanatic-green-550-phanatic-green);
106
+ --Palettes-Success-Success-600: var(--phanatic-green-600-phanatic-green);
107
+ --Palettes-Success-Success-650: var(--phanatic-green-650-phanatic-green);
108
+ --Palettes-Success-Success-700: var(--phanatic-green-700-phanatic-green);
109
+ --Palettes-Success-Success-750: var(--phanatic-green-750-phanatic-green);
110
+ --Palettes-Tertiary-Tertiary-100: var(--electric-blue-100-electric-blue);
111
+ --Palettes-Tertiary-Tertiary-150: var(--electric-blue-150-electric-blue);
112
+ --Palettes-Tertiary-Tertiary-200: var(--electric-blue-200-electric-blue);
113
+ --Palettes-Tertiary-Tertiary-250: var(--electric-blue-250-electric-blue);
114
+ --Palettes-Tertiary-Tertiary-300: var(--electric-blue-300-electric-blue);
115
+ --Palettes-Tertiary-Tertiary-350: var(--electric-blue-350-electric-blue);
116
+ --Palettes-Tertiary-Tertiary-400: var(--electric-blue-400-electric-blue);
117
+ --Palettes-Tertiary-Tertiary-450: var(--electric-blue-450-electric-blue);
118
+ --Palettes-Tertiary-Tertiary-50: var(--electric-blue-50-electric-blue);
119
+ --Palettes-Tertiary-Tertiary-500: var(--electric-blue-500-electric-blue);
120
+ --Palettes-Tertiary-Tertiary-550: var(--electric-blue-550-electric-blue);
121
+ --Palettes-Tertiary-Tertiary-600: var(--electric-blue-600-electric-blue);
122
+ --Palettes-Tertiary-Tertiary-650: var(--electric-blue-650-electric-blue);
123
+ --Palettes-Tertiary-Tertiary-700: var(--electric-blue-700-electric-blue);
124
+ --Palettes-Tertiary-Tertiary-750: var(--electric-blue-750-electric-blue);
125
125
  --Palettes-Visited-Visited-100: var(--purple-100-purple);
126
126
  --Palettes-Visited-Visited-150: var(--purple-150-purple);
127
127
  --Palettes-Visited-Visited-200: var(--purple-200-purple);
package/dist/styles/generated/primitives.css CHANGED
@@ -4,38 +4,31 @@
4
4
 
5
5
  --colors-Bell-Yellow: rgb(242, 199, 18);
6
6
  --colors-Black: rgb(0, 0, 0);
7
- --colors-Blue: rgb(15, 51, 245);
8
- --colors-Dark-Ben-Franklin-Blue: rgb(15, 77, 143);
9
- --colors-Dark-Blue: rgb(38, 0, 140);
10
- --colors-Dark-Green: rgb(23, 107, 0);
7
+ --colors-Black-25: rgba(0, 0, 0, 0.25);
8
+ --colors-Black-50: rgba(0, 0, 0, 0.5);
9
+ --colors-Black-75: rgba(0, 0, 0, 0.75);
11
10
  --colors-Dark-Grey: rgb(69, 69, 69);
12
- --colors-Green: rgb(28, 184, 41);
13
- --colors-Grey: rgb(217, 217, 217);
14
- --colors-Light-Blue: rgb(18, 140, 255);
11
+ --colors-Eagles-Green: rgb(40, 133, 15);
12
+ --colors-Electric-Blue: rgb(3, 204, 243);
13
+ --colors-Flyers-Orange: rgb(236, 103, 56);
14
+ --colors-Flyers-Orange-25: rgba(236, 103, 56, 0.25);
15
+ --colors-Flyers-Orange-50: rgba(236, 103, 56, 0.5);
16
+ --colors-Flyers-Orange-75: rgba(236, 103, 56, 0.75);
17
+ --colors-Ghost-Grey: rgb(240, 240, 240);
15
18
  --colors-Light-Green: rgb(201, 242, 207);
16
- --colors-Light-Grey: rgb(242, 242, 242);
17
- --colors-Medium-Grey: rgb(207, 207, 207);
18
- --colors-Orange: rgb(237, 102, 56);
19
+ --colors-Medium-Grey: rgb(161, 161, 161);
20
+ --colors-Phanatic-Green: rgb(27, 184, 42);
21
+ --colors-Phillies-Red: rgb(204, 48, 0);
19
22
  --colors-Pink: rgb(219, 31, 128);
23
+ --colors-Powder-Blue: rgb(124, 197, 254);
20
24
  --colors-Purple: rgb(99, 0, 222);
21
- --colors-Red: rgb(255, 5, 8);
25
+ --colors-Sidewalk-Grey: rgb(207, 207, 207);
26
+ --colors-Sixers-Blue: rgb(16, 52, 244);
27
+ --colors-Sixers-Blue-25: rgba(16, 52, 244, 0.25);
28
+ --colors-Sixers-Blue-50: rgba(16, 52, 244, 0.5);
29
+ --colors-Sixers-Blue-75: rgba(16, 52, 244, 0.75);
30
+ --colors-Union-Blue: rgb(22, 43, 154);
22
31
  --colors-White: rgb(255, 255, 255);
23
- --dimension-core-0: 0;
24
- --dimension-core-100: 0.5rem;
25
- --dimension-core-1000: 5rem;
26
- --dimension-core-150: 0.75rem;
27
- --dimension-core-175: 0.875rem;
28
- --dimension-core-200: 1rem;
29
- --dimension-core-25: 0.125rem;
30
- --dimension-core-250: 1.25rem;
31
- --dimension-core-300: 1.5rem;
32
- --dimension-core-400: 2rem;
33
- --dimension-core-50: 0.25rem;
34
- --dimension-core-500: 2.5rem;
35
- --dimension-core-600: 3rem;
36
- --dimension-core-700: 3.5rem;
37
- --dimension-core-75: 0.375rem;
38
- --dimension-core-800: 4rem;
39
32
  --scale-0: 0;
40
33
  --scale-10: 0.0625rem;
41
34
  --scale-100: 0.5rem;