playbook_ui 12.30.1.pre.alpha.hovertesting914 → 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -2
  3. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -1
  4. data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
  5. data/app/pb_kits/playbook/pb_card/_card.scss +3 -0
  6. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -6
  7. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -3
  8. data/app/pb_kits/playbook/pb_card/card.rb +0 -96
  9. data/app/pb_kits/playbook/pb_card/card_body.rb +93 -1
  10. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +11 -0
  11. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +1 -3
  12. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +1 -3
  13. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +1 -3
  14. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +12 -0
  16. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +2 -2
  17. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +1 -4
  18. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +1 -2
  19. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +45 -33
  20. data/app/pb_kits/playbook/pb_message/docs/example.yml +0 -1
  21. data/app/pb_kits/playbook/pb_message/docs/index.js +0 -2
  22. data/app/pb_kits/playbook/utilities/_colors.scss +0 -3
  23. data/app/pb_kits/playbook/utilities/globalProps.ts +2 -22
  24. data/dist/playbook-rails.js +6 -6
  25. data/lib/playbook/version.rb +1 -1
  26. metadata +2 -8
  27. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +0 -130
  28. data/app/pb_kits/playbook/pb_message/docs/_message_hover.jsx +0 -41
  29. data/app/pb_kits/playbook/tokens/_scale.scss +0 -9
  30. data/app/pb_kits/playbook/tokens/exports/_scale.scss +0 -13
  31. data/app/pb_kits/playbook/utilities/_border_radius.scss +0 -31
  32. data/app/pb_kits/playbook/utilities/_hover.scss +0 -47
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e94ee5e2d1744b1c8cb4257f6cbabe864f3cbe7f7a23c89ecbbf704d96e0881c
4
- data.tar.gz: 63d9209ce6bdced8f6c934971d2b0ca8d8e67a4ca683a289091fdf7c70e894a4
3
+ metadata.gz: 34a695910f67fbd8f8a01279fe53bcfd4115ca6fc419a2a4f598b48464ade926
4
+ data.tar.gz: d17f2e8534379076372aa29bcf3daadbb83acc5fc47bb5be5bd3ff31a2541461
5
5
  SHA512:
6
- metadata.gz: 405c56bbb3852436d2792bb9b90ecb9dbdc85601201f6fc1e89b7942f1dc0cc822050b0c3bdf2f2ae7966d14c1eeae5330c026c3ebebfcabd537881b2a24342d
7
- data.tar.gz: 2eac3a3bc6353031c3f242191866eeba63789609ea03d2d3ee199720c6035f1636da744cf3ce0ca3a9e8a34fe602c4b2776613a17853c9921d5bef607ee7e60a
6
+ metadata.gz: 82adeb777f4240ec21972169b4866a1b857597d02f63c30859b30e3a407abdd62427807e837beef23780136a9002c01513cc6478ca0c023c8fc5c564ea3ac52f
7
+ data.tar.gz: fdc73b9b2eed6973de5a14011ce0240cf3c84fcff6e9f8e454ceecf15de721a974958d349803d6657302b682cf8ed64ac4a1f87f97971f818c2607a20ce9b012
@@ -110,7 +110,5 @@
110
110
  @import './utilities/display';
111
111
  @import './utilities/flexbox';
112
112
  @import './utilities/focus';
113
- @import './utilities/border_radius';
114
- @import './utilities/hover';
115
113
 
116
114
  @import 'pb_multi_level_select/multi_level_select';
@@ -21,4 +21,3 @@ examples:
21
21
  - button_options: Button Additional Options (onClick)
22
22
  - button_size: Button Size
23
23
  - button_form: Button Form Attribute
24
- - button_hover: Button Hover
@@ -8,4 +8,3 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
8
8
  export { default as ButtonOptions } from './_button_options.jsx'
9
9
  export { default as ButtonSize } from './_button_size.jsx'
10
10
  export { default as ButtonForm } from './_button_form.jsx'
11
- export { default as ButtonHover } from './_button_hover.jsx'
@@ -3,6 +3,7 @@
3
3
 
