@unifiedsoftware/styles 1.0.3 → 1.0.4

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 (21) hide show
  1. package/css/styles.css +161 -114
  2. package/css/styles.min.css +1 -1
  3. package/css/theme-default.css +238 -50
  4. package/css/theme-default.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/components/_badge.scss +45 -0
  7. package/scss/components/_button.scss +13 -3
  8. package/scss/components/_chip.scss +21 -0
  9. package/scss/components/_index.scss +3 -0
  10. package/scss/components/_tabs.scss +29 -6
  11. package/scss/mixins/_button.scss +16 -0
  12. package/scss/mixins/_chip.scss +16 -0
  13. package/scss/mixins/_outline.scss +11 -0
  14. package/scss/mixins/_overlay.scss +38 -39
  15. package/scss/themes/default/_tokens.scss +3 -0
  16. package/scss/themes/default/components/_badge.scss +21 -0
  17. package/scss/themes/default/components/_button.scss +72 -50
  18. package/scss/themes/default/components/_chip.scss +165 -0
  19. package/scss/themes/default/components/_index.scss +3 -0
  20. package/scss/themes/default/components/_menu.scss +2 -3
  21. package/scss/themes/default/components/_tabs.scss +5 -6
package/scss/mixins/_overlay.scss CHANGED
@@ -1,52 +1,51 @@
1
1
  @use '../variables' as *;
2
2
 
3
- @mixin overlay {
4
- position: relative;
5
-
6
- & .#{$prefix}overlay {
3
+ @mixin overlay() {
4
+ & > .#{$prefix}overlay {
7
5
  position: absolute;
8
6
  inset: 0px;
9
7
  border-radius: inherit;
10
8
  overflow: hidden;
11
- color: inherit;
12
-
13
- &__surface {
14
- position: absolute;
15
- inset: 0px;
16
- color: var(--#{$prefix}overlay-color);
17
- opacity: var(--#{$prefix}overlay-opacity);
18
- background-color: currentColor;
19
- z-index: 0;
20
- }
21
-
22
- &::before {
23
- content: '';
24
- position: absolute;
25
- inset: 0px;
26
- opacity: 0;
27
- background-color: currentColor;
28
- transition:
29
- opacity 15ms linear,
30
- background-color 15ms linear;
31
- }
9
+ color: var(--#{$prefix}overlay-color);
10
+ opacity: var(--#{$prefix}overlay-opacity);
11
+ background-color: currentColor;
12
+ transition:
13
+ opacity 15ms linear,
14
+ background-color 15ms linear;
15
+ }
32
16
 
33
- &::after {
34
- content: '';
35
- position: absolute;
36
- inset: 0px;
37
- opacity: 0;
38
- color: var(--#{$prefix}_active-overlay-color);
39
- background-color: currentColor;
40
- transition: opacity 30ms linear;
41
- }
17
+ &:hover > .#{$prefix}overlay {
18
+ color: var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color));
19
+ opacity: var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity));
20
+ transition: opacity 30ms linear;
42
21
  }
43
22
 
44
- &:hover .#{$prefix}overlay::before {
45
- color: var(--#{$prefix}_hover-overlay-color);
46
- opacity: var(--#{$prefix}_hover-overlay-opacity);
23
+ &:active > .#{$prefix}overlay {
24
+ color: var(
25
+ --#{$prefix}_active-overlay-color,
26
+ var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
27
+ );
28
+ opacity: var(
29
+ --#{$prefix}_active-overlay-opacity,
30
+ var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
31
+ );
47
32
  }
33
+ }
48
34
 
49
- &:active .#{$prefix}overlay::after {
50
- opacity: var(--#{$prefix}_active-overlay-opacity);
35
+ @mixin outline-styles(
36
+ $color: null,
37
+ $opacity: null,
38
+ $hover-color: initial,
39
+ $hover-opacity: initial,
40
+ $active-color: initial,
41
+ $active-opacity: initial
42
+ ) {
43
+ & > .#{$prefix}overlay {
44
+ --#{$prefix}overlay-color: #{$color};
45
+ --#{$prefix}overlay-opacity: #{$opacity};
46
+ --#{$prefix}_hover-overlay-color: #{$hover-color};
47
+ --#{$prefix}_hover-overlay-opacity: #{$hover-opacity};
48
+ --#{$prefix}_active-overlay-color: #{$active-color};
49
+ --#{$prefix}_active-overlay-opacity: #{$active-opacity};
51
50
  }
52
51
  }
package/scss/themes/default/_tokens.scss CHANGED
@@ -9,4 +9,7 @@
9
9
  --#{$prefix}danger-color: #ff0017;
10
10
  --#{$prefix}black-color: #000;
11
11
  --#{$prefix}white-color: #fff;
12
+
13
+ --#{$prefix}font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
14
+ Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12
15
  }
