@umami/react-zen 0.1.0 → 0.3.0

package/dist/{index.css → styles.css}

@@ -32,7 +32,7 @@
 .Accordion_item {
   overflow: hidden;
   border-bottom: var(--border);
-  padding-bottom: var(--spacing5);
+  padding-bottom: var(--spacing-5);
 }
 .Accordion_item[data-state=closed] {
   padding: 0;
@@ -99,7 +99,7 @@
   background: var(--background-color);
   width: 100%;
   overflow: hidden;
-  gap: var(--spacing3);
+  gap: var(--spacing-3);
 }
 .AlertBanner_message {
   display: flex;
@@ -118,26 +118,26 @@
 }
 .AlertBanner_error {
   color: var(--light-color);
-  background-color: var(--danger-color);
+  background-color: var(--danger-bg-color);
   border: 0;
 }
 .AlertBanner_error .AlertBanner_close {
   color: var(--light-color);
 }
 .AlertBanner_info {
-  color: var(--primary-font-color);
-  background-color: var(--primary-color);
+  color: var(--primary-fg-color);
+  background-color: var(--primary-bg-color);
   border: 0;
 }
 .AlertBanner_info .AlertBanner_close {
-  color: var(--primary-font-color);
+  color: var(--primary-fg-color);
 }
 
 /* src/components/Dialog.module.css */
 .Dialog_dialog {
   position: relative;
-  padding: var(--spacing6);
-  box-shadow: var(--box-shadow4);
+  padding: var(--spacing-6);
+  box-shadow: var(--box-shadow-4);
   background: var(--background-color);
   border: var(--border);
   border-radius: var(--border-radius);
@@ -145,7 +145,7 @@
 .Dialog_title {
   font-size: var(--font-size-lg);
   font-weight: 700;
-  margin-bottom: var(--spacing3);
+  margin-bottom: var(--spacing-3);
 }
 
 /* src/components/Flexbox.module.css */
@@ -381,40 +381,40 @@
   display: inline-flex;
 }
 .Flexbox_spacing1 {
-  gap: var(--spacing1);
+  gap: var(--spacing-1);
 }
 .Flexbox_spacing2 {
-  gap: var(--spacing2);
+  gap: var(--spacing-2);
 }
 .Flexbox_spacing3 {
-  gap: var(--spacing3);
+  gap: var(--spacing-3);
 }
 .Flexbox_spacing4 {
-  gap: var(--spacing4);
+  gap: var(--spacing-4);
 }
 .Flexbox_spacing5 {
-  gap: var(--spacing5);
+  gap: var(--spacing-5);
 }
 .Flexbox_spacing6 {
-  gap: var(--spacing6);
+  gap: var(--spacing-6);
 }
 .Flexbox_spacing7 {
-  gap: var(--spacing7);
+  gap: var(--spacing-7);
 }
 .Flexbox_spacing8 {
-  gap: var(--spacing8);
+  gap: var(--spacing-8);
 }
 .Flexbox_spacing9 {
-  gap: var(--spacing9);
+  gap: var(--spacing-9);
 }
 .Flexbox_spacing10 {
-  gap: var(--spacing10);
+  gap: var(--spacing-10);
 }
 .Flexbox_spacing11 {
-  gap: var(--spacing11);
+  gap: var(--spacing-11);
 }
 .Flexbox_spacing12 {
-  gap: var(--spacing12);
+  gap: var(--spacing-12);
 }
 
 /* src/components/Button.module.css */
