ds-one 0.2.5-alpha.13 → 0.2.5-alpha.14

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 (20) hide show
  1. package/DS1/1-root/one.css +6 -2
  2. package/DS1/2-core/ds-banner.ts +194 -1
  3. package/DS1/2-core/ds-button.ts +17 -2
  4. package/DS1/4-page/ds-container.ts +1 -0
  5. package/DS1/4-page/ds-layout.ts +30 -25
  6. package/README.md +2 -2
  7. package/dist/2-core/ds-banner.d.ts +71 -0
  8. package/dist/2-core/ds-banner.d.ts.map +1 -1
  9. package/dist/2-core/ds-banner.js +171 -1
  10. package/dist/2-core/ds-button.d.ts.map +1 -1
  11. package/dist/2-core/ds-button.js +17 -2
  12. package/dist/4-page/ds-container.d.ts.map +1 -1
  13. package/dist/4-page/ds-container.js +1 -0
  14. package/dist/4-page/ds-layout.d.ts.map +1 -1
  15. package/dist/4-page/ds-layout.js +30 -25
  16. package/dist/ds-one.bundle.js +48 -27
  17. package/dist/ds-one.bundle.js.map +2 -2
  18. package/dist/ds-one.bundle.min.js +53 -32
  19. package/dist/ds-one.bundle.min.js.map +2 -2
  20. package/package.json +1 -1
package/dist/4-page/ds-container.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAgCX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}
1
+ {"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAiCX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}
package/dist/4-page/ds-container.js CHANGED
@@ -12,6 +12,7 @@ Container.styles = css `
12
12
  width: 100%;
13
13
  max-width: 100%;
14
14
  flex-direction: column;
15
+ background-color: var(--background-color);
15
16
  box-sizing: border-box;
16
17
  }
17
18
 
package/dist/4-page/ds-layout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,MAAM,0BAsNX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
1
+ {"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,MAAM,0BA2NX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
package/dist/4-page/ds-layout.js CHANGED
@@ -87,6 +87,10 @@ Layout.styles = css `
87
87
  width: 100%;
88
88
  }
89
89
 
90
+ slot {
91
+ display: contents;
92
+ }
93
+
90
94
  :host([mode="portfolio"]) {
91
95
  --portfolio-cols: 120px 480px 40px;
92
96
  --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
@@ -155,27 +159,25 @@ Layout.styles = css `
155
159
 
156
160
  /* App mode - Base */
157
161
  :host([mode="app"]) {
158
- --app-cols: calc(var(--double) * var(--sf));
159
- --app-rows: calc(var(--unit) * var(--sf)) calc(var(--2) * var(--sf))
160
- calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
161
- calc(var(--unit) * var(--sf));
162
- --app-areas: "1" "." "2" "." "3";
163
- --app-overlay-cols: calc(var(--oct) * var(--sf));
162
+ --app-cols: 100%;
163
+ --app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
164
+ calc(var(--unit) * var(--sf)) calc(var(--dozen) * var(--sf))
165
+ calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
166
+ --app-areas: "banner" "." "header" "." "main" "." "footer";
167
+ --app-overlay-cols: 100%;
164
168
  --app-overlay-rows: calc(var(--unit) * var(--sf))
165
- calc(var(--double) * var(--sf)) calc(var(--unit) * var(--sf))
166
- calc(var(--unit) * var(--sf));
169
+ calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
170
+ calc(var(--unit) * var(--sf)) calc(var(--dozen) * var(--sf))
171
+ calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
167
172
  --app-overlay-areas: "banner" "." "header" "." "main" "." "footer";
168
173
  grid-template-columns: var(--app-cols);
169
174
  grid-template-rows: var(--app-rows);
170
175
  grid-template-areas: var(--app-areas);
171
176
  min-height: 100vh;
172
177
  background-color: transparent;
173
- width: 100%;
174
- gap: 0;
175
- max-width: calc(400px * var(--sf, 1));
176
- padding: calc(60px * var(--sf, 1)) calc(28px * var(--sf, 1))
177
- calc(9.751px * var(--sf, 1));
178
- gap: calc(28px * var(--sf, 1));
178
+ width: calc(240px * var(--sf, 1));
179
+ max-width: calc(240px * var(--sf, 1));
180
+ margin: 0 auto;
179
181
  }
180
182
 
181
183
  :host([mode="app"]) .view-overlay {
@@ -194,24 +196,27 @@ Layout.styles = css `
194
196
  pointer-events: none;
195
197
  z-index: 1000;
196
198
  display: grid;
197
- font-size: 18px;
198
- font-weight: bold;
199
199
  }
