@orioncactuscorp/ui 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -26
- package/dist/components/Accordion/Accordion.css +1 -1
- package/dist/components/Accordion/Accordion.js +39 -38
- package/dist/components/Accordion/Accordion.module.scss.js +5 -5
- package/dist/components/ActionArea/ActionArea.css +1 -1
- package/dist/components/ActionArea/ActionArea.js +101 -71
- package/dist/components/Alert/Alert.css +1 -1
- package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
- package/dist/components/Badge/Badge.css +1 -1
- package/dist/components/Badge/Badge.js +69 -25
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/Button/Button.js +27 -27
- package/dist/components/Cell/Cell.css +1 -1
- package/dist/components/Cell/Cell.js +98 -88
- package/dist/components/CheckMark/CheckMark.css +1 -1
- package/dist/components/CheckMark/CheckMark.js +20 -18
- package/dist/components/CheckMark/CheckMark.module.scss.js +7 -3
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.js +10 -8
- package/dist/components/Field/Field.css +1 -1
- package/dist/components/Fieldset/Fieldset.css +1 -1
- package/dist/components/IconButton/IconButton.css +1 -1
- package/dist/components/Interaction/Interaction.css +1 -1
- package/dist/components/Loading/Loading.css +1 -1
- package/dist/components/Menu/Menu.css +1 -1
- package/dist/components/Modal/Modal.css +1 -1
- package/dist/components/Modal/Modal.js +377 -346
- package/dist/components/Modal/useModalDrag.js +654 -614
- package/dist/components/Radio/Radio.css +1 -1
- package/dist/components/Radio/Radio.module.scss.js +9 -7
- package/dist/components/ScrollArea/ScrollArea.css +1 -1
- package/dist/components/SectionHeader/SectionHeader.css +1 -1
- package/dist/components/Select/Select.css +1 -1
- package/dist/components/Select/Select.js +15 -15
- package/dist/components/Select/SelectContent.css +1 -1
- package/dist/components/Switch/Switch.css +1 -1
- package/dist/components/Switch/Switch.module.scss.js +6 -4
- package/dist/components/TextArea/TextArea.css +1 -1
- package/dist/components/TextArea/TextAreaContent.css +1 -1
- package/dist/components/TextButton/TextButton.css +1 -1
- package/dist/components/TextInput/TextInput.css +1 -1
- package/dist/components/TextInput/TextInputContent.css +1 -1
- package/dist/components/Tooltip/Tooltip.css +1 -1
- package/dist/foundations/atomic.css +1 -1
- package/dist/foundations/motion.css +1 -1
- package/dist/foundations/typo.css +1 -1
- package/dist/foundations.css +3 -3
- package/dist/react/motion.js +109 -106
- package/dist/styles.css +31 -31
- package/dist/ui/src/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/ui/src/components/ActionArea/ActionArea.d.ts +1 -1
- package/dist/ui/src/components/ActionArea/ActionArea.d.ts.map +1 -1
- package/dist/ui/src/components/ActionArea/index.d.ts +1 -1
- package/dist/ui/src/components/ActionArea/index.d.ts.map +1 -1
- package/dist/ui/src/components/ActionArea/types.d.ts +2 -2
- package/dist/ui/src/components/ActionArea/types.d.ts.map +1 -1
- package/dist/ui/src/components/Badge/Badge.d.ts +1 -1
- package/dist/ui/src/components/Badge/Badge.d.ts.map +1 -1
- package/dist/ui/src/components/Badge/types.d.ts +19 -2
- package/dist/ui/src/components/Badge/types.d.ts.map +1 -1
- package/dist/ui/src/components/Button/Button.d.ts.map +1 -1
- package/dist/ui/src/components/Cell/Cell.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts +1 -1
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/index.d.ts +1 -1
- package/dist/ui/src/components/CheckMark/index.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/types.d.ts +2 -0
- package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/contexts.d.ts +1 -0
- package/dist/ui/src/components/Modal/contexts.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/types.d.ts +5 -4
- package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
- package/dist/ui/src/index.d.ts +4 -4
- package/dist/ui/src/index.d.ts.map +1 -1
- package/dist/ui/src/react/motion/index.d.ts +9 -8
- package/dist/ui/src/react/motion/index.d.ts.map +1 -1
- package/dist/ui/src/utils/motion.d.ts +15 -14
- package/dist/ui/src/utils/motion.d.ts.map +1 -1
- package/dist/utils/motion.js +282 -183
- package/dist/vscode/oc-ui-vars.css +31 -16
- package/package.json +2 -2
- package/src/scss/foundations/atomic.scss +12 -10
- package/src/scss/foundations/atomic.test.ts +34 -0
- package/src/scss/foundations/motion.scss +30 -16
- package/src/scss/foundations/typo.scss +1 -1
- package/src/scss/index.scss +1 -0
- package/src/scss/mixins/_motion.scss +168 -77
- package/src/scss/mixins/_motion.test.ts +137 -54
- package/src/scss/mixins/_radius.scss +3 -0
- package/src/scss/mixins/_radius.test.ts +52 -0
- package/src/scss/mixins/_typo.scss +2 -2
package/dist/foundations.css
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
:root{--oc-color-theme-static-white: var(--oc-color-global-common-100);--oc-color-theme-static-black: var(--oc-color-global-common-0);--oc-color-theme-static-transparent: var(--oc-color-global-common-transparent);--oc-color-theme-primary-normal: var(--oc-color-global-redOrange-50);--oc-color-theme-label-strong: var(--oc-color-global-common-0);--oc-color-theme-label-normal: var(--oc-color-global-coolNeutral-10);--oc-color-theme-label-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-22), transparent calc(100% - (100% * var(--oc-color-global-opacity-88))));--oc-color-theme-label-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-25), transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));--oc-color-theme-label-assistive: color-mix(in srgb, var(--oc-color-global-coolNeutral-25), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-label-disable: color-mix(in srgb, var(--oc-color-global-coolNeutral-25), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-background-normal-normal: var(--oc-color-global-common-100);--oc-color-theme-background-normal-alternative: var(--oc-color-global-coolNeutral-99);--oc-color-theme-background-elevated-normal: var(--oc-color-global-common-100);--oc-color-theme-background-elevated-alternative: var(--oc-color-global-coolNeutral-99);--oc-color-theme-interaction-inactive: var(--oc-color-global-coolNeutral-70);--oc-color-theme-interaction-disable: var(--oc-color-global-coolNeutral-98);--oc-color-theme-line-normal-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-52))));--oc-color-theme-line-normal-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-22))));--oc-color-theme-line-normal-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-line-normal-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-color-theme-line-solid-strong: var(--oc-color-global-coolNeutral-80);--oc-color-theme-line-solid-normal: var(--oc-color-global-coolNeutral-96);--oc-color-theme-line-solid-neutral: var(--oc-color-global-coolNeutral-97);--oc-color-theme-line-solid-alternative: var(--oc-color-global-coolNeutral-98);--oc-color-theme-fill-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-color-theme-fill-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-fill-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-5))));--oc-color-theme-accent-background-red: var(--oc-color-global-red-50);--oc-color-theme-accent-background-orange: var(--oc-color-global-orange-50);--oc-color-theme-accent-background-lime: var(--oc-color-global-lime-50);--oc-color-theme-accent-background-green: var(--oc-color-global-green-50);--oc-color-theme-accent-background-cyan: var(--oc-color-global-cyan-50);--oc-color-theme-accent-background-lightBlue: var(--oc-color-global-lightBlue-50);--oc-color-theme-accent-background-blue: var(--oc-color-global-blue-50);--oc-color-theme-accent-background-violet: var(--oc-color-global-violet-50);--oc-color-theme-accent-background-purple: var(--oc-color-global-purple-50);--oc-color-theme-accent-background-pink: var(--oc-color-global-pink-50);--oc-color-theme-accent-background-redOrange: var(--oc-color-global-redOrange-50);--oc-color-theme-accent-foreground-red: var(--oc-color-global-red-40);--oc-color-theme-accent-foreground-redOrange: var(--oc-color-global-redOrange-48);--oc-color-theme-accent-foreground-orange: var(--oc-color-global-orange-39);--oc-color-theme-accent-foreground-lime: var(--oc-color-global-lime-37);--oc-color-theme-accent-foreground-green: var(--oc-color-global-green-40);--oc-color-theme-accent-foreground-cyan: var(--oc-color-global-cyan-40);--oc-color-theme-accent-foreground-lightBlue: var(--oc-color-global-lightBlue-40);--oc-color-theme-accent-foreground-blue: var(--oc-color-global-blue-45);--oc-color-theme-accent-foreground-violet: var(--oc-color-global-violet-45);--oc-color-theme-accent-foreground-purple: var(--oc-color-global-purple-40);--oc-color-theme-accent-foreground-pink: var(--oc-color-global-pink-46);--oc-color-theme-status-positive: var(--oc-color-theme-accent-background-green);--oc-color-theme-status-cautionary: var(--oc-color-theme-accent-background-orange);--oc-color-theme-status-negative: var(--oc-color-theme-accent-background-red);--oc-color-theme-inverse-primary: var(--oc-color-global-redOrange-60);--oc-color-theme-inverse-background: var(--oc-color-global-coolNeutral-15);--oc-color-theme-inverse-label: var(--oc-color-global-coolNeutral-99);--oc-color-theme-material-dimmer: color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-52))))}[data-theme=light]{--oc-color-theme-static-white: var(--oc-color-global-common-100);--oc-color-theme-static-black: var(--oc-color-global-common-0);--oc-color-theme-static-transparent: var(--oc-color-global-common-transparent);--oc-color-theme-primary-normal: var(--oc-color-global-redOrange-50);--oc-color-theme-label-strong: var(--oc-color-global-common-0);--oc-color-theme-label-normal: var(--oc-color-global-coolNeutral-10);--oc-color-theme-label-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-22), transparent calc(100% - (100% * var(--oc-color-global-opacity-88))));--oc-color-theme-label-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-25), transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));--oc-color-theme-label-assistive: color-mix(in srgb, var(--oc-color-global-coolNeutral-25), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-label-disable: color-mix(in srgb, var(--oc-color-global-coolNeutral-25), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-background-normal-normal: var(--oc-color-global-common-100);--oc-color-theme-background-normal-alternative: var(--oc-color-global-coolNeutral-99);--oc-color-theme-background-elevated-normal: var(--oc-color-global-common-100);--oc-color-theme-background-elevated-alternative: var(--oc-color-global-coolNeutral-99);--oc-color-theme-interaction-inactive: var(--oc-color-global-coolNeutral-70);--oc-color-theme-interaction-disable: var(--oc-color-global-coolNeutral-98);--oc-color-theme-line-normal-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-52))));--oc-color-theme-line-normal-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-22))));--oc-color-theme-line-normal-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-line-normal-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-color-theme-line-solid-strong: var(--oc-color-global-coolNeutral-80);--oc-color-theme-line-solid-normal: var(--oc-color-global-coolNeutral-96);--oc-color-theme-line-solid-neutral: var(--oc-color-global-coolNeutral-97);--oc-color-theme-line-solid-alternative: var(--oc-color-global-coolNeutral-98);--oc-color-theme-fill-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-color-theme-fill-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-fill-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-5))));--oc-color-theme-accent-background-red: var(--oc-color-global-red-50);--oc-color-theme-accent-background-orange: var(--oc-color-global-orange-50);--oc-color-theme-accent-background-lime: var(--oc-color-global-lime-50);--oc-color-theme-accent-background-green: var(--oc-color-global-green-50);--oc-color-theme-accent-background-cyan: var(--oc-color-global-cyan-50);--oc-color-theme-accent-background-lightBlue: var(--oc-color-global-lightBlue-50);--oc-color-theme-accent-background-blue: var(--oc-color-global-blue-50);--oc-color-theme-accent-background-violet: var(--oc-color-global-violet-50);--oc-color-theme-accent-background-purple: var(--oc-color-global-purple-50);--oc-color-theme-accent-background-pink: var(--oc-color-global-pink-50);--oc-color-theme-accent-background-redOrange: var(--oc-color-global-redOrange-50);--oc-color-theme-accent-foreground-red: var(--oc-color-global-red-40);--oc-color-theme-accent-foreground-redOrange: var(--oc-color-global-redOrange-48);--oc-color-theme-accent-foreground-orange: var(--oc-color-global-orange-39);--oc-color-theme-accent-foreground-lime: var(--oc-color-global-lime-37);--oc-color-theme-accent-foreground-green: var(--oc-color-global-green-40);--oc-color-theme-accent-foreground-cyan: var(--oc-color-global-cyan-40);--oc-color-theme-accent-foreground-lightBlue: var(--oc-color-global-lightBlue-40);--oc-color-theme-accent-foreground-blue: var(--oc-color-global-blue-45);--oc-color-theme-accent-foreground-violet: var(--oc-color-global-violet-45);--oc-color-theme-accent-foreground-purple: var(--oc-color-global-purple-40);--oc-color-theme-accent-foreground-pink: var(--oc-color-global-pink-46);--oc-color-theme-status-positive: var(--oc-color-theme-accent-background-green);--oc-color-theme-status-cautionary: var(--oc-color-theme-accent-background-orange);--oc-color-theme-status-negative: var(--oc-color-theme-accent-background-red);--oc-color-theme-inverse-primary: var(--oc-color-global-redOrange-60);--oc-color-theme-inverse-background: var(--oc-color-global-coolNeutral-15);--oc-color-theme-inverse-label: var(--oc-color-global-coolNeutral-99);--oc-color-theme-material-dimmer: color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-52))))}
|
|
3
3
|
@media(prefers-color-scheme: dark){:root{--oc-color-theme-static-white: var(--oc-color-global-common-100);--oc-color-theme-static-black: var(--oc-color-global-common-0);--oc-color-theme-static-transparent: var(--oc-color-global-common-transparent);--oc-color-theme-primary-normal: var(--oc-color-global-redOrange-60);--oc-color-theme-label-strong: var(--oc-color-global-common-100);--oc-color-theme-label-normal: var(--oc-color-global-coolNeutral-99);--oc-color-theme-label-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-90), transparent calc(100% - (100% * var(--oc-color-global-opacity-88))));--oc-color-theme-label-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-80), transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));--oc-color-theme-label-assistive: color-mix(in srgb, var(--oc-color-global-coolNeutral-80), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-label-disable: color-mix(in srgb, var(--oc-color-global-coolNeutral-70), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-background-normal-normal: var(--oc-color-global-coolNeutral-15);--oc-color-theme-background-normal-alternative: var(--oc-color-global-coolNeutral-5);--oc-color-theme-background-elevated-normal: var(--oc-color-global-coolNeutral-17);--oc-color-theme-background-elevated-alternative: var(--oc-color-global-coolNeutral-7);--oc-color-theme-interaction-inactive: var(--oc-color-global-coolNeutral-40);--oc-color-theme-interaction-disable: var(--oc-color-global-coolNeutral-22);--oc-color-theme-line-normal-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-90), transparent calc(100% - (100% * var(--oc-color-global-opacity-52))));--oc-color-theme-line-normal-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * 0.32)));--oc-color-theme-line-normal-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-line-normal-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-22))));--oc-color-theme-line-solid-strong: var(--oc-color-global-coolNeutral-50);--oc-color-theme-line-solid-normal: var(--oc-color-global-coolNeutral-25);--oc-color-theme-line-solid-neutral: var(--oc-color-global-coolNeutral-23);--oc-color-theme-line-solid-alternative: var(--oc-color-global-coolNeutral-22);--oc-color-theme-fill-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-22))));--oc-color-theme-fill-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-fill-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-12))));--oc-color-theme-accent-background-red: var(--oc-color-global-red-60);--oc-color-theme-accent-background-orange: var(--oc-color-global-orange-60);--oc-color-theme-accent-background-lime: var(--oc-color-global-lime-60);--oc-color-theme-accent-background-green: var(--oc-color-global-green-60);--oc-color-theme-accent-background-cyan: var(--oc-color-global-cyan-60);--oc-color-theme-accent-background-lightBlue: var(--oc-color-global-lightBlue-60);--oc-color-theme-accent-background-blue: var(--oc-color-global-blue-60);--oc-color-theme-accent-background-violet: var(--oc-color-global-violet-60);--oc-color-theme-accent-background-purple: var(--oc-color-global-purple-60);--oc-color-theme-accent-background-pink: var(--oc-color-global-pink-60);--oc-color-theme-accent-background-redOrange: var(--oc-color-global-redOrange-60);--oc-color-theme-accent-foreground-red: var(--oc-color-global-red-60);--oc-color-theme-accent-foreground-redOrange: var(--oc-color-global-redOrange-60);--oc-color-theme-accent-foreground-orange: var(--oc-color-global-orange-50);--oc-color-theme-accent-foreground-lime: var(--oc-color-global-lime-50);--oc-color-theme-accent-foreground-green: var(--oc-color-global-green-60);--oc-color-theme-accent-foreground-cyan: var(--oc-color-global-cyan-50);--oc-color-theme-accent-foreground-lightBlue: var(--oc-color-global-lightBlue-50);--oc-color-theme-accent-foreground-blue: var(--oc-color-global-blue-65);--oc-color-theme-accent-foreground-violet: var(--oc-color-global-violet-70);--oc-color-theme-accent-foreground-purple: var(--oc-color-global-purple-60);--oc-color-theme-accent-foreground-pink: var(--oc-color-global-pink-60);--oc-color-theme-status-positive: var(--oc-color-theme-accent-background-green);--oc-color-theme-status-cautionary: var(--oc-color-theme-accent-background-orange);--oc-color-theme-status-negative: var(--oc-color-theme-accent-background-red);--oc-color-theme-inverse-primary: var(--oc-color-global-redOrange-50);--oc-color-theme-inverse-background: var(--oc-color-global-common-100);--oc-color-theme-inverse-label: var(--oc-color-global-coolNeutral-10);--oc-color-theme-material-dimmer: color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-74))))}}[data-theme=dark]{--oc-color-theme-static-white: var(--oc-color-global-common-100);--oc-color-theme-static-black: var(--oc-color-global-common-0);--oc-color-theme-static-transparent: var(--oc-color-global-common-transparent);--oc-color-theme-primary-normal: var(--oc-color-global-redOrange-60);--oc-color-theme-label-strong: var(--oc-color-global-common-100);--oc-color-theme-label-normal: var(--oc-color-global-coolNeutral-99);--oc-color-theme-label-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-90), transparent calc(100% - (100% * var(--oc-color-global-opacity-88))));--oc-color-theme-label-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-80), transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));--oc-color-theme-label-assistive: color-mix(in srgb, var(--oc-color-global-coolNeutral-80), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-label-disable: color-mix(in srgb, var(--oc-color-global-coolNeutral-70), transparent calc(100% - (100% * var(--oc-color-global-opacity-16))));--oc-color-theme-background-normal-normal: var(--oc-color-global-coolNeutral-15);--oc-color-theme-background-normal-alternative: var(--oc-color-global-coolNeutral-5);--oc-color-theme-background-elevated-normal: var(--oc-color-global-coolNeutral-17);--oc-color-theme-background-elevated-alternative: var(--oc-color-global-coolNeutral-7);--oc-color-theme-interaction-inactive: var(--oc-color-global-coolNeutral-40);--oc-color-theme-interaction-disable: var(--oc-color-global-coolNeutral-22);--oc-color-theme-line-normal-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-90), transparent calc(100% - (100% * var(--oc-color-global-opacity-52))));--oc-color-theme-line-normal-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * 0.32)));--oc-color-theme-line-normal-neutral: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-line-normal-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-22))));--oc-color-theme-line-solid-strong: var(--oc-color-global-coolNeutral-50);--oc-color-theme-line-solid-normal: var(--oc-color-global-coolNeutral-25);--oc-color-theme-line-solid-neutral: var(--oc-color-global-coolNeutral-23);--oc-color-theme-line-solid-alternative: var(--oc-color-global-coolNeutral-22);--oc-color-theme-fill-normal: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-22))));--oc-color-theme-fill-strong: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-28))));--oc-color-theme-fill-alternative: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-12))));--oc-color-theme-accent-background-red: var(--oc-color-global-red-60);--oc-color-theme-accent-background-orange: var(--oc-color-global-orange-60);--oc-color-theme-accent-background-lime: var(--oc-color-global-lime-60);--oc-color-theme-accent-background-green: var(--oc-color-global-green-60);--oc-color-theme-accent-background-cyan: var(--oc-color-global-cyan-60);--oc-color-theme-accent-background-lightBlue: var(--oc-color-global-lightBlue-60);--oc-color-theme-accent-background-blue: var(--oc-color-global-blue-60);--oc-color-theme-accent-background-violet: var(--oc-color-global-violet-60);--oc-color-theme-accent-background-purple: var(--oc-color-global-purple-60);--oc-color-theme-accent-background-pink: var(--oc-color-global-pink-60);--oc-color-theme-accent-background-redOrange: var(--oc-color-global-redOrange-60);--oc-color-theme-accent-foreground-red: var(--oc-color-global-red-60);--oc-color-theme-accent-foreground-redOrange: var(--oc-color-global-redOrange-60);--oc-color-theme-accent-foreground-orange: var(--oc-color-global-orange-50);--oc-color-theme-accent-foreground-lime: var(--oc-color-global-lime-50);--oc-color-theme-accent-foreground-green: var(--oc-color-global-green-60);--oc-color-theme-accent-foreground-cyan: var(--oc-color-global-cyan-50);--oc-color-theme-accent-foreground-lightBlue: var(--oc-color-global-lightBlue-50);--oc-color-theme-accent-foreground-blue: var(--oc-color-global-blue-65);--oc-color-theme-accent-foreground-violet: var(--oc-color-global-violet-70);--oc-color-theme-accent-foreground-purple: var(--oc-color-global-purple-60);--oc-color-theme-accent-foreground-pink: var(--oc-color-global-pink-60);--oc-color-theme-status-positive: var(--oc-color-theme-accent-background-green);--oc-color-theme-status-cautionary: var(--oc-color-theme-accent-background-orange);--oc-color-theme-status-negative: var(--oc-color-theme-accent-background-red);--oc-color-theme-inverse-primary: var(--oc-color-global-redOrange-50);--oc-color-theme-inverse-background: var(--oc-color-global-common-100);--oc-color-theme-inverse-label: var(--oc-color-global-coolNeutral-10);--oc-color-theme-material-dimmer: color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-74))))}
|
|
4
4
|
:root{--oc-breakpoint-sm: 480px;--oc-breakpoint-md: 768px;--oc-breakpoint-lg: 1280px;--oc-breakpoint-xl: 1600px;--oc-breakpoint-hg: 1920px}
|
|
5
|
-
:root{--oc-typo-font-family: system-ui, sans-serif;--oc-typo-scale: 1;--oc-typo-size-display1: 3rem;--oc-typo-size-display2: 2.5rem;--oc-typo-size-display3: 2.25rem;--oc-typo-size-title1: 2rem;--oc-typo-size-title2: 1.75rem;--oc-typo-size-title3: 1.5rem;--oc-typo-size-heading1: 1.375rem;--oc-typo-size-heading2: 1.25rem;--oc-typo-size-headline1: 1.125rem;--oc-typo-size-headline2: 1.0625rem;--oc-typo-size-body1: 1rem;--oc-typo-size-body1reading: 1rem;--oc-typo-size-body2: 0.9375rem;--oc-typo-size-body2reading: 0.9375rem;--oc-typo-size-label1: 0.875rem;--oc-typo-size-label1reading: 0.875rem;--oc-typo-size-label2: 0.8125rem;--oc-typo-size-caption1: 0.75rem;--oc-typo-size-caption2: 0.6875rem}@media screen and (max-width: 768px){:root{--oc-typo-size-body1: clamp(1rem, 17 / 375 * 100vw, 1.0625rem);--oc-typo-size-body1reading: clamp(1rem, 17 / 375 * 100vw, 1.0625rem);--oc-typo-size-body2: clamp(0.9375rem, 16 / 375 * 100vw, 1rem);--oc-typo-size-body2reading: clamp(0.9375rem, 16 / 375 * 100vw, 1rem);--oc-typo-size-label1: clamp(0.875rem, 15 / 375 * 100vw, 0.9375rem);--oc-typo-size-label1reading: clamp(0.875rem, 15 / 375 * 100vw, 0.9375rem);--oc-typo-size-label2: clamp(0.8125rem, 14 / 375 * 100vw, 0.875rem);--oc-typo-size-caption1: clamp(0.75rem, 13 / 375 * 100vw, 0.8125rem);--oc-typo-size-caption2: clamp(0.6875rem, 12 / 375 * 100vw, 0.75rem)}}@media screen and (min-width: 769px){:root{--oc-typo-size-display1: clamp(3rem, 64 / 1280 * 100vw, 4rem);--oc-typo-size-display2: clamp(2.5rem, 48 / 1280 * 100vw, 3rem);--oc-typo-size-display3: clamp(2.25rem, 40 / 1280 * 100vw, 2.5rem);--oc-typo-size-title1: clamp(2rem, 36 / 1280 * 100vw, 2.25rem);--oc-typo-size-title2: clamp(1.75rem, 32 / 1280 * 100vw, 2rem);--oc-typo-size-title3: clamp(1.5rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-size-heading1: clamp(1.375rem, 24 / 1280 * 100vw, 1.5rem);--oc-typo-size-heading2: clamp(1.25rem, 22 / 1280 * 100vw, 1.375rem);--oc-typo-size-headline1: clamp(1.125rem, 20 / 1280 * 100vw, 1.25rem);--oc-typo-size-headline2: clamp(1.0625rem, 18 / 1280 * 100vw, 1.125rem);--oc-typo-size-body1: clamp(1.0625rem, 18 / 1280 * 100vw, 1.125rem);--oc-typo-size-body1reading: clamp(1.0625rem, 18 / 1280 * 100vw, 1.125rem);--oc-typo-size-body2: clamp(1rem, 17 / 1280 * 100vw, 1.0625rem);--oc-typo-size-body2reading: clamp(1rem, 17 / 1280 * 100vw, 1.0625rem);--oc-typo-size-label1: clamp(0.9375rem, 16 / 1280 * 100vw, 1rem);--oc-typo-size-label1reading: clamp(0.9375rem, 16 / 1280 * 100vw, 1rem);--oc-typo-size-label2: clamp(0.875rem, 15 / 1280 * 100vw, 0.9375rem);--oc-typo-size-caption1: clamp(0.8125rem, 14 / 1280 * 100vw, 0.875rem);--oc-typo-size-caption2: clamp(0.75rem, 13 / 1280 * 100vw, 0.8125rem)}}@media screen and (min-width: 1281px){:root{--oc-typo-size-heading1: clamp(1.5rem, 26 / 1600 * 100vw, 1.625rem);--oc-typo-size-heading2: clamp(1.375rem, 24 / 1600 * 100vw, 1.5rem);--oc-typo-size-headline1: clamp(1.25rem, 22 / 1600 * 100vw, 1.375rem);--oc-typo-size-headline2: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem);--oc-typo-size-body1: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem);--oc-typo-size-body1reading: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem);--oc-typo-size-body2: clamp(1.0625rem, 18 / 1600 * 100vw, 1.125rem);--oc-typo-size-body2reading: clamp(1.0625rem, 18 / 1600 * 100vw, 1.125rem);--oc-typo-size-label1: clamp(1rem, 17 / 1600 * 100vw, 1.0625rem);--oc-typo-size-label1reading: clamp(1rem, 17 / 1600 * 100vw, 1.0625rem);--oc-typo-size-label2: clamp(0.9375rem, 16 / 1600 * 100vw, 1rem);--oc-typo-size-caption1: clamp(0.875rem, 15 / 1600 * 100vw, 0.9375rem);--oc-typo-size-caption2: clamp(0.8125rem, 14 / 1600 * 100vw, 0.875rem)}}:root{--oc-typo-height-display1: 3.875rem;--oc-typo-height-display2: 3.25rem;--oc-typo-height-display3: 3rem;--oc-typo-height-title1: 2.75rem;--oc-typo-height-title2: 2.375rem;--oc-typo-height-title3: 2rem;--oc-typo-height-heading1: 1.875rem;--oc-typo-height-heading2: 1.75rem;--oc-typo-height-headline1: 1.625rem;--oc-typo-height-headline2: 1.5rem;--oc-typo-height-body1: 1.5rem;--oc-typo-height-body1reading: 1.625rem;--oc-typo-height-body2: 1.375rem;--oc-typo-height-body2reading: 1.5rem;--oc-typo-height-label1: 1.25rem;--oc-typo-height-label1reading: 1.375rem;--oc-typo-height-label2: 1.125rem;--oc-typo-height-caption1: 1rem;--oc-typo-height-caption2: 0.875rem}@media screen and (max-width: 768px){:root{--oc-typo-height-body1: clamp(1.5rem, 26 / 375 * 100vw, 1.625rem);--oc-typo-height-body1reading: clamp(1.625rem, 28 / 375 * 100vw, 1.75rem);--oc-typo-height-body2: clamp(1.375rem, 24 / 375 * 100vw, 1.5rem);--oc-typo-height-body2reading: clamp(1.5rem, 26 / 375 * 100vw, 1.625rem);--oc-typo-height-label1: clamp(1.25rem, 22 / 375 * 100vw, 1.375rem);--oc-typo-height-label1reading: clamp(1.375rem, 24 / 375 * 100vw, 1.5rem);--oc-typo-height-label2: clamp(1.125rem, 20 / 375 * 100vw, 1.25rem);--oc-typo-height-caption1: clamp(1rem, 18 / 375 * 100vw, 1.125rem);--oc-typo-height-caption2: clamp(0.875rem, 16 / 375 * 100vw, 1rem)}}@media screen and (min-width: 769px){:root{--oc-typo-height-display1: clamp(3.875rem, 82 / 1280 * 100vw, 5.125rem);--oc-typo-height-display2: clamp(3.25rem, 62 / 1280 * 100vw, 3.875rem);--oc-typo-height-display3: clamp(3rem, 52 / 1280 * 100vw, 3.25rem);--oc-typo-height-title1: clamp(2.75rem, 48 / 1280 * 100vw, 3rem);--oc-typo-height-title2: clamp(2.375rem, 42 / 1280 * 100vw, 2.625rem);--oc-typo-height-title3: clamp(2rem, 36 / 1280 * 100vw, 2.25rem);--oc-typo-height-heading1: clamp(1.875rem, 32 / 1280 * 100vw, 2rem);--oc-typo-height-heading2: clamp(1.75rem, 30 / 1280 * 100vw, 1.875rem);--oc-typo-height-headline1: clamp(1.625rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-height-headline2: clamp(1.5rem, 26 / 1280 * 100vw, 1.625rem);--oc-typo-height-body1: clamp(1.625rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-height-body1reading: clamp(1.75rem, 30 / 1280 * 100vw, 1.875rem);--oc-typo-height-body2: clamp(1.5rem, 26 / 1280 * 100vw, 1.625rem);--oc-typo-height-body2reading: clamp(1.625rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-height-label1: clamp(1.375rem, 24 / 1280 * 100vw, 1.5rem);--oc-typo-height-label1reading: clamp(1.5rem, 26 / 1280 * 100vw, 1.625rem);--oc-typo-height-label2: clamp(1.25rem, 22 / 1280 * 100vw, 1.375rem);--oc-typo-height-caption1: clamp(1.125rem, 20 / 1280 * 100vw, 1.25rem);--oc-typo-height-caption2: clamp(1rem, 18 / 1280 * 100vw, 1.125rem)}}@media screen and (min-width: 1281px){:root{--oc-typo-height-heading1: clamp(2rem, 34 / 1600 * 100vw, 2.125rem);--oc-typo-height-heading2: clamp(1.875rem, 32 / 1600 * 100vw, 2rem);--oc-typo-height-headline1: clamp(1.75rem, 30 / 1600 * 100vw, 1.875rem);--oc-typo-height-headline2: clamp(1.625rem, 28 / 1600 * 100vw, 1.75rem);--oc-typo-height-body1: clamp(1.75rem, 30 / 1600 * 100vw, 1.875rem);--oc-typo-height-body1reading: clamp(1.875rem, 32 / 1600 * 100vw, 2rem);--oc-typo-height-body2: clamp(1.625rem, 28 / 1600 * 100vw, 1.75rem);--oc-typo-height-body2reading: clamp(1.75rem, 30 / 1600 * 100vw, 1.875rem);--oc-typo-height-label1: clamp(1.5rem, 26 / 1600 * 100vw, 1.625rem);--oc-typo-height-label1reading: clamp(1.625rem, 28 / 1600 * 100vw, 1.75rem);--oc-typo-height-label2: clamp(1.375rem, 24 / 1600 * 100vw, 1.5rem);--oc-typo-height-caption1: clamp(1.25rem, 22 / 1600 * 100vw, 1.375rem);--oc-typo-height-caption2: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem)}}:root{--oc-typo-spacing-display1: 0em;--oc-typo-spacing-display2: 0em;--oc-typo-spacing-display3: 0em;--oc-typo-spacing-title1: 0em;--oc-typo-spacing-title2: 0em;--oc-typo-spacing-title3: 0em;--oc-typo-spacing-heading1: 0em;--oc-typo-spacing-heading2: 0em;--oc-typo-spacing-headline1: 0em;--oc-typo-spacing-headline2: 0em;--oc-typo-spacing-body1: 0em;--oc-typo-spacing-body1reading: 0em;--oc-typo-spacing-body2: 0em;--oc-typo-spacing-body2reading: 0em;--oc-typo-spacing-label1: 0.01em;--oc-typo-spacing-label1reading: 0.01em;--oc-typo-spacing-label2: 0.01em;--oc-typo-spacing-caption1: 0.01em;--oc-typo-spacing-caption2: 0.01em;--oc-typo-weight-display1-normal: 400;--oc-typo-weight-display1-medium: 500;--oc-typo-weight-display1-bold: 700;--oc-typo-weight-display2-normal: 400;--oc-typo-weight-display2-medium: 500;--oc-typo-weight-display2-bold: 700;--oc-typo-weight-display3-normal: 400;--oc-typo-weight-display3-medium: 500;--oc-typo-weight-display3-bold: 700;--oc-typo-weight-title1-normal: 400;--oc-typo-weight-title1-medium: 500;--oc-typo-weight-title1-bold: 700;--oc-typo-weight-title2-normal: 400;--oc-typo-weight-title2-medium: 500;--oc-typo-weight-title2-bold: 700;--oc-typo-weight-title3-normal: 400;--oc-typo-weight-title3-medium: 500;--oc-typo-weight-title3-bold: 700;--oc-typo-weight-heading1-normal: 400;--oc-typo-weight-heading1-medium: 500;--oc-typo-weight-heading1-bold: 600;--oc-typo-weight-heading2-normal: 400;--oc-typo-weight-heading2-medium: 500;--oc-typo-weight-heading2-bold: 600;--oc-typo-weight-headline1-normal: 400;--oc-typo-weight-headline1-medium: 500;--oc-typo-weight-headline1-bold: 600;--oc-typo-weight-headline2-normal: 400;--oc-typo-weight-headline2-medium: 500;--oc-typo-weight-headline2-bold: 600;--oc-typo-weight-body1-normal: 400;--oc-typo-weight-body1-medium: 500;--oc-typo-weight-body1-bold: 600;--oc-typo-weight-body1reading-normal: 400;--oc-typo-weight-body1reading-medium: 500;--oc-typo-weight-body1reading-bold: 600;--oc-typo-weight-body2-normal: 400;--oc-typo-weight-body2-medium: 500;--oc-typo-weight-body2-bold: 600;--oc-typo-weight-body2reading-normal: 400;--oc-typo-weight-body2reading-medium: 500;--oc-typo-weight-body2reading-bold: 600;--oc-typo-weight-label1-normal: 400;--oc-typo-weight-label1-medium: 500;--oc-typo-weight-label1-bold: 550;--oc-typo-weight-label1reading-normal: 400;--oc-typo-weight-label1reading-medium: 500;--oc-typo-weight-label1reading-bold: 550;--oc-typo-weight-label2-normal: 400;--oc-typo-weight-label2-medium: 500;--oc-typo-weight-label2-bold: 550;--oc-typo-weight-caption1-normal: 400;--oc-typo-weight-caption1-medium: 500;--oc-typo-weight-caption1-bold: 540;--oc-typo-weight-caption2-normal: 400;--oc-typo-weight-caption2-medium: 500;--oc-typo-weight-caption2-bold: 530}
|
|
5
|
+
:root{--oc-typo-font-family: system-ui, sans-serif;--oc-typo-size-factor: 1;--oc-typo-size-display1: 3rem;--oc-typo-size-display2: 2.5rem;--oc-typo-size-display3: 2.25rem;--oc-typo-size-title1: 2rem;--oc-typo-size-title2: 1.75rem;--oc-typo-size-title3: 1.5rem;--oc-typo-size-heading1: 1.375rem;--oc-typo-size-heading2: 1.25rem;--oc-typo-size-headline1: 1.125rem;--oc-typo-size-headline2: 1.0625rem;--oc-typo-size-body1: 1rem;--oc-typo-size-body1reading: 1rem;--oc-typo-size-body2: 0.9375rem;--oc-typo-size-body2reading: 0.9375rem;--oc-typo-size-label1: 0.875rem;--oc-typo-size-label1reading: 0.875rem;--oc-typo-size-label2: 0.8125rem;--oc-typo-size-caption1: 0.75rem;--oc-typo-size-caption2: 0.6875rem}@media screen and (max-width: 768px){:root{--oc-typo-size-body1: clamp(1rem, 17 / 375 * 100vw, 1.0625rem);--oc-typo-size-body1reading: clamp(1rem, 17 / 375 * 100vw, 1.0625rem);--oc-typo-size-body2: clamp(0.9375rem, 16 / 375 * 100vw, 1rem);--oc-typo-size-body2reading: clamp(0.9375rem, 16 / 375 * 100vw, 1rem);--oc-typo-size-label1: clamp(0.875rem, 15 / 375 * 100vw, 0.9375rem);--oc-typo-size-label1reading: clamp(0.875rem, 15 / 375 * 100vw, 0.9375rem);--oc-typo-size-label2: clamp(0.8125rem, 14 / 375 * 100vw, 0.875rem);--oc-typo-size-caption1: clamp(0.75rem, 13 / 375 * 100vw, 0.8125rem);--oc-typo-size-caption2: clamp(0.6875rem, 12 / 375 * 100vw, 0.75rem)}}@media screen and (min-width: 769px){:root{--oc-typo-size-display1: clamp(3rem, 64 / 1280 * 100vw, 4rem);--oc-typo-size-display2: clamp(2.5rem, 48 / 1280 * 100vw, 3rem);--oc-typo-size-display3: clamp(2.25rem, 40 / 1280 * 100vw, 2.5rem);--oc-typo-size-title1: clamp(2rem, 36 / 1280 * 100vw, 2.25rem);--oc-typo-size-title2: clamp(1.75rem, 32 / 1280 * 100vw, 2rem);--oc-typo-size-title3: clamp(1.5rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-size-heading1: clamp(1.375rem, 24 / 1280 * 100vw, 1.5rem);--oc-typo-size-heading2: clamp(1.25rem, 22 / 1280 * 100vw, 1.375rem);--oc-typo-size-headline1: clamp(1.125rem, 20 / 1280 * 100vw, 1.25rem);--oc-typo-size-headline2: clamp(1.0625rem, 18 / 1280 * 100vw, 1.125rem);--oc-typo-size-body1: clamp(1.0625rem, 18 / 1280 * 100vw, 1.125rem);--oc-typo-size-body1reading: clamp(1.0625rem, 18 / 1280 * 100vw, 1.125rem);--oc-typo-size-body2: clamp(1rem, 17 / 1280 * 100vw, 1.0625rem);--oc-typo-size-body2reading: clamp(1rem, 17 / 1280 * 100vw, 1.0625rem);--oc-typo-size-label1: clamp(0.9375rem, 16 / 1280 * 100vw, 1rem);--oc-typo-size-label1reading: clamp(0.9375rem, 16 / 1280 * 100vw, 1rem);--oc-typo-size-label2: clamp(0.875rem, 15 / 1280 * 100vw, 0.9375rem);--oc-typo-size-caption1: clamp(0.8125rem, 14 / 1280 * 100vw, 0.875rem);--oc-typo-size-caption2: clamp(0.75rem, 13 / 1280 * 100vw, 0.8125rem)}}@media screen and (min-width: 1281px){:root{--oc-typo-size-heading1: clamp(1.5rem, 26 / 1600 * 100vw, 1.625rem);--oc-typo-size-heading2: clamp(1.375rem, 24 / 1600 * 100vw, 1.5rem);--oc-typo-size-headline1: clamp(1.25rem, 22 / 1600 * 100vw, 1.375rem);--oc-typo-size-headline2: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem);--oc-typo-size-body1: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem);--oc-typo-size-body1reading: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem);--oc-typo-size-body2: clamp(1.0625rem, 18 / 1600 * 100vw, 1.125rem);--oc-typo-size-body2reading: clamp(1.0625rem, 18 / 1600 * 100vw, 1.125rem);--oc-typo-size-label1: clamp(1rem, 17 / 1600 * 100vw, 1.0625rem);--oc-typo-size-label1reading: clamp(1rem, 17 / 1600 * 100vw, 1.0625rem);--oc-typo-size-label2: clamp(0.9375rem, 16 / 1600 * 100vw, 1rem);--oc-typo-size-caption1: clamp(0.875rem, 15 / 1600 * 100vw, 0.9375rem);--oc-typo-size-caption2: clamp(0.8125rem, 14 / 1600 * 100vw, 0.875rem)}}:root{--oc-typo-height-display1: 3.875rem;--oc-typo-height-display2: 3.25rem;--oc-typo-height-display3: 3rem;--oc-typo-height-title1: 2.75rem;--oc-typo-height-title2: 2.375rem;--oc-typo-height-title3: 2rem;--oc-typo-height-heading1: 1.875rem;--oc-typo-height-heading2: 1.75rem;--oc-typo-height-headline1: 1.625rem;--oc-typo-height-headline2: 1.5rem;--oc-typo-height-body1: 1.5rem;--oc-typo-height-body1reading: 1.625rem;--oc-typo-height-body2: 1.375rem;--oc-typo-height-body2reading: 1.5rem;--oc-typo-height-label1: 1.25rem;--oc-typo-height-label1reading: 1.375rem;--oc-typo-height-label2: 1.125rem;--oc-typo-height-caption1: 1rem;--oc-typo-height-caption2: 0.875rem}@media screen and (max-width: 768px){:root{--oc-typo-height-body1: clamp(1.5rem, 26 / 375 * 100vw, 1.625rem);--oc-typo-height-body1reading: clamp(1.625rem, 28 / 375 * 100vw, 1.75rem);--oc-typo-height-body2: clamp(1.375rem, 24 / 375 * 100vw, 1.5rem);--oc-typo-height-body2reading: clamp(1.5rem, 26 / 375 * 100vw, 1.625rem);--oc-typo-height-label1: clamp(1.25rem, 22 / 375 * 100vw, 1.375rem);--oc-typo-height-label1reading: clamp(1.375rem, 24 / 375 * 100vw, 1.5rem);--oc-typo-height-label2: clamp(1.125rem, 20 / 375 * 100vw, 1.25rem);--oc-typo-height-caption1: clamp(1rem, 18 / 375 * 100vw, 1.125rem);--oc-typo-height-caption2: clamp(0.875rem, 16 / 375 * 100vw, 1rem)}}@media screen and (min-width: 769px){:root{--oc-typo-height-display1: clamp(3.875rem, 82 / 1280 * 100vw, 5.125rem);--oc-typo-height-display2: clamp(3.25rem, 62 / 1280 * 100vw, 3.875rem);--oc-typo-height-display3: clamp(3rem, 52 / 1280 * 100vw, 3.25rem);--oc-typo-height-title1: clamp(2.75rem, 48 / 1280 * 100vw, 3rem);--oc-typo-height-title2: clamp(2.375rem, 42 / 1280 * 100vw, 2.625rem);--oc-typo-height-title3: clamp(2rem, 36 / 1280 * 100vw, 2.25rem);--oc-typo-height-heading1: clamp(1.875rem, 32 / 1280 * 100vw, 2rem);--oc-typo-height-heading2: clamp(1.75rem, 30 / 1280 * 100vw, 1.875rem);--oc-typo-height-headline1: clamp(1.625rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-height-headline2: clamp(1.5rem, 26 / 1280 * 100vw, 1.625rem);--oc-typo-height-body1: clamp(1.625rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-height-body1reading: clamp(1.75rem, 30 / 1280 * 100vw, 1.875rem);--oc-typo-height-body2: clamp(1.5rem, 26 / 1280 * 100vw, 1.625rem);--oc-typo-height-body2reading: clamp(1.625rem, 28 / 1280 * 100vw, 1.75rem);--oc-typo-height-label1: clamp(1.375rem, 24 / 1280 * 100vw, 1.5rem);--oc-typo-height-label1reading: clamp(1.5rem, 26 / 1280 * 100vw, 1.625rem);--oc-typo-height-label2: clamp(1.25rem, 22 / 1280 * 100vw, 1.375rem);--oc-typo-height-caption1: clamp(1.125rem, 20 / 1280 * 100vw, 1.25rem);--oc-typo-height-caption2: clamp(1rem, 18 / 1280 * 100vw, 1.125rem)}}@media screen and (min-width: 1281px){:root{--oc-typo-height-heading1: clamp(2rem, 34 / 1600 * 100vw, 2.125rem);--oc-typo-height-heading2: clamp(1.875rem, 32 / 1600 * 100vw, 2rem);--oc-typo-height-headline1: clamp(1.75rem, 30 / 1600 * 100vw, 1.875rem);--oc-typo-height-headline2: clamp(1.625rem, 28 / 1600 * 100vw, 1.75rem);--oc-typo-height-body1: clamp(1.75rem, 30 / 1600 * 100vw, 1.875rem);--oc-typo-height-body1reading: clamp(1.875rem, 32 / 1600 * 100vw, 2rem);--oc-typo-height-body2: clamp(1.625rem, 28 / 1600 * 100vw, 1.75rem);--oc-typo-height-body2reading: clamp(1.75rem, 30 / 1600 * 100vw, 1.875rem);--oc-typo-height-label1: clamp(1.5rem, 26 / 1600 * 100vw, 1.625rem);--oc-typo-height-label1reading: clamp(1.625rem, 28 / 1600 * 100vw, 1.75rem);--oc-typo-height-label2: clamp(1.375rem, 24 / 1600 * 100vw, 1.5rem);--oc-typo-height-caption1: clamp(1.25rem, 22 / 1600 * 100vw, 1.375rem);--oc-typo-height-caption2: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem)}}:root{--oc-typo-spacing-display1: 0em;--oc-typo-spacing-display2: 0em;--oc-typo-spacing-display3: 0em;--oc-typo-spacing-title1: 0em;--oc-typo-spacing-title2: 0em;--oc-typo-spacing-title3: 0em;--oc-typo-spacing-heading1: 0em;--oc-typo-spacing-heading2: 0em;--oc-typo-spacing-headline1: 0em;--oc-typo-spacing-headline2: 0em;--oc-typo-spacing-body1: 0em;--oc-typo-spacing-body1reading: 0em;--oc-typo-spacing-body2: 0em;--oc-typo-spacing-body2reading: 0em;--oc-typo-spacing-label1: 0.01em;--oc-typo-spacing-label1reading: 0.01em;--oc-typo-spacing-label2: 0.01em;--oc-typo-spacing-caption1: 0.01em;--oc-typo-spacing-caption2: 0.01em;--oc-typo-weight-display1-normal: 400;--oc-typo-weight-display1-medium: 500;--oc-typo-weight-display1-bold: 700;--oc-typo-weight-display2-normal: 400;--oc-typo-weight-display2-medium: 500;--oc-typo-weight-display2-bold: 700;--oc-typo-weight-display3-normal: 400;--oc-typo-weight-display3-medium: 500;--oc-typo-weight-display3-bold: 700;--oc-typo-weight-title1-normal: 400;--oc-typo-weight-title1-medium: 500;--oc-typo-weight-title1-bold: 700;--oc-typo-weight-title2-normal: 400;--oc-typo-weight-title2-medium: 500;--oc-typo-weight-title2-bold: 700;--oc-typo-weight-title3-normal: 400;--oc-typo-weight-title3-medium: 500;--oc-typo-weight-title3-bold: 700;--oc-typo-weight-heading1-normal: 400;--oc-typo-weight-heading1-medium: 500;--oc-typo-weight-heading1-bold: 600;--oc-typo-weight-heading2-normal: 400;--oc-typo-weight-heading2-medium: 500;--oc-typo-weight-heading2-bold: 600;--oc-typo-weight-headline1-normal: 400;--oc-typo-weight-headline1-medium: 500;--oc-typo-weight-headline1-bold: 600;--oc-typo-weight-headline2-normal: 400;--oc-typo-weight-headline2-medium: 500;--oc-typo-weight-headline2-bold: 600;--oc-typo-weight-body1-normal: 400;--oc-typo-weight-body1-medium: 500;--oc-typo-weight-body1-bold: 600;--oc-typo-weight-body1reading-normal: 400;--oc-typo-weight-body1reading-medium: 500;--oc-typo-weight-body1reading-bold: 600;--oc-typo-weight-body2-normal: 400;--oc-typo-weight-body2-medium: 500;--oc-typo-weight-body2-bold: 600;--oc-typo-weight-body2reading-normal: 400;--oc-typo-weight-body2reading-medium: 500;--oc-typo-weight-body2reading-bold: 600;--oc-typo-weight-label1-normal: 400;--oc-typo-weight-label1-medium: 500;--oc-typo-weight-label1-bold: 550;--oc-typo-weight-label1reading-normal: 400;--oc-typo-weight-label1reading-medium: 500;--oc-typo-weight-label1reading-bold: 550;--oc-typo-weight-label2-normal: 400;--oc-typo-weight-label2-medium: 500;--oc-typo-weight-label2-bold: 550;--oc-typo-weight-caption1-normal: 400;--oc-typo-weight-caption1-medium: 500;--oc-typo-weight-caption1-bold: 540;--oc-typo-weight-caption2-normal: 400;--oc-typo-weight-caption2-medium: 500;--oc-typo-weight-caption2-bold: 530}
|
|
6
6
|
:root{--oc-space-section-padding-viewport: var(--oc-space-section-padding-viewport-y) var(--oc-space-section-padding-viewport-x);--oc-space-section-padding-viewport-x-safe-left: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-left));--oc-space-section-padding-viewport-x-safe-right: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-right));--oc-space-section-padding-viewport-y-safe-top: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-top));--oc-space-section-padding-viewport-y-safe-bottom: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-bottom));--oc-space-section-padding-viewport-x: 1rem;--oc-space-section-padding-viewport-y: 1rem;--oc-space-section-gap-section: 3rem;--oc-space-section-gap-xlarge: 2.5rem;--oc-space-section-gap-large: 2rem;--oc-space-section-gap-medium: 1.25rem;--oc-space-item-padding-large: 1.5rem;--oc-space-item-padding-medium: 1.25rem;--oc-space-item-padding-small: 1rem;--oc-space-item-padding-xsmall: 0.75rem;--oc-space-item-padding-mini: 0.5rem;--oc-space-item-padding-tiny: 0.375rem;--oc-space-item-padding-micro: 0.25rem;--oc-space-item-padding-nano: 0.25rem;--oc-space-item-padding-atom: 0.125rem;--oc-space-item-gap-huge: 1.5rem;--oc-space-item-gap-xlarge: 1.25rem;--oc-space-item-gap-large: 1.125rem;--oc-space-item-gap-medium: 1rem;--oc-space-item-gap-small: 0.75rem;--oc-space-item-gap-xsmall: 0.625rem;--oc-space-item-gap-mini: 0.5rem;--oc-space-item-gap-tiny: 0.375rem;--oc-space-item-gap-micro: 0.25rem;--oc-space-item-gap-nano: 0.25rem;--oc-space-item-gap-atom: 0.125rem}@media screen and (max-width: 768px){:root{--oc-space-section-padding-viewport-x: clamp(1.5rem, 32 / 768 * 100vw, 2rem);--oc-space-section-padding-viewport-y: clamp(1rem, 24 / 768 * 100vw, 1.5rem);--oc-space-section-gap-section: clamp(3rem, 72 / 768 * 100vw, 4.5rem);--oc-space-section-gap-xlarge: clamp(2.5rem, 52 / 768 * 100vw, 3.25rem);--oc-space-section-gap-large: clamp(2rem, 40 / 768 * 100vw, 2.5rem);--oc-space-section-gap-medium: clamp(1.25rem, 26 / 768 * 100vw, 1.625rem);--oc-space-item-padding-large: clamp(1.5rem, 28 / 768 * 100vw, 1.75rem);--oc-space-item-padding-medium: clamp(1.25rem, 24 / 768 * 100vw, 1.5rem);--oc-space-item-padding-small: clamp(1rem, 20 / 768 * 100vw, 1.25rem);--oc-space-item-padding-xsmall: clamp(0.75rem, 14 / 768 * 100vw, 0.875rem);--oc-space-item-padding-mini: clamp(0.5rem, 10 / 768 * 100vw, 0.625rem);--oc-space-item-padding-tiny: clamp(0.375rem, 8 / 768 * 100vw, 0.5rem);--oc-space-item-padding-micro: clamp(0.25rem, 6 / 768 * 100vw, 0.375rem);--oc-space-item-gap-huge: clamp(1.5rem, 32 / 768 * 100vw, 2rem);--oc-space-item-gap-xlarge: clamp(1.25rem, 26 / 768 * 100vw, 1.625rem);--oc-space-item-gap-large: clamp(1.125rem, 22 / 768 * 100vw, 1.375rem);--oc-space-item-gap-medium: clamp(1rem, 18 / 768 * 100vw, 1.125rem);--oc-space-item-gap-small: clamp(0.75rem, 14 / 768 * 100vw, 0.875rem);--oc-space-item-gap-xsmall: clamp(0.625rem, 12 / 768 * 100vw, 0.75rem);--oc-space-item-gap-mini: clamp(0.5rem, 10 / 768 * 100vw, 0.625rem);--oc-space-item-gap-tiny: clamp(0.375rem, 8 / 768 * 100vw, 0.5rem);--oc-space-item-gap-micro: clamp(0.25rem, 6 / 768 * 100vw, 0.375rem)}}@media screen and (max-width: 480px){:root{--oc-space-section-padding-viewport-x: clamp(1rem, 24 / 480 * 100vw, 1.5rem)}}@media screen and (min-width: 769px){:root{--oc-space-section-padding-viewport-x: clamp(2rem, 32 / 768 * 100vw, 3rem);--oc-space-section-padding-viewport-y: clamp(1.5rem, 24 / 768 * 100vw, 2rem);--oc-space-section-gap-section: clamp(4.5rem, 96 / 1600 * 100vw, 6rem);--oc-space-section-gap-xlarge: clamp(3.25rem, 64 / 1600 * 100vw, 4rem);--oc-space-section-gap-large: clamp(2.5rem, 48 / 1600 * 100vw, 3rem);--oc-space-section-gap-medium: clamp(1.625rem, 32 / 1600 * 100vw, 2rem);--oc-space-item-padding-large: clamp(1.75rem, 32 / 1600 * 100vw, 2rem);--oc-space-item-padding-medium: clamp(1.5rem, 28 / 1600 * 100vw, 1.75rem);--oc-space-item-padding-small: clamp(1.25rem, 24 / 1600 * 100vw, 1.5rem);--oc-space-item-padding-xsmall: clamp(0.875rem, 16 / 1600 * 100vw, 1rem);--oc-space-item-padding-mini: clamp(0.625rem, 12 / 1600 * 100vw, 0.75rem);--oc-space-item-padding-tiny: 0.5rem;--oc-space-item-padding-micro: 0.375rem;--oc-space-item-gap-huge: clamp(2rem, 40 / 1600 * 100vw, 2.5rem);--oc-space-item-gap-xlarge: clamp(1.625rem, 32 / 1600 * 100vw, 2rem);--oc-space-item-gap-large: clamp(1.375rem, 24 / 1600 * 100vw, 1.5rem);--oc-space-item-gap-medium: clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem);--oc-space-item-gap-small: clamp(0.875rem, 16 / 1600 * 100vw, 1rem);--oc-space-item-gap-xsmall: 0.75rem;--oc-space-item-gap-mini: 0.625rem;--oc-space-item-gap-tiny: 0.5rem;--oc-space-item-gap-micro: 0.375rem}}@media screen and (min-width: 1921px){:root{--oc-space-section-padding-viewport-x: clamp(3rem, 48 / 1920 * 100vw, 4rem);--oc-space-section-padding-viewport-y: clamp(2rem, 32 / 1920 * 100vw, 2.6666666667rem)}}
|
|
7
|
-
:root{--oc-atomic-radius-max: 10000px;--oc-atomic-radius-huge: clamp(1.5rem, 24 / 768 * 100vw, 4rem);--oc-atomic-radius-xlarge: clamp(0.75rem, 12 / 768 * 100vw, 2rem);--oc-atomic-radius-large: clamp(0.75rem, 12 / 768 * 100vw, 1.5rem);--oc-atomic-radius-medium: clamp(0.75rem, 12 / 768 * 100vw, 1rem);--oc-atomic-radius-small: clamp(0.625rem, 10 / 768 * 100vw, 0.75rem);--oc-atomic-radius-xsmall: clamp(0.5rem, 8 / 768 * 100vw, 0.625rem);--oc-atomic-radius-mini: clamp(0.375rem, 6 / 768 * 100vw, 0.5rem);--oc-atomic-radius-tiny: clamp(0.25rem, 4 / 768 * 100vw, 0.375rem);--oc-atomic-radius-micro: 0.25rem;--oc-atomic-width-content: 35em;--oc-atomic-width-section-large: 60rem;--oc-atomic-width-section-medium: 48rem;--oc-atomic-width-section-small: 30rem;--oc-atomic-width-section-xsmall: 24rem;--oc-atomic-blur-normal: 64px;--oc-atomic-blur-compact: 28px;--oc-atomic-shadow-normal-xsmall: 0 1px 4px -1px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * 0.06)));--oc-atomic-shadow-normal-small: 0 2px 6px -1px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-atomic-shadow-normal-medium: 0 4px 12px -2px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-atomic-shadow-normal-large: 0 6px 18px -2px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-atomic-shadow-normal-xlarge: 0 12px 32px -4px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-12))));--oc-atomic-shadow-spread-small: 0 0 32px -2px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * 0.06)));--oc-atomic-shadow-spread-xlarge: 0 12px 160px -4px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * 0.1)))}
|
|
8
|
-
:root{--oc-motion-duration-
|
|
7
|
+
:root{--oc-atomic-radius-factor: 1;--oc-atomic-radius-max: max(0px, 10000px * var(--oc-atomic-radius-factor));--oc-atomic-radius-huge: max(0px, clamp(1.5rem, 24 / 768 * 100vw, 4rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-xlarge: max(0px, clamp(0.75rem, 12 / 768 * 100vw, 2rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-large: max(0px, clamp(0.75rem, 12 / 768 * 100vw, 1.5rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-medium: max(0px, clamp(0.75rem, 12 / 768 * 100vw, 1rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-small: max(0px, clamp(0.625rem, 10 / 768 * 100vw, 0.75rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-xsmall: max(0px, clamp(0.5rem, 8 / 768 * 100vw, 0.625rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-mini: max(0px, clamp(0.375rem, 6 / 768 * 100vw, 0.5rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-tiny: max(0px, clamp(0.25rem, 4 / 768 * 100vw, 0.375rem) * var(--oc-atomic-radius-factor));--oc-atomic-radius-micro: max(0px, 0.25rem * var(--oc-atomic-radius-factor));--oc-atomic-width-content: 35em;--oc-atomic-width-section-large: 60rem;--oc-atomic-width-section-medium: 48rem;--oc-atomic-width-section-small: 30rem;--oc-atomic-width-section-xsmall: 24rem;--oc-atomic-blur-normal: 64px;--oc-atomic-blur-compact: 28px;--oc-atomic-shadow-normal-xsmall: 0 1px 4px -1px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * 0.06)));--oc-atomic-shadow-normal-small: 0 2px 6px -1px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-atomic-shadow-normal-medium: 0 4px 12px -2px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-atomic-shadow-normal-large: 0 6px 18px -2px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))));--oc-atomic-shadow-normal-xlarge: 0 12px 32px -4px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * var(--oc-color-global-opacity-12))));--oc-atomic-shadow-spread-small: 0 0 32px -2px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * 0.06)));--oc-atomic-shadow-spread-xlarge: 0 12px 160px -4px color-mix(in srgb, var(--oc-color-global-coolNeutral-10), transparent calc(100% - (100% * 0.1)))}
|
|
8
|
+
:root{--oc-motion-duration-factor: 1;--oc-motion-duration-factor-reduced: 0.75;--oc-motion-duration-factor-preserve: 1;--oc-motion-scale-factor: 1;--oc-motion-scale-factor-feedback: var(--oc-motion-scale-factor);--oc-motion-scale-factor-spatial: var(--oc-motion-scale-factor);--oc-motion-distance-factor: 1;--oc-motion-distance-factor-reject: var(--oc-motion-distance-factor);--oc-motion-distance-factor-spatial: var(--oc-motion-distance-factor);--oc-motion-pace-quick: 0.75;--oc-motion-pace-normal: 1;--oc-motion-pace-slow: 1.35;--oc-motion-duration-feedback: 0.2s;--oc-motion-duration-reject: 0.598s;--oc-motion-duration-disclosure: 0.2s;--oc-motion-duration-disclosure-exit: 0.14s;--oc-motion-duration-surface: 0.26s;--oc-motion-duration-surface-exit: 0.24s;--oc-motion-duration-sheet: 0.26s;--oc-motion-duration-sheet-exit: 0.33s;--oc-motion-duration-sheet-release: 0.33s;--oc-motion-duration-expand: 0.3s;--oc-motion-duration-expand-exit: 0.24s;--oc-motion-duration-move: 0.3s;--oc-motion-duration-gesture: 0.2s;--oc-motion-duration-gesture-release: 0.52s;--oc-motion-duration-ambient: 1.2s;--oc-motion-timing-feedback: ease;--oc-motion-timing-reject: linear(0 0%, 0.0149 1.56%, 0.0529 3.13%, 0.1059 4.69%, 0.1677 6.25%, 0.2339 7.81%, 0.3013 9.38%, 0.3676 10.94%, 0.4313 12.5%, 0.4914 14.06%, 0.5474 15.63%, 0.5989 17.19%, 0.6458 18.75%, 0.6883 20.31%, 0.7265 21.88%, 0.7606 23.44%, 0.791 25%, 0.8179 26.56%, 0.8417 28.13%, 0.8626 29.69%, 0.881 31.25%, 0.897 32.81%, 0.911 34.38%, 0.9233 35.94%, 0.9339 37.5%, 0.9431 39.06%, 0.9511 40.63%, 0.958 42.19%, 0.9639 43.75%, 0.9691 45.31%, 0.9735 46.88%, 0.9773 48.44%, 0.9806 50%, 0.9834 51.56%, 0.9859 53.13%, 0.9879 54.69%, 0.9897 56.25%, 0.9912 57.81%, 0.9925 59.38%, 0.9936 60.94%, 0.9946 62.5%, 0.9954 64.06%, 0.9961 65.63%, 0.9967 67.19%, 0.9972 68.75%, 0.9976 70.31%, 0.998 71.88%, 0.9983 73.44%, 0.9985 75%, 0.9988 76.56%, 0.9989 78.13%, 0.9991 79.69%, 0.9992 81.25%, 0.9994 82.81%, 0.9995 84.38%, 0.9995 85.94%, 0.9996 87.5%, 0.9997 89.06%, 0.9997 90.63%, 0.9998 92.19%, 0.9998 93.75%, 0.9998 95.31%, 0.9999 96.88%, 0.9999 98.44%, 1 100%);--oc-motion-timing-disclosure: ease;--oc-motion-timing-disclosure-exit: cubic-bezier(0.8, 0, 1, 1);--oc-motion-timing-surface: ease;--oc-motion-timing-surface-exit: ease-in;--oc-motion-timing-sheet: ease;--oc-motion-timing-sheet-exit: ease-in;--oc-motion-timing-sheet-release: ease;--oc-motion-timing-expand: ease;--oc-motion-timing-expand-exit: ease-in;--oc-motion-timing-move: cubic-bezier(0.32, 0.72, 0, 1);--oc-motion-timing-gesture: ease;--oc-motion-timing-gesture-release: cubic-bezier(0.32, 0.72, 0, 1);--oc-motion-timing-ambient: linear;--oc-spring-smooth-timing: linear(0 0%, 0.0149 1.56%, 0.053 3.13%, 0.106 4.69%, 0.1678 6.25%, 0.2341 7.81%, 0.3015 9.38%, 0.3679 10.94%, 0.4316 12.5%, 0.4918 14.06%, 0.5477 15.63%, 0.5992 17.19%, 0.6462 18.75%, 0.6886 20.31%, 0.7268 21.88%, 0.7609 23.44%, 0.7913 25%, 0.8182 26.56%, 0.842 28.13%, 0.8629 29.69%, 0.8812 31.25%, 0.8972 32.81%, 0.9112 34.38%, 0.9234 35.94%, 0.934 37.5%, 0.9432 39.06%, 0.9512 40.63%, 0.9581 42.19%, 0.964 43.75%, 0.9692 45.31%, 0.9736 46.88%, 0.9774 48.44%, 0.9807 50%, 0.9835 51.56%, 0.9859 53.13%, 0.988 54.69%, 0.9897 56.25%, 0.9913 57.81%, 0.9926 59.38%, 0.9937 60.94%, 0.9946 62.5%, 0.9954 64.06%, 0.9961 65.63%, 0.9967 67.19%, 0.9972 68.75%, 0.9976 70.31%, 0.998 71.88%, 0.9983 73.44%, 0.9985 75%, 0.9988 76.56%, 0.999 78.13%, 0.9991 79.69%, 0.9992 81.25%, 0.9994 82.81%, 0.9995 84.38%, 0.9995 85.94%, 0.9996 87.5%, 0.9997 89.06%, 0.9997 90.63%, 0.9998 92.19%, 0.9998 93.75%, 0.9998 95.31%, 0.9999 96.88%, 0.9999 98.44%, 1 100%);--oc-spring-smooth-duration-scale: 1.87;--oc-spring-snappy-timing: linear(0 0%, 0.0117 1.56%, 0.0427 3.13%, 0.0878 4.69%, 0.1425 6.25%, 0.2034 7.81%, 0.2676 9.38%, 0.3329 10.94%, 0.3975 12.5%, 0.4603 14.06%, 0.5202 15.63%, 0.5765 17.19%, 0.6289 18.75%, 0.6771 20.31%, 0.7211 21.88%, 0.7608 23.44%, 0.7964 25%, 0.8281 26.56%, 0.8561 28.13%, 0.8807 29.69%, 0.902 31.25%, 0.9205 32.81%, 0.9363 34.38%, 0.9498 35.94%, 0.9612 37.5%, 0.9708 39.06%, 0.9787 40.63%, 0.9853 42.19%, 0.9905 43.75%, 0.9948 45.31%, 0.9981 46.88%, 1.0007 48.44%, 1.0027 50%, 1.0041 51.56%, 1.0051 53.13%, 1.0058 54.69%, 1.0061 56.25%, 1.0063 57.81%, 1.0062 59.38%, 1.0061 60.94%, 1.0058 62.5%, 1.0055 64.06%, 1.0051 65.63%, 1.0047 67.19%, 1.0043 68.75%, 1.0039 70.31%, 1.0035 71.88%, 1.0031 73.44%, 1.0028 75%, 1.0024 76.56%, 1.0021 78.13%, 1.0018 79.69%, 1.0016 81.25%, 1.0013 82.81%, 1.0011 84.38%, 1.0009 85.94%, 1.0008 87.5%, 1.0007 89.06%, 1.0005 90.63%, 1.0004 92.19%, 1.0003 93.75%, 1.0003 95.31%, 1.0002 96.88%, 1.0001 98.44%, 1 100%);--oc-spring-snappy-duration-scale: 1.63;--oc-spring-bouncy-timing: linear(0 0%, 0.0154 1.56%, 0.0563 3.13%, 0.1157 4.69%, 0.1878 6.25%, 0.2675 7.81%, 0.3508 9.38%, 0.4343 10.94%, 0.5157 12.5%, 0.5929 14.06%, 0.6647 15.63%, 0.7301 17.19%, 0.7887 18.75%, 0.8403 20.31%, 0.8849 21.88%, 0.9228 23.44%, 0.9545 25%, 0.9803 26.56%, 1.0009 28.13%, 1.0168 29.69%, 1.0286 31.25%, 1.0369 32.81%, 1.0422 34.38%, 1.0451 35.94%, 1.046 37.5%, 1.0453 39.06%, 1.0435 40.63%, 1.0408 42.19%, 1.0375 43.75%, 1.0338 45.31%, 1.03 46.88%, 1.0262 48.44%, 1.0224 50%, 1.0189 51.56%, 1.0155 53.13%, 1.0125 54.69%, 1.0098 56.25%, 1.0074 57.81%, 1.0054 59.38%, 1.0036 60.94%, 1.0021 62.5%, 1.0009 64.06%, 1 65.63%, 0.9993 67.19%, 0.9987 68.75%, 0.9983 70.31%, 0.9981 71.88%, 0.9979 73.44%, 0.9979 75%, 0.9979 76.56%, 0.998 78.13%, 0.9981 79.69%, 0.9983 81.25%, 0.9984 82.81%, 0.9986 84.38%, 0.9988 85.94%, 0.999 87.5%, 0.9991 89.06%, 0.9993 90.63%, 0.9994 92.19%, 0.9995 93.75%, 0.9997 95.31%, 0.9997 96.88%, 0.9998 98.44%, 1 100%);--oc-spring-bouncy-duration-scale: 1.864}@media(prefers-reduced-motion: reduce){:root{--oc-motion-duration-factor: var(--oc-motion-duration-factor-reduced)}}
|
|
9
9
|
:root{--oc-zindex-0: -1;--oc-zindex-1: 0;--oc-zindex-2: 10;--oc-zindex-3: 1000;--oc-zindex-4: 1400;--oc-zindex-5: 1800}
|
|
10
10
|
}@layer oc-reset{*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{min-height:100dvh}body,h1,h2,h3,h4,h5,h6,p,ul,figure,blockquote,dl,dd,input{margin:0}h1,h2,h3,h4,h5,h6,input,button,textarea,select,label{font:inherit}h1,h2,h3,h4,h5,h6{text-wrap:balance}ul,ol{list-style:none;padding:0}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}a:visited{color:currentColor}img,picture{max-width:100%;display:block;object-fit:cover}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}svg{fill:currentColor;stroke:rgba(0,0,0,0)}textarea,button{padding:0;appearance:none}button:focus-visible{outline:none}textarea,input[type=text]{color:currentColor;background-color:rgba(0,0,0,0)}input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button{background-color:currentColor}iframe,textarea,button{border:none}
|
|
11
11
|
}
|
package/dist/react/motion.js
CHANGED
|
@@ -1,170 +1,173 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { createSpringAnimator as
|
|
5
|
-
import { resolveOcMotion as
|
|
6
|
-
const
|
|
7
|
-
function
|
|
2
|
+
import { jsx as H } from "react/jsx-runtime";
|
|
3
|
+
import { useRef as s, useState as C, useCallback as j, useEffect as y, useLayoutEffect as ct } from "react";
|
|
4
|
+
import { createSpringAnimator as st } from "../utils/spring/animator.js";
|
|
5
|
+
import { resolveOcMotion as it } from "../utils/motion.js";
|
|
6
|
+
const T = "block-size";
|
|
7
|
+
function at(t, n) {
|
|
8
8
|
typeof t == "function" ? t(n) : t && (t.current = n);
|
|
9
9
|
}
|
|
10
|
-
function
|
|
11
|
-
const n =
|
|
10
|
+
function q(t) {
|
|
11
|
+
const n = s(t);
|
|
12
12
|
return y(() => {
|
|
13
13
|
n.current = t;
|
|
14
14
|
}, [t]), n;
|
|
15
15
|
}
|
|
16
|
-
function
|
|
17
|
-
const [t, n] =
|
|
16
|
+
function ut() {
|
|
17
|
+
const [t, n] = C(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
|
|
18
18
|
return y(() => {
|
|
19
19
|
if (typeof window > "u" || !window.matchMedia) return;
|
|
20
|
-
const
|
|
21
|
-
return
|
|
20
|
+
const r = window.matchMedia("(prefers-reduced-motion: reduce)"), c = () => n(r.matches);
|
|
21
|
+
return c(), r.addEventListener("change", c), () => r.removeEventListener("change", c);
|
|
22
22
|
}, []), t;
|
|
23
23
|
}
|
|
24
|
-
function
|
|
24
|
+
function lt(t) {
|
|
25
25
|
if (!t) return 0;
|
|
26
26
|
const n = t.getBoundingClientRect().height;
|
|
27
27
|
return Math.max(0, n || t.scrollHeight);
|
|
28
28
|
}
|
|
29
|
-
function
|
|
29
|
+
function dt(t) {
|
|
30
30
|
return t ? Math.max(0, t.getBoundingClientRect().height) : 0;
|
|
31
31
|
}
|
|
32
|
-
function
|
|
32
|
+
function V(t) {
|
|
33
33
|
return `${Math.max(0, t).toFixed(3)}px`;
|
|
34
34
|
}
|
|
35
|
-
function
|
|
36
|
-
const
|
|
37
|
-
(
|
|
38
|
-
u.current !==
|
|
35
|
+
function ft(t, n) {
|
|
36
|
+
const r = q(n), [c, d] = C(t), u = s(t), f = j(
|
|
37
|
+
(i) => {
|
|
38
|
+
u.current !== i && (u.current = i, d(i), r.current?.(i));
|
|
39
39
|
},
|
|
40
|
-
[
|
|
40
|
+
[r]
|
|
41
41
|
);
|
|
42
|
-
return { motionState:
|
|
42
|
+
return { motionState: c, setMotionState: f };
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function St({
|
|
45
45
|
children: t,
|
|
46
46
|
className: n = "",
|
|
47
|
-
contentProps:
|
|
48
|
-
disableAnimation:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
47
|
+
contentProps: r,
|
|
48
|
+
disableAnimation: c = !1,
|
|
49
|
+
durationFactor: d = 1,
|
|
50
|
+
extraBounce: u,
|
|
51
|
+
enterPhase: f = "enter",
|
|
52
|
+
exitPhase: i = "exit",
|
|
53
|
+
forceMount: l = !1,
|
|
54
|
+
intent: R = "expand",
|
|
55
|
+
onExitComplete: A,
|
|
56
|
+
onMotionStateChange: U,
|
|
56
57
|
open: o,
|
|
57
|
-
pace:
|
|
58
|
-
reduced:
|
|
59
|
-
ref:
|
|
60
|
-
scheduler:
|
|
61
|
-
style:
|
|
62
|
-
"data-oc-component":
|
|
63
|
-
|
|
58
|
+
pace: z = "normal",
|
|
59
|
+
reduced: b = "auto",
|
|
60
|
+
ref: W,
|
|
61
|
+
scheduler: x,
|
|
62
|
+
style: Y,
|
|
63
|
+
"data-oc-component": _ = "motion-expand",
|
|
64
|
+
...$
|
|
64
65
|
}) {
|
|
65
|
-
const L =
|
|
66
|
+
const L = s(null), E = s(null), a = s(null), D = s(o || l), B = s(!1), g = ut(), [m, F] = C(() => o || l), S = s(m), I = q(A), { motionState: G, setMotionState: h } = ft(
|
|
66
67
|
o ? "open" : "closed",
|
|
67
|
-
|
|
68
|
+
U
|
|
68
69
|
), {
|
|
69
|
-
className:
|
|
70
|
-
style:
|
|
71
|
-
"data-oc-part":
|
|
72
|
-
...
|
|
73
|
-
} =
|
|
74
|
-
...
|
|
70
|
+
className: J = "",
|
|
71
|
+
style: K,
|
|
72
|
+
"data-oc-part": Q = "content",
|
|
73
|
+
...X
|
|
74
|
+
} = r ?? {}, w = o || m || l, Z = {
|
|
75
|
+
...Y,
|
|
75
76
|
overflow: "hidden"
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
}, []),
|
|
79
|
-
L.current = e,
|
|
77
|
+
}, p = j((e) => {
|
|
78
|
+
S.current = e, F(e);
|
|
79
|
+
}, []), tt = (e) => {
|
|
80
|
+
L.current = e, at(W, e);
|
|
80
81
|
};
|
|
81
82
|
return y(() => {
|
|
82
|
-
|
|
83
|
-
}, [
|
|
83
|
+
S.current = m;
|
|
84
|
+
}, [m]), y(
|
|
84
85
|
() => () => {
|
|
85
86
|
a.current?.destroy(), a.current = null;
|
|
86
87
|
},
|
|
87
88
|
[]
|
|
88
|
-
),
|
|
89
|
-
if (!
|
|
90
|
-
const e = L.current,
|
|
91
|
-
if (!e || !
|
|
92
|
-
const
|
|
89
|
+
), ct(() => {
|
|
90
|
+
if (!w) return;
|
|
91
|
+
const e = L.current, O = E.current;
|
|
92
|
+
if (!e || !O) return;
|
|
93
|
+
const et = S.current, P = o ? lt(O) : 0, N = it({
|
|
93
94
|
element: e,
|
|
94
95
|
intent: R,
|
|
95
|
-
phase: o ?
|
|
96
|
-
pace:
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
96
|
+
phase: o ? f : i,
|
|
97
|
+
pace: z,
|
|
98
|
+
durationFactor: d,
|
|
99
|
+
extraBounce: u,
|
|
100
|
+
reduced: b,
|
|
101
|
+
reducedMotion: g,
|
|
102
|
+
property: T
|
|
103
|
+
}), nt = !B.current && D.current, ot = !c && !nt && N.animate, M = () => {
|
|
102
104
|
if (e.style.willChange = "", o) {
|
|
103
|
-
e.style.blockSize = "auto",
|
|
105
|
+
e.style.blockSize = "auto", h("open"), p(!0);
|
|
104
106
|
return;
|
|
105
107
|
}
|
|
106
|
-
e.style.blockSize = "0px",
|
|
108
|
+
e.style.blockSize = "0px", h("closed"), l || p(!1), I.current?.();
|
|
107
109
|
};
|
|
108
|
-
if (a.current?.destroy(), a.current = null, o && !
|
|
109
|
-
|
|
110
|
+
if (a.current?.destroy(), a.current = null, o && !et && (e.style.blockSize = "0px", p(!0)), B.current = !0, !ot) {
|
|
111
|
+
M();
|
|
110
112
|
return;
|
|
111
113
|
}
|
|
112
|
-
const
|
|
113
|
-
if (Math.abs(
|
|
114
|
-
|
|
114
|
+
const v = dt(e);
|
|
115
|
+
if (Math.abs(v - P) < 0.5) {
|
|
116
|
+
M();
|
|
115
117
|
return;
|
|
116
118
|
}
|
|
117
|
-
e.style.blockSize =
|
|
118
|
-
const
|
|
119
|
-
value:
|
|
120
|
-
target:
|
|
121
|
-
spring:
|
|
122
|
-
scheduler:
|
|
119
|
+
e.style.blockSize = V(v), e.style.willChange = T, h(o ? "opening" : "closing");
|
|
120
|
+
const k = st({
|
|
121
|
+
value: v,
|
|
122
|
+
target: P,
|
|
123
|
+
spring: N.spring,
|
|
124
|
+
scheduler: x,
|
|
123
125
|
stabilityWindow: 0.02,
|
|
124
|
-
onUpdate: (
|
|
125
|
-
e.style.blockSize =
|
|
126
|
+
onUpdate: (rt) => {
|
|
127
|
+
e.style.blockSize = V(rt);
|
|
126
128
|
},
|
|
127
|
-
onComplete:
|
|
129
|
+
onComplete: M
|
|
128
130
|
});
|
|
129
|
-
return a.current =
|
|
130
|
-
a.current ===
|
|
131
|
+
return a.current = k, () => {
|
|
132
|
+
a.current === k && (k.destroy(), a.current = null);
|
|
131
133
|
};
|
|
132
134
|
}, [
|
|
133
|
-
|
|
134
|
-
l,
|
|
135
|
-
u,
|
|
135
|
+
c,
|
|
136
136
|
d,
|
|
137
|
-
|
|
137
|
+
u,
|
|
138
|
+
f,
|
|
139
|
+
i,
|
|
140
|
+
l,
|
|
138
141
|
R,
|
|
139
|
-
|
|
142
|
+
I,
|
|
140
143
|
o,
|
|
141
|
-
C,
|
|
142
144
|
z,
|
|
143
|
-
p,
|
|
144
145
|
b,
|
|
146
|
+
g,
|
|
147
|
+
x,
|
|
148
|
+
p,
|
|
145
149
|
h,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
]), v ? /* @__PURE__ */ N(
|
|
150
|
+
w
|
|
151
|
+
]), w ? /* @__PURE__ */ H(
|
|
149
152
|
"div",
|
|
150
153
|
{
|
|
151
|
-
|
|
152
|
-
ref:
|
|
154
|
+
...$,
|
|
155
|
+
ref: tt,
|
|
153
156
|
className: n,
|
|
154
|
-
style:
|
|
155
|
-
"data-oc-component":
|
|
157
|
+
style: Z,
|
|
158
|
+
"data-oc-component": _,
|
|
156
159
|
"data-oc-motion-intent": R,
|
|
157
|
-
"data-oc-motion-state":
|
|
158
|
-
"data-oc-reduced-motion":
|
|
160
|
+
"data-oc-motion-state": G,
|
|
161
|
+
"data-oc-reduced-motion": g ? "true" : void 0,
|
|
159
162
|
"data-oc-state": o ? "open" : "closed",
|
|
160
|
-
children: /* @__PURE__ */
|
|
163
|
+
children: /* @__PURE__ */ H(
|
|
161
164
|
"div",
|
|
162
165
|
{
|
|
163
|
-
...
|
|
164
|
-
ref:
|
|
165
|
-
className:
|
|
166
|
-
style:
|
|
167
|
-
"data-oc-part":
|
|
166
|
+
...X,
|
|
167
|
+
ref: E,
|
|
168
|
+
className: J,
|
|
169
|
+
style: K,
|
|
170
|
+
"data-oc-part": Q,
|
|
168
171
|
children: t
|
|
169
172
|
}
|
|
170
173
|
)
|
|
@@ -172,6 +175,6 @@ function gt({
|
|
|
172
175
|
) : null;
|
|
173
176
|
}
|
|
174
177
|
export {
|
|
175
|
-
|
|
176
|
-
|
|
178
|
+
St as MotionExpand,
|
|
179
|
+
St as default
|
|
177
180
|
};
|