@workday/canvas-tokens-web 4.3.0-beta.2 → 4.3.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/css/base/_variables.css +2 -2
- package/css/brand/_variables.css +1 -1
- package/css/component/_variables.css +1 -1
- package/css/legacy/base.css +298 -0
- package/css/legacy/brand.css +105 -0
- package/css/legacy/component.css +23 -0
- package/css/legacy/system.css +163 -0
- package/css/system/_variables.css +4 -4
- package/dist/common-js/base/index.d.ts +825 -732
- package/dist/common-js/base/index.js +295 -1
- package/dist/common-js/brand/index.d.ts +149 -40
- package/dist/common-js/brand/index.js +105 -1
- package/dist/common-js/component/index.d.ts +36 -1
- package/dist/common-js/component/index.js +31 -1
- package/dist/common-js/index.d.ts +1 -1
- package/dist/common-js/index.js +1 -1
- package/dist/common-js/system/index.d.ts +391 -18
- package/dist/common-js/system/index.js +369 -1
- package/dist/es6/base/index.d.ts +825 -732
- package/dist/es6/base/index.js +295 -1
- package/dist/es6/brand/index.d.ts +149 -40
- package/dist/es6/brand/index.js +105 -1
- package/dist/es6/component/index.d.ts +36 -1
- package/dist/es6/component/index.js +31 -1
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/system/index.d.ts +391 -18
- package/dist/es6/system/index.js +369 -1
- package/less/base/_variables.less +2 -2
- package/less/brand/_variables.less +1 -1
- package/less/component/_variables.less +1 -1
- package/less/system/_variables.less +4 -4
- package/package.json +1 -1
- package/scss/base/_variables.sass +2 -2
- package/scss/base/_variables.scss +2 -2
- package/scss/brand/_variables.sass +1 -1
- package/scss/brand/_variables.scss +1 -1
- package/scss/component/_variables.sass +1 -1
- package/scss/component/_variables.scss +1 -1
- package/scss/system/_variables.sass +4 -4
- package/scss/system/_variables.scss +4 -4
package/dist/es6/system/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const breakpoints = {
|
|
@@ -825,3 +825,371 @@ export const fontWeight = {
|
|
|
825
825
|
"medium": "--cnvs-sys-font-weight-medium",
|
|
826
826
|
"bold": "--cnvs-sys-font-weight-bold"
|
|
827
827
|
};
|
|
828
|
+
export const legacy = {
|
|
829
|
+
"breakpoints": {
|
|
830
|
+
"sm": "var(--cnvs-sys-breakpoints-sm, var(--cnvs-sys-breakpoints-s, 320px))",
|
|
831
|
+
"md": "var(--cnvs-sys-breakpoints-md, var(--cnvs-sys-breakpoints-m, 768px))",
|
|
832
|
+
"lg": "var(--cnvs-sys-breakpoints-lg, var(--cnvs-sys-breakpoints-l, 1024px))"
|
|
833
|
+
},
|
|
834
|
+
"shape": {
|
|
835
|
+
"none": "var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0))",
|
|
836
|
+
"sm": "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem))",
|
|
837
|
+
"md": "var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem))",
|
|
838
|
+
"lg": "var(--cnvs-sys-shape-lg, 0.75rem)",
|
|
839
|
+
"xl": "var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem))",
|
|
840
|
+
"xxl": "var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem))",
|
|
841
|
+
"xxxl": "var(--cnvs-sys-shape-xxxl, 2rem)",
|
|
842
|
+
"full": "var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem))"
|
|
843
|
+
},
|
|
844
|
+
"fontSize": {
|
|
845
|
+
"subtext": {
|
|
846
|
+
"sm": "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))",
|
|
847
|
+
"md": "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))",
|
|
848
|
+
"lg": "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))"
|
|
849
|
+
},
|
|
850
|
+
"body": {
|
|
851
|
+
"sm": "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))",
|
|
852
|
+
"md": "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))",
|
|
853
|
+
"lg": "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))"
|
|
854
|
+
},
|
|
855
|
+
"heading": {
|
|
856
|
+
"sm": "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))",
|
|
857
|
+
"md": "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))",
|
|
858
|
+
"lg": "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))"
|
|
859
|
+
},
|
|
860
|
+
"title": {
|
|
861
|
+
"sm": "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))",
|
|
862
|
+
"md": "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))",
|
|
863
|
+
"lg": "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))"
|
|
864
|
+
}
|
|
865
|
+
},
|
|
866
|
+
"lineHeight": {
|
|
867
|
+
"subtext": {
|
|
868
|
+
"sm": "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))",
|
|
869
|
+
"md": "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))",
|
|
870
|
+
"lg": "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))"
|
|
871
|
+
},
|
|
872
|
+
"body": {
|
|
873
|
+
"sm": "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))",
|
|
874
|
+
"md": "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))",
|
|
875
|
+
"lg": "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))"
|
|
876
|
+
},
|
|
877
|
+
"heading": {
|
|
878
|
+
"sm": "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))",
|
|
879
|
+
"md": "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))",
|
|
880
|
+
"lg": "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))"
|
|
881
|
+
},
|
|
882
|
+
"title": {
|
|
883
|
+
"sm": "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))",
|
|
884
|
+
"md": "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))",
|
|
885
|
+
"lg": "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))"
|
|
886
|
+
}
|
|
887
|
+
},
|
|
888
|
+
"type": {
|
|
889
|
+
"subtext": {
|
|
890
|
+
"sm": {
|
|
891
|
+
"fontFamily": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
|
|
892
|
+
"fontWeight": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
|
|
893
|
+
"lineHeight": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
|
|
894
|
+
"fontSize": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
|
|
895
|
+
"letterSpacing": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))"
|
|
896
|
+
},
|
|
897
|
+
"md": {
|
|
898
|
+
"fontFamily": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
|
|
899
|
+
"fontWeight": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
|
|
900
|
+
"lineHeight": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
|
|
901
|
+
"fontSize": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
|
|
902
|
+
"letterSpacing": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))"
|
|
903
|
+
},
|
|
904
|
+
"lg": {
|
|
905
|
+
"fontFamily": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
|
|
906
|
+
"fontWeight": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
|
|
907
|
+
"lineHeight": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
|
|
908
|
+
"fontSize": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
|
|
909
|
+
"letterSpacing": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))"
|
|
910
|
+
}
|
|
911
|
+
},
|
|
912
|
+
"body": {
|
|
913
|
+
"sm": {
|
|
914
|
+
"fontFamily": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
|
|
915
|
+
"fontWeight": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
|
|
916
|
+
"lineHeight": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
|
|
917
|
+
"fontSize": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
|
|
918
|
+
"letterSpacing": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))"
|
|
919
|
+
},
|
|
920
|
+
"md": {
|
|
921
|
+
"fontFamily": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))",
|
|
922
|
+
"fontWeight": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))",
|
|
923
|
+
"lineHeight": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))",
|
|
924
|
+
"fontSize": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))"
|
|
925
|
+
},
|
|
926
|
+
"lg": {
|
|
927
|
+
"fontFamily": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))",
|
|
928
|
+
"fontWeight": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))",
|
|
929
|
+
"lineHeight": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))",
|
|
930
|
+
"fontSize": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))"
|
|
931
|
+
}
|
|
932
|
+
},
|
|
933
|
+
"heading": {
|
|
934
|
+
"sm": {
|
|
935
|
+
"fontFamily": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))",
|
|
936
|
+
"fontWeight": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))",
|
|
937
|
+
"lineHeight": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))",
|
|
938
|
+
"fontSize": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))"
|
|
939
|
+
},
|
|
940
|
+
"md": {
|
|
941
|
+
"fontFamily": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))",
|
|
942
|
+
"fontWeight": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))",
|
|
943
|
+
"lineHeight": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))",
|
|
944
|
+
"fontSize": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))"
|
|
945
|
+
},
|
|
946
|
+
"lg": {
|
|
947
|
+
"fontFamily": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))",
|
|
948
|
+
"fontWeight": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))",
|
|
949
|
+
"lineHeight": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))",
|
|
950
|
+
"fontSize": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))"
|
|
951
|
+
}
|
|
952
|
+
},
|
|
953
|
+
"title": {
|
|
954
|
+
"sm": {
|
|
955
|
+
"fontFamily": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))",
|
|
956
|
+
"fontWeight": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))",
|
|
957
|
+
"lineHeight": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))",
|
|
958
|
+
"fontSize": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))"
|
|
959
|
+
},
|
|
960
|
+
"md": {
|
|
961
|
+
"fontFamily": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))",
|
|
962
|
+
"fontWeight": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))",
|
|
963
|
+
"lineHeight": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))",
|
|
964
|
+
"fontSize": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))"
|
|
965
|
+
},
|
|
966
|
+
"lg": {
|
|
967
|
+
"fontFamily": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))",
|
|
968
|
+
"fontWeight": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))",
|
|
969
|
+
"lineHeight": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))",
|
|
970
|
+
"fontSize": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))"
|
|
971
|
+
}
|
|
972
|
+
}
|
|
973
|
+
},
|
|
974
|
+
"color": {
|
|
975
|
+
"fg": {
|
|
976
|
+
"info": {
|
|
977
|
+
"default": "var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)))",
|
|
978
|
+
"strong": "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))"
|
|
979
|
+
},
|
|
980
|
+
"danger": {
|
|
981
|
+
"default": "var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))",
|
|
982
|
+
"strong": "var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)))"
|
|
983
|
+
},
|
|
984
|
+
"warning": {
|
|
985
|
+
"default": "var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1))",
|
|
986
|
+
"strong": "var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1))"
|
|
987
|
+
},
|
|
988
|
+
"success": {
|
|
989
|
+
"default": "var(--cnvs-sys-color-fg-success-default, oklch(0.5069 0.1569 145.56 / 1))",
|
|
990
|
+
"strong": "var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1))"
|
|
991
|
+
}
|
|
992
|
+
},
|
|
993
|
+
"border": {
|
|
994
|
+
"input": {
|
|
995
|
+
"hover": "var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)))"
|
|
996
|
+
},
|
|
997
|
+
"default": "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))",
|
|
998
|
+
"strong": "var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)))",
|
|
999
|
+
"info": {
|
|
1000
|
+
"default": "var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)))"
|
|
1001
|
+
},
|
|
1002
|
+
"danger": "var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)))",
|
|
1003
|
+
"warning": "var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)))",
|
|
1004
|
+
"inverse": {
|
|
1005
|
+
"default": "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))",
|
|
1006
|
+
"strong": "var(--cnvs-sys-color-border-inverse-strong, oklch(1 0 0 / 0.67))"
|
|
1007
|
+
}
|
|
1008
|
+
},
|
|
1009
|
+
"shadow": {
|
|
1010
|
+
"base": "var(--cnvs-sys-color-shadow-base, oklch(0.3057 0.079 256.22 / 0.13))",
|
|
1011
|
+
"ambient": "var(--cnvs-sys-color-shadow-ambient, oklch(0.3337 0.0688 250.79 / 0.09))"
|
|
1012
|
+
},
|
|
1013
|
+
"surface": {
|
|
1014
|
+
"default": "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
|
|
1015
|
+
"navigation": "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))",
|
|
1016
|
+
"popover": "var(--cnvs-sys-color-surface-popover, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
|
|
1017
|
+
"modal": "var(--cnvs-sys-color-surface-modal, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
|
|
1018
|
+
"raised": "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))",
|
|
1019
|
+
"alt": {
|
|
1020
|
+
"default": "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))",
|
|
1021
|
+
"strong": "var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)))"
|
|
1022
|
+
},
|
|
1023
|
+
"loading": "var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13))",
|
|
1024
|
+
"info": {
|
|
1025
|
+
"default": "var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)))",
|
|
1026
|
+
"strong": "var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)))"
|
|
1027
|
+
},
|
|
1028
|
+
"danger": {
|
|
1029
|
+
"default": "var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04))",
|
|
1030
|
+
"strong": "var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1))"
|
|
1031
|
+
},
|
|
1032
|
+
"warning": {
|
|
1033
|
+
"default": "var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)))",
|
|
1034
|
+
"strong": "var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)))"
|
|
1035
|
+
},
|
|
1036
|
+
"success": {
|
|
1037
|
+
"default": "var(--cnvs-sys-color-surface-success-default, oklch(0.8695 0.2801 143.52 / 0.08))",
|
|
1038
|
+
"strong": "var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15))"
|
|
1039
|
+
},
|
|
1040
|
+
"ai": {
|
|
1041
|
+
"default": "var(--cnvs-sys-color-surface-ai-default, var(--cnvs-sys-color-bg-ai-default, oklch(0.6225 0.2064 255.9 / 0.17)))",
|
|
1042
|
+
"hover": "var(--cnvs-sys-color-surface-ai-hover, var(--cnvs-sys-color-bg-ai-strong, oklch(0.6048 0.2166 257.21 / 0.31)))",
|
|
1043
|
+
"pressed": "var(--cnvs-sys-color-surface-ai-pressed, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.708 0.1549 255.41 / 1)))"
|
|
1044
|
+
},
|
|
1045
|
+
"transparent": "var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)))",
|
|
1046
|
+
"inverse": "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
|
|
1047
|
+
"contrast": {
|
|
1048
|
+
"default": "var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)))",
|
|
1049
|
+
"strong": "var(--cnvs-sys-color-surface-contrast-strong, var(--cnvs-sys-color-bg-contrast-strong, oklch(0.0672 0 0 / 0.89)))"
|
|
1050
|
+
},
|
|
1051
|
+
"overlay": {
|
|
1052
|
+
"hover": {
|
|
1053
|
+
"default": "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))",
|
|
1054
|
+
"inverse": "var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16))"
|
|
1055
|
+
},
|
|
1056
|
+
"mixin": "var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1))",
|
|
1057
|
+
"pressed": {
|
|
1058
|
+
"default": "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))",
|
|
1059
|
+
"inverse": "var(--cnvs-sys-color-surface-overlay-pressed-inverse, oklch(1 0 0 / 0.26))"
|
|
1060
|
+
},
|
|
1061
|
+
"scrim": "var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36))"
|
|
1062
|
+
}
|
|
1063
|
+
},
|
|
1064
|
+
"accent": {
|
|
1065
|
+
"ai": "var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)))",
|
|
1066
|
+
"info": "var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)))",
|
|
1067
|
+
"danger": "var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))",
|
|
1068
|
+
"warning": "var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1))",
|
|
1069
|
+
"success": "var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)))",
|
|
1070
|
+
"contrast": "var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84))",
|
|
1071
|
+
"muted": {
|
|
1072
|
+
"default": "var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)))",
|
|
1073
|
+
"soft": "var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)))"
|
|
1074
|
+
},
|
|
1075
|
+
"overlay": {
|
|
1076
|
+
"hover": "var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17))",
|
|
1077
|
+
"pressed": "var(--cnvs-sys-color-accent-overlay-pressed, oklch(0.0847 0 0 / 0.36))",
|
|
1078
|
+
"mixin": "var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1))"
|
|
1079
|
+
}
|
|
1080
|
+
},
|
|
1081
|
+
"brand": {
|
|
1082
|
+
"focus": {
|
|
1083
|
+
"primary": "var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)))",
|
|
1084
|
+
"critical": "var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)))",
|
|
1085
|
+
"caution": {
|
|
1086
|
+
"outer": "var(--cnvs-sys-color-brand-focus-caution-outer, var(--cnvs-brand-common-alert-outer, oklch(0.6601 0.1537 60.7 / 1)))",
|
|
1087
|
+
"inner": "var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)))"
|
|
1088
|
+
}
|
|
1089
|
+
},
|
|
1090
|
+
"surface": {
|
|
1091
|
+
"primary": {
|
|
1092
|
+
"default": "var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08))",
|
|
1093
|
+
"strong": "var(--cnvs-sys-color-brand-surface-primary-strong, oklch(0.6152 0.2108 256.1 / 0.11))"
|
|
1094
|
+
},
|
|
1095
|
+
"critical": {
|
|
1096
|
+
"default": "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))",
|
|
1097
|
+
"strong": "var(--cnvs-sys-color-brand-surface-critical-strong, oklch(0.6434 0.2428 30.17 / 0.1))"
|
|
1098
|
+
},
|
|
1099
|
+
"caution": {
|
|
1100
|
+
"default": "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))",
|
|
1101
|
+
"strong": "var(--cnvs-sys-color-brand-surface-caution-strong, oklch(0.8864 0.1845 100.28 / 0.22))"
|
|
1102
|
+
},
|
|
1103
|
+
"positive": {
|
|
1104
|
+
"default": "var(--cnvs-sys-color-brand-surface-positive-default, oklch(0.8695 0.2801 143.52 / 0.08))",
|
|
1105
|
+
"strong": "var(--cnvs-sys-color-brand-surface-positive-strong, oklch(0.8685 0.2814 143.77 / 0.15))"
|
|
1106
|
+
},
|
|
1107
|
+
"selected": "var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11))"
|
|
1108
|
+
},
|
|
1109
|
+
"accent": {
|
|
1110
|
+
"primary": "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))",
|
|
1111
|
+
"critical": "var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))",
|
|
1112
|
+
"caution": "var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1))",
|
|
1113
|
+
"positive": "var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))",
|
|
1114
|
+
"action": "var(--cnvs-sys-color-brand-accent-action, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))"
|
|
1115
|
+
},
|
|
1116
|
+
"fg": {
|
|
1117
|
+
"primary": {
|
|
1118
|
+
"default": "var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))",
|
|
1119
|
+
"strong": "var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)))"
|
|
1120
|
+
},
|
|
1121
|
+
"critical": {
|
|
1122
|
+
"default": "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))",
|
|
1123
|
+
"strong": "var(--cnvs-sys-color-brand-fg-critical-strong, var(--cnvs-brand-error-dark, oklch(0.4517 0.1847 28.2 / 1)))"
|
|
1124
|
+
},
|
|
1125
|
+
"caution": {
|
|
1126
|
+
"default": "var(--cnvs-sys-color-brand-fg-caution-default, var(--cnvs-brand-alert-darkest, oklch(0.5505 0.1439 50.78 / 1)))",
|
|
1127
|
+
"strong": "var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1))"
|
|
1128
|
+
},
|
|
1129
|
+
"positive": {
|
|
1130
|
+
"default": "var(--cnvs-sys-color-brand-fg-positive-default, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))",
|
|
1131
|
+
"strong": "var(--cnvs-sys-color-brand-fg-positive-strong, var(--cnvs-brand-success-dark, oklch(0.4463 0.1422 144.58 / 1)))"
|
|
1132
|
+
},
|
|
1133
|
+
"selected": "var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)))"
|
|
1134
|
+
},
|
|
1135
|
+
"border": {
|
|
1136
|
+
"primary": "var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1))",
|
|
1137
|
+
"critical": "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))",
|
|
1138
|
+
"caution": "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))"
|
|
1139
|
+
}
|
|
1140
|
+
},
|
|
1141
|
+
"focus": {
|
|
1142
|
+
"inverse": "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))",
|
|
1143
|
+
"contrast": "var(--cnvs-sys-color-focus-contrast, oklch(0.0969 0 0 / 0.84))"
|
|
1144
|
+
}
|
|
1145
|
+
},
|
|
1146
|
+
"opacity": {
|
|
1147
|
+
"surface": {
|
|
1148
|
+
"hover": "var(--cnvs-sys-opacity-surface-hover, 0.08)",
|
|
1149
|
+
"pressed": "var(--cnvs-sys-opacity-surface-pressed, 0.18)"
|
|
1150
|
+
},
|
|
1151
|
+
"accent": {
|
|
1152
|
+
"hover": "var(--cnvs-sys-opacity-accent-hover, 0.18)",
|
|
1153
|
+
"pressed": "var(--cnvs-sys-opacity-accent-pressed, 0.36)"
|
|
1154
|
+
}
|
|
1155
|
+
},
|
|
1156
|
+
"size": {
|
|
1157
|
+
"xxxs": "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))",
|
|
1158
|
+
"xxs": "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))",
|
|
1159
|
+
"xs": "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))",
|
|
1160
|
+
"sm": "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))",
|
|
1161
|
+
"md": "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))",
|
|
1162
|
+
"lg": "var(--cnvs-sys-size-lg, 3rem)",
|
|
1163
|
+
"xl": "var(--cnvs-sys-size-xl, var(--cnvs-sys-space-x14, 3.5rem))",
|
|
1164
|
+
"xxl": "var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem))"
|
|
1165
|
+
},
|
|
1166
|
+
"padding": {
|
|
1167
|
+
"none": "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0))",
|
|
1168
|
+
"xxs": "var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))",
|
|
1169
|
+
"xs": "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))",
|
|
1170
|
+
"sm": "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))",
|
|
1171
|
+
"md": "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))",
|
|
1172
|
+
"lg": "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))",
|
|
1173
|
+
"xl": "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem))",
|
|
1174
|
+
"xxl": "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem))"
|
|
1175
|
+
},
|
|
1176
|
+
"gap": {
|
|
1177
|
+
"none": "var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0))",
|
|
1178
|
+
"xs": "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))",
|
|
1179
|
+
"sm": "var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem))",
|
|
1180
|
+
"md": "var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem))",
|
|
1181
|
+
"lg": "var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem))",
|
|
1182
|
+
"xl": "var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem))",
|
|
1183
|
+
"xxl": "var(--cnvs-sys-gap-xxl, var(--cnvs-sys-space-x16, 4rem))"
|
|
1184
|
+
},
|
|
1185
|
+
"letterSpacing": {
|
|
1186
|
+
"subtext": {
|
|
1187
|
+
"sm": "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))",
|
|
1188
|
+
"md": "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))",
|
|
1189
|
+
"lg": "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))"
|
|
1190
|
+
},
|
|
1191
|
+
"body": {
|
|
1192
|
+
"sm": "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))"
|
|
1193
|
+
}
|
|
1194
|
+
}
|
|
1195
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
|
-
@cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be
|
|
5
|
+
@cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overridden by user preferences
|
|
6
6
|
@cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
|
|
7
7
|
@cnvs-base-duration-50: 50ms;
|
|
8
8
|
@cnvs-base-duration-100: 100ms;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
5
|
@cnvs-component-system-icon-color-background: @cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
|
|
6
6
|
@cnvs-component-system-icon-color-fill: @cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
5
|
@cnvs-sys-opacity-full: 1; // Dev only
|
|
6
6
|
@cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
@@ -310,9 +310,9 @@
|
|
|
310
310
|
@cnvs-sys-space-x20: calc(@cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
|
|
311
311
|
@cnvs-sys-space-x16: calc(@cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
|
|
312
312
|
@cnvs-sys-space-x14: calc(@cnvs-base-unit * 14); // Mobile only
|
|
313
|
-
@cnvs-sys-space-x10: calc(@cnvs-base-unit * 10); //
|
|
314
|
-
@cnvs-sys-space-x8: calc(@cnvs-base-unit * 8); //
|
|
315
|
-
@cnvs-sys-space-x6: calc(@cnvs-base-unit * 6); //
|
|
313
|
+
@cnvs-sys-space-x10: calc(@cnvs-base-unit * 10); // - Used for outer margins on the overall page content ; - Used for inner margins on large items such as page sections
|
|
314
|
+
@cnvs-sys-space-x8: calc(@cnvs-base-unit * 8); // - Standard spacing between cards; - Used to separate groups of content ; - Separate section headings or titles from body text or inputs
|
|
315
|
+
@cnvs-sys-space-x6: calc(@cnvs-base-unit * 6); // - Padding around card content; - Related elements where more space between them can be afforded; - Separate section headings or titles from body text or inputs
|
|
316
316
|
@cnvs-sys-space-x5: calc(@cnvs-base-unit * 5); // Mobile only
|
|
317
317
|
@cnvs-sys-space-x4: calc(@cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
|
|
318
318
|
@cnvs-sys-space-x3: calc(@cnvs-base-unit * 3); // Use when compact padding is required
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
|
-
$cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be
|
|
5
|
+
$cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overridden by user preferences
|
|
6
6
|
$cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
|
|
7
7
|
$cnvs-base-duration-50: 50ms;
|
|
8
8
|
$cnvs-base-duration-100: 100ms;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
|
-
$cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be
|
|
5
|
+
$cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overridden by user preferences
|
|
6
6
|
$cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
|
|
7
7
|
$cnvs-base-duration-50: 50ms;
|
|
8
8
|
$cnvs-base-duration-100: 100ms;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
5
|
$cnvs-component-system-icon-color-background: $cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
|
|
6
6
|
$cnvs-component-system-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
5
|
$cnvs-component-system-icon-color-background: $cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
|
|
6
6
|
$cnvs-component-system-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
5
|
$cnvs-sys-opacity-full: 1; // Dev only
|
|
6
6
|
$cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
@@ -310,9 +310,9 @@ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
|
|
|
310
310
|
$cnvs-sys-space-x20: calc($cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
|
|
311
311
|
$cnvs-sys-space-x16: calc($cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
|
|
312
312
|
$cnvs-sys-space-x14: calc($cnvs-base-unit * 14); // Mobile only
|
|
313
|
-
$cnvs-sys-space-x10: calc($cnvs-base-unit * 10); //
|
|
314
|
-
$cnvs-sys-space-x8: calc($cnvs-base-unit * 8); //
|
|
315
|
-
$cnvs-sys-space-x6: calc($cnvs-base-unit * 6); //
|
|
313
|
+
$cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // - Used for outer margins on the overall page content ; - Used for inner margins on large items such as page sections
|
|
314
|
+
$cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // - Standard spacing between cards; - Used to separate groups of content ; - Separate section headings or titles from body text or inputs
|
|
315
|
+
$cnvs-sys-space-x6: calc($cnvs-base-unit * 6); // - Padding around card content; - Related elements where more space between them can be afforded; - Separate section headings or titles from body text or inputs
|
|
316
316
|
$cnvs-sys-space-x5: calc($cnvs-base-unit * 5); // Mobile only
|
|
317
317
|
$cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
|
|
318
318
|
$cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 28 Apr 2026 18:05:04 GMT
|
|
4
4
|
|
|
5
5
|
$cnvs-sys-opacity-full: 1; // Dev only
|
|
6
6
|
$cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
@@ -310,9 +310,9 @@ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
|
|
|
310
310
|
$cnvs-sys-space-x20: calc($cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
|
|
311
311
|
$cnvs-sys-space-x16: calc($cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
|
|
312
312
|
$cnvs-sys-space-x14: calc($cnvs-base-unit * 14); // Mobile only
|
|
313
|
-
$cnvs-sys-space-x10: calc($cnvs-base-unit * 10); //
|
|
314
|
-
$cnvs-sys-space-x8: calc($cnvs-base-unit * 8); //
|
|
315
|
-
$cnvs-sys-space-x6: calc($cnvs-base-unit * 6); //
|
|
313
|
+
$cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // - Used for outer margins on the overall page content ; - Used for inner margins on large items such as page sections
|
|
314
|
+
$cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // - Standard spacing between cards; - Used to separate groups of content ; - Separate section headings or titles from body text or inputs
|
|
315
|
+
$cnvs-sys-space-x6: calc($cnvs-base-unit * 6); // - Padding around card content; - Related elements where more space between them can be afforded; - Separate section headings or titles from body text or inputs
|
|
316
316
|
$cnvs-sys-space-x5: calc($cnvs-base-unit * 5); // Mobile only
|
|
317
317
|
$cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
|
|
318
318
|
$cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
|