@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

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 (87) hide show
  1. package/README.md +47 -0
  2. package/dist/default/trilogy-mangled.css +1 -1
  3. package/dist/default/trilogy-partials.css +1 -1
  4. package/dist/default/trilogy.css +1 -1
  5. package/framework/src/base/_color.scss +14 -36
  6. package/framework/src/base/_generic.scss +4 -1
  7. package/framework/src/base/_helpers.scss +20 -37
  8. package/framework/src/base/_loading.scss +8 -1
  9. package/framework/src/base/_reset.scss +8 -3
  10. package/framework/src/components/_accordion.scss +40 -86
  11. package/framework/src/components/_all.scss +0 -6
  12. package/framework/src/components/_breadcrumb.scss +39 -34
  13. package/framework/src/components/_card.scss +7 -78
  14. package/framework/src/components/_countdown.scss +49 -47
  15. package/framework/src/components/_divider.scss +2 -2
  16. package/framework/src/components/_fab.scss +12 -26
  17. package/framework/src/components/_level.scss +1 -1
  18. package/framework/src/components/_media.scss +2 -2
  19. package/framework/src/components/_modal.scss +167 -166
  20. package/framework/src/components/_otp.scss +9 -28
  21. package/framework/src/components/_pagination.scss +104 -133
  22. package/framework/src/components/_plus-symbol.scss +1 -1
  23. package/framework/src/components/_popover.scss +255 -255
  24. package/framework/src/components/_price.scss +196 -166
  25. package/framework/src/components/_product-tour.scss +2 -4
  26. package/framework/src/components/_range.scss +73 -72
  27. package/framework/src/components/_segmented-control.scss +37 -51
  28. package/framework/src/components/_stepper.scss +18 -142
  29. package/framework/src/components/_tabs.scss +32 -59
  30. package/framework/src/components/_timeline.scss +52 -45
  31. package/framework/src/elements/_alert.scss +5 -8
  32. package/framework/src/elements/_all.scss +1 -3
  33. package/framework/src/elements/_autocomplete.scss +32 -0
  34. package/framework/src/elements/_badge.scss +54 -59
  35. package/framework/src/elements/_box.scss +8 -115
  36. package/framework/src/elements/_button.scss +15 -133
  37. package/framework/src/elements/_checkbox.scss +21 -27
  38. package/framework/src/elements/_chips.scss +74 -83
  39. package/framework/src/elements/_dot.scss +1 -1
  40. package/framework/src/elements/_entry.scss +76 -88
  41. package/framework/src/elements/_form.scss +17 -15
  42. package/framework/src/elements/_icon.scss +3 -3
  43. package/framework/src/elements/_input-gauge.scss +32 -33
  44. package/framework/src/elements/_input-icons.scss +33 -31
  45. package/framework/src/elements/_link.scss +38 -65
  46. package/framework/src/elements/_list.scss +38 -46
  47. package/framework/src/elements/_loader.scss +1 -1
  48. package/framework/src/elements/_other.scss +2 -2
  49. package/framework/src/elements/_paragraph.scss +4 -26
  50. package/framework/src/elements/_progress.scss +12 -21
  51. package/framework/src/elements/_radio.scss +2 -2
  52. package/framework/src/elements/_select.scss +84 -301
  53. package/framework/src/elements/_sticker.scss +12 -27
  54. package/framework/src/elements/_switch.scss +85 -88
  55. package/framework/src/elements/_table.scss +173 -226
  56. package/framework/src/elements/_tag.scss +104 -105
  57. package/framework/src/elements/_textarea.scss +95 -105
  58. package/framework/src/elements/_title.scss +89 -87
  59. package/framework/src/elements/_toaster.scss +3 -4
  60. package/framework/src/grid/_columns.scss +5 -5
  61. package/framework/src/layout/_all.scss +0 -1
  62. package/framework/src/layout/_hero.scss +109 -207
  63. package/framework/src/layout/_section.scss +7 -14
  64. package/framework/src/theming/_all.scss +3 -0
  65. package/framework/src/theming/buttons_partial.scss +30 -0
  66. package/framework/src/theming/common_partials.scss +9 -0
  67. package/framework/src/theming/links_partial.scss +20 -0
  68. package/framework/src/utilities/_all.scss +3 -0
  69. package/framework/src/utilities/_background.scss +15 -0
  70. package/framework/src/utilities/_controls.scss +37 -48
  71. package/framework/src/utilities/_derived-variables.scss +3 -14
  72. package/framework/src/utilities/_initial-variables.scss +22 -26
  73. package/framework/src/utilities/_mixins.scss +481 -593
  74. package/framework/src/utilities/_pre.scss +1 -0
  75. package/package.json +3 -2
  76. package/framework/src/components/_disclaimer.scss +0 -84
  77. package/framework/src/components/_dropdown.scss +0 -128
  78. package/framework/src/components/_menu.scss +0 -213
  79. package/framework/src/components/_search-modal.scss +0 -197
  80. package/framework/src/components/_slices.scss +0 -316
  81. package/framework/src/components/_slider.scss +0 -92
  82. package/framework/src/components/_switch.scss +0 -209
  83. package/framework/src/elements/_checkradio.scss +0 -173
  84. package/framework/src/elements/_notification.scss +0 -151
  85. package/framework/src/elements/_options.scss +0 -146
  86. package/framework/src/elements/_timeline.scss +0 -283
  87. package/framework/src/layout/_toolbar.scss +0 -100
