├── static
    ├── icon.png
    ├── favicon.ico
    └── icon-1024.png
├── vercel.json
├── .gitignore
├── .eslintrc.js
├── README.md
├── .editorconfig
├── .stylelintrc.js
├── components
    ├── BaseButton.vue
    ├── AppNav.vue
    ├── AppNavLink.vue
    ├── AppMasthead.vue
    ├── BaseInput.vue
    ├── ColorMode.vue
    ├── OptionGroup.vue
    ├── OptionControls.vue
    ├── ColorField.vue
    ├── AppFooter.vue
    ├── RangeField.vue
    └── Gradient.vue
├── CHANGELOG.md
├── .changeset
    ├── config.json
    └── README.md
├── pages
    ├── _content
    │   ├── about.md
    │   ├── colophon.md
    │   └── background.md
    ├── _.vue
    ├── info.vue
    └── index.vue
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── release.yml
├── layouts
    ├── error.vue
    └── default.vue
├── store
    └── index.js
├── assets
    └── css
    │   └── main.css
├── utils
    └── clipboard.js
├── package.json
├── tailwind.config.js
└── nuxt.config.js


/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormwarning/polychroma/HEAD/static/icon.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormwarning/polychroma/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon-1024.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormwarning/polychroma/HEAD/static/icon-1024.png


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": 2,
3 |   "routes": [
4 |     { "handle": "filesystem" },
5 |     { "src": "/(.*)", "dest": "/$1", "continue": true }
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 
13 | # Service worker
14 | sw.*
15 | 
16 | .vercel


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     extends: ['@zazen/eslint-config', '@zazen/eslint-config/vue'],
3 |     rules: {
4 |         'import/no-relative-parent-imports': 'error',
5 |         'import/order': 'error',
6 |     },
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # polychroma
 2 | > Better gradients through colour spaces.
 3 | 
 4 | Generate better CSS gradients using alternative colour spaces & Bezier interpolation.
 5 | 
 6 | ### Credits
 7 | Uses the amazing [chroma.js] library by @gka
 8 | 
 9 | 
10 | [chroma.js]: http://gka.github.io/chroma.js/
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 4
 8 | indent_style = space
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 
15 | [*.{json,yml}]
16 | indent_size = 2
17 | 


--------------------------------------------------------------------------------
/.stylelintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     extends: ['@zazen/stylelint-config'],
 3 |     rules: {
 4 |         'at-rule-no-unknown': [
 5 |             true,
 6 |             { ignoreAtRules: ['include', 'mixin', 'screen', 'apply'] },
 7 |         ],
 8 |         'value-list-comma-newline-after': null,
 9 |     },
10 | }
11 | 


