@unifiedsoftware/styles 1.0.12 → 1.0.14

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 (28) hide show
  1. package/README.md +26 -0
  2. package/css/fci.css +40 -7
  3. package/css/fci.min.css +1 -1
  4. package/css/styles.css +61 -11
  5. package/css/styles.min.css +1 -1
  6. package/package.json +1 -1
  7. package/scss/components/_breadcrumb.scss +20 -0
  8. package/scss/components/_index.scss +3 -0
  9. package/scss/components/_list.scss +0 -6
  10. package/scss/components/_menu.scss +14 -8
  11. package/scss/components/_result.scss +36 -0
  12. package/scss/themes/fci/_tokens.scss +6 -0
  13. package/scss/themes/fci/components/_breadcrumb.scss +0 -0
  14. package/scss/themes/fci/components/_button.scss +0 -1
  15. package/scss/themes/fci/components/_card.scss +7 -1
  16. package/scss/themes/fci/components/_index.scss +1 -0
  17. package/scss/themes/fci/components/_list.scss +43 -41
  18. package/scss/themes/fci/components/_menu.scss +39 -37
  19. package/scss/themes/fci/components/_result.scss +53 -0
  20. package/scss/themes/fci/components/_tabs.scss +3 -3
  21. package/scss/themes/test-dark/_index.scss +3 -0
  22. package/scss/themes/test-dark/_tokens.scss +17 -0
  23. package/scss/themes/test-dark/components/_button.scss +151 -0
  24. package/scss/themes/test-dark/components/_index.scss +1 -0
  25. package/scss/themes/test-light/_index.scss +3 -0
  26. package/scss/themes/test-light/_tokens.scss +15 -0
  27. package/scss/themes/test-light/components/_button.scss +150 -0
  28. package/scss/themes/test-light/components/_index.scss +1 -0
package/scss/themes/fci/components/_button.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @use '../../../variables' as *;
2
- @use '../../../mixins/button' as *;
3
2
 
4
3
  $colors-map: (
5
4
  primary: var(--#{$prefix}primary-color),
package/scss/themes/fci/components/_card.scss CHANGED
@@ -14,8 +14,14 @@
14
14
  }
15
15
 
16
16
  .#{$prefix}card-header__title {
17
- --#{$prefix}card-header-title-font-size: 0.75rem;
17
+ --#{$prefix}card-header-title-font-size: 0.875rem;
18
18
  --#{$prefix}card-header-title-font-weight: 600;
19
19
  --#{$prefix}card-header-title-line-height: 24px;
20
20
  }
21
+
22
+ .#{$prefix}card-header__subtitle {
23
+ --#{$prefix}card-header-subtitle-font-size: 0.75rem;
24
+ --#{$prefix}card-header-subtitle-font-weight: 400;
25
+ --#{$prefix}card-header-subtitle-line-height: 18px;
26
+ }
21
27
  }
package/scss/themes/fci/components/_index.scss CHANGED
@@ -16,3 +16,4 @@
16
16
  @use 'tabs';
17
17
 
18
18
  @use 'card';
19
+ @use 'result';
package/scss/themes/fci/components/_list.scss CHANGED
@@ -6,62 +6,64 @@
6
6
  --#{$prefix}list-padding-x: 0px;
7
7
  --#{$prefix}list-color: #343a40;
8
8
  --#{$prefix}list-background: #fff;
9
+ }
9
10
 
