@womp/kookie-ui 0.35.3 → 0.35.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 (7) hide show
  1. package/components.css +18 -18
  2. package/package.json +1 -1
  3. package/src/components/notice.css +4 -4
  4. package/src/components/sidebar.css +14 -14
  5. package/src/styles/tokens/constants.css +5 -5
  6. package/styles.css +22 -22
  7. package/tokens.css +4 -4
package/components.css CHANGED
@@ -10840,12 +10840,12 @@
10840
10840
  min-width: 0;
10841
10841
  }
10842
10842
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
10843
- width: var(--content-icon-size-3);
10844
- height: var(--content-icon-size-3);
10843
+ width: var(--icon-size-3);
10844
+ height: var(--icon-size-3);
10845
10845
  }
10846
10846
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
10847
- width: var(--content-icon-size-4);
10848
- height: var(--content-icon-size-4);
10847
+ width: var(--icon-size-4);
10848
+ height: var(--icon-size-4);
10849
10849
  }
10850
10850
  :where(.kui-ShellRailContent .kui-SidebarMenuButton > *) {
10851
10851
  display: -webkit-box;
@@ -11666,12 +11666,12 @@
11666
11666
  padding-bottom: var(--space-3) !important;
11667
11667
  }
11668
11668
  .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
11669
- width: var(--content-icon-size-2);
11670
- height: var(--content-icon-size-2);
11669
+ width: var(--icon-size-2);
11670
+ height: var(--icon-size-2);
11671
11671
  }
11672
11672
  .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
11673
- width: var(--content-icon-size-3);
11674
- height: var(--content-icon-size-3);
11673
+ width: var(--icon-size-3);
11674
+ height: var(--icon-size-3);
11675
11675
  }
11676
11676
  :where(.kui-ShellRailContent) :where(.kui-SidebarSearchTrigger:where([data-state='open'])) {
11677
11677
  background-color: transparent !important;
@@ -11750,8 +11750,8 @@
11750
11750
  -ms-flex-negative: 0;
11751
11751
  flex-shrink: 0;
11752
11752
  color: var(--neutral-a9);
11753
- width: var(--content-icon-size-2);
11754
- height: var(--content-icon-size-2);
11753
+ width: var(--icon-size-2);
11754
+ height: var(--icon-size-2);
11755
11755
  }
11756
11756
  .kui-SidebarSearchInput {
11757
11757
  -webkit-box-flex: 1;
@@ -11813,16 +11813,16 @@
11813
11813
  line-height: var(--line-height-1);
11814
11814
  }
11815
11815
  .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
11816
- width: var(--content-icon-size-1);
11817
- height: var(--content-icon-size-1);
11816
+ width: var(--icon-size-1);
11817
+ height: var(--icon-size-1);
11818
11818
  }
11819
11819
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchInput {
11820
11820
  font-size: var(--font-size-3);
11821
11821
  line-height: var(--line-height-3);
11822
11822
  }
11823
11823
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
11824
- width: var(--content-icon-size-3);
11825
- height: var(--content-icon-size-3);
11824
+ width: var(--icon-size-3);
11825
+ height: var(--icon-size-3);
11826
11826
  }
