opui-css 2.3.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 (82) hide show
  1. package/LICENSE +21 -21
  2. package/dist/op.css +1 -14
  3. package/dist/theme-one.css +4378 -4256
  4. package/dist/theme-two.css +4097 -3975
  5. package/package.json +8 -8
  6. package/src/core/normalize.css +196 -196
  7. package/src/core/utils.css +60 -60
  8. package/src/open-props.css +1 -1
  9. package/src/themes/theme-one/components/accordion.css +172 -172
  10. package/src/themes/theme-one/components/alert.css +85 -85
  11. package/src/themes/theme-one/components/avatar.css +68 -68
  12. package/src/themes/theme-one/components/badge.css +101 -101
  13. package/src/themes/theme-one/components/button-group.css +69 -69
  14. package/src/themes/theme-one/components/button.css +267 -267
  15. package/src/themes/theme-one/components/card.css +82 -82
  16. package/src/themes/theme-one/components/checkbox-radio.css +123 -123
  17. package/src/themes/theme-one/components/chip.css +135 -135
  18. package/src/themes/theme-one/components/definition-list.css +65 -65
  19. package/src/themes/theme-one/components/dialog.css +59 -59
  20. package/src/themes/theme-one/components/divider.css +7 -7
  21. package/src/themes/theme-one/components/field-group.css +83 -83
  22. package/src/themes/theme-one/components/field.css +494 -494
  23. package/src/themes/theme-one/components/icon-button.css +40 -40
  24. package/src/themes/theme-one/components/link.css +21 -21
  25. package/src/themes/theme-one/components/list.css +317 -317
  26. package/src/themes/theme-one/components/progress.css +83 -83
  27. package/src/themes/theme-one/components/range.css +121 -121
  28. package/src/themes/theme-one/components/rich-text.css +210 -210
  29. package/src/themes/theme-one/components/select.css +163 -163
  30. package/src/themes/theme-one/components/snackbar.css +148 -148
  31. package/src/themes/theme-one/components/spinner.css +38 -38
  32. package/src/themes/theme-one/components/switch.css +189 -189
  33. package/src/themes/theme-one/components/tab-buttons.css +120 -120
  34. package/src/themes/theme-one/components/table.css +100 -100
  35. package/src/themes/theme-one/components/text-field.css +57 -57
  36. package/src/themes/theme-one/components/textarea.css +25 -25
  37. package/src/themes/theme-one/components/toggle-button-group.css +135 -135
  38. package/src/themes/theme-one/components/tooltip.css +94 -94
  39. package/src/themes/theme-one/components/typography.css +209 -209
  40. package/src/themes/theme-one/components.css +37 -37
  41. package/src/themes/theme-one/imports.css +16 -0
  42. package/src/themes/theme-one/theme.css +163 -13
  43. package/src/themes/theme-two/components/accordion.css +172 -172
  44. package/src/themes/theme-two/components/alert.css +85 -85
  45. package/src/themes/theme-two/components/avatar.css +68 -68
  46. package/src/themes/theme-two/components/badge.css +101 -101
  47. package/src/themes/theme-two/components/button-group.css +50 -50
  48. package/src/themes/theme-two/components/button.css +217 -217
  49. package/src/themes/theme-two/components/card.css +82 -82
  50. package/src/themes/theme-two/components/checkbox-radio.css +123 -123
  51. package/src/themes/theme-two/components/chip.css +135 -135
  52. package/src/themes/theme-two/components/definition-list.css +65 -65
  53. package/src/themes/theme-two/components/dialog.css +59 -59
  54. package/src/themes/theme-two/components/divider.css +7 -7
  55. package/src/themes/theme-two/components/field-group.css +83 -83
  56. package/src/themes/theme-two/components/field.css +281 -281
  57. package/src/themes/theme-two/components/icon-button.css +40 -40
  58. package/src/themes/theme-two/components/link.css +21 -21
  59. package/src/themes/theme-two/components/list.css +317 -317
  60. package/src/themes/theme-two/components/progress.css +83 -83
  61. package/src/themes/theme-two/components/range.css +121 -121
  62. package/src/themes/theme-two/components/rich-text.css +210 -210
  63. package/src/themes/theme-two/components/select.css +162 -162
  64. package/src/themes/theme-two/components/snackbar.css +148 -148
  65. package/src/themes/theme-two/components/spinner.css +38 -38
  66. package/src/themes/theme-two/components/switch.css +189 -189
  67. package/src/themes/theme-two/components/tab-buttons.css +120 -120
  68. package/src/themes/theme-two/components/table.css +107 -107
  69. package/src/themes/theme-two/components/text-field.css +57 -57
  70. package/src/themes/theme-two/components/textarea.css +25 -25
  71. package/src/themes/theme-two/components/toggle-button-group.css +135 -135
  72. package/src/themes/theme-two/components/tooltip.css +94 -94
  73. package/src/themes/theme-two/components/typography.css +209 -209
  74. package/src/themes/theme-two/components.css +37 -37
  75. package/src/themes/theme-two/imports.css +16 -0
  76. package/src/themes/theme-two/theme.css +158 -13
  77. package/dist/theme-one+op.css +0 -4302
  78. package/dist/theme-two+op.css +0 -4021
  79. package/src/themes/theme-one/setup.css +0 -163
  80. package/src/themes/theme-one/theme+op.css +0 -5
  81. package/src/themes/theme-two/setup.css +0 -158
  82. package/src/themes/theme-two/theme+op.css +0 -5