4
4
  [class^=pb_card_kit] {
5
5
  @include pb_card;
6
+ padding: $space_md;
6
7
 
7
8
  &[class*=_selected] {
8
9
  @include pb_card_selected;
@@ -25,6 +26,7 @@
25
26
  flex-shrink: 0;
26
27
  flex-basis: auto;
27
28
  min-height: 1px;
29
+ padding: $space_sm;
28
30
  border: 0;
29
31
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
30
32
  @each $color_name, $color_value in $pb_card_header_colors {
@@ -57,6 +59,7 @@
57
59
  flex-basis: auto;
58
60
  min-height: 1px;
59
61
  border: 0;
62
+ padding: $space_md;
60
63
  }
61
64
 
62
65
  &[class*=_highlight] {
@@ -42,10 +42,10 @@ type CardBodyProps = {
42
42
 
43
43
  // Header component
44
44
  const Header = (props: CardHeaderProps) => {
45
- const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
45
+ const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
46
46
  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
47
47
 
48
- const headerSpacing = globalProps(props, { padding })
48
+ const headerSpacing = globalProps(props)
49
49
 
50
50
  return (
51
51
  <div className={classnames(headerCSS, headerSpacing, className)}>
@@ -57,9 +57,9 @@ const Header = (props: CardHeaderProps) => {
57
57
 
58
58
  // Body component
59
59
  const Body = (props: CardBodyProps) => {
60
- const { children, padding = 'md', className } = props
60
+ const { children, className } = props
61
61
  const bodyCSS = buildCss('pb_card_body_kit')
62
- const bodySpacing = globalProps(props, { padding })
62
+ const bodySpacing = globalProps(props)
63
63
 
64
64
  return (
65
65
  <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -80,7 +80,6 @@ const Card = (props: CardPropTypes) => {
80
80
  highlight = {},
81
81
  selected = false,
82
82
  tag = 'div',
83
- padding = 'md',
84
83
  } = props
85
84
  const borderCSS = borderNone == true ? 'border_none' : ''
86
85
  const selectedCSS = selected == true ? 'selected' : 'deselected'
@@ -114,7 +113,7 @@ const Card = (props: CardPropTypes) => {
114
113
  <Tag
115
114
  {...ariaProps}
116
115
  {...dataProps}
117
- className={classnames(cardCss, globalProps(props, { padding }), className)}
116
+ className={classnames(cardCss, globalProps(props), className)}
118
117
  >
119
118
  {subComponentTags('Header')}
120
119
  {nonHeaderChildren}
@@ -4,9 +4,7 @@
4
4
  class: object.classname,
5
5
  aria: object.aria,
6
6
  dark: object.dark) do %>
7
- <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
8
- <%= content %>
9
- <% end if content.present? %>
7
+ <%= content.presence %>
10
8
  <% end %>
11
9
 
12
10
 
@@ -28,102 +28,6 @@ module Playbook
28
28
  highlight_color_class)
29
29
  end
30
30
 
31
- def body_padding
32
- if padding.present?
33
- ""
34
- else
35
- "p_md"
36
- end
37
- end
38
-
39
- def body_flex_direction
40
- if flex_direction.present?
41
- "flex_direction_#{flex_direction}"
42
- else
43
- ""
44
- end
45
- end
46
-
47
- def body_flex_wrap
48
- if flex_wrap.present?
49
- "flex_wrap_#{flex_wrap}"
50
- else
51
- ""
52
- end
53
- end
54
-
55
- def body_justify_content
56
- if justify_content.present?
57
- "justify_content_#{justify_content}"
58
- else
59
- ""
60
- end
61
- end
62
-
63
- def body_justify_self
64
- if justify_self.present?
65
- "justify_self_#{justify_self}"
66
- else
67
- ""
68
- end
69
- end
70
-
71
- def body_align_items
72
- if align_items.present?
73
- "align_items_#{align_items}"
74
- else
75
- ""
76
- end
77
- end
78
-
79
- def body_align_content
80
- if align_content.present?
81
- "align_content_#{align_content}"
82
- else
83
- ""
84
- end
85
- end
86
-
87
- def body_align_self
88
- if align_self.present?
89
- "align_self_#{align_self}"
90
- else
91
- ""
92
- end
93
- end
94
-
95
- def body_flex
96
- if flex.present?
97
- "flex_#{flex}"
98
- else
99
- ""
100
- end
101
- end
102
-
103
- def body_flex_grow
104
- if flex_grow.present?
105
- "flex_grow_#{flex_grow}"
106
- else
107
- ""
108
- end
109
- end
110
-
111
- def body_flex_shrink
112
- if flex_shrink.present?
113
- "flex_shrink_#{flex_shrink}"
114
- else
115
- ""
116
- end
117
- end
118
-
119
- def body_order
120
- if order.present?
121
- "order_#{order}"
122
- else
123
- ""
124
- end
125
- end
126
-
127
31
  private
128
32
 
129
33
  def selected_class
@@ -4,7 +4,99 @@ module Playbook
4
4
  module PbCard
5
5
  class CardBody < Playbook::KitBase
6
6
  def classname
7
- generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
7
+ generate_classname("pb_card_body_kit", flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
8
+ end
9
+
10
+ def body_padding
11
+ "" if padding.present?
12
+ end
13
+
14
+ def body_flex_direction
15
+ if flex_direction.present?
16
+ "flex_direction_#{flex_direction}"
17
+ else
18
+ ""
19
+ end
20
+ end
21
+
22
+ def body_flex_wrap
23
+ if flex_wrap.present?
24
+ "flex_wrap_#{flex_wrap}"
25
+ else
26
+ ""
27
+ end
28
+ end
29
+
30
+ def body_justify_content
31
+ if justify_content.present?
32
+ "justify_content_#{justify_content}"
33
+ else
34
+ ""
35
+ end
36
+ end
37
+
38
+ def body_justify_self
39
+ if justify_self.present?
40
+ "justify_self_#{justify_self}"
41
+ else
42
+ ""
43
+ end
44
+ end
45
+
46
+ def body_align_items
47
+ if align_items.present?
48
+ "align_items_#{align_items}"
49
+ else
50
+ ""
51
+ end
52
+ end
53
+
54
+ def body_align_content
55
+ if align_content.present?
56
+ "align_content_#{align_content}"
57
+ else
58
+ ""
59
+ end
60
+ end
61
+
62
+ def body_align_self
63
+ if align_self.present?
64
+ "align_self_#{align_self}"
65
+ else
66
+ ""
67
+ end
68
+ end
69
+
70
+ def body_flex
71
+ if flex.present?
72
+ "flex_#{flex}"
73
+ else
74
+ ""
75
+ end
76
+ end
77
+
78
+ def body_flex_grow
79
+ if flex_grow.present?
80
+ "flex_grow_#{flex_grow}"
81
+ else
82
+ ""
83
+ end
84
+ end
85
+
86
+ def body_flex_shrink
87
+ if flex_shrink.present?
88
+ "flex_shrink_#{flex_shrink}"
89
+ else
90
+ ""
91
+ end
92
+ end
93
+
94
+ def body_order
95
+ if order.present?
96
+ "order_#{order}"
97
+ else
98
+ ""
99
+ end
8
100
  end
9
101
  end
10
102
  end
@@ -1,6 +1,9 @@
1
1
  @import "./tokens/colors";
2
+ @import "./tokens/spacing";
2
3
 
3
4
  [class^=pb_collapsible_kit] {
5
+ padding: $space_md;
6
+
4
7
  .toggle-content {
5
8
  display: none;
6
9
  height: 0;
@@ -18,3 +21,11 @@
18
21
  color: $primary
19
22
  }
20
23
  }
24
+
25
+ [class^=pb_collapsible_main_kit] {
26
+ padding: $space_md;
27
+ }
28
+
29
+ [class^=pb_collapsible_content_kit] {
30
+ padding: $space_md;
31
+ }
@@ -19,7 +19,6 @@ type CollapsibleProps = {
19
19
  iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
20
20
  iconSize?: typeof IconSizes
21
21
  id?: string,
22
- padding?: string,
23
22
  }
24
23
 
25
24
  const useCollapsible = (initial = false) => {
@@ -40,7 +39,6 @@ const Collapsible = ({
40
39
  iconColor = 'default',
41
40
  iconSize,
42
41
  id,
43
- padding = 'md',
44
42
  ...props
45
43
  }: CollapsibleProps) => {
46
44
  const [isCollapsed, collapse] = useCollapsible(collapsed)
@@ -59,7 +57,7 @@ const Collapsible = ({
59
57
  const dataProps = buildDataProps(data)
60
58
  const classes = classnames(
61
59
  buildCss('pb_collapsible_kit'),
62
- globalProps(props, { padding }),
60
+ globalProps(props),
63
61
  className
64
62
  )
65
63
 
@@ -9,18 +9,16 @@ import CollapsibleContext from '../context'
9
9
  export type CollapsibleContentProps = {
10
10
  children?: React.ReactNode[] | React.ReactNode | string,
11
11
  className?: string,
12
- padding?: string,
13
12
  }
14
13
 
15
14
  const CollapsibleContent = ({
16
15
  children,
17
16
  className,
18
- padding = 'md',
19
17
  ...props
20
18
  }: CollapsibleContentProps) => {
21
19
  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
22
20
  const contentCSS = buildCss('pb_collapsible_content_kit')
23
- const contentSpacing = globalProps(props, { padding })
21
+ const contentSpacing = globalProps(props)
24
22
 
25
23
  return (
26
24
  <AnimateHeight
@@ -31,7 +31,6 @@ const colorMap = {
31
31
  type CollapsibleMainProps = {
32
32
  children: React.ReactNode[] | React.ReactNode,
33
33
  className?: string,
34
- padding?: string,
35
34
  cursor?: string,
36
35
 
37
36
  }
@@ -63,12 +62,11 @@ const CollapsibleMain = ({
63
62
  children,
64
63
  className,
65
64
  cursor = 'pointer',
66
- padding = 'md',
67
65
  ...props
68
66
  }: CollapsibleMainProps): React.ReactElement=> {
69
67
  const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
70
68
  const mainCSS = buildCss('pb_collapsible_main_kit')
71
- const mainSpacing = globalProps(props, { cursor, padding })
69
+ const mainSpacing = globalProps(props, { cursor })
72
70
 
73
71
  return (
74
72
  <div className={classnames(mainCSS, className, mainSpacing)}>
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
4
  const CollapsibleDefault = () => (
5
- <Collapsible>
5
+ <Collapsible >
6
6
  <Collapsible.Main>
7
7
  <div>{'Main Section'}</div>
8
8
  </Collapsible.Main>
@@ -263,6 +263,18 @@
263
263
  }
264
264
  }
265
265
 
266
+ [class*="dialog_body"] {
267
+ padding: $space_sm;
268
+ }
269
+
270
+ [class*="dialog_header"] {
271
+ padding: $space_sm;
272
+ }
273
+
274
+ [class*="dialog_footer"] {
275
+ padding: $space_sm;
276
+ }
277
+
266
278
  //styles specific to rails version of kit
267
279
  // rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
268
280
  .pb_dialog_wrapper_rails {
@@ -11,9 +11,9 @@ type DialogBodyProps = {
11
11
 
12
12
  // Body component
13
13
  const DialogBody = (props: DialogBodyProps) => {
14
- const { children, padding = "sm", className } = props
14
+ const { children, className } = props
15
15
  const bodyCSS = buildCss("dialog_body")
16
- const bodySpacing = globalProps(props, { padding })
16
+ const bodySpacing = globalProps(props)
17
17
 
18
18
  return (
19
19
  <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -25,16 +25,13 @@ type DialogFooterProps = {
25
25
  const DialogFooter = (props: DialogFooterProps) => {
26
26
  const {
27
27
  children,
28
- padding = "sm",
29
- paddingBottom = "sm",
30
- paddingX = "sm",
31
28
  className,
32
29
  spacing = "between",
33
30
  separator = false,
34
31
  } = props
35
32
 
36
33
  const footerCSS = buildCss("dialog_footer")
37
- const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
34
+ const footerSpacing = globalProps(props)
38
35
 
39
36
  return (
40
37
  <>
@@ -28,7 +28,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
28
28
  children,
29
29
  className,
30
30
  data = {},
31
- padding = "sm",
32
31
  spacing = "between",
33
32
  closeable = true,
34
33
  separator = true,
@@ -38,7 +37,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
38
37
  const dataProps = buildDataProps(data)
39
38
  const api = useContext(DialogContext)
40
39
  const headerCSS = buildCss("dialog_header")
41
- const headerSpacing = globalProps(props, { padding })
40
+ const headerSpacing = globalProps(props)
42
41
 
43
42
  /* eslint-disable react/jsx-handler-names */
44
43
 
@@ -1,33 +1,43 @@
1
- import React from "react"
1
+ import React from 'react'
2
2
 
3
- import Message from "../_message"
4
- import Image from "../../pb_image/_image"
3
+ import Message from '../_message'
4
+ import Image from '../../pb_image/_image'
5
5
 
6
6
  const MessageDefault = (props) => {
7
7
  return (
8
8
  <div>
9
9
  <Message
10
- avatarName='Mike Bishop'
11
- avatarStatus='online'
12
- avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
13
- borderRadius='rounded'
14
- label='Anna Black'
15
- message='How can we assist you today?'
16
- timestamp='20 seconds ago'
10
+ avatarName="Mike Bishop"
11
+ avatarStatus="online"
12
+ avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
13
+ label="Anna Black"
14
+ message="How can we assist you today?"
15
+ timestamp="20 seconds ago"
17
16
  {...props}
18
17
  />
19
18
 
20
19
  <br />
21
20
  <br />
21
+
22
+ <Message
23
+ alignTimestamp="left"
24
+ avatarName="Wade Winningham"
25
+ avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
26
+ label="Patrick Welch"
27
+ message="We will escalate this issue to a Senior Support agent."
28
+ timestamp="9 minutes ago"
29
+ {...props}
30
+ />
31
+
22
32
  <br />
23
33
  <br />
24
34
 
25
35
  <Message
26
- avatarName='Becca Jacobs'
27
- avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
28
- label='Lucille Sanchez'
29
- message='Application for Kate Smith is waiting for your approval'
30
- timestamp='2 days ago'
36
+ avatarName="Becca Jacobs"
37
+ avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
38
+ label="Lucille Sanchez"
39
+ message="Application for Kate Smith is waiting for your approval"
40
+ timestamp="2 days ago"
31
41
  {...props}
32
42
  />
33
43
 
@@ -35,10 +45,10 @@ const MessageDefault = (props) => {
35
45
  <br />
36
46
 
37
47
  <Message
38
- avatarName='Timothy Wenhold'
39
- label='Beverly Reyes'
40
- message='We are so sorry you had a bad experience!'
41
- timestamp='2 days ago'
48
+ avatarName="Timothy Wenhold"
49
+ label="Beverly Reyes"
50
+ message="We are so sorry you had a bad experience!"
51
+ timestamp="2 days ago"
42
52
  {...props}
43
53
  />
44
54
 
@@ -46,23 +56,24 @@ const MessageDefault = (props) => {
46
56
  <br />
47
57
 
48
58
  <Message
49
- label='Keith Craig'
50
- message='Please hold for one moment, I will check with my manager.'
51
- timestamp='2 days ago'
59
+ label="Keith Craig"
60
+ message="Please hold for one moment, I will check with my manager."
61
+ timestamp="2 days ago"
52
62
  {...props}
53
63
  />
54
64
 
55
65
  <br />
56
66
  <br />
57
67
 
58
- <Message label='Keith Craig'
59
- timestamp='2 days ago'
68
+ <Message
69
+ label="Keith Craig"
70
+ timestamp="2 days ago"
60
71
  {...props}
61
72
  >
62
73
  <Image
63
- alt='picture of a misty forest'
64
- size='md'
65
- url='https://unsplash.it/500/400/?image=634'
74
+ alt="picture of a misty forest"
75
+ size="md"
76
+ url="https://unsplash.it/500/400/?image=634"
66
77
  />
67
78
  </Message>
68
79
 
@@ -70,17 +81,18 @@ const MessageDefault = (props) => {
70
81
  <br />
71
82
 
72
83
  <Message
73
- label='Keith Craig'
74
- message='Please hold for one moment, I will check with my manager.'
75
- timestamp='2 days ago'
84
+ label="Keith Craig"
85
+ message="Please hold for one moment, I will check with my manager."
86
+ timestamp="2 days ago"
76
87
  {...props}
77
88
  >
78
89
  <Image
79
- alt='picture of a misty forest'
80
- size='md'
81
- url='https://unsplash.it/500/400/?image=634'
90
+ alt="picture of a misty forest"
91
+ size="md"
92
+ url="https://unsplash.it/500/400/?image=634"
82
93
  />
83
94
  </Message>
95
+
84
96
  </div>
85
97
  )
86
98
  }
@@ -8,5 +8,4 @@ examples:
8
8
  react:
9
9
  - message_default: Default
10
10
  - message_timestamp: With Timestamp Hover
11
- - message_hover: Hover
12
11
 
@@ -1,4 +1,2 @@
1
1
  export { default as MessageDefault } from './_message_default.jsx'
2
2
  export { default as MessageTimestamp } from './_message_timestamp.jsx'
3
- export { default as MessageHover } from './_message_hover.jsx'
4
-
@@ -1,7 +1,5 @@
1
1
  // Color Helper Utilities
2
2
 
3
- $transition-speed: 0.2s;
4
-
5
3
  @function shade($color, $percentage) {
6
4
  @return mix($charcoal, $color, $percentage);
7
5
  }
@@ -29,7 +27,6 @@ $transition-speed: 0.2s;
29
27
  }
30
28
  }
31
29
 
32
-
33
30
  @mixin text-color($colors-list) {
34
31
  @each $name, $color in $colors-list {
35
32
  .#{$name} {