@helloimjolopez-pathway/pathway-tokens 10.0.2 → 10.0.4

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 (11) hide show
  1. package/components/scrollbar/scrollbar.jsx +24 -14
  2. package/components/sidenav/sidenav.jsx +36 -19
  3. package/dist/brands/newco/primitives.css +23 -23
  4. package/dist/brands/newco/themes/dark.css +38 -38
  5. package/dist/brands/newco/themes/light.css +38 -38
  6. package/dist/brands/newco/tokens.js +99 -99
  7. package/dist/contract.json +2 -2
  8. package/dist/themes/midnight.css +1 -1
  9. package/dist/tokens.js +876 -876
  10. package/dist/tokens.json +851 -851
  11. package/package.json +5 -4
package/components/scrollbar/scrollbar.jsx CHANGED
@@ -30,20 +30,21 @@ export const SCROLL = {
30
30
  thumbMin: 28, // px — min thumb length (grab-target floor); JS layout math
31
31
  gutter: "var(--semantic-layout-units-padding-xxxtight)", // 2px — inset from the right edge
32
32
  grabZone: 16, // px — invisible mouse grab strip (wider than the 6px thumb so it's catchable)
33
- // WHY THESE TWO RUNGS AND NOT THE FAINTER ONES (2026-09-16):
33
+ // THE LIGHT RUNGS ARE A DELIBERATE CHOICE BY THE DESIGN OWNER. Do not raise
34
+ // them again without asking Jo first.
34
35
  //
35
- // Rest was Scrim/Faint (black 16%), which composites to 1.4:1 against both
36
- // canvas and sheet. The AA floor for a non-text UI component is 3:1, so a 6px
37
- // pill at 1.4:1 sat right at the threshold of perception: one person saw it
38
- // and another, on a brighter display, reported the scrollbar as missing
39
- // entirely. That was a real report, not a misconfiguration.
36
+ // These were briefly Subtle (50%) and Base (70%) to clear the 3:1 AA floor
37
+ // for a non-text UI component, after one person reported the scrollbar as
38
+ // missing while another saw it fine. Measured over #fafafa: Faint 16% =
39
+ // 1.4:1, Light 24% = 1.68:1, Subtle 50% = 3.4:1, Base 70% = 6.57:1.
40
40
  //
41
- // Measured over #fafafa: Faint 16% = 1.4:1, Light 24% = 1.68:1,
42
- // Subtle 50% = 3.4:1, Base 70% = 6.57:1. Subtle is the lightest rung that
43
- // clears the floor, so rest takes it and hover takes Base, which keeps the
44
- // hover step legible as a step.
45
- thumbRest: "var(--semantic-color-scrim-subtle)", // black 50% — 3.4:1, the lightest rung clearing 3:1
46
- thumbHover: "var(--semantic-color-scrim-base)", // black 70% — 6.57:1, hover/drag
41
+ // Jo reviewed that in Storybook and rejected it: the heavier thumb reads as
42
+ // a solid grey bar rather than the light warm overlay the design intends, and
43
+ // an overlay scrollbar is a redundant affordance (the content scrolls with or
44
+ // without it, and the OS bar remains). So contrast is bought back with SIZE
45
+ // and PRESENCE rather than with darkness: see thumbWidth and the grab strip.
46
+ thumbRest: "var(--semantic-color-scrim-faint)", // black 16% — faint overlay (rest)
47
+ thumbHover: "var(--semantic-color-scrim-light)", // black 24% — hover/drag
47
48
  thumbBlur: "blur(8px) saturate(180%)",
48
49
  // Hairline glass edge: semantic white at 35% via color-mix.
49
50
  thumbEdge: "inset 0 0 0 0.5px color-mix(in srgb, var(--semantic-color-fill-static-neutral-faint) 35%, transparent)",
@@ -51,8 +52,17 @@ export const SCROLL = {
51
52
  // multiplied the thumb's own alpha by the in-flight opacity, so during the
52
53
  // 200ms glide-in it rendered as low as 1.18:1 — below the floor at the exact
53
54
  // moment the user is looking for it. Only the fade-out is animated now.
54
- fadeIn: "background var(--motion-duration-3) var(--motion-easing-standard)",
55
- fadeOut: "opacity var(--motion-duration-5) var(--motion-easing-standard)",
55
+ // Asymmetric fade: snappy decelerate glide-IN, graceful fade-OUT. Each entry
56
+ // names every property it is responsible for, because the element swaps
57
+ // between them with `transition: active ? fadeIn : fadeOut`.
58
+ //
59
+ // fadeIn briefly listed only `background`, on the reasoning that animating
60
+ // opacity multiplies the thumb's own alpha by the in-flight opacity and dips
61
+ // the contrast mid-glide. The visible result was worse than the thing it
62
+ // avoided: the thumb POPPED into existence the instant you scrolled. The
63
+ // glide is the point, so opacity is back.
64
+ fadeIn: "opacity var(--motion-duration-3) var(--motion-easing-decelerate), background var(--motion-duration-3) var(--motion-easing-standard)",
65
+ fadeOut: "opacity var(--motion-duration-5) var(--motion-easing-standard), background var(--motion-duration-3) var(--motion-easing-standard)",
56
66
  idleHideMs: 500, // hide the thumb this long after scrolling stops / mouse leaves the bar
57
67
  };
58
68
 
package/components/sidenav/sidenav.jsx CHANGED
@@ -75,7 +75,15 @@ export const T = {
75
75
  infoSubtle: c("stroke-static-neutral-base"), // container right border
76
76
  },
77
77
  surface: {
78
- navLight: c("fill-static-neutral-mono"), // the nav container itself: white
78
+ // Figma binds Fill/Surface/Elevated on SideNav.Container (node 40004059:1375).
79
+ // This was fill-static-neutral-mono, which is the same #ffffff in Light and
80
+ // therefore looked correct, but mono is the INVERSION ANCHOR: it is #ffffff
81
+ // in Midnight too. Elevated is #121523 there. So the nav stayed a white slab
82
+ // in dark mode while every surface around it went dark.
83
+ //
84
+ // It is also what a reader of this repo reports back as the nav's fill, which
85
+ // is how the drift surfaced: the value quoted did not match Figma.
86
+ navLight: c("fill-surface-elevated"), // the nav container itself
79
87
  navElevated: c("fill-surface-elevated"), // PopoverMenu, per Figma's "Popover Menu"
80
88
  },
81
89
  // Label, icon and chevron all resolve to the SAME token per state. A nav item
@@ -216,7 +224,16 @@ export function SideNavItem({
216
224
  setHovered(false);
217
225
  if (isSidebarCollapsed && onPopoverLeave) onPopoverLeave();
218
226
  }}
219
- style={{ display: "flex", alignItems: "center", minHeight: L.itemH, width: "100%",
227
+ style={{ display: "flex", alignItems: "center", minHeight: L.itemH,
228
+ // COLLAPSED IS A SQUARE. Figma's SideNavItem.Collapsed is 44x44 at
229
+ // x=8 inside the 60px column (84px rail minus 12px padding each side),
230
+ // so the fill is inset 8px and reads as a rounded square. Stretching
231
+ // it to the full 60 made it a rectangle, which is what Jo spotted.
232
+ // 44 is L.itemH, so the square is expressed as width = height rather
233
+ // than as a second number that could drift from it.
234
+ width: isSidebarCollapsed ? L.itemH : "100%",
235
+ marginLeft: isSidebarCollapsed ? "auto" : undefined,
236
+ marginRight: isSidebarCollapsed ? "auto" : undefined,
220
237
  borderRadius: T.radius, backgroundColor: fillBg,
221
238
  cursor: isDisabled ? "not-allowed" : "pointer",
222
239
  overflow: "hidden", transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)", userSelect: "none" }}>
@@ -250,7 +267,7 @@ export function SideNavItem({
250
267
  pointerEvents: isSidebarCollapsed ? "none" : "auto",
251
268
  transition: "max-width var(--motion-duration-6) var(--motion-easing-emphasized), opacity var(--motion-duration-3) var(--motion-easing-standard)" }}>
252
269
  <p style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 500,
253
- fontSize: 14, lineHeight: "20px", letterSpacing: "0.3px", color: textColor, margin: 0,
270
+ fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)", color: textColor, margin: 0,
254
271
  whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
255
272
  transition: "color var(--motion-duration-3) var(--motion-easing-standard)" }}>
256
273
  {item.label}
@@ -317,12 +334,12 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
317
334
  left: anchorRect.right + 8,
318
335
  top: anchorRect.top + anchorRect.height / 2,
319
336
  zIndex: 1000, backgroundColor: T.surface.navLight,
320
- border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
337
+ border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: "var(--semantic-layout-units-cornerradius-base)",
321
338
  boxShadow: c2("--elevation-widget"),
322
339
  padding: "6px 8px", whiteSpace: "nowrap", pointerEvents: "auto",
323
340
  animation: "popoverInCentered var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
324
341
  <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 400,
325
- fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px", color: T.text.secondary }}>
342
+ fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-wide)", color: T.text.secondary }}>
326
343
  {label}
