Skip to content

TASK | Use current color for all interface elements #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
j6s wants to merge 4 commits into
base: master
Choose a base branch
from
Open

TASK | Use current color for all interface elements #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b219bf4
FEATURE | Add color picker
j6s Jun 6, 2020
598278d
FEATURE | Add shade generation
j6s Jun 6, 2020
5d353bd
FEATURE | Add utility classes for current color
j6s Jun 6, 2020
47bd79a
TASK | Use current color for all interface elements
j6s Jun 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@
"dependencies": {
"@caohenghu/vue-colorpicker": "^1.2.4",
"chroma-js": "^2.1.0",
"color": "^3.1.2",
"core-js": "^3.6.5",
"vue": "^2.6.11"
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue": "^2.6.11",
"vue-color": "^2.7.1"
},
"devDependencies": {
"@tailwindcss/custom-forms": "^0.2.1",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;900&display=swap" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body class="bg-yellow-200 text-blue-900 font-mono leading-normal py-12 px-4">
<body class="font-mono leading-normal">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
Expand Down
142 changes: 59 additions & 83 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div id="app">
<div id="app" class="py-12 px-4 bg-current-100 text-current-900" :style="customProperties">
<div class="max-w-xl mx-auto">
<h1 class="font-serif text-6xl font-black text-blue-800">
<h1 class="font-serif text-6xl font-black text-current-800">
TailScale
</h1>
<p class="max-w-sm mt-0">
Expand All @@ -10,62 +10,55 @@
</div>

<div class="max-w-xl mx-auto mt-8">
<div class="p-4 -mx-4 border-4 border-yellow-300 rounded-lg">
<div class="p-4 -mx-4 border-4 border-current-300 rounded-lg">
<div class="grid grid-cols-2 gap-4">
<label class="block">
<span class="text-sm uppercase">Color Name</span>
<input
class="block w-full mt-1 form-input"
placeholder="green"
v-model="colors[4].name"
v-model="baseColor"
>
</label>

<label class="block">
<span class="text-sm uppercase">Color Value</span>
<input
class="block w-full mt-1 form-input"
type="text"
placeholder="#48bb78"
v-model="colors[4].value"
>
<color-picker v-model="baseColor" />
</label>
</div>
</div>
</div>

<div class="mt-16">
<h2 class="max-w-xl mx-auto font-serif text-4xl font-black text-blue-800">
<h2 class="max-w-xl mx-auto font-serif text-4xl font-black text-current-800">
Here’s your Palette
</h2>
<p class="max-w-xl mx-auto mt-2">
Click to copy, edit to change.
</p>
<div class="max-w-3xl mx-auto mt-6">
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
<color-card v-model="colors[0]" />
<color-card v-model="colors[1]" />
<color-card v-model="colors[2]" />
<color-card v-model="colors[3]" />
<color-card v-model="colors[4]" />
<color-card v-model="colors[5]" />
<color-card v-model="colors[6]" />
<color-card v-model="colors[7]" />
<color-card v-model="colors[8]" />
<color-card
v-for="(color, shade) in shades"
v-model="shades[shade]"
:color-name="colorName"
:shade-name="shade"
:key="shade"
/>
</div>
</div>
</div>

<div class="mt-16">
<h2 class="max-w-xl mx-auto font-serif text-4xl font-black text-blue-800">
<h2 class="max-w-xl mx-auto font-serif text-4xl font-black text-current-800">
Here are your Color Objects
</h2>
<div class="max-w-xl mx-auto mt-2">
<p>
Copy &amp; paste into <code class="text-gray-800">tailwind.config.js</code>.
</p>
<button
class="inline-flex items-center px-4 py-2 mt-4 text-xs tracking-wide uppercase transition duration-200 ease-in bg-yellow-300 rounded-sm hover:text-yellow-100 hover:bg-blue-800 focus:shadow-outline focus:outline-none"
class="inline-flex items-center px-4 py-2 mt-4 text-xs tracking-wide uppercase transition duration-200 ease-in bg-current-200 rounded-sm hover:text-current-100 hover:bg-current-800 focus:shadow-outline focus:outline-none"
>
<svg class="w-4 h-4 mr-2 fill-current" viewBox="0 0 16 16"><title>note-code</title><g><path d="M10.4,15.8l-3.6-2.7l-5.5,1.8C1,15.1,0,15.1,0,14V2c0-0.6,0.4-1,1-1h2v2H2v9.6l4.7-1.6 c0.3-0.1,0.7,0,0.9,0.1l3.5,2.6l2.9-1.4V3h-1V1h2c0.6,0,1,0.4,1,1v11c0,0.4-0.2,0.7-0.6,0.9l-4,2C11.1,16,10.7,16,10.4,15.8z" /> <rect x="5" width="6" height="4" /></g></svg>
<span>Copy to clipboard</span>
Expand All @@ -74,7 +67,7 @@


<div class="max-w-xl mx-auto mt-6">
<pre class="px-16 py-6 text-yellow-200 bg-blue-900 rounded-lg">
<pre class="px-16 py-6 text-current-100 bg-current-900 rounded-lg">
green: {
100: '#f0fff4',
200: '#c6f6d5',
Expand All @@ -92,87 +85,70 @@ green: {
</template>

<script>
import chroma from 'chroma-js';
import Color from 'color';
import ColorCard from './components/color-card';
import ColorPicker from './components/color-picker';

export default {
name: 'App',

data: () => ({
colors: [
{
name: 'green',
value: '#f0fff4',
shade: 100,
},
{
name: 'green',
value: '#c6f6d5',
shade: 200,
},
{
name: 'green',
value: '#9ae6b4',
shade: 300,
},
{
name: 'green',
value: '#68d391',
shade: 400,
},
{
name: 'green',
value: '#48bb78',
shade: 500,
},
{
name: 'green',
value: '#38a169',
shade: 600,
},
{
name: 'green',
value: '#2f855a',
shade: 700,
},
{
name: 'green',
value: '#276749',
shade: 800,
},
{
name: 'green',
value: '#22543d',
shade: 900,
},
],
colorName: 'green',
baseColor: '#48bb78',
shades: {
100: '#f0fff4',
200: '#c6f6d5',
300: '#9ae6b4',
400: '#68d391',
500: '#48bb78',
600: '#38a169',
700: '#2f855a',
800: '#276749',
900: '#22543d',
},
}),

watch: {
baseColor(base) {
this.shades = this.generateColorScale(base);
},
},

computed: {
customProperties() {
const properties = {};
for (const shade of Object.keys(this.shades)) {
properties[`--current-${shade}`] = this.shades[shade];
}
return properties;
},
},


methods: {
// WIP color scale generation
generateColorScale(base) {
const color = chroma(base);
const white = chroma('#ffffff');
const black = chroma('#000000');
const color = Color(base);
const white = Color('#ffffff');
const black = Color('#000000');

return {
100: color.mix(white,0.9).base(),
200: color.mix(white,0.7).base(),
300: color.mix(white,0.5).base(),
400: color.mix(white,0.3).base(),
100: color.mix(white,0.9).hex(),
200: color.mix(white,0.7).hex(),
300: color.mix(white,0.5).hex(),
400: color.mix(white,0.3).hex(),
500: base,
600: color.mix(black,0.3).base(),
700: color.mix(black,0.5).base(),
800: color.mix(black,0.7).base(),
900: color.mix(black,0.8).base(),
600: color.mix(black,0.3).hex(),
700: color.mix(black,0.5).hex(),
800: color.mix(black,0.7).hex(),
900: color.mix(black,0.8).hex(),
};
},
},


components: {
ColorCard,
ColorPicker,
},
};
</script>
13 changes: 6 additions & 7 deletions src/components/color-card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<template>
<div
class="flex justify-center p-4 rounded-lg shadow-lg md:p-6"
:style="`background-color: ${value.value}`"
:style="`background-color: ${value}`"
>
<div>
<p class="text-sm text-center">
<span class="inline-block px-2 py-1 bg-white bg-opacity-50 rounded-sm">
{{ `${value.name}-${value.shade}` }}
{{ `${colorName}-${shadeName}` }}
</span>
</p>
<input
type="text"
class="inline-block max-w-full mt-2 text-sm form-input"
v-model="value.value"
v-model="value"
>
</div>
</div>
Expand All @@ -21,10 +21,9 @@
<script>
export default {
props: {
value: {
type: Object,
required: true,
},
value: { type: String, required: true },
colorName: { type: String, required: true },
shadeName: { type: String, required: true },
},

watch: {
Expand Down
46 changes: 46 additions & 0 deletions src/components/color-picker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<template>
<div class="color-picker">
<chrome-picker
:value="value"
@input="color => this.$emit('input', color.hex)"
disable-alpha
/>
</div>
</template>

<script>
import { Chrome as ChromePicker } from 'vue-color';

export default {
name: 'ColorPicker',

components: { ChromePicker },

props: {
value: { type: String, required: true },
},
};
</script>

<style lang="scss" scoped>
.color-picker ::v-deep {
// Do not use Menlo in color picker
.vc-chrome {
font-family: inherit;
}

// Conflicting color picker styles and global styles
svg {
display: initial;
}

// Misplaced button
.vc-chrome-toggle-icon {
margin-top: 0;
}

.vc-chrome-toggle-icon-highlight {
top: -2px;
}
}
</style>
13 changes: 13 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,19 @@ module.exports = {
fontFamily: {
serif: [ 'Playfair Display', 'serif'],
},
colors: {
current: {
100: 'var(--current-100)',
200: 'var(--current-200)',
300: 'var(--current-300)',
400: 'var(--current-400)',
500: 'var(--current-500)',
600: 'var(--current-600)',
700: 'var(--current-700)',
800: 'var(--current-800)',
900: 'var(--current-900)',
}
}
},
},
variants: {},
Expand Down
Loading