@pontive/pontkit-core 1.12.0 → 1.13.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/catalog.json +1 -1
- package/custom-elements.json +1 -1
- package/dist/index.js +483 -458
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2948 -3028
- package/dist/index.mjs.map +1 -1
- package/dist/primitives/components/ui/calendar/calendar.style.d.ts +0 -2
- package/dist/primitives/components/ui/date-picker/date-picker.styles.d.ts +0 -1
- package/dist/primitives/components/ui/pagination/pagination-link.d.ts +1 -1
- package/dist/primitives/components/ui/pagination/pagination.styles.d.ts +0 -4
- package/dist/styles.css +2104 -795
- package/dist/tokens/tailwind/border-radius.d.ts +0 -1
- package/dist/tokens/tailwind/border-width.d.ts +0 -3
- package/dist/tokens/tailwind/color.d.ts +0 -25
- package/dist/tokens/tailwind/font-size.d.ts +0 -1
- package/dist/tokens/tailwind/font-weight.d.ts +0 -1
- package/dist/tokens/tailwind/index.d.ts +0 -51
- package/dist/tokens/tailwind/opacity.d.ts +0 -1
- package/dist/tokens/tailwind/ring-width.d.ts +0 -2
- package/dist/tokens/tailwind/spacing.d.ts +0 -17
- package/package.json +1 -1
- package/dist/primitives/components/ui/button/button.style.d.ts +0 -4
package/dist/styles.css
CHANGED
|
@@ -640,6 +640,33 @@
|
|
|
640
640
|
--pont-ref-layout-inset-neg-full: -100%;
|
|
641
641
|
}
|
|
642
642
|
|
|
643
|
+
/* * -------- FLEXBOX & GRID -------- * */
|
|
644
|
+
|
|
645
|
+
:root {
|
|
646
|
+
/* * JUSTIFY CONTENT * */
|
|
647
|
+
--pont-ref-layout-justify-start: flex-start;
|
|
648
|
+
--pont-ref-layout-justify-end: flex-end;
|
|
649
|
+
--pont-ref-layout-justify-end-safe: safe flex-end;
|
|
650
|
+
--pont-ref-layout-justify-center: center;
|
|
651
|
+
--pont-ref-layout-justify-center-safe: safe center;
|
|
652
|
+
--pont-ref-layout-justify-between: space-between;
|
|
653
|
+
--pont-ref-layout-justify-around: space-around;
|
|
654
|
+
--pont-ref-layout-justify-evenly: space-evenly;
|
|
655
|
+
--pont-ref-layout-justify-stretch: stretch;
|
|
656
|
+
--pont-ref-layout-justify-baseline: baseline;
|
|
657
|
+
--pont-ref-layout-justify-normal: normal;
|
|
658
|
+
|
|
659
|
+
/* * ALIGN ITEMS * */
|
|
660
|
+
--pont-ref-layout-items-start: flex-start;
|
|
661
|
+
--pont-ref-layout-items-end: flex-end;
|
|
662
|
+
--pont-ref-layout-items-end-safe: safe flex-end;
|
|
663
|
+
--pont-ref-layout-items-center: center;
|
|
664
|
+
--pont-ref-layout-items-center-safe: safe center;
|
|
665
|
+
--pont-ref-layout-items-baseline: baseline;
|
|
666
|
+
--pont-ref-layout-items-baseline-last: last baseline;
|
|
667
|
+
--pont-ref-layout-items-stretch: stretch;
|
|
668
|
+
}
|
|
669
|
+
|
|
643
670
|
/*
|
|
644
671
|
* ===========================================================================
|
|
645
672
|
* SIZING REFERENCE TOKENS
|
|
@@ -801,6 +828,12 @@
|
|
|
801
828
|
/* * FIELD SIZING * */
|
|
802
829
|
--pont-ref-interactivity-field-sizing-fixed: fixed;
|
|
803
830
|
--pont-ref-interactivity-field-sizing-content: content;
|
|
831
|
+
|
|
832
|
+
/* * USER SELECT * */
|
|
833
|
+
--pont-ref-interactivity-select-none: none;
|
|
834
|
+
--pont-ref-interactivity-select-text: text;
|
|
835
|
+
--pont-ref-interactivity-select-all: all;
|
|
836
|
+
--pont-ref-interactivity-select-auto: auto;
|
|
804
837
|
}
|
|
805
838
|
|
|
806
839
|
/*
|
|
@@ -918,6 +951,8 @@
|
|
|
918
951
|
--pont-sem-color-bg-fill-tertiary: var(--pont-ref-color-white);
|
|
919
952
|
--pont-sem-color-bg-fill-tertiary-hover: var(--pont-ref-color-base-100);
|
|
920
953
|
|
|
954
|
+
--pont-sem-color-bg-fill-transparent-hover: var(--pont-ref-color-base-100);
|
|
955
|
+
|
|
921
956
|
/* Used for select */
|
|
922
957
|
--pont-sem-color-bg-fill-quaternary: var(--pont-ref-color-transparent);
|
|
923
958
|
--pont-sem-color-bg-fill-quaternary-hover: var(--pont-ref-color-transparent);
|
|
@@ -1203,6 +1238,8 @@
|
|
|
1203
1238
|
--pont-sem-color-bg-fill-tertiary-hover: var(--pont-ref-color-white) /
|
|
1204
1239
|
var(--pont-ref-opacity-7-5);
|
|
1205
1240
|
|
|
1241
|
+
--pont-sem-color-bg-fill-transparent-hover: var(--pont-ref-color-base-800) / 50%;
|
|
1242
|
+
|
|
1206
1243
|
/* Used for select */
|
|
1207
1244
|
--pont-sem-color-bg-fill-quaternary: var(--pont-ref-color-white) /
|
|
1208
1245
|
var(--pont-ref-opacity-4-5);
|
|
@@ -2360,8 +2397,8 @@
|
|
|
2360
2397
|
/* BORDER */
|
|
2361
2398
|
--pont-callout-border-radius-tl: var(--pont-ref-radius-lg);
|
|
2362
2399
|
--pont-callout-border-radius-tr: var(--pont-ref-radius-lg);
|
|
2363
|
-
--pont-callout-border-radius-bl: var(--pont-ref-radius-lg);
|
|
2364
2400
|
--pont-callout-border-radius-br: var(--pont-ref-radius-lg);
|
|
2401
|
+
--pont-callout-border-radius-bl: var(--pont-ref-radius-lg);
|
|
2365
2402
|
}
|
|
2366
2403
|
|
|
2367
2404
|
/* * -------- VARIANTS -------- * */
|
|
@@ -4079,9 +4116,8 @@
|
|
|
4079
4116
|
);
|
|
4080
4117
|
|
|
4081
4118
|
/* BACKGROUND */
|
|
4082
|
-
/* Note: alternative 'dark' theme value defined below */
|
|
4083
4119
|
--pont-badge-ghost-bg-color-hover: hsl(
|
|
4084
|
-
var(--pont-sem-color-bg-fill-
|
|
4120
|
+
var(--pont-sem-color-bg-fill-transparent-hover)
|
|
4085
4121
|
);
|
|
4086
4122
|
|
|
4087
4123
|
/* BORDER */
|
|
@@ -4230,12 +4266,6 @@
|
|
|
4230
4266
|
--pont-badge-ghost-effect-opacity-invalid: 100%;
|
|
4231
4267
|
}
|
|
4232
4268
|
|
|
4233
|
-
[data-theme="dark"] {
|
|
4234
|
-
--pont-badge-ghost-bg-color-hover: hsl(
|
|
4235
|
-
var(--pont-sem-color-bg-fill-secondary) / 50%
|
|
4236
|
-
);
|
|
4237
|
-
}
|
|
4238
|
-
|
|
4239
4269
|
/* * -------- DESTRUCTIVE -------- * */
|
|
4240
4270
|
|
|
4241
4271
|
:root {
|
|
@@ -4710,243 +4740,1165 @@
|
|
|
4710
4740
|
--pont-breadcrumb-page-font-weight: var(--pont-sem-font-navigation-weight);
|
|
4711
4741
|
--pont-breadcrumb-page-color-text: var(--pont-sem-color-text);
|
|
4712
4742
|
|
|
4713
|
-
/* * BREADCRUMB SEPARATOR * */
|
|
4714
|
-
--pont-breadcrumb-separator-icon-space-size: var(--pont-sem-space-icon-size-sm);
|
|
4743
|
+
/* * BREADCRUMB SEPARATOR * */
|
|
4744
|
+
--pont-breadcrumb-separator-icon-space-size: var(--pont-sem-space-icon-size-sm);
|
|
4745
|
+
|
|
4746
|
+
/* * BREADCRUMB ELLIPSIS * */
|
|
4747
|
+
--pont-breadcrumb-ellipsis-space-size: var(--pont-sem-space-navigation-size);
|
|
4748
|
+
--pont-breadcrumb-ellipsis-icon-space-size: var(--pont-sem-space-icon-size);
|
|
4749
|
+
}
|
|
4750
|
+
|
|
4751
|
+
/*
|
|
4752
|
+
* ===========================================================================
|
|
4753
|
+
* BUTTON COMPONENT TOKENS
|
|
4754
|
+
* pont-button-*
|
|
4755
|
+
* ===========================================================================
|
|
4756
|
+
*/
|
|
4757
|
+
|
|
4758
|
+
/* TODO(button-group): once `pont-button-group` has been created...
|
|
4759
|
+
add tokens and styles for if the `pont-button` is a `pont-button-group` child,
|
|
4760
|
+
set its border radius (all corners) to `--pont-ref-radius-lg` for all sizes. */
|
|
4761
|
+
|
|
4762
|
+
/*
|
|
4763
|
+
* --------------------------------------------------
|
|
4764
|
+
* COMMON
|
|
4765
|
+
* --------------------------------------------------
|
|
4766
|
+
*/
|
|
4767
|
+
|
|
4768
|
+
:root {
|
|
4769
|
+
/* LAYOUT */
|
|
4770
|
+
--pont-button-layout-justify: var(--pont-ref-layout-justify-center);
|
|
4771
|
+
--pont-button-layout-items: var(--pont-ref-layout-items-center);
|
|
4772
|
+
|
|
4773
|
+
/* TYPOGRAPHY */
|
|
4774
|
+
--pont-button-typography-font: var(--pont-sem-font-family-default);
|
|
4775
|
+
|
|
4776
|
+
/* MOTION */
|
|
4777
|
+
--pont-button-motion-property: var(--pont-ref-motion-property-all);
|
|
4778
|
+
--pont-button-motion-duration: var(--pont-sem-motion-duration-default);
|
|
4779
|
+
--pont-button-motion-fn: var(--pont-sem-motion-fn-default);
|
|
4780
|
+
|
|
4781
|
+
/* TRANSFORMS */
|
|
4782
|
+
--pont-button-transform-translate-x-active: 0px;
|
|
4783
|
+
--pont-button-transform-translate-y-active: 1px;
|
|
4784
|
+
|
|
4785
|
+
/* INTERACTIVITY */
|
|
4786
|
+
--pont-button-interactivity-select: var(--pont-ref-interactivity-select-none);
|
|
4787
|
+
}
|
|
4788
|
+
|
|
4789
|
+
/*
|
|
4790
|
+
* --------------------------------------------------
|
|
4791
|
+
* VARIANTS
|
|
4792
|
+
* --------------------------------------------------
|
|
4793
|
+
*/
|
|
4794
|
+
|
|
4795
|
+
:root {
|
|
4796
|
+
/* TYPOGRAPHY */
|
|
4797
|
+
--pont-button-default-typography-color: hsl(
|
|
4798
|
+
var(--pont-sem-color-text-brand-on-fill)
|
|
4799
|
+
);
|
|
4800
|
+
--pont-button-secondary-typography-color: hsl(
|
|
4801
|
+
var(--pont-sem-color-text-secondary-on-fill)
|
|
4802
|
+
);
|
|
4803
|
+
--pont-button-outline-typography-color: hsl(var(--pont-sem-color-text));
|
|
4804
|
+
--pont-button-ghost-typography-color: hsl(var(--pont-sem-color-text));
|
|
4805
|
+
--pont-button-destructive-typography-color: hsl(
|
|
4806
|
+
var(--pont-sem-color-text-destructive)
|
|
4807
|
+
);
|
|
4808
|
+
--pont-button-link-typography-color: hsl(var(--pont-sem-color-text-brand));
|
|
4809
|
+
|
|
4810
|
+
/* BACKGROUND */
|
|
4811
|
+
--pont-button-default-bg-color: hsl(var(--pont-sem-color-bg-fill-brand));
|
|
4812
|
+
--pont-button-secondary-bg-color: hsl(
|
|
4813
|
+
var(--pont-sem-color-bg-fill-secondary)
|
|
4814
|
+
);
|
|
4815
|
+
--pont-button-outline-bg-color: hsl(var(--pont-sem-color-bg-fill-tertiary));
|
|
4816
|
+
--pont-button-ghost-bg-color: transparent;
|
|
4817
|
+
--pont-button-destructive-bg-color: hsl(
|
|
4818
|
+
var(--pont-sem-color-bg-fill-destructive-secondary)
|
|
4819
|
+
);
|
|
4820
|
+
--pont-button-link-bg-color: transparent;
|
|
4821
|
+
|
|
4822
|
+
/* BORDER */
|
|
4823
|
+
--pont-button-default-border-style: var(--pont-ref-border-style-solid);
|
|
4824
|
+
--pont-button-secondary-border-style: var(--pont-ref-border-style-solid);
|
|
4825
|
+
--pont-button-outline-border-style: var(--pont-ref-border-style-solid);
|
|
4826
|
+
--pont-button-ghost-border-style: var(--pont-ref-border-style-solid);
|
|
4827
|
+
--pont-button-destructive-border-style: var(--pont-ref-border-style-solid);
|
|
4828
|
+
--pont-button-link-border-style: var(--pont-ref-border-style-solid);
|
|
4829
|
+
|
|
4830
|
+
--pont-button-default-border-color: transparent;
|
|
4831
|
+
--pont-button-secondary-border-color: transparent;
|
|
4832
|
+
--pont-button-outline-border-color: hsl(
|
|
4833
|
+
var(--pont-sem-color-border-secondary)
|
|
4834
|
+
);
|
|
4835
|
+
--pont-button-ghost-border-color: transparent;
|
|
4836
|
+
--pont-button-destructive-border-color: transparent;
|
|
4837
|
+
--pont-button-link-border-color: transparent;
|
|
4838
|
+
|
|
4839
|
+
--pont-button-default-border-width-t: var(--pont-sem-width-border);
|
|
4840
|
+
--pont-button-default-border-width-r: var(--pont-sem-width-border);
|
|
4841
|
+
--pont-button-default-border-width-b: var(--pont-sem-width-border);
|
|
4842
|
+
--pont-button-default-border-width-l: var(--pont-sem-width-border);
|
|
4843
|
+
|
|
4844
|
+
--pont-button-secondary-border-width-t: var(--pont-sem-width-border);
|
|
4845
|
+
--pont-button-secondary-border-width-r: var(--pont-sem-width-border);
|
|
4846
|
+
--pont-button-secondary-border-width-b: var(--pont-sem-width-border);
|
|
4847
|
+
--pont-button-secondary-border-width-l: var(--pont-sem-width-border);
|
|
4848
|
+
|
|
4849
|
+
--pont-button-outline-border-width-t: var(--pont-sem-width-border);
|
|
4850
|
+
--pont-button-outline-border-width-r: var(--pont-sem-width-border);
|
|
4851
|
+
--pont-button-outline-border-width-b: var(--pont-sem-width-border);
|
|
4852
|
+
--pont-button-outline-border-width-l: var(--pont-sem-width-border);
|
|
4853
|
+
|
|
4854
|
+
--pont-button-ghost-border-width-t: var(--pont-sem-width-border);
|
|
4855
|
+
--pont-button-ghost-border-width-r: var(--pont-sem-width-border);
|
|
4856
|
+
--pont-button-ghost-border-width-b: var(--pont-sem-width-border);
|
|
4857
|
+
--pont-button-ghost-border-width-l: var(--pont-sem-width-border);
|
|
4858
|
+
|
|
4859
|
+
--pont-button-destructive-border-width-t: var(--pont-sem-width-border);
|
|
4860
|
+
--pont-button-destructive-border-width-r: var(--pont-sem-width-border);
|
|
4861
|
+
--pont-button-destructive-border-width-b: var(--pont-sem-width-border);
|
|
4862
|
+
--pont-button-destructive-border-width-l: var(--pont-sem-width-border);
|
|
4863
|
+
|
|
4864
|
+
--pont-button-link-border-width-t: var(--pont-sem-width-border);
|
|
4865
|
+
--pont-button-link-border-width-r: var(--pont-sem-width-border);
|
|
4866
|
+
--pont-button-link-border-width-b: var(--pont-sem-width-border);
|
|
4867
|
+
--pont-button-link-border-width-l: var(--pont-sem-width-border);
|
|
4868
|
+
--pont-button-secondary-outline-w: 0px;
|
|
4869
|
+
--pont-button-outline-outline-w: 0px;
|
|
4870
|
+
--pont-button-ghost-outline-w: 0px;
|
|
4871
|
+
--pont-button-destructive-outline-w: 0px;
|
|
4872
|
+
--pont-button-link-outline-w: 0px;
|
|
4873
|
+
--pont-button-default-outline-w: 0px;
|
|
4874
|
+
|
|
4875
|
+
--pont-button-default-outline-color: transparent;
|
|
4876
|
+
--pont-button-secondary-outline-color: transparent;
|
|
4877
|
+
--pont-button-outline-outline-color: transparent;
|
|
4878
|
+
--pont-button-ghost-outline-color: transparent;
|
|
4879
|
+
--pont-button-destructive-outline-color: transparent;
|
|
4880
|
+
--pont-button-link-outline-color: transparent;
|
|
4881
|
+
|
|
4882
|
+
--pont-button-default-outline-style: var(
|
|
4883
|
+
--pont-ref-border-outline-style-none
|
|
4884
|
+
);
|
|
4885
|
+
--pont-button-secondary-outline-style: var(
|
|
4886
|
+
--pont-ref-border-outline-style-none
|
|
4887
|
+
);
|
|
4888
|
+
--pont-button-outline-outline-style: var(
|
|
4889
|
+
--pont-ref-border-outline-style-none
|
|
4890
|
+
);
|
|
4891
|
+
--pont-button-ghost-outline-style: var(--pont-ref-border-outline-style-none);
|
|
4892
|
+
--pont-button-destructive-outline-style: var(
|
|
4893
|
+
--pont-ref-border-outline-style-none
|
|
4894
|
+
);
|
|
4895
|
+
--pont-button-link-outline-style: var(--pont-ref-border-outline-style-none);
|
|
4896
|
+
|
|
4897
|
+
--pont-button-default-outline-offset: 0px;
|
|
4898
|
+
--pont-button-secondary-outline-offset: 0px;
|
|
4899
|
+
--pont-button-outline-outline-offset: 0px;
|
|
4900
|
+
--pont-button-ghost-outline-offset: 0px;
|
|
4901
|
+
--pont-button-destructive-outline-offset: 0px;
|
|
4902
|
+
--pont-button-link-outline-offset: 0px;
|
|
4903
|
+
|
|
4904
|
+
/* EFFECT */
|
|
4905
|
+
--pont-button-default-effect-shadow: var(--pont-ref-effect-shadow-none);
|
|
4906
|
+
--pont-button-secondary-effect-shadow: var(--pont-ref-effect-shadow-none);
|
|
4907
|
+
--pont-button-outline-effect-shadow: var(--pont-ref-effect-shadow-none);
|
|
4908
|
+
--pont-button-ghost-effect-shadow: var(--pont-ref-effect-shadow-none);
|
|
4909
|
+
--pont-button-destructive-effect-shadow: var(--pont-ref-effect-shadow-none);
|
|
4910
|
+
--pont-button-link-effect-shadow: var(--pont-ref-effect-shadow-none);
|
|
4911
|
+
|
|
4912
|
+
--pont-button-default-effect-inset-shadow: inset
|
|
4913
|
+
var(--pont-ref-effect-shadow-none);
|
|
4914
|
+
--pont-button-secondary-effect-inset-shadow: inset
|
|
4915
|
+
var(--pont-ref-effect-shadow-none);
|
|
4916
|
+
--pont-button-outline-effect-inset-shadow: inset
|
|
4917
|
+
var(--pont-ref-effect-shadow-none);
|
|
4918
|
+
--pont-button-ghost-effect-inset-shadow: inset
|
|
4919
|
+
var(--pont-ref-effect-shadow-none);
|
|
4920
|
+
--pont-button-destructive-effect-inset-shadow: inset
|
|
4921
|
+
var(--pont-ref-effect-shadow-none);
|
|
4922
|
+
--pont-button-link-effect-inset-shadow: inset
|
|
4923
|
+
var(--pont-ref-effect-shadow-none);
|
|
4924
|
+
|
|
4925
|
+
--pont-button-default-effect-inset-ring: inset
|
|
4926
|
+
var(--pont-ref-effect-shadow-none);
|
|
4927
|
+
--pont-button-secondary-effect-inset-ring: inset
|
|
4928
|
+
var(--pont-ref-effect-shadow-none);
|
|
4929
|
+
--pont-button-outline-effect-inset-ring: inset
|
|
4930
|
+
var(--pont-ref-effect-shadow-none);
|
|
4931
|
+
--pont-button-ghost-effect-inset-ring: inset
|
|
4932
|
+
var(--pont-ref-effect-shadow-none);
|
|
4933
|
+
--pont-button-destructive-effect-inset-ring: inset
|
|
4934
|
+
var(--pont-ref-effect-shadow-none);
|
|
4935
|
+
--pont-button-link-effect-inset-ring: inset var(--pont-ref-effect-shadow-none);
|
|
4936
|
+
|
|
4937
|
+
--pont-button-default-effect-ring-offset-w: 0px;
|
|
4938
|
+
--pont-button-secondary-effect-ring-offset-w: 0px;
|
|
4939
|
+
--pont-button-outline-effect-ring-offset-w: 0px;
|
|
4940
|
+
--pont-button-ghost-effect-ring-offset-w: 0px;
|
|
4941
|
+
--pont-button-destructive-effect-ring-offset-w: 0px;
|
|
4942
|
+
--pont-button-link-effect-ring-offset-w: 0px;
|
|
4943
|
+
|
|
4944
|
+
--pont-button-default-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
|
|
4945
|
+
--pont-button-secondary-effect-ring-offset-color: hsl(
|
|
4946
|
+
var(--pont-sem-color-bg)
|
|
4947
|
+
);
|
|
4948
|
+
--pont-button-outline-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
|
|
4949
|
+
--pont-button-ghost-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
|
|
4950
|
+
--pont-button-destructive-effect-ring-offset-color: hsl(
|
|
4951
|
+
var(--pont-sem-color-bg)
|
|
4952
|
+
);
|
|
4953
|
+
--pont-button-link-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
|
|
4954
|
+
|
|
4955
|
+
--pont-button-default-effect-ring-offset: 0 0 0
|
|
4956
|
+
var(--pont-button-default-effect-ring-offset-w)
|
|
4957
|
+
var(--pont-button-default-effect-ring-offset-color);
|
|
4958
|
+
--pont-button-secondary-effect-ring-offset: 0 0 0
|
|
4959
|
+
var(--pont-button-secondary-effect-ring-offset-w)
|
|
4960
|
+
var(--pont-button-secondary-effect-ring-offset-color);
|
|
4961
|
+
--pont-button-outline-effect-ring-offset: 0 0 0
|
|
4962
|
+
var(--pont-button-outline-effect-ring-offset-w)
|
|
4963
|
+
var(--pont-button-outline-effect-ring-offset-color);
|
|
4964
|
+
--pont-button-ghost-effect-ring-offset: 0 0 0
|
|
4965
|
+
var(--pont-button-ghost-effect-ring-offset-w)
|
|
4966
|
+
var(--pont-button-ghost-effect-ring-offset-color);
|
|
4967
|
+
--pont-button-destructive-effect-ring-offset: 0 0 0
|
|
4968
|
+
var(--pont-button-destructive-effect-ring-offset-w)
|
|
4969
|
+
var(--pont-button-destructive-effect-ring-offset-color);
|
|
4970
|
+
--pont-button-link-effect-ring-offset: 0 0 0
|
|
4971
|
+
var(--pont-button-link-effect-ring-offset-w)
|
|
4972
|
+
var(--pont-button-link-effect-ring-offset-color);
|
|
4973
|
+
|
|
4974
|
+
--pont-button-default-effect-ring-w: 0px;
|
|
4975
|
+
--pont-button-secondary-effect-ring-w: 0px;
|
|
4976
|
+
--pont-button-outline-effect-ring-w: 0px;
|
|
4977
|
+
--pont-button-ghost-effect-ring-w: 0px;
|
|
4978
|
+
--pont-button-destructive-effect-ring-w: 0px;
|
|
4979
|
+
--pont-button-link-effect-ring-w: 0px;
|
|
4980
|
+
|
|
4981
|
+
--pont-button-default-effect-ring-color: transparent;
|
|
4982
|
+
--pont-button-secondary-effect-ring-color: transparent;
|
|
4983
|
+
--pont-button-outline-effect-ring-color: transparent;
|
|
4984
|
+
--pont-button-ghost-effect-ring-color: transparent;
|
|
4985
|
+
--pont-button-destructive-effect-ring-color: transparent;
|
|
4986
|
+
--pont-button-link-effect-ring-color: transparent;
|
|
4987
|
+
|
|
4988
|
+
--pont-button-default-effect-ring: 0 0 0
|
|
4989
|
+
calc(
|
|
4990
|
+
var(--pont-button-default-effect-ring-w) +
|
|
4991
|
+
var(--pont-button-default-effect-ring-offset-w)
|
|
4992
|
+
)
|
|
4993
|
+
var(--pont-button-default-effect-ring-color);
|
|
4994
|
+
--pont-button-secondary-effect-ring: 0 0 0
|
|
4995
|
+
calc(
|
|
4996
|
+
var(--pont-button-secondary-effect-ring-w) +
|
|
4997
|
+
var(--pont-button-secondary-effect-ring-offset-w)
|
|
4998
|
+
)
|
|
4999
|
+
var(--pont-button-secondary-effect-ring-color);
|
|
5000
|
+
--pont-button-outline-effect-ring: 0 0 0
|
|
5001
|
+
calc(
|
|
5002
|
+
var(--pont-button-outline-effect-ring-w) +
|
|
5003
|
+
var(--pont-button-outline-effect-ring-offset-w)
|
|
5004
|
+
)
|
|
5005
|
+
var(--pont-button-outline-effect-ring-color);
|
|
5006
|
+
--pont-button-ghost-effect-ring: 0 0 0
|
|
5007
|
+
calc(
|
|
5008
|
+
var(--pont-button-ghost-effect-ring-w) +
|
|
5009
|
+
var(--pont-button-ghost-effect-ring-offset-w)
|
|
5010
|
+
)
|
|
5011
|
+
var(--pont-button-ghost-effect-ring-color);
|
|
5012
|
+
--pont-button-destructive-effect-ring: 0 0 0
|
|
5013
|
+
calc(
|
|
5014
|
+
var(--pont-button-destructive-effect-ring-w) +
|
|
5015
|
+
var(--pont-button-destructive-effect-ring-offset-w)
|
|
5016
|
+
)
|
|
5017
|
+
var(--pont-button-destructive-effect-ring-color);
|
|
5018
|
+
--pont-button-link-effect-ring: 0 0 0
|
|
5019
|
+
calc(
|
|
5020
|
+
var(--pont-button-link-effect-ring-w) +
|
|
5021
|
+
var(--pont-button-link-effect-ring-offset-w)
|
|
5022
|
+
)
|
|
5023
|
+
var(--pont-button-link-effect-ring-color);
|
|
5024
|
+
}
|
|
5025
|
+
|
|
5026
|
+
/* * -------- STATES -------- * */
|
|
5027
|
+
|
|
5028
|
+
/* * EXPANDED * */
|
|
5029
|
+
|
|
5030
|
+
:root {
|
|
5031
|
+
/* TYPOGRAPHY */
|
|
5032
|
+
--pont-button-default-typography-color-expanded: var(
|
|
5033
|
+
--pont-button-default-typography-color
|
|
5034
|
+
);
|
|
5035
|
+
--pont-button-secondary-typography-color-expanded: var(
|
|
5036
|
+
--pont-button-secondary-typography-color
|
|
5037
|
+
);
|
|
5038
|
+
--pont-button-outline-typography-color-expanded: var(
|
|
5039
|
+
--pont-button-outline-typography-color
|
|
5040
|
+
);
|
|
5041
|
+
--pont-button-ghost-typography-color-expanded: var(
|
|
5042
|
+
--pont-button-ghost-typography-color
|
|
5043
|
+
);
|
|
5044
|
+
--pont-button-destructive-typography-color-expanded: var(
|
|
5045
|
+
--pont-button-destructive-typography-color
|
|
5046
|
+
);
|
|
5047
|
+
--pont-button-link-typography-color-expanded: var(
|
|
5048
|
+
--pont-button-link-typography-color
|
|
5049
|
+
);
|
|
5050
|
+
|
|
5051
|
+
/* BACKGROUND */
|
|
5052
|
+
--pont-button-default-bg-color-expanded: var(--pont-button-default-bg-color);
|
|
5053
|
+
--pont-button-secondary-bg-color-expanded: var(
|
|
5054
|
+
--pont-button-secondary-bg-color
|
|
5055
|
+
);
|
|
5056
|
+
--pont-button-outline-bg-color-expanded: hsl(
|
|
5057
|
+
var(--pont-sem-color-bg-fill-secondary)
|
|
5058
|
+
);
|
|
5059
|
+
--pont-button-ghost-bg-color-expanded: hsl(
|
|
5060
|
+
var(--pont-sem-color-bg-fill-secondary)
|
|
5061
|
+
);
|
|
5062
|
+
--pont-button-destructive-bg-color-expanded: hsl(
|
|
5063
|
+
var(--pont-sem-color-bg-fill-destructive-secondary-hover)
|
|
5064
|
+
);
|
|
5065
|
+
--pont-button-link-bg-color-expanded: var(--pont-button-link-bg-color);
|
|
5066
|
+
}
|
|
5067
|
+
|
|
5068
|
+
/* * HOVER * */
|
|
5069
|
+
|
|
5070
|
+
:root {
|
|
5071
|
+
/* TYPOGRAPHY */
|
|
5072
|
+
--pont-button-default-typography-color-hover: var(
|
|
5073
|
+
--pont-button-default-typography-color
|
|
5074
|
+
);
|
|
5075
|
+
--pont-button-secondary-typography-color-hover: var(
|
|
5076
|
+
--pont-button-secondary-typography-color
|
|
5077
|
+
);
|
|
5078
|
+
--pont-button-outline-typography-color-hover: var(
|
|
5079
|
+
--pont-button-outline-typography-color
|
|
5080
|
+
);
|
|
5081
|
+
--pont-button-ghost-typography-color-hover: var(
|
|
5082
|
+
--pont-button-ghost-typography-color
|
|
5083
|
+
);
|
|
5084
|
+
--pont-button-destructive-typography-color-hover: var(
|
|
5085
|
+
--pont-button-destructive-typography-color
|
|
5086
|
+
);
|
|
5087
|
+
--pont-button-link-typography-color-hover: var(
|
|
5088
|
+
--pont-button-link-typography-color
|
|
5089
|
+
);
|
|
5090
|
+
|
|
5091
|
+
--pont-button-link-typography-decoration-line-hover: var(
|
|
5092
|
+
--pont-ref-typography-decoration-line-underline
|
|
5093
|
+
);
|
|
5094
|
+
--pont-button-link-typography-decoration-color-hover: var(
|
|
5095
|
+
--pont-sem-typography-decoration-color-default
|
|
5096
|
+
);
|
|
5097
|
+
--pont-button-link-typography-decoration-style-hover: var(
|
|
5098
|
+
--pont-sem-typography-decoration-style-default
|
|
5099
|
+
);
|
|
5100
|
+
--pont-button-link-typography-decoration-thickness-hover: var(
|
|
5101
|
+
--pont-sem-typography-decoration-thickness-default
|
|
5102
|
+
);
|
|
5103
|
+
--pont-button-link-typography-underline-offset-hover: 4px;
|
|
5104
|
+
|
|
5105
|
+
/* BACKGROUND */
|
|
5106
|
+
--pont-button-default-bg-color-hover: hsl(
|
|
5107
|
+
var(--pont-sem-color-bg-fill-brand) / 80%
|
|
5108
|
+
);
|
|
5109
|
+
--pont-button-secondary-bg-color-hover: color-mix(
|
|
5110
|
+
in oklch,
|
|
5111
|
+
hsl(var(--pont-sem-color-bg-fill-secondary)),
|
|
5112
|
+
hsl(var(--pont-sem-color-text)) 5%
|
|
5113
|
+
);
|
|
5114
|
+
--pont-button-outline-bg-color-hover: hsl(
|
|
5115
|
+
var(--pont-sem-color-bg-fill-tertiary-hover)
|
|
5116
|
+
);
|
|
5117
|
+
--pont-button-ghost-bg-color-hover: hsl(
|
|
5118
|
+
var(--pont-sem-color-bg-fill-transparent-hover)
|
|
5119
|
+
);
|
|
5120
|
+
--pont-button-destructive-bg-color-hover: hsl(
|
|
5121
|
+
var(--pont-sem-color-bg-fill-destructive-secondary-hover)
|
|
5122
|
+
);
|
|
5123
|
+
--pont-button-link-bg-color-hover: var(--pont-button-link-bg-color);
|
|
5124
|
+
}
|
|
5125
|
+
|
|
5126
|
+
/* * FOCUS * */
|
|
5127
|
+
|
|
5128
|
+
:root {
|
|
5129
|
+
/* BORDER */
|
|
5130
|
+
--pont-button-default-border-style-focus: var(--pont-ref-border-style-solid);
|
|
5131
|
+
--pont-button-secondary-border-style-focus: var(
|
|
5132
|
+
--pont-ref-border-style-solid
|
|
5133
|
+
);
|
|
5134
|
+
--pont-button-outline-border-style-focus: var(--pont-ref-border-style-solid);
|
|
5135
|
+
--pont-button-ghost-border-style-focus: var(--pont-ref-border-style-solid);
|
|
5136
|
+
--pont-button-destructive-border-style-focus: var(
|
|
5137
|
+
--pont-ref-border-style-solid
|
|
5138
|
+
);
|
|
5139
|
+
--pont-button-link-border-style-focus: var(--pont-ref-border-style-solid);
|
|
5140
|
+
|
|
5141
|
+
--pont-button-default-border-color-focus: hsl(
|
|
5142
|
+
var(--pont-sem-color-border-focus)
|
|
5143
|
+
);
|
|
5144
|
+
--pont-button-secondary-border-color-focus: hsl(
|
|
5145
|
+
var(--pont-sem-color-border-focus)
|
|
5146
|
+
);
|
|
5147
|
+
--pont-button-outline-border-color-focus: hsl(
|
|
5148
|
+
var(--pont-sem-color-border-focus)
|
|
5149
|
+
);
|
|
5150
|
+
--pont-button-ghost-border-color-focus: hsl(
|
|
5151
|
+
var(--pont-sem-color-border-focus)
|
|
5152
|
+
);
|
|
5153
|
+
--pont-button-destructive-border-color-focus: hsl(
|
|
5154
|
+
var(--pont-sem-color-border-destructive-focus)
|
|
5155
|
+
);
|
|
5156
|
+
--pont-button-link-border-color-focus: hsl(
|
|
5157
|
+
var(--pont-sem-color-border-focus)
|
|
5158
|
+
);
|
|
5159
|
+
|
|
5160
|
+
--pont-button-default-border-width-t-focus: var(--pont-sem-width-border);
|
|
5161
|
+
--pont-button-default-border-width-r-focus: var(--pont-sem-width-border);
|
|
5162
|
+
--pont-button-default-border-width-b-focus: var(--pont-sem-width-border);
|
|
5163
|
+
--pont-button-default-border-width-l-focus: var(--pont-sem-width-border);
|
|
5164
|
+
|
|
5165
|
+
--pont-button-secondary-border-width-t-focus: var(--pont-sem-width-border);
|
|
5166
|
+
--pont-button-secondary-border-width-r-focus: var(--pont-sem-width-border);
|
|
5167
|
+
--pont-button-secondary-border-width-b-focus: var(--pont-sem-width-border);
|
|
5168
|
+
--pont-button-secondary-border-width-l-focus: var(--pont-sem-width-border);
|
|
5169
|
+
|
|
5170
|
+
--pont-button-outline-border-width-t-focus: var(--pont-sem-width-border);
|
|
5171
|
+
--pont-button-outline-border-width-r-focus: var(--pont-sem-width-border);
|
|
5172
|
+
--pont-button-outline-border-width-b-focus: var(--pont-sem-width-border);
|
|
5173
|
+
--pont-button-outline-border-width-l-focus: var(--pont-sem-width-border);
|
|
5174
|
+
|
|
5175
|
+
--pont-button-ghost-border-width-t-focus: var(--pont-sem-width-border);
|
|
5176
|
+
--pont-button-ghost-border-width-r-focus: var(--pont-sem-width-border);
|
|
5177
|
+
--pont-button-ghost-border-width-b-focus: var(--pont-sem-width-border);
|
|
5178
|
+
--pont-button-ghost-border-width-l-focus: var(--pont-sem-width-border);
|
|
5179
|
+
|
|
5180
|
+
--pont-button-destructive-border-width-t-focus: var(--pont-sem-width-border);
|
|
5181
|
+
--pont-button-destructive-border-width-r-focus: var(--pont-sem-width-border);
|
|
5182
|
+
--pont-button-destructive-border-width-b-focus: var(--pont-sem-width-border);
|
|
5183
|
+
--pont-button-destructive-border-width-l-focus: var(--pont-sem-width-border);
|
|
5184
|
+
|
|
5185
|
+
--pont-button-link-border-width-t-focus: var(--pont-sem-width-border);
|
|
5186
|
+
--pont-button-link-border-width-r-focus: var(--pont-sem-width-border);
|
|
5187
|
+
--pont-button-link-border-width-b-focus: var(--pont-sem-width-border);
|
|
5188
|
+
--pont-button-link-border-width-l-focus: var(--pont-sem-width-border);
|
|
5189
|
+
|
|
5190
|
+
--pont-button-default-outline-w-focus: 0px;
|
|
5191
|
+
--pont-button-secondary-outline-w-focus: 0px;
|
|
5192
|
+
--pont-button-outline-outline-w-focus: 0px;
|
|
5193
|
+
--pont-button-ghost-outline-w-focus: 0px;
|
|
5194
|
+
--pont-button-destructive-outline-w-focus: 0px;
|
|
5195
|
+
--pont-button-link-outline-w-focus: 0px;
|
|
5196
|
+
|
|
5197
|
+
--pont-button-default-outline-color-focus: transparent;
|
|
5198
|
+
--pont-button-secondary-outline-color-focus: transparent;
|
|
5199
|
+
--pont-button-outline-outline-color-focus: transparent;
|
|
5200
|
+
--pont-button-ghost-outline-color-focus: transparent;
|
|
5201
|
+
--pont-button-destructive-outline-color-focus: transparent;
|
|
5202
|
+
--pont-button-link-outline-color-focus: transparent;
|
|
5203
|
+
|
|
5204
|
+
--pont-button-default-outline-style-focus: var(
|
|
5205
|
+
--pont-ref-border-outline-style-none
|
|
5206
|
+
);
|
|
5207
|
+
--pont-button-secondary-outline-style-focus: var(
|
|
5208
|
+
--pont-ref-border-outline-style-none
|
|
5209
|
+
);
|
|
5210
|
+
--pont-button-outline-outline-style-focus: var(
|
|
5211
|
+
--pont-ref-border-outline-style-none
|
|
5212
|
+
);
|
|
5213
|
+
--pont-button-ghost-outline-style-focus: var(
|
|
5214
|
+
--pont-ref-border-outline-style-none
|
|
5215
|
+
);
|
|
5216
|
+
--pont-button-destructive-outline-style-focus: var(
|
|
5217
|
+
--pont-ref-border-outline-style-none
|
|
5218
|
+
);
|
|
5219
|
+
--pont-button-link-outline-style-focus: var(
|
|
5220
|
+
--pont-ref-border-outline-style-none
|
|
5221
|
+
);
|
|
5222
|
+
|
|
5223
|
+
--pont-button-default-outline-offset-focus: 0px;
|
|
5224
|
+
--pont-button-secondary-outline-offset-focus: 0px;
|
|
5225
|
+
--pont-button-outline-outline-offset-focus: 0px;
|
|
5226
|
+
--pont-button-ghost-outline-offset-focus: 0px;
|
|
5227
|
+
--pont-button-destructive-outline-offset-focus: 0px;
|
|
5228
|
+
--pont-button-link-outline-offset-focus: 0px;
|
|
5229
|
+
|
|
5230
|
+
/* EFFECT */
|
|
5231
|
+
--pont-button-default-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
|
|
5232
|
+
--pont-button-secondary-effect-shadow-focus: var(
|
|
5233
|
+
--pont-ref-effect-shadow-none
|
|
5234
|
+
);
|
|
5235
|
+
--pont-button-outline-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
|
|
5236
|
+
--pont-button-ghost-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
|
|
5237
|
+
--pont-button-destructive-effect-shadow-focus: var(
|
|
5238
|
+
--pont-ref-effect-shadow-none
|
|
5239
|
+
);
|
|
5240
|
+
--pont-button-link-effect-shadow-focus: var(--pont-ref-effect-shadow-none);
|
|
5241
|
+
|
|
5242
|
+
--pont-button-default-effect-inset-shadow-focus: inset
|
|
5243
|
+
var(--pont-ref-effect-shadow-none);
|
|
5244
|
+
--pont-button-secondary-effect-inset-shadow-focus: inset
|
|
5245
|
+
var(--pont-ref-effect-shadow-none);
|
|
5246
|
+
--pont-button-outline-effect-inset-shadow-focus: inset
|
|
5247
|
+
var(--pont-ref-effect-shadow-none);
|
|
5248
|
+
--pont-button-ghost-effect-inset-shadow-focus: inset
|
|
5249
|
+
var(--pont-ref-effect-shadow-none);
|
|
5250
|
+
--pont-button-destructive-effect-inset-shadow-focus: inset
|
|
5251
|
+
var(--pont-ref-effect-shadow-none);
|
|
5252
|
+
--pont-button-link-effect-inset-shadow-focus: inset
|
|
5253
|
+
var(--pont-ref-effect-shadow-none);
|
|
5254
|
+
|
|
5255
|
+
--pont-button-default-effect-inset-ring-focus: inset
|
|
5256
|
+
var(--pont-ref-effect-shadow-none);
|
|
5257
|
+
--pont-button-secondary-effect-inset-ring-focus: inset
|
|
5258
|
+
var(--pont-ref-effect-shadow-none);
|
|
5259
|
+
--pont-button-outline-effect-inset-ring-focus: inset
|
|
5260
|
+
var(--pont-ref-effect-shadow-none);
|
|
5261
|
+
--pont-button-ghost-effect-inset-ring-focus: inset
|
|
5262
|
+
var(--pont-ref-effect-shadow-none);
|
|
5263
|
+
--pont-button-destructive-effect-inset-ring-focus: inset
|
|
5264
|
+
var(--pont-ref-effect-shadow-none);
|
|
5265
|
+
--pont-button-link-effect-inset-ring-focus: inset
|
|
5266
|
+
var(--pont-ref-effect-shadow-none);
|
|
5267
|
+
|
|
5268
|
+
--pont-button-default-effect-ring-offset-w-focus: 0px;
|
|
5269
|
+
--pont-button-secondary-effect-ring-offset-w-focus: 0px;
|
|
5270
|
+
--pont-button-outline-effect-ring-offset-w-focus: 0px;
|
|
5271
|
+
--pont-button-ghost-effect-ring-offset-w-focus: 0px;
|
|
5272
|
+
--pont-button-destructive-effect-ring-offset-w-focus: 0px;
|
|
5273
|
+
--pont-button-link-effect-ring-offset-w-focus: 0px;
|
|
5274
|
+
|
|
5275
|
+
--pont-button-default-effect-ring-offset-color-focus: hsl(
|
|
5276
|
+
var(--pont-sem-color-bg)
|
|
5277
|
+
);
|
|
5278
|
+
--pont-button-secondary-effect-ring-offset-color-focus: hsl(
|
|
5279
|
+
var(--pont-sem-color-bg)
|
|
5280
|
+
);
|
|
5281
|
+
--pont-button-outline-effect-ring-offset-color-focus: hsl(
|
|
5282
|
+
var(--pont-sem-color-bg)
|
|
5283
|
+
);
|
|
5284
|
+
--pont-button-ghost-effect-ring-offset-color-focus: hsl(
|
|
5285
|
+
var(--pont-sem-color-bg)
|
|
5286
|
+
);
|
|
5287
|
+
--pont-button-destructive-effect-ring-offset-color-focus: hsl(
|
|
5288
|
+
var(--pont-sem-color-bg)
|
|
5289
|
+
);
|
|
5290
|
+
--pont-button-link-effect-ring-offset-color-focus: hsl(
|
|
5291
|
+
var(--pont-sem-color-bg)
|
|
5292
|
+
);
|
|
5293
|
+
|
|
5294
|
+
--pont-button-default-effect-ring-offset-focus: 0 0 0
|
|
5295
|
+
var(--pont-button-default-effect-ring-offset-w-focus)
|
|
5296
|
+
var(--pont-button-default-effect-ring-offset-color-focus);
|
|
5297
|
+
--pont-button-secondary-effect-ring-offset-focus: 0 0 0
|
|
5298
|
+
var(--pont-button-secondary-effect-ring-offset-w-focus)
|
|
5299
|
+
var(--pont-button-secondary-effect-ring-offset-color-focus);
|
|
5300
|
+
--pont-button-outline-effect-ring-offset-focus: 0 0 0
|
|
5301
|
+
var(--pont-button-outline-effect-ring-offset-w-focus)
|
|
5302
|
+
var(--pont-button-outline-effect-ring-offset-color-focus);
|
|
5303
|
+
--pont-button-ghost-effect-ring-offset-focus: 0 0 0
|
|
5304
|
+
var(--pont-button-ghost-effect-ring-offset-w-focus)
|
|
5305
|
+
var(--pont-button-ghost-effect-ring-offset-color-focus);
|
|
5306
|
+
--pont-button-destructive-effect-ring-offset-focus: 0 0 0
|
|
5307
|
+
var(--pont-button-destructive-effect-ring-offset-w-focus)
|
|
5308
|
+
var(--pont-button-destructive-effect-ring-offset-color-focus);
|
|
5309
|
+
--pont-button-link-effect-ring-offset-focus: 0 0 0
|
|
5310
|
+
var(--pont-button-link-effect-ring-offset-w-focus)
|
|
5311
|
+
var(--pont-button-link-effect-ring-offset-color-focus);
|
|
5312
|
+
|
|
5313
|
+
--pont-button-default-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
|
|
5314
|
+
--pont-button-secondary-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
|
|
5315
|
+
--pont-button-outline-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
|
|
5316
|
+
--pont-button-ghost-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
|
|
5317
|
+
--pont-button-destructive-effect-ring-w-focus: var(
|
|
5318
|
+
--pont-sem-width-ring-focus
|
|
5319
|
+
);
|
|
5320
|
+
--pont-button-link-effect-ring-w-focus: var(--pont-sem-width-ring-focus);
|
|
5321
|
+
|
|
5322
|
+
--pont-button-default-effect-ring-color-focus: hsl(
|
|
5323
|
+
var(--pont-sem-color-ring-focus)
|
|
5324
|
+
);
|
|
5325
|
+
--pont-button-secondary-effect-ring-color-focus: hsl(
|
|
5326
|
+
var(--pont-sem-color-ring-focus)
|
|
5327
|
+
);
|
|
5328
|
+
--pont-button-outline-effect-ring-color-focus: hsl(
|
|
5329
|
+
var(--pont-sem-color-ring-focus)
|
|
5330
|
+
);
|
|
5331
|
+
--pont-button-ghost-effect-ring-color-focus: hsl(
|
|
5332
|
+
var(--pont-sem-color-ring-focus)
|
|
5333
|
+
);
|
|
5334
|
+
--pont-button-destructive-effect-ring-color-focus: hsl(
|
|
5335
|
+
var(--pont-sem-color-ring-destructive)
|
|
5336
|
+
);
|
|
5337
|
+
--pont-button-link-effect-ring-color-focus: hsl(
|
|
5338
|
+
var(--pont-sem-color-ring-focus)
|
|
5339
|
+
);
|
|
5340
|
+
|
|
5341
|
+
--pont-button-default-effect-ring-focus: 0 0 0
|
|
5342
|
+
calc(
|
|
5343
|
+
var(--pont-button-default-effect-ring-w-focus) +
|
|
5344
|
+
var(--pont-button-default-effect-ring-offset-w-focus)
|
|
5345
|
+
)
|
|
5346
|
+
var(--pont-button-default-effect-ring-color-focus);
|
|
5347
|
+
--pont-button-secondary-effect-ring-focus: 0 0 0
|
|
5348
|
+
calc(
|
|
5349
|
+
var(--pont-button-secondary-effect-ring-w-focus) +
|
|
5350
|
+
var(--pont-button-secondary-effect-ring-offset-w-focus)
|
|
5351
|
+
)
|
|
5352
|
+
var(--pont-button-secondary-effect-ring-color-focus);
|
|
5353
|
+
--pont-button-outline-effect-ring-focus: 0 0 0
|
|
5354
|
+
calc(
|
|
5355
|
+
var(--pont-button-outline-effect-ring-w-focus) +
|
|
5356
|
+
var(--pont-button-outline-effect-ring-offset-w-focus)
|
|
5357
|
+
)
|
|
5358
|
+
var(--pont-button-outline-effect-ring-color-focus);
|
|
5359
|
+
--pont-button-ghost-effect-ring-focus: 0 0 0
|
|
5360
|
+
calc(
|
|
5361
|
+
var(--pont-button-ghost-effect-ring-w-focus) +
|
|
5362
|
+
var(--pont-button-ghost-effect-ring-offset-w-focus)
|
|
5363
|
+
)
|
|
5364
|
+
var(--pont-button-ghost-effect-ring-color-focus);
|
|
5365
|
+
--pont-button-destructive-effect-ring-focus: 0 0 0
|
|
5366
|
+
calc(
|
|
5367
|
+
var(--pont-button-destructive-effect-ring-w-focus) +
|
|
5368
|
+
var(--pont-button-destructive-effect-ring-offset-w-focus)
|
|
5369
|
+
)
|
|
5370
|
+
var(--pont-button-destructive-effect-ring-color-focus);
|
|
5371
|
+
--pont-button-link-effect-ring-focus: 0 0 0
|
|
5372
|
+
calc(
|
|
5373
|
+
var(--pont-button-link-effect-ring-w-focus) +
|
|
5374
|
+
var(--pont-button-link-effect-ring-offset-w-focus)
|
|
5375
|
+
)
|
|
5376
|
+
var(--pont-button-link-effect-ring-color-focus);
|
|
5377
|
+
}
|
|
5378
|
+
|
|
5379
|
+
/* * DISABLED * */
|
|
5380
|
+
|
|
5381
|
+
:root {
|
|
5382
|
+
/* EFFECT */
|
|
5383
|
+
--pont-button-default-effect-opacity-disabled: var(
|
|
5384
|
+
--pont-sem-opacity-disabled
|
|
5385
|
+
);
|
|
5386
|
+
--pont-button-secondary-effect-opacity-disabled: var(
|
|
5387
|
+
--pont-sem-opacity-disabled
|
|
5388
|
+
);
|
|
5389
|
+
--pont-button-outline-effect-opacity-disabled: var(
|
|
5390
|
+
--pont-sem-opacity-disabled
|
|
5391
|
+
);
|
|
5392
|
+
--pont-button-ghost-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
|
|
5393
|
+
--pont-button-destructive-effect-opacity-disabled: var(
|
|
5394
|
+
--pont-sem-opacity-disabled
|
|
5395
|
+
);
|
|
5396
|
+
--pont-button-link-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
|
|
5397
|
+
}
|
|
5398
|
+
|
|
5399
|
+
/* * INVALID * */
|
|
5400
|
+
|
|
5401
|
+
:root {
|
|
5402
|
+
/* BORDER */
|
|
5403
|
+
--pont-button-default-border-style-invalid: var(
|
|
5404
|
+
--pont-ref-border-style-solid
|
|
5405
|
+
);
|
|
5406
|
+
--pont-button-secondary-border-style-invalid: var(
|
|
5407
|
+
--pont-ref-border-style-solid
|
|
5408
|
+
);
|
|
5409
|
+
--pont-button-outline-border-style-invalid: var(
|
|
5410
|
+
--pont-ref-border-style-solid
|
|
5411
|
+
);
|
|
5412
|
+
--pont-button-ghost-border-style-invalid: var(--pont-ref-border-style-solid);
|
|
5413
|
+
--pont-button-destructive-border-style-invalid: var(
|
|
5414
|
+
--pont-ref-border-style-solid
|
|
5415
|
+
);
|
|
5416
|
+
--pont-button-link-border-style-invalid: var(--pont-ref-border-style-solid);
|
|
5417
|
+
|
|
5418
|
+
--pont-button-default-border-color-invalid: hsl(
|
|
5419
|
+
var(--pont-sem-color-border-invalid-secondary)
|
|
5420
|
+
);
|
|
5421
|
+
--pont-button-secondary-border-color-invalid: hsl(
|
|
5422
|
+
var(--pont-sem-color-border-invalid-secondary)
|
|
5423
|
+
);
|
|
5424
|
+
--pont-button-outline-border-color-invalid: hsl(
|
|
5425
|
+
var(--pont-sem-color-border-invalid-secondary)
|
|
5426
|
+
);
|
|
5427
|
+
--pont-button-ghost-border-color-invalid: hsl(
|
|
5428
|
+
var(--pont-sem-color-border-invalid-secondary)
|
|
5429
|
+
);
|
|
5430
|
+
--pont-button-destructive-border-color-invalid: hsl(
|
|
5431
|
+
var(--pont-sem-color-border-invalid-secondary)
|
|
5432
|
+
);
|
|
5433
|
+
--pont-button-link-border-color-invalid: hsl(
|
|
5434
|
+
var(--pont-sem-color-border-invalid-secondary)
|
|
5435
|
+
);
|
|
5436
|
+
|
|
5437
|
+
--pont-button-default-border-width-t-invalid: var(--pont-sem-width-border);
|
|
5438
|
+
--pont-button-default-border-width-r-invalid: var(--pont-sem-width-border);
|
|
5439
|
+
--pont-button-default-border-width-b-invalid: var(--pont-sem-width-border);
|
|
5440
|
+
--pont-button-default-border-width-l-invalid: var(--pont-sem-width-border);
|
|
5441
|
+
|
|
5442
|
+
--pont-button-secondary-border-width-t-invalid: var(--pont-sem-width-border);
|
|
5443
|
+
--pont-button-secondary-border-width-r-invalid: var(--pont-sem-width-border);
|
|
5444
|
+
--pont-button-secondary-border-width-b-invalid: var(--pont-sem-width-border);
|
|
5445
|
+
--pont-button-secondary-border-width-l-invalid: var(--pont-sem-width-border);
|
|
5446
|
+
|
|
5447
|
+
--pont-button-outline-border-width-t-invalid: var(--pont-sem-width-border);
|
|
5448
|
+
--pont-button-outline-border-width-r-invalid: var(--pont-sem-width-border);
|
|
5449
|
+
--pont-button-outline-border-width-b-invalid: var(--pont-sem-width-border);
|
|
5450
|
+
--pont-button-outline-border-width-l-invalid: var(--pont-sem-width-border);
|
|
5451
|
+
|
|
5452
|
+
--pont-button-ghost-border-width-t-invalid: var(--pont-sem-width-border);
|
|
5453
|
+
--pont-button-ghost-border-width-r-invalid: var(--pont-sem-width-border);
|
|
5454
|
+
--pont-button-ghost-border-width-b-invalid: var(--pont-sem-width-border);
|
|
5455
|
+
--pont-button-ghost-border-width-l-invalid: var(--pont-sem-width-border);
|
|
5456
|
+
|
|
5457
|
+
--pont-button-destructive-border-width-t-invalid: var(
|
|
5458
|
+
--pont-sem-width-border
|
|
5459
|
+
);
|
|
5460
|
+
--pont-button-destructive-border-width-r-invalid: var(
|
|
5461
|
+
--pont-sem-width-border
|
|
5462
|
+
);
|
|
5463
|
+
--pont-button-destructive-border-width-b-invalid: var(
|
|
5464
|
+
--pont-sem-width-border
|
|
5465
|
+
);
|
|
5466
|
+
--pont-button-destructive-border-width-l-invalid: var(
|
|
5467
|
+
--pont-sem-width-border
|
|
5468
|
+
);
|
|
5469
|
+
|
|
5470
|
+
--pont-button-link-border-width-t-invalid: var(--pont-sem-width-border);
|
|
5471
|
+
--pont-button-link-border-width-r-invalid: var(--pont-sem-width-border);
|
|
5472
|
+
--pont-button-link-border-width-b-invalid: var(--pont-sem-width-border);
|
|
5473
|
+
--pont-button-link-border-width-l-invalid: var(--pont-sem-width-border);
|
|
5474
|
+
|
|
5475
|
+
--pont-button-default-outline-w-invalid: 0px;
|
|
5476
|
+
--pont-button-secondary-outline-w-invalid: 0px;
|
|
5477
|
+
--pont-button-outline-outline-w-invalid: 0px;
|
|
5478
|
+
--pont-button-ghost-outline-w-invalid: 0px;
|
|
5479
|
+
--pont-button-destructive-outline-w-invalid: 0px;
|
|
5480
|
+
--pont-button-link-outline-w-invalid: 0px;
|
|
5481
|
+
|
|
5482
|
+
--pont-button-default-outline-color-invalid: transparent;
|
|
5483
|
+
--pont-button-secondary-outline-color-invalid: transparent;
|
|
5484
|
+
--pont-button-outline-outline-color-invalid: transparent;
|
|
5485
|
+
--pont-button-ghost-outline-color-invalid: transparent;
|
|
5486
|
+
--pont-button-destructive-outline-color-invalid: transparent;
|
|
5487
|
+
--pont-button-link-outline-color-invalid: transparent;
|
|
5488
|
+
|
|
5489
|
+
--pont-button-default-outline-style-invalid: var(
|
|
5490
|
+
--pont-ref-border-outline-style-none
|
|
5491
|
+
);
|
|
5492
|
+
--pont-button-secondary-outline-style-invalid: var(
|
|
5493
|
+
--pont-ref-border-outline-style-none
|
|
5494
|
+
);
|
|
5495
|
+
--pont-button-outline-outline-style-invalid: var(
|
|
5496
|
+
--pont-ref-border-outline-style-none
|
|
5497
|
+
);
|
|
5498
|
+
--pont-button-ghost-outline-style-invalid: var(
|
|
5499
|
+
--pont-ref-border-outline-style-none
|
|
5500
|
+
);
|
|
5501
|
+
--pont-button-destructive-outline-style-invalid: var(
|
|
5502
|
+
--pont-ref-border-outline-style-none
|
|
5503
|
+
);
|
|
5504
|
+
--pont-button-link-outline-style-invalid: var(
|
|
5505
|
+
--pont-ref-border-outline-style-none
|
|
5506
|
+
);
|
|
5507
|
+
|
|
5508
|
+
--pont-button-default-outline-offset-invalid: 0px;
|
|
5509
|
+
--pont-button-secondary-outline-offset-invalid: 0px;
|
|
5510
|
+
--pont-button-outline-outline-offset-invalid: 0px;
|
|
5511
|
+
--pont-button-ghost-outline-offset-invalid: 0px;
|
|
5512
|
+
--pont-button-destructive-outline-offset-invalid: 0px;
|
|
5513
|
+
--pont-button-link-outline-offset-invalid: 0px;
|
|
5514
|
+
|
|
5515
|
+
/* EFFECT */
|
|
5516
|
+
--pont-button-default-effect-shadow-invalid: var(
|
|
5517
|
+
--pont-ref-effect-shadow-none
|
|
5518
|
+
);
|
|
5519
|
+
--pont-button-secondary-effect-shadow-invalid: var(
|
|
5520
|
+
--pont-ref-effect-shadow-none
|
|
5521
|
+
);
|
|
5522
|
+
--pont-button-outline-effect-shadow-invalid: var(
|
|
5523
|
+
--pont-ref-effect-shadow-none
|
|
5524
|
+
);
|
|
5525
|
+
--pont-button-ghost-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
|
|
5526
|
+
--pont-button-destructive-effect-shadow-invalid: var(
|
|
5527
|
+
--pont-ref-effect-shadow-none
|
|
5528
|
+
);
|
|
5529
|
+
--pont-button-link-effect-shadow-invalid: var(--pont-ref-effect-shadow-none);
|
|
5530
|
+
|
|
5531
|
+
--pont-button-default-effect-inset-shadow-invalid: inset
|
|
5532
|
+
var(--pont-ref-effect-shadow-none);
|
|
5533
|
+
--pont-button-secondary-effect-inset-shadow-invalid: inset
|
|
5534
|
+
var(--pont-ref-effect-shadow-none);
|
|
5535
|
+
--pont-button-outline-effect-inset-shadow-invalid: inset
|
|
5536
|
+
var(--pont-ref-effect-shadow-none);
|
|
5537
|
+
--pont-button-ghost-effect-inset-shadow-invalid: inset
|
|
5538
|
+
var(--pont-ref-effect-shadow-none);
|
|
5539
|
+
--pont-button-destructive-effect-inset-shadow-invalid: inset
|
|
5540
|
+
var(--pont-ref-effect-shadow-none);
|
|
5541
|
+
--pont-button-link-effect-inset-shadow-invalid: inset
|
|
5542
|
+
var(--pont-ref-effect-shadow-none);
|
|
5543
|
+
|
|
5544
|
+
--pont-button-default-effect-inset-ring-invalid: inset
|
|
5545
|
+
var(--pont-ref-effect-shadow-none);
|
|
5546
|
+
--pont-button-secondary-effect-inset-ring-invalid: inset
|
|
5547
|
+
var(--pont-ref-effect-shadow-none);
|
|
5548
|
+
--pont-button-outline-effect-inset-ring-invalid: inset
|
|
5549
|
+
var(--pont-ref-effect-shadow-none);
|
|
5550
|
+
--pont-button-ghost-effect-inset-ring-invalid: inset
|
|
5551
|
+
var(--pont-ref-effect-shadow-none);
|
|
5552
|
+
--pont-button-destructive-effect-inset-ring-invalid: inset
|
|
5553
|
+
var(--pont-ref-effect-shadow-none);
|
|
5554
|
+
--pont-button-link-effect-inset-ring-invalid: inset
|
|
5555
|
+
var(--pont-ref-effect-shadow-none);
|
|
5556
|
+
|
|
5557
|
+
--pont-button-default-effect-ring-offset-w-invalid: 0px;
|
|
5558
|
+
--pont-button-secondary-effect-ring-offset-w-invalid: 0px;
|
|
5559
|
+
--pont-button-outline-effect-ring-offset-w-invalid: 0px;
|
|
5560
|
+
--pont-button-ghost-effect-ring-offset-w-invalid: 0px;
|
|
5561
|
+
--pont-button-destructive-effect-ring-offset-w-invalid: 0px;
|
|
5562
|
+
--pont-button-link-effect-ring-offset-w-invalid: 0px;
|
|
5563
|
+
|
|
5564
|
+
--pont-button-default-effect-ring-offset-color-invalid: hsl(
|
|
5565
|
+
var(--pont-sem-color-bg)
|
|
5566
|
+
);
|
|
5567
|
+
--pont-button-secondary-effect-ring-offset-color-invalid: hsl(
|
|
5568
|
+
var(--pont-sem-color-bg)
|
|
5569
|
+
);
|
|
5570
|
+
--pont-button-outline-effect-ring-offset-color-invalid: hsl(
|
|
5571
|
+
var(--pont-sem-color-bg)
|
|
5572
|
+
);
|
|
5573
|
+
--pont-button-ghost-effect-ring-offset-color-invalid: hsl(
|
|
5574
|
+
var(--pont-sem-color-bg)
|
|
5575
|
+
);
|
|
5576
|
+
--pont-button-destructive-effect-ring-offset-color-invalid: hsl(
|
|
5577
|
+
var(--pont-sem-color-bg)
|
|
5578
|
+
);
|
|
5579
|
+
--pont-button-link-effect-ring-offset-color-invalid: hsl(
|
|
5580
|
+
var(--pont-sem-color-bg)
|
|
5581
|
+
);
|
|
5582
|
+
|
|
5583
|
+
--pont-button-default-effect-ring-offset-invalid: 0 0 0
|
|
5584
|
+
var(--pont-button-default-effect-ring-offset-w-invalid)
|
|
5585
|
+
var(--pont-button-default-effect-ring-offset-color-invalid);
|
|
5586
|
+
--pont-button-secondary-effect-ring-offset-invalid: 0 0 0
|
|
5587
|
+
var(--pont-button-secondary-effect-ring-offset-w-invalid)
|
|
5588
|
+
var(--pont-button-secondary-effect-ring-offset-color-invalid);
|
|
5589
|
+
--pont-button-outline-effect-ring-offset-invalid: 0 0 0
|
|
5590
|
+
var(--pont-button-outline-effect-ring-offset-w-invalid)
|
|
5591
|
+
var(--pont-button-outline-effect-ring-offset-color-invalid);
|
|
5592
|
+
--pont-button-ghost-effect-ring-offset-invalid: 0 0 0
|
|
5593
|
+
var(--pont-button-ghost-effect-ring-offset-w-invalid)
|
|
5594
|
+
var(--pont-button-ghost-effect-ring-offset-color-invalid);
|
|
5595
|
+
--pont-button-destructive-effect-ring-offset-invalid: 0 0 0
|
|
5596
|
+
var(--pont-button-destructive-effect-ring-offset-w-invalid)
|
|
5597
|
+
var(--pont-button-destructive-effect-ring-offset-color-invalid);
|
|
5598
|
+
--pont-button-link-effect-ring-offset-invalid: 0 0 0
|
|
5599
|
+
var(--pont-button-link-effect-ring-offset-w-invalid)
|
|
5600
|
+
var(--pont-button-link-effect-ring-offset-color-invalid);
|
|
5601
|
+
|
|
5602
|
+
--pont-button-default-effect-ring-w-invalid: var(
|
|
5603
|
+
--pont-sem-width-ring-invalid
|
|
5604
|
+
);
|
|
5605
|
+
--pont-button-secondary-effect-ring-w-invalid: var(
|
|
5606
|
+
--pont-sem-width-ring-invalid
|
|
5607
|
+
);
|
|
5608
|
+
--pont-button-outline-effect-ring-w-invalid: var(
|
|
5609
|
+
--pont-sem-width-ring-invalid
|
|
5610
|
+
);
|
|
5611
|
+
--pont-button-ghost-effect-ring-w-invalid: var(--pont-sem-width-ring-invalid);
|
|
5612
|
+
--pont-button-destructive-effect-ring-w-invalid: var(
|
|
5613
|
+
--pont-sem-width-ring-invalid
|
|
5614
|
+
);
|
|
5615
|
+
--pont-button-link-effect-ring-w-invalid: var(--pont-sem-width-ring-invalid);
|
|
5616
|
+
|
|
5617
|
+
--pont-button-default-effect-ring-color-invalid: hsl(
|
|
5618
|
+
var(--pont-sem-color-ring-destructive)
|
|
5619
|
+
);
|
|
5620
|
+
--pont-button-secondary-effect-ring-color-invalid: hsl(
|
|
5621
|
+
var(--pont-sem-color-ring-destructive)
|
|
5622
|
+
);
|
|
5623
|
+
--pont-button-outline-effect-ring-color-invalid: hsl(
|
|
5624
|
+
var(--pont-sem-color-ring-destructive)
|
|
5625
|
+
);
|
|
5626
|
+
--pont-button-ghost-effect-ring-color-invalid: hsl(
|
|
5627
|
+
var(--pont-sem-color-ring-destructive)
|
|
5628
|
+
);
|
|
5629
|
+
--pont-button-destructive-effect-ring-color-invalid: hsl(
|
|
5630
|
+
var(--pont-sem-color-ring-destructive)
|
|
5631
|
+
);
|
|
5632
|
+
--pont-button-link-effect-ring-color-invalid: hsl(
|
|
5633
|
+
var(--pont-sem-color-ring-destructive)
|
|
5634
|
+
);
|
|
4715
5635
|
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
5636
|
+
--pont-button-default-effect-ring-invalid: 0 0 0
|
|
5637
|
+
calc(
|
|
5638
|
+
var(--pont-button-default-effect-ring-w-invalid) +
|
|
5639
|
+
var(--pont-button-default-effect-ring-offset-w-invalid)
|
|
5640
|
+
)
|
|
5641
|
+
var(--pont-button-default-effect-ring-color-invalid);
|
|
5642
|
+
--pont-button-secondary-effect-ring-invalid: 0 0 0
|
|
5643
|
+
calc(
|
|
5644
|
+
var(--pont-button-secondary-effect-ring-w-invalid) +
|
|
5645
|
+
var(--pont-button-secondary-effect-ring-offset-w-invalid)
|
|
5646
|
+
)
|
|
5647
|
+
var(--pont-button-secondary-effect-ring-color-invalid);
|
|
5648
|
+
--pont-button-outline-effect-ring-invalid: 0 0 0
|
|
5649
|
+
calc(
|
|
5650
|
+
var(--pont-button-outline-effect-ring-w-invalid) +
|
|
5651
|
+
var(--pont-button-outline-effect-ring-offset-w-invalid)
|
|
5652
|
+
)
|
|
5653
|
+
var(--pont-button-outline-effect-ring-color-invalid);
|
|
5654
|
+
--pont-button-ghost-effect-ring-invalid: 0 0 0
|
|
5655
|
+
calc(
|
|
5656
|
+
var(--pont-button-ghost-effect-ring-w-invalid) +
|
|
5657
|
+
var(--pont-button-ghost-effect-ring-offset-w-invalid)
|
|
5658
|
+
)
|
|
5659
|
+
var(--pont-button-ghost-effect-ring-color-invalid);
|
|
5660
|
+
--pont-button-destructive-effect-ring-invalid: 0 0 0
|
|
5661
|
+
calc(
|
|
5662
|
+
var(--pont-button-destructive-effect-ring-w-invalid) +
|
|
5663
|
+
var(--pont-button-destructive-effect-ring-offset-w-invalid)
|
|
5664
|
+
)
|
|
5665
|
+
var(--pont-button-destructive-effect-ring-color-invalid);
|
|
5666
|
+
--pont-button-link-effect-ring-invalid: 0 0 0
|
|
5667
|
+
calc(
|
|
5668
|
+
var(--pont-button-link-effect-ring-w-invalid) +
|
|
5669
|
+
var(--pont-button-link-effect-ring-offset-w-invalid)
|
|
5670
|
+
)
|
|
5671
|
+
var(--pont-button-link-effect-ring-color-invalid);
|
|
4719
5672
|
}
|
|
4720
5673
|
|
|
4721
|
-
/*
|
|
4722
|
-
* ===========================================================================
|
|
4723
|
-
* BUTTON COMPONENT TOKENS
|
|
4724
|
-
* pont-button-*
|
|
4725
|
-
* ===========================================================================
|
|
4726
|
-
*/
|
|
4727
|
-
|
|
4728
5674
|
/*
|
|
4729
5675
|
* --------------------------------------------------
|
|
4730
|
-
*
|
|
5676
|
+
* SIZES
|
|
4731
5677
|
* --------------------------------------------------
|
|
4732
5678
|
*/
|
|
4733
5679
|
|
|
4734
5680
|
:root {
|
|
4735
|
-
|
|
5681
|
+
/* LAYOUT */
|
|
5682
|
+
--pont-button-layout-gap-x-default: calc(var(--pont-ref-space) * 1.5);
|
|
5683
|
+
--pont-button-layout-gap-y-default: calc(var(--pont-ref-space) * 1.5);
|
|
5684
|
+
--pont-button-layout-gap-x-xs: calc(var(--pont-ref-space) * 1);
|
|
5685
|
+
--pont-button-layout-gap-y-xs: calc(var(--pont-ref-space) * 1);
|
|
5686
|
+
--pont-button-layout-gap-x-sm: calc(var(--pont-ref-space) * 1);
|
|
5687
|
+
--pont-button-layout-gap-y-sm: calc(var(--pont-ref-space) * 1);
|
|
5688
|
+
--pont-button-layout-gap-x-lg: calc(var(--pont-ref-space) * 1.5);
|
|
5689
|
+
--pont-button-layout-gap-y-lg: calc(var(--pont-ref-space) * 1.5);
|
|
4736
5690
|
|
|
4737
|
-
|
|
4738
|
-
--pont-button-
|
|
4739
|
-
--pont-button-
|
|
5691
|
+
/* SPACING */
|
|
5692
|
+
--pont-button-spacing-pt-default: calc(var(--pont-ref-space) * 0);
|
|
5693
|
+
--pont-button-spacing-pr-default: calc(var(--pont-ref-space) * 2.5);
|
|
5694
|
+
--pont-button-spacing-pb-default: calc(var(--pont-ref-space) * 0);
|
|
5695
|
+
--pont-button-spacing-pl-default: calc(var(--pont-ref-space) * 2.5);
|
|
4740
5696
|
|
|
4741
|
-
--pont-button-
|
|
4742
|
-
--pont-button-
|
|
5697
|
+
--pont-button-spacing-pt-xs: calc(var(--pont-ref-space) * 0);
|
|
5698
|
+
--pont-button-spacing-pr-xs: calc(var(--pont-ref-space) * 2);
|
|
5699
|
+
--pont-button-spacing-pb-xs: calc(var(--pont-ref-space) * 0);
|
|
5700
|
+
--pont-button-spacing-pl-xs: calc(var(--pont-ref-space) * 2);
|
|
4743
5701
|
|
|
4744
|
-
--pont-button-
|
|
4745
|
-
--pont-button-
|
|
4746
|
-
--pont-button-
|
|
5702
|
+
--pont-button-spacing-pt-sm: calc(var(--pont-ref-space) * 0);
|
|
5703
|
+
--pont-button-spacing-pr-sm: calc(var(--pont-ref-space) * 2.5);
|
|
5704
|
+
--pont-button-spacing-pb-sm: calc(var(--pont-ref-space) * 0);
|
|
5705
|
+
--pont-button-spacing-pl-sm: calc(var(--pont-ref-space) * 2.5);
|
|
4747
5706
|
|
|
4748
|
-
--pont-button-
|
|
5707
|
+
--pont-button-spacing-pt-lg: calc(var(--pont-ref-space) * 0);
|
|
5708
|
+
--pont-button-spacing-pr-lg: calc(var(--pont-ref-space) * 2.5);
|
|
5709
|
+
--pont-button-spacing-pb-lg: calc(var(--pont-ref-space) * 0);
|
|
5710
|
+
--pont-button-spacing-pl-lg: calc(var(--pont-ref-space) * 2.5);
|
|
4749
5711
|
|
|
4750
|
-
--pont-button-
|
|
4751
|
-
|
|
4752
|
-
);
|
|
4753
|
-
--pont-button-
|
|
4754
|
-
--pont-button-color-ring-invalid: hsl(var(--pont-sem-color-ring-destructive));
|
|
4755
|
-
--pont-button-font-family: var(--pont-sem-font-family-default);
|
|
4756
|
-
}
|
|
5712
|
+
--pont-button-spacing-pt-icon: calc(var(--pont-ref-space) * 0);
|
|
5713
|
+
--pont-button-spacing-pr-icon: calc(var(--pont-ref-space) * 0);
|
|
5714
|
+
--pont-button-spacing-pb-icon: calc(var(--pont-ref-space) * 0);
|
|
5715
|
+
--pont-button-spacing-pl-icon: calc(var(--pont-ref-space) * 0);
|
|
4757
5716
|
|
|
4758
|
-
|
|
4759
|
-
*
|
|
4760
|
-
*
|
|
4761
|
-
*
|
|
4762
|
-
*/
|
|
5717
|
+
--pont-button-spacing-pt-icon-xs: calc(var(--pont-ref-space) * 0);
|
|
5718
|
+
--pont-button-spacing-pr-icon-xs: calc(var(--pont-ref-space) * 0);
|
|
5719
|
+
--pont-button-spacing-pb-icon-xs: calc(var(--pont-ref-space) * 0);
|
|
5720
|
+
--pont-button-spacing-pl-icon-xs: calc(var(--pont-ref-space) * 0);
|
|
4763
5721
|
|
|
4764
|
-
:
|
|
4765
|
-
|
|
4766
|
-
--pont-button-
|
|
4767
|
-
--pont-button-
|
|
5722
|
+
--pont-button-spacing-pt-icon-sm: calc(var(--pont-ref-space) * 0);
|
|
5723
|
+
--pont-button-spacing-pr-icon-sm: calc(var(--pont-ref-space) * 0);
|
|
5724
|
+
--pont-button-spacing-pb-icon-sm: calc(var(--pont-ref-space) * 0);
|
|
5725
|
+
--pont-button-spacing-pl-icon-sm: calc(var(--pont-ref-space) * 0);
|
|
4768
5726
|
|
|
4769
|
-
--pont-button-
|
|
4770
|
-
--pont-button-
|
|
4771
|
-
--pont-button-
|
|
5727
|
+
--pont-button-spacing-pt-icon-lg: calc(var(--pont-ref-space) * 0);
|
|
5728
|
+
--pont-button-spacing-pr-icon-lg: calc(var(--pont-ref-space) * 0);
|
|
5729
|
+
--pont-button-spacing-pb-icon-lg: calc(var(--pont-ref-space) * 0);
|
|
5730
|
+
--pont-button-spacing-pl-icon-lg: calc(var(--pont-ref-space) * 0);
|
|
4772
5731
|
|
|
4773
|
-
|
|
4774
|
-
|
|
5732
|
+
/* Has Icon Start/End */
|
|
5733
|
+
--pont-button-spacing-pt-default-has-icon-start: var(
|
|
5734
|
+
--pont-button-spacing-pt-default
|
|
4775
5735
|
);
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
--pont-button-default-font-family: var(--pont-button-font-family);
|
|
4780
|
-
--pont-button-default-font-weight: var(--pont-button-font-weight);
|
|
4781
|
-
--pont-button-default-font-size: var(--pont-button-font-size);
|
|
4782
|
-
--pont-button-default-width-border: var(--pont-button-width-border);
|
|
4783
|
-
--pont-button-default-radius: var(--pont-button-radius);
|
|
4784
|
-
--pont-button-default-space-size: var(--pont-button-space-size);
|
|
4785
|
-
|
|
4786
|
-
/* * SECONDARY * */
|
|
4787
|
-
--pont-button-secondary-color-text: hsl(
|
|
4788
|
-
var(--pont-sem-color-text-secondary-on-fill)
|
|
5736
|
+
--pont-button-spacing-pr-default-has-icon-start: var(
|
|
5737
|
+
--pont-button-spacing-pr-default
|
|
4789
5738
|
);
|
|
4790
|
-
--pont-button-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
--pont-button-
|
|
4794
|
-
var(--pont-
|
|
5739
|
+
--pont-button-spacing-pb-default-has-icon-start: var(
|
|
5740
|
+
--pont-button-spacing-pb-default
|
|
5741
|
+
);
|
|
5742
|
+
--pont-button-spacing-pl-default-has-icon-start: calc(
|
|
5743
|
+
var(--pont-ref-space) * 2
|
|
4795
5744
|
);
|
|
4796
5745
|
|
|
4797
|
-
--pont-button-
|
|
4798
|
-
|
|
5746
|
+
--pont-button-spacing-pt-default-has-icon-end: var(
|
|
5747
|
+
--pont-button-spacing-pt-default
|
|
4799
5748
|
);
|
|
4800
|
-
--pont-button-
|
|
4801
|
-
var(--pont-
|
|
5749
|
+
--pont-button-spacing-pr-default-has-icon-end: calc(
|
|
5750
|
+
var(--pont-ref-space) * 2
|
|
4802
5751
|
);
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
5752
|
+
--pont-button-spacing-pb-default-has-icon-end: var(
|
|
5753
|
+
--pont-button-spacing-pb-default
|
|
5754
|
+
);
|
|
5755
|
+
--pont-button-spacing-pl-default-has-icon-end: var(
|
|
5756
|
+
--pont-button-spacing-pl-default
|
|
4806
5757
|
);
|
|
4807
|
-
--pont-button-secondary-color-ring-focus: var(--pont-button-color-ring-focus);
|
|
4808
|
-
--pont-button-secondary-font-family: var(--pont-button-font-family);
|
|
4809
|
-
--pont-button-secondary-opacity-disabled: var(--pont-button-opacity-disabled);
|
|
4810
|
-
--pont-button-secondary-font-weight: var(--pont-button-font-weight);
|
|
4811
|
-
--pont-button-secondary-font-size: var(--pont-button-font-size);
|
|
4812
|
-
--pont-button-secondary-width-border: var(--pont-button-width-border);
|
|
4813
|
-
--pont-button-secondary-radius: var(--pont-button-radius);
|
|
4814
|
-
--pont-button-secondary-space-size: var(--pont-button-space-size);
|
|
4815
5758
|
|
|
4816
|
-
|
|
4817
|
-
--pont-button-
|
|
4818
|
-
--pont-button-
|
|
4819
|
-
--pont-button-
|
|
5759
|
+
--pont-button-spacing-pt-xs-has-icon-start: var(--pont-button-spacing-pt-xs);
|
|
5760
|
+
--pont-button-spacing-pr-xs-has-icon-start: var(--pont-button-spacing-pr-xs);
|
|
5761
|
+
--pont-button-spacing-pb-xs-has-icon-start: var(--pont-button-spacing-pb-xs);
|
|
5762
|
+
--pont-button-spacing-pl-xs-has-icon-start: calc(var(--pont-ref-space) * 1.5);
|
|
4820
5763
|
|
|
4821
|
-
--pont-button-
|
|
4822
|
-
--pont-button-
|
|
5764
|
+
--pont-button-spacing-pt-xs-has-icon-end: var(--pont-button-spacing-pt-xs);
|
|
5765
|
+
--pont-button-spacing-pr-xs-has-icon-end: calc(var(--pont-ref-space) * 1.5);
|
|
5766
|
+
--pont-button-spacing-pb-xs-has-icon-end: var(--pont-button-spacing-pb-xs);
|
|
5767
|
+
--pont-button-spacing-pl-xs-has-icon-end: var(--pont-button-spacing-pl-xs);
|
|
4823
5768
|
|
|
4824
|
-
--pont-button-
|
|
4825
|
-
--pont-button-
|
|
4826
|
-
|
|
4827
|
-
);
|
|
5769
|
+
--pont-button-spacing-pt-sm-has-icon-start: var(--pont-button-spacing-pt-sm);
|
|
5770
|
+
--pont-button-spacing-pr-sm-has-icon-start: var(--pont-button-spacing-pr-sm);
|
|
5771
|
+
--pont-button-spacing-pb-sm-has-icon-start: var(--pont-button-spacing-pb-sm);
|
|
5772
|
+
--pont-button-spacing-pl-sm-has-icon-start: calc(var(--pont-ref-space) * 1.5);
|
|
4828
5773
|
|
|
4829
|
-
--pont-button-
|
|
4830
|
-
--pont-button-
|
|
4831
|
-
|
|
4832
|
-
);
|
|
4833
|
-
--pont-button-outline-font-family: var(--pont-button-font-family);
|
|
4834
|
-
--pont-button-outline-opacity-disabled: var(--pont-button-opacity-disabled);
|
|
4835
|
-
--pont-button-outline-font-weight: var(--pont-button-font-weight);
|
|
4836
|
-
--pont-button-outline-font-size: var(--pont-button-font-size);
|
|
4837
|
-
--pont-button-outline-width-border: var(--pont-button-width-border);
|
|
4838
|
-
--pont-button-outline-radius: var(--pont-button-radius);
|
|
4839
|
-
--pont-button-outline-space-size: var(--pont-button-space-size);
|
|
4840
|
-
|
|
4841
|
-
/* * GHOST * */
|
|
4842
|
-
--pont-button-ghost-color-text-hover: hsl(var(--pont-sem-color-text));
|
|
4843
|
-
--pont-button-ghost-color-bg-hover: hsl(
|
|
4844
|
-
var(--pont-sem-color-bg-fill-tertiary-hover)
|
|
4845
|
-
);
|
|
5774
|
+
--pont-button-spacing-pt-sm-has-icon-end: var(--pont-button-spacing-pt-sm);
|
|
5775
|
+
--pont-button-spacing-pr-sm-has-icon-end: calc(var(--pont-ref-space) * 1.5);
|
|
5776
|
+
--pont-button-spacing-pb-sm-has-icon-end: var(--pont-button-spacing-pb-sm);
|
|
5777
|
+
--pont-button-spacing-pl-sm-has-icon-end: var(--pont-button-spacing-pl-sm);
|
|
4846
5778
|
|
|
4847
|
-
--pont-button-
|
|
4848
|
-
--pont-button-
|
|
4849
|
-
|
|
4850
|
-
);
|
|
4851
|
-
--pont-button-ghost-font-family: var(--pont-button-font-family);
|
|
4852
|
-
--pont-button-ghost-opacity-disabled: var(--pont-button-opacity-disabled);
|
|
4853
|
-
--pont-button-ghost-font-weight: var(--pont-button-font-weight);
|
|
4854
|
-
--pont-button-ghost-font-size: var(--pont-button-font-size);
|
|
4855
|
-
--pont-button-ghost-width-border: var(--pont-button-width-border);
|
|
4856
|
-
--pont-button-ghost-radius: var(--pont-button-radius);
|
|
4857
|
-
--pont-button-ghost-space-size: var(--pont-button-space-size);
|
|
5779
|
+
--pont-button-spacing-pt-lg-has-icon-start: var(--pont-button-spacing-pt-lg);
|
|
5780
|
+
--pont-button-spacing-pr-lg-has-icon-start: var(--pont-button-spacing-pr-lg);
|
|
5781
|
+
--pont-button-spacing-pb-lg-has-icon-start: var(--pont-button-spacing-pb-lg);
|
|
5782
|
+
--pont-button-spacing-pl-lg-has-icon-start: calc(var(--pont-ref-space) * 2);
|
|
4858
5783
|
|
|
4859
|
-
|
|
4860
|
-
--pont-button-
|
|
4861
|
-
|
|
4862
|
-
);
|
|
4863
|
-
--pont-button-destructive-color-bg: hsl(
|
|
4864
|
-
var(--pont-sem-color-bg-fill-destructive-secondary)
|
|
4865
|
-
);
|
|
5784
|
+
--pont-button-spacing-pt-lg-has-icon-end: var(--pont-button-spacing-pt-lg);
|
|
5785
|
+
--pont-button-spacing-pr-lg-has-icon-end: calc(var(--pont-ref-space) * 2);
|
|
5786
|
+
--pont-button-spacing-pb-lg-has-icon-end: var(--pont-button-spacing-pb-lg);
|
|
5787
|
+
--pont-button-spacing-pl-lg-has-icon-end: var(--pont-button-spacing-pl-lg);
|
|
4866
5788
|
|
|
4867
|
-
|
|
5789
|
+
/* SIZING */
|
|
5790
|
+
--pont-button-sizing-w-default: var(--pont-ref-sizing-w-auto);
|
|
5791
|
+
--pont-button-sizing-w-xs: var(--pont-ref-sizing-w-auto);
|
|
5792
|
+
--pont-button-sizing-w-sm: var(--pont-ref-sizing-w-auto);
|
|
5793
|
+
--pont-button-sizing-w-lg: var(--pont-ref-sizing-w-auto);
|
|
5794
|
+
--pont-button-sizing-w-icon: calc(var(--pont-ref-space) * 8);
|
|
5795
|
+
--pont-button-sizing-w-icon-xs: calc(var(--pont-ref-space) * 6);
|
|
5796
|
+
--pont-button-sizing-w-icon-sm: calc(var(--pont-ref-space) * 7);
|
|
5797
|
+
--pont-button-sizing-w-icon-lg: calc(var(--pont-ref-space) * 9);
|
|
5798
|
+
|
|
5799
|
+
--pont-button-sizing-h-default: calc(var(--pont-ref-space) * 8);
|
|
5800
|
+
--pont-button-sizing-h-xs: calc(var(--pont-ref-space) * 6);
|
|
5801
|
+
--pont-button-sizing-h-sm: calc(var(--pont-ref-space) * 7);
|
|
5802
|
+
--pont-button-sizing-h-lg: calc(var(--pont-ref-space) * 9);
|
|
5803
|
+
--pont-button-sizing-h-icon: calc(var(--pont-ref-space) * 8);
|
|
5804
|
+
--pont-button-sizing-h-icon-xs: calc(var(--pont-ref-space) * 6);
|
|
5805
|
+
--pont-button-sizing-h-icon-sm: calc(var(--pont-ref-space) * 7);
|
|
5806
|
+
--pont-button-sizing-h-icon-lg: calc(var(--pont-ref-space) * 9);
|
|
4868
5807
|
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
);
|
|
5808
|
+
/* TYPOGRAPHY */
|
|
5809
|
+
--pont-button-typography-size-default: var(--pont-ref-font-size-sm);
|
|
5810
|
+
--pont-button-typography-size-xs: var(--pont-ref-font-size-xs);
|
|
5811
|
+
--pont-button-typography-size-sm: 0.8rem;
|
|
5812
|
+
--pont-button-typography-size-lg: var(--pont-ref-font-size-sm);
|
|
4872
5813
|
|
|
4873
|
-
--pont-button-
|
|
4874
|
-
|
|
5814
|
+
--pont-button-typography-weight-default: var(--pont-ref-font-weight-medium);
|
|
5815
|
+
--pont-button-typography-weight-xs: var(--pont-ref-font-weight-medium);
|
|
5816
|
+
--pont-button-typography-weight-sm: var(--pont-ref-font-weight-medium);
|
|
5817
|
+
--pont-button-typography-weight-lg: var(--pont-ref-font-weight-medium);
|
|
5818
|
+
|
|
5819
|
+
--pont-button-typography-tracking-default: var(
|
|
5820
|
+
--pont-ref-font-letter-spacing-normal
|
|
4875
5821
|
);
|
|
4876
|
-
--pont-button-
|
|
4877
|
-
|
|
5822
|
+
--pont-button-typography-tracking-xs: var(
|
|
5823
|
+
--pont-ref-font-letter-spacing-normal
|
|
5824
|
+
);
|
|
5825
|
+
--pont-button-typography-tracking-sm: var(
|
|
5826
|
+
--pont-ref-font-letter-spacing-normal
|
|
5827
|
+
);
|
|
5828
|
+
--pont-button-typography-tracking-lg: var(
|
|
5829
|
+
--pont-ref-font-letter-spacing-normal
|
|
4878
5830
|
);
|
|
4879
|
-
--pont-button-destructive-font-family: var(--pont-button-font-family);
|
|
4880
|
-
--pont-button-destructive-opacity-disabled: var(--pont-button-opacity-disabled);
|
|
4881
|
-
--pont-button-destructive-font-weight: var(--pont-button-font-weight);
|
|
4882
|
-
--pont-button-destructive-font-size: var(--pont-button-font-size);
|
|
4883
|
-
--pont-button-destructive-width-border: var(--pont-button-width-border);
|
|
4884
|
-
--pont-button-destructive-radius: var(--pont-button-radius);
|
|
4885
|
-
--pont-button-destructive-space-size: var(--pont-button-space-size);
|
|
4886
5831
|
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
4890
|
-
--pont-button-
|
|
4891
|
-
--pont-button-
|
|
4892
|
-
--pont-button-
|
|
4893
|
-
--pont-button-link-width-border: var(--pont-button-width-border);
|
|
4894
|
-
--pont-button-link-radius: var(--pont-button-radius);
|
|
4895
|
-
--pont-button-link-space-size: var(--pont-button-space-size);
|
|
4896
|
-
}
|
|
5832
|
+
--pont-button-typography-leading-default: var(
|
|
5833
|
+
--pont-ref-font-line-height-of-sm
|
|
5834
|
+
);
|
|
5835
|
+
--pont-button-typography-leading-xs: var(--pont-ref-font-line-height-of-xs);
|
|
5836
|
+
--pont-button-typography-leading-sm: var(--pont-ref-font-line-height-of-sm);
|
|
5837
|
+
--pont-button-typography-leading-lg: var(--pont-ref-font-line-height-of-sm);
|
|
4897
5838
|
|
|
4898
|
-
/*
|
|
4899
|
-
|
|
4900
|
-
|
|
4901
|
-
|
|
4902
|
-
|
|
5839
|
+
/* BORDER */
|
|
5840
|
+
--pont-button-border-radius-tl-default: var(--pont-ref-radius-lg);
|
|
5841
|
+
--pont-button-border-radius-tr-default: var(--pont-ref-radius-lg);
|
|
5842
|
+
--pont-button-border-radius-br-default: var(--pont-ref-radius-lg);
|
|
5843
|
+
--pont-button-border-radius-bl-default: var(--pont-ref-radius-lg);
|
|
4903
5844
|
|
|
4904
|
-
:
|
|
4905
|
-
--pont-button-
|
|
4906
|
-
--pont-button-
|
|
4907
|
-
--pont-button-
|
|
4908
|
-
--pont-button-space-gap-lg: var(--pont-sem-space-action-gap-lg);
|
|
5845
|
+
--pont-button-border-radius-tl-xs: min(var(--pont-ref-radius-md), 10px);
|
|
5846
|
+
--pont-button-border-radius-tr-xs: min(var(--pont-ref-radius-md), 10px);
|
|
5847
|
+
--pont-button-border-radius-br-xs: min(var(--pont-ref-radius-md), 10px);
|
|
5848
|
+
--pont-button-border-radius-bl-xs: min(var(--pont-ref-radius-md), 10px);
|
|
4909
5849
|
|
|
4910
|
-
--pont-button-
|
|
4911
|
-
--pont-button-
|
|
4912
|
-
--pont-button-
|
|
4913
|
-
--pont-button-
|
|
5850
|
+
--pont-button-border-radius-tl-sm: min(var(--pont-ref-radius-md), 12px);
|
|
5851
|
+
--pont-button-border-radius-tr-sm: min(var(--pont-ref-radius-md), 12px);
|
|
5852
|
+
--pont-button-border-radius-br-sm: min(var(--pont-ref-radius-md), 12px);
|
|
5853
|
+
--pont-button-border-radius-bl-sm: min(var(--pont-ref-radius-md), 12px);
|
|
4914
5854
|
|
|
4915
|
-
--pont-button-
|
|
4916
|
-
--pont-button-
|
|
4917
|
-
--pont-button-
|
|
4918
|
-
--pont-button-
|
|
5855
|
+
--pont-button-border-radius-tl-lg: var(--pont-ref-radius-lg);
|
|
5856
|
+
--pont-button-border-radius-tr-lg: var(--pont-ref-radius-lg);
|
|
5857
|
+
--pont-button-border-radius-br-lg: var(--pont-ref-radius-lg);
|
|
5858
|
+
--pont-button-border-radius-bl-lg: var(--pont-ref-radius-lg);
|
|
4919
5859
|
|
|
4920
|
-
--pont-button-
|
|
4921
|
-
--pont-button-
|
|
4922
|
-
--pont-button-
|
|
4923
|
-
--pont-button-
|
|
5860
|
+
--pont-button-border-radius-tl-icon: var(--pont-ref-radius-lg);
|
|
5861
|
+
--pont-button-border-radius-tr-icon: var(--pont-ref-radius-lg);
|
|
5862
|
+
--pont-button-border-radius-br-icon: var(--pont-ref-radius-lg);
|
|
5863
|
+
--pont-button-border-radius-bl-icon: var(--pont-ref-radius-lg);
|
|
4924
5864
|
|
|
4925
|
-
--pont-button-
|
|
4926
|
-
--pont-button-
|
|
4927
|
-
--pont-button-
|
|
4928
|
-
--pont-button-
|
|
5865
|
+
--pont-button-border-radius-tl-icon-xs: min(var(--pont-ref-radius-md), 10px);
|
|
5866
|
+
--pont-button-border-radius-tr-icon-xs: min(var(--pont-ref-radius-md), 10px);
|
|
5867
|
+
--pont-button-border-radius-br-icon-xs: min(var(--pont-ref-radius-md), 10px);
|
|
5868
|
+
--pont-button-border-radius-bl-icon-xs: min(var(--pont-ref-radius-md), 10px);
|
|
4929
5869
|
|
|
4930
|
-
--pont-button-
|
|
4931
|
-
--pont-button-
|
|
4932
|
-
--pont-button-
|
|
4933
|
-
--pont-button-
|
|
5870
|
+
--pont-button-border-radius-tl-icon-sm: min(var(--pont-ref-radius-md), 12px);
|
|
5871
|
+
--pont-button-border-radius-tr-icon-sm: min(var(--pont-ref-radius-md), 12px);
|
|
5872
|
+
--pont-button-border-radius-br-icon-sm: min(var(--pont-ref-radius-md), 12px);
|
|
5873
|
+
--pont-button-border-radius-bl-icon-sm: min(var(--pont-ref-radius-md), 12px);
|
|
4934
5874
|
|
|
4935
|
-
--pont-button-radius: var(--pont-
|
|
4936
|
-
--pont-button-radius-
|
|
4937
|
-
|
|
4938
|
-
|
|
4939
|
-
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
var(--pont-sem-radius-action-sm-as-px)
|
|
4943
|
-
);
|
|
4944
|
-
--pont-button-radius-lg: var(--pont-sem-radius-action-lg);
|
|
5875
|
+
--pont-button-border-radius-tl-icon-lg: var(--pont-ref-radius-lg);
|
|
5876
|
+
--pont-button-border-radius-tr-icon-lg: var(--pont-ref-radius-lg);
|
|
5877
|
+
--pont-button-border-radius-br-icon-lg: var(--pont-ref-radius-lg);
|
|
5878
|
+
--pont-button-border-radius-bl-icon-lg: var(--pont-ref-radius-lg);
|
|
5879
|
+
}
|
|
5880
|
+
|
|
5881
|
+
/* * -------- BUTTON > ICON (& SPINNER) -------- * */
|
|
4945
5882
|
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
--pont-button-icon-
|
|
4949
|
-
--pont-button-icon-
|
|
5883
|
+
:root {
|
|
5884
|
+
/* SIZING */
|
|
5885
|
+
--pont-button-icon-sizing-w-default: calc(var(--pont-ref-space) * 4);
|
|
5886
|
+
--pont-button-icon-sizing-w-xs: calc(var(--pont-ref-space) * 3);
|
|
5887
|
+
--pont-button-icon-sizing-w-sm: calc(var(--pont-ref-space) * 3.5);
|
|
5888
|
+
--pont-button-icon-sizing-w-lg: calc(var(--pont-ref-space) * 4);
|
|
5889
|
+
--pont-button-icon-sizing-w-icon: calc(var(--pont-ref-space) * 4);
|
|
5890
|
+
--pont-button-icon-sizing-w-icon-xs: calc(var(--pont-ref-space) * 3);
|
|
5891
|
+
--pont-button-icon-sizing-w-icon-sm: calc(var(--pont-ref-space) * 4);
|
|
5892
|
+
--pont-button-icon-sizing-w-icon-lg: calc(var(--pont-ref-space) * 4);
|
|
5893
|
+
|
|
5894
|
+
--pont-button-icon-sizing-h-default: calc(var(--pont-ref-space) * 4);
|
|
5895
|
+
--pont-button-icon-sizing-h-xs: calc(var(--pont-ref-space) * 3);
|
|
5896
|
+
--pont-button-icon-sizing-h-sm: calc(var(--pont-ref-space) * 3.5);
|
|
5897
|
+
--pont-button-icon-sizing-h-lg: calc(var(--pont-ref-space) * 4);
|
|
5898
|
+
--pont-button-icon-sizing-h-icon: calc(var(--pont-ref-space) * 4);
|
|
5899
|
+
--pont-button-icon-sizing-h-icon-xs: calc(var(--pont-ref-space) * 3);
|
|
5900
|
+
--pont-button-icon-sizing-h-icon-sm: calc(var(--pont-ref-space) * 4);
|
|
5901
|
+
--pont-button-icon-sizing-h-icon-lg: calc(var(--pont-ref-space) * 4);
|
|
4950
5902
|
}
|
|
4951
5903
|
|
|
4952
5904
|
/*
|
|
@@ -7164,16 +8116,37 @@ them all being named `--pont-checkbox-icon-*`. */
|
|
|
7164
8116
|
* ===========================================================================
|
|
7165
8117
|
*/
|
|
7166
8118
|
|
|
8119
|
+
/* TODO(label) */
|
|
8120
|
+
/*
|
|
8121
|
+
group-data-[disabled=true]:pointer-events-none
|
|
8122
|
+
group-data-[disabled=true]:opacity-50
|
|
8123
|
+
|
|
8124
|
+
peer-disabled:cursor-not-allowed
|
|
8125
|
+
peer-disabled:opacity-50
|
|
8126
|
+
*/
|
|
8127
|
+
|
|
7167
8128
|
:root {
|
|
7168
|
-
|
|
8129
|
+
/* LAYOUT */
|
|
8130
|
+
--pont-label-layout-gap-x: calc(var(--pont-ref-space) * 2);
|
|
8131
|
+
--pont-label-layout-gap-y: calc(var(--pont-ref-space) * 2);
|
|
8132
|
+
|
|
8133
|
+
/* TYPOGRAPHY */
|
|
8134
|
+
--pont-label-typography-font: var(--pont-sem-font-family-default);
|
|
8135
|
+
--pont-label-typography-size: var(--pont-ref-font-size-sm);
|
|
8136
|
+
--pont-label-typography-weight: var(--pont-ref-font-weight-medium);
|
|
8137
|
+
--pont-label-typography-tracking: var(--pont-ref-font-letter-spacing-normal);
|
|
8138
|
+
--pont-label-typography-leading: var(--pont-ref-font-line-height-shortest);
|
|
8139
|
+
--pont-label-typography-color: hsl(var(--pont-sem-color-text));
|
|
7169
8140
|
|
|
7170
|
-
|
|
8141
|
+
/* EFFECT */
|
|
8142
|
+
--pont-label-effect-opacity-disabled: var(--pont-sem-opacity-disabled);
|
|
8143
|
+
}
|
|
7171
8144
|
|
|
7172
|
-
|
|
7173
|
-
--pont-label-font-line-height: var(--pont-sem-font-form-label-line-height);
|
|
7174
|
-
--pont-label-font-weight: var(--pont-sem-font-form-label-weight);
|
|
8145
|
+
/* * -------- DISABLED -------- * */
|
|
7175
8146
|
|
|
7176
|
-
|
|
8147
|
+
:root {
|
|
8148
|
+
/* INTERACTIVITY */
|
|
8149
|
+
--pont-label-interactivity-select: var(--pont-ref-interactivity-select-none);
|
|
7177
8150
|
}
|
|
7178
8151
|
|
|
7179
8152
|
/*
|
|
@@ -8692,8 +9665,8 @@ pont-callout {
|
|
|
8692
9665
|
|
|
8693
9666
|
border-top-left-radius: var(--pont-callout-border-radius-tl);
|
|
8694
9667
|
border-top-right-radius: var(--pont-callout-border-radius-tr);
|
|
8695
|
-
border-bottom-left-radius: var(--pont-callout-border-radius-bl);
|
|
8696
9668
|
border-bottom-right-radius: var(--pont-callout-border-radius-br);
|
|
9669
|
+
border-bottom-left-radius: var(--pont-callout-border-radius-bl);
|
|
8697
9670
|
}
|
|
8698
9671
|
|
|
8699
9672
|
[data-pont-callout]:has(> :is(svg, pont-spinner)) {
|
|
@@ -10499,252 +11472,585 @@ a[data-pont-badge][data-variant="link"]:hover {
|
|
|
10499
11472
|
|
|
10500
11473
|
pont-button {
|
|
10501
11474
|
display: inline-flex;
|
|
10502
|
-
|
|
10503
|
-
justify-content: center;
|
|
11475
|
+
|
|
10504
11476
|
flex-shrink: 0;
|
|
10505
|
-
-webkit-user-select: none;
|
|
10506
|
-
-moz-user-select: none;
|
|
10507
|
-
user-select: none;
|
|
10508
11477
|
}
|
|
10509
11478
|
|
|
10510
|
-
|
|
10511
|
-
display:
|
|
10512
|
-
align-items: center;
|
|
10513
|
-
justify-content: center;
|
|
11479
|
+
[data-pont-button] {
|
|
11480
|
+
display: flex;
|
|
10514
11481
|
|
|
10515
|
-
|
|
10516
|
-
|
|
11482
|
+
justify-content: var(--pont-button-layout-justify);
|
|
11483
|
+
align-items: var(--pont-button-layout-items);
|
|
11484
|
+
|
|
11485
|
+
width: var(--pont-ref-sizing-w-full);
|
|
11486
|
+
height: var(--pont-ref-sizing-h-full);
|
|
10517
11487
|
|
|
10518
|
-
font-
|
|
11488
|
+
font-family: var(--pont-button-typography-font);
|
|
10519
11489
|
white-space: nowrap;
|
|
10520
11490
|
|
|
10521
11491
|
background-clip: padding-box;
|
|
10522
11492
|
|
|
10523
|
-
|
|
10524
|
-
outline: none;
|
|
10525
|
-
|
|
10526
|
-
transition-property: all;
|
|
10527
|
-
transition-timing-function: var(--pont-button-motion-fn);
|
|
11493
|
+
transition-property: var(--pont-button-motion-property);
|
|
10528
11494
|
transition-duration: var(--pont-button-motion-duration);
|
|
11495
|
+
transition-timing-function: var(--pont-button-motion-fn);
|
|
11496
|
+
|
|
11497
|
+
-webkit-user-select: var(--pont-button-interactivity-select);
|
|
11498
|
+
|
|
11499
|
+
-moz-user-select: var(--pont-button-interactivity-select);
|
|
11500
|
+
|
|
11501
|
+
user-select: var(--pont-button-interactivity-select);
|
|
10529
11502
|
}
|
|
10530
11503
|
|
|
10531
|
-
|
|
10532
|
-
|
|
10533
|
-
|
|
10534
|
-
|
|
10535
|
-
|
|
10536
|
-
|
|
10537
|
-
|
|
10538
|
-
|
|
11504
|
+
/* * -------- BUTTON > ICON (& SPINNER) -------- * */
|
|
11505
|
+
|
|
11506
|
+
[data-pont-button] > :is(svg, pont-spinner) {
|
|
11507
|
+
flex-shrink: 0;
|
|
11508
|
+
|
|
11509
|
+
pointer-events: none;
|
|
11510
|
+
}
|
|
11511
|
+
|
|
11512
|
+
/* * -------- STATES -------- * */
|
|
11513
|
+
|
|
11514
|
+
/* * ACTIVE (PRESSED) * */
|
|
11515
|
+
|
|
11516
|
+
[data-pont-button]:active:not([aria-haspopup]) {
|
|
11517
|
+
translate: var(--pont-button-transform-translate-x-active)
|
|
11518
|
+
var(--pont-button-transform-translate-y-active);
|
|
10539
11519
|
}
|
|
10540
11520
|
|
|
10541
|
-
|
|
10542
|
-
|
|
11521
|
+
/* * DISABLED * */
|
|
11522
|
+
|
|
11523
|
+
[data-pont-button]:disabled {
|
|
10543
11524
|
pointer-events: none;
|
|
10544
11525
|
}
|
|
10545
11526
|
|
|
10546
|
-
|
|
10547
|
-
|
|
10548
|
-
|
|
10549
|
-
|
|
10550
|
-
|
|
10551
|
-
|
|
10552
|
-
|
|
10553
|
-
|
|
10554
|
-
|
|
11527
|
+
/*
|
|
11528
|
+
* --------------------------------------------------
|
|
11529
|
+
* VARIANTS
|
|
11530
|
+
* --------------------------------------------------
|
|
11531
|
+
*/
|
|
11532
|
+
|
|
11533
|
+
/* * DEFAULT * */
|
|
11534
|
+
|
|
11535
|
+
[data-pont-button][data-variant="default"] {
|
|
11536
|
+
color: var(--pont-button-default-typography-color);
|
|
11537
|
+
|
|
11538
|
+
background-color: var(--pont-button-default-bg-color);
|
|
11539
|
+
|
|
11540
|
+
border-style: var(--pont-button-default-border-style);
|
|
11541
|
+
border-color: var(--pont-button-default-border-color);
|
|
11542
|
+
border-top-width: var(--pont-button-default-border-width-t);
|
|
11543
|
+
border-right-width: var(--pont-button-default-border-width-r);
|
|
11544
|
+
border-bottom-width: var(--pont-button-default-border-width-b);
|
|
11545
|
+
border-left-width: var(--pont-button-default-border-width-l);
|
|
11546
|
+
|
|
11547
|
+
outline-width: var(--pont-button-default-outline-w);
|
|
11548
|
+
outline-color: var(--pont-button-default-outline-color);
|
|
11549
|
+
outline-style: var(--pont-button-default-outline-style);
|
|
11550
|
+
outline-offset: var(--pont-button-default-outline-offset);
|
|
11551
|
+
|
|
11552
|
+
box-shadow:
|
|
11553
|
+
var(--pont-button-default-effect-inset-shadow),
|
|
11554
|
+
var(--pont-button-default-effect-inset-ring),
|
|
11555
|
+
var(--pont-button-default-effect-ring-offset),
|
|
11556
|
+
var(--pont-button-default-effect-ring),
|
|
11557
|
+
var(--pont-button-default-effect-shadow);
|
|
11558
|
+
}
|
|
11559
|
+
|
|
11560
|
+
[data-pont-button][data-variant="default"]:hover {
|
|
11561
|
+
color: var(--pont-button-default-typography-color-hover);
|
|
11562
|
+
|
|
11563
|
+
background-color: var(--pont-button-default-bg-color-hover);
|
|
11564
|
+
}
|
|
11565
|
+
|
|
11566
|
+
[data-pont-button][data-variant="default"][aria-expanded] {
|
|
11567
|
+
color: var(--pont-button-default-typography-color-expanded);
|
|
11568
|
+
|
|
11569
|
+
background-color: var(--pont-button-default-bg-color-expanded);
|
|
11570
|
+
}
|
|
11571
|
+
|
|
11572
|
+
[data-pont-button][data-variant="default"]:focus-visible {
|
|
11573
|
+
border-style: var(--pont-button-default-border-style-focus);
|
|
11574
|
+
border-color: var(--pont-button-default-border-color-focus);
|
|
11575
|
+
border-top-width: var(--pont-button-default-border-width-t-focus);
|
|
11576
|
+
border-right-width: var(--pont-button-default-border-width-r-focus);
|
|
11577
|
+
border-bottom-width: var(--pont-button-default-border-width-b-focus);
|
|
11578
|
+
border-left-width: var(--pont-button-default-border-width-l-focus);
|
|
11579
|
+
|
|
11580
|
+
outline-width: var(--pont-button-default-outline-w-focus);
|
|
11581
|
+
outline-color: var(--pont-button-default-outline-color-focus);
|
|
11582
|
+
outline-style: var(--pont-button-default-outline-style-focus);
|
|
11583
|
+
outline-offset: var(--pont-button-default-outline-offset-focus);
|
|
11584
|
+
|
|
11585
|
+
box-shadow:
|
|
11586
|
+
var(--pont-button-default-effect-inset-shadow-focus),
|
|
11587
|
+
var(--pont-button-default-effect-inset-ring-focus),
|
|
11588
|
+
var(--pont-button-default-effect-ring-offset-focus),
|
|
11589
|
+
var(--pont-button-default-effect-ring-focus),
|
|
11590
|
+
var(--pont-button-default-effect-shadow-focus);
|
|
11591
|
+
}
|
|
11592
|
+
|
|
11593
|
+
[data-pont-button][data-variant="default"]:disabled {
|
|
11594
|
+
opacity: var(--pont-button-default-effect-opacity-disabled);
|
|
11595
|
+
}
|
|
11596
|
+
|
|
11597
|
+
[data-pont-button][data-variant="default"][aria-invalid] {
|
|
11598
|
+
border-style: var(--pont-button-default-border-style-invalid);
|
|
11599
|
+
border-color: var(--pont-button-default-border-color-invalid);
|
|
11600
|
+
border-top-width: var(--pont-button-default-border-width-t-invalid);
|
|
11601
|
+
border-right-width: var(--pont-button-default-border-width-r-invalid);
|
|
11602
|
+
border-bottom-width: var(--pont-button-default-border-width-b-invalid);
|
|
11603
|
+
border-left-width: var(--pont-button-default-border-width-l-invalid);
|
|
11604
|
+
|
|
11605
|
+
outline-width: var(--pont-button-default-outline-w-invalid);
|
|
11606
|
+
outline-color: var(--pont-button-default-outline-color-invalid);
|
|
11607
|
+
outline-style: var(--pont-button-default-outline-style-invalid);
|
|
11608
|
+
outline-offset: var(--pont-button-default-outline-offset-invalid);
|
|
11609
|
+
|
|
11610
|
+
box-shadow:
|
|
11611
|
+
var(--pont-button-default-effect-inset-shadow-invalid),
|
|
11612
|
+
var(--pont-button-default-effect-inset-ring-invalid),
|
|
11613
|
+
var(--pont-button-default-effect-ring-offset-invalid),
|
|
11614
|
+
var(--pont-button-default-effect-ring-invalid),
|
|
11615
|
+
var(--pont-button-default-effect-shadow-invalid);
|
|
11616
|
+
}
|
|
11617
|
+
|
|
11618
|
+
/* * SECONDARY * */
|
|
11619
|
+
|
|
11620
|
+
[data-pont-button][data-variant="secondary"] {
|
|
11621
|
+
color: var(--pont-button-secondary-typography-color);
|
|
11622
|
+
|
|
11623
|
+
background-color: var(--pont-button-secondary-bg-color);
|
|
11624
|
+
|
|
11625
|
+
border-style: var(--pont-button-secondary-border-style);
|
|
11626
|
+
border-color: var(--pont-button-secondary-border-color);
|
|
11627
|
+
border-top-width: var(--pont-button-secondary-border-width-t);
|
|
11628
|
+
border-right-width: var(--pont-button-secondary-border-width-r);
|
|
11629
|
+
border-bottom-width: var(--pont-button-secondary-border-width-b);
|
|
11630
|
+
border-left-width: var(--pont-button-secondary-border-width-l);
|
|
11631
|
+
|
|
11632
|
+
outline-width: var(--pont-button-secondary-outline-w);
|
|
11633
|
+
outline-color: var(--pont-button-secondary-outline-color);
|
|
11634
|
+
outline-style: var(--pont-button-secondary-outline-style);
|
|
11635
|
+
outline-offset: var(--pont-button-secondary-outline-offset);
|
|
11636
|
+
|
|
11637
|
+
box-shadow:
|
|
11638
|
+
var(--pont-button-secondary-effect-inset-shadow),
|
|
11639
|
+
var(--pont-button-secondary-effect-inset-ring),
|
|
11640
|
+
var(--pont-button-secondary-effect-ring-offset),
|
|
11641
|
+
var(--pont-button-secondary-effect-ring),
|
|
11642
|
+
var(--pont-button-secondary-effect-shadow);
|
|
11643
|
+
}
|
|
11644
|
+
|
|
11645
|
+
[data-pont-button][data-variant="secondary"]:hover {
|
|
11646
|
+
color: var(--pont-button-secondary-typography-color-hover);
|
|
11647
|
+
|
|
11648
|
+
background-color: var(--pont-button-secondary-bg-color-hover);
|
|
11649
|
+
}
|
|
11650
|
+
|
|
11651
|
+
[data-pont-button][data-variant="secondary"][aria-expanded] {
|
|
11652
|
+
color: var(--pont-button-secondary-typography-color-expanded);
|
|
11653
|
+
|
|
11654
|
+
background-color: var(--pont-button-secondary-bg-color-expanded);
|
|
11655
|
+
}
|
|
11656
|
+
|
|
11657
|
+
[data-pont-button][data-variant="secondary"]:focus-visible {
|
|
11658
|
+
border-style: var(--pont-button-secondary-border-style-focus);
|
|
11659
|
+
border-color: var(--pont-button-secondary-border-color-focus);
|
|
11660
|
+
border-top-width: var(--pont-button-secondary-border-width-t-focus);
|
|
11661
|
+
border-right-width: var(--pont-button-secondary-border-width-r-focus);
|
|
11662
|
+
border-bottom-width: var(--pont-button-secondary-border-width-b-focus);
|
|
11663
|
+
border-left-width: var(--pont-button-secondary-border-width-l-focus);
|
|
11664
|
+
|
|
11665
|
+
outline-width: var(--pont-button-secondary-outline-w-focus);
|
|
11666
|
+
outline-color: var(--pont-button-secondary-outline-color-focus);
|
|
11667
|
+
outline-style: var(--pont-button-secondary-outline-style-focus);
|
|
11668
|
+
outline-offset: var(--pont-button-secondary-outline-offset-focus);
|
|
11669
|
+
|
|
11670
|
+
box-shadow:
|
|
11671
|
+
var(--pont-button-secondary-effect-inset-shadow-focus),
|
|
11672
|
+
var(--pont-button-secondary-effect-inset-ring-focus),
|
|
11673
|
+
var(--pont-button-secondary-effect-ring-offset-focus),
|
|
11674
|
+
var(--pont-button-secondary-effect-ring-focus),
|
|
11675
|
+
var(--pont-button-secondary-effect-shadow-focus);
|
|
11676
|
+
}
|
|
11677
|
+
|
|
11678
|
+
[data-pont-button][data-variant="secondary"]:disabled {
|
|
11679
|
+
opacity: var(--pont-button-secondary-effect-opacity-disabled);
|
|
11680
|
+
}
|
|
11681
|
+
|
|
11682
|
+
[data-pont-button][data-variant="secondary"][aria-invalid] {
|
|
11683
|
+
border-style: var(--pont-button-secondary-border-style-invalid);
|
|
11684
|
+
border-color: var(--pont-button-secondary-border-color-invalid);
|
|
11685
|
+
border-top-width: var(--pont-button-secondary-border-width-t-invalid);
|
|
11686
|
+
border-right-width: var(--pont-button-secondary-border-width-r-invalid);
|
|
11687
|
+
border-bottom-width: var(--pont-button-secondary-border-width-b-invalid);
|
|
11688
|
+
border-left-width: var(--pont-button-secondary-border-width-l-invalid);
|
|
11689
|
+
|
|
11690
|
+
outline-width: var(--pont-button-secondary-outline-w-invalid);
|
|
11691
|
+
outline-color: var(--pont-button-secondary-outline-color-invalid);
|
|
11692
|
+
outline-style: var(--pont-button-secondary-outline-style-invalid);
|
|
11693
|
+
outline-offset: var(--pont-button-secondary-outline-offset-invalid);
|
|
11694
|
+
|
|
11695
|
+
box-shadow:
|
|
11696
|
+
var(--pont-button-secondary-effect-inset-shadow-invalid),
|
|
11697
|
+
var(--pont-button-secondary-effect-inset-ring-invalid),
|
|
11698
|
+
var(--pont-button-secondary-effect-ring-offset-invalid),
|
|
11699
|
+
var(--pont-button-secondary-effect-ring-invalid),
|
|
11700
|
+
var(--pont-button-secondary-effect-shadow-invalid);
|
|
11701
|
+
}
|
|
11702
|
+
|
|
11703
|
+
/* * OUTLINE * */
|
|
11704
|
+
|
|
11705
|
+
[data-pont-button][data-variant="outline"] {
|
|
11706
|
+
color: var(--pont-button-outline-typography-color);
|
|
11707
|
+
|
|
11708
|
+
background-color: var(--pont-button-outline-bg-color);
|
|
11709
|
+
|
|
11710
|
+
border-style: var(--pont-button-outline-border-style);
|
|
11711
|
+
border-color: var(--pont-button-outline-border-color);
|
|
11712
|
+
border-top-width: var(--pont-button-outline-border-width-t);
|
|
11713
|
+
border-right-width: var(--pont-button-outline-border-width-r);
|
|
11714
|
+
border-bottom-width: var(--pont-button-outline-border-width-b);
|
|
11715
|
+
border-left-width: var(--pont-button-outline-border-width-l);
|
|
11716
|
+
|
|
11717
|
+
outline-width: var(--pont-button-outline-outline-w);
|
|
11718
|
+
outline-color: var(--pont-button-outline-outline-color);
|
|
11719
|
+
outline-style: var(--pont-button-outline-outline-style);
|
|
11720
|
+
outline-offset: var(--pont-button-outline-outline-offset);
|
|
11721
|
+
|
|
11722
|
+
box-shadow:
|
|
11723
|
+
var(--pont-button-outline-effect-inset-shadow),
|
|
11724
|
+
var(--pont-button-outline-effect-inset-ring),
|
|
11725
|
+
var(--pont-button-outline-effect-ring-offset),
|
|
11726
|
+
var(--pont-button-outline-effect-ring),
|
|
11727
|
+
var(--pont-button-outline-effect-shadow);
|
|
11728
|
+
}
|
|
11729
|
+
|
|
11730
|
+
[data-pont-button][data-variant="outline"]:hover {
|
|
11731
|
+
color: var(--pont-button-outline-typography-color-hover);
|
|
11732
|
+
|
|
11733
|
+
background-color: var(--pont-button-outline-bg-color-hover);
|
|
11734
|
+
}
|
|
11735
|
+
|
|
11736
|
+
[data-pont-button][data-variant="outline"][aria-expanded] {
|
|
11737
|
+
color: var(--pont-button-outline-typography-color-expanded);
|
|
11738
|
+
|
|
11739
|
+
background-color: var(--pont-button-outline-bg-color-expanded);
|
|
11740
|
+
}
|
|
11741
|
+
|
|
11742
|
+
[data-pont-button][data-variant="outline"]:focus-visible {
|
|
11743
|
+
border-style: var(--pont-button-outline-border-style-focus);
|
|
11744
|
+
border-color: var(--pont-button-outline-border-color-focus);
|
|
11745
|
+
border-top-width: var(--pont-button-outline-border-width-t-focus);
|
|
11746
|
+
border-right-width: var(--pont-button-outline-border-width-r-focus);
|
|
11747
|
+
border-bottom-width: var(--pont-button-outline-border-width-b-focus);
|
|
11748
|
+
border-left-width: var(--pont-button-outline-border-width-l-focus);
|
|
11749
|
+
|
|
11750
|
+
outline-width: var(--pont-button-outline-outline-w-focus);
|
|
11751
|
+
outline-color: var(--pont-button-outline-outline-color-focus);
|
|
11752
|
+
outline-style: var(--pont-button-outline-outline-style-focus);
|
|
11753
|
+
outline-offset: var(--pont-button-outline-outline-offset-focus);
|
|
11754
|
+
|
|
11755
|
+
box-shadow:
|
|
11756
|
+
var(--pont-button-outline-effect-inset-shadow-focus),
|
|
11757
|
+
var(--pont-button-outline-effect-inset-ring-focus),
|
|
11758
|
+
var(--pont-button-outline-effect-ring-offset-focus),
|
|
11759
|
+
var(--pont-button-outline-effect-ring-focus),
|
|
11760
|
+
var(--pont-button-outline-effect-shadow-focus);
|
|
11761
|
+
}
|
|
11762
|
+
|
|
11763
|
+
[data-pont-button][data-variant="outline"]:disabled {
|
|
11764
|
+
opacity: var(--pont-button-outline-effect-opacity-disabled);
|
|
11765
|
+
}
|
|
11766
|
+
|
|
11767
|
+
[data-pont-button][data-variant="outline"][aria-invalid] {
|
|
11768
|
+
border-style: var(--pont-button-outline-border-style-invalid);
|
|
11769
|
+
border-color: var(--pont-button-outline-border-color-invalid);
|
|
11770
|
+
border-top-width: var(--pont-button-outline-border-width-t-invalid);
|
|
11771
|
+
border-right-width: var(--pont-button-outline-border-width-r-invalid);
|
|
11772
|
+
border-bottom-width: var(--pont-button-outline-border-width-b-invalid);
|
|
11773
|
+
border-left-width: var(--pont-button-outline-border-width-l-invalid);
|
|
11774
|
+
|
|
11775
|
+
outline-width: var(--pont-button-outline-outline-w-invalid);
|
|
11776
|
+
outline-color: var(--pont-button-outline-outline-color-invalid);
|
|
11777
|
+
outline-style: var(--pont-button-outline-outline-style-invalid);
|
|
11778
|
+
outline-offset: var(--pont-button-outline-outline-offset-invalid);
|
|
11779
|
+
|
|
11780
|
+
box-shadow:
|
|
11781
|
+
var(--pont-button-outline-effect-inset-shadow-invalid),
|
|
11782
|
+
var(--pont-button-outline-effect-inset-ring-invalid),
|
|
11783
|
+
var(--pont-button-outline-effect-ring-offset-invalid),
|
|
11784
|
+
var(--pont-button-outline-effect-ring-invalid),
|
|
11785
|
+
var(--pont-button-outline-effect-shadow-invalid);
|
|
11786
|
+
}
|
|
11787
|
+
|
|
11788
|
+
/* * GHOST * */
|
|
11789
|
+
|
|
11790
|
+
[data-pont-button][data-variant="ghost"] {
|
|
11791
|
+
color: var(--pont-button-ghost-typography-color);
|
|
11792
|
+
|
|
11793
|
+
background-color: var(--pont-button-ghost-bg-color);
|
|
11794
|
+
|
|
11795
|
+
border-style: var(--pont-button-ghost-border-style);
|
|
11796
|
+
border-color: var(--pont-button-ghost-border-color);
|
|
11797
|
+
border-top-width: var(--pont-button-ghost-border-width-t);
|
|
11798
|
+
border-right-width: var(--pont-button-ghost-border-width-r);
|
|
11799
|
+
border-bottom-width: var(--pont-button-ghost-border-width-b);
|
|
11800
|
+
border-left-width: var(--pont-button-ghost-border-width-l);
|
|
11801
|
+
|
|
11802
|
+
outline-width: var(--pont-button-ghost-outline-w);
|
|
11803
|
+
outline-color: var(--pont-button-ghost-outline-color);
|
|
11804
|
+
outline-style: var(--pont-button-ghost-outline-style);
|
|
11805
|
+
outline-offset: var(--pont-button-ghost-outline-offset);
|
|
11806
|
+
|
|
11807
|
+
box-shadow:
|
|
11808
|
+
var(--pont-button-ghost-effect-inset-shadow),
|
|
11809
|
+
var(--pont-button-ghost-effect-inset-ring),
|
|
11810
|
+
var(--pont-button-ghost-effect-ring-offset),
|
|
11811
|
+
var(--pont-button-ghost-effect-ring), var(--pont-button-ghost-effect-shadow);
|
|
11812
|
+
}
|
|
11813
|
+
|
|
11814
|
+
[data-pont-button][data-variant="ghost"]:hover {
|
|
11815
|
+
color: var(--pont-button-ghost-typography-color-hover);
|
|
11816
|
+
|
|
11817
|
+
background-color: var(--pont-button-ghost-bg-color-hover);
|
|
10555
11818
|
}
|
|
10556
11819
|
|
|
10557
|
-
pont-button
|
|
10558
|
-
|
|
10559
|
-
|
|
11820
|
+
[data-pont-button][data-variant="ghost"][aria-expanded] {
|
|
11821
|
+
color: var(--pont-button-ghost-typography-color-expanded);
|
|
11822
|
+
|
|
11823
|
+
background-color: var(--pont-button-ghost-bg-color-expanded);
|
|
10560
11824
|
}
|
|
10561
11825
|
|
|
10562
|
-
|
|
10563
|
-
|
|
10564
|
-
|
|
10565
|
-
|
|
10566
|
-
|
|
11826
|
+
[data-pont-button][data-variant="ghost"]:focus-visible {
|
|
11827
|
+
border-style: var(--pont-button-ghost-border-style-focus);
|
|
11828
|
+
border-color: var(--pont-button-ghost-border-color-focus);
|
|
11829
|
+
border-top-width: var(--pont-button-ghost-border-width-t-focus);
|
|
11830
|
+
border-right-width: var(--pont-button-ghost-border-width-r-focus);
|
|
11831
|
+
border-bottom-width: var(--pont-button-ghost-border-width-b-focus);
|
|
11832
|
+
border-left-width: var(--pont-button-ghost-border-width-l-focus);
|
|
10567
11833
|
|
|
10568
|
-
|
|
11834
|
+
outline-width: var(--pont-button-ghost-outline-w-focus);
|
|
11835
|
+
outline-color: var(--pont-button-ghost-outline-color-focus);
|
|
11836
|
+
outline-style: var(--pont-button-ghost-outline-style-focus);
|
|
11837
|
+
outline-offset: var(--pont-button-ghost-outline-offset-focus);
|
|
10569
11838
|
|
|
10570
|
-
|
|
10571
|
-
|
|
10572
|
-
|
|
10573
|
-
|
|
10574
|
-
|
|
10575
|
-
|
|
10576
|
-
font-weight: var(--pont-button-default-font-weight);
|
|
10577
|
-
font-size: var(--pont-button-default-font-size);
|
|
10578
|
-
border-radius: var(--pont-button-default-radius);
|
|
11839
|
+
box-shadow:
|
|
11840
|
+
var(--pont-button-ghost-effect-inset-shadow-focus),
|
|
11841
|
+
var(--pont-button-ghost-effect-inset-ring-focus),
|
|
11842
|
+
var(--pont-button-ghost-effect-ring-offset-focus),
|
|
11843
|
+
var(--pont-button-ghost-effect-ring-focus),
|
|
11844
|
+
var(--pont-button-ghost-effect-shadow-focus);
|
|
10579
11845
|
}
|
|
10580
11846
|
|
|
10581
|
-
|
|
10582
|
-
|
|
11847
|
+
[data-pont-button][data-variant="ghost"]:disabled {
|
|
11848
|
+
opacity: var(--pont-button-ghost-effect-opacity-disabled);
|
|
10583
11849
|
}
|
|
10584
11850
|
|
|
10585
|
-
|
|
10586
|
-
border-
|
|
11851
|
+
[data-pont-button][data-variant="ghost"][aria-invalid] {
|
|
11852
|
+
border-style: var(--pont-button-ghost-border-style-invalid);
|
|
11853
|
+
border-color: var(--pont-button-ghost-border-color-invalid);
|
|
11854
|
+
border-top-width: var(--pont-button-ghost-border-width-t-invalid);
|
|
11855
|
+
border-right-width: var(--pont-button-ghost-border-width-r-invalid);
|
|
11856
|
+
border-bottom-width: var(--pont-button-ghost-border-width-b-invalid);
|
|
11857
|
+
border-left-width: var(--pont-button-ghost-border-width-l-invalid);
|
|
11858
|
+
|
|
11859
|
+
outline-width: var(--pont-button-ghost-outline-w-invalid);
|
|
11860
|
+
outline-color: var(--pont-button-ghost-outline-color-invalid);
|
|
11861
|
+
outline-style: var(--pont-button-ghost-outline-style-invalid);
|
|
11862
|
+
outline-offset: var(--pont-button-ghost-outline-offset-invalid);
|
|
11863
|
+
|
|
10587
11864
|
box-shadow:
|
|
10588
|
-
|
|
10589
|
-
|
|
10590
|
-
|
|
10591
|
-
|
|
10592
|
-
|
|
10593
|
-
0 0 rgb(0 0 0);
|
|
11865
|
+
var(--pont-button-ghost-effect-inset-shadow-invalid),
|
|
11866
|
+
var(--pont-button-ghost-effect-inset-ring-invalid),
|
|
11867
|
+
var(--pont-button-ghost-effect-ring-offset-invalid),
|
|
11868
|
+
var(--pont-button-ghost-effect-ring-invalid),
|
|
11869
|
+
var(--pont-button-ghost-effect-shadow-invalid);
|
|
10594
11870
|
}
|
|
10595
11871
|
|
|
10596
|
-
|
|
10597
|
-
opacity: var(--pont-button-default-opacity-disabled);
|
|
10598
|
-
}
|
|
11872
|
+
/* * DESTRUCTIVE * */
|
|
10599
11873
|
|
|
10600
|
-
|
|
11874
|
+
[data-pont-button][data-variant="destructive"] {
|
|
11875
|
+
color: var(--pont-button-destructive-typography-color);
|
|
10601
11876
|
|
|
10602
|
-
|
|
10603
|
-
color: var(--pont-button-secondary-color-text);
|
|
10604
|
-
background-color: var(--pont-button-secondary-color-bg);
|
|
10605
|
-
border-color: var(--pont-button-secondary-color-border);
|
|
10606
|
-
border-width: var(--pont-button-secondary-width-border);
|
|
10607
|
-
font-family: var(--pont-button-secondary-font-family);
|
|
10608
|
-
font-weight: var(--pont-button-secondary-font-weight);
|
|
10609
|
-
font-size: var(--pont-button-secondary-font-size);
|
|
10610
|
-
border-radius: var(--pont-button-secondary-radius);
|
|
10611
|
-
}
|
|
11877
|
+
background-color: var(--pont-button-destructive-bg-color);
|
|
10612
11878
|
|
|
10613
|
-
|
|
10614
|
-
|
|
10615
|
-
|
|
11879
|
+
border-style: var(--pont-button-destructive-border-style);
|
|
11880
|
+
border-color: var(--pont-button-destructive-border-color);
|
|
11881
|
+
border-top-width: var(--pont-button-destructive-border-width-t);
|
|
11882
|
+
border-right-width: var(--pont-button-destructive-border-width-r);
|
|
11883
|
+
border-bottom-width: var(--pont-button-destructive-border-width-b);
|
|
11884
|
+
border-left-width: var(--pont-button-destructive-border-width-l);
|
|
10616
11885
|
|
|
10617
|
-
|
|
10618
|
-
color: var(--pont-button-
|
|
10619
|
-
|
|
10620
|
-
|
|
11886
|
+
outline-width: var(--pont-button-destructive-outline-w);
|
|
11887
|
+
outline-color: var(--pont-button-destructive-outline-color);
|
|
11888
|
+
outline-style: var(--pont-button-destructive-outline-style);
|
|
11889
|
+
outline-offset: var(--pont-button-destructive-outline-offset);
|
|
10621
11890
|
|
|
10622
|
-
pont-button > [data-slot='button'][data-variant='secondary']:focus-visible {
|
|
10623
|
-
border-color: var(--pont-button-secondary-color-border-focus);
|
|
10624
11891
|
box-shadow:
|
|
10625
|
-
|
|
10626
|
-
|
|
10627
|
-
|
|
10628
|
-
|
|
10629
|
-
|
|
10630
|
-
0 0 rgb(0 0 0);
|
|
11892
|
+
var(--pont-button-destructive-effect-inset-shadow),
|
|
11893
|
+
var(--pont-button-destructive-effect-inset-ring),
|
|
11894
|
+
var(--pont-button-destructive-effect-ring-offset),
|
|
11895
|
+
var(--pont-button-destructive-effect-ring),
|
|
11896
|
+
var(--pont-button-destructive-effect-shadow);
|
|
10631
11897
|
}
|
|
10632
11898
|
|
|
10633
|
-
|
|
10634
|
-
|
|
11899
|
+
[data-pont-button][data-variant="destructive"]:hover {
|
|
11900
|
+
color: var(--pont-button-destructive-typography-color-hover);
|
|
11901
|
+
|
|
11902
|
+
background-color: var(--pont-button-destructive-bg-color-hover);
|
|
10635
11903
|
}
|
|
10636
11904
|
|
|
10637
|
-
|
|
11905
|
+
[data-pont-button][data-variant="destructive"][aria-expanded] {
|
|
11906
|
+
color: var(--pont-button-destructive-typography-color-expanded);
|
|
10638
11907
|
|
|
10639
|
-
|
|
10640
|
-
background-color: var(--pont-button-outline-color-bg);
|
|
10641
|
-
border-color: var(--pont-button-outline-color-border);
|
|
10642
|
-
border-width: var(--pont-button-outline-width-border);
|
|
10643
|
-
font-family: var(--pont-button-outline-font-family);
|
|
10644
|
-
font-weight: var(--pont-button-outline-font-weight);
|
|
10645
|
-
font-size: var(--pont-button-outline-font-size);
|
|
10646
|
-
border-radius: var(--pont-button-outline-radius);
|
|
11908
|
+
background-color: var(--pont-button-destructive-bg-color-expanded);
|
|
10647
11909
|
}
|
|
10648
11910
|
|
|
10649
|
-
|
|
10650
|
-
|
|
10651
|
-
|
|
10652
|
-
|
|
11911
|
+
[data-pont-button][data-variant="destructive"]:focus-visible {
|
|
11912
|
+
border-style: var(--pont-button-destructive-border-style-focus);
|
|
11913
|
+
border-color: var(--pont-button-destructive-border-color-focus);
|
|
11914
|
+
border-top-width: var(--pont-button-destructive-border-width-t-focus);
|
|
11915
|
+
border-right-width: var(--pont-button-destructive-border-width-r-focus);
|
|
11916
|
+
border-bottom-width: var(--pont-button-destructive-border-width-b-focus);
|
|
11917
|
+
border-left-width: var(--pont-button-destructive-border-width-l-focus);
|
|
10653
11918
|
|
|
10654
|
-
|
|
10655
|
-
color: var(--pont-button-outline-color-
|
|
10656
|
-
|
|
10657
|
-
|
|
11919
|
+
outline-width: var(--pont-button-destructive-outline-w-focus);
|
|
11920
|
+
outline-color: var(--pont-button-destructive-outline-color-focus);
|
|
11921
|
+
outline-style: var(--pont-button-destructive-outline-style-focus);
|
|
11922
|
+
outline-offset: var(--pont-button-destructive-outline-offset-focus);
|
|
10658
11923
|
|
|
10659
|
-
pont-button > [data-slot='button'][data-variant='outline']:focus-visible {
|
|
10660
|
-
border-color: var(--pont-button-outline-color-border-focus);
|
|
10661
11924
|
box-shadow:
|
|
10662
|
-
|
|
10663
|
-
|
|
10664
|
-
|
|
10665
|
-
|
|
10666
|
-
|
|
10667
|
-
0 0 rgb(0 0 0);
|
|
11925
|
+
var(--pont-button-destructive-effect-inset-shadow-focus),
|
|
11926
|
+
var(--pont-button-destructive-effect-inset-ring-focus),
|
|
11927
|
+
var(--pont-button-destructive-effect-ring-offset-focus),
|
|
11928
|
+
var(--pont-button-destructive-effect-ring-focus),
|
|
11929
|
+
var(--pont-button-destructive-effect-shadow-focus);
|
|
10668
11930
|
}
|
|
10669
11931
|
|
|
10670
|
-
|
|
10671
|
-
opacity: var(--pont-button-
|
|
11932
|
+
[data-pont-button][data-variant="destructive"]:disabled {
|
|
11933
|
+
opacity: var(--pont-button-destructive-effect-opacity-disabled);
|
|
10672
11934
|
}
|
|
10673
11935
|
|
|
10674
|
-
|
|
11936
|
+
[data-pont-button][data-variant="destructive"][aria-invalid] {
|
|
11937
|
+
border-style: var(--pont-button-destructive-border-style-invalid);
|
|
11938
|
+
border-color: var(--pont-button-destructive-border-color-invalid);
|
|
11939
|
+
border-top-width: var(--pont-button-destructive-border-width-t-invalid);
|
|
11940
|
+
border-right-width: var(--pont-button-destructive-border-width-r-invalid);
|
|
11941
|
+
border-bottom-width: var(--pont-button-destructive-border-width-b-invalid);
|
|
11942
|
+
border-left-width: var(--pont-button-destructive-border-width-l-invalid);
|
|
10675
11943
|
|
|
10676
|
-
|
|
10677
|
-
|
|
10678
|
-
|
|
10679
|
-
|
|
10680
|
-
border-width: var(--pont-button-ghost-width-border);
|
|
10681
|
-
border-radius: var(--pont-button-ghost-radius);
|
|
10682
|
-
}
|
|
11944
|
+
outline-width: var(--pont-button-destructive-outline-w-invalid);
|
|
11945
|
+
outline-color: var(--pont-button-destructive-outline-color-invalid);
|
|
11946
|
+
outline-style: var(--pont-button-destructive-outline-style-invalid);
|
|
11947
|
+
outline-offset: var(--pont-button-destructive-outline-offset-invalid);
|
|
10683
11948
|
|
|
10684
|
-
|
|
10685
|
-
|
|
10686
|
-
|
|
11949
|
+
box-shadow:
|
|
11950
|
+
var(--pont-button-destructive-effect-inset-shadow-invalid),
|
|
11951
|
+
var(--pont-button-destructive-effect-inset-ring-invalid),
|
|
11952
|
+
var(--pont-button-destructive-effect-ring-offset-invalid),
|
|
11953
|
+
var(--pont-button-destructive-effect-ring-invalid),
|
|
11954
|
+
var(--pont-button-destructive-effect-shadow-invalid);
|
|
10687
11955
|
}
|
|
10688
11956
|
|
|
10689
|
-
|
|
10690
|
-
color: var(--pont-button-ghost-color-text-expanded);
|
|
10691
|
-
background-color: var(--pont-button-ghost-color-bg-expanded);
|
|
10692
|
-
}
|
|
11957
|
+
/* * LINK * */
|
|
10693
11958
|
|
|
10694
|
-
|
|
10695
|
-
|
|
10696
|
-
}
|
|
11959
|
+
[data-pont-button][data-variant="link"] {
|
|
11960
|
+
color: var(--pont-button-link-typography-color);
|
|
10697
11961
|
|
|
10698
|
-
|
|
11962
|
+
background-color: var(--pont-button-link-bg-color);
|
|
10699
11963
|
|
|
10700
|
-
|
|
10701
|
-
color: var(--pont-button-
|
|
10702
|
-
|
|
10703
|
-
border-
|
|
10704
|
-
border-width: var(--pont-button-
|
|
10705
|
-
|
|
10706
|
-
font-weight: var(--pont-button-destructive-font-weight);
|
|
10707
|
-
font-size: var(--pont-button-destructive-font-size);
|
|
10708
|
-
border-radius: var(--pont-button-destructive-radius);
|
|
10709
|
-
}
|
|
11964
|
+
border-style: var(--pont-button-link-border-style);
|
|
11965
|
+
border-color: var(--pont-button-link-border-color);
|
|
11966
|
+
border-top-width: var(--pont-button-link-border-width-t);
|
|
11967
|
+
border-right-width: var(--pont-button-link-border-width-r);
|
|
11968
|
+
border-bottom-width: var(--pont-button-link-border-width-b);
|
|
11969
|
+
border-left-width: var(--pont-button-link-border-width-l);
|
|
10710
11970
|
|
|
10711
|
-
|
|
10712
|
-
|
|
10713
|
-
|
|
11971
|
+
outline-width: var(--pont-button-link-outline-w);
|
|
11972
|
+
outline-color: var(--pont-button-link-outline-color);
|
|
11973
|
+
outline-style: var(--pont-button-link-outline-style);
|
|
11974
|
+
outline-offset: var(--pont-button-link-outline-offset);
|
|
10714
11975
|
|
|
10715
|
-
pont-button > [data-slot='button'][data-variant='destructive']:focus-visible {
|
|
10716
|
-
border-color: var(--pont-button-destructive-color-border-focus);
|
|
10717
11976
|
box-shadow:
|
|
10718
|
-
|
|
10719
|
-
|
|
10720
|
-
|
|
10721
|
-
|
|
10722
|
-
|
|
10723
|
-
|
|
11977
|
+
var(--pont-button-link-effect-inset-shadow),
|
|
11978
|
+
var(--pont-button-link-effect-inset-ring),
|
|
11979
|
+
var(--pont-button-link-effect-ring-offset),
|
|
11980
|
+
var(--pont-button-link-effect-ring), var(--pont-button-link-effect-shadow);
|
|
11981
|
+
}
|
|
11982
|
+
|
|
11983
|
+
[data-pont-button][data-variant="link"]:hover {
|
|
11984
|
+
color: var(--pont-button-link-typography-color-hover);
|
|
11985
|
+
text-decoration-line: var(
|
|
11986
|
+
--pont-button-link-typography-decoration-line-hover
|
|
11987
|
+
);
|
|
11988
|
+
text-decoration-color: var(
|
|
11989
|
+
--pont-button-link-typography-decoration-color-hover
|
|
11990
|
+
);
|
|
11991
|
+
text-decoration-style: var(
|
|
11992
|
+
--pont-button-link-typography-decoration-style-hover
|
|
11993
|
+
);
|
|
11994
|
+
text-decoration-thickness: var(
|
|
11995
|
+
--pont-button-link-typography-decoration-thickness-hover
|
|
11996
|
+
);
|
|
11997
|
+
text-underline-offset: var(
|
|
11998
|
+
--pont-button-link-typography-underline-offset-hover
|
|
11999
|
+
);
|
|
12000
|
+
|
|
12001
|
+
background-color: var(--pont-button-link-bg-color-hover);
|
|
10724
12002
|
}
|
|
10725
12003
|
|
|
10726
|
-
|
|
10727
|
-
|
|
12004
|
+
[data-pont-button][data-variant="link"][aria-expanded] {
|
|
12005
|
+
color: var(--pont-button-link-typography-color-expanded);
|
|
12006
|
+
|
|
12007
|
+
background-color: var(--pont-button-link-bg-color-expanded);
|
|
10728
12008
|
}
|
|
10729
12009
|
|
|
10730
|
-
|
|
12010
|
+
[data-pont-button][data-variant="link"]:focus-visible {
|
|
12011
|
+
border-style: var(--pont-button-link-border-style-focus);
|
|
12012
|
+
border-color: var(--pont-button-link-border-color-focus);
|
|
12013
|
+
border-top-width: var(--pont-button-link-border-width-t-focus);
|
|
12014
|
+
border-right-width: var(--pont-button-link-border-width-r-focus);
|
|
12015
|
+
border-bottom-width: var(--pont-button-link-border-width-b-focus);
|
|
12016
|
+
border-left-width: var(--pont-button-link-border-width-l-focus);
|
|
10731
12017
|
|
|
10732
|
-
|
|
10733
|
-
color: var(--pont-button-link-color-
|
|
10734
|
-
|
|
10735
|
-
|
|
10736
|
-
|
|
10737
|
-
|
|
10738
|
-
|
|
10739
|
-
|
|
12018
|
+
outline-width: var(--pont-button-link-outline-w-focus);
|
|
12019
|
+
outline-color: var(--pont-button-link-outline-color-focus);
|
|
12020
|
+
outline-style: var(--pont-button-link-outline-style-focus);
|
|
12021
|
+
outline-offset: var(--pont-button-link-outline-offset-focus);
|
|
12022
|
+
|
|
12023
|
+
box-shadow:
|
|
12024
|
+
var(--pont-button-link-effect-inset-shadow-focus),
|
|
12025
|
+
var(--pont-button-link-effect-inset-ring-focus),
|
|
12026
|
+
var(--pont-button-link-effect-ring-offset-focus),
|
|
12027
|
+
var(--pont-button-link-effect-ring-focus),
|
|
12028
|
+
var(--pont-button-link-effect-shadow-focus);
|
|
10740
12029
|
}
|
|
10741
12030
|
|
|
10742
|
-
|
|
10743
|
-
|
|
12031
|
+
[data-pont-button][data-variant="link"]:disabled {
|
|
12032
|
+
opacity: var(--pont-button-link-effect-opacity-disabled);
|
|
10744
12033
|
}
|
|
10745
12034
|
|
|
10746
|
-
|
|
10747
|
-
|
|
12035
|
+
[data-pont-button][data-variant="link"][aria-invalid] {
|
|
12036
|
+
border-style: var(--pont-button-link-border-style-invalid);
|
|
12037
|
+
border-color: var(--pont-button-link-border-color-invalid);
|
|
12038
|
+
border-top-width: var(--pont-button-link-border-width-t-invalid);
|
|
12039
|
+
border-right-width: var(--pont-button-link-border-width-r-invalid);
|
|
12040
|
+
border-bottom-width: var(--pont-button-link-border-width-b-invalid);
|
|
12041
|
+
border-left-width: var(--pont-button-link-border-width-l-invalid);
|
|
12042
|
+
|
|
12043
|
+
outline-width: var(--pont-button-link-outline-w-invalid);
|
|
12044
|
+
outline-color: var(--pont-button-link-outline-color-invalid);
|
|
12045
|
+
outline-style: var(--pont-button-link-outline-style-invalid);
|
|
12046
|
+
outline-offset: var(--pont-button-link-outline-offset-invalid);
|
|
12047
|
+
|
|
12048
|
+
box-shadow:
|
|
12049
|
+
var(--pont-button-link-effect-inset-shadow-invalid),
|
|
12050
|
+
var(--pont-button-link-effect-inset-ring-invalid),
|
|
12051
|
+
var(--pont-button-link-effect-ring-offset-invalid),
|
|
12052
|
+
var(--pont-button-link-effect-ring-invalid),
|
|
12053
|
+
var(--pont-button-link-effect-shadow-invalid);
|
|
10748
12054
|
}
|
|
10749
12055
|
|
|
10750
12056
|
/*
|
|
@@ -10755,269 +12061,370 @@ pont-button > [data-slot='button'][data-variant='link']:disabled {
|
|
|
10755
12061
|
|
|
10756
12062
|
/* * DEFAULT * */
|
|
10757
12063
|
|
|
10758
|
-
|
|
10759
|
-
|
|
10760
|
-
height: var(--pont-button-
|
|
12064
|
+
pont-button:has([data-pont-button][data-size="default"]) {
|
|
12065
|
+
width: var(--pont-button-sizing-w-default);
|
|
12066
|
+
height: var(--pont-button-sizing-h-default);
|
|
10761
12067
|
}
|
|
10762
12068
|
|
|
10763
|
-
|
|
10764
|
-
pont-button
|
|
10765
|
-
|
|
10766
|
-
)
|
|
10767
|
-
|
|
12069
|
+
[data-pont-button][data-size="default"] {
|
|
12070
|
+
-moz-column-gap: var(--pont-button-layout-gap-x-default);
|
|
12071
|
+
column-gap: var(--pont-button-layout-gap-x-default);
|
|
12072
|
+
row-gap: var(--pont-button-layout-gap-y-default);
|
|
12073
|
+
|
|
12074
|
+
padding-top: var(--pont-button-spacing-pt-default);
|
|
12075
|
+
padding-right: var(--pont-button-spacing-pr-default);
|
|
12076
|
+
padding-bottom: var(--pont-button-spacing-pb-default);
|
|
12077
|
+
padding-left: var(--pont-button-spacing-pl-default);
|
|
12078
|
+
|
|
12079
|
+
font-size: var(--pont-button-typography-size-default);
|
|
12080
|
+
font-weight: var(--pont-button-typography-weight-default);
|
|
12081
|
+
letter-spacing: var(--pont-button-typography-tracking-default);
|
|
12082
|
+
line-height: var(--pont-button-typography-leading-default);
|
|
12083
|
+
|
|
12084
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-default);
|
|
12085
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-default);
|
|
12086
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-default);
|
|
12087
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-default);
|
|
10768
12088
|
}
|
|
10769
12089
|
|
|
10770
|
-
|
|
10771
|
-
|
|
10772
|
-
) {
|
|
10773
|
-
|
|
12090
|
+
/* HAS ICON START/END */
|
|
12091
|
+
|
|
12092
|
+
[data-pont-button][data-size="default"]:has(.pont-icon-inline-start) {
|
|
12093
|
+
padding-top: var(--pont-button-spacing-pt-default-has-icon-start);
|
|
12094
|
+
padding-right: var(--pont-button-spacing-pr-default-has-icon-start);
|
|
12095
|
+
padding-bottom: var(--pont-button-spacing-pb-default-has-icon-start);
|
|
12096
|
+
padding-left: var(--pont-button-spacing-pl-default-has-icon-start);
|
|
10774
12097
|
}
|
|
10775
12098
|
|
|
10776
|
-
pont-button:has(
|
|
10777
|
-
|
|
10778
|
-
)
|
|
10779
|
-
|
|
12099
|
+
[data-pont-button][data-size="default"]:has(.pont-icon-inline-end) {
|
|
12100
|
+
padding-top: var(--pont-button-spacing-pt-default-has-icon-end);
|
|
12101
|
+
padding-right: var(--pont-button-spacing-pr-default-has-icon-end);
|
|
12102
|
+
padding-bottom: var(--pont-button-spacing-pb-default-has-icon-end);
|
|
12103
|
+
padding-left: var(--pont-button-spacing-pl-default-has-icon-end);
|
|
10780
12104
|
}
|
|
10781
12105
|
|
|
10782
|
-
pont-button:has(
|
|
10783
|
-
|
|
10784
|
-
) {
|
|
10785
|
-
|
|
12106
|
+
[data-pont-button][data-size="default"]:has(.pont-icon-inline-start):has(
|
|
12107
|
+
.pont-icon-inline-end
|
|
12108
|
+
) {
|
|
12109
|
+
padding-right: var(--pont-button-spacing-pr-default-has-icon-end);
|
|
12110
|
+
padding-left: var(--pont-button-spacing-pl-default-has-icon-start);
|
|
10786
12111
|
}
|
|
10787
12112
|
|
|
10788
|
-
|
|
10789
|
-
|
|
10790
|
-
|
|
10791
|
-
|
|
12113
|
+
/* BUTTON > ICON (& SPINNER) */
|
|
12114
|
+
|
|
12115
|
+
[data-pont-button][data-size="default"] > svg {
|
|
12116
|
+
width: var(--pont-button-icon-sizing-w-default);
|
|
12117
|
+
height: var(--pont-button-icon-sizing-h-default);
|
|
10792
12118
|
}
|
|
10793
12119
|
|
|
10794
|
-
pont-button
|
|
10795
|
-
|
|
10796
|
-
)
|
|
10797
|
-
|
|
12120
|
+
[data-pont-button][data-size="default"] > pont-spinner {
|
|
12121
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-default);
|
|
12122
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-default);
|
|
12123
|
+
}
|
|
12124
|
+
|
|
12125
|
+
/* * X SMALL * */
|
|
12126
|
+
|
|
12127
|
+
pont-button:has([data-pont-button][data-size="xs"]) {
|
|
12128
|
+
width: var(--pont-button-sizing-w-xs);
|
|
12129
|
+
height: var(--pont-button-sizing-h-xs);
|
|
10798
12130
|
}
|
|
10799
12131
|
|
|
10800
|
-
|
|
10801
|
-
gap: var(--pont-button-
|
|
12132
|
+
[data-pont-button][data-size="xs"] {
|
|
12133
|
+
-moz-column-gap: var(--pont-button-layout-gap-x-xs);
|
|
12134
|
+
column-gap: var(--pont-button-layout-gap-x-xs);
|
|
12135
|
+
row-gap: var(--pont-button-layout-gap-y-xs);
|
|
10802
12136
|
|
|
10803
|
-
padding-
|
|
10804
|
-
padding-right: var(--pont-button-
|
|
12137
|
+
padding-top: var(--pont-button-spacing-pt-xs);
|
|
12138
|
+
padding-right: var(--pont-button-spacing-pr-xs);
|
|
12139
|
+
padding-bottom: var(--pont-button-spacing-pb-xs);
|
|
12140
|
+
padding-left: var(--pont-button-spacing-pl-xs);
|
|
10805
12141
|
|
|
10806
|
-
font-size: var(--pont-button-
|
|
10807
|
-
|
|
12142
|
+
font-size: var(--pont-button-typography-size-xs);
|
|
12143
|
+
font-weight: var(--pont-button-typography-weight-xs);
|
|
12144
|
+
letter-spacing: var(--pont-button-typography-tracking-xs);
|
|
12145
|
+
line-height: var(--pont-button-typography-leading-xs);
|
|
10808
12146
|
|
|
10809
|
-
border-radius: var(--pont-button-radius);
|
|
12147
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-xs);
|
|
12148
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-xs);
|
|
12149
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-xs);
|
|
12150
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-xs);
|
|
10810
12151
|
}
|
|
10811
12152
|
|
|
10812
|
-
|
|
10813
|
-
|
|
10814
|
-
|
|
12153
|
+
/* HAS ICON START/END */
|
|
12154
|
+
|
|
12155
|
+
[data-pont-button][data-size="xs"]:has(.pont-icon-inline-start) {
|
|
12156
|
+
padding-top: var(--pont-button-spacing-pt-xs-has-icon-start);
|
|
12157
|
+
padding-right: var(--pont-button-spacing-pr-xs-has-icon-start);
|
|
12158
|
+
padding-bottom: var(--pont-button-spacing-pb-xs-has-icon-start);
|
|
12159
|
+
padding-left: var(--pont-button-spacing-pl-xs-has-icon-start);
|
|
10815
12160
|
}
|
|
10816
12161
|
|
|
10817
|
-
pont-button
|
|
10818
|
-
|
|
10819
|
-
padding-right: var(--pont-button-
|
|
12162
|
+
[data-pont-button][data-size="xs"]:has(.pont-icon-inline-end) {
|
|
12163
|
+
padding-top: var(--pont-button-spacing-pt-xs-has-icon-end);
|
|
12164
|
+
padding-right: var(--pont-button-spacing-pr-xs-has-icon-end);
|
|
12165
|
+
padding-bottom: var(--pont-button-spacing-pb-xs-has-icon-end);
|
|
12166
|
+
padding-left: var(--pont-button-spacing-pl-xs-has-icon-end);
|
|
10820
12167
|
}
|
|
10821
12168
|
|
|
10822
|
-
|
|
10823
|
-
|
|
10824
|
-
|
|
12169
|
+
[data-pont-button][data-size="xs"]:has(.pont-icon-inline-start):has(
|
|
12170
|
+
.pont-icon-inline-end
|
|
12171
|
+
) {
|
|
12172
|
+
padding-right: var(--pont-button-spacing-pr-xs-has-icon-end);
|
|
12173
|
+
padding-left: var(--pont-button-spacing-pl-xs-has-icon-start);
|
|
10825
12174
|
}
|
|
10826
12175
|
|
|
10827
|
-
/*
|
|
12176
|
+
/* BUTTON > ICON (& SPINNER) */
|
|
10828
12177
|
|
|
10829
|
-
|
|
10830
|
-
|
|
10831
|
-
height: var(--pont-button-
|
|
12178
|
+
[data-pont-button][data-size="xs"] > svg {
|
|
12179
|
+
width: var(--pont-button-icon-sizing-w-xs);
|
|
12180
|
+
height: var(--pont-button-icon-sizing-h-xs);
|
|
10832
12181
|
}
|
|
10833
12182
|
|
|
10834
|
-
|
|
10835
|
-
|
|
10836
|
-
|
|
12183
|
+
[data-pont-button][data-size="xs"] > pont-spinner {
|
|
12184
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-xs);
|
|
12185
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-xs);
|
|
12186
|
+
}
|
|
12187
|
+
|
|
12188
|
+
/* * SMALL * */
|
|
10837
12189
|
|
|
10838
|
-
|
|
12190
|
+
pont-button:has([data-pont-button][data-size="sm"]) {
|
|
12191
|
+
width: var(--pont-button-sizing-w-sm);
|
|
12192
|
+
height: var(--pont-button-sizing-h-sm);
|
|
10839
12193
|
}
|
|
10840
12194
|
|
|
10841
|
-
|
|
10842
|
-
|
|
10843
|
-
|
|
12195
|
+
[data-pont-button][data-size="sm"] {
|
|
12196
|
+
-moz-column-gap: var(--pont-button-layout-gap-x-sm);
|
|
12197
|
+
column-gap: var(--pont-button-layout-gap-x-sm);
|
|
12198
|
+
row-gap: var(--pont-button-layout-gap-y-sm);
|
|
12199
|
+
|
|
12200
|
+
padding-top: var(--pont-button-spacing-pt-sm);
|
|
12201
|
+
padding-right: var(--pont-button-spacing-pr-sm);
|
|
12202
|
+
padding-bottom: var(--pont-button-spacing-pb-sm);
|
|
12203
|
+
padding-left: var(--pont-button-spacing-pl-sm);
|
|
12204
|
+
|
|
12205
|
+
font-size: var(--pont-button-typography-size-sm);
|
|
12206
|
+
font-weight: var(--pont-button-typography-weight-sm);
|
|
12207
|
+
letter-spacing: var(--pont-button-typography-tracking-sm);
|
|
12208
|
+
line-height: var(--pont-button-typography-leading-sm);
|
|
10844
12209
|
|
|
10845
|
-
|
|
10846
|
-
|
|
12210
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-sm);
|
|
12211
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-sm);
|
|
12212
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-sm);
|
|
12213
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-sm);
|
|
10847
12214
|
}
|
|
10848
12215
|
|
|
10849
|
-
|
|
10850
|
-
|
|
12216
|
+
/* HAS ICON START/END */
|
|
12217
|
+
|
|
12218
|
+
[data-pont-button][data-size="sm"]:has(.pont-icon-inline-start) {
|
|
12219
|
+
padding-top: var(--pont-button-spacing-pt-sm-has-icon-start);
|
|
12220
|
+
padding-right: var(--pont-button-spacing-pr-sm-has-icon-start);
|
|
12221
|
+
padding-bottom: var(--pont-button-spacing-pb-sm-has-icon-start);
|
|
12222
|
+
padding-left: var(--pont-button-spacing-pl-sm-has-icon-start);
|
|
10851
12223
|
}
|
|
10852
12224
|
|
|
10853
|
-
|
|
10854
|
-
padding-
|
|
12225
|
+
[data-pont-button][data-size="sm"]:has(.pont-icon-inline-end) {
|
|
12226
|
+
padding-top: var(--pont-button-spacing-pt-sm-has-icon-end);
|
|
12227
|
+
padding-right: var(--pont-button-spacing-pr-sm-has-icon-end);
|
|
12228
|
+
padding-bottom: var(--pont-button-spacing-pb-sm-has-icon-end);
|
|
12229
|
+
padding-left: var(--pont-button-spacing-pl-sm-has-icon-end);
|
|
10855
12230
|
}
|
|
10856
12231
|
|
|
10857
|
-
|
|
10858
|
-
pont-
|
|
10859
|
-
|
|
12232
|
+
[data-pont-button][data-size="sm"]:has(.pont-icon-inline-start):has(
|
|
12233
|
+
.pont-icon-inline-end
|
|
12234
|
+
) {
|
|
12235
|
+
padding-right: var(--pont-button-spacing-pr-sm-has-icon-end);
|
|
12236
|
+
padding-left: var(--pont-button-spacing-pl-sm-has-icon-start);
|
|
10860
12237
|
}
|
|
10861
12238
|
|
|
10862
|
-
/*
|
|
10863
|
-
|
|
10864
|
-
|
|
10865
|
-
|
|
10866
|
-
|
|
12239
|
+
/* BUTTON > ICON (& SPINNER) */
|
|
12240
|
+
|
|
12241
|
+
[data-pont-button][data-size="sm"] > svg {
|
|
12242
|
+
width: var(--pont-button-icon-sizing-w-sm);
|
|
12243
|
+
height: var(--pont-button-icon-sizing-h-sm);
|
|
10867
12244
|
}
|
|
10868
12245
|
|
|
10869
|
-
|
|
10870
|
-
pont-
|
|
10871
|
-
|
|
10872
|
-
height: var(--pont-button-icon-space-size-xs);
|
|
12246
|
+
[data-pont-button][data-size="sm"] > pont-spinner {
|
|
12247
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-sm);
|
|
12248
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-sm);
|
|
10873
12249
|
}
|
|
10874
12250
|
|
|
10875
|
-
/* *
|
|
12251
|
+
/* * LARGE * */
|
|
10876
12252
|
|
|
10877
|
-
|
|
10878
|
-
|
|
10879
|
-
height: var(--pont-button-
|
|
12253
|
+
pont-button:has([data-pont-button][data-size="lg"]) {
|
|
12254
|
+
width: var(--pont-button-sizing-w-lg);
|
|
12255
|
+
height: var(--pont-button-sizing-h-lg);
|
|
10880
12256
|
}
|
|
10881
12257
|
|
|
10882
|
-
|
|
10883
|
-
|
|
10884
|
-
|
|
12258
|
+
[data-pont-button][data-size="lg"] {
|
|
12259
|
+
-moz-column-gap: var(--pont-button-layout-gap-x-lg);
|
|
12260
|
+
column-gap: var(--pont-button-layout-gap-x-lg);
|
|
12261
|
+
row-gap: var(--pont-button-layout-gap-y-lg);
|
|
10885
12262
|
|
|
10886
|
-
|
|
10887
|
-
|
|
12263
|
+
padding-top: var(--pont-button-spacing-pt-lg);
|
|
12264
|
+
padding-right: var(--pont-button-spacing-pr-lg);
|
|
12265
|
+
padding-bottom: var(--pont-button-spacing-pb-lg);
|
|
12266
|
+
padding-left: var(--pont-button-spacing-pl-lg);
|
|
10888
12267
|
|
|
10889
|
-
|
|
10890
|
-
|
|
10891
|
-
|
|
12268
|
+
font-size: var(--pont-button-typography-size-lg);
|
|
12269
|
+
font-weight: var(--pont-button-typography-weight-lg);
|
|
12270
|
+
letter-spacing: var(--pont-button-typography-tracking-lg);
|
|
12271
|
+
line-height: var(--pont-button-typography-leading-lg);
|
|
10892
12272
|
|
|
10893
|
-
|
|
10894
|
-
|
|
12273
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-lg);
|
|
12274
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-lg);
|
|
12275
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-lg);
|
|
12276
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-lg);
|
|
10895
12277
|
}
|
|
10896
12278
|
|
|
10897
|
-
|
|
10898
|
-
|
|
12279
|
+
/* HAS ICON START/END */
|
|
12280
|
+
|
|
12281
|
+
[data-pont-button][data-size="lg"]:has(.pont-icon-inline-start) {
|
|
12282
|
+
padding-top: var(--pont-button-spacing-pt-lg-has-icon-start);
|
|
12283
|
+
padding-right: var(--pont-button-spacing-pr-lg-has-icon-start);
|
|
12284
|
+
padding-bottom: var(--pont-button-spacing-pb-lg-has-icon-start);
|
|
12285
|
+
padding-left: var(--pont-button-spacing-pl-lg-has-icon-start);
|
|
10899
12286
|
}
|
|
10900
12287
|
|
|
10901
|
-
|
|
10902
|
-
padding-
|
|
12288
|
+
[data-pont-button][data-size="lg"]:has(.pont-icon-inline-end) {
|
|
12289
|
+
padding-top: var(--pont-button-spacing-pt-lg-has-icon-end);
|
|
12290
|
+
padding-right: var(--pont-button-spacing-pr-lg-has-icon-end);
|
|
12291
|
+
padding-bottom: var(--pont-button-spacing-pb-lg-has-icon-end);
|
|
12292
|
+
padding-left: var(--pont-button-spacing-pl-lg-has-icon-end);
|
|
10903
12293
|
}
|
|
10904
12294
|
|
|
10905
|
-
|
|
10906
|
-
pont-
|
|
10907
|
-
|
|
12295
|
+
[data-pont-button][data-size="lg"]:has(.pont-icon-inline-start):has(
|
|
12296
|
+
.pont-icon-inline-end
|
|
12297
|
+
) {
|
|
12298
|
+
padding-right: var(--pont-button-spacing-pr-lg-has-icon-end);
|
|
12299
|
+
padding-left: var(--pont-button-spacing-pl-lg-has-icon-start);
|
|
10908
12300
|
}
|
|
10909
12301
|
|
|
10910
|
-
/*
|
|
10911
|
-
|
|
10912
|
-
|
|
10913
|
-
|
|
10914
|
-
|
|
12302
|
+
/* BUTTON > ICON (& SPINNER) */
|
|
12303
|
+
|
|
12304
|
+
[data-pont-button][data-size="lg"] > svg {
|
|
12305
|
+
width: var(--pont-button-icon-sizing-w-lg);
|
|
12306
|
+
height: var(--pont-button-icon-sizing-h-lg);
|
|
10915
12307
|
}
|
|
10916
12308
|
|
|
10917
|
-
|
|
10918
|
-
pont-
|
|
10919
|
-
|
|
10920
|
-
height: var(--pont-button-icon-space-size-sm);
|
|
12309
|
+
[data-pont-button][data-size="lg"] > pont-spinner {
|
|
12310
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-lg);
|
|
12311
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-lg);
|
|
10921
12312
|
}
|
|
10922
12313
|
|
|
10923
|
-
/* *
|
|
12314
|
+
/* * ICON * */
|
|
10924
12315
|
|
|
10925
|
-
|
|
10926
|
-
|
|
10927
|
-
height: var(--pont-button-
|
|
12316
|
+
pont-button:has([data-pont-button][data-size="icon"]) {
|
|
12317
|
+
width: var(--pont-button-sizing-w-icon);
|
|
12318
|
+
height: var(--pont-button-sizing-h-icon);
|
|
10928
12319
|
}
|
|
10929
12320
|
|
|
10930
|
-
|
|
10931
|
-
|
|
10932
|
-
|
|
12321
|
+
[data-pont-button][data-size="icon"] {
|
|
12322
|
+
padding-top: var(--pont-button-spacing-pt-icon);
|
|
12323
|
+
padding-right: var(--pont-button-spacing-pr-icon);
|
|
12324
|
+
padding-bottom: var(--pont-button-spacing-pb-icon);
|
|
12325
|
+
padding-left: var(--pont-button-spacing-pl-icon);
|
|
10933
12326
|
|
|
10934
|
-
border-radius: var(--pont-button-radius-
|
|
12327
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-icon);
|
|
12328
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-icon);
|
|
12329
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-icon);
|
|
12330
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-icon);
|
|
10935
12331
|
}
|
|
10936
12332
|
|
|
10937
|
-
|
|
10938
|
-
pont-button
|
|
10939
|
-
|
|
12333
|
+
[data-pont-button][data-size="icon"] > svg {
|
|
12334
|
+
width: var(--pont-button-icon-sizing-w-icon);
|
|
12335
|
+
height: var(--pont-button-icon-sizing-h-icon);
|
|
12336
|
+
}
|
|
10940
12337
|
|
|
10941
|
-
|
|
10942
|
-
|
|
12338
|
+
[data-pont-button][data-size="icon"] > pont-spinner {
|
|
12339
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon);
|
|
12340
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon);
|
|
10943
12341
|
}
|
|
10944
12342
|
|
|
10945
|
-
|
|
10946
|
-
|
|
12343
|
+
/* * ICON X SMALL * */
|
|
12344
|
+
|
|
12345
|
+
pont-button:has([data-pont-button][data-size="icon-xs"]) {
|
|
12346
|
+
width: var(--pont-button-sizing-w-icon-xs);
|
|
12347
|
+
height: var(--pont-button-sizing-h-icon-xs);
|
|
10947
12348
|
}
|
|
10948
12349
|
|
|
10949
|
-
|
|
10950
|
-
padding-
|
|
12350
|
+
[data-pont-button][data-size="icon-xs"] {
|
|
12351
|
+
padding-top: var(--pont-button-spacing-pt-icon-xs);
|
|
12352
|
+
padding-right: var(--pont-button-spacing-pr-icon-xs);
|
|
12353
|
+
padding-bottom: var(--pont-button-spacing-pb-icon-xs);
|
|
12354
|
+
padding-left: var(--pont-button-spacing-pl-icon-xs);
|
|
12355
|
+
|
|
12356
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-icon-xs);
|
|
12357
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-icon-xs);
|
|
12358
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-icon-xs);
|
|
12359
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-icon-xs);
|
|
10951
12360
|
}
|
|
10952
12361
|
|
|
10953
|
-
|
|
10954
|
-
|
|
10955
|
-
|
|
12362
|
+
[data-pont-button][data-size="icon-xs"] > svg {
|
|
12363
|
+
width: var(--pont-button-icon-sizing-w-icon-xs);
|
|
12364
|
+
height: var(--pont-button-icon-sizing-h-icon-xs);
|
|
10956
12365
|
}
|
|
10957
12366
|
|
|
10958
|
-
|
|
10959
|
-
pont-
|
|
10960
|
-
|
|
10961
|
-
height: var(--pont-button-icon-space-size-lg);
|
|
12367
|
+
[data-pont-button][data-size="icon-xs"] > pont-spinner {
|
|
12368
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon-xs);
|
|
12369
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon-xs);
|
|
10962
12370
|
}
|
|
10963
12371
|
|
|
10964
|
-
/* * ICON * */
|
|
12372
|
+
/* * ICON SMALL * */
|
|
10965
12373
|
|
|
10966
|
-
|
|
10967
|
-
|
|
10968
|
-
|
|
10969
|
-
height: var(--pont-button-space-size);
|
|
12374
|
+
pont-button:has([data-pont-button][data-size="icon-sm"]) {
|
|
12375
|
+
width: var(--pont-button-sizing-w-icon-sm);
|
|
12376
|
+
height: var(--pont-button-sizing-h-icon-sm);
|
|
10970
12377
|
}
|
|
10971
12378
|
|
|
10972
|
-
|
|
10973
|
-
pont-button
|
|
10974
|
-
|
|
10975
|
-
)
|
|
10976
|
-
|
|
10977
|
-
height: var(--pont-button-default-space-size);
|
|
10978
|
-
}
|
|
12379
|
+
[data-pont-button][data-size="icon-sm"] {
|
|
12380
|
+
padding-top: var(--pont-button-spacing-pt-icon-sm);
|
|
12381
|
+
padding-right: var(--pont-button-spacing-pr-icon-sm);
|
|
12382
|
+
padding-bottom: var(--pont-button-spacing-pb-icon-sm);
|
|
12383
|
+
padding-left: var(--pont-button-spacing-pl-icon-sm);
|
|
10979
12384
|
|
|
10980
|
-
pont-button
|
|
10981
|
-
|
|
10982
|
-
)
|
|
10983
|
-
|
|
10984
|
-
height: var(--pont-button-secondary-space-size);
|
|
12385
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-icon-sm);
|
|
12386
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-icon-sm);
|
|
12387
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-icon-sm);
|
|
12388
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-icon-sm);
|
|
10985
12389
|
}
|
|
10986
12390
|
|
|
10987
|
-
pont-button
|
|
10988
|
-
|
|
10989
|
-
)
|
|
10990
|
-
width: var(--pont-button-outline-space-size);
|
|
10991
|
-
height: var(--pont-button-outline-space-size);
|
|
12391
|
+
[data-pont-button][data-size="icon-sm"] > svg {
|
|
12392
|
+
width: var(--pont-button-icon-sizing-w-icon-sm);
|
|
12393
|
+
height: var(--pont-button-icon-sizing-h-icon-sm);
|
|
10992
12394
|
}
|
|
10993
12395
|
|
|
10994
|
-
|
|
10995
|
-
|
|
10996
|
-
|
|
12396
|
+
[data-pont-button][data-size="icon-sm"] > pont-spinner {
|
|
12397
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon-sm);
|
|
12398
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon-sm);
|
|
10997
12399
|
}
|
|
10998
12400
|
|
|
10999
|
-
|
|
11000
|
-
> [data-slot='button'][data-variant='destructive'][data-size='icon']
|
|
11001
|
-
) {
|
|
11002
|
-
width: var(--pont-button-destructive-space-size);
|
|
11003
|
-
height: var(--pont-button-destructive-space-size);
|
|
11004
|
-
}
|
|
12401
|
+
/* * ICON LARGE * */
|
|
11005
12402
|
|
|
11006
|
-
pont-button:has(
|
|
11007
|
-
width: var(--pont-button-
|
|
11008
|
-
height: var(--pont-button-
|
|
12403
|
+
pont-button:has([data-pont-button][data-size="icon-lg"]) {
|
|
12404
|
+
width: var(--pont-button-sizing-w-icon-lg);
|
|
12405
|
+
height: var(--pont-button-sizing-h-icon-lg);
|
|
11009
12406
|
}
|
|
11010
12407
|
|
|
11011
|
-
|
|
11012
|
-
|
|
11013
|
-
|
|
12408
|
+
[data-pont-button][data-size="icon-lg"] {
|
|
12409
|
+
padding-top: var(--pont-button-spacing-pt-icon-lg);
|
|
12410
|
+
padding-right: var(--pont-button-spacing-pr-icon-lg);
|
|
12411
|
+
padding-bottom: var(--pont-button-spacing-pb-icon-lg);
|
|
12412
|
+
padding-left: var(--pont-button-spacing-pl-icon-lg);
|
|
12413
|
+
|
|
12414
|
+
border-top-left-radius: var(--pont-button-border-radius-tl-icon-lg);
|
|
12415
|
+
border-top-right-radius: var(--pont-button-border-radius-tr-icon-lg);
|
|
12416
|
+
border-bottom-right-radius: var(--pont-button-border-radius-br-icon-lg);
|
|
12417
|
+
border-bottom-left-radius: var(--pont-button-border-radius-bl-icon-lg);
|
|
12418
|
+
}
|
|
11014
12419
|
|
|
11015
|
-
|
|
12420
|
+
[data-pont-button][data-size="icon-lg"] > svg {
|
|
12421
|
+
width: var(--pont-button-icon-sizing-w-icon-lg);
|
|
12422
|
+
height: var(--pont-button-icon-sizing-h-icon-lg);
|
|
11016
12423
|
}
|
|
11017
12424
|
|
|
11018
|
-
|
|
11019
|
-
|
|
11020
|
-
|
|
12425
|
+
[data-pont-button][data-size="icon-lg"] > pont-spinner {
|
|
12426
|
+
--pont-spinner-sizing-w: var(--pont-button-icon-sizing-w-icon-lg);
|
|
12427
|
+
--pont-spinner-sizing-h: var(--pont-button-icon-sizing-h-icon-lg);
|
|
11021
12428
|
}
|
|
11022
12429
|
|
|
11023
12430
|
/*
|
|
@@ -12517,21 +13924,53 @@ pont-input-group-button {
|
|
|
12517
13924
|
justify-content: center;
|
|
12518
13925
|
}
|
|
12519
13926
|
|
|
12520
|
-
pont-input-group-button > pont-button[data-slot=
|
|
13927
|
+
pont-input-group-button > pont-button[data-slot="input-group-button"] {
|
|
12521
13928
|
display: flex;
|
|
12522
13929
|
|
|
12523
|
-
--pont-button-
|
|
12524
|
-
--pont-button-
|
|
12525
|
-
|
|
12526
|
-
--pont-button-
|
|
12527
|
-
--pont-button-
|
|
13930
|
+
--pont-button-layout-gap-x-sm: var(--pont-input-group-button-space-gap-sm);
|
|
13931
|
+
--pont-button-layout-gap-y-sm: var(--pont-input-group-button-space-gap-sm);
|
|
13932
|
+
|
|
13933
|
+
--pont-button-spacing-pr-xs: var(--pont-input-group-button-space-px-xs);
|
|
13934
|
+
--pont-button-spacing-pl-xs: var(--pont-input-group-button-space-px-xs);
|
|
13935
|
+
|
|
13936
|
+
--pont-button-typography-size-xs: var(--pont-input-group-button-font-size);
|
|
13937
|
+
--pont-button-typography-size-sm: var(--pont-input-group-button-font-size);
|
|
13938
|
+
--pont-button-typography-leading-xs: var(
|
|
12528
13939
|
--pont-input-group-button-font-line-height
|
|
12529
13940
|
);
|
|
12530
|
-
--pont-button-
|
|
13941
|
+
--pont-button-typography-leading-sm: var(
|
|
12531
13942
|
--pont-input-group-button-font-line-height
|
|
12532
13943
|
);
|
|
12533
|
-
|
|
12534
|
-
--pont-button-
|
|
13944
|
+
|
|
13945
|
+
--pont-button-border-radius-tl-xs: var(--pont-input-group-button-radius-xs);
|
|
13946
|
+
--pont-button-border-radius-tr-xs: var(--pont-input-group-button-radius-xs);
|
|
13947
|
+
--pont-button-border-radius-br-xs: var(--pont-input-group-button-radius-xs);
|
|
13948
|
+
--pont-button-border-radius-bl-xs: var(--pont-input-group-button-radius-xs);
|
|
13949
|
+
|
|
13950
|
+
--pont-button-border-radius-tl-icon-xs: var(
|
|
13951
|
+
--pont-input-group-button-radius-xs
|
|
13952
|
+
);
|
|
13953
|
+
--pont-button-border-radius-tr-icon-xs: var(
|
|
13954
|
+
--pont-input-group-button-radius-xs
|
|
13955
|
+
);
|
|
13956
|
+
--pont-button-border-radius-br-icon-xs: var(
|
|
13957
|
+
--pont-input-group-button-radius-xs
|
|
13958
|
+
);
|
|
13959
|
+
--pont-button-border-radius-bl-icon-xs: var(
|
|
13960
|
+
--pont-input-group-button-radius-xs
|
|
13961
|
+
);
|
|
13962
|
+
|
|
13963
|
+
--pont-button-icon-sizing-w-xs: var(
|
|
13964
|
+
--pont-input-group-button-icon-space-size-xs
|
|
13965
|
+
);
|
|
13966
|
+
--pont-button-icon-sizing-h-xs: var(
|
|
13967
|
+
--pont-input-group-button-icon-space-size-xs
|
|
13968
|
+
);
|
|
13969
|
+
|
|
13970
|
+
--pont-button-icon-sizing-w-icon-xs: var(
|
|
13971
|
+
--pont-input-group-button-icon-space-size-xs
|
|
13972
|
+
);
|
|
13973
|
+
--pont-button-icon-sizing-h-icon-xs: var(
|
|
12535
13974
|
--pont-input-group-button-icon-space-size-xs
|
|
12536
13975
|
);
|
|
12537
13976
|
}
|
|
@@ -13259,29 +14698,45 @@ pont-kbd-group > [data-slot=kbd-group] {
|
|
|
13259
14698
|
* ===========================================================================
|
|
13260
14699
|
*/
|
|
13261
14700
|
|
|
13262
|
-
|
|
14701
|
+
[data-pont-label] {
|
|
13263
14702
|
display: flex;
|
|
14703
|
+
|
|
14704
|
+
-moz-column-gap: var(--pont-label-layout-gap-x);
|
|
14705
|
+
|
|
14706
|
+
column-gap: var(--pont-label-layout-gap-x);
|
|
14707
|
+
row-gap: var(--pont-label-layout-gap-y);
|
|
13264
14708
|
align-items: center;
|
|
13265
|
-
-webkit-user-select: none;
|
|
13266
|
-
-moz-user-select: none;
|
|
13267
|
-
user-select: none;
|
|
13268
|
-
gap: var(--pont-label-space-gap);
|
|
13269
14709
|
|
|
13270
|
-
font-
|
|
13271
|
-
|
|
13272
|
-
font-weight: var(--pont-label-
|
|
13273
|
-
|
|
14710
|
+
font-family: var(--pont-label-typography-font);
|
|
14711
|
+
font-size: var(--pont-label-typography-size);
|
|
14712
|
+
font-weight: var(--pont-label-typography-weight);
|
|
14713
|
+
letter-spacing: var(--pont-label-typography-tracking);
|
|
14714
|
+
line-height: var(--pont-label-typography-leading);
|
|
14715
|
+
color: var(--pont-label-typography-color);
|
|
14716
|
+
|
|
14717
|
+
-webkit-user-select: var(--pont-label-interactivity-select);
|
|
14718
|
+
|
|
14719
|
+
-moz-user-select: var(--pont-label-interactivity-select);
|
|
14720
|
+
|
|
14721
|
+
user-select: var(--pont-label-interactivity-select);
|
|
13274
14722
|
}
|
|
13275
14723
|
|
|
13276
|
-
/* DISABLED */
|
|
14724
|
+
/* * -------- DISABLED -------- * */
|
|
14725
|
+
|
|
14726
|
+
/* * GROUP DISABLED * */
|
|
14727
|
+
|
|
14728
|
+
*:has([data-disabled="true"]) [data-pont-label] {
|
|
14729
|
+
opacity: var(--pont-label-effect-opacity-disabled);
|
|
13277
14730
|
|
|
13278
|
-
*:has([disabled]) > pont-label > [data-slot='label'] {
|
|
13279
|
-
opacity: var(--pont-label-opacity-disabled);
|
|
13280
14731
|
pointer-events: none;
|
|
13281
14732
|
}
|
|
13282
14733
|
|
|
13283
|
-
|
|
13284
|
-
|
|
14734
|
+
/* * PEER DISABLED * */
|
|
14735
|
+
|
|
14736
|
+
*:disabled ~ pont-label [data-pont-label],
|
|
14737
|
+
*:has(> :disabled) ~ pont-label [data-pont-label] {
|
|
14738
|
+
opacity: var(--pont-label-effect-opacity-disabled);
|
|
14739
|
+
|
|
13285
14740
|
cursor: not-allowed;
|
|
13286
14741
|
}
|
|
13287
14742
|
|
|
@@ -14189,6 +15644,39 @@ pont-scroll-area > [data-slot=scroll-area] {
|
|
|
14189
15644
|
border-radius: inherit;
|
|
14190
15645
|
}
|
|
14191
15646
|
|
|
15647
|
+
/*
|
|
15648
|
+
* ===========================================================================
|
|
15649
|
+
* DATE PICKER COMPONENT STYLES
|
|
15650
|
+
* ===========================================================================
|
|
15651
|
+
*/
|
|
15652
|
+
|
|
15653
|
+
/*
|
|
15654
|
+
* --------------------------------------------------
|
|
15655
|
+
* DATE PICKER TRIGGER
|
|
15656
|
+
* --------------------------------------------------
|
|
15657
|
+
*/
|
|
15658
|
+
|
|
15659
|
+
[data-pont-date-picker-trigger] {
|
|
15660
|
+
--pont-button-layout-justify: var(--pont-ref-layout-justify-start);
|
|
15661
|
+
--pont-button-typography-weight-default: var(--pont-ref-font-weight-normal);
|
|
15662
|
+
}
|
|
15663
|
+
|
|
15664
|
+
[data-pont-date-picker-trigger] [data-pont-button] {
|
|
15665
|
+
text-align: left;
|
|
15666
|
+
}
|
|
15667
|
+
|
|
15668
|
+
[data-pont-date-picker-trigger][data-empty="true"] {
|
|
15669
|
+
--pont-button-outline-typography-color: hsl(
|
|
15670
|
+
var(--pont-sem-color-text-secondary)
|
|
15671
|
+
);
|
|
15672
|
+
--pont-button-outline-typography-color-hover: hsl(
|
|
15673
|
+
var(--pont-sem-color-text-secondary)
|
|
15674
|
+
);
|
|
15675
|
+
--pont-button-outline-typography-color-expanded: hsl(
|
|
15676
|
+
var(--pont-sem-color-text-secondary)
|
|
15677
|
+
);
|
|
15678
|
+
}
|
|
15679
|
+
|
|
14192
15680
|
/* ---- widget layer -------------------------------------------------------- */
|
|
14193
15681
|
|
|
14194
15682
|
/*
|
|
@@ -14499,8 +15987,8 @@ pont-scroll-area > [data-slot=scroll-area] {
|
|
|
14499
15987
|
--pont-field-forgot-space-px: var(--pont-ref-space-0);
|
|
14500
15988
|
--pont-field-forgot-space-size: auto;
|
|
14501
15989
|
--pont-field-forgot-color-text: inherit;
|
|
14502
|
-
--pont-field-forgot-font-size: var(--pont-label-
|
|
14503
|
-
--pont-field-forgot-font-line-height: var(--pont-label-
|
|
15990
|
+
--pont-field-forgot-font-size: var(--pont-label-typography-size);
|
|
15991
|
+
--pont-field-forgot-font-line-height: var(--pont-label-typography-leading);
|
|
14504
15992
|
--pont-field-forgot-font-weight: var(--pont-ref-font-weight-normal);
|
|
14505
15993
|
}
|
|
14506
15994
|
|
|
@@ -15001,13 +16489,14 @@ pont-password-field:has([part="password-field-forgot"])
|
|
|
15001
16489
|
pont-password-field [part="password-field-forgot"] {
|
|
15002
16490
|
margin-left: auto;
|
|
15003
16491
|
|
|
15004
|
-
--pont-button-
|
|
15005
|
-
--pont-button-
|
|
16492
|
+
--pont-button-spacing-pr-default: var(--pont-field-forgot-space-px);
|
|
16493
|
+
--pont-button-spacing-pl-default: var(--pont-field-forgot-space-px);
|
|
16494
|
+
--pont-button-sizing-h-default: var(--pont-field-forgot-space-size);
|
|
15006
16495
|
|
|
15007
|
-
--pont-button-
|
|
15008
|
-
--pont-button-link-color
|
|
15009
|
-
--pont-button-
|
|
15010
|
-
--pont-button-
|
|
16496
|
+
--pont-button-typography-weight-default: var(--pont-field-forgot-font-weight);
|
|
16497
|
+
--pont-button-link-typography-color: var(--pont-field-forgot-color-text);
|
|
16498
|
+
--pont-button-typography-size-default: var(--pont-field-forgot-font-size);
|
|
16499
|
+
--pont-button-typography-leading-default: var(
|
|
15011
16500
|
--pont-field-forgot-font-line-height
|
|
15012
16501
|
);
|
|
15013
16502
|
}
|
|
@@ -15036,7 +16525,7 @@ pont-otp {
|
|
|
15036
16525
|
--pont-typography-p-font-size: var(--pont-otp-typography-font-size);
|
|
15037
16526
|
--pont-typography-p-font-weight: var(--pont-otp-typography-font-weight);
|
|
15038
16527
|
--pont-typography-p-color-text: var(--pont-otp-typography-color-text);
|
|
15039
|
-
--pont-button-link-color
|
|
16528
|
+
--pont-button-link-typography-color: var(--pont-otp-button-color-text-brand);
|
|
15040
16529
|
display: grid;
|
|
15041
16530
|
justify-content: var(--pont-otp-alignment-justify-content);
|
|
15042
16531
|
align-self: var(--pont-otp-alignment-align-self);
|
|
@@ -15728,15 +17217,18 @@ pont-link > [part="link"] {
|
|
|
15728
17217
|
|
|
15729
17218
|
justify-content: var(--pont-link-alignment-justify-content);
|
|
15730
17219
|
|
|
15731
|
-
--pont-button-
|
|
15732
|
-
--pont-button-
|
|
17220
|
+
--pont-button-spacing-pr-default: var(--pont-link-button-space-px);
|
|
17221
|
+
--pont-button-spacing-pl-default: var(--pont-link-button-space-px);
|
|
17222
|
+
--pont-button-sizing-h-default: var(--pont-link-button-space-size);
|
|
15733
17223
|
|
|
15734
|
-
--pont-button-link-color
|
|
15735
|
-
--pont-button-
|
|
15736
|
-
--pont-button-
|
|
15737
|
-
--pont-button-
|
|
17224
|
+
--pont-button-link-typography-color: var(--pont-link-color-text);
|
|
17225
|
+
--pont-button-typography-size-default: var(--pont-link-font-size);
|
|
17226
|
+
--pont-button-typography-leading-default: var(--pont-link-font-line-height);
|
|
17227
|
+
--pont-button-typography-weight-default: var(--pont-link-font-weight);
|
|
15738
17228
|
|
|
15739
|
-
--pont-button-opacity-disabled: var(
|
|
17229
|
+
--pont-button-link-effect-opacity-disabled: var(
|
|
17230
|
+
--pont-link-button-opacity-disabled
|
|
17231
|
+
);
|
|
15740
17232
|
}
|
|
15741
17233
|
|
|
15742
17234
|
pont-link > [part="link"] > [part="link-button"] > [data-slot="button"] {
|
|
@@ -16212,7 +17704,10 @@ pont-profile pont-card[part="personal-info-card"][editing="true"] {
|
|
|
16212
17704
|
--pont-card-color-bg: var(
|
|
16213
17705
|
--pont-account-settings-personal-info-card-color-bg-editing
|
|
16214
17706
|
);
|
|
16215
|
-
--pont-button-
|
|
17707
|
+
--pont-button-spacing-pr-lg: var(
|
|
17708
|
+
--pont-account-settings-info-card-button-space-px-lg
|
|
17709
|
+
);
|
|
17710
|
+
--pont-button-spacing-pl-lg: var(
|
|
16216
17711
|
--pont-account-settings-info-card-button-space-px-lg
|
|
16217
17712
|
);
|
|
16218
17713
|
}
|
|
@@ -16231,7 +17726,10 @@ pont-profile pont-popover[part="account-info-popover"] {
|
|
|
16231
17726
|
--pont-popover-content-space-w: var(
|
|
16232
17727
|
--pont-account-settings-account-info-popover-space-w
|
|
16233
17728
|
);
|
|
16234
|
-
--pont-button-
|
|
17729
|
+
--pont-button-spacing-pr-lg: var(
|
|
17730
|
+
--pont-account-settings-info-card-button-space-px-lg
|
|
17731
|
+
);
|
|
17732
|
+
--pont-button-spacing-pl-lg: var(
|
|
16235
17733
|
--pont-account-settings-info-card-button-space-px-lg
|
|
16236
17734
|
);
|
|
16237
17735
|
}
|
|
@@ -16247,7 +17745,10 @@ pont-profile pont-card[part="urls-info-card"][editing="true"] {
|
|
|
16247
17745
|
--pont-card-color-bg: var(
|
|
16248
17746
|
--pont-account-settings-urls-info-card-color-bg-editing
|
|
16249
17747
|
);
|
|
16250
|
-
--pont-button-
|
|
17748
|
+
--pont-button-spacing-pr-lg: var(
|
|
17749
|
+
--pont-account-settings-info-card-button-space-px-lg
|
|
17750
|
+
);
|
|
17751
|
+
--pont-button-spacing-pl-lg: var(
|
|
16251
17752
|
--pont-account-settings-info-card-button-space-px-lg
|
|
16252
17753
|
);
|
|
16253
17754
|
}
|
|
@@ -16256,7 +17757,7 @@ pont-profile pont-card[part="location-info-card"][editing="true"] {
|
|
|
16256
17757
|
--pont-card-color-bg: var(
|
|
16257
17758
|
--pont-account-settings-location-info-card-color-bg-editing
|
|
16258
17759
|
);
|
|
16259
|
-
--pont-button-
|
|
17760
|
+
--pont-button-spacing-pl-lg: var(
|
|
16260
17761
|
--pont-account-settings-info-card-button-space-px-lg
|
|
16261
17762
|
);
|
|
16262
17763
|
}
|
|
@@ -16991,7 +18492,10 @@ pont-account-settings pont-button[part="burger-close-button"] button {
|
|
|
16991
18492
|
pont-account-info pont-card[part="edit-form"] {
|
|
16992
18493
|
--pont-card-color-bg: var(--pont-account-info-edit-form-card-color-bg);
|
|
16993
18494
|
margin-bottom: var(--pont-ref-space-4);
|
|
16994
|
-
--pont-button-
|
|
18495
|
+
--pont-button-spacing-pr-lg: var(
|
|
18496
|
+
--pont-account-settings-info-card-button-space-px-lg
|
|
18497
|
+
);
|
|
18498
|
+
--pont-button-spacing-pl-lg: var(
|
|
16995
18499
|
--pont-account-settings-info-card-button-space-px-lg
|
|
16996
18500
|
);
|
|
16997
18501
|
}
|
|
@@ -17016,7 +18520,10 @@ pont-account-info pont-card > [data-slot="card"] {
|
|
|
17016
18520
|
}
|
|
17017
18521
|
|
|
17018
18522
|
pont-button[part="upload-image-button"] {
|
|
17019
|
-
--pont-button-radius-lg:
|
|
18523
|
+
--pont-button-border-radius-tl-lg: var(--pont-ref-radius-full);
|
|
18524
|
+
--pont-button-border-radius-tr-lg: var(--pont-ref-radius-full);
|
|
18525
|
+
--pont-button-border-radius-br-lg: var(--pont-ref-radius-full);
|
|
18526
|
+
--pont-button-border-radius-bl-lg: var(--pont-ref-radius-full);
|
|
17020
18527
|
}
|
|
17021
18528
|
|
|
17022
18529
|
pont-account-info pont-avatar > [data-slot="avatar"][data-size="lg"] {
|
|
@@ -18153,22 +19660,6 @@ video {
|
|
|
18153
19660
|
width: var(--pont-breadcrumb-ellipsis-space-size);
|
|
18154
19661
|
height: var(--pont-breadcrumb-ellipsis-space-size);
|
|
18155
19662
|
}
|
|
18156
|
-
.pont-size-button-icon-space-size{
|
|
18157
|
-
width: var(--pont-button-icon-space-size-default);
|
|
18158
|
-
height: var(--pont-button-icon-space-size-default);
|
|
18159
|
-
}
|
|
18160
|
-
.pont-size-button-space-size-icon{
|
|
18161
|
-
width: var(--pont-button-space-size-default);
|
|
18162
|
-
height: var(--pont-button-space-size-default);
|
|
18163
|
-
}
|
|
18164
|
-
.pont-size-button-space-size-icon-lg{
|
|
18165
|
-
width: var(--pont-button-space-size-lg);
|
|
18166
|
-
height: var(--pont-button-space-size-lg);
|
|
18167
|
-
}
|
|
18168
|
-
.pont-size-button-space-size-icon-sm{
|
|
18169
|
-
width: var(--pont-button-space-size-sm);
|
|
18170
|
-
height: var(--pont-button-space-size-sm);
|
|
18171
|
-
}
|
|
18172
19663
|
.pont-size-calendar-chevron-space-size{
|
|
18173
19664
|
width: var(--pont-calendar-chevron-space-size);
|
|
18174
19665
|
height: var(--pont-calendar-chevron-space-size);
|
|
@@ -18335,15 +19826,6 @@ video {
|
|
|
18335
19826
|
.pont-h-auto{
|
|
18336
19827
|
height: auto;
|
|
18337
19828
|
}
|
|
18338
|
-
.pont-h-button-space-h-default{
|
|
18339
|
-
height: var(--pont-button-space-size-default);
|
|
18340
|
-
}
|
|
18341
|
-
.pont-h-button-space-h-lg{
|
|
18342
|
-
height: var(--pont-button-space-size-lg);
|
|
18343
|
-
}
|
|
18344
|
-
.pont-h-button-space-h-sm{
|
|
18345
|
-
height: var(--pont-button-space-size-sm);
|
|
18346
|
-
}
|
|
18347
19829
|
.pont-h-calendar-month-caption-space-h{
|
|
18348
19830
|
height: var(--pont-calendar-month-caption-space-h);
|
|
18349
19831
|
}
|
|
@@ -18590,9 +20072,6 @@ video {
|
|
|
18590
20072
|
.pont-w-command-space-w{
|
|
18591
20073
|
width: var(--pont-command-space-w);
|
|
18592
20074
|
}
|
|
18593
|
-
.pont-w-date-picker-trigger-button-space-w{
|
|
18594
|
-
width: var(--pont-date-picker-trigger-button-space-w);
|
|
18595
|
-
}
|
|
18596
20075
|
.pont-w-dialog-content-space-w{
|
|
18597
20076
|
width: var(--pont-dialog-content-space-w);
|
|
18598
20077
|
}
|
|
@@ -18935,15 +20414,6 @@ video {
|
|
|
18935
20414
|
.pont-gap-breadcrumb-list-space-gap-sm{
|
|
18936
20415
|
gap: var(--pont-breadcrumb-list-space-gap-sm);
|
|
18937
20416
|
}
|
|
18938
|
-
.pont-gap-button-space-gap-default{
|
|
18939
|
-
gap: var(--pont-button-space-gap-default);
|
|
18940
|
-
}
|
|
18941
|
-
.pont-gap-button-space-gap-lg{
|
|
18942
|
-
gap: var(--pont-button-space-gap-lg);
|
|
18943
|
-
}
|
|
18944
|
-
.pont-gap-button-space-gap-sm{
|
|
18945
|
-
gap: var(--pont-button-space-gap-sm);
|
|
18946
|
-
}
|
|
18947
20417
|
.pont-gap-calendar-day-button-space-gap{
|
|
18948
20418
|
gap: var(--pont-calendar-day-button-space-gap);
|
|
18949
20419
|
}
|
|
@@ -19120,9 +20590,6 @@ video {
|
|
|
19120
20590
|
.pont-rounded-accordion-trigger-radius{
|
|
19121
20591
|
border-radius: var(--pont-accordion-trigger-radius);
|
|
19122
20592
|
}
|
|
19123
|
-
.pont-rounded-button-radius{
|
|
19124
|
-
border-radius: var(--pont-button-radius-default);
|
|
19125
|
-
}
|
|
19126
20593
|
.pont-rounded-calendar-day-radius{
|
|
19127
20594
|
border-radius: var(--pont-calendar-day-radius);
|
|
19128
20595
|
}
|
|
@@ -19288,9 +20755,6 @@ video {
|
|
|
19288
20755
|
.pont-border-0{
|
|
19289
20756
|
border-width: 0px;
|
|
19290
20757
|
}
|
|
19291
|
-
.pont-border-button-outline-width-border{
|
|
19292
|
-
border-width: var(--pont-button-width-border);
|
|
19293
|
-
}
|
|
19294
20758
|
.pont-border-combo-box-group-width-border{
|
|
19295
20759
|
border-width: var(--pont-combo-box-group-width-border);
|
|
19296
20760
|
}
|
|
@@ -19369,9 +20833,6 @@ video {
|
|
|
19369
20833
|
.pont-border-border{
|
|
19370
20834
|
border-color: hsl(var(--border));
|
|
19371
20835
|
}
|
|
19372
|
-
.pont-border-button-outline-color-border{
|
|
19373
|
-
border-color: var(--pont-button-outline-color-border);
|
|
19374
|
-
}
|
|
19375
20836
|
.pont-border-combo-box-group-color-border{
|
|
19376
20837
|
border-color: hsl(var(--pont-combo-box-group-color-border));
|
|
19377
20838
|
}
|
|
@@ -19465,18 +20926,6 @@ video {
|
|
|
19465
20926
|
.pont-bg-background{
|
|
19466
20927
|
background-color: hsl(var(--background));
|
|
19467
20928
|
}
|
|
19468
|
-
.pont-bg-button-default-color-bg{
|
|
19469
|
-
background-color: var(--pont-button-default-color-bg);
|
|
19470
|
-
}
|
|
19471
|
-
.pont-bg-button-destructive-color-bg{
|
|
19472
|
-
background-color: var(--pont-button-destructive-color-bg);
|
|
19473
|
-
}
|
|
19474
|
-
.pont-bg-button-outline-color-bg{
|
|
19475
|
-
background-color: var(--pont-button-outline-color-bg);
|
|
19476
|
-
}
|
|
19477
|
-
.pont-bg-button-secondary-color-bg{
|
|
19478
|
-
background-color: var(--pont-button-secondary-color-bg);
|
|
19479
|
-
}
|
|
19480
20929
|
.pont-bg-calendar-color-bg{
|
|
19481
20930
|
background-color: hsl(var(--pont-calendar-color-bg));
|
|
19482
20931
|
}
|
|
@@ -19736,18 +21185,6 @@ video {
|
|
|
19736
21185
|
padding-left: 1.5rem;
|
|
19737
21186
|
padding-right: 1.5rem;
|
|
19738
21187
|
}
|
|
19739
|
-
.pont-px-button-space-px-default{
|
|
19740
|
-
padding-left: var(--pont-button-space-px-default);
|
|
19741
|
-
padding-right: var(--pont-button-space-px-default);
|
|
19742
|
-
}
|
|
19743
|
-
.pont-px-button-space-px-lg{
|
|
19744
|
-
padding-left: var(--pont-button-space-px-lg);
|
|
19745
|
-
padding-right: var(--pont-button-space-px-lg);
|
|
19746
|
-
}
|
|
19747
|
-
.pont-px-button-space-px-sm{
|
|
19748
|
-
padding-left: var(--pont-button-space-px-sm);
|
|
19749
|
-
padding-right: var(--pont-button-space-px-sm);
|
|
19750
|
-
}
|
|
19751
21188
|
.pont-px-calendar-month-caption-space-px{
|
|
19752
21189
|
padding-left: var(--pont-calendar-month-caption-space-px);
|
|
19753
21190
|
padding-right: var(--pont-calendar-month-caption-space-px);
|
|
@@ -19920,10 +21357,6 @@ video {
|
|
|
19920
21357
|
padding-top: var(--pont-accordion-trigger-space-py);
|
|
19921
21358
|
padding-bottom: var(--pont-accordion-trigger-space-py);
|
|
19922
21359
|
}
|
|
19923
|
-
.pont-py-button-space-py-default{
|
|
19924
|
-
padding-top: var(--pont-ref-space-2);
|
|
19925
|
-
padding-bottom: var(--pont-ref-space-2);
|
|
19926
|
-
}
|
|
19927
21360
|
.pont-py-carousel-button-space-py{
|
|
19928
21361
|
padding-top: var(--pont-carousel-button-space-py);
|
|
19929
21362
|
padding-bottom: var(--pont-carousel-button-space-py);
|
|
@@ -20169,10 +21602,6 @@ video {
|
|
|
20169
21602
|
font-size: var(--pont-breadcrumb-list-font-size);
|
|
20170
21603
|
line-height: var(--breadcrumb-list-font-line-height);
|
|
20171
21604
|
}
|
|
20172
|
-
.pont-text-button-font-size{
|
|
20173
|
-
font-size: var(--pont-button-font-size-default);
|
|
20174
|
-
line-height: var(--pont-button-font-line-height-default);
|
|
20175
|
-
}
|
|
20176
21605
|
.pont-text-calendar-caption-label-font{
|
|
20177
21606
|
font-size: var(--pont-calendar-caption-label-font-size);
|
|
20178
21607
|
line-height: var(--pont-calendar-caption-label-font-line-height);
|
|
@@ -20384,9 +21813,6 @@ video {
|
|
|
20384
21813
|
.pont-font-breadcrumb-page-font-weight{
|
|
20385
21814
|
font-weight: var(--pont-breadcrumb-page-font-weight);
|
|
20386
21815
|
}
|
|
20387
|
-
.pont-font-button-font-weight{
|
|
20388
|
-
font-weight: var(--pont-button-font-weight);
|
|
20389
|
-
}
|
|
20390
21816
|
.pont-font-calendar-caption-label-font-weight{
|
|
20391
21817
|
font-weight: var(--pont-calendar-caption-label-font-weight);
|
|
20392
21818
|
}
|
|
@@ -20402,9 +21828,6 @@ video {
|
|
|
20402
21828
|
.pont-font-context-menu-label-font-weight{
|
|
20403
21829
|
font-weight: var(--pont-context-menu-label-font-weight);
|
|
20404
21830
|
}
|
|
20405
|
-
.pont-font-date-picker-trigger-button-font-weight{
|
|
20406
|
-
font-weight: var(--pont-date-picker-trigger-button-font-weight);
|
|
20407
|
-
}
|
|
20408
21831
|
.pont-font-dialog-description-font-weight{
|
|
20409
21832
|
font-weight: var(--pont-dialog-description-font-weight);
|
|
20410
21833
|
}
|
|
@@ -20484,18 +21907,6 @@ video {
|
|
|
20484
21907
|
.pont-text-breadcrumb-page-color-text{
|
|
20485
21908
|
color: hsl(var(--pont-breadcrumb-page-color-text));
|
|
20486
21909
|
}
|
|
20487
|
-
.pont-text-button-default-color-text{
|
|
20488
|
-
color: var(--pont-button-default-color-text);
|
|
20489
|
-
}
|
|
20490
|
-
.pont-text-button-destructive-color-text{
|
|
20491
|
-
color: var(--pont-button-destructive-color-text);
|
|
20492
|
-
}
|
|
20493
|
-
.pont-text-button-link-color-text{
|
|
20494
|
-
color: var(--pont-button-link-color-text);
|
|
20495
|
-
}
|
|
20496
|
-
.pont-text-button-secondary-color-text{
|
|
20497
|
-
color: var(--pont-button-secondary-color-text);
|
|
20498
|
-
}
|
|
20499
21910
|
.pont-text-calendar-day-button-outside-color-text{
|
|
20500
21911
|
color: hsl(var(--pont-calendar-day-button-outside-color-text));
|
|
20501
21912
|
}
|
|
@@ -21162,26 +22573,6 @@ body {
|
|
|
21162
22573
|
background-color: hsl(var(--accent));
|
|
21163
22574
|
}
|
|
21164
22575
|
|
|
21165
|
-
.hover\:pont-bg-button-default-color-bg-hover:hover{
|
|
21166
|
-
background-color: var(--pont-button-default-color-bg-hover);
|
|
21167
|
-
}
|
|
21168
|
-
|
|
21169
|
-
.hover\:pont-bg-button-destructive-color-bg-hover:hover{
|
|
21170
|
-
background-color: var(--pont-button-destructive-color-bg-hover);
|
|
21171
|
-
}
|
|
21172
|
-
|
|
21173
|
-
.hover\:pont-bg-button-ghost-color-bg-hover:hover{
|
|
21174
|
-
background-color: var(--pont-button-ghost-color-bg-hover);
|
|
21175
|
-
}
|
|
21176
|
-
|
|
21177
|
-
.hover\:pont-bg-button-outline-color-bg-hover:hover{
|
|
21178
|
-
background-color: var(--pont-button-outline-color-bg-hover);
|
|
21179
|
-
}
|
|
21180
|
-
|
|
21181
|
-
.hover\:pont-bg-button-secondary-color-bg-hover:hover{
|
|
21182
|
-
background-color: var(--pont-button-secondary-color-bg-hover);
|
|
21183
|
-
}
|
|
21184
|
-
|
|
21185
22576
|
.hover\:pont-bg-carousel-button-color-bg-hover:hover{
|
|
21186
22577
|
background-color: hsl(var(--pont-carousel-button-color-bg-hover));
|
|
21187
22578
|
}
|
|
@@ -21271,14 +22662,6 @@ body {
|
|
|
21271
22662
|
color: hsl(var(--pont-breadcrumb-link-color-text-hover));
|
|
21272
22663
|
}
|
|
21273
22664
|
|
|
21274
|
-
.hover\:pont-text-button-ghost-color-text-hover:hover{
|
|
21275
|
-
color: var(--pont-button-ghost-color-text-hover);
|
|
21276
|
-
}
|
|
21277
|
-
|
|
21278
|
-
.hover\:pont-text-button-outline-color-text-hover:hover{
|
|
21279
|
-
color: var(--pont-button-outline-color-text-hover);
|
|
21280
|
-
}
|
|
21281
|
-
|
|
21282
22665
|
.hover\:pont-text-command-item-color-text-hover:hover{
|
|
21283
22666
|
color: hsl(var(--pont-command-item-color-text-hover));
|
|
21284
22667
|
}
|
|
@@ -21425,18 +22808,10 @@ body {
|
|
|
21425
22808
|
border-width: var(--pont-accordion-trigger-width-border-focus);
|
|
21426
22809
|
}
|
|
21427
22810
|
|
|
21428
|
-
.focus-visible\:pont-border-button-width-border-focus:focus-visible{
|
|
21429
|
-
border-width: var(--pont-button-width-border);
|
|
21430
|
-
}
|
|
21431
|
-
|
|
21432
22811
|
.focus-visible\:pont-border-accordion-trigger-color-border-focus:focus-visible{
|
|
21433
22812
|
border-color: hsl(var(--pont-accordion-trigger-color-border-focus));
|
|
21434
22813
|
}
|
|
21435
22814
|
|
|
21436
|
-
.focus-visible\:pont-border-button-color-border-focus:focus-visible{
|
|
21437
|
-
border-color: var(--pont-button-color-border-focus);
|
|
21438
|
-
}
|
|
21439
|
-
|
|
21440
22815
|
.focus-visible\:pont-border-radio-group-item-color-border-focus:focus-visible{
|
|
21441
22816
|
border-color: hsl(var(--pont-radio-group-item-color-border-focus));
|
|
21442
22817
|
}
|
|
@@ -21482,12 +22857,6 @@ body {
|
|
|
21482
22857
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
21483
22858
|
}
|
|
21484
22859
|
|
|
21485
|
-
.focus-visible\:pont-ring-button-width-ring-focus:focus-visible{
|
|
21486
|
-
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
21487
|
-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--pont-button-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
21488
|
-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
21489
|
-
}
|
|
21490
|
-
|
|
21491
22860
|
.focus-visible\:pont-ring-radio-group-item-width-ring-focus:focus-visible{
|
|
21492
22861
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
21493
22862
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--pont-radio-group-item-width-ring-focus) + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
@@ -21522,30 +22891,6 @@ body {
|
|
|
21522
22891
|
--tw-ring-color: hsl(var(--pont-accordion-trigger-color-ring-focus));
|
|
21523
22892
|
}
|
|
21524
22893
|
|
|
21525
|
-
.focus-visible\:pont-ring-button-default-color-ring-focus:focus-visible{
|
|
21526
|
-
--tw-ring-color: var(--pont-button-color-ring-focus);
|
|
21527
|
-
}
|
|
21528
|
-
|
|
21529
|
-
.focus-visible\:pont-ring-button-destructive-color-ring-focus:focus-visible{
|
|
21530
|
-
--tw-ring-color: var(--pont-button-destructive-color-ring-focus);
|
|
21531
|
-
}
|
|
21532
|
-
|
|
21533
|
-
.focus-visible\:pont-ring-button-ghost-color-ring-focus:focus-visible{
|
|
21534
|
-
--tw-ring-color: var(--pont-button-color-ring-focus);
|
|
21535
|
-
}
|
|
21536
|
-
|
|
21537
|
-
.focus-visible\:pont-ring-button-link-color-ring-focus:focus-visible{
|
|
21538
|
-
--tw-ring-color: var(--pont-button-color-ring-focus);
|
|
21539
|
-
}
|
|
21540
|
-
|
|
21541
|
-
.focus-visible\:pont-ring-button-outline-color-ring-focus:focus-visible{
|
|
21542
|
-
--tw-ring-color: var(--pont-button-color-ring-focus);
|
|
21543
|
-
}
|
|
21544
|
-
|
|
21545
|
-
.focus-visible\:pont-ring-button-secondary-color-ring-focus:focus-visible{
|
|
21546
|
-
--tw-ring-color: var(--pont-button-color-ring-focus);
|
|
21547
|
-
}
|
|
21548
|
-
|
|
21549
22894
|
.focus-visible\:pont-ring-radio-group-item-color-ring-focus:focus-visible{
|
|
21550
22895
|
--tw-ring-color: hsl(var(--pont-radio-group-item-color-ring-focus));
|
|
21551
22896
|
}
|
|
@@ -21606,10 +22951,6 @@ body {
|
|
|
21606
22951
|
opacity: 0.5;
|
|
21607
22952
|
}
|
|
21608
22953
|
|
|
21609
|
-
.disabled\:pont-opacity-button-opacity-disabled:disabled{
|
|
21610
|
-
opacity: var(--pont-button-opacity-disabled);
|
|
21611
|
-
}
|
|
21612
|
-
|
|
21613
22954
|
.disabled\:pont-opacity-calendar-day-button-opacity-disabled:disabled{
|
|
21614
22955
|
opacity: var(--pont-calendar-day-button-opacity-disabled);
|
|
21615
22956
|
}
|
|
@@ -21655,29 +22996,6 @@ body {
|
|
|
21655
22996
|
padding-right: 0.75rem;
|
|
21656
22997
|
}
|
|
21657
22998
|
|
|
21658
|
-
.has-\[\>svg\]\:pont-px-button-space-px-default-has-icon:has(>svg){
|
|
21659
|
-
padding-left: var(--pont-button-space-px-default-has-icon);
|
|
21660
|
-
padding-right: var(--pont-button-space-px-default-has-icon);
|
|
21661
|
-
}
|
|
21662
|
-
|
|
21663
|
-
.has-\[\>svg\]\:pont-px-button-space-px-lg-has-icon:has(>svg){
|
|
21664
|
-
padding-left: var(--pont-button-space-px-lg-has-icon);
|
|
21665
|
-
padding-right: var(--pont-button-space-px-lg-has-icon);
|
|
21666
|
-
}
|
|
21667
|
-
|
|
21668
|
-
.has-\[\>svg\]\:pont-px-button-space-px-sm-has-icon:has(>svg){
|
|
21669
|
-
padding-left: var(--pont-button-space-px-sm-has-icon);
|
|
21670
|
-
padding-right: var(--pont-button-space-px-sm-has-icon);
|
|
21671
|
-
}
|
|
21672
|
-
|
|
21673
|
-
.aria-disabled\:pont-opacity-calendar-button-next-opacity-disabled[aria-disabled="true"]{
|
|
21674
|
-
opacity: var(--pont-calendar-button-next-opacity-disabled);
|
|
21675
|
-
}
|
|
21676
|
-
|
|
21677
|
-
.aria-disabled\:pont-opacity-calendar-button-previous-opacity-disabled[aria-disabled="true"]{
|
|
21678
|
-
opacity: var(--pont-calendar-button-previous-opacity-disabled);
|
|
21679
|
-
}
|
|
21680
|
-
|
|
21681
22999
|
.aria-selected\:pont-bg-command-item-color-bg-selected[aria-selected="true"]{
|
|
21682
23000
|
background-color: hsl(var(--pont-command-item-color-bg-selected));
|
|
21683
23001
|
}
|
|
@@ -21880,10 +23198,6 @@ body {
|
|
|
21880
23198
|
background-color: hsl(var(--pont-menubar-trigger-color-bg-active));
|
|
21881
23199
|
}
|
|
21882
23200
|
|
|
21883
|
-
.data-\[empty\=true\]\:pont-text-date-picker-trigger-button-color-text-empty[data-empty="true"]{
|
|
21884
|
-
color: hsl(var(--pont-date-picker-trigger-button-color-text-empty));
|
|
21885
|
-
}
|
|
21886
|
-
|
|
21887
23201
|
.data-\[placeholder\]\:pont-text-select-trigger-placeholder-color-text[data-placeholder]{
|
|
21888
23202
|
color: hsl(var(--pont-select-trigger-placeholder-color-text));
|
|
21889
23203
|
}
|
|
@@ -22335,11 +23649,6 @@ body {
|
|
|
22335
23649
|
width: 1.25rem;
|
|
22336
23650
|
}
|
|
22337
23651
|
|
|
22338
|
-
.\[\&_svg\:not\(\[class\*\=\"pont-size-\"\]\)\]\:pont-size-button-icon-space-size svg:not([class*="pont-size-"]){
|
|
22339
|
-
width: var(--pont-button-icon-space-size-default);
|
|
22340
|
-
height: var(--pont-button-icon-space-size-default);
|
|
22341
|
-
}
|
|
22342
|
-
|
|
22343
23652
|
.\[\&_svg\:not\(\[class\*\=\"pont-size-\"\]\)\]\:pont-size-command-item-icon-space-size svg:not([class*="pont-size-"]){
|
|
22344
23653
|
width: var(--pont-command-item-icon-space-size);
|
|
22345
23654
|
height: var(--pont-command-item-icon-space-size);
|