opui-css 5.0.1 → 5.1.1

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 +45 -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 +313 -58
  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 +14 -20
  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 +1719 -1393
  56. package/dist/opui.css.map +1 -1
  57. package/open-props.css +0 -1
  58. package/package.json +1 -1
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
  }