@semcore/ui 13.1.0 → 13.2.0

package/CHANGELOG.md

@@ -1,3 +1,174 @@
+## [13.2.0] - 2022-11-30
+
+### @semcore/base-trigger
+
+- **Added** Added support text ellipsis in `LinkTrigger.Text`.
+
+### @semcore/checkbox
+
+- **Changed** Updated border-color in focus state from `--blue-400` to `--blue-500`, `--red-400` to `--red-500`.
+
+### @semcore/d3-chart
+
+- **Fixed** Allowed to pass any svg attributes.
+- **Fixed** Fixed `Bar` click handler typings.
+- **Fixed** Fixed support handling of bars event handling with `paddingOuter`.
+- **Added** `Bar` component now supports `onClick` handler with bar data in callback.
+
+### @semcore/date-picker
+
+- **Fixed** Fixed InputTrigger subcomponent types.
+
+### @semcore/dot
+
+- **Added** Added css property `isolation` to container.
+
+### @semcore/drag-and-drop
+
+- **Changed** Component was fully rebuilt internally. Backward capability mostly preserved, legacy apis was marked as deprecated.
+
+### @semcore/dropdown-menu
+
+- **Changed** Due to the effect of cutting off the last line, it was decided to add a shadow to the container (`DropdownMenu.List`) when scrolling.
+- **Changed** Changed `margin` to `padding` to make the scrollbar look better.
+- **Changed** Now highlighted tabs are also browser focused.
+
+### @semcore/flags
+
+- **Changed** Fixed few countries flag displaying.
+- **Changed** Removed North Ireland flag as far as image of North Ireland flag was always missing in repository and random image was displayed instead.
+
+### @semcore/flex-box
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+
+### @semcore/format-text
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+
+### @semcore/icon
+
+- **Added** Added `Rephrase`, `SimplifyText`, `ExpandText` icons.
+
+### @semcore/inline-input
+
+- **Fixed** Disabled moving focus in tooltips.
+- **Changed** Updated border-color in focus state from `--blue-400` to `--blue-500`, `--red-400` to `--red-500`, `--green-400` to `--green-500`.
+
+### @semcore/input
+
+- **Fixed** Fix style for disabled state.
+- **Changed** Updated border-color in focus state from `--blue-400` to `--blue-500`, `--red-400` to `--red-500`, `--green-400` to `--green-500`.
+- **Added** Added `aria-invalid` for input in invalid state.
+
+### @semcore/input-mask
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+
+### @semcore/input-tags
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+
+### @semcore/notice-bubble
+
+- **Fixed** Replaced `NoticeBubbleManager` instance typings with `NoticeBubbleManager` typing.
+- **Fixed** Export of `NoticeBubbleManager` was missing in typings.
+
+### @semcore/outside-click
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+
+### @semcore/pagination
+
+- **Fixed** Fixed attributes and line-height for last page
+
+### @semcore/pills
+
+- **Added** Added css property `isolation` to container.
+
+### @semcore/portal
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+
+### @semcore/product-head
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+- **Changed** Changed margin-bottom from 16px to 24px.
+
+### @semcore/radio
+
+- **Changed** Updated border-color in focus state from `--blue-400` to `--blue-500`, `--red-400` to `--red-500`.
+
+### @semcore/skeleton
+
+- **Changed** Removed `width` and `height` properties from `VennChartSkeleton` and `PieChartSkeleton`.
+
+### @semcore/sticky
+
+- **Fixed** Fixed showing types in autocomplete IDE.
+
+### @semcore/tab-line
+
+- **Changed** Changed `font-weight` of tab's text and `height` of underline.
+
+### @semcore/tab-panel
+
+- **Changed** Tabs focus doesn't trigger tab select.
+- **Changed** Pressing "Enter" and "Space" keys focuses current tab.
+- **Changed** Changed `font-weight` of tab's text.
+
+### @semcore/tag
+
+- **Added** Added hover styles for close icon.
+
+### @semcore/textarea
+
+- **Changed** Updated border-color in focus state from `--blue-400` to `--blue-500`, `--red-400` to `--red-500`, `--green-400` to `--green-500`.
+
+### @semcore/tooltip
+
+- **Changed** Updated border-color for `warning` theme from `--red-400` to `--red-500`.
+
+### @semcore/utils
+
+- **Changed** Changed `keyboard-focus` opacity
+- **Added** Added ability to merge `styles` field for `assignProps` function.
+
+## [13.1.1] - 2022-11-09
+
+### @semcore/base-trigger
+
+- **Fixed** Fixed `FilterTrigger` accessability.
+
+### @semcore/checkbox
+
+- **Fixed** Fixed displaying in unchecked and disabled state.
+
+### @semcore/d3-chart
+
+- **Fixed** Fixed hover and active animated for `Donut` chart.
+
+### @semcore/date-picker
+
+- **Fixed** Fixed input trigger visual divergence from initial design.
+- **Fixed** Removed lock on fixed version of `@semcore/input`.
+
+### @semcore/ellipsis
+
+- **Added** Component was added to export of `@semcore/ui`.
+
+### @semcore/icon
+
+- **Added** Added `LookerStudio` icon.
+
+### @semcore/input-mask
+
+- **Fixed** Fixed mask and text line-height mismatch.
+
+### @semcore/pagination
+
+- **Fixed** Fixed styles for last and single pages
+
 ## [13.1.0] - 2022-11-03
 
 ### @semcore/animation

