@fluid-topics/ft-wc-utils 0.0.88 → 0.1.3

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.
@@ -0,0 +1,25 @@
1
+ import { CSSResult } from "lit";
2
+ export declare type FtCssVariableCategory = "COLOR" | "NUMBER" | "SIZE" | "UNKNOWN" | "POSITION" | "DISPLAY";
3
+ export declare class FtCssVariable {
4
+ name: string;
5
+ category: FtCssVariableCategory;
6
+ fallbackVariable?: FtCssVariable | undefined;
7
+ defaultValue?: string | undefined;
8
+ context?: string | undefined;
9
+ ["_$cssResult$"]: boolean;
10
+ get cssText(): string;
11
+ get styleSheet(): CSSStyleSheet | undefined;
12
+ toString(): string;
13
+ value: CSSResult;
14
+ private constructor();
15
+ static create(name: string, category: FtCssVariableCategory, defaultValue: string): FtCssVariable;
16
+ static extend(name: string, fallbackVariable: FtCssVariable, defaultValue?: string): FtCssVariable;
17
+ static external(externalVariable: FtCssVariable, context: string): FtCssVariable;
18
+ get(defaultValue?: string): CSSResult;
19
+ defaultCssValue(defaultValue?: string): CSSResult;
20
+ lastResortDefaultValue(): string | undefined;
21
+ breadcrumb(): Array<string>;
22
+ }
23
+ export declare type FtCssVariables = Record<string, FtCssVariable>;
24
+ export declare function setVariable(variable: FtCssVariable, value: string | CSSResult | FtCssVariable): CSSResult;
25
+ //# sourceMappingURL=FtCssVariables.d.ts.map
@@ -0,0 +1,51 @@
1
+ import { css, unsafeCSS } from "lit";
2
+ export class FtCssVariable {
3
+ constructor(name, category, fallbackVariable, defaultValue, context) {
4
+ this.name = name;
5
+ this.category = category;
6
+ this.fallbackVariable = fallbackVariable;
7
+ this.defaultValue = defaultValue;
8
+ this.context = context;
9
+ // --------------
10
+ // Copy CSSResult prototype
11
+ // We can't extend it because the constructor is private
12
+ this["_$cssResult$"] = true;
13
+ // --------------
14
+ this.value = this.get();
15
+ }
16
+ get cssText() {
17
+ return this.value.cssText;
18
+ }
19
+ get styleSheet() {
20
+ return this.value.styleSheet;
21
+ }
22
+ toString() {
23
+ return this.value.toString();
24
+ }
25
+ static create(name, category, defaultValue) {
26
+ return new FtCssVariable(name, category, undefined, defaultValue);
27
+ }
28
+ static extend(name, fallbackVariable, defaultValue) {
29
+ return new FtCssVariable(name, fallbackVariable.category, fallbackVariable, defaultValue);
30
+ }
31
+ static external(externalVariable, context) {
32
+ return new FtCssVariable(externalVariable.name, externalVariable.category, externalVariable.fallbackVariable, externalVariable.defaultValue, context);
33
+ }
34
+ get(defaultValue) {
35
+ return css `var(${unsafeCSS(this.name)}, ${this.defaultCssValue(defaultValue)})`;
36
+ }
37
+ defaultCssValue(defaultValue) {
38
+ return this.fallbackVariable ? this.fallbackVariable.get(defaultValue !== null && defaultValue !== void 0 ? defaultValue : this.defaultValue) : unsafeCSS(defaultValue !== null && defaultValue !== void 0 ? defaultValue : this.defaultValue);
39
+ }
40
+ lastResortDefaultValue() {
41
+ var _a, _b;
42
+ return (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (_b = this.fallbackVariable) === null || _b === void 0 ? void 0 : _b.lastResortDefaultValue();
43
+ }
44
+ breadcrumb() {
45
+ return this.fallbackVariable ? [this.fallbackVariable.name, ...this.fallbackVariable.breadcrumb()] : [];
46
+ }
47
+ }
48
+ export function setVariable(variable, value) {
49
+ return unsafeCSS(`${variable.name}: ${value}`);
50
+ }
51
+ //# sourceMappingURL=FtCssVariables.js.map
@@ -0,0 +1,66 @@
1
+ import { FtCssVariable } from "./FtCssVariables";
2
+ export declare const designSystemVariables: {
3
+ colorPrimary: FtCssVariable;
4
+ colorPrimaryVariant: FtCssVariable;
5
+ colorSecondary: FtCssVariable;
6
+ colorSecondaryVariant: FtCssVariable;
7
+ colorSurface: FtCssVariable;
8
+ colorContent: FtCssVariable;
9
+ colorError: FtCssVariable;
10
+ colorOutline: FtCssVariable;
11
+ colorOpacityHigh: FtCssVariable;
12
+ colorOpacityMedium: FtCssVariable;
13
+ colorOpacityDisabled: FtCssVariable;
14
+ colorOnPrimary: FtCssVariable;
15
+ colorOnPrimaryHigh: FtCssVariable;
16
+ colorOnPrimaryMedium: FtCssVariable;
17
+ colorOnPrimaryDisabled: FtCssVariable;
18
+ colorOnSecondary: FtCssVariable;
19
+ colorOnSecondaryHigh: FtCssVariable;
20
+ colorOnSecondaryMedium: FtCssVariable;
21
+ colorOnSecondaryDisabled: FtCssVariable;
22
+ colorOnSurface: FtCssVariable;
23
+ colorOnSurfaceHigh: FtCssVariable;
24
+ colorOnSurfaceMedium: FtCssVariable;
25
+ colorOnSurfaceDisabled: FtCssVariable;
26
+ opacityContentOnSurfaceDisabled: FtCssVariable;
27
+ opacityContentOnSurfaceEnable: FtCssVariable;
28
+ opacityContentOnSurfaceHover: FtCssVariable;
29
+ opacityContentOnSurfaceFocused: FtCssVariable;
30
+ opacityContentOnSurfacePressed: FtCssVariable;
31
+ opacityContentOnSurfaceSelected: FtCssVariable;
32
+ opacityContentOnSurfaceDragged: FtCssVariable;
33
+ opacityPrimaryOnSurfaceDisabled: FtCssVariable;
34
+ opacityPrimaryOnSurfaceEnable: FtCssVariable;
35
+ opacityPrimaryOnSurfaceHover: FtCssVariable;
36
+ opacityPrimaryOnSurfaceFocused: FtCssVariable;
37
+ opacityPrimaryOnSurfacePressed: FtCssVariable;
38
+ opacityPrimaryOnSurfaceSelected: FtCssVariable;
39
+ opacityPrimaryOnSurfaceDragged: FtCssVariable;
40
+ opacitySurfaceOnPrimaryDisabled: FtCssVariable;
41
+ opacitySurfaceOnPrimaryEnable: FtCssVariable;
42
+ opacitySurfaceOnPrimaryHover: FtCssVariable;
43
+ opacitySurfaceOnPrimaryFocused: FtCssVariable;
44
+ opacitySurfaceOnPrimaryPressed: FtCssVariable;
45
+ opacitySurfaceOnPrimarySelected: FtCssVariable;
46
+ opacitySurfaceOnPrimaryDragged: FtCssVariable;
47
+ elevation00: FtCssVariable;
48
+ elevation01: FtCssVariable;
49
+ elevation02: FtCssVariable;
50
+ elevation03: FtCssVariable;
51
+ elevation04: FtCssVariable;
52
+ elevation06: FtCssVariable;
53
+ elevation08: FtCssVariable;
54
+ elevation12: FtCssVariable;
55
+ elevation16: FtCssVariable;
56
+ elevation24: FtCssVariable;
57
+ borderRadiusS: FtCssVariable;
58
+ borderRadiusM: FtCssVariable;
59
+ borderRadiusL: FtCssVariable;
60
+ borderRadiusXL: FtCssVariable;
61
+ titleFont: FtCssVariable;
62
+ contentFont: FtCssVariable;
63
+ transitionDuration: FtCssVariable;
64
+ transitionTimingFunction: FtCssVariable;
65
+ };
66
+ //# sourceMappingURL=designSystemVariables.d.ts.map
@@ -0,0 +1,66 @@
1
+ import { FtCssVariable } from "./FtCssVariables";
2
+ export const designSystemVariables = {
3
+ colorPrimary: FtCssVariable.create("--ft-color-primary", "COLOR", "#2196F3"),
4
+ colorPrimaryVariant: FtCssVariable.create("--ft-color-primary-variant", "COLOR", "#1976D2"),
5
+ colorSecondary: FtCssVariable.create("--ft-color-secondary", "COLOR", "#FFCC80"),
6
+ colorSecondaryVariant: FtCssVariable.create("--ft-color-secondary-variant", "COLOR", "#F57C00"),
7
+ colorSurface: FtCssVariable.create("--ft-color-surface", "COLOR", "#FFFFFF"),
8
+ colorContent: FtCssVariable.create("--ft-color-content", "COLOR", "rgba(0, 0, 0, 0.87)"),
9
+ colorError: FtCssVariable.create("--ft-color-error", "COLOR", "#B00020"),
10
+ colorOutline: FtCssVariable.create("--ft-color-outline", "COLOR", "rgba(0, 0, 0, 0.14)"),
11
+ colorOpacityHigh: FtCssVariable.create("--ft-color-opacity-high", "NUMBER", "1"),
12
+ colorOpacityMedium: FtCssVariable.create("--ft-color-opacity-medium", "NUMBER", "0.74"),
13
+ colorOpacityDisabled: FtCssVariable.create("--ft-color-opacity-disabled", "NUMBER", "0.38"),
14
+ colorOnPrimary: FtCssVariable.create("--ft-color-on-primary", "COLOR", "#FFFFFF"),
15
+ colorOnPrimaryHigh: FtCssVariable.create("--ft-color-on-primary-high", "COLOR", "#FFFFFF"),
16
+ colorOnPrimaryMedium: FtCssVariable.create("--ft-color-on-primary-medium", "COLOR", "rgba(255, 255, 255, 0.74)"),
17
+ colorOnPrimaryDisabled: FtCssVariable.create("--ft-color-on-primary-disabled", "COLOR", "rgba(255, 255, 255, 0.38)"),
18
+ colorOnSecondary: FtCssVariable.create("--ft-color-on-secondary", "COLOR", "#FFFFFF"),
19
+ colorOnSecondaryHigh: FtCssVariable.create("--ft-color-on-secondary-high", "COLOR", "#FFFFFF"),
20
+ colorOnSecondaryMedium: FtCssVariable.create("--ft-color-on-secondary-medium", "COLOR", "rgba(255, 255, 255, 0.74)"),
21
+ colorOnSecondaryDisabled: FtCssVariable.create("--ft-color-on-secondary-disabled", "COLOR", "rgba(255, 255, 255, 0.38)"),
22
+ colorOnSurface: FtCssVariable.create("--ft-color-on-surface", "COLOR", "rgba(0, 0, 0, 0.87)"),
23
+ colorOnSurfaceHigh: FtCssVariable.create("--ft-color-on-surface-high", "COLOR", "rgba(0, 0, 0, 0.87)"),
24
+ colorOnSurfaceMedium: FtCssVariable.create("--ft-color-on-surface-medium", "COLOR", "rgba(0, 0, 0, 0.60)"),
25
+ colorOnSurfaceDisabled: FtCssVariable.create("--ft-color-on-surface-disabled", "COLOR", "rgba(0, 0, 0, 0.38)"),
26
+ opacityContentOnSurfaceDisabled: FtCssVariable.create("--ft-opacity-content-on-surface-disabled", "NUMBER", "0"),
27
+ opacityContentOnSurfaceEnable: FtCssVariable.create("--ft-opacity-content-on-surface-enable", "NUMBER", "0"),
28
+ opacityContentOnSurfaceHover: FtCssVariable.create("--ft-opacity-content-on-surface-hover", "NUMBER", "0.04"),
29
+ opacityContentOnSurfaceFocused: FtCssVariable.create("--ft-opacity-content-on-surface-focused", "NUMBER", "0.12"),
30
+ opacityContentOnSurfacePressed: FtCssVariable.create("--ft-opacity-content-on-surface-pressed", "NUMBER", "0.10"),
31
+ opacityContentOnSurfaceSelected: FtCssVariable.create("--ft-opacity-content-on-surface-selected", "NUMBER", "0.08"),
32
+ opacityContentOnSurfaceDragged: FtCssVariable.create("--ft-opacity-content-on-surface-dragged", "NUMBER", "0.08"),
33
+ opacityPrimaryOnSurfaceDisabled: FtCssVariable.create("--ft-opacity-primary-on-surface-disabled", "NUMBER", "0"),
34
+ opacityPrimaryOnSurfaceEnable: FtCssVariable.create("--ft-opacity-primary-on-surface-enable", "NUMBER", "0"),
35
+ opacityPrimaryOnSurfaceHover: FtCssVariable.create("--ft-opacity-primary-on-surface-hover", "NUMBER", "0.04"),
36
+ opacityPrimaryOnSurfaceFocused: FtCssVariable.create("--ft-opacity-primary-on-surface-focused", "NUMBER", "0.12"),
37
+ opacityPrimaryOnSurfacePressed: FtCssVariable.create("--ft-opacity-primary-on-surface-pressed", "NUMBER", "0.10"),
38
+ opacityPrimaryOnSurfaceSelected: FtCssVariable.create("--ft-opacity-primary-on-surface-selected", "NUMBER", "0.08"),
39
+ opacityPrimaryOnSurfaceDragged: FtCssVariable.create("--ft-opacity-primary-on-surface-dragged", "NUMBER", "0.08"),
40
+ opacitySurfaceOnPrimaryDisabled: FtCssVariable.create("--ft-opacity-surface-on-primary-disabled", "NUMBER", "0"),
41
+ opacitySurfaceOnPrimaryEnable: FtCssVariable.create("--ft-opacity-surface-on-primary-enable", "NUMBER", "0"),
42
+ opacitySurfaceOnPrimaryHover: FtCssVariable.create("--ft-opacity-surface-on-primary-hover", "NUMBER", "0.04"),
43
+ opacitySurfaceOnPrimaryFocused: FtCssVariable.create("--ft-opacity-surface-on-primary-focused", "NUMBER", "0.12"),
44
+ opacitySurfaceOnPrimaryPressed: FtCssVariable.create("--ft-opacity-surface-on-primary-pressed", "NUMBER", "0.10"),
45
+ opacitySurfaceOnPrimarySelected: FtCssVariable.create("--ft-opacity-surface-on-primary-selected", "NUMBER", "0.08"),
46
+ opacitySurfaceOnPrimaryDragged: FtCssVariable.create("--ft-opacity-surface-on-primary-dragged", "NUMBER", "0.08"),
47
+ elevation00: FtCssVariable.create("--ft-elevation-00", "UNKNOWN", "0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),
48
+ elevation01: FtCssVariable.create("--ft-elevation-01", "UNKNOWN", "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),
49
+ elevation02: FtCssVariable.create("--ft-elevation-02", "UNKNOWN", "0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),
50
+ elevation03: FtCssVariable.create("--ft-elevation-03", "UNKNOWN", "0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),
51
+ elevation04: FtCssVariable.create("--ft-elevation-04", "UNKNOWN", "0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),
52
+ elevation06: FtCssVariable.create("--ft-elevation-06", "UNKNOWN", "0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),
53
+ elevation08: FtCssVariable.create("--ft-elevation-08", "UNKNOWN", "0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),
54
+ elevation12: FtCssVariable.create("--ft-elevation-12", "UNKNOWN", "0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),
55
+ elevation16: FtCssVariable.create("--ft-elevation-16", "UNKNOWN", "0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),
56
+ elevation24: FtCssVariable.create("--ft-elevation-24", "UNKNOWN", "0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),
57
+ borderRadiusS: FtCssVariable.create("--ft-border-radius-S", "SIZE", "4px"),
58
+ borderRadiusM: FtCssVariable.create("--ft-border-radius-M", "SIZE", "8px"),
59
+ borderRadiusL: FtCssVariable.create("--ft-border-radius-L", "SIZE", "12px"),
60
+ borderRadiusXL: FtCssVariable.create("--ft-border-radius-XL", "SIZE", "16px"),
61
+ titleFont: FtCssVariable.create("--ft-title-font", "UNKNOWN", "Ubuntu, system-ui, sans-serif"),
62
+ contentFont: FtCssVariable.create("--ft-content-font", "UNKNOWN", "'Open Sans', system-ui, sans-serif"),
63
+ transitionDuration: FtCssVariable.create("--ft-transition-duration", "UNKNOWN", "250ms"),
64
+ transitionTimingFunction: FtCssVariable.create("--ft-transition-timing-function", "UNKNOWN", "ease-in-out"),
65
+ };
66
+ //# sourceMappingURL=designSystemVariables.js.map
package/build/index.d.ts CHANGED
@@ -2,8 +2,10 @@ import "./silent-define";
2
2
  export declare const isSafari: boolean;
3
3
  export * from "./Debouncer";
4
4
  export * from "./decorators";
5
+ export * from "./designSystemVariables";
6
+ export * from "./FtCssVariables";
5
7
  export * from "./FtLitElement";
6
- export * from "./storybook";
7
- export * from "./redux";
8
+ export * from "./mixins";
8
9
  export * from "./ParametrizedLabelResolver";
10
+ export * from "./redux";
9
11
  //# sourceMappingURL=index.d.ts.map
package/build/index.js CHANGED
@@ -4,8 +4,10 @@ export const isSafari = (navigator.vendor && !!navigator.vendor.match(/apple/i))
4
4
  || ((_c = (_b = (_a = window.safari) === null || _a === void 0 ? void 0 : _a.pushNotification) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "") === "[object SafariRemoteNotification]";
5
5
  export * from "./Debouncer";
6
6
  export * from "./decorators";
7
+ export * from "./designSystemVariables";
8
+ export * from "./FtCssVariables";
7
9
  export * from "./FtLitElement";
8
- export * from "./storybook";
9
- export * from "./redux";
10
+ export * from "./mixins";
10
11
  export * from "./ParametrizedLabelResolver";
12
+ export * from "./redux";
11
13
  //# sourceMappingURL=index.js.map
@@ -0,0 +1,2 @@
1
+ export declare const noTextSelect: import("lit").CSSResult;
2
+ //# sourceMappingURL=mixins.d.ts.map
@@ -0,0 +1,12 @@
1
+ import { css } from "lit";
2
+ export const noTextSelect = css `
3
+ .ft-no-text-select {
4
+ -webkit-touch-callout: none;
5
+ -webkit-user-select: none;
6
+ -khtml-user-select: none;
7
+ -moz-user-select: none;
8
+ -ms-user-select: none;
9
+ user-select: none;
10
+ }
11
+ `;
12
+ //# sourceMappingURL=mixins.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-wc-utils",
3
- "version": "0.0.88",
3
+ "version": "0.1.3",
4
4
  "description": "Internal web components tools",
5
5
  "author": "Fluid Topics <devtopics@antidot.net>",
6
6
  "license": "ISC",
@@ -18,5 +18,5 @@
18
18
  "peerDependencies": {
19
19
  "lit": "^2.0.2"
20
20
  },
21
- "gitHead": "220e53dba55dfa1de1560abbc30067555f72198c"
21
+ "gitHead": "2fa53411ddb04226db4922bd0ad671fb2aed389c"
22
22
  }
@@ -1,12 +0,0 @@
1
- export declare function rawHtmlStory(rawHtml: string): {
2
- (): import("lit-html").TemplateResult<1>;
3
- parameters: {
4
- docs: {
5
- source: {
6
- code: string;
7
- };
8
- };
9
- };
10
- };
11
- export declare function rawCodeStory(story: any): void;
12
- //# sourceMappingURL=storybook.d.ts.map
@@ -1,23 +0,0 @@
1
- import { html } from "lit";
2
- import { unsafeHTML } from "lit/directives/unsafe-html.js";
3
- export function rawHtmlStory(rawHtml) {
4
- const story = () => html `${unsafeHTML(rawHtml)}`;
5
- story.parameters = {
6
- docs: {
7
- source: {
8
- code: rawHtml,
9
- },
10
- },
11
- };
12
- return story;
13
- }
14
- export function rawCodeStory(story) {
15
- story.parameters = {
16
- docs: {
17
- source: {
18
- type: "code",
19
- },
20
- },
21
- };
22
- }
23
- //# sourceMappingURL=storybook.js.map