package/scss/themes/default/components/_badge.scss ADDED
@@ -0,0 +1,21 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}badge {
4
+ --#{$prefix}badge-padding-y: 0.125rem;
5
+ --#{$prefix}badge-padding-x: 0.325rem;
6
+ --#{$prefix}badge-font-size: 0.75rem;
7
+ --#{$prefix}badge-font-weight: 700;
8
+ --#{$prefix}badge-border-radius: 9999px;
9
+ --#{$prefix}badge-border-width: 2px;
10
+ --#{$prefix}badge-border-color: var(--#{$prefix}white-color);
11
+ --#{$prefix}badge-color: var(--#{$prefix}white-color);
12
+ --#{$prefix}badge-background: var(--#{$prefix}primary-color);
13
+
14
+ /* Overlay */
15
+ --#{$prefix}overlay-color: inherit;
16
+ --#{$prefix}overlay-opacity: 0.08;
17
+ --#{$prefix}_hover-overlay-color: inherit;
18
+ --#{$prefix}_hover-overlay-opacity: 0.08;
19
+ --#{$prefix}_active-overlay-color: inherit;
20
+ --#{$prefix}_active-overlay-opacity: 0.12;
21
+ }
package/scss/themes/default/components/_button.scss CHANGED
@@ -1,19 +1,84 @@
1
1
  @use '../../../variables' as *;
2
+ @use '../../../mixins/button' as *;
2
3
 
3
4
  .#{$prefix}button {
4
5
  --#{$prefix}button-font-weight: 500;
5
- --#{$prefix}button-border-radius: 4px;
6
+ --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
6
7
 
7
8
  /* Overlay */
8
- --#{$prefix}_hover-overlay-color: inherit;
9
+ --#{$prefix}overlay-color: inherit;
10
+ --#{$prefix}overlay-opacity: 0;
11
+ --#{$prefix}_hover-overlay-opacity: 0;
9
12
  --#{$prefix}_hover-overlay-opacity: 0.08;
10
- --#{$prefix}_active-overlay-color: inherit;
11
13
  --#{$prefix}_active-overlay-opacity: 0.12;
12
14
 
15
+ /* Outline */
16
+ --#{$prefix}outline-border-width: 1px;
17
+ --#{$prefix}outline-border-color: transparent;
18
+
19
+ @include button-size(
20
+ $name: 'xs',
21
+ $height: 28px,
22
+ $padding-y: 0,
23
+ $padding-x: 0.5rem,
24
+ $font-size: 0.75rem,
25
+ $border-radius: 4px,
26
+ $gap: 0.375rem,
27
+ $icon-font-size: 0.75rem
28
+ );
29
+
30
+ @include button-size(
31
+ $name: 'sm',
32
+ $height: 32px,
33
+ $padding-y: 0,
34
+ $padding-x: 0.75rem,
35
+ $font-size: 14px,
36
+ $border-radius: 4px,
37
+ $gap: 0.375rem,
38
+ $icon-font-size: 0.875rem
39
+ );
40
+
41
+ @include button-size(
42
+ $name: 'md',
43
+ $height: 40px,
44
+ $padding-y: 0,
45
+ $padding-x: 1rem,
46
+ $font-size: 14px,
47
+ $border-radius: 4px,
48
+ $gap: 0.5rem,
49
+ $icon-font-size: 1rem
50
+ );
51
+
52
+ @include button-size(
53
+ $name: 'lg',
54
+ $height: 48px,
55
+ $padding-y: 0,
56
+ $padding-x: 1.5rem,
57
+ $font-size: 1rem,
58
+ $border-radius: 4px,
59
+ $gap: 0.5rem,
60
+ $icon-font-size: 1.125rem
61
+ );
62
+
63
+ @include button-size(
64
+ $name: 'xl',
65
+ $height: 48px,
66
+ $padding-y: 0,
67
+ $padding-x: 1.5rem,
68
+ $font-size: 1rem,
69
+ $border-radius: 4px,
70
+ $gap: 0.5rem,
71
+ $icon-font-size: 1.25rem
72
+ );
73
+
13
74
  &--filled {
14
75
  --#{$prefix}button-border-width: 1px;
15
76
  --#{$prefix}button-border-color: transparent;
16
77
  --#{$prefix}button-color: var(--#{$prefix}white-color);
78
+
79
+ .#{$prefix}chip {
80
+ --#{$prefix}chip-background: var(--#{$prefix}white-color);
81
+ }
17
82
  }