327
344
  </span>
328
345
  </div>,
@@ -338,9 +355,9 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
338
355
  export function SectionLabel({ label }) {
339
356
  return (
340
357
  <div style={{ display: "flex", alignItems: "center", width: "100%",
341
- paddingLeft: 12, paddingTop: 8, paddingBottom: 8 }}>
358
+ paddingLeft: "var(--semantic-layout-units-padding-tight)", paddingTop: "var(--semantic-layout-units-padding-xtight)", paddingBottom: "var(--semantic-layout-units-padding-xtight)"}}>
342
359
  <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 600,
343
- fontSize: 11, lineHeight: "16px", letterSpacing: "0.6px",
360
+ fontSize: "var(--semantic-type-font-size-xxs)", lineHeight: "var(--semantic-type-line-height-xxs-single)", letterSpacing: "var(--semantic-type-letter-spacing-extraspacious)",
344
361
  color: T.text.secondary, textTransform: "uppercase",
345
362
  whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
346
363
  {label}
@@ -356,9 +373,9 @@ export function CollapsedPopover({ item, onClick, anchorRect, onMouseEnter, onMo
356
373
  <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
357
374
  style={{ position: "fixed", left: anchorRect.right + 8, top: anchorRect.top,
358
375
  zIndex: 1000, backgroundColor: T.surface.navElevated,
359
- border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
376
+ border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: "var(--semantic-layout-units-cornerradius-base)",
360
377
  boxShadow: c2("--elevation-widget"),
361
- padding: 6, minWidth: 200, pointerEvents: "auto",
378
+ padding: "var(--semantic-layout-units-padding-xxtight)", minWidth: 200, pointerEvents: "auto",
362
379
  animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
363
380
  {/* Section label — Figma component 40006794-5977 */}
364
381
  <div style={{ borderBottom: `0.5px solid ${c("stroke-static-neutral-faint")}` }}>
@@ -381,14 +398,14 @@ export function PopoverRow({ item, onClick, activeId }) {
381
398
  return (
382
399
  <div onClick={() => onClick(item.id)}
383
400
  onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
384
- style={{ display: "flex", alignItems: "center", minHeight: 40, borderRadius: 8,
401
+ style={{ display: "flex", alignItems: "center", minHeight: 40, borderRadius: "var(--semantic-layout-units-cornerradius-base)",
385
402
  overflow: "hidden", backgroundColor: bg, cursor: "pointer",
386
403
  transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }}>
387
404
  <div style={{ width: 4, alignSelf: "stretch", borderRadius: "0 4px 4px 0",
388
405
  backgroundColor: isActive ? T.indicator : "transparent",
389
406
  flexShrink: 0, transition: "background-color var(--motion-duration-3) var(--motion-easing-standard)" }} />
390
407
  <span style={{ padding: "0 8px", fontFamily: "'Red Hat Text',sans-serif",
391
- fontWeight: 400, fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px",
408
+ fontWeight: 400, fontSize: "var(--semantic-type-font-size-s)", lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-wide)",
392
409
  color, transition: "color var(--motion-duration-3) var(--motion-easing-standard)", flex: 1 }}>
393
410
  {item.label}
394
411
  </span>
@@ -403,7 +420,7 @@ export function PopoverRow({ item, onClick, activeId }) {
403
420
  export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon }) {
404
421
  const [h, setH] = useState(false);
405
422
  const labelColor = h ? T.text.navHover : T.text.navBase;
406
- const actionIconColor = T.icon.actionSecondary; // #6b6b6b — always static, no hover change
423
+ const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover) — always static, no hover change
407
424
  return (
408
425
  <div style={{ width: "100%" }}>
409
426
  <div style={{ height: 1, backgroundColor: T.fill.infoSubtle, marginBottom: L.collapseGap }} />
@@ -425,8 +442,8 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
425
442
  overflow: "hidden",
426
443
  transition: "max-width var(--motion-duration-5) var(--motion-easing-standard), opacity var(--motion-duration-3) var(--motion-easing-standard)",
427
444
  pointerEvents: isSidebarCollapsed ? "none" : "auto" }}>
428
- <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 500, fontSize: 14,
429
- lineHeight: "20px", letterSpacing: "0.3px", color: labelColor,
445
+ <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 500, fontSize: "var(--semantic-type-font-size-s)",
446
+ lineHeight: "var(--semantic-type-line-height-s-single)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)", color: labelColor,
430
447
  transition: "color var(--motion-duration-3) var(--motion-easing-standard)", whiteSpace: "nowrap" }}>
431
448
  Collapse
432
449
  </span>
@@ -463,7 +480,7 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
463
480
  // Hidden on mobile (<768px) — TopNav hamburger is the sole toggle there.
464
481
  export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIcon }) {
465
482
  const [h, setH] = useState(false);
466
- const actionIconColor = T.icon.actionSecondary; // #6b6b6b — always static
483
+ const actionIconColor = T.icon.actionSecondary; // var(--semantic-color-stroke-action-field-hover) — always static
467
484
  return (
468
485
  <div style={{ width: "100%", flexShrink: 0 }}>
469
486
  <div onClick={onToggle} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
@@ -504,10 +521,10 @@ export function NavHeader({ isSidebarCollapsed, onToggle, collapseIcon, expandIc
504
521
  export function NavSectionLabel({ label }) {
505
522
  return (
506
523
  <div style={{ display: "flex", alignItems: "center", height: 40, width: "100%",
507
- paddingLeft: 4, paddingRight: 4, paddingTop: 8, paddingBottom: 8,
524
+ paddingLeft: "var(--semantic-layout-units-padding-xxxtight)", paddingRight: "var(--semantic-layout-units-padding-xxxtight)", paddingTop: "var(--semantic-layout-units-padding-xtight)", paddingBottom: "var(--semantic-layout-units-padding-xtight)",
508
525
  flexShrink: 0 }}>
509
526
  <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 600,
510
- fontSize: 11, lineHeight: "16px", letterSpacing: "0.6px",
527
+ fontSize: "var(--semantic-type-font-size-xxs)", lineHeight: "var(--semantic-type-line-height-xxs-single)", letterSpacing: "var(--semantic-type-letter-spacing-extraspacious)",
511
528
  textTransform: "uppercase", color: T.text.secondarySubtle,
512
529
  whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
513
530
  {label}
@@ -552,7 +569,7 @@ export function ListItem({ item, isActive, onClick }) {
552
569
  </div>
553
570
  <div style={{ flex: 1, minWidth: 0, paddingLeft: L.textPad, paddingRight: L.rowPadH }}>
554
571
  <p style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 400,
555
- fontSize: 12, lineHeight: "18px", letterSpacing: "0.6px", color,
572
+ fontSize: "var(--semantic-type-font-size-xs)", lineHeight: "var(--semantic-type-line-height-xs-single)", letterSpacing: "var(--semantic-type-letter-spacing-extraspacious)", color,
556
573
  margin: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
557
574
  transition: "color var(--motion-duration-3) var(--motion-easing-standard)" }}>
558
575
  {item.label}
@@ -568,7 +585,7 @@ export function ListItem({ item, isActive, onClick }) {
568
585
  // link lists (Recent Content, Pinned, Bookmarks). Only shown in expanded sidebar.
569
586
  export function SideNavListSection({ label, items, activeId, onNavigate }) {
570
587
  return (
571
- <div style={{ display: "flex", flexDirection: "column", gap: 6, width: "100%", flexShrink: 0 }}>
588
+ <div style={{ display: "flex", flexDirection: "column", gap: "var(--semantic-layout-units-gap-xtight)", width: "100%", flexShrink: 0 }}>
572
589
  <NavSectionLabel label={label} />
573
590
  <div style={{ display: "flex", flexDirection: "column" }}>
574
591
  {items.map(item => (
package/dist/brands/newco/primitives.css CHANGED
@@ -366,29 +366,29 @@
366
366
  --primitive-color-saffron-150-50: rgba(255, 200, 100, 0.5);
367
367
  --primitive-color-saffron-150-70: rgba(255, 200, 100, 0.7);
368
368
  --primitive-color-saffron-150-8: rgba(255, 200, 100, 0.08);
369
- --primitive-color-seabreeze-0: #f9fafc;
370
- --primitive-color-seabreeze-25: #eff4fc;
371
- --primitive-color-seabreeze-50: #e5edfc;
372
- --primitive-color-seabreeze-75: #dbe7fc;
373
- --primitive-color-seabreeze-100: #cddfff;
374
- --primitive-color-seabreeze-150: #b8d0fc;
375
- --primitive-color-seabreeze-200: #9ec0fd;
376
- --primitive-color-seabreeze-250: #82adfd;
377
- --primitive-color-seabreeze-300: #6398fd;
378
- --primitive-color-seabreeze-350: #508cff;
379
- --primitive-color-seabreeze-400: #4571c9;
380
- --primitive-color-seabreeze-500: #35509e;
381
- --primitive-color-seabreeze-600: #2e4185;
382
- --primitive-color-seabreeze-700: #27326d;
383
- --primitive-color-seabreeze-800: #1a2249;
384
- --primitive-color-seabreeze-900: #091132;
385
- --primitive-color-seabreeze-300-16: rgba(99, 152, 253, 0.16);
386
- --primitive-color-seabreeze-300-24: rgba(99, 152, 253, 0.24);
387
- --primitive-color-seabreeze-300-36: rgba(99, 152, 253, 0.36);
388
- --primitive-color-seabreeze-300-4: rgba(99, 152, 253, 0.04);
389
- --primitive-color-seabreeze-300-50: rgba(99, 152, 253, 0.5);
390
- --primitive-color-seabreeze-300-70: rgba(99, 152, 253, 0.7);
391
- --primitive-color-seabreeze-300-8: rgba(99, 152, 253, 0.08);
369
+ --primitive-color-seabreeze-0: #f9fafd;
370
+ --primitive-color-seabreeze-25: #f2f3fb;
371
+ --primitive-color-seabreeze-50: #eaecf8;
372
+ --primitive-color-seabreeze-75: #e3e6f5;
373
+ --primitive-color-seabreeze-100: #d9ddf1;
374
+ --primitive-color-seabreeze-150: #c8ceec;
375
+ --primitive-color-seabreeze-200: #b4bde6;
376
+ --primitive-color-seabreeze-250: #9eabdf;
377
+ --primitive-color-seabreeze-300: #8598d7;
378
+ --primitive-color-seabreeze-350: #768dd2;
379
+ --primitive-color-seabreeze-400: #4971c5;
380
+ --primitive-color-seabreeze-500: #25539d;
381
+ --primitive-color-seabreeze-600: #204482;
382
+ --primitive-color-seabreeze-700: #183669;
383
+ --primitive-color-seabreeze-800: #132446;
384
+ --primitive-color-seabreeze-900: #021330;
385
+ --primitive-color-seabreeze-300-16: rgba(133, 152, 215, 0.16);
386
+ --primitive-color-seabreeze-300-24: rgba(133, 152, 215, 0.24);
387
+ --primitive-color-seabreeze-300-36: rgba(133, 152, 215, 0.36);
388
+ --primitive-color-seabreeze-300-4: rgba(133, 152, 215, 0.04);
389
+ --primitive-color-seabreeze-300-50: rgba(133, 152, 215, 0.5);
390
+ --primitive-color-seabreeze-300-70: rgba(133, 152, 215, 0.7);
391
+ --primitive-color-seabreeze-300-8: rgba(133, 152, 215, 0.08);
392
392
  --primitive-color-warm-neutral-0: #fdfcfc;
393
393
  --primitive-color-warm-neutral-10: #fcf9f9;
394
394
  --primitive-color-warm-neutral-25: #faf6f6;
package/dist/brands/newco/themes/dark.css CHANGED
@@ -20,12 +20,12 @@
20
20
  --semantic-color-fill-action-selection-indicator: var(--primitive-color-brand-250);
21
21
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-400-24);
22
22
  --semantic-color-fill-action-selection-trail: var(--primitive-color-midnight-350-24);
23
- --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-600);
24
- --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-700);
25
- --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-500);
26
- --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-350-24);
27
- --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-350-36);
28
- --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-350-16);
23
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-seabreeze-600);
24
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-seabreeze-700);
25
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-seabreeze-500);
26
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-seabreeze-300-24);
27
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-seabreeze-300-36);
28
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-seabreeze-300-16);
29
29
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-500);
30
30
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-600);
31
31
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-400);
@@ -62,10 +62,10 @@
62
62
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-600);
63
63
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-800);
64
64
  --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-200);
