@kcascend/liquid-ui 0.0.1

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.
Files changed (180) hide show
  1. package/README.md +64 -0
  2. package/dist/components/Accordion/Accordion.d.ts +3 -0
  3. package/dist/components/Accordion/Accordion.d.ts.map +1 -0
  4. package/dist/components/Accordion/Accordion.js +46 -0
  5. package/dist/components/Breadcrumb/Breadcrumb.d.ts +3 -0
  6. package/dist/components/Breadcrumb/Breadcrumb.d.ts.map +1 -0
  7. package/dist/components/Breadcrumb/Breadcrumb.js +34 -0
  8. package/dist/components/Button/Button.d.ts +3 -0
  9. package/dist/components/Button/Button.d.ts.map +1 -0
  10. package/dist/components/Button/Button.js +7 -0
  11. package/dist/components/Card/Card.d.ts +3 -0
  12. package/dist/components/Card/Card.d.ts.map +1 -0
  13. package/dist/components/Card/Card.js +19 -0
  14. package/dist/components/Checkbox/Checkbox.d.ts +3 -0
  15. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
  16. package/dist/components/Checkbox/Checkbox.js +17 -0
  17. package/dist/components/ContainedList/ContainedList.d.ts +3 -0
  18. package/dist/components/ContainedList/ContainedList.d.ts.map +1 -0
  19. package/dist/components/ContainedList/ContainedList.js +26 -0
  20. package/dist/components/DataTable/DataTable.d.ts +3 -0
  21. package/dist/components/DataTable/DataTable.d.ts.map +1 -0
  22. package/dist/components/DataTable/DataTable.js +20 -0
  23. package/dist/components/DescriptionList/DescriptionList.d.ts +3 -0
  24. package/dist/components/DescriptionList/DescriptionList.d.ts.map +1 -0
  25. package/dist/components/DescriptionList/DescriptionList.js +14 -0
  26. package/dist/components/Form/Form.d.ts +5 -0
  27. package/dist/components/Form/Form.d.ts.map +1 -0
  28. package/dist/components/Form/Form.js +32 -0
  29. package/dist/components/GridLayout/GridLayout.d.ts +4 -0
  30. package/dist/components/GridLayout/GridLayout.d.ts.map +1 -0
  31. package/dist/components/GridLayout/GridLayout.js +138 -0
  32. package/dist/components/GridLayout/gridTokens.d.ts +18 -0
  33. package/dist/components/GridLayout/gridTokens.d.ts.map +1 -0
  34. package/dist/components/GridLayout/gridTokens.js +91 -0
  35. package/dist/components/Icon/Icon.d.ts +11 -0
  36. package/dist/components/Icon/Icon.d.ts.map +1 -0
  37. package/dist/components/Icon/Icon.js +25 -0
  38. package/dist/components/Icon/icons.d.ts +21 -0
  39. package/dist/components/Icon/icons.d.ts.map +1 -0
  40. package/dist/components/Icon/icons.js +20 -0
  41. package/dist/components/Icon/index.d.ts +3 -0
  42. package/dist/components/Icon/index.d.ts.map +1 -0
  43. package/dist/components/Icon/index.js +1 -0
  44. package/dist/components/Icons/Icons.d.ts +3 -0
  45. package/dist/components/Icons/Icons.d.ts.map +1 -0
  46. package/dist/components/Icons/Icons.js +1 -0
  47. package/dist/components/Index/Index.d.ts +3 -0
  48. package/dist/components/Index/Index.d.ts.map +1 -0
  49. package/dist/components/Index/Index.js +114 -0
  50. package/dist/components/InlineNotification/InlineNotification.d.ts +3 -0
  51. package/dist/components/InlineNotification/InlineNotification.d.ts.map +1 -0
  52. package/dist/components/InlineNotification/InlineNotification.js +47 -0
  53. package/dist/components/Link/Link.d.ts +3 -0
  54. package/dist/components/Link/Link.d.ts.map +1 -0
  55. package/dist/components/Link/Link.js +23 -0
  56. package/dist/components/Modal/Modal.d.ts +3 -0
  57. package/dist/components/Modal/Modal.d.ts.map +1 -0
  58. package/dist/components/Modal/Modal.js +27 -0
  59. package/dist/components/Pagination/Pagination.d.ts +3 -0
  60. package/dist/components/Pagination/Pagination.d.ts.map +1 -0
  61. package/dist/components/Pagination/Pagination.js +34 -0
  62. package/dist/components/Radio/Radio.d.ts +3 -0
  63. package/dist/components/Radio/Radio.d.ts.map +1 -0
  64. package/dist/components/Radio/Radio.js +13 -0
  65. package/dist/components/SearchInput/SearchInput.d.ts +3 -0
  66. package/dist/components/SearchInput/SearchInput.d.ts.map +1 -0
  67. package/dist/components/SearchInput/SearchInput.js +37 -0
  68. package/dist/components/SelectInput/SelectInput.d.ts +3 -0
  69. package/dist/components/SelectInput/SelectInput.d.ts.map +1 -0
  70. package/dist/components/SelectInput/SelectInput.js +14 -0
  71. package/dist/components/StructuredList/StructuredList.d.ts +3 -0
  72. package/dist/components/StructuredList/StructuredList.d.ts.map +1 -0
  73. package/dist/components/StructuredList/StructuredList.js +17 -0
  74. package/dist/components/Tabs/Tabs.d.ts +3 -0
  75. package/dist/components/Tabs/Tabs.d.ts.map +1 -0
  76. package/dist/components/Tabs/Tabs.js +27 -0
  77. package/dist/components/Tag/Tag.d.ts +3 -0
  78. package/dist/components/Tag/Tag.d.ts.map +1 -0
  79. package/dist/components/Tag/Tag.js +8 -0
  80. package/dist/components/TextArea/TextArea.d.ts +3 -0
  81. package/dist/components/TextArea/TextArea.d.ts.map +1 -0
  82. package/dist/components/TextArea/TextArea.js +15 -0
  83. package/dist/components/TextInput/TextInput.d.ts +3 -0
  84. package/dist/components/TextInput/TextInput.d.ts.map +1 -0
  85. package/dist/components/TextInput/TextInput.js +20 -0
  86. package/dist/components/ToggleInput/ToggleInput.d.ts +3 -0
  87. package/dist/components/ToggleInput/ToggleInput.d.ts.map +1 -0
  88. package/dist/components/ToggleInput/ToggleInput.js +10 -0
  89. package/dist/components/Tooltip/Tooltip.d.ts +3 -0
  90. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -0
  91. package/dist/components/Tooltip/Tooltip.js +13 -0
  92. package/dist/generated/tokens.d.ts +9836 -0
  93. package/dist/generated/tokens.d.ts.map +1 -0
  94. package/dist/generated/tokens.js +9834 -0
  95. package/dist/governance/accordionGovernance.d.ts +3 -0
  96. package/dist/governance/accordionGovernance.d.ts.map +1 -0
  97. package/dist/governance/accordionGovernance.js +9 -0
  98. package/dist/governance/breadcrumbGovernance.d.ts +3 -0
  99. package/dist/governance/breadcrumbGovernance.d.ts.map +1 -0
  100. package/dist/governance/breadcrumbGovernance.js +9 -0
  101. package/dist/governance/buttonGovernance.d.ts +3 -0
  102. package/dist/governance/buttonGovernance.d.ts.map +1 -0
  103. package/dist/governance/buttonGovernance.js +9 -0
  104. package/dist/governance/cardGovernance.d.ts +3 -0
  105. package/dist/governance/cardGovernance.d.ts.map +1 -0
  106. package/dist/governance/cardGovernance.js +9 -0
  107. package/dist/governance/checkboxGovernance.d.ts +3 -0
  108. package/dist/governance/checkboxGovernance.d.ts.map +1 -0
  109. package/dist/governance/checkboxGovernance.js +10 -0
  110. package/dist/governance/containedListGovernance.d.ts +3 -0
  111. package/dist/governance/containedListGovernance.d.ts.map +1 -0
  112. package/dist/governance/containedListGovernance.js +9 -0
  113. package/dist/governance/dataTableGovernance.d.ts +3 -0
  114. package/dist/governance/dataTableGovernance.d.ts.map +1 -0
  115. package/dist/governance/dataTableGovernance.js +10 -0
  116. package/dist/governance/descriptionListGovernance.d.ts +3 -0
  117. package/dist/governance/descriptionListGovernance.d.ts.map +1 -0
  118. package/dist/governance/descriptionListGovernance.js +9 -0
  119. package/dist/governance/formGovernance.d.ts +3 -0
  120. package/dist/governance/formGovernance.d.ts.map +1 -0
  121. package/dist/governance/formGovernance.js +9 -0
  122. package/dist/governance/gridLayoutGovernance.d.ts +3 -0
  123. package/dist/governance/gridLayoutGovernance.d.ts.map +1 -0
  124. package/dist/governance/gridLayoutGovernance.js +9 -0
  125. package/dist/governance/indexGovernance.d.ts +3 -0
  126. package/dist/governance/indexGovernance.d.ts.map +1 -0
  127. package/dist/governance/indexGovernance.js +9 -0
  128. package/dist/governance/inlineNotificationGovernance.d.ts +3 -0
  129. package/dist/governance/inlineNotificationGovernance.d.ts.map +1 -0
  130. package/dist/governance/inlineNotificationGovernance.js +9 -0
  131. package/dist/governance/linkGovernance.d.ts +3 -0
  132. package/dist/governance/linkGovernance.d.ts.map +1 -0
  133. package/dist/governance/linkGovernance.js +9 -0
  134. package/dist/governance/modalGovernance.d.ts +3 -0
  135. package/dist/governance/modalGovernance.d.ts.map +1 -0
  136. package/dist/governance/modalGovernance.js +10 -0
  137. package/dist/governance/paginationGovernance.d.ts +3 -0
  138. package/dist/governance/paginationGovernance.d.ts.map +1 -0
  139. package/dist/governance/paginationGovernance.js +10 -0
  140. package/dist/governance/radioGovernance.d.ts +3 -0
  141. package/dist/governance/radioGovernance.d.ts.map +1 -0
  142. package/dist/governance/radioGovernance.js +10 -0
  143. package/dist/governance/searchInputGovernance.d.ts +3 -0
  144. package/dist/governance/searchInputGovernance.d.ts.map +1 -0
  145. package/dist/governance/searchInputGovernance.js +10 -0
  146. package/dist/governance/selectInputGovernance.d.ts +3 -0
  147. package/dist/governance/selectInputGovernance.d.ts.map +1 -0
  148. package/dist/governance/selectInputGovernance.js +10 -0
  149. package/dist/governance/structuredListGovernance.d.ts +3 -0
  150. package/dist/governance/structuredListGovernance.d.ts.map +1 -0
  151. package/dist/governance/structuredListGovernance.js +9 -0
  152. package/dist/governance/tabsGovernance.d.ts +3 -0
  153. package/dist/governance/tabsGovernance.d.ts.map +1 -0
  154. package/dist/governance/tabsGovernance.js +10 -0
  155. package/dist/governance/tagGovernance.d.ts +3 -0
  156. package/dist/governance/tagGovernance.d.ts.map +1 -0
  157. package/dist/governance/tagGovernance.js +10 -0
  158. package/dist/governance/textAreaGovernance.d.ts +3 -0
  159. package/dist/governance/textAreaGovernance.d.ts.map +1 -0
  160. package/dist/governance/textAreaGovernance.js +10 -0
  161. package/dist/governance/textInputGovernance.d.ts +3 -0
  162. package/dist/governance/textInputGovernance.d.ts.map +1 -0
  163. package/dist/governance/textInputGovernance.js +10 -0
  164. package/dist/governance/toggleInputGovernance.d.ts +3 -0
  165. package/dist/governance/toggleInputGovernance.d.ts.map +1 -0
  166. package/dist/governance/toggleInputGovernance.js +10 -0
  167. package/dist/governance/tooltipGovernance.d.ts +3 -0
  168. package/dist/governance/tooltipGovernance.d.ts.map +1 -0
  169. package/dist/governance/tooltipGovernance.js +10 -0
  170. package/dist/index.d.ts +56 -0
  171. package/dist/index.d.ts.map +1 -0
  172. package/dist/index.js +52 -0
  173. package/dist/styles.css +4426 -0
  174. package/dist/tokens/components.css +559 -0
  175. package/dist/tokens/primitives.css +179 -0
  176. package/dist/tokens/semantic.css +376 -0
  177. package/dist/types.d.ts +336 -0
  178. package/dist/types.d.ts.map +1 -0
  179. package/dist/types.js +1 -0
  180. package/package.json +32 -0