11827
11827
  @media (prefers-contrast: more) {
11828
11828
  :where(.kui-ShellRailContent :is(.kui-SidebarMenuButton[data-active], .kui-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .kui-SidebarMenuIconWrapper {
@@ -16658,28 +16658,28 @@
16658
16658
  --notice-radius: var(--radius-surface-1);
16659
16659
  --notice-line: var(--line-height-1);
16660
16660
  --notice-control: var(--control-height-1);
16661
- --notice-icon-size: var(--content-icon-size-1);
16661
+ --notice-icon-size: var(--icon-size-1);
16662
16662
  }
16663
16663
  .kui-NoticeRoot:where(.kui-r-size-2) {
16664
16664
  --notice-padding: var(--surface-p-2);
16665
16665
  --notice-radius: var(--radius-surface-2);
16666
16666
  --notice-line: var(--line-height-2);
16667
16667
  --notice-control: var(--control-height-2);
16668
- --notice-icon-size: var(--content-icon-size-2);
16668
+ --notice-icon-size: var(--icon-size-2);
16669
16669
  }
16670
16670
  .kui-NoticeRoot:where(.kui-r-size-3) {
16671
16671
  --notice-padding: var(--surface-p-3);
16672
16672
  --notice-radius: var(--radius-surface-3);
16673
16673
  --notice-line: var(--line-height-3);
16674
16674
  --notice-control: var(--control-height-3);
16675
- --notice-icon-size: var(--content-icon-size-3);
16675
+ --notice-icon-size: var(--icon-size-3);
16676
16676
  }
16677
16677
  .kui-NoticeRoot:where(.kui-r-size-4) {
16678
16678
  --notice-padding: var(--surface-p-4);
16679
16679
  --notice-radius: var(--radius-surface-4);
16680
16680
  --notice-line: var(--line-height-4);
16681
16681
  --notice-control: var(--control-height-4);
16682
- --notice-icon-size: var(--content-icon-size-4);
16682
+ --notice-icon-size: var(--icon-size-4);
16683
16683
  }
16684
16684
  .kui-theme:where([data-is-root-theme='true']) {
16685
16685
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@womp/kookie-ui",
3
- "version": "0.35.3",
3
+ "version": "0.35.4",
4
4
  "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
5
5
  "keywords": [
6
6
  "react",
package/src/components/notice.css CHANGED
@@ -76,27 +76,27 @@
76
76
  --notice-radius: var(--radius-surface-1);
77
77
  --notice-line: var(--line-height-1);
78
78
  --notice-control: var(--control-height-1);
79
- --notice-icon-size: var(--content-icon-size-1);
79
+ --notice-icon-size: var(--icon-size-1);
80
80
  }
81
81
  &:where(.kui-r-size-2) {
82
82
  --notice-padding: var(--surface-p-2);
83
83
  --notice-radius: var(--radius-surface-2);
84
84
  --notice-line: var(--line-height-2);
85
85
  --notice-control: var(--control-height-2);
86
- --notice-icon-size: var(--content-icon-size-2);
86
+ --notice-icon-size: var(--icon-size-2);
87
87
  }
88
88
  &:where(.kui-r-size-3) {
89
89
  --notice-padding: var(--surface-p-3);
90
90
  --notice-radius: var(--radius-surface-3);
91
91
  --notice-line: var(--line-height-3);
92
92
  --notice-control: var(--control-height-3);
93
- --notice-icon-size: var(--content-icon-size-3);
93
+ --notice-icon-size: var(--icon-size-3);
94
94
  }
95
95
  &:where(.kui-r-size-4) {
96
96
  --notice-padding: var(--surface-p-4);
97
97
  --notice-radius: var(--radius-surface-4);
98
98
  --notice-line: var(--line-height-4);
99
99
  --notice-control: var(--control-height-4);
100
- --notice-icon-size: var(--content-icon-size-4);
100
+ --notice-icon-size: var(--icon-size-4);
101
101
  }
102
102
  }
package/src/components/sidebar.css CHANGED
@@ -79,14 +79,14 @@
79
79
  /* Icon size: the one line that differs by size */
80
80
  /* stylelint-disable-next-line selector-max-type */
81
81
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
82
- width: var(--content-icon-size-3);
83
- height: var(--content-icon-size-3);
82
+ width: var(--icon-size-3);
83
+ height: var(--icon-size-3);
84
84
  }
85
85
 
86
86
  /* stylelint-disable-next-line selector-max-type */
87
87
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
88
- width: var(--content-icon-size-4);
89
- height: var(--content-icon-size-4);
88
+ width: var(--icon-size-4);
89
+ height: var(--icon-size-4);
90
90
  }
91
91
 
92
92
  /* Ellipsis on root child content when using asChild (e.g., Next.js Link) */
@@ -619,14 +619,14 @@
619
619
  /* Matches the effective icon size of other menu buttons (expanded-mode rules win on specificity) */
620
620
  /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
621
621
  .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
622
- width: var(--content-icon-size-2);
623
- height: var(--content-icon-size-2);
622
+ width: var(--icon-size-2);
623
+ height: var(--icon-size-2);
624
624
  }
625
625
 
626
626
  /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
627
627
  .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
628
- width: var(--content-icon-size-3);
629
- height: var(--content-icon-size-3);
628
+ width: var(--icon-size-3);
629
+ height: var(--icon-size-3);
630
630
  }
631
631
 
632
632
  /* Remove hover background from thin trigger button itself (styles live on icon wrapper) */
@@ -733,8 +733,8 @@
733
733
  .kui-SidebarSearchIcon {
734
734
  flex-shrink: 0;
735
735
  color: var(--neutral-a9);
736
- width: var(--content-icon-size-2);
737
- height: var(--content-icon-size-2);
736
+ width: var(--icon-size-2);
737
+ height: var(--icon-size-2);
738
738
  }
739
739
 
