From 14fb145e00496d72cdcb1b295afa2ce1a403ef7e Mon Sep 17 00:00:00 2001 From: Joshua Melville Date: Mon, 11 Dec 2023 20:20:30 +0200 Subject: [PATCH] update more NC colors and fix external data loading on name generator side panels --- .../CategoricalList/CategoricalList.js | 20 +-- lib/interviewer/containers/NodePanel.js | 83 ++++++------- lib/interviewer/containers/OrdinalBins.js | 2 +- .../containers/withExternalData.js | 63 +++------- lib/interviewer/hooks/useExternalData.js | 4 +- lib/interviewer/selectors/interface.js | 4 +- .../styles/components/_accordion.scss | 23 ++-- .../styles/components/_convex-hull.scss | 4 +- lib/interviewer/styles/components/_list.scss | 2 +- .../styles/components/_node-bucket.scss | 4 +- .../styles/components/_node-list.scss | 2 +- .../styles/components/_switch.scss | 10 +- .../styles/containers/_hyper-list.scss | 2 +- lib/ui/components/Fields/Search.js | 2 +- lib/ui/styles/components/_icons.scss | 8 +- lib/ui/styles/components/_inputs.scss | 12 +- lib/ui/styles/components/_node.scss | 8 +- lib/ui/styles/components/form/_fields.scss | 6 +- .../components/form/fields/_boolean.scss | 20 +-- .../components/form/fields/_checkbox.scss | 28 +++-- .../components/form/fields/_date-picker.scss | 17 +-- .../styles/components/form/fields/_radio.scss | 29 +++-- .../components/form/fields/_rich-text.scss | 23 ++-- .../components/form/fields/_slider.scss | 13 +- .../styles/components/form/fields/_text.scss | 16 +-- .../form/fields/_toggle-button.scss | 20 +-- .../components/form/fields/_toggle.scss | 21 ++-- lib/ui/styles/global/_default.scss | 115 ++++++++++++------ 28 files changed, 305 insertions(+), 256 deletions(-) diff --git a/lib/interviewer/containers/CategoricalList/CategoricalList.js b/lib/interviewer/containers/CategoricalList/CategoricalList.js index 2aee95a3..545977f6 100644 --- a/lib/interviewer/containers/CategoricalList/CategoricalList.js +++ b/lib/interviewer/containers/CategoricalList/CategoricalList.js @@ -39,16 +39,16 @@ class CategoricalList extends Component { // eslint-disable-next-line camelcase UNSAFE_componentWillMount() { this.colorPresets = [ - getCSSVariableAsString('--cat-color-seq-1'), - getCSSVariableAsString('--cat-color-seq-2'), - getCSSVariableAsString('--cat-color-seq-3'), - getCSSVariableAsString('--cat-color-seq-4'), - getCSSVariableAsString('--cat-color-seq-5'), - getCSSVariableAsString('--cat-color-seq-6'), - getCSSVariableAsString('--cat-color-seq-7'), - getCSSVariableAsString('--cat-color-seq-8'), - getCSSVariableAsString('--cat-color-seq-9'), - getCSSVariableAsString('--cat-color-seq-10'), + getCSSVariableAsString('--nc-cat-color-seq-1'), + getCSSVariableAsString('--nc-cat-color-seq-2'), + getCSSVariableAsString('--nc-cat-color-seq-3'), + getCSSVariableAsString('--nc-cat-color-seq-4'), + getCSSVariableAsString('--nc-cat-color-seq-5'), + getCSSVariableAsString('--nc-cat-color-seq-6'), + getCSSVariableAsString('--nc-cat-color-seq-7'), + getCSSVariableAsString('--nc-cat-color-seq-8'), + getCSSVariableAsString('--nc-cat-color-seq-9'), + getCSSVariableAsString('--nc-cat-color-seq-10'), ]; } diff --git a/lib/interviewer/containers/NodePanel.js b/lib/interviewer/containers/NodePanel.js index 3d8df630..90391dc1 100644 --- a/lib/interviewer/containers/NodePanel.js +++ b/lib/interviewer/containers/NodePanel.js @@ -5,6 +5,8 @@ import { entityPrimaryKeyProperty } from '@codaco/shared-consts'; import { makeNetworkNodesForPrompt as makeGetNodesForPrompt, makeNetworkNodesForOtherPrompts as makeGetNodesForOtherPrompts, + getNetworkNodesForPrompt, + getNetworkNodesForOtherPrompts, } from '../selectors/interface'; import { getNetworkEdges, getNetworkEgo } from '../selectors/network'; import Panel from '~/lib/interviewer/components/Panel'; @@ -76,6 +78,8 @@ class NodePanel extends PureComponent { ...nodeListProps } = this.props; + console.log('NodePanel', this.props); + return ( node[entityPrimaryKeyProperty]; -const makeGetNodes = () => { - const getNodesForPrompt = makeGetNodesForPrompt(); - const getNodesForOtherPrompts = makeGetNodesForOtherPrompts(); - - return (state, props) => { - const nodesForPrompt = getNodesForPrompt(state, props); - const nodesForOtherPrompts = getNodesForOtherPrompts(state, props); - const nodeIds = { - prompt: nodesForPrompt.map(getNodeId), - other: nodesForOtherPrompts.map(getNodeId), - }; - - const notInSet = (set) => (node) => !set.has(node[entityPrimaryKeyProperty]); - - if (props.dataSource === 'existing') { - const nodes = nodesForOtherPrompts - .filter(notInSet(new Set(nodeIds.prompt))); +const getNodes = (state, props) => { + const nodesForPrompt = getNetworkNodesForPrompt(state, props); + const nodesForOtherPrompts = getNetworkNodesForOtherPrompts(state, props); + const nodeIds = { + prompt: nodesForPrompt.map(getNodeId), + other: nodesForOtherPrompts.map(getNodeId), + }; - return nodes; - } + const notInSet = (set) => (node) => !set.has(node[entityPrimaryKeyProperty]); - if (!props.externalData) { return []; } + if (props.dataSource === 'existing') { + const nodes = nodesForOtherPrompts + .filter(notInSet(new Set(nodeIds.prompt))); - const nodes = get( - props.externalData, - 'nodes', - [], - ) - .filter(notInSet(new Set([...nodeIds.prompt, ...nodeIds.other]))); return nodes; - }; -}; + } -const makeMapStateToProps = () => { - const getNodes = makeGetNodes(); + if (!props.externalData) { return []; } - return (state, props) => { - const nodes = getNodes(state, props); + const nodes = get( + props.externalData, + 'nodes', + [], + ) + .filter(notInSet(new Set([...nodeIds.prompt, ...nodeIds.other]))); + return nodes; +}; - const nodeFilter = props.filter; - if (nodeFilter && typeof nodeFilter !== 'function') { - const filterFunction = customFilter(nodeFilter); - return filterFunction({ - nodes, - edges: getNetworkEdges(state, props), - ego: getNetworkEgo(state, props), - }); - } +const mapStateToProps = (state, props) => { + const nodes = getNodes(state, props); - return { + const nodeFilter = props.filter; + if (nodeFilter && typeof nodeFilter !== 'function') { + const filterFunction = customFilter(nodeFilter); + return filterFunction({ nodes, - }; + edges: getNetworkEdges(state, props), + ego: getNetworkEgo(state, props), + }); + } + + return { + nodes, }; }; @@ -156,5 +151,5 @@ export { NodePanel }; export default compose( withExternalData('externalDataSource', 'externalData'), - connect(makeMapStateToProps), + connect(mapStateToProps), )(NodePanel); diff --git a/lib/interviewer/containers/OrdinalBins.js b/lib/interviewer/containers/OrdinalBins.js index 7648838a..1c1da33f 100644 --- a/lib/interviewer/containers/OrdinalBins.js +++ b/lib/interviewer/containers/OrdinalBins.js @@ -19,7 +19,7 @@ class OrdinalBins extends PureComponent { return prompt.color ? color(getCSSVariableAsString(`--${prompt.color}`)) - : color(getCSSVariableAsString('--ord-color-seq-1')); + : color(getCSSVariableAsString('--nc-ord-color-seq-1')); }; backgroundColor = () => color(getCSSVariableAsString('--background')); diff --git a/lib/interviewer/containers/withExternalData.js b/lib/interviewer/containers/withExternalData.js index 8a24e15f..5e15e73a 100644 --- a/lib/interviewer/containers/withExternalData.js +++ b/lib/interviewer/containers/withExternalData.js @@ -13,34 +13,34 @@ import { includes, isNil, mapValues, - mapKeys, toNumber, reduce, } from 'lodash'; -import { entityAttributesProperty, entityPrimaryKeyProperty } from '@codaco/shared-consts'; +import { entityAttributesProperty } from '@codaco/shared-consts'; import loadExternalData from '../utils/loadExternalData'; -import getParentKeyByNameValue from '../utils/getParentKeyByNameValue'; import ProtocolConsts from '../protocol-consts'; +import { getSessionMeta, makeVariableUUIDReplacer } from '../hooks/useExternalData'; const mapStateToProps = (state) => { - const session = state.sessions[state.activeSessionId]; - const { protocolUID } = session; - const protocolCodebook = state.installedProtocols[protocolUID].codebook; - const { assetManifest } = state.installedProtocols[protocolUID]; - const assetFiles = mapValues( + const { + protocolUID, assetManifest, - (asset) => asset.source, - ); + protocolCodebook, + } = getSessionMeta(state); + + console.log({ + protocolUID, + assetManifest, + protocolCodebook, + }); return { protocolUID, assetManifest, - assetFiles, protocolCodebook, }; }; -const withUUID = (node) => objectHash(node); const getCodebookDefinition = (protocolCodebook, stageSubject) => { const stageNodeType = stageSubject.type; @@ -51,29 +51,6 @@ const getCodebookDefinition = (protocolCodebook, stageSubject) => { return protocolCodebook[entityType][stageNodeType] || {}; }; -// Replace string keys with UUIDs in codebook, according to stage subject. -const withVariableUUIDReplacement = (nodeList, protocolCodebook, stageSubject) => nodeList.map( - (node) => { - const codebookDefinition = getCodebookDefinition(protocolCodebook, stageSubject); - - const uuid = withUUID(node); - - const attributes = mapKeys( - node.attributes, - (attributeValue, attributeKey) => getParentKeyByNameValue( - codebookDefinition.variables, - attributeKey, - ), - ); - - return { - type: stageSubject.type, - [entityPrimaryKeyProperty]: uuid, - [entityAttributesProperty]: attributes, - }; - }, -); - // compile list of attributes from a nodelist that aren't already in the codebook const getUniqueAttributeKeys = (nodeList, protocolCodebook, stageSubject) => ( nodeList.reduce((attributeKeys, node) => { @@ -281,8 +258,6 @@ const withExternalData = (sourceProperty, dataProperty) => compose( loadExternalData: ({ setExternalData, setExternalDataIsLoading, - protocolUID, - assetFiles, assetManifest, protocolCodebook, }) => (sourceId, stageSubject) => { @@ -291,15 +266,15 @@ const withExternalData = (sourceProperty, dataProperty) => compose( setExternalData(null); setExternalDataIsLoading(true); - const sourceFile = assetFiles[sourceId]; - const { type } = assetManifest[sourceId]; + const { name, url } = assetManifest[sourceId]; - loadExternalData(protocolUID, sourceFile, type) - .then((externalData) => ( - withVariableUUIDReplacement(externalData.nodes, protocolCodebook, stageSubject) - )) + loadExternalData(name, url) + .then((externalData) => { + const variableUUIDReplacer = makeVariableUUIDReplacer(protocolCodebook, stageSubject.type); + return externalData.nodes.map(variableUUIDReplacer); + }) .then((uuidData) => getVariableTypeReplacements( - sourceFile, uuidData, protocolCodebook, stageSubject, + name, uuidData, protocolCodebook, stageSubject, )) .then((nodes) => { setExternalDataIsLoading(false); diff --git a/lib/interviewer/hooks/useExternalData.js b/lib/interviewer/hooks/useExternalData.js index 8bedee04..01c32e25 100644 --- a/lib/interviewer/hooks/useExternalData.js +++ b/lib/interviewer/hooks/useExternalData.js @@ -12,7 +12,7 @@ import { createSelector } from '@reduxjs/toolkit'; import { getActiveSession } from '../selectors/session'; import { getAssetManifest, getProtocolCodebook } from '../selectors/protocol'; -const getSessionMeta = createSelector( +export const getSessionMeta = createSelector( getActiveSession, getProtocolCodebook, getAssetManifest, @@ -29,7 +29,7 @@ const getSessionMeta = createSelector( const withUUID = (node) => objectHash(node); // Replace string keys with UUIDs in codebook, according to stage subject. -const makeVariableUUIDReplacer = ( +export const makeVariableUUIDReplacer = ( protocolCodebook, subjectType, ) => (node) => { diff --git a/lib/interviewer/selectors/interface.js b/lib/interviewer/selectors/interface.js index 1fbd6aad..cc29829c 100644 --- a/lib/interviewer/selectors/interface.js +++ b/lib/interviewer/selectors/interface.js @@ -132,7 +132,9 @@ export const makeNetworkNodesForPrompt = () => getNetworkNodesForPrompt; * prompt's promptId. */ -export const makeNetworkNodesForOtherPrompts = () => createSelector( +export const getNetworkNodesForOtherPrompts = createSelector( getNetworkNodesForType, getPropPromptId, (nodes, promptId) => filter(nodes, (node) => !includes(node.promptIDs, promptId)), ); + +export const makeNetworkNodesForOtherPrompts = () => getNetworkNodesForOtherPrompts; diff --git a/lib/interviewer/styles/components/_accordion.scss b/lib/interviewer/styles/components/_accordion.scss index 9f9a5e29..2ce6265a 100644 --- a/lib/interviewer/styles/components/_accordion.scss +++ b/lib/interviewer/styles/components/_accordion.scss @@ -19,7 +19,7 @@ } h4 { - letter-spacing: .15rem; + letter-spacing: 0.15rem; text-transform: uppercase; margin: 0; } @@ -46,28 +46,30 @@ align-items: center; .icon { - margin: .5rem; + margin: 0.5rem; } &__radio { - border: solid .1rem; - border-color: var(--input-border); + border: solid 0.1rem; + border-color: var(--nc-input-border); border-radius: 50%; height: 2rem; - margin: .5rem; + margin: 0.5rem; width: 2rem; - transition: border-color var(--animation-easing) var(--animation-duration-standard); + transition: border-color var(--animation-easing) + var(--animation-duration-standard); &::before { - background-color: var(--input-accent); + background-color: var(--nc-input-accent); border-radius: 50%; content: ''; height: 1.3rem; - margin: .25rem; + margin: 0.25rem; opacity: 0; position: absolute; width: 1.3rem; - transition: opacity var(--animation-easing) var(--animation-duration-standard); + transition: opacity var(--animation-easing) + var(--animation-duration-standard); } &--selected { @@ -75,7 +77,8 @@ &::before { opacity: 1; - transition: opacity var(--animation-easing) var(--animation-duration-standard); + transition: opacity var(--animation-easing) + var(--animation-duration-standard); } } } diff --git a/lib/interviewer/styles/components/_convex-hull.scss b/lib/interviewer/styles/components/_convex-hull.scss index 14578e0b..1bf140e6 100644 --- a/lib/interviewer/styles/components/_convex-hull.scss +++ b/lib/interviewer/styles/components/_convex-hull.scss @@ -18,8 +18,8 @@ @for $i from 1 through 10 { .convex-hull__cat-color-seq-#{$i} { polygon { - stroke: var(--cat-color-seq-#{$i}); - fill: var(--cat-color-seq-#{$i}); + stroke: var(--nc-cat-color-seq-#{$i}); + fill: var(--nc-cat-color-seq-#{$i}); } } } diff --git a/lib/interviewer/styles/components/_list.scss b/lib/interviewer/styles/components/_list.scss index 5db3f20b..facc0868 100644 --- a/lib/interviewer/styles/components/_list.scss +++ b/lib/interviewer/styles/components/_list.scss @@ -9,6 +9,6 @@ &--hover, &--drag { - background-color: var(--node-list-action-bg); + background-color: var(--nc-node-list-action-bg); } } diff --git a/lib/interviewer/styles/components/_node-bucket.scss b/lib/interviewer/styles/components/_node-bucket.scss index 027bfced..dea19398 100644 --- a/lib/interviewer/styles/components/_node-bucket.scss +++ b/lib/interviewer/styles/components/_node-bucket.scss @@ -2,12 +2,12 @@ .node-bucket { // sass-lint:disable-block no-color-literals - --node-bucket-bg: rgb(255 255 255 / 40%); + --nc-node-bucket-bg: rgb(255 255 255 / 40%); position: absolute; bottom: 0; left: calc(50% - #{units.unit(7.5)}); - background: var(--node-bucket-bg); + background: var(--nc-node-bucket-bg); border-radius: 100%; display: flex; flex-direction: column; diff --git a/lib/interviewer/styles/components/_node-list.scss b/lib/interviewer/styles/components/_node-list.scss index 5be25ad0..c60bb9b5 100644 --- a/lib/interviewer/styles/components/_node-list.scss +++ b/lib/interviewer/styles/components/_node-list.scss @@ -13,7 +13,7 @@ $node-inset: 1rem; // approximate scaled margin + 'outer-trim' of a node &--hover, &--drag { - background-color: var(--node-list-action-bg); + background-color: var(--nc-node-list-action-bg); } &--transition { diff --git a/lib/interviewer/styles/components/_switch.scss b/lib/interviewer/styles/components/_switch.scss index e40f9615..5e6faaba 100644 --- a/lib/interviewer/styles/components/_switch.scss +++ b/lib/interviewer/styles/components/_switch.scss @@ -24,9 +24,10 @@ content: ''; border-radius: $size; background-color: var(--color-rich-black); - transition: background var(--animation-duration-fast) var(--animation-easing); + transition: background var(--animation-duration-fast) + var(--animation-easing); width: $size * 2; - height: $size * .67; + height: $size * 0.67; } &::after { @@ -37,7 +38,8 @@ width: $size; background-color: var(--color-white); transform: translateX(-1px); - transition: transform var(--animation-duration-fast) var(--animation-easing); + transition: transform var(--animation-duration-fast) + var(--animation-easing); } } @@ -47,7 +49,7 @@ &:checked + .switch__button { &::before { - background-color: var(--input-radio--fill); + background-color: var(--nc-input-radio--fill); } &::after { diff --git a/lib/interviewer/styles/containers/_hyper-list.scss b/lib/interviewer/styles/containers/_hyper-list.scss index 0f7f14ad..544bf04c 100644 --- a/lib/interviewer/styles/containers/_hyper-list.scss +++ b/lib/interviewer/styles/containers/_hyper-list.scss @@ -23,7 +23,7 @@ &--drag, &--hover { - background-color: var(--node-list-action-bg); + background-color: var(--nc-node-list-action-bg); } } diff --git a/lib/ui/components/Fields/Search.js b/lib/ui/components/Fields/Search.js index 979b860c..7d825f14 100644 --- a/lib/ui/components/Fields/Search.js +++ b/lib/ui/components/Fields/Search.js @@ -7,7 +7,7 @@ import { getCSSVariableAsString } from '../../utils/CSSVariables'; import Text from './Text'; const Search = (props) => { - const color = getCSSVariableAsString('--input-text'); + const color = getCSSVariableAsString('--nc-input-text'); const hasValue = !isEmpty(get(props, ['input', 'value'], '')); diff --git a/lib/ui/styles/components/_icons.scss b/lib/ui/styles/components/_icons.scss index c8c1aa40..fd9b6b4a 100644 --- a/lib/ui/styles/components/_icons.scss +++ b/lib/ui/styles/components/_icons.scss @@ -387,11 +387,11 @@ $-icon-color-modifiers: ( &[name='highlighted'] { .cls-4 { - fill: var(--node-color-seq-1); + fill: var(--nc-node-color-seq-1); } .cls-5 { - fill: var(--node-color-seq-1--dark); + fill: var(--nc-node-color-seq-1--dark); } .cls-7 { @@ -401,7 +401,7 @@ $-icon-color-modifiers: ( @each $ordinal-color in $ordinal-colors { $i: index($ordinal-colors, $ordinal-color); - &.icon--node-highlight-seq-#{$i} { + &.icon--nc-node-highlight-seq-#{$i} { @include color-icon($ordinal-color); } } @@ -421,7 +421,7 @@ $-icon-color-modifiers: ( @each $categorical-color in $categorical-colors { $i: index($categorical-colors, $categorical-color); - &.icon--cat-color-seq-#{$i} { + &.icon--nc-cat-color-seq-#{$i} { @include color-icon($categorical-color); } } diff --git a/lib/ui/styles/components/_inputs.scss b/lib/ui/styles/components/_inputs.scss index 54ba9945..618c17bb 100644 --- a/lib/ui/styles/components/_inputs.scss +++ b/lib/ui/styles/components/_inputs.scss @@ -443,7 +443,7 @@ background-color: transparent; border-radius: 50%; padding: 2px; - border: 3px solid var(--cat-color-seq-1); + border: 3px solid var(--nc-cat-color-seq-1); display: flex; justify-content: center; @@ -451,8 +451,8 @@ transition: all var(--animation-duration-standard) var(--animation-easing); //sass-lint:disable-line no-transition-all @for $i from 1 through 5 { - &--cat-color-seq-#{$i} { - border: 3px solid var(--cat-color-seq-#{$i}); + &--nc-cat-color-seq-#{$i} { + border: 3px solid var(--nc-cat-color-seq-#{$i}); } } @@ -481,13 +481,13 @@ &::after { transition: all var(--animation-duration-standard) var(--animation-easing); //sass-lint:disable-line no-transition-all opacity: 1; - background-color: var(--cat-color-seq-1); + background-color: var(--nc-cat-color-seq-1); } @for $i from 1 through 5 { - &--cat-color-seq-#{$i} { + &--nc-cat-color-seq-#{$i} { &::after { - background-color: var(--cat-color-seq-#{$i}); + background-color: var(--nc-cat-color-seq-#{$i}); } } } diff --git a/lib/ui/styles/components/_node.scss b/lib/ui/styles/components/_node.scss index 916dc985..74612e1e 100644 --- a/lib/ui/styles/components/_node.scss +++ b/lib/ui/styles/components/_node.scss @@ -61,7 +61,7 @@ width: 100%; height: 100%; padding: 15%; - color: var(--node-label); + color: var(--nc-node-label); &-text { left: 0; @@ -115,7 +115,7 @@ } .node__node-outer-trim { - fill: var(--node-outer-trim-stroke); + fill: var(--nc-node-outer-trim-stroke); transform-origin: 250px 250px; animation: bounce var(--animation-duration-standard) ease-in-out; } @@ -124,7 +124,7 @@ @each $ordinal-color in $ordinal-colors { $i: index($ordinal-colors, $ordinal-color); - &--node-highlight-seq-#{$i} { + &--nc-node-highlight-seq-#{$i} { .node__node-trim { stroke: color($ordinal-color); } @@ -137,7 +137,7 @@ } .node__node-outer-trim { - fill: var(--node-outer-trim-stroke); + fill: var(--nc-node-outer-trim-stroke); transform-origin: 250px 250px; animation: linking var(--animation-duration-slow) ease-in-out infinite; } diff --git a/lib/ui/styles/components/form/_fields.scss b/lib/ui/styles/components/form/_fields.scss index 72082961..7c7d3c2b 100644 --- a/lib/ui/styles/components/form/_fields.scss +++ b/lib/ui/styles/components/form/_fields.scss @@ -8,7 +8,7 @@ $global-input-border-space: 0.25rem; font-weight: 200; display: block; margin: 0; - color: var(--input-label); + color: var(--nc-input-label); } } @@ -47,8 +47,8 @@ $global-input-border-space: 0.25rem; } .form-field { - background: var(--input-background); - color: var(--input-text); + background: var(--nc-input-background); + color: var(--nc-input-text); border-radius: 1rem 1rem 0 0; margin-bottom: 2rem; padding: 1rem unit(2); diff --git a/lib/ui/styles/components/form/fields/_boolean.scss b/lib/ui/styles/components/form/fields/_boolean.scss index 62f784a7..37f5881e 100644 --- a/lib/ui/styles/components/form/fields/_boolean.scss +++ b/lib/ui/styles/components/form/fields/_boolean.scss @@ -5,8 +5,9 @@ opacity: 0; background: var(--error); color: var(--nc-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; @@ -25,7 +26,6 @@ margin-bottom: 0; border: 0.125rem solid var(--error); } - } } @@ -38,9 +38,9 @@ &__reset { cursor: pointer; display: block; - font-size: .9rem; + font-size: 0.9rem; margin-top: 1rem; - color: var(--input-text); + color: var(--nc-input-text); text-decoration: underline; } } @@ -59,8 +59,8 @@ align-items: center; margin-right: unit(0.5); margin-left: 0; - background: var(--input-background); - color: var(--input-label); + background: var(--nc-input-background); + color: var(--nc-input-label); &--collapsed { border-width: $global-input-border-size * 2; @@ -81,7 +81,7 @@ } &--selected { - border-color: var(--input-accent); + border-color: var(--nc-input-accent); &.boolean-option--negative { border-color: var(--error); @@ -98,7 +98,7 @@ width: $global-input-element-size; height: $global-input-element-size; border-radius: 100%; - border-color: var(--input-border); + border-color: var(--nc-input-border); border-width: $global-input-border-size; border-style: solid; transition-property: border-color, background-color; @@ -116,7 +116,7 @@ } &--checked { - background-color: var(--input-accent); + background-color: var(--nc-input-accent); border-color: transparent; &.round-checkbox--negative { diff --git a/lib/ui/styles/components/form/fields/_checkbox.scss b/lib/ui/styles/components/form/fields/_checkbox.scss index b4db727a..93e7976d 100644 --- a/lib/ui/styles/components/form/fields/_checkbox.scss +++ b/lib/ui/styles/components/form/fields/_checkbox.scss @@ -5,14 +5,13 @@ position: relative; margin-bottom: unit(2); - &:last-child { margin-bottom: 0; } &__input { position: absolute; - opacity: 0 + opacity: 0; } &__checkbox { @@ -29,10 +28,11 @@ content: ''; width: 100%; height: 100%; - border-color: var(--input-border); + border-color: var(--nc-input-border); border-width: $global-input-border-size; border-style: solid; - transition: border-color var(--animation-easing) var(--animation-duration-standard); + transition: border-color var(--animation-easing) + var(--animation-duration-standard); } &::after { @@ -40,25 +40,31 @@ content: ''; top: $global-input-border-size + $global-input-border-space; left: $global-input-border-size + $global-input-border-space; - width: calc(100% - #{($global-input-border-size + $global-input-border-space) * 2}); - height: calc(100% - #{($global-input-border-size + $global-input-border-space) * 2}); - background-color: var(--input-radio--fill); + width: calc( + 100% - #{($global-input-border-size + $global-input-border-space) * 2} + ); + height: calc( + 100% - #{($global-input-border-size + $global-input-border-space) * 2} + ); + background-color: var(--nc-input-radio--fill); opacity: 0; - transition: opacity var(--animation-easing) var(--animation-duration-standard); + transition: opacity var(--animation-easing) + var(--animation-duration-standard); } } &:hover { .form-field-checkbox__checkbox { &::before { - border-color: var(--input-radio--fill); + border-color: var(--nc-input-radio--fill); } } } - &__input:checked + &__checkbox { // sass-lint:disable-line force-pseudo-nesting + &__input:checked + &__checkbox { + // sass-lint:disable-line force-pseudo-nesting &::before { - border-color: var(--input-border); + border-color: var(--nc-input-border); } &::after { diff --git a/lib/ui/styles/components/form/fields/_date-picker.scss b/lib/ui/styles/components/form/fields/_date-picker.scss index 54059da2..19d1b401 100644 --- a/lib/ui/styles/components/form/fields/_date-picker.scss +++ b/lib/ui/styles/components/form/fields/_date-picker.scss @@ -5,8 +5,8 @@ $lighten: rgba(255, 255, 255, 0.05); $darken: rgba(0, 0, 0, 0.2); .form-field-date-picker { - --datepicker-panel-bg: var(--input-panel-bg); - color: var(--input-text); + --datepicker-panel-bg: var(--nc-input-panel-bg); + color: var(--nc-input-text); &__error { opacity: 0; transition: opacity var(--animation-easing) var(--animation-duration-fast); @@ -37,14 +37,14 @@ $darken: rgba(0, 0, 0, 0.2); .#{$module-name} { --active-color: var(--color-sea-green); - --background: var(--input-background); + --background: var(--nc-input-background); --lighten: $lighten; --darken: $darken; max-width: 100%; position: relative; &__placeholder { - color: var(--input-placeholder); + color: var(--nc-input-placeholder); font-style: italic; } @@ -57,7 +57,8 @@ $darken: rgba(0, 0, 0, 0.2); display: flex; align-items: center; border-bottom: 2px solid transparent; - transition: border-bottom-color var(--animation-easing) var(--animation-duration-fast); + transition: border-bottom-color var(--animation-easing) + var(--animation-duration-fast); &-divider { color: var(--active-color); @@ -72,11 +73,11 @@ $darken: rgba(0, 0, 0, 0.2); } &-part { - color: var(--input-placeholder); + color: var(--nc-input-placeholder); font-style: italic; &--is-set { - color: var(--input-text); + color: var(--nc-input-text); font-style: normal; } } @@ -95,7 +96,7 @@ $darken: rgba(0, 0, 0, 0.2); } &--is-empty { - color: var(--input-placeholder); + color: var(--nc-input-placeholder); cursor: pointer; font-style: italic; } diff --git a/lib/ui/styles/components/form/fields/_radio.scss b/lib/ui/styles/components/form/fields/_radio.scss index ddb192cc..f58677e1 100644 --- a/lib/ui/styles/components/form/fields/_radio.scss +++ b/lib/ui/styles/components/form/fields/_radio.scss @@ -29,10 +29,11 @@ width: 100%; height: 100%; border-radius: 100%; - border-color: var(--input-border); + border-color: var(--nc-input-border); border-width: $global-input-border-size; border-style: solid; - transition: border-color var(--animation-easing) var(--animation-duration-standard); + transition: border-color var(--animation-easing) + var(--animation-duration-standard); } &::after { @@ -40,26 +41,32 @@ top: $global-input-border-size + $global-input-border-space; left: $global-input-border-size + $global-input-border-space; content: ''; - width: calc(100% - #{($global-input-border-size + $global-input-border-space) * 2}); - height: calc(100% - #{($global-input-border-size + $global-input-border-space) * 2}); + width: calc( + 100% - #{($global-input-border-size + $global-input-border-space) * 2} + ); + height: calc( + 100% - #{($global-input-border-size + $global-input-border-space) * 2} + ); border-radius: 100%; - background-color: var(--input-accent); + background-color: var(--nc-input-accent); opacity: 0; - transition: opacity var(--animation-easing) var(--animation-duration-standard); + transition: opacity var(--animation-easing) + var(--animation-duration-standard); } } &:hover { .form-field-radio__radio { &::before { - border-color: var(--input-border); + border-color: var(--nc-input-border); } } } - &__input:checked + &__radio { // sass-lint:disable-line force-pseudo-nesting + &__input:checked + &__radio { + // sass-lint:disable-line force-pseudo-nesting &::before { - border-color: var(--input-accent); + border-color: var(--nc-input-accent); } &::after { @@ -73,7 +80,7 @@ .form-field-radio__radio { &::before { - border-color: var(--input-disabled); + border-color: var(--nc-input-disabled); } &::after { @@ -84,7 +91,7 @@ &:hover { .form-field-radio__radio { &::before { - border-color: var(--input-disabled); + border-color: var(--nc-input-disabled); } &::after { diff --git a/lib/ui/styles/components/form/fields/_rich-text.scss b/lib/ui/styles/components/form/fields/_rich-text.scss index 5b002282..77c916c3 100644 --- a/lib/ui/styles/components/form/fields/_rich-text.scss +++ b/lib/ui/styles/components/form/fields/_rich-text.scss @@ -2,7 +2,7 @@ $module-name: form-field-rich-text; .rich-text { --blockquote-border-color: var(--transparent-light); - background: var(--input-background); + background: var(--nc-input-background); border-radius: 1rem 1rem 0 0; overflow: hidden; @@ -23,18 +23,18 @@ $module-name: form-field-rich-text; } &__editable { - &:not(.rich-text__editable--inline) { - resize:vertical; + resize: vertical; overflow: auto; } cursor: text; - color: var(--input-text); + color: var(--nc-input-text); padding: 0 unit(2); - border-bottom-width: unit(.25); + border-bottom-width: unit(0.25); border-bottom-style: solid; border-bottom-color: transparent; - transition: border-bottom-color var(--animation-easing) var(--animation-duration-standard); + transition: border-bottom-color var(--animation-easing) + var(--animation-duration-standard); li { p { @@ -51,7 +51,9 @@ $module-name: form-field-rich-text; border: 0; outline: none; background-color: transparent; - transition: filter var(--animation-easing) var(--animation-duration-fast), background-color var(--animation-easing) var(--animation-duration-fast); + transition: + filter var(--animation-easing) var(--animation-duration-fast), + background-color var(--animation-easing) var(--animation-duration-fast); cursor: pointer; height: unit(4); width: unit(4); @@ -79,7 +81,7 @@ $module-name: form-field-rich-text; &:hover { .rich-text__editable { - border-bottom: 2px solid var(--input-accent); + border-bottom: 2px solid var(--nc-input-accent); } } } @@ -99,8 +101,9 @@ $module-name: form-field-rich-text; opacity: 0; background: var(--error); color: var(--form-error-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; diff --git a/lib/ui/styles/components/form/fields/_slider.scss b/lib/ui/styles/components/form/fields/_slider.scss index 568edce5..41ff9e83 100644 --- a/lib/ui/styles/components/form/fields/_slider.scss +++ b/lib/ui/styles/components/form/fields/_slider.scss @@ -13,7 +13,7 @@ $module-name: form-field-slider; --tooltip-label: var(--nc-text-dark); // border-radius: 1rem 1rem 0 0; - // background-color: var(--input-background); + // background-color: var(--nc-input-background); // border-width: 0.1rem; // border-style: solid; // border-color: transparent; @@ -89,7 +89,7 @@ $module-name: form-field-slider; } &-label { - transform: translate(-50%, - 0.2 * $touch-height); + transform: translate(-50%, -0.2 * $touch-height); font-size: 0.8rem; background: var(--tooltip-color); border-radius: var(--border-radius); @@ -167,7 +167,8 @@ $module-name: form-field-slider; border-radius: 100%; background-color: var(--active-color); transition-property: transform, opacity, filter; - transition-duration: var(--animation-duration-fast), var(--animation-duration-fast), var(--animation-duration-fast); + transition-duration: var(--animation-duration-fast), + var(--animation-duration-fast), var(--animation-duration-fast); &--is-disabled { background-color: var(--disabled-color); @@ -218,8 +219,9 @@ $module-name: form-field-slider; opacity: 0; background: var(--error); color: var(--form-error-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; @@ -230,7 +232,6 @@ $module-name: form-field-slider; } &--has-error { - .form-field { border-width: 0.1rem; border-style: solid; diff --git a/lib/ui/styles/components/form/fields/_text.scss b/lib/ui/styles/components/form/fields/_text.scss index 8da66767..8cea4969 100644 --- a/lib/ui/styles/components/form/fields/_text.scss +++ b/lib/ui/styles/components/form/fields/_text.scss @@ -10,17 +10,18 @@ $module-name: form-field-text; font-family: var(--body-font-family); font-size: inherit; font-weight: inherit; - background-color: var(--input-background); + background-color: var(--nc-input-background); width: 100%; - color: var(--input-text); + color: var(--nc-input-text); border: 0; border-bottom-width: unit(0.25); border-bottom-style: solid; border-bottom-color: transparent; - transition: border-bottom-color var(--animation-easing) var(--animation-duration-standard); + transition: border-bottom-color var(--animation-easing) + var(--animation-duration-standard); &::placeholder { - color: var(--input-placeholder); + color: var(--nc-input-placeholder); font-style: italic; } } @@ -49,7 +50,7 @@ $module-name: form-field-text; &--has-focus, &:hover { .#{$module-name}__input { - border-bottom-color: var(--input-accent); + border-bottom-color: var(--nc-input-accent); } .#{$module-name}__icon--edit { @@ -61,8 +62,9 @@ $module-name: form-field-text; opacity: 0; background: var(--error); color: var(--form-error-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; diff --git a/lib/ui/styles/components/form/fields/_toggle-button.scss b/lib/ui/styles/components/form/fields/_toggle-button.scss index 6cfeeca2..7823e8f6 100644 --- a/lib/ui/styles/components/form/fields/_toggle-button.scss +++ b/lib/ui/styles/components/form/fields/_toggle-button.scss @@ -33,11 +33,12 @@ $component-name: form-field-togglebutton; content: ''; width: 100%; height: 100%; - border-color: var(--input-radio--fill); + border-color: var(--nc-input-radio--fill); border-width: $border; border-style: solid; border-radius: 50%; - transition: border-color var(--animation-easing) var(--animation-duration-standard); + transition: border-color var(--animation-easing) + var(--animation-duration-standard); } &::after { @@ -47,13 +48,13 @@ $component-name: form-field-togglebutton; left: $border + $border-space; width: calc(100% - #{($border + $border-space) * 2}); height: calc(100% - #{($border + $border-space) * 2}); - background-color: var(--input-radio--fill); + background-color: var(--nc-input-radio--fill); border-radius: 50%; opacity: 0; - transition: opacity var(--animation-easing) var(--animation-duration-standard); + transition: opacity var(--animation-easing) + var(--animation-duration-standard); z-index: -1; } - } &__label { @@ -66,12 +67,13 @@ $component-name: form-field-togglebutton; &:hover { .form-field-checkbox__checkbox { &::before { - border-color: var(--input-radio--fill); + border-color: var(--nc-input-radio--fill); } } } - &__input:checked + &__checkbox { // sass-lint:disable-line force-pseudo-nesting + &__input:checked + &__checkbox { + // sass-lint:disable-line force-pseudo-nesting &::after { opacity: 1; @@ -111,11 +113,11 @@ $component-name: form-field-togglebutton; .form-field-togglebutton-cat-color-seq-#{$i} { .form-field-togglebutton__checkbox { &::before { - border-color: var(--cat-color-seq-#{$sequence-number}); + border-color: var(--nc-cat-color-seq-#{$sequence-number}); } &::after { - background-color: var(--cat-color-seq-#{$sequence-number}); + background-color: var(--nc-cat-color-seq-#{$sequence-number}); } } } diff --git a/lib/ui/styles/components/form/fields/_toggle.scss b/lib/ui/styles/components/form/fields/_toggle.scss index 1a3d9597..907fb9e1 100644 --- a/lib/ui/styles/components/form/fields/_toggle.scss +++ b/lib/ui/styles/components/form/fields/_toggle.scss @@ -20,8 +20,9 @@ $component-name: form-field-toggle; &__button { position: absolute; - background-color: var(--input-background); - transition: background var(--animation-duration-fast) var(--animation-easing); + background-color: var(--nc-input-background); + transition: background var(--animation-duration-fast) + var(--animation-easing); border-radius: $global-input-element-size; top: 0; left: 0; @@ -34,14 +35,16 @@ $component-name: form-field-toggle; border-radius: 50%; height: $global-input-element-size; width: $global-input-element-size; - background-color: var(--input-border); - transition: transform var(--animation-duration-fast) var(--animation-easing); + background-color: var(--nc-input-border); + transition: transform var(--animation-duration-fast) + var(--animation-easing); } } - &__input:checked + &__toggle { // sass-lint:disable-line force-pseudo-nesting + &__input:checked + &__toggle { + // sass-lint:disable-line force-pseudo-nesting .form-field-toggle__button { - background-color: var(--input-radio--fill); + background-color: var(--nc-input-radio--fill); &::before { transform: translateX($global-input-element-size); @@ -53,8 +56,9 @@ $component-name: form-field-toggle; opacity: 0; background: var(--error); color: var(--nc-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; @@ -73,7 +77,6 @@ $component-name: form-field-toggle; border: 0.125rem solid var(--error); margin-bottom: 0; } - } &--disabled { diff --git a/lib/ui/styles/global/_default.scss b/lib/ui/styles/global/_default.scss index 86db72b1..868561b3 100644 --- a/lib/ui/styles/global/_default.scss +++ b/lib/ui/styles/global/_default.scss @@ -108,7 +108,10 @@ $PREFIX: 'nc-'; $i: index($color-list, $current-color); @include palette-set($PREFIX + '#{$name}-#{$i}', color($current-color)); @if $with-dark { - @include palette-set($PREFIX + '#{$name}-#{$i}--dark', color('#{$current-color}--dark')); + @include palette-set( + $PREFIX + '#{$name}-#{$i}--dark', + color('#{$current-color}--dark') + ); } } } @@ -195,7 +198,6 @@ $categorical-colors: ( @include color-sequence('cat-color-seq', $categorical-colors, true); - // Protocol Schema Sequence $schema-colors: ( 'platinum--dark', @@ -222,7 +224,7 @@ $system-font-stack: 'system-ui', sans-serif; --body-font-family: #{$system-font-stack}; // Default border radius - --border-radius: .75rem; + --border-radius: 0.75rem; // Link color --link-color: var(--color-neon-coral); @@ -248,19 +250,23 @@ $system-font-stack: 'system-ui', sans-serif; --narrative-heading-bg-hover: #{transparentize(rgb(22, 21, 43), 0.85)}; --narrative-border-bottom-color: #{transparentize(rgb(22, 21, 43), 0.85)}; - --node-outer-trim-stroke: #{transparentize(rgb(255, 255, 255), 0.75)}; - --node-bucket-bg: #{radial-gradient(ellipse at center, transparentize(rgb(45, 41, 85), 0.5) 0%, transparentize(rgb(58, 58, 117), 0.5) 100%)}; - --node-list-action-bg: #{transparentize(rgb(58, 58, 117), 0.5)}; + --nc-node-outer-trim-stroke: #{transparentize(rgb(255, 255, 255), 0.75)}; + --nc-node-bucket-bg: #{radial-gradient( + ellipse at center, + transparentize(rgb(45, 41, 85), 0.5) 0%, + transparentize(rgb(58, 58, 117), 0.5) 100% + )}; + --nc-node-list-action-bg: #{transparentize(rgb(58, 58, 117), 0.5)}; --drop-shadow-color: #{transparentize(rgb(22, 21, 43), 0.25)}; --session-management-screen-bg: #{transparentize(rgb(58, 58, 117), 0.5)}; // Inputs - --input-background: #{transparentize(rgb(0, 0, 0), 0.67)}; - --input-label: #{transparentize(rgb(255, 255, 255), 0)}; - --input-placeholder: #{transparentize(rgb(255, 255, 255), 0.75)}; - --input-panel-bg: var(--color-rich-black); + --nc-input-background: #{transparentize(rgb(0, 0, 0), 0.67)}; + --nc-input-label: #{transparentize(rgb(255, 255, 255), 0)}; + --nc-input-placeholder: #{transparentize(rgb(255, 255, 255), 0.75)}; + --nc-input-panel-bg: var(--color-rich-black); --modal-overlay: #{transparentize(rgb(39, 32, 76), 0.1)}; --modal-window-box-shadow: #{transparentize(rgb(22, 21, 43), 0.25)}; @@ -312,11 +318,26 @@ $headings-line-height: 1.1 !default; // Based of px sizes in style guide (em values were inconsistent) $headings: ( - h1: (1.75rem, var(--heading-font-family)), - h2: (1.25rem, var(--heading-font-family)), - h3: (1.1625rem, var(--heading-font-family)), - h4: (1rem, var(--heading-font-family)), - h5: (0.75rem, var(--heading-font-family)), + h1: ( + 1.75rem, + var(--heading-font-family), + ), + h2: ( + 1.25rem, + var(--heading-font-family), + ), + h3: ( + 1.1625rem, + var(--heading-font-family), + ), + h4: ( + 1rem, + var(--heading-font-family), + ), + h5: ( + 0.75rem, + var(--heading-font-family), + ), ); @mixin text($font-size, $font-family) { @@ -337,29 +358,47 @@ $headings: ( } @include type-set( - 'quicksand', base, + 'quicksand', + base, ( font-family: var(--heading-font-family), font-size: 1rem, line-height: $base-line-height, - font-weight: $headings-font-weight + font-weight: $headings-font-weight, ) ); @include type-set( - 'light', base, (font-weight: 300) + 'light', + base, + ( + font-weight: 300, + ) ); @include type-set( - 'medium', base, (font-weight: 500) + 'medium', + base, + ( + font-weight: 500, + ) ); @include type-set( - 'bold', base, (font-weight: 700) + 'bold', + base, + ( + font-weight: 700, + ) ); @include type-set( - 'center', base, (text-align: center) + 'center', + base, + ( + text-align: center, + ) ); // H1 - questions, form, and menu headlines @include type-set( - 'main-title', base, + 'main-title', + base, ( font-family: var(--heading-font-family), font-size: 3rem, @@ -370,20 +409,22 @@ $headings: ( ); @include type-set( - 'title-1', base, + 'title-1', + base, ( font-family: var(--heading-font-family), font-size: 2.3rem, line-height: 1.429, font-weight: 700, text-align: center, - width: 100% + width: 100%, ) ); // H2 - Form question headlines, buttons, text links @include type-set( - 'title-2', base, + 'title-2', + base, ( font-size: 1.2rem, line-height: $base-line-height, @@ -393,7 +434,8 @@ $headings: ( // H3 - Large nodes, name generator panel, ordinal bins, categorial bins @include type-set( - 'title-3', base, + 'title-3', + base, ( font-size: 1.05rem, line-height: $base-line-height, @@ -403,7 +445,8 @@ $headings: ( ); // H4 - Menu items, error message headline, body copy @include type-set( - 'title-4', base, + 'title-4', + base, ( font-size: 1rem, line-height: $base-line-height, @@ -411,7 +454,8 @@ $headings: ( ); // H5 - Small nodes, context bins, number counter, form field label @include type-set( - 'title-5', base, + 'title-5', + base, ( font-size: 0.8rem, line-height: $base-line-height, @@ -420,25 +464,28 @@ $headings: ( // Copy sizes @include type-set( - 'copy-large', base, + 'copy-large', + base, ( font-size: 1.1rem, - line-height: $base-line-height + line-height: $base-line-height, ) ); @include type-set( - 'copy-standard', base, + 'copy-standard', + base, ( font-size: 1rem, - line-height: $base-line-height + line-height: $base-line-height, ) ); @include type-set( - 'copy-small', base, + 'copy-small', + base, ( font-size: 0.7rem, line-height: $base-line-height, - font-weight: 100 + font-weight: 100, ) );