@oardi/css-utils 0.102.0 → 0.104.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 (9) hide show
  1. package/package.json +1 -1
  2. package/readme.md +4 -0
  3. package/scss/components/button.scss +29 -16
  4. package/scss/components/expansion-panel.scss +7 -1
  5. package/scss/components/icon-button.scss +29 -16
  6. package/scss/components/navbar.scss +9 -2
  7. package/scss/text.scss +6 -0
  8. package/scss/typography.scss +10 -3
  9. package/scss/variables.scss +5 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.102.0",
3
+ "version": "0.104.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/readme.md CHANGED
@@ -100,6 +100,10 @@ Define overrides after the library import to adapt the global design tokens:
100
100
  --primary-hover: #0047d6;
101
101
  --primary-active: #003cad;
102
102
  --on-primary: #ffffff;
103
+ --action-color: #0047d6;
104
+ --action-color-hover: #003cad;
105
+ --action-color-active: #002f87;
106
+ --focus-outline-color: var(--action-color);
103
107
 
104
108
  --bg-body: #fdfdfd;
105
109
  --border-radius: 0.5rem;
package/scss/components/button.scss CHANGED
@@ -7,6 +7,9 @@
7
7
  --button-color-hover: var(--text-color);
8
8
  --button-color-active: var(--text-color);
9
9
  --button-on-color: var(--on-primary);
10
+ --button-surface-color: var(--button-color);
11
+ --button-surface-color-hover: var(--button-color-hover);
12
+ --button-surface-color-active: var(--button-color-active);
10
13
 
11
14
  --button-border-width: var(--border-width);
12
15
  --button-border-radius: var(--border-radius);
@@ -81,34 +84,44 @@
81
84
 
