@mirai/ui 1.0.20 → 1.0.21

package/build/components/Button/Button.module.css

@@ -3,12 +3,15 @@
   --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-300);
-  --mirai-ui-button-disabled-color: var(--mirai-ui-content-400);
+  --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-x: var(--mirai-ui-space-S);
-  --mirai-ui-button-padding-y: var(--mirai-ui-space-L);
+  --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);
 }
 
 .button {
@@ -17,11 +20,11 @@
   border-radius: var(--mirai-ui-button-radius);
   color: var(--mirai-ui-button-color);
   display: flex;
-  font-family: var(--mirai-ui-font);
+  font-family: var(--mirai-ui-button-font);
   font-size: var(--mirai-ui-font-size-action);
-  font-weight: var(--mirai-ui-font-bold-weight);
+  font-weight: var(--mirai-ui-button-font-weight);
   justify-content: center;
-  padding: var(--mirai-ui-button-padding-x) var(--mirai-ui-button-padding-y);
+  padding: var(--mirai-ui-button-padding-y) var(--mirai-ui-button-padding-x);
   transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
@@ -34,8 +37,8 @@
 }
 
 .outlined {
-  border: solid 1px var(--mirai-ui-button-background);
   background-color: var(--mirai-ui-button-outlined-background);
+  border: solid 1px var(--mirai-ui-button-background);
   color: var(--mirai-ui-button-background);
 }
 
