@semanticus/semanticus-css 2.2.0 → 3.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 (150) hide show
  1. package/README.md +23 -22
  2. package/dist/semanticus-no-utilities.css +1 -1
  3. package/dist/semanticus-semantics.css +1 -1
  4. package/dist/semanticus-utilities.css +1 -1
  5. package/dist/semanticus.css +2 -2
  6. package/dist/semanticus.palette.amber.css +1 -1
  7. package/dist/semanticus.palette.azure.css +1 -1
  8. package/dist/semanticus.palette.blue.css +1 -1
  9. package/dist/semanticus.palette.cyan.css +1 -1
  10. package/dist/semanticus.palette.fuchsia.css +1 -1
  11. package/dist/semanticus.palette.green.css +1 -1
  12. package/dist/semanticus.palette.grey.css +1 -1
  13. package/dist/semanticus.palette.indigo.css +1 -1
  14. package/dist/semanticus.palette.jade.css +1 -1
  15. package/dist/semanticus.palette.lime.css +1 -1
  16. package/dist/semanticus.palette.orange.css +1 -1
  17. package/dist/semanticus.palette.pink.css +1 -1
  18. package/dist/semanticus.palette.pumpkin.css +1 -1
  19. package/dist/semanticus.palette.purple.css +1 -1
  20. package/dist/semanticus.palette.red.css +1 -1
  21. package/dist/semanticus.palette.sand.css +1 -1
  22. package/dist/semanticus.palette.slate.css +1 -1
  23. package/dist/semanticus.palette.violet.css +1 -1
  24. package/dist/semanticus.palette.yellow.css +1 -1
  25. package/dist/semanticus.palette.zinc.css +1 -1
  26. package/dist/semanticus.size.pico.css +1 -1
  27. package/package.json +1 -1
  28. package/src/components/_card.css +55 -46
  29. package/src/components/_icons.css +2 -2
  30. package/src/components/_pane.css +15 -8
  31. package/src/components/_sidebar.css +6 -6
  32. package/src/components/_variables.css +28 -0
  33. package/src/components/modules.css +2 -0
  34. package/src/index.css +1 -1
  35. package/src/palettes/amber.css +22 -26
  36. package/src/palettes/azure.css +22 -26
  37. package/src/palettes/blue.css +22 -26
  38. package/src/palettes/cyan.css +22 -26
  39. package/src/palettes/fuchsia.css +25 -26
  40. package/src/palettes/green.css +22 -26
  41. package/src/palettes/grey.css +22 -26
  42. package/src/palettes/indigo.css +22 -26
  43. package/src/palettes/jade.css +22 -26
  44. package/src/palettes/lime.css +22 -26
  45. package/src/palettes/orange.css +22 -26
  46. package/src/palettes/pink.css +22 -26
  47. package/src/palettes/pumpkin.css +25 -26
  48. package/src/palettes/purple.css +22 -26
  49. package/src/palettes/red.css +22 -26
  50. package/src/palettes/sand.css +22 -26
  51. package/src/palettes/slate.css +22 -26
  52. package/src/palettes/violet.css +22 -26
  53. package/src/palettes/yellow.css +22 -26
  54. package/src/palettes/zinc.css +22 -26
  55. package/src/semantics/attributes/_aria-busy.css +1 -10
  56. package/src/semantics/attributes/_aria-disabled.css +2 -23
  57. package/src/semantics/attributes/_disabled.css +3 -0
  58. package/src/semantics/attributes/_popover.css +4 -3
  59. package/src/semantics/attributes/_role-group-search.css +135 -0
  60. package/src/semantics/attributes/_role-list.css +23 -0
  61. package/src/semantics/attributes/_role-status-alert.css +28 -22
  62. package/src/semantics/attributes/_role-tooltip.css +11 -8
  63. package/src/semantics/elements/_address.css +2 -2
  64. package/src/semantics/elements/_aside.css +4 -3
  65. package/src/semantics/elements/_blockquote.css +6 -6
  66. package/src/semantics/elements/_body.css +0 -2
  67. package/src/semantics/elements/_buttons.css +100 -0
  68. package/src/semantics/elements/_code.css +18 -8
  69. package/src/semantics/elements/_del.css +1 -1
  70. package/src/semantics/elements/_details.css +147 -162
  71. package/src/semantics/elements/_dialog.css +24 -17
  72. package/src/semantics/elements/_fieldset.css +27 -0
  73. package/src/semantics/elements/_figure.css +1 -1
  74. package/src/semantics/elements/_footer.css +0 -1
  75. package/src/semantics/elements/_header.css +0 -1
  76. package/src/semantics/elements/_headings.css +86 -9
  77. package/src/semantics/elements/_hgroup.css +2 -2
  78. package/src/semantics/elements/_hr.css +2 -2
  79. package/src/semantics/elements/_inputs.css +14 -0
  80. package/src/semantics/elements/_ins.css +1 -1
  81. package/src/semantics/elements/_label.css +4 -0
  82. package/src/semantics/elements/_links.css +34 -41
  83. package/src/semantics/elements/_lists.css +10 -8
  84. package/src/semantics/elements/_mark.css +2 -2
  85. package/src/semantics/elements/_nav.css +65 -35
  86. package/src/semantics/elements/_p.css +2 -2
  87. package/src/semantics/elements/_progress.css +18 -11
  88. package/src/semantics/elements/{_document.css → _root.css} +12 -9
  89. package/src/semantics/elements/_section.css +0 -1
  90. package/src/semantics/elements/_small.css +27 -0
  91. package/src/semantics/elements/_table.css +20 -6
  92. package/src/semantics/elements/inputs/_checkbox-radio.css +30 -0
  93. package/src/semantics/elements/inputs/_checkbox.css +19 -0
  94. package/src/semantics/elements/{_type-color.css → inputs/_color.css} +5 -3
  95. package/src/semantics/elements/inputs/_common.css +87 -0
  96. package/src/semantics/elements/inputs/_date.css +53 -0
  97. package/src/semantics/elements/inputs/_file.css +35 -0
  98. package/src/semantics/elements/inputs/_input.css +47 -0
  99. package/src/semantics/elements/inputs/_radio.css +11 -0
  100. package/src/semantics/elements/inputs/_range.css +69 -0
  101. package/src/semantics/elements/inputs/_search.css +48 -0
  102. package/src/semantics/elements/inputs/_select.css +32 -0
  103. package/src/semantics/elements/inputs/_switch.css +46 -0
  104. package/src/semantics/elements/inputs/_textarea.css +30 -0
  105. package/src/semantics/modules.css +9 -13
  106. package/src/sizes/pico.css +24 -23
  107. package/src/utilities/_grid.css +917 -179
  108. package/src/utilities/_variables.css +21 -14
  109. package/src/utilities/borders/_border-radius.css +9 -9
  110. package/src/utilities/borders/_border-style.css +10 -10
  111. package/src/utilities/colors/_bg-colors.css +22 -38
  112. package/src/utilities/colors/_border-colors.css +20 -26
  113. package/src/utilities/colors/_subtle-colors.css +55 -61
  114. package/src/utilities/colors/_text-bg-colors.css +35 -35
  115. package/src/utilities/colors/_text-colors.css +24 -46
  116. package/src/utilities/effects/_focus-ring.css +14 -11
  117. package/src/utilities/layout/_misc.css +4 -3
  118. package/src/utilities/sizing/_width.css +48 -0
  119. package/src/utilities/spacing/_gap.css +0 -43
  120. package/src/utilities/spacing/_margin.css +0 -1
  121. package/src/utilities/spacing/_padding.css +0 -1
  122. package/src/utilities/typography/_font-sizes.css +6 -6
  123. package/src/variables/_all.css +3 -4
  124. package/src/variables/_theme.css +394 -237
  125. package/src/variants/_intent.css +8 -0
  126. package/src/variants/_variables.css +109 -9
  127. package/src/variants/intent/_common.css +33 -0
  128. package/src/variants/intent/_contrast.css +30 -31
  129. package/src/variants/intent/_danger.css +7 -30
  130. package/src/variants/intent/_info.css +7 -30
  131. package/src/variants/intent/_primary.css +7 -30
  132. package/src/variants/intent/_secondary.css +7 -30
  133. package/src/variants/intent/_success.css +7 -30
  134. package/src/variants/intent/_warning.css +7 -30
  135. package/src/variants/modifiers/_ghost.css +52 -152
  136. package/src/variants/modifiers/_striped.css +6 -5
  137. package/src/variants/modifiers/_subtle.css +55 -113
  138. package/src/variants/modules.css +1 -7
  139. package/src/semantics/attributes/_role-group.css +0 -126
  140. package/src/semantics/attributes/_role-search.css +0 -14
  141. package/src/semantics/elements/_article.css +0 -3
  142. package/src/semantics/elements/_button.css +0 -124
  143. package/src/semantics/elements/_input.css +0 -302
  144. package/src/semantics/elements/_main.css +0 -3
  145. package/src/semantics/elements/_type-checkbox-radio.css +0 -139
  146. package/src/semantics/elements/_type-date.css +0 -37
  147. package/src/semantics/elements/_type-file.css +0 -23
  148. package/src/semantics/elements/_type-range.css +0 -87
  149. package/src/semantics/elements/_type-search.css +0 -30
  150. package/src/variables/_elements.css +0 -195
