colibri-ui 0.8.65 → 0.8.67

package/Button/Button.module.css

@@ -1,42 +1,40 @@
 .root {
   align-items: center;
-  border: 1px solid;
-  border-radius: 1.125rem;
+  border: var(--border-width-hairline) solid;
+  border-radius: var(--component-button-radius);
   box-sizing: border-box;
   cursor: pointer;
   display: inline-flex;
   flex-shrink: 0;
-  font-size: 15px;
+  font-size: var(--component-button-font-size-m);
   font-style: normal;
   font-weight: 400;
-  gap: 8px;
-  height: 36px;
+  gap: var(--space-2);
+  height: var(--component-button-height-m);
   justify-content: center;
-  line-height: 36px;
+  line-height: var(--component-button-height-m);
   overflow: hidden;
-  padding: 0 12px;
+  padding: 0 var(--space-3);
   text-overflow: ellipsis;
-  transform: scale(1);
-  transition: color 0.15s linear;
-  transition: transform 0.1s ease-out;
+  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
   white-space: nowrap;
   width: fit-content;
 }
 .root_icon {
-  border-radius: 50%;
-  width: 36px;
+  border-radius: var(--radius-full);
+  width: var(--component-button-height-m);
 }
 .root_icon.size_xs {
-  width: 29px;
+  width: var(--component-button-height-xs);
 }
 .root_icon.size_s {
-  width: 32px;
+  width: var(--component-button-height-s);
 }
 .root_icon.size_m {
-  width: 36px;
+  width: var(--component-button-height-m);
 }
 .root_icon.size_l {
-  width: 42px;
+  width: var(--component-button-height-l);
 }
 .root_fullWidth {
   width: 100%;
@@ -47,174 +45,136 @@
 }
 
 .size_xs {
-  font-size: 12px;
-  height: 29px;
-  line-height: 29px;
+  font-size: var(--component-button-font-size-xs);
+  height: var(--component-button-height-xs);
+  line-height: var(--component-button-height-xs);
 }
 .size_s {
-  font-size: 13px;
-  height: 32px;
-  line-height: 32px;
+  font-size: var(--component-button-font-size-s);
+  height: var(--component-button-height-s);
+  line-height: var(--component-button-height-s);
 }
 .size_m {
-  font-size: 15px;
-  height: 36px;
-  line-height: 36px;
+  font-size: var(--component-button-font-size-m);
+  height: var(--component-button-height-m);
+  line-height: var(--component-button-height-m);
 }
 .size_l {
-  border-radius: 1.5rem;
-  font-size: 18px;
-  height: 42px;
-  line-height: 42px;
+  border-radius: var(--component-button-radius-lg);
+  font-size: var(--component-button-font-size-l);
+  height: var(--component-button-height-l);
+  line-height: var(--component-button-height-l);
 }
 
 button.variant_primary {
-  background-color: var(--button-primary-bg);
-  border-color: var(--button-primary-border-color);
-  color: var(--button-primary-color);
+  background-color: var(--component-button-primary-bg);
+  border-color: var(--component-button-primary-border);
+  color: var(--component-button-primary-text);
 }
 button.variant_primary:hover {
-  background-color: var(--button-primary-bg-hovered);
-  border-color: var(--button-primary-border-color-hovered);
-  color: var(--button-primary-color-hovered);
+  background-color: var(--component-button-primary-bg-hover);
+  border-color: var(--component-button-primary-border-hover);
+  color: var(--component-button-primary-text-hover);
 }
 button.variant_primary:active {
-  background-color: var(--button-primary-bg-active);
-  border-color: var(--button-primary-border-color-active);
-  color: var(--button-primary-color-active);
-}
-button.variant_primary_disabled {
-  background-color: var(--button-primary-bg-disabled);
-  border-color: var(--button-primary-border-color-disabled);
-  color: var(--button-primary-color-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
+  background-color: var(--component-button-primary-bg-pressed);
+  border-color: var(--component-button-primary-border-pressed);
+  color: var(--component-button-primary-text-pressed);
 }
 button.variant_secondary {
-  background-color: var(--button-secondary-bg);
-  border-color: var(--button-secondary-border-color);
-  color: var(--button-secondary-color);
+  background-color: var(--component-button-secondary-bg);
+  border-color: var(--component-button-secondary-border);
+  color: var(--component-button-secondary-text);
 }
 button.variant_secondary:hover {
-  background-color: var(--button-secondary-bg-hovered);
-  border-color: var(--button-secondary-border-color-hovered);
-  color: var(--button-secondary-color-hovered);
+  background-color: var(--component-button-secondary-bg-hover);
+  border-color: var(--component-button-secondary-border-hover);
+  color: var(--component-button-secondary-text-hover);
 }
 button.variant_secondary:active {
-  background-color: var(--button-secondary-bg-active);
-  border-color: var(--button-secondary-border-color-active);
-  color: var(--button-secondary-color-active);
-}
-button.variant_secondary_disabled {
-  background-color: var(--button-secondary-bg-disabled);
-  border-color: var(--button-secondary-border-color-disabled);
-  color: var(--button-secondary-color-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
+  background-color: var(--component-button-secondary-bg-pressed);
+  border-color: var(--component-button-secondary-border-pressed);
+  color: var(--component-button-secondary-text-pressed);
 }
 button.variant_pseudo {
-  background-color: var(--button-pseudo-bg);
-  border-color: var(--button-pseudo-border-color);
-  color: var(--button-pseudo-color);
+  background-color: var(--component-button-pseudo-bg);
+  border-color: var(--component-button-pseudo-border);
+  color: var(--component-button-pseudo-text);
 }
 button.variant_pseudo:hover {
-  background-color: var(--button-pseudo-bg-hovered);
-  border-color: var(--button-pseudo-border-color-hovered);
-  color: var(--button-pseudo-color-hovered);
+  background-color: var(--component-button-pseudo-bg-hover);
+  border-color: var(--component-button-pseudo-border-hover);
+  color: var(--component-button-pseudo-text-hover);
 }
 button.variant_pseudo:active {
-  background-color: var(--button-pseudo-bg-active);
-  border-color: var(--button-pseudo-border-color-active);
-  color: var(--button-pseudo-color-active);
-}
-button.variant_pseudo_disabled {
-  background-color: var(--button-pseudo-bg-disabled);
-  border-color: var(--button-pseudo-border-color-disabled);
-  color: var(--button-pseudo-color-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
+  background-color: var(--component-button-pseudo-bg-pressed);
+  border-color: var(--component-button-pseudo-border-pressed);
+  color: var(--component-button-pseudo-text-pressed);
 }
 button.variant_outline {
-  background-color: var(--button-outline-bg);
-  border-color: var(--button-outline-border-color);
-  color: var(--button-outline-color);
+  background-color: var(--component-button-outline-bg);
+  border-color: var(--component-button-outline-border);
+  color: var(--component-button-outline-text);
 }
 button.variant_outline:hover {
-  background-color: var(--button-outline-bg-hovered);
-  border-color: var(--button-outline-border-color-hovered);
-  color: var(--button-outline-color-hovered);
+  background-color: var(--component-button-outline-bg-hover);
+  border-color: var(--component-button-outline-border-hover);
+  color: var(--component-button-outline-text-hover);
 }
 button.variant_outline:active {
-  background-color: var(--button-outline-bg-active);
-  border-color: var(--button-outline-border-color-active);
-  color: var(--button-outline-color-active);
-}
-button.variant_outline_disabled {
-  background-color: var(--button-outline-bg-disabled);
-  border-color: var(--button-outline-border-color-disabled);
-  color: var(--button-outline-color-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
+  background-color: var(--component-button-outline-bg-pressed);
+  border-color: var(--component-button-outline-border-pressed);
+  color: var(--component-button-outline-text-pressed);
 }
 button.variant_clear {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--button-clear-color);
+  background-color: var(--component-button-clear-bg);
+  border-color: var(--component-button-clear-border);
+  color: var(--component-button-clear-text);
 }
 button.variant_clear:hover {
-  color: var(--button-clear-color-hovered);
+  background-color: var(--component-button-clear-bg-hover);
+  border-color: var(--component-button-clear-border-hover);
+  color: var(--component-button-clear-text-hover);
 }
 button.variant_clear:active {
-  color: var(--button-clear-color-active);
-}
-button.variant_clear_disabled {
-  background-color: var(--button-clear-bg-disabled);
-  border-color: var(--button-clear-border-color-disabled);
-  color: var(--button-clear-color-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
+  background-color: var(--component-button-clear-bg-pressed);
+  border-color: var(--component-button-clear-border-pressed);
+  color: var(--component-button-clear-text-pressed);
 }
 button.variant_alert {
-  background-color: var(--button-alert-bg);
-  border-color: var(--button-alert-border-color);
-  color: var(--button-alert-color);
+  background-color: var(--component-button-alert-bg);
+  border-color: var(--component-button-alert-border);
+  color: var(--component-button-alert-text);
 }
 button.variant_alert:hover {
-  background-color: var(--button-alert-bg-hovered);
-  border-color: var(--button-alert-border-color-hovered);
-  color: var(--button-alert-color-hovered);
+  background-color: var(--component-button-alert-bg-hover);
+  border-color: var(--component-button-alert-border-hover);
+  color: var(--component-button-alert-text-hover);
 }
 button.variant_alert:active {
-  background-color: var(--button-alert-bg-active);
-  border-color: var(--button-alert-border-color-active);
-  color: var(--button-alert-color-active);
-}
-button.variant_alert_disabled {
-  background-color: var(--button-alert-bg-disabled);
-  border-color: var(--button-alert-border-color-disabled);
-  color: var(--button-alert-color-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
+  background-color: var(--component-button-alert-bg-pressed);
+  border-color: var(--component-button-alert-border-pressed);
+  color: var(--component-button-alert-text-pressed);
 }
 button.variant_success {
-  background-color: var(--button-success-bg);
-  border-color: var(--button-success-border-color);
-  color: var(--button-success-color);
+  background-color: var(--component-button-success-bg);
+  border-color: var(--component-button-success-border);
+  color: var(--component-button-success-text);
 }
 button.variant_success:hover {
-  background-color: var(--button-success-bg-hovered);
-  border-color: var(--button-success-border-color-hovered);
-  color: var(--button-success-color-hovered);
+  background-color: var(--component-button-success-bg-hover);
+  border-color: var(--component-button-success-border-hover);
+  color: var(--component-button-success-text-hover);
 }
 button.variant_success:active {
-  background-color: var(--button-success-bg-active);
-  border-color: var(--button-success-border-color-active);
-  color: var(--button-success-color-active);
-}
-button.variant_success_disabled {
-  background-color: var(--button-success-bg-disabled);
-  border-color: var(--button-success-border-color-disabled);
-  color: var(--button-success-color-disabled);
+  background-color: var(--component-button-success-bg-pressed);
+  border-color: var(--component-button-success-border-pressed);
+  color: var(--component-button-success-text-pressed);
+}
+button.variant_primary_disabled, button.variant_secondary_disabled, button.variant_pseudo_disabled, button.variant_outline_disabled, button.variant_clear_disabled, button.variant_alert_disabled, button.variant_success_disabled {
+  background-color: var(--component-button-bg-disabled);
+  border-color: var(--component-button-border-disabled);
+  color: var(--component-button-text-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }

package/Calendar/components/Month/Month.js

@@ -47,7 +47,7 @@ var WEEK_DAYS = Array.from({
   };
 });
 var SELECTED_BG_STYLE = {
-  background: "var(--palette-bg-2)"
+  background: "var(--component-switch-bg-checked)"
 };
 var TRANSPARENT_BG_STYLE = {
   background: "transparent"
@@ -107,8 +107,7 @@ var DayButton = /*#__PURE__*/React__namespace.memo(function (_ref2) {
   }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
     size: "s",
     style: {
-      opacity: isActive ? 80 : 30,
-      color: isActive ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)"
+      color: isActive ? isSelected ? "var(--component-tab-text-active)" : "var(--color-text-primary)" : "var(--color-text-disabled)"
     }
   }, day));
 });
@@ -163,8 +162,7 @@ var Month = function Month(props) {
       key: index
     }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
       style: {
-        opacity: isWeekend ? 80 : 30,
-        color: isWeekend ? "var(--typography-alert)" : "var(--palette-black)"
+        color: isWeekend ? "var(--color-status-error)" : "var(--color-text-secondary)"
       }
     }, name));
   })), weeks.map(function (days, weekIndex) {

package/Calendar/components/Month/index.module.css

@@ -1,11 +1,12 @@
 .root {
   box-sizing: border-box;
-  padding: 0 16px;
+  color: var(--color-text-primary);
+  padding: 0 var(--space-4);
   width: 100%;
 }
 
 .month-name {
-  padding: 7px 0 25px;
+  padding: var(--space-2) 0 var(--space-6);
   text-align: center;
 }
 
@@ -18,41 +19,37 @@
 
 .week {
   display: grid;
-  gap: 4px;
+  gap: var(--space-1);
   grid-template-columns: repeat(7, 1fr);
   justify-content: center;
-  margin: 2px 0;
+  margin: var(--space-1) 0;
   padding: 0;
 }
 
 .day {
   display: block;
-  min-height: 32px;
+  min-height: var(--component-calendar-day-size);
   position: relative;
   text-align: center;
 }
 
 .legend {
   display: grid;
-  gap: 4px;
+  gap: var(--space-1);
   grid-template-columns: repeat(7, 1fr);
-  margin: 2px 0;
+  margin: var(--space-1) 0;
   padding: 0;
   text-align: center;
 }
 
 .selected-range-day {
   display: block;
-  height: 32px;
+  height: var(--component-calendar-day-size);
   position: relative;
   text-align: center;
-  z-index: 0;
-}
-.selected-range-day:hover {
-  z-index: 1;
 }
 .selected-range-day::before {
-  background: #f5f5f5;
+  background: var(--component-menu-item-bg-hover);
   content: "";
   display: block;
   height: 100%;
@@ -60,6 +57,7 @@
   position: absolute;
   top: 0;
   width: 200%;
+  z-index: 0;
 }
 .selected-range-day:first-child::before {
   left: 0;
@@ -101,11 +99,13 @@
 .start-of-selection::before {
   left: 50%;
   right: auto;
+  width: 50%;
 }
 
 .end-of-selection::before {
   left: auto;
   right: 50%;
+  width: 50%;
 }
 
 .first-child:first-child::before {
@@ -118,26 +118,27 @@
 
 .day-inner {
   border: 0;
-  border-radius: 6px;
+  border-radius: var(--component-calendar-day-radius);
   display: inline-block;
-  height: 32px;
-  max-width: 32px;
+  height: var(--component-calendar-day-size);
+  max-width: var(--component-calendar-day-size);
   outline: 0;
   padding: 0;
   position: relative;
   text-align: center;
   transition: background 0.3s ease;
   width: 100%;
+  z-index: 1;
 }
 
 .day-inner-active {
   cursor: pointer;
 }
 .day-inner-active:hover {
-  background: var(--palette-bg-2);
+  background: var(--component-menu-item-bg-hover);
 }
 
 .day-focused {
-  outline: 2px solid var(--palette-black, #000);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--component-input-focus-ring);
+  outline-offset: var(--focus-ring-width);
 }

package/Calendar/components/Presets/index.module.css

@@ -13,16 +13,16 @@
 
 .item {
   flex-grow: 1;
-  padding: 0 4px;
+  padding: 0 var(--space-1);
 }
 .item > button {
   display: block;
-  padding: 0 8px;
+  padding: 0 var(--space-2);
   width: 100%;
 }
 .item:first-child {
-  padding-left: 16px;
+  padding-left: var(--space-4);
 }
 .item:last-child {
-  padding-right: 16px;
+  padding-right: var(--space-4);
 }

package/Calendar/index.module.css

@@ -1,11 +1,12 @@
 .root {
+  color: var(--color-text-primary);
   display: flex;
   flex-direction: column;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  gap: 1rem;
-  min-height: 360px;
-  min-width: 320px;
+  gap: var(--space-4);
+  min-height: var(--component-calendar-min-block-size);
+  min-width: var(--component-calendar-min-inline-size);
   overflow: hidden;
   position: relative;
   text-rendering: optimizelegibility;
@@ -13,15 +14,15 @@
 }
 
 .month-control-prev-arrow {
-  color: var(--palette-black);
+  color: var(--color-icon-primary);
   transform: rotate(180deg);
 }
 
 .month-control-next-arrow {
-  color: var(--palette-black);
+  color: var(--color-icon-primary);
   position: absolute;
-  right: 16px;
-  top: 16px;
+  right: var(--space-4);
+  top: var(--space-4);
   transform: rotate(360deg);
 }
 
@@ -29,61 +30,63 @@
   background: transparent;
   border: 0;
   cursor: pointer;
-  height: 48px;
+  height: var(--component-calendar-control-block-size);
   outline: 0;
-  padding: 0 16px;
+  padding: 0 var(--space-4);
   position: absolute;
   top: 0;
-  width: 60px;
+  width: var(--component-calendar-control-inline-size);
 }
 .month-control[disabled] {
   cursor: default;
 }
 .month-control[disabled] .month-control-prev-arrow {
-  opacity: 0.3;
+  color: var(--color-text-disabled);
+  opacity: 1;
 }
 .month-control[disabled] .month-control-next-arrow {
-  opacity: 0.3;
+  color: var(--color-text-disabled);
+  opacity: 1;
 }
 
 .month-control-prev {
-  border-left-width: 16px;
+  border-left-width: var(--space-4);
   left: 0;
   text-align: left;
 }
 .month-control-prev::before {
-  background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
-  border: 0 solid #fff;
-  border-left-width: 26px;
+  background: linear-gradient(to right, var(--color-bg-surface) 0%, transparent 100%);
+  border: 0 solid var(--color-bg-surface);
+  border-left-width: var(--space-6);
   content: "";
   display: block;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
-  width: 40px;
+  width: var(--component-calendar-fade-inline-size);
 }
 
 .month-control-next {
-  border-right-width: 16px;
+  border-right-width: var(--space-4);
   right: 0;
   text-align: right;
 }
 .month-control-next::before {
-  background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
-  border: 0 solid #fff;
-  border-right-width: 26px;
+  background: linear-gradient(to left, var(--color-bg-surface) 0%, transparent 100%);
+  border: 0 solid var(--color-bg-surface);
+  border-right-width: var(--space-6);
   content: "";
   display: block;
   height: 100%;
   position: absolute;
   right: 0;
   top: 0;
-  width: 40px;
+  width: var(--component-calendar-fade-inline-size);
 }
 
 .months {
-  min-height: 300px;
+  min-height: var(--component-calendar-months-min-block-size);
   position: relative;
   transition: transform 0.3s ease;
 }

package/Calendar/utils/getPresets.js

@@ -47,7 +47,7 @@ var getCurrWeek = function getCurrWeek() {
   var today = new Date();
   var date = new Date(today);
   var days = 0;
-  // если сегодня понедельник, пропускаем его
+  // If today is Monday, skip it.
   if (today.getDay() === 1) {
     date = addDays(date);
     days++;
@@ -64,7 +64,7 @@ var getCurrWeek = function getCurrWeek() {
 };
 var getNextWeek = function getNextWeek() {
   var date = new Date();
-  // если сегодня понедельник — смещаемся на завтра
+  // If today is Monday, move to tomorrow.
   if (date.getDay() === 1) {
     date = addDays(date);
   }

package/Card/Card.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import type { CSSProperties, HTMLAttributes } from "react";
+export type CardSize = "s" | "m" | "l";
+export type CardOrientation = "horizontal" | "vertical";
+export type CardBackgroundType = "none" | "solid";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    size?: CardSize;
+    view?: "default" | string;
+    orientation?: CardOrientation;
+    selected?: boolean;
+    backgroundType?: CardBackgroundType;
+}
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    aspectRatio?: CSSProperties["aspectRatio"] | number;
+    orientation?: CardOrientation;
+}
+export interface CardInnerContentProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: CardOrientation;
+}
+/** Root card container. */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/** Clipped card area that normally contains media and CardInnerContent. */
+export declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+/** Content layer rendered over an image or another CardContent background. */
+export declare const CardInnerContent: React.ForwardRefExoticComponent<CardInnerContentProps & React.RefAttributes<HTMLDivElement>>;