Q:

Create custom fields in the Magnolia CMS dialogs using Blossom

I can't find anywhere how to create custom fields which I can later use in blossom module dialogs.  Here is a description how to make custom field from Vaadin engine.  I would like to know how to do this in blossom module? 
The Second question is, It is possible to change styles of the dialogs?  Change window size?  Add some separators between fields etc.?  Using some java code or templates of course.  

A:

Regarding the first Question:
You can do it by extending the CustomField...
Your structure could look like this:
- fields
  |- builder
  |  |- YourFieldBuilder
  |
  |- definition
  |  |- YourFieldDefinition
  |
  |- factory
  |  |- YourFieldFactory
  |
  |- YourField

With the classes looking like:
YourField.java
package fields;

import com.vaadin.data. Property;
import com.vaadin.data.util.converter. Converter;
import com.vaadin.ui. Component;
import com.vaadin.ui. CustomField;
import com.vaadin.ui. TextField;
import fields.definition. YourFieldDefinition;
import info.magnolia.objectfactory. ComponentProvider;

public class YourField extends CustomField<String> { // String is the type your component will work with
    private final ComponentProvider componentProvider;

    private SliderFieldDefinition definition;
    private TextField textField = new TextField();

public YourField(YourFieldDefinition yourFieldDefinition, ComponentProvider componentProvider) {
        this.definition = yourFieldDefinition;
        this.componentProvider = componentProvider;
        setImmediate(true);
    }

    @Override
    protected Component initContent() {
        if (textField.getValue() == null) {
            textField.setValue(definition.getTextValue());
        }

        textField.setWidth("100%");

        return textField;
    }

    @Override
    public Class<String> getType() { // Again the type your component will work with
        return String.class;
    }

    @Override
    public String getValue() { // Again the type your component will work with
        return textField.getValue();
    }

    @Override
    public void setValue(String newValue) throws ReadOnlyException, Converter. ConversionException { // Again the type your component will work with
        textField.setValue(newValue);
    }

    /**
     * Set propertyDatasource. 
     * If the translator is not null, set it as datasource. 
     */
    @Override
    @SuppressWarnings("rawtypes")
    public void setPropertyDataSource(Property newDataSource) {
        textField.setPropertyDataSource(newDataSource);
        super.setPropertyDataSource(newDataSource);
    }

    @Override
    @SuppressWarnings("rawtypes")
    public Property getPropertyDataSource() {
        return textField.getPropertyDataSource();
    }
}

YourFieldDefinition.java
package fields.definition;

import info.magnolia.ui.form.field.definition. ConfiguredFieldDefinition;

public class YourFieldDefinition extends ConfiguredFieldDefinition {
    String text = "";

    public String getTextValue() {
        return text;
    }

    public void setTextValue(String text) {
        this.text = text;
    }
}

YourFieldFactory.java
package fields.factory;

import com.vaadin.data. Item;
import com.vaadin.ui. Field;
import fields. YourField;
import fields.definition. YourFieldDefinition;
import info.magnolia.objectfactory. ComponentProvider;
import info.magnolia.ui.api.app. AppController;
import info.magnolia.ui.api.context. UiContext;
import info.magnolia.ui.api.i18n. I18NAuthoringSupport;
import info.magnolia.ui.form.field.factory. AbstractFieldFactory;

import javax.inject. Inject;

public class YourFieldFactory extends AbstractFieldFactory<YourFieldDefinition, String> { // String is the type your component will work with
    private YourField yourField;

    private final AppController appController;
    private final UiContext uiContext;
    private ComponentProvider componentProvider;

    @Inject
    public YourFieldFactory(YourFieldDefinition definition, Item relatedFieldItem, UiContext uiContext, I18NAuthoringSupport i18nAuthoringSupport, AppController appController, ComponentProvider componentProvider) {
        super(definition, relatedFieldItem, uiContext, i18nAuthoringSupport);
        this.appController = appController;
        this.uiContext = uiContext;
        this.componentProvider = componentProvider;
    }

    @Override
    public void setComponentProvider(ComponentProvider componentProvider) {
        super.setComponentProvider(componentProvider);
        this.componentProvider = componentProvider;
    }

