administrate-bootstrap-theme 1.0.4 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -0
  3. data/app/assets/javascripts/administrate-bootstrap-theme/bootstrap.bundle.js +2514 -2980
  4. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_accordion.scss +73 -33
  5. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_alert.scss +25 -14
  6. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_badge.scss +14 -5
  7. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_breadcrumb.scss +22 -10
  8. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_button-group.scss +6 -3
  9. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_buttons.scss +133 -28
  10. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +60 -37
  11. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +22 -15
  12. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_close.scss +33 -10
  13. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_containers.scss +1 -1
  14. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +86 -76
  15. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +15 -9
  16. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +9 -3
  17. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +3 -0
  18. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_list-group.scss +60 -37
  19. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_maps.scss +174 -0
  20. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -2
  21. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +71 -44
  22. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_nav.scss +86 -28
  23. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +101 -147
  24. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +121 -61
  25. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_pagination.scss +66 -21
  26. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +1 -1
  27. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +90 -52
  28. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_progress.scss +30 -10
  29. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +31 -45
  30. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +155 -21
  31. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_spinners.scss +38 -22
  32. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +46 -26
  33. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +38 -16
  34. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +60 -56
  35. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_type.scss +2 -0
  36. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +209 -33
  37. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables-dark.scss +87 -0
  38. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +406 -284
  39. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +4 -7
  40. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +5 -10
  41. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +7 -6
  42. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +5 -6
  43. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +37 -5
  44. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +51 -14
  45. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +36 -41
  46. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +3 -3
  47. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +14 -4
  48. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_input-group.scss +20 -9
  49. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_color-bg.scss +7 -0
  50. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_colored-links.scss +20 -2
  51. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_focus-ring.scss +5 -0
  52. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_icon-link.scss +25 -0
  53. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_position.scss +7 -1
  54. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_ratio.scss +2 -2
  55. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +2 -2
  56. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_alert.scss +11 -4
  57. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_banner.scss +7 -0
  58. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_breakpoints.scss +8 -8
  59. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +32 -95
  60. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_caret.scss +30 -25
  61. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_color-mode.scss +21 -0
  62. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_container.scss +4 -2
  63. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_forms.scss +38 -19
  64. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_gradients.scss +1 -1
  65. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +15 -14
  66. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_list-group.scss +2 -0
  67. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_pagination.scss +4 -25
  68. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_reset-text.scss +1 -1
  69. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_table-variants.scss +12 -9
  70. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +14 -6
  71. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_visually-hidden.scss +6 -2
  72. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +23 -29
  73. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -7
  74. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +4 -0
  75. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +11 -3
  76. data/lib/administrate-bootstrap-theme/version.rb +3 -2
  77. data/package.json +2 -2
  78. metadata +24 -3
