@triptease/stylesheet 1.4.7 → 1.4.9

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 (7) hide show
  1. package/dist/base.css +26 -88
  2. package/dist/blocks.css +2 -1
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/triptease.css +27 -88
  6. package/dist/utilities.css +1 -1
  7. package/package.json +1 -1
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.7
2
+ * @triptease/stylesheet v1.4.9
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);
@@ -678,69 +678,9 @@ button,
678
678
  }
679
679
  @layer base{
680
680
 
681
- @property --checkbox-size {
682
- syntax: '<length>';
683
- inherits: true;
684
- initial-value: 1rem;
685
- }
686
-
687
- @property --toggle-width {
688
- syntax: '<length>';
689
- inherits: true;
690
- initial-value: 3.5rem;
691
- }
692
-
693
- @property --toggle-height {
694
- syntax: '<length>';
695
- inherits: true;
696
- initial-value: 1.75rem;
697
- }
698
-
699
- @property --toggle-background-color {
700
- syntax: '<color>';
701
- inherits: true;
702
- initial-value: #75767E;
703
- }
704
-
705
- @property --toggle-color {
706
- syntax: '<color>';
707
- inherits: true;
708
- initial-value: #B5B0B5;
709
- }
710
-
711
- @property --toggle-transition-speed {
712
- syntax: '<time>';
713
- inherits: true;
714
- initial-value: 0.25s;
715
- }
716
-
717
- @property --toggle-border-color {
718
- syntax: '<color>';
719
- inherits: true;
720
- initial-value: transparent;
721
- }
722
-
723
- @property --toggle-border-width {
724
- syntax: '<length>';
725
- inherits: true;
726
- initial-value: 0px;
727
- }
728
-
729
- @property --toggle-hover-color {
730
- syntax: '<color>';
731
- inherits: true;
732
- initial-value: #575157;
733
- }
734
-
735
- @property --toggle-hover-background-color {
736
- syntax: '<color>';
737
- inherits: true;
738
- initial-value: #1C1B27;
739
- }
740
-
741
681
  input[type='checkbox'] {
742
682
  accent-color: var(--color-primary-400);
743
- width: var(--checkbox-size, var(--space-scale-2));
683
+ width: var(--space-scale-2);
744
684
  aspect-ratio: 1;
745
685
 
746
686
  &[aria-invalid]:not([aria-invalid='false']),
@@ -754,34 +694,28 @@ input[type='checkbox'] {
754
694
 
755
695
  input[type='checkbox'][data-theme='toggle'],
756
696
  [role='switch'] {
757
- --toggle-width: var(--space-scale-5);
758
- --toggle-height: 1.75rem;
759
- --toggle-background-color: var(--color-surface-700);
760
-
761
697
  -webkit-appearance: none;
762
-
763
698
  -moz-appearance: none;
764
-
765
699
  appearance: none;
766
- width: var(--toggle-width);
767
- height: var(--toggle-height);
700
+ width: var(--space-scale-5);
701
+ height: 1.75rem;
768
702
  border-radius: 18px;
769
- color: var(--toggle-color, var(--color-text-200));
770
- background-color: var(--toggle-background-color);
703
+ color: var(--color-text-200);
704
+ background-color: var(--color-surface-700);
771
705
  transition:
772
- color var(--toggle-transition-speed, 0.25s),
773
- background-color var(--toggle-transition-speed, 0.25s);
706
+ color 0.25s,
707
+ background-color 0.25s;
774
708
  cursor: pointer;
775
709
  display: block;
776
- border-color: var(--toggle-border-color, transparent);
777
- border-width: var(--toggle-border-width, 0px);
710
+ border-color: transparent;
711
+ border-width: 0px;
778
712
  padding: 2px;
779
713
  position: relative;
780
- min-width: var(--toggle-width);
714
+ min-width: var(--space-scale-5);
781
715
 
782
716
  &:hover {
783
- color: var(--toggle-hover-color, var(--color-text-300));
784
- background-color: var(--toggle-hover-background-color, var(--color-surface-800));
717
+ color: var(--color-text-300);
718
+ background-color: var(--color-surface-800);
785
719
  }
786
720
 
787
721
  &[disabled],
@@ -793,22 +727,25 @@ input[type='checkbox'][data-theme='toggle'],
793
727
 
794
728
  &:checked,
795
729
  &[aria-checked='true'] {
796
- --toggle-color: var(--color-success-300);
797
- --toggle-background-color: var(--color-success-300);
798
- --toggle-hover-color: var(--color-success-500);
799
- --toggle-hover-background-color: var(--color-success-500);
730
+ color: var(--color-success-strong);
731
+ background-color: var(--color-success-strong);
732
+
733
+ &:hover {
734
+ color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
735
+ background-color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
736
+ }
800
737
  }
801
738
 
802
739
  &::before {
803
740
  content: '';
804
741
  position: absolute;
805
742
  top: 2px;
806
- right: calc(100% - var(--toggle-height) + 2px);
743
+ right: calc(100% - 1.75rem + 2px);
807
744
  height: calc(100% - 4px);
808
745
  aspect-ratio: 1;
809
746
  border-radius: inherit;
810
747
  background-color: var(--color-surface-100);
811
- transition: right var(--toggle-transition-speed, 0.25s) ease;
748
+ transition: right 0.25s ease;
812
749
  z-index: 1;
813
750
  padding: 4px;
814
751
  box-sizing: border-box;
@@ -826,12 +763,12 @@ input[type='checkbox'][data-theme='toggle'],
826
763
  mask-repeat: no-repeat;
827
764
  position: absolute;
828
765
  top: 2px;
829
- right: calc(100% - var(--toggle-height) + 2px);
766
+ right: calc(100% - 1.75rem + 2px);
830
767
  height: calc(100% - 4px);
831
768
  aspect-ratio: 1;
832
769
  border-radius: inherit;
833
- background-color: var(--toggle-background-color);
834
- transition: right var(--toggle-transition-speed, 0.25s) ease;
770
+ background-color: var(--color-surface-700);
771
+ transition: right 0.25s ease;
835
772
  z-index: 2;
836
773
  padding: 4px;
837
774
  box-sizing: border-box;
@@ -852,6 +789,7 @@ input[type='checkbox'][data-theme='toggle'],
852
789
  background-position: center center;
853
790
  -webkit-mask-position: center calc(50% + 1px);
854
791
  mask-position: center calc(50% + 1px);
792
+ background-color: var(--color-success-strong);
855
793
  }
856
794
  }
857
795
 
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.7
2
+ * @triptease/stylesheet v1.4.9
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -95,6 +95,7 @@
95
95
  background-color: var(--color-info-strong);
96
96
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
97
97
  mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
98
+ align-self: start;
98
99
  }
99
100
 
100
101
  &[data-theme='warning'] {
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.7
2
+ * @triptease/stylesheet v1.4.9
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/exceptions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.7
2
+ * @triptease/stylesheet v1.4.9
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/triptease.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.7
2
+ * @triptease/stylesheet v1.4.9
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);
@@ -678,69 +678,9 @@ button,
678
678
  }
679
679
  @layer base{
680
680
 
681
- @property --checkbox-size {
682
- syntax: '<length>';
683
- inherits: true;
684
- initial-value: 1rem;
685
- }
686
-
687
- @property --toggle-width {
688
- syntax: '<length>';
689
- inherits: true;
690
- initial-value: 3.5rem;
691
- }
692
-
693
- @property --toggle-height {
694
- syntax: '<length>';
695
- inherits: true;
696
- initial-value: 1.75rem;
697
- }
698
-
699
- @property --toggle-background-color {
700
- syntax: '<color>';
701
- inherits: true;
702
- initial-value: #75767E;
703
- }
704
-
705
- @property --toggle-color {
706
- syntax: '<color>';
707
- inherits: true;
708
- initial-value: #B5B0B5;
709
- }
710
-
711
- @property --toggle-transition-speed {
712
- syntax: '<time>';
713
- inherits: true;
714
- initial-value: 0.25s;
715
- }
716
-
717
- @property --toggle-border-color {
718
- syntax: '<color>';
719
- inherits: true;
720
- initial-value: transparent;
721
- }
722
-
723
- @property --toggle-border-width {
724
- syntax: '<length>';
725
- inherits: true;
726
- initial-value: 0px;
727
- }
728
-
729
- @property --toggle-hover-color {
730
- syntax: '<color>';
731
- inherits: true;
732
- initial-value: #575157;
733
- }
734
-
735
- @property --toggle-hover-background-color {
736
- syntax: '<color>';
737
- inherits: true;
738
- initial-value: #1C1B27;
739
- }
740
-
741
681
  input[type='checkbox'] {
742
682
  accent-color: var(--color-primary-400);
743
- width: var(--checkbox-size, var(--space-scale-2));
683
+ width: var(--space-scale-2);
744
684
  aspect-ratio: 1;
745
685
 
746
686
  &[aria-invalid]:not([aria-invalid='false']),
@@ -754,34 +694,28 @@ input[type='checkbox'] {
754
694
 
755
695
  input[type='checkbox'][data-theme='toggle'],
756
696
  [role='switch'] {
757
- --toggle-width: var(--space-scale-5);
758
- --toggle-height: 1.75rem;
759
- --toggle-background-color: var(--color-surface-700);
760
-
761
697
  -webkit-appearance: none;
762
-
763
698
  -moz-appearance: none;
764
-
765
699
  appearance: none;
766
- width: var(--toggle-width);
767
- height: var(--toggle-height);
700
+ width: var(--space-scale-5);
701
+ height: 1.75rem;
768
702
  border-radius: 18px;
769
- color: var(--toggle-color, var(--color-text-200));
770
- background-color: var(--toggle-background-color);
703
+ color: var(--color-text-200);
704
+ background-color: var(--color-surface-700);
771
705
  transition:
772
- color var(--toggle-transition-speed, 0.25s),
773
- background-color var(--toggle-transition-speed, 0.25s);
706
+ color 0.25s,
707
+ background-color 0.25s;
774
708
  cursor: pointer;
775
709
  display: block;
776
- border-color: var(--toggle-border-color, transparent);
777
- border-width: var(--toggle-border-width, 0px);
710
+ border-color: transparent;
711
+ border-width: 0px;
778
712
  padding: 2px;
779
713
  position: relative;
780
- min-width: var(--toggle-width);
714
+ min-width: var(--space-scale-5);
781
715
 
782
716
  &:hover {
783
- color: var(--toggle-hover-color, var(--color-text-300));
784
- background-color: var(--toggle-hover-background-color, var(--color-surface-800));
717
+ color: var(--color-text-300);
718
+ background-color: var(--color-surface-800);
785
719
  }
786
720
 
787
721
  &[disabled],
@@ -793,22 +727,25 @@ input[type='checkbox'][data-theme='toggle'],
793
727
 
794
728
  &:checked,
795
729
  &[aria-checked='true'] {
796
- --toggle-color: var(--color-success-300);
797
- --toggle-background-color: var(--color-success-300);
798
- --toggle-hover-color: var(--color-success-500);
799
- --toggle-hover-background-color: var(--color-success-500);
730
+ color: var(--color-success-strong);
731
+ background-color: var(--color-success-strong);
732
+
733
+ &:hover {
734
+ color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
735
+ background-color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
736
+ }
800
737
  }
801
738
 
802
739
  &::before {
803
740
  content: '';
804
741
  position: absolute;
805
742
  top: 2px;
806
- right: calc(100% - var(--toggle-height) + 2px);
743
+ right: calc(100% - 1.75rem + 2px);
807
744
  height: calc(100% - 4px);
808
745
  aspect-ratio: 1;
809
746
  border-radius: inherit;
810
747
  background-color: var(--color-surface-100);
811
- transition: right var(--toggle-transition-speed, 0.25s) ease;
748
+ transition: right 0.25s ease;
812
749
  z-index: 1;
813
750
  padding: 4px;
814
751
  box-sizing: border-box;
@@ -826,12 +763,12 @@ input[type='checkbox'][data-theme='toggle'],
826
763
  mask-repeat: no-repeat;
827
764
  position: absolute;
828
765
  top: 2px;
829
- right: calc(100% - var(--toggle-height) + 2px);
766
+ right: calc(100% - 1.75rem + 2px);
830
767
  height: calc(100% - 4px);
831
768
  aspect-ratio: 1;
832
769
  border-radius: inherit;
833
- background-color: var(--toggle-background-color);
834
- transition: right var(--toggle-transition-speed, 0.25s) ease;
770
+ background-color: var(--color-surface-700);
771
+ transition: right 0.25s ease;
835
772
  z-index: 2;
836
773
  padding: 4px;
837
774
  box-sizing: border-box;
@@ -852,6 +789,7 @@ input[type='checkbox'][data-theme='toggle'],
852
789
  background-position: center center;
853
790
  -webkit-mask-position: center calc(50% + 1px);
854
791
  mask-position: center calc(50% + 1px);
792
+ background-color: var(--color-success-strong);
855
793
  }
856
794
  }
857
795
 
@@ -1276,6 +1214,7 @@ body {
1276
1214
  background-color: var(--color-info-strong);
1277
1215
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
1278
1216
  mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
1217
+ align-self: start;
1279
1218
  }
1280
1219
 
1281
1220
  &[data-theme='warning'] {
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.7
2
+ * @triptease/stylesheet v1.4.9
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.4.7",
3
+ "version": "1.4.9",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",