@noxlovette/material 0.9.3 → 0.9.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 (35) hide show
  1. package/dist/components/buttons/connected/theme.d.ts +15 -15
  2. package/dist/components/buttons/connected/theme.js +20 -5
  3. package/dist/components/buttons/split-button/theme.d.ts +15 -15
  4. package/dist/components/buttons/split-button/theme.js +21 -15
  5. package/dist/components/buttons/theme.d.ts +40 -40
  6. package/dist/components/buttons/theme.js +29 -29
  7. package/dist/components/cards/theme.js +1 -1
  8. package/dist/components/chips/Chip.svelte +1 -1
  9. package/dist/components/chips/theme.js +1 -1
  10. package/dist/components/containers/bottom-sheet/theme.js +1 -1
  11. package/dist/components/containers/carousel/theme.js +1 -1
  12. package/dist/components/containers/context-menu/theme.js +2 -2
  13. package/dist/components/containers/dialogue/theme.js +1 -1
  14. package/dist/components/containers/list/theme.d.ts +3 -3
  15. package/dist/components/containers/list/theme.js +8 -8
  16. package/dist/components/containers/menu/theme.js +3 -3
  17. package/dist/components/date/theme.js +2 -2
  18. package/dist/components/forms/checkbox/theme.js +1 -1
  19. package/dist/components/forms/command/theme.js +1 -1
  20. package/dist/components/forms/search/theme.js +1 -1
  21. package/dist/components/forms/select/theme.js +2 -2
  22. package/dist/components/forms/slider/theme.js +7 -7
  23. package/dist/components/forms/textfield/theme.js +4 -4
  24. package/dist/components/forms/toggle-group/theme.js +2 -2
  25. package/dist/components/nav/appbar/theme.js +22 -6
  26. package/dist/components/nav/navbar/theme.js +1 -1
  27. package/dist/components/nav/tabs/theme.js +1 -1
  28. package/dist/components/snackbar/theme.js +1 -1
  29. package/dist/components/table/TableHeader.svelte +1 -1
  30. package/dist/components/toolbar/theme.js +2 -2
  31. package/dist/styles/components.css +7 -2
  32. package/dist/styles/icon.css +19 -0
  33. package/dist/styles/rounding.css +4 -0
  34. package/dist/utils/icon/Icon.svelte +5 -5
  35. package/package.json +1 -1
package/dist/components/buttons/connected/theme.d.ts CHANGED
@@ -39,23 +39,23 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
39
39
  size: {
40
40
  xs: {
41
41
  base: string[];
42
- icon: "size-spacing-250 text-[20px]";
42
+ icon: "size-(--text-icon-20) text-icon-20";
43
43
  };
44
44
  sm: {
45
45
  base: string[];
46
- icon: "size-spacing-250 text-[20px]";
46
+ icon: "size-(--text-icon-20) text-icon-20";
47
47
  };
48
48
  md: {
49
49
  base: string[];
50
- icon: "size-spacing-300 text-[24px]";
50
+ icon: "size-(--text-icon-24) text-icon-24";
51
51
  };
52
52
  lg: {
53
53
  base: string[];
54
- icon: "size-spacing-400 text-[32px]";
54
+ icon: "size-(--text-icon-32) text-icon-32";
55
55
  };
56
56
  xl: {
57
57
  base: string[];
58
- icon: "size-spacing-500 text-[40px]";
58
+ icon: "size-(--text-icon-40) text-icon-40";
59
59
  };
60
60
  };