18
83
 
19
84
  &--filled#{&}--primary {
@@ -42,15 +107,8 @@
42
107
  }
43
108
 
44
109
  &--outlined {
45
- --#{$prefix}button-border-width: 1px;
46
- --#{$prefix}button-border-color: currentColor;
47
-
48
- --#{$prefix}button-elevation-opacity: 0;
49
- --#{$prefix}_hover-button-elevation-opacity: 0.08;
50
- --#{$prefix}_active-button-elevation-opacity: 0.12;
51
-
52
- --#{$prefix}button-outline-border-width: 1px;
53
- --#{$prefix}button-outline-border-color: currentColor;
110
+ /* Outline */
111
+ --#{$prefix}outline-border-color: currentColor;
54
112
  }
55
113
 
56
114
  &--outlined#{&}--primary {
@@ -77,14 +135,8 @@
77
135
  --#{$prefix}button-color: var(--#{$prefix}danger-color);
78
136
  }
79
137
 
80
- &--text {
81
- --#{$prefix}button-border-width: 1px;
82
- --#{$prefix}button-border-color: transparent;
83
-
84
- --#{$prefix}button-elevation-opacity: 0;
85
- --#{$prefix}_hover-button-elevation-opacity: 0.08;
86
- --#{$prefix}_active-button-elevation-opacity: 0.12;
87
- }
138
+ // &--text {
139
+ // }
88
140
 
89
141
  &--text#{&}--primary {
90
142
  --#{$prefix}button-color: var(--#{$prefix}primary-color);
@@ -109,34 +161,4 @@
109
161
  &--text#{&}--danger {
110
162
  --#{$prefix}button-color: var(--#{$prefix}danger-color);
111
163
  }
112
-
113
- &--sm {
114
- --#{$prefix}button-height: 32px;
115
- --#{$prefix}button-padding-y: 0;
116
- --#{$prefix}button-padding-x: 0.75rem;
117
- --#{$prefix}button-font-size: 14px;
118
- --#{$prefix}button-gap: 0.375rem;
119
-
120
- --#{$prefix}icon-font-size: 1.125rem;
121
- }
122
-
123
- &--md {
124
- --#{$prefix}button-height: 36px;
125
- --#{$prefix}button-padding-y: 0;
126
- --#{$prefix}button-padding-x: 1rem;
127
- --#{$prefix}button-font-size: 14px;
128
- --#{$prefix}button-gap: 0.5rem;
129
-
130
- --#{$prefix}icon-font-size: 1.25rem;
131
- }
132
-
133
- &--lg {
134
- --#{$prefix}button-height: 40px;
135
- --#{$prefix}button-padding-y: 0;
136
- --#{$prefix}button-padding-x: 1.25rem;
137
- --#{$prefix}button-font-size: 1rem;
138
- --#{$prefix}button-gap: 0.5rem;
139
-
140
- --#{$prefix}icon-font-size: 1.5rem;
141
- }
142
164
  }
