@rossigee/clarity-ui 18.2.1-fixed

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 (219) hide show
  1. package/README.md +29 -0
  2. package/STYLES.md +1796 -0
  3. package/accordion/_accordion.clarity.scss +81 -0
  4. package/accordion/_properties.accordion.scss +45 -0
  5. package/accordion/_variables.accordion.scss +91 -0
  6. package/button/_buttons.clarity.scss +374 -0
  7. package/button/_mixins.buttons.scss +232 -0
  8. package/button/_properties.buttons.scss +325 -0
  9. package/button/_properties.toggles.scss +35 -0
  10. package/button/_variables.buttons.scss +843 -0
  11. package/button/_variables.toggles.scss +41 -0
  12. package/button/button-group/_button-group.clarity.scss +193 -0
  13. package/clr-ui.css +31728 -0
  14. package/clr-ui.css.map +1 -0
  15. package/clr-ui.min.css +52 -0
  16. package/clr-ui.min.css.map +1 -0
  17. package/collapsible-panel/_mixins.collapsible-panel.scss +189 -0
  18. package/collapsible-panel/_properties.collapsible-panel.scss +42 -0
  19. package/collapsible-panel/_variables.collapsible-panel.scss +40 -0
  20. package/data/_mixins.tables.scss +111 -0
  21. package/data/_properties.tables.scss +62 -0
  22. package/data/_tables.clarity.scss +120 -0
  23. package/data/_variables.tables.scss +42 -0
  24. package/data/datagrid/_datagrid.clarity.scss +1753 -0
  25. package/data/datagrid/_mixins.datagrid.scss +102 -0
  26. package/data/datagrid/_properties.datagrid.scss +90 -0
  27. package/data/datagrid/_variables.datagrid.scss +96 -0
  28. package/data/stack-view/_properties.stack-view.scss +50 -0
  29. package/data/stack-view/_stack-view.clarity.scss +267 -0
  30. package/data/stack-view/_variables.stack-view.scss +32 -0
  31. package/data/tree-view/_properties.tree-view.scss +41 -0
  32. package/data/tree-view/_tree-view.clarity.scss +281 -0
  33. package/data/tree-view/_variables.tree-view.scss +51 -0
  34. package/emphasis/alert/_alert.clarity.scss +467 -0
  35. package/emphasis/alert/_mixins.alert.scss +96 -0
  36. package/emphasis/alert/_properties.alert.scss +183 -0
  37. package/emphasis/alert/_variables.alert.scss +502 -0
  38. package/emphasis/badge/_badges.clarity.scss +61 -0
  39. package/emphasis/badge/_mixins.bades.scss +34 -0
  40. package/emphasis/badge/_properties.badges.scss +82 -0
  41. package/emphasis/badge/_variables.badges.scss +160 -0
  42. package/emphasis/label/_labels.clarity.scss +175 -0
  43. package/emphasis/label/_mixins.label.scss +76 -0
  44. package/emphasis/label/_properties.label.scss +105 -0
  45. package/emphasis/label/_variables.label.scss +181 -0
  46. package/forms/combobox/_combobox.clarity.scss +322 -0
  47. package/forms/combobox/_properties.combobox.scss +45 -0
  48. package/forms/combobox/_variables.combobox.scss +32 -0
  49. package/forms/datepicker/_datepicker.clarity.scss +259 -0
  50. package/forms/datepicker/_mixins.datepicker.scss +90 -0
  51. package/forms/datepicker/_properties.datepicker.scss +46 -0
  52. package/forms/datepicker/_variables.datepicker.scss +74 -0
  53. package/forms/styles/_checkbox.clarity.scss +193 -0
  54. package/forms/styles/_containers.clarity.scss +228 -0
  55. package/forms/styles/_datalist.clarity.scss +47 -0
  56. package/forms/styles/_file-input.clarity.scss +134 -0
  57. package/forms/styles/_file.clarity.scss +52 -0
  58. package/forms/styles/_form.clarity.scss +87 -0
  59. package/forms/styles/_input-group.clarity.scss +118 -0
  60. package/forms/styles/_input.clarity.scss +78 -0
  61. package/forms/styles/_mixins.forms.scss +173 -0
  62. package/forms/styles/_number-input.clarity.scss +58 -0
  63. package/forms/styles/_password.clarity.scss +26 -0
  64. package/forms/styles/_properties.forms.scss +121 -0
  65. package/forms/styles/_radio.clarity.scss +120 -0
  66. package/forms/styles/_range.clarity.scss +124 -0
  67. package/forms/styles/_select.clarity.scss +178 -0
  68. package/forms/styles/_textarea.clarity.scss +77 -0
  69. package/forms/styles/_toggles.clarity.scss +209 -0
  70. package/forms/styles/_variables.forms.scss +128 -0
  71. package/icon/icon.component.scss +242 -0
  72. package/image/_icons.clarity.scss +101 -0
  73. package/image/_images.clarity.scss +42 -0
  74. package/image/_mixins.images.scss +11 -0
  75. package/layout/_card.clarity.scss +311 -0
  76. package/layout/_login.clarity.scss +240 -0
  77. package/layout/_properties.card.scss +36 -0
  78. package/layout/_properties.login.scss +32 -0
  79. package/layout/_variables.card.scss +23 -0
  80. package/layout/_variables.login.scss +22 -0
  81. package/layout/breadcrumbs/_breadcrumbs.clarity.scss +60 -0
  82. package/layout/breadcrumbs/_properties.breadcrumbs.scss +18 -0
  83. package/layout/breadcrumbs/_variables.breadcrumbs.scss +11 -0
  84. package/layout/grid/_grid.scss +23 -0
  85. package/layout/grid/grid/_grid.scss +39 -0
  86. package/layout/grid/mixins/_breakpoint.scss +83 -0
  87. package/layout/grid/mixins/_clearfix.scss +13 -0
  88. package/layout/grid/mixins/_grid-framework.scss +91 -0
  89. package/layout/grid/mixins/_grid.scss +39 -0
  90. package/layout/grid/utilities/_align.scss +30 -0
  91. package/layout/grid/utilities/_clearfix.scss +12 -0
  92. package/layout/grid/utilities/_display.scss +18 -0
  93. package/layout/grid/utilities/_flex.scss +222 -0
  94. package/layout/grid/utilities/_float.scss +26 -0
  95. package/layout/grid/utilities/_visibility.scss +60 -0
  96. package/layout/main-container/_layout.clarity.scss +87 -0
  97. package/layout/main-container/_properties.header.scss +39 -0
  98. package/layout/main-container/_variables.header.scss +32 -0
  99. package/layout/nav/_header.clarity.scss +40 -0
  100. package/layout/nav/_links.clarity.scss +84 -0
  101. package/layout/nav/_mixins.header.scss +332 -0
  102. package/layout/nav/_mixins.responsive-nav.scss +75 -0
  103. package/layout/nav/_nav.clarity.scss +100 -0
  104. package/layout/nav/_properties.nav.scss +27 -0
  105. package/layout/nav/_properties.responsive-nav.scss +23 -0
  106. package/layout/nav/_properties.subnav.scss +19 -0
  107. package/layout/nav/_responsive-nav.clarity.scss +488 -0
  108. package/layout/nav/_subnav.clarity.scss +48 -0
  109. package/layout/nav/_variables.nav.scss +13 -0
  110. package/layout/nav/_variables.responsive-nav.scss +28 -0
  111. package/layout/nav/_variables.subnav.scss +21 -0
  112. package/layout/tabs/_mixins.tabs.scss +41 -0
  113. package/layout/tabs/_properties.tabs.scss +25 -0
  114. package/layout/tabs/_tabs.clarity.scss +110 -0
  115. package/layout/tabs/_variables.tabs.scss +17 -0
  116. package/layout/vertical-nav/_mixins.vertical-nav.scss +52 -0
  117. package/layout/vertical-nav/_properties.vertical-nav.scss +73 -0
  118. package/layout/vertical-nav/_variables.vertical-nav.scss +52 -0
  119. package/layout/vertical-nav/_vertical-nav.clarity.scss +469 -0
  120. package/main.scss +14 -0
  121. package/modal/_modal.clarity.scss +362 -0
  122. package/modal/_properties.modal.scss +45 -0
  123. package/modal/_variables.modal.scss +38 -0
  124. package/package.json +15 -0
  125. package/popover/common/_popover.clarity.scss +28 -0
  126. package/popover/dropdown/_dropdown.clarity.scss +326 -0
  127. package/popover/dropdown/_menu-mixins.clarity.scss +132 -0
  128. package/popover/dropdown/_properties.dropdown.scss +50 -0
  129. package/popover/dropdown/_variables.dropdown.scss +36 -0
  130. package/popover/signpost/_properties.signpost.scss +34 -0
  131. package/popover/signpost/_signposts.clarity.scss +414 -0
  132. package/popover/signpost/_variables.signpost.scss +21 -0
  133. package/popover/tooltip/_mixins.tooltip.scss +186 -0
  134. package/popover/tooltip/_properties.tooltip.scss +28 -0
  135. package/popover/tooltip/_tooltips.clarity.scss +122 -0
  136. package/popover/tooltip/_variables.tooltip.scss +20 -0
  137. package/progress/progress-bars/_progress-bars.clarity.scss +616 -0
  138. package/progress/progress-bars/_properties.progress-bars.scss +24 -0
  139. package/progress/progress-bars/_variables.progress-bars.scss +15 -0
  140. package/progress/progress-bars/utils/_mixins.clarity.scss +18 -0
  141. package/progress/spinner/_mixins.spinner.scss +30 -0
  142. package/progress/spinner/_properties.spinner.scss +37 -0
  143. package/progress/spinner/_spinner.clarity.scss +148 -0
  144. package/progress/spinner/_variables.spinner.scss +25 -0
  145. package/stepper/_properties.stepper.scss +29 -0
  146. package/stepper/_stepper.clarity.scss +184 -0
  147. package/stepper/_variables.stepper.scss +13 -0
  148. package/styles/_a11y.scss +14 -0
  149. package/styles/_close.clarity.scss +60 -0
  150. package/styles/_components.clarity.scss +183 -0
  151. package/styles/_mixins.scss +478 -0
  152. package/styles/_normalize.scss +292 -0
  153. package/styles/_reboot.clarity.scss +374 -0
  154. package/styles/_variables.clarity.scss +139 -0
  155. package/styles/core/base/base.element.scss +97 -0
  156. package/styles/core/global.scss +12 -0
  157. package/styles/core/layout/_alignments.scss +18 -0
  158. package/styles/core/layout/_container.scss +29 -0
  159. package/styles/core/layout/_display.scss +58 -0
  160. package/styles/core/layout/_optimize.scss +60 -0
  161. package/styles/core/layout/_shadow-dom.scss +47 -0
  162. package/styles/core/layout/_spacing.scss +31 -0
  163. package/styles/core/layout/_type-grid.scss +66 -0
  164. package/styles/core/layout/_type-horizontal.scss +33 -0
  165. package/styles/core/layout/_type-vertical.scss +26 -0
  166. package/styles/core/layout/mixins/_mixins.alignment.scss +35 -0
  167. package/styles/core/layout/mixins/_mixins.display.scss +23 -0
  168. package/styles/core/layout/mixins/_mixins.grid.scss +105 -0
  169. package/styles/core/layout/mixins/_mixins.scss +106 -0
  170. package/styles/core/layout/mixins/_mixins.shadow-dom.scss +106 -0
  171. package/styles/core/layout/mixins/_mixins.type-horizontal.scss +113 -0
  172. package/styles/core/layout/mixins/_mixins.type-vertical.scss +108 -0
  173. package/styles/core/module.layout.scss +22 -0
  174. package/styles/core/module.reset.scss +48 -0
  175. package/styles/core/module.typography.scss +9 -0
  176. package/styles/core/theme.dark.scss +266 -0
  177. package/styles/core/theme.high-contrast.scss +42 -0
  178. package/styles/core/theme.low-motion.scss +20 -0
  179. package/styles/core/tokens/_alias-interaction.scss +59 -0
  180. package/styles/core/tokens/_alias-object-background.scss +14 -0
  181. package/styles/core/tokens/_alias-object-border.scss +21 -0
  182. package/styles/core/tokens/_alias-object-container.scss +20 -0
  183. package/styles/core/tokens/_alias-object-opacity.scss +15 -0
  184. package/styles/core/tokens/_alias-object-shadow.scss +17 -0
  185. package/styles/core/tokens/_alias-status.scss +34 -0
  186. package/styles/core/tokens/_alias-typography.scss +101 -0
  187. package/styles/core/tokens/_alias-utility.scss +38 -0
  188. package/styles/core/tokens/_alias-viz-colors.scss +170 -0
  189. package/styles/core/tokens/_global-animation.scss +32 -0
  190. package/styles/core/tokens/_global-colors.scss +249 -0
  191. package/styles/core/tokens/_global-space.scss +52 -0
  192. package/styles/core/tokens/_internal-scale.scss +14 -0
  193. package/styles/core/tokens/_properties.tokens.scss +21 -0
  194. package/styles/core/tokens/_variables.tokens.scss +770 -0
  195. package/styles/core/typography/_legacy-typography.scss +328 -0
  196. package/styles/core/typography/_mixins.typography.scss +18 -0
  197. package/styles/core/typography/_typography.scss +321 -0
  198. package/styles/variables/_properties.density.scss +223 -0
  199. package/styles/variables/_properties.global.scss +51 -0
  200. package/styles/variables/_properties.layout.scss +21 -0
  201. package/styles/variables/_properties.scss +11 -0
  202. package/styles/variables/_properties.typography.scss +164 -0
  203. package/styles/variables/_variables.density.scss +114 -0
  204. package/styles/variables/_variables.global.scss +82 -0
  205. package/styles/variables/_variables.layout.scss +37 -0
  206. package/styles/variables/_variables.scss +11 -0
  207. package/styles/variables/_variables.typography.scss +156 -0
  208. package/timeline/_properties.timeline.scss +38 -0
  209. package/timeline/_timeline.clarity.scss +172 -0
  210. package/timeline/_variables.timeline.scss +29 -0
  211. package/typography/_code.scss +36 -0
  212. package/typography/_font-metropolis.scss +45 -0
  213. package/typography/_lists.scss +81 -0
  214. package/typography/_typography.scss +322 -0
  215. package/utils/animations/_animations.clarity.scss +44 -0
  216. package/utils/animations/_mixins.animations.scss +33 -0
  217. package/wizard/_properties.wizard.scss +53 -0
  218. package/wizard/_variables.wizard.scss +58 -0
  219. package/wizard/_wizard.clarity.scss +688 -0