package/src/utilities/_variables.css CHANGED
@@ -7,23 +7,27 @@
7
7
  --grid-gutter-y: 0;
8
8
 
9
9
  /* Gradient */
10
- --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
10
+ --gradient: linear-gradient(
11
+ 180deg,
12
+ rgba(255, 255, 255, 0.15),
13
+ rgba(255, 255, 255, 0)
14
+ );
11
15
 
12
16
  /* Borders & radii */
13
17
  --border-radius-pill: 50rem;
14
- --border-radius-1: var(--radius);
15
- --border-radius-2: calc(var(--radius) * 2);
16
- --border-radius-3: calc(var(--radius) * 4);
17
- --border-radius-4: calc(var(--radius) * 6);
18
- --border-radius-5: calc(var(--radius) * 8);
18
+ --border-radius-1: var(--border-radius);
19
+ --border-radius-2: calc(var(--border-radius) * 2);
20
+ --border-radius-3: calc(var(--border-radius) * 4);
21
+ --border-radius-4: calc(var(--border-radius) * 6);
22
+ --border-radius-5: calc(var(--border-radius) * 8);
19
23
 
20
24
  /* Border-width scale */
21
25
  --border-style: solid;
22
- --border-width-1: var(--border-size);
23
- --border-width-2: calc(var(--border-size) * 2);
24
- --border-width-3: calc(var(--border-size) * 3);
25
- --border-width-4: calc(var(--border-size) * 4);
26
- --border-width-5: calc(var(--border-size) * 5);
26
+ --border-width-1: var(--border-width);
27
+ --border-width-2: calc(var(--border-width) * 2);
28
+ --border-width-3: calc(var(--border-width) * 3);
29
+ --border-width-4: calc(var(--border-width) * 4);
30
+ --border-width-5: calc(var(--border-width) * 5);
27
31
 