82
85
  @each $name, $value in map.get(theme.$theme, colors) {
83
86
  .btn-#{$name} {
84
- --button-color: var(--#{$name});
85
- --button-color-hover: var(--#{$name}-hover);
86
- --button-color-active: var(--#{$name}-active);
87
+ @if $name == 'primary' {
88
+ --button-color: var(--action-color);
89
+ --button-color-hover: var(--action-color-hover);
90
+ --button-color-active: var(--action-color-active);
91
+ } @else {
92
+ --button-color: var(--#{$name});
93
+ --button-color-hover: var(--#{$name}-hover);
94
+ --button-color-active: var(--#{$name}-active);
95
+ }
96
+
97
+ --button-surface-color: var(--#{$name});
98
+ --button-surface-color-hover: var(--#{$name}-hover);
99
+ --button-surface-color-active: var(--#{$name}-active);
87
100
  --button-on-color: var(--on-#{$name});
88
101
  }
89
102
  }
90
103
 
91
104
  .btn-solid {
92
105
  color: var(--button-on-color);
93
- background-color: var(--button-color);
94
- border-color: var(--button-color);
106
+ background-color: var(--button-surface-color);
107
+ border-color: var(--button-surface-color);
95
108
 
96
109
  &:hover {
97
110
  color: var(--button-on-color);
98
- background-color: var(--button-color-hover);
99
- border-color: var(--button-color-hover);
111
+ background-color: var(--button-surface-color-hover);
112
+ border-color: var(--button-surface-color-hover);
100
113
  }
101
114
 
102
115
  &.is-active,
103
116
  &:active {
104
- background-color: var(--button-color-active);
105
- border-color: var(--button-color-active);
117
+ background-color: var(--button-surface-color-active);
118
+ border-color: var(--button-surface-color-active);
106
119
  }
107
120
 
108
121
  &:focus-visible,
109
122
  &.is-focus-visible {
110
123
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
111
- var(--button-color);
124
+ var(--button-focus-outline-color);
112
125
  outline-offset: var(--button-focus-outline-offset);
113
126
  box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
114
127
  }
@@ -121,21 +134,21 @@
121
134
 
122
135
  &:hover {
123
136
  color: var(--button-on-color);
124
- background-color: var(--button-color-hover);
125
- border-color: var(--button-color-hover);
137
+ background-color: var(--button-surface-color-hover);
138
+ border-color: var(--button-surface-color-hover);
126
139
  }
127
140
 
128
141
  &.is-active,
129
142
  &:active {
130
143
  color: var(--button-on-color);
131
- background-color: var(--button-color-active);
132
- border-color: var(--button-color-active);
144
+ background-color: var(--button-surface-color-active);
145
+ border-color: var(--button-surface-color-active);
133
146
  }
134
147
 
135
148
  &:focus-visible,
136
149
  &.is-focus-visible {
137
150
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
138
- var(--button-color);
151
+ var(--button-focus-outline-color);
139
152
  outline-offset: var(--button-focus-outline-offset);
140
153
  box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
141
154
  }
@@ -162,7 +175,7 @@
162
175
  &:focus-visible,
163
176
  &.is-focus-visible {
164
177
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
165
- var(--button-color);
178
+ var(--button-focus-outline-color);
166
179
  outline-offset: var(--button-focus-outline-offset);
167
180
  box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
168
181
  }
package/scss/components/expansion-panel.scss CHANGED
@@ -14,6 +14,8 @@
14
14
  --expansion-panel-bg-color: var(--bg-surface);
15
15
  --expansion-panel-header-bg-color: var(--bg-surface);
16
16
  --expansion-panel-content-bg-color: var(--bg-surface);
17
+ --expansion-panel-header-hover-color: var(--action-color);
18
+ --expansion-panel-header-active-color: var(--action-color-active);
17
19
 
18
20
  --expansion-panel-border-width: var(--border-width);
19
21
  --expansion-panel-border-color: var(--border-color);
@@ -99,7 +101,11 @@
99
101
 
100
102
  &:hover {
101
103
  cursor: pointer;
102
- color: var(--primary);
104
+ color: var(--expansion-panel-header-hover-color);
105
+ }
106
+
107
+ &:active {
108
+ color: var(--expansion-panel-header-active-color);
103
109
  }
104
110
 
105
111
  &:focus {
package/scss/components/icon-button.scss CHANGED
@@ -7,6 +7,9 @@
7
7
  --icon-button-color-hover: var(--text-color);
8
8
  --icon-button-color-active: var(--text-color);
9
9
  --icon-button-on-color: var(--on-primary);
10
+ --icon-button-surface-color: var(--icon-button-color);
11
+ --icon-button-surface-color-hover: var(--icon-button-color-hover);
12
+ --icon-button-surface-color-active: var(--icon-button-color-active);
10
13
 
11
14
  --icon-button-bg-color: transparent;
12
15
  --icon-button-border-color: transparent;
@@ -79,35 +82,45 @@
79
82
 
80
83
  @each $name, $value in map.get(theme.$theme, colors) {
81
84
  .icon-btn-#{$name} {
82
- --icon-button-color: var(--#{$name});
83
- --icon-button-color-hover: var(--#{$name}-hover);
84
- --icon-button-color-active: var(--#{$name}-active);
85
+ @if $name == 'primary' {
86
+ --icon-button-color: var(--action-color);
87
+ --icon-button-color-hover: var(--action-color-hover);
88
+ --icon-button-color-active: var(--action-color-active);
89
+ } @else {
90
+ --icon-button-color: var(--#{$name});
91
+ --icon-button-color-hover: var(--#{$name}-hover);
92
+ --icon-button-color-active: var(--#{$name}-active);
93
+ }
94
+
95
+ --icon-button-surface-color: var(--#{$name});
96
+ --icon-button-surface-color-hover: var(--#{$name}-hover);
97
+ --icon-button-surface-color-active: var(--#{$name}-active);
85
98
  --icon-button-on-color: var(--on-#{$name});
86
99
  }
87
100
  }
88
101
 
89
102
  .icon-btn-solid {
90
103
  color: var(--icon-button-on-color);
91
- background-color: var(--icon-button-color);
92
- border-color: var(--icon-button-color);
104
+ background-color: var(--icon-button-surface-color);
105
+ border-color: var(--icon-button-surface-color);
93
106
 
94
107
  &:hover {
95
108
  color: var(--icon-button-on-color);
96
- background-color: var(--icon-button-color-hover);
97
- border-color: var(--icon-button-color-hover);
109
+ background-color: var(--icon-button-surface-color-hover);
110
+ border-color: var(--icon-button-surface-color-hover);
98
111
  }
99
112
 
100
113
  &:active,
101
114
  &.is-active {
102
115
  color: var(--icon-button-on-color);
103
- background-color: var(--icon-button-color-active);
104
- border-color: var(--icon-button-color-active);
116
+ background-color: var(--icon-button-surface-color-active);
117
+ border-color: var(--icon-button-surface-color-active);
105
118
  }
106
119
 
107
120
  &:focus-visible,
108
121
  &.is-focus-visible {
109
122
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
110
- var(--icon-button-color);
123
+ var(--icon-button-focus-outline-color);
111
124
  box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
112
125
  var(--icon-button-on-color);
113
126
  }
@@ -134,7 +147,7 @@
134
147
  &:focus-visible,
135
148
  &.is-focus-visible {
136
149
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
137
- var(--icon-button-color);
150
+ var(--icon-button-focus-outline-color);
138
151
  background-color: var(--icon-button-highlight);
139
152
  box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
140
153
  var(--icon-button-on-color);
@@ -148,21 +161,21 @@
148
161
 
149
162
  &:hover {
150
163
  color: var(--icon-button-on-color);
151
- background-color: var(--icon-button-color-hover);
152
- border-color: var(--icon-button-color-hover);
164
+ background-color: var(--icon-button-surface-color-hover);
165
+ border-color: var(--icon-button-surface-color-hover);
153
166
  }
154
167
 
155
168
  &:active,
156
169
  &.is-active {
157
170
  color: var(--icon-button-on-color);
158
- background-color: var(--icon-button-color-active);
159
- border-color: var(--icon-button-color-active);
171
+ background-color: var(--icon-button-surface-color-active);
172
+ border-color: var(--icon-button-surface-color-active);
160
173
  }
161
174
 
162
175
  &:focus-visible,
163
176
  &.is-focus-visible {
164
177
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
165
- var(--icon-button-color);
178
+ var(--icon-button-focus-outline-color);
166
179
  box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
167
180
  var(--icon-button-on-color);
168
181
  }
package/scss/components/navbar.scss CHANGED
@@ -11,9 +11,11 @@
11
11
  --navbar-min-height: 3.75rem;
12
12
 
13
13
  --navbar-link-color: var(--navbar-text-color);
14
- --navbar-link-hover-color: var(--primary-hover);
14
+ --navbar-link-hover-color: var(--action-color-hover);
15
+ --navbar-link-active-color: var(--action-color-active);
15
16
 
16
- --navbar-logo-hover-color: var(--primary-hover);
17
+ --navbar-logo-hover-color: var(--action-color-hover);
18
+ --navbar-logo-active-color: var(--action-color-active);
17
19
 
18
20
  display: flex;
19
21
  align-items: center;
@@ -26,6 +28,7 @@
26
28
  a {
27
29
  --link-text-color: var(--navbar-link-color);
28
30
  --link-hover-color: var(--navbar-link-hover-color);
31
+ --link-active-color: var(--navbar-link-active-color);
29
32
  }
30
33
 
31
34
  .navbar-logo {
@@ -36,6 +39,10 @@
36
39
  color: var(--navbar-logo-hover-color);
37
40
  text-decoration: none;
38
41
  }
42
+
43
+ &:active {
44
+ color: var(--navbar-logo-active-color);
45
+ }
39
46
  }
40
47
  }
41
48
  }
package/scss/text.scss CHANGED
@@ -54,6 +54,12 @@ $letterSpacings: 0, 1, 2, 3, 4, 5;
54
54
  color: var(--#{$name});
55
55
  fill: var(--#{$name});
56
56
  }
57
+
58
+ .text-underline-#{$name} {
59
+ text-decoration: underline;
60
+ text-underline-offset: var(--spacer-2);
61
+ text-decoration-color: var(--#{$name});
62
+ }
57
63
  }
58
64
 
59
65
  .text-white {
package/scss/typography.scss CHANGED
@@ -66,7 +66,9 @@
66
66
  }
67
67
 
68
68
  a {
69
- --link-text-color: var(--primary);
69
+ --link-text-color: var(--action-color);
70
+ --link-hover-color: var(--action-color-hover);
71
+ --link-active-color: var(--action-color-active);
70
72
 
71
73
  --link-focus-outline-width: var(--focus-outline-width);
72
74
  --link-focus-outline-style: var(--focus-outline-style);
@@ -88,11 +90,16 @@
88
90
  outline-offset var(--link-transition-duration) var(--link-transition-easing);
89
91
 
90
92
  &:hover {
91
- color: var(--link-hover-color, var(--link-text-color));
92
- fill: var(--link-hover-color, var(--link-text-color));
93
+ color: var(--link-hover-color);
94
+ fill: var(--link-hover-color);
93
95
  text-decoration: underline;
94
96
  }
95
97
 
98
+ &:active {
99
+ color: var(--link-active-color);
100
+ fill: var(--link-active-color);
101
+ }
102
+
96
103
  &:focus-visible {
97
104
  outline: var(--link-focus-outline-width) var(--link-focus-outline-style)
98
105
  var(--link-focus-outline-color);
package/scss/variables.scss CHANGED
@@ -57,6 +57,10 @@
57
57
  --text-inverse: var(--gray-50);
58
58
  --text-subtle: var(--gray-600);
59
59
 
60
+ --action-color: var(--primary);
61
+ --action-color-hover: var(--primary-hover);
62
+ --action-color-active: var(--primary-active);
63
+
60
64
  --border-width: 1px;
61
65
  --border-color: var(--gray-100);
62
66
  --control-border-color: var(--gray-550);
@@ -73,7 +77,7 @@
73
77
  --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
74
78
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.2);
75
79
 
76
- --focus-outline-color: var(--primary);
80
+ --focus-outline-color: var(--action-color);
77
81
  --focus-outline-style: solid;
78
82
  --focus-outline-width: 2.5px;
79
83
  --focus-offset: 0px;