@@ -440,28 +440,28 @@
   pointer-events: none;
 }
 .Button_button.Button_primary {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+  color: var(--primary-fg-color);
+  background: var(--primary-bg-color);
 }
 .Button_button.Button_primary:hover {
-  background: color-mix(in srgb, var(--primary-color), 10% var(--background-color));
+  background: color-mix(in srgb, var(--primary-bg-color), 10% var(--background-color));
 }
 .Button_button.Button_primary:active {
-  background: color-mix(in srgb, var(--primary-color), 20% var(--background-color));
+  background: color-mix(in srgb, var(--primary-bg-color), 20% var(--background-color));
 }
 .Button_button.Button_primary:disabled {
-  color: var(--primary-font-color);
-  background: var(--base-color6);
+  color: var(--primary-fg-color);
+  background: var(--base-color-500);
 }
 .Button_button.Button_secondary {
-  color: var(--secondary-font-color);
-  background: var(--secondary-color);
+  color: var(--secondary-fg-color);
+  background: var(--secondary-bg-color);
 }
 .Button_button.Button_secondary:hover {
-  background: color-mix(in srgb, var(--secondary-color), 5% var(--font-color));
+  background: color-mix(in srgb, var(--secondary-bg-color), 5% var(--font-color));
 }
 .Button_button.Button_secondary:active {
-  background: color-mix(in srgb, var(--secondary-color), 10% var(--font-color));
+  background: color-mix(in srgb, var(--secondary-bg-color), 10% var(--font-color));
 }
 .Button_button.Button_secondary:disabled {
   color: var(--font-faded-color);
@@ -469,36 +469,36 @@
 .Button_button.Button_outline {
   background: transparent;
   border: var(--border);
-  box-shadow: var(--box-shadow1);
+  box-shadow: var(--box-shadow-1);
 }
 .Button_button.Button_outline:hover {
-  background: var(--secondary-color);
+  background: var(--secondary-bg-color);
 }
 .Button_button.Button_outline:active {
-  background: color-mix(in srgb, var(--secondary-color), 5% var(--font-color));
+  background: color-mix(in srgb, var(--secondary-bg-color), 5% var(--font-color));
 }
 .Button_button.Button_quiet {
   background: transparent;
 }
 .Button_button.Button_quiet:hover {
-  background: var(--secondary-color);
+  background: var(--secondary-bg-color);
 }
 .Button_button.Button_quiet:active {
-  background: color-mix(in srgb, var(--secondary-color), 5% var(--font-color));
+  background: color-mix(in srgb, var(--secondary-bg-color), 5% var(--font-color));
 }
 .Button_button.Button_danger {
   color: var(--light-color);
-  background: var(--danger-color);
+  background: var(--danger-bg-color);
 }
 .Button_button.Button_danger:hover {
-  background: color-mix(in srgb, var(--danger-color), 6% black);
+  background: color-mix(in srgb, var(--danger-bg-color), 6% black);
 }
 .Button_button.Button_danger:active {
-  background: color-mix(in srgb, var(--danger-color), 12% black);
+  background: color-mix(in srgb, var(--danger-bg-color), 12% black);
 }
 .Button_button.Button_danger:disabled {
-  color: var(--primary-font-color);
-  background: var(--base-color6);
+  color: var(--primary-fg-color);
+  background: var(--base-color-500);
 }
 .Button_button.Button_xs {
   font-size: .8rem;
@@ -565,7 +565,7 @@
 .Calendar_header {
   display: flex;
   align-items: center;
-  margin-bottom: var(--spacing4);
+  margin-bottom: var(--spacing-4);
 }
 .Calendar_heading {
   flex: 1;
@@ -596,9 +596,8 @@
   forced-color-adjust: none;
 }
 .Calendar_cell:hover {
-  color: var(--font-color);
-  border-color: var(--border-color);
-  background: var(--highlight-color);
+  color: var(--highlight-fg-color);
+  background: var(--highlight-bg-color);
 }
 .Calendar_cell[data-outside-month] {
   display: none;
@@ -608,10 +607,9 @@
   outline-offset: 2px;
 }
 .Calendar_cell[data-selected] {
-  font-weight: 700;
-  color: var(--primary-font-color);
-  border-color: var(--primary-color);
-  background: var(--primary-color);
+  color: var(--primary-fg-color);
+  border-color: var(--primary-bg-color);
+  background: var(--primary-bg-color);
 }
 
 /* src/components/Checkbox.module.css */
@@ -619,7 +617,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--spacing3);
+  gap: var(--spacing-3);
   color: var(--font-color);
 }
 .Checkbox_box {
@@ -638,8 +636,8 @@
   display: none;
 }
 .Checkbox_checkbox[data-selected] .Checkbox_box {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+  color: var(--primary-fg-color);
+  background: var(--primary-bg-color);
 }
 .Checkbox_checkbox[data-selected] .Checkbox_icon,
 .Checkbox_checkbox[data-indeterminate] .Checkbox_icon {
@@ -670,7 +668,7 @@
   cursor: pointer;
 }
 .ListItem_item:hover {
-  background: var(--highlight-color);
+  background: var(--highlight-bg-color);
 }
 .ListItem_item[data-selected] {
   font-weight: bold;
@@ -688,7 +686,7 @@
   min-width: 100px;
   border: var(--border);
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-);
 }
 .List_separator {
   border-bottom: var(--border);
@@ -737,7 +735,7 @@
   color: var(--font-color);
   border: var(--border);
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-);
 }
 .Combobox_input {
   background: none;
@@ -754,11 +752,11 @@
   color: var(--font-faded-color);
 }
 .Combobox_list {
-  box-shadow: var(--box-shadow3);
+  box-shadow: var(--box-shadow-3);
 }
 .Combobox_icon {
   color: var(--font-muted-color);
-  margin-right: var(--spacing2);
+  margin-right: var(--spacing-2);
 }
 .Combobox_icon:hover {
   color: var(--font-color);
@@ -787,7 +785,7 @@
   border: var(--border);
   border-radius: var(--border-radius);
   background: var(--background-color);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-);
   position: relative;
 }
 .Field_field[data-readonly],