package/ellipsis/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/ellipsis');

package/ellipsis/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/ellipsis';
+export * from '@semcore/ellipsis';

package/ellipsis/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/ellipsis';
+export * from '@semcore/ellipsis';

package/ellipsis/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/ellipsis';
+export * from '@semcore/ellipsis';

package/generate.ts

@@ -104,19 +104,22 @@ const GENERATOR = {
   UTILS: async (dependency: string, name: string) => {
     const require = createRequire(import.meta.url);
     const utilsMain = require.resolve(dependency);
-    const utilsPath = path.join(utilsMain, '..');
-    const utils = glob.sync('**/*.+(js|ts)', { cwd: utilsPath });
+    const utilsDistPath = path.join(utilsMain, '..');
+    const utilsPath = path.join(utilsDistPath, '..');
+    const utils = glob.sync('**/*.+(js|ts)', { cwd: utilsDistPath });
     for (const util of utils) {
       const utilNameWithoutExtention = util.replace(/\.(d\.)?(t|j)s$/, '');
 
       // index.js of utils throws & useless, so we copy it
       if (utilNameWithoutExtention === 'index') {
-        await fs.copy(`${utilsPath}/${util}`, `./${name}/lib/${util}`);
+        await fs.copy(`${utilsDistPath}/${util}`, `./${name}/lib/${util}`);
         continue;
       }
 
       for (const extension of exportExtensions) {
-        const defaultExport = await hasExportDefault(`${utilsPath}/${utilNameWithoutExtention}`);
+        const defaultExport = await hasExportDefault(
+          `${utilsDistPath}/${utilNameWithoutExtention}`,
+        );
         const template = defaultExport
           ? EXPORT_TEMPLATES[extension].LIB_DEFAULT
           : EXPORT_TEMPLATES[extension].LIB_NAMED;
@@ -127,6 +130,7 @@ const GENERATOR = {
         );
       }
     }
+    await fs.copy(`${utilsPath}/style`, `./${name}/style`);
   },
   ICONS: async (dependency: string, name: string) => {
     const require = createRequire(import.meta.url);

package/icon/ExpandText/l/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/ExpandText/l');

package/icon/ExpandText/l/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/ExpandText/l';
+export * from '@semcore/icon/ExpandText/l';

package/icon/ExpandText/l/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/ExpandText/l';
+export * from '@semcore/icon/ExpandText/l';

package/icon/ExpandText/l/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/ExpandText/l';
+export * from '@semcore/icon/ExpandText/l';

package/icon/ExpandText/m/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/ExpandText/m');

package/icon/ExpandText/m/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/ExpandText/m';
+export * from '@semcore/icon/ExpandText/m';

package/icon/ExpandText/m/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/ExpandText/m';
+export * from '@semcore/icon/ExpandText/m';

package/icon/ExpandText/m/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/ExpandText/m';
+export * from '@semcore/icon/ExpandText/m';

package/icon/LookerStudio/l/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/LookerStudio/l');

package/icon/LookerStudio/l/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/LookerStudio/l';
+export * from '@semcore/icon/LookerStudio/l';

package/icon/LookerStudio/l/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/LookerStudio/l';
+export * from '@semcore/icon/LookerStudio/l';

package/icon/LookerStudio/l/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/LookerStudio/l';
+export * from '@semcore/icon/LookerStudio/l';

package/icon/LookerStudio/m/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/LookerStudio/m');

package/icon/LookerStudio/m/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/LookerStudio/m';
+export * from '@semcore/icon/LookerStudio/m';

package/icon/LookerStudio/m/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/LookerStudio/m';
+export * from '@semcore/icon/LookerStudio/m';

package/icon/LookerStudio/m/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/LookerStudio/m';
+export * from '@semcore/icon/LookerStudio/m';

package/icon/Rephrase/l/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/Rephrase/l');

package/icon/Rephrase/l/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Rephrase/l';
+export * from '@semcore/icon/Rephrase/l';

package/icon/Rephrase/l/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Rephrase/l';
+export * from '@semcore/icon/Rephrase/l';

package/icon/Rephrase/l/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Rephrase/l';
+export * from '@semcore/icon/Rephrase/l';

package/icon/Rephrase/m/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/Rephrase/m');

package/icon/Rephrase/m/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Rephrase/m';
+export * from '@semcore/icon/Rephrase/m';

package/icon/Rephrase/m/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Rephrase/m';
+export * from '@semcore/icon/Rephrase/m';

package/icon/Rephrase/m/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Rephrase/m';
+export * from '@semcore/icon/Rephrase/m';

package/icon/SimplifyText/l/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/SimplifyText/l');

package/icon/SimplifyText/l/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/SimplifyText/l';
+export * from '@semcore/icon/SimplifyText/l';

package/icon/SimplifyText/l/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/SimplifyText/l';
+export * from '@semcore/icon/SimplifyText/l';

package/icon/SimplifyText/l/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/SimplifyText/l';
+export * from '@semcore/icon/SimplifyText/l';

package/icon/SimplifyText/m/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/SimplifyText/m');

package/icon/SimplifyText/m/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/SimplifyText/m';
+export * from '@semcore/icon/SimplifyText/m';

package/icon/SimplifyText/m/index.js

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/SimplifyText/m';
+export * from '@semcore/icon/SimplifyText/m';

package/icon/SimplifyText/m/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/SimplifyText/m';
+export * from '@semcore/icon/SimplifyText/m';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semcore/ui",
-  "version": "13.1.0",
+  "version": "13.2.0",
   "license": "MIT",
   "module": "./index.js",
   "sideEffects": false,
@@ -10,77 +10,78 @@
     "test": "jest"
   },
   "dependencies": {
-    "@semcore/accordion": "4.1.6",
-    "@semcore/animation": "1.7.1",
-    "@semcore/badge": "3.2.3",
-    "@semcore/base-trigger": "3.2.5",
-    "@semcore/breadcrumbs": "4.2.5",
-    "@semcore/breakpoints": "1.2.3",
-    "@semcore/button": "4.2.3",
-    "@semcore/card": "4.1.5",
-    "@semcore/carousel": "2.1.6",
-    "@semcore/checkbox": "6.1.4",
-    "@semcore/color-picker": "1.2.6",
-    "@semcore/core": "1.13.4",
-    "@semcore/counter": "2.1.3",
-    "@semcore/data-table": "3.5.0",
-    "@semcore/date-picker": "3.4.6",
-    "@semcore/divider": "3.1.3",
-    "@semcore/dot": "4.1.4",
-    "@semcore/drag-and-drop": "2.1.5",
-    "@semcore/dropdown": "3.2.4",
-    "@semcore/dropdown-menu": "3.3.3",
-    "@semcore/d3-chart": "2.4.10",
+    "@semcore/accordion": "4.1.10",
+    "@semcore/animation": "1.7.3",
+    "@semcore/badge": "3.2.5",
+    "@semcore/base-trigger": "3.2.11",
+    "@semcore/breadcrumbs": "4.2.9",
+    "@semcore/breakpoints": "1.2.5",
+    "@semcore/button": "4.2.5",
+    "@semcore/card": "4.1.9",
+    "@semcore/carousel": "2.1.10",
+    "@semcore/checkbox": "6.2.0",
+    "@semcore/color-picker": "1.2.11",
+    "@semcore/core": "1.13.6",
+    "@semcore/counter": "2.1.5",
+    "@semcore/data-table": "3.5.4",
+    "@semcore/date-picker": "3.4.16",
+    "@semcore/divider": "3.1.5",
+    "@semcore/dot": "4.1.7",
+    "@semcore/drag-and-drop": "2.2.2",
+    "@semcore/dropdown": "3.2.6",
+    "@semcore/dropdown-menu": "3.4.1",
+    "@semcore/d3-chart": "2.5.4",
+    "@semcore/ellipsis": "1.0.5",
     "@semcore/email": "1.0.2",
-    "@semcore/errors": "3.5.4",
-    "@semcore/feature-popover": "3.1.7",
-    "@semcore/feedback-form": "5.2.3",
-    "@semcore/flags": "3.1.3",
-    "@semcore/flex-box": "4.6.3",
-    "@semcore/format-text": "3.1.3",
-    "@semcore/fullscreen-modal": "2.1.6",
-    "@semcore/grid": "4.2.3",
-    "@semcore/icon": "3.1.2",
-    "@semcore/illustration": "1.3.3",
-    "@semcore/inline-input": "3.1.5",
-    "@semcore/inline-edit": "2.1.5",
-    "@semcore/input": "3.2.3",
-    "@semcore/input-mask": "4.3.4",
-    "@semcore/input-number": "4.1.3",
-    "@semcore/input-tags": "3.2.3",
-    "@semcore/link": "4.2.3",
-    "@semcore/modal": "3.1.7",
-    "@semcore/neighbor-location": "3.1.3",
-    "@semcore/notice": "4.2.6",
-    "@semcore/notice-global": "1.2.6",
-    "@semcore/notice-bubble": "4.2.6",
-    "@semcore/outside-click": "2.5.3",
-    "@semcore/pagination": "3.3.5",
-    "@semcore/pills": "4.3.3",
-    "@semcore/popper": "4.13.4",
-    "@semcore/portal": "2.4.3",
-    "@semcore/product-head": "3.1.3",
-    "@semcore/progress-bar": "3.2.3",
-    "@semcore/radio": "5.1.3",
-    "@semcore/scroll-area": "4.1.3",
-    "@semcore/select": "3.2.8",
-    "@semcore/side-panel": "2.1.7",
-    "@semcore/skeleton": "4.2.3",
-    "@semcore/slider": "3.2.3",
-    "@semcore/spin": "4.1.3",
-    "@semcore/spin-container": "6.1.4",
-    "@semcore/sticky": "2.3.3",
-    "@semcore/switch": "4.2.3",
-    "@semcore/tab-line": "3.1.3",
-    "@semcore/tab-panel": "3.1.3",
-    "@semcore/tag": "4.2.5",
-    "@semcore/textarea": "4.1.3",
-    "@semcore/time-picker": "3.2.7",
-    "@semcore/tooltip": "5.1.4",
-    "@semcore/typography": "4.2.5",
-    "@semcore/utils": "3.40.0",
-    "@semcore/widget-empty": "3.6.3",
-    "@semcore/wizard": "1.1.7"
+    "@semcore/errors": "3.5.6",
+    "@semcore/feature-popover": "3.1.11",
+    "@semcore/feedback-form": "5.2.5",
+    "@semcore/flags": "3.2.2",
+    "@semcore/flex-box": "4.6.5",
+    "@semcore/format-text": "3.1.5",
+    "@semcore/fullscreen-modal": "2.1.10",
+    "@semcore/grid": "4.2.5",
+    "@semcore/icon": "3.3.2",
+    "@semcore/illustration": "1.3.5",
+    "@semcore/inline-input": "3.2.1",
+    "@semcore/inline-edit": "2.1.7",
+    "@semcore/input": "3.4.1",
+    "@semcore/input-mask": "4.3.7",
+    "@semcore/input-number": "4.1.6",
+    "@semcore/input-tags": "3.2.7",
+    "@semcore/link": "4.2.5",
+    "@semcore/modal": "3.1.11",
+    "@semcore/neighbor-location": "3.1.5",
+    "@semcore/notice": "4.2.10",
+    "@semcore/notice-global": "1.2.10",
+    "@semcore/notice-bubble": "4.2.12",
+    "@semcore/outside-click": "2.5.5",
+    "@semcore/pagination": "3.3.12",
+    "@semcore/pills": "4.3.6",
+    "@semcore/popper": "4.13.6",
+    "@semcore/portal": "2.4.5",
+    "@semcore/product-head": "3.2.2",
+    "@semcore/progress-bar": "3.2.5",
+    "@semcore/radio": "5.2.0",
+    "@semcore/scroll-area": "4.1.5",
+    "@semcore/select": "3.2.16",
+    "@semcore/side-panel": "2.1.11",
+    "@semcore/skeleton": "4.3.2",
+    "@semcore/slider": "3.2.5",
+    "@semcore/spin": "4.1.5",
+    "@semcore/spin-container": "6.1.6",
+    "@semcore/sticky": "2.3.5",
+    "@semcore/switch": "4.2.5",
+    "@semcore/tab-line": "3.1.6",
+    "@semcore/tab-panel": "3.2.5",
+    "@semcore/tag": "4.2.9",
+    "@semcore/textarea": "4.2.0",
+    "@semcore/time-picker": "3.2.15",
+    "@semcore/tooltip": "5.2.0",
+    "@semcore/typography": "4.2.9",
+    "@semcore/utils": "3.42.0",
+    "@semcore/widget-empty": "3.6.5",
+    "@semcore/wizard": "1.1.11"
   },
   "devDependencies": {
     "@types/react": "18.0.21",

package/utils/style/sellerly.var.css

@@ -0,0 +1,17 @@
+@import '@semcore/utils/style/var.css';
+
+:root {
+  --brand-color: #ff006b;
+  --light-orange: #ffbb00;
+  --orange: #f97134;
+  --dark-red: #c50108;
+  --red: #f5141c;
+  --dark-orange: #f97134;
+  --ultramarine: #4338a2;
+  --light-ultramarine: #5c4cdc;
+  --dark-rose: #d30059;
+  --rose: #e60563;
+  --ghost-white: #f2f0fc;
+  --ghost-white50: #f7f6fd;
+  --keyboard-focus: 0 0 0 3px color-mod(var(--light-ultramarine) a(30%));
+}

package/utils/style/var.css

@@ -0,0 +1,221 @@
+:root {
+  --white: #ffffff;
+  --black: #000000;
+  --gray-50: #f4f5f9;
+  --gray-100: #e0e1e9;
+  --gray-200: #c4c7cf;
+  --gray-300: #a9abb6;
+  --gray-400: #8a8e9b;
+  --gray-500: #6c6e79;
+  --gray-600: #484a54;
+  --gray-700: #2b2e38;
+  --gray-800: #191b23;
+  --blue-50: #e9f7ff;
+  --blue-100: #c4e5fe;
+  --blue-200: #8ecdff;
+  --blue-300: #2bb3ff;
+  --blue-400: #008ff8;
+  --blue-500: #006dca;
+  --blue-600: #044792;
+  --blue-700: #002b5f;
+  --blue-800: #001b3d;
+  --green-50: #dbfee8;
+  --green-100: #9ef2c9;
+  --green-200: #59ddaa;
+  --green-300: #00c192;
+  --green-400: #009f81;
+  --green-500: #007c65;
+  --green-600: #055345;
+  --green-700: #00342d;
+  --green-800: #00201e;
+  --salad-50: #ecfbcd;
+  --salad-100: #c7ee96;
+  --salad-200: #9bd85d;
+  --salad-300: #66c030;
+  --salad-400: #35a21e;
+  --salad-500: #0a7e22;
+  --salad-600: #005613;
+  --salad-700: #003509;
+  --salad-800: #002203;
+  --orange-50: #fff3d9;
+  --orange-100: #ffdca2;
+  --orange-200: #ffb26e;
+  --orange-300: #ff8c43;
+  --orange-400: #ff642d;
+  --orange-500: #c33909;
+  --orange-600: #8b1500;
+  --orange-700: #551200;
+  --orange-800: #351000;
+  --yellow-50: #fdf7c8;
+  --yellow-100: #fce081;
+  --yellow-200: #fdc23c;
+  --yellow-300: #ef9800;
+  --yellow-400: #d87900;
+  --yellow-500: #a75800;
+  --yellow-600: #743a00;
+  --yellow-700: #462500;
+  --yellow-800: #2c1600;
+  --red-50: #fff0f7;
+  --red-100: #ffd7df;
+  --red-200: #ffaeb5;
+  --red-300: #ff8786;
+  --red-400: #ff4953;
+  --red-500: #d1002f;
+  --red-600: #8e0016;
+  --red-700: #58000a;
+  --red-800: #410101;
+  --pink-50: #fff0ff;
+  --pink-100: #ffd3ff;
+  --pink-200: #ffa9fa;
+  --pink-300: #f67cf2;
+  --pink-400: #e14adf;
+  --pink-500: #b229b9;
+  --pink-600: #7d0480;
+  --pink-700: #4d0050;
+  --pink-800: #340439;
+  --violet-50: #f9f2ff;
+  --violet-100: #edd9ff;
+  --violet-200: #dcb8ff;
+  --violet-300: #c695ff;
+  --violet-400: #ab6cfe;
+  --violet-500: #8649e1;
+  --violet-600: #5925ab;
+  --violet-700: #421983;
+  --violet-800: #220358;
+  --brand-color: #ff642d;
+  --pinterest: #bd081c;
+  --instagram: #e4405f;
+  --youtube: #ff0000;
+  --facebook: #3b5998;
+  --linkedIn: #1a7ab2;
+  --twitter: #2bafeb;
+  --google-my-business: #1a73e8;
+  --google-blue: #1a0dab;
+  --google-green: #016723;
+
+  --keyboard-focus: 0 0 0 3px color-mod(var(--blue-400) a(30%));
+  --keyborad-focus: var(--keyboard-focus);
+  --keyboard-focus-valid: 0px 0px 0px 3px color-mod(var(--green-400) a(30%));
+  --keyboard-focus-invalid: 0px 0px 0px 3px color-mod(var(--red-400) a(30%));
+
+  --rounded-s: 4px;
+  --rounded-m: 6px;
+  --rounded-l: 12px;
+
+  --form-control-m: 28px;
+  --form-control-l: 40px;
+
+  --box-shadow-card: 0px 1px 2px 0px rgba(25, 27, 35, 0.12), 0px 0px 1px 0px rgba(25, 27, 35, 0.16);
+  --box-shadow-hover: 3px 3px 30px 0px rgba(25, 27, 35, 0.15);
+  --box-shadow-popper: 0px 1px 12px 0px rgba(25, 27, 35, 0.15);
+  --box-shadow-modal: 0px 3px 8px 0px rgba(25, 27, 35, 0.2);
+  --box-shadow-dnd: 0 0 1px rgba(25, 27, 35, 0.16), 0 12px 40px rgba(25, 27, 35, 0.16);
+
+  --fs-100: 12px;
+  --lh-100: 1.33;
+  --fs-200: 14px;
+  --lh-200: 1.42;
+  --fs-300: 16px;
+  --lh-300: 1.5;
+  --fs-400: 20px;
+  --lh-400: 1.2;
+  --fs-500: 24px;
+  --lh-500: 1.17;
+  --fs-600: 32px;
+  --lh-600: 1.25;
+  --fs-700: 36px;
+  --lh-700: 1.1;
+  --fs-800: 48px;
+  --lh-800: 1.17;
+
+  --disabled-opacity: 0.3;
+
+  --xs-screen: 320px;
+  --sm-screen: 768px;
+  --md-screen: 1200px;
+
+  /* DEPRECATED START
+     Deprecated variables should never be used in
+     components styles but preserved for backward
+     compatibility if they used in projects
+     like `<Badge bg="red">alpha</Badge>`
+  */
+  --denim-blue: #006dca;
+  --light-blue: #008ff8;
+  --neon-blue: #8ecdff;
+  --cyan: #2bb3ff;
+  --green: #009f81;
+  --dark-green: #007c65;
+  --yellow: #fdc23c;
+  --light-orange: #ff8c43;
+  --orange: #ff642d;
+  --dark-orange: #c33909;
+  --red: #ff4953;
+  --dark-red: #d1002f;
+  --violet: #ab6cfe;
+  --dark-violet: #8649e1;
+  --pink: #e14adf;
+  --asphalt: #6c6e79;
+  --wall: #8a8e9b;
+  --mist: #a9abb6;
+  --mist-light: #c4c7cf;
+  --stone: #a9abb6;
+  --stone-light: #c4c7cf;
+  --gray20: #191b23;
+  --gray30: #191b23;
+  --gray40: #484a54;
+  --gray60: #6c6e79;
+  --gray70: #a9abb6;
+  --gray80: #c4c7cf;
+  --gray94: #e0e1e9;
+  --gray96: #f4f5f9;
+  --mystic: #f4f5f9;
+  --mercury: #e0e1e9;
+
+  --blue50: #e9f7ff;
+  --blue100: #c4e5fe;
+  --blue400: #008ff8;
+  --blue600: #044792;
+  --green50: #dbfee8;
+  --green100: #9ef2c9;
+  --green200: #59ddaa;
+  --green300: #00c192;
+  --green600: #055345;
+  --red50: #fff0f7;
+  --red100: #ffd7df;
+  --red200: #ffaeb5;
+  --red300: #ff8786;
+  --red600: #8e0016;
+  --orange50: #fff3d9;
+  --orange100: #ffdca2;
+  --orange200: #ffb26e;
+  --yellow100: #fce081;
+
+  --iceberg-blue: #6fafd4;
+  --salad: #8bc835;
+  --granitic: #2f3439;
+  --gray10: #222222;
+  --sky: #e1f2ff;
+  --lily: #e6f9fd;
+  --marble: #f1f6f8;
+  --googleplus: #e14b3f;
+  --linkedin: #1a7ab2;
+
+  --font-size_-1: 11px;
+  --font-size_-2: 10px;
+  --font-size_0: 12px;
+  --font-size_1: 13px;
+  --font-size_11: 33px;
+  --font-size_12: 36px;
+  --font-size_15: 48px;
+  --font-size_2: 14px;
+  --font-size_3: 16px;
+  --font-size_5: 19px;
+  --font-size_6: 21px;
+  --font-size_8: 25px;
+  /* DEPRECATED END */
+}
+
+@custom-media --xs-media (width < 320px);
+@custom-media --sm-media (width >= 320px) and (width < 768px);
+@custom-media --md-media (width >= 768px) and (width < 1200px);