28
32
  /* Spacing scale */
29
33
  --spacing-1: calc(var(--spacing) * 0.25);
@@ -33,7 +37,10 @@
33
37
  --spacing-5: calc(var(--spacing) * 3);
34
38
 
35
39
  /* Shadows */
36
- --shadow-sm: light-dark(0 0.0625rem 0.125rem rgba(129, 145, 181, 0.1), 0 0.0625rem 0.125rem rgba(7, 8.5, 12, 0.1));
37
- --shadow-md: light-dark(0.0625rem 0.125rem 0.5rem rgba(129, 145, 181, 0.15), 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15));
38
- --shadow-lg: light-dark(0.125rem 0.25rem 1rem rgba(129, 145, 181, 0.2), 0.125rem 0.25rem 1rem rgba(7, 8.5, 12, 0.2));
40
+ --shadow-sm: 0 0.05rem 0.3rem
41
+ light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1));
42
+ --shadow-md: 0 0.15rem 0.6rem
43
+ light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1));
44
+ --shadow-lg: 0 0.15rem 1rem
45
+ light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1));
39
46
  }
package/src/utilities/borders/_border-radius.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rounded {
2
- border-radius: var(--radius) !important;
2
+ border-radius: var(--border-radius) !important;
3
3
  }
4
4
 
