chore(styles): add stylesheet with gravity tokens

README.md

@@ -12,10 +12,17 @@ npm install --save-dev @gravity-ui/illustrations
 
 #### Preparation
 
-Define `--gil-color-underlay` css-token in your app:
+Define following css-tokens in your app:
 
 ```scss
---gil-color-underlay: rgba(240, 243, 245, 1);
+--gil-color-object-base: rgb(255, 190, 92);
+--gil-color-object-accent-heavy: rgb(211, 101, 7);
+--gil-color-object-hightlight: rgb(255, 216, 157);
+--gil-color-shadow-over-object: rgb(211, 158, 80);
+--gil-color-background-lines: rgb(140, 140, 140);
+--gil-color-background-shapes: rgb(242, 242, 242);
+--gil-color-object-accent-light: rgb(255, 255, 255);
+--gil-color-object-danger: rgb(255, 0, 61);
 ```
 
 or use mixins in scss:
@@ -34,6 +41,15 @@ or use mixins in scss:
 }
 ```
 
+Alternatively, if you are already have `@gravity-ui/uikit` package installed in your project, you can just import `gravityTheme.scss` to the root file with styles imports in your project:
+
+```scss
+// existing gravity styles definition
+import '@gravity-ui/uikit/styles/styles.css';
+// just add one more import below
+import '@gravity-ui/illustrations/styles/gravityTheme.scss';
+```
+
 #### Usage
 
 ```js

styles/gravityTheme.scss

@@ -0,0 +1,23 @@
+.g-root_theme_light,
+.g-root_theme_light-hc {
+    --gil-color-object-base: var(--g-color-private-yellow-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-orange-650-solid);
+    --gil-color-object-hightlight: var(--g-color-private-yellow-350-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-yellow-650-solid);
+    --gil-color-background-lines: var(--g-color-private-black-450-solid);
+    --gil-color-background-shapes: var(--g-color-private-black-50-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+.g-root_theme_dark,
+.g-root_theme_dark-hc {
+    --gil-color-object-base: var(--g-color-private-yellow-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-orange-650-solid);
+    --gil-color-object-hightlight: var(--g-color-private-yellow-700-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-yellow-500-solid);
+    --gil-color-background-lines: var(--g-color-private-white-550-solid);
+    --gil-color-background-shapes: var(--g-color-private-white-200-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}