61
61
  shape: {
@@ -73,23 +73,23 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
73
73
  size: {
74
74
  xs: {
75
75
  base: string[];
76
- icon: "size-spacing-250 text-[20px]";
76
+ icon: "size-(--text-icon-20) text-icon-20";
77
77
  };
78
78
  sm: {
79
79
  base: string[];
80
- icon: "size-spacing-250 text-[20px]";
80
+ icon: "size-(--text-icon-20) text-icon-20";
81
81
  };
82
82
  md: {
83
83
  base: string[];
84
- icon: "size-spacing-300 text-[24px]";
84
+ icon: "size-(--text-icon-24) text-icon-24";
85
85
  };
86
86
  lg: {
87
87
  base: string[];
88
- icon: "size-spacing-400 text-[32px]";
88
+ icon: "size-(--text-icon-32) text-icon-32";
89
89
  };
90
90
  xl: {
91
91
  base: string[];
92
- icon: "size-spacing-500 text-[40px]";
92
+ icon: "size-(--text-icon-40) text-icon-40";
93
93
  };
94
94
  };
95
95
  shape: {
@@ -107,23 +107,23 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
107
107
  size: {
108
108
  xs: {
109
109
  base: string[];
110
- icon: "size-spacing-250 text-[20px]";
110
+ icon: "size-(--text-icon-20) text-icon-20";
111
111
  };
112
112
  sm: {
113
113
  base: string[];
114
- icon: "size-spacing-250 text-[20px]";
114
+ icon: "size-(--text-icon-20) text-icon-20";
115
115
  };
116
116
  md: {
117
117
  base: string[];
118
- icon: "size-spacing-300 text-[24px]";
118
+ icon: "size-(--text-icon-24) text-icon-24";
119
119
  };
120
120
  lg: {
121
121
  base: string[];
122
- icon: "size-spacing-400 text-[32px]";
122
+ icon: "size-(--text-icon-32) text-icon-32";
123
123
  };
124
124
  xl: {
125
125
  base: string[];
126
- icon: "size-spacing-500 text-[40px]";
126
+ icon: "size-(--text-icon-40) text-icon-40";
127
127
  };
128
128
  };
129
129
  shape: {
package/dist/components/buttons/connected/theme.js CHANGED
@@ -29,23 +29,38 @@ export const connectedButtonGroupItem = tv({
29
29
  variants: {
30
30
  size: {
31
31
  xs: {
32
- base: [buttonSizes.xs.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
32
+ base: [
33
+ buttonSizes.xs.base,
34
+ '[--cbg-inner:var(--radius-sm)] [--cbg-pressed:var(--radius-xs)]'
35
+ ],
33
36
  icon: buttonSizes.xs.icon
34
37
  },
35
38
  sm: {
36
- base: [buttonSizes.sm.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
39
+ base: [
40
+ buttonSizes.sm.base,
41
+ '[--cbg-inner:var(--radius-sm)] [--cbg-pressed:var(--radius-xs)]'
42
+ ],
37
43
  icon: buttonSizes.sm.icon
38
44
  },
39
45
  md: {
40
- base: [buttonSizes.md.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
46
+ base: [
47
+ buttonSizes.md.base,
48
+ '[--cbg-inner:var(--radius-sm)] [--cbg-pressed:var(--radius-xs)]'
49
+ ],
41
50
  icon: buttonSizes.md.icon
42
51
  },
43
52
  lg: {
44
- base: [buttonSizes.lg.base, '[--cbg-inner:1rem] [--cbg-pressed:0.75rem]'],
53
+ base: [
54
+ buttonSizes.lg.base,
55
+ '[--cbg-inner:var(--radius-lg)] [--cbg-pressed:var(--radius-md)]'
56
+ ],
45
57
  icon: buttonSizes.lg.icon
46
58
  },
47
59
  xl: {
48
- base: [buttonSizes.xl.base, '[--cbg-inner:1.25rem] [--cbg-pressed:1rem]'],
60
+ base: [
61
+ buttonSizes.xl.base,
62
+ '[--cbg-inner:var(--radius-lg-increased)] [--cbg-pressed:var(--radius-lg)]'
63
+ ],
49
64
  icon: buttonSizes.xl.icon
50
65
  }
51
66
  },
package/dist/components/buttons/split-button/theme.d.ts CHANGED
@@ -4,31 +4,31 @@ export declare const splitButton: import("tailwind-variants").TVReturnType<{
4
4
  size: {
5
5
  xs: {
6
6
  leading: string[];
7
- leadingIcon: "size-spacing-250 text-[20px]";
7
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
8
8
  trailing: string[];
9
9
  chevron: string;
10
10
  };
11
11
  sm: {
12
12
  leading: string[];
13
- leadingIcon: "size-spacing-250 text-[20px]";
13
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
14
14
  trailing: string[];
15
15
  chevron: string;
16
16
  };
17
17
  md: {
18
18
  leading: string[];
19
- leadingIcon: "size-spacing-300 text-[24px]";
19
+ leadingIcon: "size-(--text-icon-24) text-icon-24";
20
20
  trailing: string[];
21
21
  chevron: string;
22
22
  };
23
23
  lg: {
24
24
  leading: string[];
25
- leadingIcon: "size-spacing-400 text-[32px]";
25
+ leadingIcon: "size-(--text-icon-32) text-icon-32";
26
26
  trailing: string[];
27
27
  chevron: string;
28
28
  };
29
29
  xl: {
30
30
  leading: string[];
31
- leadingIcon: "size-spacing-500 text-[40px]";
31
+ leadingIcon: "size-(--text-icon-40) text-icon-40";
32
32
  trailing: string[];
33
33
  chevron: string;
34
34
  };
@@ -43,31 +43,31 @@ export declare const splitButton: import("tailwind-variants").TVReturnType<{
43
43
  size: {
44
44
  xs: {
45
45
  leading: string[];
46
- leadingIcon: "size-spacing-250 text-[20px]";
46
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
47
47
  trailing: string[];
48
48
  chevron: string;
49
49
  };
50
50
  sm: {
51
51
  leading: string[];
52
- leadingIcon: "size-spacing-250 text-[20px]";
52
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
53
53
  trailing: string[];
54
54
  chevron: string;
55
55
  };
56
56
  md: {
57
57
  leading: string[];
58
- leadingIcon: "size-spacing-300 text-[24px]";
58
+ leadingIcon: "size-(--text-icon-24) text-icon-24";
59
59
  trailing: string[];
60
60
  chevron: string;
61
61
  };
62
62
  lg: {
63
63
  leading: string[];
64
- leadingIcon: "size-spacing-400 text-[32px]";
64
+ leadingIcon: "size-(--text-icon-32) text-icon-32";
65
65
  trailing: string[];
66
66
  chevron: string;
67
67
  };
68
68
  xl: {
69
69
  leading: string[];
70
- leadingIcon: "size-spacing-500 text-[40px]";
70
+ leadingIcon: "size-(--text-icon-40) text-icon-40";
71
71
  trailing: string[];
72
72
  chevron: string;
73
73
  };
@@ -82,31 +82,31 @@ export declare const splitButton: import("tailwind-variants").TVReturnType<{
82
82
  size: {
83
83
  xs: {
84
84
  leading: string[];
85
- leadingIcon: "size-spacing-250 text-[20px]";
85
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
86
86
  trailing: string[];
87
87
  chevron: string;
88
88
  };
89
89
  sm: {
90
90
  leading: string[];
91
- leadingIcon: "size-spacing-250 text-[20px]";
91
+ leadingIcon: "size-(--text-icon-20) text-icon-20";
92
92
  trailing: string[];
93
93
  chevron: string;
94
94
  };
95
95
  md: {
96
96
  leading: string[];
97
- leadingIcon: "size-spacing-300 text-[24px]";
97
+ leadingIcon: "size-(--text-icon-24) text-icon-24";
98
98
  trailing: string[];
99
99
  chevron: string;
100
100
  };
101
101
  lg: {
102
102
  leading: string[];
103
- leadingIcon: "size-spacing-400 text-[32px]";
103
+ leadingIcon: "size-(--text-icon-32) text-icon-32";
104
104
  trailing: string[];
105
105
  chevron: string;
106
106
  };
107
107
  xl: {
108
108
  leading: string[];
109
- leadingIcon: "size-spacing-500 text-[40px]";
109
+ leadingIcon: "size-(--text-icon-40) text-icon-40";
110
110
  trailing: string[];
111
111
  chevron: string;
112
112
  };
package/dist/components/buttons/split-button/theme.js CHANGED
@@ -23,56 +23,62 @@ export const splitButton = tv({
23
23
  xs: {
24
24
  leading: [
25
25
  buttonSizes.xs.base,
26
- 'ps-spacing-150 pe-spacing-125 [--split-active:0.5rem] [--split-inner:0.25rem]'
26
+ 'ps-spacing-150 pe-spacing-125 [--split-active:var(--radius-sm)] [--split-inner:var(--radius-xs)]'
27
27
  ],
28
28
  leadingIcon: buttonSizes.xs.icon,
29
29
  trailing: [
30
30
  buttonSizes.xs.base,
31
- 'w-spacing-600 [--split-active:0.5rem] [--split-inner:0.25rem]'
31
+ 'w-spacing-600 [--split-active:var(--radius-sm)] [--split-inner:var(--radius-xs)]'
32
32
  ],
33
- chevron: 'size-[22px] -translate-x-px text-[22px]'
33
+ chevron: 'size-(--text-icon-22) -translate-x-px text-icon-22'
34
34
  },
35
35
  sm: {
36
36
  leading: [
37
37
  buttonSizes.sm.base,
38
- 'ps-spacing-200 pe-spacing-150 [--split-active:0.75rem] [--split-inner:0.25rem]'
38
+ 'ps-spacing-200 pe-spacing-150 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
39
39
  ],
40
40
  leadingIcon: buttonSizes.sm.icon,
41
41
  trailing: [
42
42
  buttonSizes.sm.base,
43
- 'w-spacing-600 [--split-active:0.75rem] [--split-inner:0.25rem]'
43
+ 'w-spacing-600 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
44
44
  ],
45
- chevron: 'size-[22px] -translate-x-px text-[22px]'
45
+ chevron: 'size-(--text-icon-22) -translate-x-px text-icon-22'
46
46
  },
47
47
  md: {
48
48
  leading: [
49
49
  buttonSizes.md.base,
50
- 'px-spacing-300 [--split-active:0.75rem] [--split-inner:0.25rem]'
50
+ 'px-spacing-300 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
51
51
  ],
52
52
  leadingIcon: buttonSizes.md.icon,
53
53
  trailing: [
54
54
  buttonSizes.md.base,
55
- 'w-spacing-700 [--split-active:0.75rem] [--split-inner:0.25rem]'
55
+ 'w-spacing-700 [--split-active:var(--radius-md)] [--split-inner:var(--radius-xs)]'
56
56
  ],
57
- chevron: 'size-[26px] -translate-x-spacing-25 text-[26px]'
57
+ chevron: 'size-(--text-icon-26) -translate-x-spacing-25 text-icon-26'
58
58
  },
59
59
  lg: {
60
60
  leading: [
61
61
  buttonSizes.lg.base,
62
- 'px-spacing-600 [--split-active:1.25rem] [--split-inner:0.5rem]'
62
+ 'px-spacing-600 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-sm)]'
63
63
  ],
64
64
  leadingIcon: buttonSizes.lg.icon,
65
- trailing: [buttonSizes.lg.base, 'w-24 [--split-active:1.25rem] [--split-inner:0.5rem]'],
66
- chevron: 'size-[38px] -translate-x-[3px] text-[38px]'
65
+ trailing: [
66
+ buttonSizes.lg.base,
67
+ 'w-24 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-sm)]'
68
+ ],
69
+ chevron: 'size-(--text-icon-38) -translate-x-[3px] text-icon-38'
67
70
  },
68
71
  xl: {
69
72
  leading: [
70
73
  buttonSizes.xl.base,
71
- 'px-spacing-800 [--split-active:1.25rem] [--split-inner:0.75rem]'
74
+ 'px-spacing-800 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-md)]'
72
75
  ],
73
76
  leadingIcon: buttonSizes.xl.icon,
74
- trailing: [buttonSizes.xl.base, 'w-34 [--split-active:1.25rem] [--split-inner:0.75rem]'],
75
- chevron: 'size-[50px] -translate-x-spacing-75 text-[50px]'
77
+ trailing: [
78
+ buttonSizes.xl.base,
79
+ 'w-34 [--split-active:var(--radius-lg-increased)] [--split-inner:var(--radius-md)]'
80
+ ],
81
+ chevron: 'size-(--text-icon-50) -translate-x-spacing-75 text-icon-50'
76
82
  }
77
83
  }
78
84
  },
package/dist/components/buttons/theme.d.ts CHANGED
@@ -59,24 +59,24 @@ export declare const buttonBase = "md-btn md-sys-state-focus-indicator relative
59
59
  /** Button measurements per size: height, padding, icon-label gap, label type, shape and outline. */
60
60
  export declare const buttonSizes: {
61
61
  readonly xs: {
62
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
63
- readonly icon: "size-spacing-250 text-[20px]";
62
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
63
+ readonly icon: "size-(--text-icon-20) text-icon-20";
64
64
  };
65
65
  readonly sm: {
66
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
67
- readonly icon: "size-spacing-250 text-[20px]";
66
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
67
+ readonly icon: "size-(--text-icon-20) text-icon-20";
68
68
  };
69
69
  readonly md: {
70
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
71
- readonly icon: "size-spacing-300 text-[24px]";
70
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
71
+ readonly icon: "size-(--text-icon-24) text-icon-24";
72
72
  };
73
73
  readonly lg: {
74
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
75
- readonly icon: "size-spacing-400 text-[32px]";
74
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
75
+ readonly icon: "size-(--text-icon-32) text-icon-32";
76
76
  };
77
77
  readonly xl: {
78
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
79
- readonly icon: "size-spacing-500 text-[40px]";
78
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
79
+ readonly icon: "size-(--text-icon-40) text-icon-40";
80
80
  };
81
81
  };
82
82
  /** Resting elevation and hover lift per colour style (the text and outlined styles have none). */
@@ -103,24 +103,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
103
103
  };
104
104
  size: {
105
105
  readonly xs: {
106
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
107
- readonly icon: "size-spacing-250 text-[20px]";
106
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
107
+ readonly icon: "size-(--text-icon-20) text-icon-20";
108
108
  };
109
109
  readonly sm: {
110
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
111
- readonly icon: "size-spacing-250 text-[20px]";
110
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
111
+ readonly icon: "size-(--text-icon-20) text-icon-20";
112
112
  };
113
113
  readonly md: {
114
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
115
- readonly icon: "size-spacing-300 text-[24px]";
114
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
115
+ readonly icon: "size-(--text-icon-24) text-icon-24";
116
116
  };
117
117
  readonly lg: {
118
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
119
- readonly icon: "size-spacing-400 text-[32px]";
118
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
119
+ readonly icon: "size-(--text-icon-32) text-icon-32";
120
120
  };
121
121
  readonly xl: {
122
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
123
- readonly icon: "size-spacing-500 text-[40px]";
122
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
123
+ readonly icon: "size-(--text-icon-40) text-icon-40";
124
124
  };
125
125
  };
126
126
  shape: {
@@ -155,24 +155,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
155
155
  };
156
156
  size: {
157
157
  readonly xs: {
158
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
159
- readonly icon: "size-spacing-250 text-[20px]";
158
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
159
+ readonly icon: "size-(--text-icon-20) text-icon-20";
160
160
  };
161
161
  readonly sm: {
162
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
163
- readonly icon: "size-spacing-250 text-[20px]";
162
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
163
+ readonly icon: "size-(--text-icon-20) text-icon-20";
164
164
  };
165
165
  readonly md: {
166
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
167
- readonly icon: "size-spacing-300 text-[24px]";
166
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
167
+ readonly icon: "size-(--text-icon-24) text-icon-24";
168
168
  };
169
169
  readonly lg: {
170
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
171
- readonly icon: "size-spacing-400 text-[32px]";
170
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
171
+ readonly icon: "size-(--text-icon-32) text-icon-32";
172
172
  };
173
173
  readonly xl: {
174
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
175
- readonly icon: "size-spacing-500 text-[40px]";
174
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
175
+ readonly icon: "size-(--text-icon-40) text-icon-40";
176
176
  };
177
177
  };
178
178
  shape: {
@@ -207,24 +207,24 @@ export declare const button: import("tailwind-variants").TVReturnType<{
207
207
  };
208
208
  size: {
209
209
  readonly xs: {
210
- readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
211
- readonly icon: "size-spacing-250 text-[20px]";
210
+ readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]";
211
+ readonly icon: "size-(--text-icon-20) text-icon-20";
212
212
  };
213
213
  readonly sm: {
214
- readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
215
- readonly icon: "size-spacing-250 text-[20px]";
214
+ readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]";
215
+ readonly icon: "size-(--text-icon-20) text-icon-20";
216
216
  };
217
217
  readonly md: {
218
- readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
219
- readonly icon: "size-spacing-300 text-[24px]";
218
+ readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]";
219
+ readonly icon: "size-(--text-icon-24) text-icon-24";
220
220
  };
221
221
  readonly lg: {
222
- readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
223
- readonly icon: "size-spacing-400 text-[32px]";
222
+ readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]";
223
+ readonly icon: "size-(--text-icon-32) text-icon-32";
224
224
  };
225
225
  readonly xl: {
226
- readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
227
- readonly icon: "size-spacing-500 text-[40px]";
226
+ readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]";
227
+ readonly icon: "size-(--text-icon-40) text-icon-40";
228
228
  };
229
229
  };
230
230
  shape: {
package/dist/components/buttons/theme.js CHANGED
@@ -81,24 +81,24 @@ export const buttonBase = 'md-btn md-sys-state-focus-indicator relative inline-f
81
81
  /** Button measurements per size: height, padding, icon-label gap, label type, shape and outline. */
82
82
  export const buttonSizes = {
83
83
  xs: {
84
- base: 'md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]',
85
- icon: 'size-spacing-250 text-[20px]'
84
+ base: 'md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]',
85
+ icon: 'size-(--text-icon-20) text-icon-20'
86
86
  },
87
87
  sm: {
88
- base: 'md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]',
89
- icon: 'size-spacing-250 text-[20px]'
88
+ base: 'md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]',
89
+ icon: 'size-(--text-icon-20) text-icon-20'
90
90
  },
91
91
  md: {
92
- base: 'md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]',
93
- icon: 'size-spacing-300 text-[24px]'
92
+ base: 'md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]',
93
+ icon: 'size-(--text-icon-24) text-icon-24'
94
94
  },
95
95
  lg: {
96
- base: 'md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]',
97
- icon: 'size-spacing-400 text-[32px]'
96
+ base: 'md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]',
97
+ icon: 'size-(--text-icon-32) text-icon-32'
98
98
  },
99
99
  xl: {
100
- base: 'md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]',
101
- icon: 'size-spacing-500 text-[40px]'
100
+ base: 'md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]',
101
+ icon: 'size-(--text-icon-40) text-icon-40'
102
102
  }
103
103
  };
104
104
  /** Resting elevation and hover lift per colour style (the text and outlined styles have none). */
@@ -157,24 +157,24 @@ export const buttonIcon = tv({
157
157
  },
158
158
  size: {
159
159
  xs: {
160
- base: 'h-spacing-400 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]',
161
- icon: 'size-spacing-250 text-[20px]'
160
+ base: 'h-spacing-400 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg)] [--btn-square:var(--radius-md)]',
161
+ icon: 'size-(--text-icon-20) text-icon-20'
162
162
  },
163
163
  sm: {
164
- base: 'h-spacing-500 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]',
165
- icon: 'size-spacing-300 text-[24px]'
164
+ base: 'h-spacing-500 [--btn-outline:1px] [--btn-pressed:var(--radius-sm)] [--btn-round:var(--radius-lg-increased)] [--btn-square:var(--radius-md)]',
165
+ icon: 'size-(--text-icon-24) text-icon-24'
166
166
  },
167
167
  md: {
168
- base: 'h-spacing-700 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]',
169
- icon: 'size-spacing-300 text-[24px]'
168
+ base: 'h-spacing-700 [--btn-outline:1px] [--btn-pressed:var(--radius-md)] [--btn-round:var(--radius-xl)] [--btn-square:var(--radius-lg)]',
169
+ icon: 'size-(--text-icon-24) text-icon-24'
170
170
  },
171
171
  lg: {
172
- base: 'h-24 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]',
173
- icon: 'size-spacing-400 text-[32px]'
172
+ base: 'h-24 [--btn-outline:2px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--radius-xxl)] [--btn-square:var(--radius-xl)]',
173
+ icon: 'size-(--text-icon-32) text-icon-32'
174
174
  },
175
175
  xl: {
176
- base: 'h-34 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]',
177
- icon: 'size-spacing-500 text-[40px]'
176
+ base: 'h-34 [--btn-outline:3px] [--btn-pressed:var(--radius-lg)] [--btn-round:var(--md-comp-button-xl-round-corner)] [--btn-square:var(--radius-xl)]',
177
+ icon: 'size-(--text-icon-40) text-icon-40'
178
178
  }
179
179
  },
180
180
  /** Container width: the icon plus the size's narrow, default or wide leading/trailing space. */
@@ -256,21 +256,21 @@ export const fab = tv({
256
256
  /** Baseline small FAB. No longer recommended by M3; kept for dense layouts. */
257
257
  small: {
258
258
  base: 'h-spacing-500 rounded-xl px-spacing-100',
259
- icon: 'size-spacing-300 text-[24px]'
259
+ icon: 'size-(--text-icon-24) text-icon-24'
260
260
  },
261
261
  regular: {
262
262
  base: 'md-sys-typescale-title-medium h-spacing-700 rounded-2xl px-spacing-200',
263
- icon: 'size-spacing-300 text-[24px]',
263
+ icon: 'size-(--text-icon-24) text-icon-24',
264
264
  label: 'ps-spacing-100'
265
265
  },
266
266
  medium: {
267
- base: 'md-sys-typescale-title-large h-20 rounded-[1.25rem] px-[1.625rem]',
268
- icon: 'size-7 text-[28px]',
267
+ base: 'md-sys-typescale-title-large h-20 rounded-lg-increased px-[1.625rem]',
268
+ icon: 'size-(--text-icon-28) text-icon-28',
269
269
  label: 'ps-spacing-150'
270
270
  },
271
271
  large: {
272
- base: 'md-sys-typescale-headline-small h-24 rounded-[1.75rem] px-[1.875rem]',
273
- icon: 'size-spacing-450 text-[36px]',
272
+ base: 'md-sys-typescale-headline-small h-24 rounded-xl px-[1.875rem]',
273
+ icon: 'size-(--text-icon-36) text-icon-36',
274
274
  label: 'ps-spacing-200'
275
275
  }
276
276
  },
@@ -281,8 +281,8 @@ export const fab = tv({
281
281
  */
282
282
  menuOpen: {
283
283
  true: {
284
- base: 'justify-center px-spacing-0 size-spacing-700 rounded-[1.75rem]',
285
- icon: 'size-spacing-250 text-[20px]',
284
+ base: 'justify-center px-spacing-0 size-spacing-700 rounded-xl',
285
+ icon: 'size-(--text-icon-20) text-icon-20',
286
286
  labelTrack: 'grid-cols-[0fr]!'
287
287
  },
288
288
  false: {}
@@ -365,7 +365,7 @@ export const fabMenu = tv({
365
365
  export const fabMenuItem = tv({
366
366
  slots: {
367
367
  base: 'md-btn md-sys-state-focus-indicator md-sys-typescale-title-medium relative inline-flex h-spacing-700 shrink-0 cursor-pointer items-center gap-spacing-100 rounded-full px-spacing-300 whitespace-nowrap select-none data-disabled:cursor-not-allowed data-disabled:bg-md-sys-color-on-surface/10 data-disabled:text-md-sys-color-on-surface/38',
368
- icon: 'size-spacing-300 shrink-0 text-[24px]'
368
+ icon: 'size-(--text-icon-24) shrink-0 text-icon-24'
369
369
  },
370
370
  variants: {
371
371
  set: {
package/dist/components/cards/theme.js CHANGED
@@ -2,7 +2,7 @@ import { tv } from '../../utils/tv.js';
2
2
  export const card = tv({
3
3
  slots: {
4
4
  base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg transition-shadow md-sys-motion-effects',
5
- icon: 'size-spacing-300 text-[24px] text-md-sys-color-primary'
5
+ icon: 'size-(--text-icon-24) text-icon-24 text-md-sys-color-primary'
6
6
  },
7
7
  variants: {
8
8
  type: {
package/dist/components/chips/Chip.svelte CHANGED
@@ -135,7 +135,7 @@ Chips help people enter information, make selections, filter content, or trigger
135
135
  }}
136
136
  aria-label={removeLabel}
137
137
  >
138
- <Icon size="sm" name="close" class="size-[18px] text-[18px]" />
138
+ <Icon size="sm" name="close" class="text-icon-18 size-(--text-icon-18)" />
139
139
  <Layer />
140
140
  </button>
141
141
  {/if}
package/dist/components/chips/theme.js CHANGED
@@ -23,7 +23,7 @@ export const chip = tv({
23
23
  // a 16% state layer.
24
24
  base: 'in-data-dragged:shadow-elevation-4 in-data-dragged:before:bg-current/16 state-layer md-sys-state-focus-indicator relative inline-flex h-spacing-400 max-w-max shrink-0 items-center justify-center gap-spacing-100 rounded-sm border border-transparent px-spacing-200 md-sys-typescale-label-large select-none before:rounded-sm transition-[background-color,border-color,box-shadow] md-sys-motion-effects',
25
25
  // 18dp is the chip spec's own icon size, between the 16 and 20 Icon presets.
26
- icon: 'size-[18px] shrink-0 text-[18px]',
26
+ icon: 'size-(--text-icon-18) shrink-0 text-icon-18',
27
27
  avatar: 'size-spacing-300 shrink-0 overflow-hidden rounded-full',
28
28
  // Static, so its Layer (state layer and hit area) spans the whole chip; the remove button is
29
29
  // positioned and later in the DOM, so it stays on top.
package/dist/components/containers/bottom-sheet/theme.js CHANGED
@@ -18,7 +18,7 @@ export const bottomSheet = tv({
18
18
  ],
19
19
  container: [
20
20
  'bg-md-sys-color-surface-container-low text-md-sys-color-on-surface shadow-elevation-1',
21
- 'flex max-h-[inherit] flex-col rounded-t-[28px] will-change-transform'
21
+ 'flex max-h-[inherit] flex-col rounded-t-xl will-change-transform'
22
22
  ],
23
23
  handleArea: 'flex h-spacing-600 shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing',
24
24
  handle: 'md-sys-state-focus-indicator flex h-spacing-600 w-spacing-600 items-center justify-center rounded-full outline-none',
package/dist/components/containers/carousel/theme.js CHANGED
@@ -13,7 +13,7 @@ export const carousel = tv({
13
13
  snapPoint: 'pointer-events-none absolute top-spacing-0 h-px w-px snap-start',
14
14
  viewport: 'sticky left-spacing-0 h-full overflow-clip',
15
15
  item: [
16
- 'text-md-sys-color-on-surface bg-md-sys-color-surface relative block shrink-0 overflow-hidden rounded-[28px] text-start',
16
+ 'text-md-sys-color-on-surface bg-md-sys-color-surface relative block shrink-0 overflow-hidden rounded-xl text-start',
17
17
  'md-sys-state-focus-indicator transition-shadow md-sys-motion-effects'
18
18
  ],
19
19
  content: 'h-full'
package/dist/components/containers/context-menu/theme.js CHANGED
@@ -24,9 +24,9 @@ export const contextMenu = tv({
24
24
  itemContent: 'flex flex-1 flex-col gap-spacing-25 min-w-spacing-0',
25
25
  label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
26
26
  helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
27
- icon: 'size-spacing-250 text-[20px] text-md-sys-color-on-surface-variant shrink-0',
27
+ icon: 'size-(--text-icon-20) text-icon-20 text-md-sys-color-on-surface-variant shrink-0',
28
28
  separator: 'my-spacing-50 h-px bg-md-sys-color-outline-variant',
29
- rightSlot: 'ml-auto size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant'
29
+ rightSlot: 'ml-auto size-(--text-icon-20) text-icon-20 shrink-0 text-md-sys-color-on-surface-variant'
30
30
  },
31
31
  variants: {
32
32
  selected: {
package/dist/components/containers/dialogue/theme.js CHANGED
@@ -2,7 +2,7 @@ import { tv } from '../../../utils/tv.js';
2
2
  export const dialogue = tv({
3
3
  slots: {
4
4
  base: 'fixed inset-spacing-0 z-layer-modal bg-md-sys-color-scrim/32',
5
- inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
5
+ inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-xl p-spacing-300 gap-spacing-200',
6
6
  headlineContainer: 'md-sys-typescale-headline-small text-md-sys-color-on-surface',
7
7
  supportingTextContainer: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
8
8
  buttonContainer: 'mt-spacing-100 flex items-center justify-end gap-spacing-100'
package/dist/components/containers/list/theme.d.ts CHANGED
@@ -4,17 +4,17 @@ export type ListMediaVariants = VariantProps<typeof listMedia>;
4
4
  export declare const list: import("tailwind-variants").TVReturnType<{
5
5
  variant: {
6
6
  standard: "";
7
- segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
7
+ segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
8
8
  };
9
9
  }, undefined, "flex w-full flex-col [--li-bottom:initial] [--li-top:initial]", {
10
10
  variant: {
11
11
  standard: "";
12
- segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
12
+ segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
13
13
  };
14
14
  }, undefined, import("tailwind-variants").TVReturnTypeLike<{
15
15
  variant: {
16
16
  standard: "";
17
- segmented: "gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]";
17
+ segmented: "gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]";
18
18
  };
19
19
  }, undefined>>;
20
20
  export declare const listItem: import("tailwind-variants").TVReturnType<{
package/dist/components/containers/list/theme.js CHANGED
@@ -19,7 +19,7 @@ export const list = tv({
19
19
  variant: {
20
20
  standard: '',
21
21
  // 2dp between segments; outer corners 16dp (md.comp.list.container.shape).
22
- segmented: 'gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]'
22
+ segmented: 'gap-spacing-25 [&>:first-child]:[--li-top:var(--radius-lg)] [&>:last-child]:[--li-bottom:var(--radius-lg)]'
23
23
  }
24
24
  },
25
25
  defaultVariants: { variant: 'standard' }
@@ -28,7 +28,7 @@ export const listItem = tv({
28
28
  slots: {
29
29
  base: [
30
30
  'relative isolate flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
31
- '[--li-shape:0.25rem] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
31
+ '[--li-shape:var(--radius-xs)] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
32
32
  'transition-[border-radius,background-color,color] md-sys-motion-fast-spatial',
33
33
  'text-md-sys-color-on-surface-variant'
34
34
  ],
@@ -69,17 +69,17 @@ export const listItem = tv({
69
69
  true: {
70
70
  base: [
71
71
  'cursor-pointer outline-none',
72
- 'hover:[--li-shape:0.75rem]',
73
- 'focus-visible:[--li-shape:1rem]',
72
+ 'hover:[--li-shape:var(--radius-md)]',
73
+ 'focus-visible:[--li-shape:var(--radius-lg)]',
74
74
  'focus-visible:outline-solid focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-md-sys-color-secondary',
75
- 'active:[--li-shape:1rem]'
75
+ 'active:[--li-shape:var(--radius-lg)]'
76
76
  ]
77
77
  },
78
78
  false: ''
79
79
  },
80
80
  selected: {
81
81
  true: {
82
- base: 'text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
82
+ base: 'text-md-sys-color-on-secondary-container [--li-shape:var(--radius-lg)] hover:[--li-shape:var(--radius-lg)]',
83
83
  leading: 'text-md-sys-color-on-secondary-container',
84
84
  overline: 'text-md-sys-color-on-secondary-container',
85
85
  headline: 'text-md-sys-color-on-secondary-container',
@@ -104,10 +104,10 @@ export const listItem = tv({
104
104
  expanded: {
105
105
  true: {
106
106
  // The expanded group is one 16dp container: header on top, nested items below.
107
- base: '[--li-top:1rem] [--li-bottom:var(--li-shape)]',
107
+ base: '[--li-top:var(--radius-lg)] [--li-bottom:var(--li-shape)]',
108
108
  expandIcon: 'rotate-180 bg-md-sys-color-surface-container',
109
109
  region: 'grid-rows-[1fr]',
110
- nested: '[&>:last-child]:[--li-bottom:1rem]'
110
+ nested: '[&>:last-child]:[--li-bottom:var(--radius-lg)]'
111
111
  },
112
112
  false: {
113
113
  expandIcon: 'bg-md-sys-color-surface',
package/dist/components/containers/menu/theme.js CHANGED
@@ -16,11 +16,11 @@ export const menu = tv({
16
16
  focus-visible:outline-md-sys-color-primary
17
17
  data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
18
18
  `,
19
- icon: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
20
- indicator: 'size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant',
19
+ icon: 'text-md-sys-color-on-surface-variant size-(--text-icon-20) text-icon-20 shrink-0',
20
+ indicator: 'size-(--text-icon-20) text-icon-20 shrink-0 text-md-sys-color-on-surface-variant',
21
21
  itemContent: 'flex flex-1 flex-col gap-spacing-50 text-left min-w-spacing-0',
22
22
  helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
23
- rightSlot: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
23
+ rightSlot: 'text-md-sys-color-on-surface-variant size-(--text-icon-20) text-icon-20 shrink-0',
24
24
  groupHeading: 'px-spacing-150 pt-spacing-100 pb-spacing-50 md-sys-typescale-label-medium text-md-sys-color-primary'
25
25
  },
26
26
  variants: {
package/dist/components/date/theme.js CHANGED
@@ -15,7 +15,7 @@ export const dateRangeField = tv({
15
15
  leadingIcon: `
16
16
  text-md-sys-color-on-surface-variant size-spacing-300
17
17
  group-focus-within:text-md-sys-color-primary
18
- group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
18
+ group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
19
19
  `,
20
20
  trailingIcon: `
21
21
  mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
@@ -124,7 +124,7 @@ export const dateField = tv({
124
124
  leadingIcon: `
125
125
  text-md-sys-color-on-surface-variant size-spacing-300
126
126
  group-focus-within:text-md-sys-color-primary
127
- group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
127
+ group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
128
128
  `,
129
129
  trailingIcon: `
130
130
  mr-spacing-50 shrink-0 text-md-sys-color-on-surface-variant
package/dist/components/forms/checkbox/theme.js CHANGED
@@ -4,7 +4,7 @@ export const checkbox = tv({
4
4
  root: 'group inline-flex size-spacing-500 shrink-0 select-none items-center justify-center cursor-pointer',
5
5
  container: 'relative inline-flex size-[18px] shrink-0',
6
6
  control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
7
- box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
7
+ box: 'absolute inset-[11px] rounded-xs border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
8
8
  checkIcon: 'pointer-events-none absolute inset-spacing-0 m-auto size-spacing-175 text-md-sys-color-on-primary opacity-0 scale-75',
9
9
  indeterminateIcon: 'pointer-events-none absolute inset-spacing-0 m-auto block h-spacing-25 w-spacing-150 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
10
10
  label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface cursor-pointer'
package/dist/components/forms/command/theme.js CHANGED
@@ -25,7 +25,7 @@ export const commandItem = tv({
25
25
  slots: {
26
26
  base: [
27
27
  'cursor-default select-none outline-none',
28
- 'data-selected:[--li-shape:0.75rem] data-selected:bg-md-sys-color-on-surface/10'
28
+ 'data-selected:[--li-shape:var(--radius-md)] data-selected:bg-md-sys-color-on-surface/10'
29
29
  ]
30
30
  },
31
31
  // The list's own surface fill is a variant, so it's replaced here, not in the base.
package/dist/components/forms/search/theme.js CHANGED
@@ -38,7 +38,7 @@ export const searchView = tv({
38
38
  // keys are on gets the M3 focus indicator, drawn inside the item, and a focused item's shape.
39
39
  // `outline-solid` is load-bearing: ListItem's `outline-none` sets --tw-outline-style to none,
40
40
  // which `outline-3` reads, so without it the ring has a width and colour but no style.
41
- results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-solid [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary [&_[data-highlighted]]:[--li-shape:1rem]'
41
+ results: 'min-h-spacing-0 overflow-y-auto overscroll-contain [&_[role=option]:not([aria-disabled=true])]:bg-transparent [&_[data-highlighted]]:outline-solid [&_[data-highlighted]]:outline-3 [&_[data-highlighted]]:-outline-offset-3 [&_[data-highlighted]]:outline-md-sys-color-secondary [&_[data-highlighted]]:[--li-shape:var(--radius-lg)]'
42
42
  },
43
43
  variants: {
44
44
  hasTrailing: { true: '', false: { input: 'me-spacing-150' } }
package/dist/components/forms/select/theme.js CHANGED
@@ -22,12 +22,12 @@ export const select = tv({
22
22
  leadingIcon: `
23
23
  text-md-sys-color-on-surface-variant size-spacing-300
24
24
  group-has-[[data-state=open]]:text-md-sys-color-primary
25
- group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
25
+ group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-icon-24
26
26
  `,
27
27
  dropdownIcon: `
28
28
  mr-spacing-150 text-md-sys-color-on-surface-variant size-spacing-300
29
29
  group-data-[state=open]:text-md-sys-color-primary
30
- group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
30
+ group-data-[invalid]:text-md-sys-color-error z-20 text-icon-24
31
31
  transition-transform md-sys-motion-fast-spatial
32
32
  group-data-[state=open]:rotate-180
33
33
  `,
package/dist/components/forms/slider/theme.js CHANGED
@@ -40,23 +40,23 @@ export const slider = tv({
40
40
  s: { root: '[--track:1.5rem] [--handle:2.75rem] [--outer:var(--radius-sm)]' },
41
41
  m: {
42
42
  root: '[--track:2.5rem] [--handle:3.25rem] [--outer:var(--radius-md)]',
43
- iconGlyph: 'size-spacing-300 text-[24px]'
43
+ iconGlyph: 'size-(--text-icon-24) text-icon-24'
44
44
  },
45
45
  l: {
46
46
  root: '[--track:3.5rem] [--handle:4.25rem] [--outer:var(--radius-lg)]',
47
- iconGlyph: 'size-spacing-300 text-[24px]'
47
+ iconGlyph: 'size-(--text-icon-24) text-icon-24'
48
48
  },
49
49
  xl: {
50
50
  root: '[--track:6rem] [--handle:6.75rem] [--outer:var(--radius-xl)]',
51
- iconGlyph: 'size-spacing-400 text-[32px]'
51
+ iconGlyph: 'size-(--text-icon-32) text-icon-32'
52
52
  }
53
53
  },
54
54
  vertical: {
55
55
  false: {
56
56
  root: 'h-[var(--handle)] w-full min-w-40',
57
57
  track: 'top-1/2 h-[var(--track)] -translate-y-1/2',
58
- activeTrack: 'left-spacing-0 rounded-l-[var(--outer)] rounded-r-[2px]',
59
- inactiveTrack: 'right-spacing-0 rounded-l-[2px] rounded-r-[var(--outer)]',
58
+ activeTrack: 'left-spacing-0 rounded-l-(--outer) rounded-r-(--md-comp-slider-inner-corner)',
59
+ inactiveTrack: 'right-spacing-0 rounded-l-(--md-comp-slider-inner-corner) rounded-r-(--outer)',
60
60
  stop: 'top-1/2 -translate-x-1/2 -translate-y-1/2',
61
61
  icon: 'top-1/2 -translate-y-1/2',
62
62
  handle: 'top-spacing-0 h-full -translate-x-1/2',
@@ -65,8 +65,8 @@ export const slider = tv({
65
65
  true: {
66
66
  root: 'h-full min-h-40 w-[var(--handle)]',
67
67
  track: 'left-1/2 w-[var(--track)] -translate-x-1/2',
68
- activeTrack: 'bottom-spacing-0 rounded-t-[2px] rounded-b-[var(--outer)]',
69
- inactiveTrack: 'top-spacing-0 rounded-t-[var(--outer)] rounded-b-[2px]',
68
+ activeTrack: 'bottom-spacing-0 rounded-t-(--md-comp-slider-inner-corner) rounded-b-(--outer)',
69
+ inactiveTrack: 'top-spacing-0 rounded-t-(--outer) rounded-b-(--md-comp-slider-inner-corner)',
70
70
  stop: 'left-1/2 -translate-x-1/2 translate-y-1/2',
71
71
  icon: 'left-1/2 -translate-x-1/2',
72
72
  handle: 'left-spacing-0 w-full translate-y-1/2',
package/dist/components/forms/textfield/theme.js CHANGED
@@ -30,14 +30,14 @@ export const textfield = tv({
30
30
  transition-colors md-sys-motion-effects
31
31
  `,
32
32
  leadingIcon: `
33
- text-md-sys-color-on-surface-variant size-spacing-300
33
+ text-md-sys-color-on-surface-variant size-(--text-icon-24)
34
34
  group-focus-within:text-md-sys-color-primary
35
- ml-spacing-150 text-[24px]
35
+ ml-spacing-150 text-icon-24
36
36
  `,
37
37
  trailingIcon: `
38
- mr-spacing-150 text-md-sys-color-on-surface-variant size-spacing-300
38
+ mr-spacing-150 text-md-sys-color-on-surface-variant size-(--text-icon-24)
39
39
  group-focus-within:text-md-sys-color-primary
40
- z-20 text-[24px]
40
+ z-20 text-icon-24
41
41
  `,
42
42
  supportingText: `
43
43
  px-spacing-200 pt-spacing-50 flex justify-between
package/dist/components/forms/toggle-group/theme.js CHANGED
@@ -14,7 +14,7 @@ export const toggleGroup = tv({
14
14
  export const toggleGroupItem = tv({
15
15
  slots: {
16
16
  base: 'layer-container state-layer relative inline-flex min-w-spacing-600 flex-1 items-center justify-center gap-spacing-100 px-spacing-200 md-sys-typescale-label-large text-md-sys-color-on-surface outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38 [&:not(:last-child)]:border-r [&:not(:last-child)]:border-md-sys-color-outline data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
17
- checkIcon: 'size-[18px] text-[18px]',
18
- icon: 'size-[18px] text-[18px]'
17
+ checkIcon: 'size-(--text-icon-18) text-icon-18',
18
+ icon: 'size-(--text-icon-18) text-icon-18'
19
19
  }
20
20
  });
package/dist/components/nav/appbar/theme.js CHANGED
@@ -126,7 +126,7 @@ export const appbar = tv({
126
126
  row: 'grid w-full items-center px-spacing-50',
127
127
  childrenRow: 'w-full px-spacing-100 pb-spacing-100',
128
128
  ghost: 'w-full shrink-0 pointer-events-none',
129
- textContainer: 'flex min-w-spacing-0 flex-col gap-spacing-25 [--lead:0.25rem] [--trail:0.25rem]',
129
+ textContainer: 'flex min-w-spacing-0 flex-col gap-spacing-25 [--lead:var(--spacing-spacing-50)] [--trail:var(--spacing-spacing-50)]',
130
130
  title: 'text-md-sys-color-on-surface',
131
131
  subtitle: 'text-md-sys-color-on-surface-variant',
132
132
  leading: 'text-md-sys-color-on-surface col-start-1 row-start-1 flex shrink-0 items-center justify-self-start',
@@ -163,7 +163,7 @@ export const appbar = tv({
163
163
  searchContainer: {
164
164
  true: {
165
165
  row: 'grid-cols-[auto_1fr_auto]',
166
- textContainer: '[--lead:0.5rem] [--trail:0.5rem]'
166
+ textContainer: '[--lead:var(--spacing-spacing-100)] [--trail:var(--spacing-spacing-100)]'
167
167
  },
168
168
  false: ''
169
169
  },
@@ -173,10 +173,26 @@ export const appbar = tv({
173
173
  },
174
174
  compoundVariants: [
175
175
  // A title with no button beside it sits at the 16dp inset.
176
- { align: 'start', noLeading: true, class: { textContainer: '[--lead:1rem]' } },
177
- { align: 'start', noTrailing: true, class: { textContainer: '[--trail:1rem]' } },
178
- { searchContainer: true, noLeading: true, class: { textContainer: '[--lead:0.75rem]' } },
179
- { searchContainer: true, noTrailing: true, class: { textContainer: '[--trail:0.75rem]' } }
176
+ {
177
+ align: 'start',
178
+ noLeading: true,
179
+ class: { textContainer: '[--lead:var(--spacing-spacing-200)]' }
180
+ },
181
+ {
182
+ align: 'start',
183
+ noTrailing: true,
184
+ class: { textContainer: '[--trail:var(--spacing-spacing-200)]' }
185
+ },
186
+ {
187
+ searchContainer: true,
188
+ noLeading: true,
189
+ class: { textContainer: '[--lead:var(--spacing-spacing-150)]' }
190
+ },
191
+ {
192
+ searchContainer: true,
193
+ noTrailing: true,
194
+ class: { textContainer: '[--trail:var(--spacing-spacing-150)]' }
195
+ }
180
196
  ],
181
197
  defaultVariants: {
182
198
  align: 'start',
package/dist/components/nav/navbar/theme.js CHANGED
@@ -12,7 +12,7 @@ export const navitem = tv({
12
12
  base: 'group relative flex flex-1 flex-col items-center justify-center min-w-spacing-0 max-w-[168px] h-full transition-colors md-sys-motion-fast-effects',
13
13
  content: 'flex flex-col items-center justify-center gap-spacing-50 w-full',
14
14
  iconContainer: 'relative flex items-center justify-center h-spacing-400 w-spacing-800 rounded-full transition-colors md-sys-motion-effects',
15
- icon: 'text-[24px] size-spacing-300',
15
+ icon: 'text-icon-24 size-(--text-icon-24)',
16
16
  label: 'md-sys-typescale-label-medium truncate w-full text-center'
17
17
  },
18
18
  variants: {
package/dist/components/nav/tabs/theme.js CHANGED
@@ -19,7 +19,7 @@ export const tab = tv({
19
19
  'data-[state=inactive]:text-md-sys-color-on-surface-variant'
20
20
  ].join(' '),
21
21
  label: 'md-sys-typescale-title-small',
22
- icon: 'size-spacing-300 text-[24px]'
22
+ icon: 'size-(--text-icon-24) text-icon-24'
23
23
  },
24
24
  variants: {
25
25
  variant: {
package/dist/components/snackbar/theme.js CHANGED
@@ -5,7 +5,7 @@ export const snackbar = tv({
5
5
  label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-spacing-150 cursor-pointer ',
6
6
  actionWrapper: 'flex items-center z-40',
7
7
  supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-medium max-w-[60ch] ',
8
- icon: 'size-spacing-300 text-[24px] text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
8
+ icon: 'size-(--text-icon-24) text-icon-24 text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
9
9
  },
10
10
  variants: {
11
11
  fixed: {
package/dist/components/table/TableHeader.svelte CHANGED
@@ -36,7 +36,7 @@ and `sortDirection` props. Defaults to `scope="col"`.
36
36
  ].join(' ')}
37
37
  aria-hidden="true"
38
38
  >
39
- <Icon name="arrow_upward" class="size-[18px] text-[18px]" />
39
+ <Icon name="arrow_upward" class="text-icon-18 size-(--text-icon-18)" />
40
40
  </span>
41
41
  {/if}
42
42
  </span>
package/dist/components/toolbar/theme.js CHANGED
@@ -52,7 +52,7 @@ export const toolbar = tv({
52
52
  export const toolbarButton = tv({
53
53
  slots: {
54
54
  base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
55
- icon: 'size-spacing-250 text-[20px]'
55
+ icon: 'size-(--text-icon-20) text-icon-20'
56
56
  },
57
57
  variants: {
58
58
  color: {
@@ -65,7 +65,7 @@ export const toolbarButton = tv({
65
65
  export const toolbarGroupItem = tv({
66
66
  slots: {
67
67
  base: 'layer-container state-layer before:rounded-full relative inline-flex size-spacing-500 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
68
- icon: 'size-spacing-250 text-[20px]'
68
+ icon: 'size-(--text-icon-20) text-icon-20'
69
69
  },
70
70
  variants: {
71
71
  color: {
package/dist/styles/components.css CHANGED
@@ -1,10 +1,15 @@
1
1
  /*
2
- * M3 component dimensions that aren't on the spacing scale (issue #30). Each property is named
3
- * after its token in the M3 token database, md.comp.<component>.<…> with dots as dashes, and
2
+ * M3 component dimensions that aren't on the spacing scale (issue #30). Database-backed properties
3
+ * are named after md.comp.<component>.<…> with dots as dashes; local component-specific dimensions
4
+ * are named for their use. Both are
4
5
  * used as `w-(--md-comp-…)`. A dimension that lands on the spacing grid uses the spacing token
5
6
  * instead (the rail's 4dp item gap is `gap-spacing-50`, not a property here).
6
7
  */
7
8
  :root {
9
+ /* XL button pill: half its 136dp height, beyond the system shape scale. */
10
+ --md-comp-button-xl-round-corner: 4.25rem;
11
+ --md-comp-slider-inner-corner: 0.125rem; /* 2dp, smaller than system shape XS */
12
+
8
13
  /* Navigation rail: https://m3.material.io/components/navigation-rail/specs */
9
14
  --md-comp-nav-rail-collapsed-container-width: 6rem; /* 96dp */
10
15
  --md-comp-nav-rail-collapsed-top-space: 2.75rem; /* 44dp */
package/dist/styles/icon.css CHANGED
@@ -1,3 +1,22 @@
1
+ /* Icon sizes used by the M3 components and the Material Symbols font. The 18, 22, 26, 38 and
2
+ 50dp steps are component-specific glyph dimensions (chips, split buttons), not M3 system sizes.
3
+ Each token controls both the glyph font size and its box, so they cannot drift apart. */
4
+ @theme {
5
+ --text-icon-16: 1rem;
6
+ --text-icon-18: 1.125rem;
7
+ --text-icon-20: 1.25rem;
8
+ --text-icon-22: 1.375rem;
9
+ --text-icon-24: 1.5rem;
10
+ --text-icon-26: 1.625rem;
11
+ --text-icon-28: 1.75rem;
12
+ --text-icon-32: 2rem;
13
+ --text-icon-36: 2.25rem;
14
+ --text-icon-38: 2.375rem;
15
+ --text-icon-40: 2.5rem;
16
+ --text-icon-48: 3rem;
17
+ --text-icon-50: 3.125rem;
18
+ }
19
+
1
20
  /*
2
21
  Default grade for Icon's `grad="auto"`. Light icons on a dark background look heavier than dark
3
22
  ones on a light background (visual bleed), so M3 drops the grade to -25 on dark UI.
package/dist/styles/rounding.css CHANGED
@@ -1,10 +1,14 @@
1
+ /* M3 shape scale: https://m3.material.io/styles/shape/corner-radius-scale */
1
2
  @theme {
2
3
  --radius-none: 0;
3
4
  --radius-xs: 4px;
4
5
  --radius-sm: 8px;
5
6
  --radius-md: 12px;
6
7
  --radius-lg: 16px;
8
+ --radius-lg-increased: 20px;
7
9
  --radius-xl: 28px;
10
+ --radius-xl-increased: 32px;
11
+ --radius-xxl: 48px;
8
12
  --radius-full: calc(infinity * 1px);
9
13
 
10
14
  --md-util-optical-centering-coefficient: 0.11;
package/dist/utils/icon/Icon.svelte CHANGED
@@ -24,11 +24,11 @@ With `transition`, a change of `name` crossfades on a spring instead of swapping
24
24
  */
25
25
  const sizeMap: Record<IconSize, { cls: string; opsz: number }> = {
26
26
  inline: { cls: 'size-[1em] align-[-0.115em]', opsz: 20 },
27
- xs: { cls: 'size-spacing-200 text-[16px]', opsz: 20 },
28
- sm: { cls: 'size-spacing-250 text-[20px]', opsz: 20 },
29
- md: { cls: 'size-spacing-300 text-[24px]', opsz: 24 },
30
- lg: { cls: 'size-spacing-500 text-[40px]', opsz: 40 },
31
- xl: { cls: 'size-spacing-600 text-[48px]', opsz: 48 }
27
+ xs: { cls: 'size-(--text-icon-16) text-icon-16', opsz: 20 },
28
+ sm: { cls: 'size-(--text-icon-20) text-icon-20', opsz: 20 },
29
+ md: { cls: 'size-(--text-icon-24) text-icon-24', opsz: 24 },
30
+ lg: { cls: 'size-(--text-icon-40) text-icon-40', opsz: 40 },
31
+ xl: { cls: 'size-(--text-icon-48) text-icon-48', opsz: 48 }
32
32
  };
33
33
 
34
34
  const {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noxlovette/material",
3
- "version": "0.9.3",
3
+ "version": "0.9.4",
4
4
  "type": "module",
5
5
  "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
6
6
  "keywords": [