@alfalab/core-components 32.0.0-beta.0 → 32.0.1

package/action-button/Component.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+type Colors = 'default' | 'inverted' | 'static';
+type ComponentProps = {
+    /**
+     * Иконка кнопки
+     */
+    icon: React.ReactNode;
+    /**
+     *  Размер кнопки
+     */
+    size?: 's';
+    /**
+     * Тип кнопки
+     */
+    view?: 'primary' | 'secondary';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для обертки иконки
+     */
+    iconWrapperClassName?: string;
+    /**
+     * Значение href для ссылки
+     */
+    href?: string;
+    /**
+     * Заблокировать кнопку
+     */
+    disabled?: boolean;
+    /**
+     * Показать лоадер
+     */
+    loading?: boolean;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется кнопка
+     */
+    colors?: Colors;
+};
+type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
+declare const ActionButton: React.ForwardRefExoticComponent<(Partial<AnchorProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>) | (Partial<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>)>;
+export { ActionButtonProps, ActionButton };

package/action-button/Component.js

@@ -0,0 +1,102 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsLoader = require('../loader');
+var hooks = require('@alfalab/hooks');
+var hooks$1 = require('./hooks.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 styles = {"component":"action-button__component_1pvl9","s":"action-button__s_1pvl9","disabled":"action-button__disabled_1pvl9","loading":"action-button__loading_1pvl9","iconWrapper":"action-button__iconWrapper_1pvl9","label":"action-button__label_1pvl9","focused":"action-button__focused_1pvl9"};
+require('./index.css');
+
+var defaultColors = {"primary":"action-button__primary_d3ji2","iconWrapper":"action-button__iconWrapper_d3ji2","secondary":"action-button__secondary_d3ji2"};
+require('./default.css');
+
+var invertedColors = {"primary":"action-button__primary_3gc33","iconWrapper":"action-button__iconWrapper_3gc33","secondary":"action-button__secondary_3gc33"};
+require('./inverted.css');
+
+var staticColors = {"primary":"action-button__primary_1gwzk","iconWrapper":"action-button__iconWrapper_1gwzk","secondary":"action-button__secondary_1gwzk"};
+require('./static.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+    static: staticColors,
+};
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+var LOADER_MIN_DISPLAY_INTERVAL = 500;
+var ActionButton = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, icon = _a.icon, children = _a.children, href = _a.href, _c = _a.size, size = _c === void 0 ? 's' : _c, _d = _a.view, view = _d === void 0 ? 'primary' : _d, _e = _a.type, type = _e === void 0 ? 'button' : _e, iconWrapperClassName = _a.iconWrapperClassName, disabled = _a.disabled, loading = _a.loading, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, rest = __rest(_a, ["className", "icon", "children", "href", "size", "view", "type", "iconWrapperClassName", "disabled", "loading", "dataTestId", "colors"]);
+    var componentRef = React.useRef(null);
+    var focused = hooks.useFocus(componentRef, 'keyboard')[0];
+    var showLoader = hooks$1.useLoader(!!loading, LOADER_MIN_DISPLAY_INTERVAL).showLoader;
+    var componentProps = {
+        className: cn__default['default'](styles.component, colorStyles[colors][view], styles[size], (_b = {},
+            _b[styles.focused] = focused,
+            _b[styles.disabled] = disabled,
+            _b[styles.loading] = showLoader,
+            _b), className),
+        'data-test-id': dataTestId,
+    };
+    var buttonChildren = (React__default['default'].createElement(React.Fragment, null,
+        React__default['default'].createElement("span", { role: 'img', className: cn__default['default'](styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? React__default['default'].createElement(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
+        React__default['default'].createElement("span", { className: styles.label }, children)));
+    if (href) {
+        return (React__default['default'].createElement("a", __assign({ role: 'button', ref: mergeRefs__default['default']([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));
+    }
+    return (React__default['default'].createElement("button", __assign({ ref: mergeRefs__default['default']([componentRef, ref]), 
+        // eslint-disable-next-line react/button-has-type
+        type: type, disabled: disabled || loading }, componentProps, rest), buttonChildren));
+});
+
+exports.ActionButton = ActionButton;

package/action-button/cssm/Component.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+type Colors = 'default' | 'inverted' | 'static';
+type ComponentProps = {
+    /**
+     * Иконка кнопки
+     */
+    icon: React.ReactNode;
+    /**
+     *  Размер кнопки
+     */
+    size?: 's';
+    /**
+     * Тип кнопки
+     */
+    view?: 'primary' | 'secondary';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для обертки иконки
+     */
+    iconWrapperClassName?: string;
+    /**
+     * Значение href для ссылки
+     */
+    href?: string;
+    /**
+     * Заблокировать кнопку
+     */
+    disabled?: boolean;
+    /**
+     * Показать лоадер
+     */
+    loading?: boolean;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется кнопка
+     */
+    colors?: Colors;
+};
+type AnchorProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type ActionButtonProps = Partial<AnchorProps | ButtonProps>;
+declare const ActionButton: React.ForwardRefExoticComponent<(Partial<AnchorProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>) | (Partial<ButtonProps> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>)>;
+export { ActionButtonProps, ActionButton };

package/action-button/cssm/Component.js

@@ -0,0 +1,98 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsLoader = require('../../loader/cssm');
+var hooks = require('@alfalab/hooks');
+var styles = require('./index.module.css');
+var defaultColors = require('./default.module.css');
+var invertedColors = require('./inverted.module.css');
+var staticColors = require('./static.module.css');
+var hooks$1 = require('./hooks.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
+var staticColors__default = /*#__PURE__*/_interopDefaultLegacy(staticColors);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 colorStyles = {
+    default: defaultColors__default['default'],
+    inverted: invertedColors__default['default'],
+    static: staticColors__default['default'],
+};
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+var LOADER_MIN_DISPLAY_INTERVAL = 500;
+var ActionButton = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, icon = _a.icon, children = _a.children, href = _a.href, _c = _a.size, size = _c === void 0 ? 's' : _c, _d = _a.view, view = _d === void 0 ? 'primary' : _d, _e = _a.type, type = _e === void 0 ? 'button' : _e, iconWrapperClassName = _a.iconWrapperClassName, disabled = _a.disabled, loading = _a.loading, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, rest = __rest(_a, ["className", "icon", "children", "href", "size", "view", "type", "iconWrapperClassName", "disabled", "loading", "dataTestId", "colors"]);
+    var componentRef = React.useRef(null);
+    var focused = hooks.useFocus(componentRef, 'keyboard')[0];
+    var showLoader = hooks$1.useLoader(!!loading, LOADER_MIN_DISPLAY_INTERVAL).showLoader;
+    var componentProps = {
+        className: cn__default['default'](styles__default['default'].component, colorStyles[colors][view], styles__default['default'][size], (_b = {},
+            _b[styles__default['default'].focused] = focused,
+            _b[styles__default['default'].disabled] = disabled,
+            _b[styles__default['default'].loading] = showLoader,
+            _b), className),
+        'data-test-id': dataTestId,
+    };
+    var buttonChildren = (React__default['default'].createElement(React.Fragment, null,
+        React__default['default'].createElement("span", { role: 'img', className: cn__default['default'](styles__default['default'].iconWrapper, colorStyles[colors].iconWrapper, styles__default['default'][size], iconWrapperClassName) }, showLoader ? React__default['default'].createElement(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
+        React__default['default'].createElement("span", { className: styles__default['default'].label }, children)));
+    if (href) {
+        return (React__default['default'].createElement("a", __assign({ role: 'button', ref: mergeRefs__default['default']([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));
+    }
+    return (React__default['default'].createElement("button", __assign({ ref: mergeRefs__default['default']([componentRef, ref]), 
+        // eslint-disable-next-line react/button-has-type
+        type: type, disabled: disabled || loading }, componentProps, rest), buttonChildren));
+});
+
+exports.ActionButton = ActionButton;

package/action-button/cssm/default.module.css

@@ -0,0 +1,60 @@
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-bg-secondary: #f3f4f5;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-text-primary: #0b1f35;
+    --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
+    --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
+    --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
+    --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* primary */
+    --action-button-primary-base-color: var(--color-light-text-primary);
+    --action-button-primary-base-icon-color: var(--color-light-graphic-primary-inverted);
+    --action-button-primary-base-bg-color: var(--color-light-bg-primary-inverted);
+    --action-button-primary-hover-color: var(--color-light-bg-primary-inverted-tint-15);
+    --action-button-primary-active-color: var(--color-light-bg-primary-inverted-tint-20);
+
+    /* secondary */
+    --action-button-secondary-base-color: var(--color-light-text-primary);
+    --action-button-secondary-base-icon-color: var(--color-light-graphic-primary);
+    --action-button-secondary-base-bg-color: var(--color-light-bg-secondary);
+    --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
+    --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
+}
+.primary {
+    color: var(--action-button-primary-base-color)
+}
+.primary .iconWrapper {
+        color: var(--action-button-primary-base-icon-color);
+        background-color: var(--action-button-primary-base-bg-color);
+    }
+.primary:hover .iconWrapper {
+        background-color: var(--action-button-primary-hover-color);
+    }
+.primary:active .iconWrapper {
+        background-color: var(--action-button-primary-active-color);
+    }
+.secondary {
+    color: var(--action-button-secondary-base-color)
+}
+.secondary .iconWrapper {
+        color: var(--action-button-secondary-base-icon-color);
+        background-color: var(--action-button-secondary-base-bg-color);
+    }
+.secondary:hover .iconWrapper {
+        background-color: var(--action-button-secondary-hover-color);
+    }
+.secondary:active .iconWrapper {
+        background-color: var(--action-button-secondary-active-color);
+    }

package/action-button/cssm/hooks.d.ts

@@ -0,0 +1,4 @@
+declare const useLoader: (loading: boolean, timeout: number) => {
+    showLoader: boolean;
+};
+export { useLoader };

package/action-button/cssm/hooks.js

@@ -0,0 +1,28 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var useLoader = function (loading, timeout) {
+    var timerId = React.useRef(0);
+    var _a = React.useState(true), loaderTimePassed = _a[0], setLoaderTimePassed = _a[1];
+    var showLoader = loading || !loaderTimePassed;
+    React.useEffect(function () {
+        if (loading) {
+            setLoaderTimePassed(false);
+            if (timerId.current) {
+                window.clearTimeout(timerId.current);
+            }
+            timerId.current = window.setTimeout(function () {
+                setLoaderTimePassed(true);
+            }, timeout);
+        }
+    }, [loading, timeout]);
+    React.useEffect(function () {
+        if (timerId.current) {
+            window.clearTimeout(timerId.current);
+        }
+    }, []);
+    return { showLoader: showLoader };
+};
+
+exports.useLoader = useLoader;

package/action-button/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/action-button/cssm/index.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('react-merge-refs');
+require('classnames');
+require('../../loader/cssm');
+require('@alfalab/hooks');
+require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
+require('./static.module.css');
+require('./hooks.js');
+
+
+
+exports.ActionButton = Component.ActionButton;

package/action-button/cssm/index.module.css

@@ -0,0 +1,84 @@
+:root {
+    --color-light-border-link: #007aff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-s: 12px;
+}
+:root {
+    --border-radius-circle: 50%;
+}
+:root {
+    --focus-color: var(--color-light-border-link);
+}
+.component {
+    display: inline-flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    vertical-align: top;
+    width: 80px;
+    min-height: 80px;
+    max-height: 100px;
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    text-align: center;
+    text-decoration: none;
+    text-transform: none;
+    transition: color 0.2s ease, opacity 0.2s ease;
+    -webkit-user-select: none;
+            user-select: none;
+    font-family: inherit;
+    -webkit-appearance: none;
+            appearance: none;
+    -webkit-tap-highlight-color: transparent
+}
+.component.s {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 500;
+    }
+.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+.loading {
+    cursor: auto;
+    pointer-events: none;
+}
+.iconWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-bottom: var(--gap-s);
+    border-radius: var(--border-radius-circle);
+    transition: background-color 0.2s ease;
+    line-height: 0
+}
+.iconWrapper.s {
+        width: 48px;
+        height: 48px;
+    }
+.label {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.focused {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}

package/action-button/cssm/inverted.module.css

@@ -0,0 +1,62 @@
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-bg-secondary-inverted: #233549;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-bg-primary-shade-7: rgb(237, 237, 237);
+    --color-light-bg-primary-shade-15: rgb(217, 217, 217);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* primary */
+    --action-button-inverted-primary-base-color: var(--color-light-text-primary-inverted);
+    --action-button-inverted-primary-base-icon-color: var(--color-light-graphic-primary);
+    --action-button-inverted-primary-base-bg-color: var(--color-light-bg-primary);
+    --action-button-inverted-primary-hover-color: var(--color-light-bg-primary-shade-7);
+    --action-button-inverted-primary-active-color: var(--color-light-bg-primary-shade-15);
+
+    /* secondary */
+    --action-button-inverted-secondary-base-color: var(--color-light-text-primary-inverted);
+    --action-button-inverted-secondary-base-icon-color: var(--color-light-graphic-primary-inverted);
+    --action-button-inverted-secondary-base-bg-color: var(--color-light-bg-secondary-inverted);
+    --action-button-inverted-secondary-hover-color: var(
+        --color-light-bg-secondary-inverted-tint-15
+    );
+    --action-button-inverted-secondary-active-color: var(
+        --color-light-bg-secondary-inverted-tint-20
+    );
+}
+.primary {
+    color: var(--action-button-inverted-primary-base-color)
+}
+.primary .iconWrapper {
+        color: var(--action-button-inverted-primary-base-icon-color);
+        background-color: var(--action-button-inverted-primary-base-bg-color);
+    }
+.primary:hover .iconWrapper {
+        background-color: var(--action-button-inverted-primary-hover-color);
+    }
+.primary:active .iconWrapper {
+        background-color: var(--action-button-inverted-primary-active-color);
+    }
+.secondary {
+    color: var(--action-button-inverted-secondary-base-color)
+}
+.secondary .iconWrapper {
+        color: var(--action-button-inverted-secondary-base-icon-color);
+        background-color: var(--action-button-inverted-secondary-base-bg-color);
+    }
+.secondary:hover .iconWrapper {
+        background-color: var(--action-button-inverted-secondary-hover-color);
+    }
+.secondary:active .iconWrapper {
+        background-color: var(--action-button-inverted-secondary-active-color);
+    }

package/action-button/cssm/static.module.css

@@ -0,0 +1,40 @@
+:root {
+    --color-static-bg-primary-dark: #0b1f35;
+    --color-static-bg-secondary-light: #f3f4f5;
+    --color-static-graphic-dark: #0b1f35;
+    --color-static-graphic-light: #fff;
+    --color-static-text-primary-dark: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* primary */
+    --action-button-static-primary-base-color: var(--color-static-text-primary-dark);
+    --action-button-static-primary-base-icon-color: var(--color-static-graphic-light);
+    --action-button-static-primary-base-bg-color: var(--color-static-bg-primary-dark);
+
+    /* secondary */
+    --action-button-static-secondary-base-color: var(--color-static-text-primary-dark);
+    --action-button-static-secondary-base-icon-color: var(--color-static-graphic-dark);
+    --action-button-static-secondary-base-bg-color: var(--color-static-bg-secondary-light);
+}
+.primary {
+    color: var(--action-button-static-primary-base-color)
+}
+.primary .iconWrapper {
+        color: var(--action-button-static-primary-base-icon-color);
+        background-color: var(--action-button-static-primary-base-bg-color);
+    }
+.secondary {
+    color: var(--action-button-static-secondary-base-color)
+}
+.secondary .iconWrapper {
+        color: var(--action-button-static-secondary-base-icon-color);
+        background-color: var(--action-button-static-secondary-base-bg-color);
+    }

package/action-button/default.css

@@ -0,0 +1,61 @@
+/* hash: lghf2 */
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-bg-secondary: #f3f4f5;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-text-primary: #0b1f35;
+    --color-light-bg-primary-inverted-tint-15: rgb(48, 65, 83);
+    --color-light-bg-primary-inverted-tint-20: rgb(60, 76, 93);
+    --color-light-bg-secondary-shade-7: rgb(226, 227, 228);
+    --color-light-bg-secondary-shade-15: rgb(207, 207, 208);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* primary */
+    --action-button-primary-base-color: var(--color-light-text-primary);
+    --action-button-primary-base-icon-color: var(--color-light-graphic-primary-inverted);
+    --action-button-primary-base-bg-color: var(--color-light-bg-primary-inverted);
+    --action-button-primary-hover-color: var(--color-light-bg-primary-inverted-tint-15);
+    --action-button-primary-active-color: var(--color-light-bg-primary-inverted-tint-20);
+
+    /* secondary */
+    --action-button-secondary-base-color: var(--color-light-text-primary);
+    --action-button-secondary-base-icon-color: var(--color-light-graphic-primary);
+    --action-button-secondary-base-bg-color: var(--color-light-bg-secondary);
+    --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
+    --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
+}
+.action-button__primary_d3ji2 {
+    color: var(--action-button-primary-base-color)
+}
+.action-button__primary_d3ji2 .action-button__iconWrapper_d3ji2 {
+        color: var(--action-button-primary-base-icon-color);
+        background-color: var(--action-button-primary-base-bg-color);
+    }
+.action-button__primary_d3ji2:hover .action-button__iconWrapper_d3ji2 {
+        background-color: var(--action-button-primary-hover-color);
+    }
+.action-button__primary_d3ji2:active .action-button__iconWrapper_d3ji2 {
+        background-color: var(--action-button-primary-active-color);
+    }
+.action-button__secondary_d3ji2 {
+    color: var(--action-button-secondary-base-color)
+}
+.action-button__secondary_d3ji2 .action-button__iconWrapper_d3ji2 {
+        color: var(--action-button-secondary-base-icon-color);
+        background-color: var(--action-button-secondary-base-bg-color);
+    }
+.action-button__secondary_d3ji2:hover .action-button__iconWrapper_d3ji2 {
+        background-color: var(--action-button-secondary-hover-color);
+    }
+.action-button__secondary_d3ji2:active .action-button__iconWrapper_d3ji2 {
+        background-color: var(--action-button-secondary-active-color);
+    }