package/framework/src/components/_pagination.scss CHANGED
@@ -1,182 +1,153 @@
1
1
  .pagination {
2
- font-size: $size-normal;
3
- margin: -2.5px;
4
-
5
- &.is-rounded {
6
- .pagination-previous,
7
- .pagination-next {
8
- padding-left: 1em;
9
- padding-right: 1em;
10
- height: 35px;
11
- width: 35px;
12
- border-radius: $radius-rounded;
13
- }
14
-
15
- .pagination-link {
16
- height: 35px;
17
- border-radius: $radius-rounded;
18
- }
19
-
20
- .pagination-list {
21
- flex: 0 0 auto;
22
-
23
- .pagination-link {
24
- &.is-current {
25
- background: getColor('alternate');
26
- border-color: currentColor;
27
- }
28
- }
29
- }
30
- }
2
+ font-size: $size-normal;
3
+ margin: -2.5px;
4
+
5
+ .pagination-previous,
6
+ .pagination-next {
7
+ padding-left: 1em;
8
+ padding-right: 1em;
9
+ height: 35px;
10
+ width: 35px;
11
+ border-radius: 9999px;
12
+ }
13
+
14
+ .pagination-link {
15
+ height: 35px;
16
+ border-radius: 9999px;
17
+ }
18
+
19
+ .pagination-list {
20
+ flex: 0 0 auto;
21
+ }
22
+
31
23
  }
32
24
 
33
25
  .pagination,
34
26
  .pagination-list {
35
- align-items: center;
36
- display: flex;
37
- justify-content: center;
38
- text-align: center;
27
+ align-items: center;
28
+ display: flex;
29
+ justify-content: center;
30
+ text-align: center;
39
31
  }
40
32
 
41
33
  .pagination-previous,
42
34
  .pagination-next,
43
35
  .pagination-link,
44
36
  .pagination-ellipsis {
45
- @include control;
46
- @include unselectable;
47
-
48
- font-size: 1em;
49
- padding-left: 0.5em;
50
- padding-right: 0.5em;
51
- justify-content: center;
52
- margin: 2.5px;
53
- text-align: center;
37
+ @include control;
38
+ @include unselectable;
39
+
40
+ font-size: 1em;
41
+ padding-left: 0.5em;
42
+ padding-right: 0.5em;
43
+ justify-content: center;
44
+ margin: 2.5px;
45
+ text-align: center;
54
46
  }
55
47
 
56
48
  .pagination-previous,
57
49
  .pagination-next,
58
50
  .pagination-link {
59
- border-color: transparent;
60
- color: getColor('grey-dark');
61
- min-width: 2.25em;
62
-
63
- &:hover {
64
- border-color: getColor('alternate');
65
- }
51
+ color: getColor('neutral-dark');
52
+ min-width: 2.25em;
66
53
 
67
- &:focus {
68
- border-color: getVariantColor('alternate',2);
69
- }
70
-
71
- &:active {
72
- box-shadow: inset 0 1px 2px getColor('grey-dark');
73
- }
54
+ @include hover();
74
55
 
75
- &[disabled] {
76
- background-color: getColor('grey-lighter');
77
- border-color: currentColor;
78
- box-shadow: none;
79
- color: getColor('grey');
80
- opacity: 0.5;
81
- }
82
56
  }
83
57
 
84
58
  .pagination-previous,