    @Override
    protected Field<String> createFieldComponent() { // Again: Your type
        yourField = new YourField(definition, componentProvider);
        return yourField;
    }
}

YourFieldBuilder.java
package fields.builder;

import fields.definition. YourFieldDefinition;
import info.magnolia.ui.form.config. AbstractFieldBuilder;
import info.magnolia.ui.form.config. GenericValidatorBuilder;
import info.magnolia.ui.form.field.transformer. Transformer;
import info.magnolia.ui.form.validator.definition. ConfiguredFieldValidatorDefinition;

public class YourFieldBuilder extends AbstractFieldBuilder {
    private YourFieldDefinition definition = new YourFieldDefinition();

    public YourFieldBuilder(String name) {
        definition().setName(name);
    }

    @Override
    public YourFieldDefinition definition() {
        return definition;
    }

    public YourFieldBuilder setTextValue(String text) {
        definition().setTextValue(text);
        return this;
    }

    // This part is from the LinkFieldBuilder-class
    // Overrides for methods in parent class changing return type to allow method chaining

    @Override
    public YourFieldBuilder label(String label) {
        return (YourFieldBuilder) super.label(label);
    }

    @Override
    public YourFieldBuilder i18nBasename(String i18nBasename) {
        return (YourFieldBuilder) super.i18nBasename(i18nBasename);
    }

    @Override
    public YourFieldBuilder i18n(boolean i18n) {
        return (YourFieldBuilder) super.i18n(i18n);
    }

    @Override
    public YourFieldBuilder i18n() {
        return (YourFieldBuilder) super.i18n();
    }

    @Override
    public YourFieldBuilder description(String description) {
        return (YourFieldBuilder) super.description(description);
    }

    @Override
    public YourFieldBuilder type(String type) {
        return (YourFieldBuilder) super.type(type);
    }

    @Override
    public YourFieldBuilder required(boolean required) {
        return (YourFieldBuilder) super.required(required);
    }

    @Override
    public YourFieldBuilder required() {
        return (YourFieldBuilder) super.required();
    }

    @Override
    public YourFieldBuilder requiredErrorMessage(String requiredErrorMessage) {
        return (YourFieldBuilder) super.requiredErrorMessage(requiredErrorMessage);
    }

    @Override
    public YourFieldBuilder readOnly(boolean readOnly) {
        return (YourFieldBuilder) super.readOnly(readOnly);
    }

    @Override
    public YourFieldBuilder readOnly() {
        return (YourFieldBuilder) super.readOnly();
    }

    @Override
    public YourFieldBuilder defaultValue(String defaultValue) {
        return (YourFieldBuilder) super.defaultValue(defaultValue);
    }

    @Override
    public YourFieldBuilder styleName(String styleName) {
        return (YourFieldBuilder) super.styleName(styleName);
    }

    @Override
    public YourFieldBuilder validator(ConfiguredFieldValidatorDefinition validatorDefinition) {
        return (YourFieldBuilder) super.validator(validatorDefinition);
    }

    @Override
    public YourFieldBuilder validator(GenericValidatorBuilder validatorBuilder) {
        return (YourFieldBuilder) super.validator(validatorBuilder);
    }

    @Override
    public YourFieldBuilder transformerClass(Class<?  extends Transformer<? >> transformerClass) {
        return (YourFieldBuilder) super.transformerClass(transformerClass);
    }
}

After that you have to add your definition to your magnolia-instance's config under
/modules/ui-framework/fieldTypes/yourField/

definitionClass:fields.definition. YourFieldDefinition
factoryClass:fields.factory. YourFieldFactory

Now you can use it like this:
new YourFieldBuilder("name").label("label").setTextValue("foobar").defaultValue("");

Regarding your second question:
You can add your own styles to magnolia by using a custom Vaadin-theme.  You have to completely replace the default-theme, though.  This is meant only for your custom apps and is not trivial to do it for whole magnolia.  You will have to change and override the admincentral-theme to change these values. 
A manual is located here:
https://documentation.magnolia-cms.com/display/DOCS/App+theme

