opui-css 5.0.1 → 5.1.0

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 (58) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/MIGRATING.md +11 -0
  3. package/README.md +1 -1
  4. package/components/Accordion/Accordion.astro +12 -2
  5. package/components/Anchor/Anchor.astro +5 -1
  6. package/components/ButtonGroup/ButtonGroup.astro +8 -1
  7. package/components/Card/Card.astro +3 -1
  8. package/components/Checkbox/Checkbox.astro +3 -3
  9. package/components/ClassicSelect/ClassicSelect.astro +3 -3
  10. package/components/Dialog/Dialog.astro +3 -1
  11. package/components/Radio/Radio.astro +3 -3
  12. package/components/Select/Select.astro +3 -3
  13. package/components/Switch/Switch.astro +3 -3
  14. package/components/TextField/TextField.astro +3 -3
  15. package/components/Textarea/Textarea.astro +3 -3
  16. package/core/normalize.css +16 -10
  17. package/core/palette.css +105 -54
  18. package/core/utils.css +2 -2
  19. package/css/components/accordion.css +7 -7
  20. package/css/components/anchor.css +23 -23
  21. package/css/components/badge.css +4 -4
  22. package/css/components/button-group.css +28 -14
  23. package/css/components/button.css +29 -17
  24. package/css/components/callout.css +95 -92
  25. package/css/components/card.css +6 -8
  26. package/css/components/checkbox.css +209 -203
  27. package/css/components/chip.css +11 -6
  28. package/css/components/description-list.css +2 -1
  29. package/css/components/dialog.css +2 -1
  30. package/css/components/drawer.css +167 -167
  31. package/css/components/form.css +8 -7
  32. package/css/components/icon-button.css +32 -13
  33. package/css/components/list.css +10 -12
  34. package/css/components/progress.css +4 -3
  35. package/css/components/radio.css +168 -170
  36. package/css/components/range.css +14 -9
  37. package/css/components/select.css +9 -6
  38. package/css/components/spinner.css +4 -3
  39. package/css/components/switch.css +8 -5
  40. package/css/components/table.css +4 -10
  41. package/css/components/tabs.css +17 -16
  42. package/css/components/text-field.css +9 -10
  43. package/css/components/text-input.css +8 -4
  44. package/css/components/textarea.css +3 -1
  45. package/css/components/toast.css +156 -157
  46. package/css/components/toggle-button.css +76 -72
  47. package/css/components/tooltip.css +59 -56
  48. package/css/components/typography.css +31 -31
  49. package/css/imports.css +5 -4
  50. package/css/theme.css +4 -3
  51. package/dist/op.css +0 -62
  52. package/dist/op.css.map +1 -1
  53. package/dist/opui.components.css +1259 -1184
  54. package/dist/opui.components.css.map +1 -1
  55. package/dist/opui.css +1555 -1425
  56. package/dist/opui.css.map +1 -1
  57. package/open-props.css +0 -1
  58. package/package.json +1 -1
package/css/components/anchor.css CHANGED
@@ -1,27 +1,27 @@
1
1
  @layer components.root {
2
- :where(.ui-anchor) {
3
- anchor-name: --anchor;
4
- anchor-scope: --anchor;
5
- display: inline-block;
6
- inline-size: fit-content;
2
+ :where(.ui-anchor) {
3
+ anchor-name: --anchor;
4
+ anchor-scope: --anchor;
5
+ display: inline-block;
6
+ inline-size: fit-content;
7
7
 
8
- /* Always-visible */
9
- &>.ui-anchor-floating:not([popover]) {
10
- block-size: max-content;
11
- inline-size: max-content;
12
- position: absolute;
13
- position-anchor: --anchor;
14
- position-area: var(--anchor-position-area, start end);
15
- translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
16
- }
8
+ /* Always-visible */
9
+ & > .ui-anchor-floating:not([popover]) {
10
+ block-size: max-content;
11
+ inline-size: max-content;
12
+ position: absolute;
13
+ position-anchor: --anchor;
14
+ position-area: var(--anchor-position-area, start end);
15
+ translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
16
+ }
17
17
 
18
- /* Hover-triggered */
19
- &>.ui-anchor-floating[popover] {
20
- inset: unset;
21
- margin: 0;
22
- position: absolute;
23
- position-area: var(--anchor-position-area, start end);
24
- translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
25
- }
26
- }
18
+ /* Hover-triggered */
19
+ & > .ui-anchor-floating[popover] {
20
+ inset: unset;
21
+ margin: 0;
22
+ position: absolute;
23
+ position-area: var(--anchor-position-area, start end);
24
+ translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
25
+ }
26
+ }
27
27
  }
