@codecademy/tracking 1.0.47-alpha.bb342ef631.0 → 1.0.47-alpha.e20784d4b0.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.
|
@@ -32,4 +32,4 @@ export const initializeFides = () => {
|
|
|
32
32
|
|
|
33
33
|
// For now, these three values duplicate theme colors from gamut-styles
|
|
34
34
|
// We don't want to take a full dependency on that package here...
|
|
35
|
-
const rawStyles = "\n:root {\n /* Colors */\n\n --fides-overlay-primary-color: ".concat(theme.colors.hyper, ";\n --fides-overlay-body-font-color: #484848;\n\n /* Buttons */\n\n --fides-overlay-primary-button-background-hover-color: ").concat(theme.colors.hyper, ";\n\n /* Toggles */\n --fides-overlay-primary-active-color: var(--fides-overlay-primary-color);\n --fides-overlay-primary-active-disabled-color: #bda4f7;\n --fides-overlay-inactive-color: #cbd5e0;\n --fides-overlay-disabled-color: #e1e7ee;\n\n /* Everything else */\n --fides-overlay-button-border-radius: ").concat(theme.borderRadii.md, ";\n --fides-overlay-font-family: inherit;\n --fides-overlay-font-size-body: 0.875rem !important;\n --fides-overlay-line-height: 1.375rem !important;\n --fides-overlay-padding: padding: 1rem !important;\n --fides-overlay-padding: 0.875rem 1rem !important;\n}\n\n.fides-banner, .fides-modal-container {\n -webkit-font-smoothing: auto;\n}\n\ndiv#fides-overlay {\n font-size: var(--fides-overlay-font-size-body);\n line-height: var(--fides-overlay-line-height);\n z-index: 1000;\n position: fixed;\n white-space: pre-line;\n font-family: inherit;\n\n /* CSS reset values, adapted from https://www.joshwcomeau.com/css/custom-css-reset/ */\n line-height: calc(1em + 0.4rem);\n -webkit-font-smoothing: auto;\n z-index: 9948031 !important\n}\n\n#fides-modal-link {\n cursor: pointer;\n display: none;\n}\n\n#fides-modal .fides-notice-toggle-title:hover {\n background-color: ").concat(theme.colors.white, " !important\n}\n\n#fides-modal .fides-modal-content {\n background-color: ").concat(theme.colors.white, " !important;\n border:0;\n font-size: 14px;\n line-height: 1.4;\n}\n\n.fides-modal-description a:focus {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n.fides-notice-toggle-title a:focus {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n#fides-modal .fides-notice-toggle, #fides-modal fides-notice-toggle-expanded {\n background-color: ").concat(theme.colors.white, " !important;\n}\n\n#fides-modal .fides-banner-button-secondary.fides-save-button {\n color: var(--fides-overlay-primary-button-background-color) !important;\n}\n\n\n#fides-modal .fides-modal-footer {\n background-color: ").concat(theme.colors.white, "\n}\n\n#fides-modal .fides-toggle-display {\n color: transparent;\n padding: 0;\n padding-block: 2px;\n --offset: 0.2em !important;\n --diameter: 1.2em !important;\n background-color: #828285\n}\n\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n background-color: var(--fides-overlay-primary-active-color) !important;\n}\n\n#fides-modal .fides-divider {\n display: none !important\n}\n\n#fides-modal .fides-modal-title {\n text-align: left !important;\n}\n\ndiv#fides-banner-container {\n bottom: 0 !important;\n left: 0 !important;\n}\n\ndiv#fides-banner-container button.fides-banner-button {\n font-size: 16px !important;\n}\n\ndiv#fides-banner {\n line-height: var(--fides-overlay-line-height);\n color: var(--fides-overlay-body-font-color) !important;\n width: 100% !important;\n overflow-y: hidden;\n border: 0 !important;\n box-shadow: 0 0 18px rgba(0, 0, 0, 0.2) !important;\n background-color: ").concat(theme.colors.white, ";\n -webkit-font-smoothing: auto;\n bottom: 1px;\n}\n\ndiv#fides-banner:focus {\n outline: 1px solid ").concat(theme.colors.black, " !important\n}\n\ndiv#fides-banner-inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 1436px;\n margin: 0 auto;\n row-gap: 16px;\n row-gap: unset !important\n}\n\n/* Responsive banner */\n\ndiv#fides-banner-description {\n margin-top: 0;\n margin-bottom: 10px;\n}\n\ndiv#fides-banner-description span {\n line-height: 1.375rem !important;\n}\n\ndiv#fides-banner-description > div {\n text-align: center;\n}\n\ndiv#fides-banner-description > div a {\n font-weight: bold;\n}\n\ndiv#fides-button-group {\n justify-content: center;\n gap: 2em;\n background-color: transparent;\n}\n\n\n#fides-banner div#fides-button-group {\n margin-top: 0.5em;\n display: flex;\n display: flex;\n justify-content: center;\n background-color: transparent;\n gap: 16px !important;\n}\n\ndiv#fides-button-group .fides-banner-secondary-actions > button {\n cursor: pointer;\n text-decoration: none;\n font-weight: bold;\n padding: 10px 16px !important\n padding-top: 3px !important;\n margin-top: 0;\n border: 1px solid var(--fides-overlay-primary-color);\n border-radius: 2px;\n box-sizing: border-box;\n}\n\n#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n margin-right: 0px !important;\n}\n\n.fides-modal-footer div#fides-button-group {\n width: 100% !important\n}\n\n#fides-modal .fides-modal-button-group.fides-modal-primary-actions {\n margin-left: 0 !important;\n}\n\n.fides-gpc-label {\n display: none !important;\n}\n\nbutton.fides-banner-button.fides-banner-button-tertiary {\n background: none;\n border: none;\n padding: 0;\n color: var(--fides-overlay-link-font-color);\n text-decoration: underline;\n cursor: pointer;\n line-height: 2em;\n}\n\n/** Modal */\n\ndiv.fides-modal-content {\n line-height: var(--fides-overlay-line-height);\n color: var(--fides-overlay-body-font-color) !important;\n box-sizing: border-box;\n padding: var(--fides-overlay-padding);\n border: 1px solid var(--fides-overlay-primary-color);\n background-color: var(--fides-overlay-background-color);\n border-radius: var(--fides-overlay-component-border-radius);\n max-height: 100%;\n max-width: 100%;\n overflow-y: scroll;\n z-index: 2;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.fides-toggle .fides-toggle-display {\n --offset: 0.1em;\n --diameter: 1em;\n /** Because we have a \"hidden\" attr on this toggle element, some CSS libs customers use may include a global display: none on the hidden attr. To prevent our toggles from being hidden we use !important here **/\n display: inline-flex !important;\n align-items: center;\n justify-content: space-around;\n width: calc(var(--diameter) * 2 + var(--offset) * 2);\n height: calc(var(--diameter) + var(--offset) * 2);\n box-sizing: content-box;\n position: relative;\n border-radius: 100vw;\n background-color: var(--fides-overlay-inactive-color);\n transition: 250ms;\n}\n\n/* Checked/unchecked states */\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n background-color: var(--fides-overlay-primary-active-color);\n}\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {\n transform: translate(100%, -50%);\n}\n\n/* Disabled state */\n.fides-toggle .fides-toggle-input:disabled {\n cursor: not-allowed;\n}\n.fides-toggle .fides-toggle-input:disabled + .fides-toggle-display {\n background-color: var(--fides-overlay-disabled-color);\n}\n.fides-toggle .fides-toggle-input:disabled:checked + .fides-toggle-display {\n background-color: var(--fides-overlay-primary-active-disabled-color);\n}\n\n/* Focus ring when using keyboard */\n.fides-toggle .fides-toggle-input:focus + .fides-toggle-display {\n /* Firefox only has Highlight, not -webkit-focus-ring-color */\n outline: 1px auto Highlight;\n outline: 1px auto -webkit-focus-ring-color;\n}\n\n/* Disclosure */\n\n.fides-notice-toggle .fides-notice-toggle-title {\n border: 0;\n}\n\n#fides-modal .fides-modal-secondary-actions {\n display: none !important;\n}\n\n.fides-notice-toggle .fides-notice-toggle-trigger {\n padding-left: 4px;\n position: relative;\n left: -4px;\n}\n\n.fides-notice-toggle-trigger > .fides-flex-center.fides-justify-space-between {\n font-weight: bold\n}\n\n/* Tabs */\n\n.fides-tab-button::focus-visible {\n outline: 1px auto ").concat(theme.colors.black, ";\n}\n\n.fides-tab-button:focus:not(:focus-visible) {\n outline: 4px solid ").concat(theme.colors.hyper, " !important;\n}\n\n.fides-toggle-input.focus-visible + .fides-toggle-display,\n.fides-banner-button.fides-banner-button-primary.focus-visible,\n.fides-banner-button.fides-banner-button-secondary.focus-visible,\n.fides-banner-button.fides-banner-button-tertiary.focus-visible {\n outline: 3px solid ").concat(theme.colors.hyper, " !important;\n outline-offset: 2px;\n}\n\n/* Table */\n\n.fides-cookies-table {\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n}\n\n.fides-cookies-table th {\n text-transform: uppercase;\n}\n\n.fides-cookies-table td, .fides-cookies-table th {\n border: 1px solid var(--fides-overlay-row-divider-color);\n padding-left: 1.1em;\n padding-right: 0.6em;\n}\n\n#fides-banner #fides-button-group button {\n font-weight: bold;\n padding: 10px 16px;\n margin-top: 0;\n border: 1px solid var(--fides-overlay-primary-color);\n border-radius: 2px;\n}\n\n#fides-banner #fides-button-group div:nth-child(2) > button:nth-child(1) {\n background-color: white;\n color: #3a10e5;\n}\n\n#fides-banner-button-tertiary {\n display: none;\n}\n\n#fides-banner-heading {\n display: none !important;\n}\n\ndiv#fides-banner-inner div#fides-button-group {\nflex-direction: row !important;\n}\n\n.fides-banner-description a:hover, .fides-modal-description a:hover {\n text-decoration: none;\n}\n\n\n#fides-banner-inner-container a.focus-visible {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n div#fides-banner-inner div#fides-button-group {\n padding-top: 0 !important\n }\n\n #fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n width: auto !important\n }\n\n #fides-banner .fides-banner-button-group.fides-banner-primary-actions {\n align-items: flex-end !important;\n align-self: stretch !important\n }\n\n #fides-banner .fides-banner-button-group.fides-banner-secondary-actions {\n align-items: flex-start !important;\n }\n\n.fides-notice-toggle:focus-visible {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n@media (min-width: 37.5rem) {\n #fides-banner {\n padding: 0.875rem 1rem !important;\n }\n}\n\n").concat(theme.breakpoints.sm, " {\n div#fides-button-group .fides-banner-secondary-actions > button {\n padding: 4px 16px !important\n }\n\n div#fides-banner-inner {\n row-gap: 16px;\n }\n\n #fides-banner {\n padding: 0.875rem 1.25rem !important;\n }\n}\n\n@media only screen and (min-width: 1650px) {\n #fides-banner-inner {\n flex-direction: row !important;\n max-width: 1600px !important;\n }\n\n #fides-banner-inner-container {\n width: 72%;\n }\n\n #fides-banner div#fides-button-group {\n width: 28% !important;\n }\n\n div#fides-banner-description {\n margin-bottom: 0 !important;\n }\n}\n");
|
|
35
|
+
const rawStyles = "\n:root {\n /* Colors */\n\n --fides-overlay-primary-color: ".concat(theme.colors.hyper, ";\n --fides-overlay-body-font-color: #484848;\n\n /* Buttons */\n\n --fides-overlay-primary-button-background-hover-color: ").concat(theme.colors.hyper, ";\n\n /* Toggles */\n --fides-overlay-primary-active-color: var(--fides-overlay-primary-color);\n --fides-overlay-primary-active-disabled-color: #bda4f7;\n --fides-overlay-inactive-color: #cbd5e0;\n --fides-overlay-disabled-color: #e1e7ee;\n\n /* Everything else */\n --fides-overlay-button-border-radius: ").concat(theme.borderRadii.md, ";\n --fides-overlay-font-family: inherit;\n --fides-overlay-font-size-body: 0.875rem !important;\n --fides-overlay-line-height: 1.375rem !important;\n --fides-overlay-padding: padding: 1rem !important;\n --fides-overlay-padding: 0.875rem 1rem !important;\n}\n\n.fides-banner, .fides-modal-container {\n -webkit-font-smoothing: auto;\n}\n\ndiv#fides-overlay {\n font-size: var(--fides-overlay-font-size-body);\n line-height: var(--fides-overlay-line-height);\n z-index: 1000;\n position: fixed;\n white-space: pre-line;\n font-family: inherit;\n line-height: calc(1em + 0.4rem);\n -webkit-font-smoothing: auto;\n z-index: 9948031 !important\n}\n\n#fides-modal-link {\n cursor: pointer;\n display: none;\n}\n\n#fides-modal .fides-notice-toggle-title:hover {\n background-color: ").concat(theme.colors.white, " !important\n}\n\n#fides-modal .fides-modal-content {\n background-color: ").concat(theme.colors.white, " !important;\n border:0;\n font-size: 14px;\n line-height: 1.4;\n}\n\n.fides-modal-description a:focus {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n.fides-notice-toggle-title a:focus {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n#fides-modal .fides-notice-toggle, #fides-modal fides-notice-toggle-expanded {\n background-color: ").concat(theme.colors.white, " !important;\n}\n\n#fides-modal .fides-banner-button-secondary.fides-save-button {\n color: var(--fides-overlay-primary-button-background-color) !important;\n}\n\n#fides-modal .fides-modal-footer {\n background-color: ").concat(theme.colors.white, "\n}\n\n#fides-modal .fides-toggle-display {\n color: transparent;\n padding: 0;\n padding-block: 2px;\n --offset: 0.2em !important;\n --diameter: 1.2em !important;\n background-color: #828285\n}\n\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n background-color: var(--fides-overlay-primary-active-color) !important;\n}\n\n#fides-modal .fides-divider {\n display: none !important\n}\n\n#fides-modal .fides-modal-title {\n text-align: left !important;\n}\n\ndiv#fides-banner-container {\n bottom: 0 !important;\n left: 0 !important;\n}\n\ndiv#fides-banner-container button.fides-banner-button {\n font-size: 16px !important;\n}\n\ndiv#fides-banner {\n line-height: var(--fides-overlay-line-height);\n color: var(--fides-overlay-body-font-color) !important;\n width: 100% !important;\n overflow-y: hidden;\n border: 0 !important;\n box-shadow: 0 0 18px rgba(0, 0, 0, 0.2) !important;\n background-color: ").concat(theme.colors.white, ";\n -webkit-font-smoothing: auto;\n bottom: 1px;\n}\n\ndiv#fides-banner:focus {\n outline: 1px solid ").concat(theme.colors.black, " !important\n}\n\ndiv#fides-banner-inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 1436px;\n margin: 0 auto;\n row-gap: 16px;\n row-gap: unset !important\n}\n\n/* Responsive banner */\n\ndiv#fides-banner-description {\n margin-top: 0;\n margin-bottom: 10px;\n}\n\ndiv#fides-banner-description span {\n line-height: 1.375rem !important;\n}\n\ndiv#fides-banner-description > div {\n text-align: center;\n}\n\ndiv#fides-banner-description > div a {\n font-weight: bold;\n}\n\ndiv#fides-button-group {\n justify-content: center;\n gap: 2em;\n background-color: transparent;\n}\n\n#fides-banner div#fides-button-group {\n margin-top: 0.5em;\n display: flex;\n display: flex;\n justify-content: center;\n background-color: transparent;\n gap: 16px !important;\n}\n\ndiv#fides-button-group .fides-banner-secondary-actions > button {\n cursor: pointer;\n text-decoration: none;\n font-weight: bold;\n padding: 10px 16px !important\n padding-top: 3px !important;\n margin-top: 0;\n border: 1px solid var(--fides-overlay-primary-color);\n border-radius: 2px;\n box-sizing: border-box;\n}\n\n#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n margin-right: 0px !important;\n}\n\n.fides-modal-footer div#fides-button-group {\n width: 100% !important\n}\n\n#fides-modal .fides-modal-button-group.fides-modal-primary-actions {\n margin-left: 0 !important;\n}\n\n.fides-gpc-label {\n display: none !important;\n}\n\nbutton.fides-banner-button.fides-banner-button-tertiary {\n background: none;\n border: none;\n padding: 0;\n color: var(--fides-overlay-link-font-color);\n text-decoration: underline;\n cursor: pointer;\n line-height: 2em;\n}\n\n/** Modal */\n\ndiv.fides-modal-content {\n line-height: var(--fides-overlay-line-height);\n color: var(--fides-overlay-body-font-color) !important;\n box-sizing: border-box;\n padding: var(--fides-overlay-padding);\n border: 1px solid var(--fides-overlay-primary-color);\n background-color: var(--fides-overlay-background-color);\n border-radius: var(--fides-overlay-component-border-radius);\n max-height: 100%;\n max-width: 100%;\n overflow-y: scroll;\n z-index: 2;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.fides-toggle .fides-toggle-display {\n --offset: 0.1em;\n --diameter: 1em;\n /** Because we have a \"hidden\" attr on this toggle element, some CSS libs customers use may include a global display: none on the hidden attr. To prevent our toggles from being hidden we use !important here **/\n display: inline-flex !important;\n align-items: center;\n justify-content: space-around;\n width: calc(var(--diameter) * 2 + var(--offset) * 2);\n height: calc(var(--diameter) + var(--offset) * 2);\n box-sizing: content-box;\n position: relative;\n border-radius: 100vw;\n background-color: var(--fides-overlay-inactive-color);\n transition: 250ms;\n}\n\n/* Checked/unchecked states */\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n background-color: var(--fides-overlay-primary-active-color);\n}\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {\n transform: translate(100%, -50%);\n}\n\n/* Disabled state */\n.fides-toggle .fides-toggle-input:disabled {\n cursor: not-allowed;\n}\n.fides-toggle .fides-toggle-input:disabled + .fides-toggle-display {\n background-color: var(--fides-overlay-disabled-color);\n}\n.fides-toggle .fides-toggle-input:disabled:checked + .fides-toggle-display {\n background-color: var(--fides-overlay-primary-active-disabled-color);\n}\n\n/* Focus ring when using keyboard */\n.fides-toggle .fides-toggle-input:focus + .fides-toggle-display {\n /* Firefox only has Highlight, not -webkit-focus-ring-color */\n outline: 1px auto Highlight;\n outline: 1px auto -webkit-focus-ring-color;\n}\n\n/* Disclosure */\n\n.fides-notice-toggle .fides-notice-toggle-title {\n border: 0;\n}\n\n#fides-modal .fides-modal-secondary-actions {\n display: none !important;\n}\n\n.fides-notice-toggle .fides-notice-toggle-trigger {\n padding-left: 4px;\n position: relative;\n left: -4px;\n}\n\n.fides-notice-toggle-trigger > .fides-flex-center.fides-justify-space-between {\n font-weight: bold\n}\n\n/* Tabs */\n\n.fides-tab-button::focus-visible {\n outline: 1px auto ").concat(theme.colors.black, ";\n}\n\n.fides-tab-button:focus:not(:focus-visible) {\n outline: 4px solid ").concat(theme.colors.hyper, " !important;\n}\n\n.fides-toggle-input.focus-visible + .fides-toggle-display,\n.fides-banner-button.fides-banner-button-primary.focus-visible,\n.fides-banner-button.fides-banner-button-secondary.focus-visible,\n.fides-banner-button.fides-banner-button-tertiary.focus-visible {\n outline: 3px solid ").concat(theme.colors.hyper, " !important;\n outline-offset: 2px;\n}\n\n/* Table */\n\n.fides-cookies-table {\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n}\n\n.fides-cookies-table th {\n text-transform: uppercase;\n}\n\n.fides-cookies-table td, .fides-cookies-table th {\n border: 1px solid var(--fides-overlay-row-divider-color);\n padding-left: 1.1em;\n padding-right: 0.6em;\n}\n\n#fides-banner #fides-button-group button {\n font-weight: bold;\n padding: 10px 16px;\n margin-top: 0;\n border: 1px solid var(--fides-overlay-primary-color);\n border-radius: 2px;\n}\n\n#fides-banner #fides-button-group div:nth-child(2) > button:nth-child(1) {\n background-color: white;\n color: #3a10e5;\n}\n\n#fides-banner-button-tertiary {\n display: none;\n}\n\n#fides-banner-heading {\n display: none !important;\n}\n\ndiv#fides-banner-inner div#fides-button-group {\n flex-direction: row !important;\n}\n\n.fides-banner-description a:hover, .fides-modal-description a:hover {\n text-decoration: none;\n}\n\n#fides-banner-inner-container a.focus-visible {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\ndiv#fides-banner-inner div#fides-button-group {\n padding-top: 0 !important\n}\n\n#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n width: auto !important\n}\n\n#fides-banner .fides-banner-button-group.fides-banner-primary-actions {\n align-items: flex-end !important;\n align-self: stretch !important\n}\n\n#fides-banner .fides-banner-button-group.fides-banner-secondary-actions {\n align-items: flex-start !important;\n}\n\n.fides-notice-toggle:focus-visible {\n outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n@media (min-width: 37.5rem) {\n #fides-banner {\n padding: 0.875rem 1rem !important;\n }\n}\n\n").concat(theme.breakpoints.sm, " {\n div#fides-button-group .fides-banner-secondary-actions > button {\n padding: 4px 16px !important\n }\n\n div#fides-banner-inner {\n row-gap: 16px;\n }\n\n #fides-banner {\n padding: 0.875rem 1.25rem !important;\n }\n}\n\n@media only screen and (min-width: 1650px) {\n #fides-banner-inner {\n flex-direction: row !important;\n max-width: 1600px !important;\n }\n\n #fides-banner-inner-container {\n width: 72%;\n }\n\n #fides-banner div#fides-button-group {\n width: 28% !important;\n }\n\n div#fides-banner-description {\n margin-bottom: 0 !important;\n }\n}");
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/tracking",
|
|
3
3
|
"description": "Tracking library for Codecademy",
|
|
4
|
-
"version": "1.0.47-alpha.
|
|
4
|
+
"version": "1.0.47-alpha.e20784d4b0.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@codecademy/gamut-styles": "*",
|