eva-design/eva

:dizzy:Customizable Design System easily adaptable to your Brand.

eva's Issues

Eva: disabled colors are too light

Report
Checkbox, inputs, etc disabled colors are too light. Simply saying, it makes it very hard to see the elements.

Reason
Multiple Users requests

Mapping Changes
TBD (changes in themes and in the mappings)

• Design OK
• Mobile OK
• Web OK

Add Slider/Range Picker Component

Hey first off thanks for the awesome work 🚀

Could you maybe add a slider/range picker component? I am currently missing anything related to picking a number value from a slider. Something like this:

Eva Design System for Sketch is no longer available

https://eva.design website refers to a Sketch file but when you try to access it it says This product is not currently for sale.
Please either bring it back or remove it from the website :)

Customising font family throughout the design system

This comes from akveo/react-native-ui-kitten#569

I think you have a very nice looking and functioning design system. But the one thing in terms of styling I find lacking is the ability to set a font family, specifically in the React-Native part of it.

There's an issue now open there (linked above) but @artyorsh suggested it also get opened here as well!

The nice thing that react-native-elements does is that they allow you to use their ThemeProvider to overwrite individual styles for each of their components.

So you could have something like this:

import config from './config'

export default {
  colors: {
    primary: config.colors.brand
  },

  Text: {
    style: {
      fontFamily: config.fontFamilyRegular
    }
  },

  Button: {
    titleStyle: {
      fontFamily: config.fontFamilyBold,
      top: -1
    }
  },

  Input: {
    containerStyle: {
      marginTop: 15
    },

    labelStyle: {
      fontFamily: config.fontFamilyRegular,
      fontSize: 12
    },

    inputStyle: {
      fontFamily: config.fontFamilyRegular
    }
  },

  ListItem: {
    subtitleStyle: {
      color: config.colors.faded
    }
  },

  Card: {
    containerStyle: {
      backgroundColor: 'transparent',
      borderWidth: 0,
      borderColor: 'transparent'
    }
  }
}

Provide Eva Design for a software which works also on Windows

We are a Windows shop here. .NET, C#, Angular.
Providing the design system only for Sketch prevents our company from using your Nebular product. Our designers cannot use any of your design assets.

Any plans to make this work for the Adobe suite?

Missing keys in mapping.json from npm

I noticed that when I downloaded package from npm/yarn some keys in mapping.json are missing.
For example "Spinner", and "Select" doesn't exists.

File on your repository has 3435 lines, but from npm 2833.

Array token values

Perhaps it makes sense to introduce arrays in token values for cases like:

1. borderWidth: [0, 0, 1, 0]
2. margin: [0, 6, 0, 6]
3. etc.

This can help us to more “deeply” customize some components to mimic other design systems.

Performance improvement

Bug when setting border-radius to 0

If I set border-radius to 0 in the json file I use for the customMapping property on the ApplicationProvider in @ui-kitten/components, the generated style sets borderRadius to the key "border-radius" instead of the expected value of 0, which throws an error on ios simulator:

console.error: JSON value 'border-radius' of type NSString cannot be converted to NSNumber

{
  "strict": {
    "border-radius": 0
  },
  "components": {}
}

It could be a problem with these falsy || checks in metaProcessor.ts file that use the fallback parameter, which is the key. MetaProcessor gets called by SchemaProcessor.process which ApplicationProvider is using internally to create styles when custom mapping is set.

eva/packages/processor/js/src/processor/meta/metaProcessor.ts

Lines 49 to 61 in 58f41aa

	return { ...acc, [key]: this.getStrictThemeValue(key, theme, key) };
	}, {});
	}
	private getStrictThemeValue(name: string, theme: StrictTheme, fallback?: any) {
	if (this.isReference(name)) {
	const themeKey: string = this.createKeyFromReference(name);
	return this.findValue(themeKey, theme) || fallback;
	}
	return this.findValue(name, theme) || fallback;
	}

Eva: input action feedback

We can add an Icon to an Input component, but there is no design system predefined rules on feedback icon press feedback. Related issue: akveo/react-native-ui-kitten#451

Context/Overflow menu mapping params

There is an unrecorded moment, which concerns the height of the context/overflow menu. When rendering a huge set of elements (menu items) in the Menu - its height climbs out of the screen.

Proposal:

• Add max-height (maxHeight) parameter to menu mappings.
• Implement scrolling/list in the menu for handling such cases.

Remove direct pointing to the exact font weight value

In lot's of places mapping has exact values to the fontWeight:

"textFontWeight": "bold",

however, mostly we are using variables:

"textFontWeight": "text-subtitle-2-font-weight",

Let's unify it and have the variables everywhere. This could help to easily solve issues like akveo/react-native-ui-kitten#1399

Eva: primary colors are too dark on the dark theme

Report

Reason
Multiple Users requests

Mapping Changes
No.

• Design OK
• Mobile OK
• Web OK

Make theme objects identifieable

It would be nice to add a symbol to the theme objects so they can easily be identified.

A good reason for this is to be able to easily write a custom Jest snapshot serializer and avoids the entire theme from being serialized into the snapshot.

We have a custom Jest snapshot serializer that does this, but it has to rely on checking for the existence of several theme properties to identify the theme object. This is inefficient and a little bit fragile.

class EVADesignThemeSerializer {
    test(value) {
        if (!value || typeof value !== 'object' || util.types.isProxy(value)) {
            return false;
        }

        return (
            value.hasOwnProperty('color-primary-100') &&
            value.hasOwnProperty('color-primary-transparent-100') &&
            value.hasOwnProperty('color-success-100') &&
            value.hasOwnProperty('color-success-transparent-100') &&
            value.hasOwnProperty('color-info-100') &&
            value.hasOwnProperty('color-warning-100') &&
            value.hasOwnProperty('color-warning-transparent-100') &&
            value.hasOwnProperty('color-danger-100') &&
            value.hasOwnProperty('outline-color')
        );
    }