package/css/components/badge.css CHANGED
@@ -15,14 +15,14 @@
15
15
 
16
16
  /* Floating wrapper: traditional inset-based positioning so this works
17
17
  in browsers without position-area support (Firefox, older Safari). */
18
- &>.ui-anchor-floating:not([popover]) {
18
+ & > .ui-anchor-floating:not([popover]) {
19
19
  inset: var(--_badge-inset);
20
20
  position-anchor: auto;
21
21
  position-area: none;
22
22
  }
23
23
 
24
24
  /* Indicator */
25
- &>.ui-anchor-floating>.ui-badge-indicator {
25
+ & > .ui-anchor-floating > .ui-badge-indicator {
26
26
  background-color: var(--_bg-color);
27
27
  block-size: var(--_size);
28
28
  border: 2px solid var(--_border-color);
@@ -91,7 +91,7 @@
91
91
  --_anchor-ty: var(--_dot-size);
92
92
  }
93
93
 
94
- &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
94
+ &.ui-dot > .ui-anchor-floating > .ui-badge-indicator {
95
95
  block-size: var(--_dot-size);
96
96
  inline-size: var(--_dot-size);
97
97
  min-inline-size: var(--_dot-size);
@@ -99,7 +99,7 @@
99
99
  }
100
100
 
101
101
  /* Visibility */
102
- &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
102
+ &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
103
103
  opacity: 0;
104
104
  pointer-events: none;
105
105
  }
package/css/components/button-group.css CHANGED
@@ -11,8 +11,10 @@
11
11
  border-radius: 0;
12
12
 
13
13
  /* button.css > --_accent-tonal */
14
- --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
15
- oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
14
+ --_divider-color: light-dark(
15
+ oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
16
+ oklch(from var(--_accent-tonal) calc(l + 0.1) c h)
17
+ );
16
18
 
17
19
  &.ui-outlined {
18
20
  --_divider-color: var(--_border-color);
@@ -29,16 +31,19 @@
29
31
  /* Color inheritance from Button Group — shared interaction model.
30
32
  The .critical scope class in theme.css redirects --palette-source so
31
33
  --color-6 below becomes a tint of the active color. */
32
- :where(.ui-button-group.ui-critical,
33
- .ui-button-group.ui-primary) & {
34
+ :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
34
35
  --_color-contrast: var(--gray-1);
35
36
  --_color-tonal: var(--color-6);
36
37
  --_accent-tonal-contrast: var(--text-primary-contrast);
37
38
  --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
38
39
  --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
39
40
  --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
40
- --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
41
- --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
41
+ --_filled-active-bg-color: oklch(
42
+ from var(--_accent) calc(l - 0.15) c h
43
+ );
44
+ --_outlined-active-bg-color: oklch(
45
+ from var(--_accent) calc(l - 0.1) c h
46
+ );
42
47
  }
43
48
 
44
49
  :where(.ui-button-group.ui-critical) & {
@@ -101,10 +106,11 @@
101
106
  --_text-color: var(--_accent-contrast);
102
107
  --_divider-color: currentColor;
103
108
 
104
- :where(.ui-button-group.ui-critical,
105
- .ui-button-group.ui-primary) & {
106
- --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
107
- oklch(from var(--_accent) calc(l + 0.1) c h));
109
+ :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
110
+ --_divider-color: light-dark(
111
+ oklch(from var(--_accent) calc(l - 0.1) c h),
112
+ oklch(from var(--_accent) calc(l + 0.1) c h)
113
+ );
108
114
  }
109
115
 
110
116
  &:where(:not([disabled])) {
@@ -132,13 +138,17 @@
132
138
  }
133
139
 
134
140
  /* Siblings */
135
- &+& {
141
+ & + & {
136
142
  border-inline-start-color: var(--_divider-color);
137
143
  border-inline-width: 1px;
138
144
  margin-inline-start: -1px;
139
145
 
140
146
  &[disabled] {
141
- border-inline-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
147
+ border-inline-start-color: color-mix(
148
+ in oklch,
149
+ var(--_divider-color) 40%,
150
+ transparent
151
+ );
142
152
  }
143
153
  }
144
154
  }
@@ -165,12 +175,16 @@
165
175
  border-end-end-radius: var(--_border-radius);
166
176
  }
167
177
 
168
- &+& {
178
+ & + & {
169
179
  border-block-start: 1px solid var(--_divider-color);
170
180
  margin-block-start: -1px;
171
181
 
172
182
  &[disabled] {
173
- border-block-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
183
+ border-block-start-color: color-mix(
184
+ in oklch,
185
+ var(--_divider-color) 40%,
186
+ transparent
187
+ );
174
188
  }
175
189
  }
176
190
  }
package/css/components/button.css CHANGED
@@ -9,15 +9,23 @@
9
9
  --_accent-tonal: var(--_color-tonal);
10
10
  --_accent-tonal-contrast: var(--_color);
11
11
 
12
- --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
13
- oklch(from var(--_accent) l 0.01 h / 20%));
14
- --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
15
- oklch(from var(--_accent) l 0.06 h / 30%));
16
-
17
- --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
18
- oklch(from var(--_accent) calc(l - 0.1) c h));
19
- --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
20
- oklch(from var(--_accent) calc(l - 0.15) c h));
12
+ --_default-hover-bg-color: light-dark(
13
+ oklch(from var(--_accent) l 0.01 h / 10%),
14
+ oklch(from var(--_accent) l 0.01 h / 20%)
15
+ );
16
+ --_default-active-bg-color: light-dark(
17
+ oklch(from var(--_accent) l 0.06 h / 20%),
18
+ oklch(from var(--_accent) l 0.06 h / 30%)
19
+ );
20
+
21
+ --_filled-hover-bg-color: light-dark(
22
+ oklch(from var(--_accent) calc(l + 0.2) c h),
23
+ oklch(from var(--_accent) calc(l - 0.1) c h)
24
+ );
25
+ --_filled-active-bg-color: light-dark(
26
+ oklch(from var(--_accent) calc(l + 0.3) c h),
27
+ oklch(from var(--_accent) calc(l - 0.15) c h)
28
+ );
21
29
  --_outlined-active-bg-color: var(--_filled-active-bg-color);