200
200
 
201
201
  .view-area {
202
202
  display: flex;
203
+ width: calc(240px * var(--sf, 1));
204
+ height: 100%;
203
205
  align-items: center;
204
206
  justify-content: center;
205
- font-size: 10px;
206
- font-weight: var(--type-weight-default);
207
207
  font-family: var(--typeface-regular);
208
- color: var(--black);
209
- border: 1px solid;
208
+ font-size: calc(var(--type-size-default) * var(--05));
209
+ color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
210
+ background-color: color-mix(
211
+ in srgb,
212
+ var(--accent-color) 25%,
213
+ transparent
214
+ );
210
215
  opacity: 1;
211
216
  }
212
217
 
213
218
  :host([mode="portfolio"]) .view-area:nth-of-type(1) {
214
- border-color: var(--tuned-red);
219
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
215
220
  }
216
221
  :host([mode="portfolio"]) .view-area:nth-of-type(2) {
217
222
  border-color: var(--sharp-blue);
@@ -243,16 +248,16 @@ Layout.styles = css `
243
248
  }
244
249
 
245
250
  :host([mode="app"]) .view-area:nth-of-type(1) {
246
- border-color: var(--tuned-red);
251
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
247
252
  }
248
253
  :host([mode="app"]) .view-area:nth-of-type(2) {
249
- border-color: var(--sharp-blue);
254
+ background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
250
255
  }
251
256
  :host([mode="app"]) .view-area:nth-of-type(3) {
252
- border-color: var(--yellow);
257
+ background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
253
258
  }
254
259
  :host([mode="app"]) .view-area:nth-of-type(4) {
255
- border-color: var(--apple-green);
260
+ background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
256
261
  }
257
262
 
258
263
  .view-square {
package/dist/ds-one.bundle.js CHANGED
@@ -1982,9 +1982,11 @@ Button.properties = {
1982
1982
  Button.styles = i4`
1983
1983
  button {
1984
1984
  max-height: calc(var(--08) * var(--sf));
1985
- border: none;
1985
+ display: inline-flex;
1986
+ align-items: center;
1987
+ justify-content: center;
1986
1988
  cursor: pointer;
1987
- padding: 0 calc(2px * var(--sf));
1989
+ padding: 0 calc(0.5px * var(--sf));
1988
1990
  color: var(--button-text-color);
1989
1991
  font-family: var(--typeface-regular);
1990
1992
  }
@@ -2007,6 +2009,19 @@ Button.styles = i4`
2007
2009
  font-family: var(--typeface-regular);
2008
2010
  }
2009
2011
 
2012
+ button.text {
2013
+ background-color: transparent;
2014
+ color: var(--button-color, var(--button-text-color));
2015
+ font-family: var(--typeface-regular);
2016
+ padding: 0;
2017
+ text-decoration: none;
2018
+ }
2019
+
2020
+ button.text:hover {
2021
+ opacity: 0.8;
2022
+ text-decoration: none;
2023
+ }
2024
+
2010
2025
  button[bold] {
2011
2026
  font-weight: var(--type-weight-bold);
2012
2027
  font-family: var(--typeface-medium);
@@ -3151,6 +3166,7 @@ Container.styles = i4`
3151
3166
  width: 100%;
3152
3167
  max-width: 100%;
3153
3168
  flex-direction: column;
3169
+ background-color: var(--background-color);
3154
3170
  box-sizing: border-box;
3155
3171
  }
3156
3172
 
@@ -3357,6 +3373,10 @@ Layout.styles = i4`
3357
3373
  width: 100%;
3358
3374
  }
3359
3375
 
3376
+ slot {
3377
+ display: contents;
3378
+ }
3379
+
3360
3380
  :host([mode="portfolio"]) {
3361
3381
  --portfolio-cols: 120px 480px 40px;
3362
3382
  --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
@@ -3425,27 +3445,25 @@ Layout.styles = i4`
3425
3445
 
3426
3446
  /* App mode - Base */