package/scss/themes/default/components/_chip.scss ADDED
@@ -0,0 +1,165 @@
1
+ @use '../../../variables' as *;
2
+ @use '../../../mixins/chip' as *;
3
+ @use '../../../mixins/overlay' as *;
4
+
5
+ .#{$prefix}chip {
6
+ --#{$prefix}chip-padding-y: 0.125rem;
7
+ --#{$prefix}chip-padding-x: 0.5rem;
8
+ --#{$prefix}chip-font-size: 0.75rem;
9
+ --#{$prefix}chip-font-weight: 700;
10
+ --#{$prefix}chip-border-radius: 9999px;
11
+ --#{$prefix}chip-color: var(--#{$prefix}primary-color);
12
+ --#{$prefix}chip-background: transparent;
13
+
14
+ /* Overlay */
15
+ --#{$prefix}overlay-color: inherit;
16
+ --#{$prefix}overlay-opacity: 0;
17
+
18
+ @include outline-styles($color: inherit, $opacity: 0);
19
+
20
+ /* Outline */
21
+ --#{$prefix}outline-border-width: 1px;
22
+ --#{$prefix}outline-border-color: transparent;
23
+
24
+ @include chip-size(
25
+ $name: 'xs',
26
+ $height: 28px,
27
+ $padding-y: 0,
28
+ $padding-x: 0.5rem,
29
+ $font-size: 0.75rem,
30
+ $border-radius: 9999px,
31
+ $gap: 0.375rem,
32
+ $icon-font-size: 0.75rem
33
+ );
34
+
35
+ @include chip-size(
36
+ $name: 'sm',
37
+ $height: 32px,
38
+ $padding-y: 0,
39
+ $padding-x: 0.75rem,
40
+ $font-size: 14px,
41
+ $border-radius: 9999px,
42
+ $gap: 0.375rem,
43
+ $icon-font-size: 0.875rem
44
+ );
45
+
46
+ @include chip-size(
47
+ $name: 'md',
48
+ $height: 40px,
49
+ $padding-y: 0,
50
+ $padding-x: 1rem,
51
+ $font-size: 14px,
52
+ $border-radius: 9999px,
53
+ $gap: 0.5rem,
54
+ $icon-font-size: 1rem
55
+ );
56
+
57
+ @include chip-size(
58
+ $name: 'lg',
59
+ $height: 48px,
60
+ $padding-y: 0,
61
+ $padding-x: 1.5rem,
62
+ $font-size: 1rem,
63
+ $border-radius: 9999px,
64
+ $gap: 0.5rem,
65
+ $icon-font-size: 1.125rem
66
+ );
67
+
68
+ @include chip-size(
69
+ $name: 'xl',
70
+ $height: 48px,
71
+ $padding-y: 0,
72
+ $padding-x: 1.5rem,
73
+ $font-size: 1rem,
74
+ $border-radius: 9999px,
75
+ $gap: 0.5rem,
76
+ $icon-font-size: 1.25rem
77
+ );
78
+
79
+ &--filled {
80
+ --#{$prefix}chip-border-width: 1px;
81
+ --#{$prefix}chip-border-color: transparent;
82
+ --#{$prefix}chip-color: var(--#{$prefix}white-color);
83
+ }
84
+
85
+ &--filled#{&}--primary {
86
+ --#{$prefix}chip-background: var(--#{$prefix}primary-color);
87
+ }
88
+
89
+ &--filled#{&}--secondary {
90
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
91
+ --#{$prefix}chip-background: var(--#{$prefix}secondary-color);
92
+ }
93
+
94
+ &--filled#{&}--success {
95
+ --#{$prefix}chip-background: var(--#{$prefix}success-color);
96
+ }
97
+
98
+ &--filled#{&}--info {
99
+ --#{$prefix}chip-background: var(--#{$prefix}info-color);
100
+ }
101
+
102
+ &--filled#{&}--warning {
103
+ --#{$prefix}chip-background: var(--#{$prefix}warning-color);
104
+ }
105
+
106
+ &--filled#{&}--danger {
107
+ --#{$prefix}chip-background: var(--#{$prefix}danger-color);
108
+ }
109
+
110
+ &--outlined {
111
+ /* Outline */
112
+ --#{$prefix}outline-border-color: currentColor;
113
+ }
114
+
115
+ &--outlined#{&}--primary {
116
+ --#{$prefix}chip-color: var(--#{$prefix}primary-color);
117
+ }
118
+
119
+ &--outlined#{&}--secondary {
120
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
121
+ }
122
+
123
+ &--outlined#{&}--success {
124
+ --#{$prefix}chip-color: var(--#{$prefix}success-color);
125
+ }
126
+
127
+ &--outlined#{&}--info {
128
+ --#{$prefix}chip-color: var(--#{$prefix}info-color);
129
+ }
130
+
131
+ &--outlined#{&}--warning {
132
+ --#{$prefix}chip-color: var(--#{$prefix}warning-color);
133
+ }
134
+
135
+ &--outlined#{&}--danger {
136
+ --#{$prefix}chip-color: var(--#{$prefix}danger-color);
137
+ }
138
+
139
+ // &--text {
140
+ // }
141
+
142
+ &--text#{&}--primary {
143
+ --#{$prefix}chip-color: var(--#{$prefix}primary-color);
144
+ }
145
+
146
+ &--text#{&}--secondary {
147
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
148
+ }
149
+
150
+ &--text#{&}--success {
151
+ --#{$prefix}button-color: var(--#{$prefix}success-color);
152
+ }
153
+
154
+ &--text#{&}--info {
155
+ --#{$prefix}chip-color: var(--#{$prefix}info-color);
156
+ }
157
+
158
+ &--text#{&}--warning {
159
+ --#{$prefix}chip-color: var(--#{$prefix}warning-color);
160
+ }
161
+
162
+ &--text#{&}--danger {
163
+ --#{$prefix}chip-color: var(--#{$prefix}danger-color);
164
+ }
165
+ }
package/scss/themes/default/components/_index.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @use 'icon';
2
+ @use 'badge';
3
+
4
+ @use 'chip';
2
5
  @use 'button';
