playbook_ui 12.13.0.pre.alpha.addingProductTokens439 → 12.13.0

Sign up to get free protection for your applications and to get access to all the features.
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: []