playbook_ui 12.13.0.pre.alpha.addingProductTokens439 → 12.13.0

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 (19) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.scss +3 -2
  3. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  4. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +35 -22
  5. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +37 -34
  6. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +44 -27
  7. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +33 -21
  8. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +7 -7
  9. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -6
  10. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb +4 -4
  11. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +5 -5
  12. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -3
  13. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +3 -3
  14. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb +6 -6
  15. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +6 -6
  16. data/app/pb_kits/playbook/tokens/_colors.scss +15 -55
  17. data/app/pb_kits/playbook/utilities/_colors.scss +13 -7
  18. data/lib/playbook/version.rb +2 -2
  19. metadata +7 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5810ed238e19013cd9913f7751d768a9b0e8c29cb9fb12e7b94f040eb90252ec
4
- data.tar.gz: '08a0f2529b37414524c4dbb79c3ea1c7efa4a388ade459dc6a77836f93ab1c0e'
3
+ metadata.gz: a8ab799be2c717401ccd987c55ab580b5ad66ad4180ff3590e679aa9f8b20e1b
4
+ data.tar.gz: 1061a9d85bf0cc5c7ef7731a9747eb29ff51e9151bd51e6f5401daec9c66429f
5
5
  SHA512:
6
- metadata.gz: 64c3596d0dd7835e6ee4ae6b1bfd55be5a8f87f4be5f90d0a584e60c5c3d0dc89c49b82ba8936417d210daeed87487bf99a218430bf9fec5084c0074601408bb
7
- data.tar.gz: 7a51f19a279eca809c072cd7b34b39b4efc30a766d28538e1548715036076438c00d442134d26d31357239b24f9ccb4c787b2cea4015c2445d165848e1e8718b
6
+ metadata.gz: 2a058d2ba141e6f0867018940f66dbdbd2be9ebc77d921e83d54a9f0113f037e4c356c38b1e050e3e5d6a4a58262095707dd54f3929fcafefea53e4e2b023026
7
+ data.tar.gz: 6bcbc50017600ac0915e86ce76c1b5a55cbc2cbda223f9e883121851382b146609a53dfe148ca11110629cd766bb8aa935c27edca1a773c46aaefdc89d374076
data/app/pb_kits/playbook/pb_card/_card.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @import "card_mixin";
2
- @import "../utilities/colors";
3
2
 
4
3
  [class^=pb_card_kit] {
5
4
  @include pb_card;
@@ -30,7 +29,9 @@
30
29
  @each $color_name, $color_value in $pb_card_header_colors {
31
30
  &[class*=_#{$color_name}] {
32
31
  @include pb_card_header_color($color_value);
33
- color: lightenText($color_value);
32
+ [class^=pb_body_kit] {
33
+ color: lightenText($color_value);
34
+ }
34
35
  }
35
36
  }
36
37
  &[class*=_white] {
data/app/pb_kits/playbook/pb_card/card.rb CHANGED
@@ -15,7 +15,7 @@ module Playbook
15
15
  values: %w[xs sm md lg xl none rounded],
16
16
  default: "md"
17
17
  prop :background, type: Playbook::Props::Enum,
18
- values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
18
+ values: %w[white light dark windows siding doors solar roofing gutters insulation none],
19
19
  default: "none"
20
20
 
21
21
  def classname
data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED
@@ -1,44 +1,57 @@
1
- <%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
1
+ <%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
2
2
 
3
- <%= pb_rails("card", props: { background: "dark", dark: true, margin_bottom: "sm" }) do %>
3
+ <br>
4
+
5
+ <%= pb_rails("card", props: { background: "dark", dark: true }) do %>
4
6
  <%= pb_rails("body", props: {
5
7
  text: "Dark",
6
- dark: true
8
+ color: "lighter"
7
9
  }) %>
8
10
  <% end %>
9
11
 
10
- <%= pb_rails("card", props: { margin_bottom: "sm" }) do %>
12
+ <br>
13
+
14
+ <%= pb_rails("card") do %>
11
15
  <%= pb_rails("body", props: {
12
- text: "White / Default"
16
+ text: "White"
13
17
  }) %>
14
18
  <% end %>
15
19
 
16
- <%= pb_rails("card", props: { background: "light", margin_bottom: "sm" }) do %>
20
+ <br>
21
+
22
+ <%= pb_rails("card", props: { background: "light" }) do %>
17
23
  <%= pb_rails("body", props: {
18
- text: "Light",
19
- dark: false
20
- }) %>
24
+ text: "Light"
25
+ }) %>
21
26
  <% end %>
