@oardi/css-utils 0.82.0 → 0.84.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 (3) hide show
  1. package/package.json +1 -1
  2. package/scss/components/expansion-panel.scss +14 -8
  3. 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.84.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/components/expansion-panel.scss CHANGED
@@ -24,8 +24,6 @@
24
24
  --expansion-panel-icon-closed: '+';
25
25
  --expansion-panel-icon-open: '−';
26
26
 
27
- --expansion-panel-content-max-height: 32rem;
28
-
29
27
  --expansion-panel-focus-outline-width: var(--focus-outline-width);
30
28
  --expansion-panel-focus-outline-style: var(--focus-outline-style);
31
29
  --expansion-panel-focus-outline-color: var(--focus-outline-color);
@@ -110,7 +108,8 @@
110
108
  }
111
109
 
112
110
  .expansion-panel-content {
113
- max-height: 0;
111
+ display: grid;
112
+ grid-template-rows: 0fr;
114
113
  overflow: hidden;
115
114
  opacity: 0;
116
115
  background-color: var(--expansion-panel-content-bg-color);
@@ -118,16 +117,22 @@
118
117
  border-end-end-radius: var(--expansion-panel-border-radius);
119
118
 
120
119
  transition:
121
- max-height var(--expansion-panel-content-transition-duration)
120
+ grid-template-rows var(--expansion-panel-content-transition-duration)
122
121
  var(--expansion-panel-transition-easing),
123
122
  opacity var(--expansion-panel-transition-duration)
124
123
  var(--expansion-panel-transition-easing);
125
124
 
126
125
  .expansion-panel-inner {
127
- padding: var(--expansion-panel-inner-padding);
126
+ min-height: 0;
127
+ overflow: hidden;
128
+ padding-block: 0;
129
+ padding-inline: var(--expansion-panel-inner-padding);
128
130
  transform: translateY(-0.5rem);
129
- transition: transform var(--expansion-panel-content-transition-duration)
130
- var(--expansion-panel-transition-easing);
131
+ transition:
132
+ padding-block var(--expansion-panel-content-transition-duration)
133
+ var(--expansion-panel-transition-easing),
134
+ transform var(--expansion-panel-content-transition-duration)
135
+ var(--expansion-panel-transition-easing);
131
136
  }
132
137
  }
133
138
 
@@ -137,10 +142,11 @@
137
142
  }
138
143
 
139
144
  .expansion-panel-content {
140
- max-height: var(--expansion-panel-content-max-height);
145
+ grid-template-rows: 1fr;
141
146
  opacity: 1;
142
147
 
143
148
  .expansion-panel-inner {
149
+ padding-block: var(--expansion-panel-inner-padding);
144
150
  transform: translateY(0);
145
151
  }
146
152
  }
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