22
30
 
23
31
  --_bg-color: transparent;
@@ -45,8 +53,11 @@
45
53
  padding-inline: 1.5ex;
46
54
  text-align: center;
47
55
  text-decoration: none;
48
- transition: background-color .1s ease, color .1s ease,
49
- border-color .1s ease, box-shadow .1s ease;
56
+ transition:
57
+ background-color 0.1s ease,
58
+ color 0.1s ease,
59
+ border-color 0.1s ease,
60
+ box-shadow 0.1s ease;
50
61
  user-select: none;
51
62
 
52
63
  /* Colors — shared interaction model for critical and primary.
@@ -79,9 +90,11 @@
79
90
 
80
91
  /* Disabled */
81
92
  &:where([disabled]) {
82
- --_text-color: color-mix(in oklch,
83
- var(--text-muted) 50%,
84
- var(--surface-default));
93
+ --_text-color: color-mix(
94
+ in oklch,
95
+ var(--text-muted) 50%,
96
+ var(--surface-default)
97
+ );
85
98
 
86
99
  cursor: not-allowed;
87
100
  opacity: 0.64;
@@ -99,7 +112,6 @@
99
112
  }
100
113
  }
101
114
 
102
-
103
115
  /* Icons / Keyboard */
104
116
  &:where(:has(svg), &.ui-icon-only) {
105
117
  gap: 1ex;
@@ -126,14 +138,14 @@
126
138
  --_min-height: var(--button-size-x-small);
127
139
  --_font-size: var(--font-size-0);
128
140
  padding-block: 0;
129
- padding-inline: .5ex;
141
+ padding-inline: 0.5ex;
130
142
  }
131
143
 
132
144
  &.ui-small {
133
145
  --_min-height: var(--button-size-small);
134
146
  --_font-size: var(--font-size-05);
135
147
  padding-block: 0;
136
- padding-inline: .75ex;
148
+ padding-inline: 0.75ex;
137
149
  }
138
150
 
