playbook_ui 14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806 → 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4891

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -3
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -2
  4. data/app/pb_kits/playbook/pb_body/_body.scss +14 -13
  5. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +22 -16
  6. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +6 -0
  7. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -1
  8. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -1
  10. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +5 -0
  11. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +7 -2
  12. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +8 -2
  13. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +11 -1
  14. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +16 -2
  15. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  16. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  17. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  18. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +44 -36
  19. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +4 -4
  20. data/app/pb_kits/playbook/pb_title/_title.scss +6 -5
  21. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +13 -0
  22. data/app/pb_kits/playbook/tokens/_titles.scss +0 -8
  23. data/app/pb_kits/playbook/utilities/_hover.scss +11 -2
  24. data/app/pb_kits/playbook/utilities/globalProps.ts +2 -0
  25. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +15 -0
  26. data/dist/chunks/{_typeahead-CCDoUmRR.js → _typeahead-CkgPmTlB.js} +2 -2
  27. data/dist/chunks/_weekday_stacked-D8NomRmY.js +45 -0
  28. data/dist/chunks/{lib-CVPInSs5.js → lib-NHG8uPxO.js} +1 -1
  29. data/dist/chunks/{pb_form_validation-CDLJ5eAG.js → pb_form_validation-CIf5UBl6.js} +1 -1
  30. data/dist/chunks/vendor.js +1 -1
  31. data/dist/playbook-doc.js +1 -1
  32. data/dist/playbook-rails-react-bindings.js +1 -1
  33. data/dist/playbook-rails.js +1 -1
  34. data/dist/playbook.css +1 -1
  35. data/lib/playbook/hover.rb +7 -1
  36. data/lib/playbook/version.rb +1 -1
  37. metadata +6 -6
  38. data/dist/chunks/_weekday_stacked-CxjKLoMr.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d89f4517dd122bc15bf46cece276b7623372b18e9c168bda22529f464e335b52
4
- data.tar.gz: f4627b91aeb56d610c20341ffdf10f0d4d56df24889ce87e56c01f1878b3959a
3
+ metadata.gz: 4f54540e9bd3d9d93f35cca071dc3f78941198c7335eeae31ef7030219a41c56
4
+ data.tar.gz: 8826cddf997fcc78d25a6d2b87a9c22606c09d5e83d176dd75512744171d4355
5
5
  SHA512:
6
- metadata.gz: 00b7e5e785ad232a9e119eb3ad5911b540354cf83b50c69a25e16f928fee3f87819ae9b433be0a5d9ac6027d5e7a1e048dc1b0cd2db0362bf28b59e4e756fe30
7
- data.tar.gz: 23c75179a18b0f6eb118e581e056deb65fd85c3d78f4316ba57d939f3a92452d62d3770a98c40a2b16efcaf52f49eb55647c443f672c1c9caf1c056184ce205e
6
+ metadata.gz: 668cda776eb91450ff0776bb0e3a5e63f58c6fec6225681ecc75a8510fb17835b746ddb3f553e2d31ddb3f7ef3db60ee03fa3a6c9e1152e4fe0e7d1a42568e8e
7
+ data.tar.gz: a86a619c28c7b955d88b833dae7c80cbe0ce653529d247ec9e75e5093689c5866809db5e250e23b0791a7f90a394ed25f44e69a11a85cfd8082d833449e833f3
@@ -4,8 +4,10 @@
4
4
  <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
5
5
  <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
6
6
  <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
7
- <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
8
- <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
7
+ <button
8
+ class="gray-icon toggle-all-icon"
9
+ onclick="expandAllRows(this); event.preventDefault();">
10
+ <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
9
11
  </button>
10
12
  <% end %>
11
13
  <%= item[:label] %>
@@ -13,4 +15,4 @@
13
15
  <% end %>
14
16
  <% end %>
15
17
  <% end %>