5
5
  .rounded-0 {
@@ -35,8 +35,8 @@
35
35
  }
36
36
 
37
37
  .rounded-top {
38
- border-top-left-radius: var(--radius) !important;
39
- border-top-right-radius: var(--radius) !important;
38
+ border-top-left-radius: var(--border-radius) !important;
39
+ border-top-right-radius: var(--border-radius) !important;
40
40
  }
41
41
 
42
42
  .rounded-top-0 {
@@ -80,8 +80,8 @@
80
80
  }
81
81
 
82
82
  .rounded-end {
83
- border-top-right-radius: var(--radius) !important;
84
- border-bottom-right-radius: var(--radius) !important;
83
+ border-top-right-radius: var(--border-radius) !important;
84
+ border-bottom-right-radius: var(--border-radius) !important;
85
85
  }
86
86
 
87
87
  .rounded-end-0 {
@@ -125,8 +125,8 @@
125
125
  }
126
126
 
127
127
  .rounded-bottom {
128
- border-bottom-right-radius: var(--radius) !important;
129
- border-bottom-left-radius: var(--radius) !important;
128
+ border-bottom-right-radius: var(--border-radius) !important;
129
+ border-bottom-left-radius: var(--border-radius) !important;
130
130
  }
131
131
 
132
132
  .rounded-bottom-0 {
@@ -170,8 +170,8 @@
170
170
  }
171
171
 
172
172
  .rounded-start {
173
- border-bottom-left-radius: var(--radius) !important;
174
- border-top-left-radius: var(--radius) !important;
173
+ border-bottom-left-radius: var(--border-radius) !important;
174
+ border-top-left-radius: var(--border-radius) !important;
175
175
  }
176
176
 
