fictoan-react 2.0.0-beta.11 → 2.0.0-beta.13

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../../../src/components/Meter/Meter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIvE,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,qBAAqB;IAC9B,MAAO,CAAC,EAAG,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,gBAAgB;IACzB,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,IAAI,EAAkB,MAAM,CAAC;IAC7B,KAAK,EAAiB,MAAM,CAAC;IAC7B,OAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,iBAAkB,CAAC,EAAG,OAAO,CAAC;IAC9B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,KAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,SAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,WAAkB,CAAC,EAAG,MAAM,CAAC;CACpC;AAED,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAChD,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,WAAW,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,MAAM,qBAAqB,CAAC,GACrE,qBAAqB,CAAC;AAGnD,eAAO,MAAM,KAAK,yGA4GjB,CAAC"}
1
+ {"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../../../src/components/Meter/Meter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOvE,OAAO,aAAa,CAAC;AAKrB,MAAM,WAAW,qBAAqB;IAClC,MAAO,CAAC,EAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,IAAI,EAAkB,MAAM,CAAC;IAC7B,KAAK,EAAiB,MAAM,CAAC;IAC7B,OAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,iBAAkB,CAAC,EAAG,OAAO,CAAC;IAC9B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,KAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,SAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,WAAkB,CAAC,EAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAChD,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,WAAW,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,MAAM,qBAAqB,CAAC,GACrE,qBAAqB,CAAC;AAInD,eAAO,MAAM,KAAK,yGA4GjB,CAAC"}
package/dist/index.css CHANGED
@@ -331,6 +331,9 @@
331
331
  -webkit-user-select : none;
332
332
  -moz-user-select : none;
333
333
  user-select : none;
334
+ display : flex;
335
+ gap : 8px;
336
+ align-items : center;
334
337
  }
335
338
 
336
339
  /*To make sure a button's children don't style themselves like a d-bag*/
@@ -360,21 +363,32 @@
360
363
  cursor : not-allowed;
361
364
  }
362
365
 
363
-
364
366
  /* VARIANT COLOUR LAYER ///////////////////////////////////////////////////// */
365
367
  [data-button].success {
366
- --button-primary-bg : var(--button-success-bg);
367
- --button-primary-text : var(--button-success-text);
368
+ --button-primary-bg : var(--button-success-bg);
369
+ --button-primary-text : var(--button-success-text);
370
+ --button-secondary-bg : color-mix(in oklch, var(--button-success-bg), var(--body-bg) 80%);
371
+ --button-secondary-text : var(--button-success-bg);
372
+ --button-tertiary-bg : transparent;
373
+ --button-tertiary-text : var(--button-success-bg);
368
374
  }
369
375
 
370
376
  [data-button].warning {
371
- --button-primary-bg : var(--button-warning-bg);
372
- --button-primary-text : var(--button-warning-text);
377
+ --button-primary-bg : var(--button-warning-bg);
378
+ --button-primary-text : var(--button-warning-text);
379
+ --button-secondary-bg : color-mix(in oklch, var(--button-warning-bg), var(--body-bg) 80%);
380
+ --button-secondary-text : var(--button-warning-bg);
381
+ --button-tertiary-bg : transparent;
382
+ --button-tertiary-text : var(--button-warning-bg);
373
383
  }
374
384
 
375
385
  [data-button].danger {
376
- --button-primary-bg : var(--button-danger-bg);
377
- --button-primary-text : var(--button-danger-text);
386
+ --button-primary-bg : var(--button-danger-bg);
387
+ --button-primary-text : var(--button-danger-text);
388
+ --button-secondary-bg : color-mix(in oklch, var(--button-danger-bg), var(--body-bg) 80%);
389
+ --button-secondary-text : var(--button-danger-bg);
390
+ --button-tertiary-bg : transparent;
391
+ --button-tertiary-text : var(--button-danger-bg);
378
392
  }
379
393
 
380
394
  /* PRIMARY BUTTON /////////////////////////////////////////////////////////// */
@@ -733,29 +747,37 @@ li[data-breadcrumb-item] .breadcrumb-separator {
733
747
  user-select : none;
734
748
  }
735
749
  [data-callout] {
750
+ position : relative;
736
751
  display : block;
737
- border-width : 0 0 0 var(--callout-border-width);
738
752
  word-break : break-word;
739
- border-style : solid;
740
- padding : 16px;
741
- border-radius : var(--callout-border-radius);
753
+ padding : 16px 16px 16px calc(var(--callout-border-width) + 16px);
754
+ border-radius : var(--global-border-radius);
742
755
  }
756
+ [data-callout]::before {
757
+ position : absolute;
758
+ top : 4px;
759
+ left : 4px;
760
+ height : calc(100% - 8px);
761
+ content : "";
762
+ width : var(--callout-border-width);
763
+ border-radius : calc(var(--callout-border-width) / 2);
764
+ }
743
765
  .info[data-callout] {
744
766
  background-color : var(--callout-info-bg);
745
- border-color : var(--callout-info-border);
746
767
  }
768
+ .info[data-callout]::before { background-color : var(--callout-info-border); }
747
769
  .success[data-callout] {
748
770
  background-color : var(--callout-success-bg);
749
- border-color : var(--callout-success-border);
750
771
  }
772
+ .success[data-callout]::before { background-color : var(--callout-success-border); }
751
773
  .warning[data-callout] {
752
774
  background-color : var(--callout-warning-bg);
753
- border-color : var(--callout-warning-border);
754
775
  }
776
+ .warning[data-callout]::before { background-color : var(--callout-warning-border); }
755
777
  .error[data-callout] {
756
778
  background-color : var(--callout-error-bg);
757
- border-color : var(--callout-error-border);
758
779
  }
780
+ .error[data-callout]::before { background-color : var(--callout-error-border); }
759
781
  [data-card] {
760
782
  position : relative;
761
783
  width : 100%;
@@ -9743,17 +9765,17 @@ mark {
9743
9765
  --callout-border-radius : var(--global-border-radius);
9744
9766
  --callout-border-width : var(--nano);
9745
9767
 
9746
- --callout-info-bg : var(--blue-light60);
9747
- --callout-info-border : var(--blue-dark20);
9768
+ --callout-info-bg : var(--blue-light90);
9769
+ --callout-info-border : var(--blue);
9748
9770
 
9749
- --callout-success-bg : var(--green-light60);
9750
- --callout-success-border : var(--green-dark20);
9771
+ --callout-success-bg : var(--green-light90);
9772
+ --callout-success-border : var(--green);
9751
9773
 
9752
- --callout-warning-bg : var(--amber-light60);
9753
- --callout-warning-border : var(--amber-dark10);
9774
+ --callout-warning-bg : var(--amber-light90);
9775
+ --callout-warning-border : var(--amber);
9754
9776
 
9755
- --callout-error-bg : var(--red-light60);
9756
- --callout-error-border : var(--red-dark10);
9777
+ --callout-error-bg : var(--red-light90);
9778
+ --callout-error-border : var(--red);
9757
9779
  }
9758
9780
 
9759
9781
  /* CARD ///////////////////////////////////////////////////////////////////// */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name" : "fictoan-react",
3
- "version" : "2.0.0-beta.11",
3
+ "version" : "2.0.0-beta.13",
4
4
  "description" : "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
5
5
  "repository" : {
6
6
  "type" : "git",