139
151
  &.ui-large {
package/css/components/callout.css CHANGED
@@ -1,109 +1,112 @@
1
1
  @layer components.root {
2
- :where(.ui-callout) {
3
- --_bg-color: var(--surface-tonal);
4
- --_border-color: var(--surface-tonal);
5
- --_color: var(--text-primary);
6
- --_icon-color: currentColor;
7
- --_link-hover-color: var(--primary);
8
- --_padding: var(--size-3);
9
- --_border-radius: var(--border-radius);
10
- --_gap: var(--size-3);
11
- --_content-gap: var(--size-2);
12
- --_font-size: var(--font-size-05);
13
- --_title-font-size: var(--font-size-1);
14
- --_icon-size: var(--size-4);
15
- --_surface-bg: var(--surface-default);
2
+ :where(.ui-callout) {
3
+ --_bg-color: var(--surface-tonal);
4
+ --_border-color: var(--surface-tonal);
5
+ --_color: var(--text-primary);
6
+ --_icon-color: currentColor;
7
+ --_link-hover-color: var(--primary);
8
+ --_padding: var(--size-3);
9
+ --_border-radius: var(--border-radius);
10
+ --_gap: var(--size-3);
11
+ --_content-gap: var(--size-2);
12
+ --_font-size: var(--font-size-05);
13
+ --_title-font-size: var(--font-size-1);
14
+ --_icon-size: var(--size-4);
15
+ --_surface-bg: var(--surface-default);
16
16
 
17
- --_outlined-bg-color: var(--surface-default);
18
- --_outlined-border-color: var(--border-color);
19
- --_outlined-color: var(--text-primary);
20
- --_outlined-icon-color: currentColor;
17
+ --_outlined-bg-color: var(--surface-default);
18
+ --_outlined-border-color: var(--border-color);
19
+ --_outlined-color: var(--text-primary);
20
+ --_outlined-icon-color: currentColor;
21
21
 
22
- background-color: var(--_bg-color, var(--_surface-bg));
23
- border: 1px solid var(--_border-color, var(--border-color));
24
- border-radius: var(--_border-radius);
25
- color: var(--_color);
26
- isolation: isolate;
27
- padding: var(--_padding);
28
- position: relative;
22
+ background-color: var(--_bg-color, var(--_surface-bg));
23
+ border: 1px solid var(--_border-color, var(--border-color));
24
+ border-radius: var(--_border-radius);
25
+ color: var(--_color);
26
+ isolation: isolate;
27
+ padding: var(--_padding);
28
+ position: relative;
29
29
 
30
- &.ui-critical,
31
- &.ui-info,
32
- &.ui-neutral,
33
- &.ui-success,
34
- &.ui-warning {
35
- --_bg-color: light-dark(oklch(from var(--color-2) l c h / 20%), oklch(from var(--color-6) l c h / 5%));
36
- --_border-color: light-dark(var(--color-5), var(--color-11));
37
- --_color: light-dark(var(--color-16), var(--color-1));
38
- --_icon-color: var(--color-9);
30
+ &.ui-critical,
31
+ &.ui-info,
32
+ &.ui-neutral,
33
+ &.ui-success,
34
+ &.ui-warning {
35
+ --_bg-color: light-dark(
36
+ oklch(from var(--color-2) l c h / 20%),
37
+ oklch(from var(--color-6) l c h / 5%)
38
+ );
39
+ --_border-color: light-dark(var(--color-5), var(--color-11));
40
+ --_color: light-dark(var(--color-16), var(--color-1));
41
+ --_icon-color: var(--color-9);
39
42
 
40
- --_outlined-bg-color: var(--surface-default);
41
- --_outlined-border-color: var(--color-9);
42
- --_outlined-color: light-dark(var(--color-15), var(--color-1));
43
- --_outlined-icon-color: var(--color-9);
44
- }
43
+ --_outlined-bg-color: var(--surface-default);
44
+ --_outlined-border-color: var(--color-9);
45
+ --_outlined-color: light-dark(var(--color-15), var(--color-1));
46
+ --_outlined-icon-color: var(--color-9);
47
+ }
45
48
 
46
- &.ui-outlined {
47
- --_bg-color: var(--_outlined-bg-color);
48
- --_border-color: var(--_outlined-border-color);
49
- --_color: var(--_outlined-color);
50
- --_icon-color: var(--_outlined-icon-color);
51
- }
49
+ &.ui-outlined {
50
+ --_bg-color: var(--_outlined-bg-color);
51
+ --_border-color: var(--_outlined-border-color);
52
+ --_color: var(--_outlined-color);
53
+ --_icon-color: var(--_outlined-icon-color);
54
+ }
52
55
 
53
- &::before {
54
- background-color: var(--_bg-color);
55
- border-radius: inherit;
56
- content: "";
57
- inset: 0;
58
- pointer-events: none;
59
- position: absolute;
60
- z-index: -1;
61
- }
56
+ &::before {
57
+ background-color: var(--_bg-color);
58
+ border-radius: inherit;
59
+ content: "";
60
+ inset: 0;
61
+ pointer-events: none;
62
+ position: absolute;
63
+ z-index: -1;
64
+ }
62
65
 
63
- &>.ui-content {
64
- display: grid;
65
- font-size: var(--_font-size);
66
- gap: var(--_content-gap);
66
+ & > .ui-content {
67
+ display: grid;
68
+ font-size: var(--_font-size);
69
+ gap: var(--_content-gap);
67
70
 
68
- h1,
69
- h2,
70
- h3,
71
- h4,
72
- h5,
73
- h6 {
74
- color: inherit;
75
- font-size: var(--_title-font-size);
76
- font-weight: 600;
71
+ h1,
72
+ h2,
73
+ h3,
74
+ h4,
75
+ h5,
76
+ h6 {
77
+ color: inherit;
78
+ font-size: var(--_title-font-size);
79
+ font-weight: 600;
77
80
 
78
- * {
79
- font-size: inherit;
80
- }
81
- }
82
- }
81
+ * {
82
+ font-size: inherit;
83
+ }
84
+ }
85
+ }
83
86
 
84
- /* Links
87
+ /* Links
85
88
  * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
86
89
  */
87
- &:not(.ui-outlined) {
88
- a[href] {
89
- color: inherit;
90
+ &:not(.ui-outlined) {
91
+ a[href] {
92
+ color: inherit;
90
93
 
91
- &:hover {
92
- color: var(--_link-hover-color);
93
- }
94
- }
95
- }
94
+ &:hover {
95
+ color: var(--_link-hover-color);
96
+ }
97
+ }
98
+ }
96
99
 
97
- /* Icon */
98
- &:has(svg) {
99
- display: grid;
100
- gap: var(--_gap);
101
- grid-template-columns: var(--_icon-size) 1fr;
100
+ /* Icon */
101
+ &:has(svg) {
102
+ display: grid;
103
+ gap: var(--_gap);
104
+ grid-template-columns: var(--_icon-size) 1fr;
102
105
 
103
- svg {
104
- margin-block-start: 0.15rem;
105
- stroke: var(--_icon-color);
106
- }
107
- }
108
- }
106
+ svg {
107
+ margin-block-start: 0.15rem;
108
+ stroke: var(--_icon-color);
109
+ }
110
+ }
111
+ }
109
112
  }
package/css/components/card.css CHANGED
@@ -54,7 +54,7 @@
54
54
  --_card-border-width: 1px;
55
55
  }
