@genesislcap/rapid-design-system 14.482.0 → 14.482.1-FUI-2575.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +1348 -1074
- package/dist/dts/button/button.styles.d.ts.map +1 -1
- package/dist/dts/card/card.styles.d.ts.map +1 -1
- package/dist/dts/flexlayout-react-theme/flexlayout-react-theme.generated.d.ts +1 -1
- package/dist/dts/flexlayout-react-theme/flexlayout-react-theme.generated.d.ts.map +1 -1
- package/dist/dts/index.d.ts +1 -0
- package/dist/dts/index.d.ts.map +1 -1
- package/dist/dts/modal-theme/index.d.ts +3 -0
- package/dist/dts/modal-theme/index.d.ts.map +1 -0
- package/dist/dts/modal-theme/modal-theme.d.ts +69 -0
- package/dist/dts/modal-theme/modal-theme.d.ts.map +1 -0
- package/dist/dts/modal-theme/theme-compiler.d.ts +37 -0
- package/dist/dts/modal-theme/theme-compiler.d.ts.map +1 -0
- package/dist/dts/react.d.ts +17 -17
- package/dist/dts/tab/tab.styles.d.ts.map +1 -1
- package/dist/dts/tab-panel/tab-panel.styles.d.ts.map +1 -1
- package/dist/esm/button/button.styles.js +14 -3
- package/dist/esm/card/card.styles.js +1 -0
- package/dist/esm/flexlayout-react-theme/flexlayout-react-theme.generated.js +1 -3
- package/dist/esm/flexlayout-react-theme/flexlayout-react.overrides.css +1 -3
- package/dist/esm/index.js +1 -0
- package/dist/esm/modal-theme/index.js +2 -0
- package/dist/esm/modal-theme/modal-theme.js +170 -0
- package/dist/esm/modal-theme/theme-compiler.js +49 -0
- package/dist/esm/tab/tab.styles.js +1 -0
- package/dist/esm/tab-panel/tab-panel.styles.js +2 -1
- package/dist/react.cjs +11 -11
- package/dist/react.mjs +9 -9
- package/package.json +11 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAyUpC,eAAO,MAAM,iBAAiB,GAC5B,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAgBA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/card/card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,eAAe,GAC1B,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,
|
|
1
|
+
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/card/card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,eAAe,GAC1B,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAmBF,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** The flexlayout-react version this theme was generated against. */
|
|
2
2
|
export declare const RAPID_FLEXLAYOUT_REACT_VERSION = "0.8.19";
|
|
3
3
|
/** Merged flexlayout-react base theme + Rapid Design System overrides. */
|
|
4
|
-
export declare const FLEXLAYOUT_REACT_THEME_CSS = "/* ============================================================================\n * flexlayout-react base theme \u2014 VENDORED from flexlayout-react@0.8.19 (style/dark.css).\n * ========================================================================== */\n.flexlayout__layout {\n --color-text: #eeeeee;\n --color-background: black;\n --color-base: black;\n --color-1: rgb(17.85, 17.85, 17.85);\n --color-2: rgb(25.5, 25.5, 25.5);\n --color-3: rgb(38.25, 38.25, 38.25);\n --color-4: #333333;\n --color-5: rgb(63.75, 63.75, 63.75);\n --color-6: rgb(76.5, 76.5, 76.5);\n --color-drag1: rgb(207, 232, 255);\n --color-drag2: rgb(183, 209, 181);\n --color-drag1-background: rgba(128, 128, 128, 0.15);\n --color-drag2-background: rgba(128, 128, 128, 0.15);\n --font-size: medium;\n --font-family: Roboto, Arial, sans-serif;\n --color-overflow: gray;\n --color-icon: gray;\n --color-tabset-background: var(--color-1);\n --color-tabset-background-selected: var(--color-1);\n --color-tabset-background-maximized: var(--color-6);\n --color-tabset-divider-line: var(--color-4);\n --color-tabset-header-background: var(--color-1);\n --color-tabset-header: var(--color-text);\n --color-border-tab-content: var(--color-background);\n --color-border-background: var(--color-1);\n --color-border-divider-line: var(--color-4);\n --color-tab-content: var(--color-background);\n --color-tab-selected: var(--color-text);\n --color-tab-selected-background: var(--color-4);\n --color-tab-unselected: gray;\n --color-tab-unselected-background: transparent;\n --color-tab-textbox: var(--color-text);\n --color-tab-textbox-background: var(--color-3);\n --color-border-tab-selected: var(--color-text);\n --color-border-tab-selected-background: var(--color-4);\n --color-border-tab-unselected: gray;\n --color-border-tab-unselected-background: var(--color-2);\n --color-splitter: var(--color-2);\n --color-splitter-hover: var(--color-4);\n --color-splitter-drag: var(--color-5);\n --color-drag-rect-border: var(--color-4);\n --color-drag-rect-background: var(--color-1);\n --color-drag-rect: var(--color-text);\n --color-popup-border: var(--color-6);\n --color-popup-unselected: var(--color-text);\n --color-popup-unselected-background: var(--color-background);\n --color-popup-selected: var(--color-text);\n --color-popup-selected-background: var(--color-4);\n --color-edge-marker: gray;\n --color-edge-icon: #eee;\n --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);\n --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);\n --size-mini-scroll-indicator: 3px;\n --color-toolbar-button-hover: var(--color-4);\n}\n\n/*\n base classes\n*/\n.flexlayout__layout {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n overflow: hidden;\n background-color: var(--color-background);\n}\n.flexlayout__layout_overlay {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n z-index: 1000;\n}\n.flexlayout__layout_tab_stamps {\n position: absolute;\n top: -10000px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n align-items: start;\n}\n.flexlayout__layout_moveables {\n visibility: hidden;\n position: absolute;\n width: 100px;\n height: 100px;\n top: -20000px;\n}\n.flexlayout__layout_main {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__layout_border_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__layout_border_container_inner {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__splitter {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-splitter);\n touch-action: none;\n z-index: 10;\n}\n@media (hover: hover) {\n .flexlayout__splitter:hover {\n background-color: var(--color-splitter-hover);\n transition: background-color ease-in 0.1s;\n transition-delay: 0.05s;\n border-radius: 5px;\n }\n}\n.flexlayout__splitter_drag {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n border-radius: 5px;\n background-color: var(--color-splitter-drag);\n}\n.flexlayout__splitter_handle {\n background-color: #ccc;\n border-radius: 3px;\n}\n.flexlayout__splitter_handle_horz {\n width: 3px;\n height: 30px;\n}\n.flexlayout__splitter_handle_vert {\n width: 30px;\n height: 3px;\n}\n.flexlayout__splitter_extra {\n touch-action: none;\n background-color: transparent;\n}\n.flexlayout__outline_rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n border: 2px solid var(--color-drag1);\n background: var(--color-drag1-background);\n border-radius: 5px;\n z-index: 1000;\n}\n.flexlayout__outline_rect_edge {\n pointer-events: none;\n border: 2px solid var(--color-drag2);\n background: var(--color-drag2-background);\n border-radius: 5px;\n z-index: 1000;\n box-sizing: border-box;\n}\n.flexlayout__edge_rect {\n position: absolute;\n z-index: 1000;\n background-color: var(--color-edge-marker);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.flexlayout__drag_rect {\n color: var(--color-drag-rect);\n background-color: var(--color-drag-rect-background);\n border: 2px solid var(--color-drag-rect-border);\n border-radius: 5px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n flex-direction: column;\n overflow: hidden;\n padding: 0.3em 0.8em;\n word-wrap: break-word;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__row {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n}\n.flexlayout__tabset {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--color-tabset-background);\n box-sizing: border-box;\n font-family: var(--font-family);\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_tab_divider {\n width: 4px;\n}\n.flexlayout__tabset_content {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n box-sizing: border-box;\n position: relative;\n}\n.flexlayout__tabset_leading {\n display: flex;\n}\n.flexlayout__tabset_header {\n display: flex;\n align-items: center;\n padding: 3px 3px 3px 5px;\n box-sizing: border-box;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n color: var(--color-tabset-header);\n background-color: var(--color-tabset-header-background);\n font-size: var(--font-size);\n}\n.flexlayout__tabset_header_content {\n flex-grow: 1;\n}\n.flexlayout__tabset_tabbar_outer {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n}\n.flexlayout__tabset_tabbar_outer_top {\n padding: 0px 2px 0px 2px;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_outer_bottom {\n padding: 0px 2px 0px 2px;\n border-top: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_inner {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__tabset_tabbar_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__tabset_tabbar_inner_tab_container {\n position: relative;\n display: flex;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 2px solid transparent;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_bottom {\n border-bottom: 2px solid transparent;\n}\n.flexlayout__tabset-selected {\n background-color: var(--color-tabset-background-selected);\n}\n.flexlayout__tabset-maximized {\n background-color: var(--color-tabset-background-maximized);\n}\n.flexlayout__tab_button_stamp {\n display: inline-flex;\n align-items: center;\n gap: 0.3em;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__tab {\n overflow: hidden;\n box-sizing: border-box;\n background-color: var(--color-tab-content);\n color: var(--color-text);\n position: relative;\n}\n.flexlayout__tab_moveable {\n position: relative;\n height: 100%;\n min-width: 1px;\n min-height: 1px;\n overflow: auto;\n box-sizing: border-box;\n}\n.flexlayout__tab_overlay {\n z-index: 20;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2392156863);\n}\n.flexlayout__tab_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n padding: 3px 0.5em;\n cursor: pointer;\n}\n.flexlayout__tab_button_stretch {\n background-color: transparent;\n color: var(--color-tab-selected);\n width: 100%;\n padding: 3px 0em;\n text-wrap: nowrap;\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n}\n@media (hover: hover) {\n .flexlayout__tab_button_stretch:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--selected {\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--unselected {\n background-color: var(--color-tab-unselected-background);\n color: var(--color-tab-unselected);\n}\n.flexlayout__tab_button_leading {\n display: flex;\n}\n.flexlayout__tab_button_content {\n display: flex;\n text-wrap: nowrap;\n}\n.flexlayout__tab_button_textbox {\n border: none;\n font-family: var(--font-family);\n font-size: var(--font-size);\n color: var(--color-tab-textbox);\n background-color: var(--color-tab-textbox-background);\n border: 1px inset var(--color-1);\n border-radius: 3px;\n width: 10em;\n}\n.flexlayout__tab_button_textbox:focus {\n outline: none;\n}\n.flexlayout__tab_button_trailing {\n display: flex;\n visibility: hidden;\n border-radius: 4px;\n}\n.flexlayout__tab_button_trailing:hover {\n background-color: var(--color-toolbar-button-hover);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {\n visibility: visible;\n}\n.flexlayout__tab_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 2em;\n overflow: hidden;\n}\n.flexlayout__tab_toolbar {\n display: flex;\n align-items: center;\n gap: 0.3em;\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__tab_toolbar_icon {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__tab_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__tab_toolbar_sticky_buttons_container {\n display: flex;\n gap: 0.3em;\n padding-left: 5px;\n align-items: center;\n}\n.flexlayout__border {\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n font-family: var(--font-family);\n color: var(--color-border);\n background-color: var(--color-border-background);\n}\n.flexlayout__border_tab_contents {\n box-sizing: border-box;\n overflow: hidden;\n background-color: var(--color-border-tab-content);\n}\n.flexlayout__border_leading {\n display: flex;\n}\n.flexlayout__border_top {\n border-bottom: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_bottom {\n border-top: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_left {\n border-right: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_right {\n border-left: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_inner {\n position: relative;\n box-sizing: border-box;\n align-items: center;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__border_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__border_inner_tab_container {\n white-space: nowrap;\n display: flex;\n padding-left: 2px;\n padding-right: 2px;\n box-sizing: border-box;\n position: absolute;\n}\n.flexlayout__border_inner_tab_container_right {\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_inner_tab_container_left {\n flex-direction: row-reverse;\n transform-origin: top right;\n transform: rotate(-90deg);\n}\n.flexlayout__border_tab_divider {\n width: 4px;\n}\n.flexlayout__border_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n cursor: pointer;\n padding: 3px 0.5em;\n margin: 2px 0px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__border_button--selected {\n background-color: var(--color-border-tab-selected-background);\n color: var(--color-border-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover {\n color: var(--color-border-tab-selected);\n }\n}\n.flexlayout__border_button--unselected {\n background-color: var(--color-border-tab-unselected-background);\n color: var(--color-border-tab-unselected);\n}\n.flexlayout__border_button_leading {\n display: flex;\n}\n.flexlayout__border_button_content {\n display: flex;\n}\n.flexlayout__border_button_trailing {\n display: flex;\n border-radius: 4px;\n visibility: hidden;\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover .flexlayout__border_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__border_button--selected .flexlayout__border_button_trailing {\n visibility: visible;\n}\n.flexlayout__border_toolbar {\n display: flex;\n gap: 0.3em;\n align-items: center;\n}\n.flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {\n flex-direction: column;\n padding-top: 0.5em;\n padding-bottom: 0.3em;\n}\n.flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__border_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__border_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__border_toolbar_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 1.5em;\n}\n.flexlayout__popup_menu {\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__popup_menu_item {\n padding: 2px 0.5em;\n white-space: nowrap;\n cursor: pointer;\n border-radius: 2px;\n}\n.flexlayout__popup_menu_item--selected {\n font-weight: 500;\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__popup_menu_item:hover {\n background-color: var(--color-6);\n }\n}\n.flexlayout__popup_menu_container {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border: 1px solid var(--color-popup-border);\n color: var(--color-popup-unselected);\n background: var(--color-popup-unselected-background);\n border-radius: 3px;\n position: absolute;\n z-index: 1000;\n max-height: 50%;\n min-width: 100px;\n overflow: auto;\n padding: 2px;\n}\n.flexlayout__floating_window _body {\n height: 100%;\n}\n.flexlayout__floating_window_content {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n}\n.flexlayout__error_boundary_container {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n}\n.flexlayout__error_boundary_content {\n display: flex;\n align-items: center;\n}\n.flexlayout__border_sizer {\n position: absolute;\n top: -30000px;\n padding-top: 6px;\n padding-bottom: 5px;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__mini_scrollbar {\n position: absolute;\n background-color: var(--color-mini-scroll-indicator);\n border-radius: 5px;\n width: var(--size-mini-scroll-indicator);\n height: var(--size-mini-scroll-indicator);\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar:hover {\n background-color: var(--color-mini-scroll-indicator-hovered);\n transition: background-color 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar_container {\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n@media (hover: hover) {\n .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {\n opacity: 1;\n visibility: visible;\n }\n}\n\n/* ======================== End of Base Classes =========================== */\n/* \n dark theme overrides \n*/\n.flexlayout__tabset_header {\n box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);\n}\n.flexlayout__tabset-selected {\n background-image: linear-gradient(var(--color-background), var(--color-4));\n}\n.flexlayout__tabset-maximized {\n background-image: linear-gradient(var(--color-6), var(--color-2));\n}\n.flexlayout__tab_top {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}\n.flexlayout__tab_bottom {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n}\n.flexlayout__border_button {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n/* ============================================================================\n * Rapid Design System overrides (flexlayout-react.overrides.css) \u2014 applied last.\n * ========================================================================== */\n/*\n * flexlayout-react.overrides.css \u2014 Rapid Design System theme overrides for flexlayout-react.\n *\n * THIS IS THE SINGLE SOURCE OF TRUTH for how flexlayout-react looks across every app that\n * consumes Foundation. Do NOT copy these rules into apps \u2014 import the compiled theme from\n * `@genesislcap/rapid-design-system` instead (see flexlayout-react-theme.ts).\n *\n * Build pipeline: `scripts/generate-flexlayout-theme.mjs` concatenates the vendored\n * flexlayout-react base theme (structural CSS + dark palette) FIRST, then this file LAST,\n * into `flexlayout-react-theme.generated.ts`. Equal specificity means the later sheet wins,\n * so every rule here overrides the vendored default. Run `pnpm flexlayout:generate` after\n * editing (the package build does this automatically).\n *\n * The flexlayout theme is almost entirely driven by CSS custom properties declared on\n * `.flexlayout__layout` (see the full list at the top of the vendored base theme). The\n * easiest way to re-skin is to remap those variables to rapid design-system tokens, as\n * below. For anything the variables don't cover, target the `.flexlayout__*` classes\n * directly (examples at the bottom).\n *\n * Tokens resolve from the nearest design-system provider ancestor (CSS custom properties\n * inherit across shadow boundaries), so flexlayout-react must render under a\n * `<rapid-design-system-provider>` for these to take effect.\n */\n\n/* --- Variable remap: flexlayout palette -> rapid design tokens ----------------- */\n.flexlayout__layout {\n --font-family: var(--body-font, Roboto, Arial, sans-serif);\n --font-size: var(--type-ramp-base-font-size);\n\n --color-text: var(--neutral-foreground-rest);\n --color-background: var(--fill-color);\n\n /* Greyscale ramp used across tabsets, borders and toolbars. */\n --color-1: var(--neutral-layer-1);\n --color-2: var(--neutral-layer-2);\n --color-3: var(--neutral-layer-3);\n --color-4: var(--neutral-layer-4);\n\n /* Selected tab + active splitter pick up the accent colour. */\n --color-tab-selected: var(--accent-foreground-rest);\n --color-tab-unselected: var(--neutral-foreground-hint);\n --color-tab-selected-background: var(--accent-fill-rest);\n --color-splitter-drag: var(--accent-fill-rest);\n --color-splitter-hover: var(--accent-fill-hover);\n}\n\n.flexlayout__tabset-selected,\n.flexlayout__tabset-maximized {\n background-image: none !important;\n}\n\n.flexlayout__tab_button_content {\n font-weight: 400;\n font-size: var(--type-ramp-minus-1-font-size);\n}\n\n.flexlayout__tab_button--unselected:hover {\n color: var(--neutral-foreground-rest, #e0e0e0) !important;\n background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;\n}\n\n.flexlayout__tab_top,\n.flexlayout__tab_bottom {\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n\n.flexlayout__tab_toolbar_button-max,\n.flexlayout__tab_toolbar_button-min {\n order: 100;\n}\n\n.flexlayout__tab_button_textbox {\n box-sizing: border-box;\n width: auto;\n min-width: 8em;\n max-width: 100%;\n margin: 0;\n padding: 0 calc(var(--design-unit, 4) * 1px);\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size, var(--font-size));\n font-weight: 500;\n line-height: var(--type-ramp-base-line-height, normal);\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-rest);\n border: 1px solid var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius, 2) * 1px);\n\n &:focus {\n outline: none;\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-focus, var(--neutral-fill-input-rest));\n border-color: var(--accent-fill-rest);\n }\n}\n\n.flexlayout__tabset {\n border: var(--card-border, 1px solid var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n}\n\n.flexlayout__tabset_content {\n margin-top: -1px;\n}\n\n.flexlayout__tabset_tabbar_outer_top {\n border: 0;\n height: var(\n --foundation-tab-height,\n calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)\n );\n background: none;\n z-index: 1;\n}\n\n.flexlayout__tabset_container {\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n}\n\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 0;\n}\n\n.flexlayout__tab_button {\n border-right-style: solid;\n border-right-width: var(--tab-rest-border-width, 1px);\n border-right-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n gap: 8px;\n\n &:first-child {\n border-left-style: solid;\n border-left-width: var(--tab-rest-border-width, 1px);\n border-left-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n }\n}\n\n.flexlayout__tab_button--selected {\n position: relative;\n color: var(--accent-foreground-rest) !important;\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n border-style: solid;\n border-width: var(--tab-active-border-width, 0 1px 0 0);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n .flexlayout__tab_button_content {\n font-weight: 700;\n }\n}\n\n.flexlayout__tab {\n border-radius: calc(var(--control-corner-radius) * 1.5px)\n calc(var(--control-corner-radius) * 1.5px)\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));\n background: var(--neutral-layer-card-container);\n\n rapid-card {\n display: flex;\n flex-direction: column;\n border: 0;\n border-radius: 0 0 var(--card-corner-radius) var(--card-corner-radius);\n grid-register {\n display: block;\n height: 100%;\n }\n }\n}\n\n.flexlayout__tabset_tab_divider {\n width: 0;\n}\n\n.flexlayout__tab_button_trailing {\n rapid-icon {\n color: var(--accent-foreground-rest);\n\n &:hover {\n color: var(--accent-foreground-hover);\n }\n }\n}\n\n.flexlayout__popup_menu_container {\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);\n padding: 0;\n border: 1px solid var(--neutral-stroke-rest);\n}\n\n.flexlayout__popup_menu_item {\n padding: calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);\n border-bottom: 1px solid var(--neutral-stroke-divider-rest);\n\n &:hover {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n }\n\n &:last-child {\n border-bottom: 0;\n }\n}\n\n.flexlayout__popup_menu_item--selected {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n}\n\n.flexlayout__tab_toolbar_button {\n padding: 0;\n height: unset;\n width: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n > svg {\n height: 16px !important;\n width: 16px !important;\n padding: 4px;\n fill: var(--neutral-foreground-hint);\n }\n}\n\n.flexlayout__splitter_vert {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDI1NmEzMiAzMiAwIDEgMSAtNjQgMCAzMiAzMiAwIDEgMSA2NCAwem0tMTYwIDBhMzIgMzIgMCAxIDEgLTY0IDAgMzIgMzIgMCAxIDEgNjQgMHpNNjQgMjg4YTMyIDMyIDAgMSAxIDAtNjQgMzIgMzIgMCAxIDEgMCA2NHoiLz48L3N2Zz4=);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 12px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__splitter_horz {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNjQgMzg0YTMyIDMyIDAgMSAwIDAgNjQgMzIgMzIgMCAxIDAgMC02NHptMC0xNjBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDEgMCAwLTY0ek05NiA5NkEzMiAzMiAwIDEgMCAzMiA5NmEzMiAzMiAwIDEgMCA2NCAweiIvPjwvc3ZnPg==);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 4px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__layout {\n top: 8px;\n bottom: 8px;\n left: 8px;\n right: 8px;\n}";
|
|
4
|
+
export declare const FLEXLAYOUT_REACT_THEME_CSS = "/* ============================================================================\n * flexlayout-react base theme \u2014 VENDORED from flexlayout-react@0.8.19 (style/dark.css).\n * ========================================================================== */\n.flexlayout__layout {\n --color-text: #eeeeee;\n --color-background: black;\n --color-base: black;\n --color-1: rgb(17.85, 17.85, 17.85);\n --color-2: rgb(25.5, 25.5, 25.5);\n --color-3: rgb(38.25, 38.25, 38.25);\n --color-4: #333333;\n --color-5: rgb(63.75, 63.75, 63.75);\n --color-6: rgb(76.5, 76.5, 76.5);\n --color-drag1: rgb(207, 232, 255);\n --color-drag2: rgb(183, 209, 181);\n --color-drag1-background: rgba(128, 128, 128, 0.15);\n --color-drag2-background: rgba(128, 128, 128, 0.15);\n --font-size: medium;\n --font-family: Roboto, Arial, sans-serif;\n --color-overflow: gray;\n --color-icon: gray;\n --color-tabset-background: var(--color-1);\n --color-tabset-background-selected: var(--color-1);\n --color-tabset-background-maximized: var(--color-6);\n --color-tabset-divider-line: var(--color-4);\n --color-tabset-header-background: var(--color-1);\n --color-tabset-header: var(--color-text);\n --color-border-tab-content: var(--color-background);\n --color-border-background: var(--color-1);\n --color-border-divider-line: var(--color-4);\n --color-tab-content: var(--color-background);\n --color-tab-selected: var(--color-text);\n --color-tab-selected-background: var(--color-4);\n --color-tab-unselected: gray;\n --color-tab-unselected-background: transparent;\n --color-tab-textbox: var(--color-text);\n --color-tab-textbox-background: var(--color-3);\n --color-border-tab-selected: var(--color-text);\n --color-border-tab-selected-background: var(--color-4);\n --color-border-tab-unselected: gray;\n --color-border-tab-unselected-background: var(--color-2);\n --color-splitter: var(--color-2);\n --color-splitter-hover: var(--color-4);\n --color-splitter-drag: var(--color-5);\n --color-drag-rect-border: var(--color-4);\n --color-drag-rect-background: var(--color-1);\n --color-drag-rect: var(--color-text);\n --color-popup-border: var(--color-6);\n --color-popup-unselected: var(--color-text);\n --color-popup-unselected-background: var(--color-background);\n --color-popup-selected: var(--color-text);\n --color-popup-selected-background: var(--color-4);\n --color-edge-marker: gray;\n --color-edge-icon: #eee;\n --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);\n --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);\n --size-mini-scroll-indicator: 3px;\n --color-toolbar-button-hover: var(--color-4);\n}\n\n/*\n base classes\n*/\n.flexlayout__layout {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n overflow: hidden;\n background-color: var(--color-background);\n}\n.flexlayout__layout_overlay {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n z-index: 1000;\n}\n.flexlayout__layout_tab_stamps {\n position: absolute;\n top: -10000px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n align-items: start;\n}\n.flexlayout__layout_moveables {\n visibility: hidden;\n position: absolute;\n width: 100px;\n height: 100px;\n top: -20000px;\n}\n.flexlayout__layout_main {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__layout_border_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__layout_border_container_inner {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__splitter {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-splitter);\n touch-action: none;\n z-index: 10;\n}\n@media (hover: hover) {\n .flexlayout__splitter:hover {\n background-color: var(--color-splitter-hover);\n transition: background-color ease-in 0.1s;\n transition-delay: 0.05s;\n border-radius: 5px;\n }\n}\n.flexlayout__splitter_drag {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n border-radius: 5px;\n background-color: var(--color-splitter-drag);\n}\n.flexlayout__splitter_handle {\n background-color: #ccc;\n border-radius: 3px;\n}\n.flexlayout__splitter_handle_horz {\n width: 3px;\n height: 30px;\n}\n.flexlayout__splitter_handle_vert {\n width: 30px;\n height: 3px;\n}\n.flexlayout__splitter_extra {\n touch-action: none;\n background-color: transparent;\n}\n.flexlayout__outline_rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n border: 2px solid var(--color-drag1);\n background: var(--color-drag1-background);\n border-radius: 5px;\n z-index: 1000;\n}\n.flexlayout__outline_rect_edge {\n pointer-events: none;\n border: 2px solid var(--color-drag2);\n background: var(--color-drag2-background);\n border-radius: 5px;\n z-index: 1000;\n box-sizing: border-box;\n}\n.flexlayout__edge_rect {\n position: absolute;\n z-index: 1000;\n background-color: var(--color-edge-marker);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.flexlayout__drag_rect {\n color: var(--color-drag-rect);\n background-color: var(--color-drag-rect-background);\n border: 2px solid var(--color-drag-rect-border);\n border-radius: 5px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n flex-direction: column;\n overflow: hidden;\n padding: 0.3em 0.8em;\n word-wrap: break-word;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__row {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n}\n.flexlayout__tabset {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--color-tabset-background);\n box-sizing: border-box;\n font-family: var(--font-family);\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_tab_divider {\n width: 4px;\n}\n.flexlayout__tabset_content {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n box-sizing: border-box;\n position: relative;\n}\n.flexlayout__tabset_leading {\n display: flex;\n}\n.flexlayout__tabset_header {\n display: flex;\n align-items: center;\n padding: 3px 3px 3px 5px;\n box-sizing: border-box;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n color: var(--color-tabset-header);\n background-color: var(--color-tabset-header-background);\n font-size: var(--font-size);\n}\n.flexlayout__tabset_header_content {\n flex-grow: 1;\n}\n.flexlayout__tabset_tabbar_outer {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n}\n.flexlayout__tabset_tabbar_outer_top {\n padding: 0px 2px 0px 2px;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_outer_bottom {\n padding: 0px 2px 0px 2px;\n border-top: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_inner {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__tabset_tabbar_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__tabset_tabbar_inner_tab_container {\n position: relative;\n display: flex;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 2px solid transparent;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_bottom {\n border-bottom: 2px solid transparent;\n}\n.flexlayout__tabset-selected {\n background-color: var(--color-tabset-background-selected);\n}\n.flexlayout__tabset-maximized {\n background-color: var(--color-tabset-background-maximized);\n}\n.flexlayout__tab_button_stamp {\n display: inline-flex;\n align-items: center;\n gap: 0.3em;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__tab {\n overflow: hidden;\n box-sizing: border-box;\n background-color: var(--color-tab-content);\n color: var(--color-text);\n position: relative;\n}\n.flexlayout__tab_moveable {\n position: relative;\n height: 100%;\n min-width: 1px;\n min-height: 1px;\n overflow: auto;\n box-sizing: border-box;\n}\n.flexlayout__tab_overlay {\n z-index: 20;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2392156863);\n}\n.flexlayout__tab_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n padding: 3px 0.5em;\n cursor: pointer;\n}\n.flexlayout__tab_button_stretch {\n background-color: transparent;\n color: var(--color-tab-selected);\n width: 100%;\n padding: 3px 0em;\n text-wrap: nowrap;\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n}\n@media (hover: hover) {\n .flexlayout__tab_button_stretch:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--selected {\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--unselected {\n background-color: var(--color-tab-unselected-background);\n color: var(--color-tab-unselected);\n}\n.flexlayout__tab_button_leading {\n display: flex;\n}\n.flexlayout__tab_button_content {\n display: flex;\n text-wrap: nowrap;\n}\n.flexlayout__tab_button_textbox {\n border: none;\n font-family: var(--font-family);\n font-size: var(--font-size);\n color: var(--color-tab-textbox);\n background-color: var(--color-tab-textbox-background);\n border: 1px inset var(--color-1);\n border-radius: 3px;\n width: 10em;\n}\n.flexlayout__tab_button_textbox:focus {\n outline: none;\n}\n.flexlayout__tab_button_trailing {\n display: flex;\n visibility: hidden;\n border-radius: 4px;\n}\n.flexlayout__tab_button_trailing:hover {\n background-color: var(--color-toolbar-button-hover);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {\n visibility: visible;\n}\n.flexlayout__tab_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 2em;\n overflow: hidden;\n}\n.flexlayout__tab_toolbar {\n display: flex;\n align-items: center;\n gap: 0.3em;\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__tab_toolbar_icon {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__tab_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__tab_toolbar_sticky_buttons_container {\n display: flex;\n gap: 0.3em;\n padding-left: 5px;\n align-items: center;\n}\n.flexlayout__border {\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n font-family: var(--font-family);\n color: var(--color-border);\n background-color: var(--color-border-background);\n}\n.flexlayout__border_tab_contents {\n box-sizing: border-box;\n overflow: hidden;\n background-color: var(--color-border-tab-content);\n}\n.flexlayout__border_leading {\n display: flex;\n}\n.flexlayout__border_top {\n border-bottom: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_bottom {\n border-top: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_left {\n border-right: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_right {\n border-left: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_inner {\n position: relative;\n box-sizing: border-box;\n align-items: center;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__border_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__border_inner_tab_container {\n white-space: nowrap;\n display: flex;\n padding-left: 2px;\n padding-right: 2px;\n box-sizing: border-box;\n position: absolute;\n}\n.flexlayout__border_inner_tab_container_right {\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_inner_tab_container_left {\n flex-direction: row-reverse;\n transform-origin: top right;\n transform: rotate(-90deg);\n}\n.flexlayout__border_tab_divider {\n width: 4px;\n}\n.flexlayout__border_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n cursor: pointer;\n padding: 3px 0.5em;\n margin: 2px 0px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__border_button--selected {\n background-color: var(--color-border-tab-selected-background);\n color: var(--color-border-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover {\n color: var(--color-border-tab-selected);\n }\n}\n.flexlayout__border_button--unselected {\n background-color: var(--color-border-tab-unselected-background);\n color: var(--color-border-tab-unselected);\n}\n.flexlayout__border_button_leading {\n display: flex;\n}\n.flexlayout__border_button_content {\n display: flex;\n}\n.flexlayout__border_button_trailing {\n display: flex;\n border-radius: 4px;\n visibility: hidden;\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover .flexlayout__border_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__border_button--selected .flexlayout__border_button_trailing {\n visibility: visible;\n}\n.flexlayout__border_toolbar {\n display: flex;\n gap: 0.3em;\n align-items: center;\n}\n.flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {\n flex-direction: column;\n padding-top: 0.5em;\n padding-bottom: 0.3em;\n}\n.flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__border_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__border_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__border_toolbar_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 1.5em;\n}\n.flexlayout__popup_menu {\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__popup_menu_item {\n padding: 2px 0.5em;\n white-space: nowrap;\n cursor: pointer;\n border-radius: 2px;\n}\n.flexlayout__popup_menu_item--selected {\n font-weight: 500;\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__popup_menu_item:hover {\n background-color: var(--color-6);\n }\n}\n.flexlayout__popup_menu_container {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border: 1px solid var(--color-popup-border);\n color: var(--color-popup-unselected);\n background: var(--color-popup-unselected-background);\n border-radius: 3px;\n position: absolute;\n z-index: 1000;\n max-height: 50%;\n min-width: 100px;\n overflow: auto;\n padding: 2px;\n}\n.flexlayout__floating_window _body {\n height: 100%;\n}\n.flexlayout__floating_window_content {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n}\n.flexlayout__error_boundary_container {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n}\n.flexlayout__error_boundary_content {\n display: flex;\n align-items: center;\n}\n.flexlayout__border_sizer {\n position: absolute;\n top: -30000px;\n padding-top: 6px;\n padding-bottom: 5px;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__mini_scrollbar {\n position: absolute;\n background-color: var(--color-mini-scroll-indicator);\n border-radius: 5px;\n width: var(--size-mini-scroll-indicator);\n height: var(--size-mini-scroll-indicator);\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar:hover {\n background-color: var(--color-mini-scroll-indicator-hovered);\n transition: background-color 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar_container {\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n@media (hover: hover) {\n .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {\n opacity: 1;\n visibility: visible;\n }\n}\n\n/* ======================== End of Base Classes =========================== */\n/* \n dark theme overrides \n*/\n.flexlayout__tabset_header {\n box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);\n}\n.flexlayout__tabset-selected {\n background-image: linear-gradient(var(--color-background), var(--color-4));\n}\n.flexlayout__tabset-maximized {\n background-image: linear-gradient(var(--color-6), var(--color-2));\n}\n.flexlayout__tab_top {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}\n.flexlayout__tab_bottom {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n}\n.flexlayout__border_button {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n/* ============================================================================\n * Rapid Design System overrides (flexlayout-react.overrides.css) \u2014 applied last.\n * ========================================================================== */\n/*\n * flexlayout-react.overrides.css \u2014 Rapid Design System theme overrides for flexlayout-react.\n *\n * THIS IS THE SINGLE SOURCE OF TRUTH for how flexlayout-react looks across every app that\n * consumes Foundation. Do NOT copy these rules into apps \u2014 import the compiled theme from\n * `@genesislcap/rapid-design-system` instead (see flexlayout-react-theme.ts).\n *\n * Build pipeline: `scripts/generate-flexlayout-theme.mjs` concatenates the vendored\n * flexlayout-react base theme (structural CSS + dark palette) FIRST, then this file LAST,\n * into `flexlayout-react-theme.generated.ts`. Equal specificity means the later sheet wins,\n * so every rule here overrides the vendored default. Run `pnpm flexlayout:generate` after\n * editing (the package build does this automatically).\n *\n * The flexlayout theme is almost entirely driven by CSS custom properties declared on\n * `.flexlayout__layout` (see the full list at the top of the vendored base theme). The\n * easiest way to re-skin is to remap those variables to rapid design-system tokens, as\n * below. For anything the variables don't cover, target the `.flexlayout__*` classes\n * directly (examples at the bottom).\n *\n * Tokens resolve from the nearest design-system provider ancestor (CSS custom properties\n * inherit across shadow boundaries), so flexlayout-react must render under a\n * `<rapid-design-system-provider>` for these to take effect.\n */\n\n/* --- Variable remap: flexlayout palette -> rapid design tokens ----------------- */\n.flexlayout__layout {\n --font-family: var(--body-font, Roboto, Arial, sans-serif);\n --font-size: var(--type-ramp-base-font-size);\n\n --color-text: var(--neutral-foreground-rest);\n --color-background: var(--fill-color);\n\n /* Greyscale ramp used across tabsets, borders and toolbars. */\n --color-1: var(--neutral-layer-1);\n --color-2: var(--neutral-layer-2);\n --color-3: var(--neutral-layer-3);\n --color-4: var(--neutral-layer-4);\n\n /* Selected tab + active splitter pick up the accent colour. */\n --color-tab-selected: var(--accent-foreground-rest);\n --color-tab-unselected: var(--neutral-foreground-hint);\n --color-tab-selected-background: var(--accent-fill-rest);\n --color-splitter-drag: var(--accent-fill-rest);\n --color-splitter-hover: var(--accent-fill-hover);\n}\n\n.flexlayout__tabset-selected,\n.flexlayout__tabset-maximized {\n background-image: none !important;\n}\n\n.flexlayout__tab_button_content {\n font-weight: 400;\n font-size: var(--type-ramp-minus-1-font-size);\n}\n\n.flexlayout__tab_button--unselected:hover {\n color: var(--neutral-foreground-rest, #e0e0e0) !important;\n background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;\n}\n\n.flexlayout__tab_top,\n.flexlayout__tab_bottom {\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n\n.flexlayout__tab_toolbar_button-max,\n.flexlayout__tab_toolbar_button-min {\n order: 100;\n}\n\n.flexlayout__tab_button_textbox {\n box-sizing: border-box;\n width: auto;\n min-width: 8em;\n max-width: 100%;\n margin: 0;\n padding: 0 calc(var(--design-unit, 4) * 1px);\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size, var(--font-size));\n font-weight: 500;\n line-height: var(--type-ramp-base-line-height, normal);\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-rest);\n border: 1px solid var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius, 2) * 1px);\n\n &:focus {\n outline: none;\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-focus, var(--neutral-fill-input-rest));\n border-color: var(--accent-fill-rest);\n }\n}\n\n.flexlayout__tabset {\n border: var(--card-border, 1px solid var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n}\n\n.flexlayout__tabset_content {\n margin-top: -1px;\n}\n\n.flexlayout__tabset_tabbar_outer_top {\n border: 0;\n height: var(\n --foundation-tab-height,\n calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)\n );\n background: none;\n z-index: 1;\n}\n\n.flexlayout__tabset_container {\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n}\n\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 0;\n}\n\n.flexlayout__tab_button {\n border-right-style: solid;\n border-right-width: var(--tab-rest-border-width, 1px);\n border-right-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n gap: 8px;\n\n &:first-child {\n border-left-style: solid;\n border-left-width: var(--tab-rest-border-width, 1px);\n border-left-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n }\n}\n\n.flexlayout__tab_button--selected {\n position: relative;\n color: var(--accent-foreground-rest) !important;\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n border-style: solid;\n border-width: var(--tab-active-border-width, 0 1px 0 0);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n .flexlayout__tab_button_content {\n font-weight: 700;\n }\n}\n\n.flexlayout__tab {\n border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));\n background: var(--neutral-layer-card-container);\n\n rapid-card {\n display: flex;\n flex-direction: column;\n border: 0;\n border-radius: 0 0 var(--card-corner-radius) var(--card-corner-radius);\n grid-register {\n display: block;\n height: 100%;\n }\n }\n}\n\n.flexlayout__tabset_tab_divider {\n width: 0;\n}\n\n.flexlayout__tab_button_trailing {\n rapid-icon {\n color: var(--accent-foreground-rest);\n\n &:hover {\n color: var(--accent-foreground-hover);\n }\n }\n}\n\n.flexlayout__popup_menu_container {\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);\n padding: 0;\n border: 1px solid var(--neutral-stroke-rest);\n}\n\n.flexlayout__popup_menu_item {\n padding: calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);\n border-bottom: 1px solid var(--neutral-stroke-divider-rest);\n\n &:hover {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n }\n\n &:last-child {\n border-bottom: 0;\n }\n}\n\n.flexlayout__popup_menu_item--selected {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n}\n\n.flexlayout__tab_toolbar_button {\n padding: 0;\n height: unset;\n width: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n > svg {\n height: 16px !important;\n width: 16px !important;\n padding: 4px;\n fill: var(--neutral-foreground-hint);\n }\n}\n\n.flexlayout__splitter_vert {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDI1NmEzMiAzMiAwIDEgMSAtNjQgMCAzMiAzMiAwIDEgMSA2NCAwem0tMTYwIDBhMzIgMzIgMCAxIDEgLTY0IDAgMzIgMzIgMCAxIDEgNjQgMHpNNjQgMjg4YTMyIDMyIDAgMSAxIDAtNjQgMzIgMzIgMCAxIDEgMCA2NHoiLz48L3N2Zz4=);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 12px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__splitter_horz {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNjQgMzg0YTMyIDMyIDAgMSAwIDAgNjQgMzIgMzIgMCAxIDAgMC02NHptMC0xNjBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDEgMCAwLTY0ek05NiA5NkEzMiAzMiAwIDEgMCAzMiA5NmEzMiAzMiAwIDEgMCA2NCAweiIvPjwvc3ZnPg==);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 4px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__layout {\n top: 8px;\n bottom: 8px;\n left: 8px;\n right: 8px;\n}";
|
|
5
5
|
//# sourceMappingURL=flexlayout-react-theme.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flexlayout-react-theme.generated.d.ts","sourceRoot":"","sources":["../../../src/flexlayout-react-theme/flexlayout-react-theme.generated.ts"],"names":[],"mappings":"AAWA,qEAAqE;AACrE,eAAO,MAAM,8BAA8B,WAAW,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B,
|
|
1
|
+
{"version":3,"file":"flexlayout-react-theme.generated.d.ts","sourceRoot":"","sources":["../../../src/flexlayout-react-theme/flexlayout-react-theme.generated.ts"],"names":[],"mappings":"AAWA,qEAAqE;AACrE,eAAO,MAAM,8BAA8B,WAAW,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B,+31BAu8BrC,CAAC"}
|
package/dist/dts/index.d.ts
CHANGED
package/dist/dts/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC;AAC/C,eAAO,MAAM,yBAAyB,yDAAuD,CAAC;AAE9F,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC;AAC/C,eAAO,MAAM,yBAAyB,yDAAuD,CAAC;AAE9F,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modal-theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { CompilableTheme, ThemeSection } from './theme-compiler';
|
|
2
|
+
/** A modal theme: mode-invariant `shared` tokens plus one bag of inputs per named mode. */
|
|
3
|
+
export interface ModalTheme extends CompilableTheme {
|
|
4
|
+
id?: string;
|
|
5
|
+
defaultMode?: string;
|
|
6
|
+
colorStrategy?: 'adaptive' | 'explicit';
|
|
7
|
+
/**
|
|
8
|
+
* Whether the app should offer a mode toggle. Omit to infer from the mode count
|
|
9
|
+
* (a toggle only makes sense with >1 mode); set explicitly to force it — e.g. ship
|
|
10
|
+
* two modes but launch single-mode (`false`), keeping the second mode for later.
|
|
11
|
+
*/
|
|
12
|
+
showModeToggle?: boolean;
|
|
13
|
+
shared?: ThemeSection & {
|
|
14
|
+
design_tokens?: Record<string, unknown>;
|
|
15
|
+
};
|
|
16
|
+
modes: Record<string, ThemeSection & {
|
|
17
|
+
design_tokens?: Record<string, unknown>;
|
|
18
|
+
}>;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* The mode to start on: remembered choice for this theme, else the declared default.
|
|
22
|
+
* @public
|
|
23
|
+
*/
|
|
24
|
+
export declare const resolveInitialMode: (theme: ModalTheme) => string;
|
|
25
|
+
/**
|
|
26
|
+
* Cycle to the next mode (for the light/dark toggle; generalises to N modes).
|
|
27
|
+
* @public
|
|
28
|
+
*/
|
|
29
|
+
export declare const nextMode: (theme: ModalTheme, current: string) => string;
|
|
30
|
+
/**
|
|
31
|
+
* Whether the app should offer a mode toggle. Defaults to "more than one mode exists";
|
|
32
|
+
* a `showModeToggle` on the theme overrides the inference. Use to set the header's
|
|
33
|
+
* toggle-button visibility.
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export declare const isModeToggleEnabled: (theme: ModalTheme) => boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Compile the theme to a single mode-agnostic sheet and adopt it into the scope
|
|
39
|
+
* that actually contains the provider. The sheet contains every mode; switching
|
|
40
|
+
* never regenerates it.
|
|
41
|
+
*
|
|
42
|
+
* The provider is typically rendered inside its host app's shadow root, not the
|
|
43
|
+
* document light DOM — so a document-scoped `rapid-design-system-provider { … }`
|
|
44
|
+
* rule would never match it. We adopt the sheet onto `provider.getRootNode()` (the
|
|
45
|
+
* containing ShadowRoot, or Document if the provider sits at document scope) so the
|
|
46
|
+
* selector resolves and the surface custom properties land on the provider,
|
|
47
|
+
* inheriting down through every nested shadow boundary.
|
|
48
|
+
*
|
|
49
|
+
* Re-entrant: once a sheet is adopted, subsequent calls update it in place
|
|
50
|
+
* (`replaceSync`) rather than adopting a duplicate — this is what lets a hot theme
|
|
51
|
+
* edit refresh the styles without a reload.
|
|
52
|
+
*
|
|
53
|
+
* @public
|
|
54
|
+
*/
|
|
55
|
+
export declare const injectThemeStyles: (provider: HTMLElement, theme: ModalTheme) => void;
|
|
56
|
+
/**
|
|
57
|
+
* Recompile and re-apply the theme after a hot edit to the theme file: updates the
|
|
58
|
+
* adopted sheet in place and re-runs the active mode's design tokens. Wire to a
|
|
59
|
+
* bundler's HMR hook so theme edits show without a full page reload.
|
|
60
|
+
*
|
|
61
|
+
* @public
|
|
62
|
+
*/
|
|
63
|
+
export declare const reapplyTheme: (theme: ModalTheme) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Apply a mode: design-token half via FAST, surface/parts half via the class swap.
|
|
66
|
+
* @public
|
|
67
|
+
*/
|
|
68
|
+
export declare const applyMode: (provider: HTMLElement, theme: ModalTheme, mode: string) => void;
|
|
69
|
+
//# sourceMappingURL=modal-theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-theme.d.ts","sourceRoot":"","sources":["../../../src/modal-theme/modal-theme.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAgB,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE/E,2FAA2F;AAC3F,MAAM,WAAW,UAAW,SAAQ,eAAe;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACxC;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC;CACnF;AAgDD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,UAAU,KAAG,MAGtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,UAAU,EAAE,SAAS,MAAM,KAAG,MAI7D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,UAAU,KAAG,OACH,CAAC;AAUtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,WAAW,EAAE,OAAO,UAAU,KAAG,IAW5E,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,IAIhD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,UAAU,WAAW,EAAE,OAAO,UAAU,EAAE,MAAM,MAAM,KAAG,IA2ClF,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Compiles a modal theme file into class-scoped CSS (native nesting) for deployment.
|
|
3
|
+
*
|
|
4
|
+
* customTokens -> custom-property declarations
|
|
5
|
+
* componentOverrides -> nested rules keyed by any selector (::part(), a host tag, a class)
|
|
6
|
+
*
|
|
7
|
+
* Everything nests under one `rapid-design-system-provider` root. `shared` lives
|
|
8
|
+
* at the root (applies in every mode); each mode is a nested `&.theme-<name>`
|
|
9
|
+
* block whose compound selector out-specifies the root, so mode values win.
|
|
10
|
+
*
|
|
11
|
+
* design_tokens are NOT emitted: they are FAST recipe *inputs* consumed in JS
|
|
12
|
+
* (accent, luminance), applied at runtime via setValueFor (see modal-theme.ts).
|
|
13
|
+
*
|
|
14
|
+
* @public
|
|
15
|
+
*/
|
|
16
|
+
/** A declaration block: CSS property/custom-property name -> value. */
|
|
17
|
+
export type ComponentOverrideDeclarations = Record<string, string>;
|
|
18
|
+
export interface ThemeSection {
|
|
19
|
+
customTokens?: Record<string, string>;
|
|
20
|
+
/** Rules keyed by any CSS selector (a host tag, a class, or `::part()`) -> declarations. */
|
|
21
|
+
componentOverrides?: Record<string, ComponentOverrideDeclarations>;
|
|
22
|
+
}
|
|
23
|
+
export interface CompilableTheme {
|
|
24
|
+
shared?: ThemeSection;
|
|
25
|
+
modes?: Record<string, ThemeSection>;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Compile a modal theme into class-scoped nested CSS.
|
|
29
|
+
*
|
|
30
|
+
* @param theme - the modal theme (shared + modes; customTokens + componentOverrides).
|
|
31
|
+
* @param host - the selector the rules nest under (default `rapid-design-system-provider`).
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
34
|
+
export declare function compileTheme(theme: CompilableTheme, { host }?: {
|
|
35
|
+
host?: string;
|
|
36
|
+
}): string;
|
|
37
|
+
//# sourceMappingURL=theme-compiler.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-compiler.d.ts","sourceRoot":"","sources":["../../../src/modal-theme/theme-compiler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,uEAAuE;AACvE,MAAM,MAAM,6BAA6B,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CACtC;AAyBD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,eAAe,EACtB,EAAE,IAAW,EAAE,GAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAO,GACtC,MAAM,CAWR"}
|
package/dist/dts/react.d.ts
CHANGED
|
@@ -115,23 +115,23 @@ interface HTMLWCProps extends React.AriaAttributes {
|
|
|
115
115
|
onInput?(e: Event): void;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
export declare const
|
|
118
|
+
export declare const AccordionItem: React.ForwardRefExoticComponent<
|
|
119
119
|
React.PropsWithChildren<
|
|
120
|
-
Omit<PublicOf<
|
|
120
|
+
Omit<PublicOf<AccordionItemWC>, 'children' | 'style'> &
|
|
121
121
|
HTMLWCProps & {
|
|
122
122
|
}
|
|
123
|
-
> & React.RefAttributes<
|
|
123
|
+
> & React.RefAttributes<AccordionItemWC>
|
|
124
124
|
>;
|
|
125
|
-
export type
|
|
125
|
+
export type AccordionItemRef = AccordionItemWC;
|
|
126
126
|
|
|
127
|
-
export declare const
|
|
127
|
+
export declare const Accordion: React.ForwardRefExoticComponent<
|
|
128
128
|
React.PropsWithChildren<
|
|
129
|
-
Omit<PublicOf<
|
|
129
|
+
Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
|
|
130
130
|
HTMLWCProps & {
|
|
131
131
|
}
|
|
132
|
-
> & React.RefAttributes<
|
|
132
|
+
> & React.RefAttributes<AccordionWC>
|
|
133
133
|
>;
|
|
134
|
-
export type
|
|
134
|
+
export type AccordionRef = AccordionWC;
|
|
135
135
|
|
|
136
136
|
export declare const ActionsMenu: React.ForwardRefExoticComponent<
|
|
137
137
|
React.PropsWithChildren<
|
|
@@ -650,6 +650,15 @@ export declare const SearchBar: React.ForwardRefExoticComponent<
|
|
|
650
650
|
>;
|
|
651
651
|
export type SearchBarRef = SearchBarWC;
|
|
652
652
|
|
|
653
|
+
export declare const SegmentedControl: React.ForwardRefExoticComponent<
|
|
654
|
+
React.PropsWithChildren<
|
|
655
|
+
Omit<PublicOf<SegmentedControlWC>, 'children' | 'style'> &
|
|
656
|
+
HTMLWCProps & {
|
|
657
|
+
}
|
|
658
|
+
> & React.RefAttributes<SegmentedControlWC>
|
|
659
|
+
>;
|
|
660
|
+
export type SegmentedControlRef = SegmentedControlWC;
|
|
661
|
+
|
|
653
662
|
export declare const SectionNavigator: React.ForwardRefExoticComponent<
|
|
654
663
|
React.PropsWithChildren<
|
|
655
664
|
Omit<PublicOf<SectionNavigatorWC>, 'children' | 'style'> &
|
|
@@ -663,15 +672,6 @@ export declare const SectionNavigator: React.ForwardRefExoticComponent<
|
|
|
663
672
|
>;
|
|
664
673
|
export type SectionNavigatorRef = SectionNavigatorWC;
|
|
665
674
|
|
|
666
|
-
export declare const SegmentedControl: React.ForwardRefExoticComponent<
|
|
667
|
-
React.PropsWithChildren<
|
|
668
|
-
Omit<PublicOf<SegmentedControlWC>, 'children' | 'style'> &
|
|
669
|
-
HTMLWCProps & {
|
|
670
|
-
}
|
|
671
|
-
> & React.RefAttributes<SegmentedControlWC>
|
|
672
|
-
>;
|
|
673
|
-
export type SegmentedControlRef = SegmentedControlWC;
|
|
674
|
-
|
|
675
675
|
export declare const SegmentedItem: React.ForwardRefExoticComponent<
|
|
676
676
|
React.PropsWithChildren<
|
|
677
677
|
Omit<PublicOf<SegmentedItemWC>, 'children' | 'style'> &
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,cAAc,GACzB,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,
|
|
1
|
+
{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,cAAc,GACzB,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAiBF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-panel.styles.d.ts","sourceRoot":"","sources":["../../../src/tab-panel/tab-panel.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,mBAAmB,GAC9B,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,
|
|
1
|
+
{"version":3,"file":"tab-panel.styles.d.ts","sourceRoot":"","sources":["../../../src/tab-panel/tab-panel.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,mBAAmB,GAC9B,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAWF,CAAC"}
|
|
@@ -48,22 +48,33 @@ const rapidSecondaryStyles = css `
|
|
|
48
48
|
const rapidNeutralStyles = css `
|
|
49
49
|
:host([appearance='neutral']) {
|
|
50
50
|
background: var(--neutral-button-fill, var(--neutral-fill-rest));
|
|
51
|
-
border: 0;
|
|
51
|
+
border: var(--neutral-button-border, 0);
|
|
52
52
|
color: var(--neutral-button-foreground, var(--neutral-foreground-rest));
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
:host([appearance='neutral']:hover) {
|
|
56
|
-
background:
|
|
56
|
+
background: color-mix(
|
|
57
|
+
in srgb,
|
|
58
|
+
var(--neutral-button-fill, var(--neutral-fill-hover)),
|
|
59
|
+
transparent 20%
|
|
60
|
+
);
|
|
57
61
|
}
|
|
58
62
|
|
|
59
63
|
:host([appearance='neutral']:active) {
|
|
60
|
-
background:
|
|
64
|
+
background: color-mix(
|
|
65
|
+
in srgb,
|
|
66
|
+
var(--neutral-button-fill, var(--neutral-fill-active)),
|
|
67
|
+
transparent 30%
|
|
68
|
+
);
|
|
61
69
|
}
|
|
62
70
|
|
|
63
71
|
:host([appearance='neutral'][disabled]),
|
|
64
72
|
:host([appearance='neutral'][disabled]):hover,
|
|
65
73
|
:host([appearance='neutral'][disabled]):active {
|
|
66
74
|
opacity: 50%;
|
|
75
|
+
background: var(--neutral-button-fill, var(--neutral-fill-rest));
|
|
76
|
+
color: var(--neutral-button-foreground, var(--neutral-foreground-rest));
|
|
77
|
+
border: var(--neutral-button-border, 0);
|
|
67
78
|
}
|
|
68
79
|
`;
|
|
69
80
|
const rapidDangerStyles = css `
|
|
@@ -7,6 +7,7 @@ export const rapidCardStyles = (context, definition) => css `
|
|
|
7
7
|
background: var(--neutral-layer-card-container);
|
|
8
8
|
color: ${neutralForegroundRest};
|
|
9
9
|
border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1px));
|
|
10
|
+
box-shadow: var(--card-box-shadow, none);
|
|
10
11
|
border: var(
|
|
11
12
|
--card-border,
|
|
12
13
|
1px solid var(--neutral-stroke-rest)
|
|
@@ -879,9 +879,7 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
|
|
|
879
879
|
}
|
|
880
880
|
|
|
881
881
|
.flexlayout__tab {
|
|
882
|
-
border-radius: calc(var(--control-corner-radius) * 1.5px)
|
|
883
|
-
calc(var(--control-corner-radius) * 1.5px)
|
|
884
|
-
var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))
|
|
882
|
+
border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))
|
|
885
883
|
var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));
|
|
886
884
|
border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));
|
|
887
885
|
background: var(--neutral-layer-card-container);
|
|
@@ -149,9 +149,7 @@
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
.flexlayout__tab {
|
|
152
|
-
border-radius: calc(var(--control-corner-radius) * 1.5px)
|
|
153
|
-
calc(var(--control-corner-radius) * 1.5px)
|
|
154
|
-
var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))
|
|
152
|
+
border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))
|
|
155
153
|
var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));
|
|
156
154
|
border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));
|
|
157
155
|
background: var(--neutral-layer-card-container);
|
package/dist/esm/index.js
CHANGED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Runtime controller for modal themes (named modes + a light/dark or N-mode switcher).
|
|
3
|
+
*
|
|
4
|
+
* A theme is a set of named modes. Switching a mode is *two halves*:
|
|
5
|
+
* (a) swap the provider's `theme-<name>` class — the compiled, injected sheet
|
|
6
|
+
* supplies the pinned surfaces + parts, and the cascade tears down the
|
|
7
|
+
* previous mode automatically;
|
|
8
|
+
* (b) `setValueFor` the mode's design_tokens (accent, luminance, neutral seed)
|
|
9
|
+
* so FAST regenerates the derived recipe outputs (e.g.
|
|
10
|
+
* `--accent-foreground-rest`). Reuses `configureRapidDesignSystem` for (b).
|
|
11
|
+
*
|
|
12
|
+
* Selection (which mode is active) is app state, persisted per-theme in
|
|
13
|
+
* localStorage — never written back into the theme file.
|
|
14
|
+
*
|
|
15
|
+
* See `theming-poc/MIGRATION.md` for how to adopt this in an existing app.
|
|
16
|
+
*
|
|
17
|
+
* @public
|
|
18
|
+
*/
|
|
19
|
+
import { configureRapidDesignSystem } from '../_config';
|
|
20
|
+
import { compileTheme } from './theme-compiler';
|
|
21
|
+
const STORAGE_KEY = 'foundation-ui:theme-modes';
|
|
22
|
+
const THEME_CLASS_PREFIX = 'theme-';
|
|
23
|
+
/** Applied luminance at or above this reads as "light" (LightMode = 1, DarkMode = 0.23). */
|
|
24
|
+
const LIGHT_LUMINANCE_THRESHOLD = 0.5;
|
|
25
|
+
const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
|
|
26
|
+
/** Deep-merge two design_tokens trees; `override` (the mode) wins at the leaves. */
|
|
27
|
+
const deepMerge = (base, override = {}) => {
|
|
28
|
+
const out = Object.assign({}, base);
|
|
29
|
+
for (const [key, value] of Object.entries(override)) {
|
|
30
|
+
const existing = out[key];
|
|
31
|
+
out[key] = isPlainObject(value) && isPlainObject(existing) ? deepMerge(existing, value) : value;
|
|
32
|
+
}
|
|
33
|
+
return out;
|
|
34
|
+
};
|
|
35
|
+
// --- selection state (per-theme memory) -------------------------------------
|
|
36
|
+
const readModeMemory = () => {
|
|
37
|
+
var _a;
|
|
38
|
+
try {
|
|
39
|
+
return JSON.parse((_a = localStorage.getItem(STORAGE_KEY)) !== null && _a !== void 0 ? _a : '{}');
|
|
40
|
+
}
|
|
41
|
+
catch (_b) {
|
|
42
|
+
return {};
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const rememberMode = (themeId, mode) => {
|
|
46
|
+
const memory = readModeMemory();
|
|
47
|
+
memory[themeId] = mode;
|
|
48
|
+
try {
|
|
49
|
+
localStorage.setItem(STORAGE_KEY, JSON.stringify(memory));
|
|
50
|
+
}
|
|
51
|
+
catch (_a) {
|
|
52
|
+
/* storage unavailable (private mode / quota) — selection is best-effort */
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const themeKey = (theme) => { var _a; return (_a = theme.id) !== null && _a !== void 0 ? _a : 'default'; };
|
|
56
|
+
const modeNames = (theme) => { var _a; return Object.keys((_a = theme.modes) !== null && _a !== void 0 ? _a : {}); };
|
|
57
|
+
const fallbackMode = (theme) => { var _a; return (_a = theme.defaultMode) !== null && _a !== void 0 ? _a : modeNames(theme)[0]; };
|
|
58
|
+
/**
|
|
59
|
+
* The mode to start on: remembered choice for this theme, else the declared default.
|
|
60
|
+
* @public
|
|
61
|
+
*/
|
|
62
|
+
export const resolveInitialMode = (theme) => {
|
|
63
|
+
const remembered = readModeMemory()[themeKey(theme)];
|
|
64
|
+
return remembered && theme.modes[remembered] ? remembered : fallbackMode(theme);
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Cycle to the next mode (for the light/dark toggle; generalises to N modes).
|
|
68
|
+
* @public
|
|
69
|
+
*/
|
|
70
|
+
export const nextMode = (theme, current) => {
|
|
71
|
+
const names = modeNames(theme);
|
|
72
|
+
const index = names.indexOf(current);
|
|
73
|
+
return names[(index + 1) % names.length];
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* Whether the app should offer a mode toggle. Defaults to "more than one mode exists";
|
|
77
|
+
* a `showModeToggle` on the theme overrides the inference. Use to set the header's
|
|
78
|
+
* toggle-button visibility.
|
|
79
|
+
* @public
|
|
80
|
+
*/
|
|
81
|
+
export const isModeToggleEnabled = (theme) => { var _a; return (_a = theme.showModeToggle) !== null && _a !== void 0 ? _a : modeNames(theme).length > 1; };
|
|
82
|
+
// --- application ------------------------------------------------------------
|
|
83
|
+
// Live references to the adopted sheet and the last-applied provider/mode, so a
|
|
84
|
+
// hot theme edit (see reapplyTheme) can update in place and re-run the current mode.
|
|
85
|
+
let activeSheet = null;
|
|
86
|
+
let activeProvider = null;
|
|
87
|
+
let activeMode = null;
|
|
88
|
+
/**
|
|
89
|
+
* Compile the theme to a single mode-agnostic sheet and adopt it into the scope
|
|
90
|
+
* that actually contains the provider. The sheet contains every mode; switching
|
|
91
|
+
* never regenerates it.
|
|
92
|
+
*
|
|
93
|
+
* The provider is typically rendered inside its host app's shadow root, not the
|
|
94
|
+
* document light DOM — so a document-scoped `rapid-design-system-provider { … }`
|
|
95
|
+
* rule would never match it. We adopt the sheet onto `provider.getRootNode()` (the
|
|
96
|
+
* containing ShadowRoot, or Document if the provider sits at document scope) so the
|
|
97
|
+
* selector resolves and the surface custom properties land on the provider,
|
|
98
|
+
* inheriting down through every nested shadow boundary.
|
|
99
|
+
*
|
|
100
|
+
* Re-entrant: once a sheet is adopted, subsequent calls update it in place
|
|
101
|
+
* (`replaceSync`) rather than adopting a duplicate — this is what lets a hot theme
|
|
102
|
+
* edit refresh the styles without a reload.
|
|
103
|
+
*
|
|
104
|
+
* @public
|
|
105
|
+
*/
|
|
106
|
+
export const injectThemeStyles = (provider, theme) => {
|
|
107
|
+
const css = compileTheme(theme);
|
|
108
|
+
if (activeSheet) {
|
|
109
|
+
activeSheet.replaceSync(css);
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
const sheet = new CSSStyleSheet();
|
|
113
|
+
sheet.replaceSync(css);
|
|
114
|
+
const root = provider.getRootNode();
|
|
115
|
+
root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
|
|
116
|
+
activeSheet = sheet;
|
|
117
|
+
};
|
|
118
|
+
/**
|
|
119
|
+
* Recompile and re-apply the theme after a hot edit to the theme file: updates the
|
|
120
|
+
* adopted sheet in place and re-runs the active mode's design tokens. Wire to a
|
|
121
|
+
* bundler's HMR hook so theme edits show without a full page reload.
|
|
122
|
+
*
|
|
123
|
+
* @public
|
|
124
|
+
*/
|
|
125
|
+
export const reapplyTheme = (theme) => {
|
|
126
|
+
if (!activeProvider || !activeMode)
|
|
127
|
+
return;
|
|
128
|
+
injectThemeStyles(activeProvider, theme);
|
|
129
|
+
applyMode(activeProvider, theme, activeMode);
|
|
130
|
+
};
|
|
131
|
+
/**
|
|
132
|
+
* Apply a mode: design-token half via FAST, surface/parts half via the class swap.
|
|
133
|
+
* @public
|
|
134
|
+
*/
|
|
135
|
+
export const applyMode = (provider, theme, mode) => {
|
|
136
|
+
var _a, _b, _c, _d, _e, _f;
|
|
137
|
+
activeProvider = provider;
|
|
138
|
+
activeMode = mode;
|
|
139
|
+
// (b) FAST recipe inputs — accent, luminance, neutral seed, typography, etc.
|
|
140
|
+
const design_tokens = deepMerge(((_b = (_a = theme.shared) === null || _a === void 0 ? void 0 : _a.design_tokens) !== null && _b !== void 0 ? _b : {}), ((_d = (_c = theme.modes[mode]) === null || _c === void 0 ? void 0 : _c.design_tokens) !== null && _d !== void 0 ? _d : {}));
|
|
141
|
+
configureRapidDesignSystem(provider, { design_tokens });
|
|
142
|
+
// (a) surfaces + parts are pure CSS — swap the mode class; the sheet does the rest.
|
|
143
|
+
for (const cls of Array.from(provider.classList)) {
|
|
144
|
+
if (cls.startsWith(THEME_CLASS_PREFIX))
|
|
145
|
+
provider.classList.remove(cls);
|
|
146
|
+
}
|
|
147
|
+
provider.classList.add(`${THEME_CLASS_PREFIX}${mode}`);
|
|
148
|
+
// Derive light/dark from the applied luminance (robust for arbitrarily-named
|
|
149
|
+
// modes), falling back to the mode name. LightMode luminance is 1, DarkMode 0.23.
|
|
150
|
+
const luminanceValue = (_f = (_e = design_tokens === null || design_tokens === void 0 ? void 0 : design_tokens.mode) === null || _e === void 0 ? void 0 : _e.luminance) === null || _f === void 0 ? void 0 : _f.$value;
|
|
151
|
+
const isLight = typeof luminanceValue === 'number'
|
|
152
|
+
? luminanceValue >= LIGHT_LUMINANCE_THRESHOLD
|
|
153
|
+
: mode === 'light';
|
|
154
|
+
// Back-compat: existing code/components may still key off the legacy `.light` class.
|
|
155
|
+
document.body.classList.toggle('light', isLight);
|
|
156
|
+
provider.classList.toggle('light', isLight);
|
|
157
|
+
// Keep the platform `luminance` key in sync with the actually-applied mode.
|
|
158
|
+
// foundation-header (the toggle icon) writes its own, often-inverse value
|
|
159
|
+
// synchronously right after emitting the toggle event, and grid-pro reads this
|
|
160
|
+
// key to theme grids — so we write in a microtask to land last and win.
|
|
161
|
+
queueMicrotask(() => {
|
|
162
|
+
try {
|
|
163
|
+
localStorage.setItem('luminance', isLight ? 'light' : 'dark');
|
|
164
|
+
}
|
|
165
|
+
catch (_a) {
|
|
166
|
+
/* storage unavailable — best effort */
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
rememberMode(themeKey(theme), mode);
|
|
170
|
+
};
|