65
- --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-200);
65
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-150);
66
66
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-700);
67
- --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-500);
68
- --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-350-16);
67
+ --semantic-color-fill-static-info-strong: var(--primitive-color-seabreeze-500);
68
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-seabreeze-300-16);
69
69
  --semantic-color-fill-static-negative-strong: var(--primitive-color-red-400);
70
70
  --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-300-16);
71
71
  --semantic-color-fill-static-neutral-base: var(--primitive-color-midnight-800);
@@ -81,23 +81,23 @@
81
81
  --semantic-color-fill-surface-chrome: var(--primitive-color-brand-700);
82
82
  --semantic-color-fill-surface-elevated: var(--primitive-color-midnight-900);
83
83
  --semantic-color-fill-surface-overlay: var(--primitive-color-midnight-975);
84
- --semantic-color-fill-chart-sequential-10: var(--primitive-color-brand-400);
85
- --semantic-color-fill-chart-sequential-11: var(--primitive-color-brand-450);
86
- --semantic-color-fill-chart-sequential-12: var(--primitive-color-brand-500);
87
- --semantic-color-fill-chart-sequential-13: var(--primitive-color-brand-550);
88
- --semantic-color-fill-chart-sequential-14: var(--primitive-color-brand-600);
89
- --semantic-color-fill-chart-sequential-15: var(--primitive-color-brand-650);
90
- --semantic-color-fill-chart-sequential-01: var(--primitive-color-midnight-100);
91
- --semantic-color-fill-chart-sequential-02: var(--primitive-color-brand-100);
92
- --semantic-color-fill-chart-sequential-03: var(--primitive-color-brand-125);
93
- --semantic-color-fill-chart-sequential-04: var(--primitive-color-brand-150);
94
- --semantic-color-fill-chart-sequential-05: var(--primitive-color-brand-175);
95
- --semantic-color-fill-chart-sequential-06: var(--primitive-color-brand-200);
96
- --semantic-color-fill-chart-sequential-07: var(--primitive-color-brand-250);
97
- --semantic-color-fill-chart-sequential-08: var(--primitive-color-brand-300);
98
- --semantic-color-fill-chart-sequential-09: var(--primitive-color-brand-350);
99
- --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-brand-650);
100
- --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-midnight-100);
84
+ --semantic-color-fill-chart-sequential-10: var(--primitive-color-seabreeze-400);
85
+ --semantic-color-fill-chart-sequential-11: var(--primitive-color-seabreeze-500);
86
+ --semantic-color-fill-chart-sequential-12: var(--primitive-color-seabreeze-600);
87
+ --semantic-color-fill-chart-sequential-13: var(--primitive-color-seabreeze-700);
88
+ --semantic-color-fill-chart-sequential-14: var(--primitive-color-seabreeze-800);
89
+ --semantic-color-fill-chart-sequential-15: var(--primitive-color-seabreeze-900);
90
+ --semantic-color-fill-chart-sequential-01: var(--primitive-color-seabreeze-25);
91
+ --semantic-color-fill-chart-sequential-02: var(--primitive-color-seabreeze-50);
92
+ --semantic-color-fill-chart-sequential-03: var(--primitive-color-seabreeze-75);
93
+ --semantic-color-fill-chart-sequential-04: var(--primitive-color-seabreeze-100);
94
+ --semantic-color-fill-chart-sequential-05: var(--primitive-color-seabreeze-150);
95
+ --semantic-color-fill-chart-sequential-06: var(--primitive-color-seabreeze-200);
96
+ --semantic-color-fill-chart-sequential-07: var(--primitive-color-seabreeze-250);
97
+ --semantic-color-fill-chart-sequential-08: var(--primitive-color-seabreeze-300);
98
+ --semantic-color-fill-chart-sequential-09: var(--primitive-color-seabreeze-350);
99
+ --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-seabreeze-900);
100
+ --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-seabreeze-25);
101
101
  --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
