From 9a6bb0f896e080f4c80c31a52f1abdb8efb935ae Mon Sep 17 00:00:00 2001 From: Ronald Jimmy Headrick III Date: Thu, 6 Jul 2023 20:47:07 -0400 Subject: [PATCH 01/10] add MWI theme story and associated components --- histoire-setup.ts | 2 + histoire.config.ts | 17 +- histoire.css | 100 ++++++ .../design-system/Tailwind.story.vue | 317 ++++++++++++++++++ .../Color/ColorSample.story.vue | 68 ++++ .../histoire-controls/Color/ColorSample.vue | 18 + .../Color/ColorSampleSet.story.vue | 30 ++ .../Color/ColorSampleSet.vue | 26 ++ tailwind.config.js | 16 + 9 files changed, 591 insertions(+), 3 deletions(-) create mode 100644 histoire-setup.ts create mode 100644 histoire.css create mode 100644 src/components/design-system/Tailwind.story.vue create mode 100644 src/components/histoire-controls/Color/ColorSample.story.vue create mode 100644 src/components/histoire-controls/Color/ColorSample.vue create mode 100644 src/components/histoire-controls/Color/ColorSampleSet.story.vue create mode 100644 src/components/histoire-controls/Color/ColorSampleSet.vue diff --git a/histoire-setup.ts b/histoire-setup.ts new file mode 100644 index 0000000..ea4f35c --- /dev/null +++ b/histoire-setup.ts @@ -0,0 +1,2 @@ +import "./histoire.css"; +import "./src/style.css" diff --git a/histoire.config.ts b/histoire.config.ts index 16e2296..350cb98 100644 --- a/histoire.config.ts +++ b/histoire.config.ts @@ -2,9 +2,20 @@ import { defineConfig } from 'histoire' import { HstVue } from '@histoire/plugin-vue' const config = defineConfig({ - plugins: [ - HstVue(), - ], + plugins: [HstVue()], + setupFile: "./histoire-setup.ts", + tree: { + groups: [ + { + id: "histoire-controls", + title: "Histoire Controls", + }, + { + id: "design-system", + title: "Design System", + }, + ], + }, }) export default config diff --git a/histoire.css b/histoire.css new file mode 100644 index 0000000..fbb547d --- /dev/null +++ b/histoire.css @@ -0,0 +1,100 @@ +:root { + --color-primary: var(--color-space-600); + --color-primary-hover: var(--color-space-500); + --color-secondary: var(--color-burble-350); + --color-secondary-hover: var(--color-burble-300); + --color-progress: var(--color-burble-350); + --color-hitpoints: var(--color-jade-500); + --color-manapoints: var(--color-ocean-400); + --color-ability: #dd7b5c; + --color-ability-hover: #e49880; + --color-market-sell: #d95961; + --color-market-sell-hover: #e38289; + --color-market-buy: #2fc4a7; + --color-market-buy-hover: #59d0b9; + --color-success: var(--color-orange-550); + --color-success-hover: var(--color-orange-500); + --color-warning: #db3333; + --color-warning-hover: #eb3f3f; + --color-empty: #d0d0d0; + --color-empty-hover: #e2e2e2; + --color-disabled: #959595; + --color-divider: var(--color-midnight-400); + --color-text-dark-mode: var(--color-neutral-100); + --color-background: #131c37; + --color-background-game: var(--color-midnight-900); + --color-burble-200: #c7b5e3; + --color-burble-250: #baa2db; + --color-burble-300: #ac8fd4; + --color-burble-350: #a272e4; + --color-burble-400: #906ac6; + --color-carol-300: #dd7b5c; + --color-jade-300: #82dcca; + --color-jade-400: #59d0b9; + --color-jade-500: #2fc4a7; + --color-midnight-100: #454771; + --color-midnight-200: #3f4166; + --color-midnight-300: #393a5b; + --color-midnight-400: #323450; + --color-midnight-500: #2c2e45; + --color-midnight-550: #292a40; + --color-midnight-600: #26273a; + --color-midnight-700: #20212f; + --color-midnight-800: #191a24; + --color-midnight-900: #131419; + --color-midnight-100-opacity-50: rgba(69, 71, 113, 0.5019607843137255); + --color-midnight-200-opacity-50: rgba(63, 65, 102, 0.5019607843137255); + --color-midnight-300-opacity-50: rgba(57, 58, 91, 0.5019607843137255); + --color-midnight-400-opacity-50: rgba(50, 52, 80, 0.5019607843137255); + --color-midnight-500-opacity-50: rgba(44, 46, 69, 0.5019607843137255); + --color-midnight-600-opacity-50: rgba(38, 39, 58, 0.5019607843137255); + --color-midnight-700-opacity-50: rgba(32, 33, 47, 0.5019607843137255); + --color-midnight-800-opacity-50: rgba(25, 26, 36, 0.5019607843137255); + --color-midnight-900-opacity-50: rgba(19, 20, 25, 0.5019607843137255); + --color-midnight-100-opacity-25: rgba(69, 71, 113, 0.25098039215686274); + --color-midnight-200-opacity-25: rgba(63, 65, 102, 0.25098039215686274); + --color-midnight-300-opacity-25: rgba(57, 58, 91, 0.25098039215686274); + --color-midnight-400-opacity-25: rgba(50, 52, 80, 0.25098039215686274); + --color-midnight-500-opacity-25: rgba(44, 46, 69, 0.25098039215686274); + --color-midnight-600-opacity-25: rgba(38, 39, 58, 0.25098039215686274); + --color-midnight-700-opacity-25: rgba(32, 33, 47, 0.25098039215686274); + --color-midnight-800-opacity-25: rgba(25, 26, 36, 0.25098039215686274); + --color-midnight-900-opacity-25: rgba(19, 20, 25, 0.25098039215686274); + --color-neutral-50: #f3f3f3; + --color-neutral-100: #e7e7e7; + --color-neutral-200: #d0d0d0; + --color-ocean-200: #a5d1f3; + --color-ocean-300: #77baec; + --color-ocean-350: #61afe9; + --color-ocean-400: #4aa3e6; + --color-ocean-500: #1d8ce0; + --color-ocean-600: #1770b3; + --color-ocean-700: #115486; + --color-ocean-800: #0c385a; + --color-orange-400: #fbb54b; + --color-orange-500: #faa21e; + --color-orange-550: #ee9a1d; + --color-orange-600: #e1921b; + --color-orange-650: #c57a09; + --color-orange-700: #966112; + --color-scarlet-400: #d95c64; + --color-scarlet-500: #d0333d; + --color-scarlet-600: #a62931; + --color-scarlet-700: #7d1f25; + --color-scarlet-800: #531418; + --color-space-100: #dde2f8; + --color-space-200: #bbc5f1; + --color-space-250: #a9b6ed; + --color-space-300: #98a7e9; + --color-space-400: #768ae2; + --color-space-500: #546ddb; + --color-space-600: #4357af; + --color-space-650: #3c4e9d; + --color-space-700: #35458b; + --color-space-750: #2e3c79; + --color-space-800: #273366; + --color-space-850: #202a54; + --color-space-880: #1c2549; + --color-space-900: #192142; + --color-space-950: #121830; +} diff --git a/src/components/design-system/Tailwind.story.vue b/src/components/design-system/Tailwind.story.vue new file mode 100644 index 0000000..5c8ca52 --- /dev/null +++ b/src/components/design-system/Tailwind.story.vue @@ -0,0 +1,317 @@ + + + diff --git a/src/components/histoire-controls/Color/ColorSample.story.vue b/src/components/histoire-controls/Color/ColorSample.story.vue new file mode 100644 index 0000000..6d961ea --- /dev/null +++ b/src/components/histoire-controls/Color/ColorSample.story.vue @@ -0,0 +1,68 @@ + + + + + +# Color/Sample + diff --git a/src/components/histoire-controls/Color/ColorSample.vue b/src/components/histoire-controls/Color/ColorSample.vue new file mode 100644 index 0000000..66af02a --- /dev/null +++ b/src/components/histoire-controls/Color/ColorSample.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/components/histoire-controls/Color/ColorSampleSet.story.vue b/src/components/histoire-controls/Color/ColorSampleSet.story.vue new file mode 100644 index 0000000..4a6bb02 --- /dev/null +++ b/src/components/histoire-controls/Color/ColorSampleSet.story.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/components/histoire-controls/Color/ColorSampleSet.vue b/src/components/histoire-controls/Color/ColorSampleSet.vue new file mode 100644 index 0000000..fd7689c --- /dev/null +++ b/src/components/histoire-controls/Color/ColorSampleSet.vue @@ -0,0 +1,26 @@ + + + diff --git a/tailwind.config.js b/tailwind.config.js index 2512bc1..84b6403 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,18 @@ +const isRunningHistoire = () => { + return !!process.env.HISTOIRE; +}; + +// We don't want to bloat the css with unused classes, +// so we only force the safe list when running histoire. +// This allows us to use the same tailwind config for +// both the app and the storybook. +const safelist = !isRunningHistoire() ? [] : [ + { + pattern: /bg-+/, + variants: ["hover"], + }, +]; + /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], @@ -110,5 +125,6 @@ export default { }, }, }, + safelist, plugins: [], }; From 2efdd465e1b257da88d1b6d41527fc2205cfe6f3 Mon Sep 17 00:00:00 2001 From: Ronald Jimmy Headrick III Date: Fri, 7 Jul 2023 21:28:34 -0400 Subject: [PATCH 02/10] add floating-vue, vueuse as dev dependencies, and a copy icon --- package-lock.json | 222 ++++++++++++++++++++++++++++++ package.json | 2 + src/components/icons/CopyIcon.vue | 13 ++ 3 files changed, 237 insertions(+) create mode 100644 src/components/icons/CopyIcon.vue diff --git a/package-lock.json b/package-lock.json index 1624097..abc8c0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,9 @@ "@semantic-release/exec": "^6.0.3", "@types/node": "^18.16.0", "@vitejs/plugin-vue": "^4.1.0", + "@vueuse/core": "^10.2.1", "autoprefixer": "^10.4.14", + "floating-vue": "^2.0.0-beta.24", "histoire": "^0.16.2", "postcss": "^8.4.23", "prettier": "2.8.8", @@ -635,6 +637,21 @@ "node": ">=12" } }, + "node_modules/@floating-ui/core": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==", + "dev": true + }, + "node_modules/@floating-ui/dom": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz", + "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.1.0" + } + }, "node_modules/@histoire/app": { "version": "0.16.1", "resolved": "https://registry.npmjs.org/@histoire/app/-/app-0.16.1.tgz", @@ -1420,6 +1437,12 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.17", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz", + "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==", + "dev": true + }, "node_modules/@vitejs/plugin-vue": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.1.tgz", @@ -1713,6 +1736,94 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==" }, + "node_modules/@vueuse/core": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz", + "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==", + "dev": true, + "dependencies": { + "@types/web-bluetooth": "^0.0.17", + "@vueuse/metadata": "10.2.1", + "@vueuse/shared": "10.2.1", + "vue-demi": ">=0.14.5" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/core/node_modules/vue-demi": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz", + "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==", + "dev": true, + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@vueuse/metadata": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz", + "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz", + "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==", + "dev": true, + "dependencies": { + "vue-demi": ">=0.14.5" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared/node_modules/vue-demi": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz", + "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==", + "dev": true, + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -3192,6 +3303,25 @@ "integrity": "sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==", "dev": true }, + "node_modules/floating-vue": { + "version": "2.0.0-beta.24", + "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.24.tgz", + "integrity": "sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==", + "dev": true, + "dependencies": { + "@floating-ui/dom": "~1.1.1", + "vue-resize": "^2.0.0-alpha.1" + }, + "peerDependencies": { + "@nuxt/kit": "^3.2.0", + "vue": "^3.2.0" + }, + "peerDependenciesMeta": { + "@nuxt/kit": { + "optional": true + } + } + }, "node_modules/form-data": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", @@ -10481,6 +10611,15 @@ "@vue/shared": "3.2.47" } }, + "node_modules/vue-resize": { + "version": "2.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz", + "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==", + "dev": true, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vue-template-compiler": { "version": "2.7.14", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz", @@ -11094,6 +11233,21 @@ "dev": true, "optional": true }, + "@floating-ui/core": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==", + "dev": true + }, + "@floating-ui/dom": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz", + "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==", + "dev": true, + "requires": { + "@floating-ui/core": "^1.1.0" + } + }, "@histoire/app": { "version": "0.16.1", "resolved": "https://registry.npmjs.org/@histoire/app/-/app-0.16.1.tgz", @@ -11724,6 +11878,12 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "@types/web-bluetooth": { + "version": "0.0.17", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz", + "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==", + "dev": true + }, "@vitejs/plugin-vue": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.1.tgz", @@ -12002,6 +12162,51 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==" }, + "@vueuse/core": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz", + "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==", + "dev": true, + "requires": { + "@types/web-bluetooth": "^0.0.17", + "@vueuse/metadata": "10.2.1", + "@vueuse/shared": "10.2.1", + "vue-demi": ">=0.14.5" + }, + "dependencies": { + "vue-demi": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz", + "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==", + "dev": true, + "requires": {} + } + } + }, + "@vueuse/metadata": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz", + "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==", + "dev": true + }, + "@vueuse/shared": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz", + "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==", + "dev": true, + "requires": { + "vue-demi": ">=0.14.5" + }, + "dependencies": { + "vue-demi": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz", + "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==", + "dev": true, + "requires": {} + } + } + }, "abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -13117,6 +13322,16 @@ "integrity": "sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==", "dev": true }, + "floating-vue": { + "version": "2.0.0-beta.24", + "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.24.tgz", + "integrity": "sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==", + "dev": true, + "requires": { + "@floating-ui/dom": "~1.1.1", + "vue-resize": "^2.0.0-alpha.1" + } + }, "form-data": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", @@ -18287,6 +18502,13 @@ "@vue/shared": "3.2.47" } }, + "vue-resize": { + "version": "2.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz", + "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==", + "dev": true, + "requires": {} + }, "vue-template-compiler": { "version": "2.7.14", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz", diff --git a/package.json b/package.json index ebd6954..756ac4b 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,9 @@ "@semantic-release/exec": "^6.0.3", "@types/node": "^18.16.0", "@vitejs/plugin-vue": "^4.1.0", + "@vueuse/core": "^10.2.1", "autoprefixer": "^10.4.14", + "floating-vue": "^2.0.0-beta.24", "histoire": "^0.16.2", "postcss": "^8.4.23", "prettier": "2.8.8", diff --git a/src/components/icons/CopyIcon.vue b/src/components/icons/CopyIcon.vue new file mode 100644 index 0000000..efb2a2b --- /dev/null +++ b/src/components/icons/CopyIcon.vue @@ -0,0 +1,13 @@ + From 9709fda947fe1e2b0820daec33ba5aa739286e61 Mon Sep 17 00:00:00 2001 From: Ronald Jimmy Headrick III Date: Fri, 7 Jul 2023 21:34:56 -0400 Subject: [PATCH 03/10] add copy buttons to the color samples --- .../histoire-controls/Color/ColorSample.vue | 51 +++++++++++++++++-- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/src/components/histoire-controls/Color/ColorSample.vue b/src/components/histoire-controls/Color/ColorSample.vue index 66af02a..b4a6c33 100644 --- a/src/components/histoire-controls/Color/ColorSample.vue +++ b/src/components/histoire-controls/Color/ColorSample.vue @@ -1,18 +1,61 @@ From 0616b3a8b8310ef369ef6558dfeb393b7e96f5f6 Mon Sep 17 00:00:00 2001 From: Ronald Jimmy Headrick III Date: Sat, 8 Jul 2023 00:55:06 -0400 Subject: [PATCH 04/10] add color sample variations --- histoire.css | 8 ++ .../design-system/Tailwind.story.vue | 87 +++++++++++++------ .../Color/ColorSample.story.vue | 2 +- .../histoire-controls/Color/ColorSample.vue | 38 ++++++-- .../Color/ColorSampleSet.story.vue | 2 +- .../Color/ColorSampleSet.vue | 13 ++- .../Color/ColorSampleType.ts | 8 ++ tailwind.config.js | 2 +- 8 files changed, 120 insertions(+), 40 deletions(-) create mode 100644 src/components/histoire-controls/Color/ColorSampleType.ts diff --git a/histoire.css b/histoire.css index fbb547d..cce6862 100644 --- a/histoire.css +++ b/histoire.css @@ -98,3 +98,11 @@ --color-space-900: #192142; --color-space-950: #121830; } + +body { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; +} + +code { + font-family: "Operator Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace !important; +} \ No newline at end of file diff --git a/src/components/design-system/Tailwind.story.vue b/src/components/design-system/Tailwind.story.vue index 5c8ca52..25c2c19 100644 --- a/src/components/design-system/Tailwind.story.vue +++ b/src/components/design-system/Tailwind.story.vue @@ -1,6 +1,7 @@