@openfin/ui-library 0.0.33

package/README.md

@@ -0,0 +1,260 @@
+# OpenFin UI Library
+
+**[openfin-ui.netlify.com](https://openfin-ui.netlify.com)** `pw: pizza`
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/8fc15443-c69c-473b-b5cf-c5dbc516b0bf/deploy-status)](https://app.netlify.com/sites/openfin-ui/deploys)
+
+## Installation
+
+This packaged library is privately managed with [GitHub Packages](https://github.com/features/packages), and can be installed via npm/yarn like any other npm package. All release versions can be viewed under the Packages section of this repo.
+
+### 1. Setup access to Github private package
+
+There are a few ways to do this, here's one way 👇
+
+```sh
+# .npmrc in downstream application repository consuming UI Library
+@openfin:registry=https://npm.pkg.github.com/
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+```sh
+# .zshrc or .bash_profile
+export GITHUB_TOKEN=<Your Github Personalized Access Token with READ access to this Repository>
+```
+
+### 2. Install the package
+
+```bash
+# Install the latest version
+$ yarn add @openfin/ui-library
+```
+
+```bash
+# Install a specific version
+$ yarn add @openfin/ui-library@v1.0.1
+```
+
+## Working in tandem on UI Library and Application
+
+Sometimes you may need to work on the `ui-library` alongside your own application. We use [yalc](https://www.npmjs.com/package/yalc) for this. It solves a few problems that `yarn link` creates and it's pretty intuitive
+
+### 1. Install and setup yalc
+
+```bash
+# Make sure yalc is installed globally
+$ npm i yalc -g
+
+# Set up yalc in ui-library
+$ cd ui-library/
+$ yalc publish
+
+# Add local ui-library package to your app
+$ cd ../myCoolApp/
+$ yalc add @openfin/ui-library
+```
+
+This links your local copy of UI Library to your app using symlinks and `package.json`.
+
+### 2. Working with yalc
+
+Once you're setup, subsequent changes in UI Library can be propagated across easily.
+
+After making changes in `ui-library`, run `yarn build && yalc push`. This will apply a version bump to the local yalc package respository. It will also update the package in your app directory, but you will most likely need to restart any development servers to see the changes.
+
+```sh
+# push updates from ui-library side to your app
+$ yarn build && yalc push
+```
+
+#### Known Issues
+
+- Storybook does not pick up changes after a `yalc push` and must be restarted
+
+## Using UI Library
+
+### Theme Provider
+
+The `ThemeProvider` is a component that provides theme information to the `ui-library` components nested deeply within your application. Make sure to include this above your application so your components will be styled properly.
+
+```javascript
+import { ThemeProvider } from '@openfin/ui-library';
+import MyApp from 'some/cool/place';
+
+const MyCoolAppContainer = () => (
+  <ThemeProvider>
+    <MyApp />
+  </ThemeProvider>
+);
+```
+
+## [Storybook](https://storybook.js.org)
+
+Great for exploring and experimenting with UI Library components. It's also a used for [testing our components](https://storybook.js.org/docs/react/workflows/unit-testing).
+
+### Storybook For Developers
+
+```bash
+$ yarn storybook
+```
+
+### Storybook For Designers
+
+Great for a quick look at the latest build, [check it out](https://openfin-ui.netlify.com)
+
+## Codesandbox.io
+
+Coming Soon, great tool for developer experimentation without the overhead of forking the library or integrating it into an existing application.
+
+`@TODO` Setup a Codesandbox Playground [PE-27](https://appoji.jira.com/browse/PE-10)
+
+## How to test
+
+```sh
+yarn test
+```
+
+## How to Contribute
+
+### 1. Enable the pre-push hook
+
+```sh
+touch .git/hooks/pre-push &&
+    printf "yarn git:pre-push" >> .git/hooks/pre-push &&
+    chmod +x .git/hooks/pre-push
+```
+
+### 2. Open a pull request 😎
+
+Pull requests are a great way to express an idea or need, if it's easier to "show" instead of "tell", go for it, propose a change!
+
+Also keep in mind, UI Library is a home of centralized common elements, **used by several products**. It's reasonable to expect PRs may spark conversations about the **essence of the change** and it's benefits and impact across the application ecosystem.
+
+Meaning: While there are no hard rules about what belongs in _our_ library, if a change is too opinionated or too specialized, it may make sense to leave it out. **A library that does less, is a lot easier to know and work with**.
+
+## Compiling the Library
+
+### `tsonfig.json`
+
+The base Typescript config.
+
+### `tsonfig.bundle.json`
+
+Extending base config used by `tsc` when bundling the library for a new release.
+
+### `tsonfig.storybook.json`
+
+Extending base config used by `Storybook` to quiet some extraneous warnings.
+
+## Versioning & Releasing
+
+### 1. Create a release branch
+
+Note the new release version, and create a branch from `main` solely for versioning:
+
+```sh
+# Fetch and merge latest main branch
+$ git checkout main && git pull
+
+# Create new release branch
+$ git checkout -b release/<new-version-number>
+
+# Commit new version
+$ npm version <major|minor|patch>
+
+# Push release branch remotely
+$ git push -u origin release/<new-version-number>
+```
+
+### 2. Create a pull request
+
+You should now be able to open a pull request with `release/<new-version-number>` against `main`. Get that approved and merged.
+
+### 3. Create a new release on Github
+
+Once your release branch is merged into main, you should now create a release through github:
+
+- Click [Create a New Release](https://github.com/openfin/ui-library/releases/new)
+- Enter the version name as the tag and the release title
+- Enter a description that includes all feature ticket numbers that were included since the previous release. Don't worry, you can always go back and edit it later.
+
+This triggers a Github Action to automatically build the latest version of the `ui-library` and package it for remote installation. Check the status of this task within this repo's actions tab.
+
+## Components
+
+### Elements
+
+- [Button](./src/components/elements/Button)
+- [Icon](./src/components/elements/Icon)
+- [Input](./src/components/elements/Input)
+- [Toggle](./src/components/elements/Toggle)
+
+### Layout
+
+- [Box](./src/components/layout/Box)
+
+### System
+
+- [GlobalStyles](./src/components/system/GlobalStyles)
+- [ThemeProvider](./src/components/system/ThemeProvider)
+- [Themes](./src/components/system/ThemeProvider/themes) (included OpenFin Themes)
+
+### [Typography](./src/components/typography)
+
+- Text
+- Heading
+
+## [Hooks](./src/hooks)
+
+- useMediaQuery
+- useLayoutMediaQuery
+- useColorScheme
+- useTheme
+
+## Variants
+
+### What are variants?
+
+Variants as a concept is shared with the Design team and [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial) and it's a way of describing the _variations_ of a given component.
+
+**In Figma**, variants are represented as a matrix of options mapped / instrumented into the design itself.
+
+**In UI Library**, variants are represented as a matrix of component props key:values mapped / instrumented into Styled Component css partials.
+
+This isn't a new idea, or proprietary to Figma, but it is a built-in first class construct in that software. It's **not** built into the Styled Components as a first class construct, we are creating it here in the UI Library as a novel way to mirror that visual mapping in component builds. It's syntactic sugar, an opinion for working with fragments of style using Styled Components.
+
+_It may be slightly more verbose with a bit of initial cognitive cost to represent component variations this way._ Let's commit to this pattern for now, to see it at scale, "in the wild". And let's also commit to continuing to evaluate it's usefulness. The goal is to offer a **semantic symmetry with design and build** that hopefuly translates to more consistent and stable products over a longer timeline.
+
+### Can I see an example of variants?
+
+Yes! [Button](./src/components/Button), [Icon](./src/components/Icon), and [Toggle](./src/components/Toggle) all implement variants in the UI Library mirroring the variants in Figma.
+
+### How does it work?
+
+```tsx
+// component.variants.ts
+export const variants = {
+  propName: {
+    propValueA: css`
+      /* CSS... */
+      color: red;
+    `,
+    propValueB: css`
+      /* CSS... */
+      color: blue;
+    `,
+  },
+};
+
+// component.tsx
+const Component = styled.div<{ propName: string }>`
+  /* Injects a CSS Partial matching prop name -> value */
+  ${getVariantCSS(variants, 'propName')};
+`;
+
+// Component with red text
+<Component someProp="propValueA" />
+
+// Component with blue text
+<Component someProp="propValueB" />
+```

package/dist/components/elements/Button/button.d.ts

@@ -0,0 +1,37 @@
+import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import { ButtonShape, ButtonSize, ButtonKind, ButtonLayout } from './button.variants';
+declare type ButtonPropsWithLabel = {
+    label: string;
+    children?: never;
+};
+declare type ButtonPropsWithChildren = {
+    label?: never;
+    children: ReactNode;
+};
+export declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & (ButtonPropsWithLabel | ButtonPropsWithChildren) & {
+    label?: string;
+    href?: string;
+    size?: keyof typeof ButtonSize;
+    shape?: keyof typeof ButtonShape;
+    kind?: keyof typeof ButtonKind;
+    layout?: keyof typeof ButtonLayout;
+    children?: ReactNode;
+};
+/**
+ * Button as Anchor
+ * @example <Button as="a" href="https://..."/>
+ *
+ * Button with Label
+ * @example <Button label="..."/>
+ *
+ * Button with Child Element
+ * @example <Button><Child></Button>
+ */
+export declare const Button: FC<ButtonProps>;
+/**
+ * ## Button Variants
+ */
+export declare const ButtonPrimary: FC<ButtonProps>;
+export declare const ButtonSecondary: FC<ButtonProps>;
+export declare const ButtonTertiary: FC<ButtonProps>;
+export {};

package/dist/components/elements/Button/button.js

@@ -0,0 +1,91 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonTertiary = exports.ButtonSecondary = exports.ButtonPrimary = exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("../../layout/Box");
+const helpers_1 = require("../../system/ThemeProvider/lib/helpers");
+const button_variants_1 = require("./button.variants");
+/**
+ * Button as Anchor
+ * @example <Button as="a" href="https://..."/>
+ *
+ * Button with Label
+ * @example <Button label="..."/>
+ *
+ * Button with Child Element
+ * @example <Button><Child></Button>
+ */
+const Button = (_a) => {
+    var { label, children, size = 'base', shape = 'square', kind = 'primary', layout = 'fit', href } = _a, buttonProps = __rest(_a, ["label", "children", "size", "shape", "kind", "layout", "href"]);
+    return (jsx_runtime_1.jsx(ButtonElement, Object.assign({ as: href ? 'a' : 'button', size: size, shape: shape, kind: kind, layout: layout }, buttonProps, { children: label ? jsx_runtime_1.jsx(ButtonLabel, { children: label }, void 0) : children }), void 0));
+};
+exports.Button = Button;
+const ButtonElement = styled_components_1.default.button `
+  /**
+   * 1. Initialize local variables with reasonable defaults
+   */
+  --color-background: ${({ theme }) => theme.palette.primaryBg};
+  --color-foreground: ${({ theme }) => theme.palette.primaryColor};
+
+  /**
+   * 2. Inject variants -- ? What are Variants
+   */
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.size)}
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.shape)}
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.kind)}
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.layout)}
+
+  /**
+  * 3. Component Build
+  */
+  background: var(--color-background);
+  color: var(--color-foreground);
+
+  display: inline-flex;
+  border: none;
+  outline: none;
+  text-decoration: none;
+  white-space: nowrap;
+  line-height: ${({ theme }) => theme.lineHeight.ui};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+
+  &:focus,
+  &:active {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme._color.black30},
+      0 0 0 2px var(--color-background);
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+`;
+const ButtonLabel = styled_components_1.default(Box_1.Box).attrs({
+    alignItems: 'center',
+    justifyContent: 'center',
+}) `
+  padding: ${({ theme }) => `0 ${theme.px.xsmall}`};
+`;
+/**
+ * ## Button Variants
+ */
+const ButtonPrimary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "primary" }), void 0));
+exports.ButtonPrimary = ButtonPrimary;
+const ButtonSecondary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "secondary" }), void 0));
+exports.ButtonSecondary = ButtonSecondary;
+const ButtonTertiary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "tertiary" }), void 0));
+exports.ButtonTertiary = ButtonTertiary;

package/dist/components/elements/Button/button.variants.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Define all Button Variants here in one place.
+ * Variants should match the variants in Figma
+ */
+export declare const Variant: {
+    readonly shape: "shape";
+    readonly size: "size";
+    readonly kind: "kind";
+    readonly layout: "layout";
+};
+/**
+ * Button Type -- Describes the "role" of a button
+ */
+export declare const ButtonKind: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+};
+export declare type ButtonKindType = keyof typeof ButtonKind;
+/**
+ * Button Size
+ */
+export declare const ButtonSize: {
+    readonly small: "small";
+    readonly base: "base";
+    readonly large: "large";
+};
+export declare type ButtonSizeType = keyof typeof ButtonSize;
+/**
+ * Button Width
+ */
+export declare const ButtonLayout: {
+    readonly fit: "fit";
+    readonly full: "full";
+};
+export declare type ButtonLayoutType = keyof typeof ButtonLayout;
+/**
+ * Button Shape
+ */
+export declare const ButtonShape: {
+    readonly square: "square";
+    readonly pill: "pill";
+};
+export declare type ButtonShapeType = keyof typeof ButtonShape;
+export declare const variants: {
+    readonly size: {
+        readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+    readonly shape: {
+        readonly square: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly pill: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+    readonly layout: {
+        readonly fit: import("styled-components").FlattenSimpleInterpolation;
+        readonly full: import("styled-components").FlattenSimpleInterpolation;
+    };
+    readonly kind: {
+        readonly primary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly secondary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly tertiary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+};

package/dist/components/elements/Button/button.variants.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.variants = exports.ButtonShape = exports.ButtonLayout = exports.ButtonSize = exports.ButtonKind = exports.Variant = void 0;
+const styled_components_1 = require("styled-components");
+/**
+ * Define all Button Variants here in one place.
+ * Variants should match the variants in Figma
+ */
+exports.Variant = {
+    shape: 'shape',
+    size: 'size',
+    kind: 'kind',
+    layout: 'layout',
+};
+/**
+ * Button Type -- Describes the "role" of a button
+ */
+exports.ButtonKind = {
+    primary: 'primary',
+    secondary: 'secondary',
+    tertiary: 'tertiary',
+};
+/**
+ * Button Size
+ */
+exports.ButtonSize = {
+    small: 'small',
+    base: 'base',
+    large: 'large',
+};
+/**
+ * Button Width
+ */
+exports.ButtonLayout = {
+    fit: 'fit',
+    full: 'full',
+};
+/**
+ * Button Shape
+ */
+exports.ButtonShape = {
+    square: 'square',
+    pill: 'pill',
+};
+exports.variants = {
+    [exports.Variant.size]: {
+        [exports.ButtonSize.base]: styled_components_1.css `
+      padding: ${({ theme }) => theme.px.large};
+      font-size: ${({ theme }) => theme.fontSize.xlarge};
+    `,
+        [exports.ButtonSize.small]: styled_components_1.css `
+      padding: ${({ theme }) => theme.px.small};
+      font-size: ${({ theme }) => theme.fontSize.base};
+    `,
+        [exports.ButtonSize.large]: styled_components_1.css `
+      padding: ${({ theme }) => theme.px.xlarge};
+      font-size: ${({ theme }) => theme.fontSize.xxxlarge};
+    `,
+    },
+    [exports.Variant.shape]: {
+        [exports.ButtonShape.square]: styled_components_1.css `
+      border-radius: ${({ theme }) => theme.radius.base};
+    `,
+        [exports.ButtonShape.pill]: styled_components_1.css `
+      border-radius: ${({ theme }) => theme.radius.pill};
+    `,
+    },
+    [exports.Variant.layout]: {
+        [exports.ButtonLayout.fit]: styled_components_1.css `
+      width: fit-content;
+    `,
+        [exports.ButtonLayout.full]: styled_components_1.css `
+      width: 100%;
+    `,
+    },
+    [exports.Variant.kind]: {
+        [exports.ButtonKind.primary]: styled_components_1.css `
+      --color-background: ${({ theme }) => theme.palette.primaryBg};
+      --color-foreground: ${({ theme }) => theme.palette.primaryColor};
+
+      &:disabled {
+        --color-background: ${({ theme }) => theme.palette.primaryDisabledBg};
+        --color-foreground: ${({ theme }) => theme.palette.primaryDisabledColor};
+      }
+    `,
+        [exports.ButtonKind.secondary]: styled_components_1.css `
+      --color-background: ${({ theme }) => theme.palette.secondaryBg};
+      --color-foreground: ${({ theme }) => theme.palette.secondaryColor};
+
+      &:disabled {
+        --color-background: ${({ theme }) => theme.palette.secondaryDisabledBg};
+        --color-foreground: ${({ theme }) => theme.palette.secondaryDisabledColor};
+      }
+    `,
+        [exports.ButtonKind.tertiary]: styled_components_1.css `
+      --color-background: ${({ theme }) => theme.palette.tertiaryBg};
+      --color-foreground: ${({ theme }) => theme.palette.tertiaryColor};
+
+      &:disabled {
+        --color-background: ${({ theme }) => theme.palette.tertiaryDisabledBg};
+        --color-foreground: ${({ theme }) => theme.palette.tertiaryDisabledColor};
+      }
+    `,
+    },
+};

package/dist/components/elements/Button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './button.variants';

package/dist/components/elements/Button/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./button"), exports);
+__exportStar(require("./button.variants"), exports);

package/dist/components/elements/Icon/icon.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { IconSizeType, IconType } from '../../system/ThemeProvider/lib/types';
+export declare type PropsWithIcon = {
+    icon: IconType;
+    children?: never;
+};
+export declare type PropsWithChild = {
+    icon?: never;
+    children: ReactNode;
+};
+export declare type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & {
+    size?: IconSizeType;
+    containerSize?: IconSizeType;
+};
+export declare const Icon: import("styled-components").StyledComponent<({ icon, children, size, containerSize, ...props }: IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/elements/Icon/icon.js

@@ -0,0 +1,56 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("../../layout/Box");
+const ThemeProvider_1 = require("../../system/ThemeProvider");
+const constants_1 = require("../../system/ThemeProvider/lib/constants");
+const icon_variants_1 = require("./icon.variants");
+exports.Icon = styled_components_1.default((_a) => {
+    var { icon, children, size = 'base', containerSize } = _a, props = __rest(_a, ["icon", "children", "size", "containerSize"]);
+    return (jsx_runtime_1.jsx(IconBox, Object.assign({}, props, { iconSize: size, containerSize: containerSize || size, justifyContent: "center", alignItems: "center" }, { children: icon ? jsx_runtime_1.jsx(IconSvg, { icon: icon }, void 0) : children }), void 0));
+}) ``;
+const IconSvg = styled_components_1.default((_a) => {
+    var { icon } = _a, props = __rest(_a, ["icon"]);
+    const SVG = constants_1.IconSet[icon];
+    return jsx_runtime_1.jsx(SVG, Object.assign({}, props), void 0);
+}) ``;
+const IconBox = styled_components_1.default(Box_1.Box) `
+  /**
+   * 1. Initialize local variables with reasonable defaults
+   */
+  --px-default: ${({ theme }) => theme.iconSize.base};
+
+  /**
+   * 2. Inject variants -- ? What are Variants
+   */
+  ${ThemeProvider_1.getVariantCSS(icon_variants_1.variants, icon_variants_1.Variant.containerSize)}
+  ${ThemeProvider_1.getVariantCSS(icon_variants_1.variants, icon_variants_1.Variant.iconSize)}
+
+  width: var(--px-container, var(--px-default));
+  height: var(--px-container, var(--px-default));
+
+  /* SVG Asset */
+  & > *,
+  ${IconSvg} {
+    display: block;
+    width: var(--px-icon, var(--px-default));
+    height: var(--px-icon, var(--px-default));
+    border-radius: inherit;
+  }
+`;

package/dist/components/elements/Icon/icon.variants.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Define all Button Variants here in one place.
+ * Variants should match the variants in Figma
+ */
+export declare const Variant: {
+    readonly iconSize: "iconSize";
+    readonly containerSize: "containerSize";
+};
+export declare const variants: {
+    readonly iconSize: {
+        readonly xsmall: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly xlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly xxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly xxxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+    readonly containerSize: {
+        readonly xsmall: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly xlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly xxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly xxxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+    };
+};