22
27
 
23
- <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
28
+ <br>
29
+
30
+ <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
31
+
32
+ <br>
24
33
 
25
- <%= pb_rails("card", props: { background: "product_1_background", dark: true, margin_bottom: "sm" }) do %>
34
+ <%= pb_rails("card", props: { background: "windows", dark: true }) do %>
26
35
  <%= pb_rails("body", props: {
27
- text: "Product 1 Background",
28
- dark: true
29
- }) %>
36
+ text: "Windows",
37
+ color: "lighter"
38
+ }) %>
30
39
  <% end %>
31
40
 
32
- <%= pb_rails("card", props: { background: "product_7_highlight", margin_bottom: "sm" }) do %>
41
+ <br>
42
+
43
+ <%= pb_rails("card", props: { background: "siding" }) do %>
33
44
  <%= pb_rails("body", props: {
34
- text: "Product 7 Highlight",
35
- dark: true
36
- }) %>
45
+ text: "Siding"
46
+ }) %>
37
47
  <% end %>
38
48
 
39
- <%= pb_rails("card", props: { background: "product_2_background", margin_bottom: "sm" }) do %>
49
+ <br>
50
+
51
+ <%= pb_rails("card", props: { background: "doors" }) do %>
40
52
  <%= pb_rails("body", props: {
41
- text: "Product 2 Highlight",
42
- dark: true
43
- }) %>
53
+ text: "Doors"
54
+ }) %>
44
55
  <% end %>
56
+
57
+ <br>
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -8,88 +8,91 @@ const CardBackground = (props) => {
8
8
  <div>
9
9
  <Title
10
10
  {...props}
11
- marginBottom="sm"
12
11
  size={4}
13
12
  tag="h4"
14
13
  text="Card Colors"
15
14
  />
15
+
16
+ <br />
17
+
16
18
  <Card
17
19
  background="dark"
18
20
  dark
19
- marginBottom="sm"
20
21
  {...props}
21
22
  >
22
23
  <Body
23
- dark
24
+ color="lighter"
24
25
  text="Dark"
26
+ {...props}
25
27
  />
26
28
  </Card>
27
29
 
28
- <Card
29
- marginBottom="sm"
30
- {...props}
31
- >
30
+ <br />
31
+
32
+ <Card>
32
33
  <Body
33
- text="White / Default"
34
- {...props}
34
+ text="White"
35
35
  />
36
36
  </Card>
37
37
 
38
+ <br />
38
39
 
39
40
  <Card
40
41
  background="light"
41
- marginBottom="sm"
42
42
  {...props}
43
43
  >
44
- <Body text="Light" />
44
+ <Body
45
+ text="Light"
46
+ />
45
47
  </Card>
46
48
 
47
-
49
+ <br />
50
+
48
51
  <Title
49
52
  {...props}
50
- marginBottom="sm"
51
53
  size={4}
52
54
  tag="h4"
53
55
  text="Product Colors"
54
56
  />
55
57
 
58
+ <br />
59
+
56
60
  <Card
57
- background="product_1_background"
58
- marginBottom="sm"
61
+ background="windows"
59
62
  {...props}
60
- >
63
+ >
61
64
  <Body
62
- dark
63
- text="Product 1 Background"
65
+ color="lighter"
66
+ text="Windows"
67
+ {...props}
64
68
  />
65
69
  </Card>
66
70
 
67
-
71
+ <br />
68
72
 
69
- <Card
70
- background="product_7_highlight"
71
- marginBottom="sm"
72
- {...props} >
73
- <Body
74
- dark
75
- text="Product 7 Highlight"
76
- />
73
+ <Card
74
+ background="siding"
75
+ {...props}
76
+ >
77
+ <Body
78
+ text="Siding"
79
+ {...props}
80
+ />
77
81
  </Card>
78
82
 
79
-
83
+ <br />
80
84
 
81
- <Card
82
- background="product_2_highlight"
83
- marginBottom="sm"
85
+ <Card
86
+ background="doors"
84
87
  {...props}
85
88
  >
86
89
  <Body
87
- dark
88
- text="Product 2 Highlight"
90
+ text="Doors"
91
+ {...props}
89
92
  />
90
93
  </Card>
91
94
 
92
-
95
+ <br />
93
96
  </div>
94
97
  )
