@redneckz/wildless-cms-uni-blocks 0.6.47 → 0.6.48

package/src/ui-kit/Input/Input.tsx

@@ -38,7 +38,7 @@ export const Input = JSX<InputProps>(
 
     const paddingStyle = children ? 'pr-8' : '';
     const validStyle = valid
-      ? 'border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+      ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
       : 'border-error';
 
     return (

package/src/ui-kit/InputRange/InputRange.tsx

@@ -4,7 +4,7 @@ import { clamp } from '../../utils/clamp';
 import { getSanitizedValue } from '../../utils/getSanitizedValue';
 import type { InputRangeProps } from './InputRangeProps';
 
-const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
+const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 
 export const InputRange = JSX<InputRangeProps>(
   ({
@@ -35,8 +35,8 @@ export const InputRange = JSX<InputRangeProps>(
         <label className="block relative">
           {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
           <input
-            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}
+            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`}
             value={addSpacesBetweenNumbers(value)}
             disabled={disabled}
             onChange={handleChange}

package/src/ui-kit/Location/SearchBar.tsx

@@ -19,7 +19,7 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
       <input
         id="search-bar-input"
         className={`h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
+              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
         value={searchTerm}
         onChange={(e) => onSearch(e.target.value as string)}
         type="text"

package/src/ui-kit/Radio/Radio.tsx

@@ -5,7 +5,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="font-sans flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover
         checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text
         after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer"
         type="radio"

package/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -34,7 +34,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
       <input
         id="search-bar-input"
         className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
+              outline-none pr-[6%] border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
         value={term}
         onChange={(e) => setTerm(e.target.value as string)}
         type="text"

package/src/ui-kit/Select/Select.tsx

@@ -102,4 +102,4 @@ const renderOption =
   };
 
 const getBorderStyle = (isBorder: boolean) =>
-  isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
+  isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';

package/src/ui-kit/SwipeListControl/SwipeListControl.fixture.mobile.tsx

@@ -1,9 +1,9 @@
+import type { VNode } from '../../model/VNode';
 import '../../setup-fixture';
 import { SwipeListControl } from './SwipeListControl';
-import type { VNode } from '../../model/VNode';
 
 const renderElement = (_: any, i: number): VNode => (
-  <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
+  <div key={String(i)} className="border border-gray rounded-md text-center h-12">
     {`Element #${i}`}
   </div>
 );
@@ -24,7 +24,7 @@ export default {
   '1 element': (
     <div className="px-4 py-5 bg-white">
       <SwipeListControl>
-        <div className="border border-main-stroke rounded-md text-center h-12">
+        <div className="border border-gray rounded-md text-center h-12">
           Single element, not inside an array
         </div>
       </SwipeListControl>

package/src/ui-kit/Tags/Tags.tsx

@@ -17,7 +17,7 @@ export const Tags = JSX<TagsProps>((props) => {
 const renderTag = (tag: string, key: number) => (
   <span
     key={String(key)}
-    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke"
+    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-gray"
   >
     {tag}
   </span>

package/src/ui-kit/YandexMap/YandexMap.tsx

@@ -3,14 +3,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
+import { MockPoints, mockPoints } from './mockPoints';
 import { renderClusterer } from './renderClusterer';
 import { renderOpenMap } from './renderOpenMap';
 import { renderSearchField } from './renderSearchField';
 import { renderUserGeolocation } from './renderUserGeolocation';
 import { useYandexMaps } from './useYandexMaps';
-import { Icon } from '../Icon/Icon';
 import { ZoomButton } from './ZoomButton';
-import { MockPoints, mockPoints } from './mockPoints';
 
 interface YandexMapProps {
   points: number[][];
@@ -23,7 +23,7 @@ const FULLSCREEN_STYLES = {
   border: 'border border-transparent rounded-md ',
   position: 'absolute flex items-center justify-center',
   size: 'w-12 h-12',
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   font: 'text-center font-sans',
   active: 'active:bg-primary-active',
   hover: 'hover:bg-primary-hover',

package/src/ui-kit/YandexMap/ZoomButton.tsx

@@ -10,7 +10,7 @@ interface ZoomButtonProps {
 }
 
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border-b border-b-2 border-gray last:border-0',

package/src/ui-kit/YandexMap/renderOpenMap.tsx

@@ -1,5 +1,5 @@
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border border-transparent rounded-md',
@@ -14,7 +14,7 @@ export const renderOpenMap = (pointsCenter: number[]) => {
 
   return (
     <a
-      className={`select-none cursor-pointer px-9 h-12 bg-white bg-primary-main text-white ${Object.values(
+      className={`select-none cursor-pointer px-9 h-12 bg-primary-main text-white ${Object.values(
         styles,
       ).join(' ')}`}
       href={getYandexMapUrl()}

package/src/ui-kit/YandexMap/renderUserGeolocation.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { Icon } from '../Icon/Icon';
 import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
 
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border border-transparent rounded-md',

package/tailwind.config.cjs

@@ -29,9 +29,6 @@ module.exports = {
       transitionProperty: {
         height: 'height',
       },
-      backgroundColor: {
-        'white/10': 'rgba(255,255,255,0.1);',
-      },
       backgroundImage: {
         'opacity-to-white':
           'linear-gradient(270deg, #FFFFFF 34.89%, rgba(255, 255, 255, 0) 92.52%);',
@@ -206,7 +203,6 @@ module.exports = {
             start: 'rgba(var(--color-gradient-from), <alpha-value>)',
             end: 'rgba(var(--color-gradient-to), <alpha-value>)',
           },
-          stroke: 'rgba(201, 202, 204, <alpha-value>)',
         },
         primary: {
           main: 'rgba(var(--color-primary-main), <alpha-value>)',
@@ -229,8 +225,7 @@ module.exports = {
         'green-dark': 'rgba(var(--color-green-dark), <alpha-value>)',
         'green-more-dark': 'rgba(var(--color-green-more-dark), <alpha-value>)',
         yellow: 'rgba(var(--color-yellow), <alpha-value>)',
-        gray: 'rgba(201, 202, 204, <alpha-value>)',
-        golden: 'rgba(221, 182, 61, <alpha-value>)',
+        gray: 'rgba(var(--color-gray), <alpha-value>)',
         error: 'rgba(242, 48, 48, <alpha-value>)',
       },
       minHeight: (theme) => ({
@@ -249,18 +244,13 @@ module.exports = {
         },
       },
       boxShadow: {
-        'dark-blue/42': '0 18px 36px -4px rgba(24, 39, 75, 0.42);',
-        'blue-gray/24': '0 14px 36px -4px rgba(21, 40, 90, 0.24);',
+        'dark-blue': '0 18px 36px -4px rgba(24, 39, 75, 0.42);',
+        'blue-gray': '0 14px 36px -4px rgba(21, 40, 90, 0.24);',
       },
       borderColor: {
-        'white/50': 'rgba(255,255,255,.5)',
-        'gray/100': 'rgba(235, 237, 240, 1)',
         'primary-hover': 'rgba(134, 134, 134, 1)',
-        'primary-focus': 'rgba(28, 28, 28, 1)',
-        'checkbox-hover': 'rgba(134, 134, 134, 1)',
         'green-light': 'rgba(219, 242, 219, 1)',
         golden: 'rgba(255, 237, 184, 1)',
-        'color-stroke': 'rgba(201, 202, 204, 1)',
       },
     },
   },