winduum 0.1.18 → 0.2.0-beta.10

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 (103) hide show
  1. package/dist/main-rgb.css +1 -0
  2. package/dist/main.css +5 -1
  3. package/dist/tailwind.css +5 -1
  4. package/package.json +25 -21
  5. package/src/base/config.css +0 -10
  6. package/src/base/default.css +23 -10
  7. package/src/base/icons.css +0 -3
  8. package/src/base/index.css +2 -0
  9. package/src/base/keyframes.css +0 -118
  10. package/src/base/reset.css +24 -17
  11. package/src/base/tailwind/utilities.css +3 -3
  12. package/src/base/theme/dark-rgb.css +4 -0
  13. package/src/base/theme/dark.css +7 -7
  14. package/src/base/theme/default-rgb.css +13 -0
  15. package/src/base/theme/default.css +22 -14
  16. package/src/components/dialog.css +2 -2
  17. package/src/components/field.css +3 -3
  18. package/src/libraries/dialog-rgb.css +3 -0
  19. package/src/libraries/dialog.css +2 -2
  20. package/src/libraries/dialog.js +7 -9
  21. package/src/libraries/ripple-rgb.css +3 -0
  22. package/src/libraries/ripple.css +2 -2
  23. package/src/libraries/ripple.js +1 -3
  24. package/src/main-rgb.css +11 -0
  25. package/src/main.css +1 -1
  26. package/src/main.js +1 -0
  27. package/src/ui/badge/bordered-rgb.css +3 -0
  28. package/src/ui/badge/bordered.css +8 -0
  29. package/src/ui/badge/circle.css +5 -0
  30. package/src/ui/badge/default-rgb.css +9 -0
  31. package/src/ui/badge/default.css +40 -0
  32. package/src/ui/badge/index.css +7 -0
  33. package/src/ui/badge/lg.css +3 -0
  34. package/src/ui/badge/muted.css +3 -0
  35. package/src/ui/badge/sm.css +4 -0
  36. package/src/ui/badge/square.css +4 -0
  37. package/src/ui/badge.css +1 -109
  38. package/src/ui/btn/bordered-rgb.css +3 -0
  39. package/src/ui/btn/bordered.css +8 -0
  40. package/src/ui/btn/circle.css +5 -0
  41. package/src/ui/btn/default-rgb.css +9 -0
  42. package/src/ui/btn/default.css +107 -0
  43. package/src/ui/btn/gradient-bordered-rgb.css +13 -0
  44. package/src/ui/btn/gradient-bordered.css +28 -0
  45. package/src/ui/btn/gradient.css +10 -0
  46. package/src/ui/btn/hover-fill.css +8 -0
  47. package/src/ui/btn/index.css +13 -0
  48. package/src/ui/btn/lg.css +4 -0
  49. package/src/ui/btn/loading.css +27 -0
  50. package/src/ui/btn/muted.css +4 -0
  51. package/src/ui/btn/raised.css +8 -0
  52. package/src/ui/btn/sm.css +4 -0
  53. package/src/ui/btn/square.css +4 -0
  54. package/src/ui/btn/wide.css +4 -0
  55. package/src/ui/btn.css +1 -234
  56. package/src/ui/check-rgb.css +31 -0
  57. package/src/ui/check.css +130 -0
  58. package/src/ui/control/default-rgb.css +24 -0
  59. package/src/ui/control/default.css +94 -0
  60. package/src/ui/control/floating-focus.css +8 -0
  61. package/src/ui/control/floating.css +31 -0
  62. package/src/ui/control/icon.css +66 -0
  63. package/src/ui/control/index.css +5 -0
  64. package/src/ui/control/select.css +28 -0
  65. package/src/ui/control.css +1 -0
  66. package/src/ui/group.css +34 -0
  67. package/src/ui/heading/default.css +12 -0
  68. package/src/ui/heading/index.css +3 -0
  69. package/src/ui/heading/lg.css +3 -0
  70. package/src/ui/heading/sm.css +4 -0
  71. package/src/ui/heading.css +1 -21
  72. package/src/ui/image.css +4 -4
  73. package/src/ui/{+.css → index.css} +4 -5
  74. package/src/ui/info.css +1 -1
  75. package/src/ui/label.css +1 -1
  76. package/src/ui/link/default.css +36 -0
  77. package/src/ui/link/index.css +2 -0
  78. package/src/ui/link/underlined.css +50 -0
  79. package/src/ui/link.css +1 -45
  80. package/src/ui/notice-rgb.css +6 -0
  81. package/src/ui/notice.css +9 -22
  82. package/src/ui/progress/default-rgb.css +3 -0
  83. package/src/ui/progress/default.css +39 -0
  84. package/src/ui/progress/index.css +3 -0
  85. package/src/ui/progress/lg.css +3 -0
  86. package/src/ui/progress/sm.css +3 -0
  87. package/src/ui/progress.css +1 -50
  88. package/src/ui/switch-rgb.css +11 -0
  89. package/src/ui/switch.css +23 -28
  90. package/src/ui/text-rgb.css +13 -0
  91. package/src/ui/text.css +15 -15
  92. package/src/ui/title/default.css +12 -0
  93. package/src/ui/title/index.css +3 -0
  94. package/src/ui/title/lg.css +3 -0
  95. package/src/ui/title/sm.css +3 -0
  96. package/src/ui/title.css +1 -20
  97. package/tailwind.config.cjs +1 -1
  98. package/utils/tailwind.cjs +54 -28
  99. package/utils/tailwind.js +48 -24
  100. package/src/ui/checkbox.css +0 -106
  101. package/src/ui/input.css +0 -226
  102. package/src/ui/radio.css +0 -4
  103. package/src/ui/select.css +0 -27
