@m3e/card 1.0.0-rc.1

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 (42) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +268 -0
  3. package/cem.config.mjs +16 -0
  4. package/demo/index.html +126 -0
  5. package/dist/css-custom-data.json +367 -0
  6. package/dist/custom-elements.json +629 -0
  7. package/dist/html-custom-data.json +33 -0
  8. package/dist/index.js +689 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/index.min.js +272 -0
  11. package/dist/index.min.js.map +1 -0
  12. package/dist/src/CardElement.d.ts +168 -0
  13. package/dist/src/CardElement.d.ts.map +1 -0
  14. package/dist/src/CardOrientation.d.ts +3 -0
  15. package/dist/src/CardOrientation.d.ts.map +1 -0
  16. package/dist/src/CardVariant.d.ts +3 -0
  17. package/dist/src/CardVariant.d.ts.map +1 -0
  18. package/dist/src/index.d.ts +4 -0
  19. package/dist/src/index.d.ts.map +1 -0
  20. package/dist/src/styles/CardStyle.d.ts +7 -0
  21. package/dist/src/styles/CardStyle.d.ts.map +1 -0
  22. package/dist/src/styles/CardToken.d.ts +9 -0
  23. package/dist/src/styles/CardToken.d.ts.map +1 -0
  24. package/dist/src/styles/CardVariantStyle.d.ts +7 -0
  25. package/dist/src/styles/CardVariantStyle.d.ts.map +1 -0
  26. package/dist/src/styles/CardVariantToken.d.ts +50 -0
  27. package/dist/src/styles/CardVariantToken.d.ts.map +1 -0
  28. package/dist/src/styles/index.d.ts +3 -0
  29. package/dist/src/styles/index.d.ts.map +1 -0
  30. package/eslint.config.mjs +13 -0
  31. package/package.json +48 -0
  32. package/rollup.config.js +32 -0
  33. package/src/CardElement.ts +258 -0
  34. package/src/CardOrientation.ts +2 -0
  35. package/src/CardVariant.ts +2 -0
  36. package/src/index.ts +3 -0
  37. package/src/styles/CardStyle.ts +163 -0
  38. package/src/styles/CardToken.ts +12 -0
  39. package/src/styles/CardVariantStyle.ts +99 -0
  40. package/src/styles/CardVariantToken.ts +205 -0
  41. package/src/styles/index.ts +2 -0
  42. package/tsconfig.json +9 -0