10
- &-item {
11
- --#{$prefix}list-item-height: 40px;
12
- --#{$prefix}list-item-padding-y: 0px;
13
- --#{$prefix}list-item-padding-x: 1rem;
14
- --#{$prefix}list-item-padding-level: 1.25rem;
15
- --#{$prefix}list-item-font-size: 12px;
16
- --#{$prefix}list-item-font-weight: 500;
17
- --#{$prefix}list-item-border-radius: 0px;
18
- --#{$prefix}list-item-gap: 1rem;
11
+ .#{$prefix}list-item {
12
+ --#{$prefix}list-item-height: 40px;
13
+ --#{$prefix}list-item-padding-y: 0px;
14
+ --#{$prefix}list-item-padding-x: 1rem;
15
+ --#{$prefix}list-item-padding-level: 1.25rem;
16
+ --#{$prefix}list-item-font-size: 12px;
17
+ --#{$prefix}list-item-font-weight: 500;
18
+ --#{$prefix}list-item-border-radius: 0px;
19
+ --#{$prefix}list-item-gap: 1rem;
19
20
 
20
- --#{$prefix}list-item-title-font-size: 12px;
21
- --#{$prefix}list-item-title-font-weight: 500;
21
+ --#{$prefix}list-item-title-font-size: 12px;
22
+ --#{$prefix}list-item-title-font-weight: 500;
22
23
 
23
- --#{$prefix}list-item-subtitle-font-size: 12px;
24
- --#{$prefix}list-item-subtitle-font-weight: 400;
24
+ --#{$prefix}list-item-subtitle-font-size: 12px;
25
+ --#{$prefix}list-item-subtitle-font-weight: 400;
25
26
 
26
- & > .#{$prefix}overlay {
27
- --#{$prefix}overlay-color: inherit;
28
- --#{$prefix}overlay-opacity: 0;
29
- --#{$prefix}_hover-overlay-color: inherit;
30
- --#{$prefix}_hover-overlay-opacity: 0.04;
31
- --#{$prefix}_active-overlay-opacity: 0.08;
32
- }
27
+ & > .#{$prefix}overlay {
28
+ --#{$prefix}overlay-color: inherit;
29
+ --#{$prefix}overlay-opacity: 0;
30
+ --#{$prefix}_hover-overlay-color: inherit;
31
+ --#{$prefix}_hover-overlay-opacity: 0.04;
32
+ --#{$prefix}_active-overlay-opacity: 0.08;
33
+ }
33
34
 
34
- & .#{$prefix}icon {
35
- --#{$prefix}icon-font-size: 16px;
36
- --#{$prefix}icon-color: var(--#{$prefix}primary-color);
37
- }
35
+ .#{$prefix}icon {
36
+ --#{$prefix}icon-font-size: 16px;
37
+ --#{$prefix}icon-color: var(--#{$prefix}primary-color);
38
+ }
38
39
 
39
- &--selected {
40
- --#{$prefix}list-item-color: var(--#{$prefix}primary-color);
41
- }
40
+ &--selected {
41
+ --#{$prefix}list-item-color: var(--#{$prefix}primary-color);
42
42
 
43
- &--selected > .#{$prefix}overlay {
43
+ & > .#{$prefix}overlay {
44
44
  --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
45
45
  --#{$prefix}overlay-opacity: 0.08;
46
46
  --#{$prefix}_hover-overlay-opacity: 0.12;
47
47
  --#{$prefix}_active-overlay-opacity: 0.16;
48
48
  }
49
49
  }
50
+ }
50
51
 
51
- &-subheader {
52
- --#{$prefix}list-subheader-height: 40px;
53
- --#{$prefix}list-subheader-padding-y: 0;
54
- --#{$prefix}list-subheader-padding-x: 1rem;
55
- --#{$prefix}list-subheader-padding-level: 2rem;
56
- --#{$prefix}list-subheader-font-size: 12px;
57
- --#{$prefix}list-subheader-font-weight: 700;
58
- --#{$prefix}list-subheader-border-radius: 0;
59
- --#{$prefix}list-subheader-gap: 1rem;
60
- --#{$prefix}list-subheader-border-width: 1px;
61
- --#{$prefix}list-subheader-border-color: #dee2e6;
62
- }
52
+ .#{$prefix}list-subheader {
53
+ --#{$prefix}list-subheader-height: 40px;
54
+ --#{$prefix}list-subheader-padding-y: 0;
55
+ --#{$prefix}list-subheader-padding-x: 1rem;
56
+ --#{$prefix}list-subheader-padding-level: 2rem;
57
+ --#{$prefix}list-subheader-font-size: 12px;
58
+ --#{$prefix}list-subheader-font-weight: 700;
59
+ --#{$prefix}list-subheader-border-radius: 0;
60
+ --#{$prefix}list-subheader-gap: 1rem;
61
+ --#{$prefix}list-subheader-border-width: 1px;
62
+ --#{$prefix}list-subheader-border-color: #dee2e6;
63
+ }
63
64
 
