Vocabulary: Implement dark mode for our storybooks

Created on 1 Oct 2020  ยท  19Comments  ยท  Source: creativecommons/vocabulary

Description

We could have a dark mode for our 3 storybooks. There are many plug-ins available for the same.

(The above links are for reference sake only)

What is needed, perhaps, is a button which toggles state from light to dark thereby changing the theme of the entire storybook.

Implementation

  • [ ] I would be interested in implementing this feature.
improvement javascripstorybook interface low
Source
picture nimishbongale
👍1

Most helpful comment

FYI, this is petty straightforward to implement with https://github.com/hipstersmoothie/storybook-dark-mode, which adds a toggle to the menu to switch themes as well.

picture zackkrida on 13 Oct 2020
👍2

All 19 comments

may i work on this issue

khushishikhu picture khushishikhu on 1 Oct 2020
👍1

Go ahead @khushishikhu ๐Ÿ˜ƒ

nimishbongale picture nimishbongale on 1 Oct 2020
👍1

@nimishbongale i am not getting how to setup this project locally

khushishikhu picture khushishikhu on 2 Oct 2020

Are you running into errors? Please drop in a message on our Slack, I think it'll be easier to resolve.

But in your case,

You'll have to run

npm install
npm run build
npm run storybook

(all in the root, just like how the installation guide in the readme mentions)

nimishbongale picture nimishbongale on 2 Oct 2020
👍1

@nimishbongale i am getting these errors, when trying to setup locally
Capture

khushishikhu picture khushishikhu on 4 Oct 2020

I think it's a problem with your node version.

Can you run this command and let me know the version?

node --version

nimishbongale picture nimishbongale on 4 Oct 2020

@nimishbongale it's v12.18.3

khushishikhu picture khushishikhu on 4 Oct 2020

@khushishikhu you let the npm install run completely before proceeding right? From what the error looks like, lerna hasn't gotten installed completely.

nimishbongale picture nimishbongale on 4 Oct 2020

yes i did let it run completely but it still showing me those errors

khushishikhu picture khushishikhu on 4 Oct 2020
👀1

@khushishikhu I'm able to run the repository on node version 12.18.3 just fine. There must be something else fishy going on.
trial

nimishbongale picture nimishbongale on 4 Oct 2020

@nimishbongale can i use yarn

khushishikhu picture khushishikhu on 4 Oct 2020

tried a fresh setup myself on v12.18.3. worked without issue:

~/Code
โฏ node -v
v12.18.4

~/Code
โฏ gh repo clone creativecommons/vocabulary
Cloning into 'vocabulary'...
remote: Enumerating objects: 71, done.
remote: Counting objects: 100% (71/71), done.
remote: Compressing objects: 100% (60/60), done.
remote: Total 12791 (delta 28), reused 33 (delta 11), pack-reused 12720
Receiving objects: 100% (12791/12791), 38.48 MiB | 3.57 MiB/s, done.
Resolving deltas: 100% (7933/7933), done.

~/Code took 13s
โฏ cd vocabulary

vocabulary on ๎‚  master via โฌข v12.18.4
โฏ npm i && npm run setup
added 747 packages from 386 contributors and audited 747 packages in 5.889s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


> root@ setup /Users/zack/Code/vocabulary
> lerna bootstrap

lerna notice cli v3.22.1
lerna info Bootstrapping 3 packages
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna success Bootstrapped 3 packages


   โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
   โ”‚                                                                โ”‚
   โ”‚      New patch version of npm available! 6.14.6 โ†’ 6.14.8       โ”‚
   โ”‚   Changelog: https://github.com/npm/cli/releases/tag/v6.14.8   โ”‚
   โ”‚               Run npm install -g npm to update!                โ”‚
   โ”‚                                                                โ”‚
   โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ


vocabulary on ๎‚  master [!] via โฌข v12.18.4 took 1m56s
โฏ npm run build

> root@ build /Users/zack/Code/vocabulary
> lerna run build --stream

