@ukic/canary-react 2.0.0-canary.8 → 3.0.0-canary.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components.d.ts +6 -0
- package/dist/components.js +6 -0
- package/dist/core/core.css +38 -20
- package/package.json +10 -7
package/dist/components.d.ts
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import type { JSX } from '@ukic/canary-web-components';
|
|
2
|
+
export declare const IcCardHorizontal: import("react").ForwardRefExoticComponent<JSX.IcCardHorizontal & Omit<import("react").HTMLAttributes<HTMLIcCardHorizontalElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCardHorizontalElement>>;
|
|
2
3
|
export declare const IcDataTable: import("react").ForwardRefExoticComponent<JSX.IcDataTable & Omit<import("react").HTMLAttributes<HTMLIcDataTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableElement>>;
|
|
4
|
+
export declare const IcDataTableTitleBar: import("react").ForwardRefExoticComponent<JSX.IcDataTableTitleBar & Omit<import("react").HTMLAttributes<HTMLIcDataTableTitleBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableTitleBarElement>>;
|
|
5
|
+
export declare const IcDateInput: import("react").ForwardRefExoticComponent<JSX.IcDateInput & Omit<import("react").HTMLAttributes<HTMLIcDateInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDateInputElement>>;
|
|
6
|
+
export declare const IcDatePicker: import("react").ForwardRefExoticComponent<JSX.IcDatePicker & Omit<import("react").HTMLAttributes<HTMLIcDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDatePickerElement>>;
|
|
3
7
|
export declare const IcMenuWithMulti: import("react").ForwardRefExoticComponent<JSX.IcMenuWithMulti & Omit<import("react").HTMLAttributes<HTMLIcMenuWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuWithMultiElement>>;
|
|
4
8
|
export declare const IcPaginationBar: import("react").ForwardRefExoticComponent<JSX.IcPaginationBar & Omit<import("react").HTMLAttributes<HTMLIcPaginationBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationBarElement>>;
|
|
5
9
|
export declare const IcSelectWithMulti: import("react").ForwardRefExoticComponent<JSX.IcSelectWithMulti & Omit<import("react").HTMLAttributes<HTMLIcSelectWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSelectWithMultiElement>>;
|
|
10
|
+
export declare const IcTreeItem: import("react").ForwardRefExoticComponent<JSX.IcTreeItem & Omit<import("react").HTMLAttributes<HTMLIcTreeItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeItemElement>>;
|
|
11
|
+
export declare const IcTreeView: import("react").ForwardRefExoticComponent<JSX.IcTreeView & Omit<import("react").HTMLAttributes<HTMLIcTreeViewElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeViewElement>>;
|
package/dist/components.js
CHANGED
|
@@ -4,7 +4,13 @@
|
|
|
4
4
|
import { createReactComponent } from './react-component-lib';
|
|
5
5
|
import { defineCustomElements } from '@ukic/canary-web-components/loader';
|
|
6
6
|
defineCustomElements();
|
|
7
|
+
export var IcCardHorizontal = /*@__PURE__*/ createReactComponent('ic-card-horizontal');
|
|
7
8
|
export var IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
|
|
9
|
+
export var IcDataTableTitleBar = /*@__PURE__*/ createReactComponent('ic-data-table-title-bar');
|
|
10
|
+
export var IcDateInput = /*@__PURE__*/ createReactComponent('ic-date-input');
|
|
11
|
+
export var IcDatePicker = /*@__PURE__*/ createReactComponent('ic-date-picker');
|
|
8
12
|
export var IcMenuWithMulti = /*@__PURE__*/ createReactComponent('ic-menu-with-multi');
|
|
9
13
|
export var IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
|
|
10
14
|
export var IcSelectWithMulti = /*@__PURE__*/ createReactComponent('ic-select-with-multi');
|
|
15
|
+
export var IcTreeItem = /*@__PURE__*/ createReactComponent('ic-tree-item');
|
|
16
|
+
export var IcTreeView = /*@__PURE__*/ createReactComponent('ic-tree-view');
|
package/dist/core/core.css
CHANGED
|
@@ -1,18 +1,4 @@
|
|
|
1
|
-
html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a.ic-card-wrapper-link{text-decoration:none;outline:none;color:currentcolor}:root{--ic-
|
|
2
|
-
0 0 0 4px var(--ic-focus-blue), 0 0 0 8px var(--ic-focus-glow);--ic-border-focus-inset:inset 0 0 0 4px var(--ic-focus-glow),
|
|
3
|
-
inset 0 0 0 6px var(--ic-focus-blue),
|
|
4
|
-
inset 0 0 0 8px var(--ic-architectural-white);--ic-border-focus-dark:0 0 0 2px white, 0 0 0 5px rgba(255 255 255 / 52%);--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
|
|
5
|
-
inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
|
|
6
|
-
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
|
|
7
|
-
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-border-width:0.0625rem;--ic-border-disabled:var(--ic-space-1px) dashed var(--ic-architectural-200);--ic-border-light:var(--ic-space-1px) solid var(--ic-architectural-200);--ic-border-default:var(--ic-space-1px) solid var(--ic-architectural-400);--ic-border-hover:var(--ic-space-1px) solid var(--ic-architectural-500);--ic-border-pressed:var(--ic-space-1px) solid var(--ic-architectural-600);--ic-hc-border:var(--ic-space-1px) solid transparent;--ic-error-border-default:var(--ic-space-xxxs) solid var(--ic-status-error);--ic-error-border-hover:var(--ic-space-xxxs) solid
|
|
8
|
-
var(--ic-status-error-hover);--ic-error-border-pressed:var(--ic-space-xxxs) solid
|
|
9
|
-
var(--ic-status-error-pressed);--ic-success-border-default:var(--ic-space-xxxs) solid
|
|
10
|
-
var(--ic-status-success);--ic-success-border-hover:var(--ic-space-xxxs) solid
|
|
11
|
-
var(--ic-status-success-hover);--ic-success-border-pressed:var(--ic-space-xxxs) solid
|
|
12
|
-
var(--ic-status-success-pressed);--ic-warning-border-default:var(--ic-space-xxxs) solid
|
|
13
|
-
var(--ic-status-warning);--ic-warning-border-hover:var(--ic-space-xxxs) solid
|
|
14
|
-
var(--ic-status-warning-hover);--ic-warning-border-pressed:var(--ic-space-xxxs) solid
|
|
15
|
-
var(--ic-status-warning-pressed);--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--ic-font-code-family:"Source Code Pro", monospace;--ic-font-weight-extrabold:800;--ic-font-weight-bold:700;--ic-font-weight-semibold:600;--ic-font-weight-regular:400;--ic-font-size-h1:2.625rem;--ic-font-size-h2:2.125rem;--ic-font-size-h3:1.5rem;--ic-font-size-h4:1.25rem;--ic-font-size-regular:1rem;--ic-font-size-label:0.875rem;--ic-font-size-caption:0.75rem;--ic-font-size-badge-small:0.563rem;--ic-font-line-height-h1:3.5rem;--ic-font-line-height-h2:3.5rem;--ic-font-line-height-h3:2.5rem;--ic-font-line-height-h4:2rem;--ic-font-line-height-subtitle-large:1.5rem;--ic-font-line-height-subtitle-small:1.5rem;--ic-font-line-height-body:1.5rem;--ic-font-line-height-caption:1.25rem;--ic-font-line-height-code:1.5rem;--ic-font-line-height-badge:0.875rem;--ic-font-line-height-badge-small:0.75rem;--ic-font-letter-spacing-0pt025:0.025rem;--ic-font-letter-spacing-0pt005:0.005rem;--ic-font-letter-spacing-0pt0025:0.0025rem;--ic-font-letter-spacing-0pt0015:0.0015rem;--ic-font-h1:var(--ic-font-weight-extrabold) var(--ic-font-size-h1) /
|
|
1
|
+
html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a.ic-card-wrapper-link{text-decoration:none;outline:none;color:currentcolor}:root{--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--ic-font-code-family:"Source Code Pro", monospace;--ic-font-weight-extrabold:800;--ic-font-weight-bold:700;--ic-font-weight-semibold:600;--ic-font-weight-regular:400;--ic-font-size-h1:2.625rem;--ic-font-size-h2:2.125rem;--ic-font-size-h3:1.5rem;--ic-font-size-h4:1.25rem;--ic-font-size-regular:1rem;--ic-font-size-label:0.875rem;--ic-font-size-caption:0.75rem;--ic-font-size-badge-small:0.563rem;--ic-font-line-height-h1:3.5rem;--ic-font-line-height-h2:3.5rem;--ic-font-line-height-h3:2.5rem;--ic-font-line-height-h4:2rem;--ic-font-line-height-subtitle-large:1.5rem;--ic-font-line-height-subtitle-small:1.5rem;--ic-font-line-height-body:1.5rem;--ic-font-line-height-caption:1.25rem;--ic-font-line-height-code:1.5rem;--ic-font-line-height-badge:0.875rem;--ic-font-line-height-badge-small:0.75rem;--ic-font-letter-spacing-0pt025:0.025rem;--ic-font-letter-spacing-0pt005:0.005rem;--ic-font-letter-spacing-0pt0025:0.0025rem;--ic-font-letter-spacing-0pt0015:0.0015rem;--ic-font-h1:var(--ic-font-weight-extrabold) var(--ic-font-size-h1) /
|
|
16
2
|
var(--ic-font-line-height-h1) var(--ic-font-heading-family);--ic-font-h2:var(--ic-font-weight-bold) var(--ic-font-size-h2) /
|
|
17
3
|
var(--ic-font-line-height-h2) var(--ic-font-heading-family);--ic-font-h3:var(--ic-font-weight-regular) var(--ic-font-size-h3) /
|
|
18
4
|
var(--ic-font-line-height-h3) var(--ic-font-body-family);--ic-font-h4:var(--ic-font-weight-semibold) var(--ic-font-size-h4) /
|
|
@@ -31,7 +17,25 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
31
17
|
var(--ic-font-code-family);--ic-font-badge:var(--ic-font-weight-semibold) var(--ic-font-size-caption) /
|
|
32
18
|
var(--ic-font-line-height-badge) var(--ic-font-body-family);--ic-font-badge-small:var(--ic-font-weight-semibold)
|
|
33
19
|
var(--ic-font-size-badge-small) / var(--ic-font-line-height-badge-small)
|
|
34
|
-
var(--ic-font-body-family);--ic-
|
|
20
|
+
var(--ic-font-body-family)}:root,ic-theme,.ic-theme-light{--ic-background-primary:var(--ic-background-primary-light);--ic-typography-color:var(--ic-color-primary-text);--ic-color-primary-text:var(--ic-color-primary-text-light);--ic-color-secondary-text:var(--ic-color-secondary-text-light);--ic-color-tertiary-text:var(--ic-color-tertiary-text-light);--ic-color-inverse-text:var(--ic-color-inverse-text-light);--ic-breadcrumb-page-title:var(--ic-hyperlink);--ic-breadcrumb-page-title-hover:var(--ic-hyperlink);--ic-breadcrumb-page-title-pressed:var(--ic-hyperlink);--ic-breadcrumb-page-title-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-page-title-hover-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-page-title-pressed-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-icon-chevron:var(--ic-icon-grey);--ic-breadcrumb-icon-chevron-monochrome:var(--ic-icon-grey-dark);--ic-breadcrumb-page-icon:var(--ic-icon-action-default);--ic-breadcrumb-page-icon-monochrome:var(--ic-icon-neutral);--ic-breadcrumb-text:var(--ic-color-primary-text);--ic-breadcrumb-text-monochrome:var(--ic-color-primary-text);--ic-data-list-text-cell:var(--ic-color-primary-text);--ic-data-list-text-heading:var(--ic-color-primary-text);--ic-data-list-text-label:var(--ic-color-tertiary-text);--ic-data-list-keyline-heading:var(--ic-border-neutral);--ic-data-list-keyline-cell:var(--ic-border-neutral);--ic-link-text:var(--ic-hyperlink);--ic-link-text-hover:var(--ic-hyperlink);--ic-link-text-pressed:var(--ic-hyperlink);--ic-link-text-focused:var(--ic-hyperlink);--ic-link-text-visited:var(--ic-hyperlink-visited);--ic-link-text-monochrome:var(--ic-color-primary-text);--ic-link-text-hover-monochrome:var(--ic-color-primary-text);--ic-link-text-pressed-monochrome:var(--ic-color-primary-text);--ic-link-text-focused-monochrome:var(--ic-color-primary-text);--ic-link-text-visited-monochrome:var(--ic-color-secondary-text);--ic-link-icon-launch:var(--ic-hyperlink);--ic-link-icon-launch-visited:var(--ic-hyperlink-visited);--ic-link-icon-launch-monochrome:var(--ic-color-primary-text);--ic-link-icon-launch-visited-monochrome:var(--ic-color-secondary-text);--ic-status-tag-text:var(--ic-color-inverse-text);--ic-status-tag-text-inverted:var(--ic-color-primary-text);--ic-status-tag-outlined-text:var(--ic-color-primary-text);--ic-status-tag-success:var(--ic-status-success);--ic-status-tag-outlined-background-success:var(--ic-status-success-light);--ic-status-tag-outlined-success:var(--ic-status-success);--ic-status-tag-error:var(--ic-status-error);--ic-status-tag-outlined-background-error:var(--ic-status-error-light);--ic-status-tag-outlined-error:var(--ic-status-error-dark);--ic-status-tag-warning:var(--ic-status-warning-contrast);--ic-status-tag-outlined-background-warning:var(--ic-status-warning-light);--ic-status-tag-outlined-warning:var(--ic-status-warning-dark);--ic-status-tag-neutral:var(--ic-status-unknown-mid);--ic-status-tag-outlined-background-neutral:var(
|
|
21
|
+
--ic-status-unknown-outlined
|
|
22
|
+
);--ic-status-tag-outlined-neutral:var(--ic-status-unknown-mid);--ic-tab-label:var(--ic-color-primary-text);--ic-tab-label-monochrome:var(--ic-color-primary-text);--ic-tab-icon:var(--ic-icon-neutral);--ic-tab-icon-monochrome:var(--ic-icon-neutral);--ic-tab-bottom-border:var(--ic-border-neutral-grey);--ic-tab-bottom-border-monochrome:var(--ic-border-neutral-black);--ic-tab-item-pressed:var(--ic-action-default-bg-active);--ic-tab-item-pressed-monochrome:var(--ic-action-dark-bg-active);--ic-tab-item:var(--ic-action-default);--ic-tab-item-monochrome:var(--ic-action-dark);--ic-tab-item-hover:var(--ic-action-default-bg-hover);--ic-tab-item-hover-monochrome:var(--ic-action-dark-bg-hover);--ic-badge-text:var(--ic-color-inverse-text);--ic-badge-icon:var(--ic-color-inverse-text);--ic-badge-warning-text:var(--ic-color-primary-text);--ic-badge-warning-icon:var(--ic-icon-neutral);--ic-badge-light-text:var(--ic-color-primary-text);--ic-badge-light-icon:var(--ic-icon-neutral);--ic-badge-success:var(--ic-status-success);--ic-badge-warning:var(--ic-status-warning);--ic-badge-error:var(--ic-status-error);--ic-badge-info:var(--ic-status-info);--ic-badge-neutral:var(--ic-status-unknown-mid);--ic-badge-light:var(--ic-background-primary)}@media (prefers-color-scheme: dark){:root{--ic-background-primary:var(--ic-background-primary-dark);--ic-color-primary-text:var(--ic-color-primary-text-dark);--ic-color-secondary-text:var(--ic-color-secondary-text-dark);--ic-color-tertiary-text:var(--ic-color-tertiary-text-dark);--ic-color-inverse-text:var(--ic-color-inverse-text-dark);--ic-breadcrumb-page-title:var(--ic-hyperlink-dark);--ic-breadcrumb-page-title-hover:var(--ic-hyperlink-dark);--ic-breadcrumb-page-title-pressed:var(--ic-hyperlink-dark);--ic-breadcrumb-page-title-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-page-title-hover-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-page-title-pressed-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-icon-chevron:var(--ic-icon-grey);--ic-breadcrumb-icon-chevron-monochrome:var(--ic-icon-grey-dark);--ic-breadcrumb-page-icon:var(--ic-icon-action-default-dark);--ic-breadcrumb-page-icon-monochrome:var(--ic-icon-inverted);--ic-breadcrumb-text:var(--ic-color-primary-text);--ic-breadcrumb-text-monochrome:var(--ic-color-primary-text);--ic-data-list-text-cell:var(--ic-color-primary-text);--ic-data-list-text-heading:var(--ic-color-primary-text);--ic-data-list-text-label:var(--ic-color-tertiary-text);--ic-data-list-keyline-heading:var(--ic-border-neutral);--ic-data-list-keyline-cell:var(--ic-border-neutral);--ic-link-text:var(--ic-hyperlink-dark);--ic-link-text-hover:var(--ic-hyperlink-dark);--ic-link-text-pressed:var(--ic-hyperlink-dark);--ic-link-text-focused:var(--ic-hyperlink-dark);--ic-link-text-visited:var(--ic-hyperlink-visited-dark);--ic-link-text-monochrome:var(--ic-color-primary-text);--ic-link-text-hover-monochrome:var(--ic-color-primary-text);--ic-link-text-pressed-monochrome:var(--ic-color-primary-text);--ic-link-text-focused-monochrome:var(--ic-color-primary-text);--ic-link-text-visited-monochrome:var(
|
|
23
|
+
--ic-hyperlink-visited-monochrome-dark
|
|
24
|
+
);--ic-link-icon-launch:var(--ic-hyperlink-dark);--ic-link-icon-launch-visited:var(--ic-hyperlink-visited-dark);--ic-link-icon-launch-monochrome:var(--ic-color-primary-text);--ic-link-icon-launch-visited-monochrome:var(
|
|
25
|
+
--ic-hyperlink-visited-monochrome-dark
|
|
26
|
+
);--ic-status-tag-text:var(--ic-color-inverse-text);--ic-status-tag-text-inverted:var(--ic-color-primary-text);--ic-status-tag-outlined-text:var(--ic-color-inverse-text);--ic-status-tag-success:var(--ic-status-success-contrast);--ic-status-tag-outlined-background-success:var(
|
|
27
|
+
--ic-status-success-outlined
|
|
28
|
+
);--ic-status-tag-outlined-success:var(--ic-status-success-contrast);--ic-status-tag-error:var(--ic-status-error-contrast);--ic-status-tag-outlined-background-error:var(--ic-status-error-outlined);--ic-status-tag-outlined-error:var(--ic-status-error-light);--ic-status-tag-warning:var(--ic-status-warning-light);--ic-status-tag-outlined-background-warning:var(
|
|
29
|
+
--ic-status-warning-outlined
|
|
30
|
+
);--ic-status-tag-outlined-warning:var(--ic-status-warning-light);--ic-status-tag-neutral:var(--ic-status-unknown-contrast);--ic-status-tag-outlined-background-neutral:var(--ic-status-unknown-light);--ic-status-tag-outlined-neutral:var(--ic-status-unknown);--ic-tab-label:var(--ic-color-primary-text-dark);--ic-tab-label-monochrome:var(--ic-color-inverse-text-light);--ic-tab-icon:var(--ic-icon-inverted);--ic-tab-icon-monochrome:var(--ic-icon-inverted);--ic-tab-bottom-border:var(--ic-border-neutral-inverted);--ic-tab-bottom-border-monochrome:var(--ic-border-neutral-inverted);--ic-tab-item-pressed:var(--ic-action-light-bg-active);--ic-tab-item-pressed-monochrome:var(--ic-action-light-bg-active);--ic-tab-item:var(--ic-action-light);--ic-tab-item-monochrome:var(--ic-action-light);--ic-tab-item-hover:var(--ic-action-light-bg-hover);--ic-tab-item-hover-monochrome:var(--ic-action-dark-bg-hover);--ic-badge-text:var(--ic-color-inverse-text);--ic-badge-icon:var(--ic-color-inverse-text);--ic-badge-warning-text:var(--ic-color-inverse-text);--ic-badge-warning-icon:var(--ic-icon-neutral);--ic-badge-light-text:var(--ic-color-primary-text);--ic-badge-light-icon:var(--ic-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-status-unknown-dark);--ic-badge-neutral:var(--ic-background-primary-light)}}.ic-theme-dark{--ic-background-primary:var(--ic-background-primary-dark);--ic-color-primary-text:var(--ic-color-primary-text-dark);--ic-color-secondary-text:var(--ic-color-secondary-text-dark);--ic-color-tertiary-text:var(--ic-color-tertiary-text-dark);--ic-color-inverse-text:var(--ic-color-inverse-text-dark);--ic-breadcrumb-page-title:var(--ic-hyperlink-dark);--ic-breadcrumb-page-title-hover:var(--ic-hyperlink-dark);--ic-breadcrumb-page-title-pressed:var(--ic-hyperlink-dark);--ic-breadcrumb-page-title-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-page-title-hover-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-page-title-pressed-monochrome:var(--ic-color-primary-text);--ic-breadcrumb-icon-chevron:var(--ic-icon-grey);--ic-breadcrumb-icon-chevron-monochrome:var(--ic-icon-grey-dark);--ic-breadcrumb-page-icon:var(--ic-icon-action-default-dark);--ic-breadcrumb-page-icon-monochrome:var(--ic-icon-inverted);--ic-breadcrumb-text:var(--ic-color-primary-text);--ic-breadcrumb-text-monochrome:var(--ic-color-primary-text);--ic-data-list-text-cell:var(--ic-color-primary-text);--ic-data-list-text-heading:var(--ic-color-primary-text);--ic-data-list-text-label:var(--ic-color-tertiary-text);--ic-data-list-keyline-heading:var(--ic-border-neutral);--ic-data-list-keyline-cell:var(--ic-border-neutral);--ic-link-text:var(--ic-hyperlink-dark);--ic-link-text-hover:var(--ic-hyperlink-dark);--ic-link-text-pressed:var(--ic-hyperlink-dark);--ic-link-text-focused:var(--ic-hyperlink-dark);--ic-link-text-visited:var(--ic-hyperlink-visited-dark);--ic-link-text-monochrome:var(--ic-color-primary-text);--ic-link-text-hover-monochrome:var(--ic-color-primary-text);--ic-link-text-pressed-monochrome:var(--ic-color-primary-text);--ic-link-text-focused-monochrome:var(--ic-color-primary-text);--ic-link-text-visited-monochrome:var(
|
|
31
|
+
--ic-hyperlink-visited-monochrome-dark
|
|
32
|
+
);--ic-link-icon-launch:var(--ic-hyperlink-dark);--ic-link-icon-launch-visited:var(--ic-hyperlink-visited-dark);--ic-link-icon-launch-monochrome:var(--ic-color-primary-text);--ic-link-icon-launch-visited-monochrome:var(
|
|
33
|
+
--ic-hyperlink-visited-monochrome-dark
|
|
34
|
+
);--ic-status-tag-text:var(--ic-color-inverse-text);--ic-status-tag-text-inverted:var(--ic-color-primary-text);--ic-status-tag-outlined-text:var(--ic-color-inverse-text);--ic-status-tag-success:var(--ic-status-success-contrast);--ic-status-tag-outlined-background-success:var(
|
|
35
|
+
--ic-status-success-outlined
|
|
36
|
+
);--ic-status-tag-outlined-success:var(--ic-status-success-contrast);--ic-status-tag-error:var(--ic-status-error-contrast);--ic-status-tag-outlined-background-error:var(--ic-status-error-outlined);--ic-status-tag-outlined-error:var(--ic-status-error-light);--ic-status-tag-warning:var(--ic-status-warning-light);--ic-status-tag-outlined-background-warning:var(
|
|
37
|
+
--ic-status-warning-outlined
|
|
38
|
+
);--ic-status-tag-outlined-warning:var(--ic-status-warning-light);--ic-status-tag-neutral:var(--ic-status-unknown-contrast);--ic-status-tag-outlined-background-neutral:var(--ic-status-unknown-light);--ic-status-tag-outlined-neutral:var(--ic-status-unknown);--ic-tab-label:var(--ic-color-primary-text-dark);--ic-tab-label-monochrome:var(--ic-color-inverse-text-light);--ic-tab-icon:var(--ic-icon-inverted);--ic-tab-icon-monochrome:var(--ic-icon-inverted);--ic-tab-divider:var(--ic-state-layer-neutral-light);--ic-tab-divider-monochrome:var(--ic-icon-inverted);--ic-tab-bottom-border:var(--ic-border-neutral-inverted);--ic-tab-bottom-border-monochrome:var(--ic-border-neutral-inverted);--ic-tab-item-pressed:var(--ic-action-light-bg-active);--ic-tab-item-pressed-monochrome:var(--ic-action-light-bg-active);--ic-tab-item:var(--ic-action-light);--ic-tab-item-monochrome:var(--ic-action-light);--ic-tab-item-hover:var(--ic-action-light-bg-hover);--ic-tab-item-hover-monochrome:var(--ic-action-dark-bg-hover);--ic-badge-text:var(--ic-color-inverse-text);--ic-badge-icon:var(--ic-color-inverse-text);--ic-badge-warning-text:var(--ic-color-inverse-text);--ic-badge-warning-icon:var(--ic-icon-neutral);--ic-badge-light-text:var(--ic-color-primary-text);--ic-badge-light-icon:var(--ic-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-status-unknown-dark);--ic-badge-neutral:var(--ic-background-primary-light)}:root{--ic-keyline-darken-rgb:rgb(0 0 0 / 20%);--ic-keyline-darken:1px solid var(--ic-keyline-darken-rgb);--ic-keyline-lighten-rgb:rgb(255 255 255 / 20%);--ic-keyline-lighten:1px solid var(--ic-keyline-lighten-rgb);--ic-status-success-light:#e8fef3;--ic-status-success-r:0;--ic-status-success-g:112;--ic-status-success-b:60;--ic-status-success-a:1;--ic-status-success:rgb(
|
|
35
39
|
var(--ic-status-success-r) var(--ic-status-success-g)
|
|
36
40
|
var(--ic-status-success-b) / var(--ic-status-success-a)
|
|
37
41
|
);--ic-status-success-hover:rgb(
|
|
@@ -42,7 +46,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
42
46
|
calc(var(--ic-status-success-r) * 0.6)
|
|
43
47
|
calc(var(--ic-status-success-g) * 0.6)
|
|
44
48
|
calc(var(--ic-status-success-b) * 0.6) / var(--ic-status-success-a)
|
|
45
|
-
);--ic-status-success-contrast:#1bb56c;--ic-status-success-dark:#0e3020;--ic-status-warning-light:#fffbd8;--ic-status-warning-contrast:#ffc107;--ic-status-warning-r:208;--ic-status-warning-g:121;--ic-status-warning-b:50;--ic-status-warning-a:1;--ic-status-warning:rgb(
|
|
49
|
+
);--ic-status-success-outlined:#b2fad6;--ic-status-success-contrast:#1bb56c;--ic-status-success-dark:#0e3020;--ic-status-warning-light:#fffbd8;--ic-status-warning-contrast:#ffc107;--ic-status-warning-r:208;--ic-status-warning-g:121;--ic-status-warning-b:50;--ic-status-warning-a:1;--ic-status-warning:rgb(
|
|
46
50
|
var(--ic-status-warning-r) var(--ic-status-warning-g)
|
|
47
51
|
var(--ic-status-warning-b) / var(--ic-status-warning-a)
|
|
48
52
|
);--ic-status-warning-hover:rgb(
|
|
@@ -53,7 +57,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
53
57
|
calc(var(--ic-status-warning-r) * 0.6)
|
|
54
58
|
calc(var(--ic-status-warning-g) * 0.6)
|
|
55
59
|
calc(var(--ic-status-warning-b) * 0.6) / var(--ic-status-warning-a)
|
|
56
|
-
);--ic-status-warning-dark:#7a4c3c;--ic-status-error-light:#ffe4e3;--ic-status-error-contrast:#f15b4e;--ic-status-error-r:212;--ic-status-error-g:53;--ic-status-error-b:28;--ic-status-error-a:1;--ic-status-error:rgb(
|
|
60
|
+
);--ic-status-warning-dark:#7a4c3c;--ic-status-warning-outlined:#ffed83;--ic-status-error-light:#ffe4e3;--ic-status-error-contrast:#f15b4e;--ic-status-error-r:212;--ic-status-error-g:53;--ic-status-error-b:28;--ic-status-error-a:1;--ic-status-error:rgb(
|
|
57
61
|
var(--ic-status-error-r) var(--ic-status-error-g) var(--ic-status-error-b) /
|
|
58
62
|
var(--ic-status-error-a)
|
|
59
63
|
);--ic-status-error-hover:rgb(
|
|
@@ -62,7 +66,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
62
66
|
);--ic-status-error-pressed:rgb(
|
|
63
67
|
calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
|
|
64
68
|
calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
|
|
65
|
-
);--ic-status-error-dark:#610a05;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info
|
|
69
|
+
);--ic-status-error-dark:#610a05;--ic-status-error-outlined:#ec4e3d;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info:rgb(18 77 179);--ic-status-info-dark:#041144;--ic-status-anomalous-light:#efdbff;--ic-status-anomalous-contrast:#b764fb;--ic-status-anomalous:#7c25c2;--ic-status-anomalous-dark:#350f54;--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown:var(--ic-architectural-500);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-800:#2c2f34;--ic-architectural-900:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-color-border-neutral-gray:var(--ic-architectural-400);--ic-color-border-neutral-light-gray:var(--ic-architectural-40);--ic-color-primary-text-light:var(--ic-architectural-900);--ic-color-primary-text-dark:var(--ic-architectural-white);--ic-color-secondary-text-light:var(--ic-architectural-700);--ic-color-secondary-text-dark:var(--ic-architectural-100);--ic-color-tertiary-text-light:var(--ic-architectural-500);--ic-color-tertiary-text-dark:var(--ic-architectural-200);--ic-color-white-text:var(--ic-architectural-white);--ic-color-inverse-text-light:var(--ic-color-primary-text-dark);--ic-color-inverse-text-dark:var(--ic-color-primary-text-light);--ic-background-primary-light:var(--ic-architectural-white);--ic-background-primary-dark:var(--ic-architectural-800);--ic-action-default:#1759bc;--ic-action-default-hover:#0b399c;--ic-action-default-active:#07277e;--ic-action-default-active-alpha:rgba(23 89 188 / 50%);--ic-action-default-bg-hover:rgb(23 89 188 / 10%);--ic-action-default-bg-active:rgb(23 89 188 / 20%);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-active-no-alpha:#d0def2;--ic-action-destructive:#d4351c;--ic-action-destructive-hover:#ad1e0e;--ic-action-destructive-active:#8b1209;--ic-action-light:#fff;--ic-action-light-hover:#c4c8cd;--ic-action-light-active:#a7acb3;--ic-action-light-bg-hover:rgb(255 255 255 / 10%);--ic-action-light-bg-active:rgb(255 255 255 / 20%);--ic-action-dark:#0b0c0c;--ic-action-dark-hover:#2c2f34;--ic-action-dark-active:#41464d;--ic-action-dark-bg-hover:rgb(65 70 77 / 10%);--ic-action-dark-bg-active:rgb(65 70 77 / 20%);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-classification-official:#2b71c7;--ic-classification-official-foreground:#fff;--ic-classification-secret:#f39c2c;--ic-classification-secret-foreground:#000;--ic-classification-top-secret:#a00;--ic-classification-top-secret-foreground:#fff;--ic-classification-not-set:#616161;--ic-classification-not-set-foreground:#fff;--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
|
|
66
70
|
var(--ic-theme-primary-r) var(--ic-theme-primary-g)
|
|
67
71
|
var(--ic-theme-primary-b) / var(--ic-theme-primary-a)
|
|
68
72
|
);--ic-theme-secondary:rgb(
|
|
@@ -104,4 +108,18 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
|
|
|
104
108
|
min(255, calc(var(--ic-theme-calc) + 65))
|
|
105
109
|
min(255, calc(var(--ic-theme-calc) + 70))
|
|
106
110
|
min(255, calc(var(--ic-theme-calc) + 77)) / 20%
|
|
107
|
-
);--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--ic-table-row-selected:#c7d7ef;--ic-
|
|
111
|
+
);--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-dark:#5da0ea;--ic-hyperlink-visited-dark:#c988fd;--ic-hyperlink-visited-monochrome-dark:#b0b0b0;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--ic-table-row-selected:#c7d7ef;--ic-tooltip-background:var(--ic-background-primary-dark);--ic-tooltip-text:var(--ic-color-primary-text-dark);--ic-tooltip-border:var(--ic-color-border-neutral-light-gray);--ic-icon-neutral:var(--ic-architectural-black);--ic-icon-inverted:var(--ic-architectural-white);--ic-icon-grey:var(--ic-architectural-400);--ic-icon-grey-dark:var(--ic-architectural-500);--ic-icon-action-default:var(--ic-hyperlink);--ic-icon-action-default-dark:var(--ic-hyperlink-dark);--ic-state-layer-neutral:var(--ic-architectural-200);--ic-state-layer-neutral-light:var(--ic-architectural-100);--ic-state-layer-neutral-dark:var(--ic-architectural-400)}:root{--ic-border-radius:2px;--ic-border-radius-inset:11px;--ic-border-width:0.0625rem;--ic-border-focus:0 0 0 2px var(--ic-architectural-white),
|
|
112
|
+
0 0 0 4px var(--ic-focus-blue), 0 0 0 8px var(--ic-focus-glow);--ic-border-focus-inset:inset 0 0 0 4px var(--ic-focus-glow),
|
|
113
|
+
inset 0 0 0 6px var(--ic-focus-blue),
|
|
114
|
+
inset 0 0 0 8px var(--ic-architectural-white);--ic-border-focus-dark:0 0 0 2px white, 0 0 0 5px rgba(255 255 255 / 52%);--ic-border-disabled:var(--ic-space-1px) dashed var(--ic-architectural-200);--ic-border-light:var(--ic-space-1px) solid var(--ic-architectural-200);--ic-border-default:var(--ic-space-1px) solid var(--ic-architectural-400);--ic-border-hover:var(--ic-space-1px) solid var(--ic-architectural-500);--ic-border-pressed:var(--ic-space-1px) solid var(--ic-architectural-600);--ic-hc-border:var(--ic-space-1px) solid transparent;--ic-error-border-default:var(--ic-space-xxxs) solid var(--ic-status-error);--ic-error-border-hover:var(--ic-space-xxxs) solid
|
|
115
|
+
var(--ic-status-error-hover);--ic-error-border-pressed:var(--ic-space-xxxs) solid
|
|
116
|
+
var(--ic-status-error-pressed);--ic-success-border-default:var(--ic-space-xxxs) solid
|
|
117
|
+
var(--ic-status-success);--ic-success-border-hover:var(--ic-space-xxxs) solid
|
|
118
|
+
var(--ic-status-success-hover);--ic-success-border-pressed:var(--ic-space-xxxs) solid
|
|
119
|
+
var(--ic-status-success-pressed);--ic-warning-border-default:var(--ic-space-xxxs) solid
|
|
120
|
+
var(--ic-status-warning);--ic-warning-border-hover:var(--ic-space-xxxs) solid
|
|
121
|
+
var(--ic-status-warning-hover);--ic-warning-border-pressed:var(--ic-space-xxxs) solid
|
|
122
|
+
var(--ic-status-warning-pressed);--ic-border-neutral-black:var(--ic-architectural-black);--ic-border-neutral:var(--ic-architectural-300);--ic-border-neutral-grey:var(--ic-architectural-400);--ic-border-neutral-inverted:var(--ic-architectural-white)}:root{--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
|
|
123
|
+
inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
|
|
124
|
+
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
|
|
125
|
+
cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"sideEffects": [
|
|
4
4
|
"*.css"
|
|
5
5
|
],
|
|
6
|
-
"version": "
|
|
6
|
+
"version": "3.0.0-canary.1",
|
|
7
7
|
"description": "React-wrapped web components compiled using StencilJS",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
|
|
@@ -19,7 +19,9 @@
|
|
|
19
19
|
"build-storybook": "rimraf ./storybook-static && storybook build",
|
|
20
20
|
"audit": "echo 'Audit for: @ukic/canary-react' && audit-ci -m --config ../../audit-ci.json",
|
|
21
21
|
"copy:core-css": "echo 'Copy core.css from: @ukic/canary-web-components' && mkdirp -p ./dist/core && ncp ../canary-web-components/dist/core/core.css ./dist/core/core.css",
|
|
22
|
-
"copy:normalize-css": "echo 'Copy normalize.css from: @ukic/canary-web-components' && ncp ../canary-web-components/dist/core/normalize.css ./dist/core/normalize.css"
|
|
22
|
+
"copy:normalize-css": "echo 'Copy normalize.css from: @ukic/canary-web-components' && ncp ../canary-web-components/dist/core/normalize.css ./dist/core/normalize.css",
|
|
23
|
+
"prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
|
|
24
|
+
"prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write"
|
|
23
25
|
},
|
|
24
26
|
"main": "./dist/index.js",
|
|
25
27
|
"module": "./dist/index.js",
|
|
@@ -28,9 +30,9 @@
|
|
|
28
30
|
"dist/"
|
|
29
31
|
],
|
|
30
32
|
"dependencies": {
|
|
31
|
-
"@ukic/canary-web-components": "^
|
|
32
|
-
"@ukic/react": "^
|
|
33
|
-
"@ukic/web-components": "^
|
|
33
|
+
"@ukic/canary-web-components": "^3.0.0-canary.1",
|
|
34
|
+
"@ukic/react": "^3.0.0-alpha.1",
|
|
35
|
+
"@ukic/web-components": "^3.0.0-alpha.1"
|
|
34
36
|
},
|
|
35
37
|
"devDependencies": {
|
|
36
38
|
"@babel/core": "^7.16.0",
|
|
@@ -72,13 +74,14 @@
|
|
|
72
74
|
"react-router-dom": "^6.3.0",
|
|
73
75
|
"remark-gfm": "^3.0.1",
|
|
74
76
|
"storybook": "^7.6.10",
|
|
77
|
+
"storybook-addon-performance": "^0.17.3",
|
|
75
78
|
"ts-loader": "^9.5.0",
|
|
76
79
|
"typescript": "^4.5.2",
|
|
77
80
|
"url-loader": "^4.1.1",
|
|
78
81
|
"webpack": "^5.76.0"
|
|
79
82
|
},
|
|
80
83
|
"peerDependencies": {
|
|
81
|
-
"@ukic/fonts": "^2.
|
|
84
|
+
"@ukic/fonts": "^2.3.0",
|
|
82
85
|
"react": "^16.7.0 || ^17.0.2 || ^18.2.0",
|
|
83
86
|
"react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0"
|
|
84
87
|
},
|
|
@@ -91,5 +94,5 @@
|
|
|
91
94
|
]
|
|
92
95
|
},
|
|
93
96
|
"license": "MIT",
|
|
94
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "1c5671823f89c50f5e16d4f40e1bc15ae2310518"
|
|
95
98
|
}
|