opui-css 2.0.0 → 2.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 (43) hide show
  1. package/LICENSE +21 -21
  2. package/dist/op+ui.css +4182 -4181
  3. package/dist/op.css +85 -0
  4. package/dist/ui.css +4261 -4261
  5. package/package.json +3 -3
  6. package/src/components/accordion.css +172 -172
  7. package/src/components/alert.css +85 -85
  8. package/src/components/avatar.css +68 -68
  9. package/src/components/badge.css +101 -101
  10. package/src/components/button-group.css +69 -69
  11. package/src/components/button.css +267 -267
  12. package/src/components/card.css +82 -82
  13. package/src/components/checkbox-radio.css +123 -123
  14. package/src/components/chip.css +135 -135
  15. package/src/components/definition-list.css +65 -65
  16. package/src/components/dialog.css +59 -59
  17. package/src/components/divider.css +7 -7
  18. package/src/components/field-group.css +83 -83
  19. package/src/components/field.css +494 -494
  20. package/src/components/icon-button.css +40 -40
  21. package/src/components/link.css +21 -21
  22. package/src/components/list.css +317 -317
  23. package/src/components/progress.css +83 -83
  24. package/src/components/range.css +121 -121
  25. package/src/components/rich-text.css +210 -210
  26. package/src/components/select.css +163 -163
  27. package/src/components/snackbar.css +148 -148
  28. package/src/components/spinner.css +38 -38
  29. package/src/components/switch.css +189 -189
  30. package/src/components/tab-buttons.css +120 -120
  31. package/src/components/table.css +107 -107
  32. package/src/components/text-field.css +57 -57
  33. package/src/components/textarea.css +25 -25
  34. package/src/components/toggle-button-group.css +139 -139
  35. package/src/components/tooltip.css +94 -94
  36. package/src/components/typography.css +209 -209
  37. package/src/core/components.css +37 -37
  38. package/src/core/normalize.css +194 -194
  39. package/src/core/theme.css +160 -160
  40. package/src/core/utils.css +60 -60
  41. package/src/main.css +5 -13
  42. package/src/open-props.css +10 -0
  43. package/src/opui.css +13 -13
package/src/components/icon-button.css CHANGED
@@ -1,40 +1,40 @@
1
- @layer components.root {
2
- :where(.icon-button) {
3
- --_text-color: inherit;
4
-
5
- align-items: center;
6
- aspect-ratio: 1;
7
- background-color: transparent;
8
- border: 0;
9
- border-radius: var(--radius-round);
10
- display: inline-flex;
11
- inline-size: var(--size-6);
12
- justify-content: center;
13
- padding: 0;
14
- transform-style: preserve-3d;
15
-
16
- &:where([disabled]) {
17
- color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
18
- cursor: not-allowed;
19
- opacity: 0.64;
20
- }
21
-
22
- svg {
23
- max-inline-size: var(--size-5);
24
- pointer-events: none;
25
- }
26
-
27
- /* Ripple effect, utils.css */
28
- &::before {
29
- --highlight-size: 130%;
30
- }
31
-
32
- /* Size */
33
- &.small {
34
- inline-size: var(--size-4);
35
- svg {
36
- max-inline-size: var(--size-4);
37
- }
38
- }
39
- }
40
- }
1
+ @layer components.root {
2
+ :where(.icon-button) {
3
+ --_text-color: inherit;
4
+
5
+ align-items: center;
6
+ aspect-ratio: 1;
7
+ background-color: transparent;
8
+ border: 0;
9
+ border-radius: var(--radius-round);
10
+ display: inline-flex;
11
+ inline-size: var(--size-6);
12
+ justify-content: center;
13
+ padding: 0;
14
+ transform-style: preserve-3d;
15
+
16
+ &:where([disabled]) {
17
+ color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
18
+ cursor: not-allowed;
19
+ opacity: 0.64;
20
+ }
21
+
22
+ svg {
23
+ max-inline-size: var(--size-5);
24
+ pointer-events: none;
25
+ }
26
+
27
+ /* Ripple effect, utils.css */
28
+ &::before {
29
+ --highlight-size: 130%;
30
+ }
31
+
32
+ /* Size */
33
+ &.small {
34
+ inline-size: var(--size-4);
35
+ svg {
36
+ max-inline-size: var(--size-4);
37
+ }
38
+ }
39
+ }
40
+ }
package/src/components/link.css CHANGED
@@ -1,21 +1,21 @@
1
- @layer components.root {
2
- :where(.link) {
3
- color: var(--primary);
4
- cursor: pointer;
5
- font-weight: 700;
6
- text-decoration: underline;
7
- text-decoration-color: var(--primary);
8
- text-underline-offset: 2px;
9
-
10
- &[href] {
11
- &:hover,
12
- &:focus-visible {
13
- color: var(--primary-light);
14
- }
15
- }
16
-
17
- @supports (-moz-appearance: none) {
18
- text-underline-offset: 2px;
19
- }
20
- }
21
- }
1
+ @layer components.root {
2
+ :where(.link) {
3
+ color: var(--primary);
4
+ cursor: pointer;
5
+ font-weight: 700;
6
+ text-decoration: underline;
7
+ text-decoration-color: var(--primary);
8
+ text-underline-offset: 2px;
9
+
10
+ &[href] {
11
+ &:hover,
12
+ &:focus-visible {
13
+ color: var(--primary-light);
14
+ }
15
+ }
16
+
17
+ @supports (-moz-appearance: none) {
18
+ text-underline-offset: 2px;
19
+ }
20
+ }
21
+ }