lerna notice cli v3.22.1
lerna info Executing command in 3 packages: "npm run build"
@creativecommons/vocabulary: > @creativecommons/[email protected] build /Users/zack/Code/vocabulary/packages/vocabulary
@creativecommons/vocabulary: > webpack --mode production
@creativecommons/fonts: > @creativecommons/[email protected] build /Users/zack/Code/vocabulary/packages/fonts
@creativecommons/fonts: > webpack --mode production
@creativecommons/fonts: Hash: 074134ed9d53c9703925
@creativecommons/fonts: Version: webpack 4.42.1
@creativecommons/fonts: Time: 962ms
@creativecommons/fonts: Built at: 10/04/2020 8:54:50 AM
@creativecommons/fonts:                                Asset       Size      Chunks                    Chunk Names
@creativecommons/fonts:       assets/cclogo-shared-image.jpg   75.3 KiB              [emitted]
@creativecommons/fonts:             assets/github_corner.svg   1.32 KiB              [emitted]
@creativecommons/fonts:          assets/guide/app_button.png    671 KiB              [emitted]  [big]
@creativecommons/fonts:           assets/guide/directory.png    642 KiB              [emitted]  [big]
@creativecommons/fonts:                assets/guide/flag.png   2.21 KiB              [emitted]
@creativecommons/fonts:       assets/guide/generate_font.png    201 KiB              [emitted]
@creativecommons/fonts:       assets/guide/generate_json.png    187 KiB              [emitted]
@creativecommons/fonts:        assets/guide/import_icons.png   4.17 KiB              [emitted]
@creativecommons/fonts:      assets/guide/import_project.png   3.69 KiB              [emitted]
@creativecommons/fonts:       assets/guide/import_to_set.png     15 KiB              [emitted]
@creativecommons/fonts:   assets/guide/projects_untitled.png    186 KiB              [emitted]
@creativecommons/fonts: assets/guide/projects_vocabulary.png    186 KiB              [emitted]
@creativecommons/fonts:           assets/guide/selection.png    209 KiB              [emitted]
@creativecommons/fonts:             assets/guide/toolbar.png   2.66 KiB              [emitted]
@creativecommons/fonts:    assets/guide/untitled_project.png    141 KiB              [emitted]
@creativecommons/fonts:    assets/guide/vocabulary_icons.png    219 KiB              [emitted]
@creativecommons/fonts:             assets/icons/favicon.png   9.15 KiB              [emitted]
@creativecommons/fonts:               assets/logos/fonts.svg    2.5 KiB              [emitted]
@creativecommons/fonts:                 assets/titlecard.png    311 KiB              [emitted]  [big]
@creativecommons/fonts:             css/accidenz_commons.css  135 bytes           0  [emitted]         accidenz_commons
@creativecommons/fonts:                        css/fonts.css   6.75 KiB  1, 2, 3, 4  [emitted]         fonts
@creativecommons/fonts:             css/roboto_condensed.css  885 bytes           2  [emitted]         roboto_condensed
@creativecommons/fonts:              css/source_sans_pro.css   1.28 KiB           3  [emitted]         source_sans_pro
@creativecommons/fonts:             css/vocabulary_icons.css   3.75 KiB           4  [emitted]         vocabulary_icons
@creativecommons/fonts:            fonts/AccidenzCommons.otf   13.9 KiB              [emitted]
@creativecommons/fonts:         fonts/JetBrainsMono-Bold.otf    135 KiB              [emitted]
@creativecommons/fonts:        fonts/JetBrainsMono-Bold.woff   59.9 KiB              [emitted]
@creativecommons/fonts:       fonts/JetBrainsMono-Bold.woff2   45.3 KiB              [emitted]
@creativecommons/fonts:      fonts/JetBrainsMono-Regular.otf    134 KiB              [emitted]
@creativecommons/fonts:     fonts/JetBrainsMono-Regular.woff     58 KiB              [emitted]
@creativecommons/fonts:    fonts/JetBrainsMono-Regular.woff2   43.6 KiB              [emitted]
@creativecommons/fonts:       fonts/RobotoCondensed-Bold.otf   42.9 KiB              [emitted]
@creativecommons/fonts:      fonts/RobotoCondensed-Bold.woff   19.7 KiB              [emitted]
@creativecommons/fonts:     fonts/RobotoCondensed-Bold.woff2   15.3 KiB              [emitted]
@creativecommons/fonts:    fonts/RobotoCondensed-Regular.otf   44.3 KiB              [emitted]
@creativecommons/fonts:   fonts/RobotoCondensed-Regular.woff   19.7 KiB              [emitted]
@creativecommons/fonts:  fonts/RobotoCondensed-Regular.woff2   15.4 KiB              [emitted]
@creativecommons/fonts:         fonts/SourceSansPro-Bold.otf   64.9 KiB              [emitted]
@creativecommons/fonts:        fonts/SourceSansPro-Bold.woff   19.4 KiB              [emitted]
@creativecommons/fonts:       fonts/SourceSansPro-Bold.woff2   15.4 KiB              [emitted]
@creativecommons/fonts:      fonts/SourceSansPro-Regular.otf   67.2 KiB              [emitted]
@creativecommons/fonts:     fonts/SourceSansPro-Regular.woff   19.7 KiB              [emitted]
@creativecommons/fonts:    fonts/SourceSansPro-Regular.woff2   15.7 KiB              [emitted]
@creativecommons/fonts:     fonts/SourceSansPro-SemiBold.otf   65.9 KiB              [emitted]
@creativecommons/fonts:    fonts/SourceSansPro-SemiBold.woff   19.6 KiB              [emitted]
@creativecommons/fonts:   fonts/SourceSansPro-SemiBold.woff2   15.6 KiB              [emitted]
@creativecommons/fonts:           fonts/VocabularyIcons.json   56.3 KiB              [emitted]
@creativecommons/fonts:            fonts/VocabularyIcons.ttf   18.2 KiB              [emitted]
@creativecommons/fonts:           fonts/VocabularyIcons.woff   18.2 KiB              [emitted]
@creativecommons/fonts:               js/accidenz_commons.js  960 bytes           0  [emitted]         accidenz_commons
@creativecommons/fonts:                          js/fonts.js   1.08 KiB  1, 2, 3, 4  [emitted]         fonts
@creativecommons/fonts:               js/roboto_condensed.js  954 bytes           2  [emitted]         roboto_condensed
@creativecommons/fonts:                js/source_sans_pro.js  956 bytes           3  [emitted]         source_sans_pro
@creativecommons/fonts:               js/vocabulary_icons.js  958 bytes           4  [emitted]         vocabulary_icons
@creativecommons/fonts:           scss/accidenz_commons.scss  155 bytes              [emitted]
@creativecommons/fonts:                  scss/font_face.scss  654 bytes              [emitted]
@creativecommons/fonts:             scss/jetbrains_mono.scss  161 bytes              [emitted]
@creativecommons/fonts:           scss/roboto_condensed.scss  169 bytes              [emitted]
@creativecommons/fonts:            scss/source_sans_pro.scss  233 bytes              [emitted]
@creativecommons/fonts:           scss/vocabulary_icons.scss    3.7 KiB              [emitted]
@creativecommons/fonts: Entrypoint fonts = css/fonts.css js/fonts.js
@creativecommons/fonts: Entrypoint accidenz_commons = css/accidenz_commons.css js/accidenz_commons.js
@creativecommons/fonts: Entrypoint roboto_condensed = css/roboto_condensed.css js/roboto_condensed.js
@creativecommons/fonts: Entrypoint source_sans_pro = css/source_sans_pro.css js/source_sans_pro.js
@creativecommons/fonts: Entrypoint vocabulary_icons = css/vocabulary_icons.css js/vocabulary_icons.js
@creativecommons/fonts:  [0] ./src/scripts/roboto_condensed.js 43 bytes {1} {2} [built]
@creativecommons/fonts:  [1] ./src/styles/roboto_condensed.scss 39 bytes {1} {2} [built]
@creativecommons/fonts:  [2] ./src/scripts/source_sans_pro.js 42 bytes {1} {3} [built]
@creativecommons/fonts:  [3] ./src/styles/source_sans_pro.scss 39 bytes {1} {3} [built]
@creativecommons/fonts:  [4] ./src/scripts/vocabulary_icons.js 43 bytes {1} {4} [built]
@creativecommons/fonts:  [5] ./src/styles/vocabulary_icons.scss 39 bytes {1} {4} [built]
@creativecommons/fonts:  [6] ./src/index.js 149 bytes {1} [built]
@creativecommons/fonts:  [7] ./src/scripts/jetbrains_mono.js 41 bytes {1} [built]
@creativecommons/fonts:  [8] ./src/styles/jetbrains_mono.scss 39 bytes {1} [built]
@creativecommons/fonts:  [9] ./src/scripts/accidenz_commons.js 43 bytes {0} [built]
@creativecommons/fonts: [10] ./src/styles/accidenz_commons.scss 39 bytes {0} [built]
@creativecommons/fonts:     + 5 hidden modules
@creativecommons/fonts: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
@creativecommons/fonts: This can impact web performance.
@creativecommons/fonts: Assets:
@creativecommons/fonts:   assets/guide/directory.png (642 KiB)
@creativecommons/fonts:   assets/guide/app_button.png (671 KiB)
@creativecommons/fonts:   assets/titlecard.png (311 KiB)
@creativecommons/fonts: WARNING in webpack performance recommendations:
@creativecommons/fonts: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
@creativecommons/fonts: For more info visit https://webpack.js.org/guides/code-splitting/
@creativecommons/fonts: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js??ref--4-2!src/styles/accidenz_commons.scss:
@creativecommons/fonts:     Entrypoint mini-css-extract-plugin = *
@creativecommons/fonts:     [2] ./src/fonts/AccidenzCommons.otf 72 bytes {0} [built]
@creativecommons/fonts:     [3] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./src/styles/accidenz_commons.scss 714 bytes {0} [built]
@creativecommons/fonts:         + 2 hidden modules
@creativecommons/fonts: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js??ref--4-2!src/styles/jetbrains_mono.scss:
@creativecommons/fonts:     Entrypoint mini-css-extract-plugin = *
@creativecommons/fonts:     [2] ./src/fonts/JetBrainsMono-Regular.woff2 80 bytes {0} [built]
@creativecommons/fonts:     [3] ./src/fonts/JetBrainsMono-Regular.woff 79 bytes {0} [built]
@creativecommons/fonts:     [4] ./src/fonts/JetBrainsMono-Regular.otf 78 bytes {0} [built]
@creativecommons/fonts:     [5] ./src/fonts/JetBrainsMono-Bold.woff2 77 bytes {0} [built]
@creativecommons/fonts:     [6] ./src/fonts/JetBrainsMono-Bold.woff 76 bytes {0} [built]
@creativecommons/fonts:     [7] ./src/fonts/JetBrainsMono-Bold.otf 75 bytes {0} [built]
@creativecommons/fonts:     [8] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./src/styles/jetbrains_mono.scss 2.37 KiB {0} [built]
@creativecommons/fonts:         + 2 hidden modules
@creativecommons/fonts: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js??ref--4-2!src/styles/roboto_condensed.scss:
@creativecommons/fonts:     Entrypoint mini-css-extract-plugin = *
@creativecommons/fonts:     [2] ./src/fonts/RobotoCondensed-Regular.woff2 82 bytes {0} [built]
@creativecommons/fonts:     [3] ./src/fonts/RobotoCondensed-Regular.woff 81 bytes {0} [built]
@creativecommons/fonts:     [4] ./src/fonts/RobotoCondensed-Regular.otf 80 bytes {0} [built]
@creativecommons/fonts:     [5] ./src/fonts/RobotoCondensed-Bold.woff2 79 bytes {0} [built]
@creativecommons/fonts:     [6] ./src/fonts/RobotoCondensed-Bold.woff 78 bytes {0} [built]
@creativecommons/fonts:     [7] ./src/fonts/RobotoCondensed-Bold.otf 77 bytes {0} [built]
@creativecommons/fonts:     [8] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./src/styles/roboto_condensed.scss 2.38 KiB {0} [built]
@creativecommons/fonts:         + 2 hidden modules
@creativecommons/fonts: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js??ref--4-2!src/styles/source_sans_pro.scss:
@creativecommons/fonts:     Entrypoint mini-css-extract-plugin = *
@creativecommons/fonts:      [2] ./src/fonts/SourceSansPro-Regular.woff2 80 bytes {0} [built]
@creativecommons/fonts:      [3] ./src/fonts/SourceSansPro-Regular.woff 79 bytes {0} [built]
@creativecommons/fonts:      [4] ./src/fonts/SourceSansPro-Regular.otf 78 bytes {0} [built]
@creativecommons/fonts:      [5] ./src/fonts/SourceSansPro-SemiBold.woff2 81 bytes {0} [built]
@creativecommons/fonts:      [6] ./src/fonts/SourceSansPro-SemiBold.woff 80 bytes {0} [built]
@creativecommons/fonts:      [7] ./src/fonts/SourceSansPro-SemiBold.otf 79 bytes {0} [built]
@creativecommons/fonts:      [8] ./src/fonts/SourceSansPro-Bold.woff2 77 bytes {0} [built]
@creativecommons/fonts:      [9] ./src/fonts/SourceSansPro-Bold.woff 76 bytes {0} [built]
@creativecommons/fonts:     [10] ./src/fonts/SourceSansPro-Bold.otf 75 bytes {0} [built]
@creativecommons/fonts:     [11] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./src/styles/source_sans_pro.scss 3.38 KiB {0} [built]
@creativecommons/fonts:         + 2 hidden modules
@creativecommons/fonts: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js??ref--4-2!src/styles/vocabulary_icons.scss:
@creativecommons/fonts:     Entrypoint mini-css-extract-plugin = *
@creativecommons/fonts:     [2] ./src/fonts/VocabularyIcons.woff 73 bytes {0} [built]
@creativecommons/fonts:     [3] ./src/fonts/VocabularyIcons.ttf 72 bytes {0} [built]
@creativecommons/fonts:     [4] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./src/styles/vocabulary_icons.scss 4.64 KiB {0} [built]
@creativecommons/fonts:         + 2 hidden modules
@creativecommons/vocabulary: Hash: 8502ea38b4ffd205ab9f
@creativecommons/vocabulary: Version: webpack 4.44.1
@creativecommons/vocabulary: Time: 1484ms
@creativecommons/vocabulary: Built at: 10/04/2020 8:54:51 AM
@creativecommons/vocabulary:                                          Asset        Size  Chunks                    Chunk Names
@creativecommons/vocabulary:                 assets/cclogo-shared-image.jpg    75.3 KiB          [emitted]
@creativecommons/vocabulary:                 assets/demo/broadway_tower.jpg    1.56 MiB          [emitted]  [big]
@creativecommons/vocabulary:                  assets/demo/lion_dafrique.jpg    87.2 KiB          [emitted]
@creativecommons/vocabulary:                       assets/github_corner.svg    1.32 KiB          [emitted]
@creativecommons/vocabulary:                       assets/icons/favicon.png    9.15 KiB          [emitted]
@creativecommons/vocabulary:               assets/license_badges/big/by.svg    5.01 KiB          [emitted]
@creativecommons/vocabulary:         assets/license_badges/big/by_nc.eu.svg    8.54 KiB          [emitted]
@creativecommons/vocabulary:            assets/license_badges/big/by_nc.svg    9.34 KiB          [emitted]
@creativecommons/vocabulary:      assets/license_badges/big/by_nc_nd.eu.svg    10.2 KiB          [emitted]
@creativecommons/vocabulary:         assets/license_badges/big/by_nc_nd.svg    10.1 KiB          [emitted]
@creativecommons/vocabulary:      assets/license_badges/big/by_nc_sa.eu.svg    12.1 KiB          [emitted]
@creativecommons/vocabulary:         assets/license_badges/big/by_nc_sa.svg    12.1 KiB          [emitted]
@creativecommons/vocabulary:            assets/license_badges/big/by_nd.svg    7.33 KiB          [emitted]
@creativecommons/vocabulary:            assets/license_badges/big/by_sa.svg    9.28 KiB          [emitted]
@creativecommons/vocabulary:          assets/license_badges/big/cc_zero.svg    6.11 KiB          [emitted]
@creativecommons/vocabulary:     assets/license_badges/big/publicdomain.svg    5.57 KiB          [emitted]
@creativecommons/vocabulary:             assets/license_badges/small/by.svg    3.57 KiB          [emitted]
@creativecommons/vocabulary:          assets/license_badges/small/by_nc.svg    4.58 KiB          [emitted]
@creativecommons/vocabulary:       assets/license_badges/small/by_nc_nd.svg    5.36 KiB          [emitted]
@creativecommons/vocabulary:       assets/license_badges/small/by_nc_sa.svg    4.68 KiB          [emitted]
@creativecommons/vocabulary:          assets/license_badges/small/by_nd.svg    4.25 KiB          [emitted]
@creativecommons/vocabulary:          assets/license_badges/small/by_sa.svg    4.73 KiB          [emitted]
@creativecommons/vocabulary:        assets/license_badges/small/cc_zero.svg    4.48 KiB          [emitted]
@creativecommons/vocabulary:   assets/license_badges/small/publicdomain.svg    4.04 KiB          [emitted]
@creativecommons/vocabulary:                assets/logos/cc/letterheart.svg    2.46 KiB          [emitted]
@creativecommons/vocabulary:                 assets/logos/cc/lettermark.svg    3.13 KiB          [emitted]
@creativecommons/vocabulary:                   assets/logos/cc/logomark.svg    6.78 KiB          [emitted]
@creativecommons/vocabulary:         assets/logos/products/certificates.svg    8.61 KiB          [emitted]
@creativecommons/vocabulary:              assets/logos/products/chooser.svg    6.46 KiB          [emitted]
@creativecommons/vocabulary:       assets/logos/products/global_network.svg    8.48 KiB          [emitted]
@creativecommons/vocabulary:        assets/logos/products/global_summit.svg    9.14 KiB          [emitted]
@creativecommons/vocabulary:       assets/logos/products/legal_database.svg    11.5 KiB          [emitted]
@creativecommons/vocabulary:          assets/logos/products/open_source.svg     8.5 KiB          [emitted]
@creativecommons/vocabulary:               assets/logos/products/search.svg    6.11 KiB          [emitted]
@creativecommons/vocabulary: assets/logos/products/state_of_the_commons.svg    13.4 KiB          [emitted]
@creativecommons/vocabulary:           assets/logos/products/vocabulary.svg    7.19 KiB          [emitted]
@creativecommons/vocabulary:                                assets/puff.svg    1.43 KiB          [emitted]
@creativecommons/vocabulary:                           assets/titlecard.png     495 KiB          [emitted]  [big]
@creativecommons/vocabulary:                             css/vocabulary.css     222 KiB       0  [emitted]         main
@creativecommons/vocabulary:                               js/vocabulary.js    3.36 KiB       0  [emitted]         main
@creativecommons/vocabulary:                           scss/breadcrumb.scss   500 bytes          [emitted]
@creativecommons/vocabulary:                               scss/button.scss    2.94 KiB          [emitted]
@creativecommons/vocabulary:                                 scss/card.scss    11.5 KiB          [emitted]
@creativecommons/vocabulary:                                scss/color.scss    1.67 KiB          [emitted]
@creativecommons/vocabulary:                      scss/color_overrides.scss   858 bytes          [emitted]
@creativecommons/vocabulary:                               scss/footer.scss    2.01 KiB          [emitted]
@creativecommons/vocabulary:                                 scss/form.scss    2.61 KiB          [emitted]
@creativecommons/vocabulary:                        scss/github_corner.scss   449 bytes          [emitted]
@creativecommons/vocabulary:                        scss/global_header.scss    3.01 KiB          [emitted]
@creativecommons/vocabulary:                               scss/header.scss    2.24 KiB          [emitted]
@creativecommons/vocabulary:                                scss/image.scss    1.31 KiB          [emitted]
@creativecommons/vocabulary:                               scss/layout.scss   115 bytes          [emitted]
@creativecommons/vocabulary:                               scss/locale.scss   282 bytes          [emitted]
@creativecommons/vocabulary:                         scss/notification.scss    2.16 KiB          [emitted]
@creativecommons/vocabulary:                           scss/pagination.scss    1.14 KiB          [emitted]
@creativecommons/vocabulary:                        scss/profile_image.scss   206 bytes          [emitted]
@creativecommons/vocabulary:                         scss/sidebar_menu.scss   911 bytes          [emitted]
@creativecommons/vocabulary:                              scss/spacing.scss    1.27 KiB          [emitted]
@creativecommons/vocabulary:                    scss/spacing_overrides.scss   491 bytes          [emitted]
@creativecommons/vocabulary:                                scss/table.scss    1.55 KiB          [emitted]
@creativecommons/vocabulary:                    scss/table_of_contents.scss   504 bytes          [emitted]
@creativecommons/vocabulary:                    scss/table_of_progress.scss  1020 bytes          [emitted]
@creativecommons/vocabulary:                                 scss/tabs.scss    1.65 KiB          [emitted]
@creativecommons/vocabulary:                           scss/typography.scss    2.69 KiB          [emitted]
@creativecommons/vocabulary:                 scss/typography_overrides.scss   358 bytes          [emitted]
@creativecommons/vocabulary:                           scss/vocabulary.scss    1.02 KiB          [emitted]
@creativecommons/vocabulary: Entrypoint main = css/vocabulary.css js/vocabulary.js
@creativecommons/vocabulary: [0] ./src/styles/vocabulary.scss 39 bytes {0} [built]
@creativecommons/vocabulary: [1] ./src/index.js + 5 modules 6.75 KiB {0} [built]
@creativecommons/vocabulary:     | ./src/index.js 148 bytes [built]
@creativecommons/vocabulary:     | ./src/scripts/vocabulary.js 53 bytes [built]
@creativecommons/vocabulary:     | ./src/scripts/global_header.js 3.83 KiB [built]
@creativecommons/vocabulary:     | ./src/scripts/constants.js 591 bytes [built]
@creativecommons/vocabulary:     | ./src/scripts/render.js 950 bytes [built]
@creativecommons/vocabulary:     | ./src/scripts/assets.js 1.21 KiB [built]
@creativecommons/vocabulary:     + 2 hidden modules
@creativecommons/vocabulary: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
@creativecommons/vocabulary: This can impact web performance.
@creativecommons/vocabulary: Assets:
@creativecommons/vocabulary:   assets/titlecard.png (495 KiB)
@creativecommons/vocabulary:   assets/demo/broadway_tower.jpg (1.56 MiB)
@creativecommons/vocabulary: WARNING in webpack performance recommendations:
@creativecommons/vocabulary: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
@creativecommons/vocabulary: For more info visit https://webpack.js.org/guides/code-splitting/
@creativecommons/vocabulary: Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js??ref--4-2!src/styles/vocabulary.scss:
@creativecommons/vocabulary:     Entrypoint mini-css-extract-plugin = *
@creativecommons/vocabulary:     [1] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./src/styles/vocabulary.scss 223 KiB {0} [built]
@creativecommons/vocabulary:         + 1 hidden module
@creativecommons/vue-vocabulary: > @creativecommons/[email protected] build /Users/zack/Code/vocabulary/packages/vue-vocabulary
@creativecommons/vue-vocabulary: > npm run index && vue-cli-service build --target lib --name vue-vocabulary --dest ./dist --entry ./src/index.js
@creativecommons/vue-vocabulary: > @creativecommons/[email protected] index /Users/zack/Code/vocabulary/packages/vue-vocabulary
@creativecommons/vue-vocabulary: > node library/build.js
@creativecommons/vue-vocabulary: โ— Indexing Vue Vocabulary
@creativecommons/vue-vocabulary: โ”œโ”€ Forming content for index at /Users/zack/Code/vocabulary/packages/vue-vocabulary/src/index.js ... done
@creativecommons/vue-vocabulary: โ””โ”€ Writing library exports to /Users/zack/Code/vocabulary/packages/vue-vocabulary/src/index.js ... done
@creativecommons/vue-vocabulary: โœ” Done.
@creativecommons/vue-vocabulary: -  Building for production as library (commonjs,umd,umd-min)...
@creativecommons/vue-vocabulary:  DONE  Compiled successfully in 5898ms8:55:00 AM
@creativecommons/vue-vocabulary:  DONE  Compiled successfully in 6056ms8:55:00 AM
@creativecommons/vue-vocabulary:  DONE  Compiled successfully in 6707ms8:55:00 AM
@creativecommons/vue-vocabulary:   File                              Size                 Gzipped
@creativecommons/vue-vocabulary:   dist/vue-vocabulary.umd.min.js    45.29 KiB            15.43 KiB
@creativecommons/vue-vocabulary:   dist/vue-vocabulary.umd.js        151.02 KiB           32.73 KiB
@creativecommons/vue-vocabulary:   dist/vue-vocabulary.common.js     150.63 KiB           32.60 KiB
@creativecommons/vue-vocabulary:   Images and other types of assets omitted.
lerna success run Ran npm script 'build' in 3 packages in 14.1s:
lerna success - @creativecommons/fonts
lerna success - @creativecommons/vocabulary
lerna success - @creativecommons/vue-vocabulary
zackkrida picture zackkrida on 4 Oct 2020
👍2