64
- &-group > &-item--selected > .#{$prefix}overlay {
65
+ .#{$prefix}list-group > .#{$prefix}list-item--selected {
66
+ & > .#{$prefix}overlay {
65
67
  --#{$prefix}overlay-opacity: 0;
66
68
  --#{$prefix}_hover-overlay-opacity: 0;
67
69
  --#{$prefix}_active-overlay-opacity: 0;
package/scss/themes/fci/components/_menu.scss CHANGED
@@ -6,55 +6,57 @@
6
6
  --#{$prefix}menu-padding-x: 0;
7
7
  --#{$prefix}menu-color: #343a40;
8
8
  --#{$prefix}menu-background: #fff;
9
+ }
9
10
 
10
- &-item {
11
- --#{$prefix}menu-item-height: 40px;
12
- --#{$prefix}menu-item-padding-y: 0;
13
- --#{$prefix}menu-item-padding-x: 1rem;
14
- --#{$prefix}menu-item-padding-level: 2rem;
15
- --#{$prefix}menu-item-font-size: 12px;
16
- --#{$prefix}menu-item-font-weight: 500;
17
- --#{$prefix}menu-item-border-radius: 0;
18
- --#{$prefix}menu-item-gap: 1rem;
19
-
20
- & > .#{$prefix}overlay {
21
- --#{$prefix}overlay-color: inherit;
22
- --#{$prefix}overlay-opacity: 0;
23
- --#{$prefix}_hover-overlay-color: inherit;
24
- --#{$prefix}_hover-overlay-opacity: 0.08;
25
- }
11
+ .#{$prefix}menu-item {
12
+ --#{$prefix}menu-item-height: 40px;
13
+ --#{$prefix}menu-item-padding-y: 0;
14
+ --#{$prefix}menu-item-padding-x: 1rem;
15
+ --#{$prefix}menu-item-padding-level: 2rem;
16
+ --#{$prefix}menu-item-font-size: 12px;
17
+ --#{$prefix}menu-item-font-weight: 500;
18
+ --#{$prefix}menu-item-border-radius: 0;
19
+ --#{$prefix}menu-item-gap: 1rem;
26
20
 
27
- &__icon .#{$prefix}icon {
28
- --#{$prefix}icon-font-size: 16px;
29
- --#{$prefix}icon-color: var(--#{$prefix}primary-color);
30
- }
21
+ & > .#{$prefix}overlay {
22
+ --#{$prefix}overlay-color: inherit;
23
+ --#{$prefix}overlay-opacity: 0;
24
+ --#{$prefix}_hover-overlay-color: inherit;
25
+ --#{$prefix}_hover-overlay-opacity: 0.08;
26
+ }
31
27
 
32
- &--selected {
33
- --#{$prefix}menu-item-color: var(--#{$prefix}primary-color);
34
- }
28
+ .#{$prefix}icon {
29
+ --#{$prefix}icon-font-size: 16px;
30
+ --#{$prefix}icon-color: var(--#{$prefix}primary-color);
31
+ }
32
+
33
+ &--selected {
34
+ --#{$prefix}menu-item-color: var(--#{$prefix}primary-color);
35
35
 
36
- &--selected > .#{$prefix}overlay {
36
+ > .#{$prefix}overlay {
37
37
  --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
38
38
  --#{$prefix}overlay-opacity: 0.08;
39
39
  --#{$prefix}_hover-overlay-opacity: 0.08;
40
40
  --#{$prefix}_active-overlay-opacity: 0.08;
41
41
  }
42
42
  }
43
+ }
43
44
 
44
- &-group {
45
- --#{$prefix}menu-group-height: 40px;
46
- --#{$prefix}menu-group-padding-y: 0;
47
- --#{$prefix}menu-group-padding-x: 1rem;
48
- --#{$prefix}menu-group-padding-level: 2rem;
49
- --#{$prefix}menu-group-font-size: 12px;
50
- --#{$prefix}menu-group-font-weight: 700;
51
- --#{$prefix}menu-group-border-radius: 0;
52
- --#{$prefix}menu-group-gap: 1rem;
53
- --#{$prefix}menu-group-border-width: 1px;
54
- --#{$prefix}menu-group-border-color: #dee2e6;
55
- }
45
+ .#{$prefix}menu-group {
46
+ --#{$prefix}menu-group-height: 40px;
47
+ --#{$prefix}menu-group-padding-y: 0;
48
+ --#{$prefix}menu-group-padding-x: 1rem;
49
+ --#{$prefix}menu-group-padding-level: 2rem;
50
+ --#{$prefix}menu-group-font-size: 12px;
51
+ --#{$prefix}menu-group-font-weight: 700;
52
+ --#{$prefix}menu-group-border-radius: 0;
53
+ --#{$prefix}menu-group-gap: 1rem;
54
+ --#{$prefix}menu-group-border-width: 1px;
55
+ --#{$prefix}menu-group-border-color: #dee2e6;
56
+ }
56
57
 