56
56
 
57
- &> :where(hgroup, .ui-content) {
57
+ & > :where(hgroup, .ui-content) {
58
58
  padding-inline: var(--size-3);
59
59
 
60
60
  &:last-child {
@@ -63,11 +63,11 @@
63
63
  }
64
64
 
65
65
  /* Header */
66
- &>hgroup {
66
+ & > hgroup {
67
67
  padding-block: var(--size-3) 0;
68
68
 
69
69
  /* Top paragraph */
70
- &>p:first-of-type:first-child {
70
+ & > p:first-of-type:first-child {
71
71
  line-height: 1.3;
72
72
  }
73
73
 
@@ -76,18 +76,18 @@
76
76
  }
77
77
 
78
78
  /* Bottom paragraph */
79
- &>p:last-of-type:last-child:not(:first-child) {
79
+ & > p:last-of-type:last-child:not(:first-child) {
80
80
  font-size: var(--font-size-1);
81
81
  }
82
82
  }
83
83
 
84
84
  /* Content */
85
- &>.ui-content:where(:only-child, :first-child) {
85
+ & > .ui-content:where(:only-child, :first-child) {
86
86
  padding-block: var(--size-3) var(--size-4);
87
87
  }
88
88
 
89
89
  /* Actions */
90
- &>.ui-actions {
90
+ & > .ui-actions {
91
91
  display: flex;
92
92
  gap: var(--size-2);
93
93
  margin-block: var(--size-2) 0;
@@ -111,7 +111,5 @@
111
111
  }
112
112
  }
113
113
  }
114
-
115
-
116
114
  }
117
115
  }