177
177
  .rounded-start-0 {
package/src/utilities/borders/_border-style.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .border {
2
- --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
2
+ --_border-color: var(--border-color);
3
3
 
4
- border: var(--border-size) var(--border-style) var(--border-color) !important;
4
+ border: var(--border-width) var(--border-style) var(--_border-color) !important;
5
5
  }
6
6
 
7
7
  .border-0 {
@@ -9,9 +9,9 @@
9
9
  }
10
10
 
11
11
  .border-top {
12
- --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
12
+ --_border-color: var(--border-color);
13
13
 
14
- border-top: var(--border-size) var(--border-style) var(--border-color) !important;
14
+ border-top: var(--border-width) var(--border-style) var(--_border-color) !important;
15
15
  }
16
16
 
17
17
  .border-top-0 {
@@ -19,9 +19,9 @@
19
19
  }
20
20
 
21
21
  .border-end {
22
- --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
22
+ --_border-color: var(--border-color);
23
23
 
24
- border-right: var(--border-size) var(--border-style) var(--border-color) !important;
24
+ border-right: var(--border-width) var(--border-style) var(--_border-color) !important;
25
25
  }
26
26
 
27
27
  .border-end-0 {
@@ -29,9 +29,9 @@
29
29
  }
30
30
 
31
31
  .border-bottom {
32
- --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
32
+ --_border-color: var(--border-color);
33
33
 
34
- border-bottom: var(--border-size) var(--border-style) var(--border-color) !important;
34
+ border-bottom: var(--border-width) var(--border-style) var(--_border-color) !important;
35
35
  }
36
36
 
37
37
  .border-bottom-0 {
@@ -39,9 +39,9 @@
39
39
  }
40
40
 
41
41
  .border-start {
42
- --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
42
+ --_border-color: var(--border-color);
43
43
 
44
- border-left: var(--border-size) var(--border-style) var(--border-color) !important;
44
+ border-left: var(--border-width) var(--border-style) var(--_border-color) !important;
45
45
  }
46
46
 
47
47
  .border-start-0 {
package/src/utilities/colors/_bg-colors.css CHANGED
@@ -1,75 +1,59 @@
1
1
  .bg-transparent {
2
- --color-background: transparent;
2
+ --_background-color: transparent;
3
+
4
+ background-color: var(--_background-color) !important;
3
5
  }
4
6
 
5
7
  .bg-gradient {
6
- background-image: var(--gradient) !important;
8
+ --_background-image: var(--gradient);
9
+
10
+ background-image: var(--_background-image) !important;
7
11
  }
8
12
 
9
13
  .bg-body {
10
- --color-background: oklch(from var(--color-background) l c h / var(--color-background-opacity));
14
+ --_background-color: var(--background-color);
11
15
 
12
- background-color: var(--color-background) !important;
16
+ background-color: var(--_background-color) !important;
13
17
  }
14
18
 
15
19
  .bg-primary {
16
- --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
20
+ --_background-color: var(--primary-background-color);
17
21
 
18
- background-color: var(--color-background) !important;
22
+ background-color: var(--_background-color) !important;
19
23
  }
20
24
 
21
25
  .bg-secondary {
22
- --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
26
+ --_background-color: var(--secondary-background-color);
23
27
 
24
- background-color: var(--color-background) !important;
28
+ background-color: var(--_background-color) !important;
25
29
  }
26
30
 
27
31
  .bg-success {
28
- --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
32
+ --_background-color: var(--success-background-color);
29
33
 
30
- background-color: var(--color-background) !important;
34
+ background-color: var(--_background-color) !important;
31
35
  }
32
36
 
33
37
  .bg-info {
34
- --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
38
+ --_background-color: var(--info-background-color);
35
39
 
36
- background-color: var(--color-background) !important;
40
+ background-color: var(--_background-color) !important;
37
41
  }
38
42
 
39
43
  .bg-warning {
40
- --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
44
+ --_background-color: var(--warning-background-color);
41
45
 
42
- background-color: var(--color-background) !important;
46
+ background-color: var(--_background-color) !important;
43
47
  }
44
48
 
45
49
  .bg-danger {
46
- --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
50
+ --_background-color: var(--danger-background-color);
47
51
 
48
- background-color: var(--color-background) !important;
52
+ background-color: var(--_background-color) !important;
49
53
  }
50
54
 
51
55
  .bg-contrast {
52
- --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
53
-
54
- background-color: var(--color-background) !important;
55
- }
56
-
57
- .bg-opacity-10 {
58
- --color-background-opacity: 10%;
59
- }
60
-
61
- .bg-opacity-25 {
62
- --color-background-opacity: 25%;
63
- }
64
-
65
- .bg-opacity-50 {
66
- --color-background-opacity: 50%;
67
- }
68
-
69
- .bg-opacity-75 {
70
- --color-background-opacity: 75%;
71
- }
56
+ --_background-color: var(--contrast-background-color);
72
57
 
73
- .bg-opacity-100 {
74
- --color-background-opacity: 100%;
58
+ background-color: var(--_background-color) !important;
75
59
  }
package/src/utilities/colors/_border-colors.css CHANGED
@@ -1,47 +1,41 @@
1
1
  .border-primary {
2
- --color-border: var(--color-primary-fill);
2
+ --_border-color: var(--primary-background-color);
3
+
4
+ border-color: var(--_border-color) !important;
3
5
  }
4
6
 
5
7
  .border-secondary {
6
- --color-border: var(--color-secondary-fill);
8
+ --_border-color: var(--secondary-background-color);
9
+
10
+ border-color: var(--_border-color) !important;
7
11
  }
8
12
 
9
13
  .border-success {
10
- --color-border: var(--color-success-fill);
11
- }
14
+ --_border-color: var(--success-background-color);
12
15
 
13
- .border-info {
14
- --color-border: var(--color-info-fill);
16
+ border-color: var(--_border-color) !important;
15
17
  }
16
18
 
17
- .border-warning {
18
- --color-border: var(--color-warning-fill);
19
- }
19
+ .border-info {
20
+ --_border-color: var(--info-background-color);
20
21
 
21
- .border-danger {
22
- --color-border: var(--color-danger-fill);
22
+ border-color: var(--_border-color) !important;
23
23
  }
24
24
 
25
- .border-contrast {
26
- --color-border: var(--color-contrast-fill);
27
- }
25
+ .border-warning {
26
+ --_border-color: var(--warning-background-color);
28
27
 
29
- .border-opacity-10 {
30
- --color-border-opacity: 10%;
28
+ border-color: var(--_border-color) !important;
31
29
  }
32
30
 
33
- .border-opacity-25 {
34
- --color-border-opacity: 25%;
35
- }
31
+ .border-danger {
32
+ --_border-color: var(--danger-background-color);
36
33
 
37
- .border-opacity-50 {
38
- --color-border-opacity: 50%;
34
+ border-color: var(--_border-color) !important;
39
35
  }
40
36
 
41
- .border-opacity-75 {
42
- --color-border-opacity: 75%;
43
- }
37
+ .border-contrast {
38
+ --_border-color: var(--contrast-background-color);
44
39
 
45
- .border-opacity-100 {
46
- --color-border-opacity: 100%;
40
+ border-color: var(--_border-color) !important;
47
41
  }
package/src/utilities/colors/_subtle-colors.css CHANGED
@@ -1,145 +1,139 @@
1
1
  .bg-primary-subtle,
2
2
  .text-bg-primary-subtle {
3
- --color-background: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-background-opacity));
3
+ --_background-color: var(--primary-subtle-background-color);
4
4
 
5
- background-color: var(--color-background) !important;
5
+ background-color: var(--_background-color) !important;
6
6
  }
7
7
 
8
8
  .bg-secondary-subtle,
9
9
  .text-bg-secondary-subtle {
10
- --color-background: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-background-opacity));
10
+ --_background-color: var(--secondary-subtle-background-color);
11
11
 
12
- background-color: var(--color-background) !important;
12
+ background-color: var(--_background-color) !important;
13
13
  }
14
14
 
15
15
  .bg-contrast-subtle,
16
16
  .text-bg-contrast-subtle {
17
- --color-background: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-background-opacity));
17
+ --_background-color: var(--contrast-subtle-background-color);
18
18
 
19
- background-color: var(--color-background) !important;
19
+ background-color: var(--_background-color) !important;
20
20
  }
