Ubuntu Yaru Style - Distinct look and feel of the Ubuntu Desktop

This PR replaces the home-made material palette generator with a simple node.js based tool that utilizes the material-color-tool package that implements the CIEDE2000-based color matching algorithm used by Google's Material color tool.

| Before | After | |---|---| | | | | | | | | |

Hi guys, I did the following:

• [x] Remove unnecessary line.
• [x] Closes #24
• [x] Closes #42
• [x] Doc the colors api.
• [x] Extract the headline style.
• [x] Make FAB green.
• [ ] Fixing conflict

PR Not ready to merge

I am not sure if this is a goal of this repository, but I have decided to improve the visual consistency of the components with the OG Yaru theme. I still have a lot to do, but I have implemented a few basic components. Most of these are based on the existing Material Components with a new visual style applied to the builder. So far, I have added these components:

YaruCheckbox: (Currently the most finished)

YaruSwitch: (Unfinished)

YaruRadio: (Unfinished)

YaruButton: (Unfinished)

TODO:

• [x] Finish Checkbox

• [ ] Finish Radio

• [ ] Finish Button

• [ ] Finish Switch

• [ ] Finish loading spinners and bars

• [ ] Misc. Components (I'll cross that bridge when I get there )

Fixes the screenshots not appearing on pub.dart One other approach could be to add the images in an issue and then link to them after posting the message

[FontWeight] was not mentioned for the textStyles that need a regular fontWeight. This PR adds FontWeight.normal to those TextStyles.

Moreover, it also fixes the visual density of Buttons. The padding of OutlinedButton and ElevatedButton was not behaving as it should.

Move the material color generation logic out to a separate helper tool to be able to specify the accent colors as MaterialColor constants and to get rid of the extra "fooMaterialColor" variables that were exposed by the library.

• [x] I signed the CLA.
• [x] Make colors into separate file.
• [x] Convert fields into private.
• [x] Create src directory.
• [x] Renaming colors.
• [x] Update Example.

Hi guys, I organized the project structure, everything still work like before, but I believe it's more organized.

I hope it's mergeable. Thanks!

Closes #16

• Create the default Flutter template app:

  flutter create .

  $ flutter create .
  Creating project ....
    pubspec.yaml (created)
  [...]
    .gitignore (created)
    linux/flutter/CMakeLists.txt (created)
    linux/my_application.cc (created)
    linux/main.cc (created)
    linux/CMakeLists.txt (created)
    linux/my_application.h (created)
    linux/.gitignore (created)
  Running "flutter pub get" in flutter_yaru...                     1,090ms
  Wrote 80 files.
  
  All done!
  In order to run your application, type:
  
    $ cd .
    $ flutter run
  
  Your application code is in ./lib/main.dart.
  

• Build the app bundle:

  flutter build linux --release

  $ flutter build linux --release
  
  💪 Building with sound null safety 💪
  
  Building Linux application...                                           
  

• Inspect the size of Flutter assets: (1.7mb)

  du -h

  $ du -h build/linux/x64/release/bundle/data/flutter_assets
  284K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons/assets
  288K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons
  292K	build/linux/x64/release/bundle/data/flutter_assets/packages
  1,3M	build/linux/x64/release/bundle/data/flutter_assets/fonts
  1,7M	build/linux/x64/release/bundle/data/flutter_assets
  

• Add yaru as a dependency in pubspec.yaml, rebuild the app bundle:

  flutter pub get && flutter build linux --release

  $ flutter pub get && flutter build linux --release
  Running "flutter pub get" in flutter_yaru...                       368ms
  
  💪 Building with sound null safety 💪
  
  Building Linux application...       
  

• Inspect the size of the assets again: (50mb)

  du -h

  $ du -h build/linux/x64/release/bundle/data/flutter_assets
  284K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons/assets
  288K	build/linux/x64/release/bundle/data/flutter_assets/packages/cupertino_icons
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src/utils/fonts
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src/utils
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src
  48M	build/linux/x64/release/bundle/data/flutter_assets/packages/yaru
  49M	build/linux/x64/release/bundle/data/flutter_assets/packages
  1,3M	build/linux/x64/release/bundle/data/flutter_assets/fonts
  50M	build/linux/x64/release/bundle/data/flutter_assets
  

• List the fonts

  ls -lah

  $ ls -lah build/linux/x64/release/bundle/data/flutter_assets/packages/yaru/src/utils/fonts
  total 48M
  drwxr-xr-x 2 jpnurmi jpnurmi 4,0K Sep 27 16:27 .
  drwxr-xr-x 3 jpnurmi jpnurmi 4,0K Sep 27 16:27 ..
  -rw-r--r-- 1 jpnurmi jpnurmi 366K Sep 27 16:27 LiberationSerif-BoldItalic.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 360K Sep 27 16:27 LiberationSerif-Bold.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 365K Sep 27 16:27 LiberationSerif-Italic.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 382K Sep 27 16:27 LiberationSerif-Regular.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi  20M Sep 27 16:27 NotoSansCJK-Bold.ttc
  -rw-r--r-- 1 jpnurmi jpnurmi  20M Sep 27 16:27 NotoSansCJK-Regular.ttc
  -rw-r--r-- 1 jpnurmi jpnurmi 4,4M Sep 27 16:27 TibetanMachineUni.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 349K Sep 27 16:27 Ubuntu-BI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 326K Sep 27 16:27 Ubuntu-B.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 401K Sep 27 16:27 Ubuntu-LI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 406K Sep 27 16:27 Ubuntu-L.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 359K Sep 27 16:27 Ubuntu-MI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 334K Sep 27 16:27 Ubuntu-M.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 378K Sep 27 16:27 Ubuntu-RI.ttf
  -rw-r--r-- 1 jpnurmi jpnurmi 346K Sep 27 16:27 Ubuntu-R.ttf
  

• According to ubuntu-21.10-beta-desktop-amd64.manifest, the following packages are installed by default:

  • fonts-noto-cjk 1:20201206-cjk+repack1-1
  • fonts-noto-color-emoji 0~20200916-1
  • fonts-noto-mono 20201225-1build1
  • fonts-tibetan-machine 1.901b-5.1build1

• Looking at text_theme.dart, these fonts are used as fallbacks. Are there other smaller alternatives?

Closes https://github.com/ubuntu/yaru.dart/issues/34

observing the changes in PR #29 I can see that

• the comment claims to fix #16 but does not only partially (see #15 and #21)

• ignores some of effective dart's guideline

  • if can be const if should be const, if cannot better calculate it than store it as final curiously this doesn't occur consistently

• Colors holds both ColorSwatchs and Colors without comments or distinction

  • the former offers only a partial implementation compared with the previous code

fixes https://github.com/ubuntu/yaru.dart/issues/38

the current implementation of the example, while demonstrating successfully the package greatly disregards many best practices including dry, effective dart and performance best practices, together with plain wrong initialization and unnecessary rebuilds

Draw it as a border rather than a 1px elevated shadow to get consistent results regardless of the platform and renderer.

| Dark | Light | |---|---| | | |

I attempted to use the getting started code from the README.md and it failed miserably. I had to dig into the example to find out how to use YaruThemeData and friends, but there is a distinct lack of explanation as to why it is built out the way it is.

https://github.com/canonical/ubuntu-desktop-installer/issues/546#issuecomment-983400339

• should we set the density globally ? I have some concerns with this
• we should end up with less big list tiles, tables and inputs, can be set individually even though it might not be as satisfying from the a dev perspective as using a global setting

The problem about setting it globally, even if the toolkit left a mechanism for this, is that the result might not be satisfying. First of all we could achieve the recreation of the mock-ups in the installer without it and changing it now might break widget sizes we didn't want to change. Then the buttons and all widgets really need to look everywhere the same, otherwise it is obviously totally inconsistent which would be a design nightmare.