From 31003276b73d3e89824bc002fe616fa055e918c4 Mon Sep 17 00:00:00 2001 From: Mo Date: Tue, 7 Jun 2022 13:49:00 -0500 Subject: [PATCH] feat: styles package (#1074) --- packages/styles/.eslintignore | 3 + packages/styles/.eslintrc.json | 4 + packages/styles/.gitignore | 1 + packages/styles/linter.tsconfig.json | 3 + packages/styles/package.json | 24 + packages/styles/src/Alert/Alert.ts | 127 +++ packages/styles/src/Styles/_app-bar.scss | 90 ++ packages/styles/src/Styles/_menu-panel.scss | 96 +++ packages/styles/src/Styles/_modal.scss | 73 ++ packages/styles/src/Styles/_normalize.scss | 349 ++++++++ packages/styles/src/Styles/_panels.scss | 219 +++++ .../styles/src/Styles/_reach-overrides.scss | 3 + packages/styles/src/Styles/_scrollbar.scss | 32 + packages/styles/src/Styles/_sn.scss | 282 +++++++ packages/styles/src/Styles/_table.scss | 58 ++ packages/styles/src/Styles/_ui.scss | 782 ++++++++++++++++++ packages/styles/src/Styles/_utils.scss | 13 + packages/styles/src/Styles/main.scss | 124 +++ .../styles/src/Styles/utils/_animation.scss | 74 ++ packages/styles/src/Styles/utils/_border.scss | 79 ++ packages/styles/src/Styles/utils/_color.scss | 70 ++ packages/styles/src/Styles/utils/_cursor.scss | 3 + .../styles/src/Styles/utils/_display.scss | 118 +++ packages/styles/src/Styles/utils/_height.scss | 84 ++ .../styles/src/Styles/utils/_hover_focus.scss | 101 +++ packages/styles/src/Styles/utils/_margin.scss | 86 ++ .../styles/src/Styles/utils/_padding.scss | 103 +++ .../styles/src/Styles/utils/_position.scss | 40 + .../styles/src/Styles/utils/_transition.scss | 15 + .../styles/src/Styles/utils/_typography.scss | 73 ++ packages/styles/src/Styles/utils/_width.scss | 128 +++ packages/styles/src/index.ts | 1 + packages/styles/tsconfig.json | 13 + packages/styles/webpack.config.js | 49 ++ packages/toast/{.eslintrc => .eslintrc.json} | 0 packages/web/jest.config.js | 2 +- packages/web/package.json | 2 +- .../src/javascripts/Services/AlertService.ts | 2 +- packages/web/src/stylesheets/index.css.scss | 2 +- yarn.lock | 137 +-- 40 files changed, 3346 insertions(+), 119 deletions(-) create mode 100644 packages/styles/.eslintignore create mode 100644 packages/styles/.eslintrc.json create mode 100644 packages/styles/.gitignore create mode 100644 packages/styles/linter.tsconfig.json create mode 100644 packages/styles/package.json create mode 100644 packages/styles/src/Alert/Alert.ts create mode 100644 packages/styles/src/Styles/_app-bar.scss create mode 100644 packages/styles/src/Styles/_menu-panel.scss create mode 100644 packages/styles/src/Styles/_modal.scss create mode 100644 packages/styles/src/Styles/_normalize.scss create mode 100644 packages/styles/src/Styles/_panels.scss create mode 100644 packages/styles/src/Styles/_reach-overrides.scss create mode 100644 packages/styles/src/Styles/_scrollbar.scss create mode 100644 packages/styles/src/Styles/_sn.scss create mode 100644 packages/styles/src/Styles/_table.scss create mode 100644 packages/styles/src/Styles/_ui.scss create mode 100644 packages/styles/src/Styles/_utils.scss create mode 100644 packages/styles/src/Styles/main.scss create mode 100644 packages/styles/src/Styles/utils/_animation.scss create mode 100644 packages/styles/src/Styles/utils/_border.scss create mode 100644 packages/styles/src/Styles/utils/_color.scss create mode 100644 packages/styles/src/Styles/utils/_cursor.scss create mode 100644 packages/styles/src/Styles/utils/_display.scss create mode 100644 packages/styles/src/Styles/utils/_height.scss create mode 100644 packages/styles/src/Styles/utils/_hover_focus.scss create mode 100644 packages/styles/src/Styles/utils/_margin.scss create mode 100644 packages/styles/src/Styles/utils/_padding.scss create mode 100644 packages/styles/src/Styles/utils/_position.scss create mode 100644 packages/styles/src/Styles/utils/_transition.scss create mode 100644 packages/styles/src/Styles/utils/_typography.scss create mode 100644 packages/styles/src/Styles/utils/_width.scss create mode 100644 packages/styles/src/index.ts create mode 100644 packages/styles/tsconfig.json create mode 100644 packages/styles/webpack.config.js rename packages/toast/{.eslintrc => .eslintrc.json} (100%) diff --git a/packages/styles/.eslintignore b/packages/styles/.eslintignore new file mode 100644 index 000000000..70b3dbbba --- /dev/null +++ b/packages/styles/.eslintignore @@ -0,0 +1,3 @@ +node_modules +dist +webpack.config.js \ No newline at end of file diff --git a/packages/styles/.eslintrc.json b/packages/styles/.eslintrc.json new file mode 100644 index 000000000..1df2a47c5 --- /dev/null +++ b/packages/styles/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["../../node_modules/@standardnotes/config/src/.eslintrc"], + "ignorePatterns": [".eslintrc.js", "webpack.config.js"] +} diff --git a/packages/styles/.gitignore b/packages/styles/.gitignore new file mode 100644 index 000000000..53c37a166 --- /dev/null +++ b/packages/styles/.gitignore @@ -0,0 +1 @@ +dist \ No newline at end of file diff --git a/packages/styles/linter.tsconfig.json b/packages/styles/linter.tsconfig.json new file mode 100644 index 000000000..ab3d8c031 --- /dev/null +++ b/packages/styles/linter.tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../node_modules/@standardnotes/config/src/linter.tsconfig.json" +} diff --git a/packages/styles/package.json b/packages/styles/package.json new file mode 100644 index 000000000..a61fea826 --- /dev/null +++ b/packages/styles/package.json @@ -0,0 +1,24 @@ +{ + "name": "@standardnotes/styles", + "version": "1.0.0", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "publishConfig": { + "access": "public" + }, + "scripts": { + "build": "webpack --mode='production' && yarn run tsc", + "start": "webpack --watch --mode='development'", + "lint": "prettier --check *.js" + }, + "dependencies": {}, + "devDependencies": { + "css-loader": "~6.6.0", + "mini-css-extract-plugin": "^2.5.3", + "node-sass": "^7.0.1", + "sass-loader": "^12.6.0", + "style-loader": "~3.3.1", + "webpack": "^5.69.1", + "webpack-cli": "^4.9.2" + } +} diff --git a/packages/styles/src/Alert/Alert.ts b/packages/styles/src/Alert/Alert.ts new file mode 100644 index 000000000..bb8d0d69c --- /dev/null +++ b/packages/styles/src/Alert/Alert.ts @@ -0,0 +1,127 @@ +type AlertButtonStyle = 'small' | 'outlined' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success' + +type AlertButton = { + text: string + style: AlertButtonStyle + action: () => void + primary?: boolean +} + +export class SKAlert { + private title?: string + private text: string + private buttons: AlertButton[] + private element!: HTMLDivElement + private onElement!: HTMLElement + + constructor({ title, text, buttons }: { title?: string; text: string; buttons?: AlertButton[] }) { + this.title = title + this.text = text + this.buttons = buttons || [] + } + + buttonsString() { + const genButton = function (buttonDesc: AlertButton, index: number) { + return ` + + ` + } + + const buttonString = this.buttons + .map(function (buttonDesc, index) { + return genButton(buttonDesc, index) + }) + .join('') + + const str = ` +
+ ${buttonString} +
+ ` + return str + } + + templateString() { + let buttonsTemplate: string + let panelStyle: string + if (this.buttons) { + buttonsTemplate = ` +
+ ${this.buttonsString()} +
+ ` + panelStyle = '' + } else { + buttonsTemplate = '' + panelStyle = 'style="padding-bottom: 8px"' + } + const titleTemplate = this.title ? `
${this.title}
` : '' + const messageTemplate = this.text ? `

${this.text}

` : '' + + const template = ` +
+
+
+
+
+
+
+ ${titleTemplate} + +
+ ${messageTemplate} +
+ + ${buttonsTemplate} +
+
+
+
+
+
+ ` + + return template + } + + dismiss() { + this.onElement.removeChild(this.element) + } + + primaryButton() { + let primary = this.buttons.find((button) => button.primary === true) + if (!primary) { + primary = this.buttons[this.buttons.length - 1] + } + return primary + } + + present(onElement?: HTMLElement) { + if (!onElement) { + onElement = document.body + } + + this.onElement = onElement + + this.element = document.createElement('div') + this.element.className = 'sn-component' + this.element.innerHTML = this.templateString().trim() + + onElement.appendChild(this.element) + + if (this.buttons && this.buttons.length) { + this.buttons.forEach((buttonDesc, index) => { + const buttonElem = this.element.querySelector(`#button-${index}`) as HTMLButtonElement + buttonElem.onclick = () => { + buttonDesc.action && buttonDesc.action() + this.dismiss() + } + if (index === 0) { + buttonElem.focus() + } + }) + } + } +} diff --git a/packages/styles/src/Styles/_app-bar.scss b/packages/styles/src/Styles/_app-bar.scss new file mode 100644 index 000000000..f799ccf86 --- /dev/null +++ b/packages/styles/src/Styles/_app-bar.scss @@ -0,0 +1,90 @@ +.sk-app-bar { + display: flex; + width: 100%; + height: 1.625rem; + padding: 0 0.65rem; + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + justify-content: space-between; + align-items: center; + border: 1px solid var(--sn-stylekit-contrast-border-color); + user-select: none; + + &.no-edges { + border-left: 0; + border-right: 0; + } + + &.no-bottom-edge { + border-bottom: 0; + } + + .left, + .right { + display: flex; + height: 100%; + } + + .sk-app-bar-item { + flex-grow: 1; + &:not(:first-child) { + margin-left: 0.8125rem; + } + + &.border { + border-left: 1px solid var(--sn-stylekit-contrast-border-color); + } + + > .sk-app-bar-item-column { + height: 100%; + display: flex; + align-items: center; + + &:not(:first-child) { + margin-left: 0.40625rem; + } + &.underline { + border-bottom: 2px solid var(--sn-stylekit-info-color); + } + } + + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + &.no-pointer { + cursor: default; + } + + &:hover { + > .sk-label, + > .sk-sublabel, + > .sk-app-bar-item-column > .sk-label, + > .sk-app-bar-item-column > .sk-sublabel { + &:not(.subtle) { + color: var(--sn-stylekit-info-color); + } + } + } + + > .sk-label, + > .sk-app-bar-item-column > .sk-label { + font-weight: bold; + font-size: var(--sn-stylekit-font-size-h5); + white-space: nowrap; + } + + > .sk-sublabel, + > .sk-app-bar-item-column > .sk-sublabel { + font-size: var(--sn-stylekit-font-size-h5); + font-weight: normal; + white-space: nowrap; + } + + .subtle { + font-weight: normal; + opacity: 0.6; + } + } +} diff --git a/packages/styles/src/Styles/_menu-panel.scss b/packages/styles/src/Styles/_menu-panel.scss new file mode 100644 index 000000000..6adf2db2d --- /dev/null +++ b/packages/styles/src/Styles/_menu-panel.scss @@ -0,0 +1,96 @@ +.sk-menu-panel { + // box-shadow: 0px 4px 4px var(--sn-stylekit-shadow-color); + background-color: var(--sn-stylekit-background-color); + border: 1px solid var(--sn-stylekit-contrast-border-color); + border-radius: var(--sn-stylekit-general-border-radius); + overflow: scroll; + user-select: none; + + // For Windows to hide needless scrollbars + overflow-y: auto !important; + overflow-x: auto !important; + + .sk-menu-panel-header { + padding: 0.65rem 0.8125rem; + border-bottom: 1px solid var(--sn-stylekit-contrast-border-color); + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + display: flex; + justify-content: space-between; + align-items: center; + } + + .sk-menu-panel-header-title { + font-weight: bold; + font-size: var(--sn-stylekit-font-size-h4); + } + + .sk-menu-panel-header-subtitle { + margin-top: 0.1625rem; + opacity: 0.6; + } + + .sk-menu-panel-row { + padding: 0.8125rem 0.8125rem; + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: 1px solid var(--sn-stylekit-border-color); + + &:hover { + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + border-color: var(--sn-stylekit-contrast-border-color); + } + + .sk-menu-panel-column { + display: flex; + justify-content: center; + flex-direction: column; + + &:not(:first-child) { + padding-left: 1rem; + padding-right: 0.121875rem; + } + + &.stretch { + width: 100%; + } + + .sk-menu-panel-subrows { + margin-top: 0.8125rem; + } + + /* Nested row */ + .sk-menu-panel-row, + .sk-menu-panel-subrow { + border: 1px solid var(--sn-stylekit-contrast-border-color); + margin-top: -1px; + &:hover { + background-color: var(--sn-stylekit-background-color); + } + } + + .left { + display: flex; + } + } + + .sk-button .sk-label { + font-size: var(--sn-stylekit-font-size-h6); + font-weight: normal; + } + + .sk-label { + font-size: var(--sn-stylekit-font-size-p); + font-weight: bold; + } + + .sk-sublabel { + font-size: var(--sn-stylekit-font-size-h5); + margin-top: 0.1625rem; + opacity: 0.6; + } + } +} diff --git a/packages/styles/src/Styles/_modal.scss b/packages/styles/src/Styles/_modal.scss new file mode 100644 index 000000000..c86ad69d6 --- /dev/null +++ b/packages/styles/src/Styles/_modal.scss @@ -0,0 +1,73 @@ +.sk-modal { + position: fixed; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 10000; + width: 100vw; + height: 100vh; + + background-color: transparent; + color: var(--sn-stylekit-contrast-foreground-color); + display: flex; + align-items: center; + justify-content: center; + + .sn-component { + height: 100%; + .sk-panel { + height: 100%; + } + } + + &.auto-height { + > .sk-modal-content { + height: auto !important; + } + } + + &.large { + > .sk-modal-content { + width: 900px; + height: 600px; + } + } + + &.medium { + > .sk-modal-content { + width: 700px; + height: 500px; + } + } + + &.small { + > .sk-modal-content { + width: 700px; + height: 344px; + } + } + + .sk-modal-background { + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-contrast-background-color); + opacity: 0.7; + } + + > .sk-modal-content { + overflow-y: auto; + width: auto; + padding: 0; + padding-bottom: 0; + min-width: 300px; + + -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); + -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); + box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); + } +} diff --git a/packages/styles/src/Styles/_normalize.scss b/packages/styles/src/Styles/_normalize.scss new file mode 100644 index 000000000..c46998948 --- /dev/null +++ b/packages/styles/src/Styles/_normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/packages/styles/src/Styles/_panels.scss b/packages/styles/src/Styles/_panels.scss new file mode 100644 index 000000000..79fa9a343 --- /dev/null +++ b/packages/styles/src/Styles/_panels.scss @@ -0,0 +1,219 @@ +.sk-panel { + $h-content-padding: 1.625rem; + box-shadow: 0px 2px 5px var(--sn-stylekit-shadow-color); + background-color: var(--sn-stylekit-background-color); + border: 1px solid var(--sn-stylekit-border-color); + border-radius: var(--sn-stylekit-general-border-radius); + display: flex; + flex-direction: column; + overflow: auto; // to hide border-radius + flex-grow: 1; + + a { + &:hover { + text-decoration: underline; + } + } + + &.static { + box-shadow: none; + border: none; + border-radius: 0; + + .sk-panel-content { + // padding: 0; + } + } + + .sk-panel-header { + flex-shrink: 0; /* Don't allow to condense in height */ + display: flex; + justify-content: space-between; + padding: 0.89375rem $h-content-padding; + border-bottom: 1px solid var(--sn-stylekit-contrast-border-color); + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + align-items: center; + + .sk-panel-header-title { + font-size: var(--sn-stylekit-font-size-h1); + font-weight: 500; + } + + .close-button { + font-weight: bold; + } + } + + .sk-footer, + .sk-panel-footer { + padding: 0.8125rem $h-content-padding; + border-top: 1px solid var(--sn-stylekit-border-color); + box-sizing: border-box; + + &.extra-padding { + padding: 1.625rem $h-content-padding; + } + + .left { + text-align: left; + display: block; + } + + .right { + text-align: right; + display: block; + } + } + + .sk-panel-content { + padding: 1.3rem $h-content-padding; + padding-bottom: 0; + flex-grow: 1; + overflow: scroll; + height: 100%; + + // For Windows to hide needless scrollbars + overflow-y: auto !important; + overflow-x: auto !important; + + .sk-p, + .sk-li { + color: var(--sn-stylekit-paragraph-text-color); + line-height: 1.3; + } + } +} + +.sk-panel-section { + padding-bottom: 1.3rem; + display: flex; + flex-direction: column; + + &.sk-panel-hero { + text-align: center; + } + + .sk-p:last-child { + margin-bottom: 0; + } + + &:not(:last-child) { + margin-bottom: 1.21875rem; + border-bottom: 1px solid var(--sn-stylekit-border-color); + + &.no-border { + border-bottom: none; + } + } + + &:last-child { + margin-bottom: 0.5rem; + } + + &.no-bottom-pad { + padding-bottom: 0; + margin-bottom: 0; + } + + .sk-panel-section-title { + margin-bottom: 0.40625rem; + font-weight: bold; + font-size: var(--sn-stylekit-font-size-h3); + } + + .sk-panel-section-outer-title { + border-bottom: 1px solid var(--sn-stylekit-border-color); + padding-bottom: 0.73125rem; + margin-top: 1.70625rem; + margin-bottom: 15px; + font-size: var(--sn-stylekit-font-size-h3); + } + + .sk-panel-section-subtitle { + @extend .sk-label; + font-size: var(--sn-stylekit-font-size-h5); + margin-bottom: 2px; + + &.subtle { + font-weight: normal; + opacity: 0.6; + } + } + + .text-content { + .sk-p { + margin-bottom: 0.8175rem; + } + + p:first-child { + margin-top: 0.24375rem; + } + } +} + +.sk-panel-row { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 0.325rem; + + &.centered { + justify-content: center; + } + + &.justify-right { + justify-content: flex-end; + } + + &.justify-left { + justify-content: flex-start; + } + + &.align-top { + align-items: flex-start; + } + + .sk-panel-column { + &.stretch { + width: 100%; + } + } + + &.default-padding, + &:not(:last-child) { + padding-bottom: 0.325rem; + } + + &.condensed { + padding-top: 0.1625rem; + padding-bottom: 0.1625rem; + } + + .sk-p { + margin: 0; + padding: 0; + } +} + +.vertical-rule { + background-color: var(--sn-stylekit-border-color); + height: 1.21875rem; + width: 1px; +} + +.sk-panel-form { + width: 100%; + &.half { + width: 50%; + } + + .form-submit { + margin-top: 0.121875rem; + } +} + +.right-aligned { + justify-content: flex-end; + text-align: right; +} diff --git a/packages/styles/src/Styles/_reach-overrides.scss b/packages/styles/src/Styles/_reach-overrides.scss new file mode 100644 index 000000000..b36b4425e --- /dev/null +++ b/packages/styles/src/Styles/_reach-overrides.scss @@ -0,0 +1,3 @@ +[data-reach-custom-checkbox-container] { + margin: 0; +} diff --git a/packages/styles/src/Styles/_scrollbar.scss b/packages/styles/src/Styles/_scrollbar.scss new file mode 100644 index 000000000..947709d27 --- /dev/null +++ b/packages/styles/src/Styles/_scrollbar.scss @@ -0,0 +1,32 @@ +.windows-web, +.windows-desktop, +.linux-web, +.linux-desktop { + $thumb-width: 4px; + + ::-webkit-scrollbar { + width: 17px; + height: 18px; + border-left: none; + } + + ::-webkit-scrollbar-thumb { + border: $thumb-width solid rgba(0, 0, 0, 0); + background-clip: padding-box; + -webkit-border-radius: 10px; + background-color: var(--sn-stylekit-scrollbar-thumb-color); + -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); + } + + ::-webkit-scrollbar-button { + width: 0; + height: 0; + display: none; + } + + ::-webkit-scrollbar-corner { + background-color: transparent; + } + + scrollbar-width: thin; +} diff --git a/packages/styles/src/Styles/_sn.scss b/packages/styles/src/Styles/_sn.scss new file mode 100644 index 000000000..3d29edc95 --- /dev/null +++ b/packages/styles/src/Styles/_sn.scss @@ -0,0 +1,282 @@ +.sn-button { + font-size: 0.8125rem; + padding: 0.609375rem; + min-height: 1.8125rem; + @extend .border-0; + @extend .rounded; + @extend .border-solid; + @extend .cursor-pointer; + @extend .capitalize; + @extend .font-bold; + + @extend .hover\:brightness-130; + @extend .focus\:brightness-130; + @extend .focus\:outline-none; +} + +.sn-button.small { + font-size: 0.7109375rem; + padding: 0.40625rem 0.609375rem; +} + +.sn-button.outlined { + @extend .bg-default; + @extend .border-1; + @extend .border-main; + @extend .color-text; + @extend .hover\:bg-highlight; + @extend .focus\:bg-highlight; + @extend .focus\:shadow-none; + @extend .focus\:outline-none; +} + +.sn-button.contrast { + @extend .hover\:brightness-130; + background-color: var(--sn-stylekit-contrast-foreground-color); + color: var(--sn-stylekit-contrast-background-color); +} + +.sn-button.neutral { + @extend .hover\:brightness-130; + @extend .focus\:brightness-130; + background-color: var(--sn-stylekit-neutral-color); + color: var(--sn-stylekit-neutral-contrast-color); +} + +.sn-button.info { + @extend .bg-info; + @extend .color-info-contrast; +} + +.sn-button.warning { + background-color: var(--sn-stylekit-warning-color); + color: var(--sn-stylekit-warning-contrast-color); +} + +.sn-button.danger { + background-color: var(--sn-stylekit-danger-color); + color: var(--sn-stylekit-danger-contrast-color); +} + +.sn-button.success { + background-color: var(--sn-stylekit-success-color); + color: var(--sn-stylekit-success-contrast-color); +} + +.sn-dropdown-menu { + @extend .items-center; + @extend .bg-default; + @extend .border-0; + @extend .border-main; + @extend .rounded; + @extend .border-solid; + @extend .border-1; + @extend .cursor-pointer; + @extend .font-normal; + @extend .m-h-32; + @extend .hover\:bg-highlight; + @extend .inline-flex; + @extend .justify-center; + @extend .leading-4; + @extend .focus\:outline-none; + @extend .focus\:shadow-none; + @extend .px-2; + @extend .py-1; + @extend .color-text; + @extend .text-sm; + @extend .w-auto; +} + +.sn-dropdown-menu > .sn-icon:first-child { + @extend .mr-2; +} + +.sn-dropdown-menu > .sn-icon:last-child { + @extend .ml-2; +} + +.sn-dropdown-menu-list { + @extend .absolute; + @extend .bg-default; + @extend .border-main; + @extend .rounded; + @extend .box-shadow; + @extend .font-normal; + @extend .min-w-265px; + @extend .mt-2; + @extend .focus\:outline-none; + @extend .origin-top-right; + @extend .py-2; + @extend .slide-down-animation; + @extend .color-text; + @extend .w-56; +} + +.sn-dropdown-menu-list-item { + @extend .items-center; + @extend .cursor-pointer; + @extend .flex; + @extend .hover\:bg-highlight; + @extend .focus\:outline-none; + @extend .focus\:shadow-none; + @extend .px-2; + @extend .selected\:bg-color; + @extend .selected\:fg-color; + @extend .text-sm; + @extend .m-h-32; +} + +.sn-dropdown-menu-list-item > .sn-icon { + @extend .mr-2; +} + +.sn-select { + @extend .items-center; + @extend .bg-default; + @extend .border-0; + @extend .border-main; + @extend .border-solid; + @extend .border-1; + @extend .border-box; + @extend .rounded; + @extend .cursor-pointer; + @extend .font-normal; + @extend .m-h-32; + @extend .hover\:bg-highlight; + @extend .inline-flex; + @extend .justify-center; + @extend .leading-4; + @extend .focus\:outline-none; + @extend .focus\:shadow-none; + @extend .color-text; + @extend .text-sm; + @extend .w-auto; +} + +.sn-select-button { + @extend .items-center; + @extend .border-0; + @extend .cursor-pointer; + @extend .inline-flex; + @extend .justify-center; + @extend .py-1; + @extend .focus\:outline-none; + @extend .focus\:shadow-none; +} + +.sn-select-button > .sn-icon:last-child { + @extend .ml-2; +} + +.sn-select-list { + @extend .bg-default; + @extend .border-main; + @extend .rounded; + @extend .focus\:outline-none; + @extend .focus\:shadow-none; + @extend .origin-top-right; + @extend .color-text; + @extend .text-sm; +} + +.sn-select-list-option { + @extend .cursor-pointer; + @extend .selected\:bg-color; + @extend .selected\:fg-color; + @extend .font-normal; + @extend .text-sm; + @extend .py-2; +} + +.sn-select-popover { + @extend .border-main; + @extend .rounded; + @extend .box-shadow; + @extend .mt-2; + @extend .focus\:outline-none; + @extend .focus\:shadow-none; + @extend .border-0; + @extend .slide-down-animation; +} + +/** + * A button that is just an icon. Separated from .sn-button because there + * is almost no style overlap. + */ +.sn-icon-button { + @extend .color-neutral; + @extend .min-w-8; + @extend .h-8; + @extend .flex; + @extend .justify-center; + @extend .items-center; + @extend .border-solid; + @extend .border-1; + @extend .border-main; + @extend .bg-clip-padding; + @extend .m-0; + @extend .p-0; + @extend .bg-transparent; + @extend .cursor-pointer; + @extend .rounded-full; + @extend .hover\:color-text; + @extend .focus\:color-text; + @extend .hover\:bg-contrast; + @extend .focus\:bg-contrast; + @extend .focus\:outline-none; + @extend .focus\:ring-info; +} + +.sn-icon { + @extend .h-5; + @extend .w-5; + @extend .fill-current; + + &.sn-icon--small { + @extend .h-3\.5; + @extend .w-3\.5; + } + + &.sn-icon--mid { + @extend .w-4; + @extend .h-4; + } +} + +.sn-icon-button.info { + @extend .bg-info; + @extend .color-info-contrast; + + &:hover, + &:focus { + @extend .color-info-contrast; + @extend .bg-info-dark; + } +} + +.sn-full-screen { + @extend .h-100vh; + @extend .w-100vw; + + @extend .absolute; + @extend .top-left-0; +} + +.toast-progress-bar { + @extend .rounded; + @extend .w-full; + @extend .bg-default; + @extend .overflow-hidden; + + border-top-left-radius: 0; + border-top-right-radius: 0; + + &__value { + @extend .rounded; + @extend .h-2; + @extend .bg-info; + + border-top-left-radius: 0; + transition: width 0.1s; + } +} diff --git a/packages/styles/src/Styles/_table.scss b/packages/styles/src/Styles/_table.scss new file mode 100644 index 000000000..17ddf8a1a --- /dev/null +++ b/packages/styles/src/Styles/_table.scss @@ -0,0 +1,58 @@ +.sk-panel-table { + $border-width: 1px; + + display: flex; + flex-wrap: wrap; + padding-left: $border-width; + padding-top: $border-width; + + .sk-panel-table-item { + flex: 45%; + flex-flow: wrap; + border: 1px solid var(--sn-stylekit-border-color); + padding: 0.8125rem; + margin-left: -$border-width; + margin-top: -$border-width; + display: flex; + flex-direction: column; + justify-content: space-between; + + img { + max-width: 100%; + margin-bottom: 0.8125rem; + } + + .sk-panel-table-item-content { + display: flex; + flex-direction: row; + } + + .sk-panel-table-item-column { + align-items: center; + + &.stretch { + width: 100%; + } + + &:not(:first-child) { + padding-left: 0.609375rem; + } + + &.quarter { + flex-basis: 25%; + } + + &.three-quarters { + flex-basis: 75%; + } + } + + .sk-panel-table-item-footer { + margin-top: 1.015625rem; + } + + &.no-border { + border: none; + } + } +} diff --git a/packages/styles/src/Styles/_ui.scss b/packages/styles/src/Styles/_ui.scss new file mode 100644 index 000000000..827d6c821 --- /dev/null +++ b/packages/styles/src/Styles/_ui.scss @@ -0,0 +1,782 @@ +.red { + color: var(--sn-stylekit-danger-color); +} + +.tinted { + color: var(--sn-stylekit-info-color); +} + +.selectable { + user-select: text !important; + -ms-user-select: text !important; + -moz-user-select: text !important; + -webkit-user-select: text !important; +} + +.sk-h1, +.sk-h2, +.sk-h3, +.sk-h4, +.sk-h5 { + margin: 0; + padding: 0; + font-weight: normal; +} + +.sk-h1 { + font-weight: 500; + font-size: var(--sn-stylekit-font-size-h1); + line-height: 1.54375rem; +} + +.sk-h2 { + font-size: var(--sn-stylekit-font-size-h2); + line-height: 1.4625rem; +} + +.sk-h3 { + font-size: var(--sn-stylekit-font-size-h3); + line-height: 1.38125rem; +} + +.sk-h4 { + font-size: var(--sn-stylekit-font-size-p); + line-height: 1.1375rem; +} + +.sk-h5 { + font-size: var(--sn-stylekit-font-size-h5); +} + +.sk-bold { + font-weight: bold; +} + +.sk-font-small { + font-size: var(--sn-stylekit-font-size-h5); +} + +.sk-font-normal { + font-size: var(--sn-stylekit-font-size-p); +} + +.sk-font-large { + font-size: var(--sn-stylekit-font-size-h3); +} + +a.sk-a { + cursor: pointer; + user-select: none; + + &.disabled { + color: var(--sn-stylekit-neutral-color); + opacity: 0.6; + } + + &.boxed { + border-radius: var(--sn-stylekit-general-border-radius); + padding: 0.24375rem 0.325rem; + + &:hover { + text-decoration: none; + } + + &.neutral { + background-color: var(--sn-stylekit-neutral-color); + color: var(--sn-stylekit-neutral-contrast-color); + } + + &.info { + background-color: var(--sn-stylekit-info-color); + color: var(--sn-stylekit-info-contrast-color); + } + + &.warning { + background-color: var(--sn-stylekit-warning-color); + color: var(--sn-stylekit-warning-contrast-color); + } + + &.danger { + background-color: var(--sn-stylekit-danger-color); + color: var(--sn-stylekit-danger-contrast-color); + } + + &.success { + background-color: var(--sn-stylekit-success-color); + color: var(--sn-stylekit-success-contrast-color); + } + } +} + +.wrap { + word-wrap: break-word; +} + +* { + &.sk-base { + color: var(--sn-stylekit-foreground-color); + } + + &.contrast { + color: var(--sn-stylekit-contrast-foreground-color); + } + + &.neutral { + color: var(--sn-stylekit-neutral-color); + } + + &.info { + color: var(--sn-stylekit-info-color); + } + + &.info-contrast { + color: var(--sn-stylekit-info-contrast-color); + } + + &.warning { + color: var(--sn-stylekit-warning-color); + } + + &.danger { + color: var(--sn-stylekit-danger-color); + } + + &.success { + color: var(--sn-stylekit-success-color); + } + + &.info-i { + color: var(--sn-stylekit-info-color) !important; + } + + &.warning-i { + color: var(--sn-stylekit-warning-color) !important; + } + + &.danger-i { + color: var(--sn-stylekit-danger-color) !important; + } + + &.success-i { + color: var(--sn-stylekit-success-color) !important; + } + + &.clear { + background-color: transparent; + border: none; + } +} + +.center-text { + text-align: center !important; + justify-content: center !important; +} + +p.sk-p { + margin: 0.40625rem 0; +} + +input.sk-input { + box-sizing: border-box; + padding: 0.56875rem 0.65rem; + margin: 0.24375rem 0; + border: none; + + font-size: var(--sn-stylekit-font-size-h3); + width: 100%; + outline: 0; + resize: none; + + &.clear { + // usually sk-inputs should have ui-rect classes like info, warning, etc. If clear, no text color will be assigned unless we do it explicitely. + color: var(--sn-stylekit-foreground-color); + background-color: transparent; + border: none; + } + + &.no-border { + border: none; + } +} + +.sk-label { + font-weight: bold; + + &.no-bold { + font-weight: normal; + } +} + +label.sk-label { + margin: 0.56875rem 0; + display: block; +} + +label.sk-label input[type='checkbox'], +input[type='radio'] { + width: auto; + margin-right: 0.365625rem; /* Space after checkbox */ + vertical-align: middle; +} + +.sk-horizontal-group { + > * { + display: inline-block; + vertical-align: middle; + + &:not(:first-child) { + margin-left: 0.73125rem; + } + } +} + +.sk-border-bottom { + border-bottom: 1px solid var(--sn-stylekit-border-color); +} + +.sk-input-group { + @extend .sk-horizontal-group; +} + +.sk-checkbox-group { + padding-top: 0.40625rem; + padding-bottom: 0.24375rem; +} + +::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: var(--sn-stylekit-input-placeholder-color); +} + +:-ms-input-placeholder { + /* Internet Explorer 10-11 */ + color: var(--sn-stylekit-input-placeholder-color); +} + +::-ms-input-placeholder { + /* Microsoft Edge */ + color: var(--sn-stylekit-input-placeholder-color); +} + +.sk-button-group { + &.stretch { + display: flex; + width: 100%; + .sk-button { + display: block; + flex-grow: 1; + text-align: center; + } + } + .sk-button { + display: inline-block; + vertical-align: middle; + // margin-bottom: 5px; + &:not(:last-child) { + margin-right: 5px; + &.featured { + margin-right: 8px; + } + } + } +} + +.sk-segmented-buttons { + display: flex; + flex-direction: row; + + .sk-button { + border-radius: 0; + white-space: nowrap; + margin: 0; + margin-left: 0 !important; + margin-right: 0 !important; + + &:not(:last-child) { + border-right: none; + border-radius: 0; + } + + &:first-child { + border-top-left-radius: var(--sn-stylekit-general-border-radius); + border-bottom-left-radius: var(--sn-stylekit-general-border-radius); + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:last-child { + border-top-right-radius: var(--sn-stylekit-general-border-radius); + border-bottom-right-radius: var(--sn-stylekit-general-border-radius); + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } +} + +.sk-box-group { + .sk-box { + display: inline-block; + // margin-bottom: 5px; + &:not(:last-child) { + margin-right: 5px; + } + } +} + +.sk-a.button { + text-decoration: none; +} + +.sk-button { + display: table; + padding: 0.40625rem 0.56875rem; + font-size: var(--sn-stylekit-font-size-h5); + cursor: pointer; + text-align: center; + user-select: none; + + &:after { + // uncomment to disable hover borders on buttons + // color: transparent !important; // no borders for buttons, looks nicer + } + + &.no-hover-border { + &:after { + color: transparent !important; + } + } + + &.wide { + padding: 0.24375rem 1.38125rem; + } + + > .sk-label { + font-weight: bold; + display: block; + text-align: center; + } + + &.big { + font-size: var(--sn-stylekit-font-size-h3); + padding: 0.56875rem 2.03125rem; + } +} + +.sk-box { + @extend .sk-button; + padding: 2.03125rem 1.21875rem; +} + +@mixin ui-rect($color, $contrast-color, $hoverable, $border-color: '') { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: $contrast-color; + position: relative; + background-color: $color; + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + @if $border-color != '' { + // box-shadow: inset 0 0 0 1px $border-color; + border-color: $border-color; + border: 1px solid $border-color; + } @else { + // box-shadow: inset 0 0 0 1px $color; + border-color: $color; + } + + // Make background separately layer so we can set its color using CSS vars + // (as opposed to CSS vars in SASS functions, which is impossible). + + * { + // required to correctly position other layers on top of background layer. + position: relative; + } + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $color; + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); + } + + // Border shadow. Needs to be separate element so that the before element on hover brightness filter doesn't affect border, + // and gives contrasting effect + &:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; // otherwise this rect would block clickable elements + // color here refers to shadow color + @if $border-color != '' { + color: $border-color; + border-color: $border-color; + } @else { + box-shadow: inset 0 0 0 1px; + color: $color; + } + } + + @if $hoverable == true { + &:hover { + &:before { + filter: brightness(130%); + } + } + } + + &.no-bg { + background-color: transparent; + &:before { + content: none; + } + } + + &.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); + + &:before { + opacity: 1; + } + } +} + +.sk-button.sk-base, +.sk-box.sk-base, +.sk-circle.sk-base { + @include ui-rect(var(--sn-stylekit-background-color), var(--sn-stylekit-foreground-color), true); +} + +.sk-button.contrast, +.sk-box.contrast, +.sk-circle.contrast { + @include ui-rect(var(--sn-stylekit-contrast-background-color), var(--sn-stylekit-contrast-foreground-color), true); +} + +.sk-button.sk-secondary, +.sk-box.sk-secondary, +.sk-circle.sk-secondary { + @include ui-rect(var(--sn-stylekit-secondary-background-color), var(--sn-stylekit-secondary-foreground-color), true); +} + +.sk-button.sk-secondary-contrast, +.sk-box.sk-secondary-contrast, +.sk-circle.sk-secondary-contrast { + @include ui-rect( + var(--sn-stylekit-secondary-contrast-background-color), + var(--sn-stylekit-secondary-contrast-foreground-color), + true + ); +} + +.sk-button.neutral, +.sk-box.neutral, +.sk-circle.neutral { + @include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), true); +} + +.sk-button.info, +.sk-box.info, +.sk-circle.info { + @include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), true); +} + +.sk-button.warning, +.sk-box.warning, +.sk-circle.warning { + @include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), true); +} + +.sk-button.danger, +.sk-box.danger, +.sk-circle.danger { + @include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), true); +} + +.sk-button.success, +.sk-box.success, +.sk-circle.success { + @include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), true); +} + +.sk-notification.contrast, +.sk-input.contrast { + @include ui-rect( + var(--sn-stylekit-contrast-background-color), + var(--sn-stylekit-contrast-foreground-color), + false, + var(--sn-stylekit-contrast-border-color) + ); +} + +.sk-notification.sk-secondary, +.sk-input.sk-secondary { + @include ui-rect( + var(--sn-stylekit-secondary-background-color), + var(--sn-stylekit-secondary-foreground-color), + false, + var(--sn-stylekit-secondary-border-color) + ); +} + +.sk-notification.sk-secondary-contrast, +.sk-input.sk-secondary-contrast { + @include ui-rect( + var(--sn-stylekit-secondary-contrast-background-color), + var(--sn-stylekit-secondary-contrast-foreground-color), + false, + var(--sn-stylekit-secondary-contrast-border-color) + ); +} + +.sk-notification.sk-base, +.sk-input.sk-base { + @include ui-rect( + var(--sn-stylekit-background-color), + var(--sn-stylekit-foreground-color), + false, + var(--sn-stylekit-border-color) + ); +} + +.sk-notification.neutral, +.sk-input.neutral { + @include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), false); +} + +.sk-notification.info, +.sk-input.info { + @include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), false); +} + +.sk-notification.warning, +.sk-input.warning { + @include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), false); +} + +.sk-notification.danger, +.sk-input.danger { + @include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), false); +} + +.sk-notification.success, +.sk-input.success { + @include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), false); +} + +.sk-notification { + padding: 0.89375rem 0.8125rem; + margin: 1.1375rem 0; + text-align: left; + cursor: default; + + &.one-line { + padding: 0rem 0.325rem; + } + + &.stretch { + width: 100%; + } + + &.dashed { + border-style: dashed; + border-width: 2px; + + // represents border element + &:after { + box-shadow: none; + } + } + + .sk-notification-title { + font-size: var(--sn-stylekit-font-size-h1); + font-weight: bold; + line-height: 1.54375rem; + } + + .sk-notification-text { + line-height: 1.21875rem; + font-size: var(--sn-stylekit-font-size-p); + text-align: left; + font-weight: normal; + } +} + +.sk-circle { + border: 1px solid; + cursor: pointer; + + border-color: var(--sn-stylekit-contrast-foreground-color); + background-color: var(--sn-stylekit-contrast-background-color); + + padding: 0; + border-radius: 50% !important; + flex-shrink: 0; + + &:before { + border-radius: 50% !important; + } + + &:after { + border-radius: 50% !important; + } + + &.small { + width: 11px; + height: 11px; + } +} + +.sk-spinner { + border: 1px solid var(--sn-stylekit-neutral-color); + border-radius: 50%; + animation: rotate 0.8s infinite linear; + border-right-color: transparent; + + &.small { + width: 12px; + height: 12px; + } + + &.info-contrast { + border-color: var(--sn-stylekit-info-contrast-color); + border-right-color: transparent; + } + + &.info { + border-color: var(--sn-stylekit-info-color); + border-right-color: transparent; + } + + &.warning { + border-color: var(--sn-stylekit-warning-color); + border-right-color: transparent; + } + + &.danger { + border-color: var(--sn-stylekit-danger-color); + border-right-color: transparent; + } + + &.success { + border-color: var(--sn-stylekit-success-color); + border-right-color: transparent; + } +} + +.spinner-info { + border-color: var(--sn-stylekit-info-color); + border-right-color: transparent; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +svg.sk-circular-progress { + $pi: 3.14159265358979; + + $circle-size: 18px; + $stroke-width: $circle-size * (0.1 / 100) * 100 + 1; + $radius: ($circle-size - $stroke-width) / 2; + $circumference: ($radius * $pi * 2); + + height: $circle-size; + width: $circle-size; + + circle.background { + cx: $circle-size / 2; + cy: $circle-size / 2; + r: $radius; + fill: none; + stroke: var(--sn-stylekit-contrast-border-color); + stroke-width: $stroke-width; + } + + circle.progress { + cx: $circle-size / 2; + cy: $circle-size / 2; + r: $radius; + fill: none; + stroke: var(--sn-stylekit-info-color); + stroke-linecap: round; + stroke-width: $stroke-width; + transition: all 0.5s; + transform: rotate(-90deg); + transform-origin: 50% 50%; + + @mixin set-progress($progress) { + $dash: ($progress * $circumference) / 100; + stroke-dasharray: $dash $circumference - $dash; + } + + &.p-0 { + @include set-progress(0); + } + + &.p-10 { + @include set-progress(10); + } + + &.p-20 { + @include set-progress(20); + } + + &.p-30 { + @include set-progress(30); + } + + &.p-40 { + @include set-progress(40); + } + + &.p-50 { + @include set-progress(50); + } + + &.p-60 { + @include set-progress(60); + } + + &.p-70 { + @include set-progress(70); + } + + &.p-80 { + @include set-progress(80); + } + + &.p-90 { + @include set-progress(90); + } + + &.p-100 { + @include set-progress(100); + } + } +} diff --git a/packages/styles/src/Styles/_utils.scss b/packages/styles/src/Styles/_utils.scss new file mode 100644 index 000000000..763f11ed0 --- /dev/null +++ b/packages/styles/src/Styles/_utils.scss @@ -0,0 +1,13 @@ +@import 'utils/animation'; +@import 'utils/border'; +@import 'utils/color'; +@import 'utils/display'; +@import 'utils/hover_focus'; +@import 'utils/typography'; +@import 'utils/height'; +@import 'utils/margin'; +@import 'utils/padding'; +@import 'utils/width'; +@import 'utils/transition'; +@import 'utils/cursor'; +@import 'utils/position'; diff --git a/packages/styles/src/Styles/main.scss b/packages/styles/src/Styles/main.scss new file mode 100644 index 000000000..39b3a901c --- /dev/null +++ b/packages/styles/src/Styles/main.scss @@ -0,0 +1,124 @@ +@import 'normalize'; + +:root { + --sn-stylekit-base-font-size: 0.8125rem; + + --sn-stylekit-font-size-p: 0.8125rem; + --sn-stylekit-font-size-editor: 0.983125rem; + + --sn-stylekit-font-size-h6: 0.65rem; + --sn-stylekit-font-size-h5: 0.73125rem; + --sn-stylekit-font-size-h4: 0.8125rem; + --sn-stylekit-font-size-h3: 0.89375rem; + --sn-stylekit-font-size-h2: 0.975rem; + --sn-stylekit-font-size-h1: 1.05625rem; + + --sn-stylekit-neutral-color: #989898; + --sn-stylekit-neutral-contrast-color: #ffffff; + + --sn-stylekit-info-color: #086DD6; + --sn-stylekit-info-color-darkened: #065cb5; + --sn-stylekit-info-contrast-color: #ffffff; + --sn-stylekit-info-backdrop-color: #2b6fcf0f; + + --sn-stylekit-success-color: #007662; + --sn-stylekit-success-contrast-color: #ffffff; + + --sn-stylekit-warning-color: #EBAD00; + --sn-stylekit-warning-contrast-color: #ffffff; + + --sn-stylekit-danger-color: #cc2128; + --sn-stylekit-danger-contrast-color: #ffffff; + + --sn-stylekit-shadow-color: #c8c8c8; + --sn-stylekit-background-color: #ffffff; + // For borders inside background-color + --sn-stylekit-border-color: #dfe1e4; + --sn-stylekit-foreground-color: #000000; + // Colors for layers placed on top of non-prefixed background, border, and foreground + --sn-stylekit-contrast-background-color: #f6f6f6; + --sn-stylekit-contrast-foreground-color: #2e2e2e; + --sn-stylekit-contrast-border-color: #e3e3e3; // For borders inside contrast-background-color + + // Alternative set of background and contrast options + --sn-stylekit-secondary-background-color: #f6f6f6; + --sn-stylekit-secondary-foreground-color: #2e2e2e; + --sn-stylekit-secondary-border-color: #e3e3e3; + + --sn-stylekit-secondary-contrast-background-color: #e3e3e3; + --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e; + --sn-stylekit-secondary-contrast-border-color: #a2a2a2; + + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + + --sn-stylekit-paragraph-text-color: #454545; + + --sn-stylekit-input-placeholder-color: #a8a8a8; + --sn-stylekit-input-border-color: #e3e3e3; + + --sn-stylekit-scrollbar-thumb-color: #dfdfdf; + --sn-stylekit-scrollbar-track-border-color: #e7e7e7; + + --sn-stylekit-menu-border: none; + + --sn-stylekit-general-border-radius: 2px; + + --sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体'; + --sn-stylekit-monospace-font: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Ubuntu Mono', 'Courier New', + monospace; + --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', var(--sn-stylekit-simplified-chinese-font), sans-serif; + --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font); + + --sn-stylekit-theme-type: light; + --sn-stylekit-theme-name: sn-light; + + --sn-stylekit-passive-color-0: #515357; + --sn-stylekit-passive-color-1: #72767e; + --sn-stylekit-passive-color-2: #bbbec4; + --sn-stylekit-passive-color-3: #dfe1e4; + --sn-stylekit-passive-color-4: #eeeff1; + --sn-stylekit-passive-color-4-opacity-variant: #bbbec43d; + --sn-stylekit-passive-color-5: #f4f5f7; + --sn-stylekit-passive-color-6: #e5e5e5; + --sn-stylekit-passive-color-super-light: #f9f9f9; + + --sn-stylekit-accessory-tint-color-1: #086dd6; + --sn-stylekit-accessory-tint-color-2: #ea6595; + --sn-stylekit-accessory-tint-color-3: #ebad00; + --sn-stylekit-accessory-tint-color-4: #7049cf; + --sn-stylekit-accessory-tint-color-5: #1aa772; + --sn-stylekit-accessory-tint-color-6: #f28c52; +} + +.sn-component { + @import 'panels'; + @import 'menu-panel'; + @import 'ui'; + @import 'app-bar'; + @import 'table'; + @import 'modal'; + @import 'utils'; + @import 'sn'; + @import 'reach-overrides'; + + font-family: var(--sn-stylekit-sans-serif-font); + -webkit-font-smoothing: antialiased; + + &.no-select, + .select-none { + user-select: none; + } + + color: var(--sn-stylekit-foreground-color); +} + +/* Goes outside of .sn-component declaration, as following properties are global */ +input, +textarea, +[contenteditable] { + caret-color: var(--sn-stylekit-editor-foreground-color); +} + +@import 'scrollbar'; diff --git a/packages/styles/src/Styles/utils/_animation.scss b/packages/styles/src/Styles/utils/_animation.scss new file mode 100644 index 000000000..42819767d --- /dev/null +++ b/packages/styles/src/Styles/utils/_animation.scss @@ -0,0 +1,74 @@ +@keyframes slide-down { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.slide-down-animation { + animation: slide-down 0.2s ease; +} + +@keyframes slide-in-right { + 0% { + opacity: 0; + transform: translateX(10px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.slide-in-right-animation { + animation: slide-in-right 0.2s ease; +} + +@keyframes slide-out-left { + 0% { + opacity: 1; + transform: translateX(0); + } + 100% { + opacity: 0; + transform: translateX(-10px); + } +} + +.slide-out-left-animation { + animation: slide-out-left 0.2s ease; +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.fade-out-animation { + animation: fade-out 0.2s ease; +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.fade-in-animation { + animation: fade-in 0.2s ease; +} + +.animation-fill-forwards { + animation-fill-mode: forwards; +} diff --git a/packages/styles/src/Styles/utils/_border.scss b/packages/styles/src/Styles/utils/_border.scss new file mode 100644 index 000000000..912a30f02 --- /dev/null +++ b/packages/styles/src/Styles/utils/_border.scss @@ -0,0 +1,79 @@ +.no-border { + border: none; +} + +.border-0 { + border-width: 0px; +} + +.border-1 { + border-width: 1px; +} + +.border-2 { + border-width: 2px; +} + +.border-b-1 { + border-bottom-width: 1px; +} + +.border-main { + border-color: var(--sn-stylekit-border-color); +} + +.border-background { + border-color: var(--sn-stylekit-background-color); +} + +.border-transparent { + border-color: transparent; +} + +.border-info { + border-color: var(--sn-stylekit-info-color); +} + +.border-neutral { + border-color: var(--sn-stylekit-neutral-color); +} + +.border-rounded-md { + border-radius: 0.375rem; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-full { + border-radius: 9999px; +} + +.border-solid { + border-style: solid; +} + +.border-bottom-solid { + border-bottom-style: solid; +} + +.border-box { + box-sizing: border-box; +} + +.ring-info { + box-shadow: 0 0 0 2px var(--sn-stylekit-info-color); +} + +.inner-ring-info { + box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color); +} + +.shadow-overlay { + box-shadow: 0px 4px 24px 0px #00000029; +} + +.border-bottom-1-gray { + border-bottom-color: var(--sn-stylekit-border-color); +} diff --git a/packages/styles/src/Styles/utils/_color.scss b/packages/styles/src/Styles/utils/_color.scss new file mode 100644 index 000000000..54d38ce13 --- /dev/null +++ b/packages/styles/src/Styles/utils/_color.scss @@ -0,0 +1,70 @@ +.bg-default { + background-color: var(--sn-stylekit-background-color); +} + +.bg-contrast { + background-color: var(--sn-stylekit-contrast-background-color); +} + +.bg-border { + background-color: var(--sn-stylekit-border-color); +} + +.bg-secondary-contrast { + background-color: var(--sn-stylekit-secondary-contrast-background-color); +} + +.bg-clip-padding { + background-clip: padding-box; +} + +.bg-transparent { + background-color: transparent; +} + +@mixin define-color($name, $source: null) { + .bg-#{$name} { + background-color: var(--sn-stylekit-#{if($source, $source, $name)}); + } + + .color-#{$name} { + color: var(--sn-stylekit-#{if($source, $source, $name)}); + } +} + +@include define-color('neutral', 'neutral-color'); +@include define-color('text', 'contrast-foreground-color'); +@include define-color('foreground', 'foreground-color'); +@include define-color('danger', 'danger-color'); +@include define-color('info', 'info-color'); +@include define-color('info-contrast', 'info-contrast-color'); +@include define-color('info-dark', 'info-color-darkened'); +@include define-color('success', 'success-color'); + +@include define-color('passive-0', 'passive-color-0'); +@include define-color('passive-1', 'passive-color-1'); +@include define-color('passive-2', 'passive-color-2'); +@include define-color('passive-3', 'passive-color-3'); +@include define-color('passive-4', 'passive-color-4'); +@include define-color('passive-4-opacity-variant', 'passive-color-4-opacity-variant'); +@include define-color('passive-5', 'passive-color-5'); +@include define-color('passive-6', 'passive-color-6'); +@include define-color('passive-super-light', 'passive-color-super-light'); + +@for $i from 1 to 7 { + @include define-color('accessory-tint-#{$i}', 'accessory-tint-color-#{$i}'); +} + +.selected\:bg-color[data-selected], +.selected\:bg-color[aria-selected='true'] { + background-color: var(--sn-stylekit-passive-color-5); +} + +.selected\:fg-color[data-selected], +.selected\:fg-color[aria-selected='true'] { + color: var(--sn-stylekit-contrast-foreground-color); +} + +.fill-current { + fill: currentColor; +} diff --git a/packages/styles/src/Styles/utils/_cursor.scss b/packages/styles/src/Styles/utils/_cursor.scss new file mode 100644 index 000000000..70074d600 --- /dev/null +++ b/packages/styles/src/Styles/utils/_cursor.scss @@ -0,0 +1,3 @@ +.cursor-pointer { + cursor: pointer; +} diff --git a/packages/styles/src/Styles/utils/_display.scss b/packages/styles/src/Styles/utils/_display.scss new file mode 100644 index 000000000..7931f0c98 --- /dev/null +++ b/packages/styles/src/Styles/utils/_display.scss @@ -0,0 +1,118 @@ +.inline-flex { + display: inline-flex; +} + +.block { + display: block; +} + +.flex { + display: flex; +} + +.flex-col { + flex-direction: column; +} + +.flex-row { + flex-direction: row; +} + +.flex-grow { + flex-grow: 1; +} + +.flex-shrink { + flex-shrink: 1; +} + +.flex-shrink-0 { + flex-shrink: 0; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.grid { + display: grid; +} + +.items-center { + align-items: center; +} +.items-start { + align-items: flex-start; +} +.items-end { + align-items: flex-end; +} +.items-stretch { + align-items: stretch; +} + +.justify-center { + justify-content: center; +} +.justify-between { + justify-content: space-between; +} +.justify-start { + justify-content: flex-start; +} +.justify-end { + justify-content: flex-end; +} + +.gap-1 { + grid-gap: 0.25rem; + gap: 0.25rem; +} +.gap-2 { + grid-gap: 0.5rem; + gap: 0.5rem; +} +.gap-3 { + grid-gap: 0.75rem; + gap: 0.75rem; +} +.gap-4 { + grid-gap: 1rem; + gap: 1rem; +} + +.absolute { + position: absolute; +} +.fixed { + position: fixed; +} + +.cursor-pointer { + cursor: pointer; +} + +.origin-top-right { + transform-origin: top right; +} + +.overflow-auto { + overflow: auto; +} +.overflow-y-auto { + overflow-y: auto; +} +.overflow-hidden { + overflow: hidden; +} +.overflow-ellipsis { + text-overflow: ellipsis; +} + +.flex-basis-55 { + flex-basis: 13.75rem; +} + +.opacity-0 { + opacity: 0; +} diff --git a/packages/styles/src/Styles/utils/_height.scss b/packages/styles/src/Styles/utils/_height.scss new file mode 100644 index 000000000..fbe856051 --- /dev/null +++ b/packages/styles/src/Styles/utils/_height.scss @@ -0,0 +1,84 @@ +.h-auto { + height: auto; +} + +.h-full { + height: 100%; +} + +.h-100vh { + height: 100vh; +} + +.h-90vh { + height: 90vh; +} + +.h-0 { + height: 0; +} +.h-2 { + height: 0.5rem; +} +.h-3\.5 { + height: 0.875rem; +} +.h-4 { + height: 1rem; +} +.h-4\.5 { + height: 1.125rem; +} +.h-5 { + height: 1.25rem; +} +.h-6 { + height: 1.5rem; +} +.h-7 { + height: 1.75rem; +} +.h-8 { + height: 2rem; +} +.h-9 { + height: 2.25rem; +} +.h-10 { + height: 2.5rem; +} +.h-14 { + height: 3.5rem; +} +.h-18 { + height: 4.5rem; +} +.h-25 { + height: 6.25rem; +} + +.h-1px { + height: 1px; +} +.h-20px { + height: 20px; +} + +.min-h-0 { + min-height: 0; +} + +.min-h-5 { + min-height: 1.25rem; +} +.m-h-32 { + min-height: 2rem; +} + +.min-h-20px { + height: 20px; +} + +.max-h-120 { + max-height: 30rem; +} diff --git a/packages/styles/src/Styles/utils/_hover_focus.scss b/packages/styles/src/Styles/utils/_hover_focus.scss new file mode 100644 index 000000000..a5fe24f55 --- /dev/null +++ b/packages/styles/src/Styles/utils/_hover_focus.scss @@ -0,0 +1,101 @@ +.hover\:bg-passive-3:hover { + background-color: var(--sn-stylekit-passive-color-3); +} + +.hover\:brightness-130:hover { + filter: brightness(130%); +} + +.focus\:brightness-130:focus { + filter: brightness(130%); +} + +.hover\:bg-highlight:hover { + background-color: var(--sn-stylekit-passive-color-5); +} + +.focus\:bg-highlight:focus { + background-color: var(--sn-stylekit-passive-color-5); +} + +.hover\:bg-contrast:hover { + @extend .bg-contrast; +} + +.hover\:bg-info-dark:hover { + @extend .bg-info-dark; +} +.focus\:bg-info-dark:focus { + @extend .bg-info-dark; +} + +.focus\:padded-ring-info:focus { + box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color); +} + +.focus\:border-bottom:focus { + border-bottom: 2px solid var(--sn-stylekit-info-color); +} + +.focus-within\:padded-ring-info:focus-within { + box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color); +} + +.focus-within\:border-background:focus-within { + border-color: var(--sn-stylekit-background-color); +} + +.box-shadow, +.box-shadow:focus, +.box-shadow:focus-within { + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04); +} + +.focus\:bg-contrast:focus { + @extend .bg-contrast; +} + +.hover\:color-text:hover { + @extend .color-text; +} + +.focus\:color-text:focus { + @extend .color-text; +} + +.hover\:bg-secondary-contrast:hover { + @extend .bg-secondary-contrast; +} + +.focus\:bg-secondary-contrast:focus { + @extend .bg-secondary-contrast; +} + +.focus\:inner-ring-info:focus { + @extend .inner-ring-info; +} + +.focus\:ring-info:focus { + @extend .ring-info; +} + +.focus-within\:ring-info:focus-within { + @extend .ring-info; +} + +/** + * Do not use these rules without explicitly handling focus in a different + * way, otherwise keyboard focus will break. + */ +.focus\:outline-none:focus { + outline: none; +} +.focus\:shadow-none:focus { + box-shadow: none; +} +.focus-within\:outline-none:focus-within { + outline: none; +} +.focus-within\:shadow-none:focus-within { + box-shadow: none; +} diff --git a/packages/styles/src/Styles/utils/_margin.scss b/packages/styles/src/Styles/utils/_margin.scss new file mode 100644 index 000000000..2406b13ce --- /dev/null +++ b/packages/styles/src/Styles/utils/_margin.scss @@ -0,0 +1,86 @@ +.m-0 { + margin: 0; +} + +.my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + +.-mt-1 { + margin-top: -0.25rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.mt-3 { + margin-top: 0.75rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.mb-1 { + margin-bottom: 0.25rem; +} + +.mb-3 { + margin-bottom: 0.75rem; +} + +.-mr-2 { + margin-right: -0.5rem; +} + +.mr-1 { + margin-right: 0.25rem; +} + +.mr-1\.5 { + margin-right: 0.375rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.mr-10 { + margin-right: 2.5rem; +} + +.ml-1 { + margin-left: 0.25rem; +} + +.ml-1\.5 { + margin-left: 0.375rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.ml-4 { + margin-left: 1rem; +} + +.ml-6 { + margin-left: 1.5rem; +} diff --git a/packages/styles/src/Styles/utils/_padding.scss b/packages/styles/src/Styles/utils/_padding.scss new file mode 100644 index 000000000..ff0c0c486 --- /dev/null +++ b/packages/styles/src/Styles/utils/_padding.scss @@ -0,0 +1,103 @@ +.p-0 { + padding-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; +} + +.p-2 { + padding: 0.5rem; +} + +.p-3 { + padding: 0.75rem; +} + +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.py-1\.75 { + padding-top: 0.4375rem; + padding-bottom: 0.4375rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-3\.5 { + padding-left: 0.875rem; + padding-right: 0.875rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.pt-4 { + padding-top: 1rem; +} + +.pb-3 { + padding-bottom: 0.75rem; +} + +.pr-2 { + padding-right: 0.5rem; +} + +.pl-1 { + padding-left: 0.25rem; +} + +.pl-3 { + padding-left: 0.75rem; +} diff --git a/packages/styles/src/Styles/utils/_position.scss b/packages/styles/src/Styles/utils/_position.scss new file mode 100644 index 000000000..5e947efd1 --- /dev/null +++ b/packages/styles/src/Styles/utils/_position.scss @@ -0,0 +1,40 @@ +.top-0 { + top: 0; +} + +.left-0 { + left: 0; +} + +.bottom-0 { + bottom: 0; +} + +.bottom-6 { + bottom: 1.5rem; +} + +.right-0 { + right: 0; +} + +.right-6 { + right: 1.5rem; +} + +.top-left-0 { + @extend .top-0; + @extend .left-0; +} + +.-top-10 { + top: -2.5rem; +} + +.-left-51 { + left: -12.75rem; +} + +.z-index-toast { + z-index: 11000; +} diff --git a/packages/styles/src/Styles/utils/_transition.scss b/packages/styles/src/Styles/utils/_transition.scss new file mode 100644 index 000000000..4971b05e4 --- /dev/null +++ b/packages/styles/src/Styles/utils/_transition.scss @@ -0,0 +1,15 @@ +.duration-150 { + transition-duration: 150ms; +} + +.ease-out { + transition-timing-function: ease-out; +} + +.transition-background { + transition-property: background; +} + +.transition-transform { + transition-property: transform; +} diff --git a/packages/styles/src/Styles/utils/_typography.scss b/packages/styles/src/Styles/utils/_typography.scss new file mode 100644 index 000000000..0131808a0 --- /dev/null +++ b/packages/styles/src/Styles/utils/_typography.scss @@ -0,0 +1,73 @@ +.capitalize { + text-transform: capitalize; +} + +.font-normal { + font-weight: 300; +} + +.font-semibold { + font-weight: 600; +} + +.font-bold { + font-weight: 700; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-input { + font-size: 0.875rem; + line-height: 1.125rem; +} + +.text-base { + font-size: 1rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.font-medium { + font-weight: 500; +} + +.leading-4 { + line-height: 1rem; +} + +.whitespace-pre-wrap { + white-space: pre-wrap; +} + +.whitespace-nowrap { + white-space: nowrap; +} diff --git a/packages/styles/src/Styles/utils/_width.scss b/packages/styles/src/Styles/utils/_width.scss new file mode 100644 index 000000000..0112e88af --- /dev/null +++ b/packages/styles/src/Styles/utils/_width.scss @@ -0,0 +1,128 @@ +.w-auto { + width: auto; +} + +.w-full { + width: 100%; +} + +.w-100vw { + width: 100vw; +} + +.fit-content { + width: -moz-fit-content; + width: fit-content; +} + +.w-0 { + width: 0; +} +.w-2 { + width: 0.5rem; +} +.w-3\.5 { + width: 0.875rem; +} +.w-4 { + width: 1rem; +} +.w-5 { + width: 1.25rem; +} +.w-8 { + width: 2rem; +} +.w-25 { + width: 6.25rem; +} +.w-30 { + width: 7.5rem; +} +.w-55 { + width: 13.75rem; +} +.w-56 { + width: 14rem; +} +.w-70 { + width: 17.5rem; +} +.w-80 { + width: 20rem; +} +.w-103 { + width: 25.75rem; +} +.w-125 { + width: 31.25rem; +} +.w-160 { + width: 40rem; +} + +.w-20px { + width: 20px; +} + +.min-w-265px { + min-width: 265px; +} + +.min-w-20px { + min-width: 20px; +} + +.min-w-0 { + min-width: 0; +} +.min-w-4 { + min-width: 1rem; +} +.min-w-5 { + min-width: 1.25rem; +} +.min-w-8 { + min-width: 2rem; +} +.min-w-20 { + min-width: 5rem; +} +.min-w-40 { + min-width: 10rem; +} +.min-w-42 { + min-width: 10.5rem; +} +.min-w-55 { + min-width: 13.75rem; +} +.min-w-80 { + min-width: 20rem; +} +.min-w-max { + min-width: max-content; +} + +.max-w-xs { + max-width: 20rem; +} +.max-w-md { + max-width: 28rem; +} + +.max-w-40 { + max-width: 10rem; +} + +.max-w-80 { + max-width: 20rem; +} + +.max-w-125 { + max-width: 31.25rem; +} + +.max-w-290px { + max-width: 290px; +} diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts new file mode 100644 index 000000000..9e46ff112 --- /dev/null +++ b/packages/styles/src/index.ts @@ -0,0 +1 @@ +export * from './Alert/Alert' diff --git a/packages/styles/tsconfig.json b/packages/styles/tsconfig.json new file mode 100644 index 000000000..d45ccebf8 --- /dev/null +++ b/packages/styles/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../node_modules/@standardnotes/config/src/tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "rootDir": "src", + "outDir": "dist", + "jsx": "react-jsx", + "skipLibCheck": true, + "module": "es2022" + }, + "include": ["src"], + "exclude": ["dist", "node_modules"] +} diff --git a/packages/styles/webpack.config.js b/packages/styles/webpack.config.js new file mode 100644 index 000000000..80f6c333b --- /dev/null +++ b/packages/styles/webpack.config.js @@ -0,0 +1,49 @@ +const path = require('path') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') + +module.exports = (_, { mode }) => ({ + entry: { + styles: path.resolve(__dirname, 'src/Styles/main.scss'), + }, + output: { + path: path.resolve(__dirname, 'dist'), + }, + optimization: { + minimize: false, + splitChunks: { + cacheGroups: { + styles: { + name: 'styles', + type: 'css/mini-extract', + chunks: 'all', + enforce: true, + }, + }, + }, + }, + module: { + rules: [ + { + test: /\.(scss|css)$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'sass-loader', + options: { + sassOptions: { + outputStyle: 'expanded', + }, + }, + }, + ], + }, + ], + }, + + plugins: [ + new MiniCssExtractPlugin({ + filename: 'stylekit.css', + }), + ], +}) diff --git a/packages/toast/.eslintrc b/packages/toast/.eslintrc.json similarity index 100% rename from packages/toast/.eslintrc rename to packages/toast/.eslintrc.json diff --git a/packages/web/jest.config.js b/packages/web/jest.config.js index 786b3ea5d..45a071899 100644 --- a/packages/web/jest.config.js +++ b/packages/web/jest.config.js @@ -13,10 +13,10 @@ module.exports = { }), '\\.(css|less|scss|sass)$': 'identity-obj-proxy', '@standardnotes/toast': 'identity-obj-proxy', + '@standardnotes/styles': 'identity-obj-proxy', }, globals: { __WEB_VERSION__: '1.0.0', - self: {}, // fixes error happening on `import { SKAlert } from 'sn-stylekit'` }, transform: { '^.+\\.(ts|tsx)?$': 'ts-jest', diff --git a/packages/web/package.json b/packages/web/package.json index b343409bb..24bebfa48 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -72,7 +72,7 @@ "@standardnotes/services": "^1.13.11", "@standardnotes/sncrypto-web": "1.10.1", "@standardnotes/snjs": "^2.115.6", - "@standardnotes/stylekit": "5.29.3", + "@standardnotes/styles": "1.0.0", "@standardnotes/toast": "1.0.0", "@zip.js/zip.js": "^2.4.10", "mobx": "^6.5.0", diff --git a/packages/web/src/javascripts/Services/AlertService.ts b/packages/web/src/javascripts/Services/AlertService.ts index 125374d56..22af51002 100644 --- a/packages/web/src/javascripts/Services/AlertService.ts +++ b/packages/web/src/javascripts/Services/AlertService.ts @@ -1,6 +1,6 @@ import { ButtonType, sanitizeHtmlString } from '@standardnotes/snjs' import { AlertService } from '@standardnotes/services' -import { SKAlert } from '@standardnotes/stylekit' +import { SKAlert } from '@standardnotes/styles' /** @returns a promise resolving to true if the user confirmed, false if they canceled */ export function confirmDialog({ diff --git a/packages/web/src/stylesheets/index.css.scss b/packages/web/src/stylesheets/index.css.scss index 994fe4548..d89849cd6 100644 --- a/packages/web/src/stylesheets/index.css.scss +++ b/packages/web/src/stylesheets/index.css.scss @@ -1,4 +1,4 @@ -@import '@standardnotes/stylekit/dist/stylekit'; +@import '../../../styles/src/Styles/main.scss'; @import 'theme'; @import 'main'; @import 'ui'; diff --git a/yarn.lock b/yarn.lock index 50a688c5e..2a420db2f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2517,14 +2517,6 @@ "@reach/utils" "0.16.0" tslib "^2.3.0" -"@reach/auto-id@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.17.0.tgz#60cce65eb7a0d6de605820727f00dfe2b03b5f17" - integrity sha512-ud8iPwF52RVzEmkHq1twuqGuPA+moreumUHdtgvU3sr3/15BNhwp3KyDLrKKSz0LP1r3V4pSdyF9MbYM8BoSjA== - dependencies: - "@reach/utils" "0.17.0" - tslib "^2.3.0" - "@reach/checkbox@^0.16.0": version "0.16.0" resolved "https://registry.yarnpkg.com/@reach/checkbox/-/checkbox-0.16.0.tgz#198223a14182f318fdbd01289a2073e191f878cc" @@ -2545,14 +2537,6 @@ "@reach/utils" "0.16.0" tslib "^2.3.0" -"@reach/descendants@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.17.0.tgz#3fb087125a67870acd4dee1528449ed546829b67" - integrity sha512-c7lUaBfjgcmKFZiAWqhG+VnXDMEhPkI4kAav/82XKZD6NVvFjsQOTH+v3tUkskrAPV44Yuch0mFW/u5Ntifr7Q== - dependencies: - "@reach/utils" "0.17.0" - tslib "^2.3.0" - "@reach/dialog@0.16.2", "@reach/dialog@^0.16.2": version "0.16.2" resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.16.2.tgz#567e6f59d0a6dabe84b2ba4c456404efa6cb7d03" @@ -2576,17 +2560,6 @@ tiny-warning "^1.0.3" tslib "^2.3.0" -"@reach/dropdown@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/dropdown/-/dropdown-0.17.0.tgz#8140bb2e6a045f91e07c6d5a6ff960958df2ef33" - integrity sha512-qBTIGInhxtPHtdj4Pl2XZgZMz3e37liydh0xR3qc48syu7g71sL4nqyKjOzThykyfhA3Pb3/wFgsFJKGTSdaig== - dependencies: - "@reach/auto-id" "0.17.0" - "@reach/descendants" "0.17.0" - "@reach/popover" "0.17.0" - "@reach/utils" "0.17.0" - tslib "^2.3.0" - "@reach/listbox@^0.16.2": version "0.16.2" resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.16.2.tgz#2ed4b30ebdf9ce0addffb0207f843b8232a7db1c" @@ -2599,18 +2572,6 @@ "@reach/utils" "0.16.0" prop-types "^15.7.2" -"@reach/listbox@^0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.17.0.tgz#e709f31056bb77781e74c9f0b69bf9ec8efbbc8b" - integrity sha512-AMnH1P6/3VKy2V/nPb4Es441arYR+t4YRdh9jdcFVrCOD6y7CQrlmxsYjeg9Ocdz08XpdoEBHM3PKLJqNAUr7A== - dependencies: - "@reach/auto-id" "0.17.0" - "@reach/descendants" "0.17.0" - "@reach/machine" "0.17.0" - "@reach/popover" "0.17.0" - "@reach/utils" "0.17.0" - prop-types "^15.7.2" - "@reach/machine@0.16.0": version "0.16.0" resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3" @@ -2620,27 +2581,6 @@ "@xstate/fsm" "1.4.0" tslib "^2.3.0" -"@reach/machine@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.17.0.tgz#4e4bbf66e3c3934e65243485ac84f6f8fa3d9a24" - integrity sha512-9EHnuPgXzkbRENvRUzJvVvYt+C2jp7PGN0xon7ffmKoK8rTO6eA/bb7P0xgloyDDQtu88TBUXKzW0uASqhTXGA== - dependencies: - "@reach/utils" "0.17.0" - "@xstate/fsm" "1.4.0" - tslib "^2.3.0" - -"@reach/menu-button@^0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.17.0.tgz#9f40979129b61f8bdc19590c527f7ed4883d2dce" - integrity sha512-YyuYVyMZKamPtivoEI6D0UEILYH3qZtg4kJzEAuzPmoR/aHN66NZO75Fx0gtjG1S6fZfbiARaCOZJC0VEiDOtQ== - dependencies: - "@reach/dropdown" "0.17.0" - "@reach/popover" "0.17.0" - "@reach/utils" "0.17.0" - prop-types "^15.7.2" - tiny-warning "^1.0.3" - tslib "^2.3.0" - "@reach/observe-rect@1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2" @@ -2657,17 +2597,6 @@ tabbable "^4.0.0" tslib "^2.3.0" -"@reach/popover@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.17.0.tgz#feda6961f37d17b8738d2d52af6bfc5c4584464f" - integrity sha512-yYbBF4fMz4Ml4LB3agobZjcZ/oPtPsNv70ZAd7lEC2h7cvhF453pA+zOBGYTPGupKaeBvgAnrMjj7RnxDU5hoQ== - dependencies: - "@reach/portal" "0.17.0" - "@reach/rect" "0.17.0" - "@reach/utils" "0.17.0" - tabbable "^4.0.0" - tslib "^2.3.0" - "@reach/portal@0.16.2": version "0.16.2" resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64" @@ -2677,15 +2606,6 @@ tiny-warning "^1.0.3" tslib "^2.3.0" -"@reach/portal@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.17.0.tgz#1dd69ffc8ffc8ba3e26dd127bf1cc4b15f0c6bdc" - integrity sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A== - dependencies: - "@reach/utils" "0.17.0" - tiny-warning "^1.0.3" - tslib "^2.3.0" - "@reach/rect@0.16.0": version "0.16.0" resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16" @@ -2697,17 +2617,6 @@ tiny-warning "^1.0.3" tslib "^2.3.0" -"@reach/rect@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.17.0.tgz#804f0cfb211e0beb81632c64d4532ec9d1d73c48" - integrity sha512-3YB7KA5cLjbLc20bmPkJ06DIfXSK06Cb5BbD2dHgKXjUkT9WjZaLYIbYCO8dVjwcyO3GCNfOmPxy62VsPmZwYA== - dependencies: - "@reach/observe-rect" "1.2.0" - "@reach/utils" "0.17.0" - prop-types "^15.7.2" - tiny-warning "^1.0.3" - tslib "^2.3.0" - "@reach/tooltip@^0.16.2": version "0.16.2" resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.16.2.tgz#8448cee341476e4f795fa7192f7a0864f06b8085" @@ -2730,14 +2639,6 @@ tiny-warning "^1.0.3" tslib "^2.3.0" -"@reach/utils@0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303" - integrity sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA== - dependencies: - tiny-warning "^1.0.3" - tslib "^2.3.0" - "@reach/visually-hidden@0.16.0", "@reach/visually-hidden@^0.16.0": version "0.16.0" resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.16.0.tgz#2a5e834af9e93c554065ff8cbb0907fbeb26ad02" @@ -2944,19 +2845,6 @@ "@standardnotes/sncrypto-common" "^1.9.0" "@standardnotes/utils" "^1.6.10" -"@standardnotes/stylekit@5.29.3": - version "5.29.3" - resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.29.3.tgz#8db39196d99ee4039eff5bf0d1bd408c4892e39b" - integrity sha512-BMJE+YEbC4xOvSXlUx23FAnoNtrVLW2Thcf2wkkF9lpc8ZbQJAF5Np7mcmtgBRFyR8apbz2jEVFaq7pYPOeVKg== - dependencies: - "@nanostores/react" "^0.2.0" - "@reach/listbox" "^0.17.0" - "@reach/menu-button" "^0.17.0" - "@standardnotes/icons" "^1.1.8" - nanoid "^3.3.4" - nanostores "^0.5.12" - prop-types "^15.8.1" - "@standardnotes/utils@^1.6.10": version "1.6.10" resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.10.tgz#25816fd072ebe4b0e83585237bfd7ba528b4faef" @@ -5582,6 +5470,20 @@ css-loader@^6.7.1: postcss-value-parser "^4.2.0" semver "^7.3.5" +css-loader@~6.6.0: + version "6.6.0" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.6.0.tgz#c792ad5510bd1712618b49381bd0310574fafbd3" + integrity sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg== + dependencies: + icss-utils "^5.1.0" + postcss "^8.4.5" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.0" + postcss-modules-scope "^3.0.0" + postcss-modules-values "^4.0.0" + postcss-value-parser "^4.2.0" + semver "^7.3.5" + css-select@^4.1.3: version "4.3.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b" @@ -10137,7 +10039,7 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-css-extract-plugin@^2.6.0: +mini-css-extract-plugin@^2.5.3, mini-css-extract-plugin@^2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e" integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w== @@ -11595,7 +11497,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.4.7: +postcss@^8.4.5, postcss@^8.4.7: version "8.4.14" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf" integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig== @@ -13412,6 +13314,11 @@ strong-log-transformer@^2.0.0: minimist "^1.2.0" through "^2.3.4" +style-loader@~3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575" + integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ== + sumchecker@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42" @@ -14381,7 +14288,7 @@ webpack-sources@^3.2.3: resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== -webpack@^5.72.0: +webpack@^5.69.1, webpack@^5.72.0: version "5.73.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.73.0.tgz#bbd17738f8a53ee5760ea2f59dce7f3431d35d38" integrity sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==