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-one/setup.css DELETED
@@ -1,163 +0,0 @@
1
- /*
2
- theme one theme setup
3
- */
4
- @layer theme {
5
- .light {
6
- --color-scheme: light;
7
- }
8
- .dark {
9
- --color-scheme: dark;
10
- }
11
-
12
- :where(html) {
13
- color-scheme: var(--color-scheme, light dark);
14
-
15
- --palette-hue: var(--oklch-teal);
16
- --palette-hue-rotate-by: 5;
17
- --palette-chroma: 0.89;
18
-
19
- /* Primary */
20
- --primary: var(--color-8);
21
- --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
22
- --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
23
- --primary-contrast: var(--gray-1);
24
-
25
- /* Text */
26
- --text-color-1: light-dark(var(--gray-15), var(--gray-1));
27
- --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
28
- --text-color-2: light-dark(var(--gray-13), var(--gray-4));
29
- --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
30
-
31
- /* Surface */
32
- --surface-default: light-dark(var(--gray-1), var(--gray-13));
33
- --surface-filled: light-dark(var(--gray-3), var(--gray-15));
34
- --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
35
- --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
36
-
37
- /* Shadows */
38
- --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
39
- --shadow-strength: light-dark(1%, 10%);
40
- --inner-shadow-highlight: light-dark(
41
- inset 0 -0.5px 0 0 #fff,
42
- inset 0 0.5px 0 0 #0001,
43
- inset 0 -0.5px 0 0 #fff1,
44
- inset 0 0.5px 0 0 #0007
45
- );
46
-
47
- /* Typography */
48
- --font-size-h1: var(--font-size-fluid-3, 3.5rem);
49
- --font-size-h2: var(--font-size-fluid-2, 2rem);
50
- --font-size-h3: var(--font-size-fluid-1, 1.5rem);
51
- --font-size-h4: var(--font-size-3, 1.25rem);
52
- --font-size-h5: var(--font-size-2, 1.1rem);
53
- --font-size-h6: var(--font-size-fluid-0, 1rem);
54
- --font-size-lg: var(--font-size-3, 1.25rem);
55
- --font-size-md: var(--font-size-fluid-0, 1rem);
56
- --font-size-sm: 0.875rem;
57
- --font-size-xs: var(--font-size-0, 0.75rem);
58
-
59
- /* Borders */
60
- --border-color: light-dark(var(--gray-4), var(--gray-12));
61
- --border-radius: var(--size-1);
62
- --border-width: 1px;
63
-
64
- /* Input Field */
65
- --field-border-color: var(--border-color);
66
- --field-border-radius: var(--size-1);
67
- --field-border-width: 1px;
68
- --field-size: 2.3lh;
69
- --field-size-small: 1.9lh;
70
-
71
- /* Button */
72
- --button-border-radius: var(--radius-round);
73
- /* Ripple effect */
74
- @media (prefers-reduced-motion: no-preference) {
75
- --button-ripple-size: 100%;
76
- --button-ripple-duration: 0.5s;
77
- }
78
- }
79
-
80
- /* Highlight colors */
81
- :where(.red, .error, del) {
82
- --palette-hue: var(--oklch-red, 25);
83
- --palette-chroma: 1;
84
- --palette-hue-rotate-by: 1;
85
- }
86
- :where(.blue, .ok, abbr, dfn) {
87
- --palette-hue: var(--oklch-blue, 210);
88
- --palette-chroma: 1;
89
- --palette-hue-rotate-by: 1;
90
- }
91
- :where(.green, .good, ins) {
92
- --palette-hue: var(--oklch-green, 145);
93
- --palette-chroma: 1;
94
- --palette-hue-rotate-by: 1;
95
- }
96
- :where(.orange, .warning) {
97
- --palette-hue: var(--oklch-orange, 75);
98
- --palette-chroma: 1;
99
- --palette-hue-rotate-by: 1;
100
- }
101
-
102
- :where(html) {
103
- --red: oklch(from var(--color-9) l 0.2 25);
104
- --blue: oklch(from var(--color-9) l 0.2 210);
105
- --green: oklch(from var(--color-9) l 0.2 145);
106
- --orange: oklch(from var(--color-7) l 0.2 75);
107
- }
108
-
109
- /* Gray palette */
110
- :where(html) {
111
- --gray-chroma: 0.01;
112
- --gray-lightness: 255;
113
-
114
- --gray-1: oklch(
115
- from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
116
- );
117
- --gray-2: oklch(
118
- from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
119
- );
120
- --gray-3: oklch(
121
- from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
122
- );
123
- --gray-4: oklch(
124
- from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
125
- );
126
- --gray-5: oklch(
127
- from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
128
- );
129
- --gray-6: oklch(
130
- from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
131
- );
132
- --gray-7: oklch(
133
- from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
134
- );
135
- --gray-8: oklch(
136
- from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
137
- );
138
- --gray-9: oklch(
139
- from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
140
- );
141
- --gray-10: oklch(
142
- from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
143
- );
144
- --gray-11: oklch(
145
- from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
146
- );
147
- --gray-12: oklch(
148
- from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
149
- );
150
- --gray-13: oklch(
151
- from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
152
- );
153
- --gray-14: oklch(
154
- from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
155
- );
156
- --gray-15: oklch(
157
- from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
158
- );
159
- --gray-16: oklch(
160
- from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
161
- );
162
- }
163
- }
package/src/themes/theme-one/theme+op.css DELETED
@@ -1,5 +0,0 @@
1
- /* Open Props */
2
- @import "../../open-props.css";
3
-
4
- /* theme one theme */
5
- @import "./theme.css";
package/src/themes/theme-two/setup.css DELETED
@@ -1,158 +0,0 @@
1
- /*
2
- theme two theme setup
3
- */
4
- @layer theme {
5
- .light {
6
- --color-scheme: light;
7
- }
8
- .dark {
9
- --color-scheme: dark;
10
- }
11
-
12
- :where(html) {
13
- color-scheme: var(--color-scheme, light dark);
14
-
15
- --palette-hue: var(--oklch-orange);
16
- --palette-hue-rotate-by: 0;
17
- --palette-chroma: 0.89;
18
-
19
- /* Primary */
20
- --primary: var(--color-8);
21
- --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
22
- --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
23
- --primary-contrast: var(--gray-1);
24
-
25
- /* Text */
26
- --text-color-1: light-dark(var(--gray-15), var(--gray-1));
27
- --text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
28
- --text-color-2: light-dark(var(--gray-13), var(--gray-4));
29
- --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
30
-
31
- /* Surface */
32
- --surface-default: light-dark(var(--gray-1), var(--gray-13));
33
- --surface-filled: light-dark(var(--gray-3), var(--gray-15));
34
- --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
35
- --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
36
-
37
- /* Shadows */
38
- --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
39
- --shadow-strength: light-dark(1%, 10%);
40
- --inner-shadow-highlight: light-dark(
41
- inset 0 -0.5px 0 0 #fff,
42
- inset 0 0.5px 0 0 #0001,
43
- inset 0 -0.5px 0 0 #fff1,
44
- inset 0 0.5px 0 0 #0007
45
- );
46
-
47
- /* Typography */
48
- --font-size-h1: var(--font-size-fluid-3, 3.5rem);
49
- --font-size-h2: var(--font-size-fluid-2, 2rem);
50
- --font-size-h3: var(--font-size-fluid-1, 1.5rem);
51
- --font-size-h4: var(--font-size-3, 1.25rem);
52
- --font-size-h5: var(--font-size-2, 1.1rem);
53
- --font-size-h6: var(--font-size-fluid-0, 1rem);
54
- --font-size-lg: var(--font-size-3, 1.25rem);
55
- --font-size-md: var(--font-size-fluid-0, 1rem);
56
- --font-size-sm: 0.875rem;
57
- --font-size-xs: var(--font-size-0, 0.75rem);
58
-
59
- /* Borders */
60
- --border-color: light-dark(var(--gray-4), var(--gray-12));
61
- --border-radius: var(--size-2);
62
- --border-width: 1px;
63
-
64
- /* Input Field */
65
- --field-border-color: var(--border-color);
66
- --field-border-radius: var(--size-2);
67
- --field-border-width: 1px;
68
- --field-size: 2.3lh;
69
- --field-size-small: 1.9lh;
70
-
71
- /* Button */
72
- --button-border-radius: var(--size-2);
73
- }
74
-
75
- /* Highlight colors */
76
- :where(.red, .error, del) {
77
- --palette-hue: var(--oklch-red, 25);
78
- --palette-chroma: 1;
79
- --palette-hue-rotate-by: 1;
80
- }
81
- :where(.blue, .ok, abbr, dfn) {
82
- --palette-hue: var(--oklch-blue, 210);
83
- --palette-chroma: 1;
84
- --palette-hue-rotate-by: 1;
85
- }
86
- :where(.green, .good, ins) {
87
- --palette-hue: var(--oklch-green, 145);
88
- --palette-chroma: 1;
89
- --palette-hue-rotate-by: 1;
90
- }
91
- :where(.orange, .warning) {
92
- --palette-hue: var(--oklch-orange, 75);
93
- --palette-chroma: 1;
94
- --palette-hue-rotate-by: 1;
95
- }
96
-
97
- :where(html) {
98
- --red: oklch(from var(--color-9) l 0.2 25);
99
- --blue: oklch(from var(--color-9) l 0.2 210);
100
- --green: oklch(from var(--color-9) l 0.2 145);
101
- --orange: oklch(from var(--color-7) l 0.2 75);
102
- }
103
-
104
- /* Gray palette */
105
- :where(html) {
106
- --gray-chroma: 0.01;
107
- --gray-lightness: 255;
108
-
109
- --gray-1: oklch(
110
- from var(--color-1) l var(--gray-chroma) var(--gray-lightness)
111
- );
112
- --gray-2: oklch(
113
- from var(--color-2) l var(--gray-chroma) var(--gray-lightness)
114
- );
115
- --gray-3: oklch(
116
- from var(--color-3) l var(--gray-chroma) var(--gray-lightness)
117
- );
118
- --gray-4: oklch(
119
- from var(--color-4) l var(--gray-chroma) var(--gray-lightness)
120
- );
121
- --gray-5: oklch(
122
- from var(--color-5) l var(--gray-chroma) var(--gray-lightness)
123
- );
124
- --gray-6: oklch(
125
- from var(--color-6) l var(--gray-chroma) var(--gray-lightness)
126
- );
127
- --gray-7: oklch(
128
- from var(--color-7) l var(--gray-chroma) var(--gray-lightness)
129
- );
130
- --gray-8: oklch(
131
- from var(--color-8) l var(--gray-chroma) var(--gray-lightness)
132
- );
133
- --gray-9: oklch(
134
- from var(--color-9) l var(--gray-chroma) var(--gray-lightness)
135
- );
136
- --gray-10: oklch(
137
- from var(--color-10) l var(--gray-chroma) var(--gray-lightness)
138
- );
139
- --gray-11: oklch(
140
- from var(--color-11) l var(--gray-chroma) var(--gray-lightness)
141
- );
142
- --gray-12: oklch(
143
- from var(--color-12) l var(--gray-chroma) var(--gray-lightness)
144
- );
145
- --gray-13: oklch(
146
- from var(--color-13) l var(--gray-chroma) var(--gray-lightness)
147
- );
148
- --gray-14: oklch(
149
- from var(--color-14) l var(--gray-chroma) var(--gray-lightness)
150
- );
151
- --gray-15: oklch(
152
- from var(--color-15) l var(--gray-chroma) var(--gray-lightness)
153
- );
154
- --gray-16: oklch(
155
- from var(--color-16) l var(--gray-chroma) var(--gray-lightness)
156
- );
157
- }
158
- }
package/src/themes/theme-two/theme+op.css DELETED
@@ -1,5 +0,0 @@
1
- /* Open Props */
2
- @import "../../open-props.css";
3
-
4
- /* theme one theme */
5
- @import "./theme.css";