3
6
  @use 'menu';
4
7
  @use 'tabs';
package/scss/themes/default/components/_menu.scss CHANGED
@@ -21,15 +21,14 @@
21
21
  --#{$prefix}overlay-opacity: 0;
22
22
  --#{$prefix}_hover-overlay-color: inherit;
23
23
  --#{$prefix}_hover-overlay-opacity: 0.08;
24
- --#{$prefix}_active-overlay-opacity: 0;
25
24
 
26
25
  &--selected {
27
26
  --#{$prefix}menu-item-color: var(--#{$prefix}primary-color);
28
27
 
29
28
  --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
30
29
  --#{$prefix}overlay-opacity: 0.08;
31
- --#{$prefix}_hover-overlay-opacity: 0;
32
- --#{$prefix}_active-overlay-opacity: 0;
30
+ --#{$prefix}_hover-overlay-opacity: 0.08;
31
+ --#{$prefix}_active-overlay-opacity: 0.08;
33
32
  }
34
33
  }
35
34
 
package/scss/themes/default/components/_tabs.scss CHANGED
@@ -2,21 +2,20 @@
2
2
 
3
3
  .#{$prefix}tab {
4
4
  --#{$prefix}tab-color: var(--#{$prefix}black-color);
5
- --#{$prefix}tab-font-size: 12px;
5
+ --#{$prefix}tab-font-size: 0.8125rem;
6
6
  --#{$prefix}tab-font-weight: 500;
7
7
 
8
8
  --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-color);
9
- --#{$prefix}tab-indicator-height: 2px;
9
+ --#{$prefix}tab-indicator-height: 3px;
10
+ --#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
10
11
 
11
12
  /* Overlay */
12
- --#{$prefix}_hover-overlay-color: inherit;
13
+ --#{$prefix}overlay-opacity: 0;
14
+ --#{$prefix}overlay-color: inherit;
13
15
  --#{$prefix}_hover-overlay-opacity: 0.08;
14
- --#{$prefix}_active-overlay-color: inherit;
15
16
  --#{$prefix}_active-overlay-opacity: 0.12;
16
17
 
17
18
  &--selected {
18
19
  --#{$prefix}tab-color: var(--#{$prefix}primary-color);
19
- --#{$prefix}_hover-overlay-color: inherit;
20
- --#{$prefix}_active-overlay-color: inherit;
21
20
  }
22
21
  }