102
102
  --semantic-color-foreground-action-ghost-hover: var(--primitive-color-midnight-25);
103
103
  --semantic-color-foreground-action-ghost-pressed: var(--primitive-color-midnight-0);
@@ -110,9 +110,9 @@
110
110
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-midnight-50);
111
111
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-midnight-150);
112
112
  --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-0);
113
- --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-150);
114
- --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-100);
115
- --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-200);
113
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-seabreeze-150);
114
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-seabreeze-100);
115
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-seabreeze-200);
116
116
  --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
117
117
  --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
118
118
  --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
@@ -142,7 +142,7 @@
142
142
  --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-900);
143
143
  --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-150);
144
144
  --semantic-color-foreground-static-info-on-strong: var(--primitive-color-cool-neutral-0);
145
- --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-150);
145
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-seabreeze-150);
146
146
  --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-cool-neutral-0);
147
147
  --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-200);
148
148
  --semantic-color-foreground-static-neutral-base: var(--primitive-color-midnight-50);
@@ -169,15 +169,15 @@
169
169
  --semantic-color-stroke-action-primary-strong-hover: var(--primitive-color-brand-250);
170
170
  --semantic-color-stroke-action-primary-strong-pressed: var(--primitive-color-brand-200);
171
171
  --semantic-color-stroke-action-primary-strong-rest: var(--primitive-color-brand-300);