@@ -1035,7 +1033,7 @@
 }
 .InlineEditField_icon {
   display: none;
-  right: calc(-1 * var(--spacing5));
+  right: calc(-1 * var(--spacing-5));
   position: absolute;
 }
 
@@ -1059,10 +1057,10 @@
   animation: Spinner_spinner-rotate 1.6s linear infinite;
 }
 .Spinner_track {
-  stroke: var(--input-background-color);
+  stroke: var(--input-bg-color);
 }
 .Spinner_fill {
-  stroke: var(--primary-color);
+  stroke: var(--primary-bg-color);
   stroke-linecap: square;
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
@@ -1147,7 +1145,7 @@
   cursor: pointer;
 }
 .MenuItem_item:hover {
-  background: var(--highlight-color);
+  background: var(--highlight-bg-color);
 }
 .MenuItem_item[data-selected] {
   font-weight: bold;
@@ -1165,8 +1163,8 @@
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
-  padding: var(--spacing2);
-  box-shadow: var(--box-shadow);
+  padding: var(--spacing-2);
+  box-shadow: var(--box-shadow-);
   background: var(--background-color);
 }
 .Menu_separator {
@@ -1221,8 +1219,8 @@
   border: var(--border);
   border-radius: var(--border-radius);
   background: var(--background-color);
-  box-shadow: var(--box-shadow);
-  gap: var(--spacing2);
+  box-shadow: var(--box-shadow-);
+  gap: var(--spacing-2);
   position: relative;
 }
 .PasswordField_field[data-readonly],
@@ -1244,7 +1242,7 @@
 }
 .PasswordField_icon {
   color: var(--font-muted-color);
-  margin: 0 var(--spacing3);
+  margin: 0 var(--spacing-3);
 }
 
 /* src/components/Page.module.css */
