datocms-react-ui 2.1.4 → 2.2.0-alpha.1

package/src/Button/styles.module.css

@@ -7,7 +7,7 @@
   cursor: pointer;
   line-height: inherit;
   background-color: transparent;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: 4px;
@@ -32,56 +32,65 @@
 }
 
 .buttonType-muted {
-  background-color: var(--light-color);
-  color: var(--accent-color);
+  background-color: var(--color--tinted--surface);
+  color: var(--color--tinted--ink);
 
   &.disabled {
-    background-color: var(--light-bg-color);
-    color: rgba(0, 0, 0, 0.2);
+    background-color: var(--color--disabled--surface);
+    color: var(--color--disabled--ink);
 
     &:hover,
     &:focus,
     &:active {
-      color: rgba(0, 0, 0, 0.2);
+      color: var(--color--disabled--ink);
     }
   }
 }
 
 .buttonType-primary {
-  background-color: var(--accent-color);
-  color: white;
+  background-color: var(--color--primary--surface);
+  color: var(--color--primary--ink);
 
   &:hover,
   &:focus,
   &:active {
-    color: white;
+    color: var(--color--primary--ink);
+  }
+
+  &:hover {
+    background-color: var(--color--primary--surface-hover);
+  }
+
+  &:active,
+  &:focus {
+    background-color: var(--color--primary--surface-active);
   }
 
   &.disabled {
-    background-color: var(--disabled-bg-color);
-    color: rgba(0, 0, 0, 0.2);
+    background-color: var(--color--disabled--surface);
+    color: var(--color--disabled--ink);
     &:hover,
     &:focus,
     &:active {
-      color: rgba(0, 0, 0, 0.2);
+      color: var(--color--disabled--ink);
     }
   }
 }
 
 .buttonType-negative {
-  background-color: var(--alert-color);
-  color: white;
+  background-color: var(--color--danger--surface);
+  color: var(--color--danger--ink);
 
   &:hover,
   &:focus,
   &:active {
-    color: white;
-    background-color: var(--alert-color);
+    color: var(--color--danger--ink);
+    background-color: var(--color--danger--surface);
   }
 
   &.disabled {
-    background-color: var(--disabled-bg-color);
-    color: rgba(0, 0, 0, 0.2);
+    background-color: var(--color--disabled--surface);
+    color: var(--color--disabled--ink);
   }
 }
 
@@ -128,7 +137,7 @@
   line-height: 0.6;
 
   svg {
-    fill: var(--accent-color);
+    fill: var(--color--ink-accent);
   }
 }
 

package/src/Button/styles.module.css.json

@@ -1 +1 @@
-{"button":"_button_474wk_1","disabled":"_disabled_474wk_30","buttonType-muted":"_buttonType-muted_474wk_34","buttonType-primary":"_buttonType-primary_474wk_50","buttonType-negative":"_buttonType-negative_474wk_71","buttonSize-xxs":"_buttonSize-xxs_474wk_88","buttonSize-xs":"_buttonSize-xs_474wk_93","buttonSize-s":"_buttonSize-s_474wk_98","buttonSize-m":"_buttonSize-m_474wk_103","buttonSize-l":"_buttonSize-l_474wk_108","buttonSize-xl":"_buttonSize-xl_474wk_113","fullWidth":"_fullWidth_474wk_118","button__leftIcon":"_button__leftIcon_474wk_124","button__rightIcon":"_button__rightIcon_474wk_125"}
+{"button":"_button_18bje_1","disabled":"_disabled_18bje_30","buttonType-muted":"_buttonType-muted_18bje_34","buttonType-primary":"_buttonType-primary_18bje_50","buttonType-negative":"_buttonType-negative_18bje_80","buttonSize-xxs":"_buttonSize-xxs_18bje_97","buttonSize-xs":"_buttonSize-xs_18bje_102","buttonSize-s":"_buttonSize-s_18bje_107","buttonSize-m":"_buttonSize-m_18bje_112","buttonSize-l":"_buttonSize-l_18bje_117","buttonSize-xl":"_buttonSize-xl_18bje_122","fullWidth":"_fullWidth_18bje_127","button__leftIcon":"_button__leftIcon_18bje_133","button__rightIcon":"_button__rightIcon_18bje_134"}

package/src/ButtonGroup/Button/styles.module.css

@@ -2,8 +2,8 @@
   font-family: inherit;
   cursor: pointer;
   line-height: inherit;
-  background-color: white;
-  color: var(--base-body-color);
+  background-color: var(--color--surface);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   font-size: inherit;
@@ -11,22 +11,20 @@
   border: 0;
   padding: 0;
   padding: 7px 13px;
-  border-right: 1px solid var(--border-color);
-  border: 1px solid var(--border-color);
-  border-left-width: 0;
+  border: 1px solid var(--color--border);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-column: center;
-  color: rgba(var(--base-body-color-rgb-components, 0.6));
+  color: var(--color--ink-subtle);
 }
 
 .Button:hover {
-  background-color: var(--light-bg-color);
+  background-color: var(--color--surface-hover);
 }
 
 .Button svg {
-  fill: var(--light-body-color);
+  fill: var(--color--ink-subtle);
 }
 
 .Button--s {
@@ -35,31 +33,29 @@
 
 .Button--disabled {
   cursor: not-allowed;
-  color: var(--light-body-color);
+  color: var(--color--disabled--ink);
 }
 
 .Button--disabled:hover {
-  background: white;
+  background: var(--color--surface);
 }
 
 .Button--selected {
-  background-color: var(--accent-color);
-  border-color: var(--accent-color);
-  color: white;
+  background-color: var(--color--accent--surface);
+  color: var(--color--accent--ink);
 }
 
 .Button--selected svg {
-  fill: white;
+  fill: var(--color--accent--ink);
 }
 
 .Button--selected:hover {
-  background-color: var(--accent-color);
+  background-color: var(--color--accent--surface);
 }
 
 .Button--selected:hover,
 .Button--selected.Button--disabled {
-  background-color: rgba(var(--accent-color-rgb-components), 0.8);
-  border-color: rgba(var(--accent-color-rgb-components), 0.8);
+  background-color: var(--color--accent--surface);
 }
 
 .Button:first-child {

package/src/ButtonGroup/Button/styles.module.css.json

@@ -1 +1 @@
-{"Button":"_Button_1h1w1_1","Button--s":"_Button--s_1h1w1_32","Button--disabled":"_Button--disabled_1h1w1_36","Button--selected":"_Button--selected_1h1w1_45"}
+{"Button":"_Button_l5wk3_1","Button--s":"_Button--s_l5wk3_30","Button--disabled":"_Button--disabled_l5wk3_34","Button--selected":"_Button--selected_l5wk3_43"}

package/src/ButtonGroup/Group/styles.module.css

@@ -1,6 +1,6 @@
 .Group {
   display: flex;
   align-items: stretch;
-  background-color: white;
+  background-color: var(--color--surface);
   overflow: hidden;
 }

package/src/ButtonGroup/Group/styles.module.css.json

@@ -1 +1 @@
-{"Group":"_Group_10mj4_1"}
+{"Group":"_Group_1b5yn_1"}