package/dist/tokens/components.css ADDED
@@ -0,0 +1,559 @@
1
+ :root {
2
+ --component-accordion-layout-width: 608px;
3
+ --component-accordion-layout-border-width: var(--primitives-stroke-1);
4
+ --component-accordion-layout-header-min-height: var(--primitives-size-48);
5
+ --component-accordion-layout-item-min-height: var(--primitives-size-48);
6
+ --component-accordion-layout-header-padding-x: var(--primitives-space-16);
7
+ --component-accordion-layout-item-padding-x: var(--primitives-space-16);
8
+ --component-accordion-layout-header-padding-y: var(--primitives-space-8);
9
+ --component-accordion-layout-item-padding-y: var(--primitives-space-8);
10
+ --component-accordion-layout-header-gap: var(--primitives-space-16);
11
+ --component-accordion-layout-content-padding-x: var(--primitives-space-16);
12
+ --component-accordion-layout-content-padding-top: var(--primitives-space-8);
13
+ --component-accordion-layout-content-padding-bottom: var(--primitives-space-24);
14
+ --component-accordion-layout-content-padding-right: var(--primitives-space-64);
15
+ --component-accordion-layout-icon-size: var(--primitives-size-24);
16
+ --component-accordion-color-header-background-default: rgba(255, 255, 255, 0);
17
+ --component-accordion-color-header-background-hover: var(--semantic-color-surface-surface-01-hover);
18
+ --component-accordion-color-surface-default: var(--semantic-color-surface-surface-01);
19
+ --component-accordion-color-surface-hover: var(--semantic-color-surface-surface-01-hover);
20
+ --component-accordion-color-border-subtle: var(--semantic-color-border-border-subtle);
21
+ --component-accordion-color-text-title: var(--semantic-color-text-text-primary);
22
+ --component-accordion-color-text-title-disabled: var(--semantic-color-text-text-disabled);
23
+ --component-accordion-color-text-content: var(--semantic-color-text-text-primary);
24
+ --component-accordion-color-icon-default: #666666;
25
+ --component-accordion-color-icon-disabled: var(--semantic-color-icon-icon-disabled);
26
+ --component-accordion-color-focus-ring: var(--semantic-color-focus-focus);
27
+ --component-accordion-typography-title-font-family: var(--primitives-typography-family-cabin);
28
+ --component-accordion-typography-title-font-size: var(--primitives-typography-size-14);
29
+ --component-accordion-typography-title-font-weight: var(--primitives-typography-weight-regular);
30
+ --component-accordion-typography-title-line-height: var(--primitives-typography-line-height-20);
31
+ --component-accordion-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
32
+ --component-accordion-typography-content-font-family: var(--primitives-typography-family-cabin);
33
+ --component-accordion-typography-content-font-size: var(--primitives-typography-size-14);
34
+ --component-accordion-typography-content-font-weight: var(--primitives-typography-weight-regular);
35
+ --component-accordion-typography-content-line-height: var(--primitives-typography-line-height-20);
36
+ --component-accordion-typography-content-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
37
+ --component-breadcrumb-layout-gap: var(--semantic-layout-inline-xs);
38
+ --component-breadcrumb-color-label-text-default: var(--semantic-color-link-link-primary);
39
+ --component-breadcrumb-color-label-text-hover: var(--semantic-color-link-link-primary-hover);
40
+ --component-breadcrumb-color-label-text-current: var(--semantic-color-text-text-primary);
41
+ --component-breadcrumb-color-separator-text: var(--semantic-color-text-text-secondary);
42
+ --component-breadcrumb-color-border-focus: var(--semantic-color-focus-focus);
43
+ --component-breadcrumb-typography-label-font-family: var(--primitives-typography-family-cabin);
44
+ --component-breadcrumb-typography-label-font-size: var(--primitives-typography-size-14);
45
+ --component-breadcrumb-typography-label-font-weight: var(--primitives-typography-weight-regular);
46
+ --component-breadcrumb-typography-label-line-height: var(--primitives-typography-line-height-20);
47
+ --component-breadcrumb-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
48
+ --component-breadcrumb-typography-separator-font-family: var(--primitives-typography-family-cabin);
49
+ --component-breadcrumb-typography-separator-font-size: var(--primitives-typography-size-14);
50
+ --component-breadcrumb-typography-separator-font-weight: var(--primitives-typography-weight-regular);
51
+ --component-breadcrumb-typography-separator-line-height: var(--primitives-typography-line-height-20);
52
+ --component-breadcrumb-typography-separator-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
53
+ --component-button-layout-gap: var(--primitives-space-4);
54
+ --component-button-layout-radius: var(--primitives-radius-0);
55
+ --component-button-layout-height-sm: var(--primitives-size-40);
56
+ --component-button-layout-height-md: var(--primitives-size-44);
57
+ --component-button-layout-height-lg: var(--primitives-size-48);
58
+ --component-button-layout-padding-x-sm: var(--primitives-space-12);
59
+ --component-button-layout-padding-x-md: var(--primitives-space-16);
60
+ --component-button-layout-padding-x-lg: var(--primitives-space-20);
61
+ --component-button-layout-focus-ring-width: 2px;
62
+ --component-button-layout-focus-ring-offset: 2px;
63
+ --component-button-typography-label-font-family: var(--primitives-typography-family-cabin);
64
+ --component-button-typography-label-font-size: var(--primitives-typography-size-14);
65
+ --component-button-typography-label-line-height: var(--primitives-typography-line-height-18);
66
+ --component-button-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
67
+ --component-button-color-focus-ring-default: var(--primitives-color-blue-60);
68
+ --component-button-color-focus-ring-inset: var(--primitives-color-base-white);
69
+ --component-button-color-primary-background-default: var(--semantic-color-action-action-primary);
70
+ --component-button-color-primary-background-hover: var(--primitives-color-albacore-80);
71
+ --component-button-color-primary-background-active: var(--primitives-color-albacore-80);
72
+ --component-button-color-primary-background-disabled: var(--semantic-color-background-background-disabled);
73
+ --component-button-color-primary-text-default: var(--semantic-color-text-text-on-color);
74
+ --component-button-color-primary-text-disabled: var(--semantic-color-text-text-on-color-disabled);
75
+ --component-button-color-secondary-background-default: var(--semantic-color-background-background);
76
+ --component-button-color-secondary-background-hover: var(--semantic-color-action-action-primary);
77
+ --component-button-color-secondary-background-active: var(--primitives-color-albacore-80);
78
+ --component-button-color-secondary-background-disabled: var(--semantic-color-background-background-disabled);
79
+ --component-button-color-secondary-text-default: var(--semantic-color-action-action-primary);
80
+ --component-button-color-secondary-text-hover: var(--semantic-color-text-text-on-color);
81
+ --component-button-color-secondary-text-active: var(--semantic-color-text-text-on-color);
82
+ --component-button-color-secondary-text-disabled: var(--semantic-color-text-text-on-color-disabled);
83
+ --component-button-color-secondary-border-default: var(--semantic-color-action-action-primary);
84
+ --component-button-color-secondary-border-focus: var(--semantic-color-link-link-primary);
85
+ --component-button-color-tertiary-background-hover: var(--semantic-color-surface-surface-01-hover);
86
+ --component-button-color-tertiary-background-active: var(--semantic-color-surface-surface-01-selected);
87
+ --component-button-color-tertiary-background-disabled: var(--semantic-color-background-background-disabled);
88
+ --component-button-color-tertiary-text-default: var(--semantic-color-action-action-primary);
89
+ --component-button-color-tertiary-text-hover: var(--primitives-color-albacore-80);
90
+ --component-button-color-tertiary-text-active: var(--primitives-color-albacore-80);
91
+ --component-button-color-tertiary-text-disabled: var(--semantic-color-text-text-on-color-disabled);
92
+ --component-button-color-danger-background-default: var(--semantic-color-status-status-error);
93
+ --component-button-color-danger-background-hover: var(--primitives-color-red-70);
94
+ --component-button-color-danger-background-active: var(--primitives-color-red-80);
95
+ --component-button-color-danger-background-disabled: var(--semantic-color-background-background-disabled);
96
+ --component-button-color-danger-text-default: var(--semantic-color-text-text-on-color);
97
+ --component-button-color-danger-text-disabled: var(--semantic-color-text-text-on-color-disabled);
98
+ --component-card-layout-width: 320px;
99
+ --component-card-layout-padding-x: var(--primitives-space-16);
100
+ --component-card-layout-padding-y: var(--primitives-space-16);
101
+ --component-card-layout-header-gap: var(--primitives-space-8);
102
+ --component-card-layout-header-body-gap: var(--primitives-space-32);
103
+ --component-card-layout-details-gap: var(--primitives-space-12);
104
+ --component-card-layout-details-column-gap: var(--primitives-space-16);
105
+ --component-card-layout-details-label-width: 104px;
106
+ --component-card-layout-footer-top-gap: var(--primitives-space-32);
107
+ --component-card-layout-action-min-width: var(--primitives-space-96);
108
+ --component-card-layout-focus-ring-width: 2px;
109
+ --component-card-layout-focus-ring-offset: 2px;
110
+ --component-card-color-surface-default: var(--semantic-color-surface-surface-01);
111
+ --component-card-color-surface-hover: var(--semantic-color-surface-surface-01-hover);
112
+ --component-card-color-surface-selected: var(--semantic-color-surface-surface-01-selected);
113
+ --component-card-color-surface-disabled: var(--semantic-color-background-background-disabled);
114
+ --component-card-color-border-focus: var(--semantic-color-focus-focus);
115
+ --component-card-color-title-text: var(--semantic-color-text-text-primary);
116
+ --component-card-color-title-disabled-text: var(--semantic-color-text-text-disabled);
117
+ --component-card-color-description-text: var(--semantic-color-text-text-secondary);
118
+ --component-card-color-description-disabled-text: var(--semantic-color-text-text-disabled);
119
+ --component-card-color-detail-text-type: color;
120
+ --component-card-color-detail-text-value: #161616ff;
121
+ --component-card-color-detail-disabled-text-type: color;
122
+ --component-card-color-detail-disabled-text-value: #a8a8a8ff;
123
+ --component-card-typography-title-font-family: var(--primitives-typography-family-roboto-condensed);
124
+ --component-card-typography-title-font-size: var(--primitives-typography-size-32);
125
+ --component-card-typography-title-font-weight: var(--primitives-typography-weight-medium);
126
+ --component-card-typography-title-line-height: var(--primitives-typography-line-height-40);
127
+ --component-card-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
128
+ --component-card-typography-description-font-family: var(--primitives-typography-family-cabin);
129
+ --component-card-typography-description-font-size: var(--primitives-typography-size-14);
130
+ --component-card-typography-description-font-weight: var(--primitives-typography-weight-regular);
131
+ --component-card-typography-description-line-height: var(--primitives-typography-line-height-20);
132
+ --component-card-typography-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
133
+ --component-card-typography-detail-font-family-type: string;
134
+ --component-card-typography-detail-font-family-value: Cabin;
135
+ --component-card-typography-detail-font-size-type: dimension;
136
+ --component-card-typography-detail-font-size-value: 14px;
137
+ --component-card-typography-detail-font-weight-type: number;
138
+ --component-card-typography-detail-font-weight-value: Regular;
139
+ --component-card-typography-detail-line-height-type: dimension;
140
+ --component-card-typography-detail-line-height-value: 20px;
141
+ --component-card-typography-detail-letter-spacing-type: dimension;
142
+ --component-card-typography-detail-letter-spacing-value: 0.16px;
143
+ --component-checkbox-background-checked: var(--semantic-color-text-text-primary);
144
+ --component-checkbox-background-checked-disabled: var(--semantic-color-border-border-disabled);
145
+ --component-checkbox-border-default: var(--semantic-color-border-border-strong);
146
+ --component-checkbox-border-hover: var(--semantic-color-text-text-primary);
147
+ --component-checkbox-border-focus: var(--semantic-color-focus-focus);
148
+ --component-checkbox-border-disabled: var(--semantic-color-border-border-disabled);
149
+ --component-checkbox-text-label: var(--semantic-color-text-text-primary);
150
+ --component-checkbox-text-label-disabled: var(--semantic-color-text-text-disabled);
151
+ --component-checkbox-icon-check: var(--primitives-color-base-white);
152
+ --component-checkbox-label-family: var(--primitives-typography-family-cabin);
153
+ --component-checkbox-label-size: var(--primitives-typography-size-12);
154
+ --component-checkbox-label-line-height: var(--primitives-typography-line-height-16);
155
+ --component-checkbox-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
156
+ --component-checkbox-layout-size: var(--primitives-size-20);
157
+ --component-checkbox-layout-label-gap: var(--primitives-space-4);
158
+ --component-checkbox-layout-radius: var(--primitives-radius-0);
159
+ --component-checkbox-layout-border-width: var(--primitives-stroke-1);
160
+ --component-contained-list-layout-width: 320px;
161
+ --component-contained-list-layout-padding-x: var(--primitives-space-16);
162
+ --component-contained-list-layout-divider-width: var(--primitives-stroke-1);
163
+ --component-contained-list-layout-item-min-height: var(--primitives-size-48);
164
+ --component-contained-list-layout-header-on-page-min-height: var(--primitives-size-32);
165
+ --component-contained-list-layout-header-disclosed-min-height: var(--primitives-size-48);
166
+ --component-contained-list-color-surface-default: var(--semantic-color-surface-surface-01);
167
+ --component-contained-list-color-divider-subtle: var(--semantic-color-border-border-subtle);
168
+ --component-contained-list-color-header-background-disclosed: var(--semantic-color-surface-surface-01);
169
+ --component-contained-list-color-header-text-on-page: var(--semantic-color-text-text-primary);
170
+ --component-contained-list-color-header-text-disclosed: var(--semantic-color-text-text-secondary);
171
+ --component-contained-list-color-item-text: var(--semantic-color-text-text-primary);
172
+ --component-contained-list-typography-header-title-on-page-font-family: var(--primitives-typography-family-cabin);
173
+ --component-contained-list-typography-header-title-on-page-font-size: var(--primitives-typography-size-16);
174
+ --component-contained-list-typography-header-title-on-page-font-weight: var(--primitives-typography-weight-semibold);
175
+ --component-contained-list-typography-header-title-on-page-line-height: var(--primitives-typography-line-height-24);
176
+ --component-contained-list-typography-header-title-on-page-letter-spacing: var(--primitives-typography-letter-spacing-0);
177
+ --component-contained-list-typography-header-title-disclosed-font-family: var(--primitives-typography-family-cabin);
178
+ --component-contained-list-typography-header-title-disclosed-font-size: var(--primitives-typography-size-14);
179
+ --component-contained-list-typography-header-title-disclosed-font-weight: var(--primitives-typography-weight-medium);
180
+ --component-contained-list-typography-header-title-disclosed-line-height: var(--primitives-typography-line-height-18);
181
+ --component-contained-list-typography-header-title-disclosed-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
182
+ --component-contained-list-typography-item-label-font-family: var(--primitives-typography-family-cabin);
183
+ --component-contained-list-typography-item-label-font-size: var(--primitives-typography-size-16);
184
+ --component-contained-list-typography-item-label-font-weight: var(--primitives-typography-weight-regular);
185
+ --component-contained-list-typography-item-label-line-height: var(--primitives-typography-line-height-24);
186
+ --component-contained-list-typography-item-label-letter-spacing: var(--primitives-typography-letter-spacing-0);
187
+ --component-data-table-layout-width: 720px;
188
+ --component-data-table-layout-row-height: var(--primitives-size-48);
189
+ --component-data-table-layout-checkbox-column-width: var(--primitives-size-48);
190
+ --component-data-table-layout-cell-padding-x: var(--primitives-space-16);
191
+ --component-data-table-layout-cell-padding-y: var(--primitives-space-12);
192
+ --component-data-table-layout-border-width: var(--primitives-stroke-1);
193
+ --component-data-table-layout-header-gap: var(--primitives-space-4);
194
+ --component-data-table-layout-header-padding-top: var(--primitives-space-16);
195
+ --component-data-table-layout-header-padding-x: var(--primitives-space-16);
196
+ --component-data-table-layout-header-padding-bottom: var(--primitives-space-32);
197
+ --component-data-table-color-surface-default: var(--semantic-color-surface-surface-01);
198
+ --component-data-table-color-surface-header: var(--semantic-color-background-background-disabled);
199
+ --component-data-table-color-surface-hover: var(--semantic-color-surface-surface-01-hover);
200
+ --component-data-table-color-surface-selected: var(--semantic-color-background-background-selected);
201
+ --component-data-table-color-border-subtle: var(--semantic-color-border-border-subtle);
202
+ --component-data-table-color-text-title: var(--semantic-color-text-text-primary);
203
+ --component-data-table-color-text-description: var(--semantic-color-text-text-secondary);
204
+ --component-data-table-color-text-header: var(--semantic-color-text-text-primary);
205
+ --component-data-table-color-text-cell: var(--semantic-color-text-text-primary);
206
+ --component-data-table-color-focus-ring: var(--semantic-color-focus-focus);
207
+ --component-data-table-color-focus-inset: var(--semantic-color-focus-focus-inset);
208
+ --component-data-table-typography-title-font-family: var(--primitives-typography-family-roboto-condensed);
209
+ --component-data-table-typography-title-font-size: var(--primitives-typography-size-32);
210
+ --component-data-table-typography-title-font-weight: var(--primitives-typography-weight-medium);
211
+ --component-data-table-typography-title-line-height: var(--primitives-typography-line-height-40);
212
+ --component-data-table-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
213
+ --component-data-table-typography-description-font-family: var(--primitives-typography-family-cabin);
214
+ --component-data-table-typography-description-font-size: var(--primitives-typography-size-14);
215
+ --component-data-table-typography-description-font-weight: var(--primitives-typography-weight-regular);
216
+ --component-data-table-typography-description-line-height: var(--primitives-typography-line-height-20);
217
+ --component-data-table-typography-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
218
+ --component-data-table-typography-header-font-family: var(--primitives-typography-family-cabin);
219
+ --component-data-table-typography-header-font-size: var(--primitives-typography-size-16);
220
+ --component-data-table-typography-header-font-weight: var(--primitives-typography-weight-semibold);
221
+ --component-data-table-typography-header-line-height: var(--primitives-typography-line-height-24);
222
+ --component-data-table-typography-header-letter-spacing: var(--primitives-typography-letter-spacing-0);
223
+ --component-data-table-typography-cell-font-family: var(--primitives-typography-family-cabin);
224
+ --component-data-table-typography-cell-font-size: var(--primitives-typography-size-16);
225
+ --component-data-table-typography-cell-font-weight: var(--primitives-typography-weight-regular);
226
+ --component-data-table-typography-cell-line-height: var(--primitives-typography-line-height-24);
227
+ --component-data-table-typography-cell-letter-spacing: var(--primitives-typography-letter-spacing-0);
228
+ --component-description-list-layout-width: 288px;
229
+ --component-description-list-layout-gap: var(--primitives-space-12);
230
+ --component-description-list-layout-column-gap: var(--primitives-space-16);
231
+ --component-description-list-layout-label-width: 104px;
232
+ --component-description-list-color-label-text: var(--semantic-color-text-text-secondary);
233
+ --component-description-list-color-description-text: var(--semantic-color-text-text-primary);
234
+ --component-description-list-typography-label-font-family: var(--primitives-typography-family-cabin);
235
+ --component-description-list-typography-label-font-size: var(--primitives-typography-size-14);
236
+ --component-description-list-typography-label-font-weight: var(--primitives-typography-weight-medium);
237
+ --component-description-list-typography-label-line-height: var(--primitives-typography-line-height-18);
238
+ --component-description-list-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
239
+ --component-description-list-typography-description-font-family: var(--primitives-typography-family-cabin);
240
+ --component-description-list-typography-description-font-size: var(--primitives-typography-size-14);
241
+ --component-description-list-typography-description-font-weight: var(--primitives-typography-weight-regular);
242
+ --component-description-list-typography-description-line-height: var(--primitives-typography-line-height-20);
243
+ --component-description-list-typography-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
244
+ --component-form-layout-width: 480px;
245
+ --component-form-layout-header-gap: var(--primitives-space-8);
246
+ --component-form-layout-header-body-gap: var(--semantic-layout-stack-3xl);
247
+ --component-form-layout-body-item-gap: var(--semantic-layout-stack-2xl);
248
+ --component-form-layout-body-column-gap: var(--semantic-layout-inline-xl);
249
+ --component-form-layout-footer-top-gap: var(--semantic-layout-stack-4xl);
250
+ --component-form-layout-actions-gap: var(--semantic-layout-inline-md);
251
+ --component-form-layout-action-min-width: var(--primitives-space-96);
252
+ --component-form-color-header-title-text: var(--semantic-color-text-text-primary);
253
+ --component-form-color-header-description-text: var(--semantic-color-text-text-secondary);
254
+ --component-form-typography-header-title-font-family: var(--primitives-typography-family-roboto-condensed);
255
+ --component-form-typography-header-title-font-size: var(--primitives-typography-size-32);
256
+ --component-form-typography-header-title-font-weight: var(--primitives-typography-weight-medium);
257
+ --component-form-typography-header-title-line-height: var(--primitives-typography-line-height-40);
258
+ --component-form-typography-header-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
259
+ --component-form-typography-header-description-font-family: var(--primitives-typography-family-cabin);
260
+ --component-form-typography-header-description-font-size: var(--primitives-typography-size-14);
261
+ --component-form-typography-header-description-font-weight: var(--primitives-typography-weight-regular);
262
+ --component-form-typography-header-description-line-height: var(--primitives-typography-line-height-20);
263
+ --component-form-typography-header-description-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
264
+ --component-index-background-default: var(--semantic-color-background-background);
265
+ --component-index-background-hover: var(--semantic-color-surface-surface-01-hover);
266
+ --component-index-background-selected: var(--semantic-color-background-background-selected);
267
+ --component-index-background-disabled: var(--semantic-color-background-background-disabled);
268
+ --component-index-border-default: var(--semantic-color-border-border-subtle);
269
+ --component-index-border-selected: var(--semantic-color-border-border-selected);
270
+ --component-index-border-focus: var(--semantic-color-focus-focus);
271
+ --component-index-text-default: var(--semantic-color-text-text-primary);
272
+ --component-index-text-selected: var(--semantic-color-text-text-primary);
273
+ --component-index-text-disabled: var(--semantic-color-text-text-disabled);
274
+ --component-index-icon-default: #525252;
275
+ --component-index-icon-disabled: var(--semantic-color-icon-icon-disabled);
276
+ --component-index-item-size: var(--semantic-layout-control-height-md);
277
+ --component-index-gap: 0px;
278
+ --component-index-label-family: var(--semantic-type-label-label-01-family);
279
+ --component-index-label-weight: var(--semantic-type-label-label-01-weight);
280
+ --component-index-label-size: var(--semantic-type-label-label-01-size);
281
+ --component-index-label-line-height: var(--semantic-type-label-label-01-line-height);
282
+ --component-index-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
283
+ --component-index-label-weight-selected: var(--semantic-type-label-label-02-weight);
284
+ --component-index-indicator-height: var(--semantic-layout-stroke-strong);
285
+ --component-index-indicator-inset: var(--semantic-layout-inset-md);
286
+ --component-inline-notification-layout-min-height: var(--primitives-size-48);
287
+ --component-inline-notification-layout-indicator-width: var(--primitives-space-4);
288
+ --component-inline-notification-layout-padding-x: var(--primitives-space-16);
289
+ --component-inline-notification-layout-padding-y: var(--primitives-space-12);
290
+ --component-inline-notification-layout-shell-gap: var(--primitives-space-16);
291
+ --component-inline-notification-layout-details-gap: var(--primitives-space-16);
292
+ --component-inline-notification-layout-copy-gap: var(--primitives-space-2);
293
+ --component-inline-notification-layout-content-gap: 0;
294
+ --component-inline-notification-layout-content-gap-actionable: var(--primitives-space-8);
295
+ --component-inline-notification-color-background-information: #edf5ff;
296
+ --component-inline-notification-color-background-success: #defbe6;
297
+ --component-inline-notification-color-background-warning: #fcf4d6;
298
+ --component-inline-notification-color-background-error: #fff1f1;
299
+ --component-inline-notification-color-status-information: var(--semantic-color-status-status-info);
300
+ --component-inline-notification-color-status-success: var(--semantic-color-status-status-success);
301
+ --component-inline-notification-color-status-warning: var(--semantic-color-status-status-warning);
302
+ --component-inline-notification-color-status-error: var(--semantic-color-status-status-error);
303
+ --component-inline-notification-color-text-primary: var(--semantic-color-text-text-primary);
304
+ --component-inline-notification-color-dismiss-icon: #666666;
305
+ --component-inline-notification-color-focus-ring: var(--semantic-color-focus-focus);
306
+ --component-inline-notification-typography-title-family: var(--semantic-type-label-label-01-family);
307
+ --component-inline-notification-typography-title-weight: var(--semantic-type-label-label-01-weight);
308
+ --component-inline-notification-typography-title-size: var(--semantic-type-label-label-01-size);
309
+ --component-inline-notification-typography-title-line-height: var(--semantic-type-label-label-01-line-height);
310
+ --component-inline-notification-typography-title-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
311
+ --component-inline-notification-typography-body-family: var(--semantic-type-body-sm-family);
312
+ --component-inline-notification-typography-body-weight: var(--semantic-type-body-sm-weight);
313
+ --component-inline-notification-typography-body-size: var(--semantic-type-body-sm-size);
314
+ --component-inline-notification-typography-body-line-height: var(--semantic-type-body-sm-line-height);
315
+ --component-inline-notification-typography-body-letter-spacing: var(--semantic-type-body-sm-letter-spacing);
316
+ --component-link-inline-label-text-default: var(--semantic-color-link-link-primary);
317
+ --component-link-inline-label-text-hover: var(--semantic-color-link-link-primary-hover);
318
+ --component-link-inline-label-text-visited: var(--semantic-color-link-link-visited);
319
+ --component-link-inline-label-sm-family: var(--primitives-typography-family-cabin);
320
+ --component-link-inline-label-sm-size: var(--primitives-typography-size-12);
321
+ --component-link-inline-label-sm-line-height: var(--primitives-typography-line-height-16);
322
+ --component-link-inline-label-sm-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
323
+ --component-link-inline-label-md-family: var(--primitives-typography-family-cabin);
324
+ --component-link-inline-label-md-size: var(--primitives-typography-size-14);
325
+ --component-link-inline-label-md-line-height: var(--primitives-typography-line-height-16);
326
+ --component-link-inline-label-md-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
327
+ --component-link-inline-label-lg-family: var(--primitives-typography-family-cabin);
328
+ --component-link-inline-label-lg-size: var(--primitives-typography-size-16);
329
+ --component-link-inline-label-lg-line-height: var(--primitives-typography-line-height-24);
330
+ --component-link-inline-label-lg-letter-spacing: 0px;
331
+ --component-link-inline-border-focus: var(--semantic-color-focus-focus);
332
+ --component-link-standalone-label-text-default: var(--semantic-color-link-link-primary);
333
+ --component-link-standalone-label-text-hover: var(--semantic-color-link-link-primary-hover);
334
+ --component-link-standalone-label-text-visited: var(--semantic-color-link-link-visited);
335
+ --component-link-standalone-label-sm-family: var(--primitives-typography-family-cabin);
336
+ --component-link-standalone-label-sm-size: var(--primitives-typography-size-12);
337
+ --component-link-standalone-label-sm-line-height: var(--primitives-typography-line-height-16);
338
+ --component-link-standalone-label-sm-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
339
+ --component-link-standalone-label-md-family: var(--primitives-typography-family-cabin);
340
+ --component-link-standalone-label-md-size: var(--primitives-typography-size-14);
341
+ --component-link-standalone-label-md-line-height: var(--primitives-typography-line-height-16);
342
+ --component-link-standalone-label-md-letter-spacing: var(--primitives-typography-letter-spacing-plus-032);
343
+ --component-link-standalone-label-lg-family: var(--primitives-typography-family-cabin);
344
+ --component-link-standalone-label-lg-size: var(--primitives-typography-size-16);
345
+ --component-link-standalone-label-lg-line-height: var(--primitives-typography-line-height-24);
346
+ --component-link-standalone-label-lg-letter-spacing: 0px;
347
+ --component-link-standalone-icon-gap: var(--semantic-layout-inline-sm);
348
+ --component-link-standalone-border-focus: var(--semantic-color-focus-focus);
349
+ --component-modal-layout-width-md: 608px;
350
+ --component-modal-layout-padding-x: var(--primitives-space-24);
351
+ --component-modal-layout-padding-y: var(--primitives-space-24);
352
+ --component-modal-layout-header-gap: var(--primitives-space-24);
353
+ --component-modal-layout-header-content-gap: var(--primitives-space-4);
354
+ --component-modal-layout-content-gap: var(--primitives-space-32);
355
+ --component-modal-layout-content-padding-bottom: var(--primitives-space-48);
356
+ --component-modal-layout-content-text-margin-right: 96px;
357
+ --component-modal-layout-footer-actions-gap: var(--primitives-space-16);
358
+ --component-modal-layout-footer-actions-left-width: 280px;
359
+ --component-modal-layout-footer-actions-option-width: 140px;
360
+ --component-modal-layout-footer-action-min-width: 96px;
361
+ --component-modal-layout-close-size: var(--primitives-size-24);
362
+ --component-modal-layout-border-width: var(--primitives-stroke-1);
363
+ --component-modal-color-surface-default: var(--semantic-color-surface-surface-01);
364
+ --component-modal-color-border-default: var(--semantic-color-border-border-subtle);
365
+ --component-modal-color-text-label: var(--semantic-color-text-text-secondary);
366
+ --component-modal-color-text-title: var(--semantic-color-text-text-primary);
367
+ --component-modal-color-text-body: var(--semantic-color-text-text-primary);
368
+ --component-modal-color-icon-default: var(--semantic-color-icon-icon-secondary);
369
+ --component-modal-color-focus-ring: var(--semantic-color-focus-focus);
370
+ --component-modal-typography-label-font-family: var(--primitives-typography-family-cabin);
371
+ --component-modal-typography-label-font-size: var(--primitives-typography-size-14);
372
+ --component-modal-typography-label-font-weight: var(--primitives-typography-weight-regular);
373
+ --component-modal-typography-label-line-height: var(--primitives-typography-line-height-20);
374
+ --component-modal-typography-label-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
375
+ --component-modal-typography-title-font-family: var(--primitives-typography-family-roboto-condensed);
376
+ --component-modal-typography-title-font-size: var(--primitives-typography-size-32);
377
+ --component-modal-typography-title-font-weight: var(--primitives-typography-weight-medium);
378
+ --component-modal-typography-title-line-height: var(--primitives-typography-line-height-40);
379
+ --component-modal-typography-title-letter-spacing: var(--primitives-typography-letter-spacing-0);
380
+ --component-modal-typography-body-font-family: var(--primitives-typography-family-cabin);
381
+ --component-modal-typography-body-font-size: var(--primitives-typography-size-18);
382
+ --component-modal-typography-body-font-weight: var(--primitives-typography-weight-regular);
383
+ --component-modal-typography-body-line-height: var(--primitives-typography-line-height-28);
384
+ --component-modal-typography-body-letter-spacing: var(--primitives-typography-letter-spacing-0);
385
+ --component-pagination-background-default: var(--semantic-color-background-background);
386
+ --component-pagination-background-hover: var(--semantic-color-surface-surface-01-hover);
387
+ --component-pagination-background-selected: var(--semantic-color-background-background-selected);
388
+ --component-pagination-background-disabled: var(--semantic-color-background-background-disabled);
389
+ --component-pagination-border-default: var(--semantic-color-border-border-subtle);
390
+ --component-pagination-border-selected: var(--semantic-color-border-border-selected);
391
+ --component-pagination-border-focus: var(--semantic-color-focus-focus);
392
+ --component-pagination-text-default: var(--semantic-color-text-text-primary);
393
+ --component-pagination-text-selected: var(--semantic-color-text-text-primary);
394
+ --component-pagination-text-disabled: var(--semantic-color-text-text-disabled);
395
+ --component-pagination-icon-default: #525252;
396
+ --component-pagination-icon-disabled: var(--semantic-color-icon-icon-disabled);
397
+ --component-pagination-item-size: var(--semantic-layout-control-height-md);
398
+ --component-pagination-gap: 0px;
399
+ --component-pagination-label-family: var(--semantic-type-label-label-01-family);
400
+ --component-pagination-label-weight: var(--semantic-type-label-label-01-weight);
401
+ --component-pagination-label-size: var(--semantic-type-label-label-01-size);
402
+ --component-pagination-label-line-height: var(--semantic-type-label-label-01-line-height);
403
+ --component-pagination-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
404
+ --component-pagination-label-weight-selected: var(--semantic-type-label-label-02-weight);
405
+ --component-pagination-indicator-height: 4px;
406
+ --component-pagination-indicator-inset: var(--semantic-layout-inset-md);
407
+ --component-radio-border-default: var(--semantic-color-border-border-strong);
408
+ --component-radio-border-disabled: var(--semantic-color-border-border-disabled);
409
+ --component-radio-border-focus: var(--semantic-color-focus-focus);
410
+ --component-radio-icon-default: var(--semantic-color-icon-icon-primary);
411
+ --component-radio-icon-disabled: var(--semantic-color-icon-icon-disabled);
412
+ --component-radio-text-label: var(--semantic-color-text-text-primary);
413
+ --component-radio-text-label-disabled: var(--semantic-color-text-text-disabled);
414
+ --component-radio-label-family: var(--semantic-type-label-label-02-family);
415
+ --component-radio-label-size: var(--semantic-type-label-label-02-size);
416
+ --component-radio-label-line-height: var(--semantic-type-label-label-02-line-height);
417
+ --component-radio-label-letter-spacing: var(--semantic-type-label-label-02-letter-spacing);
418
+ --component-radio-layout-target: var(--semantic-layout-target-min);
419
+ --component-radio-layout-label-gap: var(--semantic-layout-stack-xs);
420
+ --component-radio-layout-size: var(--semantic-layout-icon-sm);
421
+ --component-radio-layout-icon-gap: var(--semantic-layout-control-icon-gap);
422
+ --component-search-layout-height: var(--primitives-size-48);
423
+ --component-search-layout-padding: var(--primitives-space-16);
424
+ --component-search-layout-gap: var(--primitives-space-12);
425
+ --component-search-layout-border-width-default: 1px;
426
+ --component-search-layout-border-width-strong: 2px;
427
+ --component-search-background-default: var(--primitives-color-gray-10);
428
+ --component-search-background-focus: var(--primitives-color-gray-10);
429
+ --component-search-background-disabled: var(--primitives-color-gray-20);
430
+ --component-search-border-default: var(--primitives-color-gray-40);
431
+ --component-search-border-hover: var(--primitives-color-gray-40);
432
+ --component-search-border-focus: var(--primitives-color-blue-60);
433
+ --component-search-border-disabled: var(--primitives-color-gray-20);
434
+ --component-search-text-input: var(--primitives-color-gray-100);
435
+ --component-search-text-placeholder: var(--primitives-color-gray-50);
436
+ --component-search-text-disabled: var(--primitives-color-gray-30);
437
+ --component-search-icon-default: var(--primitives-color-gray-60);
438
+ --component-search-icon-disabled: var(--primitives-color-gray-30);
439
+ --component-search-icon-hover: var(--primitives-color-gray-100);
440
+ --component-search-input-family: Cabin;
441
+ --component-search-input-size: var(--primitives-typography-size-16);
442
+ --component-search-input-line-height: var(--primitives-typography-line-height-24);
443
+ --component-search-input-letter-spacing: var(--primitives-typography-letter-spacing-0);
444
+ --component-select-family-type: string;
445
+ --component-select-family-value: Cabin;
446
+ --component-select-weight-type: number;
447
+ --component-select-weight-value: Regular;
448
+ --component-select-size-type: dimension;
449
+ --component-select-size-value: 16px;
450
+ --component-select-line-height-type: dimension;
451
+ --component-select-line-height-value: 24px;
452
+ --component-select-letter-spacing-type: dimension;
453
+ --component-select-letter-spacing-value: 0px;
454
+ --component-structured-list-layout-width: 500px;
455
+ --component-structured-list-layout-padding-x: var(--primitives-space-16);
456
+ --component-structured-list-layout-column-gap: var(--primitives-space-16);
457
+ --component-structured-list-layout-divider-width: var(--primitives-stroke-1);
458
+ --component-structured-list-layout-header-padding-top: var(--primitives-space-16);
459
+ --component-structured-list-layout-header-padding-bottom: var(--primitives-space-8);
460
+ --component-structured-list-layout-row-padding-top: var(--primitives-space-16);
461
+ --component-structured-list-layout-row-padding-bottom: var(--primitives-space-24);
462
+ --component-structured-list-color-divider-subtle: var(--semantic-color-border-border-subtle);
463
+ --component-structured-list-color-text-header: var(--semantic-color-text-text-primary);
464
+ --component-structured-list-color-text-row: var(--semantic-color-text-text-secondary);
465
+ --component-structured-list-typography-header-column-font-family: var(--primitives-typography-family-cabin);
466
+ --component-structured-list-typography-header-column-font-size: var(--primitives-typography-size-14);
467
+ --component-structured-list-typography-header-column-font-weight: var(--primitives-typography-weight-medium);
468
+ --component-structured-list-typography-header-column-line-height: var(--primitives-typography-line-height-18);
469
+ --component-structured-list-typography-header-column-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
470
+ --component-structured-list-typography-row-column-font-family: var(--primitives-typography-family-cabin);
471
+ --component-structured-list-typography-row-column-font-size: var(--primitives-typography-size-14);
472
+ --component-structured-list-typography-row-column-font-weight: var(--primitives-typography-weight-regular);
473
+ --component-structured-list-typography-row-column-line-height: var(--primitives-typography-line-height-20);
474
+ --component-structured-list-typography-row-column-letter-spacing: var(--primitives-typography-letter-spacing-plus-016);
475
+ --component-tabs-tab-background-default: var(--semantic-color-surface-surface-01);
476
+ --component-tabs-tab-background-hover: var(--semantic-color-surface-surface-01-hover);
477
+ --component-tabs-tab-background-selected: var(--semantic-color-surface-surface-01);
478
+ --component-tabs-tab-background-disabled: var(--semantic-color-background-background-disabled);
479
+ --component-tabs-tab-text-default: var(--semantic-color-text-text-secondary);
480
+ --component-tabs-tab-text-hover: var(--semantic-color-text-text-primary);
481
+ --component-tabs-tab-text-selected: var(--semantic-color-text-text-primary);
482
+ --component-tabs-tab-text-disabled: var(--semantic-color-text-text-disabled);
483
+ --component-tabs-tab-height: var(--semantic-layout-control-height-lg);
484
+ --component-tabs-tab-padding-x: var(--semantic-layout-inset-md);
485
+ --component-tabs-tab-gap: var(--semantic-layout-inline-xs);
486
+ --component-tabs-label-family: var(--semantic-type-label-label-01-family);
487
+ --component-tabs-label-weight: var(--semantic-type-label-label-01-weight);
488
+ --component-tabs-label-size: var(--semantic-type-label-label-01-size);
489
+ --component-tabs-label-line-height: var(--semantic-type-label-label-01-line-height);
490
+ --component-tabs-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
491
+ --component-tabs-indicator-default: var(--semantic-color-border-border-brand);
492
+ --component-tabs-indicator-stroke-width: var(--semantic-layout-stroke-strong);
493
+ --component-tabs-divider: var(--semantic-color-border-border-subtle);
494
+ --component-tabs-divider-width: var(--semantic-layout-stroke-default);
495
+ --component-tabs-border-focus: var(--semantic-color-focus-focus);
496
+ --component-tag-layout-radius: var(--semantic-layout-radius-pill);
497
+ --component-tag-layout-height-sm: var(--semantic-layout-control-height-compact-sm);
498
+ --component-tag-layout-height-md: var(--semantic-layout-control-height-compact-md);
499
+ --component-tag-layout-padding-x-sm: var(--semantic-layout-inset-xs);
500
+ --component-tag-layout-padding-x-md: var(--semantic-layout-inset-sm);
501
+ --component-tag-color-background-neutral: var(--semantic-color-surface-surface-01);
502
+ --component-tag-color-background-blue: #EDF5FF;
503
+ --component-tag-color-background-green: #DEFBE6;
504
+ --component-tag-color-background-purple: #F6F2FF;
505
+ --component-tag-color-text-neutral: var(--semantic-color-text-text-primary);
506
+ --component-tag-color-text-blue: #0043CE;
507
+ --component-tag-color-text-green: #044317;
508
+ --component-tag-color-text-purple: #6929C4;
509
+ --component-tag-typography-label-font-family: var(--semantic-type-label-label-02-family);
510
+ --component-tag-typography-label-font-weight: var(--semantic-type-label-label-02-weight);
511
+ --component-tag-typography-label-font-size: var(--semantic-type-label-label-02-size);
512
+ --component-tag-typography-label-line-height: var(--semantic-type-label-label-02-line-height);
513
+ --component-tag-typography-label-letter-spacing: var(--semantic-type-label-label-02-letter-spacing);
514
+ --component-text-area-family-type: string;
515
+ --component-text-area-family-value: Cabin;
516
+ --component-text-area-size-type: dimension;
517
+ --component-text-area-size-value: 16px;
518
+ --component-text-area-line-height-type: dimension;
519
+ --component-text-area-line-height-value: 24px;
520
+ --component-text-area-letter-spacing-type: dimension;
521
+ --component-text-area-letter-spacing-value: 0px;
522
+ --component-input-layout-radius: var(--primitives-radius-0);
523
+ --component-input-layout-leading-icon-gap: var(--primitives-space-4);
524
+ --component-input-layout-status-icon-gap: var(--primitives-space-4);
525
+ --component-toggle-track-off-default: var(--semantic-color-border-border-strong);
526
+ --component-toggle-track-off-hover: var(--semantic-color-border-border-strong);
527
+ --component-toggle-track-on-default: var(--semantic-color-action-action-primary);
528
+ --component-toggle-track-on-hover: var(--semantic-color-action-action-primary-hover);
529
+ --component-toggle-track-disabled: var(--semantic-color-action-action-disabled);
530
+ --component-toggle-track-focus: var(--semantic-color-focus-focus);
531
+ --component-toggle-track-width-md: var(--semantic-layout-control-width-md);
532
+ --component-toggle-track-height-md: var(--semantic-layout-icon-md);
533
+ --component-toggle-track-radius: var(--semantic-layout-radius-pill);
534
+ --component-toggle-thumb-default: var(--semantic-color-icon-icon-on-color);
535
+ --component-toggle-thumb-disabled: var(--semantic-color-icon-icon-on-color-disabled);
536
+ --component-toggle-thumb-size-md: var(--semantic-layout-icon-xs);
537
+ --component-toggle-text-label: var(--semantic-color-text-text-primary);
538
+ --component-toggle-text-label-disabled: var(--semantic-color-text-text-disabled);
539
+ --component-toggle-label-family: var(--semantic-type-label-label-01-family);
540
+ --component-toggle-label-weight: var(--semantic-type-label-label-01-weight);
541
+ --component-toggle-label-size: var(--semantic-type-label-label-01-size);
542
+ --component-toggle-label-line-height: var(--semantic-type-label-label-01-line-height);
543
+ --component-toggle-label-letter-spacing: var(--semantic-type-label-label-01-letter-spacing);
544
+ --component-toggle-padding: var(--semantic-layout-inset-2xs);
545
+ --component-toggle-label-gap: var(--semantic-layout-stack-xs);
546
+ --component-toggle-target: var(--semantic-layout-target-min);
547
+ --component-tooltip-background: var(--semantic-color-background-background-inverse);
548
+ --component-tooltip-text: var(--semantic-color-text-text-inverse);
549
+ --component-tooltip-arrow: var(--semantic-color-background-background-inverse);
550
+ --component-tooltip-arrow-margin-left: -3px;
551
+ --component-tooltip-arrow-margin-right: -3px;
552
+ --component-tooltip-padding-x: var(--semantic-layout-inset-sm);
553
+ --component-tooltip-padding-y: var(--semantic-layout-inset-xs);
554
+ --component-tooltip-body-family: var(--semantic-type-helper-helper-01-family);
555
+ --component-tooltip-body-weight: var(--semantic-type-helper-helper-01-weight);
556
+ --component-tooltip-body-size: var(--semantic-type-helper-helper-01-size);
557
+ --component-tooltip-body-line-height: var(--semantic-type-helper-helper-01-line-height);
558
+ --component-tooltip-body-letter-spacing: var(--semantic-type-helper-helper-01-letter-spacing);
559
+ }