172
- --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-250);
173
- --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-200);
174
- --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-300);
172
+ --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-125);
173
+ --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-100);
174
+ --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-150);
175
175
  --semantic-color-stroke-action-secondary-hover: var(--primitive-color-midnight-300);
176
176
  --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-midnight-200);
177
177
  --semantic-color-stroke-action-secondary-rest: var(--primitive-color-midnight-400);
178
- --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-150);
179
- --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-100);
180
- --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-200);
178
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-seabreeze-150);
179
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-seabreeze-100);
180
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-seabreeze-200);
181
181
  --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-150);
182
182
  --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-100);
183
183
  --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-200);
@@ -196,8 +196,8 @@
196
196
  --semantic-color-stroke-static-accent-seabreeze: var(--primitive-color-seabreeze-350);
197
197
  --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-150);
198
198
  --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-300);
199
- --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-150);
200
- --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-300);
199
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-seabreeze-150);
200
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-seabreeze-300);
201
201
  --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-300);
202
202
  --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-500);
203
203
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-midnight-700);
package/dist/brands/newco/themes/light.css CHANGED
@@ -20,12 +20,12 @@
20
20
  --semantic-color-fill-action-selection-indicator: var(--primitive-color-brand-400);
21
21
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-50);
22
22
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-350-16);
23
- --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-600);
24
- --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-700);
25
- --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-500);
26
- --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-75);
27
- --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-100);
28
- --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-50);
23
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-seabreeze-600);
24
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-seabreeze-700);
25
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-seabreeze-500);
26
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-seabreeze-75);
27
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-seabreeze-100);
28
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-seabreeze-50);
29
29
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-500);
30
30
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-600);
31
31
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-400);
@@ -62,10 +62,10 @@
62
62
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
63
63
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
64
64
  --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-600);