57
- &-submenu > &-item--selected > .#{$prefix}overlay {
58
+ .#{$prefix}menu-submenu > .#{$prefix}menu-item--selected {
59
+ & > .#{$prefix}overlay {
58
60
  --#{$prefix}overlay-opacity: 0;
59
61
  --#{$prefix}_hover-overlay-opacity: 0;
60
62
  --#{$prefix}_active-overlay-opacity: 0;
package/scss/themes/fci/components/_result.scss ADDED
@@ -0,0 +1,53 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}result {
5
+ --#{$prefix}result-gap: 1.5rem;
6
+
7
+ --#{$prefix}result-content-gap: 0.5rem;
8
+
9
+ --#{$prefix}result-title-font-size: 1.25rem;
10
+ --#{$prefix}result-title-font-weight: 500;
11
+
12
+ --#{$prefix}result-subtitle-font-size: 0.875rem;
13
+ --#{$prefix}result-subtitle-font-weight: 400;
14
+
15
+ &__icon {
16
+ & > .#{$prefix}icon {
17
+ --#{$prefix}icon-font-size: 4.5rem;
18
+ }
19
+ }
20
+ }
21
+
22
+ .#{$prefix}result--sucess {
23
+ .#{$prefix}result__icon {
24
+ & > .#{$prefix}icon {
25
+ --#{$prefix}icon-color: var(--#{$prefix}success-color);
26
+ }
27
+ }
28
+ }
29
+
30
+ .#{$prefix}result--info {
31
+ .#{$prefix}result__icon {
32
+ & > .#{$prefix}icon {
33
+ --#{$prefix}icon-color: var(--#{$prefix}info-color);
34
+ }
35
+ }
36
+ }
37
+
38
+ .#{$prefix}result--warning {
39
+ .#{$prefix}result__icon {
40
+ & > .#{$prefix}icon {
41
+ --#{$prefix}icon-color: var(--#{$prefix}warning-color);
42
+ }
43
+ }
44
+ }
45
+
46
+ .#{$prefix}result--danger {
47
+ .#{$prefix}result__icon {
48
+ & > .#{$prefix}icon {
49
+ --#{$prefix}icon-color: var(--#{$prefix}danger-color);
50
+ }
51
+ }
52
+ }
53
+ }
package/scss/themes/fci/components/_tabs.scss CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  .#{$prefix}theme-fci {
4
4
  .#{$prefix}tab {
5
- --#{$prefix}tab-color: var(--#{$prefix}black-color);
5
+ --#{$prefix}tab-color: var(--#{$prefix}secondary-action-color);
6
6
  --#{$prefix}tab-font-size: 0.8125rem;
7
7
  --#{$prefix}tab-font-weight: 500;
8
8
 
9
- --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-color);
9
+ --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
10
10
  --#{$prefix}tab-indicator-height: 3px;
11
11
  --#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
12
12
 
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  &--selected {
21
- --#{$prefix}tab-color: var(--#{$prefix}primary-color);
21
+ --#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
22
22
  }
23
23
  }
24
24
  }
