@invopop/popui 0.1.20 → 0.1.22

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 (16) hide show
  1. package/dist/BaseCard.svelte +2 -2
  2. package/dist/DatePicker.svelte +1 -1
  3. package/dist/DropdownSelect.svelte +9 -2
  4. package/dist/EmptyState.svelte +1 -1
  5. package/dist/FeedIconEvent.svelte +1 -1
  6. package/dist/FeedViewer.svelte +1 -1
  7. package/dist/InputCheckbox.svelte +1 -1
  8. package/dist/InputRadio.svelte +1 -1
  9. package/dist/ProfileAvatar.svelte +1 -1
  10. package/dist/ShortcutWrapper.svelte +1 -1
  11. package/dist/range-calendar/range-calendar-day.svelte +3 -3
  12. package/dist/range-calendar/range-calendar-header.svelte +1 -1
  13. package/dist/range-calendar/range-calendar-month-select.svelte +1 -1
  14. package/dist/svg/IconEmpty.svelte +79 -59
  15. package/dist/tailwind.theme.css +11 -9
  16. package/package.json +1 -1
package/dist/BaseCard.svelte CHANGED
@@ -20,7 +20,7 @@
20
20
  {...rest}
21
21
  {onclick}
22
22
  >
23
- <div class="flex flex-col gap-2 w-full">
23
+ <div class="flex flex-col gap-2 w-full flex-1">
24
24
  <div class="flex items-start justify-between w-full">
25
25
  <div
26
26
  class="size-8 border border-border rounded-lg overflow-hidden flex items-center justify-center shrink-0"
@@ -45,7 +45,7 @@
45
45
  </div>
46
46
  {/if}
47
47
  </div>
48
- <div class="flex flex-col gap-0.5 w-full">
48
+ <div class="flex flex-col gap-0.5 w-full flex-1">
49
49
  <h3 class="font-medium text-sm leading-5 tracking-[-0.07px] text-foreground w-full">
50
50
  {title}
51
51
  </h3>
package/dist/DatePicker.svelte CHANGED
@@ -188,7 +188,7 @@
188
188
  onclick={() => {
189
189
  isOpen = !isOpen
190
190
  }}
191
- class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
191
+ class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-8 border border-border-default-secondary rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
192
192
  >
193
193
  {selectedLabel}
194
194
  </button>
package/dist/DropdownSelect.svelte CHANGED
@@ -44,7 +44,8 @@
44
44
  (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-foreground-default-secondary'
45
45
  )
46
46
  let selectedLabel = $derived(
47
- `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more' : ''}` || placeholder
47
+ `${selectedItems[0]?.label || ''}${selectedItems.length > 1 && multiple ? ' and more' : ''}` ||
48
+ placeholder
48
49
  )
49
50
 