740
740
  /* Search input */
@@ -789,8 +789,8 @@
789
789
 
790
790
  /* stylelint-disable-next-line selector-max-specificity */
791
791
  .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
792
- width: var(--content-icon-size-1);
793
- height: var(--content-icon-size-1);
792
+ width: var(--icon-size-1);
793
+ height: var(--icon-size-1);
794
794
  }
795
795
 
796
796
  /* stylelint-disable-next-line selector-max-specificity */
@@ -801,8 +801,8 @@
801
801
 
802
802
  /* stylelint-disable-next-line selector-max-specificity */
803
803
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
804
- width: var(--content-icon-size-3);
805
- height: var(--content-icon-size-3);
804
+ width: var(--icon-size-3);
805
+ height: var(--icon-size-3);
806
806
  }
807
807
 
808
808
  /* In a Rail the fill is the icon tile, not the row. Under more contrast the tile goes solid and its icon
package/src/styles/tokens/constants.css CHANGED
@@ -28,11 +28,11 @@
28
28
  --trigger-icon-size-3: 11px;
29
29
  --trigger-icon-size-4: 12px;
30
30
 
31
- /* Content icon size constants (for buttons, menu items) */
32
- --content-icon-size-1: calc(var(--space-6) * 0.55);
33
- --content-icon-size-2: calc(var(--space-7) * 0.525);
34
- --content-icon-size-3: calc(var(--space-8) * 0.5125);
35
- --content-icon-size-4: calc(var(--space-9) * 0.5);
31
+ /* Older names for the icon sizes, kept for apps that read them */
32
+ --content-icon-size-1: var(--icon-size-1);
33
+ --content-icon-size-2: var(--icon-size-2);
34
+ --content-icon-size-3: var(--icon-size-3);
35
+ --content-icon-size-4: var(--icon-size-4);
36
36
 
37
37
  /* Indicator icon size constants (for checkboxes, radio, sub-triggers) */
38
38
  --indicator-icon-size-1: calc(9px * var(--scale));
package/styles.css CHANGED
@@ -3326,10 +3326,10 @@
3326
3326
  --trigger-icon-size-2: 11px;
3327
3327
  --trigger-icon-size-3: 11px;
3328
3328
  --trigger-icon-size-4: 12px;
3329
- --content-icon-size-1: calc(var(--space-6) * 0.55);
3330
- --content-icon-size-2: calc(var(--space-7) * 0.525);
3331
- --content-icon-size-3: calc(var(--space-8) * 0.5125);
3332
- --content-icon-size-4: calc(var(--space-9) * 0.5);
3329
+ --content-icon-size-1: var(--icon-size-1);
3330
+ --content-icon-size-2: var(--icon-size-2);
3331
+ --content-icon-size-3: var(--icon-size-3);
3332
+ --content-icon-size-4: var(--icon-size-4);
3333
3333
  --indicator-icon-size-1: calc(9px * var(--scale));
3334
3334
  --indicator-icon-size-2: calc(10px * var(--scale));
3335
3335
  --indicator-icon-size-3: calc(12px * var(--scale));
@@ -15986,12 +15986,12 @@
15986
15986
  min-width: 0;
15987
15987
  }
15988
15988
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
15989
- width: var(--content-icon-size-3);
15990
- height: var(--content-icon-size-3);
15989
+ width: var(--icon-size-3);
15990
+ height: var(--icon-size-3);
15991
15991
  }
15992
15992
  :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
15993
- width: var(--content-icon-size-4);
15994
- height: var(--content-icon-size-4);
15993
+ width: var(--icon-size-4);
15994
+ height: var(--icon-size-4);
15995
15995
  }
15996
15996
  :where(.kui-ShellRailContent .kui-SidebarMenuButton > *) {
15997
15997
  display: -webkit-box;
@@ -16812,12 +16812,12 @@
16812
16812
  padding-bottom: var(--space-3) !important;
16813
16813
  }
16814
16814
  .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
16815
- width: var(--content-icon-size-2);
16816
- height: var(--content-icon-size-2);
16815
+ width: var(--icon-size-2);
16816
+ height: var(--icon-size-2);
16817
16817
  }
16818
16818
  .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
16819
- width: var(--content-icon-size-3);
16820
- height: var(--content-icon-size-3);
16819
+ width: var(--icon-size-3);
16820
+ height: var(--icon-size-3);
16821
16821
  }