65
- --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-600);
65
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-700);
66
66
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
67
- --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-500);
68
- --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-50);
67
+ --semantic-color-fill-static-info-strong: var(--primitive-color-seabreeze-500);
68
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-seabreeze-50);
69
69
  --semantic-color-fill-static-negative-strong: var(--primitive-color-red-400);
70
70
  --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-50);
71
71
  --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-50);
@@ -81,23 +81,23 @@
81
81
  --semantic-color-fill-surface-chrome: var(--primitive-color-brand-600);
82
82
  --semantic-color-fill-surface-elevated: var(--primitive-color-cool-neutral-0);
83
83
  --semantic-color-fill-surface-overlay: var(--primitive-color-cool-neutral-0);
84
- --semantic-color-fill-chart-sequential-10: var(--primitive-color-brand-200);
85
- --semantic-color-fill-chart-sequential-11: var(--primitive-color-brand-175);
86
- --semantic-color-fill-chart-sequential-12: var(--primitive-color-brand-150);
87
- --semantic-color-fill-chart-sequential-13: var(--primitive-color-brand-125);
88
- --semantic-color-fill-chart-sequential-14: var(--primitive-color-brand-100);
89
- --semantic-color-fill-chart-sequential-15: var(--primitive-color-midnight-100);
90
- --semantic-color-fill-chart-sequential-01: var(--primitive-color-brand-650);
91
- --semantic-color-fill-chart-sequential-02: var(--primitive-color-brand-600);
92
- --semantic-color-fill-chart-sequential-03: var(--primitive-color-brand-550);
93
- --semantic-color-fill-chart-sequential-04: var(--primitive-color-brand-500);
94
- --semantic-color-fill-chart-sequential-05: var(--primitive-color-brand-450);
95
- --semantic-color-fill-chart-sequential-06: var(--primitive-color-brand-400);
96
- --semantic-color-fill-chart-sequential-07: var(--primitive-color-brand-350);
97
- --semantic-color-fill-chart-sequential-08: var(--primitive-color-brand-300);
98
- --semantic-color-fill-chart-sequential-09: var(--primitive-color-brand-250);
99
- --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-midnight-100);
100
- --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-brand-650);
84
+ --semantic-color-fill-chart-sequential-10: var(--primitive-color-seabreeze-200);
85
+ --semantic-color-fill-chart-sequential-11: var(--primitive-color-seabreeze-150);
86
+ --semantic-color-fill-chart-sequential-12: var(--primitive-color-seabreeze-100);
87
+ --semantic-color-fill-chart-sequential-13: var(--primitive-color-seabreeze-75);
88
+ --semantic-color-fill-chart-sequential-14: var(--primitive-color-seabreeze-50);
89
+ --semantic-color-fill-chart-sequential-15: var(--primitive-color-seabreeze-25);
90
+ --semantic-color-fill-chart-sequential-01: var(--primitive-color-seabreeze-900);
91
+ --semantic-color-fill-chart-sequential-02: var(--primitive-color-seabreeze-800);
92
+ --semantic-color-fill-chart-sequential-03: var(--primitive-color-seabreeze-700);
93
+ --semantic-color-fill-chart-sequential-04: var(--primitive-color-seabreeze-600);
94
+ --semantic-color-fill-chart-sequential-05: var(--primitive-color-seabreeze-500);
95
+ --semantic-color-fill-chart-sequential-06: var(--primitive-color-seabreeze-400);
96
+ --semantic-color-fill-chart-sequential-07: var(--primitive-color-seabreeze-350);
97
+ --semantic-color-fill-chart-sequential-08: var(--primitive-color-seabreeze-300);
98
+ --semantic-color-fill-chart-sequential-09: var(--primitive-color-seabreeze-250);
99
+ --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-seabreeze-25);
100
+ --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-seabreeze-900);
101
101
  --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-800-50);