--------------------------------------------------------------------------------
/components/BaseButton.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <button
3 |         class="relative flex items-center p-2 lg:p-4 text-xs font-medium text-gray-900 leading-none uppercase tracking-widest bg-gray-100 hover:bg-white focus:bg-white border-none rounded-sm outline-none cursor-pointer shadow-a"
4 |         v-on="$listeners"
5 |     >
6 |         <slot />
7 |     </button>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | ### 2.1.2 — 2022-01-07
 4 | 
 5 | #### 🐛 Fixed
 6 | 
 7 | - Fix mobile layout [#197](https://github.com/stormwarning/polychroma/pull/197)  
 8 |   Layout on tablets no longer completely broken.
 9 | - Replace Tachyons with Tailwind CSS [#162](https://github.com/stormwarning/polychroma/pull/162)  
10 |   Fixes issue with header overlay not being sticky.
11 | 


--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
 3 |   "access": "restricted",
 4 |   "baseBranch": "main",
 5 |   "changelog": [
 6 |     "@changesets/changelog-github",
 7 |     { "repo": "stormwarning/polychroma" }
 8 |   ],
 9 |   "commit": false,
10 |   "ignore": [],
11 |   "linked": [],
12 |   "updateInternalDependencies": "patch"
13 | }
14 | 


--------------------------------------------------------------------------------
/pages/_content/about.md:
--------------------------------------------------------------------------------
1 | When defining a standard two-colour gradient, browsers 
2 | interpolate using `RGB`, which can go through kind of greyish 
3 | colours. `Lab` interpolation produces better, more
4 | even&nbsp;results. 
5 | 
6 | Other interpolation modes (`HSL` and `Lch` for now, working on
7 | adding more) are included as options for experimentation — the
8 | results can be&nbsp;overly-saturated.
9 | 


--------------------------------------------------------------------------------
/components/AppNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav class="p-8">
 3 |         <div class="flex gap-4 max-w-md mx-auto">
 4 |             <app-nav-link :exact="true">Controls</app-nav-link>
 5 |             <app-nav-link to="/info">Info</app-nav-link>
 6 |         </div>
 7 |     </nav>
 8 | </template>
 9 | 
10 | <script>
11 | import AppNavLink from './AppNavLink.vue'
12 | 
13 | export default {
14 |     components: { AppNavLink },
15 | }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 2 | 
 3 | version: 2
 4 | 
 5 | updates:
 6 |   - package-ecosystem: npm
 7 |     directory: /
 8 |     schedule:
 9 |       interval: monthly
10 |     commit-message:
11 |       prefix: 'Upgrade: '
12 |     versioning-strategy: increase-if-necessary
13 | 
14 |   - package-ecosystem: github-actions
15 |     directory: /
16 |     schedule:
17 |       interval: weekly
18 |     commit-message:
19 |       prefix: 'Chore: '
20 | 


--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 | 
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 | 
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
9 | 


--------------------------------------------------------------------------------
/components/AppNavLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nuxt-link :to="to" :exact="exact" class="py-2 text-grey-700 no-underline">
 3 |         <span
 4 |             class="block text-sm font-semibold leading-4 uppercase tracking-widest capsize"
 5 |         >
 6 |             <slot />
 7 |         </span>
 8 |     </nuxt-link>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |     props: {
14 |         to: {
15 |             type: String,
16 |             default: '/',
17 |         },
18 |         exact: {
19 |             type: Boolean,
20 |             default: false,
21 |         },
22 |     },
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="container">
 3 |         <h1 class="title" />
 4 |         <h-8 class="info" />
 5 |         <nuxt-link v-if="error.statusCode === 404" class="button" to="/">
 6 |             Homepage
 7 |         </nuxt-link>
 8 |     </section>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |     props: ['error'],
14 | }
15 | </script>
16 | 
17 | <style scoped>
18 | .title {
19 |     margin-top: 15px;
20 |     font-size: 5em;
21 | }
22 | 
23 | .info {
24 |     margin: 0;
25 |     font-weight: 300;
26 |     color: #9aabb1;
27 | }
28 | 
29 | .button {
30 |     margin-top: 50px;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/pages/_content/colophon.md:
--------------------------------------------------------------------------------
 1 | Polychroma is built with [Nuxt.js](https://nuxtjs.org/) — a 
 2 | [Vue.js](https://vuejs.org/) framework — and 
 3 | [chroma.js](https://vis4.net/chromajs/) by Gregor&nbsp;Aisch.
 4 | 
 5 | It uses [Tailwind CSS](https://tailwindcss.com/) for most of the styling,
 6 | with a few tweaks and custom&nbsp;styles.
 7 | 
 8 | The text is set in [Inter](https://rsms.me/inter/),
 9 | specifically the 400, 600, and 700&nbsp;weights.
10 | 
11 | Comments & suggestions are very welcome! You can leave a message 
12 | on [Twitter](https://twitter.com/stormwarning) or file an issue 
13 | on&nbsp;[GitHub](https://github.com/stormwarning/polychroma).
14 | 


--------------------------------------------------------------------------------
/pages/_content/background.md:
--------------------------------------------------------------------------------
 1 | The idea for Polychroma started after discovering Bugsnag’s
 2 | [chromatic-sass](https://blog.bugsnag.com/chromatic-sass/) 
 3 | project. I loved the idea of a more natural-looking gradient, 
 4 | but I wanted a way to visualise the results without needing to 
 5 | update my dev&nbsp;stack.
 6 | 
 7 | I looked into the library that powered it — the amazing 
 8 | [chroma.js](https://vis4.net/chromajs/) — and after tumbling 
 9 | down a rabbit hole of colour science and data visualisation, 
10 | ended up with this simple little tool. Use it to grab a quick 
11 | CSS snippet, or plug the resulting colour values into Figma,
12 | Sketch, or your image editor of choice to use in&nbsp;mockups.
13 | 


--------------------------------------------------------------------------------
/components/AppMasthead.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <header class="absolute top-0 right-8 z-10 pt-20">
 3 |         <h1
 4 |             class="text-2xl sm:text-4xl lg:text-5xl font-bold leading-none uppercase tracking-mega capsize"
 5 |             >Polychroma</h1
 6 |         >
 7 |         <div class="mt-4">
 8 |             <span
 9 |                 class="block font-bold text-right text-sm lg:text-base leading-none capsize"
10 |                 >v{{ version }}</span
11 |             >
12 |         </div>
13 |     </header>
14 | </template>
15 | 
16 | <script>
17 | import { mapState } from 'vuex'
18 | export default {
19 |     computed: {
20 |         ...mapState({
21 |             version: (state) => state.version,
22 |         }),
23 |     },
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/components/BaseInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <input
 3 |         :type="type"
 4 |         :class="$style.input"
 5 |         :value="value"
 6 |         @input="$emit('update', $event.target.value)"
 7 |         v-on="$listeners"
 8 |     />
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |     model: {
14 |         event: 'update',
15 |     },
16 | 
17 |     props: {
18 |         type: {
19 |             type: String,
20 |             default: 'text',
21 |         },
22 | 
23 |         value: {
24 |             type: [String, Number],
25 |             default: '',
26 |         },
27 |     },
28 | }
29 | </script>
30 | 
31 | <style module>
32 | .input {
33 |     display: block;
34 |     width: 100%;
35 |     padding: 0;
36 |     margin: 0;
37 |     font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
38 |         monospace;
39 |     line-height: 1;
40 |     border: 0;
41 |     border-radius: 0;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/pages/_.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |     /**
 8 |      * Parse the route params from the path and commit to store.
 9 |      * @todo Add param validation and error page redirects.
10 |      */
11 |     middleware({ params, store, redirect }) {
12 |         let { pathMatch } = params
13 |         let re = /mode\/([a-z]+)\/start\/([a-z0-9]+)\/end\/([a-z0-9]+)\/angle\/(\d+)/g
14 |         let [found] = [...pathMatch.matchAll(re)]
15 | 
16 |         store.dispatch('changeMode', found[1])
17 |         store.dispatch('changeColor', { color: `#${found[2]}`, stop: 0 })
18 |         store.dispatch('changeColor', { color: `#${found[3]}`, stop: 1 })
19 |         store.dispatch('rotate', found[4])
20 |     },
21 | 
22 |     /**
23 |      * Redirect to main page without changing browser history.
24 |      */
25 |     created: function () {
26 |         this.$router.replace('/')
27 |     },
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   release:
10 |     name: Release
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Checkout repo
14 |         uses: actions/checkout@master
15 |         with:
16 |           # This makes Actions fetch all git history so that Changesets can 
17 |           # generate changelogs with the correct commits.
18 |           fetch-depth: 0
19 | 
20 |       - name: Setup Node.js 12.x
21 |         uses: actions/setup-node@master
22 |         with:
23 |           node-version: 12.x
24 | 
25 |       - name: Install dependencies
26 |         run: npm ci
27 | 
28 |       # https://github.com/changesets/action
29 |       - name: Create release PR
30 |         id: changesets
31 |         uses: changesets/action@master
32 |         with:
33 |           title: 'Chore: Publish release'
34 |         env:
35 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 | 


--------------------------------------------------------------------------------
/components/ColorMode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <fieldset class="p-0 m-0 mb-16 border-none max-w-md mx-auto">
 3 |         <legend class="text-sm uppercase tracking-widest opacity-25 mb-2"
 4 |             >Colour Mode</legend
 5 |         >
 6 | 
 7 |         <div
 8 |             class="flex items-center p-4 lg:p-8 bg-white rounded-sm shadow-a overflow-hidden"
 9 |         >
10 |             <label
11 |                 v-for="(m, index) in modes"
12 |                 :key="index"
13 |                 class="flex items-center my-2 mr-4 leading-none cursor-pointer"
14 |             >
15 |                 <input
16 |                     v-model="mode"
17 |                     :value="m.toLowerCase()"
18 |                     class="mr-2"
19 |                     type="radio"
20 |                     name="mode"
21 |                 />
22 |                 <span class="text-xs lg:text-sm tracking-widest">{{ m }}</span>
23 |             </label>
24 |         </div>
25 |     </fieldset>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |     data() {
31 |         return {
32 |             modes: ['RGB', 'Lab', 'HSL', 'Lch'],
33 |         }
34 |     },
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/components/OptionGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section>
 3 |         <slot></slot>
 4 |     </section>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |     data() {
10 |         return {
11 |             uniqueId: null,
12 |             childrenToggled: {},
13 |         }
14 |     },
15 | 
16 |     mounted() {
17 |         this.$on('child-clicked', this.handleChildClicked)
18 |         this.$nextTick(() => {
19 |             this.$children.forEach((child, idx) => {
20 |                 let id = String(idx)
21 | 
22 |                 child.setUniqueId(id)
23 |                 this.childrenToggled[id] = false
24 |             })
25 |         })
26 |     },
27 | 
28 |     methods: {
29 |         handleChildClicked(childId) {
30 |             for (let id in this.childrenToggled) {
31 |                 if (this.childrenToggled[id] && id !== childId) {
32 |                     this.$emit('toggle-child', id)
33 |                     this.childrenToggled[id] = false
34 |                 }
35 |             }
36 | 
37 |             this.childrenToggled[childId] = !this.childrenToggled[childId]
38 |             this.$emit('toggle-child', childId)
39 |         },
40 |     },
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |     version: process.env.VERSION,
 3 |     colorMode: 'lab',
 4 |     direction: 30,
 5 |     colorStops: [
 6 |         {
 7 |             color: {
 8 |                 hex: '#000080',
 9 |             },
10 |         },
11 |         {
12 |             color: {
13 |                 hex: '#ffff00',
14 |             },
15 |         },
16 |     ],
17 | })
18 | 
19 | export const mutations = {
20 |     CHANGE_ANGLE(state, direction) {
21 |         state.direction = direction
22 |     },
23 | 
24 |     CHANGE_MODE(state, mode) {
25 |         state.colorMode = mode
26 |     },
27 | 
28 |     CHANGE_STOP(state, { color, stop }) {
29 |         state.colorStops[stop].color.hex = color
30 |     },
31 | }
32 | 
33 | export const actions = {
34 |     changeMode({ commit }, mode) {
35 |         return new Promise((resolve) => {
36 |             commit('CHANGE_MODE', mode)
37 |             resolve()
38 |         })
39 |     },
40 | 
41 |     rotate({ commit }, direction) {
42 |         commit('CHANGE_ANGLE', Number.parseInt(direction))
43 |     },
44 | 
45 |     changeColor({ commit }, { color, stop }) {
46 |         commit('CHANGE_STOP', { color, stop })
47 |     },
48 | }
49 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | @import url('https://rsms.me/inter/inter.css');
 2 | 
 3 | @import 'tailwindcss/base';
 4 | @import 'tailwindcss/components';
 5 | @import 'tailwindcss/utilities';
 6 | 
 7 | @viewport {
 8 |     width: device-width;
 9 | }
10 | 
11 | :root {
12 |     --color-bg: #f5f5f5;
13 |     --color-text: #717474;
14 |     --color-heading: #16191b;
15 | 
16 |     --grey-1: #f5f5f5;
17 |     --grey-3: #c2c3c4;
18 |     --grey-4: #9b9e9d;
19 |     --grey-6: #717474;
20 |     --grey-7: #495057;
21 |     --grey-8: #212529;
22 |     --grey-9: #16191b;
23 | 
24 |     --blue-5: #339af0;
25 |     --blue-6: #228be6;
26 |     --blue-7: #1c7ed6;
27 | }
28 | 
29 | code,
30 | .code {
31 |     font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
32 |         monospace;
33 | }
34 | 
35 | .mix-burn {
36 |     mix-blend-mode: color-burn;
37 | }
38 | 
39 | /**
40 |   Fix tracking issue for right-aligned text.
41 |  */
42 | .tracking-mega {
43 |     margin-right: -0.25em;
44 | }
45 | 
46 | .nuxt-link-active {
47 |     border-bottom: 0.125rem solid currentColor;
48 | }
49 | 
50 | /**
51 |   Page transition effects.
52 | 
53 |   `page` is the default transition name.
54 |   @see https://nuxtjs.org/guide/routing#transitions
55 |  */
56 | .page-enter-active,
57 | .page-leave-active {
58 |     transition: opacity 200ms ease-in;
59 | }
60 | .page-enter,
61 | .page-leave-to {
62 |     opacity: 0;
63 | }
64 | 


--------------------------------------------------------------------------------
/pages/info.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="m-0 text-sm">
 3 |         <div class="p-0 m-0 mb-16 max-w-md mx-auto">
 4 |             <h2 class="text-sm font-semibold uppercase tracking-widest"
 5 |                 >About</h2
 6 |             >
 7 |             <div class="prose prose-sm" v-html="aboutContent"></div>
 8 | 
 9 |             <h2 class="text-sm font-semibold uppercase tracking-widest mt-8"
10 |                 >Background</h2
11 |             >
12 |             <div class="prose prose-sm" v-html="backgroundContent"></div>
13 | 
14 |             <h2 class="text-sm font-semibold uppercase tracking-widest mt-8"
15 |                 >Colophon</h2
16 |             >
17 |             <div class="prose prose-sm" v-html="colophonContent"></div>
18 |         </div>
19 |     </div>
20 | </template>
21 | 
22 | <script>
23 | import aboutContent from './_content/about.md'
24 | import backgroundContent from './_content/background.md'
25 | import colophonContent from './_content/colophon.md'
26 | 
27 | export default {
28 |     computed: {
29 |         aboutContent() {
30 |             return aboutContent
31 |         },
32 | 
33 |         backgroundContent() {
34 |             return backgroundContent
35 |         },
36 | 
37 |         colophonContent() {
38 |             return colophonContent
39 |         },
40 |     },
41 | }
42 | </script>
43 | 
44 | <style lang="postcss">
45 | .content {
46 |     color: #495057;
47 | 
48 |     & a {
49 |         color: #16191b;
50 |         transition: opacity 150ms ease-in;
51 | 
52 |         &:hover,
53 |         &:focus {
54 |             opacity: 0.5;
55 |         }
56 |     }
57 | 
58 |     & code {
59 |         padding: 0.1875rem 0.25rem;
60 |         margin: 0 1px;
61 |         background-color: rgba(0, 0, 0, 0.05);
62 |         border-radius: 0.125rem;
63 |     }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/components/OptionControls.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <details>
 3 |         <summary class="cursor-pointer outline-none" @click="notifyOfClick">
 4 |             <div class="w-full flex items-center justify-between p-4 lg:p-8">
 5 |                 <slot name="summary"></slot>
 6 |             </div>
 7 |         </summary>
 8 |         <div class="relative p-4 lg:p-8 lg:pt-0 lg:pr-4 -mt-4 mr-8 lg:mr-16">
 9 |             <slot></slot>
10 |         </div>
11 |     </details>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |     mounted() {
17 |         this.$parent.$on('toggle-child', this.handleToggleRequest)
18 |     },
19 | 
20 |     destroyed() {
21 |         this.$parent.$off('toggle-child')
22 |     },
23 | 
24 |     methods: {
25 |         handleToggleRequest(toggleId) {
26 |             if (toggleId === this.uniqueId) {
27 |                 this.$el.toggleAttribute('open')
28 |                 this.$el.querySelector('summary').classList.toggle('is-open')
29 |             }
30 |         },
31 | 
32 |         setUniqueId(id) {
33 |             this.uniqueId = id
34 |         },
35 | 
36 |         notifyOfClick(e) {
37 |             e.preventDefault()
38 | 
39 |             if (this.uniqueId) {
40 |                 this.$parent.$emit('child-clicked', this.uniqueId)
41 |             }
42 |         },
43 |     },
44 | }
45 | </script>
46 | 
47 | <style lang="postcss" scoped>
48 | details {
49 |     transition: box-shadow 200ms ease-in-out;
50 | 
51 |     &[open] {
52 |         box-shadow: rgba(0, 0, 0, 0.12) 0 2px 10px,
53 |             0 20px 50px 0 rgba(0, 0, 0, 0.14);
54 |     }
55 | }
56 | 
57 | summary {
58 |     list-style-type: none;
59 |     user-select: none;
60 | 
61 |     &::-webkit-details-marker {
62 |         display: none;
63 |     }
64 | 
65 |     &:not(.is-open) {
66 |         &:hover,
67 |         &:focus {
68 |             background-color: var(--grey-1);
69 |         }
70 |     }
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/utils/clipboard.js:
--------------------------------------------------------------------------------
 1 | // From: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
 2 | export function copyTextToClipboard(text) {
 3 |     const textArea = document.createElement('textarea')
 4 | 
 5 |     //
 6 |     // *** This styling is an extra step which is likely not required. ***
 7 |     //
 8 |     // Why is it here? To ensure:
 9 |     // 1. the element is able to have focus and selection.
10 |     // 2. if element was to flash render it has minimal visual impact.
11 |     // 3. less flakyness with selection and copying which **might** occur if
12 |     //    the textarea element is not visible.
13 |     //
14 |     // The likelihood is the element won't even render, not even a flash,
15 |     // so some of these are just precautions. However in IE the element
16 |     // is visible whilst the popup box asking the user for permission for
17 |     // the web page to copy to the clipboard.
18 |     //
19 | 
20 |     // Place in top-left corner of screen regardless of scroll position.
21 |     textArea.style.position = 'fixed'
22 |     textArea.style.top = 0
23 |     textArea.style.left = 0
24 | 
25 |     // Ensure it has a small width and height. Setting to 1px / 1em
26 |     // doesn't work as this gives a negative w/h on some browsers.
27 |     textArea.style.width = '2em'
28 |     textArea.style.height = '2em'
29 | 
30 |     // We don't need padding, reducing the size if it does flash render.
31 |     textArea.style.padding = 0
32 | 
33 |     // Clean up any borders.
34 |     textArea.style.border = 'none'
35 |     textArea.style.outline = 'none'
36 |     textArea.style.boxShadow = 'none'
37 | 
38 |     // Avoid flash of white box if rendered for any reason.
39 |     textArea.style.background = 'transparent'
40 | 
41 |     textArea.value = text
42 | 
43 |     document.body.appendChild(textArea)
44 | 
45 |     textArea.select()
46 | 
47 |     try {
48 |         document.execCommand('copy')
49 |     } catch (err) {
50 |         console.error('Unable to copy text')
51 |     }
52 | 
53 |     document.body.removeChild(textArea)
54 | }
55 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <article class="min-h-screen">
 3 |         <div
 4 |             class="header lg:sticky top-0 z-10 lg:h-screen pointer-events-none mix-burn"
 5 |         >
 6 |             <app-masthead class="mix-burn" />
 7 |         </div>
 8 |         <main>
 9 |             <app-nav />
10 |             <section class="p-8 lg:pt-0 lg:pb-16">
11 |                 <nuxt />
12 |             </section>
13 |             <gradient-result class="sticky lg:top-0 lg:bottom-0 lg:h-screen" />
14 |         </main>
15 |         <app-footer class="sticky lg:top-0 lg:bottom-0 lg:h-screen" />
16 |     </article>
17 | </template>
18 | 
19 | <script>
20 | import { mapState } from 'vuex'
21 | import AppFooter from '~/components/AppFooter'
22 | import AppMasthead from '~/components/AppMasthead'
23 | import AppNav from '~/components/AppNav.vue'
24 | import GradientResult from '~/components/Gradient.vue'
25 | 
26 | export default {
27 |     components: {
28 |         AppFooter,
29 |         AppMasthead,
30 |         GradientResult,
31 |         AppNav,
32 |     },
33 | 
34 |     computed: {
35 |         ...mapState({
36 |             version: (state) => state.version,
37 |         }),
38 |     },
39 | }
40 | </script>
41 | 
42 | <style scoped>
43 | article {
44 |     display: grid;
45 |     grid-template-areas: 'main' 'footer';
46 |     grid-template-rows: 1fr 120px;
47 |     grid-template-columns: 1fr;
48 | }
49 | 
50 | @screen lg {
51 |     article {
52 |         grid-template-areas: 'main sidebar';
53 |         grid-template-rows: auto;
54 |         grid-template-columns: 1fr 240px;
55 |     }
56 | }
57 | 
58 | main {
59 |     display: grid;
60 |     grid-area: main;
61 |     grid-template-areas: 'result' 'navbar' 'content';
62 |     grid-template-rows: 33vh 4rem 1fr;
63 |     grid-template-columns: 1fr;
64 | }
65 | 
66 | @screen lg {
67 |     main {
68 |         grid-template-areas: 'navbar result' 'content result';
69 |         grid-template-rows: 8.5rem auto;
70 |         grid-template-columns: 1fr 1fr;
71 |     }
72 | }
73 | 
74 | main > section {
75 |     grid-area: content;
76 | }
77 | 
78 | nav {
79 |     grid-area: navbar;
80 | }
81 | 
82 | figure {
83 |     grid-area: result;
84 | }
85 | 
86 | .header {
87 |     @screen lg {
88 |         grid-area: sidebar;
89 |         grid-row: 1;
90 |     }
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "polychroma",
 3 |   "version": "2.1.2",
 4 |   "private": true,
 5 |   "description": "Generate better CSS gradients using alternative colour spaces & Bezier interpolation.",
 6 |   "author": "Jeff Nelson (https://tidaltheory.io)",
 7 |   "scripts": {
 8 |     "build": "nuxt build",
 9 |     "changeset": "changeset add",
10 |     "deploy": "np && release && npm run generate && now dist/ -p --name polychroma && now alias",
11 |     "dev": "nuxt",
12 |     "generate": "nuxt generate",
13 |     "lint": "npm run lint:scripts && npm run lint:styles",
14 |     "lint:scripts": "eslint '**/*.{js,vue}' --fix --ignore-pattern '.nuxt/**' --ignore-pattern 'dist/**' --ignore-pattern 'static/**'",
15 |     "lint:styles": "stylelint '**/*.{css,vue}' --ip '{.nuxt,dist}/**'",
16 |     "start": "nuxt start",
17 |     "test": "npm run lint"
18 |   },
19 |   "husky": {
20 |     "hooks": {
21 |       "pre-commit": "lint-staged"
22 |     }
23 |   },
24 |   "lint-staged": {
25 |     "*.{js,vue}": "eslint --fix",
26 |     "*.{css,vue}": "stylelint --fix",
27 |     "package.json": "prettier --write"
28 |   },
29 |   "prettier": {
30 |     "htmlWhitespaceSensitivity": "strict",
31 |     "semi": false,
32 |     "singleQuote": true,
33 |     "trailingComma": "all"
34 |   },
35 |   "dependencies": {
36 |     "@nuxtjs/google-analytics": "2.4.0",
37 |     "@nuxtjs/markdownit": "1.2.10",
38 |     "@nuxtjs/pwa": "3.3.5",
39 |     "chroma-js": "2.1.0",
40 |     "nuxt": "2.15.4"
41 |   },
42 |   "devDependencies": {
43 |     "@changesets/changelog-github": "0.3.0",
44 |     "@changesets/cli": "2.14.1",
45 |     "@nuxtjs/tailwindcss": "4.0.2",
46 |     "@tailwindcss/typography": "0.4.0",
47 |     "@zazen/eslint-config": "2.1.x",
48 |     "@zazen/stylelint-config": "1.0.x",
49 |     "autoprefixer": "10.2.5",
50 |     "eslint": "7.14.x",
51 |     "eslint-plugin-vue": "7.1.x",
52 |     "husky": "4.3.x",
53 |     "import-sort-style-python": "1.0.2",
54 |     "lint-staged": "10.5.x",
55 |     "postcss": "8.2.9",
56 |     "postcss-advanced-variables": "3.0.x",
57 |     "prettier": "2.1.x",
58 |     "prettier-plugin-import-sort": "0.0.6",
59 |     "prettier-plugin-packagejson": "2.2.x",
60 |     "stylelint": "13.8.x",
61 |     "tailwindcss": "2.0.4",
62 |     "tailwindcss-capsize": "1.2.2"
63 |   },
64 |   "engines": {
65 |     "node": ">12.x"
66 |   },
67 |   "importSort": {
68 |     ".js,.ts,.vue": {
69 |       "parser": "babylon",
70 |       "style": "python",
71 |       "options": {
72 |         "knownFramework": [
73 |           "@nuxt",
74 |           "nuxt",
75 |           "@vue",
76 |           "vue"
77 |         ],
78 |         "knownFirstparty": [
79 |           "~"
80 |         ]
81 |       }
82 |     }
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | const defaultTheme = require('tailwindcss/defaultTheme')
  2 | 
  3 | module.exports = {
  4 |     future: {
  5 |         // https://tailwindcss.com/docs/upcoming-changes#remove-deprecated-gap-utilities
  6 |         removeDeprecatedGapUtilities: true,
  7 |         // https://tailwindcss.com/docs/upcoming-changes#purge-layers-by-default
  8 |         purgeLayersByDefault: true,
  9 |     },
 10 | 
 11 |     purge: {
 12 |         // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
 13 |         enabled: process.env.NODE_ENV === 'production',
 14 |         content: [
 15 |             'components/**/*.vue',
 16 |             'layouts/**/*.vue',
 17 |             'pages/**/*.vue',
 18 |             'plugins/**/*.js',
 19 |             'nuxt.config.js',
 20 |         ],
 21 |     },
 22 | 
 23 |     theme: {
 24 |         fontMetrics: {
 25 |             sans: {
 26 |                 capHeight: 2048,
 27 |                 ascent: 2728,
 28 |                 descent: -680,
 29 |                 lineGap: 0,
 30 |                 unitsPerEm: 2816,
 31 |             },
 32 |         },
 33 | 
 34 |         fontSize: {
 35 |             xs: '.75rem',
 36 |             sm: '.875rem',
 37 |             base: '1rem',
 38 |             lg: '1.125rem',
 39 |             xl: '1.25rem',
 40 |             '2xl': '1.5rem',
 41 |             '3xl': '1.875rem',
 42 |             '4xl': '2.25rem',
 43 |             '5xl': '3rem',
 44 |             '6xl': '4rem',
 45 |         },
 46 | 
 47 |         extend: {
 48 |             boxShadow: {
 49 |                 a:
 50 |                     '0 2px 10px rgba(0, 0, 0, 0.12), 0 20px 50px 0 rgba(0, 0, 0, 0.14)',
 51 |                 b:
 52 |                     '0 2px 10px rgba(0, 0, 0, 0.12), 0 50px 50px 0 rgba(0, 0, 0, 0.1)',
 53 |             },
 54 | 
 55 |             colors: {
 56 |                 grey: {
 57 |                     100: '#f1f2f2',
 58 |                     200: '#e7ebed',
 59 |                     300: '#dee4e8',
 60 |                     400: '#c0c8cd',
 61 |                     500: '#949ca1',
 62 |                     600: '#62696d',
 63 |                     700: '#393e41',
 64 |                     800: '#202326',
 65 |                     900: '#16191b',
 66 |                 },
 67 |             },
 68 | 
 69 |             fontFamily: {
 70 |                 sans: ['Inter', ...defaultTheme.fontFamily.sans],
 71 |             },
 72 | 
 73 |             inset: {
 74 |                 8: '2rem',
 75 |             },
 76 | 
 77 |             letterSpacing: {
 78 |                 mega: '0.25em',
 79 |             },
 80 | 
 81 |             typography: {
 82 |                 DEFAULT: {
 83 |                     css: {
 84 |                         code: {
 85 |                             padding: '0.1875rem 0.25rem',
 86 |                             margin: '0 1px',
 87 |                             backgroundColor: 'rgba(0, 0, 0, 0.05)',
 88 |                             borderRadius: '0.125rem',
 89 |                         },
 90 |                         'code::before': { content: 'none' },
 91 |                         'code::after': { content: 'none' },
 92 |                     },
 93 |                 },
 94 |             },
 95 |         },
 96 |     },
 97 | 
 98 |     plugins: [
 99 |         require('@tailwindcss/typography'),
100 |         require('tailwindcss-capsize').default({}),
101 |     ],
102 | }
103 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | import { version } from './package.json'
  2 | 
  3 | function getVersion() {
  4 |     let string = JSON.stringify(version) || ''
  5 |     return string.replace(/"/g, '')
  6 | }
  7 | 
  8 | export default {
  9 |     /** Headers of the page. */
 10 |     head: {
 11 |         htmlAttrs: { class: 'bg-grey-100 overscroll-none' },
 12 |         bodyAttrs: { class: 'font-sans text-grey-800 antialiased' },
 13 |         title: 'Polychroma — Better gradients through colour spaces.',
 14 |         meta: [
 15 |             { charset: 'utf-8' },
 16 |             {
 17 |                 name: 'viewport',
 18 |                 content: 'width=device-width, initial-scale=1',
 19 |             },
 20 |             {
 21 |                 hid: 'description',
 22 |                 meta: 'description',
 23 |                 content:
 24 |                     'Generate better CSS gradients using alternative colour spaces & Bezier interpolation.',
 25 |             },
 26 | 
 27 |             { name: 'twitter:card', content: 'summary' },
 28 |             { name: 'twitter:title', content: 'Polychroma' },
 29 |             {
 30 |                 name: 'twitter:description',
 31 |                 content:
 32 |                     'Generate better CSS gradients using alternative colour spaces & Bezier interpolation.',
 33 |             },
 34 |             { name: 'twitter:creator', content: '@stormwarning' },
 35 |             {
 36 |                 name: 'twitter:image:src',
 37 |                 content: 'https://polychroma.app/icon.png',
 38 |             },
 39 | 
 40 |             { property: 'og:title', content: 'Polychroma' },
 41 |             { property: 'og:type', content: 'website' },
 42 |             { property: 'og:url', content: 'https://polychroma.app/' },
 43 |             {
 44 |                 property: 'og:image',
 45 |                 content: 'https://polychroma.app/icon.png',
 46 |             },
 47 |             {
 48 |                 property: 'og:description',
 49 |                 content:
 50 |                     'Generate better CSS gradients using alternative colour spaces & Bezier interpolation.',
 51 |             },
 52 |             { property: 'og:site_name', content: 'Polychroma' },
 53 |         ],
 54 |         link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
 55 |     },
 56 | 
 57 |     /** Global CSS. */
 58 |     css: ['~assets/css/main.css'],
 59 | 
 60 |     env: {
 61 |         VERSION: getVersion(),
 62 |     },
 63 | 
 64 |     build: {
 65 |         postcss: {
 66 |             plugins: {
 67 |                 autoprefixer: {},
 68 | 
 69 |                 // https://github.com/jonathantneal/postcss-advanced-variables#features
 70 |                 'postcss-advanced-variables': {},
 71 | 
 72 |                 // https://preset-env.cssdb.org/features
 73 |                 'postcss-preset-env': {
 74 |                     stage: 0,
 75 |                 },
 76 |             },
 77 |         },
 78 |     },
 79 | 
 80 |     plugins: [],
 81 | 
 82 |     modules: [
 83 |         ['@nuxtjs/google-analytics', { ua: 'UA-58836125-4' }],
 84 |         ['@nuxtjs/markdownit', { preset: 'commonmark', typographer: true }],
 85 |         [
 86 |             '@nuxtjs/pwa',
 87 |             {
 88 |                 meta: { appleStatusBarStyle: 'black-translucent' },
 89 |                 manifest: { name: 'Polychroma' },
 90 |             },
 91 |         ],
 92 |     ],
 93 | 
 94 |     buildModules: ['@nuxtjs/tailwindcss'],
 95 | 
 96 |     tailwindcss: {
 97 |         cssPath: '~/assets/css/main.css',
 98 |     },
 99 | }
100 | 


--------------------------------------------------------------------------------
/components/ColorField.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <base-input
  4 |             :value="hex"
  5 |             class="text-xl outline-none"
  6 |             type="text"
  7 |             @input="updateHex($event.target.value)"
  8 |         />
  9 |         <span
 10 |             class="inline-block mt-4 text-xs uppercase tracking-widest text-grey-600"
 11 |         >
 12 |             Hue {{ Math.floor(hsl.h) }}º
 13 |         </span>
 14 |         <range-field
 15 |             class="mt-1"
 16 |             :value="hsl.h"
 17 |             :min="0"
 18 |             :max="360"
 19 |             @input="updateHue"
 20 |         ></range-field>
 21 |         <span
 22 |             class="inline-block mt-4 text-xs uppercase tracking-widest text-grey-600"
 23 |         >
 24 |             Saturation {{ Math.floor(hsl.s * 100) }}%
 25 |         </span>
 26 |         <range-field
 27 |             class="mt-1"
 28 |             :value="hsl.s"
 29 |             :min="0"
 30 |             :max="1"
 31 |             :step="0.01"
 32 |             @input="updateSaturation"
 33 |         ></range-field>
 34 |         <span
 35 |             class="inline-block mt-4 text-xs uppercase tracking-widest text-grey-600"
 36 |         >
 37 |             Lightness {{ Math.floor(hsl.l * 100) }}%
 38 |         </span>
 39 |         <range-field
 40 |             class="mt-1"
 41 |             :value="hsl.l"
 42 |             :min="0"
 43 |             :max="1"
 44 |             :step="0.01"
 45 |             @input="updateLightness"
 46 |         ></range-field>
 47 |     </div>
 48 | </template>
 49 | 
 50 | <script>
 51 | import chroma from 'chroma-js'
 52 | import BaseInput from '~/components/BaseInput'
 53 | import RangeField from '~/components/RangeField'
 54 | 
 55 | export default {
 56 |     components: {
 57 |         BaseInput,
 58 |         RangeField,
 59 |     },
 60 | 
 61 |     model: {
 62 |         prop: 'color',
 63 |         event: 'update',
 64 |     },
 65 | 
 66 |     props: {
 67 |         color: {
 68 |             type: String,
 69 |             default: '',
 70 |         },
 71 |     },
 72 | 
 73 |     data() {
 74 |         return {
 75 |             hex: this.color.toLowerCase(),
 76 |         }
 77 |     },
 78 | 
 79 |     /**
 80 |       @todo On hue change, store last valid hue and use as fallback
 81 |             if hue returns NaN.
 82 |      */
 83 |     computed: {
 84 |         hsl() {
 85 |             return {
 86 |                 h: chroma(this.color).get('hsl.h'),
 87 |                 s: chroma(this.color).get('hsl.s'),
 88 |                 l: chroma(this.color).get('hsl.l'),
 89 |             }
 90 |         },
 91 | 
 92 |         lastValidHue() {
 93 |             return chroma(this.color).get('hsl.h')
 94 |         },
 95 |     },
 96 | 
 97 |     methods: {
 98 |         setColor(color) {
 99 |             this.$emit('update', color)
100 |         },
101 | 
102 |         /**
103 |           @todo Check for valid hex value before setting.
104 |          */
105 |         updateHex(hex) {
106 |             if (hex !== this.hex) {
107 |                 this.hex = hex
108 |                 this.setColor(hex)
109 |             }
110 |         },
111 | 
112 |         updateHue(hue) {
113 |             this.hsl.h = hue
114 |             this.updateHex(chroma.hsl(this.hsl.h, this.hsl.s, this.hsl.l).hex())
115 |         },
116 | 
117 |         updateSaturation(saturation) {
118 |             this.hsl.s = saturation
119 |             this.updateHex(chroma.hsl(this.hsl.h, this.hsl.s, this.hsl.l).hex())
120 |         },
121 | 
122 |         updateLightness(lightness) {
123 |             this.hsl.l = lightness
124 |             this.updateHex(chroma.hsl(this.hsl.h, this.hsl.s, this.hsl.l).hex())
125 |         },
126 |     },
127 | }
128 | </script>
129 | 


--------------------------------------------------------------------------------
/components/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <footer
 3 |         class="relative z-10 flex items-end px-8 py-8 lg:py-16 overflow-hidden"
 4 |         :class="$style.footer"
 5 |     >
 6 |         <app-masthead class="hidden lg:block" aria-hidden="true" />
 7 |         <div class="flex-auto max-w-md lg:mt-8 mx-auto">
 8 |             <p
 9 |                 class="text-xs leading-normal tracking-widest text-right uppercase"
10 |             >
11 |                 By
12 |                 <a
13 |                     class="text-black hover:opacity-75 focus:opacity-75"
14 |                     href="https://tidaltheory.io/"
15 |                 >
16 |                     @stormwarning
17 |                 </a>
18 |             </p>
19 |             <div
20 |                 class="flex justify-end mt-2 text-xs leading-normal uppercase tracking-widest text-right"
21 |             >
22 |                 <a
23 |                     class="text-black hover:opacity-75 focus:opacity-75 inline-block w-8 h-8 p-2"
24 |                     href="https://github.com/stormwarning/polychroma"
25 |                 >
26 |                     <svg
27 |                         fill="currentColor"
28 |                         xmlns="http://www.w3.org/2000/svg"
29 |                         viewBox="0 0 16 16"
30 |                         fill-rule="evenodd"
31 |                         clip-rule="evenodd"
32 |                         stroke-linejoin="round"
33 |                         stroke-miterlimit="1.414"
34 |                     >
35 |                         <path
36 |                             d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"
37 |                         ></path>
38 |                     </svg>
39 |                 </a>
40 |                 <a
41 |                     class="text-black hover:opacity-75 focus:opacity-75 inline-block w-8 h-8 p-2 ml-2"
42 |                     href="https://twitter.com/stormwarning"
43 |                 >
44 |                     <svg
45 |                         fill="currentColor"
46 |                         xmlns="http://www.w3.org/2000/svg"
47 |                         viewBox="0 0 16 16"
48 |                         fill-rule="evenodd"
49 |                         clip-rule="evenodd"
50 |                         stroke-linejoin="round"
51 |                         stroke-miterlimit="1.414"
52 |                     >
53 |                         <path
54 |                             d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z"
55 |                             fill-rule="nonzero"
56 |                         ></path>
57 |                     </svg>
58 |                 </a>
59 |             </div>
60 |         </div>
61 |     </footer>
62 | </template>
63 | 
64 | <script>
65 | import AppMasthead from '~/components/AppMasthead'
66 | export default {
67 |     components: {
68 |         AppMasthead,
69 |     },
70 | }
71 | </script>
72 | 
73 | <style lang="postcss" module>
74 | .footer {
75 |     grid-area: footer;
76 | 
77 |     @screen lg {
78 |         grid-area: sidebar;
79 |     }
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/components/RangeField.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="range-field" :class="{ 'is-disabled': disabled }">
  3 |         <label v-if="label" class="range-field__label">
  4 |             <slot>{{ label }}</slot>
  5 |         </label>
  6 | 
  7 |         <input
  8 |             class="range-field__input"
  9 |             type="range"
 10 |             :disabled="disabled"
 11 |             :max="max"
 12 |             :min="min"
 13 |             :step="step"
 14 |             :value="value"
 15 |             v-bind="$attrs"
 16 |             @input="input"
 17 |         />
 18 |     </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | export default {
 23 |     props: {
 24 |         disabled: {
 25 |             type: Boolean,
 26 |             default: false,
 27 |         },
 28 | 
 29 |         label: {
 30 |             type: String,
 31 |             default: '',
 32 |         },
 33 | 
 34 |         max: {
 35 |             type: Number,
 36 |             default: 100,
 37 |         },
 38 | 
 39 |         min: {
 40 |             type: Number,
 41 |             default: 0,
 42 |         },
 43 | 
 44 |         step: {
 45 |             type: Number,
 46 |             default: 1,
 47 |         },
 48 | 
 49 |         value: {
 50 |             type: Number,
 51 |             default: 50,
 52 |         },
 53 |     },
 54 | 
 55 |     methods: {
 56 |         input($event) {
 57 |             if (!this.disabled) {
 58 |                 this.$emit('input', parseFloat($event.target.value))
 59 |             }
 60 |         },
 61 |     },
 62 | }
 63 | </script>
 64 | 
 65 | <style lang="postcss">
 66 | /* stylelint-disable no-descending-specificity */
 67 | 
 68 | :root {
 69 |     --range-thumb-color: var(--blue-7);
 70 |     --range-thumb-focus: var(--blue-5);
 71 |     --range-track-color: var(--grey-4);
 72 |     --range-track-disabled: var(--grey-3);
 73 | }
 74 | 
 75 | .range-field {
 76 |     &.is-disabled {
 77 |         color: var(--range-track-disabled);
 78 |     }
 79 | }
 80 | 
 81 | .range-field__label {
 82 |     display: block;
 83 |     line-height: 1rem;
 84 |     color: var(--range-track-color);
 85 | }
 86 | 
 87 | @mixin track() {
 88 |     height: 2px;
 89 |     margin-bottom: calc(0.5rem - 2px);
 90 |     background: var(--range-track-color);
 91 | }
 92 | 
 93 | @mixin thumb() {
 94 |     width: 1rem;
 95 |     height: 1rem;
 96 |     margin: 0;
 97 |     cursor: pointer;
 98 |     background: var(--range-thumb-color);
 99 |     border: 0;
100 |     border-radius: 50%;
101 | }
102 | 
103 | @mixin slider-disabled() {
104 |     cursor: default;
105 |     background: var(--range-track-disabled);
106 | }
107 | 
108 | .range-field__input {
109 |     appearance: none;
110 |     width: 100%;
111 | 
112 |     &:focus {
113 |         outline: none;
114 |     }
115 | 
116 |     &::-ms-track {
117 |         height: 1rem;
118 |     }
119 |     &::-ms-fill-lower,
120 |     &::-ms-fill-upper {
121 |         @include track();
122 |     }
123 |     &::-ms-fill-lower {
124 |         background: var(--range-thumb-color);
125 |     }
126 | 
127 |     &::-moz-range-track {
128 |         @include track();
129 |     }
130 |     &::-moz-progress-bar {
131 |         margin-inline-start: 0;
132 |         margin-inline-end: 0;
133 |     }
134 | 
135 |     &::-webkit-slider-runnable-track {
136 |         @include track();
137 |     }
138 |     &::-webkit-slider-thumb {
139 |         @include thumb();
140 | 
141 |         margin-top: calc(-0.5rem + 1px);
142 |         margin-bottom: calc(0.5rem + 1px);
143 | 
144 |         /* stylelint-disable-next-line property-no-vendor-prefix */
145 |         -webkit-appearance: none;
146 | 
147 |         &:focus {
148 |             background: var(--range-thumb-focus);
149 |         }
150 |     }
151 | 
152 |     &::-ms-thumb {
153 |         @include thumb();
154 | 
155 |         &:focus {
156 |             background: var(--range-thumb-focus);
157 |         }
158 |     }
159 | 
160 |     &::-moz-range-thumb {
161 |         @include thumb();
162 | 
163 |         &:focus {
164 |             background: var(--range-thumb-focus);
165 |         }
166 |     }
167 | 
168 |     &:disabled {
169 |         &::-ms-fill-lower,
170 |         &::-ms-fill-upper,
171 |         &::-ms-thumb {
172 |             @include slider-disabled();
173 |         }
174 | 
175 |         &::-webkit-slider-thumb,
176 |         &::-webkit-slider-runnable-track {
177 |             @include slider-disabled();
178 |         }
179 | 
180 |         &::-moz-range-track,
181 |         &::-moz-range-thumb {
182 |             @include slider-disabled();
183 |         }
184 |     }
185 | }
186 | </style>
187 | 


--------------------------------------------------------------------------------
/components/Gradient.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <figure :style="{ backgroundImage: gradientCSS }" class="m-0">
  3 |         <div class="hidden lg:block w-full max-w-lg">
  4 |             <pre
  5 |                 :class="$style.source"
  6 |                 class="px-8 py-16 m-0 text-sm whitespace-normal lowercase"
  7 |             >
  8 |                 <code>{{ gradientCSS }}</code>
  9 |             </pre>
 10 |         </div>
 11 | 
 12 |         <div class="flex items-end justify-end px-8 py-16">
 13 |             <base-button @click="copyCSS(gradientCSS)">
 14 |                 <svg
 15 |                     class="relative w-4 h-4"
 16 |                     width="24"
 17 |                     height="24"
 18 |                     viewBox="0 0 24 24"
 19 |                     fill="none"
 20 |                     stroke="currentColor"
 21 |                     stroke-width="2"
 22 |                     stroke-linecap="round"
 23 |                     stroke-linejoin="round"
 24 |                 >
 25 |                     <path
 26 |                         d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
 27 |                     ></path>
 28 |                     <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
 29 |                 </svg>
 30 |                 <span class="relative ml-1 lg:ml-2 leading-none">
 31 |                     {{ copyButtonText }}
 32 |                 </span>
 33 |             </base-button>
 34 |             <base-button class="ml-4" @click="shareURL">
 35 |                 <svg
 36 |                     class="relative w-4 h-4"
 37 |                     width="24"
 38 |                     height="24"
 39 |                     viewBox="0 0 24 24"
 40 |                     fill="none"
 41 |                     stroke="currentColor"
 42 |                     stroke-width="2"
 43 |                     stroke-linecap="round"
 44 |                     stroke-linejoin="round"
 45 |                 >
 46 |                     <path
 47 |                         d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
 48 |                     ></path>
 49 |                     <path
 50 |                         d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
 51 |                     ></path>
 52 |                 </svg>
 53 |                 <span class="relative ml-1 lg:ml-2 leading-none">
 54 |                     {{ shareButtonText }}
 55 |                 </span>
 56 |             </base-button>
 57 |         </div>
 58 |     </figure>
 59 | </template>
 60 | 
 61 | <script>
 62 | import chroma from 'chroma-js'
 63 | import { mapState } from 'vuex'
 64 | import BaseButton from '~/components/BaseButton'
 65 | import { copyTextToClipboard } from '~/utils/clipboard'
 66 | 
 67 | const COPY_LABEL = 'Copy CSS'
 68 | const SHARE_LABEL = 'Share URL'
 69 | 
 70 | export default {
 71 |     components: {
 72 |         BaseButton,
 73 |     },
 74 | 
 75 |     data() {
 76 |         return {
 77 |             copyButtonText: COPY_LABEL,
 78 |             shareButtonText: SHARE_LABEL,
 79 |             origin: '',
 80 |         }
 81 |     },
 82 | 
 83 |     computed: {
 84 |         ...mapState({
 85 |             dir: (state) => state.direction,
 86 |             stops: (state) => state.colorStops,
 87 |             mode: (state) => state.colorMode,
 88 |         }),
 89 | 
 90 |         gradientCSS: function () {
 91 |             let dir = `${this.dir}deg`
 92 |             let stops = this.stops
 93 |             let mode = this.mode
 94 |             let steps = mode !== 'rgb' ? stops.length + 5 : stops.length
 95 |             let string = 'linear-gradient('
 96 |             let keyColors = []
 97 |             let scale
 98 |             let colors = []
 99 |             let positions = []
100 | 
101 |             stops.map((stop) => keyColors.push(stop.color.hex))
102 |             scale = chroma.scale(keyColors).mode(mode).correctLightness()
103 |             ;[...Array(steps).keys()].map((col, index) => {
104 |                 let t = index / (steps - 1)
105 |                 colors.push(scale(t).hex())
106 |                 positions.push(Math.floor(t * 100))
107 |             })
108 | 
109 |             return `${string}${dir}${colors
110 |                 .map((stop, index) => `, ${stop} ${positions[index]}%`)
111 |                 .join('')})`
112 |         },
113 |     },
114 | 
115 |     created: function () {
116 |         if (process.client) {
117 |             this.origin = window.location.origin
118 |         }
119 |     },
120 | 
121 |     methods: {
122 |         copyCSS(code) {
123 |             copyTextToClipboard(code)
124 |             this.copyButtonText = 'Copied!'
125 |             setTimeout(() => {
126 |                 this.copyButtonText = COPY_LABEL
127 |             }, 2000)
128 |         },
129 | 
130 |         shareURL() {
131 |             let mode = this.mode
132 |             let deg = this.dir
133 |             let stops = this.stops
134 |             let start = stops[0].color.hex.replace('#', '')
135 |             let end = stops[stops.length - 1].color.hex.replace('#', '')
136 |             let str = `/mode/${mode}/start/${start}/end/${end}/angle/${deg}`
137 | 
138 |             copyTextToClipboard(this.origin + str)
139 |             this.shareButtonText = 'Copied!'
140 |             setTimeout(() => {
141 |                 this.shareButtonText = SHARE_LABEL
142 |             }, 2000)
143 |         },
144 |     },
145 | }
146 | </script>
147 | 
148 | <style lang="postcss" module>
149 | figure {
150 |     display: grid;
151 |     grid-template-rows: auto;
152 |     grid-template-columns: 1fr;
153 |     padding-top: 8.5rem;
154 | }
155 | 
156 | .source {
157 |     mix-blend-mode: color-burn;
158 |     opacity: 0.75;
159 | 
160 |     & code {
161 |         line-height: 2;
162 |     }
163 | }
164 | </style>
165 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <form class="m-0 text-sm">
  3 |         <fieldset class="p-0 m-0 border-none max-w-md mx-auto">
  4 |             <legend
  5 |                 class="font-semibold uppercase tracking-widest text-grey-700 m-0"
  6 |             >
  7 |                 Colour Mode
  8 |             </legend>
  9 | 
 10 |             <div
 11 |                 class="shadow-a flex items-center p-4 lg:p-8 mt-2 bg-white rounded-sm overflow-hidden"
 12 |             >
 13 |                 <label
 14 |                     v-for="(m, index) in modes"
 15 |                     :key="index"
 16 |                     class="flex items-center my-2 mr-4 leading-none cursor-pointer"
 17 |                 >
 18 |                     <input
 19 |                         v-model="mode"
 20 |                         :value="m.toLowerCase()"
 21 |                         class="mr-2"
 22 |                         type="radio"
 23 |                         name="mode"
 24 |                     />
 25 |                     <span class="text-xs lg:text-sm tracking-widest">{{
 26 |                         m
 27 |                     }}</span>
 28 |                 </label>
 29 |             </div>
 30 |         </fieldset>
 31 | 
 32 |         <fieldset class="p-0 m-0 mt-16 border-none max-w-md mx-auto">
 33 |             <legend
 34 |                 class="font-semibold uppercase tracking-widest text-grey-700 m-0"
 35 |             >
 36 |                 Gradient Options
 37 |             </legend>
 38 | 
 39 |             <option-group
 40 |                 class="gradient-options shadow-a mt-2 bg-white rounded-sm"
 41 |             >
 42 |                 <option-controls>
 43 |                     <template slot="summary">
 44 |                         <span
 45 |                             class="inline-block text-xs lg:text-sm font-medium uppercase tracking-widest text-grey-600"
 46 |                         >
 47 |                             Direction
 48 |                         </span>
 49 |                         <svg
 50 |                             class="w-4 h-4"
 51 |                             width="20"
 52 |                             height="20"
 53 |                             viewBox="0 0 20 20"
 54 |                         >
 55 |                             <path
 56 |                                 :transform="rotation"
 57 |                                 d="M10 20C4.47715 20 0 15.52285 0 10S4.47715 0 10 0s10 4.47715 10 10-4.47715 10-10 10zm1-18H9v7h-8V2z"
 58 |                                 fill-rule="nonzero"
 59 |                                 fill="#000"
 60 |                                 fill-opacity="0"
 61 |                             ></path>
 62 |                             <path
 63 |                                 :transform="rotation"
 64 |                                 d="M9 2.0619C5.0537 2.554 2 5.92037 2 10c0 4.41828 3.58172 8 8 8s8-3.58172 8-8c0-4.07962-3.0537-7.446-7-7.9381V9H9V2.0619zM10 20C4.47715 20 0 15.52285 0 10S4.47715 0 10 0s10 4.47715 10 10-4.47715 10-10 10z"
 65 |                                 fill-rule="nonzero"
 66 |                                 fill="#000"
 67 |                                 fill-opacity="1"
 68 |                             ></path>
 69 |                         </svg>
 70 |                     </template>
 71 |                     <range-field
 72 |                         :value="direction"
 73 |                         :min="0"
 74 |                         :max="360"
 75 |                         @input="rotateGradient"
 76 |                     />
 77 |                 </option-controls>
 78 |                 <option-controls
 79 |                     v-for="(stop, index) in stops"
 80 |                     :key="index"
 81 |                     class="border-t border-gray-800 border-opacity-10"
 82 |                 >
 83 |                     <template slot="summary">
 84 |                         <span
 85 |                             class="inline-block text-xs lg:text-sm font-medium uppercase tracking-widest text-grey-600"
 86 |                         >
 87 |                             <template v-if="index === 0">Start</template>
 88 |                             <template v-else>End</template>
 89 |                             Colour
 90 |                         </span>
 91 |                         <span
 92 |                             :style="{ backgroundColor: stop.color.hex }"
 93 |                             class="inline-block w-4 h-4 rounded-full"
 94 |                         />
 95 |                     </template>
 96 |                     <color-field
 97 |                         :color="stop.color.hex"
 98 |                         @update="(color) => changeColorStop(color, index)"
 99 |                     />
100 |                 </option-controls>
101 |             </option-group>
102 |         </fieldset>
103 |     </form>
104 | </template>
105 | 
106 | <script>
107 | import { mapState } from 'vuex'
108 | import ColorField from '~/components/ColorField.vue'
109 | import OptionControls from '~/components/OptionControls.vue'
110 | import OptionGroup from '~/components/OptionGroup.vue'
111 | import RangeField from '~/components/RangeField.vue'
112 | 
113 | export default {
114 |     components: {
115 |         OptionGroup,
116 |         OptionControls,
117 |         ColorField,
118 |         RangeField,
119 |     },
120 | 
121 |     transition: {
122 |         mode: 'out-in',
123 |     },
124 | 
125 |     data() {
126 |         return {
127 |             modes: ['RGB', 'Lab', 'HSL', 'Lch'],
128 |         }
129 |     },
130 | 
131 |     computed: {
132 |         mode: {
133 |             get() {
134 |                 return this.$store.state.colorMode
135 |             },
136 |             set(mode) {
137 |                 this.$store.dispatch('changeMode', mode)
138 |             },
139 |         },
140 | 
141 |         rotation: function () {
142 |             return `rotate(${this.direction} 10 10)`
143 |         },
144 | 
145 |         ...mapState({
146 |             version: (state) => state.version,
147 |             direction: (state) => state.direction,
148 |             stops: (state) => state.colorStops,
149 |         }),
150 |     },
151 | 
152 |     methods: {
153 |         rotateGradient(dir) {
154 |             this.$store.dispatch('rotate', dir)
155 |         },
156 | 
157 |         changeColorStop(color, stop) {
158 |             this.$store.dispatch('changeColor', { color, stop })
159 |         },
160 |     },
161 | }
162 | </script>
163 | 


--------------------------------------------------------------------------------