21
21
 
22
22
  .bg-success-subtle,
23
23
  .text-bg-success-subtle {
24
- --color-background: oklch(from var(--color-success-subtle-fill) l c h / var(--color-background-opacity));
24
+ --_background-color: var(--success-subtle-background-color);
25
25
 
26
- background-color: var(--color-background) !important;
26
+ background-color: var(--_background-color) !important;
27
27
  }
28
28
 
29
29
  .bg-info-subtle,
30
30
  .text-bg-info-subtle {
31
- --color-background: oklch(from var(--color-info-subtle-fill) l c h / var(--color-background-opacity));
31
+ --_background-color: var(--info-subtle-background-color);
32
32
 
33
- background-color: var(--color-background) !important;
33
+ background-color: var(--_background-color) !important;
34
34
  }
35
35
 
36
36
  .bg-warning-subtle,
37
37
  .text-bg-warning-subtle {
38
- --color-background: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-background-opacity));
38
+ --_background-color: var(--warning-subtle-background-color);
39
39
 
40
- background-color: var(--color-background) !important;
40
+ background-color: var(--_background-color) !important;
41
41
  }
42
42
 
43
43
  .bg-danger-subtle,
44
44
  .text-bg-danger-subtle {
45
- --color-background: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-background-opacity));
45
+ --_background-color: var(--danger-subtle-background-color);
46
46
 
