@bitrise/bitkit 10.35.2-alpha-chakra.2 → 10.36.0

package/src/Old/Base/Base.css

@@ -0,0 +1,337 @@
+.Base {
+  margin: 0;
+}
+
+.Base:first-child { margin-top: 0; }
+.Base:last-child { margin-bottom: 0; }
+
+.Base--container { position: relative; }
+
+.Base--absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.Base--absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.Base--max-width {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.Base--clickable { cursor: pointer; }
+
+.Base--overflow-hidden { overflow: hidden; }
+.Base--overflow-scroll { overflow: scroll; }
+.Base--overflow-auto { overflow: auto; }
+
+.Base--elevation-x1 { box-shadow: var(--shadow-elevation--x1); }
+.Base--elevation-x2 { box-shadow: var(--shadow-elevation--x2); }
+.Base--elevation-x3 { box-shadow: var(--shadow-elevation--x3); }
+
+.Base--margin-x0 { margin: 0; }
+.Base--margin-x1 { margin: var(--size--x1) 0; }
+.Base--margin-x2 { margin: var(--size--x2) 0; }
+.Base--margin-x3 { margin: var(--size--x3) 0; }
+.Base--margin-x4 { margin: var(--size--x4) 0; }
+.Base--margin-x5 { margin: var(--size--x5) 0; }
+.Base--margin-x6 { margin: var(--size--x6) 0; }
+.Base--margin-x8 { margin: var(--size--x8) 0; }
+.Base--margin-x10 { margin: var(--size--x10) 0; }
+.Base--margin-x12 { margin: var(--size--x12) 0; }
+.Base--margin-x16 { margin: var(--size--x16) 0; }
+
+.Base--padding-horizontal-x0 { padding-right: 0; padding-left: 0; }
+.Base--padding-horizontal-x1 { padding-right: var(--size--x1); padding-left: var(--size--x1); }
+.Base--padding-horizontal-x2 { padding-right: var(--size--x2); padding-left: var(--size--x2); }
+.Base--padding-horizontal-x3 { padding-right: var(--size--x3); padding-left: var(--size--x3); }
+.Base--padding-horizontal-x4 { padding-right: var(--size--x4); padding-left: var(--size--x4); }
+.Base--padding-horizontal-x5 { padding-right: var(--size--x5); padding-left: var(--size--x5); }
+.Base--padding-horizontal-x6 { padding-right: var(--size--x6); padding-left: var(--size--x6); }
+.Base--padding-horizontal-x8 { padding-right: var(--size--x8); padding-left: var(--size--x8); }
+.Base--padding-horizontal-x10 { padding-right: var(--size--x10); padding-left: var(--size--x10); }
+.Base--padding-horizontal-x12 { padding-right: var(--size--x12); padding-left: var(--size--x12); }
+.Base--padding-horizontal-x16 { padding-right: var(--size--x16); padding-left: var(--size--x16); }
+
+.Base--padding-vertical-x0 { padding-top: 0; padding-bottom: 0; }
+.Base--padding-vertical-x1 { padding-top: var(--size--x1); padding-bottom: var(--size--x1); }
+.Base--padding-vertical-x2 { padding-top: var(--size--x2); padding-bottom: var(--size--x2); }
+.Base--padding-vertical-x3 { padding-top: var(--size--x3); padding-bottom: var(--size--x3); }
+.Base--padding-vertical-x4 { padding-top: var(--size--x4); padding-bottom: var(--size--x4); }
+.Base--padding-vertical-x5 { padding-top: var(--size--x5); padding-bottom: var(--size--x5); }
+.Base--padding-vertical-x6 { padding-top: var(--size--x6); padding-bottom: var(--size--x6); }
+.Base--padding-vertical-x8 { padding-top: var(--size--x8); padding-bottom: var(--size--x8); }
+.Base--padding-vertical-x10 { padding-top: var(--size--x10); padding-bottom: var(--size--x10); }
+.Base--padding-vertical-x12 { padding-top: var(--size--x12); padding-bottom: var(--size--x12); }
+.Base--padding-vertical-x16 { padding-top: var(--size--x16); padding-bottom: var(--size--x16); }
+
+.Base--border-width-x1,
+.Base--border-width-x2,
+.Base--border-width-x3 {
+  border-style: solid;
+}
+
+.Base--border-width-x1 { border-width: 0.0625rem; }
+.Base--border-width-x2 { border-width: 0.125rem; }
+.Base--border-width-x3 { border-width: 0.1875rem; }
+
+.Base--border-radius-x1 { border-radius: var(--size--x1); }
+.Base--border-radius-x2 { border-radius: var(--size--x2); }
+.Base--border-radius-x4 { border-radius: var(--size--x4); }
+.Base--border-radius-rounded { border-radius: 50%; }
+
+.Base--border-color-white { border-color: var(--color-white); }
+.Base--border-color-black { border-color: var(--color-black); }
+
+.Base--border-color-gray-1 { border-color: var(--color-gray--1); }
+.Base--border-color-gray-2 { border-color: var(--color-gray--2); }
+.Base--border-color-gray-3 { border-color: var(--color-gray--3); }
+.Base--border-color-gray-4 { border-color: var(--color-gray--4); }
+.Base--border-color-gray-5 { border-color: var(--color-gray--5); }
+.Base--border-color-gray-6 { border-color: var(--color-gray--6); }
+.Base--border-color-gray-7 { border-color: var(--color-gray--7); }
+.Base--border-color-gray-8 { border-color: var(--color-gray--8); }
+
+.Base--border-color-aqua-1 { border-color: var(--color-aqua--1); }
+.Base--border-color-aqua-2 { border-color: var(--color-aqua--2); }
+.Base--border-color-aqua-3 { border-color: var(--color-aqua--3); }
+.Base--border-color-aqua-4 { border-color: var(--color-aqua--4); }
+.Base--border-color-aqua-5 { border-color: var(--color-aqua--5); }
+
+.Base--border-color-grape-1 { border-color: var(--color-grape--1); }
+.Base--border-color-grape-2 { border-color: var(--color-grape--2); }
+.Base--border-color-grape-3 { border-color: var(--color-grape--3); }
+.Base--border-color-grape-4 { border-color: var(--color-grape--4); }
+.Base--border-color-grape-5 { border-color: var(--color-grape--5); }
+
+.Base--border-color-eggplant { border-color: var(--color-eggplant); }
+
+.Base--border-color-red-1 { border-color: var(--color-red--1); }
+.Base--border-color-red-2 { border-color: var(--color-red--2); }
+.Base--border-color-red-3 { border-color: var(--color-red--3); }
+.Base--border-color-red-4 { border-color: var(--color-red--4); }
+.Base--border-color-red-5 { border-color: var(--color-red--5); }
+
+.Base--border-color-orange-1 { border-color: var(--color-orange--1); }
+.Base--border-color-orange-2 { border-color: var(--color-orange--2); }
+.Base--border-color-orange-3 { border-color: var(--color-orange--3); }
+.Base--border-color-orange-4 { border-color: var(--color-orange--4); }
+.Base--border-color-orange-5 { border-color: var(--color-orange--5); }
+
+.Base--border-color-yellow-1 { border-color: var(--color-yellow--1); }
+.Base--border-color-yellow-2 { border-color: var(--color-yellow--2); }
+.Base--border-color-yellow-3 { border-color: var(--color-yellow--3); }
+.Base--border-color-yellow-4 { border-color: var(--color-yellow--4); }
+.Base--border-color-yellow-5 { border-color: var(--color-yellow--5); }
+
+.Base--border-color-green-1 { border-color: var(--color-green--1); }
+.Base--border-color-green-2 { border-color: var(--color-green--2); }
+.Base--border-color-green-3 { border-color: var(--color-green--3); }
+.Base--border-color-green-4 { border-color: var(--color-green--4); }
+.Base--border-color-green-5 { border-color: var(--color-green--5); }
+
+.Base--border-color-blue-1 { border-color: var(--color-blue--1); }
+.Base--border-color-blue-2 { border-color: var(--color-blue--2); }
+.Base--border-color-blue-3 { border-color: var(--color-blue--3); }
+.Base--border-color-blue-4 { border-color: var(--color-blue--4); }
+.Base--border-color-blue-5 { border-color: var(--color-blue--5); }
+
+.Base--border-color-darkblue-1 { border-color: var(--color-darkblue--1); }
+.Base--border-color-darkblue-2 { border-color: var(--color-darkblue--2); }
+.Base--border-color-darkblue-3 { border-color: var(--color-darkblue--3); }
+.Base--border-color-darkblue-4 { border-color: var(--color-darkblue--4); }
+.Base--border-color-darkblue-5 { border-color: var(--color-darkblue--5); }
+
+.Base--border-color-violet-1 { border-color: var(--color-violet--1); }
+.Base--border-color-violet-2 { border-color: var(--color-violet--2); }
+.Base--border-color-violet-3 { border-color: var(--color-violet--3); }
+.Base--border-color-violet-4 { border-color: var(--color-violet--4); }
+.Base--border-color-violet-5 { border-color: var(--color-violet--5); }
+
+.Base--background-color-white { background-color: var(--color-white); }
+.Base--background-color-black { background-color: var(--color-black); }
+
+.Base--background-color-gray-1 { background-color: var(--color-gray--1); }
+.Base--background-color-gray-2 { background-color: var(--color-gray--2); }
+.Base--background-color-gray-3 { background-color: var(--color-gray--3); }
+.Base--background-color-gray-4 { background-color: var(--color-gray--4); }
+.Base--background-color-gray-5 { background-color: var(--color-gray--5); }
+.Base--background-color-gray-6 { background-color: var(--color-gray--6); }
+.Base--background-color-gray-7 { background-color: var(--color-gray--7); }
+.Base--background-color-gray-8 { background-color: var(--color-gray--8); }
+
+.Base--background-color-aqua-1 { background-color: var(--color-aqua--1); }
+.Base--background-color-aqua-2 { background-color: var(--color-aqua--2); }
+.Base--background-color-aqua-3 { background-color: var(--color-aqua--3); }
+.Base--background-color-aqua-4 { background-color: var(--color-aqua--4); }
+.Base--background-color-aqua-5 { background-color: var(--color-aqua--5); }
+
+.Base--background-color-grape-1 { background-color: var(--color-grape--1); }
+.Base--background-color-grape-2 { background-color: var(--color-grape--2); }
+.Base--background-color-grape-3 { background-color: var(--color-grape--3); }
+.Base--background-color-grape-4 { background-color: var(--color-grape--4); }
+.Base--background-color-grape-5 { background-color: var(--color-grape--5); }
+
+.Base--background-color-eggplant { background-color: var(--color-eggplant); }
+
+.Base--background-color-red-1 { background-color: var(--color-red--1); }
+.Base--background-color-red-2 { background-color: var(--color-red--2); }
+.Base--background-color-red-3 { background-color: var(--color-red--3); }
+.Base--background-color-red-4 { background-color: var(--color-red--4); }
+.Base--background-color-red-5 { background-color: var(--color-red--5); }
+
+.Base--background-color-orange-1 { background-color: var(--color-orange--1); }
+.Base--background-color-orange-2 { background-color: var(--color-orange--2); }
+.Base--background-color-orange-3 { background-color: var(--color-orange--3); }
+.Base--background-color-orange-4 { background-color: var(--color-orange--4); }
+.Base--background-color-orange-5 { background-color: var(--color-orange--5); }
+
+.Base--background-color-yellow-1 { background-color: var(--color-yellow--1); }
+.Base--background-color-yellow-2 { background-color: var(--color-yellow--2); }
+.Base--background-color-yellow-3 { background-color: var(--color-yellow--3); }
+.Base--background-color-yellow-4 { background-color: var(--color-yellow--4); }
+.Base--background-color-yellow-5 { background-color: var(--color-yellow--5); }
+
+.Base--background-color-green-1 { background-color: var(--color-green--1); }
+.Base--background-color-green-2 { background-color: var(--color-green--2); }
+.Base--background-color-green-3 { background-color: var(--color-green--3); }
+.Base--background-color-green-4 { background-color: var(--color-green--4); }
+.Base--background-color-green-5 { background-color: var(--color-green--5); }
+
+.Base--background-color-blue-1 { background-color: var(--color-blue--1); }
+.Base--background-color-blue-2 { background-color: var(--color-blue--2); }
+.Base--background-color-blue-3 { background-color: var(--color-blue--3); }
+.Base--background-color-blue-4 { background-color: var(--color-blue--4); }
+.Base--background-color-blue-5 { background-color: var(--color-blue--5); }
+
+.Base--background-color-darkblue-1 { background-color: var(--color-darkblue--1); }
+.Base--background-color-darkblue-2 { background-color: var(--color-darkblue--2); }
+.Base--background-color-darkblue-3 { background-color: var(--color-darkblue--3); }
+.Base--background-color-darkblue-4 { background-color: var(--color-darkblue--4); }
+.Base--background-color-darkblue-5 { background-color: var(--color-darkblue--5); }
+
+.Base--background-color-violet-1 { background-color: var(--color-violet--1); }
+.Base--background-color-violet-2 { background-color: var(--color-violet--2); }
+.Base--background-color-violet-3 { background-color: var(--color-violet--3); }
+.Base--background-color-violet-4 { background-color: var(--color-violet--4); }
+.Base--background-color-violet-5 { background-color: var(--color-violet--5); }
+
+.Base--background-color-neutral-95 { background-color: var(--colors-neutral-95, #f6f4f6); }
+.Base--background-color-neutral-40 { background-color: var(--colors-neutral-40, #6b6071); }
+
+.Base--background-color-purple-95 { background-color: var(--colors-purple-95, #f9f2fd); }
+.Base--background-color-purple-40 { background-color: var(--colors-purple-40, #7b3ba5); }
+
+.Base--background-color-red-95 { background-color: var(--colors-red-95, #fff0f3); }
+.Base--background-color-red-40 { background-color: var(--colors-red-40, #a91e2e); }
+
+.Base--background-color-yellow-95 { background-color: var(--colors-yellow-95, #fff6d1); }
+.Base--background-color-yellow-40 { background-color: var(--colors-yellow-40, #875b00); }
+
+.Base--background-color-green-95 { background-color: var(--colors-green-95, #eef9f1); }
+.Base--background-color-green-40 { background-color: var(--colors-green-40, #167231); }
+
+.Base--background-color-turquoise-95 { background-color: var(--colors-turquoise-95, #e9fbf9); }
+.Base--background-color-turquoise-40 { background-color: var(--colors-turquoise-40, #007366); }
+
+.Base--background-color-blue-95 { background-color: var(--colors-blue-95, #ecf8fd); }
+.Base--background-color-blue-40 { background-color: var(--colors-blue-40, #1066ac); }
+
+.Base--text-color-white { color: var(--color-white); }
+.Base--text-color-black { color: var(--color-black); }
+
+.Base--text-color-gray-1 { color: var(--color-gray--1); }
+.Base--text-color-gray-2 { color: var(--color-gray--2); }
+.Base--text-color-gray-3 { color: var(--color-gray--3); }
+.Base--text-color-gray-4 { color: var(--color-gray--4); }
+.Base--text-color-gray-5 { color: var(--color-gray--5); }
+.Base--text-color-gray-6 { color: var(--color-gray--6); }
+.Base--text-color-gray-7 { color: var(--color-gray--7); }
+.Base--text-color-gray-8 { color: var(--color-gray--8); }
+
+.Base--text-color-aqua-1 { color: var(--color-aqua--1); }
+.Base--text-color-aqua-2 { color: var(--color-aqua--2); }
+.Base--text-color-aqua-3 { color: var(--color-aqua--3); }
+.Base--text-color-aqua-4 { color: var(--color-aqua--4); }
+.Base--text-color-aqua-5 { color: var(--color-aqua--5); }
+
+.Base--text-color-grape-1 { color: var(--color-grape--1); }
+.Base--text-color-grape-2 { color: var(--color-grape--2); }
+.Base--text-color-grape-3 { color: var(--color-grape--3); }
+.Base--text-color-grape-4 { color: var(--color-grape--4); }
+.Base--text-color-grape-5 { color: var(--color-grape--5); }
+
+.Base--text-color-eggplant { color: var(--color-eggplant); }
+
+.Base--text-color-red-1 { color: var(--color-red--1); }
+.Base--text-color-red-2 { color: var(--color-red--2); }
+.Base--text-color-red-3 { color: var(--color-red--3); }
+.Base--text-color-red-4 { color: var(--color-red--4); }
+.Base--text-color-red-5 { color: var(--color-red--5); }
+
+.Base--text-color-orange-1 { color: var(--color-orange--1); }
+.Base--text-color-orange-2 { color: var(--color-orange--2); }
+.Base--text-color-orange-3 { color: var(--color-orange--3); }
+.Base--text-color-orange-4 { color: var(--color-orange--4); }
+.Base--text-color-orange-5 { color: var(--color-orange--5); }
+
+.Base--text-color-yellow-1 { color: var(--color-yellow--1); }
+.Base--text-color-yellow-2 { color: var(--color-yellow--2); }
+.Base--text-color-yellow-3 { color: var(--color-yellow--3); }
+.Base--text-color-yellow-4 { color: var(--color-yellow--4); }
+.Base--text-color-yellow-5 { color: var(--color-yellow--5); }
+
+.Base--text-color-green-1 { color: var(--color-green--1); }
+.Base--text-color-green-2 { color: var(--color-green--2); }
+.Base--text-color-green-3 { color: var(--color-green--3); }
+.Base--text-color-green-4 { color: var(--color-green--4); }
+.Base--text-color-green-5 { color: var(--color-green--5); }
+
+.Base--text-color-blue-1 { color: var(--color-blue--1); }
+.Base--text-color-blue-2 { color: var(--color-blue--2); }
+.Base--text-color-blue-3 { color: var(--color-blue--3); }
+.Base--text-color-blue-4 { color: var(--color-blue--4); }
+.Base--text-color-blue-5 { color: var(--color-blue--5); }
+
+.Base--text-color-darkblue-1 { color: var(--color-darkblue--1); }
+.Base--text-color-darkblue-2 { color: var(--color-darkblue--2); }
+.Base--text-color-darkblue-3 { color: var(--color-darkblue--3); }
+.Base--text-color-darkblue-4 { color: var(--color-darkblue--4); }
+.Base--text-color-darkblue-5 { color: var(--color-darkblue--5); }
+
+.Base--text-color-violet-1 { color: var(--color-violet--1); }
+.Base--text-color-violet-2 { color: var(--color-violet--2); }
+.Base--text-color-violet-3 { color: var(--color-violet--3); }
+.Base--text-color-violet-4 { color: var(--color-violet--4); }
+.Base--text-color-violet-5 { color: var(--color-violet--5); }
+
+.Base--text-color-neutral-95 { color: var(--colors-neutral-95, #f6f4f6); }
+.Base--text-color-neutral-40 { color: var(--colors-neutral-40, #6b6071); }
+
+.Base--text-color-purple-95 { color: var(--colors-purple-95, #f9f2fd); }
+.Base--text-color-purple-40 { color: var(--colors-purple-40, #7b3ba5); }
+
+.Base--text-color-red-95 { color: var(--colors-red-95, #fff0f3); }
+.Base--text-color-red-40 { color: var(--colors-red-40, #a91e2e); }
+
+.Base--text-color-yellow-95 { color: var(--colors-yellow-95, #fff6d1); }
+.Base--text-color-yellow-40 { color: var(--colors-yellow-40, #875b00); }
+
+.Base--text-color-green-95 { color: var(--colors-green-95, #eef9f1); }
+.Base--text-color-green-40 { color: var(--colors-green-40, #167231); }
+
+.Base--text-color-turquoise-95 { color: var(--colors-turquoise-95, #e9fbf9); }
+.Base--text-color-turquoise-40 { color: var(--colors-turquoise-40, #007366); }
+
+.Base--text-color-blue-95 { color: var(--colors-blue-95, #ecf8fd); }
+.Base--text-color-blue-40 { color: var(--colors-blue-40, #1066ac); }
+

package/src/Old/Base/Base.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import './Base.css';
+
+export type TypeBorderRadius = 'x1' | 'x2' | 'x4' | 'rounded';
+
+export const newToOld = {
+  'neutral.100': 'white',
+  'neutral.10': 'black',
+  'neutral.95': 'gray-1',
+  'neutral.93': 'gray-2',
+  'neutral.90': 'gray-3',
+  'neutral.80': 'gray-4',
+  'neutral.70': 'gray-5',
+  'neutral.50': 'gray-6',
+  'neutral.40': 'gray-7',
+  'neutral.30': 'gray-8',
+  'turquoise.95': 'aqua-1',
+  'turquoise.80': 'aqua-2',
+  'turquoise.70': 'aqua-3',
+  'turquoise.60': 'aqua-4',
+  'turquoise.50': 'aqua-5',
+  'purple.95': 'grape-1',
+  'purple.70': 'grape-2',
+  'purple.50': 'grape-3',
+  'purple.30': 'grape-4',
+  'purple.10': 'grape-5',
+  'purple.40': 'eggplant',
+  'red.93': 'red-1',
+  'red.70': 'red-2',
+  'red.50': 'red-3',
+  'red.40': 'red-4',
+  'red.30': 'red-5',
+  'yellow.95': 'yellow-1',
+  'yellow.90': 'yellow-2',
+  'yellow.80': 'yellow-3',
+  'yellow.70': 'yellow-4',
+  'yellow.40': 'yellow-5',
+  'green.95': 'green-1',
+  'green.80': 'green-2',
+  'green.60': 'green-3',
+  'green.50': 'green-4',
+  'green.40': 'green-5',
+  'blue.93': 'blue-1',
+  'blue.95': 'blue-95',
+  'blue.70': 'blue-2',
+  'blue.50': 'blue-3',
+  'blue.40': 'blue-4',
+  'blue.30': 'blue-5',
+  'blue.60': 'darkblue-2',
+  'blue.20': 'darkblue-4',
+  'blue.10': 'darkblue-5',
+  'purple.20': 'violet-5',
+  'red.95': 'red-95',
+  'orange-3': 'orange-3',
+  'turquoise.40': 'turquoise-40',
+} as const;
+
+export type TypeColors = keyof typeof newToOld;
+
+export type TypeSizes = 'x0' | 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x8' | 'x10' | 'x12' | 'x16';
+
+export interface Props {
+  /**
+   * Sets the type of component to be rendered. Can be a
+   * string for an HTML tag or a React component.
+   * */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component?: string | React.ComponentType<any>;
+  /** Absolute positioning, useful for quick centering in a relative surrounding. */
+  absolute?: boolean | 'center';
+  /** Sets the background color of any of the valid swatch colors. */
+  backgroundColor?: TypeColors;
+  /** Sets the border color of any of the valid swatch colors. */
+  borderColor?: TypeColors;
+  /** Sets the border radius to a multiple value. E.g. 'x1'. */
+  borderRadius?: TypeBorderRadius;
+  /** Sets the border radius to a multiple value. E.g. 'x1'. */
+  borderWidth?: 'x1' | 'x2' | 'x3';
+  /** Standard class name property. */
+  className?: string;
+  /** Sets the border radius to a multiple value. E.g. x1 */
+  clickable?: boolean;
+  /** Sets relative positioning */
+  container?: boolean;
+  /** Sets an elevated style with box-shadow, with a multiple value. E.g. x1 */
+  elevation?: 'x1' | 'x2' | 'x3';
+  /** Sets inline height styling  */
+  height?: number | string;
+  /** Similar to other libraries, an alias to pass a ref to the final React element. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  innerRef?: React.Ref<any>;
+  /** Sets the margin to a multiple value. E.g. 'x1'. */
+  margin?: TypeSizes;
+  /** Sets inline max-height styling  */
+  maxHeight?: number | string;
+  /** Sets inline max-width styling  */
+  maxWidth?: number | string;
+  /** Sets inline min-height styling  */
+  minHeight?: number | string;
+  /** Sets inline min-width styling  */
+  minWidth?: number | string;
+  /** Sets the vertical and horizontal padding to a multiple value. E.g. 'x1'. */
+  padding?: TypeSizes;
+  /** Sets the horizontal padding to a multiple value. E.g. 'x1'. */
+  paddingHorizontal?: TypeSizes;
+  /** Sets the vertical padding to a multiple value. E.g. 'x1'. */
+  paddingVertical?: TypeSizes;
+  /** Sets the overflow */
+  overflow?: 'hidden' | 'scroll' | 'auto';
+  /** Standard style property. */
+  style?: React.CSSProperties | { [key: string]: number | string };
+  /** @ignore */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref?: React.Ref<any>;
+  /** Sets the font color of any of the valid swatch colors. */
+  textColor?: TypeColors;
+  /** Sets inline width styling  */
+  width?: number | string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+/**
+ * The Base component is the end of the line for all components and
+ * provides general and utility like styling.
+ * */
+const Base: React.FunctionComponent<Props> = (props: Props) => {
+  const {
+    Component,
+    absolute,
+    backgroundColor,
+    borderColor,
+    borderWidth = borderColor ? 'x1' : undefined,
+    borderRadius,
+    children,
+    className,
+    clickable,
+    container,
+    elevation,
+    height,
+    innerRef,
+    margin,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding,
+    paddingHorizontal = padding,
+    paddingVertical = padding,
+    overflow,
+    style,
+    textColor,
+    width,
+    ...rest
+  } = props;
+
+  const FinalComponent = Component || 'div';
+  const classes = classnames(
+    'Base',
+    {
+      'Base--absolute': absolute === true,
+      [`Base--absolute-${absolute}`]: typeof absolute === 'string',
+      [`Base--background-color-${newToOld[backgroundColor!]}`]: backgroundColor,
+      [`Base--border-radius-${borderRadius}`]: borderRadius,
+      [`Base--border-color-${newToOld[borderColor!]}`]: borderColor,
+      [`Base--border-width-${borderWidth}`]: borderWidth,
+      'Base--clickable': clickable,
+      'Base--container': container,
+      [`Base--elevation-${elevation}`]: elevation,
+      [`Base--margin-${margin}`]: margin,
+      'Base--max-width': maxWidth,
+      [`Base--overflow-${overflow}`]: overflow,
+      [`Base--padding-horizontal-${paddingHorizontal}`]: paddingHorizontal,
+      [`Base--padding-vertical-${paddingVertical}`]: paddingVertical,
+      [`Base--text-color-${newToOld[textColor!]}`]: textColor,
+    },
+    className,
+  );
+
+  // Work around for findDOMNode area causing constant renders. Forwards
+  // refs for component compositions.
+  if (typeof FinalComponent === 'string') {
+    rest.ref = innerRef;
+    delete rest.innerRef;
+  }
+
+  return (
+    <FinalComponent
+      {...rest}
+      className={classes}
+      style={{ ...style, height, maxHeight, maxWidth, minHeight, minWidth, width }}
+    >
+      {children}
+    </FinalComponent>
+  );
+};
+
+export default Base;

package/src/Old/Flex/Flex.css

@@ -0,0 +1,105 @@
+/* stylelint-disable selector-max-universal */
+
+.Flex { flex: 0 0 auto; }
+
+.Flex--grow,
+.Flex--grow-x1 {
+  flex-grow: 1;
+}
+
+.Flex--grow-x2 { flex-grow: 2; }
+.Flex--grow-x3 { flex-grow: 3; }
+.Flex--grow-x4 { flex-grow: 4; }
+
+.Flex--shrink,
+.Flex--shrink-x1,
+.Flex--shrink-x2,
+.Flex--shrink-x3,
+.Flex--shrink-x4 {
+  min-width: 0;
+}
+
+.Flex--shrink,
+.Flex--shrink-x1 {
+  flex-shrink: 1;
+}
+
+.Flex--shrink-x2 { flex-shrink: 2; }
+.Flex--shrink-x3 { flex-shrink: 3; }
+.Flex--shrink-x4 { flex-shrink: 4; }
+
+.Flex--initial-none      { flex-basis: 0%; }
+.Flex--initial-content   { flex-basis: auto; }
+.Flex--initial-container { flex-basis: 100%; }
+
+.Flex--horizontal,
+.Flex--vertical {
+  display: flex;
+}
+
+.Flex--wrap { flex-wrap: wrap; }
+
+.Flex--horizontal > .Flex--initial-none { width: 0; }
+.Flex--vertical > .Flex--initial-none { height: 0; }
+
+.Flex--horizontal { flex-direction: row; }
+.Flex--vertical   { flex-direction: column; }
+.Flex--horizontal.Flex--reverse { flex-direction: row-reverse; }
+.Flex--vertical.Flex--reverse   { flex-direction: column-reverse; }
+
+.Flex--align-self-start  { align-self: flex-start; }
+.Flex--align-self-middle { align-self: center; }
+.Flex--align-self-end    { align-self: flex-end; }
+
+.Flex--horizontal.Flex--align-horz-start   { justify-content: flex-start; }
+.Flex--horizontal.Flex--align-horz-middle  { justify-content: center; }
+.Flex--horizontal.Flex--align-horz-end     { justify-content: flex-end; }
+.Flex--horizontal.Flex--align-horz-around  { justify-content: space-around; }
+.Flex--horizontal.Flex--align-horz-between { justify-content: space-between; }
+
+.Flex--horizontal.Flex--align-vert-start    { align-items: flex-start; }
+.Flex--horizontal.Flex--align-vert-middle   { align-items: center; }
+.Flex--horizontal.Flex--align-vert-end      { align-items: flex-end; }
+.Flex--horizontal.Flex--align-vert-baseline { align-items: baseline; }
+
+.Flex--vertical.Flex--align-horz-start  { align-items: flex-start; }
+.Flex--vertical.Flex--align-horz-middle { align-items: center; }
+.Flex--vertical.Flex--align-horz-end    { align-items: flex-end; }
+
+.Flex--vertical.Flex--align-vert-start   { justify-content: flex-start; }
+.Flex--vertical.Flex--align-vert-middle  { justify-content: center; }
+.Flex--vertical.Flex--align-vert-end     { justify-content: flex-end; }
+.Flex--vertical.Flex--align-vert-around  { justify-content: space-around; }
+.Flex--vertical.Flex--align-vert-between { justify-content: space-between; }
+
+.Flex--vertical.Flex--gap-x1 > * { margin: calc(var(--size--x1) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x2 > * { margin: calc(var(--size--x2) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x3 > * { margin: calc(var(--size--x3) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x4 > * { margin: calc(var(--size--x4) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x5 > * { margin: calc(var(--size--x5) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x6 > * { margin: calc(var(--size--x6) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x8 > * { margin: calc(var(--size--x8) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x10 > * { margin: calc(var(--size--x10) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x12 > * { margin: calc(var(--size--x12) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x16 > * { margin: calc(var(--size--x16) * 0.5) 0; }
+
+.Flex--horizontal.Flex--gap-x1 > * { margin: 0 calc(var(--size--x1) * 0.5); }
+.Flex--horizontal.Flex--gap-x2 > * { margin: 0 calc(var(--size--x2) * 0.5); }
+.Flex--horizontal.Flex--gap-x3 > * { margin: 0 calc(var(--size--x3) * 0.5); }
+.Flex--horizontal.Flex--gap-x4 > * { margin: 0 calc(var(--size--x4) * 0.5); }
+.Flex--horizontal.Flex--gap-x5 > * { margin: 0 calc(var(--size--x5) * 0.5); }
+.Flex--horizontal.Flex--gap-x6 > * { margin: 0 calc(var(--size--x6) * 0.5); }
+.Flex--horizontal.Flex--gap-x8 > * { margin: 0 calc(var(--size--x8) * 0.5); }
+.Flex--horizontal.Flex--gap-x10 > * { margin: 0 calc(var(--size--x10) * 0.5); }
+.Flex--horizontal.Flex--gap-x12 > * { margin: 0 calc(var(--size--x12) * 0.5); }
+.Flex--horizontal.Flex--gap-x16 > * { margin: 0 calc(var(--size--x16) * 0.5); }
+
+.Flex--gapped.Flex--vertical:not(.Flex--reverse) > *:first-child { margin-top: 0; }
+.Flex--gapped.Flex--vertical:not(.Flex--reverse) > *:last-child { margin-bottom: 0; }
+.Flex--gapped.Flex--vertical.Flex--reverse > *:first-child { margin-bottom: 0; }
+.Flex--gapped.Flex--vertical.Flex--reverse > *:last-child { margin-top: 0; }
+
+.Flex--gapped.Flex--horizontal:not(.Flex--reverse) > *:first-child { margin-left: 0; }
+.Flex--gapped.Flex--horizontal:not(.Flex--reverse) > *:last-child { margin-right: 0; }
+.Flex--gapped.Flex--horizontal.Flex--reverse > *:first-child { margin-right: 0; }
+.Flex--gapped.Flex--horizontal.Flex--reverse > *:last-child { margin-left: 0; }