package/src/styles/CardVariantToken.ts ADDED
@@ -0,0 +1,205 @@
1
+ import { CSSResult, unsafeCSS } from "lit";
2
+
3
+ import { DesignToken } from "@m3e/core";
4
+
5
+ import { CardVariant } from "../CardVariant";
6
+
7
+ /** @private */
8
+ type _CardVariantToken = {
9
+ textColor: CSSResult;
10
+ containerColor?: CSSResult;
11
+ containerElevation: CSSResult;
12
+ outlineColor?: CSSResult;
13
+ outlineThickness?: CSSResult;
14
+ disabled: {
15
+ textColor: CSSResult;
16
+ textOpacity: CSSResult;
17
+ imageOpacity: CSSResult;
18
+ containerColor?: CSSResult;
19
+ containerOpacity?: CSSResult;
20
+ containerElevation: CSSResult;
21
+ containerElevationColor: CSSResult;
22
+ containerElevationOpacity: CSSResult;
23
+ outlineColor?: CSSResult;
24
+ outlineOpacity?: CSSResult;
25
+ };
26
+ hover: {
27
+ textColor: CSSResult;
28
+ stateLayerColor: CSSResult;
29
+ stateLayerOpacity: CSSResult;
30
+ containerElevation?: CSSResult;
31
+ outlineColor?: CSSResult;
32
+ };
33
+ focus: {
34
+ textColor: CSSResult;
35
+ stateLayerColor: CSSResult;
36
+ stateLayerOpacity: CSSResult;
37
+ containerElevation?: CSSResult;
38
+ outlineColor?: CSSResult;
39
+ };
40
+ pressed: {
41
+ textColor: CSSResult;
42
+ stateLayerColor: CSSResult;
43
+ stateLayerOpacity: CSSResult;
44
+ containerElevation?: CSSResult;
45
+ outlineColor?: CSSResult;
46
+ };
47
+ };
48
+
49
+ /**
50
+ * Component design tokens that control the appearance variants of `M3eCardElement`.
51
+ * @internal
52
+ */
53
+ export const CardVariantToken: Record<CardVariant, _CardVariantToken> = {
54
+ filled: {
55
+ textColor: unsafeCSS(`var(--m3e-filled-card-text-color, ${DesignToken.color.onSurface})`),
56
+ containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, ${DesignToken.color.surfaceContainerHighest})`),
57
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, ${DesignToken.elevation.level0})`),
58
+ disabled: {
59
+ textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, ${DesignToken.color.onSurface})`),
60
+ textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, 38%)`),
61
+ imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, 38%)`),
62
+ containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, ${DesignToken.color.surfaceVariant})`),
63
+ containerElevation: unsafeCSS(
64
+ `var(--m3e-filled-card-disabled-container-elevation, ${DesignToken.elevation.level0})`
65
+ ),
66
+ containerElevationColor: unsafeCSS(
67
+ `var(--m3e-filled-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
68
+ ),
69
+ containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)`),
70
+ containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, 38%)`),
71
+ },
72
+ hover: {
73
+ textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, ${DesignToken.color.onSurface})`),
74
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
75
+ stateLayerOpacity: unsafeCSS(
76
+ `var(--m3e-filled-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
77
+ ),
78
+ containerElevation: unsafeCSS(
79
+ `var(--m3e-filled-card-hover-container-elevation, ${DesignToken.elevation.level1})`
80
+ ),
81
+ },
82
+ focus: {
83
+ textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, ${DesignToken.color.onSurface})`),
84
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
85
+ stateLayerOpacity: unsafeCSS(
86
+ `var(--m3e-filled-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
87
+ ),
88
+ containerElevation: unsafeCSS(
89
+ `var(--m3e-filled-card-focus-container-elevation, ${DesignToken.elevation.level0})`
90
+ ),
91
+ },
92
+ pressed: {
93
+ textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, ${DesignToken.color.onSurface})`),
94
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
95
+ stateLayerOpacity: unsafeCSS(
96
+ `var(--m3e-filled-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
97
+ ),
98
+ containerElevation: unsafeCSS(
99
+ `var(--m3e-filled-card-pressed-container-elevation, ${DesignToken.elevation.level0})`
100
+ ),
101
+ },
102
+ },
103
+ elevated: {
104
+ textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, ${DesignToken.color.onSurface})`),
105
+ containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, ${DesignToken.color.surfaceContainerLow})`),
106
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, ${DesignToken.elevation.level1})`),
107
+ disabled: {
108
+ textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, ${DesignToken.color.onSurface})`),
109
+ textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, 38%)`),
110
+ imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, 38%)`),
111
+ containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, ${DesignToken.color.surface})`),
112
+ containerElevation: unsafeCSS(
113
+ `var(--m3e-elevated-card-disabled-container-elevation, ${DesignToken.elevation.level1})`
114
+ ),
115
+ containerElevationColor: unsafeCSS(
116
+ `var(--m3e-elevated-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
117
+ ),
118
+ containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)`),
119
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, 38%)`),
120
+ },
121
+ hover: {
122
+ textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, ${DesignToken.color.onSurface})`),
123
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
124
+ stateLayerOpacity: unsafeCSS(
125
+ `var(--m3e-elevated-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
126
+ ),
127
+ containerElevation: unsafeCSS(
128
+ `var(--m3e-elevated-card-hover-container-elevation, ${DesignToken.elevation.level2})`
129
+ ),
130
+ },
131
+ focus: {
132
+ textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, ${DesignToken.color.onSurface})`),
133
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
134
+ stateLayerOpacity: unsafeCSS(
135
+ `var(--m3e-elevated-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
136
+ ),
137
+ containerElevation: unsafeCSS(
138
+ `var(--m3e-elevated-card-focus-container-elevation, ${DesignToken.elevation.level1})`
139
+ ),
140
+ },
141
+ pressed: {
142
+ textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, ${DesignToken.color.onSurface})`),
143
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
144
+ stateLayerOpacity: unsafeCSS(
145
+ `var(--m3e-elevated-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
146
+ ),
147
+ containerElevation: unsafeCSS(
148
+ `var(--m3e-elevated-card-pressed-container-elevation, ${DesignToken.elevation.level1})`
149
+ ),
150
+ },
151
+ },
152
+ outlined: {
153
+ textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, ${DesignToken.color.onSurface})`),
154
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, ${DesignToken.elevation.level0})`),
155
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, ${DesignToken.color.outlineVariant})`),
156
+ outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, 1px)"),
157
+ disabled: {
158
+ textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, ${DesignToken.color.onSurface})`),
159
+ textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, 38%)`),
160
+ imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, 38%)`),
161
+ containerElevation: unsafeCSS(
162
+ `var(--m3e-outlined-card-disabled-container-elevation, ${DesignToken.elevation.level0})`
163
+ ),
164
+ containerElevationColor: unsafeCSS(
165
+ `var(--m3e-outlined-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
166
+ ),
167
+ containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)`),
168
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, ${DesignToken.color.outline})`),
169
+ outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, 12%)`),
170
+ },
171
+ hover: {
172
+ textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, ${DesignToken.color.onSurface})`),
173
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
174
+ stateLayerOpacity: unsafeCSS(
175
+ `var(--m3e-outlined-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
176
+ ),
177
+ containerElevation: unsafeCSS(
178
+ `var(--m3e-outlined-card-hover-container-elevation, ${DesignToken.elevation.level1})`
179
+ ),
180
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, ${DesignToken.color.outlineVariant})`),
181
+ },
182
+ focus: {
183
+ textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, ${DesignToken.color.onSurface})`),
184
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
185
+ stateLayerOpacity: unsafeCSS(
186
+ `var(--m3e-outlined-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
187
+ ),
188
+ containerElevation: unsafeCSS(
189
+ `var(--m3e-outlined-card-focus-container-elevation, ${DesignToken.elevation.level0})`
190
+ ),
191
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, ${DesignToken.color.onSurface})`),
192
+ },
193
+ pressed: {
194
+ textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, ${DesignToken.color.onSurface})`),
195
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
196
+ stateLayerOpacity: unsafeCSS(
197
+ `var(--m3e-outlined-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
198
+ ),
199
+ containerElevation: unsafeCSS(
200
+ `var(--m3e-outlined-card-pressed-container-elevation, ${DesignToken.elevation.level0})`
201
+ ),
202
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
203
+ },
204
+ },
205
+ } as const;
package/src/styles/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./CardStyle";
2
+ export * from "./CardVariantStyle";
package/tsconfig.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "extends": "../../tsconfig.json",
3
+ "compilerOptions": {
4
+ "rootDir": "./src",
5
+ "outDir": "./dist/src"
6
+ },
7
+ "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
8
+ "exclude": []
9
+ }