@triptease/stylesheet 1.4.8 → 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 +1 -1
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/triptease.css +26 -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.8
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.8
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/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.8
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.8
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.8
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/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.8
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.8",
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",