@semcore/ui 13.0.2 → 13.1.1

package/CHANGELOG.md

@@ -1,3 +1,129 @@
+## [13.1.1] - 2022-11-09
+
+### @semcore/base-trigger
+
+- **Fixed** Fixed `FilterTrigger` accessability.
+
+### @semcore/ellipsis
+
+- **Added** Component was added to export of `@semcore/ui`.
+
+### @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/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
+
+- **Added** Added a property that removes the `overflow=hidden` setting.
+- **Changed** Returning the original `overflow` after the animation has passed.
+
+### @semcore/button
+
+- **Fixed** Lazy checks for necessity of `aria-label` in non production environment.
+
+### @semcore/carousel
+
+- **Fixed** Fixed screen readers support.
+
+### @semcore/checkbox
+
+- **Fixed** Fixed displaying in unchecked and disabled state.
+
+### @semcore/color-picker
+
+- **Fixed** Fixed screen readers support.
+
+### @semcore/d3-chart
+
+- **Fixed** Fixed hover and active animated for `Donut` chart.
+- **Fixed** Fixed display of minimum bar size in `StackBar`.
+- **Added** Added display of minimum bar size in `HorizontalBar`.
+- **Fixed** Fixed inner radius for `Donut` chart. It began to equal what is indicated in the `innerRadius` prop.
+- **Fixed** Fixed reference lines were missing dashed style.
+- **Fixed** Fixed typings of render functions.
+
+### @semcore/data-table
+
+- **Added** Support for inheritance of `alignItems` prop from header to cells.
+- **Added** Added `disabledScroll` property that disables scrolling in tables.
+- **Added** Added the ability(`flex="inherit"`) to inherit the size from the top table.
+
+### @semcore/date-picker
+
+- **Fixed** Removed lock on fixed version of `@semcore/input`.
+
+### @semcore/errors
+
+- **Fixed** Fixed paddings.
+
+### @semcore/icon
+
+- **Fixed** Lazy checks for necessity of `aria-label` in non production environment.
+- **Changed** Updated `Text` icon.
+- **Added** Added icon `GoogleAds`
+
+### @semcore/inline-edit
+
+- **Fixed** Removed wrong aria role and added needed aria label.
+
+### @semcore/inline-input
+
+- **Added** Added accessability needed aria label.
+
+### @semcore/input-mask
+
+- **Fixed** Fixed mask and text line-height mismatch.
+- **Added** Allowed to pass children.
+
+### @semcore/link
+
+- **Fixed** Lazy checks for necessity of `aria-label` in non production environment.
+
+### @semcore/modal
+
+- **Changed** Updated `focus-lock`.
+
+### @semcore/popper
+
+- **Changed** Updated `focus-lock`.
+
+### @semcore/side-panel
+
+- **Changed** Updated `focus-lock`.
+
+### @semcore/time-picker
+
+- **Fixed** Fixed that some secret combination of arrows pressing was causing infinite focus call and temporary freeze of browser.
+- **Fixed** Fixed Screen readers support.
+
+### @semcore/utils
+
+- **Added** Added `hasLabels` utility.
+- **Fixed** Removed `@types/react`, `@types/react-dom` and `@types/node` from package direct dependencies.
+
 ## [13.0.2] - 2022-10-20
 
 ### @semcore/base-trigger

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/GoogleAds/l/index.cjs

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

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

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

package/icon/GoogleAds/l/index.js

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

package/icon/GoogleAds/l/index.mjs

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

package/icon/GoogleAds/m/index.cjs

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

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

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

package/icon/GoogleAds/m/index.js

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

package/icon/GoogleAds/m/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/GoogleAds/m';
+export * from '@semcore/icon/GoogleAds/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semcore/ui",
-  "version": "13.0.2",
+  "version": "13.1.1",
   "license": "MIT",
   "module": "./index.js",
   "sideEffects": false,
