diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/extensions.ts b/plugins/techdocs/src/reader/transformers/styles/rules/extensions.ts new file mode 100644 index 0000000000..403858339e --- /dev/null +++ b/plugins/techdocs/src/reader/transformers/styles/rules/extensions.ts @@ -0,0 +1,91 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { RuleOptions } from './types'; + +export default ({ theme }: RuleOptions) => ` +/*================== Extensions ==================*/ + +/* HIGHLIGHT */ +.highlight .md-clipboard:after { + content: unset; +} + +.highlight .nx { + color: ${theme.palette.type === 'dark' ? '#ff53a3' : '#ec407a'}; +} + +/* CODE HILITE */ +.codehilite .gd { + background-color: ${ + theme.palette.type === 'dark' ? 'rgba(248,81,73,0.65)' : '#fdd' + }; +} + +.codehilite .gi { + background-color: ${ + theme.palette.type === 'dark' ? 'rgba(46,160,67,0.65)' : '#dfd' + }; +} + +/* TABBED */ +.tabbed-set>input:nth-child(1):checked~.tabbed-labels>:nth-child(1), +.tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2), +.tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3), +.tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4), +.tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5), +.tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6), +.tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7), +.tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8), +.tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9), +.tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10), +.tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11), +.tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12), +.tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13), +.tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14), +.tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15), +.tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16), +.tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17), +.tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18), +.tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19), +.tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) { + color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} + +/* TASK-LIST */ +.task-list-control .task-list-indicator::before { + background-color: ${theme.palette.action.disabledBackground}; +} +.task-list-control [type="checkbox"]:checked + .task-list-indicator:before { + background-color: ${theme.palette.success.main}; +} + +/* ADMONITION */ +.admonition { + font-size: var(--md-typeset-font-size) !important; +} +.admonition .admonition-title { + padding-left: 2.5rem !important; +} + +.admonition .admonition-title:before { + top: 50% !important; + width: 20px !important; + height: 20px !important; + transform: translateY(-50%) !important; +} +`;