@@ -45,11 +48,13 @@
 
 .large:not(.squared) {
   font-size: var(--mirai-ui-font-size-headline);
+  padding: var(--mirai-ui-button-padding-y)
+    calc(var(--mirai-ui-button-padding-x) + calc(var(--mirai-ui-button-padding-y) / 2));
 }
 
 .small:not(.squared) {
   font-size: var(--mirai-ui-font-size-small);
-  padding: calc(var(--mirai-ui-button-padding-x) / 2) calc(var(--mirai-ui-button-padding-y) / 2);
+  padding: var(--mirai-ui-button-padding-y) calc(var(--mirai-ui-button-padding-x) / 2);
 }
 
 .rounded {
@@ -57,22 +62,10 @@
 }
 
 .squared {
+  height: var(--mirai-ui-button-squared);
   padding: 0;
-  height: var(--mirai-ui-space-XL);
-  min-width: var(--mirai-ui-space-XL);
-  width: var(--mirai-ui-space-XL);
-}
-
-.squared.small {
-  height: var(--mirai-ui-space-L);
-  min-width: var(--mirai-ui-space-L);
-  width: var(--mirai-ui-space-L);
-}
-
-.squared.large {
-  height: var(--mirai-ui-space-XXL);
-  min-width: var(--mirai-ui-space-XXL);
-  width: var(--mirai-ui-space-XXL);
+  min-width: var(--mirai-ui-button-squared);
+  width: var(--mirai-ui-button-squared);
 }
 
 @media only screen and (max-width: 600px) {

package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap

@@ -1,15 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button squared"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
 exports[`component:<Button> inherit:className 1`] = `
 <DocumentFragment>
   <button
@@ -61,20 +51,10 @@ exports[`component:<Button> prop:small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Button> prop:squared & large 1`] = `
+exports[`component:<Button> prop:squared 1`] = `
 <DocumentFragment>
   <button
-    class="pressable button large squared"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:squared & small 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button small squared"
+    class="pressable button squared"
   >
     children
   </button>

package/build/components/Calendar/Calendar.module.css

@@ -1,11 +1,11 @@
 :root {
-  --mirai-ui-calendar-cell: calc(var(--mirai-ui-space-XL) + var(--mirai-ui-space-S));
+  --mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
   --mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);
   --mirai-ui-calendar-week-margin: 2px;
-  --mirai-ui-calendar-hover-background: var(--mirai-ui-accent-300);
+  --mirai-ui-calendar-hover-background: var(--mirai-ui-accent-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-400);
+  --mirai-ui-calendar-weekday-color: var(--mirai-ui-content-light);
 }
 
 .scrollview {
@@ -66,7 +66,7 @@
 }
 
 .textDisabled {
-  color: var(--mirai-ui-content-300);
+  color: var(--mirai-ui-content-border);
 }
 
 .textHighlight {
@@ -86,7 +86,7 @@
 }
 
 .caption.empty {
-  color: var(--mirai-ui-content-300);
+  color: var(--mirai-ui-content-border);
 }
 
 @media only screen and (max-width: 600px) {
@@ -104,7 +104,7 @@
   }
 
   .weekdays {
-    border-bottom: solid 1px var(--mirai-ui-content-300);
+    border-bottom: solid 1px var(--mirai-ui-content-border);
   }
 }
 

package/build/components/InputNumber/InputNumber.js

@@ -36,7 +36,7 @@ var InputNumber = function InputNumber(_ref) {
       min = _ref$min === void 0 ? 0 : _ref$min,
       name = _ref.name,
       _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      rounded = _ref$rounded === void 0 ? true : _ref$rounded,
       _ref$step = _ref.step,
       step = _ref$step === void 0 ? 1 : _ref$step,
       _ref$value = _ref.value,
@@ -51,6 +51,7 @@ var InputNumber = function InputNumber(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: _InputNumberModule.default.texts
   }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    subheadline: true,
     className: disabled && _InputNumberModule.default.disabled
   }, label), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
@@ -67,6 +68,7 @@ var InputNumber = function InputNumber(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: "Minus"
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    headline: true,
     className: _InputNumberModule.default.value
   }, typeof value === 'number' ? value : min), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     disabled: disabled || value >= max,

package/build/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","rounded","step","value","onChange","others","style","inputNumber","className","texts","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  rounded = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Text className={disabled && style.disabled}>{label}</Text>}\n      {hint && (\n        <Text small className={styles(style.hint, disabled && style.disabled)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text className={style.value}>{typeof value === 'number' ? value : min}</Text>\n    <Button\n      disabled={disabled || value >= max}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  rounded: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,QADyB,QACzBA,QADyB;EAAA,IAEzBC,IAFyB,QAEzBA,IAFyB;EAAA,IAGzBC,KAHyB,QAGzBA,KAHyB;EAAA,IAIzBC,GAJyB,QAIzBA,GAJyB;EAAA,oBAKzBC,GALyB;EAAA,IAKzBA,GALyB,yBAKnB,CALmB;EAAA,IAMzBC,IANyB,QAMzBA,IANyB;EAAA,wBAOzBC,OAPyB;EAAA,IAOzBA,OAPyB,6BAOf,KAPe;EAAA,qBAQzBC,IARyB;EAAA,IAQzBA,IARyB,0BAQlB,CARkB;EAAA,sBASzBC,KATyB;EAAA,IASzBA,KATyB,2BASjB,CATiB;EAAA,yBAUzBC,QAVyB;EAAA,IAUzBA,QAVyB,8BAUd,YAAM,CAAE,CAVM;EAAA,IAWtBC,MAXsB;;EAAA,oBAazB,6BAAC,gBAAD,eAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGZ,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAEF,QAAQ,IAAIW,2BAAMX;EAAnC,GAA8CE,KAA9C,CADZ,EAEGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOU,2BAAMV,IAAb,EAAmBD,QAAQ,IAAIW,2BAAMX,QAArC;EAAvB,GACGC,IADH,CAHJ,CADF,eASE,6BAAC,cAAD;IACE,QAAQ,EAAED,QAAQ,IAAIQ,KAAK,IAAIJ,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEE,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CATF,eAmBE,6BAAC,gBAAD;IAAM,SAAS,EAAEM,2BAAMH;EAAvB,GAA+B,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCJ,GAAnE,CAnBF,eAoBE,6BAAC,cAAD;IACE,QAAQ,EAAEJ,QAAQ,IAAIQ,KAAK,IAAIL,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEG,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CApBF,CAbyB;AAAA,CAApB;;;AA8CPN,WAAW,CAACgB,SAAZ,GAAwB;EACtBf,QAAQ,EAAEgB,mBAAUC,IADE;EAEtBhB,IAAI,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,KAA7B,CAApB,CAFgB;EAGtBlB,KAAK,EAAEc,mBAAUG,MAHK;EAItBhB,GAAG,EAAEa,mBAAUK,MAJO;EAKtBjB,GAAG,EAAEY,mBAAUK,MALO;EAMtBhB,IAAI,EAAEW,mBAAUG,MAAV,CAAiBG,UAND;EAOtBhB,OAAO,EAAEU,mBAAUC,IAPG;EAQtBV,IAAI,EAAES,mBAAUK,MARM;EAStBb,KAAK,EAAEQ,mBAAUK,MATK;EAUtBZ,QAAQ,EAAEO,mBAAUO;AAVE,CAAxB"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","rounded","step","value","onChange","others","style","inputNumber","className","texts","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  rounded = true,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && (\n        <Text subheadline className={disabled && style.disabled}>\n          {label}\n        </Text>\n      )}\n      {hint && (\n        <Text small className={styles(style.hint, disabled && style.disabled)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text headline className={style.value}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      outlined\n      preventDefault\n      rounded={rounded}\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  rounded: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,QADyB,QACzBA,QADyB;EAAA,IAEzBC,IAFyB,QAEzBA,IAFyB;EAAA,IAGzBC,KAHyB,QAGzBA,KAHyB;EAAA,IAIzBC,GAJyB,QAIzBA,GAJyB;EAAA,oBAKzBC,GALyB;EAAA,IAKzBA,GALyB,yBAKnB,CALmB;EAAA,IAMzBC,IANyB,QAMzBA,IANyB;EAAA,wBAOzBC,OAPyB;EAAA,IAOzBA,OAPyB,6BAOf,IAPe;EAAA,qBAQzBC,IARyB;EAAA,IAQzBA,IARyB,0BAQlB,CARkB;EAAA,sBASzBC,KATyB;EAAA,IASzBA,KATyB,2BASjB,CATiB;EAAA,yBAUzBC,QAVyB;EAAA,IAUzBA,QAVyB,8BAUd,YAAM,CAAE,CAVM;EAAA,IAWtBC,MAXsB;;EAAA,oBAazB,6BAAC,gBAAD,eAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGZ,KAAK,iBACJ,6BAAC,gBAAD;IAAM,WAAW,MAAjB;IAAkB,SAAS,EAAEF,QAAQ,IAAIW,2BAAMX;EAA/C,GACGE,KADH,CAFJ,EAMGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOU,2BAAMV,IAAb,EAAmBD,QAAQ,IAAIW,2BAAMX,QAArC;EAAvB,GACGC,IADH,CAPJ,CADF,eAaE,6BAAC,cAAD;IACE,QAAQ,EAAED,QAAQ,IAAIQ,KAAK,IAAIJ,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEE,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CAbF,eAuBE,6BAAC,gBAAD;IAAM,QAAQ,MAAd;IAAe,SAAS,EAAEM,2BAAMH;EAAhC,GACG,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCJ,GADvC,CAvBF,eA0BE,6BAAC,cAAD;IACE,QAAQ,EAAEJ,QAAQ,IAAIQ,KAAK,IAAIL,GADjC;IAEE,QAAQ,MAFV;IAGE,cAAc,MAHhB;IAIE,OAAO,EAAEG,OAJX;IAKE,OAAO,MALT;IAME,OAAO,EAAE;MAAA,OAAMG,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeF,IAAf,CAAd;IAAA;EANX,gBAQE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EARF,CA1BF,CAbyB;AAAA,CAApB;;;AAoDPN,WAAW,CAACgB,SAAZ,GAAwB;EACtBf,QAAQ,EAAEgB,mBAAUC,IADE;EAEtBhB,IAAI,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,KAA7B,CAApB,CAFgB;EAGtBlB,KAAK,EAAEc,mBAAUG,MAHK;EAItBhB,GAAG,EAAEa,mBAAUK,MAJO;EAKtBjB,GAAG,EAAEY,mBAAUK,MALO;EAMtBhB,IAAI,EAAEW,mBAAUG,MAAV,CAAiBG,UAND;EAOtBhB,OAAO,EAAEU,mBAAUC,IAPG;EAQtBV,IAAI,EAAES,mBAAUK,MARM;EAStBb,KAAK,EAAEQ,mBAAUK,MATK;EAUtBZ,QAAQ,EAAEO,mBAAUO;AAVE,CAAxB"}

package/build/components/InputNumber/InputNumber.module.css

@@ -1,5 +1,5 @@
 :root {
-  --mirai-ui-input-number-value-width: var(--mirai-ui-space-XXL);
+  --mirai-ui-input-number-value-width: var(--mirai-ui-space-XL);
 }
 
 .inputNumber {
@@ -17,7 +17,7 @@
 }
 
 .hint {
-  color: var(--mirai-ui-input-disabled);
+  color: var(--mirai-ui-content-light);
 }
 
 .disabled {

package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap

@@ -9,7 +9,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -36,12 +36,12 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -85,7 +85,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -112,12 +112,12 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -168,7 +168,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </div>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -195,12 +195,12 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -244,13 +244,13 @@ exports[`component:<InputNumber> prop:label 1`] = `
       class="view texts"
     >
       <span
-        class="text paragraph"
+        class="text subheadline"
       >
         label
       </span>
     </div>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -277,12 +277,12 @@ exports[`component:<InputNumber> prop:label 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -326,7 +326,7 @@ exports[`component:<InputNumber> prop:max 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -352,12 +352,12 @@ exports[`component:<InputNumber> prop:max 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -402,7 +402,7 @@ exports[`component:<InputNumber> prop:min 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -429,12 +429,12 @@ exports[`component:<InputNumber> prop:min 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -504,7 +504,7 @@ exports[`component:<InputNumber> prop:rounded 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
@@ -553,7 +553,7 @@ exports[`component:<InputNumber> prop:value 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -579,12 +579,12 @@ exports[`component:<InputNumber> prop:value 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       10
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -628,7 +628,7 @@ exports[`component:<InputNumber> renders 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -655,12 +655,12 @@ exports[`component:<InputNumber> renders 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"
@@ -705,7 +705,7 @@ exports[`component:<InputNumber> testID 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button squared"
+      class="pressable button rounded squared"
       disabled=""
     >
       <span
@@ -732,12 +732,12 @@ exports[`component:<InputNumber> testID 1`] = `
       </span>
     </button>
     <span
-      class="text paragraph value"
+      class="text headline value"
     >
       0
     </span>
     <button
-      class="pressable button squared outlined"
+      class="pressable button rounded squared outlined"
     >
       <span
         class="icon"

package/build/components/InputOption/InputOption.module.css

@@ -1,5 +1,5 @@
 :root {
-  --mirai-ui-input-option-disabled: var(--mirai-ui-content-300);
+  --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);
 }

package/build/components/InputText/InputText.module.css

@@ -1,10 +1,10 @@
 :root {
-  --mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-400);
+  --mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-border);
   --mirai-ui-input-text-focus: var(--mirai-ui-accent);
   --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);
-  --mirai-ui-input-text-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
   --mirai-ui-input-text-error: var(--mirai-ui-error);
 }
 
@@ -79,7 +79,7 @@
   padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
   pointer-events: none;
   position: absolute;
-  top: var(--mirai-ui-input-text-padding-y);
+  top: calc(var(--mirai-ui-input-text-padding-y) / 1.3);
   transition: font-size var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   z-index: 1;
@@ -87,7 +87,7 @@
 
 .label.value {
   font-size: var(--mirai-ui-font-size-small);
-  top: calc(calc(var(--mirai-ui-input-text-padding-y) * -1) + calc(var(--mirai-ui-input-text-padding-y) / 2));
+  top: calc(var(--mirai-ui-input-text-padding-y) * -1);
 }
 
 .text {

package/build/components/Notification/Notification.js

@@ -41,12 +41,12 @@ var Notification = function Notification(_ref) {
     name: error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info',
     className: _NotificationModule.default.icon
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: _NotificationModule.default.text
+    className: (0, _helpers.styles)(_NotificationModule.default.text, error ? _NotificationModule.default.error : warning ? _NotificationModule.default.warning : success ? _NotificationModule.default.success : undefined)
   }, title && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     bold: true,
-    small: true
+    action: true
   }, "Title"), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    small: true
+    action: true
   }, children)), onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     className: _NotificationModule.default.pressable,
     onPress: onClose

