@trilogy-ds/styles 4.19.0 → 4.20.0-beta.1

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 (50) hide show
  1. package/dist/default/trilogy-mangled.css +1 -1
  2. package/dist/default/trilogy-partials.css +1 -1
  3. package/dist/default/trilogy.css +1 -1
  4. package/framework/src/base/_helpers.scss +7 -2
  5. package/framework/src/components/_accordion.scss +3 -3
  6. package/framework/src/components/_autocomplete.scss +1 -1
  7. package/framework/src/components/_badge.scss +2 -2
  8. package/framework/src/components/_box.scss +28 -24
  9. package/framework/src/components/_button.scss +1 -1
  10. package/framework/src/components/_calendar.scss +4 -4
  11. package/framework/src/components/_card.scss +20 -2
  12. package/framework/src/components/_checkbox.scss +1 -1
  13. package/framework/src/components/_chips.scss +1 -1
  14. package/framework/src/components/_container.scss +15 -0
  15. package/framework/src/components/_countdown.scss +2 -2
  16. package/framework/src/components/_divider.scss +1 -0
  17. package/framework/src/components/_dropdown.scss +2 -3
  18. package/framework/src/components/_fab.scss +1 -1
  19. package/framework/src/components/_icon.scss +6 -6
  20. package/framework/src/components/_modal.scss +2 -2
  21. package/framework/src/components/_otp.scss +1 -1
  22. package/framework/src/components/_pagination.scss +1 -1
  23. package/framework/src/components/_popover.scss +1 -1
  24. package/framework/src/components/_product-tour.scss +2 -2
  25. package/framework/src/components/_prompt.scss +5 -5
  26. package/framework/src/components/_radio.scss +1 -1
  27. package/framework/src/components/_range.scss +1 -2
  28. package/framework/src/components/_segmented-control.scss +2 -2
  29. package/framework/src/components/_select.scss +1 -1
  30. package/framework/src/components/_stepper.scss +2 -2
  31. package/framework/src/components/_sticker.scss +5 -5
  32. package/framework/src/components/_switch.scss +2 -2
  33. package/framework/src/components/_table.scss +1 -1
  34. package/framework/src/components/_tag.scss +1 -1
  35. package/framework/src/components/_timeline.scss +4 -4
  36. package/framework/src/components/_timepicker.scss +2 -2
  37. package/framework/src/components/alert/_alert.scss +1 -1
  38. package/framework/src/components/alert/_toaster.scss +1 -1
  39. package/framework/src/components/input/_form.scss +7 -7
  40. package/framework/src/components/input/_input-gauge.scss +2 -2
  41. package/framework/src/components/input/_input-icons.scss +2 -2
  42. package/framework/src/grid/_columns.scss +1 -1
  43. package/framework/src/layout/_section.scss +3 -3
  44. package/framework/src/theming/common_partials.scss +5 -0
  45. package/framework/src/theming/links_partial.scss +1 -1
  46. package/framework/src/utilities/_controls.scss +2 -2
  47. package/framework/src/utilities/_initial-variables.scss +2 -2
  48. package/framework/src/utilities/mixins/_delete.scss +1 -1
  49. package/framework/src/utilities/mixins/_mixins.scss +1 -1
  50. package/package.json +1 -1
package/framework/src/base/_helpers.scss CHANGED
@@ -438,11 +438,16 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
438
438
  }
439
439
 
440
440
  // Radius
441
- $radius-list: ['radius-large', 'radius-medium', 'radius-small', 'radius'];
441
+ $radius-list: (
442
+ 'radius-large': 'radius-lg',
443
+ 'radius-medium': 'radius-md',
444
+ 'radius-small': 'radius-sm',
445
+ 'radius': 'radius-sm',
446
+ );
442
447
 
