@gridify/studio 0.0.0-stage → 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.
- package/LICENSE +163 -0
- package/README.md +118 -2
- package/REFERENCE.md +6957 -0
- package/fesm2022/gridify-studio.mjs +10085 -0
- package/gfy-common/code/_gfy-code-palette.scss +52 -0
- package/gfy-common/density/gfy-density.scss +297 -0
- package/gfy-common/themes/_gfy-scrollbars.scss +3 -0
- package/gfy-common/themes/gfy-themes.scss +639 -0
- package/gfy-common/typography/gfy-typography.scss +158 -0
- package/package.json +26 -3
- package/styles/_index.scss +3 -0
- package/types/gridify-studio.d.ts +24904 -0
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
:where(.gfy-text) {
|
|
2
|
+
font-size: var(--gfy-font-size, 13px);
|
|
3
|
+
line-height: var(--gfy-text-line-height, calc(var(--gfy-line-height, 1.4) + 0.15));
|
|
4
|
+
overflow-wrap: break-word;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:where(.gfy-text) :where(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
|
|
8
|
+
margin-block: 0 var(--gfy-text-block-gap, 0.8em);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
:where(.gfy-text) :where(h1, h2, h3, h4, h5, h6) {
|
|
12
|
+
margin-block: var(--gfy-heading-gap-before, 1.3em) var(--gfy-heading-gap-after, 0.45em);
|
|
13
|
+
font-weight: var(--gfy-heading-weight, 600);
|
|
14
|
+
line-height: var(--gfy-heading-line-height, 1.25);
|
|
15
|
+
color: var(--gfy-heading-color, var(--gfy-text-active, var(--gfy-text-main, inherit)));
|
|
16
|
+
text-wrap: balance;
|
|
17
|
+
}
|
|
18
|
+
:where(.gfy-text) :where(h1) {
|
|
19
|
+
font-size: var(--gfy-heading-1-size, 1.75em);
|
|
20
|
+
}
|
|
21
|
+
:where(.gfy-text) :where(h2) {
|
|
22
|
+
font-size: var(--gfy-heading-2-size, 1.4em);
|
|
23
|
+
}
|
|
24
|
+
:where(.gfy-text) :where(h3) {
|
|
25
|
+
font-size: var(--gfy-heading-3-size, 1.2em);
|
|
26
|
+
}
|
|
27
|
+
:where(.gfy-text) :where(h4) {
|
|
28
|
+
font-size: var(--gfy-heading-4-size, 1.05em);
|
|
29
|
+
}
|
|
30
|
+
:where(.gfy-text) :where(h5) {
|
|
31
|
+
font-size: var(--gfy-heading-5-size, 1em);
|
|
32
|
+
}
|
|
33
|
+
:where(.gfy-text) :where(h6) {
|
|
34
|
+
font-size: var(--gfy-heading-6-size, 0.9em);
|
|
35
|
+
color: var(--gfy-heading-6-color, color-mix(in srgb, var(--gfy-text-main, currentColor) 88%, transparent));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:where(.gfy-text) :where(ul, ol) {
|
|
39
|
+
padding-inline-start: var(--gfy-list-indent, 1.5em);
|
|
40
|
+
}
|
|
41
|
+
:where(.gfy-text) :where(li) {
|
|
42
|
+
margin-block: 0 var(--gfy-list-gap, 0.35em);
|
|
43
|
+
}
|
|
44
|
+
:where(.gfy-text) :where(li:last-child) {
|
|
45
|
+
margin-block-end: 0;
|
|
46
|
+
}
|
|
47
|
+
:where(.gfy-text) :where(li) :where(ul, ol) {
|
|
48
|
+
margin-block: var(--gfy-list-gap, 0.35em) 0;
|
|
49
|
+
}
|
|
50
|
+
:where(.gfy-text) :where(li)::marker {
|
|
51
|
+
color: var(--gfy-list-marker, color-mix(in srgb, var(--gfy-text-main, currentColor) 60%, transparent));
|
|
52
|
+
}
|
|
53
|
+
:where(.gfy-text) :where(dt) {
|
|
54
|
+
font-weight: var(--gfy-heading-weight, 600);
|
|
55
|
+
color: var(--gfy-heading-color, var(--gfy-text-active, var(--gfy-text-main, inherit)));
|
|
56
|
+
}
|
|
57
|
+
:where(.gfy-text) :where(dd) {
|
|
58
|
+
margin-inline: var(--gfy-list-indent, 1.5em) 0;
|
|
59
|
+
margin-block: 0 var(--gfy-list-gap, 0.35em);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:where(.gfy-text) :where(blockquote) {
|
|
63
|
+
margin-inline: 0;
|
|
64
|
+
padding-inline: var(--gfy-quote-padding, 0.9em) 0;
|
|
65
|
+
border-inline-start: var(--gfy-quote-border-width, 3px) solid var(--gfy-quote-border, color-mix(in srgb, var(--gfy-accent, currentColor) 55%, transparent));
|
|
66
|
+
color: var(--gfy-quote-color, color-mix(in srgb, var(--gfy-text-main, currentColor) 88%, transparent));
|
|
67
|
+
}
|
|
68
|
+
:where(.gfy-text) :where(hr) {
|
|
69
|
+
border: 0;
|
|
70
|
+
border-block-start: 1px solid var(--gfy-border-color, rgba(128, 128, 128, 0.3));
|
|
71
|
+
margin-block: var(--gfy-text-rule-gap, 1.2em);
|
|
72
|
+
}
|
|
73
|
+
:where(.gfy-text) :where(mark) {
|
|
74
|
+
background: var(--gfy-mark-bg, color-mix(in srgb, var(--gfy-warning, #d97706) 30%, transparent));
|
|
75
|
+
color: inherit;
|
|
76
|
+
padding-inline: 0.2em;
|
|
77
|
+
border-radius: 3px;
|
|
78
|
+
}
|
|
79
|
+
:where(.gfy-text) :where(small, figcaption, caption) {
|
|
80
|
+
font-size: var(--gfy-small-size, 0.85em);
|
|
81
|
+
color: var(--gfy-text-muted, color-mix(in srgb, var(--gfy-text-main, currentColor) 88%, transparent));
|
|
82
|
+
}
|
|
83
|
+
:where(.gfy-text) :where(strong, b) {
|
|
84
|
+
font-weight: var(--gfy-strong-weight, 650);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
:where(.gfy-text) :where(a:any-link) {
|
|
88
|
+
color: var(--gfy-link-color, var(--gfy-accent, LinkText));
|
|
89
|
+
text-decoration: underline;
|
|
90
|
+
text-decoration-thickness: 1px;
|
|
91
|
+
text-underline-offset: 0.2em;
|
|
92
|
+
border-radius: 2px;
|
|
93
|
+
}
|
|
94
|
+
:where(.gfy-text) :where(a:any-link:hover) {
|
|
95
|
+
color: var(--gfy-link-hover-color, color-mix(in srgb, var(--gfy-link-color, var(--gfy-accent, LinkText)) 70%, var(--gfy-text-active, currentColor)));
|
|
96
|
+
text-decoration-thickness: 2px;
|
|
97
|
+
}
|
|
98
|
+
:where(.gfy-text) :where(a:focus-visible) {
|
|
99
|
+
outline: 2px solid var(--gfy-accent, Highlight);
|
|
100
|
+
outline-offset: 2px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:where(.gfy-text) :where(code, kbd, samp) {
|
|
104
|
+
font-family: var(--gfy-code-inline-font, var(--gfy-font-mono, ui-monospace, monospace));
|
|
105
|
+
font-size: var(--gfy-code-inline-size, 0.92em);
|
|
106
|
+
}
|
|
107
|
+
:where(.gfy-text) :where(code, samp) {
|
|
108
|
+
padding: 0.1em 0.35em;
|
|
109
|
+
border-radius: var(--gfy-code-inline-radius, 4px);
|
|
110
|
+
background: var(--gfy-code-inline-bg, color-mix(in srgb, var(--gfy-text-main, currentColor) 10%, transparent));
|
|
111
|
+
color: var(--gfy-code-inline-fg, inherit);
|
|
112
|
+
}
|
|
113
|
+
:where(.gfy-text) :where(kbd) {
|
|
114
|
+
display: inline-block;
|
|
115
|
+
padding: 0.05em 0.45em;
|
|
116
|
+
border: 1px solid var(--gfy-kbd-border, var(--gfy-border-color, rgba(128, 128, 128, 0.45)));
|
|
117
|
+
border-block-end-width: 2px;
|
|
118
|
+
border-radius: var(--gfy-kbd-radius, 4px);
|
|
119
|
+
background: var(--gfy-kbd-bg, var(--gfy-bg-main, transparent));
|
|
120
|
+
color: var(--gfy-kbd-fg, var(--gfy-text-active, inherit));
|
|
121
|
+
line-height: 1.3;
|
|
122
|
+
white-space: nowrap;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:where(.gfy-text) :where(pre) {
|
|
126
|
+
padding: var(--gfy-code-block-padding, 8px 16px);
|
|
127
|
+
overflow: auto;
|
|
128
|
+
border: 1px solid var(--gfy-code-block-border, var(--gfy-border-color, rgba(128, 128, 128, 0.3)));
|
|
129
|
+
border-radius: var(--gfy-code-block-radius, 6px);
|
|
130
|
+
background: var(--gfy-code-block-bg, color-mix(in srgb, var(--gfy-bg-main, #f3f4f6) 40%, var(--gfy-bg-panel, var(--gfy-bg-main, #fff))));
|
|
131
|
+
color: var(--gfy-code-block-fg, var(--gfy-text-main, inherit));
|
|
132
|
+
font: var(--gfy-code-block-font-size, 12px) / 1.5 var(--gfy-code-block-font, var(--gfy-font-mono, ui-monospace, monospace));
|
|
133
|
+
tab-size: 4;
|
|
134
|
+
}
|
|
135
|
+
:where(.gfy-text) :where(pre) :where(code) {
|
|
136
|
+
padding: 0;
|
|
137
|
+
border-radius: 0;
|
|
138
|
+
background: none;
|
|
139
|
+
font: inherit;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
:where(.gfy-text) :where(img, video, svg) {
|
|
143
|
+
max-inline-size: 100%;
|
|
144
|
+
block-size: auto;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
:where(.gfy-text) > :where(:first-child) {
|
|
148
|
+
margin-block-start: 0;
|
|
149
|
+
}
|
|
150
|
+
:where(.gfy-text) > :where(:last-child) {
|
|
151
|
+
margin-block-end: 0;
|
|
152
|
+
}
|
|
153
|
+
:where(.gfy-text) :where(blockquote, li, dd, figure) > :where(p, h1, h2, h3, h4, h5, h6, pre):where(:first-child) {
|
|
154
|
+
margin-block-start: 0;
|
|
155
|
+
}
|
|
156
|
+
:where(.gfy-text) :where(blockquote, li, dd, figure) > :where(p, h1, h2, h3, h4, h5, h6, pre, ul, ol):where(:last-child) {
|
|
157
|
+
margin-block-end: 0;
|
|
158
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridify/studio",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.0.0-rc.1",
|
|
4
|
+
"description": "Gridify Studio: a docking engine, a ribbon and a set of controls for Angular applications.",
|
|
5
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
6
|
+
"peerDependencies": {
|
|
7
|
+
"@angular/common": "^21.2.0 || ^22.0.0",
|
|
8
|
+
"@angular/core": "^21.2.0 || ^22.0.0",
|
|
9
|
+
"@angular/forms": "^21.2.0 || ^22.0.0",
|
|
10
|
+
"@angular/router": "^21.2.0 || ^22.0.0",
|
|
11
|
+
"rxjs": "~7.8.0"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"tslib": "^2.8.1"
|
|
15
|
+
},
|
|
16
|
+
"module": "fesm2022/gridify-studio.mjs",
|
|
17
|
+
"typings": "types/gridify-studio.d.ts",
|
|
18
|
+
"exports": {
|
|
19
|
+
"./package.json": {
|
|
20
|
+
"default": "./package.json"
|
|
21
|
+
},
|
|
22
|
+
".": {
|
|
23
|
+
"types": "./types/gridify-studio.d.ts",
|
|
24
|
+
"default": "./fesm2022/gridify-studio.mjs"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"sideEffects": false,
|
|
28
|
+
"type": "module"
|
|
6
29
|
}
|