package/build/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","names":["Notification","children","error","success","title","warning","onClose","others","style","notification","undefined","className","icon","text","pressable","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, success, title, warning, onClose, ...others }) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      others.className,\n    )}\n  >\n    <Icon name={error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info'} className={style.icon} />\n    <View className={style.text}>\n      {title && (\n        <Text bold small>\n          Title\n        </Text>\n      )}\n      <Text small>{children}</Text>\n    </View>\n    {onClose && (\n      <Pressable className={style.pressable} onPress={onClose}>\n        <Icon name=\"Close\" className={style.icon} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.string.isRequired,\n  error: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,KAAb,QAAaA,KAAb;EAAA,IAAoBC,OAApB,QAAoBA,OAApB;EAAA,IAA6BC,KAA7B,QAA6BA,KAA7B;EAAA,IAAoCC,OAApC,QAAoCA,OAApC;EAAA,IAA6CC,OAA7C,QAA6CA,OAA7C;EAAA,IAAyDC,MAAzD;;EAAA,oBACnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETP,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE,EAGTH,MAAM,CAACI,SAHE;EAHb,iBASE,6BAAC,gBAAD;IAAM,IAAI,EAAET,KAAK,GAAG,OAAH,GAAaG,OAAO,GAAG,SAAH,GAAeF,OAAO,GAAG,SAAH,GAAe,MAA1E;IAAkF,SAAS,EAAEK,4BAAMI;EAAnG,EATF,eAUE,6BAAC,gBAAD;IAAM,SAAS,EAAEJ,4BAAMK;EAAvB,GACGT,KAAK,iBACJ,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,KAAK;EAAhB,WAFJ,eAME,6BAAC,gBAAD;IAAM,KAAK;EAAX,GAAaH,QAAb,CANF,CAVF,EAkBGK,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEE,4BAAMM,SAA5B;IAAuC,OAAO,EAAER;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAEE,4BAAMI;EAApC,EADF,CAnBJ,CADmB;AAAA,CAArB;;;AA2BAZ,YAAY,CAACe,WAAb,GAA2B,wBAA3B;AAEAf,YAAY,CAACgB,SAAb,GAAyB;EACvBf,QAAQ,EAAEgB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBjB,KAAK,EAAEe,mBAAUG,IAFM;EAGvBjB,OAAO,EAAEc,mBAAUG,IAHI;EAIvBhB,KAAK,EAAEa,mBAAUC,MAJM;EAKvBb,OAAO,EAAEY,mBAAUG,IALI;EAMvBd,OAAO,EAAEW,mBAAUI;AANI,CAAzB"}
+{"version":3,"file":"Notification.js","names":["Notification","children","error","success","title","warning","onClose","others","style","notification","undefined","className","icon","text","pressable","displayName","propTypes","PropTypes","string","isRequired","bool","func"],"sources":["../../../src/components/Notification/Notification.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Notification.module.css';\n\nconst Notification = ({ children, error, success, title, warning, onClose, ...others }) => (\n  <View\n    {...others}\n    row\n    className={styles(\n      style.notification,\n      error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      others.className,\n    )}\n  >\n    <Icon name={error ? 'Error' : warning ? 'Warning' : success ? 'Success' : 'Info'} className={style.icon} />\n    <View\n      className={styles(\n        style.text,\n        error ? style.error : warning ? style.warning : success ? style.success : undefined,\n      )}\n    >\n      {title && (\n        <Text bold action>\n          Title\n        </Text>\n      )}\n      <Text action>{children}</Text>\n    </View>\n    {onClose && (\n      <Pressable className={style.pressable} onPress={onClose}>\n        <Icon name=\"Close\" className={style.icon} />\n      </Pressable>\n    )}\n  </View>\n);\n\nNotification.displayName = 'Component:Notification';\n\nNotification.propTypes = {\n  children: PropTypes.string.isRequired,\n  error: PropTypes.bool,\n  success: PropTypes.bool,\n  title: PropTypes.string,\n  warning: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Notification };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,KAAb,QAAaA,KAAb;EAAA,IAAoBC,OAApB,QAAoBA,OAApB;EAAA,IAA6BC,KAA7B,QAA6BA,KAA7B;EAAA,IAAoCC,OAApC,QAAoCA,OAApC;EAAA,IAA6CC,OAA7C,QAA6CA,OAA7C;EAAA,IAAyDC,MAAzD;;EAAA,oBACnB,6BAAC,gBAAD,eACMA,MADN;IAEE,GAAG,MAFL;IAGE,SAAS,EAAE,qBACTC,4BAAMC,YADG,EAETP,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE,EAGTH,MAAM,CAACI,SAHE;EAHb,iBASE,6BAAC,gBAAD;IAAM,IAAI,EAAET,KAAK,GAAG,OAAH,GAAaG,OAAO,GAAG,SAAH,GAAeF,OAAO,GAAG,SAAH,GAAe,MAA1E;IAAkF,SAAS,EAAEK,4BAAMI;EAAnG,EATF,eAUE,6BAAC,gBAAD;IACE,SAAS,EAAE,qBACTJ,4BAAMK,IADG,EAETX,KAAK,GAAGM,4BAAMN,KAAT,GAAiBG,OAAO,GAAGG,4BAAMH,OAAT,GAAmBF,OAAO,GAAGK,4BAAML,OAAT,GAAmBO,SAFjE;EADb,GAMGN,KAAK,iBACJ,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,MAAM;EAAjB,WAPJ,eAWE,6BAAC,gBAAD;IAAM,MAAM;EAAZ,GAAcH,QAAd,CAXF,CAVF,EAuBGK,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEE,4BAAMM,SAA5B;IAAuC,OAAO,EAAER;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAEE,4BAAMI;EAApC,EADF,CAxBJ,CADmB;AAAA,CAArB;;;AAgCAZ,YAAY,CAACe,WAAb,GAA2B,wBAA3B;AAEAf,YAAY,CAACgB,SAAb,GAAyB;EACvBf,QAAQ,EAAEgB,mBAAUC,MAAV,CAAiBC,UADJ;EAEvBjB,KAAK,EAAEe,mBAAUG,IAFM;EAGvBjB,OAAO,EAAEc,mBAAUG,IAHI;EAIvBhB,KAAK,EAAEa,mBAAUC,MAJM;EAKvBb,OAAO,EAAEY,mBAAUG,IALI;EAMvBd,OAAO,EAAEW,mBAAUI;AANI,CAAzB"}

package/build/components/Notification/Notification.module.css

@@ -1,54 +1,46 @@
 :root {
   --mirai-ui-notification-border-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-notification-padding: var(--mirai-ui-space-XS);
+  --mirai-ui-notification-padding: var(--mirai-ui-space-S);
   --mirai-ui-notification-icon: var(--mirai-ui-font-size-headline);
-  /* colors */
-  --mirai-ui-notification-error: var(--mirai-ui-error-300);
-  --mirai-ui-notification-error-color: var(--mirai-ui-error);
-  --mirai-ui-notification-default: var(--mirai-ui-accent-200);
-  --mirai-ui-notification-default-color: var(--mirai-ui-accent);
-  --mirai-ui-notification-success: var(--mirai-ui-success-300);
-  --mirai-ui-notification-success-color: var(--mirai-ui-success);
-  --mirai-ui-notification-warning: var(--mirai-ui-warning-300);
-  --mirai-ui-notification-warning-color: var(--mirai-ui-warning);
 }
 
 .notification {
-  background-color: var(--mirai-ui-notification-default);
+  align-items: flex-start;
+  background-color: var(--mirai-ui-accent-background);
   border-radius: var(--mirai-ui-notification-border-radius);
   padding: var(--mirai-ui-notification-padding);
-  border: solid 1px var(--mirai-ui-notification-default-color);
+  border: solid 1px var(--mirai-ui-accent-border);
 }
 
 .notification * {
-  color: var(--mirai-ui-notification-default-color);
+  color: var(--mirai-ui-accent);
 }
 
 .notification.success {
-  background-color: var(--mirai-ui-notification-success);
-  border-color: var(--mirai-ui-notification-success-color);
+  background-color: var(--mirai-ui-success-background);
+  border-color: var(--mirai-ui-success-border);
 }
 
 .notification.success * {
-  color: var(--mirai-ui-notification-success-color);
+  color: var(--mirai-ui-success);
 }
 
 .notification.error {
-  background-color: var(--mirai-ui-notification-error);
-  border-color: var(--mirai-ui-notification-error-color);
+  background-color: var(--mirai-ui-error-background);
+  border-color: var(--mirai-ui-error-border);
 }
 
 .notification.error * {
-  color: var(--mirai-ui-notification-error-color);
+  color: var(--mirai-ui-error);
 }
 
 .notification.warning {
-  background-color: var(--mirai-ui-notification-warning);
-  border-color: var(--mirai-ui-notification-warning-color);
+  background-color: var(--mirai-ui-warning-background);
+  border-color: var(--mirai-ui-warning-border);
 }
 
 .notification.warning * {
-  color: var(--mirai-ui-notification-warning-color);
+  color: var(--mirai-ui-warning);
 }
 
 .icon {
@@ -63,3 +55,19 @@
   padding-left: var(--mirai-ui-notification-padding);
   padding-right: var(--mirai-ui-notification-padding);
 }
+
+.text * {
+  color: var(--mirai-ui-accent-dark);
+}
+
+.text.error * {
+  color: var(--mirai-ui-error-dark);
+}
+
+.text.success * {
+  color: var(--mirai-ui-success-dark);
+}
+
+.text.warning * {
+  color: var(--mirai-ui-warning-dark);
+}

package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap

@@ -30,7 +30,7 @@ exports[`component:<Notification> inherit:className 1`] = `
       class="view text"
     >
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>
@@ -66,10 +66,10 @@ exports[`component:<Notification> prop:error 1`] = `
       </svg>
     </span>
     <div
-      class="view text"
+      class="view text error"
     >
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>
@@ -108,7 +108,7 @@ exports[`component:<Notification> prop:onClose 1`] = `
       class="view text"
     >
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>
@@ -176,10 +176,10 @@ exports[`component:<Notification> prop:success 1`] = `
       </svg>
     </span>
     <div
-      class="view text"
+      class="view text success"
     >
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>
@@ -218,12 +218,12 @@ exports[`component:<Notification> prop:title 1`] = `
       class="view text"
     >
       <span
-        class="text bold small"
+        class="text bold action"
       >
         Title
       </span>
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>
@@ -259,10 +259,10 @@ exports[`component:<Notification> prop:warning 1`] = `
       </svg>
     </span>
     <div
-      class="view text"
+      class="view text warning"
     >
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>
@@ -301,7 +301,7 @@ exports[`component:<Notification> renders 1`] = `
       class="view text"
     >
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>
@@ -341,7 +341,7 @@ exports[`component:<Notification> testID 1`] = `
       class="view text"
     >
       <span
-        class="text small"
+        class="text action"
       >
         Lorem Ipsum...
       </span>

package/build/components/Table/Table.module.css

@@ -1,12 +1,12 @@
 :root {
   --mirai-ui-table-base: var(--mirai-ui-base);
-  --mirai-ui-table-border-color: var(--mirai-ui-content-300);
+  --mirai-ui-table-border-color: var(--mirai-ui-content-border);
   --mirai-ui-table-content: var(--mirai-ui-content);
-  --mirai-ui-table-hover-background: var(--mirai-ui-accent-300);
-  --mirai-ui-table-head-color: var(--mirai-ui-content-400);
+  --mirai-ui-table-hover-background: var(--mirai-ui-accent-background);
+  --mirai-ui-table-head-color: var(--mirai-ui-content-light);
   --mirai-ui-table-padding-x: var(--mirai-ui-space-M);
   --mirai-ui-table-padding-y: var(--mirai-ui-space-M);
-  --mirai-ui-table-selected-background: var(--mirai-ui-accent-200);
+  --mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
   --mirai-ui-table-selected-color: var(--mirai-ui-accent);
 }
 

package/build/primitives/Checkbox/Checkbox.module.css

@@ -1,9 +1,9 @@
 :root {
   --mirai-ui-checkbox-base: var(--mirai-ui-base);
-  --mirai-ui-checkbox-border-color: var(--mirai-ui-content-400);
+  --mirai-ui-checkbox-border-color: var(--mirai-ui-content-light);
   --mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
   --mirai-ui-checkbox-checked: var(--mirai-ui-accent);
-  --mirai-ui-checkbox-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
   --mirai-ui-checkbox-size: var(--mirai-ui-space-L);
 }
 

package/build/primitives/Input/Input.module.css

@@ -1,7 +1,7 @@
 :root {
   --mirai-ui-input-background: var(--mirai-ui-base);
   --mirai-ui-input-color: var(--mirai-ui-content);
-  --mirai-ui-input-disabled: var(--mirai-ui-content-400);
+  --mirai-ui-input-disabled: var(--mirai-ui-content-light);
 }
 
 .input {

package/build/primitives/Radio/Radio.module.css

@@ -1,8 +1,8 @@
 :root {
   --mirai-ui-radio-base: var(--mirai-ui-base);
-  --mirai-ui-radio-border: var(--mirai-ui-content-400);
+  --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-300);
+  --mirai-ui-radio-disabled: var(--mirai-ui-content-border);
   --mirai-ui-radio-size: var(--mirai-ui-space-L);
 }
 

package/build/primitives/Switch/Switch.module.css

@@ -1,10 +1,10 @@
 :root {
   --mirai-ui-switch-base: var(--mirai-ui-base);
-  --mirai-ui-switch-border-color: var(--mirai-ui-content-400);
+  --mirai-ui-switch-border-color: var(--mirai-ui-content-light);
   --mirai-ui-switch-border-size: calc(var(--mirai-ui-space-XS) / 4);
   --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
   --mirai-ui-switch-checked: var(--mirai-ui-accent);
-  --mirai-ui-switch-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-switch-disabled: var(--mirai-ui-content-border);
   --mirai-ui-switch-size: var(--mirai-ui-space-L);
 }
 

package/build/primitives/Text/Text.js

@@ -13,7 +13,7 @@ var _helpers = require("../../helpers");
 
 var _TextModule = _interopRequireDefault(require("./Text.module.css"));
 
-var _excluded = ["action", "bold", "children", "headline", "small", "tag", "upperCase"];
+var _excluded = ["action", "bold", "children", "headline", "small", "subheadline", "tag", "upperCase"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,13 +33,14 @@ var Text = function Text(_ref) {
       children = _ref.children,
       headline = _ref.headline,
       small = _ref.small,
+      subheadline = _ref.subheadline,
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'span' : _ref$tag,
       upperCase = _ref.upperCase,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(tag, _objectSpread(_objectSpread({}, others), {}, {
-    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, headline ? _TextModule.default.headline : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, upperCase && _TextModule.default.upperCase, others.className)
+    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, headline ? _TextModule.default.headline : subheadline ? _TextModule.default.subheadline : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, upperCase && _TextModule.default.upperCase, others.className)
   }), children);
 };
 
@@ -50,8 +51,9 @@ Text.propTypes = {
   bold: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
   headline: _propTypes.default.bool,
-  upperCase: _propTypes.default.bool,
   small: _propTypes.default.bool,
-  tag: _propTypes.default.string
+  subheadline: _propTypes.default.bool,
+  tag: _propTypes.default.string,
+  upperCase: _propTypes.default.bool
 };
 //# sourceMappingURL=Text.js.map

package/build/primitives/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","action","bold","children","headline","small","tag","upperCase","others","React","createElement","className","style","text","paragraph","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Text.module.css';\n\nconst Text = ({ action, bold, children, headline, small, tag = 'span', upperCase, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        headline ? style.headline : action ? style.action : small ? style.small : style.paragraph,\n        upperCase && style.upperCase,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,IAAX,QAAWA,IAAX;EAAA,IAAiBC,QAAjB,QAAiBA,QAAjB;EAAA,IAA2BC,QAA3B,QAA2BA,QAA3B;EAAA,IAAqCC,KAArC,QAAqCA,KAArC;EAAA,oBAA4CC,GAA5C;EAAA,IAA4CA,GAA5C,yBAAkD,MAAlD;EAAA,IAA0DC,SAA1D,QAA0DA,SAA1D;EAAA,IAAwEC,MAAxE;;EAAA,oBACXC,eAAMC,aAAN,CACEJ,GADF,kCAGOE,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETX,IAAI,IAAIU,oBAAMV,IAFL,EAGTE,QAAQ,GAAGQ,oBAAMR,QAAT,GAAoBH,MAAM,GAAGW,oBAAMX,MAAT,GAAkBI,KAAK,GAAGO,oBAAMP,KAAT,GAAiBO,oBAAME,SAHvE,EAITP,SAAS,IAAIK,oBAAML,SAJV,EAKTC,MAAM,CAACG,SALE;EAJf,IAYER,QAZF,CADW;AAAA,CAAb;;;AAgBAH,IAAI,CAACe,WAAL,GAAmB,gBAAnB;AAEAf,IAAI,CAACgB,SAAL,GAAiB;EACff,MAAM,EAAEgB,mBAAUC,IADH;EAEfhB,IAAI,EAAEe,mBAAUC,IAFD;EAGff,QAAQ,EAAEc,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,MAA7B,EAAqCJ,mBAAUK,KAA/C,CAApB,CAHK;EAIflB,QAAQ,EAAEa,mBAAUC,IAJL;EAKfX,SAAS,EAAEU,mBAAUC,IALN;EAMfb,KAAK,EAAEY,mBAAUC,IANF;EAOfZ,GAAG,EAAEW,mBAAUG;AAPA,CAAjB"}
+{"version":3,"file":"Text.js","names":["Text","action","bold","children","headline","small","subheadline","tag","upperCase","others","React","createElement","className","style","text","paragraph","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Text.module.css';\n\nconst Text = ({ action, bold, children, headline, small, subheadline, tag = 'span', upperCase, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        headline\n          ? style.headline\n          : subheadline\n          ? style.subheadline\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : style.paragraph,\n        upperCase && style.upperCase,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  small: PropTypes.bool,\n  subheadline: PropTypes.bool,\n  tag: PropTypes.string,\n  upperCase: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO;EAAA,IAAGC,MAAH,QAAGA,MAAH;EAAA,IAAWC,IAAX,QAAWA,IAAX;EAAA,IAAiBC,QAAjB,QAAiBA,QAAjB;EAAA,IAA2BC,QAA3B,QAA2BA,QAA3B;EAAA,IAAqCC,KAArC,QAAqCA,KAArC;EAAA,IAA4CC,WAA5C,QAA4CA,WAA5C;EAAA,oBAAyDC,GAAzD;EAAA,IAAyDA,GAAzD,yBAA+D,MAA/D;EAAA,IAAuEC,SAAvE,QAAuEA,SAAvE;EAAA,IAAqFC,MAArF;;EAAA,oBACXC,eAAMC,aAAN,CACEJ,GADF,kCAGOE,MAHP;IAIIG,SAAS,EAAE,qBACTC,oBAAMC,IADG,EAETZ,IAAI,IAAIW,oBAAMX,IAFL,EAGTE,QAAQ,GACJS,oBAAMT,QADF,GAEJE,WAAW,GACXO,oBAAMP,WADK,GAEXL,MAAM,GACNY,oBAAMZ,MADA,GAENI,KAAK,GACLQ,oBAAMR,KADD,GAELQ,oBAAME,SAXD,EAYTP,SAAS,IAAIK,oBAAML,SAZV,EAaTC,MAAM,CAACG,SAbE;EAJf,IAoBET,QApBF,CADW;AAAA,CAAb;;;AAwBAH,IAAI,CAACgB,WAAL,GAAmB,gBAAnB;AAEAhB,IAAI,CAACiB,SAAL,GAAiB;EACfhB,MAAM,EAAEiB,mBAAUC,IADH;EAEfjB,IAAI,EAAEgB,mBAAUC,IAFD;EAGfhB,QAAQ,EAAEe,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,MAA7B,EAAqCJ,mBAAUK,KAA/C,CAApB,CAHK;EAIfnB,QAAQ,EAAEc,mBAAUC,IAJL;EAKfd,KAAK,EAAEa,mBAAUC,IALF;EAMfb,WAAW,EAAEY,mBAAUC,IANR;EAOfZ,GAAG,EAAEW,mBAAUG,MAPA;EAQfb,SAAS,EAAEU,mBAAUC;AARN,CAAjB"}

package/build/primitives/Text/Text.module.css

@@ -14,10 +14,17 @@
 
 .headline {
   font-size: var(--mirai-ui-font-size-headline);
+  line-height: var(--mirai-ui-line-height);
+}
+
+.subheadline {
+  font-size: var(--mirai-ui-font-size-subheadline);
+  line-height: var(--mirai-ui-line-height);
 }
 
 .paragraph {
   font-size: var(--mirai-ui-font-size-paragraph);
+  line-height: var(--mirai-ui-line-height);
 }
 
 .action {
@@ -26,6 +33,7 @@
 
 .small {
   font-size: var(--mirai-ui-font-size-small);
+  line-height: calc(var(--mirai-ui-font-size-small) * 1.5);
 }
 
 .upperCase {

package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap

@@ -60,6 +60,16 @@ exports[`primitive:<Text> prop:small 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Text> prop:subheadline 1`] = `
+<DocumentFragment>
+  <span
+    class="text subheadline"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Text> prop:upperCase 1`] = `
 <DocumentFragment>
   <span

package/build/theme/default.theme.css

@@ -1,44 +1,61 @@
 :root {
   /* typography */
-  --mirai-ui-font: Helvetica;
-  --mirai-ui-input-font: Helvetica;
+  --mirai-ui-font: Arial, Regular;
+  --mirai-ui-input-font: Arial, Regular;
   --mirai-ui-font-weight: 400;
-  --mirai-ui-font-bold: Helvetica;
+  --mirai-ui-font-bold: Arial, Regular;
   --mirai-ui-font-bold-weight: 700;
-  --mirai-ui-font-size-headline: 24px;
-  --mirai-ui-font-size-paragraph: 16px;
-  --mirai-ui-font-size-action: 15px;
-  --mirai-ui-font-size-small: 11px;
-  --mirai-ui-input-font-size: 16px;
+  --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-input-font-size: 14px;
+  --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: #202020;
-  --mirai-ui-content-400: #5f6368;
-  --mirai-ui-content-300: #d3d3d3;
+  --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-400: #61a0ed;
-  --mirai-ui-accent-300: #89c8ff;
-  --mirai-ui-accent-200: #edffff;
-  --mirai-ui-error: #f44336;
-  --mirai-ui-error-300: #fde3e1;
-  --mirai-ui-success: #4caf50;
-  --mirai-ui-success-300: #e4f3e5;
-  --mirai-ui-warning: #ff9800;
-  --mirai-ui-warning-300: #fff0d9;
+  --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: 32px;
-  --mirai-ui-space-XXL: 56px;
+  --mirai-ui-space-XL: 48px;
+  --mirai-ui-space-XXL: 64px;
 
   /* layer */
   --mirai-ui-layer-S: 0;

package/package.json

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