@telesign/boreal-react 0.1.0-alpha.2 → 0.1.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +77 -1
  2. package/dist/components/components.d.ts +15 -0
  3. package/dist/components/components.js +8 -8
  4. package/dist/components/components.js.map +1 -1
  5. package/dist/css/theme-bics.css +209 -0
  6. package/dist/css/theme-masiv.css +209 -0
  7. package/dist/css/theme-telesign.css +209 -0
  8. package/dist/index.d.ts +3 -0
  9. package/dist/scss/maps/_theme-bics.scss +209 -0
  10. package/dist/scss/maps/_theme-masiv.scss +209 -0
  11. package/dist/scss/maps/_theme-telesign.scss +209 -0
  12. package/dist/scss/variables/_theme-bics.scss +207 -0
  13. package/dist/scss/variables/_theme-masiv.scss +207 -0
  14. package/dist/scss/variables/_theme-telesign.scss +207 -0
  15. package/dist/types/components/components.d.ts +6 -1
  16. package/package.json +6 -6
  17. package/lib/components/components.ts +0 -49
  18. package/lib/index.ts +0 -3
package/README.md CHANGED
@@ -1 +1,77 @@
1
- #BorealDS react
1
+ # React Wrapper for Boreal DS
2
+
3
+ A lightweight utility that wraps Boreal DS web components so they can be used as native React components.
4
+
5
+ ## Overview
6
+
7
+ React and custom elements don't integrate cleanly out of the box. Two key limitations apply:
8
+
9
+ **Data passing** — React passes all data to custom elements as HTML attributes. This works for primitive values, but breaks for objects and arrays, which get serialised as `[object Object]`.
10
+
11
+ **Event handling** — React uses a synthetic event system that cannot listen for DOM events emitted by custom elements without manual `addEventListener` calls and refs.
12
+
13
+ This wrapper solves both problems by mapping props and events onto the underlying custom element automatically.
14
+
15
+ ## Installation
16
+
17
+ > [!TIP]
18
+ > Refer to the official Boreal DS documentation at [Boreal DS Storybook](https://release-current--69b1eb61625aa69a7886f854.chromatic.com/) for more details.
19
+
20
+ ```sh
21
+ npm install @telesign/boreal-react
22
+ ```
23
+
24
+ > [!NOTE]
25
+ > `@telesign/boreal-web-components` is a dependency of this package and will be installed automatically. You do not need to install it separately.
26
+
27
+ ## Setup
28
+
29
+ ### Styles
30
+
31
+ Import the Boreal DS stylesheet in your application entry file:
32
+
33
+ ```tsx
34
+ // main.tsx
35
+ import '@telesign/boreal-react/css/boreal.css';
36
+ ```
37
+
38
+ ### Icon font
39
+
40
+ Add the Boreal DS icon font to the `<head>` of your `index.html`:
41
+
42
+ ```html
43
+ <link
44
+ rel="stylesheet"
45
+ href="https://resources-borealds.s3.us-east-1.amazonaws.com/icons/current/boreal-styles.css"
46
+ />
47
+ ```
48
+
49
+ ### Theming
50
+
51
+ Set the `data-theme` attribute on the `<body>` element to activate a brand theme:
52
+
53
+ ```html
54
+ <body data-theme="proximus">
55
+ ```
56
+
57
+ Available values: `connect` | `engage` | `protect` | `proximus`
58
+
59
+ ## Usage
60
+
61
+ ```tsx
62
+ import { BdsBanner } from '@telesign/boreal-react';
63
+
64
+ function App() {
65
+ const handleClose = () => {
66
+ console.log('Banner closed');
67
+ };
68
+
69
+ return (
70
+ <BdsBanner variant="info" enableClose onClose={handleClose}>
71
+ Welcome to Boreal DS
72
+ </BdsBanner>
73
+ );
74
+ }
75
+
76
+ export default App;
77
+ ```
package/dist/components/components.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
2
+ import { type BdsBannerCustomEvent, type BdsButtonCustomEvent } from "@telesign/boreal-web-components";
3
+ import { BdsBanner as BdsBannerElement } from "@telesign/boreal-web-components/components/bds-banner.js";
4
+ import { BdsButton as BdsButtonElement } from "@telesign/boreal-web-components/components/bds-button.js";
5
+ import { BdsTypography as BdsTypographyElement } from "@telesign/boreal-web-components/components/bds-typography.js";
6
+ export type BdsBannerEvents = {
7
+ onClose: EventName<BdsBannerCustomEvent<void>>;
8
+ };
9
+ export declare const BdsBanner: StencilReactComponent<BdsBannerElement, BdsBannerEvents>;
10
+ export type BdsButtonEvents = {
11
+ onBdsClick: EventName<BdsButtonCustomEvent<UIEvent>>;
12
+ };
13
+ export declare const BdsButton: StencilReactComponent<BdsButtonElement, BdsButtonEvents>;
14
+ export type BdsTypographyEvents = NonNullable<unknown>;
15
+ export declare const BdsTypography: StencilReactComponent<BdsTypographyElement, BdsTypographyEvents>;
package/dist/components/components.js CHANGED
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
  import { createComponent } from '@stencil/react-output-target/runtime';
3
3
  import { BdsBanner as BdsBannerElement, defineCustomElement as defineBdsBanner } from "@telesign/boreal-web-components/components/bds-banner.js";
4
+ import { BdsButton as BdsButtonElement, defineCustomElement as defineBdsButton } from "@telesign/boreal-web-components/components/bds-button.js";
4
5
  import { BdsTypography as BdsTypographyElement, defineCustomElement as defineBdsTypography } from "@telesign/boreal-web-components/components/bds-typography.js";
5
- import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "@telesign/boreal-web-components/components/my-component.js";
6
6
  import React from 'react';
7
7
  export const BdsBanner = createComponent({
8
8
  tagName: 'bds-banner',
@@ -11,6 +11,13 @@ export const BdsBanner = createComponent({
11
11
  events: { onClose: 'close' },
12
12
  defineCustomElement: defineBdsBanner
13
13
  });
14
+ export const BdsButton = createComponent({
15
+ tagName: 'bds-button',
16
+ elementClass: BdsButtonElement,
17
+ react: React,
18
+ events: { onBdsClick: 'bdsClick' },
19
+ defineCustomElement: defineBdsButton
20
+ });
14
21
  export const BdsTypography = createComponent({
15
22
  tagName: 'bds-typography',
16
23
  elementClass: BdsTypographyElement,
@@ -18,11 +25,4 @@ export const BdsTypography = createComponent({
18
25
  events: {},
19
26
  defineCustomElement: defineBdsTypography
20
27
  });
21
- export const MyComponent = createComponent({
22
- tagName: 'my-component',
23
- elementClass: MyComponentElement,
24
- react: React,
25
- events: {},
26
- defineCustomElement: defineMyComponent
27
- });
28
28
  //# sourceMappingURL=components.js.map
package/dist/components/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","sourceRoot":"","sources":["../../lib/components/components.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAUb,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAEvE,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,0DAA0D,CAAC;AACjJ,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,mBAAmB,IAAI,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACjK,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,mBAAmB,IAAI,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AACzJ,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,MAAM,SAAS,GAA2E,eAAe,CAAoC;IAChJ,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAqB;IAC/C,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,aAAa,GAAmF,eAAe,CAA4C;IACpK,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,oBAAoB;IAElC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAyB;IACjC,mBAAmB,EAAE,mBAAmB;CAC3C,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,WAAW,GAA+E,eAAe,CAAwC;IAC1J,OAAO,EAAE,cAAc;IACvB,YAAY,EAAE,kBAAkB;IAEhC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAuB;IAC/B,mBAAmB,EAAE,iBAAiB;CACzC,CAAC,CAAC"}
1
+ {"version":3,"file":"components.js","sourceRoot":"","sources":["../../lib/components/components.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAUb,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAEvE,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,0DAA0D,CAAC;AACjJ,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,0DAA0D,CAAC;AACjJ,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,mBAAmB,IAAI,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACjK,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,MAAM,SAAS,GAA2E,eAAe,CAAoC;IAChJ,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAqB;IAC/C,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,SAAS,GAA2E,eAAe,CAAoC;IAChJ,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE,UAAU,EAAE,UAAU,EAAqB;IACrD,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,aAAa,GAAmF,eAAe,CAA4C;IACpK,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,oBAAoB;IAElC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAyB;IACjC,mBAAmB,EAAE,mBAAmB;CAC3C,CAAC,CAAC"}
package/dist/css/theme-bics.css ADDED
@@ -0,0 +1,209 @@
1
+ [data-theme="bics"] {
2
+ --boreal-accent-dark: var(--boreal-color-bics-byzantine-byzantine-2);
3
+ --boreal-black: var(--boreal-color-bics-black-black-1);
4
+ --boreal-accent-light: var(--boreal-color-bics-byzantine-byzantine-5);
5
+ --boreal-white: var(--boreal-color-white);
6
+ --boreal-accent-base: var(--boreal-color-bics-byzantine-byzantine-3);
7
+ --boreal-extended-teal-light: var(--boreal-color-masiv-teal-teal-20);
8
+ --boreal-extended-teal-lighter: var(--boreal-color-masiv-teal-teal-5);
9
+ --boreal-extended-teal-base: var(--boreal-color-masiv-teal-teal-40);
10
+ --boreal-extended-teal-dark: var(--boreal-color-masiv-teal-teal-70);
11
+ --boreal-extended-teal-darker: var(--boreal-color-masiv-teal-teal-90);
12
+ --boreal-extended-purple-base: var(--boreal-color-masiv-purple-purple-50);
13
+ --boreal-extended-purple-dark: var(--boreal-color-masiv-purple-purple-70);
14
+ --boreal-extended-orange-base: var(--boreal-color-masiv-orange-orange-40);
15
+ --boreal-extended-purple-light: var(--boreal-color-masiv-purple-purple-20);
16
+ --boreal-extended-orange-darker: var(--boreal-color-masiv-orange-orange-90);
17
+ --boreal-extended-orange-lighter: var(--boreal-color-masiv-orange-orange-5);
18
+ --boreal-extended-orange-dark: var(--boreal-color-masiv-orange-orange-70);
19
+ --boreal-extended-orange-light: var(--boreal-color-masiv-orange-orange-20);
20
+ --boreal-extended-purple-lighter: var(--boreal-color-masiv-purple-purple-5);
21
+ --boreal-extended-purple-darker: var(--boreal-color-masiv-purple-purple-90);
22
+ --boreal-extended-cyan-lighter: var(--boreal-color-masiv-cyan-cyan-5);
23
+ --boreal-extended-cyan-light: var(--boreal-color-masiv-cyan-cyan-20);
24
+ --boreal-extended-cyan-base: var(--boreal-color-masiv-cyan-cyan-40);
25
+ --boreal-extended-cyan-dark: var(--boreal-color-masiv-cyan-cyan-70);
26
+ --boreal-extended-cyan-darker: var(--boreal-color-masiv-cyan-cyan-90);
27
+ --boreal-extended-lime-dark: var(--boreal-color-masiv-lime-lime-70);
28
+ --boreal-extended-lime-base: var(--boreal-color-masiv-lime-lime-40);
29
+ --boreal-extended-lime-darker: var(--boreal-color-masiv-lime-lime-90);
30
+ --boreal-extended-lime-light: var(--boreal-color-masiv-lime-lime-20);
31
+ --boreal-extended-lime-lighter: var(--boreal-color-masiv-lime-lime-5);
32
+ --boreal-extended-cobalt-lighter: var(--boreal-color-telesign-cobalt-cobalt-50);
33
+ --boreal-extended-cobalt-light: var(--boreal-color-telesign-cobalt-cobalt-100);
34
+ --boreal-extended-cobalt-base: var(--boreal-color-telesign-cobalt-cobalt-600);
35
+ --boreal-extended-cobalt-dark: var(--boreal-color-telesign-cobalt-cobalt-800);
36
+ --boreal-extended-cobalt-darker: var(--boreal-color-telesign-cobalt-cobalt-900);
37
+ --boreal-extended-onyx-lighter: var(--boreal-color-telesign-onyx-onyx-100);
38
+ --boreal-extended-onyx-light: var(--boreal-color-telesign-onyx-onyx-200);
39
+ --boreal-extended-onyx-base: var(--boreal-color-telesign-onyx-onyx-500);
40
+ --boreal-extended-onyx-dark: var(--boreal-color-telesign-onyx-onyx-600);
41
+ --boreal-extended-onyx-darker: var(--boreal-color-telesign-onyx-onyx-900);
42
+ --boreal-extended-rose-lighter: var(--boreal-color-masiv-rose-rose-5);
43
+ --boreal-extended-rose-light: var(--boreal-color-masiv-rose-rose-20);
44
+ --boreal-extended-rose-base: var(--boreal-color-masiv-rose-rose-50);
45
+ --boreal-extended-rose-dark: var(--boreal-color-masiv-rose-rose-70);
46
+ --boreal-extended-rose-darker: var(--boreal-color-masiv-rose-rose-90);
47
+ --boreal-neutral-600: var(--boreal-color-bics-black-black-4);
48
+ --boreal-information-lighter: var(--boreal-extended-cobalt-lighter);
49
+ --boreal-information-light: var(--boreal-extended-cobalt-light);
50
+ --boreal-success-lighter: var(--boreal-color-bics-success-success-7);
51
+ --boreal-information-base: var(--boreal-extended-cobalt-base);
52
+ --boreal-neutral-900: var(--boreal-color-bics-black-black-1);
53
+ --boreal-information-dark: var(--boreal-extended-cobalt-dark);
54
+ --boreal-neutral-400: var(--boreal-color-bics-grey-grey-4);
55
+ --boreal-warning-base: var(--boreal-color-bics-warning-warning-4);
56
+ --boreal-neutral-700: var(--boreal-color-bics-black-black-3);
57
+ --boreal-warning-dark: var(--boreal-color-bics-warning-warning-2);
58
+ --boreal-warning-darker: var(--boreal-color-bics-warning-warning-1);
59
+ --boreal-warning-light: var(--boreal-color-bics-warning-warning-5);
60
+ --boreal-focus: #3b60c54d;
61
+ --boreal-success-light: var(--boreal-color-bics-success-success-6);
62
+ --boreal-neutral-50: var(--boreal-color-bics-black-black-7);
63
+ --boreal-success-base: var(--boreal-color-bics-success-success-4);
64
+ --boreal-primary-dark: var(--boreal-color-bics-petrol-petrol-2);
65
+ --boreal-danger-darker: var(--boreal-color-bics-error-error-1);
66
+ --boreal-primary-darker: var(--boreal-color-bics-petrol-petrol-1);
67
+ --boreal-danger-dark: var(--boreal-color-bics-error-error-2);
68
+ --boreal-base-alt: var(--boreal-color-bics-grey-grey-3);
69
+ --boreal-neutral-300: var(--boreal-color-bics-grey-grey-5);
70
+ --boreal-danger-lighter: var(--boreal-color-bics-error-error-7);
71
+ --boreal-base-lighter: var(--boreal-color-bics-grey-grey-7);
72
+ --boreal-danger-light: var(--boreal-color-bics-error-error-5);
73
+ --boreal-accent-lighter: var(--boreal-color-bics-byzantine-byzantine-6);
74
+ --boreal-success-dark: var(--boreal-color-bics-success-success-2);
75
+ --boreal-neutral-25: var(--boreal-color-bics-grey-grey-7);
76
+ --boreal-accent-darker: var(--boreal-color-bics-byzantine-byzantine-1);
77
+ --boreal-neutral-200: var(--boreal-color-bics-grey-grey-6);
78
+ --boreal-warning-lighter: var(--boreal-color-bics-warning-warning-7);
79
+ --boreal-success-darker: var(--boreal-color-bics-success-success-1);
80
+ --boreal-primary-base: var(--boreal-color-bics-petrol-petrol-3);
81
+ --boreal-information-darker: var(--boreal-extended-cobalt-darker);
82
+ --boreal-neutral-500: var(--boreal-color-bics-black-black-5);
83
+ --boreal-neutral-100: var(--boreal-color-bics-grey-grey-7);
84
+ --boreal-danger-base: var(--boreal-color-bics-error-error-4);
85
+ --boreal-neutral-800: var(--boreal-color-bics-black-black-2);
86
+ --boreal-base-light: var(--boreal-color-bics-grey-grey-8);
87
+ --boreal-primary-light: var(--boreal-color-bics-petrol-petrol-5);
88
+ --boreal-primary-lighter: var(--boreal-color-bics-petrol-petrol-7);
89
+ --boreal-base-dark: var(--boreal-color-bics-grey-grey-5);
90
+ --boreal-base-darker: var(--boreal-color-bics-grey-grey-5);
91
+ --boreal-user-base: var(--boreal-color-bics-petrol-petrol-3);
92
+ --boreal-bg-overlay: var(--boreal-neutral-900);
93
+ --boreal-bg-inverse: var(--boreal-white);
94
+ --boreal-bg-primary-darker: var(--boreal-primary-darker);
95
+ --boreal-bg-default: var(--boreal-neutral-25);
96
+ --boreal-bg-primary: var(--boreal-primary-base);
97
+ --boreal-bg-neutral: var(--boreal-neutral-700);
98
+ --boreal-text-success: var(--boreal-success-base);
99
+ --boreal-text-danger: var(--boreal-danger-base);
100
+ --boreal-text-default-darker: var(--boreal-neutral-900);
101
+ --boreal-text-information: var(--boreal-information-base);
102
+ --boreal-text-accent: var(--boreal-accent-base);
103
+ --boreal-text-default: var(--boreal-neutral-700);
104
+ --boreal-text-default-light: var(--boreal-neutral-400);
105
+ --boreal-text-inverse: var(--boreal-white);
106
+ --boreal-text-warning: var(--boreal-warning-base);
107
+ --boreal-text-disabled: var(--boreal-neutral-300);
108
+ --boreal-text-primary: var(--boreal-primary-base);
109
+ --boreal-text-danger-dark: var(--boreal-danger-dark);
110
+ --boreal-text-success-dark: var(--boreal-success-dark);
111
+ --boreal-text-information-dark: var(--boreal-information-darker);
112
+ --boreal-text-warning-light: var(--boreal-warning-light);
113
+ --boreal-text-danger-light: var(--boreal-danger-light);
114
+ --boreal-text-success-light: var(--boreal-success-light);
115
+ --boreal-text-information-light: var(--boreal-information-light);
116
+ --boreal-text-warning-dark: var(--boreal-warning-darker);
117
+ --boreal-text-base: var(--boreal-base-alt);
118
+ --boreal-text-primary-light: var(--boreal-primary-light);
119
+ --boreal-text-primary-dark: var(--boreal-primary-dark);
120
+ --boreal-ui-default: var(--boreal-white);
121
+ --boreal-ui-inverse: var(--boreal-white);
122
+ --boreal-ui-accent: var(--boreal-accent-base);
123
+ --boreal-ui-black-light: var(--boreal-neutral-500);
124
+ --boreal-ui-base: var(--boreal-base-alt);
125
+ --boreal-ui-base-light: var(--boreal-base-light);
126
+ --boreal-ui-disabled: var(--boreal-neutral-50);
127
+ --boreal-ui-info-light: var(--boreal-information-light);
128
+ --boreal-ui-success-light: var(--boreal-success-light);
129
+ --boreal-ui-success: var(--boreal-success-base);
130
+ --boreal-ui-black: var(--boreal-neutral-900);
131
+ --boreal-ui-danger-light: var(--boreal-danger-light);
132
+ --boreal-ui-primary-lighter: var(--boreal-primary-lighter);
133
+ --boreal-ui-danger: var(--boreal-danger-base);
134
+ --boreal-ui-info: var(--boreal-information-base);
135
+ --boreal-ui-primary: var(--boreal-primary-base);
136
+ --boreal-ui-primary-light: var(--boreal-primary-light);
137
+ --boreal-ui-primary-dark: var(--boreal-primary-dark);
138
+ --boreal-ui-warning: var(--boreal-warning-base);
139
+ --boreal-ui-success-lighter: var(--boreal-success-lighter);
140
+ --boreal-ui-danger-lighter: var(--boreal-danger-lighter);
141
+ --boreal-ui-info-lighter: var(--boreal-information-lighter);
142
+ --boreal-ui-warning-light: var(--boreal-warning-light);
143
+ --boreal-ui-warning-lighter: var(--boreal-warning-lighter);
144
+ --boreal-ui-base-lighter: var(--boreal-base-lighter);
145
+ --boreal-ui-default-dark: var(--boreal-base-dark);
146
+ --boreal-ui-success-dark: var(--boreal-success-dark);
147
+ --boreal-ui-danger-dark: var(--boreal-danger-dark);
148
+ --boreal-ui-info-dark: var(--boreal-information-dark);
149
+ --boreal-ui-warning-dark: var(--boreal-warning-dark);
150
+ --boreal-ui-default-light: var(--boreal-base-light);
151
+ --boreal-icon-info-dark: var(--boreal-information-darker);
152
+ --boreal-icon-default-lighter: var(--boreal-neutral-200);
153
+ --boreal-icon-default-light: var(--boreal-neutral-300);
154
+ --boreal-icon-default: var(--boreal-neutral-700);
155
+ --boreal-icon-success: var(--boreal-success-base);
156
+ --boreal-icon-inverse: var(--boreal-white);
157
+ --boreal-icon-warning: var(--boreal-warning-base);
158
+ --boreal-icon-accent: var(--boreal-accent-base);
159
+ --boreal-icon-danger: var(--boreal-danger-base);
160
+ --boreal-icon-base: var(--boreal-base-alt);
161
+ --boreal-icon-primary: var(--boreal-primary-base);
162
+ --boreal-icon-success-dark: var(--boreal-success-dark);
163
+ --boreal-icon-warning-dark: var(--boreal-warning-darker);
164
+ --boreal-icon-danger-dark: var(--boreal-danger-dark);
165
+ --boreal-icon-info: var(--boreal-information-base);
166
+ --boreal-icon-info-light: var(--boreal-information-light);
167
+ --boreal-icon-success-light: var(--boreal-success-light);
168
+ --boreal-icon-warning-light: var(--boreal-warning-light);
169
+ --boreal-icon-danger-light: var(--boreal-danger-light);
170
+ --boreal-icon-disabled: var(--boreal-neutral-300);
171
+ --boreal-icon-primary-light: var(--boreal-primary-light);
172
+ --boreal-icon-primary-dark: var(--boreal-primary-dark);
173
+ --boreal-icon-user: var(--boreal-user-base);
174
+ --boreal-alpha-black-50: #272a2f80;
175
+ --boreal-alpha-black-25: #272a2f40;
176
+ --boreal-alpha-white-50: #ffffff80;
177
+ --boreal-alpha-white-25: #ffffff40;
178
+ --boreal-alpha-white-10: #ffffff1a;
179
+ --boreal-alpha-white-75: #ffffffbf;
180
+ --boreal-alpha-white-85: #ffffffd9;
181
+ --boreal-alpha-white-90: #ffffffe6;
182
+ --boreal-alpha-white-95: #ffffffe6;
183
+ --boreal-alpha-white-80: #ffffffcc;
184
+ --boreal-alpha-white-55: #ffffff8c;
185
+ --boreal-alpha-black-5: #272a2f0d;
186
+ --boreal-alpha-black-10: #272a2f1a;
187
+ --boreal-extended-tael-darker: var(--boreal-extended-teal-darker);
188
+ --boreal-stroke-warning: var(--boreal-warning-base);
189
+ --boreal-stroke-inverse: var(--boreal-white);
190
+ --boreal-stroke-info: var(--boreal-information-base);
191
+ --boreal-stroke-success: var(--boreal-success-base);
192
+ --boreal-stroke-default-dark: var(--boreal-base-dark);
193
+ --boreal-stroke-default-light: var(--boreal-base-light);
194
+ --boreal-stroke-default: var(--boreal-base-alt);
195
+ --boreal-stroke-focus: var(--boreal-focus);
196
+ --boreal-stroke-danger: var(--boreal-danger-base);
197
+ --boreal-stroke-accent: var(--boreal-accent-base);
198
+ --boreal-stroke-primary: var(--boreal-primary-base);
199
+ --boreal-stroke-primary-light: var(--boreal-primary-light);
200
+ --boreal-stroke-primary-dark: var(--boreal-primary-dark);
201
+ --boreal-stroke-info-light: var(--boreal-information-light);
202
+ --boreal-stroke-info-dark: var(--boreal-information-dark);
203
+ --boreal-stroke-success-light: var(--boreal-success-light);
204
+ --boreal-stroke-success-dark: var(--boreal-success-dark);
205
+ --boreal-stroke-warning-light: var(--boreal-warning-light);
206
+ --boreal-stroke-warning-dark: var(--boreal-warning-dark);
207
+ --boreal-stroke-danger-light: var(--boreal-danger-light);
208
+ --boreal-stroke-danger-dark: var(--boreal-danger-dark);
209
+ }
package/dist/css/theme-masiv.css ADDED
@@ -0,0 +1,209 @@
1
+ [data-theme="masiv"] {
2
+ --boreal-accent-dark: var(--boreal-color-masiv-rose-rose-70);
3
+ --boreal-black: var(--boreal-color-masiv-ink-ink-90);
4
+ --boreal-accent-light: var(--boreal-color-masiv-rose-rose-20);
5
+ --boreal-white: var(--boreal-white);
6
+ --boreal-accent-base: var(--boreal-color-masiv-rose-rose-50);
7
+ --boreal-extended-teal-light: var(--boreal-color-masiv-teal-teal-20);
8
+ --boreal-extended-teal-lighter: var(--boreal-color-masiv-teal-teal-5);
9
+ --boreal-extended-teal-base: var(--boreal-color-masiv-teal-teal-40);
10
+ --boreal-extended-teal-dark: var(--boreal-color-masiv-teal-teal-70);
11
+ --boreal-extended-teal-darker: var(--boreal-color-masiv-teal-teal-90);
12
+ --boreal-extended-purple-base: var(--boreal-color-masiv-purple-purple-50);
13
+ --boreal-extended-purple-dark: var(--boreal-color-masiv-purple-purple-70);
14
+ --boreal-extended-orange-base: var(--boreal-color-masiv-orange-orange-40);
15
+ --boreal-extended-purple-light: var(--boreal-color-masiv-purple-purple-20);
16
+ --boreal-extended-orange-darker: var(--boreal-color-masiv-orange-orange-90);
17
+ --boreal-extended-orange-lighter: var(--boreal-color-masiv-orange-orange-5);
18
+ --boreal-extended-orange-dark: var(--boreal-color-masiv-orange-orange-70);
19
+ --boreal-extended-orange-light: var(--boreal-color-masiv-orange-orange-20);
20
+ --boreal-extended-purple-lighter: var(--boreal-color-masiv-purple-purple-5);
21
+ --boreal-extended-purple-darker: var(--boreal-color-masiv-purple-purple-90);
22
+ --boreal-extended-cyan-lighter: var(--boreal-color-masiv-cyan-cyan-5);
23
+ --boreal-extended-cyan-light: var(--boreal-color-masiv-cyan-cyan-20);
24
+ --boreal-extended-cyan-base: var(--boreal-color-masiv-cyan-cyan-40);
25
+ --boreal-extended-cyan-dark: var(--boreal-color-masiv-cyan-cyan-70);
26
+ --boreal-extended-cyan-darker: var(--boreal-color-masiv-cyan-cyan-90);
27
+ --boreal-extended-lime-dark: var(--boreal-color-masiv-lime-lime-70);
28
+ --boreal-extended-lime-base: var(--boreal-color-masiv-lime-lime-40);
29
+ --boreal-extended-lime-darker: var(--boreal-color-masiv-lime-lime-90);
30
+ --boreal-extended-lime-light: var(--boreal-color-masiv-lime-lime-20);
31
+ --boreal-extended-lime-lighter: var(--boreal-color-masiv-lime-lime-5);
32
+ --boreal-extended-cobalt-lighter: var(--boreal-color-telesign-cobalt-cobalt-50);
33
+ --boreal-extended-cobalt-light: var(--boreal-color-telesign-cobalt-cobalt-100);
34
+ --boreal-extended-cobalt-base: var(--boreal-color-telesign-cobalt-cobalt-600);
35
+ --boreal-extended-cobalt-dark: var(--boreal-color-telesign-cobalt-cobalt-800);
36
+ --boreal-extended-cobalt-darker: var(--boreal-color-telesign-cobalt-cobalt-900);
37
+ --boreal-extended-onyx-lighter: var(--boreal-color-telesign-onyx-onyx-100);
38
+ --boreal-extended-onyx-light: var(--boreal-color-telesign-onyx-onyx-200);
39
+ --boreal-extended-onyx-base: var(--boreal-color-telesign-onyx-onyx-500);
40
+ --boreal-extended-onyx-dark: var(--boreal-color-telesign-onyx-onyx-600);
41
+ --boreal-extended-onyx-darker: var(--boreal-color-telesign-onyx-onyx-900);
42
+ --boreal-extended-rose-lighter: var(--boreal-color-masiv-rose-rose-5);
43
+ --boreal-extended-rose-light: var(--boreal-color-masiv-rose-rose-20);
44
+ --boreal-extended-rose-base: var(--boreal-color-masiv-rose-rose-50);
45
+ --boreal-extended-rose-dark: var(--boreal-color-masiv-rose-rose-70);
46
+ --boreal-extended-rose-darker: var(--boreal-color-masiv-rose-rose-90);
47
+ --boreal-neutral-600: var(--boreal-color-masiv-ink-ink-60);
48
+ --boreal-information-lighter: var(--boreal-color-masiv-blue-blue-5);
49
+ --boreal-information-light: var(--boreal-color-masiv-blue-blue-20);
50
+ --boreal-success-lighter: var(--boreal-color-masiv-green-green-5);
51
+ --boreal-information-base: var(--boreal-color-masiv-blue-blue-50);
52
+ --boreal-neutral-900: var(--boreal-color-masiv-ink-ink-90);
53
+ --boreal-information-dark: var(--boreal-color-masiv-blue-blue-70);
54
+ --boreal-neutral-400: var(--boreal-color-masiv-ink-ink-40);
55
+ --boreal-warning-base: var(--boreal-color-masiv-yellow-yellow-30);
56
+ --boreal-neutral-700: var(--boreal-color-masiv-ink-ink-70);
57
+ --boreal-warning-dark: var(--boreal-color-masiv-yellow-yellow-70);
58
+ --boreal-warning-darker: var(--boreal-color-masiv-yellow-yellow-90);
59
+ --boreal-warning-light: var(--boreal-color-masiv-yellow-yellow-20);
60
+ --boreal-focus: var(--boreal-color-masiv-blue-blue-20);
61
+ --boreal-success-light: var(--boreal-color-masiv-green-green-20);
62
+ --boreal-neutral-50: var(--boreal-color-masiv-ink-ink-5);
63
+ --boreal-success-base: var(--boreal-color-masiv-green-green-40);
64
+ --boreal-primary-dark: var(--boreal-color-masiv-blue-blue-70);
65
+ --boreal-danger-darker: var(--boreal-color-masiv-red-red-90);
66
+ --boreal-primary-darker: var(--boreal-color-masiv-blue-blue-90);
67
+ --boreal-danger-dark: var(--boreal-color-masiv-red-red-70);
68
+ --boreal-base-alt: var(--boreal-color-masiv-ink-ink-70);
69
+ --boreal-neutral-300: var(--boreal-color-masiv-ink-ink-30);
70
+ --boreal-danger-lighter: var(--boreal-color-masiv-red-red-5);
71
+ --boreal-base-lighter: var(--boreal-color-white);
72
+ --boreal-danger-light: var(--boreal-color-masiv-red-red-20);
73
+ --boreal-accent-lighter: var(--boreal-color-masiv-rose-rose-5);
74
+ --boreal-success-dark: var(--boreal-color-masiv-green-green-70);
75
+ --boreal-neutral-25: var(--boreal-color-masiv-ink-ink-5);
76
+ --boreal-accent-darker: var(--boreal-color-masiv-rose-rose-90);
77
+ --boreal-neutral-200: var(--boreal-color-masiv-ink-ink-20);
78
+ --boreal-warning-lighter: var(--boreal-color-masiv-yellow-yellow-5);
79
+ --boreal-success-darker: var(--boreal-color-masiv-green-green-90);
80
+ --boreal-primary-base: var(--boreal-color-masiv-blue-blue-50);
81
+ --boreal-information-darker: var(--boreal-color-masiv-blue-blue-90);
82
+ --boreal-neutral-500: var(--boreal-color-masiv-ink-ink-50);
83
+ --boreal-neutral-100: var(--boreal-color-masiv-ink-ink-10);
84
+ --boreal-danger-base: var(--boreal-color-masiv-red-red-50);
85
+ --boreal-neutral-800: var(--boreal-color-masiv-ink-ink-80);
86
+ --boreal-base-light: var(--boreal-color-masiv-ink-ink-10);
87
+ --boreal-primary-light: var(--boreal-color-masiv-blue-blue-20);
88
+ --boreal-primary-lighter: var(--boreal-color-masiv-blue-blue-5);
89
+ --boreal-base-dark: var(--boreal-color-masiv-ink-ink-10);
90
+ --boreal-base-darker: var(--boreal-color-masiv-ink-ink-10);
91
+ --boreal-user-base: var(--boreal-color-masiv-green-green-40);
92
+ --boreal-bg-overlay: var(--boreal-neutral-900);
93
+ --boreal-bg-inverse: var(--boreal-white);
94
+ --boreal-bg-primary-darker: var(--boreal-primary-darker);
95
+ --boreal-bg-default: var(--boreal-neutral-25);
96
+ --boreal-bg-primary: var(--boreal-primary-base);
97
+ --boreal-bg-neutral: var(--boreal-neutral-700);
98
+ --boreal-text-success: var(--boreal-success-base);
99
+ --boreal-text-danger: var(--boreal-danger-base);
100
+ --boreal-text-default-darker: var(--boreal-neutral-900);
101
+ --boreal-text-information: var(--boreal-information-base);
102
+ --boreal-text-accent: var(--boreal-accent-base);
103
+ --boreal-text-default: var(--boreal-neutral-700);
104
+ --boreal-text-default-light: var(--boreal-neutral-400);
105
+ --boreal-text-inverse: var(--boreal-white);
106
+ --boreal-text-warning: var(--boreal-warning-base);
107
+ --boreal-text-disabled: var(--boreal-neutral-300);
108
+ --boreal-text-primary: var(--boreal-primary-base);
109
+ --boreal-text-danger-dark: var(--boreal-danger-dark);
110
+ --boreal-text-success-dark: var(--boreal-success-dark);
111
+ --boreal-text-information-dark: var(--boreal-information-darker);
112
+ --boreal-text-warning-light: var(--boreal-warning-light);
113
+ --boreal-text-danger-light: var(--boreal-danger-light);
114
+ --boreal-text-success-light: var(--boreal-success-light);
115
+ --boreal-text-information-light: var(--boreal-information-light);
116
+ --boreal-text-warning-dark: var(--boreal-warning-darker);
117
+ --boreal-text-base: var(--boreal-base-alt);
118
+ --boreal-text-primary-light: var(--boreal-primary-light);
119
+ --boreal-text-primary-dark: var(--boreal-primary-dark);
120
+ --boreal-ui-default: var(--boreal-white);
121
+ --boreal-ui-inverse: var(--boreal-white);
122
+ --boreal-ui-accent: var(--boreal-accent-base);
123
+ --boreal-ui-black-light: var(--boreal-neutral-500);
124
+ --boreal-ui-base: var(--boreal-base-alt);
125
+ --boreal-ui-base-light: var(--boreal-base-light);
126
+ --boreal-ui-disabled: var(--boreal-neutral-50);
127
+ --boreal-ui-info-light: var(--boreal-information-light);
128
+ --boreal-ui-success-light: var(--boreal-success-light);
129
+ --boreal-ui-success: var(--boreal-success-base);
130
+ --boreal-ui-black: var(--boreal-neutral-900);
131
+ --boreal-ui-danger-light: var(--boreal-danger-light);
132
+ --boreal-ui-primary-lighter: var(--boreal-primary-lighter);
133
+ --boreal-ui-danger: var(--boreal-danger-base);
134
+ --boreal-ui-info: var(--boreal-information-base);
135
+ --boreal-ui-primary: var(--boreal-primary-base);
136
+ --boreal-ui-primary-light: var(--boreal-primary-light);
137
+ --boreal-ui-primary-dark: var(--boreal-primary-dark);
138
+ --boreal-ui-warning: var(--boreal-warning-base);
139
+ --boreal-ui-success-lighter: var(--boreal-success-lighter);
140
+ --boreal-ui-danger-lighter: var(--boreal-danger-lighter);
141
+ --boreal-ui-info-lighter: var(--boreal-information-lighter);
142
+ --boreal-ui-warning-light: var(--boreal-warning-light);
143
+ --boreal-ui-warning-lighter: var(--boreal-warning-lighter);
144
+ --boreal-ui-base-lighter: var(--boreal-base-lighter);
145
+ --boreal-ui-default-dark: var(--boreal-base-dark);
146
+ --boreal-ui-success-dark: var(--boreal-success-dark);
147
+ --boreal-ui-danger-dark: var(--boreal-danger-dark);
148
+ --boreal-ui-info-dark: var(--boreal-information-dark);
149
+ --boreal-ui-warning-dark: var(--boreal-warning-dark);
150
+ --boreal-ui-default-light: var(--boreal-base-light);
151
+ --boreal-icon-info-dark: var(--boreal-information-darker);
152
+ --boreal-icon-default-lighter: var(--boreal-neutral-200);
153
+ --boreal-icon-default-light: var(--boreal-neutral-300);
154
+ --boreal-icon-default: var(--boreal-neutral-700);
155
+ --boreal-icon-success: var(--boreal-success-base);
156
+ --boreal-icon-inverse: var(--boreal-white);
157
+ --boreal-icon-warning: var(--boreal-warning-base);
158
+ --boreal-icon-accent: var(--boreal-accent-base);
159
+ --boreal-icon-danger: var(--boreal-danger-base);
160
+ --boreal-icon-base: var(--boreal-base-alt);
161
+ --boreal-icon-primary: var(--boreal-primary-base);
162
+ --boreal-icon-success-dark: var(--boreal-success-dark);
163
+ --boreal-icon-warning-dark: var(--boreal-warning-darker);
164
+ --boreal-icon-danger-dark: var(--boreal-danger-dark);
165
+ --boreal-icon-info: var(--boreal-information-base);
166
+ --boreal-icon-info-light: var(--boreal-information-light);
167
+ --boreal-icon-success-light: var(--boreal-success-light);
168
+ --boreal-icon-warning-light: var(--boreal-warning-light);
169
+ --boreal-icon-danger-light: var(--boreal-danger-light);
170
+ --boreal-icon-disabled: var(--boreal-neutral-300);
171
+ --boreal-icon-primary-light: var(--boreal-primary-light);
172
+ --boreal-icon-primary-dark: var(--boreal-primary-dark);
173
+ --boreal-icon-user: var(--boreal-user-base);
174
+ --boreal-alpha-black-50: #272a2f80;
175
+ --boreal-alpha-black-25: #272a2f40;
176
+ --boreal-alpha-white-50: #ffffff80;
177
+ --boreal-alpha-white-25: #ffffff40;
178
+ --boreal-alpha-white-10: #ffffff1a;
179
+ --boreal-alpha-white-75: #ffffffbf;
180
+ --boreal-alpha-white-85: #ffffffd9;
181
+ --boreal-alpha-white-90: #ffffffe6;
182
+ --boreal-alpha-white-95: #ffffffe6;
183
+ --boreal-alpha-white-80: #ffffffcc;
184
+ --boreal-alpha-white-55: #ffffff8c;
185
+ --boreal-alpha-black-5: #272a2f0d;
186
+ --boreal-alpha-black-10: #272a2f1a;
187
+ --boreal-extended-tael-darker: var(--boreal-extended-teal-darker);
188
+ --boreal-stroke-warning: var(--boreal-warning-base);
189
+ --boreal-stroke-inverse: var(--boreal-white);
190
+ --boreal-stroke-info: var(--boreal-information-base);
191
+ --boreal-stroke-success: var(--boreal-success-base);
192
+ --boreal-stroke-default-dark: var(--boreal-base-dark);
193
+ --boreal-stroke-default-light: var(--boreal-base-light);
194
+ --boreal-stroke-default: var(--boreal-base-alt);
195
+ --boreal-stroke-focus: var(--boreal-focus);
196
+ --boreal-stroke-danger: var(--boreal-danger-base);
197
+ --boreal-stroke-accent: var(--boreal-accent-base);
198
+ --boreal-stroke-primary: var(--boreal-primary-base);
199
+ --boreal-stroke-primary-light: var(--boreal-primary-light);
200
+ --boreal-stroke-primary-dark: var(--boreal-primary-dark);
201
+ --boreal-stroke-info-light: var(--boreal-information-light);
202
+ --boreal-stroke-info-dark: var(--boreal-information-dark);
203
+ --boreal-stroke-success-light: var(--boreal-success-light);
204
+ --boreal-stroke-success-dark: var(--boreal-success-dark);
205
+ --boreal-stroke-warning-light: var(--boreal-warning-light);
206
+ --boreal-stroke-warning-dark: var(--boreal-warning-dark);
207
+ --boreal-stroke-danger-light: var(--boreal-danger-light);
208
+ --boreal-stroke-danger-dark: var(--boreal-danger-dark);
209
+ }