Skip to content

Commit 6e92b6a

Browse files
markcaronkylebuch8
markcaron
authored and
kylebuch8
committed
Rh cta concept (#146)
* Adding theming and CTA options * Adding rh-define-vars mixin and rh-var function to make theming components easier * Cleaning up SASS in RH-CTA. Commenting mixins, replacing CSS Vars with rh-define-vars @mixin and rh-var @function * Fixing some var assignment bugs in RH-CTA * Removing call to breakpoint-sass that broke npm run build. Works now. * Making the SASS really verbose without the mixin, so we can test these CSS Vars out * Simplifying the SASS with CSS Vars similar to Cas' mixin, but written out manually as a test case * Changing 'on-saturated' and 'palette' attrs to 'on' and 'color' respectively to make them more logical and consistent across other RHElements * fixing package-lock by removing rh-button dependency * removing non-priority components * Finishing up rh-cta and rh-sass color maps
1 parent 709fdcc commit 6e92b6a

28 files changed

+6415
-6051
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ lerna-debug.log
55
.storybook_out
66
npm-debug.log
77
test/.wct-kludge
8+
.sass-cache

‎elements/rh-cta/demo/index.html‎

Lines changed: 78 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,39 @@
1010
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
1111
<script>require(['../rh-cta.umd.js'])</script>
1212

13+
<link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
14+
1315
<style>
16+
body {
17+
font: 16px/1.5 Overpass, Arial, sans-sans-serif;
18+
}
19+
1420
p {
1521
margin-bottom: 60px !important;
1622
}
23+
1724
rh-cta + rh-cta {
1825
margin-left: 10px;
1926
}
27+
28+
.inverted-demo {
29+
padding: 16px;
30+
background: #464646;
31+
}
32+
33+
.unfilled-demo {
34+
padding: 16px;
35+
background: #d2d2d2;
36+
}
37+
</style>
38+
<style>
39+
/* For demoing theme styles... */
40+
:root {
41+
--rh-theme--color--ui-accent: green;
42+
--rh-theme--color--ui-accent--hover: darkgreen;
43+
--rh-theme--color--ui-accent--text: white;
44+
--rh-theme--color--ui-accent--text--hover: white;
45+
}
2046
</style>
2147
<noscript>
2248
<link href="../../rhelement/rhelement-noscript.min.css" rel="stylesheet">
@@ -26,18 +52,65 @@
2652
</head>
2753
<body unresolved>
2854
<h1>&lt;rh-cta&gt;</h1>
55+
56+
<h2>Defaults</h2>
2957
<p>
30-
<rh-cta class="rh--solid"><a href="#">Become a Member</a></rh-cta>
31-
<rh-cta class="rh--outlined"><a href="#">Sign Up</a></rh-cta>
32-
<rh-cta class="rh--ghost"><a href="#">More info</a></rh-cta>
58+
<rh-cta><a href="#">Default</a></rh-cta>
59+
<rh-cta priority="primary"><a href="#">Primary</a></rh-cta>
60+
<rh-cta priority="secondary"><a href="#">Secondary</a></rh-cta>
3361
</p>
3462

63+
<h2>Color: Base</h2>
3564
<p>
36-
<rh-cta><a href="#">Learn more</a></rh-cta>
65+
<rh-cta color="base"><a href="#">Default</a></rh-cta>
66+
<rh-cta priority="primary" color="base"><a href="#">Primary</a></rh-cta>
67+
<rh-cta priority="secondary" color="base"><a href="#">Secondary</a></rh-cta>
3768
</p>
3869

70+
<h2>Color: Complement</h2>
3971
<p>
40-
<rh-cta class="rh--ghost"><a href="#">More info</a></rh-cta><rh-cta class="rh--solid"><a href="#">Become a Member</a></rh-cta>
72+
<rh-cta color="complement"><a href="#">Default</a></rh-cta>
73+
<rh-cta priority="primary" color="complement"><a href="#">Primary</a></rh-cta>
74+
<rh-cta priority="secondary" color="complement"><a href="#">Secondary</a></rh-cta>
75+
</p>
76+
77+
<h2>Color: Accent</h2>
78+
<p>
79+
<rh-cta color="accent"><a href="#">Default</a></rh-cta>
80+
<rh-cta priority="primary" color="accent"><a href="#">Primary</a></rh-cta>
81+
<rh-cta priority="secondary" color="accent"><a href="#">Secondary</a></rh-cta>
82+
</p>
83+
84+
<h2>Defaults; On: Dark</h2>
85+
<p class="inverted-demo">
86+
<rh-cta on="dark"><a href="#">Default</a></rh-cta>
87+
<rh-cta priority="primary" on="dark"><a href="#">Primary</a></rh-cta>
88+
<rh-cta priority="secondary" on="dark"><a href="#">Secondary</a></rh-cta>
89+
</p>
90+
91+
<p>
92+
General rule of thumb: If you add <code>color="..."</code> it'll override <code>on="dark"</code>. See below.
93+
</p>
94+
95+
<h2>Color: Base; On: Dark</h2>
96+
<p class="inverted-demo">
97+
<rh-cta color="base" on="dark"><a href="#">Default</a></rh-cta>
98+
<rh-cta priority="primary" color="base" on="dark"><a href="#">Primary</a></rh-cta>
99+
<rh-cta priority="secondary" color="base" on="dark"><a href="#">Secondary</a></rh-cta>
100+
</p>
101+
102+
<h2>Color: Complement; On: Dark</h2>
103+
<p class="inverted-demo">
104+
<rh-cta color="complement" on="dark"><a href="#">Default</a></rh-cta>
105+
<rh-cta priority="primary" color="complement" on="dark"><a href="#">Primary</a></rh-cta>
106+
<rh-cta priority="secondary" color="complement" on="dark"><a href="#">Secondary</a></rh-cta>
107+
</p>
108+
109+
<h2>Color: Accent; On: Dark</h2>
110+
<p class="inverted-demo">
111+
<rh-cta color="accent" on="dark"><a href="#">Default</a></rh-cta>
112+
<rh-cta priority="primary" color="accent" on="dark"><a href="#">Primary</a></rh-cta>
113+
<rh-cta priority="secondary" color="accent" on="dark"><a href="#">Secondary</a></rh-cta>
41114
</p>
42115
</body>
43116
</html>

‎elements/rh-cta/gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const path = require("path");
21
const fs = require("fs");
2+
const path = require("path");
33

44
const gulp = require("gulp");
55
const rename = require("gulp-rename");

0 commit comments

Comments
 (0)