@photonix/basic 3.1.0 → 3.2.0
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/index.css +18 -6
- package/dist/index.d.mts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +56 -44
- package/dist/index.mjs +56 -44
- package/package.json +4 -4
package/dist/index.css
CHANGED
|
@@ -5989,6 +5989,12 @@
|
|
|
5989
5989
|
border: var(--border-sm) solid transparent;
|
|
5990
5990
|
color: var(--badge-text-subtle);
|
|
5991
5991
|
}
|
|
5992
|
+
.brand {
|
|
5993
|
+
--badge-color: var(--surface-brand-primary);
|
|
5994
|
+
--badge-on-color: var(--text-neutral-primary-inverse);
|
|
5995
|
+
--badge-bg-subtle: var(--surface-brand-subtle);
|
|
5996
|
+
--badge-text-subtle: var(--text-brand-primary);
|
|
5997
|
+
}
|
|
5992
5998
|
.gray {
|
|
5993
5999
|
--badge-color: var(--surface-neutral-on-surface);
|
|
5994
6000
|
--badge-on-color: var(--text-neutral-secondary);
|
|
@@ -6662,8 +6668,11 @@
|
|
|
6662
6668
|
gap: var(--space-xs);
|
|
6663
6669
|
vertical-align: middle;
|
|
6664
6670
|
}
|
|
6665
|
-
.checkboxContainer .checkboxRoot {
|
|
6666
|
-
margin: calc((var(--dimensions-
|
|
6671
|
+
.checkboxContainer .checkboxRoot.medium {
|
|
6672
|
+
margin: calc((var(--dimensions-24) - var(--dimensions-40)) / 2);
|
|
6673
|
+
}
|
|
6674
|
+
.checkboxContainer .checkboxRoot.small {
|
|
6675
|
+
margin: calc((var(--dimensions-20) - var(--dimensions-32)) / 2);
|
|
6667
6676
|
}
|
|
6668
6677
|
.checkboxContainer.disabled {
|
|
6669
6678
|
cursor: not-allowed;
|
|
@@ -6759,7 +6768,7 @@
|
|
|
6759
6768
|
position: relative;
|
|
6760
6769
|
z-index: var(--z-local-below);
|
|
6761
6770
|
}
|
|
6762
|
-
.small {
|
|
6771
|
+
.radioRoot.small {
|
|
6763
6772
|
block-size: var(--dimensions-32);
|
|
6764
6773
|
inline-size: var(--dimensions-32);
|
|
6765
6774
|
}
|
|
@@ -6767,7 +6776,7 @@
|
|
|
6767
6776
|
block-size: var(--dimensions-20);
|
|
6768
6777
|
inline-size: var(--dimensions-20);
|
|
6769
6778
|
}
|
|
6770
|
-
.medium {
|
|
6779
|
+
.radioRoot.medium {
|
|
6771
6780
|
block-size: var(--dimensions-40);
|
|
6772
6781
|
inline-size: var(--dimensions-40);
|
|
6773
6782
|
}
|
|
@@ -6784,8 +6793,11 @@
|
|
|
6784
6793
|
min-inline-size: max-content;
|
|
6785
6794
|
vertical-align: middle;
|
|
6786
6795
|
}
|
|
6787
|
-
.radioContainer .radioRoot {
|
|
6788
|
-
margin: calc((var(--dimensions-
|
|
6796
|
+
.radioContainer .radioRoot.medium {
|
|
6797
|
+
margin: calc((var(--dimensions-24) - var(--dimensions-40)) / 2);
|
|
6798
|
+
}
|
|
6799
|
+
.radioContainer .radioRoot.small {
|
|
6800
|
+
margin: calc((var(--dimensions-20) - var(--dimensions-32)) / 2);
|
|
6789
6801
|
}
|
|
6790
6802
|
.radioContainer.disabled {
|
|
6791
6803
|
cursor: not-allowed;
|
package/dist/index.d.mts
CHANGED
|
@@ -800,12 +800,13 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
800
800
|
/**
|
|
801
801
|
* Color theme of the badge
|
|
802
802
|
*/
|
|
803
|
-
color?: 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
|
|
803
|
+
color?: 'brand' | 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
|
|
804
804
|
/**
|
|
805
805
|
* Shape of the badge
|
|
806
806
|
* - rounded: Small border radius (6px)
|
|
807
807
|
* - pill: Fully rounded (capsule) - DEFAULT
|
|
808
|
-
* - icon:
|
|
808
|
+
* - icon: 24px circle holding an icon, or a one- or two-character label
|
|
809
|
+
* (a step number) when no icon is given
|
|
809
810
|
* - text: Pill shape with text only
|
|
810
811
|
* - dot: Small dot status indicator (8px)
|
|
811
812
|
*/
|
|
@@ -820,7 +821,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
820
821
|
*/
|
|
821
822
|
trailingIcon?: React.ReactNode;
|
|
822
823
|
/**
|
|
823
|
-
* Text label (for rounded, pill, text shapes)
|
|
824
|
+
* Text label (for rounded, pill, text shapes; icon shape when no icon)
|
|
824
825
|
*/
|
|
825
826
|
label?: string;
|
|
826
827
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -800,12 +800,13 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
800
800
|
/**
|
|
801
801
|
* Color theme of the badge
|
|
802
802
|
*/
|
|
803
|
-
color?: 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
|
|
803
|
+
color?: 'brand' | 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
|
|
804
804
|
/**
|
|
805
805
|
* Shape of the badge
|
|
806
806
|
* - rounded: Small border radius (6px)
|
|
807
807
|
* - pill: Fully rounded (capsule) - DEFAULT
|
|
808
|
-
* - icon:
|
|
808
|
+
* - icon: 24px circle holding an icon, or a one- or two-character label
|
|
809
|
+
* (a step number) when no icon is given
|
|
809
810
|
* - text: Pill shape with text only
|
|
810
811
|
* - dot: Small dot status indicator (8px)
|
|
811
812
|
*/
|
|
@@ -820,7 +821,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
820
821
|
*/
|
|
821
822
|
trailingIcon?: React.ReactNode;
|
|
822
823
|
/**
|
|
823
|
-
* Text label (for rounded, pill, text shapes)
|
|
824
|
+
* Text label (for rounded, pill, text shapes; icon shape when no icon)
|
|
824
825
|
*/
|
|
825
826
|
label?: string;
|
|
826
827
|
/**
|