@@ -10,77 +10,78 @@
     "test": "jest"
   },
   "dependencies": {
-    "@semcore/accordion": "4.1.2",
-    "@semcore/animation": "1.6.2",
-    "@semcore/badge": "3.2.2",
-    "@semcore/base-trigger": "3.2.2",
-    "@semcore/breadcrumbs": "4.2.2",
-    "@semcore/breakpoints": "1.2.2",
-    "@semcore/button": "4.2.2",
-    "@semcore/card": "4.1.2",
-    "@semcore/carousel": "2.1.2",
-    "@semcore/checkbox": "6.1.2",
-    "@semcore/color-picker": "1.2.2",
-    "@semcore/core": "1.13.3",
-    "@semcore/counter": "2.1.2",
-    "@semcore/data-table": "3.3.2",
-    "@semcore/date-picker": "3.4.2",
-    "@semcore/divider": "3.1.2",
-    "@semcore/dot": "4.1.2",
-    "@semcore/drag-and-drop": "2.1.2",
-    "@semcore/dropdown": "3.2.2",
-    "@semcore/dropdown-menu": "3.3.1",
-    "@semcore/d3-chart": "2.4.2",
+    "@semcore/accordion": "4.1.7",
+    "@semcore/animation": "1.7.1",
+    "@semcore/badge": "3.2.3",
+    "@semcore/base-trigger": "3.2.6",
+    "@semcore/breadcrumbs": "4.2.6",
+    "@semcore/breakpoints": "1.2.3",
+    "@semcore/button": "4.2.3",
+    "@semcore/card": "4.1.6",
+    "@semcore/carousel": "2.1.7",
+    "@semcore/checkbox": "6.1.4",
+    "@semcore/color-picker": "1.2.7",
+    "@semcore/core": "1.13.4",
+    "@semcore/counter": "2.1.3",
+    "@semcore/data-table": "3.5.1",
+    "@semcore/date-picker": "3.4.9",
+    "@semcore/divider": "3.1.3",
+    "@semcore/dot": "4.1.4",
+    "@semcore/drag-and-drop": "2.1.6",
+    "@semcore/dropdown": "3.2.4",
+    "@semcore/dropdown-menu": "3.3.3",
+    "@semcore/d3-chart": "2.4.10",
+    "@semcore/ellipsis": "1.0.3",
     "@semcore/email": "1.0.2",
-    "@semcore/errors": "3.5.2",
-    "@semcore/feature-popover": "3.1.2",
-    "@semcore/feedback-form": "5.2.2",
-    "@semcore/flags": "3.1.2",
-    "@semcore/flex-box": "4.6.2",
-    "@semcore/format-text": "3.1.2",
-    "@semcore/fullscreen-modal": "2.1.2",
-    "@semcore/grid": "4.2.2",
-    "@semcore/icon": "3.0.2",
-    "@semcore/illustration": "1.3.2",
-    "@semcore/inline-input": "3.1.2",
-    "@semcore/inline-edit": "2.1.2",
-    "@semcore/input": "3.2.2",
-    "@semcore/input-mask": "4.3.2",
-    "@semcore/input-number": "4.1.2",
-    "@semcore/input-tags": "3.2.2",
-    "@semcore/link": "4.2.2",
-    "@semcore/modal": "3.1.2",
-    "@semcore/neighbor-location": "3.1.2",
-    "@semcore/notice": "4.2.2",
-    "@semcore/notice-global": "1.2.2",
-    "@semcore/notice-bubble": "4.2.2",
-    "@semcore/outside-click": "2.5.2",
-    "@semcore/pagination": "3.3.2",
-    "@semcore/pills": "4.3.2",
-    "@semcore/popper": "4.13.2",
-    "@semcore/portal": "2.4.2",
-    "@semcore/product-head": "3.1.2",
-    "@semcore/progress-bar": "3.2.2",
-    "@semcore/radio": "5.1.2",
-    "@semcore/scroll-area": "4.1.2",
-    "@semcore/select": "3.2.3",
-    "@semcore/side-panel": "2.1.2",
-    "@semcore/skeleton": "4.2.2",
-    "@semcore/slider": "3.2.2",
-    "@semcore/spin": "4.1.2",
-    "@semcore/spin-container": "6.1.2",
-    "@semcore/sticky": "2.3.2",
-    "@semcore/switch": "4.2.2",
-    "@semcore/tab-line": "3.1.2",
-    "@semcore/tab-panel": "3.1.2",
-    "@semcore/tag": "4.2.2",
-    "@semcore/textarea": "4.1.2",
-    "@semcore/time-picker": "3.2.1",
-    "@semcore/tooltip": "5.1.2",
-    "@semcore/typography": "4.2.2",
-    "@semcore/utils": "3.39.1",
-    "@semcore/widget-empty": "3.6.2",
-    "@semcore/wizard": "1.1.2"
+    "@semcore/errors": "3.5.4",
+    "@semcore/feature-popover": "3.1.8",
+    "@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.7",
+    "@semcore/grid": "4.2.3",
+    "@semcore/icon": "3.2.0",
+    "@semcore/illustration": "1.3.3",
+    "@semcore/inline-input": "3.1.6",
+    "@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.8",
+    "@semcore/neighbor-location": "3.1.3",
+    "@semcore/notice": "4.2.7",
+    "@semcore/notice-global": "1.2.7",
+    "@semcore/notice-bubble": "4.2.7",
+    "@semcore/outside-click": "2.5.3",
+    "@semcore/pagination": "3.3.7",
+    "@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.9",
+    "@semcore/side-panel": "2.1.8",
+    "@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.6",
+    "@semcore/textarea": "4.1.3",
+    "@semcore/time-picker": "3.2.8",
+    "@semcore/tooltip": "5.1.4",
+    "@semcore/typography": "4.2.6",
+    "@semcore/utils": "3.40.0",
+    "@semcore/widget-empty": "3.6.3",
+    "@semcore/wizard": "1.1.8"
   },
   "devDependencies": {
     "@types/react": "18.0.21",

package/utils/lib/hasLabels.cjs

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

package/utils/lib/hasLabels.d.ts

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

package/utils/lib/hasLabels.js

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

package/utils/lib/hasLabels.mjs

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

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(20%));
+  --keyborad-focus: var(--keyboard-focus);
+  --keyboard-focus-valid: 0px 0px 0px 3px color-mod(var(--green-400) a(20%));
+  --keyboard-focus-invalid: 0px 0px 0px 3px color-mod(var(--red-400) a(20%));
+
+  --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);