package/scss/themes/test-dark/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ @use 'components';
2
+
3
+ @use 'tokens';
package/scss/themes/test-dark/_tokens.scss ADDED
@@ -0,0 +1,17 @@
1
+ @use '../../variables' as *;
2
+
3
+ .#{$prefix}theme-test-dark {
4
+ --#{$prefix}primary-color: #93c5fd;
5
+ --#{$prefix}secondary-color: #dde4eb;
6
+ --#{$prefix}success-color: #86efac;
7
+ --#{$prefix}info-color: #7dd3fc;
8
+ --#{$prefix}warning-color: #ffaf00;
9
+ --#{$prefix}danger-color: #fca5a5;
10
+ --#{$prefix}black-color: #000;
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;
15
+
16
+ --#{$prefix}body-background-color: #000;
17
+ }
package/scss/themes/test-dark/components/_button.scss ADDED
@@ -0,0 +1,151 @@
1
+ @use '../../../variables' as *;
2
+
3
+ $colors-map: (
4
+ primary: var(--#{$prefix}primary-color),
5
+ secondary: var(--#{$prefix}secondary-color),
6
+ success: var(--#{$prefix}success-color),
7
+ info: var(--#{$prefix}info-color),
8
+ warning: var(--#{$prefix}warning-color),
9
+ danger: var(--#{$prefix}danger-color),
10
+ );
11
+
12
+ .#{$prefix}theme-test-dark {
13
+ .#{$prefix}button {
14
+ --#{$prefix}button-font-weight: 500;
15
+ --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
16
+ --#{$prefix}button-border-radius: 9999px;
17
+
18
+ & > .#{$prefix}overlay {
19
+ --#{$prefix}overlay-color: inherit;
20
+ --#{$prefix}overlay-opacity: 0;
21
+ --#{$prefix}_hover-overlay-opacity: 0;
22
+ --#{$prefix}_hover-overlay-opacity: 0.12;
23
+ --#{$prefix}_active-overlay-opacity: 0.24;
24
+ }
25
+
26
+ & > .#{$prefix}outline {
27
+ --#{$prefix}outline-border-width: 2px;
28
+ --#{$prefix}outline-border-color: transparent;
29
+ }
30
+
31
+ &--xs {
32
+ --#{$prefix}button-height: 20px;
33
+ --#{$prefix}button-padding-y: 0;
34
+ --#{$prefix}button-padding-x: 0.5rem;
35
+ --#{$prefix}button-font-size: 0.625rem;
36
+ --#{$prefix}button-gap: 0.25rem;
37
+
38
+ .#{$prefix}icon {
39
+ --#{$prefix}icon-font-size: 0.75rem;
40
+ }
41
+ }
42
+
43
+ &--sm {
44
+ --#{$prefix}button-height: 28px;
45
+ --#{$prefix}button-padding-y: 0;
46
+ --#{$prefix}button-padding-x: 0.75rem;
47
+ --#{$prefix}button-font-size: 0.75rem;
48
+ --#{$prefix}button-gap: 0.375rem;
49
+
50
+ .#{$prefix}icon {
51
+ --#{$prefix}icon-font-size: 1rem;
52
+ }
53
+ }
54
+
55
+ &--md {
56
+ --#{$prefix}button-height: 36px;
57
+ --#{$prefix}button-padding-y: 0;
58
+ --#{$prefix}button-padding-x: 1rem;
59
+ --#{$prefix}button-font-size: 0.875rem;
60
+ --#{$prefix}button-gap: 0.5rem;
61
+
62
+ .#{$prefix}icon {
63
+ --#{$prefix}icon-font-size: 1.125rem;
64
+ }
65
+ }
66
+
67
+ &--lg {
68
+ --#{$prefix}button-height: 44px;
69
+ --#{$prefix}button-padding-y: 0;
70
+ --#{$prefix}button-padding-x: 1.25rem;
71
+ --#{$prefix}button-font-size: 1rem;
72
+ --#{$prefix}button-gap: 0.625rem;
73
+
74
+ .#{$prefix}icon {
75
+ --#{$prefix}icon-font-size: 1.25rem;
76
+ }
77
+ }
78
+
79
+ &--xl {
80
+ --#{$prefix}button-height: 52px;
81
+ --#{$prefix}button-padding-y: 0;
82
+ --#{$prefix}button-padding-x: 1.5rem;
83
+ --#{$prefix}button-font-size: 1rem;
84
+ --#{$prefix}button-gap: 0.75rem;
85
+
86
+ .#{$prefix}icon {
87
+ --#{$prefix}icon-font-size: 1.5rem;
88
+ }
89
+ }
90
+
91
+ &--filled {
92
+ --#{$prefix}button-border-color: transparent;
93
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
94
+
95
+ .#{$prefix}chip {
96
+ --#{$prefix}chip-background: var(--#{$prefix}black-color);
97
+ }
98
+ }
99
+
100
+ &--outlined {
101
+ & > .#{$prefix}outline {
102
+ --#{$prefix}outline-border-color: currentColor;
103
+ }
104
+ }
105
+
106
+ &--flat {
107
+ & > .#{$prefix}overlay {
108
+ --#{$prefix}overlay-opacity: 0.2;
109
+ --#{$prefix}overlay-color: inherit;
110
+ --#{$prefix}_hover-overlay-opacity: 0.3;
111
+ --#{$prefix}_active-overlay-opacity: 0.4;
112
+ }
113
+ }
114
+ }
115
+
116
+ @each $key, $value in $colors-map {
117
+ .#{$prefix}button--filled.#{$prefix}button--#{$key} {
118
+ --#{$prefix}button-background: #{$value};
119
+ }
120
+
121
+ .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
122
+ --#{$prefix}button-color: #{$value};
123
+ }
124
+
125
+ .#{$prefix}button--flat.#{$prefix}button--#{$key} {
126
+ --#{$prefix}button-color: #{$value};
127
+ }
128
+
129
+ .#{$prefix}button--text.#{$prefix}button--#{$key} {
130
+ --#{$prefix}button-color: #{$value};
131
+ }
132
+
133
+ @if $key == 'secondary' {
134
+ .#{$prefix}button--filled.#{$prefix}button--#{$key} {
135
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
136
+ }
137
+
138
+ .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
139
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
140
+ }
141
+
142
+ .#{$prefix}button--flat.#{$prefix}button--#{$key} {
143
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
144
+ }
145
+
146
+ .#{$prefix}button--text.#{$prefix}button--#{$key} {
147
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
148
+ }
149
+ }
150
+ }
151
+ }
package/scss/themes/test-dark/components/_index.scss ADDED
@@ -0,0 +1 @@
1
+ @use 'button';
package/scss/themes/test-light/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ @use 'components';
2
+
3
+ @use 'tokens';
package/scss/themes/test-light/_tokens.scss ADDED
@@ -0,0 +1,15 @@
1
+ @use '../../variables' as *;
2
+
3
+ .#{$prefix}theme-test-light {
4
+ --#{$prefix}primary-color: #2563eb;
5
+ --#{$prefix}secondary-color: #dde4eb;
6
+ --#{$prefix}success-color: #16a34a;
7
+ --#{$prefix}info-color: #0ea5e9;
8
+ --#{$prefix}warning-color: #f59e0b;
9
+ --#{$prefix}danger-color: #dc2626;
10
+ --#{$prefix}black-color: #000;
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;
15
+ }
package/scss/themes/test-light/components/_button.scss ADDED
@@ -0,0 +1,150 @@
1
+ @use '../../../variables' as *;
2
+
3
+ $colors-map: (
4
+ primary: var(--#{$prefix}primary-color),
5
+ secondary: var(--#{$prefix}secondary-color),
6
+ success: var(--#{$prefix}success-color),
7
+ info: var(--#{$prefix}info-color),
8
+ warning: var(--#{$prefix}warning-color),
9
+ danger: var(--#{$prefix}danger-color),
10
+ );
11
+
12
+ .#{$prefix}theme-test-light {
13
+ .#{$prefix}button {
14
+ --#{$prefix}button-font-weight: 500;
15
+ --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
16
+ --#{$prefix}button-border-radius: 9999px;
17
+
18
+ & > .#{$prefix}overlay {
19
+ --#{$prefix}overlay-color: inherit;
20
+ --#{$prefix}overlay-opacity: 0;
21
+ --#{$prefix}_hover-overlay-opacity: 0;
22
+ --#{$prefix}_hover-overlay-opacity: 0.12;
23
+ --#{$prefix}_active-overlay-opacity: 0.24;
24
+ }
25
+
26
+ & > .#{$prefix}outline {
27
+ --#{$prefix}outline-border-width: 2px;
28
+ --#{$prefix}outline-border-color: transparent;
29
+ }
30
+
31
+ &--xs {
32
+ --#{$prefix}button-height: 20px;
33
+ --#{$prefix}button-padding-y: 0;
34
+ --#{$prefix}button-padding-x: 0.5rem;
35
+ --#{$prefix}button-font-size: 0.625rem;
36
+ --#{$prefix}button-gap: 0.25rem;
37
+
38
+ .#{$prefix}icon {
39
+ --#{$prefix}icon-font-size: 0.75rem;
40
+ }
41
+ }
42
+
43
+ &--sm {
44
+ --#{$prefix}button-height: 28px;
45
+ --#{$prefix}button-padding-y: 0;
46
+ --#{$prefix}button-padding-x: 0.75rem;
47
+ --#{$prefix}button-font-size: 0.75rem;
48
+ --#{$prefix}button-gap: 0.375rem;
49
+
50
+ .#{$prefix}icon {
51
+ --#{$prefix}icon-font-size: 1rem;
52
+ }
53
+ }
54
+
55
+ &--md {
56
+ --#{$prefix}button-height: 36px;
57
+ --#{$prefix}button-padding-y: 0;
58
+ --#{$prefix}button-padding-x: 1rem;
59
+ --#{$prefix}button-font-size: 0.875rem;
60
+ --#{$prefix}button-gap: 0.5rem;
61
+
62
+ .#{$prefix}icon {
63
+ --#{$prefix}icon-font-size: 1.125rem;
64
+ }
65
+ }
66
+
67
+ &--lg {
68
+ --#{$prefix}button-height: 44px;
69
+ --#{$prefix}button-padding-y: 0;
70
+ --#{$prefix}button-padding-x: 1.25rem;
71
+ --#{$prefix}button-font-size: 1rem;
72
+ --#{$prefix}button-gap: 0.625rem;
73
+
74
+ .#{$prefix}icon {
75
+ --#{$prefix}icon-font-size: 1.25rem;
76
+ }
77
+ }
78
+
79
+ &--xl {
80
+ --#{$prefix}button-height: 52px;
81
+ --#{$prefix}button-padding-y: 0;
82
+ --#{$prefix}button-padding-x: 1.5rem;
83
+ --#{$prefix}button-font-size: 1rem;
84
+ --#{$prefix}button-gap: 0.75rem;
85
+
86
+ .#{$prefix}icon {
87
+ --#{$prefix}icon-font-size: 1.5rem;
88
+ }
89
+ }
90
+
91
+ &--filled {
92
+ --#{$prefix}button-border-color: transparent;
93
+ --#{$prefix}button-color: var(--#{$prefix}white-color);
94
+
95
+ .#{$prefix}chip {
96
+ --#{$prefix}chip-background: var(--#{$prefix}white-color);
97
+ }
98
+ }
99
+
100
+ &--outlined {
101
+ & > .#{$prefix}outline {
102
+ --#{$prefix}outline-border-color: currentColor;
103
+ }
104
+ }
105
+
106
+ &--flat {
107
+ & > .#{$prefix}overlay {
108
+ --#{$prefix}overlay-opacity: 0.08;
109
+ --#{$prefix}_hover-overlay-opacity: 0.12;
110
+ --#{$prefix}_active-overlay-opacity: 0.24;
111
+ }
112
+ }
113
+ }
114
+
115
+ @each $key, $value in $colors-map {
116
+ .#{$prefix}button--filled.#{$prefix}button--#{$key} {
117
+ --#{$prefix}button-background: #{$value};
118
+ }
119
+
120
+ .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
121
+ --#{$prefix}button-color: #{$value};
122
+ }
123
+
124
+ .#{$prefix}button--flat.#{$prefix}button--#{$key} {
125
+ --#{$prefix}button-color: #{$value};
126
+ }
127
+
128
+ .#{$prefix}button--text.#{$prefix}button--#{$key} {
129
+ --#{$prefix}button-color: #{$value};
130
+ }
131
+
132
+ @if $key == 'secondary' {
133
+ .#{$prefix}button--filled.#{$prefix}button--#{$key} {
134
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
135
+ }
136
+
137
+ .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
138
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
139
+ }
140
+
141
+ .#{$prefix}button--flat.#{$prefix}button--#{$key} {
142
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
143
+ }
144
+
145
+ .#{$prefix}button--text.#{$prefix}button--#{$key} {
146
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
147
+ }
148
+ }
149
+ }
150
+ }
package/scss/themes/test-light/components/_index.scss ADDED
@@ -0,0 +1 @@
1
+ @use 'button';