html-data.json
Global HTML attributes for your project.
The html-data.json file holds global configurations for the SwiftWC library.
Value Sets
ts
enum Font {
'footnote', // The font used in footnotes
'caption2', // The font used the caption2 size
'caption', // The font used for standard captions
'callout', // The font used for callouts
'body', // The font used body text
'subheadline', // The font used subheadings
'headline', // The font used headings
'title3', // The font used third level hierarchical headings
'title2', // The font used second level hierarchical headings
'title', // The font used first level hierarchical headings
'large-title', // The font used large titles
'extra-large-title', // The font used extra large titles
'extra-large-title2', // The font used second level extra large titles
}ts
enum Spacing {
'0', // 0rem
'1', // 0.1rem
'2', // 0.2rem
'3', // 0.3rem
'4', // 0.4rem
'5', // 0.5rem
'6', // 0.6rem
'7', // 0.7rem
'8', // 0.8rem
'9', // 0.9rem
'10', // 1rem
'11', // 1.1rem
'12', // 1.2rem
'13', // 1.3rem
'14', // 1.4rem
'15', // 1.5rem
'16', // 1.6rem
'17', // 1.7rem
'18', // 1.8rem
'19', // 1.9rem
'20', // 2rem
'21', // 2.1rem
'22', // 2.2rem
'23', // 2.3rem
'24', // 2.4rem
'25', // 2.5rem
'26', // 2.6rem
'27', // 2.7rem
'28', // 2.8rem
'29', // 2.9rem
'30', // 3rem
'31', // 3.1rem
'32', // 3.2rem
'33', // 3.3rem
'34', // 3.4rem
'35', // 3.5rem
'36', // 3.6rem
'37', // 3.7rem
'38', // 3.8rem
'39', // 3.9rem
'40', // 4rem
'41', // 4.1rem
'42', // 4.2rem
'43', // 4.3rem
'44', // 4.4rem
'45', // 4.5rem
'46', // 4.6rem
'47', // 4.7rem
'48', // 4.8rem
'49', // 4.9rem
'50', // 5rem
}ts
enum Tint {
'gray', // Like secondary, like disabled
'blue', // System `blue` color
'red', // System `red` color
'green', // System `green` color
'orange', // System `orange` color
'purple', // System `purple` color
}ts
enum Foreground {
'black', // Applies the system black color (`--black`)
'white', // Applies the system white color (`--white`)
'primary', // Applies the system primary color (`--primary`)
'secondary', // Applies the system secondary color (`--secondary`)
'blue', // Applies the system blue color (`--blue`)
'red', // Applies the system red color (`--red`)
'green', // Applies the system green color (`--green`)
'orange', // Applies the system orange color (`--orange`)
'purple', // Applies the system purple color (`--purple`)
'blue.secondary', // Applies the system secondary blue color (`--blue2`)
'red.secondary', // Applies the system secondary red color (`--red2`)
'green.secondary', // Applies the system secondary green color (`--green2`)
'orange.secondary', // Applies the system secondary orange color (`--orange2`)
'purple.secondary', // Applies the system secondary purple color (`--purple2`)
'blue.tertiary', // Applies the system tertiary blue color (`--blue3`)
'red.tertiary', // Applies the system tertiary red color (`--red3`)
'green.tertiary', // Applies the system tertiary green color (`--green3`)
'orange.tertiary', // Applies the system tertiary orange color (`--orange3`)
'purple.tertiary', // Applies the system tertiary purple color (`--purple3`)
'blue.quaternary', // Applies the system quaternary blue color (`--blue4`)
'red.quaternary', // Applies the system quaternary red color (`--red4`)
'green.quaternary', // Applies the system quaternary green color (`--green4`)
'orange.quaternary', // Applies the system quaternary orange color (`--orange4`)
'purple.quaternary', // Applies the system quaternary purple color (`--purple4`)
'blue.quinary', // Applies the system quinary blue color (`--blue5`)
'red.quinary', // Applies the system quinary red color (`--red5`)
'green.quinary', // Applies the system quinary green color (`--green5`)
'orange.quinary', // Applies the system quinary orange color (`--orange5`)
'purple.quinary', // Applies the system quinary purple color (`--purple5`)
}ts
enum inlineSet {
'leading', // Applies `justify-items: start; justify-content: start;` rules
'leading fill', // Applies `justify-items: start; justify-content: stretch;` rules
'center', // Applies `justify-items: center; justify-content: center;` rules
'trailing', // Applies `justify-items: end; justify-content: end;` rules
'fill', // Applies `justify-items: stretch; justify-content: stretch;` rules
'space-between', // Applies `justify-content: space-between;` rules
}ts
enum blockSet {
'leading', // Applies `align-items: start; align-content: start;` rules
'leading fill', // Applies `align-items: start; align-content: stretch;` rules
'center', // Applies `align-items: center; align-content: center;` rules
'trailing', // Applies `align-items: end; align-content: end;` rules
'fill', // Applies `align-items: stretch; align-content: stretch;` rules
'space-between', // Applies `align-content: space-between;` rules
}ts
enum inlinePlacementSet {
'fill', // Applies `place-items: stretch; place-content: stretch;` rules
'leading fill', // Applies `place-items: stretch start; place-content: stretch start;` rules
'fill leading', // Applies `place-items: start stretch; place-content: start stretch;` rules
'fill space-between', // Applies `align-content: space-between; justify-items: stretch; justify-content: stretch;` rules
}ts
enum blockPlacementSet {
'fill', // Applies `place-items: stretch; place-content: stretch;` rules
'leading fill', // Applies `place-items: start stretch; place-content: start stretch;` rules
'fill leading', // Applies `place-items: stretch start; place-content: stretch start;` rules
'space-between fill', // Applies `align-content: space-between; justify-items: stretch; justify-content: stretch;` rules
}ts
enum ControlSize {
'mini', // A control version that is minimally sized
'regular', // A control version that is the regular size
'small', // A control version that is proportionally smaller size for space-constrained views
'large', // A control version that is prominently sized
}ts
enum Template {
'spacer', // Applies a `minmax(0, 1fr)` grid-template to the main-axis
'repeat(1,spacer)', // Applies a `repeat(1, minmax(0, 1fr))` grid-template to the main-axis
'repeat(2,spacer)', // Applies a `repeat(2, minmax(0, 1fr))` grid-template to the main-axis
'repeat(3,spacer)', // Applies a `repeat(3, minmax(0, 1fr))` grid-template to the main-axis
'repeat(4,spacer)', // Applies a `repeat(4, minmax(0, 1fr))` grid-template to the main-axis
'repeat(5,spacer)', // Applies a `repeat(5, minmax(0, 1fr))` grid-template to the main-axis
'repeat(6,spacer)', // Applies a `repeat(6, minmax(0, 1fr))` grid-template to the main-axis
'repeat(7,spacer)', // Applies a `repeat(7, minmax(0, 1fr))` grid-template to the main-axis
'repeat(8,spacer)', // Applies a `repeat(8, minmax(0, 1fr))` grid-template to the main-axis
'repeat(9,spacer)', // Applies a `repeat(9, minmax(0, 1fr))` grid-template to the main-axis
'repeat(10,spacer)', // Applies a `repeat(10, minmax(0, 1fr))` grid-template to the main-axis
'spacer auto', // Applies a `minmax(0, 1fr) auto` grid-template to the main-axis
'repeat(1,spacer) auto', // Applies a `repeat(1, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(2,spacer) auto', // Applies a `repeat(2, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(3,spacer) auto', // Applies a `repeat(3, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(4,spacer) auto', // Applies a `repeat(4, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(5,spacer) auto', // Applies a `repeat(5, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(6,spacer) auto', // Applies a `repeat(6, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(7,spacer) auto', // Applies a `repeat(7, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(8,spacer) auto', // Applies a `repeat(8, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(9,spacer) auto', // Applies a `repeat(9, minmax(0, 1fr)) auto` grid-template to the main-axis
'repeat(10,spacer) auto', // Applies a `repeat(10, minmax(0, 1fr)) auto` grid-template to the main-axis
'auto spacer', // Applies a `auto minmax(0, 1fr)` grid-template to the main-axis
'repeat(1,auto) spacer', // Applies a `repeat(1, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(2,auto) spacer', // Applies a `repeat(2, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(3,auto) spacer', // Applies a `repeat(3, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(4,auto) spacer', // Applies a `repeat(4, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(5,auto) spacer', // Applies a `repeat(5, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(6,auto) spacer', // Applies a `repeat(6, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(7,auto) spacer', // Applies a `repeat(7, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(8,auto) spacer', // Applies a `repeat(8, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(9,auto) spacer', // Applies a `repeat(9, auto) minmax(0, 1fr)` grid-template to the main-axis
'repeat(10,auto) spacer', // Applies a `repeat(10, auto) minmax(0, 1fr)` grid-template to the main-axis
'auto auto spacer', // Applies a `auto auto minmax(0, 1fr)` grid-template to the main-axis
'auto auto auto spacer', // Applies a `auto auto auto minmax(0, 1fr)` grid-template to the main-axis
'auto auto auto auto spacer', // Applies a `auto auto auto auto minmax(0, 1fr)` grid-template to the main-axis
'auto spacer auto', // Applies a `auto minmax(0, 1fr) auto` grid-template to the main-axis
'repeat(1,auto) spacer repeat(1,auto)', // Applies a `repeat(1, auto) minmax(0, 1fr) repeat(1, auto)` grid-template to the main-axis
'repeat(1,auto) spacer repeat(2,auto)', // Applies a `repeat(1, auto) minmax(0, 1fr) repeat(2, auto)` grid-template to the main-axis
'repeat(1,auto) spacer repeat(3,auto)', // Applies a `repeat(1, auto) minmax(0, 1fr) repeat(3, auto)` grid-template to the main-axis
'repeat(1,auto) spacer repeat(4,auto)', // Applies a `repeat(1, auto) minmax(0, 1fr) repeat(4, auto)` grid-template to the main-axis
'repeat(1,auto) spacer repeat(5,auto)', // Applies a `repeat(1, auto) minmax(0, 1fr) repeat(5, auto)` grid-template to the main-axis
'repeat(2,auto) spacer repeat(1,auto)', // Applies a `repeat(2, auto) minmax(0, 1fr) repeat(1, auto)` grid-template to the main-axis
'repeat(3,auto) spacer repeat(1,auto)', // Applies a `repeat(3, auto) minmax(0, 1fr) repeat(1, auto)` grid-template to the main-axis
'repeat(4,auto) spacer repeat(1,auto)', // Applies a `repeat(4, auto) minmax(0, 1fr) repeat(1, auto)` grid-template to the main-axis
'repeat(5,auto) spacer repeat(1,auto)', // Applies a `repeat(5, auto) minmax(0, 1fr) repeat(1, auto)` grid-template to the main-axis
'repeat(2,auto) spacer repeat(2,auto)', // Applies a `repeat(2, auto) minmax(0, 1fr) repeat(2, auto)` grid-template to the main-axis
'auto spacer auto auto', // Applies a `auto minmax(0, 1fr) auto auto` grid-template to the main-axis
}ts
enum FrameInlineLength {
'infinity', // 100%
'0', // 0rem
'1', // 1rem
'2', // 2rem
'3', // 3rem
'4', // 4rem
'5', // 5rem
'6', // 6rem
'7', // 7rem
'8', // 8rem
'9', // 9rem
'10', // 10rem
'11', // 11rem
'12', // 12rem
'13', // 13rem
'14', // 14rem
'15', // 15rem
'16', // 16rem
'17', // 17rem
'18', // 18rem
'19', // 19rem
'20', // 20rem
'21', // 21rem
'22', // 22rem
'23', // 23rem
'24', // 24rem
'25', // 25rem
'26', // 26rem
'27', // 27rem
'28', // 28rem
'29', // 29rem
'30', // 30rem
'31', // 31rem
'32', // 32rem
'33', // 33rem
'34', // 34rem
'35', // 35rem
'36', // 36rem
'37', // 37rem
'38', // 38rem
'39', // 39rem
'40', // 40rem
'41', // 41rem
'42', // 42rem
'43', // 43rem
'44', // 44rem
'45', // 45rem
'46', // 46rem
'47', // 47rem
'48', // 48rem
'49', // 49rem
'50', // 50rem
'51', // 51rem
'52', // 52rem
'53', // 53rem
'54', // 54rem
'55', // 55rem
'56', // 56rem
'57', // 57rem
'58', // 58rem
'59', // 59rem
'60', // 60rem
'61', // 61rem
'62', // 62rem
'63', // 63rem
'64', // 64rem
'65', // 65rem
'66', // 66rem
'67', // 67rem
'68', // 68rem
'69', // 69rem
'70', // 70rem
'71', // 71rem
'72', // 72rem
'73', // 73rem
'74', // 74rem
'75', // 75rem
'76', // 76rem
'77', // 77rem
'78', // 78rem
'79', // 79rem
'80', // 80rem
'81', // 81rem
'82', // 82rem
'83', // 83rem
'84', // 84rem
'85', // 85rem
'86', // 86rem
'87', // 87rem
'88', // 88rem
'89', // 89rem
'90', // 90rem
'91', // 91rem
'92', // 92rem
'93', // 93rem
'94', // 94rem
'95', // 95rem
'96', // 96rem
'97', // 97rem
'98', // 98rem
'99', // 99rem
'100', // 100rem
'0cqi', // 0cqi
'1cqi', // 1cqi
'2cqi', // 2cqi
'3cqi', // 3cqi
'4cqi', // 4cqi
'5cqi', // 5cqi
'6cqi', // 6cqi
'7cqi', // 7cqi
'8cqi', // 8cqi
'9cqi', // 9cqi
'10cqi', // 10cqi
'11cqi', // 11cqi
'12cqi', // 12cqi
'13cqi', // 13cqi
'14cqi', // 14cqi
'15cqi', // 15cqi
'16cqi', // 16cqi
'17cqi', // 17cqi
'18cqi', // 18cqi
'19cqi', // 19cqi
'20cqi', // 20cqi
'21cqi', // 21cqi
'22cqi', // 22cqi
'23cqi', // 23cqi
'24cqi', // 24cqi
'25cqi', // 25cqi
'26cqi', // 26cqi
'27cqi', // 27cqi
'28cqi', // 28cqi
'29cqi', // 29cqi
'30cqi', // 30cqi
'31cqi', // 31cqi
'32cqi', // 32cqi
'33cqi', // 33cqi
'34cqi', // 34cqi
'35cqi', // 35cqi
'36cqi', // 36cqi
'37cqi', // 37cqi
'38cqi', // 38cqi
'39cqi', // 39cqi
'40cqi', // 40cqi
'41cqi', // 41cqi
'42cqi', // 42cqi
'43cqi', // 43cqi
'44cqi', // 44cqi
'45cqi', // 45cqi
'46cqi', // 46cqi
'47cqi', // 47cqi
'48cqi', // 48cqi
'49cqi', // 49cqi
'50cqi', // 50cqi
'51cqi', // 51cqi
'52cqi', // 52cqi
'53cqi', // 53cqi
'54cqi', // 54cqi
'55cqi', // 55cqi
'56cqi', // 56cqi
'57cqi', // 57cqi
'58cqi', // 58cqi
'59cqi', // 59cqi
'60cqi', // 60cqi
'61cqi', // 61cqi
'62cqi', // 62cqi
'63cqi', // 63cqi
'64cqi', // 64cqi
'65cqi', // 65cqi
'66cqi', // 66cqi
'67cqi', // 67cqi
'68cqi', // 68cqi
'69cqi', // 69cqi
'70cqi', // 70cqi
'71cqi', // 71cqi
'72cqi', // 72cqi
'73cqi', // 73cqi
'74cqi', // 74cqi
'75cqi', // 75cqi
'76cqi', // 76cqi
'77cqi', // 77cqi
'78cqi', // 78cqi
'79cqi', // 79cqi
'80cqi', // 80cqi
'81cqi', // 81cqi
'82cqi', // 82cqi
'83cqi', // 83cqi
'84cqi', // 84cqi
'85cqi', // 85cqi
'86cqi', // 86cqi
'87cqi', // 87cqi
'88cqi', // 88cqi
'89cqi', // 89cqi
'90cqi', // 90cqi
'91cqi', // 91cqi
'92cqi', // 92cqi
'93cqi', // 93cqi
'94cqi', // 94cqi
'95cqi', // 95cqi
'96cqi', // 96cqi
'97cqi', // 97cqi
'98cqi', // 98cqi
'99cqi', // 99cqi
'100cqi', // 100cqi
}ts
enum BackgroundStyle {
'initial', // Reverts any background styles applied to this element, usually by context-aware rules like for example the inset-grouped-list styling applied to all descendants of current view
}