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

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 -1
  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 -1
  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 -26
  17. package/dist/ds-one.bundle.js.map +2 -2
  18. package/dist/ds-one.bundle.min.js +53 -31
  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,12 @@ Button.properties = {
1982
1982
  Button.styles = i4`
1983
1983
  button {
1984
1984
  max-height: calc(var(--08) * var(--sf));
1985
+ display: inline-flex;
1986
+ align-items: center;
1987
+ justify-content: center;
1985
1988
  border: none;
1986
1989
  cursor: pointer;
1987
- padding: 0 calc(2px * var(--sf));
1990
+ padding: 0 calc(0.5px * var(--sf));
1988
1991
  color: var(--button-text-color);
1989
1992
  font-family: var(--typeface-regular);
1990
1993
  }
@@ -2007,6 +2010,19 @@ Button.styles = i4`
2007
2010
  font-family: var(--typeface-regular);
2008
2011
  }
2009
2012
 
2013
+ button.text {
2014
+ background-color: transparent;
2015
+ color: var(--button-color, var(--button-text-color));
2016
+ font-family: var(--typeface-regular);
2017
+ padding: 0;
2018
+ text-decoration: none;
2019
+ }
2020
+
2021
+ button.text:hover {
2022
+ opacity: 0.8;
2023
+ text-decoration: none;
2024
+ }
2025
+
2010
2026
  button[bold] {
2011
2027
  font-weight: var(--type-weight-bold);
2012
2028
  font-family: var(--typeface-medium);
@@ -3151,6 +3167,7 @@ Container.styles = i4`
3151
3167
  width: 100%;
3152
3168
  max-width: 100%;
3153
3169
  flex-direction: column;
3170
+ background-color: var(--background-color);
3154
3171
  box-sizing: border-box;
3155
3172
  }
3156
3173
 
@@ -3357,6 +3374,10 @@ Layout.styles = i4`
3357
3374
  width: 100%;
3358
3375
  }
3359
3376
 
3377
+ slot {
3378
+ display: contents;
3379
+ }
3380
+
3360
3381
  :host([mode="portfolio"]) {
3361
3382
  --portfolio-cols: 120px 480px 40px;
3362
3383
  --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
@@ -3425,27 +3446,25 @@ Layout.styles = i4`
3425
3446
 
3426
3447
  /* App mode - Base */
3427
3448
  :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));
3449
+ --app-cols: 100%;
3450
+ --app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
3451
+ calc(var(--unit) * var(--sf)) calc(var(--dozen) * var(--sf))
3452
+ calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
3453
+ --app-areas: "banner" "." "header" "." "main" "." "footer";
3454
+ --app-overlay-cols: 100%;
3434
3455
  --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));
3456
+ calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
3457
+ calc(var(--unit) * var(--sf)) calc(var(--dozen) * var(--sf))
3458
+ calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
3437
3459
  --app-overlay-areas: "banner" "." "header" "." "main" "." "footer";
3438
3460
  grid-template-columns: var(--app-cols);
3439
3461
  grid-template-rows: var(--app-rows);
3440
3462
  grid-template-areas: var(--app-areas);
3441
3463
  min-height: 100vh;
3442
3464
  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));
3465
+ width: calc(240px * var(--sf, 1));
3466
+ max-width: calc(240px * var(--sf, 1));
3467
+ margin: 0 auto;
3449
3468
  }
3450
3469
 
3451
3470
  :host([mode="app"]) .view-overlay {
@@ -3464,24 +3483,27 @@ Layout.styles = i4`
3464
3483
  pointer-events: none;
3465
3484
  z-index: 1000;
3466
3485
  display: grid;
3467
- font-size: 18px;
3468
- font-weight: bold;
3469
3486
  }
3470
3487
 
3471
3488
  .view-area {
3472
3489
  display: flex;
3490
+ width: calc(240px * var(--sf, 1));
3491
+ height: 100%;
3473
3492
  align-items: center;
3474
3493
  justify-content: center;
3475
- font-size: 10px;
3476
- font-weight: var(--type-weight-default);
3477
3494
  font-family: var(--typeface-regular);
3478
- color: var(--black);
3479
- border: 1px solid;
3495
+ font-size: calc(var(--type-size-default) * var(--05));
3496
+ color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
3497
+ background-color: color-mix(
3498
+ in srgb,
3499
+ var(--accent-color) 25%,
3500
+ transparent
3501
+ );
3480
3502
  opacity: 1;
3481
3503
  }
3482
3504
 
3483
3505
  :host([mode="portfolio"]) .view-area:nth-of-type(1) {
3484
- border-color: var(--tuned-red);
3506
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
3485
3507
  }
3486
3508
  :host([mode="portfolio"]) .view-area:nth-of-type(2) {
3487
3509
  border-color: var(--sharp-blue);
@@ -3513,16 +3535,16 @@ Layout.styles = i4`
3513
3535
  }
3514
3536
 
3515
3537
  :host([mode="app"]) .view-area:nth-of-type(1) {
3516
- border-color: var(--tuned-red);
3538
+ background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
3517
3539
  }
3518
3540
  :host([mode="app"]) .view-area:nth-of-type(2) {
3519
- border-color: var(--sharp-blue);
3541
+ background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
3520
3542
  }
3521
3543
  :host([mode="app"]) .view-area:nth-of-type(3) {
3522
- border-color: var(--yellow);
3544
+ background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
3523
3545
  }
3524
3546
  :host([mode="app"]) .view-area:nth-of-type(4) {
3525
- border-color: var(--apple-green);
3547
+ background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
3526
3548
  }
3527
3549
 
3528
3550
  .view-square {