@@ -0,0 +1,105 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use '../optimize';
9
+ @use '../../tokens/variables.tokens' as tokens;
10
+
11
+ $columnsNumber: tokens.$cds-global-layout-grid-cols-static;
12
+
13
+ @mixin generateColumnsAndRows($breakpoint: null) {
14
+ @for $i from 1 through $columnsNumber {
15
+ // implicit columns/rows
16
+ [#{optimize.$layout}*='#{optimize.$cols}#{$breakpoint}:#{$i}'] > * {
17
+ grid-column: span $i / span $i;
18
+ }
19
+
20
+ [#{optimize.$layout}*='#{optimize.$rows}#{$breakpoint}:#{$i}'] > * {
21
+ grid-row: span $i / span $i;
22
+ }
23
+ }
24
+ }
25
+ @mixin generateExplicitColumnAndRow($breakpoint: null) {
26
+ @for $i from 1 through $columnsNumber {
27
+ // explicit column/row positions
28
+ [#{optimize.$layout}*='#{optimize.$col}#{$breakpoint}:#{$i}'] {
29
+ grid-column: span $i / span $i !important;
30
+ }
31
+
32
+ [#{optimize.$layout}*='#{optimize.$row}#{$breakpoint}:#{$i}'] {
33
+ grid-row: span $i / span $i !important;
34
+ }
35
+ }
36
+ }
37
+ @mixin generatePositions($breakpoint: null) {
38
+ // +1 for grid cols/rows which end at beginning of next item
39
+ @for $i from 1 through $columnsNumber + 1 {
40
+ [#{optimize.$layout}*='#{optimize.$col}#{$breakpoint}:start-#{$i}'] {
41
+ grid-column-start: $i !important;
42
+ }
43
+
44
+ [#{optimize.$layout}*='#{optimize.$col}#{$breakpoint}:end-#{$i}'] {
45
+ grid-column-end: $i !important;
46
+ }
47
+
48
+ [#{optimize.$layout}*='#{optimize.$row}#{$breakpoint}:start-#{$i}'] {
49
+ grid-row-start: $i !important;
50
+ }
51
+
52
+ [#{optimize.$layout}*='#{optimize.$row}#{$breakpoint}:end-#{$i}'] {
53
+ grid-row-end: $i !important;
54
+ }
55
+ }
56
+ }
57
+ @mixin generateAlignments($breakpoint: null) {
58
+ [#{optimize.$layout}~='#{optimize.$grid}'] {
59
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$top}'] {
60
+ align-content: start;
61
+ }
62
+
63
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$right}'] {
64
+ justify-content: end;
65
+ }
66
+
67
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$bottom}'] {
68
+ align-content: end;
69
+ }
70
+
71
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}'] {
72
+ justify-content: start;
73
+ }
74
+
75
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-stretch}'] {
76
+ align-items: stretch;
77
+ align-content: stretch;
78
+ }
79
+
80
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-stretch}'] {
81
+ justify-items: stretch;
82
+ justify-content: stretch;
83
+ }
84
+
85
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$stretch}'] {
86
+ place-items: stretch stretch;
87
+ place-content: stretch stretch;
88
+ }
89
+
90
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-center}'] {
91
+ align-items: center;
92
+ align-content: center;
93
+ }
94
+
95
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-center}'] {
96
+ justify-items: center;
97
+ justify-content: center;
98
+ }
99
+
100
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}'] {
101
+ place-items: center center;
102
+ place-content: center center;
103
+ }
104
+ }
105
+ }
@@ -0,0 +1,106 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use '../../tokens/variables.tokens' as tokens;
9
+ @use '../optimize';
10
+
11
+ $cds-layout-sizes: (
12
+ 'none': 0,
13
+ 'xxxs': optimize.$δ1,
14
+ 'xxs': optimize.$δ2,
15
+ 'xs': optimize.$δ3,
16
+ 'sm': optimize.$δ4,
17
+ 'md': optimize.$δ5,
18
+ 'lg': optimize.$δ6,
19
+ 'xl': optimize.$δ7,
20
+ 'xxl': optimize.$δ8,
21
+ 'xxxl': optimize.$δ9,
22
+ );
23
+
24
+ $cds-layout-breakpoints: (
25
+ '@xs': tokens.$cds-global-layout-width-xs-static,
26
+ '@sm': tokens.$cds-global-layout-width-sm-static,
27
+ '@md': tokens.$cds-global-layout-width-md-static,
28
+ '@lg': tokens.$cds-global-layout-width-lg-static,
29
+ '@xl': tokens.$cds-global-layout-width-xl-static,
30
+ );
31
+
32
+ $cds-layout-widths: (
33
+ 'xs': tokens.$cds-global-layout-width-xs,
34
+ 'sm': tokens.$cds-global-layout-width-sm,
35
+ 'md': tokens.$cds-global-layout-width-md,
36
+ 'lg': tokens.$cds-global-layout-width-lg,
37
+ 'xl': tokens.$cds-global-layout-width-xl,
38
+ );
39
+
40
+ $cds-layout-spacing-sides: (
41
+ 'top': 't',
42
+ 'right': 'r',
43
+ 'bottom': 'b',
44
+ 'left': 'l',
45
+ );
46
+
47
+ @mixin generateGaps($breakpoint: null) {
48
+ @each $size, $sizeValue in $cds-layout-sizes {
49
+ [#{optimize.$layout}*='#{optimize.$gap}#{$breakpoint}:#{$size}'] {
50
+ gap: $sizeValue;
51
+ }
52
+ }
53
+ }
54
+ @mixin spacers($breakpoint: null) {
55
+ @each $size, $sizeValue in $cds-layout-sizes {
56
+ [cds-layout~='p#{$breakpoint}:#{$size}'] {
57
+ padding: #{$sizeValue} !important;
58
+ }
59
+
60
+ [cds-layout~='m#{$breakpoint}:#{$size}'] {
61
+ margin: #{$sizeValue} !important;
62
+ }
63
+ }
64
+ }
65
+ @mixin axisSpacers($breakpoint: null) {
66
+ @each $size, $sizeValue in $cds-layout-sizes {
67
+ [cds-layout~='p-x#{$breakpoint}:#{$size}'] {
68
+ padding-left: #{$sizeValue} !important;
69
+ padding-right: #{$sizeValue} !important;
70
+ }
71
+
72
+ [cds-layout~='p-y#{$breakpoint}:#{$size}'] {
73
+ padding-top: #{$sizeValue} !important;
74
+ padding-bottom: #{$sizeValue} !important;
75
+ }
76
+ }
77
+
78
+ @each $size, $sizeValue in $cds-layout-sizes {
79
+ [cds-layout~='m-x#{$breakpoint}:#{$size}'] {
80
+ margin-left: #{$sizeValue} !important;
81
+ margin-right: #{$sizeValue} !important;
82
+ }
83
+
84
+ [cds-layout~='m-y#{$breakpoint}:#{$size}'] {
85
+ margin-top: #{$sizeValue} !important;
86
+ margin-bottom: #{$sizeValue} !important;
87
+ }
88
+ }
89
+ }
90
+ @mixin sideSpacers($breakpoint: null) {
91
+ @each $size, $sizeValue in $cds-layout-sizes {
92
+ @each $side, $sideValue in $cds-layout-spacing-sides {
93
+ [cds-layout~='p-#{$sideValue}#{$breakpoint}:#{$size}'] {
94
+ padding-#{$side}: #{$sizeValue} !important;
95
+ }
96
+ }
97
+ }
98
+
99
+ @each $size, $sizeValue in $cds-layout-sizes {
100
+ @each $side, $sideValue in $cds-layout-spacing-sides {
101
+ [cds-layout~='m-#{$sideValue}#{$breakpoint}:#{$size}'] {
102
+ margin-#{$side}: #{$sizeValue} !important;
103
+ }
104
+ }
105
+ }
106
+ }
@@ -0,0 +1,106 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use '../optimize';
9
+
10
+ @mixin generateShadowDomVerticalStretch($breakpoint: null) {
11
+ [#{optimize.$layout}~='#{optimize.$vertical}'] {
12
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-stretch}'] {
13
+ & > ::slotted(*) {
14
+ flex-grow: 1;
15
+ }
16
+ }
17
+
18
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$stretch}'] {
19
+ & > ::slotted(*) {
20
+ flex-grow: 1;
21
+ }
22
+ }
23
+ }
24
+ }
25
+ @mixin generateShadowDomVerticalItemAlignment($breakpoint: null) {
26
+ [#{optimize.$layout}~='#{optimize.$vertical}'] {
27
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}']),
28
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-center}']) {
29
+ margin-top: auto;
30
+ margin-bottom: auto;
31
+ }
32
+
33
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}']),
34
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-center}']) {
35
+ align-self: center;
36
+ }
37
+
38
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$top}']) {
39
+ margin-bottom: auto !important;
40
+ }
41
+
42
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$bottom}']) {
43
+ margin-top: auto !important;
44
+ }
45
+
46
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$right}']) {
47
+ margin-left: auto;
48
+ }
49
+
50
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}']),
51
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}'] {
52
+ margin-right: auto;
53
+ }
54
+ }
55
+ }
56
+ @mixin generateShadowDomHorizontalStretch($breakpoint: null) {
57
+ [#{optimize.$layout}~='#{optimize.$horizontal}'] {
58
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-stretch}'] {
59
+ & > ::slotted(*) {
60
+ flex-grow: 1;
61
+ }
62
+ }
63
+
64
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$stretch}'] {
65
+ & > ::slotted(*) {
66
+ flex-grow: 1;
67
+ }
68
+ }
69
+ }
70
+ }
71
+ @mixin generateShadowDomHorizontalItemAlignment($breakpoint: null) {
72
+ [#{optimize.$layout}~='#{optimize.$horizontal}'] {
73
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}']),
74
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-center}']) {
75
+ align-self: center;
76
+ }
77
+
78
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}']),
79
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-center}']) {
80
+ margin-left: auto !important;
81
+ margin-right: auto !important;
82
+ }
83
+
84
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$top}']) {
85
+ align-self: flex-start;
86
+ }
87
+
88
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$bottom}']) {
89
+ align-self: flex-end;
90
+ }
91
+
92
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$right}']) {
93
+ margin-left: auto !important;
94
+ }
95
+
96
+ ::slotted([#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}']) {
97
+ margin-right: auto !important;
98
+ }
99
+ }
100
+ }
101
+ @mixin generateShadowDomHorizontalVerticalAxisFill($breakpoint: null) {
102
+ [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$fill}'] > ::slotted(*) {
103
+ flex-grow: 1 !important;
104
+ flex-basis: 0 !important;
105
+ }
106
+ }
@@ -0,0 +1,113 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use '../optimize';
9
+
10
+ @mixin generateHorizontalAxisAlignment($breakpoint: null) {
11
+ [#{optimize.$layout}~='#{optimize.$horizontal}'] {
12
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$top}'] {
13
+ align-items: flex-start;
14
+ }
15
+
16
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$bottom}'] {
17
+ align-items: flex-end;
18
+ }
19
+
20
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}'] {
21
+ justify-content: flex-start;
22
+ }
23
+
24
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$right}'] {
25
+ justify-content: flex-end;
26
+ }
27
+
28
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-center}'] {
29
+ align-items: center;
30
+ align-content: center;
31
+ }
32
+
33
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-center}'] {
34
+ justify-content: center;
35
+ }
36
+
37
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}'] {
38
+ align-items: center;
39
+ place-content: center center;
40
+ }
41
+ }
42
+ }
43
+ @mixin generateHorizontalOrder($breakpoint: null) {
44
+ [#{optimize.$layout}~='#{optimize.$horizontal}'] {
45
+ &[#{optimize.$layout}*='order#{$breakpoint}:reverse'] {
46
+ flex-direction: row-reverse;
47
+ }
48
+ }
49
+ }
50
+ @mixin generateHorizontalStretch($breakpoint: null) {
51
+ [#{optimize.$layout}~='#{optimize.$horizontal}'] {
52
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-stretch}'] {
53
+ align-items: stretch;
54
+ align-content: stretch;
55
+ flex-grow: 1;
56
+ }
57
+
58
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-stretch}'] {
59
+ justify-content: stretch;
60
+ flex-grow: 1;
61
+
62
+ & > * {
63
+ flex-grow: 1;
64
+ }
65
+ }
66
+
67
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$stretch}'] {
68
+ align-items: stretch;
69
+ align-content: stretch;
70
+ flex-grow: 1;
71
+
72
+ & > * {
73
+ flex-grow: 1;
74
+ }
75
+ }
76
+ }
77
+ }
78
+ @mixin generateHorizontalItemAlignment($breakpoint: null) {
79
+ [#{optimize.$layout}~='#{optimize.$horizontal}'] {
80
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}'],
81
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-center}'] {
82
+ align-self: center;
83
+ }
84
+
85
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}'],
86
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-center}'] {
87
+ margin-left: auto !important;
88
+ margin-right: auto !important;
89
+ }
90
+
91
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$top}'] {
92
+ align-self: flex-start;
93
+ }
94
+
95
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$bottom}'] {
96
+ align-self: flex-end;
97
+ }
98
+
99
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$right}'] {
100
+ margin-left: auto !important;
101
+ }
102
+
103
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}'] {
104
+ margin-right: auto !important;
105
+ }
106
+ }
107
+ }
108
+ @mixin generateHorizontalAlignments($breakpoint: null) {
109
+ @include generateHorizontalAxisAlignment($breakpoint);
110
+ @include generateHorizontalOrder($breakpoint);
111
+ @include generateHorizontalStretch($breakpoint);
112
+ @include generateHorizontalItemAlignment($breakpoint);
113
+ }
@@ -0,0 +1,108 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use '../optimize';
9
+
10
+ @mixin generateVerticalAxisAlignment($breakpoint: null) {
11
+ [#{optimize.$layout}~='#{optimize.$vertical}'] {
12
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$top}'] {
13
+ justify-content: flex-start;
14
+ }
15
+
16
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$bottom}'] {
17
+ justify-content: flex-end;
18
+ }
19
+
20
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}'] {
21
+ align-items: flex-start;
22
+ }
23
+
24
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$right}'] {
25
+ align-items: flex-end;
26
+ }
27
+
28
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-center}'] {
29
+ justify-content: center;
30
+ }
31
+
32
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-center}'] {
33
+ align-items: center;
34
+ }
35
+
36
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}'] {
37
+ align-items: center;
38
+ justify-content: center;
39
+ }
40
+ }
41
+ }
42
+ @mixin generateVerticalOrder($breakpoint: null) {
43
+ [#{optimize.$layout}~='#{optimize.$vertical}'] {
44
+ &[#{optimize.$layout}*='order#{$breakpoint}:reverse'] {
45
+ flex-direction: column-reverse;
46
+ }
47
+ }
48
+ }
49
+ @mixin generateVerticalStretch($breakpoint: null) {
50
+ [#{optimize.$layout}~='#{optimize.$vertical}'] {
51
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-stretch}'] {
52
+ justify-content: stretch;
53
+
54
+ & > * {
55
+ flex-grow: 1;
56
+ }
57
+ }
58
+
59
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-stretch}'] {
60
+ align-items: stretch;
61
+ }
62
+
63
+ &[#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$stretch}'] {
64
+ align-items: stretch;
65
+ justify-content: stretch;
66
+
67
+ & > * {
68
+ flex-grow: 1;
69
+ }
70
+ }
71
+ }
72
+ }
73
+ @mixin generateVerticalItemAlignment($breakpoint: null) {
74
+ [#{optimize.$layout}~='#{optimize.$vertical}'] {
75
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}'],
76
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$vertical-center}'] {
77
+ margin-top: auto;
78
+ margin-bottom: auto;
79
+ }
80
+
81
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$center}'],
82
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$horizontal-center}'] {
83
+ align-self: center;
84
+ }
85
+
86
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$top}'] {
87
+ margin-bottom: auto !important;
88
+ }
89
+
90
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$bottom}'] {
91
+ margin-top: auto !important;
92
+ }
93
+
94
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$right}'] {
95
+ margin-left: auto;
96
+ }
97
+
98
+ & > [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$left}'] {
99
+ margin-right: auto;
100
+ }
101
+ }
102
+ }
103
+ @mixin generateVerticalAlignments($breakpoint: null) {
104
+ @include generateVerticalAxisAlignment($breakpoint);
105
+ @include generateVerticalOrder($breakpoint);
106
+ @include generateVerticalStretch($breakpoint);
107
+ @include generateVerticalItemAlignment($breakpoint);
108
+ }
@@ -0,0 +1,22 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use './layout/optimize';
9
+ @use './layout/alignments';
10
+ @use './layout/type-horizontal';
11
+ @use './layout/type-vertical';
12
+ @use './layout/type-grid';
13
+ @use './layout/display';
14
+ @use './layout/spacing';
15
+ @use './layout/container';
16
+
17
+ *,
18
+ *::before,
19
+ *::after,
20
+ :host {
21
+ box-sizing: border-box;
22
+ }
@@ -0,0 +1,48 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use './tokens/variables.tokens' as tokens;
9
+
10
+ html {
11
+ font-size: calc((#{tokens.$cds-global-base} / 16) * 100%); // convert any base value to a scaled percentage
12
+ box-sizing: border-box !important;
13
+ }
14
+
15
+ *,
16
+ *::before,
17
+ *::after {
18
+ box-sizing: inherit !important;
19
+ }
20
+
21
+ [cds-base-font='16'] {
22
+ --cds-global-base: 16;
23
+ }
24
+
25
+ [cds-theme] {
26
+ background: tokens.$cds-alias-object-app-background;
27
+ color: tokens.$cds-alias-typography-color-500;
28
+ scrollbar-color: tokens.$cds-alias-utility-gray tokens.$cds-alias-object-opacity-0;
29
+ color-scheme: light;
30
+ }
31
+
32
+ [cds-theme~='dark'] {
33
+ color-scheme: dark;
34
+ }
35
+
36
+ [cds-control] ::placeholder {
37
+ color: tokens.$cds-alias-typography-color-200;
38
+ }
39
+
40
+ [cds-control][_disabled] {
41
+ --cds-alias-typography-color-200: #{tokens.$cds-alias-status-disabled};
42
+ }
43
+
44
+ html[cds-focus-trap] {
45
+ overflow: hidden !important;
46
+ width: 100vw;
47
+ height: 100vh;
48
+ }
@@ -0,0 +1,9 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use './typography/typography';
9
+ @use './typography/legacy-typography';