@mirai/ui 1.0.50 → 1.0.51

package/README.md

@@ -85,6 +85,14 @@ const MyComponent = () => (
 );
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-input-background: var(--mirai-ui-base);
+--mirai-ui-input-color: var(--mirai-ui-content);
+--mirai-ui-input-disabled: var(--mirai-ui-content-light);
+```
+
 ### Layer
 
 This primitive returns an element that displays with relative position to other element based on the following props:
@@ -119,6 +127,12 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-layer-content: var(--mirai-ui-layer-XL);
+```
+
 ### Pressable
 
 This primitive returns pressable elements based on the following properties:
@@ -168,6 +182,16 @@ const MyComponent = () => (
   </View>
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-radio-base: var(--mirai-ui-base);
+--mirai-ui-radio-border: var(--mirai-ui-content-light);
+--mirai-ui-radio-checked: var(--mirai-ui-accent);
+--mirai-ui-radio-disabled: var(--mirai-ui-content-border);
+--mirai-ui-radio-size: var(--mirai-ui-space-L);
+```
+
 ### ScrollView
 
 This primitive is used to make vertically scrollable views and receives the following props:
@@ -278,6 +302,26 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-button-background: var(--mirai-ui-accent);
+--mirai-ui-button-busy-width: 0%;
+--mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
+--mirai-ui-button-color: var(--mirai-ui-base);
+--mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
+--mirai-ui-button-color-focus: var(--mirai-ui-content);
+--mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
+--mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
+--mirai-ui-button-font: var(--mirai-ui-font);
+--mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
+--mirai-ui-button-outlined-background: var(--mirai-ui-base);
+--mirai-ui-button-padding-y: var(--mirai-ui-space-S);
+--mirai-ui-button-padding-x: var(--mirai-ui-space-L);
+--mirai-ui-button-radius: var(--mirai-ui-border-radius);
+--mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
+```
+
 ### Calendar
 
 A calendar component that receives the following props:
@@ -326,6 +370,20 @@ const MyComponent = props => {
 }
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
+--mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
+--mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);
+--mirai-ui-calendar-padding: var(--mirai-ui-space-XS);
+--mirai-ui-calendar-range-background: var(--mirai-ui-content-background);
+--mirai-ui-calendar-selected-background: var(--mirai-ui-accent);
+--mirai-ui-calendar-selected-color: var(--mirai-ui-base);
+--mirai-ui-calendar-weekday-color: var(--mirai-ui-content-light);
+--mirai-ui-calendar-week-margin: 2px;
+```
+
 ### InputNumber
 
 Input number component controlling the value with 2 buttons. Receives the following props:
@@ -351,6 +409,12 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-input-number-value-width: var(--mirai-ui-space-XL);
+```
+
 ### InputOption
 
 This component is used to display a radio button or checkbox base on a mandatory string prop `type`. It receives the following props:
@@ -405,6 +469,14 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
+--mirai-ui-input-option-label-margin: var(--mirai-ui-space-S);
+--mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
+```
+
 ### InputText
 
 Text input component receiving the following props:
@@ -441,6 +513,19 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-border);
+--mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
+--mirai-ui-input-text-error: var(--mirai-ui-error);
+--mirai-ui-input-text-focus: var(--mirai-ui-accent);
+--mirai-ui-input-text-icon: var(--mirai-ui-icon);
+--mirai-ui-input-text-padding-x: var(--mirai-ui-space-S);
+--mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
+--mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
+```
+
 ### Menu
 
 This component helps you to create a menu over a determinate component receiving the following props:
@@ -483,6 +568,19 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-menu-base: var(--mirai-ui-base);
+--mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
+--mirai-ui-menu-min-width: 192px;
+--mirai-ui-menu-shadow: var(--mirai-ui-shadow);
+--mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
+--mirai-ui-menu-option-hover-background: var(--mirai-ui-accent);
+--mirai-ui-menu-option-hover-color: var(--mirai-ui-base);
+--mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
+```
+
 ### Modal
 
 A modal component receiving the following props:
@@ -509,6 +607,17 @@ const MyComponent = (props) => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-modal-background: var(--mirai-ui-base);
+--mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
+--mirai-ui-modal-icon: var(--mirai-ui-space-L);
+--mirai-ui-modal-layer: var(--mirai-ui-layer-L);
+--mirai-ui-modal-overflow: rgba(0, 0, 0, 0.15);
+--mirai-ui-modal-shadow: var(--mirai-ui-shadow);
+```
+
 ### Tooltip
 
 This component helps you to create a tooltip over a determinate component receiving the following props:
@@ -530,6 +639,16 @@ const MyComponent = () => {
 };
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
+--mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
+--mirai-ui-tooltip-color: var(--mirai-ui-base);
+--mirai-ui-tooltip-space: var(--mirai-ui-space-XS);
+--mirai-ui-tooltip-max-width: calc(var(--mirai-ui-space-XXL) * 4);
+```
+
 ## Theme
 
 Styles can be customised by using Theme utility.
@@ -579,6 +698,86 @@ Theme.shadeColors()
    ACCENT:200 #edffff
 ```
 
+### List of Theming variables
+
+```css
+/* typography */
+--mirai-ui-font: Arial, Regular;
+--mirai-ui-input-font: Arial, Regular;
+--mirai-ui-font-weight: 400;
+--mirai-ui-font-bold: Arial, Regular;
+--mirai-ui-font-bold-weight: 700;
+--mirai-ui-font-size-headline: 18px;
+--mirai-ui-font-size-subheadline: 16px;
+--mirai-ui-font-size-paragraph: 14px;
+--mirai-ui-font-size-action: 14px;
+--mirai-ui-font-size-small: 12px;
+--mirai-ui-line-height: 24px;
+--mirai-ui-text-direction: ltr;
+--mirai-ui-text-align: left;
+
+/* palette */
+--mirai-ui-base: #ffffff;
+/* !TODO: Change to -text ------------------------------------------------- */
+--mirai-ui-content: #484848;
+--mirai-ui-content-background: #f6f6f6;
+--mirai-ui-content-border: #e4e4e4;
+--mirai-ui-content-dark: #202020;
+--mirai-ui-content-light: #999999;
+/* !TODO ------------------------------------------------------------------ */
+
+--mirai-ui-accent: #3978c5;
+--mirai-ui-accent-background: #e9f1fc;
+--mirai-ui-accent-border: #b0c9e8;
+--mirai-ui-accent-dark: #224876;
+--mirai-ui-accent-light: #88aedc;
+
+--mirai-ui-error: #d14343;
+--mirai-ui-error-background: #fdf4f4;
+--mirai-ui-error-border: #f4b6b6;
+--mirai-ui-error-dark: #7d2828;
+--mirai-ui-error-light: #ee9191;
+
+--mirai-ui-success: #52bd94;
+--mirai-ui-success-background: #f5fbf8;
+--mirai-ui-success-border: #dcf2ea;
+--mirai-ui-success-dark: #317159;
+--mirai-ui-success-light: #a3e6cd;
+
+--mirai-ui-warning: #ffb020;
+--mirai-ui-warning-background: #fffaf1;
+--mirai-ui-warning-border: #ffdfa6;
+--mirai-ui-warning-dark: #66460d;
+--mirai-ui-warning-light: #ffd079;
+
+/* spacing */
+--mirai-ui-space-XS: 8px;
+--mirai-ui-space-S: 12px;
+--mirai-ui-space-M: 16px;
+--mirai-ui-space-L: 24px;
+--mirai-ui-space-XL: 48px;
+--mirai-ui-space-XXL: 64px;
+
+/* layer */
+--mirai-ui-layer-S: 0;
+--mirai-ui-layer-M: 1;
+--mirai-ui-layer-L: 10;
+--mirai-ui-layer-XL: 100;
+
+/* motion */
+--mirai-ui-motion-collapse: 200ms;
+--mirai-ui-motion-expand: 300ms;
+--mirai-ui-motion-easing: cubic-bezier(0.1, 0.1, 0.25, 0.9);
+
+/* input */
+--mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
+--mirai-ui-input-min-height: var(--mirai-ui-space-XL);
+
+/* defaults */
+--mirai-ui-border-radius: 4px;
+--mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
+```
+
 ## Hooks
 
 a repository of hooks which will help you create simpler solutions.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",