85
59
  .pagination-next {
86
- padding-left: 0.75em;
87
- padding-right: 0.75em;
88
- white-space: nowrap;
60
+ padding-left: 0.75em;
61
+ padding-right: 0.75em;
62
+ white-space: nowrap;
89
63
  }
90
64
 
91
65
  .pagination-link {
92
- &.is-current {
93
- background-color: getColor('alternate');
94
- border-color: currentColor;
95
- color: getColor('background');
66
+ &[aria-current] {
67
+ background-color: getColor('font');
68
+ color: getColor('background');
69
+
70
+ #{$hoverSelector}, &:focus, &:focus-within {
71
+ background-color: getColor('hovered');
96
72
  }
73
+ }
97
74
  }
98
75
 
99
76
  .pagination-ellipsis {
100
- color: getColor('grey-light');
101
- pointer-events: none;
77
+ color: getColor('background');
78
+ pointer-events: none;
102
79
  }
103
80
 
104
81
  .pagination-list {
105
- flex-wrap: wrap;
82
+ flex-wrap: wrap;
106
83
  }
107
84
 
108
85
  @include mobile {
109
- .pagination {
110
- flex-wrap: wrap;
111
- }
112
-
113
- .pagination-previous,
114
- .pagination-next {
115
- flex-grow: 1;
116
- flex-shrink: 1;
117
- }
118
-
119
- .pagination-list {
120
- li {
121
- flex-grow: 1;
122
- flex-shrink: 1;
123
- }
86
+ .pagination {
87
+ flex-wrap: wrap;
88
+ }
89
+
90
+ .pagination-previous,
91
+ .pagination-next {
92
+ flex-grow: 1;
93
+ flex-shrink: 1;
94
+ }
95
+
96
+ .pagination-list {
97
+ li {
98
+ flex-grow: 1;
99
+ flex-shrink: 1;
124
100
  }
101
+ }
125
102
  }
126
103
 
127
104
  @include tablet {
128
- .pagination-list {
129
- flex-grow: 1;
130
- flex-shrink: 1;
131
- justify-content: flex-start;
105
+ .pagination-list {
106
+ flex-grow: 1;
107
+ flex-shrink: 1;
108
+ justify-content: flex-start;
109
+ order: 1;
110
+ }
111
+
112
+ .pagination-previous {
113
+ order: 2;
114
+ }
115
+
116
+ .pagination-next {
117
+ order: 3;
118
+ }
119
+
120
+ .pagination {
121
+ justify-content: space-between;
122
+
123
+ &.is-centered {
124
+ .pagination-previous {
132
125
  order: 1;
133
- }
126
+ }
134
127
 
135
- .pagination-previous {
128
+ .pagination-list {
129
+ justify-content: center;
136
130
  order: 2;
137
- }
131
+ }
138
132
 
139
- .pagination-next {
133
+ .pagination-next {
140
134
  order: 3;
135
+ }
141
136
  }
142
137
 
143
- .pagination {
144
- justify-content: space-between;
145
-
146
- &.is-centered {
147
- .pagination-previous {
148
- order: 1;
149
- }
150
-
151
- .pagination-list {
152
- justify-content: center;
153
- order: 2;
154
- }
155
-
156
- .pagination-next {
157
- order: 3;
158
- }
159
- }
160
-
161
- &.is-right {
162
- .pagination-previous {
163
- order: 1;
164
- }
165
-
166
- .pagination-next {
167
- order: 2;
168
- }
169
-
170
- .pagination-list {
171
- justify-content: flex-end;
172
- order: 3;
173
- }
174
- }
175
- }
176
- }
138
+ &.is-right {
139
+ .pagination-previous {
140
+ order: 1;
141
+ }
177
142
 
178
- @include desktop {
179
- .pagination {
180
- justify-content: center;
143
+ .pagination-next {
144
+ order: 2;
145
+ }
146
+
147
+ .pagination-list {
148
+ justify-content: flex-end;
149
+ order: 3;
150
+ }
181
151
  }
152
+ }
182
153
  }
package/framework/src/components/_plus-symbol.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  $plus-symbol-size: 40px;
2
2
 
3
- @mixin plus-symbol($color: getColor('grey-light'), $text-color: getColor('grey-dark')) {
3
+ @mixin plus-symbol($color: getBGColor('neutral-dark'), $text-color: getColor('neutral-dark')) {
4
4
  &::after {
5
5
  content: "+";
6
6
  display: inline-block;