16
- <% end %>
18
+ <% end %>
@@ -31,14 +31,12 @@ $avatar-sizes: (
31
31
  [class^=pb_card_kit].overlay_top_center {
32
32
  left: 50%;
33
33
  transform: translateX(-50%);
34
- padding: 2px !important;
35
34
  }
36
35
 
37
36
  [class^=pb_card_kit].overlay_left_center,
38
37
  [class^=pb_card_kit].overlay_right_center {
39
38
  top: 50%;
40
39
  transform: translateY(-50%);
41
- padding: 2px !important;
42
40
  }
43
41
  }
44
42
 
@@ -1,24 +1,25 @@
1
1
  @import "./body_mixins";
2
2
  @import "../tokens/titles";
3
3
 
4
- [class^=pb_body_kit]{
4
+ [class^="pb_body_kit"] {
5
5
  @include pb_body($text_lt_default);
6
6
  @each $color_name, $color_value in $pb_body_colors {
7
7
  &[class*=_#{"" + $color_name}] {
8
8
  @include pb_body($color_value);
9
9
  }
10
10
  @each $status_name, $status_value in $pb_body_status {
11
- &[class*=_default_#{$status_name}] {
11
+ &[class*="_default_#{$status_name}"] {
12
12
  @include pb_body($status_value);
13
13
  }
14
14
  }
15
15
  }
16
- @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
17
- &[class*=_#{$dark_color_name}][class*=dark]{
16
+ @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
17
+ &[class*="_#{$dark_color_name}"][class*="dark"] {
18
18
  @include pb_body($dark_color_value);
19
19
  }
20
20
  }
21
- b, strong {
21
+ b,
22
+ strong {
22
23
  font-weight: $bold;
23
24
  }
24
25
 
@@ -29,7 +30,8 @@
29
30
  }
30
31
  }
31
32
 
32
- em, i {
33
+ em,
34
+ i {
33
35
  font-style: italic;
34
36
  }
35
37
 
@@ -39,26 +41,25 @@
39
41
  }
40
42
 
41
43
  @each $status_name, $status_value in $pb_body_status {
42
- &[class*=#{$status_name}] {
44
+ &[class*="#{$status_name}"] {
43
45
  @include pb_body($status_value);
44
46
  }
45
47
  }
46
48
 
47
- &[class*=dark] {
49
+ &[class*="dark"] {
48
50
  a {
49
51
  color: $active_dark;
50
52
  }
51
53
  @include pb_body_dark();
52
- @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
53
- &[class*=_#{$dark_color_name}][class*=dark]{
54
+ @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
55
+ &[class*="_#{$dark_color_name}"][class*="dark"] {
54
56
  @include pb_body($dark_color_value);
55
57
  }
56
58
  }
57
- @each $status_name, $status_value in $pb_body_status {
58
- &[class*=_#{$status_name}] {
59
+ @each $status_name, $status_value in $pb_dark_body_status {
60
+ &[class*="_#{$status_name}"] {
59
61
  @include pb_body($status_value);
60
62
  }
61
63
  }
62
64
  }
63
-
64
65
  }
@@ -3,29 +3,35 @@
3
3
  @import "../tokens/typography";
4
4
 
5
5
  $pb_body_colors: (
6
- default: $text_lt_default,
7
- light: $text_lt_light,
8
- lighter: $text_lt_lighter,
9
- link: $primary,
10
- error: $error,
11
- success: $text_lt_success_sm,
6
+ default: $text_lt_default,
7
+ light: $text_lt_light,
8
+ lighter: $text_lt_lighter,
9
+ link: $primary,
10
+ error: $error,
11
+ success: $text_lt_success_sm,
12
12
  );
13
13
 
14
14
  $pb_dark_body_colors: (
15
- default: $text_dk_default,
16
- light: $text_dk_light,
17
- lighter: $text_dk_lighter,
18
- link: $active_dark,
19
- error: $error,
20
- success: $text_dk_success_sm,
15
+ default: $text_dk_default,
16
+ light: $text_dk_light,
17
+ lighter: $text_dk_lighter,
18
+ link: $active_dark,
19
+ error: $error,
20
+ success: $text_dk_success_sm,
21
21
  );
22
22
 
23
23
  // Order is important here!
24
24
  $pb_body_status: (
25
- default: $text_lt_default,
26
- negative: $error,
27
- dark_error: $error_dark_body,
28
- positive: $text_lt_success_sm,
25
+ default: $text_lt_default,
26
+ negative: $error,
27
+ dark_error: $error_dark_body,
28
+ positive: $text_lt_success_sm,
29
+ );
30
+
31
+ $pb_dark_body_status: (
32
+ default: $text_dk_default,
33
+ negative: $error_dark,
34
+ positive: $text_dk_success_sm,
29
35
  );
30
36
 
31
37
  @mixin pb_body($color: $text_lt_default) {
@@ -13,6 +13,7 @@ const BreadCrumbsDefault = (props) => {
13
13
  <Icon
14
14
  icon="home"
15
15
  size="1x"
16
+ {...props}
16
17
  />
17
18
  <BreadCrumbItem
18
19
  {...props}
@@ -22,11 +23,13 @@ const BreadCrumbsDefault = (props) => {
22
23
  size="4"
23
24
  tag="span"
24
25
  text="Home"
26
+ {...props}
25
27
  />
26
28
  </BreadCrumbItem>
27
29
  <Icon
28
30
  icon="users"
29
31
  size="1x"
32
+ {...props}
30
33
  />
31
34
  <Link
32
35
  {...props}
@@ -36,17 +39,20 @@ const BreadCrumbsDefault = (props) => {
36
39
  size="4"
37
40
  tag="span"
38
41
  text="Users"
42
+ {...props}
39
43
  />
40
44
  </Link>
41
45
  <Icon
42
46
  icon="user"
43
47
  size="1x"
48
+ {...props}
44
49
  />
45
50
  <Link {...props}>
46
51
  <Title
47
52
  size="4"
48
53
  tag="span"
49
54
  text="User"
55
+ {...props}
50
56
  />
51
57
  </Link>
52
58
  </BreadCrumbs>
@@ -13,9 +13,10 @@ $pb_caption_colors: (
13
13
  $pb_dark_caption_colors: (
14
14
  default: $text_dk_default,
15
15
  light: $text_dk_light,
16
+ lighter: $text_dk_lighter,
16
17
  link: $active_dark,
17
18
  success: $text_dk_success_sm,
18
- error: $error,
19
+ error: $error_dark,
19
20
  );
20
21
 
21
22
 
@@ -32,7 +32,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
32
32
  }
33
33
 
34
34
  @mixin pb_card_selected_dark {
35
- @include pb_card_selected($primary_action);
35
+ @include pb_card_selected($primary_action_dark);
36
36
  }
37
37
 
38
38
  @mixin pb_card($background: $card_light, $border_color: $border_light) {
@@ -251,7 +251,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
251
251
  picker.monthsDropdownContainer.value = picker.currentMonth
252
252
 
253
253
  /* Reset date picker to default value on form.reset() */
254
- if (defaultDate){
254
+ if (defaultDate && !picker.input.value){
255
255
  picker.setDate(defaultDate)
256
256
  yearChangeHook(picker)
257
257
  }
@@ -11,3 +11,8 @@
11
11
  }
12
12
  }
13
13
 
14
+ .dark [class*='pb_file_upload_kit'] {
15
+ [class*='pb_card_kit'] {
16
+ border: 1px $text_dk_lighter dashed;
17
+ }
18
+ }
@@ -13,6 +13,7 @@ type FileUploadProps = {
13
13
  accept?: string[],
14
14
  className?: string,
15
15
  customMessage?: string,
16
+ dark?: boolean,
16
17
  data?: {[key: string]: string | number},
17
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
19
  acceptedFilesDescription?: string,
@@ -31,6 +32,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
31
32
  acceptedFilesDescription = '',
32
33
  className,
33
34
  customMessage,
35
+ dark = false,
34
36
  data = {},
35
37
  htmlOptions = {},
36
38
  maxSize,
@@ -94,9 +96,12 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
94
96
  {...htmlProps}
95
97
  {...getRootProps()}
96
98
  >
97
- <Card>
99
+ <Card dark={dark}>
98
100
  <input {...getInputProps()} />
99
- <Body color="light">
101
+ <Body
102
+ color="light"
103
+ dark={dark}
104
+ >
100
105
  {isDragActive ?
101
106
  <p>{'Drop the files here ...'}</p>
102
107
  :
@@ -5,11 +5,17 @@
5
5
  id: object.id,
6
6
  **combined_html_options) do %>
7
7
  <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
8
- <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
8
+ <label
9
+ for="upload-<%= object.id %>"
10
+ class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
11
+ >
12
+ <%= "#{object.label}" %>
13
+ </label>
9
14
  <%= pb_rails("text_input", props: {
10
15
  type: "file",
16
+ dark: object.dark,
11
17
  input_options: {
12
- id: "upload-#{object.id}",
18
+ id: "upload-#{object.id}",
13
19
  classname: "cursor_pointer",
14
20
  }.merge(object.input_options)
15
21
  }) %>
@@ -19,6 +19,16 @@
19
19
  font-weight: $bolder;
20
20
  }
21
21
  }
22
- }
22
+ }
23
+ }
24
+
25
+ .dark & {
26
+ [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
27
+ &[class*=_link] {
28
+ &[class*=_active] {
29
+ box-shadow: 0 2px 10px 0 $shadow_dark;
30
+ }
31
+ }
32
+ }
23
33
  }
24
34
  }
@@ -223,6 +223,7 @@
223
223
  }
224
224
  }
225
225
  [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
226
+ box-shadow: unset !important;
226
227
  .pb_nav_list_item_text_collapsible {
227
228
  color: $white !important;
228
229
  }
@@ -240,11 +241,17 @@
240
241
 
241
242
  .pb_collapsible_main_kit:hover {
242
243
  background-color: mix($white, $card_dark, 20%);
243
- .pb_nav_list_item_text_collapsible,
244
- svg {
244
+ .pb_nav_list_item_text_collapsible {
245
245
  color: $white !important;
246
246
  }
247
247
  }
248
+
249
+ .pb_collapsible_main_kit {
250
+ svg {
251
+ color: $text_dk_default !important;
252
+ }
253
+ }
254
+
248
255
  .icon_wrapper:hover {
249
256
  background-color: mix($white, $card_dark, 40%);
250
257
  }
@@ -256,6 +263,13 @@
256
263
  }
257
264
  }
258
265
  }
266
+
267
+ &[class*="_active"] {
268
+ > .pb_collapsible_main_kit {
269
+ background-color: $primary;
270
+ box-shadow: 0 2px 10px 0 $shadow_dark;
271
+ }
272
+ }
259
273
  }
