opui-css 2.4.0 → 3.0.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 (80) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +23 -7
  3. package/dist/op.css +1 -14
  4. package/dist/{op+ui.css → theme-one.css} +4378 -4155
  5. package/dist/{ui.css → theme-two.css} +4097 -4100
  6. package/package.json +10 -8
  7. package/src/core/normalize.css +196 -196
  8. package/src/core/utils.css +60 -60
  9. package/src/open-props.css +1 -1
  10. package/src/{components → themes/theme-one/components}/accordion.css +172 -172
  11. package/src/{components → themes/theme-one/components}/alert.css +85 -85
  12. package/src/{components → themes/theme-one/components}/avatar.css +68 -68
  13. package/src/{components → themes/theme-one/components}/badge.css +101 -101
  14. package/src/{components → themes/theme-one/components}/button-group.css +69 -69
  15. package/src/{components → themes/theme-one/components}/button.css +267 -267
  16. package/src/{components → themes/theme-one/components}/card.css +82 -82
  17. package/src/{components → themes/theme-one/components}/checkbox-radio.css +123 -123
  18. package/src/{components → themes/theme-one/components}/chip.css +135 -135
  19. package/src/{components → themes/theme-one/components}/definition-list.css +65 -65
  20. package/src/{components → themes/theme-one/components}/dialog.css +59 -59
  21. package/src/{components → themes/theme-one/components}/divider.css +7 -7
  22. package/src/{components → themes/theme-one/components}/field-group.css +83 -83
  23. package/src/{components → themes/theme-one/components}/field.css +494 -494
  24. package/src/{components → themes/theme-one/components}/icon-button.css +40 -40
  25. package/src/{components → themes/theme-one/components}/link.css +21 -21
  26. package/src/{components → themes/theme-one/components}/list.css +317 -317
  27. package/src/{components → themes/theme-one/components}/progress.css +83 -83
  28. package/src/{components → themes/theme-one/components}/range.css +121 -121
  29. package/src/{components → themes/theme-one/components}/rich-text.css +210 -210
  30. package/src/{components → themes/theme-one/components}/select.css +163 -163
  31. package/src/{components → themes/theme-one/components}/snackbar.css +148 -148
  32. package/src/{components → themes/theme-one/components}/spinner.css +38 -38
  33. package/src/{components → themes/theme-one/components}/switch.css +189 -189
  34. package/src/{components → themes/theme-one/components}/tab-buttons.css +120 -120
  35. package/src/themes/theme-one/components/table.css +100 -0
  36. package/src/{components → themes/theme-one/components}/text-field.css +57 -57
  37. package/src/{components → themes/theme-one/components}/textarea.css +25 -25
  38. package/src/{components → themes/theme-one/components}/toggle-button-group.css +135 -139
  39. package/src/{components → themes/theme-one/components}/tooltip.css +94 -94
  40. package/src/{components → themes/theme-one/components}/typography.css +209 -209
  41. package/src/themes/theme-one/components.css +37 -0
  42. package/src/themes/theme-one/imports.css +16 -0
  43. package/src/{theme.css → themes/theme-one/theme.css} +163 -163
  44. package/src/themes/theme-two/components/accordion.css +172 -0
  45. package/src/themes/theme-two/components/alert.css +85 -0
  46. package/src/themes/theme-two/components/avatar.css +68 -0
  47. package/src/themes/theme-two/components/badge.css +101 -0
  48. package/src/themes/theme-two/components/button-group.css +50 -0
  49. package/src/themes/theme-two/components/button.css +217 -0
  50. package/src/themes/theme-two/components/card.css +82 -0
  51. package/src/themes/theme-two/components/checkbox-radio.css +123 -0
  52. package/src/themes/theme-two/components/chip.css +135 -0
  53. package/src/themes/theme-two/components/definition-list.css +65 -0
  54. package/src/themes/theme-two/components/dialog.css +59 -0
  55. package/src/themes/theme-two/components/divider.css +7 -0
  56. package/src/themes/theme-two/components/field-group.css +83 -0
  57. package/src/themes/theme-two/components/field.css +281 -0
  58. package/src/themes/theme-two/components/icon-button.css +40 -0
  59. package/src/themes/theme-two/components/link.css +21 -0
  60. package/src/themes/theme-two/components/list.css +317 -0
  61. package/src/themes/theme-two/components/progress.css +83 -0
  62. package/src/themes/theme-two/components/range.css +121 -0
  63. package/src/themes/theme-two/components/rich-text.css +210 -0
  64. package/src/themes/theme-two/components/select.css +162 -0
  65. package/src/themes/theme-two/components/snackbar.css +148 -0
  66. package/src/themes/theme-two/components/spinner.css +38 -0
  67. package/src/themes/theme-two/components/switch.css +189 -0
  68. package/src/themes/theme-two/components/tab-buttons.css +120 -0
  69. package/src/{components → themes/theme-two/components}/table.css +107 -107
  70. package/src/themes/theme-two/components/text-field.css +57 -0
  71. package/src/themes/theme-two/components/textarea.css +25 -0
  72. package/src/themes/theme-two/components/toggle-button-group.css +135 -0
  73. package/src/themes/theme-two/components/tooltip.css +94 -0
  74. package/src/themes/theme-two/components/typography.css +209 -0
  75. package/src/themes/theme-two/components.css +37 -0
  76. package/src/themes/theme-two/imports.css +16 -0
  77. package/src/themes/theme-two/theme.css +158 -0
  78. package/src/core/components.css +0 -37
  79. package/src/main.css +0 -13
  80. package/src/opui.css +0 -10
package/src/{components → themes/theme-one/components}/icon-button.css RENAMED
@@ -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 → themes/theme-one/components}/link.css RENAMED
@@ -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
+ }