@nimishbongale can i use yarn

You could I guess, but it really wouldn't make any difference imo.

nimishbongale picture nimishbongale on 4 Oct 2020

Can I work on it?

neeraj-2 picture neeraj-2 on 10 Oct 2020
👍1

Go ahead @neeraj-2

nimishbongale picture nimishbongale on 10 Oct 2020
👍1

I have attached a screenshot for the dark mode, is this what we require to implement here with a button which can toggle for both light and dark theme? @nimishbongale, I just want to know by 3 storybooks you mentioned means:Canvas, Design and Docsright?

image

neeraj-2 picture neeraj-2 on 10 Oct 2020
🚀1

Great work @neeraj-2 ๐Ÿ‘ By 3 storybooks, I mean the fonts, vocabulary and Vue-vocabulary storybooks. If you've run all 3, you should find them running on ports 8080, 8081 & 8082.

nimishbongale picture nimishbongale on 10 Oct 2020
👍2

Solving this issue will also help us improve the global header, because its background is black. I discovered that the yellow 'donate' button adds a box-shadow to indicate that it's focused, but this outline is not visible on the black background.

obulat picture obulat on 11 Oct 2020
❤2

FYI, this is petty straightforward to implement with https://github.com/hipstersmoothie/storybook-dark-mode, which adds a toggle to the menu to switch themes as well.

zackkrida picture zackkrida on 13 Oct 2020
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

zackkrida picture zackkrida  ยท  6Comments
makkoncept picture makkoncept  ยท  6Comments
Dhruvi16 picture Dhruvi16  ยท  4Comments
zackkrida picture zackkrida  ยท  3Comments
panchovm picture panchovm  ยท  4Comments