95
98
  }
data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED
@@ -1,57 +1,74 @@
1
- <%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
1
+ <%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
2
2
 
3
- <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
4
- <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
5
- <%= pb_rails("body", props: { text: "Category 1", dark: true }) %>
6
- <% end %>
7
- <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
8
- Category 1
9
- <% end %>
10
- <% end %>
3
+ <br>
11
4
 
12
- <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
13
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_3" }) do %>
14
- <%= pb_rails("body", props: { text: "Category 3", dark: false }) %>
5
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
6
+ <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
7
+ <%= pb_rails("body", props: { text: "category_1", dark: true }) %>
8
+ <% end %>
9
+ <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
10
+ Body
11
+ <% end %>
15
12
  <% end %>
16
- <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
17
- Body
13
+
14
+ <br>
15
+
16
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
17
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
18
+ <%= pb_rails("body", props: { text: "category_2", dark: true }) %>
19
+
20
+ <% end %>
21
+ <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
22
+ Body
23
+ <% end %>
18
24
  <% end %>
19
- <% end %>
20
25
 
21
- <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
26
+ <br>
27
+
28
+ <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
22
29
 
23
- <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
24
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_2_background" }) do %>
25
- <%= pb_rails("body", props: { text: "Product 2 Background", dark: true }) %>
30
+ <br>
31
+
32
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
33
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "siding" }) do %>
34
+ <%= pb_rails("body", props: { text: "Siding", dark: true }) %>
26
35
  <% end %>
27
36
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
28
37
  Body
29
38
  <% end %>
30
39
  <% end %>
31
40
 
32
- <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
33
- <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_6_background" }) do %>
34
- <%= pb_rails("body", props: { text: "Product 6 Background", dark: true }) %>
41
+ <br>
42
+
43
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
44
+ <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "gutters" }) do %>
45
+ <%= pb_rails("body", props: { text: "Gutters", dark: true }) %>
35
46
  <% end %>
36
47
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
37
48
  Body
38
49
  <% end %>
39
50
  <% end %>
40
51
 
41
- <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
52
+ <br>
42
53
 
43
- <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
54
+ <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4 }) %>
55
+
56
+ <br>
57
+
58
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
44
59
  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %>
45
- <%= pb_rails("body", props: { text: "White", dark: false }) %>
60
+ <%= pb_rails("body", props: { text: "White" }) %>
46
61
  <% end %>
47
62
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
48
63
  Body
49
64
  <% end %>
50
65
  <% end %>
51
66
 
52
- <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
67
+ <br>
68
+
69
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
53
70
  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
54
- <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
71
+ <%= pb_rails("body", props: { text: "Dark" }) %>
55
72
  <% end %>
56
73
  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
57
74
  Body