3427
3447
  :host([mode="app"]) {
3428
- --app-cols: calc(var(--double) * var(--sf));
3429
- --app-rows: calc(var(--unit) * var(--sf)) calc(var(--2) * var(--sf))
3430
- calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
3431
- calc(var(--unit) * var(--sf));
3432
- --app-areas: "1" "." "2" "." "3";
3433
- --app-overlay-cols: calc(var(--oct) * var(--sf));
3448
+ --app-cols: 100%;
3449
+ --app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
3450
+ calc(var(--unit) * var(--sf)) calc(var(--dozen) * var(--sf))
3451
+ calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
3452
+ --app-areas: "banner" "." "header" "." "main" "." "footer";
3453
+ --app-overlay-cols: 100%;
3434
3454
  --app-overlay-rows: calc(var(--unit) * var(--sf))
3435
- calc(var(--double) * var(--sf)) calc(var(--unit) * var(--sf))
3436
- calc(var(--unit) * var(--sf));
3455
+ calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
3456
+ calc(var(--unit) * var(--sf)) calc(var(--dozen) * var(--sf))
3457
+ calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
3437
3458
  --app-overlay-areas: "banner" "." "header" "." "main" "." "footer";
3438
3459
  grid-template-columns: var(--app-cols);
3439
3460
  grid-template-rows: var(--app-rows);
3440
3461
  grid-template-areas: var(--app-areas);
3441
3462
  min-height: 100vh;
3442
3463
  background-color: transparent;
3443
- width: 100%;
3444
- gap: 0;
3445
- max-width: calc(400px * var(--sf, 1));
3446
- padding: calc(60px * var(--sf, 1)) calc(28px * var(--sf, 1))
3447
- calc(9.751px * var(--sf, 1));
3448
- gap: calc(28px * var(--sf, 1));
3464
+ width: calc(240px * var(--sf, 1));
3465
+ max-width: calc(240px * var(--sf, 1));
3466
+ margin: 0 auto;
3449
3467
  }
3450
3468
 
3451
3469
  :host([mode="app"]) .view-overlay {
@@ -3464,24 +3482,27 @@ Layout.styles = i4`
3464
3482
  pointer-events: none;
3465
3483
  z-index: 1000;
3466
3484
  display: grid;
3467
- font-size: 18px;
3468
- font-weight: bold;
3469
3485
  }
3470
3486
 
3471
3487
  .view-area {
3472
3488
  display: flex;
3489
+ width: calc(240px * var(--sf, 1));
3490
+ height: 100%;
3473
3491
  align-items: center;
3474
3492
  justify-content: center;
3475
- font-size: 10px;
3476
- font-weight: var(--type-weight-default);
3477
3493
  font-family: var(--typeface-regular);
3478
- color: var(--black);
3479
- border: 1px solid;
3494
+ font-size: calc(var(--type-size-default) * var(--05));
3495
+ color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
3496
+ background-color: color-mix(
3497
+ in srgb,
3498
+ var(--accent-color) 25%,
3499
+ transparent
3500
+ );
3480
3501
  opacity: 1;
3481
3502
  }
3482
3503
 
3483
3504
  :host([mode="portfolio"]) .view-area:nth-of-type(1) {
3484
- border-color: var(--tuned-red);
3505
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
3485
3506
  }
3486
3507
  :host([mode="portfolio"]) .view-area:nth-of-type(2) {
3487
3508
  border-color: var(--sharp-blue);
@@ -3513,16 +3534,16 @@ Layout.styles = i4`
3513
3534
  }
3514
3535
 
3515
3536
  :host([mode="app"]) .view-area:nth-of-type(1) {
3516
- border-color: var(--tuned-red);
3537
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
3517
3538
  }
3518
3539
  :host([mode="app"]) .view-area:nth-of-type(2) {
3519
- border-color: var(--sharp-blue);
3540
+ background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
3520
3541
  }
3521
3542
  :host([mode="app"]) .view-area:nth-of-type(3) {
3522
- border-color: var(--yellow);
3543
+ background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
3523
3544
  }
3524
3545
  :host([mode="app"]) .view-area:nth-of-type(4) {
3525
- border-color: var(--apple-green);
3546
+ background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
3526
3547
  }
3527
3548
 
3528
3549
  .view-square {