package/src/themes/theme-two/components/badge.css CHANGED
@@ -1,101 +1,101 @@
1
- @layer components.root {
2
- :where(.badge) {
3
- --_bg-color: var(--primary);
4
- --_border-color: var(--primary);
5
- --_color: var(--gray-1);
6
- --_inset-offset: 16px;
7
- --_inset: auto auto calc(100% - var(--_inset-offset))
8
- calc(100% - var(--_inset-offset));
9
- --_translate: 0;
10
-
11
- display: inline-flex;
12
- position: relative;
13
-
14
- &::after {
15
- background-color: var(--_bg-color);
16
- border: 2px solid var(--_border-color);
17
- border-radius: 100vmax;
18
- color: var(--_color);
19
- content: attr(aria-label);
20
- font-size: 12px;
21
- font-weight: 500;
22
- block-size: var(--size-4);
23
- line-height: normal;
24
- min-inline-size: var(--size-4, 1.125rem);
25
- padding-inline: var(--size-1);
26
- inset: var(--_inset);
27
- position: absolute;
28
- text-align: center;
29
- translate: var(--_translate);
30
- transition: opacity 0.2s var(--ease-out-1);
31
- inline-size: max-content;
32
- }
33
-
34
- /* Alignment */
35
- &.start-start {
36
- --_inset: auto calc(100% - var(--_inset-offset))
37
- calc(100% - var(--_inset-offset)) auto;
38
- }
39
- &.start-end {
40
- --_inset: auto auto calc(100% - var(--_inset-offset))
41
- calc(100% - var(--_inset-offset));
42
- }
43
- &.end-start {
44
- --_inset: calc(100% - var(--_inset-offset))
45
- calc(100% - var(--_inset-offset)) auto auto;
46
- }
47
- &.end-end {
48
- --_inset: calc(100% - var(--_inset-offset)) auto auto
49
- calc(100% - var(--_inset-offset));
50
- }
51
-
52
- /* Dot */
53
- &.dot {
54
- --_inset: 0 -1px auto auto;
55
- &::after {
56
- content: "";
57
- min-inline-size: var(--size-2);
58
- block-size: var(--size-2);
59
- inline-size: var(--size-2);
60
- padding: 0;
61
- }
62
- }
63
-
64
- /* Visibility */
65
- &.invisible {
66
- &::after {
67
- opacity: 0;
68
- pointer-events: none;
69
- }
70
- }
71
-
72
- /* Colors */
73
- &.error,
74
- &.good,
75
- &.ok,
76
- &.warning {
77
- --_bg-color: var(--color-8);
78
- --_border-color: var(--color-8);
79
- }
80
- }
81
-
82
- [dir="rtl"] {
83
- :where(.badge) {
84
- --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
85
-
86
- /* Alignment */
87
- &.start-start {
88
- --_inset: auto auto calc(100% - 16px) calc(100% - 16px);
89
- }
90
- &.start-end {
91
- --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
92
- }
93
- &.end-start {
94
- --_inset: calc(100% - 16px) auto auto calc(100% - 16px);
95
- }
96
- &.end-end {
97
- --_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
98
- }
99
- }
100
- }
101
- }
1
+ @layer components.root {
2
+ :where(.badge) {
3
+ --_bg-color: var(--primary);
4
+ --_border-color: var(--primary);
5
+ --_color: var(--gray-1);
6
+ --_inset-offset: 16px;
7
+ --_inset: auto auto calc(100% - var(--_inset-offset))
8
+ calc(100% - var(--_inset-offset));
9
+ --_translate: 0;
10
+
11
+ display: inline-flex;
12
+ position: relative;
13
+
14
+ &::after {
15
+ background-color: var(--_bg-color);
16
+ border: 2px solid var(--_border-color);
17
+ border-radius: 100vmax;
18
+ color: var(--_color);
19
+ content: attr(aria-label);
20
+ font-size: 12px;
21
+ font-weight: 500;
22
+ block-size: var(--size-4);
23
+ line-height: normal;
24
+ min-inline-size: var(--size-4, 1.125rem);
25
+ padding-inline: var(--size-1);
26
+ inset: var(--_inset);
27
+ position: absolute;
28
+ text-align: center;
29
+ translate: var(--_translate);
30
+ transition: opacity 0.2s var(--ease-out-1);
31
+ inline-size: max-content;
32
+ }
33
+
34
+ /* Alignment */
35
+ &.start-start {
36
+ --_inset: auto calc(100% - var(--_inset-offset))
37
+ calc(100% - var(--_inset-offset)) auto;
38
+ }
39
+ &.start-end {
40
+ --_inset: auto auto calc(100% - var(--_inset-offset))
41
+ calc(100% - var(--_inset-offset));
42
+ }
43
+ &.end-start {
44
+ --_inset: calc(100% - var(--_inset-offset))
45
+ calc(100% - var(--_inset-offset)) auto auto;
46
+ }
47
+ &.end-end {
48
+ --_inset: calc(100% - var(--_inset-offset)) auto auto
49
+ calc(100% - var(--_inset-offset));
50
+ }
51
+
52
+ /* Dot */
53
+ &.dot {
54
+ --_inset: 0 -1px auto auto;
55
+ &::after {
56
+ content: "";
57
+ min-inline-size: var(--size-2);
58
+ block-size: var(--size-2);
59
+ inline-size: var(--size-2);
60
+ padding: 0;
61
+ }
62
+ }
63
+
64
+ /* Visibility */
65
+ &.invisible {
66
+ &::after {
67
+ opacity: 0;
68
+ pointer-events: none;
69
+ }
70
+ }
71
+
72
+ /* Colors */
73
+ &.error,
74
+ &.good,
75
+ &.ok,
76
+ &.warning {
77
+ --_bg-color: var(--color-8);
78
+ --_border-color: var(--color-8);
79
+ }
80
+ }
81
+
82
+ [dir="rtl"] {
83
+ :where(.badge) {
84
+ --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
85
+
86
+ /* Alignment */
87
+ &.start-start {
88
+ --_inset: auto auto calc(100% - 16px) calc(100% - 16px);
89
+ }
90
+ &.start-end {
91
+ --_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
92
+ }
93
+ &.end-start {
94
+ --_inset: calc(100% - 16px) auto auto calc(100% - 16px);
95
+ }
96
+ &.end-end {
97
+ --_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
98
+ }
99
+ }
100
+ }
101
+ }
package/src/themes/theme-two/components/button-group.css CHANGED
@@ -1,50 +1,50 @@
1
- @layer components.extended {
2
- :where([role="group"].button-group) {
3
- --_border-radius: var(--button-border-radius);
4
-
5
- border-radius: var(--_border-radius);
6
- display: inline-flex;
7
- min-width: max-content;
8
-
9
- button {
10
- border-radius: 0;
11
-
12
- svg {
13
- max-inline-size: 0.7lh;
14
- }
15
-
16
- &:focus-visible {
17
- outline-offset: -4px;
18
- }
19
-
20
- & + & {
21
- border-inline-width: 1px;
22
- margin-inline-start: -1px;
23
- }
24
-
25
- &:first-of-type {
26
- border-bottom-left-radius: var(--_border-radius);
27
- border-top-left-radius: var(--_border-radius);
28
- }
29
- &:last-of-type {
30
- border-bottom-right-radius: var(--_border-radius);
31
- border-top-right-radius: var(--_border-radius);
32
- }
33
-
34
- /* Variants */
35
- &:where(.tonal, .filled) {
36
- & + button {
37
- border-inline-start-color: var(--color-7);
38
- }
39
-
40
- & + &[disabled] {
41
- border-inline-start-color: color-mix(
42
- in oklch,
43
- var(--border-color) 90%,
44
- white
45
- );
46
- }
47
- }
48
- }
49
- }
50
- }
1
+ @layer components.extended {
2
+ :where([role="group"].button-group) {
3
+ --_border-radius: var(--button-border-radius);
4
+
5
+ border-radius: var(--_border-radius);
6
+ display: inline-flex;
7
+ min-width: max-content;
8
+
9
+ button {
10
+ border-radius: 0;
11
+
12
+ svg {
13
+ max-inline-size: 0.7lh;
14
+ }
15
+
16
+ &:focus-visible {
17
+ outline-offset: -4px;
18
+ }
19
+
20
+ & + & {
21
+ border-inline-width: 1px;
22
+ margin-inline-start: -1px;
23
+ }
24
+
25
+ &:first-of-type {
26
+ border-bottom-left-radius: var(--_border-radius);
27
+ border-top-left-radius: var(--_border-radius);
28
+ }
29
+ &:last-of-type {
30
+ border-bottom-right-radius: var(--_border-radius);
31
+ border-top-right-radius: var(--_border-radius);
32
+ }
33
+
34
+ /* Variants */
35
+ &:where(.tonal, .filled) {
36
+ & + button {
37
+ border-inline-start-color: var(--color-7);
38
+ }
39
+
40
+ & + &[disabled] {
41
+ border-inline-start-color: color-mix(
42
+ in oklch,
43
+ var(--border-color) 90%,
44
+ white
45
+ );
46
+ }
47
+ }
48
+ }
49
+ }
50
+ }