diff --git a/.changeset/config.json b/.changeset/config.json index 6315b5c..6d01752 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,14 +1,11 @@ { - "$schema": "https://unpkg.com/@changesets/config@latest/schema.json", - "access": "restricted", - "baseBranch": "main", - "changelog": [ - "@changesets/changelog-github", - { "repo": "stormwarning/polychroma" } - ], - "commit": false, - "ignore": [], - "linked": [], - "privatePackages": { "version": true, "tag": true }, - "updateInternalDependencies": "patch" + "$schema": "https://unpkg.com/@changesets/config@latest/schema.json", + "access": "restricted", + "baseBranch": "main", + "changelog": ["@changesets/changelog-github", { "repo": "stormwarning/polychroma" }], + "commit": false, + "ignore": [], + "linked": [], + "privatePackages": { "version": true, "tag": true }, + "updateInternalDependencies": "patch" } diff --git a/.editorconfig b/.editorconfig index 696f400..3e00020 100644 --- a/.editorconfig +++ b/.editorconfig @@ -5,7 +5,7 @@ root = true charset = utf-8 end_of_line = lf indent_size = 4 -indent_style = space +indent_style = tab insert_final_newline = true trim_trailing_whitespace = true diff --git a/.oxfmtrc.json b/.oxfmtrc.json new file mode 100644 index 0000000..a9da3fb --- /dev/null +++ b/.oxfmtrc.json @@ -0,0 +1,34 @@ +{ + "$schema": "./node_modules/oxfmt/configuration_schema.json", + "experimentalSortImports": { + "customGroups": [ + { + "groupName": "framework", + "elementNamePattern": ["nuxt", "pinia", "vue", "#imports"] + } + ], + "groups": [ + "side-effect", + "builtin", + "framework", + "external", + "internal", + ["parent", "sibling", "index"], + "style" + ] + }, + "ignorePatterns": [], + "jsxSingleQuote": false, + "semi": false, + "singleQuote": true, + "useTabs": true, + "overrides": [ + { + "files": ["**/*.css"], + "options": { + "singleQuote": false, + "printWidth": 120 + } + } + ] +} diff --git a/.stylelintrc.js b/.stylelintrc.js index 3b16d02..78548e1 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,10 +1,9 @@ +// eslint-disable-next-line unicorn/prefer-module module.exports = { - extends: ['@zazen/stylelint-config'], - rules: { - 'at-rule-no-unknown': [ - true, - { ignoreAtRules: ['include', 'mixin', 'screen', 'apply'] }, - ], - 'value-list-comma-newline-after': null, - }, + extends: ['@zazen/stylelint-config'], + rules: { + 'at-rule-no-unknown': [true, { ignoreAtRules: ['include', 'mixin', 'screen', 'apply'] }], + // eslint-disable-next-line unicorn/no-null + 'value-list-comma-newline-after': null, + }, } diff --git a/README.md b/README.md index 7374595..1eef34a 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,11 @@ # polychroma + > Better gradients through colour spaces. Generate better CSS gradients using alternative colour spaces & Bezier interpolation. ### Credits -Uses the amazing [chroma.js] library by @gka +Uses the amazing [chroma.js] library by @gka [chroma.js]: http://gka.github.io/chroma.js/ diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 29cef18..fe51b03 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -5,46 +5,45 @@ @import 'tailwindcss/utilities'; @viewport { - width: device-width; + width: device-width; } :root { - --color-bg: #f5f5f5; - --color-text: #717474; - --color-heading: #16191b; + --color-bg: #f5f5f5; + --color-text: #717474; + --color-heading: #16191b; - --grey-1: #f5f5f5; - --grey-3: #c2c3c4; - --grey-4: #9b9e9d; - --grey-6: #717474; - --grey-7: #495057; - --grey-8: #212529; - --grey-9: #16191b; + --grey-1: #f5f5f5; + --grey-3: #c2c3c4; + --grey-4: #9b9e9d; + --grey-6: #717474; + --grey-7: #495057; + --grey-8: #212529; + --grey-9: #16191b; - --blue-5: #339af0; - --blue-6: #228be6; - --blue-7: #1c7ed6; + --blue-5: #339af0; + --blue-6: #228be6; + --blue-7: #1c7ed6; } code, .code { - font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, - monospace; + font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .mix-burn { - mix-blend-mode: color-burn; + mix-blend-mode: color-burn; } /** Fix tracking issue for right-aligned text. */ .tracking-mega { - margin-right: -0.25em; + margin-right: -0.25em; } .router-link-active { - border-bottom: 0.125rem solid currentColor; + border-bottom: 0.125rem solid currentColor; } /** @@ -55,9 +54,9 @@ code, */ .page-enter-active, .page-leave-active { - transition: opacity 200ms ease-in; + transition: opacity 200ms ease-in; } .page-enter, .page-leave-to { - opacity: 0; + opacity: 0; } diff --git a/app/components/app-footer.vue b/app/components/app-footer.vue index 21ade50..221eabd 100644 --- a/app/components/app-footer.vue +++ b/app/components/app-footer.vue @@ -1,47 +1,47 @@ diff --git a/app/components/app-nav.vue b/app/components/app-nav.vue index 1235384..5df041a 100644 --- a/app/components/app-nav.vue +++ b/app/components/app-nav.vue @@ -1,10 +1,10 @@ diff --git a/app/components/color-field.vue b/app/components/color-field.vue index a89e15e..7c6ded8 100644 --- a/app/components/color-field.vue +++ b/app/components/color-field.vue @@ -1,68 +1,61 @@ diff --git a/app/components/color-mode.vue b/app/components/color-mode.vue index 8907a2c..a0fdd82 100644 --- a/app/components/color-mode.vue +++ b/app/components/color-mode.vue @@ -1,28 +1,24 @@ diff --git a/app/components/gradient-output.vue b/app/components/gradient-output.vue index 529f8ad..2133e79 100644 --- a/app/components/gradient-output.vue +++ b/app/components/gradient-output.vue @@ -1,67 +1,61 @@ diff --git a/app/components/option-controls.vue b/app/components/option-controls.vue index 28bb8c3..ab31cac 100644 --- a/app/components/option-controls.vue +++ b/app/components/option-controls.vue @@ -1,26 +1,26 @@ diff --git a/app/components/option-group.vue b/app/components/option-group.vue index 8698fa4..8322ccd 100644 --- a/app/components/option-group.vue +++ b/app/components/option-group.vue @@ -1,7 +1,7 @@ diff --git a/app/components/range-field.vue b/app/components/range-field.vue index b8df74c..2a9ca92 100644 --- a/app/components/range-field.vue +++ b/app/components/range-field.vue @@ -1,53 +1,50 @@ @@ -55,128 +52,128 @@ function handleInput(event: Event) { /* stylelint-disable no-descending-specificity */ :root { - --range-thumb-color: var(--blue-7); - --range-thumb-focus: var(--blue-5); - --range-track-color: var(--grey-4); - --range-track-disabled: var(--grey-3); + --range-thumb-color: var(--blue-7); + --range-thumb-focus: var(--blue-5); + --range-track-color: var(--grey-4); + --range-track-disabled: var(--grey-3); } .range-field { - &.is-disabled { - color: var(--range-track-disabled); - } + &.is-disabled { + color: var(--range-track-disabled); + } } .range-field__label { - display: block; - line-height: 1rem; - color: var(--range-track-color); + display: block; + line-height: 1rem; + color: var(--range-track-color); } .range-field__input { - appearance: none; - width: 100%; - - &:focus { - outline: none; - } - - &::-ms-track { - height: 1rem; - } - - &::-ms-fill-lower, - &::-ms-fill-upper { - height: 2px; - margin-bottom: calc(0.5rem - 2px); - background: var(--range-track-color); - } - - &::-ms-fill-lower { - background: var(--range-thumb-color); - } - - &::-moz-range-track { - height: 2px; - margin-bottom: calc(0.5rem - 2px); - background: var(--range-track-color); - } - - &::-moz-progress-bar { - margin-inline-start: 0; - margin-inline-end: 0; - } - - &::-webkit-slider-runnable-track { - height: 2px; - margin-bottom: calc(0.5rem - 2px); - background: var(--range-track-color); - } - - &::-webkit-slider-thumb { - width: 1rem; - height: 1rem; - margin: 0; - margin-top: calc(-0.5rem + 1px); - margin-bottom: calc(0.5rem + 1px); - cursor: pointer; - background: var(--range-thumb-color); - border: 0; - border-radius: 50%; - appearance: none; - - &:focus { - background: var(--range-thumb-focus); - } - } - - &::-ms-thumb { - width: 1rem; - height: 1rem; - margin: 0; - cursor: pointer; - background: var(--range-thumb-color); - border: 0; - border-radius: 50%; - - &:focus { - background: var(--range-thumb-focus); - } - } - - &::-moz-range-thumb { - width: 1rem; - height: 1rem; - margin: 0; - cursor: pointer; - background: var(--range-thumb-color); - border: 0; - border-radius: 50%; - - &:focus { - background: var(--range-thumb-focus); - } - } - - &:disabled { - &::-ms-fill-lower, - &::-ms-fill-upper, - &::-ms-thumb { - cursor: default; - background: var(--range-track-disabled); - } - - &::-webkit-slider-thumb, - &::-webkit-slider-runnable-track { - cursor: default; - background: var(--range-track-disabled); - } - - &::-moz-range-track, - &::-moz-range-thumb { - cursor: default; - background: var(--range-track-disabled); - } - } + appearance: none; + width: 100%; + + &:focus { + outline: none; + } + + &::-ms-track { + height: 1rem; + } + + &::-ms-fill-lower, + &::-ms-fill-upper { + height: 2px; + margin-bottom: calc(0.5rem - 2px); + background: var(--range-track-color); + } + + &::-ms-fill-lower { + background: var(--range-thumb-color); + } + + &::-moz-range-track { + height: 2px; + margin-bottom: calc(0.5rem - 2px); + background: var(--range-track-color); + } + + &::-moz-progress-bar { + margin-inline-start: 0; + margin-inline-end: 0; + } + + &::-webkit-slider-runnable-track { + height: 2px; + margin-bottom: calc(0.5rem - 2px); + background: var(--range-track-color); + } + + &::-webkit-slider-thumb { + width: 1rem; + height: 1rem; + margin: 0; + margin-top: calc(-0.5rem + 1px); + margin-bottom: calc(0.5rem + 1px); + cursor: pointer; + background: var(--range-thumb-color); + border: 0; + border-radius: 50%; + appearance: none; + + &:focus { + background: var(--range-thumb-focus); + } + } + + &::-ms-thumb { + width: 1rem; + height: 1rem; + margin: 0; + cursor: pointer; + background: var(--range-thumb-color); + border: 0; + border-radius: 50%; + + &:focus { + background: var(--range-thumb-focus); + } + } + + &::-moz-range-thumb { + width: 1rem; + height: 1rem; + margin: 0; + cursor: pointer; + background: var(--range-thumb-color); + border: 0; + border-radius: 50%; + + &:focus { + background: var(--range-thumb-focus); + } + } + + &:disabled { + &::-ms-fill-lower, + &::-ms-fill-upper, + &::-ms-thumb { + cursor: default; + background: var(--range-track-disabled); + } + + &::-webkit-slider-thumb, + &::-webkit-slider-runnable-track { + cursor: default; + background: var(--range-track-disabled); + } + + &::-moz-range-track, + &::-moz-range-thumb { + cursor: default; + background: var(--range-track-disabled); + } + } } diff --git a/app/error.vue b/app/error.vue index ad13545..48ceaa7 100644 --- a/app/error.vue +++ b/app/error.vue @@ -1,51 +1,49 @@ diff --git a/app/layouts/default.vue b/app/layouts/default.vue index 5ae5f4e..3f63092 100644 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -1,19 +1,17 @@ diff --git a/app/pages/_content/about.md b/app/pages/_content/about.md index 3c96035..7ab9ef9 100644 --- a/app/pages/_content/about.md +++ b/app/pages/_content/about.md @@ -1,7 +1,7 @@ -When defining a standard two-colour gradient, browsers -interpolate using `RGB`, which can go through kind of greyish +When defining a standard two-colour gradient, browsers +interpolate using `RGB`, which can go through kind of greyish colours. `Lab` interpolation produces better, more -even results. +even results. Other interpolation modes (`HSL` and `Lch` for now, working on adding more) are included as options for experimentation — the diff --git a/app/pages/_content/background.md b/app/pages/_content/background.md index 48c41e7..b755b02 100644 --- a/app/pages/_content/background.md +++ b/app/pages/_content/background.md @@ -1,12 +1,12 @@ The idea for Polychroma started after discovering Bugsnag’s -[chromatic-sass](https://blog.bugsnag.com/chromatic-sass/) -project. I loved the idea of a more natural-looking gradient, -but I wanted a way to visualise the results without needing to +[chromatic-sass](https://blog.bugsnag.com/chromatic-sass/) +project. I loved the idea of a more natural-looking gradient, +but I wanted a way to visualise the results without needing to update my dev stack. -I looked into the library that powered it — the amazing -[chroma.js](https://vis4.net/chromajs/) — and after tumbling -down a rabbit hole of colour science and data visualisation, -ended up with this simple little tool. Use it to grab a quick +I looked into the library that powered it — the amazing +[chroma.js](https://vis4.net/chromajs/) — and after tumbling +down a rabbit hole of colour science and data visualisation, +ended up with this simple little tool. Use it to grab a quick CSS snippet, or plug the resulting colour values into Figma, Sketch, or your image editor of choice to use in mockups. diff --git a/app/pages/_content/colophon.md b/app/pages/_content/colophon.md index 54af069..06875b7 100644 --- a/app/pages/_content/colophon.md +++ b/app/pages/_content/colophon.md @@ -1,5 +1,5 @@ -Polychroma is built with [Nuxt.js](https://nuxtjs.org/) — a -[Vue.js](https://vuejs.org/) framework — and +Polychroma is built with [Nuxt.js](https://nuxtjs.org/) — a +[Vue.js](https://vuejs.org/) framework — and [chroma.js](https://vis4.net/chromajs/) by Gregor Aisch. It uses [Tailwind CSS](https://tailwindcss.com/) for most of the styling, @@ -8,6 +8,6 @@ with a few tweaks and custom styles. The text is set in [Inter](https://rsms.me/inter/), specifically the 400, 600, and 700 weights. -Comments & suggestions are very welcome! You can leave a message -on [Twitter](https://twitter.com/stormwarning) or file an issue +Comments & suggestions are very welcome! You can leave a message +on [Twitter](https://twitter.com/stormwarning) or file an issue on [GitHub](https://github.com/stormwarning/polychroma). diff --git a/app/pages/index.vue b/app/pages/index.vue index d60a1ec..23514c9 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -1,93 +1,93 @@ diff --git a/app/pages/info.vue b/app/pages/info.vue index cdf122e..99f6a20 100644 --- a/app/pages/info.vue +++ b/app/pages/info.vue @@ -1,69 +1,61 @@