@@ -1,14 +1,32 @@
1
1
  .toast {
2
- width: $toast-max-width;
2
+ // scss-docs-start toast-css-vars
3
+ --#{$prefix}toast-zindex: #{$zindex-toast};
4
+ --#{$prefix}toast-padding-x: #{$toast-padding-x};
5
+ --#{$prefix}toast-padding-y: #{$toast-padding-y};
6
+ --#{$prefix}toast-spacing: #{$toast-spacing};
7
+ --#{$prefix}toast-max-width: #{$toast-max-width};
8
+ @include rfs($toast-font-size, --#{$prefix}toast-font-size);
9
+ --#{$prefix}toast-color: #{$toast-color};
10
+ --#{$prefix}toast-bg: #{$toast-background-color};
11
+ --#{$prefix}toast-border-width: #{$toast-border-width};
12
+ --#{$prefix}toast-border-color: #{$toast-border-color};
13
+ --#{$prefix}toast-border-radius: #{$toast-border-radius};
14
+ --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
15
+ --#{$prefix}toast-header-color: #{$toast-header-color};
16
+ --#{$prefix}toast-header-bg: #{$toast-header-background-color};
17
+ --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
18
+ // scss-docs-end toast-css-vars
19
+
20
+ width: var(--#{$prefix}toast-max-width);
3
21
  max-width: 100%;
4
- @include font-size($toast-font-size);
5
- color: $toast-color;
22
+ @include font-size(var(--#{$prefix}toast-font-size));
23
+ color: var(--#{$prefix}toast-color);
6
24
  pointer-events: auto;
7
- background-color: $toast-background-color;
25
+ background-color: var(--#{$prefix}toast-bg);
8
26
  background-clip: padding-box;
9
- border: $toast-border-width solid $toast-border-color;
10
- box-shadow: $toast-box-shadow;
11
- @include border-radius($toast-border-radius);
27
+ border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
28
+ box-shadow: var(--#{$prefix}toast-box-shadow);
29
+ @include border-radius(var(--#{$prefix}toast-border-radius));
12
30
 
13
31
  &.showing {
14
32
  opacity: 0;
@@ -20,32 +38,36 @@
20
38
  }
21
39
 
22
40
  .toast-container {
41
+ --#{$prefix}toast-zindex: #{$zindex-toast};
42
+
43
+ position: absolute;
44
+ z-index: var(--#{$prefix}toast-zindex);
23
45
  width: max-content;
24
46
  max-width: 100%;
25
47
  pointer-events: none;
26
48
 
27
49
  > :not(:last-child) {
28
- margin-bottom: $toast-spacing;
50
+ margin-bottom: var(--#{$prefix}toast-spacing);
29
51
  }
30
52
  }
31
53
 
32
54
  .toast-header {
33
55
  display: flex;
34
56
  align-items: center;
35
- padding: $toast-padding-y $toast-padding-x;
36
- color: $toast-header-color;
37
- background-color: $toast-header-background-color;
57
+ padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
58
+ color: var(--#{$prefix}toast-header-color);
59
+ background-color: var(--#{$prefix}toast-header-bg);
38
60
  background-clip: padding-box;
39
- border-bottom: $toast-border-width solid $toast-header-border-color;
40
- @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
61
+ border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
62
+ @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
41
63
 
42
64
  .btn-close {
43
- margin-right: $toast-padding-x * -.5;
44
- margin-left: $toast-padding-x;
65
+ margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
66
+ margin-left: var(--#{$prefix}toast-padding-x);
45
67
  }
46
68
  }
47
69
 
48
70
  .toast-body {
49
- padding: $toast-padding-x; // apply to both vertical and horizontal
71
+ padding: var(--#{$prefix}toast-padding-x);
50
72
  word-wrap: break-word;
51
73
  }
@@ -1,24 +1,38 @@
1
1
  // Base class
2
2
  .tooltip {
3
- position: absolute;
4
- z-index: $zindex-tooltip;
3
+ // scss-docs-start tooltip-css-vars
4
+ --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
5
+ --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
6
+ --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
7
+ --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
8
+ --#{$prefix}tooltip-margin: #{$tooltip-margin};
9
+ @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
10
+ --#{$prefix}tooltip-color: #{$tooltip-color};
11
+ --#{$prefix}tooltip-bg: #{$tooltip-bg};
12
+ --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
13
+ --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
14
+ --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
15
+ --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
16
+ // scss-docs-end tooltip-css-vars
17
+
18
+ z-index: var(--#{$prefix}tooltip-zindex);
5
19
  display: block;
6
- margin: $tooltip-margin;
20
+ margin: var(--#{$prefix}tooltip-margin);
21
+ @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
7
22
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8
23
  // So reset our font and text properties to avoid inheriting weird values.
9
24
  @include reset-text();
10
- @include font-size($tooltip-font-size);
25
+ @include font-size(var(--#{$prefix}tooltip-font-size));
11
26
  // Allow breaking very long words so they don't overflow the tooltip's bounds
12
27
  word-wrap: break-word;
13
28
  opacity: 0;
14
29
 
15
- &.show { opacity: $tooltip-opacity; }
30
+ &.show { opacity: var(--#{$prefix}tooltip-opacity); }
16
31
 
17
32
  .tooltip-arrow {
18
- position: absolute;
19
33
  display: block;
20
- width: $tooltip-arrow-width;
21
- height: $tooltip-arrow-height;
34
+ width: var(--#{$prefix}tooltip-arrow-width);
35
+ height: var(--#{$prefix}tooltip-arrow-height);
22
36
 
23
37
  &::before {
24
38
  position: absolute;
@@ -29,66 +43,56 @@
29
43
  }
30
44
  }
31
45
 
32
- .bs-tooltip-top {
33
- padding: $tooltip-arrow-height 0;
46
+ .bs-tooltip-top .tooltip-arrow {
47
+ bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
34
48
 
35
- .tooltip-arrow {
36
- bottom: 0;
37
-
38
- &::before {
39
- top: -1px;
40
- border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
41
- border-top-color: $tooltip-arrow-color;
42
- }
49
+ &::before {
50
+ top: -1px;
51
+ border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
52
+ border-top-color: var(--#{$prefix}tooltip-bg);
43
53
  }
44
54
  }
45
55
 
46
- .bs-tooltip-end {
47
- padding: 0 $tooltip-arrow-height;
56
+ /* rtl:begin:ignore */
57
+ .bs-tooltip-end .tooltip-arrow {
58
+ left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
59
+ width: var(--#{$prefix}tooltip-arrow-height);
60
+ height: var(--#{$prefix}tooltip-arrow-width);
48
61
 
49
- .tooltip-arrow {
50
- left: 0;
51
- width: $tooltip-arrow-height;
52
- height: $tooltip-arrow-width;
53
-
54
- &::before {
55
- right: -1px;
56
- border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
57
- border-right-color: $tooltip-arrow-color;
58
- }
62
+ &::before {
63
+ right: -1px;
64
+ border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
65
+ border-right-color: var(--#{$prefix}tooltip-bg);
59
66
  }
60
67
  }
61
68
 
62
- .bs-tooltip-bottom {
63
- padding: $tooltip-arrow-height 0;
69
+ /* rtl:end:ignore */
64
70
 
65
- .tooltip-arrow {
66
- top: 0;
71
+ .bs-tooltip-bottom .tooltip-arrow {
72
+ top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
67
73
 
68
- &::before {
69
- bottom: -1px;
70
- border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
71
- border-bottom-color: $tooltip-arrow-color;
72
- }
74
+ &::before {
75
+ bottom: -1px;
76
+ border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
77
+ border-bottom-color: var(--#{$prefix}tooltip-bg);
73
78
  }
74
79
  }
75
80
 
76
- .bs-tooltip-start {
77
- padding: 0 $tooltip-arrow-height;
78
-
79
- .tooltip-arrow {
80
- right: 0;
81
- width: $tooltip-arrow-height;
82
- height: $tooltip-arrow-width;
81
+ /* rtl:begin:ignore */
82
+ .bs-tooltip-start .tooltip-arrow {
83
+ right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
84
+ width: var(--#{$prefix}tooltip-arrow-height);
85
+ height: var(--#{$prefix}tooltip-arrow-width);
83
86
 
84
- &::before {
85
- left: -1px;
86
- border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
87
- border-left-color: $tooltip-arrow-color;
88
- }
87
+ &::before {
88
+ left: -1px;
89
+ border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
90
+ border-left-color: var(--#{$prefix}tooltip-bg);
89
91
  }
90
92
  }
91
93
 
94
+ /* rtl:end:ignore */
95
+
92
96
  .bs-tooltip-auto {
93
97
  &[data-popper-placement^="top"] {
94
98
  @extend .bs-tooltip-top;
@@ -106,10 +110,10 @@
106
110
 
107
111
  // Wrapper for the tooltip content
108
112
  .tooltip-inner {
109
- max-width: $tooltip-max-width;
110
- padding: $tooltip-padding-y $tooltip-padding-x;
111
- color: $tooltip-color;
113
+ max-width: var(--#{$prefix}tooltip-max-width);
114
+ padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
115
+ color: var(--#{$prefix}tooltip-color);
112
116
  text-align: center;
113
- background-color: $tooltip-bg;
114
- @include border-radius($tooltip-border-radius);
117
+ background-color: var(--#{$prefix}tooltip-bg);
118
+ @include border-radius(var(--#{$prefix}tooltip-border-radius));
115
119
  }
@@ -35,6 +35,8 @@
35
35
  @each $display, $font-size in $display-font-sizes {
36
36
  .display-#{$display} {
37
37
  @include font-size($font-size);
38
+ font-family: $display-font-family;
39
+ font-style: $display-font-style;
38
40
  font-weight: $display-font-weight;
39
41
  line-height: $display-line-height;
40
42
  }
@@ -1,5 +1,3 @@
1
- // stylelint-disable indentation
2
-
3
1
  // Utilities
4
2
 
5
3
  $utilities: () !default;
@@ -24,6 +22,20 @@ $utilities: map-merge(
24
22
  )
25
23
  ),
26
24
  // scss-docs-end utils-float
25
+ // Object Fit utilities
26
+ // scss-docs-start utils-object-fit
27
+ "object-fit": (
28
+ responsive: true,
29
+ property: object-fit,
30
+ values: (
31
+ contain: contain,
32
+ cover: cover,
33
+ fill: fill,
34
+ scale: scale-down,
35
+ none: none,
36
+ )
37
+ ),
38
+ // scss-docs-end utils-object-fit
27
39
  // Opacity utilities
28
40
  // scss-docs-start utils-opacity
29
41
  "opacity": (
@@ -42,6 +54,14 @@ $utilities: map-merge(
42
54
  property: overflow,
43
55
  values: auto hidden visible scroll,
44
56
  ),
57
+ "overflow-x": (
58
+ property: overflow-x,
59
+ values: auto hidden visible scroll,
60
+ ),
61
+ "overflow-y": (
62
+ property: overflow-y,
63
+ values: auto hidden visible scroll,
64
+ ),
45
65
  // scss-docs-end utils-overflow
46
66
  // scss-docs-start utils-display
47
67
  "display": (
@@ -49,7 +69,7 @@ $utilities: map-merge(
49
69
  print: true,
50
70
  property: display,
51
71
  class: d,
52
- values: inline inline-block block grid table table-row table-cell flex inline-flex none
72
+ values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
53
73
  ),
54
74
  // scss-docs-end utils-display
55
75
  // scss-docs-start utils-shadow
@@ -57,13 +77,21 @@ $utilities: map-merge(
57
77
  property: box-shadow,
58
78
  class: shadow,
59
79
  values: (
60
- null: $box-shadow,
61
- sm: $box-shadow-sm,
62
- lg: $box-shadow-lg,
80
+ null: var(--#{$prefix}box-shadow),
81
+ sm: var(--#{$prefix}box-shadow-sm),
82
+ lg: var(--#{$prefix}box-shadow-lg),
63
83
  none: none,
64
84
  )
65
85
  ),
66
86
  // scss-docs-end utils-shadow
87
+ // scss-docs-start utils-focus-ring
88
+ "focus-ring": (
89
+ css-var: true,
90
+ css-variable-name: focus-ring-color,
91
+ class: focus-ring,
92
+ values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
93
+ ),
94
+ // scss-docs-end utils-focus-ring
67
95
  // scss-docs-start utils-position
68
96
  "position": (
69
97
  property: position,
@@ -101,14 +129,14 @@ $utilities: map-merge(
101
129
  "border": (
102
130
  property: border,
103
131
  values: (
104
- null: $border-width solid $border-color,
132
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
105
133
  0: 0,
106
134
  )
107
135
  ),
108
136
  "border-top": (
109
137
  property: border-top,
110
138
  values: (
111
- null: $border-width solid $border-color,
139
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
112
140
  0: 0,
113
141
  )
114
142
  ),
@@ -116,14 +144,14 @@ $utilities: map-merge(
116
144
  property: border-right,
117
145
  class: border-end,
118
146
  values: (
119
- null: $border-width solid $border-color,
147
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
120
148
  0: 0,
121
149
  )
122
150
  ),
123
151
  "border-bottom": (
124
152
  property: border-bottom,
125
153
  values: (
126
- null: $border-width solid $border-color,
154
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
127
155
  0: 0,
128
156
  )
129
157
  ),
@@ -131,20 +159,39 @@ $utilities: map-merge(
131
159
  property: border-left,
132
160
  class: border-start,
133
161
  values: (
134
- null: $border-width solid $border-color,
162
+ null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
135
163
  0: 0,
136
164
  )
137
165
  ),
138
166
  "border-color": (
139
167
  property: border-color,
140
168
  class: border,
141
- values: map-merge($theme-colors, ("white": $white))
169
+ local-vars: (
170
+ "border-opacity": 1
171
+ ),
172
+ values: $utilities-border-colors
173
+ ),
174
+ "subtle-border-color": (
175
+ property: border-color,
176
+ class: border,
177
+ values: $utilities-border-subtle
142
178
  ),
143
179
  "border-width": (
144
180
  property: border-width,
145
181
  class: border,
146
182
  values: $border-widths
147
183
  ),
184
+ "border-opacity": (
185
+ css-var: true,
186
+ class: border-opacity,
187
+ values: (
188
+ 10: .1,
189
+ 25: .25,
190
+ 50: .5,
191
+ 75: .75,
192
+ 100: 1
193
+ )
194
+ ),
148
195
  // scss-docs-end utils-borders
149
196
  // Sizing utilities
150
197
  // scss-docs-start utils-sizing
@@ -238,12 +285,6 @@ $utilities: map-merge(
238
285
  class: flex,
239
286
  values: wrap nowrap wrap-reverse
240
287
  ),
241
- "gap": (
242
- responsive: true,
243
- property: gap,
244
- class: gap,
245
- values: $spacers
246
- ),
247
288
  "justify-content": (
248
289
  responsive: true,
249
290
  property: justify-content,
@@ -436,13 +477,32 @@ $utilities: map-merge(
436
477
  class: ps,
437
478
  values: $spacers
438
479
  ),
480
+ // Gap utility
481
+ "gap": (
482
+ responsive: true,
483
+ property: gap,
484
+ class: gap,
485
+ values: $spacers
486
+ ),
487
+ "row-gap": (
488
+ responsive: true,
489
+ property: row-gap,
490
+ class: row-gap,
491
+ values: $spacers
492
+ ),
493
+ "column-gap": (
494
+ responsive: true,
495
+ property: column-gap,
496
+ class: column-gap,
497
+ values: $spacers
498
+ ),
439
499
  // scss-docs-end utils-spacing
440
500
  // Text
441
501
  // scss-docs-start utils-text
442
502
  "font-family": (
443
503
  property: font-family,
444
504
  class: font,
445
- values: (monospace: var(--#{$variable-prefix}font-monospace))
505
+ values: (monospace: var(--#{$prefix}font-monospace))
446
506
  ),
447
507
  "font-size": (
448
508
  rfs: true,
@@ -459,9 +519,11 @@ $utilities: map-merge(
459
519
  property: font-weight,
460
520
  class: fw,
461
521
  values: (
462
- light: $font-weight-light,
463
522
  lighter: $font-weight-lighter,
523
+ light: $font-weight-light,
464
524
  normal: $font-weight-normal,
525
+ medium: $font-weight-medium,
526
+ semibold: $font-weight-semibold,
465
527
  bold: $font-weight-bold,
466
528
  bolder: $font-weight-bolder
467
529
  )
@@ -520,9 +582,12 @@ $utilities: map-merge(
520
582
  values: map-merge(
521
583
  $utilities-text-colors,
522
584
  (
523
- "muted": $text-muted,
585
+ "muted": var(--#{$prefix}secondary-color), // deprecated
524
586
  "black-50": rgba($black, .5), // deprecated
525
587
  "white-50": rgba($white, .5), // deprecated
588
+ "body-secondary": var(--#{$prefix}secondary-color),
589
+ "body-tertiary": var(--#{$prefix}tertiary-color),
590
+ "body-emphasis": var(--#{$prefix}emphasis-color),
526
591
  "reset": inherit,
527
592
  )
528
593
  )
@@ -537,7 +602,62 @@ $utilities: map-merge(
537
602
  100: 1
538
603
  )
539
604
  ),
605
+ "text-color": (
606
+ property: color,
607
+ class: text,
608
+ values: $utilities-text-emphasis-colors
609
+ ),
540
610
  // scss-docs-end utils-color
611
+ // scss-docs-start utils-links
612
+ "link-opacity": (
613
+ css-var: true,
614
+ class: link-opacity,
615
+ state: hover,
616
+ values: (
617
+ 10: .1,
618
+ 25: .25,
619
+ 50: .5,
620
+ 75: .75,
621
+ 100: 1
622
+ )
623
+ ),
624
+ "link-offset": (
625
+ property: text-underline-offset,
626
+ class: link-offset,
627
+ state: hover,
628
+ values: (
629
+ 1: .125em,
630
+ 2: .25em,
631
+ 3: .375em,
632
+ )
633
+ ),
634
+ "link-underline": (
635
+ property: text-decoration-color,
636
+ class: link-underline,
637
+ local-vars: (
638
+ "link-underline-opacity": 1
639
+ ),
640
+ values: map-merge(
641
+ $utilities-links-underline,
642
+ (
643
+ null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
644
+ )
645
+ )
646
+ ),
647
+ "link-underline-opacity": (
648
+ css-var: true,
649
+ class: link-underline-opacity,
650
+ state: hover,
651
+ values: (
652
+ 0: 0,
653
+ 10: .1,
654
+ 25: .25,
655
+ 50: .5,
656
+ 75: .75,
657
+ 100: 1
658
+ ),
659
+ ),
660
+ // scss-docs-end utils-links
541
661
  // scss-docs-start utils-bg-color
542
662
  "background-color": (
543
663
  property: background-color,
@@ -548,7 +668,9 @@ $utilities: map-merge(
548
668
  values: map-merge(
549
669
  $utilities-bg-colors,
550
670
  (
551
- "transparent": transparent
671
+ "transparent": transparent,
672
+ "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
673
+ "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
552
674
  )
553
675
  )
554
676
  ),
@@ -563,11 +685,16 @@ $utilities: map-merge(
563
685
  100: 1
564
686
  )
565
687
  ),
688
+ "subtle-background-color": (
689
+ property: background-color,
690
+ class: bg,
691
+ values: $utilities-bg-subtle
692
+ ),
566
693
  // scss-docs-end utils-bg-color
567
694
  "gradient": (
568
695
  property: background-image,
569
696
  class: bg,
570
- values: (gradient: var(--#{$variable-prefix}gradient))
697
+ values: (gradient: var(--#{$prefix}gradient))
571
698
  ),
572
699
  // scss-docs-start utils-interaction
573
700
  "user-select": (
@@ -585,34 +712,76 @@ $utilities: map-merge(
585
712
  property: border-radius,
586
713
  class: rounded,
587
714
  values: (
588
- null: $border-radius,
715
+ null: var(--#{$prefix}border-radius),
589
716
  0: 0,
590
- 1: $border-radius-sm,
591
- 2: $border-radius,
592
- 3: $border-radius-lg,
717
+ 1: var(--#{$prefix}border-radius-sm),
718
+ 2: var(--#{$prefix}border-radius),
719
+ 3: var(--#{$prefix}border-radius-lg),
720
+ 4: var(--#{$prefix}border-radius-xl),
721
+ 5: var(--#{$prefix}border-radius-xxl),
593
722
  circle: 50%,
594
- pill: $border-radius-pill
723
+ pill: var(--#{$prefix}border-radius-pill)
595
724
  )
596
725
  ),
597
726
  "rounded-top": (
598
727
  property: border-top-left-radius border-top-right-radius,
599
728
  class: rounded-top,
600
- values: (null: $border-radius)
729
+ values: (
730
+ null: var(--#{$prefix}border-radius),
731
+ 0: 0,
732
+ 1: var(--#{$prefix}border-radius-sm),
733
+ 2: var(--#{$prefix}border-radius),
734
+ 3: var(--#{$prefix}border-radius-lg),
735
+ 4: var(--#{$prefix}border-radius-xl),
736
+ 5: var(--#{$prefix}border-radius-xxl),
737
+ circle: 50%,
738
+ pill: var(--#{$prefix}border-radius-pill)
739
+ )
601
740
  ),
602
741
  "rounded-end": (
603
742
  property: border-top-right-radius border-bottom-right-radius,
604
743
  class: rounded-end,
605
- values: (null: $border-radius)
744
+ values: (
745
+ null: var(--#{$prefix}border-radius),
746
+ 0: 0,
747
+ 1: var(--#{$prefix}border-radius-sm),
748
+ 2: var(--#{$prefix}border-radius),
749
+ 3: var(--#{$prefix}border-radius-lg),
750
+ 4: var(--#{$prefix}border-radius-xl),
751
+ 5: var(--#{$prefix}border-radius-xxl),
752
+ circle: 50%,
753
+ pill: var(--#{$prefix}border-radius-pill)
754
+ )
606
755
  ),
607
756
  "rounded-bottom": (
608
757
  property: border-bottom-right-radius border-bottom-left-radius,
609
758
  class: rounded-bottom,
610
- values: (null: $border-radius)
759
+ values: (
760
+ null: var(--#{$prefix}border-radius),
761
+ 0: 0,
762
+ 1: var(--#{$prefix}border-radius-sm),
763
+ 2: var(--#{$prefix}border-radius),
764
+ 3: var(--#{$prefix}border-radius-lg),
765
+ 4: var(--#{$prefix}border-radius-xl),
766
+ 5: var(--#{$prefix}border-radius-xxl),
767
+ circle: 50%,
768
+ pill: var(--#{$prefix}border-radius-pill)
769
+ )
611
770
  ),
612
771
  "rounded-start": (
613
772
  property: border-bottom-left-radius border-top-left-radius,
614
773
  class: rounded-start,
615
- values: (null: $border-radius)
774
+ values: (
775
+ null: var(--#{$prefix}border-radius),
776
+ 0: 0,
777
+ 1: var(--#{$prefix}border-radius-sm),
778
+ 2: var(--#{$prefix}border-radius),
779
+ 3: var(--#{$prefix}border-radius-lg),
780
+ 4: var(--#{$prefix}border-radius-xl),
781
+ 5: var(--#{$prefix}border-radius-xxl),
782
+ circle: 50%,
783
+ pill: var(--#{$prefix}border-radius-pill)
784
+ )
616
785
  ),
617
786
  // scss-docs-end utils-border-radius
618
787
  // scss-docs-start utils-visibility
@@ -623,8 +792,15 @@ $utilities: map-merge(
623
792
  visible: visible,
624
793
  invisible: hidden,
625
794
  )
626
- )
795
+ ),
627
796
  // scss-docs-end utils-visibility
797
+ // scss-docs-start utils-zindex
798
+ "z-index": (
799
+ property: z-index,
800
+ class: z,
801
+ values: $zindex-levels,
802
+ )
803
+ // scss-docs-end utils-zindex
628
804
  ),
629
805
  $utilities
630
806
  );