102
102
  --semantic-color-foreground-action-ghost-hover: var(--primitive-color-brand-25);
103
103
  --semantic-color-foreground-action-ghost-pressed: var(--primitive-color-brand-0);
@@ -110,9 +110,9 @@
110
110
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-900);
111
111
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-700);
112
112
  --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-0);
113
- --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-700);
114
- --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-800);
115
- --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-600);
113
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-seabreeze-700);
114
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-seabreeze-800);
115
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-seabreeze-600);
116
116
  --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
117
117
  --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-600);
118
118
  --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-700);
@@ -142,7 +142,7 @@
142
142
  --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-cool-neutral-0);
143
143
  --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-600);
144
144
  --semantic-color-foreground-static-info-on-strong: var(--primitive-color-cool-neutral-0);
145
- --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-600);
145
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-seabreeze-600);
146
146
  --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-cool-neutral-0);
147
147
  --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-500);
148
148
  --semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-700);
@@ -169,15 +169,15 @@
169
169
  --semantic-color-stroke-action-primary-strong-hover: var(--primitive-color-brand-500);
170
170
  --semantic-color-stroke-action-primary-strong-pressed: var(--primitive-color-brand-600);
171
171
  --semantic-color-stroke-action-primary-strong-rest: var(--primitive-color-brand-400);
172
- --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-500);
173
- --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-600);
174
- --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-400);
172
+ --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-250);
173
+ --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-300);
174
+ --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-200);
175
175
  --semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-500);
176
176
  --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-600);
177
177
  --semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-400);
178
- --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-600);
179
- --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-700);
180
- --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-500);
178
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-seabreeze-600);
179
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-seabreeze-700);
180
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-seabreeze-500);
181
181
  --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-600);
182
182
  --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-700);
183
183
  --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-500);
@@ -196,8 +196,8 @@
196
196
  --semantic-color-stroke-static-accent-seabreeze: var(--primitive-color-seabreeze-350);
197
197
  --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-350);
198
198
  --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-150);
199
- --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
200
- --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-150);
199
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-seabreeze-350);
200
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-seabreeze-150);
201
201
  --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-500);
202
202
  --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-300);
203
203
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-150);