fokus-styles 2.4.0 → 2.5.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/CHANGELOG.md +30 -0
- package/dist/css/components.css +561 -83
- package/dist/css/components.css.map +1 -1
- package/dist/css/components.min.css +1 -1
- package/dist/css/components.min.css.map +1 -1
- package/dist/css/fokus-components.css +561 -83
- package/dist/css/fokus-components.css.map +1 -1
- package/dist/css/fokus-components.min.css +1 -1
- package/dist/css/fokus-components.min.css.map +1 -1
- package/dist/css/fokus-rtl.css +697 -83
- package/dist/css/fokus-rtl.css.map +1 -1
- package/dist/css/fokus-rtl.min.css +1 -1
- package/dist/css/fokus-rtl.min.css.map +1 -1
- package/dist/css/fokus-utilities.css +136 -0
- package/dist/css/fokus-utilities.css.map +1 -1
- package/dist/css/fokus-utilities.min.css +1 -1
- package/dist/css/fokus-utilities.min.css.map +1 -1
- package/dist/css/fokus.css +996 -258
- package/dist/css/fokus.css.map +1 -1
- package/dist/css/fokus.min.css +1 -1
- package/dist/css/fokus.min.css.map +1 -1
- package/dist/css/forms.css +300 -176
- package/dist/css/forms.css.map +1 -1
- package/dist/css/forms.min.css +1 -1
- package/dist/css/forms.min.css.map +1 -1
- package/dist/css/helpers.css +136 -0
- package/dist/css/helpers.css.map +1 -1
- package/dist/css/helpers.min.css +1 -1
- package/dist/css/helpers.min.css.map +1 -1
- package/dist/js/fokus.js +270 -25
- package/dist/js/fokus.js.map +2 -2
- package/dist/js/fokus.min.js +18 -18
- package/dist/js/fokus.min.js.map +3 -3
- package/docs/components/alert.md +69 -24
- package/docs/components/badge.md +23 -4
- package/docs/components/checkbox.md +16 -3
- package/docs/components/popover.md +20 -7
- package/docs/components/radio.md +11 -1
- package/docs/components/responsive.md +19 -0
- package/docs/components/switch.md +30 -8
- package/docs/components/tag.md +19 -4
- package/docs/components/toast.md +72 -59
- package/docs/components/tooltip.md +38 -2
- package/docs/guides/accessibility.md +7 -0
- package/docs/prompts/prompt-plan.md +4 -4
- package/docs/reference/accessibility-matrix.md +7 -7
- package/docs/reference/contrast-report.md +4 -0
- package/docs/reference/definitions.md +5 -1
- package/docs/reference/design-tokens.md +14 -0
- package/docs/reference/size-baseline.json +11 -11
- package/mockup/assets/example-theme.css +11 -0
- package/mockup/assets/showcase-contracts.js +6 -6
- package/mockup/examples/alerts.html +105 -31
- package/mockup/examples/badges-alerts.html +91 -59
- package/mockup/examples/check-radio-switch.html +575 -99
- package/mockup/examples/popover.html +81 -0
- package/mockup/examples/tag.html +97 -87
- package/mockup/examples/toast.html +113 -0
- package/mockup/examples/tooltip.html +68 -0
- package/mockup/forms.html +1 -1
- package/mockup/overlays-commands.html +2 -2
- package/package.json +1 -1
- package/packages/fokus-components/scss/components/_alerts.scss +128 -6
- package/packages/fokus-components/scss/components/_badges.scss +26 -10
- package/packages/fokus-components/scss/components/_index.scss +1 -0
- package/packages/fokus-components/scss/components/_popover.scss +131 -21
- package/packages/fokus-components/scss/components/_responsive.scss +23 -0
- package/packages/fokus-components/scss/components/_tag.scss +37 -14
- package/packages/fokus-components/scss/components/_toasts.scss +156 -11
- package/packages/fokus-components/scss/components/_tooltips.scss +70 -18
- package/packages/fokus-components/scss/forms/_check-radio-switch.scss +313 -215
- package/packages/fokus-components/scss/forms/_forms.scss +16 -0
- package/packages/fokus-js/js/carousel.d.ts +4 -0
- package/packages/fokus-js/js/carousel.js +8 -0
- package/packages/fokus-js/js/core/positioning.js +18 -9
- package/packages/fokus-js/js/dropdown.d.ts +4 -0
- package/packages/fokus-js/js/dropdown.js +7 -0
- package/packages/fokus-js/js/popover.js +26 -1
- package/packages/fokus-js/js/tabs.d.ts +3 -0
- package/packages/fokus-js/js/tabs.js +5 -0
- package/packages/fokus-js/js/tag.js +17 -0
- package/packages/fokus-js/js/toast.js +77 -3
- package/packages/fokus-js/js/tooltip.d.ts +8 -1
- package/packages/fokus-js/js/tooltip.js +106 -13
- package/packages/fokus-utilities/scss/utilities/_api.scss +48 -0
|
@@ -3732,6 +3732,7 @@
|
|
|
3732
3732
|
}
|
|
3733
3733
|
}
|
|
3734
3734
|
}
|
|
3735
|
+
/* stylelint-disable declaration-block-single-line-max-declarations */
|
|
3735
3736
|
@layer utilities {
|
|
3736
3737
|
.fs-u-color-primary {
|
|
3737
3738
|
color: var(--fs-color-primary, oklch(53.5630074284% 0.2132145174 261.6264320248deg)) !important;
|
|
@@ -3973,6 +3974,141 @@
|
|
|
3973
3974
|
text-align: start !important;
|
|
3974
3975
|
}
|
|
3975
3976
|
}
|
|
3977
|
+
.fs-u-d-block {
|
|
3978
|
+
display: block !important;
|
|
3979
|
+
}
|
|
3980
|
+
.fs-u-d-inline {
|
|
3981
|
+
display: inline !important;
|
|
3982
|
+
}
|
|
3983
|
+
.fs-u-d-inline-block {
|
|
3984
|
+
display: inline-block !important;
|
|
3985
|
+
}
|
|
3986
|
+
.fs-u-d-flex {
|
|
3987
|
+
display: flex !important;
|
|
3988
|
+
}
|
|
3989
|
+
.fs-u-d-grid {
|
|
3990
|
+
display: grid !important;
|
|
3991
|
+
}
|
|
3992
|
+
.fs-u-d-none {
|
|
3993
|
+
display: none !important;
|
|
3994
|
+
}
|
|
3995
|
+
.fs-u-flex-row {
|
|
3996
|
+
flex-direction: row !important;
|
|
3997
|
+
}
|
|
3998
|
+
.fs-u-flex-column {
|
|
3999
|
+
flex-direction: column !important;
|
|
4000
|
+
}
|
|
4001
|
+
.fs-u-flex-row-reverse {
|
|
4002
|
+
flex-direction: row-reverse !important;
|
|
4003
|
+
}
|
|
4004
|
+
.fs-u-flex-column-reverse {
|
|
4005
|
+
flex-direction: column-reverse !important;
|
|
4006
|
+
}
|
|
4007
|
+
.fs-u-flex-wrap {
|
|
4008
|
+
flex-wrap: wrap !important;
|
|
4009
|
+
}
|
|
4010
|
+
.fs-u-flex-nowrap {
|
|
4011
|
+
flex-wrap: nowrap !important;
|
|
4012
|
+
}
|
|
4013
|
+
.fs-u-justify-start {
|
|
4014
|
+
justify-content: flex-start !important;
|
|
4015
|
+
}
|
|
4016
|
+
.fs-u-justify-center {
|
|
4017
|
+
justify-content: center !important;
|
|
4018
|
+
}
|
|
4019
|
+
.fs-u-justify-end {
|
|
4020
|
+
justify-content: flex-end !important;
|
|
4021
|
+
}
|
|
4022
|
+
.fs-u-justify-between {
|
|
4023
|
+
justify-content: space-between !important;
|
|
4024
|
+
}
|
|
4025
|
+
.fs-u-align-start {
|
|
4026
|
+
align-items: flex-start !important;
|
|
4027
|
+
}
|
|
4028
|
+
.fs-u-align-center {
|
|
4029
|
+
align-items: center !important;
|
|
4030
|
+
}
|
|
4031
|
+
.fs-u-align-end {
|
|
4032
|
+
align-items: flex-end !important;
|
|
4033
|
+
}
|
|
4034
|
+
.fs-u-gap-0 {
|
|
4035
|
+
gap: 0 !important;
|
|
4036
|
+
}
|
|
4037
|
+
.fs-u-row-gap-0 {
|
|
4038
|
+
row-gap: 0 !important;
|
|
4039
|
+
}
|
|
4040
|
+
.fs-u-column-gap-0 {
|
|
4041
|
+
column-gap: 0 !important;
|
|
4042
|
+
}
|
|
4043
|
+
.fs-u-gap-1 {
|
|
4044
|
+
gap: 0.25rem !important;
|
|
4045
|
+
}
|
|
4046
|
+
.fs-u-row-gap-1 {
|
|
4047
|
+
row-gap: 0.25rem !important;
|
|
4048
|
+
}
|
|
4049
|
+
.fs-u-column-gap-1 {
|
|
4050
|
+
column-gap: 0.25rem !important;
|
|
4051
|
+
}
|
|
4052
|
+
.fs-u-gap-2 {
|
|
4053
|
+
gap: 0.5rem !important;
|
|
4054
|
+
}
|
|
4055
|
+
.fs-u-row-gap-2 {
|
|
4056
|
+
row-gap: 0.5rem !important;
|
|
4057
|
+
}
|
|
4058
|
+
.fs-u-column-gap-2 {
|
|
4059
|
+
column-gap: 0.5rem !important;
|
|
4060
|
+
}
|
|
4061
|
+
.fs-u-gap-3 {
|
|
4062
|
+
gap: 1rem !important;
|
|
4063
|
+
}
|
|
4064
|
+
.fs-u-row-gap-3 {
|
|
4065
|
+
row-gap: 1rem !important;
|
|
4066
|
+
}
|
|
4067
|
+
.fs-u-column-gap-3 {
|
|
4068
|
+
column-gap: 1rem !important;
|
|
4069
|
+
}
|
|
4070
|
+
.fs-u-gap-4 {
|
|
4071
|
+
gap: 1.5rem !important;
|
|
4072
|
+
}
|
|
4073
|
+
.fs-u-row-gap-4 {
|
|
4074
|
+
row-gap: 1.5rem !important;
|
|
4075
|
+
}
|
|
4076
|
+
.fs-u-column-gap-4 {
|
|
4077
|
+
column-gap: 1.5rem !important;
|
|
4078
|
+
}
|
|
4079
|
+
.fs-u-gap-5 {
|
|
4080
|
+
gap: 3rem !important;
|
|
4081
|
+
}
|
|
4082
|
+
.fs-u-row-gap-5 {
|
|
4083
|
+
row-gap: 3rem !important;
|
|
4084
|
+
}
|
|
4085
|
+
.fs-u-column-gap-5 {
|
|
4086
|
+
column-gap: 3rem !important;
|
|
4087
|
+
}
|
|
4088
|
+
.fs-u-text-start {
|
|
4089
|
+
text-align: start !important;
|
|
4090
|
+
}
|
|
4091
|
+
.fs-u-text-center {
|
|
4092
|
+
text-align: center !important;
|
|
4093
|
+
}
|
|
4094
|
+
.fs-u-text-end {
|
|
4095
|
+
text-align: end !important;
|
|
4096
|
+
}
|
|
4097
|
+
.fs-u-text-wrap {
|
|
4098
|
+
white-space: normal !important;
|
|
4099
|
+
}
|
|
4100
|
+
.fs-u-text-nowrap {
|
|
4101
|
+
white-space: nowrap !important;
|
|
4102
|
+
}
|
|
4103
|
+
.fs-u-fw-normal {
|
|
4104
|
+
font-weight: 400 !important;
|
|
4105
|
+
}
|
|
4106
|
+
.fs-u-fw-semibold {
|
|
4107
|
+
font-weight: 600 !important;
|
|
4108
|
+
}
|
|
4109
|
+
.fs-u-fw-bold {
|
|
4110
|
+
font-weight: 700 !important;
|
|
4111
|
+
}
|
|
3976
4112
|
}
|
|
3977
4113
|
@layer tokens {
|
|
3978
4114
|
[data-fs-brand=violet] {
|