UNPKG

@sandlada/mdc

Version:

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

mdc.sandlada.com

sandlada/mdc

99 lines • 7.28 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/** * @license * Copyright 2025 Kai-Orion & Sandlada * SPDX-License-Identifier: MIT */ export declare const ElevatedCardDefinition: { readonly 'container-color': "var(--md-sys-color-surface-container-low, var(--md-sys-palette-neutral-96, #f7f2fa))"; readonly 'container-elevation': "var(--md-sys-elevation-level-1, 1)"; readonly 'container-shadow-color': "var(--md-sys-color-shadow, var(--md-sys-palette-neutral-0, #000))"; readonly 'icon-color': "var(--md-sys-color-primary, var(--md-sys-palette-primary-40, #6750a4))"; readonly 'icon-size': "24px"; readonly 'disabled-container-color': "var(--md-sys-color-surface, var(--md-sys-palette-neutral-98, #fef7ff))"; readonly 'disabled-container-elevation': "var(--md-sys-elevation-level-1, 1)"; readonly 'disabled-container-opacity': "0.38"; readonly 'hovered-container-elevation': "var(--md-sys-elevation-level-2, 3)"; readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'hovered-state-layer-opacity': "0.08"; readonly 'focused-container-elevation': "var(--md-sys-elevation-level-1, 1)"; readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'focused-state-layer-opacity': "0.12"; readonly 'focused-indicator-color': "var(--md-sys-color-secondary, var(--md-sys-palette-secondary-40, #625b71))"; readonly 'focused-indicator-offset': "2px"; readonly 'focused-indicator-thickness': "3px"; readonly 'pressed-container-elevation': "var(--md-sys-elevation-level-1, 1)"; readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'pressed-state-layer-opacity': "0.12"; readonly 'dragged-container-elevation': "var(--md-sys-elevation-level-4, 8)"; readonly 'dragged-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'dragged-state-layer-opacity': "0.16"; readonly "container-shape-start-start": string; readonly "container-shape-start-end": string; readonly "container-shape-end-end": string; readonly "container-shape-end-start": string; }; export declare const FilledCardDefinition: { readonly 'container-color': "var(--md-sys-color-surface-container-highest, var(--md-sys-palette-neutral-90, #e6e0e9))"; readonly 'container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'container-shadow-color': "var(--md-sys-color-shadow, var(--md-sys-palette-neutral-0, #000))"; readonly 'icon-color': "var(--md-sys-color-primary, var(--md-sys-palette-primary-40, #6750a4))"; readonly 'icon-size': "24px"; readonly 'disabled-container-color': "var(--md-sys-color-surface-variant, var(--md-sys-palette-neutral-variant-90, #e7e0ec)"; readonly 'disabled-container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'disabled-container-opacity': "0.38"; readonly 'hovered-container-elevation': "var(--md-sys-elevation-level-1, 1)"; readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'hovered-state-layer-opacity': "0.08"; readonly 'focused-container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'focused-state-layer-opacity': "0.12"; readonly 'focused-indicator-color': "var(--md-sys-color-secondary, var(--md-sys-palette-secondary-40, #625b71))"; readonly 'focused-indicator-offset': "2px"; readonly 'focused-indicator-thickness': "3px"; readonly 'pressed-container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'pressed-state-layer-opacity': "0.12"; readonly 'dragged-container-elevation': "var(--md-sys-elevation-level-3, 6)"; readonly 'dragged-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'dragged-state-layer-opacity': "0.16"; readonly "container-shape-start-start": string; readonly "container-shape-start-end": string; readonly "container-shape-end-end": string; readonly "container-shape-end-start": string; }; export declare const OutlinedCardDefinition: { readonly 'container-color': "var(--md-sys-color-surface, var(--md-sys-palette-neutral-98, #fef7ff))"; readonly 'container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'container-shadow-color': "var(--md-sys-color-shadow, var(--md-sys-palette-neutral-0, #000))"; readonly 'outline-color': "var(--md-sys-color-outline-variant, var(--md-sys-palette-neutral-variant-80, #cac4d0))"; readonly 'outline-width': "1px"; readonly 'icon-color': "var(--md-sys-color-primary, var(--md-sys-palette-primary-40, #6750a4))"; readonly 'icon-size': "24px"; readonly 'disabled-container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'disabled-outline-color': "var(--md-sys-color-outline, var(--md-sys-palette-neutral-50, #79767d))"; readonly 'disabled-outline-opacity': "0.12"; readonly 'hovered-container-elevation': "var(--md-sys-elevation-level-1, 1)"; readonly 'hovered-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'hovered-state-layer-opacity': "0.08"; readonly 'hovered-outline-color': "var(--md-sys-color-outline-variant, var(--md-sys-palette-neutral-variant-80, #cac4d0))"; readonly 'focused-container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'focused-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'focused-state-layer-opacity': "0.12"; readonly 'focused-outline-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'focused-indicator-color': "var(--md-sys-color-secondary, var(--md-sys-palette-secondary-40, #625b71))"; readonly 'focused-indicator-offset': "2px"; readonly 'focused-indicator-thickness': "3px"; readonly 'pressed-container-elevation': "var(--md-sys-elevation-level-0, 0)"; readonly 'pressed-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'pressed-state-layer-opacity': "0.12"; readonly 'pressed-outline-color': "var(--md-sys-color-outline-variant, var(--md-sys-palette-neutral-variant-80, #cac4d0))"; readonly 'dragged-container-elevation': "var(--md-sys-elevation-level-3, 6)"; readonly 'dragged-state-layer-color': "var(--md-sys-color-on-surface, var(--md-sys-palette-neutral-10, #1d1b20))"; readonly 'dragged-state-layer-opacity': "0.16"; readonly 'dragged-outline-color': "var(--md-sys-color-outline-variant, var(--md-sys-palette-neutral-variant-80, #cac4d0))"; readonly "container-shape-start-start": string; readonly "container-shape-start-end": string; readonly "container-shape-end-end": string; readonly "container-shape-end-start": string; }; //# sourceMappingURL=card.definition.d.ts.map