47
- background-color: var(--color-background) !important;
47
+ background-color: var(--_background-color) !important;
48
48
  }
49
49
 
50
50
  .text-bg-primary-subtle {
51
- --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
52
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
51
+ --typography-color: white;
52
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
53
53
 
54
- color: var(--color-text) !important;
54
+ color: var(--typography-color) !important;
55
55
  }
56
56
 
57
57
  .text-bg-secondary-subtle {
58
- --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
59
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
58
+ --typography-color: light-dark(#191c20, #fff);
59
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
60
60
 
61
- color: var(--color-text) !important;
61
+ color: var(--typography-color) !important;
62
62
  }
63
63
 
64
64
  .text-bg-contrast-subtle {
65
- --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
66
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
65
+ --typography-color: white;
66
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
67
67
 
68
- color: var(--color-text) !important;
68
+ color: var(--typography-color) !important;
69
69
  }
70
70
 
71
71
  .text-bg-success-subtle {
72
- --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
73
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
72
+ --typography-color: white;
73
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
74
74
 
75
- color: var(--color-text) !important;
75
+ color: var(--typography-color) !important;
76
76
  }
77
77
 
78
78
  .text-bg-info-subtle {
79
- --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
80
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
79
+ --typography-color: white;
80
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
81
81
 
82
- color: var(--color-text) !important;
82
+ color: var(--typography-color) !important;
83
83
  }
84
84
 
85
85
  .text-bg-warning-subtle {
86
- --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
87
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
86
+ --typography-color: white;
87
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
88
88
 
89
- color: var(--color-text) !important;
89
+ color: var(--typography-color) !important;
90
90
  }
91
91
 
92
92
  .text-bg-danger-subtle {
93
- --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
94
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
93
+ --typography-color: white;
94
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
95
95
 
96
- color: var(--color-text) !important;
96
+ color: var(--typography-color) !important;
97
97
  }
98
98
 
99
99
  .border-primary-subtle {
100
- --border-color: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-border-opacity));
100
+ --_border-color: var(--primary-subtle-background-color);
101
+
102
+ border-color: var(--_border-color) !important;
101
103
  }
102
104
 
103
105
  .border-secondary-subtle {
104
- --border-color: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-border-opacity));
106
+ --_border-color: var(--secondary-subtle-background-color);
107
+
108
+ border-color: var(--_border-color) !important;
105
109
  }
106
110
 
107
111
  .border-contrast-subtle {
108
- --border-color: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-border-opacity));
109
- }
112
+ --_border-color: var(--contrast-subtle-background-color);
110
113
 
111
- .border-success-subtle {
112
- --border-color: oklch(from var(--color-success-subtle-fill) l c h / var(--color-border-opacity));
114
+ border-color: var(--_border-color) !important;
113
115
  }
114
116
 
115
- .border-info-subtle {
116
- --border-color: oklch(from var(--color-info-subtle-fill) l c h / var(--color-border-opacity));
117
- }
117
+ .border-success-subtle {
118
+ --_border-color: var(--success-subtle-background-color);
118
119
 
119
- .border-warning-subtle {
120
- --border-color: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-border-opacity));
120
+ border-color: var(--_border-color) !important;
121
121
  }
122
122
 