443
448
  @each $label in $radius-list {
444
449
  .has-border-#{$label} {
445
- border-radius: var(--#{$label});
450
+ border-radius: var(--#{map-get($radius-list, $label)});
446
451
  }
447
452
  }
448
453
 
package/framework/src/components/_accordion.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  background-color: getColor('background');
20
20
  font-size: $size-normal;
21
21
  border: 1px solid #{getColor('stroke-fade')};
22
- border-radius: var(--radius);
22
+ border-radius: var(--radius-md);
23
23
  margin: 8px 0;
24
24
  min-height: 56px;
25
25
  max-height: max-content;
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  .accordion-header {
69
- border-radius: var(--radius);
69
+ border-radius: var(--radius-md);
70
70
  transition: margin 300ms ease-out;
71
71
 
72
72
  &:focus-visible{
@@ -123,7 +123,7 @@
123
123
  overflow-y: hidden;
124
124
 
125
125
  .accordion-content {
126
- border-radius: var(--radius);
126
+ border-radius: var(--radius-md);
127
127
  margin-bottom: 10px;
128
128
 
129
129
  @include mobile() {
package/framework/src/components/_autocomplete.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  display: block;
18
18
  border: var(--border);
19
19
  padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
20
- border-radius: 4px;
20
+ border-radius: var(--radius-md);
21
21
  max-height: 220px;
22
22
  overflow-y: auto;
23
23
  background-color: getColor('background');
package/framework/src/components/_badge.scss CHANGED
@@ -45,7 +45,7 @@
45
45
 
46
46
  .badge {
47
47
  display: inline-flex;
48
- border-radius: 9999px;
48
+ border-radius: var(--radius-full);
49
49
  color: getColor('background');
50
50
  background: getColor('main');
51
51
  font-size: $text-10;
@@ -82,6 +82,6 @@
82
82
  display: flex;
83
83
  align-items: center;
84
84
  justify-content: center;
85
- border-radius: 9999px;
85
+ border-radius: var(--radius-full);
86
86
  }
87
87
  }
package/framework/src/components/_box.scss CHANGED
@@ -23,15 +23,33 @@ a.box {
23
23
  }
24
24
 
25
25
  .box {
26
+ --box-radius: var(--radius-lg);
27
+
26
28
  background-color: getColor('background');
27
29
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
28
- border-radius: var(--radius);
30
+ border-radius: var(--box-radius);
29
31
  display: flex;
30
32
  flex-direction: column;
31
33
  justify-content: flex-start;
32
34
  position: relative;
33
35
  padding: var(--padding-box);
34
36
 
37
+ &.radius-xs {
38
+ --box-radius: var(--radius-xs);
39
+ }
40
+
41
+ &.radius-sm {
42
+ --box-radius: var(--radius-sm);
43
+ }
44
+
45
+ &.radius-md {
46
+ --box-radius: var(--radius-md);
47
+ }
48
+
49
+ &.radius-lg {
50
+ --box-radius: var(--radius-lg);
51
+ }
52
+
35
53
  &.is-active {
36
54
  outline: var(--border-active);
37
55
  }
@@ -65,8 +83,8 @@ a.box {
65
83
 
66
84
  &.is-highlighted {
67
85
  border-left: $highlighted-border-width solid transparent;
68
- border-top-left-radius: $highlighted-border-width;
69
- border-bottom-left-radius: $highlighted-border-width;
86
+ border-top-left-radius: calc(var(--box-radius) + 3px);
87
+ border-bottom-left-radius: calc(var(--box-radius) + 3px);
70
88
  border-left-color: getColor('main');
71
89
  @each $name, $pair in $colors-brand-functionnal {
72
90
  $color: getColor($name);
@@ -77,22 +95,8 @@ a.box {
77
95
  border-left-width: $highlighted-border-width;
78
96
  }
79
97
  }
80
- > .box-content {
81
- &:first-child {
82
- border-top-left-radius: 0;
83
- }
84
-
85
- &:last-child {
86
- border-bottom-left-radius: 0;
87
- }
88
- }
89
- > .box-footer {
90
- border-bottom-left-radius: 0;
91
- }
92
-
93
98
  > .box-header {
94
99
  margin-left: calc(var(--padding-box) * -1 - $highlighted-border-width);
95
- border-radius: $highlighted-border-width var(--radius) 0 0;
96
100
 
97
101
  }
98
102
  }
@@ -113,7 +117,7 @@ a.box {
113
117
  flex-direction: column;
114
118
  align-items: center;
115
119
  font-weight: $weight-semibold;
116
- border-radius: var(--radius) var(--radius) 0 0;
120
+ border-radius: var(--box-radius) var(--box-radius) 0 0;
117
121
  height: 40px;
118
122
 
119
123
  @include tablet {
@@ -144,14 +148,14 @@ a.box {
144
148
 
145
149
  &:first-child {
146
150
  margin-top: calc(var(--padding-box) * -1);
147
- border-top-left-radius: var(--radius);
148
- border-top-right-radius: var(--radius);
151
+ border-top-left-radius: var(--box-radius);
152
+ border-top-right-radius: var(--box-radius);
149
153
  }
150
154
 
151
155
  &:last-child {
152
156
  margin-bottom: calc(var(--padding-box) * -1);
153
- border-bottom-left-radius: var(--radius);
154
- border-bottom-right-radius: var(--radius);
157
+ border-bottom-left-radius: var(--box-radius);
158
+ border-bottom-right-radius: var(--box-radius);
155
159
  }
156
160
 
157
161
  > .is-unboxed {
@@ -169,8 +173,8 @@ a.box {
169
173
  margin-right: calc(var(--padding-box) * -1);
170
174
  margin-bottom: calc(var(--padding-box) * -1);
171
175
  padding: var(--padding-box);
172
- border-bottom-left-radius: var(--radius);
173
- border-bottom-right-radius: var(--radius);
176
+ border-bottom-left-radius: var(--box-radius);
177
+ border-bottom-right-radius: var(--box-radius);
174
178
  }
175
179
 
176
180
  .box-footer:not(.is-borderless):not([class*="has-background"])::before {
package/framework/src/components/_button.scss CHANGED
@@ -25,7 +25,7 @@ $button-border-width: 2px !default;
25
25
 
26
26
  background-color: white;
27
27
  border-width: $button-border-width;
28
- border-radius: var(--radius-small);
28
+ border-radius: var(--radius-sm);
29
29
  cursor: pointer;
30
30
  justify-content: center;
31
31
  text-align: center;
package/framework/src/components/_calendar.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  border-collapse: separate;
3
3
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
4
4
  padding: 24px;
5
- border-radius: 8px;
5
+ border-radius: var(--radius-lg);
6
6
  border-spacing: 0 8px;
7
7
  background-color: getColor('background');
8
8
 
@@ -54,7 +54,7 @@
54
54
  padding-bottom: 16px;
55
55
  button {
56
56
  text-align: center;
57
- border-radius: 4px;
57
+ border-radius: var(--radius-sm);
58
58
  width: 36px;
59
59
  height: 36px;
60
60
  i {
@@ -82,7 +82,7 @@
82
82
  display: block;
83
83
  width: 36px;
84
84
  height: 36px;
85
- border-radius: 4px;
85
+ border-radius: var(--radius-sm);
86
86
  }
87
87
  }
88
88
 
@@ -96,7 +96,7 @@
96
96
  }
97
97
  button {
98
98
  padding: 2px 6px;
99
- border-radius: 4px;
99
+ border-radius: var(--radius-sm);
100
100
  }
101
101
  }
102
102
 
package/framework/src/components/_card.scss CHANGED
@@ -7,15 +7,33 @@ $basis-values: (
7
7
 
8
8
 
9
9
  .card {
10
+ --card-radius: var(--radius-lg);
11
+
10
12
  max-width: 100%;
11
13
  display: flex;
12
- border-radius: var(--radius);
14
+ border-radius: var(--card-radius);
13
15
  overflow: hidden;
14
16
  flex-direction: column;
15
17
  position: relative;
16
18
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
17
19
  background-color: getColor('background');
18
20
 
21
+ &.radius-xs {
22
+ --card-radius: var(--radius-xs);
23
+ }
24
+
25
+ &.radius-sm {
26
+ --card-radius: var(--radius-sm);
27
+ }
28
+
29
+ &.radius-md {
30
+ --card-radius: var(--radius-md);
31
+ }
32
+
33
+ &.radius-lg {
34
+ --card-radius: var(--radius-lg);
35
+ }
36
+
19
37
  &:not(.is-reversed) .card-image {
20
38
  order: 1;
21
39
  }
@@ -205,7 +223,7 @@ $basis-values: (
205
223
  background: transparent;
206
224
 
207
225
  .card-image .image img {
208
- border-radius: var(--radius);
226
+ border-radius: var(--card-radius);
209
227
  }
210
228
 
211
229
  .card-content {
package/framework/src/components/_checkbox.scss CHANGED
@@ -49,7 +49,7 @@
49
49
  .checkbox-container {
50
50
  &:before,
51
51
  &:after {
52
- border-radius: var(--radius-small);
52
+ border-radius: var(--radius-xs);
53
53
  }
54
54
  }
55
55
  }
package/framework/src/components/_chips.scss CHANGED
@@ -40,7 +40,7 @@
40
40
  .chips {
41
41
  align-items: center;
42
42
  background-color: white;
43
- border-radius: 9999px;
43
+ border-radius: var(--radius-full);
44
44
  color: getColor('font');
45
45
  display: inline-flex;
46
46
  font-size: $size-normal;
package/framework/src/components/_container.scss CHANGED
@@ -51,6 +51,21 @@
51
51
  max-width: 960px;
52
52
  margin: auto;
53
53
  }
54
+
55
+ &.size-small {
56
+ max-width: 960px;
57
+ margin: auto;
58
+ }
59
+
60
+ &.size-medium {
61
+ max-width: 1120px;
62
+ margin: auto;
63
+ }
64
+
65
+ &.size-large {
66
+ max-width: 1340px;
67
+ margin: auto;
68
+ }
54
69
  }
55
70
 
56
71
  main,
package/framework/src/components/_countdown.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .countdown {
2
2
  background-color: var(--color-accent-fade);
3
- border-radius: var(--radius);
3
+ border-radius: var(--radius-md);
4
4
  display: inline-flex;
5
5
  padding: $spacing-2;
6
6
  color: getColor('font');
@@ -35,7 +35,7 @@
35
35
 
36
36
  &.is-small {
37
37
  padding: $spacing-2 $spacing-1;
38
- border-radius: var(--radius);
38
+ border-radius: var(--radius-sm);
39
39
 
40
40
  .count {
41
41
  font-size: $text-12;
package/framework/src/components/_divider.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  height: 1px;
5
5
  background-color: getColor('neutral');
6
6
  border: 1px solid #{getColor('stroke-fade')};
7
+ border-radius: var(--radius-full);
7
8
  }
8
9
 
9
10
  .divider {
package/framework/src/components/_dropdown.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @use 'sass:math';
2
2
  @import "../utilities/spacing";
3
3
 
4
- $dropdown-border-radius: var(--radius-small);
5
4
  $dropdown-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
6
5
  $dropdown-item-padding-vertical: 12px;
7
6
  $dropdown-item-padding-horizontal: 16px;
@@ -42,7 +41,7 @@ $dropdown-item-padding-horizontal: 16px;
42
41
  display: none;
43
42
  margin-top: 15px;
44
43
  background-color: getColor('background');
45
- border-radius: $dropdown-border-radius;
44
+ border-radius: var(--radius-md);
46
45
  box-shadow: $dropdown-shadow;
47
46
  overflow: hidden;
48
47
  max-height: 300px;
@@ -92,7 +91,7 @@ $dropdown-item-padding-horizontal: 16px;
92
91
  cursor: pointer;
93
92
  transition: background-color 0.2s ease;
94
93
  border: none;
95
- border-radius: $dropdown-border-radius;
94
+ border-radius: var(--radius-sm);
96
95
  background: none;
97
96
  width: 100%;
98
97
  text-align: left;
package/framework/src/components/_fab.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .fab {
2
2
  background-color: getColor('font');
3
- border-radius: 16px;
3
+ border-radius: var(--radius-sm);
4
4
  cursor: pointer;
5
5
  height: 56px;
6
6
  padding: $spacing-4;
package/framework/src/components/_icon.scss CHANGED
@@ -8,19 +8,19 @@ $icon-dimensions-default: 15px;
8
8
 
9
9
  $size: (
10
10
  'smaller': (
11
- container: 20px, icon:16px, radius: var(--radius-small)
11
+ container: 20px, icon:16px, radius: var(--radius-sm)
12
12
  ),
13
13
  'small': (
14
- container: 32px, icon: 20px, radius: var(--radius-small)
14
+ container: 32px, icon: 20px, radius: var(--radius-sm)
15
15
  ),
16
16
  'medium': (
17
- container: 48px, icon: 32px, radius: var(--radius-medium)
17
+ container: 48px, icon: 32px, radius: var(--radius-md)
18
18
  ),
19
19
  'large': (
20
- container: 66px, icon: 44px, radius: var(--radius-medium)
20
+ container: 66px, icon: 44px, radius: var(--radius-md)
21
21
  ),
22
22
  'huge': (
23
- container: 99px, icon: 66px, radius: var(--radius-large)
23
+ container: 99px, icon: 66px, radius: var(--radius-lg)
24
24
  )
25
25
  );
26
26
 
@@ -31,7 +31,7 @@ $size: (
31
31
  font-size: inherit;
32
32
  width: 1.5em;
33
33
  height: 1.5em;
34
- border-radius: var(--radius-small);
34
+ border-radius: var(--radius-sm);
35
35
  [class^="tri-"],
36
36
  [class*=" tri-"] {
37
37
  &::before {
package/framework/src/components/_modal.scss CHANGED
@@ -66,7 +66,7 @@ body:has(.modal.is-active) {
66
66
 
67
67
  .modal-content {
68
68
  background-color: getColor('background');
69
- border-radius: var(--radius) var(--radius) 0 0;
69
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
70
70
  color: getColor('font');
71
71
  overflow: auto;
72
72
  position: relative;
@@ -80,7 +80,7 @@ body:has(.modal.is-active) {
80
80
  @include tablet {
81
81
  max-height: calc(100vh - 120px);
82
82
  width: $modal-content-width;
83
- border-radius: $radius;
83
+ border-radius: var(--radius-lg);
84
84
  }
85
85
 
86
86
  // Annulation des propriétés du composant box, se trouvant dans une modal
package/framework/src/components/_otp.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @include hover();
7
7
  outline: none;
8
8
  border: var(--border);
9
- border-radius: var(--radius-small);
9
+ border-radius: var(--radius-sm);
10
10
  background: transparent;
11
11
  width: 33px;
12
12
  height: 48px;
package/framework/src/components/_pagination.scss CHANGED
@@ -29,7 +29,7 @@
29
29
  min-width: 2.25em;
30
30
  height: 35px;
31
31
  width: 35px;
32
- border-radius: 9999px;
32
+ border-radius: var(--radius-full);
33
33
  padding-left: 0.75em;
34
34
  padding-right: 0.75em;
35
35
  white-space: nowrap;
package/framework/src/components/_popover.scss CHANGED
@@ -73,7 +73,7 @@
73
73
  @include position-top();
74
74
 
75
75
  background-color: getColor('font');
76
- border-radius: var(--radius-small);
76
+ border-radius: var(--radius-sm);
77
77
  box-shadow: $shadow;
78
78
  color: getColor('background');
79
79
  display: inline-block;
package/framework/src/components/_product-tour.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  visibility: hidden;
5
5
  opacity: 0;
6
6
  background-color: getColor('background');
7
- border-radius: $radius;
7
+ border-radius: var(--radius-sm);
8
8
  box-shadow: $shadow;
9
9
  width: 350px;
10
10
  padding: $spacing-3 * 2;
@@ -92,7 +92,7 @@
92
92
  top: 0;
93
93
  left: 0;
94
94
  background: white;
95
- border-radius: 9999px;
95
+ border-radius: var(--radius-full);
96
96
  box-shadow: $shadow;
97
97
  transform: translate(-50%, -50%);
98
98
 
package/framework/src/components/_prompt.scss CHANGED
@@ -2,7 +2,7 @@ $height-prompt-item: 64px;
2
2
 
3
3
  .prompt {
4
4
  box-shadow: 0 0 0 1px var(--color-stroke);
5
- border-radius: var(--radius-small);
5
+ border-radius: var(--radius-sm);
6
6
  overflow: hidden;
7
7
  background-color: getColor('background');
8
8
  &[aria-disabled=true] {
@@ -35,7 +35,7 @@ $height-prompt-item: 64px;
35
35
  padding: 16px 16px 0px 16px !important;
36
36
  margin:0 !important;
37
37
  &-img {
38
- border-radius: 8px;
38
+ border-radius: var(--radius-sm);
39
39
  overflow: hidden;
40
40
  }
41
41
  &-file {
@@ -72,7 +72,7 @@ $height-prompt-item: 64px;
72
72
  }
73
73
  &-delete {
74
74
  background-color: getColor('main-fade');
75
- border-radius: 100px;
75
+ border-radius: var(--radius-full);
76
76
  height: 20px;
77
77
  width: 20px;
78
78
  }
@@ -125,7 +125,7 @@ $height-prompt-item: 64px;
125
125
  width: 36px !important;
126
126
  }
127
127
  &-microphone {
128
- border-radius: 100px;
128
+ border-radius: var(--radius-full);
129
129
  }
130
130
  &-tool-submit.streaming {
131
131
  padding: 0;
@@ -152,6 +152,6 @@ $height-prompt-item: 64px;
152
152
  background-color: getColor('background');
153
153
  height: 16px;
154
154
  width: 16px;
155
- border-radius: 3px;
155
+ border-radius: var(--radius-xs);
156
156
  }
157
157
  }
package/framework/src/components/_radio.scss CHANGED
@@ -46,7 +46,7 @@
46
46
  .radio-container {
47
47
  &:before,
48
48
  &:after {
49
- border-radius: 9999px;
49
+ border-radius: var(--radius-full);
50
50
  }
51
51
  }
52
52
  }
package/framework/src/components/_range.scss CHANGED
@@ -25,14 +25,13 @@
25
25
  .range-track {
26
26
  width: 100%;
27
27
  height: 8px;
28
- border-radius: var(--radius);
28
+ border-radius: var(--radius-full);
29
29
  position: absolute;
30
30
  margin: auto;
31
31
  top: 0;
32
32
  bottom: 0;
33
33
  @include mobile {
34
34
  height: 4px;
35
- border-radius: var(--radius-small);
36
35
  }
37
36
  }
38
37
 
package/framework/src/components/_segmented-control.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .segmented-control {
2
- border-radius: 6px;
2
+ border-radius: var(--radius-sm);
3
3
  padding: $spacing-1;
4
4
  background-color: getColor('background');
5
5
  display: flex;
@@ -27,7 +27,7 @@
27
27
 
28
28
  .segmented-control-item {
29
29
  padding: $spacing-3 $spacing-4;
30
- border-radius: var(--radius-small);
30
+ border-radius: var(--radius-sm);
31
31
  font-size: 16px;
32
32
  text-align: center;
33
33
  border: 2px solid transparent;
package/framework/src/components/_select.scss CHANGED
@@ -44,7 +44,7 @@ $status-select: (
44
44
 
45
45
  &-options {
46
46
  box-shadow: 0 0 8px #0000001a;
47
- border-radius: 4px;
47
+ border-radius: var(--radius-md);
48
48
  overflow: hidden;
49
49
  position: absolute;
50
50
  z-index: 1001;
package/framework/src/components/_stepper.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  content: "";
21
21
  display: block;
22
22
  height: 4px;
23
- border-radius: var(--radius-small);
23
+ border-radius: var(--radius-full);
24
24
  background-size: 200% !important;
25
25
  background-color: getColor('neutral');
26
26
  }
@@ -130,7 +130,7 @@
130
130
  .step-bars {
131
131
  height: 4px;
132
132
  background: getColor('disabled');
133
- border-radius: var(--radius-small);
133
+ border-radius: var(--radius-full);
134
134
  display: none;
135
135
  }
136
136
 
package/framework/src/components/_sticker.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  $sticker-height: 35px;
2
2
 
3
3
  .sticker {
4
- border-radius: 9999px;
4
+ border-radius: var(--radius-full);
5
5
  font-size: 16px;
6
6
  flex-grow: 0;
7
7
  display: inline-flex;
@@ -72,7 +72,7 @@ $sticker-height: 35px;
72
72
 
73
73
  // deprecated
74
74
  &.is-stretched {
75
- border-radius: var(--radius) 0;
75
+ border-radius: var(--radius-sm) 0;
76
76
  padding: 0 10px;
77
77
  position: relative;
78
78
  margin-right: 10px;
@@ -92,12 +92,12 @@ $sticker-height: 35px;
92
92
  }
93
93
 
94
94
  &::before {
95
- border-radius: var(--radius) 0 0 var(--radius);
95
+ border-radius: var(--radius-sm) 0 0 var(--radius-sm);
96
96
  left: -6px;
97
97
  }
98
98
 
99
99
  &::after {
100
- border-radius: 0 var(--radius) var(--radius) 0;
100
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
101
101
  right: -7px;
102
102
  }
103
103
  }
@@ -116,7 +116,7 @@ $sticker-height: 35px;
116
116
  .has-hat-mobile {
117
117
  .is-hat {
118
118
  display: inline-block;
119
- border-radius: var(--radius) var(--radius) 0 0;
119
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
120
120
  position: absolute;
121
121
  top: -$sticker-height;
122
122
  left: 0;
package/framework/src/components/_switch.scss CHANGED
@@ -53,7 +53,7 @@
53
53
  top: 50%;
54
54
  transform: translateY(-50%);
55
55
  right: 0;
56
- border-radius: 9999px;
56
+ border-radius: var(--radius-full);
57
57
  width: 44px;
58
58
  height: 22px;
59
59
  background-color: getColor('neutral');
@@ -66,7 +66,7 @@
66
66
  top: 50%;
67
67
  transform: translateY(-50%);
68
68
  right: calc(44px - 18px - 2px);
69
- border-radius: 9999px;
69
+ border-radius: var(--radius-full);
70
70
  width: 18px;
71
71
  height: 18px;
72
72
  background-color: getColor('background');
package/framework/src/components/_table.scss CHANGED
@@ -217,7 +217,7 @@
217
217
 
218
218
  .subtable {
219
219
  background-color: getColor('neutral-fade');
220
- border-radius: var(--radius);
220
+ border-radius: var(--radius-sm);
221
221
  padding: 25px;
222
222
 
223
223
  @include mobile() {
package/framework/src/components/_tag.scss CHANGED
@@ -79,7 +79,7 @@ $tag-delete-margin: 1px !default;
79
79
  .tag {
80
80
  align-items: center;
81
81
  background-color: getColor('neutral-fade');
82
- border-radius: 9999px;
82
+ border-radius: var(--radius-full);
83
83
  color: getColor('font');
84
84
  display: inline-flex;
85
85
  font-size: $size-medium;