package/src/base/keyframes.css CHANGED
@@ -18,42 +18,6 @@
18
18
  }
19
19
  }
20
20
 
21
- @keyframes fade-in-left {
22
- from {
23
- opacity: 0;
24
- transform: translateX(-5rem);
25
- }
26
-
27
- to {
28
- opacity: 1;
29
- transform: none;
30
- }
31
- }
32
-
33
- @keyframes fade-in-right {
34
- from {
35
- opacity: 0;
36
- transform: translateX(5rem);
37
- }
38
-
39
- to {
40
- opacity: 1;
41
- transform: none;
42
- }
43
- }
44
-
45
- @keyframes fade-in-up {
46
- 0% {
47
- opacity: 0;
48
- transform: translateY(2rem);
49
- }
50
-
51
- 100% {
52
- opacity: 1;
53
- transform: translateY(0);
54
- }
55
- }
56
-
57
21
  @keyframes fade-in-down {
58
22
  0% {
59
23
  opacity: 0;
@@ -66,30 +30,6 @@
66
30
  }
67
31
  }
68
32
 
69
- @keyframes fade-out-left {
70
- from {
71
- opacity: 1;
72
- transform: none;
73
- }
74
-
75
- to {
76
- opacity: 0;
77
- transform: translateX(-5rem);
78
- }
79
- }
80
-
81
- @keyframes fade-out-right {
82
- from {
83
- opacity: 1;
84
- transform: none;
85
- }
86
-
87
- to {
88
- opacity: 0;
89
- transform: translateX(5rem);
90
- }
91
- }
92
-
93
33
  @keyframes fade-out-up {
94
34
  0% {
95
35
  opacity: 1;
@@ -102,18 +42,6 @@
102
42
  }
103
43
  }
104
44
 
105
- @keyframes fade-out-down {
106
- 0% {
107
- opacity: 1;
108
- transform: translateY(0);
109
- }
110
-
111
- 100% {
112
- opacity: 0;
113
- transform: translateY(2rem);
114
- }
115
- }
116
-
117
45
  @keyframes fade-in {
118
46
  from {
119
47
  opacity: 0;
@@ -134,55 +62,9 @@
134
62
  }
135
63
  }
136
64
 
137
- @keyframes slide-in-down {
138
- 0% {
139
- transform: translateY(-100%);
140
- }
141
-
142
- 100% {
143
- transform: translateY(0);
144
- }
145
- }
146
-
147
- @keyframes slide-out-up {
148
- 0% {
149
- transform: translateY(0);
150
- }
151
-
152
- 100% {
153
- transform: translateY(-100%);
154
- }
155
- }
156
-
157
- @keyframes slide-in-up {
158
- 0% {
159
- transform: translateY(100%);
160
- }
161
-
162
- 100% {
163
- transform: translateY(0);
164
- }
165
- }
166
-
167
- @keyframes slide-out-down {
168
- 0% {
169
- transform: translateY(0);
170
- }
171
-
172
- 100% {
173
- transform: translateY(100%);
174
- }
175
- }
176
-
177
65
  @keyframes ripple {
178
66
  100% {
179
67
  transform: scale(2.5);
180
68
  opacity: 0;
181
69
  }
182
70
  }
