@oardi/css-utils 0.82.0 → 0.83.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 (2) hide show
  1. package/package.json +1 -1
  2. package/scss/utilities.scss +20 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.82.0",
3
+ "version": "0.83.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/utilities.scss CHANGED
@@ -56,8 +56,8 @@ $-overflow-wrap-values: normal, break-word, anywhere;
56
56
  .bg-#{$name} {
57
57
  --bg-opacity-backdrop: var(--#{$name});
58
58
 
59
- color: var(--on-#{$name});
60
- fill: var(--on-#{$name});
59
+ color: contrast-color(var(--#{$name}));
60
+ fill: currentcolor;
61
61
  background-color: rgb(from var(--#{$name}) r g b / var(--bg-opacity));
62
62
 
63
63
  &:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
@@ -77,21 +77,25 @@ $-overflow-wrap-values: normal, break-word, anywhere;
77
77
  .bg-white {
78
78
  --bg-opacity-backdrop: var(--white);
79
79
 
80
+ color: contrast-color(var(--white));
81
+ fill: currentcolor;
80
82
  background-color: var(--white);
81
- color: var(--black);
82
83
  }
83
84
 
84
85
  .bg-black {
85
86
  --bg-opacity-backdrop: var(--black);
86
87
 
88
+ color: contrast-color(var(--black));
89
+ fill: currentcolor;
87
90
  background-color: var(--black);
88
- color: var(--white);
89
91
  }
90
92
 
91
93
  @each $name, $value in map.get(theme.$theme, grays) {
92
94
  .bg-gray-#{$name} {
93
95
  --bg-opacity-backdrop: var(--gray-#{$name});
94
96
 
97
+ color: contrast-color(var(--gray-#{$name}));
98
+ fill: currentcolor;
95
99
  background-color: var(--gray-#{$name});
96
100
  }
97
101
  }
@@ -99,36 +103,48 @@ $-overflow-wrap-values: normal, break-word, anywhere;
99
103
  .bg-body {
100
104
  --bg-opacity-backdrop: var(--bg-body);
101
105
 
106
+ color: contrast-color(var(--bg-body));
107
+ fill: currentcolor;
102
108
  background-color: var(--bg-body);
103
109
  }
104
110
 
105
111
  .bg-surface {
106
112
  --bg-opacity-backdrop: var(--bg-surface);
107
113
 
114
+ color: contrast-color(var(--bg-surface));
115
+ fill: currentcolor;
108
116
  background-color: var(--bg-surface);
109
117
  }
110
118
 
111
119
  .bg-inverse {
112
120
  --bg-opacity-backdrop: var(--bg-inverse);
113
121
 
122
+ color: contrast-color(var(--bg-inverse));
123
+ fill: currentcolor;
114
124
  background-color: var(--bg-inverse);
115
125
  }
116
126
 
117
127
  .bg-surface-hover {
118
128
  --bg-opacity-backdrop: var(--bg-surface-hover);
119
129
 
130
+ color: contrast-color(var(--bg-surface-hover));
131
+ fill: currentcolor;
120
132
  background-color: var(--bg-surface-hover);
121
133
  }
122
134
 
123
135
  .bg-highlight {
124
136
  --bg-opacity-backdrop: var(--bg-highlight);
125
137
 
138
+ color: contrast-color(var(--bg-highlight));
139
+ fill: currentcolor;
126
140
  background-color: var(--bg-highlight);
127
141
  }
128
142
 
129
143
  .bg-active {
130
144
  --bg-opacity-backdrop: var(--bg-active);
131
145
 
146
+ color: contrast-color(var(--bg-active));
147
+ fill: currentcolor;
132
148
  background-color: var(--bg-active);
133
149
  }
134
150