@triptease/stylesheet 1.2.1 → 1.2.3

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/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.1
2
+ * @triptease/stylesheet v1.2.3
3
3
  */
4
4
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
5
5
  @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -317,7 +317,7 @@ button {
317
317
  @property --button-hover-color {
318
318
  syntax: '<color>';
319
319
  inherits: true;
320
- initial-value: #0D0C0D;
320
+ initial-value: inherit;
321
321
  }
322
322
 
323
323
  @property --button-focus-outline-color {
@@ -414,6 +414,7 @@ button,
414
414
  --button-background-color: var(--color-surface-200);
415
415
  --button-color: var(--color-primary-400);
416
416
  --button-border: 1px solid var(--color-border);
417
+ --button-hover-color: var(--color-primary-500);
417
418
  box-shadow:
418
419
  inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
419
420
  inset 0 0 0 2px rgba(255, 255, 255, 0.4),
@@ -421,7 +422,6 @@ button,
421
422
 
422
423
  &:hover:not(:disabled):not([aria-disabled='true']) {
423
424
  --button-border: 1px solid var(--color-primary-500);
424
- --button-color: var(--color-primary-500);
425
425
  }
426
426
 
427
427
  &:disabled {
@@ -611,6 +611,61 @@ button,
611
611
  }
612
612
  }
613
613
  @layer base{
614
+ @property --input-horizontal-spacing {
615
+ syntax: '<length>';
616
+ inherits: true;
617
+ initial-value: 1rem;
618
+ }
619
+
620
+ @property --input-background-color {
621
+ syntax: '<color>';
622
+ inherits: true;
623
+ initial-value: #FFFFFF;
624
+ }
625
+
626
+ @property --input-border-color {
627
+ syntax: '<color>';
628
+ inherits: true;
629
+ initial-value: #C5C8CE;
630
+ }
631
+
632
+ @property --input-border-width {
633
+ syntax: '<length>';
634
+ inherits: true;
635
+ initial-value: 1px;
636
+ }
637
+
638
+ @property --input-color {
639
+ syntax: '*';
640
+ inherits: true;
641
+ initial-value: inherit;
642
+ }
643
+
644
+ @property --input-height {
645
+ syntax: '<length>';
646
+ inherits: true;
647
+ initial-value: 2.5rem;
648
+ }
649
+
650
+ @property --input-vertical-spacing {
651
+ syntax: '<length>';
652
+ inherits: true;
653
+ initial-value: 0;
654
+ }
655
+
656
+ @property --placeholder-color {
657
+ syntax: '<color>';
658
+ inherits: true;
659
+ initial-value: #575157;
660
+ }
661
+
662
+ @property --input-focus-border-color {
663
+ syntax: '<color>';
664
+ inherits: true;
665
+ initial-value: #5E43C2;
666
+ }
667
+ }
668
+ @layer base{
614
669
 
615
670
  @property --checkbox-size {
616
671
  syntax: '<length>';
@@ -812,7 +867,7 @@ input[type='number'] {
812
867
  input[type='number']::-webkit-inner-spin-button {
813
868
  position: absolute;
814
869
  top: var(--space-scale-0-5);
815
- right: var(--input-horizontal-spacing);
870
+ right: var(--input-horizontal-spacing, var(--space-scale-2));
816
871
  height: calc(100% - var(--space-scale-1));
817
872
  }
818
873
  }
@@ -875,61 +930,6 @@ input[type='radio'] {
875
930
  }
876
931
  }
877
932
  @layer base{
878
-
879
- @property --input-horizontal-spacing {
880
- syntax: '<length>';
881
- inherits: true;
882
- initial-value: 1rem;
883
- }
884
-
885
- @property --input-background-color {
886
- syntax: '<color>';
887
- inherits: true;
888
- initial-value: #FFFFFF;
889
- }
890
-
891
- @property --input-border-color {
892
- syntax: '<color>';
893
- inherits: true;
894
- initial-value: #C5C8CE;
895
- }
896
-
897
- @property --input-border-width {
898
- syntax: '<length>';
899
- inherits: true;
900
- initial-value: 1px;
901
- }
902
-
903
- @property --input-color {
904
- syntax: '*';
905
- inherits: true;
906
- initial-value: inherit;
907
- }
908
-
909
- @property --input-height {
910
- syntax: '<length>';
911
- inherits: true;
912
- initial-value: 2.5rem;
913
- }
914
-
915
- @property --input-vertical-spacing {
916
- syntax: '<length>';
917
- inherits: true;
918
- initial-value: 0;
919
- }
920
-
921
- @property --placeholder-color {
922
- syntax: '<color>';
923
- inherits: true;
924
- initial-value: #575157;
925
- }
926
-
927
- @property --input-focus-border-color {
928
- syntax: '<color>';
929
- inherits: true;
930
- initial-value: #5E43C2;
931
- }
932
-
933
933
  input:not([type='checkbox'], [type='radio']),
934
934
  textarea {
935
935
  -webkit-appearance: none;
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.1
2
+ * @triptease/stylesheet v1.2.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.1
2
+ * @triptease/stylesheet v1.2.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.1
2
+ * @triptease/stylesheet v1.2.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.1
2
+ * @triptease/stylesheet v1.2.3
3
3
  */
4
4
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
5
5
  @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -317,7 +317,7 @@ button {
317
317
  @property --button-hover-color {
318
318
  syntax: '<color>';
319
319
  inherits: true;
320
- initial-value: #0D0C0D;
320
+ initial-value: inherit;
321
321
  }
322
322
 
323
323
  @property --button-focus-outline-color {
@@ -414,6 +414,7 @@ button,
414
414
  --button-background-color: var(--color-surface-200);
415
415
  --button-color: var(--color-primary-400);
416
416
  --button-border: 1px solid var(--color-border);
417
+ --button-hover-color: var(--color-primary-500);
417
418
  box-shadow:
418
419
  inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
419
420
  inset 0 0 0 2px rgba(255, 255, 255, 0.4),
@@ -421,7 +422,6 @@ button,
421
422
 
422
423
  &:hover:not(:disabled):not([aria-disabled='true']) {
423
424
  --button-border: 1px solid var(--color-primary-500);
424
- --button-color: var(--color-primary-500);
425
425
  }
426
426
 
427
427
  &:disabled {
@@ -611,6 +611,61 @@ button,
611
611
  }
612
612
  }
613
613
  @layer base{
614
+ @property --input-horizontal-spacing {
615
+ syntax: '<length>';
616
+ inherits: true;
617
+ initial-value: 1rem;
618
+ }
619
+
620
+ @property --input-background-color {
621
+ syntax: '<color>';
622
+ inherits: true;
623
+ initial-value: #FFFFFF;
624
+ }
625
+
626
+ @property --input-border-color {
627
+ syntax: '<color>';
628
+ inherits: true;
629
+ initial-value: #C5C8CE;
630
+ }
631
+
632
+ @property --input-border-width {
633
+ syntax: '<length>';
634
+ inherits: true;
635
+ initial-value: 1px;
636
+ }
637
+
638
+ @property --input-color {
639
+ syntax: '*';
640
+ inherits: true;
641
+ initial-value: inherit;
642
+ }
643
+
644
+ @property --input-height {
645
+ syntax: '<length>';
646
+ inherits: true;
647
+ initial-value: 2.5rem;
648
+ }
649
+
650
+ @property --input-vertical-spacing {
651
+ syntax: '<length>';
652
+ inherits: true;
653
+ initial-value: 0;
654
+ }
655
+
656
+ @property --placeholder-color {
657
+ syntax: '<color>';
658
+ inherits: true;
659
+ initial-value: #575157;
660
+ }
661
+
662
+ @property --input-focus-border-color {
663
+ syntax: '<color>';
664
+ inherits: true;
665
+ initial-value: #5E43C2;
666
+ }
667
+ }
668
+ @layer base{
614
669
 
615
670
  @property --checkbox-size {
616
671
  syntax: '<length>';
@@ -812,7 +867,7 @@ input[type='number'] {
812
867
  input[type='number']::-webkit-inner-spin-button {
813
868
  position: absolute;
814
869
  top: var(--space-scale-0-5);
815
- right: var(--input-horizontal-spacing);
870
+ right: var(--input-horizontal-spacing, var(--space-scale-2));
816
871
  height: calc(100% - var(--space-scale-1));
817
872
  }
818
873
  }
@@ -875,61 +930,6 @@ input[type='radio'] {
875
930
  }
876
931
  }
877
932
  @layer base{
878
-
879
- @property --input-horizontal-spacing {
880
- syntax: '<length>';
881
- inherits: true;
882
- initial-value: 1rem;
883
- }
884
-
885
- @property --input-background-color {
886
- syntax: '<color>';
887
- inherits: true;
888
- initial-value: #FFFFFF;
889
- }
890
-
891
- @property --input-border-color {
892
- syntax: '<color>';
893
- inherits: true;
894
- initial-value: #C5C8CE;
895
- }
896
-
897
- @property --input-border-width {
898
- syntax: '<length>';
899
- inherits: true;
900
- initial-value: 1px;
901
- }
902
-
903
- @property --input-color {
904
- syntax: '*';
905
- inherits: true;
906
- initial-value: inherit;
907
- }
908
-
909
- @property --input-height {
910
- syntax: '<length>';
911
- inherits: true;
912
- initial-value: 2.5rem;
913
- }
914
-
915
- @property --input-vertical-spacing {
916
- syntax: '<length>';
917
- inherits: true;
918
- initial-value: 0;
919
- }
920
-
921
- @property --placeholder-color {
922
- syntax: '<color>';
923
- inherits: true;
924
- initial-value: #575157;
925
- }
926
-
927
- @property --input-focus-border-color {
928
- syntax: '<color>';
929
- inherits: true;
930
- initial-value: #5E43C2;
931
- }
932
-
933
933
  input:not([type='checkbox'], [type='radio']),
934
934
  textarea {
935
935
  -webkit-appearance: none;
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.1
2
+ * @triptease/stylesheet v1.2.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@triptease/stylesheet",
3
- "version": "1.2.1",
3
+ "version": "1.2.3",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",
@@ -15,6 +15,7 @@
15
15
  "@csstools/postcss-design-tokens": "^4.0.5",
16
16
  "autoprefixer": "^10.4.20",
17
17
  "concurrently": "^9.1.0",
18
+ "http-server": "^14.1.1",
18
19
  "lit": "^3.3.0",
19
20
  "postcss": "^8.4.49",
20
21
  "postcss-banner": "^4.0.1",