From e396aae21f15e36c122b6442fc0ce074da6f57f9 Mon Sep 17 00:00:00 2001 From: Cameron Koegel <53310569+ckoegel@users.noreply.github.com> Date: Thu, 5 Dec 2024 14:59:06 -0500 Subject: [PATCH] SWI-4827 Update Prism and Add `read-only` Label (#38) * update prism syntax highlighting * add label for `read-only` property * snapshots --- src/common-elements/PrismDiv.tsx | 407 +++++++++++++++--- src/common-elements/fields.ts | 10 + src/components/Fields/Field.tsx | 3 + .../DiscriminatorDropdown.test.tsx.snap | 190 +------- .../__snapshots__/FieldDetails.test.tsx.snap | 26 +- .../__snapshots__/OneOfSchema.test.tsx.snap | 2 +- .../SecurityRequirement.test.tsx.snap | 26 +- src/theme.ts | 20 +- 8 files changed, 405 insertions(+), 279 deletions(-) diff --git a/src/common-elements/PrismDiv.tsx b/src/common-elements/PrismDiv.tsx index c5b6b06ea5..b7f19cea43 100644 --- a/src/common-elements/PrismDiv.tsx +++ b/src/common-elements/PrismDiv.tsx @@ -2,36 +2,45 @@ import styled, { extensionsHook } from '../styled-components'; export const PrismDiv = styled.div` /** - * Based on prism-dark.css + * Taken from prism-one-dark.css */ code[class*='language-'], pre[class*='language-'] { - /* color: white; - background: none; */ - text-shadow: 0 -0.1em 0.2em black; + background: hsl(220, 13%, 18%); + color: hsl(220, 14%, 71%); + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; - word-wrap: normal; line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } - @media print { - code[class*='language-'], - pre[class*='language-'] { - text-shadow: none; - } + /* Selection */ + code[class*='language-']::-moz-selection, + code[class*='language-'] *::-moz-selection, + pre[class*='language-'] *::-moz-selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; + } + + code[class*='language-']::selection, + code[class*='language-'] *::selection, + pre[class*='language-'] *::selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; } /* Code blocks */ @@ -39,75 +48,175 @@ export const PrismDiv = styled.div` padding: 1em; margin: 0.5em 0; overflow: auto; + border-radius: 0.3em; + } + + /* Inline code */ + :not(pre) > code[class*='language-'] { + padding: 0.2em 0.3em; + border-radius: 0.3em; + white-space: normal; + } + + /* Print */ + @media print { + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } } .token.comment, .token.prolog, - .token.doctype, .token.cdata { - color: hsl(30, 20%, 50%); + color: hsl(220, 10%, 40%); } - .token.punctuation { - opacity: 0.7; + .token.doctype, + .token.punctuation, + .token.entity { + color: hsl(220, 14%, 71%); } - .namespace { - opacity: 0.7; + .token.attr-name, + .token.class-name, + .token.boolean, + .token.constant, + .token.number, + .token.atrule { + color: hsl(29, 54%, 61%); } - .token.property, - .token.tag, - .token.number, - .token.constant, - .token.symbol { - color: #4a8bb3; + .token.keyword { + color: hsl(286, 60%, 67%); } - .token.boolean { - color: #e64441; + .token.property, + .token.tag, + .token.symbol, + .token.deleted, + .token.important { + color: hsl(355, 65%, 65%); } .token.selector, - .token.attr-name, .token.string, .token.char, .token.builtin, - .token.inserted { - color: #a0fbaa; - & + a, - & + a:visited { - color: #4ed2ba; - text-decoration: underline; - } + .token.inserted, + .token.regex, + .token.attr-value, + .token.attr-value > .token.punctuation { + color: hsl(95, 38%, 62%); } - .token.property.string { - color: white; + .token.variable, + .token.operator, + .token.function { + color: hsl(207, 82%, 66%); } - .token.operator, - .token.entity, - .token.url, - .token.variable { - color: hsl(40, 90%, 60%); + .token.url { + color: hsl(187, 47%, 55%); } - .token.atrule, - .token.attr-value, - .token.keyword { - color: hsl(350, 40%, 70%); + /* HTML overrides */ + .token.attr-value > .token.punctuation.attr-equals, + .token.special-attr > .token.attr-value > .token.value.css { + color: hsl(220, 14%, 71%); } - .token.regex, - .token.important { - color: #e90; + /* CSS overrides */ + .language-css .token.selector { + color: hsl(355, 65%, 65%); + } + + .language-css .token.property { + color: hsl(220, 14%, 71%); + } + + .language-css .token.function, + .language-css .token.url > .token.function { + color: hsl(187, 47%, 55%); + } + + .language-css .token.url > .token.string.url { + color: hsl(95, 38%, 62%); + } + + .language-css .token.important, + .language-css .token.atrule .token.rule { + color: hsl(286, 60%, 67%); + } + + /* JS overrides */ + .language-javascript .token.operator { + color: hsl(286, 60%, 67%); + } + + .language-javascript + .token.template-string + > .token.interpolation + > .token.interpolation-punctuation.punctuation { + color: hsl(5, 48%, 51%); + } + + /* JSON overrides */ + .language-json .token.operator { + color: hsl(220, 14%, 71%); + } + + .language-json .token.null.keyword { + color: hsl(29, 54%, 61%); + } + + /* MD overrides */ + .language-markdown .token.url, + .language-markdown .token.url > .token.operator, + .language-markdown .token.url-reference.url > .token.string { + color: hsl(220, 14%, 71%); + } + + .language-markdown .token.url > .token.content { + color: hsl(207, 82%, 66%); + } + + .language-markdown .token.url > .token.url, + .language-markdown .token.url-reference.url { + color: hsl(187, 47%, 55%); + } + + .language-markdown .token.blockquote.punctuation, + .language-markdown .token.hr.punctuation { + color: hsl(220, 10%, 40%); + font-style: italic; + } + + .language-markdown .token.code-snippet { + color: hsl(95, 38%, 62%); + } + + .language-markdown .token.bold .token.content { + color: hsl(29, 54%, 61%); + } + + .language-markdown .token.italic .token.content { + color: hsl(286, 60%, 67%); + } + + .language-markdown .token.strike .token.content, + .language-markdown .token.strike .token.punctuation, + .language-markdown .token.list.punctuation, + .language-markdown .token.title.important > .token.punctuation { + color: hsl(355, 65%, 65%); } - .token.important, + /* General */ .token.bold { font-weight: bold; } + + .token.comment, .token.italic { font-style: italic; } @@ -116,8 +225,198 @@ export const PrismDiv = styled.div` cursor: help; } - .token.deleted { - color: red; + .token.namespace { + opacity: 0.8; + } + + /* Plugin overrides */ + /* Selectors should have higher specificity than those in the plugins' default stylesheets */ + + /* Show Invisibles plugin overrides */ + .token.token.tab:not(:empty):before, + .token.token.cr:before, + .token.token.lf:before, + .token.token.space:before { + color: hsla(220, 14%, 71%, 0.15); + text-shadow: none; + } + + /* Toolbar plugin overrides */ + /* Space out all buttons and move them away from the right edge of the code block */ + div.code-toolbar > .toolbar.toolbar > .toolbar-item { + margin-right: 0.4em; + } + + /* Styling the buttons */ + div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { + background: hsl(220, 13%, 26%); + color: hsl(220, 9%, 55%); + padding: 0.1em 0.4em; + border-radius: 0.3em; + } + + div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, + div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { + background: hsl(220, 13%, 28%); + color: hsl(220, 14%, 71%); + } + + /* Line Highlight plugin overrides */ + /* The highlighted line itself */ + .line-highlight.line-highlight { + background: hsla(220, 100%, 80%, 0.04); + } + + /* Default line numbers in Line Highlight plugin */ + .line-highlight.line-highlight:before, + .line-highlight.line-highlight[data-end]:after { + background: hsl(220, 13%, 26%); + color: hsl(220, 14%, 71%); + padding: 0.1em 0.6em; + border-radius: 0.3em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ + } + + /* Hovering over a linkable line number (in the gutter area) */ + /* Requires Line Numbers plugin as well */ + pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: hsla(220, 100%, 80%, 0.04); + } + + /* Line Numbers and Command Line plugins overrides */ + /* Line separating gutter from coding area */ + .line-numbers.line-numbers .line-numbers-rows, + .command-line .command-line-prompt { + border-right-color: hsla(220, 14%, 71%, 0.15); + } + + /* Stuff in the gutter */ + .line-numbers .line-numbers-rows > span:before, + .command-line .command-line-prompt > span:before { + color: hsl(220, 14%, 45%); + } + + /* Match Braces plugin overrides */ + /* Note: Outline colour is inherited from the braces */ + .rainbow-braces .token.token.punctuation.brace-level-1, + .rainbow-braces .token.token.punctuation.brace-level-5, + .rainbow-braces .token.token.punctuation.brace-level-9 { + color: hsl(355, 65%, 65%); + } + + .rainbow-braces .token.token.punctuation.brace-level-2, + .rainbow-braces .token.token.punctuation.brace-level-6, + .rainbow-braces .token.token.punctuation.brace-level-10 { + color: hsl(95, 38%, 62%); + } + + .rainbow-braces .token.token.punctuation.brace-level-3, + .rainbow-braces .token.token.punctuation.brace-level-7, + .rainbow-braces .token.token.punctuation.brace-level-11 { + color: hsl(207, 82%, 66%); + } + + .rainbow-braces .token.token.punctuation.brace-level-4, + .rainbow-braces .token.token.punctuation.brace-level-8, + .rainbow-braces .token.token.punctuation.brace-level-12 { + color: hsl(286, 60%, 67%); + } + + /* Diff Highlight plugin overrides */ + /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ + pre.diff-highlight > code .token.token.deleted:not(.prefix), + pre > code.diff-highlight .token.token.deleted:not(.prefix) { + background-color: hsla(353, 100%, 66%, 0.15); + } + + pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, + pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { + background-color: hsla(353, 95%, 66%, 0.25); + } + + pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, + pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, + pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { + background-color: hsla(353, 95%, 66%, 0.25); + } + + pre.diff-highlight > code .token.token.inserted:not(.prefix), + pre > code.diff-highlight .token.token.inserted:not(.prefix) { + background-color: hsla(137, 100%, 55%, 0.15); + } + + pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, + pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { + background-color: hsla(135, 73%, 55%, 0.25); + } + + pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, + pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, + pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { + background-color: hsla(135, 73%, 55%, 0.25); + } + + /* Previewers plugin overrides */ + /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ + /* Border around popup */ + .prism-previewer.prism-previewer:before, + .prism-previewer-gradient.prism-previewer-gradient div { + border-color: hsl(224, 13%, 17%); + } + + /* Angle and time should remain as circles and are hence not included */ + .prism-previewer-color.prism-previewer-color:before, + .prism-previewer-gradient.prism-previewer-gradient div, + .prism-previewer-easing.prism-previewer-easing:before { + border-radius: 0.3em; + } + + /* Triangles pointing to the code */ + .prism-previewer.prism-previewer:after { + border-top-color: hsl(224, 13%, 17%); + } + + .prism-previewer-flipped.prism-previewer-flipped.after { + border-bottom-color: hsl(224, 13%, 17%); + } + + /* Background colour within the popup */ + .prism-previewer-angle.prism-previewer-angle:before, + .prism-previewer-time.prism-previewer-time:before, + .prism-previewer-easing.prism-previewer-easing { + background: hsl(219, 13%, 22%); + } + + /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ + /* For time, this is the alternate colour */ + .prism-previewer-angle.prism-previewer-angle circle, + .prism-previewer-time.prism-previewer-time circle { + stroke: hsl(220, 14%, 71%); + stroke-opacity: 1; + } + + /* Stroke colours of the handle, direction point, and vector itself */ + .prism-previewer-easing.prism-previewer-easing circle, + .prism-previewer-easing.prism-previewer-easing path, + .prism-previewer-easing.prism-previewer-easing line { + stroke: hsl(220, 14%, 71%); + } + + /* Fill colour of the handle */ + .prism-previewer-easing.prism-previewer-easing circle { + fill: transparent; } ${extensionsHook('Prism')}; diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts index 2b41e48035..59b3d301b5 100644 --- a/src/common-elements/fields.ts +++ b/src/common-elements/fields.ts @@ -87,6 +87,16 @@ export const RequiredLabel = styled(FieldLabel).attrs({ line-height: 1; `; +export const ReadOnlyLabel = styled(FieldLabel).attrs({ + as: 'div', +})` + color: ${props => props.theme.schema.readOnlyLabelColor}; + font-size: ${props => props.theme.schema.labelsTextSize}; + font-weight: normal; + margin-left: 20px; + line-height: 1; +`; + export const PropertyLabel = styled(RequiredLabel)` color: ${props => props.theme.colors.primary.light}; `; diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx index 367eae6725..493ca2143f 100644 --- a/src/components/Fields/Field.tsx +++ b/src/components/Fields/Field.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { ClickablePropertyNameCell, PropertyLabel, + ReadOnlyLabel, RequiredLabel, } from '../../common-elements/fields'; import { FieldDetails } from './FieldDetails'; @@ -52,6 +53,7 @@ export class Field extends React.Component { const { className = '', field, isLast, expandByDefault } = this.props; const { name, deprecated, required, kind } = field; const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular; + const readOnly = field.schema?.readOnly; const expanded = field.expanded === undefined ? expandByDefault : field.expanded; @@ -60,6 +62,7 @@ export class Field extends React.Component { {kind === 'additionalProperties' && additional property} {kind === 'patternProperties' && pattern property} {required && required} + {readOnly && read-only} ); diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index a941c7b572..adad16913d 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -135,18 +135,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -201,12 +189,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -248,6 +230,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -425,18 +408,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -491,12 +462,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -538,6 +503,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -702,18 +668,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -768,12 +722,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -815,6 +763,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -1041,18 +990,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -1107,12 +1044,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -1154,6 +1085,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -1343,18 +1275,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -1409,12 +1329,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -1456,6 +1370,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -1616,18 +1531,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -1682,12 +1585,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -1729,6 +1626,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -1914,18 +1812,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -1980,12 +1866,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -2027,6 +1907,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -2242,18 +2123,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -2308,12 +2177,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -2355,6 +2218,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -2532,18 +2396,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -2598,12 +2450,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -2645,6 +2491,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", @@ -2809,18 +2656,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "light": "#eb6d6b", "main": "#d41f1c", }, - "experimental": { - "contrastText": "#fff", - "dark": "#540297", - "light": "#ba68fd", - "main": "#8c03fc", - }, - "global": { - "contrastText": "#fff", - "dark": "#4d02b0", - "light": "#b681fd", - "main": "#7c1cfc", - }, "gray": { "100": "#F5F5F5", "50": "#FAFAFA", @@ -2875,12 +2710,6 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "secondary": "#666", }, "tonalOffset": 0.2, - "usonly": { - "contrastText": "#fff", - "dark": "#045b8b", - "light": "#61c4fa", - "main": "#079cee", - }, "warning": { "contrastText": "#ffffff", "dark": "#996300", @@ -2922,6 +2751,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "linesColor": "#7c7cbb", "nestedBackground": "#fafafa", "nestingSpacing": "1em", + "readOnlyLabelColor": "#87ceeb", "requireLabelColor": "#d41f1c", "typeNameColor": "#666", "typeTitleColor": "#666", diff --git a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap index 7ab290348f..c99e193fe6 100644 --- a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap @@ -25,7 +25,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = ` > @@ -39,7 +39,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = ` [] @@ -53,14 +53,14 @@ exports[`FieldDetailsComponent renders correctly 1`] = ` "example"

test description @@ -95,7 +95,7 @@ exports[`FieldDetailsComponent renders correctly when default value is object in > @@ -109,7 +109,7 @@ exports[`FieldDetailsComponent renders correctly when default value is object in {"properties":{}} @@ -123,14 +123,14 @@ exports[`FieldDetailsComponent renders correctly when default value is object in "example"

test description @@ -165,17 +165,17 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty > [ ^see regex[0-9]$ @@ -191,14 +191,14 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty "example"

test description diff --git a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap index 22b51859a4..11587e6623 100644 --- a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap @@ -48,7 +48,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `

diff --git a/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap b/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap index ac10eb1573..7157274e08 100644 --- a/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap @@ -1,23 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SecurityRequirement should render SecurityDefs 1`] = ` -"

petstore_auth

Get access to data while protecting your account credentials. +"

petstore_auth

Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.

-
Security Scheme Type: OAuth2
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Scopes:
  • write:pets -

    modify pets in your account

    -
  • read:pets -

    read your pets

    -

GitLab_PersonalAccessToken

GitLab Personal Access Token description

-
Security Scheme Type: API Key
Header parameter name: PRIVATE-TOKEN

GitLab_OpenIdConnect

GitLab OpenIdConnect description

-
Security Scheme Type: OpenID Connect
Connect URL: https://gitlab.com/.well-known/openid-configuration

basicAuth

Security Scheme Type: HTTP
HTTP Authorization Scheme: basic
" +
Security Scheme Type: OAuth2
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Scopes:
  • write:pets -

    modify pets in your account

    +
  • read:pets -

    read your pets

    +

GitLab_PersonalAccessToken

GitLab Personal Access Token description

+
Security Scheme Type: API Key
Header parameter name: PRIVATE-TOKEN

GitLab_OpenIdConnect

GitLab OpenIdConnect description

+
Security Scheme Type: OpenID Connect
Connect URL: https://gitlab.com/.well-known/openid-configuration

basicAuth

Security Scheme Type: HTTP
HTTP Authorization Scheme: basic
" `; -exports[`SecurityRequirement should render authDefinition 1`] = `"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth
,"`; +exports[`SecurityRequirement should render authDefinition 1`] = `"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth
,"`; exports[`SecurityRequirement should render authDefinition 2`] = ` -"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. +"

Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.

-
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Required scopes: write:pets read:pets
Scopes:
  • write:pets -

    modify pets in your account

    -
  • read:pets -

    read your pets

    -
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

-
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

-
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," +
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Required scopes: write:pets read:pets
Scopes:
  • write:pets -

    modify pets in your account

    +
  • read:pets -

    read your pets

    +
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

+
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

+
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," `; diff --git a/src/theme.ts b/src/theme.ts index 4fca8a65b3..1a90d871c3 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -37,24 +37,6 @@ const defaultTheme: ThemeInterface = { dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main), contrastText: ({ colors }) => readableColor(colors.error.main), }, - global: { - main: '#7c1cfc', - light: ({ colors }) => lighten(colors.tonalOffset, colors.global.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.global.main), - contrastText: ({ colors }) => readableColor(colors.global.main), - }, - usonly: { - main: '#079cee', - light: ({ colors }) => lighten(colors.tonalOffset, colors.usonly.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.usonly.main), - contrastText: ({ colors }) => readableColor(colors.global.main), - }, - experimental: { - main: '#8c03fc', - light: ({ colors }) => lighten(colors.tonalOffset, colors.experimental.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.experimental.main), - contrastText: ({ colors }) => readableColor(colors.experimental.main), - }, gray: { 50: '#FAFAFA', 100: '#F5F5F5', @@ -111,6 +93,7 @@ const defaultTheme: ThemeInterface = { typeNameColor: theme => theme.colors.text.secondary, typeTitleColor: theme => theme.schema.typeNameColor, requireLabelColor: theme => theme.colors.error.main, + readOnlyLabelColor: theme => theme.colors.responses.info.color, labelsTextSize: '0.9em', nestingSpacing: '1em', nestedBackground: '#fafafa', @@ -324,6 +307,7 @@ export interface ResolvedThemeInterface { typeNameColor: string; typeTitleColor: string; requireLabelColor: string; + readOnlyLabelColor: string; labelsTextSize: string; nestingSpacing: string; nestedBackground: string;