data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx CHANGED
@@ -9,21 +9,21 @@ const CardHeader = (props) => {
9
9
  <div>
10
10
  <Title
11
11
  {...props}
12
- marginBottom='sm'
13
12
  size={4}
14
13
  tag="h4"
15
14
  text="Category Colors"
16
15
  />
17
16
 
17
+ <br />
18
+
18
19
  <Card
19
20
  {...props}
20
- marginBottom='sm'
21
21
  padding="none"
22
22
  >
23
- <Card.Header headerColor="category_1" >
23
+ <Card.Header>
24
24
  <Body
25
- dark
26
- text="Category 1"
25
+ {...props}
26
+ text="category_1"
27
27
  />
28
28
  </Card.Header>
29
29
  <Card.Body>
@@ -34,15 +34,19 @@ const CardHeader = (props) => {
34
34
  </Card.Body>
35
35
  </Card>
36
36
 
37
+ <br />
38
+
37
39
  <Card
38
40
  {...props}
39
- marginBottom='sm'
40
41
  padding="none"
41
42
  >
42
43
  <Card.Header
43
- headerColor="category_3"
44
+ headerColor="category_2"
44
45
  >
45
- <Body text="Category 3" />
46
+ <Body
47
+ {...props}
48
+ text="category_2"
49
+ />
46
50
  </Card.Header>
47
51
  <Card.Body
48
52
  padding="md"
@@ -54,27 +58,27 @@ const CardHeader = (props) => {
54
58
  </Card.Body>
55
59
  </Card>
56
60
 
61
+ <br />
57
62
 
58
63
  <Title
59
64
  {...props}
60
- marginBottom='sm'
61
65
  size={4}
62
66
  tag="h4"
63
67
  text="Product Colors"
64
68
  />
65
69
 
70
+ <br />
71
+
66
72
  <Card
67
73
  {...props}
68
- marginBottom='sm'
69
74
  padding="none"
70
75
  >
71
76
  <Card.Header
72
- headerColor="product_2_background"
77
+ headerColor="siding"
73
78
  >
74
79
  <Body
75
80
  {...props}
76
- dark
77
- text="Product 2 Background"
81
+ text="Siding"
78
82
  />
79
83
  </Card.Header>
80
84
  <Card.Body>
@@ -85,16 +89,18 @@ const CardHeader = (props) => {
85
89
  </Card.Body>
86
90
  </Card>
87
91
 
92
+ <br />
93
+
88
94
  <Card
89
95
  {...props}
90
- marginBottom='sm'
91
96
  padding="none"
92
97
  >
93
- <Card.Header headerColor="product_6_background" >
98
+ <Card.Header
99
+ headerColor="gutters"
100
+ >
94
101
  <Body
95
102
  {...props}
96
- dark
97
- text="Product 6 Background"
103
+ text="Gutters"
98
104
  />
99
105
  </Card.Header>
100
106
  <Card.Body>
@@ -105,24 +111,28 @@ const CardHeader = (props) => {
105
111
  </Card.Body>
106
112
  </Card>
107
113
 
114
+ <br />
108
115
 
109
116
  <Title
110
117
  {...props}
111
- marginBottom='sm'
112
118
  size={4}
113
119
  tag="h4"
114
120
  text="Background Colors"
115
121
  />
116
122
 
123
+ <br />
124
+
117
125
  <Card
118
126
  {...props}
119
- marginBottom='sm'
120
127
  padding="none"
121
128
  >
122
129
  <Card.Header
123
130
  headerColor="white"
124
131
  >
125
- <Body text="White" />
132
+ <Body
133
+ {...props}
134
+ text="White"
135
+ />
126
136
  </Card.Header>
127
137
  <Card.Body>
128
138
  <Body
@@ -132,6 +142,8 @@ const CardHeader = (props) => {
132
142
  </Card.Body>
133
143
  </Card>
134
144
 
145
+ <br />
146
+
135
147
  <Card
136
148
  {...props}
137
149
  padding="none"
@@ -140,7 +152,7 @@ const CardHeader = (props) => {
140
152
  headerColor="dark"
141
153
  >
142
154
  <Body
143
- dark
155
+ {...props}
144
156
  text="Dark"
145
157
  />
146
158
  </Card.Header>
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb CHANGED
@@ -1,9 +1,9 @@
1
- <%= pb_rails("card", props: {highlight: {position: "side", color:"product_6_highlight"}, margin_bottom: "sm"}) do %>
2
- Side Position & Product 6 Highlight Color
1
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
2
+ Card content
3
3
  <% end %>
4
- <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
5
- Top Position & Warning Color
4
+
5
+ <br>
6
+
7
+ <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}}) do %>
8
+ Card content
6
9
  <% end %>
7
- <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
8
- Side Position & Category 2 Color
9
- <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx CHANGED
@@ -7,25 +7,27 @@ const CardHighlight = (props) => {
7
7
  <div>
8
8
  <Card
9
9
  {...props}
10
- highlight={{ position: 'side', color: 'product_6_highlight' }}
11
- marginBottom="sm"
10
+ highlight={{ position: 'side', color: 'windows' }}
12
11
  >
13
- {'Side Position & Product 6 Highlight Color'}
12
+ {'Card content'}
14
13
  </Card>
15
14
 
15
+ <br />
16
+
16
17
  <Card
17
18
  {...props}
18
19
  highlight={{ position: 'top', color: 'warning' }}
19
- marginBottom="sm"
20
20
  >
21
- {'Top Position & Warning Color'}
21
+ {'Card content'}
22
22
  </Card>
23
23
 
24
+ <br />
25
+
24
26
  <Card
25
27
  {...props}
26
28
  highlight={{ position: 'side', color: 'category_2' }}
27
29
  >
28
- {'Side Position & Category 2 Color'}
30
+ {'Card content'}
29
31
  </Card>
30
32
  </div>
31
33
  )
data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= pb_rails("legend", props: { color: "data_8", text: "Data 8" }) %>
2
- <%= pb_rails("legend", props: { color: "warning", text: "Warning" }) %>
3
- <%= pb_rails("legend", props: { color: "product_6_highlight", text: "Product 6 (highlight)" }) %>
4
- <%= pb_rails("legend", props: { color: "category_7", text: "Category 7" }) %>
1
+ <%= pb_rails("legend", props: { color: "data_8", text: "Windows" }) %>
2
+ <%= pb_rails("legend", props: { color: "warning", text: "Windows" }) %>
3
+ <%= pb_rails("legend", props: { color: "windows", text: "Windows" }) %>
4
+ <%= pb_rails("legend", props: { color: "category_7", text: "Windows" }) %>
data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx CHANGED
@@ -5,22 +5,22 @@ const LegendColors = (props) => (
5
5
  <div>
6
6
  <Legend
7
7
  color="data_8"
8
- text="Data 8"
8
+ text="Windows"
9
9
  {...props}
10
10
  />
11
11
  <Legend
12
12
  color="warning"
13
- text="Warning"
13
+ text="Windows"
14
14
  {...props}
15
15
  />
16
16
  <Legend
17
- color="product_6_highlight"
18
- text="Product 6 (highlight)"
17
+ color="windows"
18
+ text="Windows"
19
19
  {...props}
20
20
  />
21
21
  <Legend
22
22
  color="category_7"
23
- text="Category 7"
23
+ text="Windows"
24
24
  {...props}
25
25
  />
26
26
  </div>
data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb CHANGED
@@ -1,3 +1,3 @@
1
- <%= pb_rails("legend", props: { color: "#dc418a", text: "Custom Legend Color 1" }) %>
2
- <%= pb_rails("legend", props: { color: "#3ef0b8", text: "Custom Legend Color 2" }) %>
3
- <%= pb_rails("legend", props: { color: "#ab8b04", text: "Custom Legend Color 3" }) %>
1
+ <%= pb_rails("legend", props: { color: "#dc418a", text: "Windows" }) %>
2
+ <%= pb_rails("legend", props: { color: "#3ef0b8", text: "Windows" }) %>
3
+ <%= pb_rails("legend", props: { color: "#ab8b04", text: "Windows" }) %>
data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx CHANGED
@@ -5,17 +5,17 @@ const LegendCustomColors = (props) => (
5
5
  <div>
6
6
  <Legend
7
7
  color="#dc418a"
8
- text="Custom Legend Color 1"
8
+ text="Windows"
9
9
  {...props}
10
10
  />
11
11
  <Legend
12
12
  color="#3ef0b8"
13
- text="Custom Legend Color 2"
13
+ text="Windows"
14
14
  {...props}
15
15
  />
16
16
  <Legend
17
17
  color="#ab8b04"
18
- text="Custom Legend Color 3"
18
+ text="Windows"
19
19
  {...props}
20
20
  />
21
21
  </div>
data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb CHANGED
@@ -9,22 +9,22 @@
9
9
  </tr>
10
10
  </thead>
11
11
  <tbody>
12
- <%= pb_rails("table/table_row", props: { side_highlight_color: "product_1_highlight" }) do %>
13
- <td>Product 1</td>
12
+ <%= pb_rails("table/table_row", props: { side_highlight_color: "solar" }) do %>
13
+ <td>Solar</td>
14
14
  <td>Value 2</td>
15
15
  <td>Value 3</td>
16
16
  <td>Value 4</td>
17
17
  <td>Value 5</td>
18
18
  <% end %>
19
- <%= pb_rails("table/table_row", props: { side_highlight_color: "product_2_highlight" }) do %>
20
- <td>Product 2</td>
19
+ <%= pb_rails("table/table_row", props: { side_highlight_color: "roofing" }) do %>
20
+ <td>Roofing</td>
21
21
  <td>Value 2</td>
22
22
  <td>Value 3</td>
23
23
  <td>Value 4</td>
24
24
  <td>Value 5</td>
25
25
  <% end %>
26
- <%= pb_rails("table/table_row", props: { side_highlight_color: "product_3_highlight" }) do %>
27
- <td>Product 3</td>
26
+ <%= pb_rails("table/table_row", props: { side_highlight_color: "gutters" }) do %>
27
+ <td>Gutters</td>
28
28
  <td>Value 2</td>
29
29
  <td>Value 3</td>
30
30
  <td>Value 4</td>
data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx CHANGED
@@ -21,30 +21,30 @@ const TableSideHighlight = (props) => {
21
21
  </thead>
22
22
  <tbody>
23
23
  <TableRow
24
- sideHighlightColor="product_1_highlight"
24
+ sideHighlightColor="solar"
25
25
  {...props}
26
26
  >
27
- <td>{'Product 1'}</td>
27
+ <td>{'Solar'}</td>
28
28
  <td>{'Value 2'}</td>
29
29
  <td>{'Value 3'}</td>
30
30
  <td>{'Value 4'}</td>
31
31
  <td>{'Value 5'}</td>
32
32
  </TableRow>
33
33
  <TableRow
34
- sideHighlightColor="product_2_highlight"
34
+ sideHighlightColor="roofing"
35
35
  {...props}
36
36
  >
37
- <td>{'Product 2'}</td>
37
+ <td>{'Roofing'}</td>
38
38
  <td>{'Value 2'}</td>
39
39
  <td>{'Value 3'}</td>
40
40
  <td>{'Value 4'}</td>
41
41
  <td>{'Value 5'}</td>
42
42
  </TableRow>
43
43
  <TableRow
44
- sideHighlightColor="product_3_highlight"
44
+ sideHighlightColor="gutters"
45
45
  {...props}
46
46
  >
47
- <td>{'Product 3'}</td>
47
+ <td>{'Gutters'}</td>
48
48
  <td>{'Value 2'}</td>
49
49
  <td>{'Value 3'}</td>
50
50
  <td>{'Value 4'}</td>
data/app/pb_kits/playbook/tokens/_colors.scss CHANGED
@@ -213,62 +213,22 @@ $status_color_text: (
213
213
  $primary_action: $primary !default;
214
214
 
215
215
  /* Product colors ---------------------*/
216
- $product_1_background: #003DB2 !default;
217
- $product_1_highlight: #0057FF !default;
218
- $product_2_background: #6000AC !default;
219
- $product_2_highlight: #8200E9 !default;
220
- $product_3_background: #B85C00 !default;
221
- $product_3_highlight: #CE7500 !default;
222
- $product_4_background: #007E8F !default;
223
- $product_4_highlight: #00B9D2 !default;
224
- $product_5_background: #760B24 !default;
225
- $product_5_highlight: #B8032E !default;
226
- $product_6_background: #008540 !default;
227
- $product_6_highlight: #00A851 !default;
228
- $product_7_background: #96006C !default;
229
- $product_7_highlight: #CD0094 !default;
230
- $product_8_background: #144075 !default;
231
- $product_8_highlight: #1A569E !default;
232
- $product_9_background: #fcc419 !default;
233
- $product_9_highlight: #ffd43b !default;
234
- $product_10_background: #20c997 !default;
235
- $product_10_highlight: #38d9a9 !default;
236
- $windows: $product_1_background !default; // deprecated
237
- $siding: $product_2_background !default; // deprecated
238
- $doors: $product_3_background !default; // deprecated
239
- $solar: $product_4_background !default; // deprecated
240
- $roofing: $product_5_background !default; // deprecated
241
- $gutters: $product_6_background !default; // deprecated
242
- $insulation: $product_7_background !default; // deprecated
216
+ $windows: $royal !default;
217
+ $siding: $yellow !default;
218
+ $doors: $teal !default;
219
+ $solar: $green !default;
220
+ $roofing: $slate !default;
221
+ $gutters: $purple !default;
222
+ $insulation: $red !default;
243
223
  $product_colors: (
244
- windows: $windows,
245
- siding: $siding,
246
- doors: $doors,
247
- solar: $solar,
248
- roofing: $roofing,
249
- gutters: $gutters,
250
- insulation: $insulation,
251
- product_1_background: $product_1_background,
252
- product_1_highlight: $product_1_highlight,
253
- product_2_background: $product_2_background,
254
- product_2_highlight: $product_2_highlight,
255
- product_3_background: $product_3_background,
256
- product_3_highlight: $product_3_highlight,
257
- product_4_background: $product_4_background,
258
- product_4_highlight: $product_4_highlight,
259
- product_5_background: $product_5_background,
260
- product_5_highlight: $product_5_highlight,
261
- product_6_background: $product_6_background,
262
- product_6_highlight: $product_6_highlight,
263
- product_7_background: $product_7_background,
264
- product_7_highlight: $product_7_highlight,
265
- product_8_background: $product_8_background,
266
- product_8_highlight: $product_8_highlight,
267
- product_9_background: $product_9_background,
268
- product_9_highlight: $product_9_highlight,
269
- product_10_background: $product_10_background,
270
- product_10_highlight: $product_10_highlight
271
- ) !default;
224
+ windows: $windows,
225
+ siding: $siding,
226
+ doors: $doors,
227
+ solar: $solar,
228
+ roofing: $roofing,
229
+ gutters: $gutters,
230
+ insulation: $insulation
231
+ );
272
232
 
273
233
  /* Category colors ---------------------*/
274
234
  $category_1: $royal !default;
data/app/pb_kits/playbook/utilities/_colors.scss CHANGED
@@ -1,5 +1,3 @@
1
- // Color Helper Utilities
2
-
3
1
  @function shade($color, $percentage) {
4
2
  @return mix($charcoal, $color, $percentage);
5
3
  }
@@ -16,12 +14,9 @@
16
14
  @return $text_color;
17
15
  }
18
16
 
19
-
20
- // Generate Color Helper Classes
21
-
22
17
  @mixin background-color($colors-list) {
23
18
  @each $name, $color in $colors-list {
24
- .pb_web_#{$name} {
19
+ .#{$name} {
25
20
  background-color: $color !important;
26
21
  }
27
22
  }
@@ -33,4 +28,15 @@
33
28
  color: $color !important;
34
29
  }
35
30
  }
36
- }
31
+ }
32
+
33
+ .bg_gradient {
34
+ background: $gradient_start;
35
+ background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
36
+ background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
37
+ background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
38
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
39
+ }
40
+
41
+ @include text-color($text_colors);
42
+ @include background-color($background_colors);
data/lib/playbook/version.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.13.0"
5
- VERSION = "12.13.0.pre.alpha.addingProductTokens439"
4
+ PREVIOUS_VERSION = "12.12.0"
5
+ VERSION = "12.13.0"
6
6
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.13.0.pre.alpha.addingProductTokens439
4
+ version: 12.13.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-04-06 00:00:00.000000000 Z
12
+ date: 2023-04-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -2462,7 +2462,7 @@ homepage: http://playbook.powerapp.cloud
2462
2462
  licenses:
2463
2463
  - ISC
2464
2464
  metadata: {}
2465
- post_install_message:
2465
+ post_install_message:
2466
2466
  rdoc_options: []
2467
2467
  require_paths:
2468
2468
  - lib
@@ -2473,12 +2473,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2473
2473
  version: '0'
2474
2474
  required_rubygems_version: !ruby/object:Gem::Requirement
2475
2475
  requirements:
2476
- - - ">"
2476
+ - - ">="
2477
2477
  - !ruby/object:Gem::Version
2478
- version: 1.3.1
2478
+ version: '0'
2479
2479
  requirements: []
2480
2480
  rubygems_version: 3.3.7
2481
- signing_key:
2481
+ signing_key:
2482
2482
  specification_version: 4
2483
2483
  summary: Playbook Design System
2484
2484
  test_files: []