50
51
  let styles = $derived(
@@ -114,7 +115,13 @@
114
115
  {/if}
115
116
  </div>
116
117
  {/snippet}
117
- <DrawerContext {widthClass} {multiple} {items} onclick={handleClick} onselect={handleSelected} />
118
+ <DrawerContext
119
+ widthClass="min-w-[256px]"
120
+ {multiple}
121
+ {items}
122
+ onclick={handleClick}
123
+ onselect={handleSelected}
124
+ />
118
125
  </BaseDropdown>
119
126
 
120
127
  <style>
package/dist/EmptyState.svelte CHANGED
@@ -23,7 +23,7 @@
23
23
  <div class="relative h-[120px] w-[352px] max-w-sm">
24
24
  <IconEmpty />
25
25
  <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
26
- <Icon src={iconSource} class="size-10 text-foreground-accent" />
26
+ <Icon src={iconSource} class="size-10 text-icon-accent" />
27
27
  {#if check}
28
28
  <CheckBadge />
29
29
  {/if}
package/dist/FeedIconEvent.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
  let { icon = undefined, iconTheme = 'default' }: FeedIconEventProps = $props()
6
6
  </script>
7
7
 
8
- <div class="relative py-0.5 mt-2">
8
+ <div class="relative py-0.5 mt-2 bg-background">
9
9
  {#if icon}
10
10
  <Icon src={icon} theme={iconTheme} class="size-4 text-icon-default-bold" />
11
11
  {/if}
package/dist/FeedViewer.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
  let { items = [], onView }: FeedViewerProps = $props()
6
6
  </script>
7
7
 
8
- <div>
8
+ <div class="space-y-1">
9
9
  {#each items as item, i (i)}
10
10
  <FeedItem {...item} hasNext={i < items.length - 1} {onView} />
11
11
  {/each}
package/dist/InputCheckbox.svelte CHANGED
@@ -26,7 +26,7 @@
26
26
  type="checkbox"
27
27
  {checked}
28
28
  {indeterminate}
29
- class="form-checkbox size-4 text-background-accent rounded border border-border-default-secondary hover:border-border-default-primary focus:ring-0 focus:ring-offset-0"
29
+ class="form-checkbox size-4 text-background-accent rounded border border-border-default-secondary hover:border-border-default-primary focus:ring-0 focus:ring-offset-0 bg-background"
30
30
  {...rest}
31
31
  onchange={updateInput}
32
32
  {onclick}
package/dist/InputRadio.svelte CHANGED
@@ -34,7 +34,7 @@
34
34
  {name}
35
35
  {checked}
36
36
  {disabled}
37
- class="appearance-none size-4 rounded-full border checked:border-0 checked:bg-background-accent checked:border-0 checked:bg-background-accent cursor-pointer focus:outline-none focus:ring-0 shrink-0 disabled:cursor-not-allowed border-border-default-secondary disabled:checked:bg-border-default-secondary disabled:checked:border"
37
+ class="appearance-none size-4 rounded-full border checked:border-0 checked:bg-background-accent cursor-pointer focus:outline-none focus:ring-0 shrink-0 disabled:cursor-not-allowed border-border-default-secondary disabled:checked:bg-border-default-secondary disabled:checked:border bg-background"
38
38
  {...rest}
39
39
  onchange={updateInput}
40
40
  />
package/dist/ProfileAvatar.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  {
25
25
  'bg-background after:shadow-avatar': !dark
26
26
  },
27
- { 'border-border-inverse after:shadow-avatar-inverse': dark }
27
+ { 'bg-background-inverse after:shadow-avatar-inverse': dark }
28
28
  )
29
29
  )
30
30
 
package/dist/ShortcutWrapper.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
  clsx('inline-flex items-center justify-center border', {
9
9
  'size-4 rounded': size === 'sm',
10
10
  'size-5 rounded-md': size === 'md',
11
- 'bg-background-default-secondary border-border-default-secondary shadow-[0px_1px_0px_#DFE0E6] text-foreground-default-secondary':
11
+ 'bg-background-default-secondary border-border-default-secondary shadow-shortcut text-foreground-default-secondary':
12
12
  theme === 'light',
13
13
  'bg-background-inverse-secondary border-border-inverse-secondary shadow-[0px_1px_0px_rgba(255,255,255,0.20)] text-foreground-inverse-secondary':
14
14
  theme === 'navigation'
package/dist/range-calendar/range-calendar-day.svelte CHANGED
@@ -13,15 +13,15 @@
13
13
  bind:ref
14
14
  class={cn(
15
15
  buttonVariants({ variant: 'ghost' }),
16
- 'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg',
16
+ 'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg text-foreground!',
17
17
  // today
18
18
  '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-background-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
19
19
  // range Start
20
- 'data-[range-start]:bg-background-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
20
+ 'data-[range-start]:bg-background-accent data-[range-start]:text-foreground-inverse! data-[range-start]:font-semibold data-[range-start]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
21
21
  // range middle
22
22
  'data-[range-middle]:rounded-none data-[range-middle]:bg-background-default-secondary',
23
23
  // range End
24
- 'data-[range-end]:bg-background-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
24
+ 'data-[range-end]:bg-background-accent data-[range-end]:text-foreground-inverse! data-[range-end]:font-semibold data-[range-end]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
25
25
  // Outside months - must come after range styles to override
26
26
  '[&[data-outside-month]]:!text-transparent [&[data-outside-month]]:!bg-transparent [&[data-outside-month]]:!shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
27
27
  // Disabled
package/dist/range-calendar/range-calendar-header.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  <RangeCalendarPrimitive.Header
12
12
  bind:ref
13
13
  class={cn(
14
- 'h-11 flex w-full items-center justify-center gap-1.5 text-base font-medium pt-2 pb-3',
14
+ 'h-11 flex w-full items-center justify-center gap-1.5 text-base font-medium pt-2 pb-3 text-foreground',
15
15
  className
16
16
  )}
17
17
  {...restProps}
package/dist/range-calendar/range-calendar-month-select.svelte CHANGED
@@ -33,7 +33,7 @@
33
33
  {/each}
34
34
  </select>
35
35
  <span
36
- class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
36
+ class="[&>svg]:text-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
37
37
  aria-hidden="true"
38
38
  >
39
39
  {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
package/dist/svg/IconEmpty.svelte CHANGED
@@ -1,12 +1,7 @@
1
- <svg
2
- fill="none"
3
- xmlns="http://www.w3.org/2000/svg"
4
- viewBox="0 0 352 120"
5
- class="text-foreground-accent"
6
- >
7
- <g clip-path="url(#a99)">
1
+ <svg width="352" height="120" viewBox="0 0 352 120" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1410_923)">
8
3
  <mask
9
- id="b98"
4
+ id="mask0_1410_923"
10
5
  style="mask-type:alpha"
11
6
  maskUnits="userSpaceOnUse"
12
7
  x="0"
@@ -15,31 +10,33 @@
15
10
  height="121"
16
11
  >
17
12
  <path
18
- d="M0-1h353v121H0V-1Zm78 47a6 6 0 0 1 6-6h30a6 6 0 0 1 6 6v30a6 6 0 0 1-6 6H84a6 6 0 0 1-6-6V46Zm167-6a6 6 0 0 0-6 6v30a6 6 0 0 0 6 6h30a6 6 0 0 0 6-6V46a6 6 0 0 0-6-6h-30Z"
19
- fill-rule="evenodd"
20
- clip-rule="evenodd"
21
- fill="#D9D9D9"
13
+ d="M353 120H0V-1H353V120ZM84 40C80.6863 40 78 42.6863 78 46V76C78 79.3137 80.6863 82 84 82H114C117.314 82 120 79.3137 120 76V46C120 42.6863 117.314 40 114 40H84ZM245 40C241.686 40 239 42.6863 239 46V76C239 79.3137 241.686 82 245 82H275C278.314 82 281 79.3137 281 76V46C281 42.6863 278.314 40 275 40H245Z"
14
+ fill="black"
22
15
  />
23
16
  </mask>
24
- <g mask="url(#b98)">
17
+ <g mask="url(#mask0_1410_923)">
25
18
  <path
26
- d="M35.6 12.4H.4m35.2 0v-48.6m0 48.6 17.5 24.4M.4 61l-35.1-48.6H.4M.4 61v48.5M.3 61h70.2M.3 109.5h-35l35 48.6h35m-35-48.6h35m-35 0 35 48.6m70.4 0 17.5 24.5v-48.8m-17.5 24.3H70.5m35.2 0-17.5-24.3m17.5 24.3v-48.6m17.5 24.3 17.6 24.3H176l-35.2-48.6m-17.6 24.3-17.5-24.3m35.1 0H176m-35.2 0-35-48.5m35 48.5h-35.1m70.3 0 35 48.6h35.2M176 109.5h70.3m-70.3 0L140.8 61h-35"
27
- stroke="url(#c97)"
28
- stroke-width=".6"
19
+ d="M35.6124 12.398H0.445778M35.6124 12.398V-36.2311M35.6124 12.398L53.126 36.7825M0.445778 61.0272L-34.7209 12.398H0.445778M0.445778 61.0272L0.306227 109.517M0.445778 61.0272H70.6396M0.306227 109.517H-34.7209L0.306227 158.146H35.3333M0.306227 109.517H35.3333M0.306227 109.517L35.3333 158.146M105.667 158.146L123.25 182.6V133.831M105.667 158.146H70.5M105.667 158.146L88.1531 133.831M105.667 158.146V109.517M123.25 133.831L140.833 158.146H175.954L140.833 109.517M123.25 133.831L105.667 109.517M140.833 109.517H176M140.833 109.517L105.806 61.0272M140.833 109.517H105.667M176 109.517L211.027 158.146H246.194M176 109.517H246.333M176 109.517L140.833 61.0272H105.806M316.527 158.146L334.11 182.6V133.971M316.527 158.146L316.574 109.656M316.527 158.146H281.36M316.527 158.146L281.5 109.517M334.11 133.971L351.554 158.146H386.721L351.694 109.656M334.11 133.971L316.574 109.656M351.694 109.656H386.86L351.694 61.0272H316.667M351.694 109.656L316.667 61.0272M351.694 109.656H316.574M316.667 61.0272V-36.2311H351.833V12.398H281.5M316.667 61.0272H281.5M281.5 12.398V61.0272M281.5 12.398C281.5 -6.59284 281.5 -17.2403 281.5 -36.2311L263.917 -60.6156M281.5 12.398L246.333 -36.2311M281.5 61.0272L246.333 12.2583M281.5 61.0272H246.333M281.5 61.0272V109.517M281.5 61.0272L299.037 85.3417M211.167 61.0272L176 12.2583H211.167M211.167 61.0272H246.333M211.167 61.0272V109.517L246.194 158.146M246.333 12.2583V-36.2311M246.333 12.2583H211.167M246.333 -36.2311V-85L263.917 -60.6156M246.333 -36.2311H211.167V12.2583M263.917 -60.6156V36.6427M211.167 12.2583L246.333 61.0272M246.333 61.0272V109.517M316.574 109.656L299.037 85.3417M246.194 158.146H281.36M281.5 109.517H246.333M246.333 109.517L281.36 158.146M299.037 85.3417V133.831M0.445778 12.398V-36.2311H35.6124M0.445778 12.398L35.3333 61.0272V109.517M35.6124 -36.2311V-84.8603L53.126 -60.4758M35.6124 -36.2311L70.6396 12.5378M70.6396 12.5378V-36.0914L53.126 -60.4758M70.6396 12.5378H140.973V-36.0914H105.806V61.0272M70.6396 12.5378V61.0272M70.6396 61.0272L53.126 36.7825M70.6396 61.0272H105.806M70.6396 61.0272V109.517M70.6396 61.0272L88.1531 85.2719M53.126 -60.4758V36.7825M105.667 109.517L88.1531 85.2719M70.6396 109.517H35.3333M70.6396 109.517L88.1531 133.831M35.3333 109.517L70.5 158.146M35.3333 158.146H70.5M88.1531 85.2719V133.831"
20
+ stroke="url(#paint0_radial_1410_923)"
21
+ stroke-width="0.6"
29
22
  />
30
23
  </g>
31
- <g filter="url(#d96)">
32
- <rect x="144" y="28" width="64" height="64" rx="12" fill="white" />
33
- <rect x="144" y="28" width="64" height="64" rx="12" />
24
+ <foreignObject x="124" y="8" width="104" height="106"
25
+ ><div
26
+ xmlns="http://www.w3.org/1999/xhtml"
27
+ style="backdrop-filter:blur(10px);clip-path:url(#bgblur_1_1410_923_clip_path);height:100%;width:100%"
28
+ ></div></foreignObject
29
+ ><g filter="url(#filter0_d_1410_923)" data-figma-bg-blur-radius="20">
30
+ <rect x="144" y="28" width="64" height="64" rx="12" fill="var(--color-background)" />
34
31
  <rect
35
32
  x="144.4"
36
33
  y="28.4"
37
34
  width="63.2"
38
35
  height="63.2"
39
36
  rx="11.6"
40
- stroke="currentColor"
41
- stroke-opacity=".6"
42
- stroke-width="1"
37
+ class="stroke-border-selected-bold"
38
+ stroke-opacity="0.6"
39
+ stroke-width="0.8"
43
40
  />
44
41
  <rect
45
42
  x="148.3"
@@ -47,50 +44,53 @@
47
44
  width="55.4"
48
45
  height="55.4"
49
46
  rx="7.7"
50
- stroke="currentColor"
51
- stroke-opacity=".4"
52
- stroke-width=".6"
47
+ class="stroke-border-selected-bold"
48
+ stroke-opacity="0.4"
49
+ stroke-width="0.6"
53
50
  />
54
51
  </g>
55
52
  <rect
56
- x="238.3"
57
- y="39.3"
58
- width="43.3"
59
- height="43.3"
60
- rx="7.7"
61
- stroke="#030712"
62
- stroke-opacity=".1"
63
- stroke-width=".7"
53
+ x="238.344"
54
+ y="39.3438"
55
+ width="43.3125"
56
+ height="43.3125"
57
+ rx="7.65625"
58
+ class="stroke-border-default-secondary"
59
+ stroke-width="0.6875"
64
60
  stroke-dasharray="2 3"
65
61
  />
66
62
  <rect
67
- x="80"
68
- y="42"
69
- width="38.1"
70
- height="38.1"
71
- rx="5.3"
72
- stroke="#030712"
73
- stroke-opacity=".1"
74
- stroke-width=".4"
63
+ x="79.9563"
64
+ y="41.9563"
65
+ width="38.0875"
66
+ height="38.0875"
67
+ rx="5.29375"
68
+ class="stroke-border-default-secondary"
69
+ stroke-width="0.4125"
70
+ />
71
+ <rect
72
+ x="240.956"
73
+ y="41.9563"
74
+ width="38.0875"
75
+ height="38.0875"
76
+ rx="5.29375"
77
+ class="stroke-border-default-secondary"
78
+ stroke-width="0.4125"
79
+ />
80
+ <rect
81
+ x="77.3438"
82
+ y="39.3438"
83
+ width="43.3125"
84
+ height="43.3125"
85
+ rx="7.65625"
86
+ class="stroke-border-default-secondary"
87
+ stroke-width="0.6875"
88
+ stroke-dasharray="2 3"
75
89
  />
76
90
  </g>
77
91
  <defs>
78
- <radialGradient
79
- id="c97"
80
- cx="0"
81
- cy="0"
82
- r="1"
83
- gradientUnits="userSpaceOnUse"
84
- gradientTransform="matrix(.06967 120.59998 -345.06394 .19934 176 62)"
85
- >
86
- <stop stop-color="#D1D5DB" stop-opacity=".6" />
87
- <stop offset=".5" stop-color="#D1D5DB" stop-opacity="0" />
88
- </radialGradient>
89
- <clipPath id="a99">
90
- <path fill="#fff" d="M0 0h352v120H0z" />
91
- </clipPath>
92
92
  <filter
93
- id="d96"
93
+ id="filter0_d_1410_923"
94
94
  x="124"
95
95
  y="8"
96
96
  width="104"
@@ -101,15 +101,35 @@
101
101
  <feFlood flood-opacity="0" result="BackgroundImageFix" />
102
102
  <feColorMatrix
103
103
  in="SourceAlpha"
104
+ type="matrix"
104
105
  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
105
106
  result="hardAlpha"
106
107
  />
107
108
  <feOffset dy="2" />
108
109
  <feGaussianBlur stdDeviation="10" />
109
110
  <feComposite in2="hardAlpha" operator="out" />
110
- <feColorMatrix values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.04 0" />
111
- <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_280_210" />
112
- <feBlend in="SourceGraphic" in2="effect1_dropShadow_280_210" result="shape" />
111
+ <feColorMatrix
112
+ type="matrix"
113
+ values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.04 0"
114
+ />
115
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1410_923" />
116
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1410_923" result="shape" />
113
117
  </filter>
118
+ <clipPath id="bgblur_1_1410_923_clip_path" transform="translate(-124 -8)"
119
+ ><rect x="144" y="28" width="64" height="64" rx="12" />
120
+ </clipPath><radialGradient
121
+ id="paint0_radial_1410_923"
122
+ cx="0"
123
+ cy="0"
124
+ r="1"
125
+ gradientUnits="userSpaceOnUse"
126
+ gradientTransform="translate(176 62) rotate(89.9669) scale(120.6 345.064)"
127
+ >
128
+ <stop stop-opacity="0.1" />
129
+ <stop stop-color="var(--color-border-default-secondary)" offset="0.537503" stop-opacity="0" />
130
+ </radialGradient>
131
+ <clipPath id="clip0_1410_923">
132
+ <rect width="352" height="120" fill="var(--color-background)" />
133
+ </clipPath>
114
134
  </defs>
115
135
  </svg>
package/dist/tailwind.theme.css CHANGED
@@ -673,6 +673,7 @@
673
673
  --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
674
674
 
675
675
  --color-icon-selected-default: var(--color-positive-50);
676
+ --color-icon-accent-default: var(--color-accent-50);
676
677
 
677
678
  --color-icon-success-default: var(--color-positive-50);
678
679
 
@@ -758,7 +759,7 @@
758
759
  --color-icon: var(--color-icon-default-default);
759
760
 
760
761
  --color-icon-inverse: var(--color-icon-inverse-default);
761
-
762
+ --color-icon-accent: var(--color-icon-accent-default);
762
763
  --color-icon-selected: var(--color-icon-selected-default);
763
764
  --color-icon-success: var(--color-icon-success-default);
764
765
  --color-icon-info: var(--color-icon-info-default);
@@ -780,13 +781,14 @@
780
781
  --shadow-lg: 0 8px 30px 0 rgba(10, 10, 10, 0.12);
781
782
  --shadow-xl: 0 8px 28px -6px rgba(10, 10, 10, 0.12), 0 18px 88px -4px rgba(10, 10, 10, 0.14);
782
783
  --shadow-active: 0px 0px 0px 2px color-mix(in lab, transparent 88%, var(--color-background-accent-default, var(--color-positive-50)));
783
- --shadow-warning: 0px 0px 0px 2px rgba(215, 135, 0, 0.12);
784
784
  --shadow-button-default: 0 2px 6px -1px rgba(11, 11, 16, 0.04), 0 -2px 4px 0 rgba(11, 11, 16, 0.04) inset;
785
785
  --shadow-button-primary: 0 -4px 4px 0 rgba(11, 11, 16, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.16) inset, 0 2px 4px -1px rgba(11, 11, 16, 0.08);
786
786
  --shadow-button-pressed: 0 2px 6px 0 rgba(11, 11, 16, 0.16) inset, 0 -2px 5px -2px rgba(255, 255, 255, 0.25) inset;
787
787
  --shadow-button-dark-pressed: 0 4px 4px -1px rgba(11, 11, 16, 0.16) inset;
788
- --shadow-avatar: 0 0 0 1px rgba(5, 5, 36, 0.06) inset;
789
- --shadow-avatar-inverse: 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
788
+ --shadow-avatar: 0 0 0 1px var(--color-border-default-default) inset;
789
+ --shadow-avatar-inverse: 0 0 0 1px var(--color-border-inverse-default) inset;
790
+ --shadow-shortcut: 0 1px 0 0 var(--color-border-default-secondary);
791
+ --shadow-shortcut-inverse: 0 1px 0 0 var(--color-border-inverse-secondary);
790
792
 
791
793
  /* Letter Spacing (tracking) */
792
794
  --tracking-tightest: -0.29px; /* -1.2% (text-2xl) */
@@ -829,7 +831,7 @@
829
831
  --color-foreground-default-tertiary: var(--color-neutral-white-alpha-40);
830
832
 
831
833
  --color-foreground-inverse-default: var(--color-white);
832
- --color-foreground-inverse-secondary: var(--color-neutral-alpha-70);
834
+ --color-foreground-inverse-secondary: var(--color-neutral-white-alpha-70);
833
835
 
834
836
  --color-foreground-accent-default: var(--color-accent-60);
835
837
  --color-foreground-accent-default-hover: var(--color-accent-70);
@@ -877,9 +879,9 @@
877
879
  --color-background-selected-default: var(--color-accent-alpha-20);
878
880
  --color-background-selected-default-hover: var(--color-accent-alpha-30);
879
881
  --color-background-selected-default-press: var(--color-accent-alpha-40);
880
- --color-background-selected-inverse: var(--color-neutral-alpha-10);
881
- --color-background-selected-inverse-hover: var(--color-neutral-alpha-20);
882
- --color-background-selected-inverse-press: var(--color-neutral-alpha-30);
882
+ --color-background-selected-inverse: var(--color-white-10);
883
+ --color-background-selected-inverse-hover: var(--color-nwhite-20);
884
+ --color-background-selected-inverse-press: var(--color-white-30);
883
885
 
884
886
  --color-background-accent-default: var(--color-accent-60);
885
887
  --color-background-accent-default-hover: var(--color-accent-70);
@@ -949,7 +951,7 @@
949
951
  --color-icon-inverse-bold: var(--color-neutral-white-alpha-100);
950
952
 
951
953
  --color-icon-selected-default: var(--color-positive-50);
952
-
954
+ --color-icon-accent-default: var(--color-white);
953
955
  --color-icon-success-default: var(--color-positive-50);
954
956
 
955
957
  --color-icon-info-default: var(--color-info-50);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@invopop/popui",
3
3
  "license": "MIT",
4
- "version": "0.1.20",
4
+ "version": "0.1.22",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "dev:clean": "npm run clean && vite dev",