183
-
184
- @keyframes loading-skeleton {
185
- 100% {
186
- background-position: 250% 0;
187
- }
188
- }
package/src/base/reset.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /***
2
- The new CSS reset - version 1.7.3 (last updated 7.8.2022)
2
+ The new CSS reset - version 1.8.4 (last updated 14.2.2023)
3
3
  GitHub page: https://github.com/elad2412/the-new-css-reset
4
4
  ***/
5
5
 
@@ -19,42 +19,59 @@
19
19
  box-sizing: border-box;
20
20
  }
21
21
 
22
+ /* Reapply the pointer cursor for anchor tags */
23
+ :where(a, button) {
24
+ cursor: revert;
25
+ }
26
+
22
27
  /* Remove list styles (bullets/numbers) */
23
28
  :where(ol:not([type]), ul, menu) {
24
29
  list-style: none;
25
30
  }
26
31
 
27
32
  /* For images to not be able to exceed their container */
28
- img {
29
- max-width: 100%;
33
+ :where(img) {
34
+ max-inline-size: 100%;
35
+ max-block-size: 100%;
30
36
  }
31
37
 
32
38
  /* removes spacing between cells in tables */
33
- table {
39
+ :where(table) {
34
40
  border-collapse: collapse;
35
41
  }
36
42
 
37
43
  /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
38
- input, textarea {
44
+ :where(input, textarea) {
39
45
  user-select: auto;
46
+ cursor: revert;
40
47
  }
41
48
 
42
49
  /* revert the 'white-space' property for textarea elements on Safari */
43
- textarea {
50
+ :where(textarea) {
44
51
  white-space: revert;
45
52
  }
46
53
 
47
54
  /* minimum style to allow to style meter element */
48
- meter {
55
+ :where(meter) {
49
56
  -webkit-appearance: revert;
50
57
  appearance: revert;
51
58
  }
52
59
 
60
+ /* preformatted text - use only for this feature */
61
+ :where(pre) {
62
+ all: revert;
63
+ }
64
+
53
65
  /* reset default text opacity of input placeholder */
54
66
  ::placeholder {
55
67
  color: unset;
56
68
  }
57
69
 
70
+ /* remove default dot (•) sign */
71
+ ::marker {
72
+ content: initial;
73
+ }
74
+
58
75
  /* fix the feature of 'hidden' attribute.
59
76
  display:revert; revert to element instead of attribute */
60
77
  :where([hidden]) {
@@ -77,16 +94,6 @@ meter {
77
94
  -webkit-user-drag: element;
78
95
  }
79
96
 
80
- /* apply text cursor */
81
- :where(input, textarea) {
82
- cursor: text;
83
- }
84
-
85
- /* apply pointer cursor */
86
- :where(a[href], button) {
87
- cursor: pointer;
88
- }
89
-
90
97
  /* fix firefox svg */
91
98
  :where(svg, use, path, symbol) {
92
99
  all: revert-layer;
package/src/base/tailwind/utilities.css CHANGED
@@ -1,17 +1,17 @@
1
1
  @layer utilities {
2
- :where(.animate) {
2
+ .animate {
3
3
  animation-duration: var(--transition-duration);
4
4
  animation-fill-mode: both;
5
5
  }
6
6
 
7
- :where(.container) {
7
+ .container {
8
8
  margin-left: auto;
9
9
  margin-right: auto;
10
10
  padding-left: var(--container-padding);
11
11
  padding-right: var(--container-padding);
12
12
  max-width: var(--container-width);
13
13
 
14
- &:where(.is-sm) {
14
+ &:where(.container-sm) {
15
15
  --container-width: var(--container-width-sm);
16
16
  }
17
17
  }
package/src/base/theme/dark-rgb.css ADDED
@@ -0,0 +1,4 @@
1
+ :root.dark {
2
+ --color-base-rgb: 255 255 255;
3
+ --color-body-rgb: 25 26 27;
4
+ }
package/src/base/theme/dark.css CHANGED
@@ -1,9 +1,9 @@
1
1
  :root.dark {
2
- --color-default: 201 209 217;
3
- --color-invert: 14 17 22;
4
- --color-secondary: 39 41 46;
5
- --color-background: 25 26 27;
6
- --color-background-100: 14 15 16;
7
- --color-background-200: 26 32 38;
8
- --color-background-300: 30 36 46;
2
+ --color-base-mix: black;
3
+ --color-body-mix: white;
4
+ --color-secondary: rgb(var(--color-secondary-rgb));
5
+ --color-base: rgb(var(--color-base-rgb));
6
+ --color-base-current: var(--color-dark);
7
+ --color-body: rgb(var(--color-body-rgb));
8
+ --color-body-current: var(--color-light);
9
9
  }
package/src/base/theme/default-rgb.css ADDED
@@ -0,0 +1,13 @@
1
+ :root {
2
+ --color-primary-rgb: 3 138 255;
3
+ --color-base-rgb: 17 19 21;
4
+ --color-body-rgb: 255 255 255;
5
+ --color-success-rgb: 33 154 67;
6
+ --color-error-rgb: 254 50 75;
7
+ --color-warning-rgb: 254 179 53;
8
+ --color-info-rgb: 45 168 234;
9
+ --color-light-rgb: 255 255 255;
10
+ --color-dark-rgb: 17 19 21;
11
+ --color-accent-rgb: var(--color-primary-rgb);
12
+ --color-current-rgb: var(--color-base-rgb);
13
+ }
package/src/base/theme/default.css CHANGED
@@ -1,17 +1,25 @@
1
1
  :root {
2
+ --color-primary: rgb(var(--color-primary-rgb));
3
+ --color-primary-current: var(--color-light);
4
+ --color-success: rgb(var(--color-success-rgb));
5
+ --color-error: rgb(var(--color-error-rgb));
6
+ --color-warning: rgb(var(--color-warning-rgb));
7
+ --color-info: rgb(var(--color-info-rgb));
8
+ --color-base: var(--color-base-primary);
9
+ --color-base-current: var(--color-light);
10
+ --color-base-mix: white;
11
+ --color-base-primary: rgb(var(--color-base-rgb));
12
+ --color-base-secondary: color-mix(in sRGB, var(--color-base) 75%, var(--color-base-mix));
13
+ --color-base-tertiary: color-mix(in sRGB, var(--color-base) 50%, var(--color-base-mix));
14
+ --color-body: var(--color-body-primary);
15
+ --color-body-current: var(--color-dark);
16
+ --color-body-mix: black;
17
+ --color-body-primary: rgb(var(--color-body-rgb));
18
+ --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-mix));
19
+ --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-mix));
20
+ --color-light: rgb(var(--color-light-rgb));
21
+ --color-dark: rgb(var(--color-dark-rgb));
2
22
  --color-accent: var(--color-primary);
3
- --color-current: var(--color-default);
4
- --color-default: 17 19 21;
5
- --color-primary: 3 138 255;
6
- --color-secondary: 69 71 72;
7
- --color-light: 255 255 255;
8
- --color-dark: 17 19 21;
9
- --color-success: 33 154 67;
10
- --color-error: 254 50 75;
11
- --color-warning: 254 179 53;
12
- --color-info: 45 168 234;
13
- --color-background: 255 255 255;
14
- --color-background-100: 249 250 252;
15
- --color-background-200: 235 235 235;
16
- --color-background-300: 225 225 225;
23
+ --color-accent-current: var(--color-primary-current, var(--color-light));
24
+ --color-current: var(--color-base);
17
25
  }
package/src/components/dialog.css CHANGED
@@ -1,4 +1,4 @@
1
- :where(.c-dialog) {
1
+ .c-dialog {
2
2
  --c-dialog-py: 1.5rem;
3
3
  --c-dialog-px: 1.5rem;
4
4
  --c-dialog-width: 35rem;
@@ -8,7 +8,7 @@
8
8
  position: relative;
9
9
  z-index: var(--z-20);
10
10
  margin: auto;
11
- background-color: rgb(var(--color-background));
11
+ background-color: var(--color-body-primary);
12
12
  width: 100%;
13
13
  max-width: var(--c-dialog-width);
14
14
  border-radius: var(--rounded-md);
package/src/components/field.css CHANGED
@@ -1,11 +1,11 @@
1
- :where(.c-field) {
1
+ .c-field {
2
2
  --c-field-gap: 0.5rem;
3
3
 
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  gap: var(--c-field-gap);
7
7
 
8
- .is-validated &:has(:invalid) {
8
+ .validated &:has(:invalid) {
9
9
  & :where(.ui-info[hidden]) {
10
10
  display: block;
11
11
  }
@@ -13,7 +13,7 @@
13
13
 
14
14
  &:has([required]) :where(.ui-label) {
15
15
  &::after {
16
- color: rgb(var(--color-error));
16
+ color: var(--color-error);
17
17
  content: " *";
18
18
  }
19
19
  }
package/src/libraries/dialog-rgb.css ADDED
@@ -0,0 +1,3 @@
1
+ .lib-dialog {
2
+ --lib-ripple-bg: rgb(var(--color-dark-rgb) / var(--tw-bg-opacity, 0.8));
3
+ }
package/src/libraries/dialog.css CHANGED
@@ -1,5 +1,5 @@
1
- :where(.lib-dialog) {
2
- --lib-ripple-bg: rgb(var(--color-dark) / var(--tw-bg-opacity, 0.8));
1
+ .lib-dialog {
2
+ --lib-ripple-bg: color-mix(in sRGB, var(--color-dark) calc(var(--tw-bg-opacity, 0.8) * 100%), transparent);
3
3
  --lib-dialog-py: 2rem;
4
4
  --lib-dialog-px: 1.5rem;
5
5
  --lib-dialog-animation-duration: var(--transition-duration);
package/src/libraries/dialog.js CHANGED
@@ -1,4 +1,4 @@
1
- const defaultOptions = {
1
+ export const defaultOptions = {
2
2
  openClass: 'is-lib-dialog-open',
3
3
  scrollbarWidthProperty: '--lib-dialog-scrollbar-width',
4
4
  show: {
@@ -15,7 +15,7 @@ const defaultOptions = {
15
15
  }
16
16
  }
17
17
 
18
- const dialogSelector = selector => document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1]
18
+ export const dialogSelector = selector => document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1]
19
19
 
20
20
  /**
21
21
  * Dismisses a dialog.
@@ -23,7 +23,7 @@ const dialogSelector = selector => document.querySelectorAll(selector)[document.
23
23
  * @param selector - The dialog element to dismiss.
24
24
  * @param options - The options for closing the dialog.
25
25
  */
26
- const dismissDialog = async (selector, options = defaultOptions.close) => {
26
+ export const dismissDialog = async (selector, options = defaultOptions.close) => {
27
27
  await Promise.allSettled(selector.getAnimations().map(animation => animation.finished))
28
28
  selector.setAttribute('inert', '')
29
29
  options.remove && selector.remove()
@@ -39,7 +39,7 @@ const dismissDialog = async (selector, options = defaultOptions.close) => {
39
39
  * @param selector - The dialog element to show.
40
40
  * @param options - The options for showing the dialog.
41
41
  */
42
- const showDialog = async (selector, options = defaultOptions.show) => {
42
+ export const showDialog = async (selector, options = defaultOptions.show) => {
43
43
  options = Object.assign({}, defaultOptions.show, options)
44
44
 
45
45
  document.documentElement.style.setProperty(defaultOptions.scrollbarWidthProperty, `${window.innerWidth - document.body.clientWidth}px`)
@@ -75,7 +75,7 @@ const showDialog = async (selector, options = defaultOptions.show) => {
75
75
  * @param selector - The dialog element to dismiss.
76
76
  * @param options - The options for closing the dialog.
77
77
  */
78
- const closeDialog = async (selector, options = defaultOptions.close) => {
78
+ export const closeDialog = async (selector, options = defaultOptions.close) => {
79
79
  options = Object.assign({}, defaultOptions.close, options)
80
80
 
81
81
  window.HTMLDialogElement
@@ -91,7 +91,7 @@ const closeDialog = async (selector, options = defaultOptions.close) => {
91
91
  * @param content - The HTML content to insert into the dialog.
92
92
  * @param options - The options for inserting the dialog.
93
93
  */
94
- const insertDialog = async (content, options = defaultOptions.insert) => {
94
+ export const insertDialog = async (content, options = defaultOptions.insert) => {
95
95
  options = Object.assign({}, defaultOptions.insert, options)
96
96
 
97
97
  if (!dialogSelector(options.selector) || options.append) {
@@ -109,14 +109,12 @@ const insertDialog = async (content, options = defaultOptions.insert) => {
109
109
  * @type {typeof import("./dialog").fetchDialog}
110
110
  * @param options - The options for fetching and inserting the dialog.
111
111
  */
112
- const fetchDialog = async ({ url, insertOptions = {} }) => {
112
+ export const fetchDialog = async ({ url, insertOptions = {} }) => {
113
113
  await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
114
114
  .then(response => response.json())
115
115
  .then(async ({ content }) => await insertDialog(content, insertOptions))
116
116
  }
117
117
 
118
- export { showDialog, closeDialog, insertDialog, fetchDialog, dialogSelector, dismissDialog }
119
-
120
118
  export default {
121
119
  defaults: defaultOptions,
122
120
  dismiss: dismissDialog,
package/src/libraries/ripple-rgb.css ADDED
@@ -0,0 +1,3 @@
1
+ .lib-ripple {
2
+ --lib-ripple-bg: rgb(var(--color-body-rgb) / var(--tw-bg-opacity, 0.4));
3
+ }
package/src/libraries/ripple.css CHANGED
@@ -1,6 +1,6 @@
1
- :where(.lib-ripple) {
1
+ .lib-ripple {
2
2
  --lib-ripple-animation-duration: 1s;
3
- --lib-ripple-bg: rgb(var(--color-background) / var(--tw-bg-opacity, 0.4));
3
+ --lib-ripple-bg: color-mix(in sRGB, var(--color-body) calc(var(--tw-bg-opacity, 0.4) * 100%), transparent);
4
4
 
5
5
  position: absolute;
6
6
  background: var(--lib-ripple-bg);
package/src/libraries/ripple.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * Shows a ripple effect.
3
3
  * @type {typeof import("./ripple").showRipple}
4
4
  */
5
- const showRipple = ({ currentTarget, layerX, layerY }, selector = currentTarget.querySelector('.lib-ripple')) => {
5
+ export const showRipple = ({ currentTarget, layerX, layerY }, selector = currentTarget.querySelector('.lib-ripple')) => {
6
6
  if (!selector) {
7
7
  currentTarget.insertAdjacentHTML('beforeend', "<div class='lib-ripple'></div>")
8
8
  selector = currentTarget.querySelector('.lib-ripple')
@@ -22,8 +22,6 @@ const showRipple = ({ currentTarget, layerX, layerY }, selector = currentTarget.
22
22
  selector.classList.add('animation-ripple')
23
23
  }
24
24
 
25
- export { showRipple }
26
-
27
25
  export default {
28
26
  show: showRipple
29
27
  }
package/src/main-rgb.css ADDED
@@ -0,0 +1,11 @@
1
+ @import "ui/btn/default-rgb.css";
2
+ @import "ui/btn/bordered-rgb.css";
3
+ @import "ui/btn/gradient-bordered-rgb.css";
4
+ @import "ui/badge/default-rgb.css";
5
+ @import "ui/badge/bordered-rgb.css";
6
+ @import "ui/control/default-rgb.css";
7
+ @import "ui/progress/default-rgb.css";
8
+ @import "ui/check-rgb.css";
9
+ @import "ui/switch-rgb.css";
10
+ @import "ui/notice-rgb.css";
11
+ @import "ui/text-rgb.css";
package/src/main.css CHANGED
@@ -1,4 +1,4 @@
1
1
  @import "base/index.css";
2
- @import "ui/+.css";
2
+ @import "ui/index.css";
3
3
  @import "components/+.css";
4
4
  @import "libraries/+.css";
package/src/main.js CHANGED
@@ -0,0 +1 @@
1
+ !CSS.supports('selector(:has(*))') && (async () => (await import('css-has-pseudo/browser')).default(document))()
package/src/ui/badge/bordered-rgb.css ADDED
@@ -0,0 +1,3 @@
1
+ .ui-badge:where(.bordered) {
2
+ border: var(--ui-badge-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-badge-border-opacity));
3
+ }
package/src/ui/badge/bordered.css ADDED
@@ -0,0 +1,8 @@
1
+ .ui-badge:where(.bordered) {
2
+ --ui-badge-border-width: 1px;
3
+ --ui-badge-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);
4
+
5
+ border: var(--ui-badge-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-badge-border-opacity), transparent);
6
+ padding-left: calc(var(--ui-badge-px) - var(--ui-badge-border-width));
7
+ padding-right: calc(var(--ui-badge-px) - var(--ui-badge-border-width));
8
+ }
package/src/ui/badge/circle.css ADDED
@@ -0,0 +1,5 @@
1
+ .ui-badge:where(.circle) {
2
+ --ui-badge-px: var(--ui-badge-py);
3
+ --ui-badge-width: var(--ui-badge-height);
4
+ --ui-badge-border-radius: var(--rounded-full);
5
+ }
package/src/ui/badge/default-rgb.css ADDED
@@ -0,0 +1,9 @@
1
+ .ui-badge {
2
+ --color-current-rgb: var(--color-light-rgb);
3
+ --ui-badge-bg: rgb(var(--color-accent-rgb) / var(--ui-badge-bg-opacity));
4
+ --ui-badge-color: rgb(var(--color-current-rgb) / var(--ui-badge-color-opacity));
5
+
6
+ &:where(.bordered, .muted) {
7
+ --color-current-rgb: var(--color-accent-rgb);
8
+ }
9
+ }
package/src/ui/badge/default.css ADDED
@@ -0,0 +1,40 @@
1
+ .ui-badge {
2
+ --color-current: var(--color-accent-current);
3
+ --ui-badge-width: max-content;
4
+ --ui-badge-height: 1.5rem;
5
+ --ui-badge-py: 0;
6
+ --ui-badge-px: 0.5rem;
7
+ --ui-badge-border-radius: var(--rounded-xs);
8
+ --ui-badge-font-size: 0.75rem;
9
+ --ui-badge-font-weight: var(--font-normal);
10
+ --ui-badge-bg: color-mix(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix));
11
+ --ui-badge-bg-mix: transparent;
12
+ --ui-badge-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
13
+ --ui-badge-color: color-mix(in sRGB, var(--color-current) var(--ui-badge-color-opacity), transparent);
14
+ --ui-badge-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
15
+ --ui-badge-gap: 0.25rem;
16
+
17
+ width: var(--ui-badge-width);
18
+ height: var(--ui-badge-height);
19
+ padding: var(--ui-badge-py) var(--ui-badge-px);
20
+ border-radius: var(--ui-badge-border-radius);
21
+ font-size: var(--ui-badge-font-size);
22
+ font-weight: var(--ui-badge-font-weight);
23
+ background-color: var(--ui-badge-bg);
24
+ color: var(--ui-badge-color);
25
+ display: inline-flex;
26
+ align-items: center;
27
+ text-align: center;
28
+ justify-content: center;
29
+ white-space: nowrap;
30
+ flex-shrink: 0;
31
+ position: relative;
32
+ z-index: 0;
33
+ gap: var(--ui-badge-gap);
34
+ transition: var(--transition-opacity);
35
+
36
+ &:where(.bordered, .muted) {
37
+ --color-current: var(--color-accent);
38
+ --ui-badge-bg-opacity: 0%;
39
+ }
40
+ }
package/src/ui/badge/index.css ADDED
@@ -0,0 +1,7 @@
1
+ @import "default.css";
2
+ @import "sm.css";
3
+ @import "lg.css";
4
+ @import "bordered.css";
5
+ @import "muted.css";
6
+ @import "square.css";
7
+ @import "circle.css";
package/src/ui/badge/lg.css ADDED
@@ -0,0 +1,3 @@
1
+ .ui-badge:where(.lg) {
2
+ --ui-badge-height: 1.75rem;
3
+ }
package/src/ui/badge/muted.css ADDED
@@ -0,0 +1,3 @@
1
+ .ui-badge:where(.muted) {
2
+ --ui-badge-bg-opacity: 10%;
3
+ }
package/src/ui/badge/sm.css ADDED
@@ -0,0 +1,4 @@
1
+ .ui-badge:where(.sm) {
2
+ --ui-badge-height: 1.25rem;
3
+ --ui-badge-font-size: 0.625rem;
4
+ }
package/src/ui/badge/square.css ADDED
@@ -0,0 +1,4 @@
1
+ .ui-badge:where(.square) {
2
+ --ui-badge-px: var(--ui-badge-py);
3
+ --ui-badge-width: var(--ui-badge-height);
4
+ }