123
- .border-danger-subtle {
124
- --border-color: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-border-opacity));
125
- }
123
+ .border-info-subtle {
124
+ --_border-color: var(--info-subtle-background-color);
126
125
 
127
- .subtle-opacity-10 {
128
- --subtle-opacity: 10%;
126
+ border-color: var(--_border-color) !important;
129
127
  }
130
128
 
131
- .subtle-opacity-25 {
132
- --subtle-opacity: 25%;
133
- }
129
+ .border-warning-subtle {
130
+ --_border-color: var(--warning-subtle-background-color);
134
131
 
135
- .subtle-opacity-50 {
136
- --subtle-opacity: 50%;
132
+ border-color: var(--_border-color) !important;
137
133
  }
138
134
 
139
- .subtle-opacity-75 {
140
- --subtle-opacity: 75%;
141
- }
135
+ .border-danger-subtle {
136
+ --_border-color: var(--danger-subtle-background-color);
142
137
 
143
- .subtle-opacity-100 {
144
- --subtle-opacity: 100%;
138
+ border-color: var(--_border-color) !important;
145
139
  }
package/src/utilities/colors/_text-bg-colors.css CHANGED
@@ -1,62 +1,62 @@
1
1
  .text-bg-primary {
2
- --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
3
- --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
4
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
2
+ --_background-color: var(--primary-background-color);
3
+ --typography-color: white;
4
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
5
5
 
6
- color: var(--color-text) !important;
7
- background-color: var(--color-background) !important;
6
+ color: var(--typography-color) !important;
7
+ background-color: var(--_background-color) !important;
8
8
  }
9
9
 
10
10
  .text-bg-secondary {
11
- --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
12
- --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
13
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
11
+ --_background-color: var(--secondary-background-color);
12
+ --typography-color: white;
13
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
14
14
 
15
- color: var(--color-text) !important;
16
- background-color: var(--color-background) !important;
15
+ color: var(--typography-color) !important;
16
+ background-color: var(--_background-color) !important;
17
17
  }
18
18
 
19
19
  .text-bg-contrast {
20
- --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
21
- --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
22
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
20
+ --_background-color: var(--contrast-background-color);
21
+ --typography-color: light-dark(#fff, #191c20);
22
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
23
23
 
24
- color: var(--color-text) !important;
25
- background-color: var(--color-background) !important;
24
+ color: var(--typography-color) !important;
25
+ background-color: var(--_background-color) !important;
26
26
  }
27
27
 
28
28
  .text-bg-success {
29
- --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
30
- --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
31
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
29
+ --_background-color: var(--success-background-color);
30
+ --typography-color: white;
31
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
32
32
 
33
- color: var(--color-text) !important;
34
- background-color: var(--color-background) !important;
33
+ color: var(--typography-color) !important;
34
+ background-color: var(--_background-color) !important;
35
35
  }
36
36
 
37
37
  .text-bg-info {
38
- --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
39
- --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
40
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
38
+ --_background-color: var(--info-background-color);
39
+ --typography-color: white;
40
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
41
41
 
42
- color: var(--color-text) !important;
43
- background-color: var(--color-background) !important;
42
+ color: var(--typography-color) !important;
43
+ background-color: var(--_background-color) !important;
44
44
  }
45
45
 
46
46
  .text-bg-warning {
47
- --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
48
- --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
49
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
47
+ --_background-color: var(--warning-background-color);
48
+ --typography-color: white;
49
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
50
50
 
51
- color: var(--color-text) !important;
52
- background-color: var(--color-background) !important;
51
+ color: var(--typography-color) !important;
52
+ background-color: var(--_background-color) !important;
53
53
  }
54
54
 
55
55
  .text-bg-danger {
56
- --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
57
- --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
58
- --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
56
+ --_background-color: var(--danger-background-color);
57
+ --typography-color: white;
58
+ --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
59
59
 
60
- color: var(--color-text) !important;
61
- background-color: var(--color-background) !important;
60
+ color: var(--typography-color) !important;
61
+ background-color: var(--_background-color) !important;
62
62
  }