sebgroup / green Goto Github PK

View Code? Open in Web Editor NEW

28.0 28.0 39.0 256.32 MB

Green is an open-source design system built by SEB.

Home Page: https://sebgroup.github.io/green/latest/chlorophyll

License: Apache License 2.0

JavaScript 2.20% SCSS 17.96% TypeScript 46.06% HTML 3.25% CSS 0.05% MDX 30.47%

angular lit react storybook

green's Issues

Add responsive grid

Add mixin for spacing

Use t-shirt sizes to define spacing measurements

Add mixin for adding transitions

With support for adding/appending additional transitions

Add storybook for chlorophyll

Test if storybook is a good fit for us when developing and documenting css components and classes

Sensible defaults

The object of the spike is to answer:

Is it possible, feasible and, above all, a good idea, to design the css framework to enable minimal, preferably no, styling required for html.

The purpose of this idea is that implementing Green should be so simple that if you know nothing, you will succeed. Basically the design philosophy behind the component framework for iOS.

Fix green icon for main project so that it works in dark mode (make white->transparent) and resize for looks and glory.

Use output from chlorophyll in storybook

List

The simplest way of listing data in an orderly fashion with labels and associated data.

https://designlibrary.sebgroup.com/components/component-list

Todos:

Markup
Tokens
Story

Setup release pipe with github actions

Tab bar and Tabs

https://designlibrary.sebgroup.com/components/component-tab

Component
Story

Create utility classes for spacing

Fix hosting for Green stories and artifacts

Input group

With support for input with button, input with icon...

Component
Story

Add mixin for sizes

Should work for:

Buttons
Inputs
?

Setup Semantic versioning for chlorophyll

Apply linting rules to PR:s

Button secondary

https://designlibrary.sebgroup.com/components/component-button

Component
Story

Create linting rules for HTML

Create story for spacing

Add storybook to main project

Tab: Add overflow styles for Tabs bar

See behavior description: https://designlibrary.sebank.se/components/component-tab

Continuation of #56

Requires icon library and dropdown component to be in place.

Create structure for scss lib

With support for importing/using classes and mixins globally or picking specific parts ie. like classes for primary button or all badges.

Create lerna based mono repo

Add tokens for depth (z-index)

Eg currently in bootstrap we have:

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown-backdrop:          990 !default; // SEB specific
$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$zindex-popover:                    1060 !default;
$zindex-tooltip:                    1070 !default;