260
274
  }
261
275
  }
@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
115
115
  }
116
116
  [class*="_item_text"],
117
117
  [class*="_item_icon"] {
118
- color: $text_dk_lighter !important;
118
+ color: $text_dk_light !important;
119
119
  }
120
120
  &[class*="_link"] {
121
121
  &:hover {
@@ -151,7 +151,7 @@ $pb_selectable_paddings: (
151
151
  input[type="radio"] {
152
152
  &:checked ~ label {
153
153
  border-width: $pb_card_border_width;
154
- outline: 1px solid $primary;
154
+ outline: 1px solid $primary_action_dark;
155
155
  }
156
156
  }
157
157
  }
@@ -161,11 +161,11 @@ $pb_selectable_paddings: (
161
161
  color: $white;
162
162
  > label {
163
163
  @include pb_card_dark;
164
- background: transparent;
164
+ background: $bg_dark_card;
165
165
 
166
166
  .pb_selectable_card_circle {
167
167
  border-color: $bg_dark;
168
- background: $primary-action;
168
+ background: $primary_action_dark;
169
169
  }
170
170
  }
171
171
 
@@ -173,7 +173,7 @@ $pb_selectable_paddings: (
173
173
  input[type="radio"] {
174
174
  &:checked ~ label {
175
175
  @include pb_card_selected_dark;
176
- background: transparent;
176
+ background: $bg_dark_card;
177
177
  }
178
178
  }
179
179
 
@@ -35,7 +35,7 @@
35
35
  <% end %>
36
36
  <% else %>
37
37
  <% if content.nil? %>
38
- <%= pb_rails("body", props: { text: object.text }) %>
38
+ <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
39
39
  <% else %>
40
40
  <%= content %>
41
41
  <% end %>
@@ -1,40 +1,46 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
1
+ import React from "react"
2
+ import classnames from "classnames"
3
3
 
4
- import { buildCss, buildHtmlProps } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps'
4
+ import { buildCss, buildHtmlProps } from "../utilities/props"
5
+ import { globalProps } from "../utilities/globalProps"
6
6
 
7
- import Body from '../pb_body/_body'
8
- import Icon from '../pb_icon/_icon'
7
+ import Body from "../pb_body/_body"
8
+ import Icon from "../pb_icon/_icon"
9
9
 
10
- const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
11
- increase: 'positive',
12
- decrease: 'negative',
13
- neutral: 'neutral',
10
+ const statusMap: {
11
+ neutral: "neutral"
12
+ decrease: "negative"
13
+ increase: "positive"
14
+ } = {
15
+ increase: "positive",
16
+ decrease: "negative",
17
+ neutral: "neutral",
14
18
  }
15
19
 
16
20
  const iconMap = {
17
- increase: 'arrow-up',
18
- decrease: 'arrow-down',
21
+ increase: "arrow-up",
22
+ decrease: "arrow-down",
19
23
  }
20
24
 
21
25
  type StatChangeProps = {
22
- change?: 'increase' | 'decrease' | 'neutral',
23
- className?: string,
24
- icon?: string,
25
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
26
- id?: string,
27
- value?: string | number,
26
+ change?: "increase" | "decrease" | "neutral"
27
+ className?: string
28
+ dark?: boolean
29
+ icon?: string
30
+ id?: string
31
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
32
+ value?: string | number
28
33
  }
29
34
 
30
35
  const StatChange = (props: StatChangeProps): React.ReactElement => {
31
- const {
32
- change = 'neutral',
33
- className,
36
+ const {
37
+ change = "neutral",
38
+ className,
39
+ dark = false,
34
40
  htmlOptions = {},
35
- icon,
36
- id,
37
- value
41
+ icon,
42
+ id,
43
+ value,
38
44
  } = props
39
45
 
40
46
  const status = statusMap[change as keyof typeof statusMap]
@@ -47,30 +53,32 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
47
53
 
48
54
  return (
49
55
  <>
50
- {value &&
56
+ {value && (
51
57
  <div
52
58
  className={classnames(
53
- buildCss('pb_stat_change_kit', status),
54
- globalProps(props),
55
- className
56
- )}
59
+ buildCss("pb_stat_change_kit", status),
60
+ globalProps(props),
61
+ className
62
+ )}
57
63
  id={id}
58
64
  {...htmlProps}
59
65
  >
60
- <Body status={status}>
61
- {returnedIcon &&
66
+ <Body dark={dark}
67
+ status={status}
68
+ >
69
+ {" "}
70
+ {returnedIcon && (
62
71
  <>
63
- <Icon
72
+ <Icon dark={dark}
64
73
  fixed_width
65
74
  icon={returnedIcon}
66
- />
67
- {' '}
75
+ />{" "}
68
76
  </>
69
- }
77
+ )}
70
78
  {`${value}%`}
71
79
  </Body>
72
80
  </div>
73
- }
81
+ )}
74
82
  </>
75
83
  )
76
84
  }
@@ -1,6 +1,6 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("body", props: { status: object.status }) do %>
3
- <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
4
- <%= "#{object.value}%" if object.value %>
5
- <% end %>
2
+ <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
3
+ <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
4
+ <%= "#{object.value}%" if object.value %>
5
+ <% end %>
6
6
  <% end %>
@@ -49,10 +49,11 @@
49
49
  }
50
50
 
51
51
  &.dark {
52
- @include pb_title_dark;
53
- }
54
-
55
- &.dark[class*=_link] {
56
- @include pb_title_dark_link;
52
+ @include title_dark;
53
+ @each $name, $color in $pb_dark_title_colors {
54
+ &[class*="_#{$name}"] {
55
+ color: $color;
56
+ }
57
+ }
57
58
  }
58
59
  }
@@ -9,6 +9,15 @@ $pb_title_colors: (
9
9
  link: $primary
10
10
  );
11
11
 
12
+ $pb_dark_title_colors: (
13
+ default: $text_dk_default,
14
+ light: $text_dk_light,
15
+ lighter: $text_dk_lighter,
16
+ success: $success,
17
+ error: $error_dark,
18
+ link: $active_dark
19
+ );
20
+
12
21
  @mixin title_colors {
13
22
  @each $name, $color in $pb_title_colors {
14
23
  &[class*=_#{$name}] {
@@ -16,3 +25,7 @@ $pb_title_colors: (
16
25
  }
17
26
  }
18
27
  }
28
+
29
+ @mixin title_dark {
30
+ color: $text_dk_default;
31
+ }
@@ -33,14 +33,6 @@
33
33
  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
34
34
  }
35
35
 
36
- @mixin pb_title_dark {
37
- color: $text_dk_default;
38
- }
39
-
40
- @mixin pb_title_dark_link {
41
- color: $active_dark;
42
- }
43
-
44
36
  @mixin pb_title_bold {
45
37
  font-weight: $bolder;
46
38
  }
@@ -20,6 +20,13 @@
20
20
  }