@@ -1260,11 +1258,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing3);
+  gap: var(--spacing-3);
 }
 .ProgressBar_track {
   height: 10px;
-  background: var(--input-background-color);
+  background: var(--input-bg-color);
   flex-basis: 100%;
   width: fit-content;
   border-radius: var(--border-radius);
@@ -1272,7 +1270,7 @@
   min-width: 100px;
 }
 .ProgressBar_fill {
-  background: var(--primary-color);
+  background: var(--primary-bg-color);
   height: 10px;
 }
 .ProgressBar_value {
@@ -1295,10 +1293,10 @@
   height: 96px;
 }
 .ProgressCircle_track {
-  stroke: var(--input-background-color);
+  stroke: var(--input-bg-color);
 }
 .ProgressCircle_fill {
-  stroke: var(--primary-color);
+  stroke: var(--primary-bg-color);
 }
 .ProgressCircle_value {
   font-weight: 700;
@@ -1312,7 +1310,7 @@
 .RadioGroup_radiogroup {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing4);
+  gap: var(--spacing-4);
   color: var(--font-color);
 }
 .RadioGroup_radiogroup[data-orientation=vertical] {
@@ -1324,7 +1322,7 @@
 .RadioGroup_radio {
   display: flex;
   align-items: center;
-  gap: var(--spacing3);
+  gap: var(--spacing-3);
   font-size: var(--font-size);
   color: var(--font-color);
   forced-color-adjust: none;
@@ -1339,17 +1337,17 @@
   background: var(--background-color);
   border-radius: 20px;
   transition: all 200ms;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-);
 }
 .RadioGroup_radio[data-pressed]:before {
   border-color: var(--border-color);
 }
 .RadioGroup_radio[data-selected]:before {
-  border-color: var(--primary-color);
+  border-color: var(--primary-bg-color);
   border-width: 7px;
 }
 .RadioGroup_radio[data-selected][data-pressed]:before {
-  border-color: var(--primary-color);
+  border-color: var(--primary-bg-color);
 }
 .RadioGroup_radio[data-disabled] {
   color: var(--font-muted-color);
@@ -1360,7 +1358,7 @@
 
 /* src/components/SearchField.module.css */
 .SearchField_icon {
-  margin-left: var(--spacing2);
+  margin-left: var(--spacing-2);
 }
 .SearchField_button {
   display: flex;
@@ -1372,7 +1370,7 @@
   cursor: pointer;
   border-radius: var(--border-radius-full);
   padding: 0;
-  margin: 0 var(--spacing2);
+  margin: 0 var(--spacing-2);
 }
 .SearchField_button:hover {
   color: var(--font-color);
@@ -1384,7 +1382,7 @@
   align-items: center;
   color: var(--font-color);
   background: var(--background-color);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-);
 }
 .Select_button {
   display: flex;
@@ -1400,7 +1398,7 @@
 }
 .Select_list {
   min-width: 200px;
-  box-shadow: var(--box-shadow3);
+  box-shadow: var(--box-shadow-3);
 }
 .Select_icon {
   color: var(--font-faded-color);
@@ -1438,7 +1436,7 @@
   display: block;
   position: absolute;
   height: 3px;
-  background-color: var(--primary-color);
+  background-color: var(--primary-bg-color);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -1447,11 +1445,11 @@
   height: 20px;
   border-radius: 100%;
   background: var(--background-color);
-  border: 2px solid var(--primary-color);
+  border: 2px solid var(--primary-bg-color);
   forced-color-adjust: none;
 }
 .Slider_thumb[data-dragging] {
-  background: var(--highlight-color);
+  background: var(--highlight-bg-color);
 }
 .Slider_thumb[data-focus-visible] {
   outline: 2px solid var(--font-color);
@@ -1498,7 +1496,7 @@
 .Slider_slider[data-orientation=vertical] .Slider_track:before {
   width: 3px;
   height: 100%;
-  background-color: var(--primary-color);
+  background-color: var(--primary-bg-color);
   left: 50%;
   transform: translateX(-50%);
 }
@@ -1521,19 +1519,19 @@
   position: relative;
 }
 .StatusLight_status.StatusLight_success {
-  background: var(--success-color);
+  background: var(--success-bg-color);
 }
 .StatusLight_status.StatusLight_warning {
-  background: var(--warning-color);
+  background: var(--warning-bg-color);
 }
 .StatusLight_status.StatusLight_error {
-  background: var(--danger-color);
+  background: var(--danger-bg-color);
 }
 .StatusLight_status.StatusLight_active {
-  background: var(--active-color);
+  background: var(--active-bg-color);
 }
 .StatusLight_status.StatusLight_inactive {
-  background: var(--inactive-color);
+  background: var(--inactive-bg-color);
 }
 
 /* src/components/Switch.module.css */
