Skip to content

Commit

Permalink
Color swatches and a couple book quotes
Browse files Browse the repository at this point in the history
  • Loading branch information
@roblevintennis
roblevintennis committed Sep 15, 2020
1 parent 1554b5f commit 746e660
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 20 deletions.
38 changes: 30 additions & 8 deletions agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -622,8 +622,15 @@ exports[`Storyshots Cards Card 1`] = `
style="flex: 2;"
>
<p>
This card comes with some “skinning css” included. Also, it's
a flex container with direction of
This card comes with some
<span
class="quoted"
>
skinning css
</span>
included. Also, it's a flex container with direction of
<i>
row
Expand Down Expand Up @@ -657,8 +664,15 @@ exports[`Storyshots Cards Card 1`] = `
style="flex 1;"
>
<p>
This card comes with some “skinning css” included. Also,
it's a flex container with direction of
This card comes with some
<span
class="quoted"
>
skinning css
</span>
included. Also, it's a flex container with direction of
<i>
column
Expand Down Expand Up @@ -687,10 +701,18 @@ exports[`Storyshots Cards Card 1`] = `
</h1>
<p>
This card omits any “skinning css” but includes the base or
core CSS. So, we can style it without the need to resort to css custom
theming at all -- we simply define our own customized styles. It does come
with some base styles but hopefully not too opinionated for your use case.
This card omits any
<span
class="quoted"
>
skinning css
</span>
but includes the base or core CSS. So, we can style it without the need to
resort to css custom theming at all -- we simply define our own customized
styles. It does come with some base styles but hopefully not too
opinionated for your use case.
</p>
</div>
</div>
Expand Down
82 changes: 71 additions & 11 deletions showcase/src/partials/Colors.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,50 @@
</p>
<div :class="$style.swatches">
<ul :class="$style.swatcheswrap">
<li :class="[$style.swatch, $style.primary]">--agnosticui-primary</li>
<li :class="[$style.swatch, $style.secondary]">--agnosticui-secondary</li>
<li :class="[$style.swatch, $style.grayextralight]">--agnosticui-gray-extra-light</li>
<li :class="[$style.swatch, $style.graylight]">--agnosticui-gray-light</li>
<li :class="[$style.swatch, $style.graymid]">--agnosticui-gray-mid</li>
<li :class="[$style.swatch, $style.graymiddark]">--agnosticui-gray-mid-dark</li>
<li :class="[$style.swatch, $style.graydark]">--agnosticui-gray-dark</li>
<li :class="[$style.swatch, $style.dark]">--agnosticui-dark</li>
<li :class="[$style.swatch, $style.primary]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-primary</footer>
</li>
<li :class="[$style.swatch, $style.secondary]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-secondary</footer>
</li>
<li :class="[$style.swatch, $style.light]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-light</footer>
</li>
</ul>
</div>
<div :class="$style.swatches">
<ul :class="$style.swatcheswrap">
<li :class="[$style.swatch, $style.grayextralight]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-gray-extra-light</footer>
</li>
<li :class="[$style.swatch, $style.graylight]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-gray-light</footer>
</li>
<li :class="[$style.swatch, $style.graymid]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-gray-mid</footer>
</li>
</ul>
</div>
<div :class="$style.swatches">
<ul :class="$style.swatcheswrap">
<li :class="[$style.swatch, $style.graymiddark]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-gray-mid-dark</footer>
</li>
<li :class="[$style.swatch, $style.graydark]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-gray-dark</footer>
</li>
<li :class="[$style.swatch, $style.dark]">
<div :class="$style.body"></div>
<footer :class="$style.footer">--agnosticui-dark</footer>
</li>
</ul>
</div>
</div>
Expand All @@ -57,7 +93,8 @@
--agnostic-gray-mid: #d8d8d8;
--agnostic-gray-mid-dark: #cccccc;
--agnostic-gray-dark: #aaaaaa;
--agnostic-black: #333333;
--agnostic-dark: #333333;
--agnostic-light: #ffffff;
/* More TBD */
}

Expand All @@ -81,18 +118,38 @@
--agnostic-gray-mid: #d8d8d8;
--agnostic-gray-mid-dark: #cccccc;
--agnostic-gray-dark: #aaaaaa;
--agnostic-black: #333333;
--agnostic-dark: #333333;
--agnostic-light: #ffffff;
}
.swatcheswrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 32px;
}
.body {
flex: 1;
}
.footer {
background-color: var(--gray-light-warm);
flex: 0 0 72px;
font-family: monospace;
font-size: 12px;
text-transform: lowercase;
display: flex;
align-items: center;
justify-content: center;
}
.swatch {
flex: 1;
flex: 0 1 33.33%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 2px 0px 4px rgba(0, 0, 0, 0.1);
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
}
.primary {
background-color: var(--agnostic-primary);
Expand All @@ -118,6 +175,9 @@
.dark {
background-color: var(--agnostic-dark);
}
.light {
background-color: var(--agnostic-light);
}
.component {
composes: component from "./partials.module.css";
Expand Down
2 changes: 1 addition & 1 deletion showcase/src/partials/partials.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
.tipcontent {
display: inline-block;
width: 69%;
padding: 24px 16px 24px 48px;
padding: 24px 16px 24px 32px;
}

.tipcontent p {
Expand Down

0 comments on commit 746e660

Please sign in to comment.