    print() {
        return '[EVADesignTheme]';
    }
}

see: https://jestjs.io/docs/en/configuration#snapshotserializers-arraystring

Here is how this works for identifying React test elements:

https://github.com/facebook/jest/blob/968a301902796a5082b0119b82a6a996a20e1448/packages/pretty-format/src/plugins/ReactTestComponent.ts#L80

Property 'state' of type '{ [key: string]: MappingType; } | undefined' is not assignable to string index type 'string | number | MappingType'

Issue type

I'm submitting a ... (check one with "x")

• bug report

Issue description

Current behavior:
I'm attempting to use react-native-ui-kitten which uses @eva-design/eva and after I follow the setup instructions from here, my typescript build now fails due to a compilation error in schema.d.ts:

As a workaround, anyone using UI Kitten/Eva-Design with Typescript will have to toggle the skipLibCheck flag to true in their tsconfig.json.

Expected behavior:
Importing @eva-design/eva should not break a tsc build

Steps to reproduce:

1. Initialize a new react native typescript application by running react-native init TempApp --template typescript (assuming you have the react-native cli installed)
2. Follow the react-native-ui-kitten setup instructions from here
3. Run tsc -p ./tsconfig.json to execute the typescript build

Other information:

Package versions

@eva-design/eva: 1.0.0
react: 16.8.3
react-native: 0.59.8
react-native-ui-kitten: 4.0.1

Proposal: Add Theme Types to `useTheme` hook

👋 - Hey there! First off - just wanted to say - love this design system so much! Using it with UI-Kitten is so intuitive and refreshing.

I'd love to see the following feature to make it even better and more developer friendly.

Let me know if this isn't the right place for this issue - I'd be happy to open it wherever is appropriate.

Thanks in advance!

Issue

Currently the theme type from the useTheme hook is Record<string,string>.

While this is technically accurate, there are a lot of theme variables. This is of course amazing! It does - however - make it difficult to know what exists at a glance.

Proposal

As a user of this library - I'd like the ability to utilize TypeScript intellisense to help me identify which variables are available to me without having to consult the UI Kitten theming page.

Examples:

Intellisense

Screen.Recording.2022-11-24.at.9.28.35.AM.mov

On hover - show values

Valuable JSDocs to help the user without having to consult documentation

Potential Solutions

I was able to get a quick and dirty version of this running by using the light.json and dark.json files (here from this repo.

From there it was a union type of Light and Dark - and a subsequent override of the useTheme function itself in a global.d.ts.

Here is a shortened example:

interface DarkTheme {
  "color-primary-100": "#F2F6FF";
  "color-primary-200": "#D9E4FF";
  "color-primary-300": "#A6C1FF";
  "color-primary-400": "#598BFF";
  "color-primary-500": "#3366FF";
  "color-primary-600": "#274BDB";
  "color-primary-700": "#1A34B8";
  "color-primary-800": "#102694";
  "color-primary-900": "#091C7A";
...
}

interface LightTheme {
  "color-primary-100": "#F2F6FF";
  "color-primary-200": "#D9E4FF";
  "color-primary-300": "#A6C1FF";
  "color-primary-400": "#598BFF";
  "color-primary-500": "#3366FF";
  "color-primary-600": "#274BDB";
  "color-primary-700": "#1A34B8";
  "color-primary-800": "#102694";
  "color-primary-900": "#091C7A";
...
}

type AppTheme = LightTheme | DarkTheme;

declare global {
  module "@ui-kitten/components" {
    export * from "@ui-kitten/components"; // 👈🏼 export the same module

    /**
     * @remarks
     *
     * When hovering over the theme - the **left** most value is `Light` and the **right** most value is `Dark`.
     */
    export function useTheme(): AppTheme;
  }
}

---

Personally I think unwrapping the variables like $color-basic-100 could be valuable since most IDE's (especially VSCode) allow for easy Hex to color Visualization inline (if a developer so chooses) - thus furthering the productivity of a developer who is trying to theme their app appropriately.

website scroll feels chooky

Feature Request: Native Web Components Implementation

I am not sure if this is the right place for this or if this is something you would even consider to be as within the scope of the project but I wanted to propose that while we have an Angular implementation of the components that it might also be beneficial to develop a native Web Components implementation that was framework agnostic.

The main benefits as I see it would be:

1. Native Web Components would allow each component to be integrated with any of the main front end frameworks not just Angular thus improving the potential reach and impact of the project.
2. It also allows the use of the components without any kind of framework and could just be used with nothing more than native browser APIs.
3. All the obvious future proofing of the project that would come as a result of points 1 and 2 above.

Eva: ability to have gradients on backgrounds

Proposal
Ability to set a gradient as a background of an element (card, layout, etc)

Reason
User request akveo/nebular#1524 (comment)

Mapping Changes
TBD (changes in themes and in the mappings)

• Design OK
• Mobile OK
• Web OK

Most Eva components doesn't support `textTransform` css property.

textTransform is supported property by react-native. There's no reasons to avoid this property inside eva mapping.

react-native-kitten should be updated too in order to support textTransform property inside mapping.

Tool for automatic generation of mappings and themes.

I was reviewing the code of the design system, and I realized that is a good idea create a tool for generate themes and new mappings automatically.
It could be created a tool that receive a JSON in a specific format and generate a new eva/design theme and then upload this new theme and mapping to a centralized repository, right?

I'm very exited with the UI library for React Native, and I wolud like to help to grow this project! :D

So, tell me if this approach exist in the roadmap of this project or if is possible help with a PR.