@@ -1552,9 +1550,9 @@
   align-items: center;
   width: calc((var(--knob-size) + var(--knob-border-size)) * 2);
   height: calc(var(--knob-size) + var(--knob-border-size) * 2);
-  border: var(--knob-border-size) solid var(--border-color);
+  border: var(--knob-border-size) solid transparent;
   border-radius: calc(var(--knob-size) + var(--knob-border-size) * 2);
-  background: var(--border-color);
+  background: var(--input-bg-color);
   transition: background-color 0.2s;
   cursor: pointer;
 }
@@ -1564,15 +1562,15 @@
   border-radius: 100%;
   background: var(--background-color);
   transition: all 0.2s;
-  box-shadow: var(--box-shadow2);
+  box-shadow: var(--box-shadow-2);
 }
 .Switch_switch[data-selected] .Switch_track {
-  border-color: var(--primary-color);
-  background: var(--primary-color);
+  border-color: var(--primary-bg-color);
+  background: var(--primary-bg-color);
 }
 .Switch_switch[data-selected] .Switch_knob {
   margin-left: var(--knob-size);
-  border-color: var(--primary-color);
+  border-color: var(--primary-bg-color);
 }
 .Switch_switch[data-disabled] {
   color: var(--font-faded-color);
@@ -1596,7 +1594,7 @@
   align-items: center;
   border-bottom: 2px solid var(--border-color);
   gap: var(--gap);
-  margin-bottom: var(--spacing6);
+  margin-bottom: var(--spacing-6);
 }
 .Tabs_list.Tabs_quiet {
   border: 0;
@@ -1617,7 +1615,7 @@
 }
 .Tabs_tab[data-selected] {
   color: var(--font-color);
-  border-bottom: 2px solid var(--primary-color);
+  border-bottom: 2px solid var(--primary-bg-color);
 }
 .Tabs_tab[data-disabled] {
   color: var(--font-faded-color);
@@ -1671,7 +1669,7 @@
   align-items: center;
   background-color: var(--background-color);
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow3);
+  box-shadow: var(--box-shadow-3);
   padding: 1.25rem 1.5rem;
   border: var(--border);
   position: relative;
@@ -1716,6 +1714,7 @@
   background: transparent;
 }
 .Toast_close {
+  color: currentColor;
   position: absolute;
   right: 10px;
   top: 10px;
@@ -1725,15 +1724,16 @@
 }
 .Toast_toast:hover .Toast_close {
   display: block;
+  cursor: pointer;
 }
 .Toast_toast.Toast_info {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+  color: var(--primary-fg-color);
+  background: var(--primary-bg-color);
   border: 0;
 }
 .Toast_toast.Toast_error {
-  color: var(--background-color);
-  background: var(--danger-color);
+  color: var(--danger-fg-color);
+  background: var(--danger-bg-color);
   border: 0;
 }
 @keyframes Toast_hide {
@@ -1782,18 +1782,18 @@
   cursor: pointer;
 }
 .Toggle_toggle:hover {
-  background: var(--highlight-color);
+  background: var(--highlight-bg-color);
 }
 .Toggle_toggle[data-selected] {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+  color: var(--primary-fg-color);
+  background: var(--primary-bg-color);
 }
 
 /* src/components/ToggleGroup.module.css */
 .ToggleGroup_group {
   display: inline-flex;
   background-color: var(--background-color);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-);
   border: var(--border);
   border-radius: var(--border-radius);
   overflow: hidden;
@@ -1812,11 +1812,11 @@
   border-left: var(--border);
 }
 .ToggleGroup_item:hover {
-  background-color: var(--highlight-color);
+  background-color: var(--highlight-bg-color);
 }
 .ToggleGroup_item[data-state=on] {
   font-weight: 700;
-  background-color: var(--highlight-color);
+  background-color: var(--highlight-bg-color);
   font-size-adjust: 0.5;
 }
 .ToggleGroup_item:focus {