16822
16822
  :where(.kui-ShellRailContent) :where(.kui-SidebarSearchTrigger:where([data-state='open'])) {
16823
16823
  background-color: transparent !important;
@@ -16896,8 +16896,8 @@
16896
16896
  -ms-flex-negative: 0;
16897
16897
  flex-shrink: 0;
16898
16898
  color: var(--neutral-a9);
16899
- width: var(--content-icon-size-2);
16900
- height: var(--content-icon-size-2);
16899
+ width: var(--icon-size-2);
16900
+ height: var(--icon-size-2);
16901
16901
  }
16902
16902
  .kui-SidebarSearchInput {
16903
16903
  -webkit-box-flex: 1;
@@ -16959,16 +16959,16 @@
16959
16959
  line-height: var(--line-height-1);
16960
16960
  }
16961
16961
  .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
16962
- width: var(--content-icon-size-1);
16963
- height: var(--content-icon-size-1);
16962
+ width: var(--icon-size-1);
16963
+ height: var(--icon-size-1);
16964
16964
  }
16965
16965
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchInput {
16966
16966
  font-size: var(--font-size-3);
16967
16967
  line-height: var(--line-height-3);
16968
16968
  }
16969
16969
  .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
16970
- width: var(--content-icon-size-3);
16971
- height: var(--content-icon-size-3);
16970
+ width: var(--icon-size-3);
16971
+ height: var(--icon-size-3);
16972
16972
  }
16973
16973
  @media (prefers-contrast: more) {
16974
16974
  :where(.kui-ShellRailContent :is(.kui-SidebarMenuButton[data-active], .kui-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .kui-SidebarMenuIconWrapper {
@@ -21804,28 +21804,28 @@
21804
21804
  --notice-radius: var(--radius-surface-1);
21805
21805
  --notice-line: var(--line-height-1);
21806
21806
  --notice-control: var(--control-height-1);
21807
- --notice-icon-size: var(--content-icon-size-1);
21807
+ --notice-icon-size: var(--icon-size-1);
21808
21808
  }
21809
21809
  .kui-NoticeRoot:where(.kui-r-size-2) {
21810
21810
  --notice-padding: var(--surface-p-2);
21811
21811
  --notice-radius: var(--radius-surface-2);
21812
21812
  --notice-line: var(--line-height-2);
21813
21813
  --notice-control: var(--control-height-2);
21814
- --notice-icon-size: var(--content-icon-size-2);
21814
+ --notice-icon-size: var(--icon-size-2);
21815
21815
  }
21816
21816
  .kui-NoticeRoot:where(.kui-r-size-3) {
21817
21817
  --notice-padding: var(--surface-p-3);
21818
21818
  --notice-radius: var(--radius-surface-3);
21819
21819
  --notice-line: var(--line-height-3);
21820
21820
  --notice-control: var(--control-height-3);
21821
- --notice-icon-size: var(--content-icon-size-3);
21821
+ --notice-icon-size: var(--icon-size-3);
21822
21822
  }
21823
21823
  .kui-NoticeRoot:where(.kui-r-size-4) {
21824
21824
  --notice-padding: var(--surface-p-4);
21825
21825
  --notice-radius: var(--radius-surface-4);
21826
21826
  --notice-line: var(--line-height-4);
21827
21827
  --notice-control: var(--control-height-4);
21828
- --notice-icon-size: var(--content-icon-size-4);
21828
+ --notice-icon-size: var(--icon-size-4);
21829
21829
  }
21830
21830
  .kui-theme:where([data-is-root-theme='true']) {
21831
21831
  position: relative;
package/tokens.css CHANGED
@@ -3326,10 +3326,10 @@
3326
3326
  --trigger-icon-size-2: 11px;
3327
3327
  --trigger-icon-size-3: 11px;
3328
3328
  --trigger-icon-size-4: 12px;
3329
- --content-icon-size-1: calc(var(--space-6) * 0.55);
3330
- --content-icon-size-2: calc(var(--space-7) * 0.525);
3331
- --content-icon-size-3: calc(var(--space-8) * 0.5125);
3332
- --content-icon-size-4: calc(var(--space-9) * 0.5);
3329
+ --content-icon-size-1: var(--icon-size-1);
3330
+ --content-icon-size-2: var(--icon-size-2);
3331
+ --content-icon-size-3: var(--icon-size-3);
3332
+ --content-icon-size-4: var(--icon-size-4);
3333
3333
  --indicator-icon-size-1: calc(9px * var(--scale));
3334
3334
  --indicator-icon-size-2: calc(10px * var(--scale));
3335
3335
  --indicator-icon-size-3: calc(12px * var(--scale));