21
21
  }
22
22
 
23
+ @mixin hover-underline {
24
+ .hover_underline:hover {
25
+ text-decoration: underline;
26
+ transition: text-decoration $transition-speed ease;
27
+ }
28
+ }
29
+
23
30
  @mixin hover-color-classes($colors-list) {
24
31
  @each $name, $color in $colors-list {
25
32
  .hover_background-#{"" + $name}:hover {
@@ -32,7 +39,9 @@
32
39
  }
33
40
  }
34
41
  }
35
-
42
+
43
+
44
+ @include hover-underline;
36
45
  @include hover-scale-classes($scales);
37
46
  @include hover-shadow-classes($box_shadows);
38
47
  @include hover-color-classes($product_colors);
@@ -64,4 +73,4 @@
64
73
  .group_hover.hover_visibility {
65
74
  opacity: 1;
66
75
  }
67
- }
76
+ }
@@ -64,6 +64,7 @@ type Hover = Shadow & {
64
64
  background?: string,
65
65
  color?: string,
66
66
  scale?: "sm" | "md" | "lg",
67
+ underline?: boolean,
67
68
  visibility?: boolean,
68
69
  }
69
70
 
@@ -236,6 +237,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
236
237
  if (!hover) return css;
237
238
  css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
238
239
  css += hover.background ? `hover_background-${hover.background } ` : '';
240
+ css += hover.underline ? `hover_underline ` : '';
239
241
  css += hover.scale ? `hover_scale_${hover.scale} ` : '';
240
242
  css += hover.color ? `hover_color-${hover.color } ` : '';
241
243
  css += hover.visibility ? `hover_visibility` : '';