diff --git a/config/webpack.config.babel.js b/config/webpack.config.babel.js index 2281c7e473..e92cf7e6ad 100644 --- a/config/webpack.config.babel.js +++ b/config/webpack.config.babel.js @@ -230,7 +230,7 @@ export default { }, }, { - test: /\.(woff|woff2|ttf|eot|jpg|jpeg|png|svg)$/i, + test: /\.(woff|woff2|ttf|eot|otf|jpg|jpeg|png|svg)$/i, type: 'asset/resource', generator: { filename: '[name].[contenthash:20][ext]', diff --git a/pkg/webui/assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf b/pkg/webui/assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf new file mode 100644 index 0000000000..fb5803bccf Binary files /dev/null and b/pkg/webui/assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf differ diff --git a/pkg/webui/assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2 b/pkg/webui/assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2 new file mode 100644 index 0000000000..92d88035a4 Binary files /dev/null and b/pkg/webui/assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2 differ diff --git a/pkg/webui/assets/fonts/materialicons.eot b/pkg/webui/assets/fonts/materialicons.eot deleted file mode 100644 index 59d5adf43f..0000000000 Binary files a/pkg/webui/assets/fonts/materialicons.eot and /dev/null differ diff --git a/pkg/webui/assets/fonts/materialicons.otf b/pkg/webui/assets/fonts/materialicons.otf deleted file mode 100644 index a0df2c82fe..0000000000 Binary files a/pkg/webui/assets/fonts/materialicons.otf and /dev/null differ diff --git a/pkg/webui/assets/fonts/materialicons.svg b/pkg/webui/assets/fonts/materialicons.svg deleted file mode 100644 index 69704be27d..0000000000 --- a/pkg/webui/assets/fonts/materialicons.svg +++ /dev/null @@ -1,2633 +0,0 @@ - - - - -Created by FontForge 20190801 at Wed Jan 8 12:39:38 2020 - By Unknown -Copyright 2017 Google, Inc. All Rights Reserved. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/pkg/webui/assets/fonts/materialicons.ttf b/pkg/webui/assets/fonts/materialicons.ttf deleted file mode 100644 index c716e79809..0000000000 Binary files a/pkg/webui/assets/fonts/materialicons.ttf and /dev/null differ diff --git a/pkg/webui/assets/fonts/materialicons.woff b/pkg/webui/assets/fonts/materialicons.woff deleted file mode 100644 index ba5b018d9a..0000000000 Binary files a/pkg/webui/assets/fonts/materialicons.woff and /dev/null differ diff --git a/pkg/webui/assets/fonts/materialicons.woff2 b/pkg/webui/assets/fonts/materialicons.woff2 deleted file mode 100644 index 1770a8df98..0000000000 Binary files a/pkg/webui/assets/fonts/materialicons.woff2 and /dev/null differ diff --git a/pkg/webui/components/delete-modal-button/delete-modal-button.styl b/pkg/webui/components/delete-modal-button/delete-modal-button.styl deleted file mode 100644 index acf3e0262c..0000000000 --- a/pkg/webui/components/delete-modal-button/delete-modal-button.styl +++ /dev/null @@ -1,22 +0,0 @@ -// Copyright © 2021 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.id - display: inline - -.confirm-input - margin-top: $ls.xxs - -.hard-delete-checkbox - margin-top: $ls.xxs diff --git a/pkg/webui/components/delete-modal-button/index.js b/pkg/webui/components/delete-modal-button/index.js index 72ce477db8..6b8c616106 100644 --- a/pkg/webui/components/delete-modal-button/index.js +++ b/pkg/webui/components/delete-modal-button/index.js @@ -26,8 +26,6 @@ import Message from '@ttn-lw/lib/components/message' import sharedMessages from '@ttn-lw/lib/shared-messages' import PropTypes from '@ttn-lw/lib/prop-types' -import style from './delete-modal-button.styl' - const DeleteModalButton = props => { const { confirmMessage, @@ -83,7 +81,7 @@ const DeleteModalButton = props => { 
{name}
}} + values={{ entityName: name, pre: name => 
{name}
}} component="span" /> { {mayPurge && ( { <> 
{id}
}} + values={{ entityId, pre: id => 
{id}
}} component="span" /> +
{!indexAsKey && ( +
{value && value.map((individualValue, index) => ( diff --git a/pkg/webui/components/key-value-map/key-value-map.styl b/pkg/webui/components/key-value-map/key-value-map.styl index cb289e71d5..ed958c9dae 100644 --- a/pkg/webui/components/key-value-map/key-value-map.styl +++ b/pkg/webui/components/key-value-map/key-value-map.styl @@ -12,14 +12,6 @@ // See the License for the specific language governing permissions and // limitations under the License. -.container - flex-direction: column - -.entries-row - display: flex - margin-bottom: $cs.s - justify-content: flex-start - .input margin-right: $cs.s flex-grow: 1 diff --git a/pkg/webui/components/rights-group/index.js b/pkg/webui/components/rights-group/index.js index 3ac34a3fba..8eb140cc14 100644 --- a/pkg/webui/components/rights-group/index.js +++ b/pkg/webui/components/rights-group/index.js @@ -140,7 +140,7 @@ const RightsGroup = ({ children={ Boolean(m[`${right}_DESCRIPTION`]) && ( @@ -162,7 +162,7 @@ const RightsGroup = ({ /> )} { [style.buttonDesc]: active && direction === 'desc', }) - let icon = 'sort_order' - if (active && direction) { - icon += `_${direction}` - } - return ( ) } diff --git a/pkg/webui/console/components/device-import-form/device-import-form.styl b/pkg/webui/console/components/device-import-form/device-import-form.styl deleted file mode 100644 index 68c7ecf64e..0000000000 --- a/pkg/webui/console/components/device-import-form/device-import-form.styl +++ /dev/null @@ -1,20 +0,0 @@ -// Copyright © 2021 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.info - margin-top: 0 - -.h-rule - margin-bottom: $ls.s - margin-top: $ls.xs diff --git a/pkg/webui/console/components/device-import-form/index.js b/pkg/webui/console/components/device-import-form/index.js index 5eb629adc0..50e0092e52 100644 --- a/pkg/webui/console/components/device-import-form/index.js +++ b/pkg/webui/console/components/device-import-form/index.js @@ -46,8 +46,6 @@ import { selectNsFrequencyPlans } from '@console/store/selectors/configuration' import FallbackVersionIdsSection from './fallback-version-ids-section' -import style from './device-import-form.styl' - const m = defineMessages({ file: 'File', formatInfo: 'Format information', @@ -113,7 +111,7 @@ const DeviceBulkCreateFormInner = props => { <> ( @@ -122,7 +120,7 @@ const DeviceBulkCreateFormInner = props => { ), }} /> -
+
{formatDescription ? formatDescription : } diff --git a/pkg/webui/console/components/gateway-api-keys-modal/gateway-api-key-modal.styl b/pkg/webui/console/components/gateway-api-keys-modal/gateway-api-key-modal.styl deleted file mode 100644 index 386dcdf361..0000000000 --- a/pkg/webui/console/components/gateway-api-keys-modal/gateway-api-key-modal.styl +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright © 2022 The Things Network Foundation, The Things Industries B.V. -// -// 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. - - -.gateway-api-key-modal - display: flex - flex-direction: column diff --git a/pkg/webui/console/components/gateway-api-keys-modal/index.js b/pkg/webui/console/components/gateway-api-keys-modal/index.js index 12c31282e0..df1ebfc799 100644 --- a/pkg/webui/console/components/gateway-api-keys-modal/index.js +++ b/pkg/webui/console/components/gateway-api-keys-modal/index.js @@ -23,8 +23,6 @@ import Message from '@ttn-lw/lib/components/message' import PropTypes from '@ttn-lw/lib/prop-types' -import style from './gateway-api-key-modal.styl' - const m = defineMessages({ modalTitle: 'Download gateway API keys', buttonMessage: 'I have downloaded the keys', @@ -43,7 +41,7 @@ const GatewayApiKeysModal = ({ downloadCups, }) => ( { // Avoid situations when server clock is ahead of the browser clock. if (from > to) { @@ -49,8 +47,8 @@ const LastSeen = React.forwardRef((props, ref) => { return ( -
- {!short && } +
+ {!short && } - + - + { const { uplink = {}, downlink = {} } = policy return ( -
-
+
+
} placement="top"> - + { negativeMessage={m.doesNotForwardLocalization} />
-
+
} placement="bottom"> - + h4 text-margin-bottom($cs.l) margin-top: 0 -.uplink - margin-right: $ls.m - .policy text-margin-bottom($cs.l) display: block - -.icon - margin-right: $cs.xxs diff --git a/pkg/webui/console/components/routing-policy/sheet.js b/pkg/webui/console/components/routing-policy/sheet.js index 418d4d1f73..20a91e3d6b 100644 --- a/pkg/webui/console/components/routing-policy/sheet.js +++ b/pkg/webui/console/components/routing-policy/sheet.js @@ -32,7 +32,7 @@ const RoutingPolicy = ({ enabled, message, positiveMessage, negativeMessage }) = @@ -54,8 +54,8 @@ const RoutingPolicySheet = ({ policy }) => { const { uplink = {}, downlink = {} } = policy return ( -
-
+
+
{ <> {hasError && } - {!isNoneType && ( - - )} + {!isNoneType && } {!mayViewLink && } { <> {hasError && } - {!isNoneType && ( - - )} + {!isNoneType && } {!mayViewLink && } { content={} docPath="/getting-started/console/troubleshooting" > - + diff --git a/pkg/webui/console/containers/deployment-component-status/component-status.styl b/pkg/webui/console/containers/deployment-component-status/component-status.styl index 6c6b472c22..3e016a0d7c 100644 --- a/pkg/webui/console/containers/deployment-component-status/component-status.styl +++ b/pkg/webui/console/containers/deployment-component-status/component-status.styl @@ -12,21 +12,6 @@ // See the License for the specific language governing permissions and // limitations under the License. -.component-cards - display: flex - flex-wrap: wrap - margin-top: $cs.m - -.component-section - margin-top: $ls.l - margin-bottom: $ls.l - - +media-query($bp.m) - margin-bottom: $ls.xxs - - hr - width: 100% - .component-card display: inline-flex margin: 0 $cs.xl $cs.xl 0 @@ -56,19 +41,6 @@ font-family: $font-family-mono font-size: $fs.s -.component-info-section - display: flex - flex-direction: column - -.version-info-section - display: flex - flex-direction: column - .version-value font-size: $fs.xl3 font-weight: $fwh.bolder - -.version-revision - margin-top: 0 - font-size: $fs.s - margin-bottom: $cs.s diff --git a/pkg/webui/console/containers/deployment-component-status/index.js b/pkg/webui/console/containers/deployment-component-status/index.js index 2035ac1537..07efcd733e 100644 --- a/pkg/webui/console/containers/deployment-component-status/index.js +++ b/pkg/webui/console/containers/deployment-component-status/index.js @@ -56,11 +56,11 @@ const componentMap = { } const DeploymentComponentStatus = () => ( - - + + TTS v{process.env.VERSION} - 
{process.env.REVISION}
+ 
{process.env.REVISION}
@@ -72,9 +72,9 @@ const DeploymentComponentStatus = () => ( - + -
+
{Object.keys(stackConfig).map(componentKey => { if (componentKey === 'language') { return null diff --git a/pkg/webui/console/containers/dev-eui-component/dev-eui.styl b/pkg/webui/console/containers/dev-eui-component/dev-eui.styl deleted file mode 100644 index 979dc41215..0000000000 --- a/pkg/webui/console/containers/dev-eui-component/dev-eui.styl +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright © 2021 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.indicator - margin-left: $cs.s - align-self: center - color: $tc-subtle-gray diff --git a/pkg/webui/console/containers/dev-eui-component/index.js b/pkg/webui/console/containers/dev-eui-component/index.js index e88df9cbff..763b41eafd 100644 --- a/pkg/webui/console/containers/dev-eui-component/index.js +++ b/pkg/webui/console/containers/dev-eui-component/index.js @@ -36,8 +36,6 @@ import { selectSelectedApplicationId, } from '@console/store/selectors/applications' -import style from './dev-eui.styl' - const m = defineMessages({ unknownError: 'Unknown error while generating DevEUI', }) @@ -65,7 +63,7 @@ const DevEUIComponent = props => { }, } - const indicatorCls = classnames(style.indicator, { + const indicatorCls = classnames('ml-cs-s', 'al-center', 'tc-subtle-gray', { 'tc-error': applicationDevEUICounter === env.devEUIConfig.applicationLimit || Boolean(errorMessage), }) diff --git a/pkg/webui/console/containers/device-importer/device-importer.styl b/pkg/webui/console/containers/device-importer/device-importer.styl deleted file mode 100644 index 133ac64ea2..0000000000 --- a/pkg/webui/console/containers/device-importer/device-importer.styl +++ /dev/null @@ -1,28 +0,0 @@ -// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.title - margin: 0 0 $cs.s 0 - -.log-output - margin-bottom: $cs.m - -.progress-bar - margin-bottom: $cs.m - -.device-error-entry pre - margin-bottom: $cs.xs - -.process-log-title - margin-bottom: $cs.xxs diff --git a/pkg/webui/console/containers/device-importer/processor.js b/pkg/webui/console/containers/device-importer/processor.js index ba9f090cab..7a9d6c9cbd 100644 --- a/pkg/webui/console/containers/device-importer/processor.js +++ b/pkg/webui/console/containers/device-importer/processor.js @@ -35,8 +35,6 @@ import { selectSelectedApplicationId } from '@console/store/selectors/applicatio import m from './messages' -import style from './device-importer.styl' - const statusMap = { processing: 'good', error: 'bad', @@ -92,7 +90,7 @@ const Processor = ({ target={convertedDevices.length} showStatus showEstimation={!hasErrored && !aborted} - className={style.progressBar} + className="mb-cs-m" > {status === 'processing' && ( - + )} ) : ( @@ -156,8 +154,8 @@ const Processor = ({ />
    {deviceErrors.map(({ deviceId, error }) => ( -
  • - 
    {deviceId}
    +
  • + 
    {deviceId}
    • ))} @@ -170,9 +168,9 @@ const Processor = ({ )} )} - + { const bottomBarLeft = ( <> }> -
    +
    @@ -105,7 +103,7 @@ const DeviceTitleSection = props => { iconAlt={sharedMessages.device} > { return ( {userId}{' '} - + ) } @@ -282,7 +283,7 @@ const UsersTable = props => { width: 7, render: isAdmin => { if (isAdmin) { - return + return } return null diff --git a/pkg/webui/console/containers/users-table/users-table.styl b/pkg/webui/console/containers/users-table/users-table.styl deleted file mode 100644 index e2b3ae405a..0000000000 --- a/pkg/webui/console/containers/users-table/users-table.styl +++ /dev/null @@ -1,19 +0,0 @@ -// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.icon - color: $c-active-blue - -.hint - color: $tc-subtle-gray diff --git a/pkg/webui/console/containers/webhooks-table/index.js b/pkg/webui/console/containers/webhooks-table/index.js index bbc5ab711c..f9782508f0 100644 --- a/pkg/webui/console/containers/webhooks-table/index.js +++ b/pkg/webui/console/containers/webhooks-table/index.js @@ -32,8 +32,6 @@ import { getWebhooksList } from '@console/store/actions/webhooks' import { selectWebhooksHealthStatusEnabled } from '@console/store/selectors/application-server' import { selectWebhooks, selectWebhooksTotalCount } from '@console/store/selectors/webhooks' -import style from './webhooks-table.styl' - const m = defineMessages({ templateId: 'Template ID', healthy: 'Healthy', @@ -74,7 +72,8 @@ const WebhooksTable = () => { name: 'template_ids.template_id', displayName: m.templateId, width: 12, - render: value => value || , + render: value => + value || , sortable: true, }, ] diff --git a/pkg/webui/console/containers/webhooks-table/webhooks-table.styl b/pkg/webui/console/containers/webhooks-table/webhooks-table.styl deleted file mode 100644 index a01352300b..0000000000 --- a/pkg/webui/console/containers/webhooks-table/webhooks-table.styl +++ /dev/null @@ -1,16 +0,0 @@ -// Copyright © 2020 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.none - color: $tc-subtle-gray diff --git a/pkg/webui/console/views/app/app.styl b/pkg/webui/console/views/app/app.styl index 3ae4bbb535..89f16356e1 100644 --- a/pkg/webui/console/views/app/app.styl +++ b/pkg/webui/console/views/app/app.styl @@ -12,10 +12,6 @@ // See the License for the specific language governing permissions and // limitations under the License. -.app - height: 100% - width: 100% - .main position: relative display: flex diff --git a/pkg/webui/console/views/app/index.js b/pkg/webui/console/views/app/index.js index 9502978379..78c5ead2d7 100644 --- a/pkg/webui/console/views/app/index.js +++ b/pkg/webui/console/views/app/index.js @@ -72,7 +72,7 @@ const Layout = () => { <> -
    +
    { LoRa Cloud - +
    {
    -
    +
    diff --git a/pkg/webui/console/views/application-overview/application-overview.styl b/pkg/webui/console/views/application-overview/application-overview.styl index b640ffcc64..31534a5ec2 100644 --- a/pkg/webui/console/views/application-overview/application-overview.styl +++ b/pkg/webui/console/views/application-overview/application-overview.styl @@ -18,11 +18,3 @@ +media-query($bp.s) margin-bottom: $ls.xs - -.table - margin-top: $ls.xl - +media-query($bp.s) - margin-top: $ls.xs - -.status - margin-right: $cs.l diff --git a/pkg/webui/console/views/application-overview/index.js b/pkg/webui/console/views/application-overview/index.js index b4ac1bea6a..89c1c5f135 100644 --- a/pkg/webui/console/views/application-overview/index.js +++ b/pkg/webui/console/views/application-overview/index.js @@ -92,7 +92,7 @@ const ApplicationOverview = () => {     - + diff --git a/pkg/webui/console/views/application-payload-formatters/application-payload-formatters.styl b/pkg/webui/console/views/application-payload-formatters/application-payload-formatters.styl deleted file mode 100644 index df45a3acab..0000000000 --- a/pkg/webui/console/views/application-payload-formatters/application-payload-formatters.styl +++ /dev/null @@ -1,16 +0,0 @@ -// Copyright © 2022 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.warning-notification - margin-top: $ls.xs diff --git a/pkg/webui/console/views/device-messaging/device-messaging.styl b/pkg/webui/console/views/device-messaging/device-messaging.styl deleted file mode 100644 index a5d6ed3c88..0000000000 --- a/pkg/webui/console/views/device-messaging/device-messaging.styl +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright © 2020 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -.tabs - margin-top: 0 - margin-bottom: $ls.s - - +media-query($bp.s) - background: none - margin-right: 0 diff --git a/pkg/webui/console/views/device-messaging/index.js b/pkg/webui/console/views/device-messaging/index.js index 60ed699cd5..40cb81e5ce 100644 --- a/pkg/webui/console/views/device-messaging/index.js +++ b/pkg/webui/console/views/device-messaging/index.js @@ -35,8 +35,6 @@ import { checkFromState, } from '@console/lib/feature-checks' -import style from './device-messaging.styl' - const DeviceMessaging = () => { const { appId, devId } = useParams() const mayScheduleDown = useSelector(state => checkFromState(mayScheduleDownlinks, state)) @@ -59,7 +57,7 @@ const DeviceMessaging = () => { {tabs.length > 0 && ( - + )} diff --git a/pkg/webui/console/views/gateway-overview/gateway-overview.styl b/pkg/webui/console/views/gateway-overview/gateway-overview.styl index 7ee31ec510..2de51981a3 100644 --- a/pkg/webui/console/views/gateway-overview/gateway-overview.styl +++ b/pkg/webui/console/views/gateway-overview/gateway-overview.styl @@ -18,6 +18,3 @@ +media-query($bp.s) margin-bottom: $ls.xs - -.not-available - color: $tc-subtle-gray diff --git a/pkg/webui/console/views/gateway-overview/index.js b/pkg/webui/console/views/gateway-overview/index.js index a56b3abed3..bb9e57b8ab 100644 --- a/pkg/webui/console/views/gateway-overview/index.js +++ b/pkg/webui/console/views/gateway-overview/index.js @@ -141,7 +141,7 @@ const GatewayOverview = () => { message={m.downloadGlobalConf} /> ) : ( - + ), }) } diff --git a/pkg/webui/console/views/sub-view-error/sub-view.styl b/pkg/webui/console/views/sub-view-error/sub-view.styl index 2baa04bf26..cda98bfb80 100644 --- a/pkg/webui/console/views/sub-view-error/sub-view.styl +++ b/pkg/webui/console/views/sub-view-error/sub-view.styl @@ -22,6 +22,3 @@ h2 display: inline - -.button - margin-top: $ls.m diff --git a/pkg/webui/lib/components/init.js b/pkg/webui/lib/components/init.js index 3b02568b1b..215106b208 100644 --- a/pkg/webui/lib/components/init.js +++ b/pkg/webui/lib/components/init.js @@ -18,11 +18,8 @@ import 'focus-visible/dist/focus-visible' import { setConfiguration } from 'react-grid-system' import { defineMessages } from 'react-intl' -import SourceSansRegular from '@assets/fonts/source-sans-pro-v13-latin_latin-ext-regular.woff2' -import SourceSans600 from '@assets/fonts/source-sans-pro-v13-latin_latin-ext-600.woff2' -import SourceSans700 from '@assets/fonts/source-sans-pro-v13-latin_latin-ext-700.woff2' import IBMPlexMono from '@assets/fonts/ibm-plex-mono-regular.woff2' -import MaterialIcons from '@assets/fonts/materialicons.woff2' +import MaterialIconsOutlined from '@assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf' import TextSecurityDisc from '@assets/fonts/text-security-disc.woff2' import LAYOUT from '@ttn-lw/constants/layout' @@ -39,20 +36,16 @@ import { import Message from './message' import '@ttn-lw/styles/main.styl' +import '@ttn-lw/styles/utilities/general.styl' +import '@ttn-lw/styles/utilities/spacing.styl' +import '@ttn-lw/styles/utilities/color.styl' const m = defineMessages({ initializing: 'Initializing…', }) // Keep this list updated with fonts used in `/styles/fonts.styl`. -const fontsToPreload = [ - SourceSansRegular, - SourceSans600, - SourceSans700, - IBMPlexMono, - MaterialIcons, - TextSecurityDisc, -] +const fontsToPreload = [IBMPlexMono, MaterialIconsOutlined, TextSecurityDisc] setConfiguration({ breakpoints: [ diff --git a/pkg/webui/styles/fonts.styl b/pkg/webui/styles/fonts.styl index 219b19dba4..6de7e3ab03 100644 --- a/pkg/webui/styles/fonts.styl +++ b/pkg/webui/styles/fonts.styl @@ -16,44 +16,6 @@ // in `/lib/components/init.js` to the `fontsToPreload` array to have them // properly preloaded and avoid flashes of unstyled text on initial page load. -// source-sans-pro-regular - latin_latin-ext -@font-face - font-family: 'Source Sans Pro' - font-style: normal - font-weight: 400 - font-display: fallback - src: url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-regular.eot') // IE9 Compat Modes. - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-regular.woff2') format('woff2'), // @stylint ignore /* Super Modern Browsers */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-regular.woff') format('woff'), // @stylint ignore /* Modern Browsers */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-regular.ttf') format('truetype'), // @stylint ignore /* Safari, Android, iOS */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-regular.svg#SourceSansPro') format('svg') // @stylint ignore /* Legacy iOS */ -// source-sans-pro-600 - latin_latin-ext -@font-face - font-family: 'Source Sans Pro' - font-style: normal - font-weight: 600 - font-display: fallback - src: url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-600.eot') // IE9 Compat Modes. - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-600.woff2') format('woff2'), // @stylint ignore /* Super Modern Browsers */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-600.woff') format('woff'), // @stylint ignore /* Modern Browsers */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-600.ttf') format('truetype'), // @stylint ignore /* Safari, Android, iOS */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-600.svg#SourceSansPro') format('svg') // @stylint ignore /* Legacy iOS */ - -// source-sans-pro-700 - latin_latin-ext -@font-face - font-family: 'Source Sans Pro' - font-style: normal - font-weight: 700 - font-display: fallback - src: url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-700.eot') // IE9 Compat Modes. - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-700.woff2') format('woff2'), // @stylint ignore /* Super Modern Browsers */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-700.woff') format('woff'), // @stylint ignore /* Modern Browsers */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-700.ttf') format('truetype'), // @stylint ignore /* Safari, Android, iOS */ - url('../assets/fonts/source-sans-pro-v13-latin_latin-ext-700.svg#SourceSansPro') format('svg') // @stylint ignore /* Legacy iOS */ - @font-face font-family: 'IBM Plex Mono' font-style: normal @@ -67,15 +29,11 @@ url('../assets/fonts/ibm-plex-mono-regular.svg#IBMPlexMono') format('svg') // @stylint ignore /* Legacy iOS */ @font-face - font-family: 'Material Icons' + font-family: 'Material Symbols Outlined' font-style: normal - font-weight: 400 font-display: block - src: url('../assets/fonts/materialicons.eot') // IE9 Compat Modes. - src: url('../assets/fonts/materialicons.woff2') format('woff2'), - url('../assets/fonts/materialicons.woff') format('woff'), - url('../assets/fonts/materialicons.ttf') format('truetype'), - url('../assets/fonts/materialicons.svg#MaterialIcons-Regular') format('svg') + src: url('../assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf') + src: url('../assets/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2') @font-face font-family: 'text-security-disc' diff --git a/pkg/webui/styles/include.styl b/pkg/webui/styles/include.styl index 4c238b8a90..fa6734a75b 100644 --- a/pkg/webui/styles/include.styl +++ b/pkg/webui/styles/include.styl @@ -14,6 +14,5 @@ @require 'nib' -@require './variables/brand.styl' @require './variables/generic.styl' @require './mixins.styl' diff --git a/pkg/webui/styles/main.styl b/pkg/webui/styles/main.styl index ddc1baf0da..61eade5475 100644 --- a/pkg/webui/styles/main.styl +++ b/pkg/webui/styles/main.styl @@ -73,7 +73,7 @@ code background-color: $c-text-backdrop padding: 0.1rem $cs.xxs color: $tc-black - + summary display: revert cursor: pointer @@ -90,68 +90,6 @@ summary // Global one-off styles. :global - .c-error - color: $c-error - - .c-success - color: $c-success - - .c-warning - color: $c-warning - - .c-active - color: $c-active-blue - - .tc-subtle-gray - color: $tc-subtle-gray - - .tc-deep-gray - color: $tc-deep-gray - - .p-0 - padding: 0 !important - - .pt-0 - margin-top: 0 !important - - .pb-0 - margin-bottom: 0 !important - - .m-0 - margin: 0 !important - - .mt-0 - margin-top: 0 !important - - .mb-0 - margin-bottom: 0 !important - - for $size in 'xxs' 'xs' 's' 'l' 'm' 'l' 'xl' 'xxl' - .mt-cs-{$size} - margin-top: $cs[$size] !important - - .mb-cs-{$size} - margin-bottom: $cs[$size] !important - - .ml-cs-{$size} - margin-left: $cs[$size] !important - - .mr-cs-{$size} - margin-right: $cs[$size] !important - - for $size in 'xxs' 'xs' 's' 'l' 'm' 'l' 'xl' 'xxl' - .mt-ls-{$size} - margin-top: $ls[$size] !important - - .mb-ls-{$size} - margin-bottom: $ls[$size] !important - - .ml-ls-{$size} - margin-left: $ls[$size] !important - - .mr-ls-{$size} - margin-right: $ls[$size] !important - .panel-title padding-bottom: $cs.xs border-bottom: 1px solid $c-divider diff --git a/pkg/webui/styles/mixins.styl b/pkg/webui/styles/mixins.styl index 5dc57ddf4e..2c403d871e 100644 --- a/pkg/webui/styles/mixins.styl +++ b/pkg/webui/styles/mixins.styl @@ -271,6 +271,13 @@ media-query-height($max) @media screen and (max-height: $max) {block} // @stylint ignore +generate-responsive-classes() + // Base definition. + {block} + // Responsive classes. + for $breakpoint, $width in $bp + +media-query($width) + {block} // FUNCTIONAL // ========== @@ -289,7 +296,7 @@ focus-visible() // ===== material-icon() - font-family: 'Material Icons' + font-family: 'Material Symbols Outlined' font-weight: normal font-style: normal font-size: 1.3rem diff --git a/pkg/webui/styles/utilities/color.styl b/pkg/webui/styles/utilities/color.styl new file mode 100644 index 0000000000..ea49cfec76 --- /dev/null +++ b/pkg/webui/styles/utilities/color.styl @@ -0,0 +1,84 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// 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. + +:global + .c-error + color: $c-error + + .c-success + color: $c-success + + .c-warning + color: $c-warning + + .active + color: $c.tts-primary + + .tc-subtle-gray + color: $tc-subtle-gray + + .tc-deep-gray + color: $tc-deep-gray + + // COLOR UTILITIES + + generate-color-classes($color) + .c-{$color} + color: convert('$c.' + $color) + .c-hover-{$color}:hover + color: convert('$c.' + $color) + .active-{$color}:active + color: convert('$c.' + $color) + .c-focus-{$color}:focus + color: convert('$c.' + $color) + + .bg-{$color} + background-color: convert('$c.' + $color) + .bg-hover-{$color}:hover + background-color: convert('$c.' + $color) + .bg-active-{$color}:active + background-color: convert('$c.' + $color) + .bg-focus-{$color}:focus + background-color: convert('$c.' + $color) + .bg-none + background: none + + for $name in $c + generate-color-classes($name) + + generate-responsive-color-class($width, $width-name, $color) + +media-query($width) + .{$width-name}\\:c-{$color} + color: convert('$c.' + $color) + .{$width-name}\\:c-hover-{$color}:hover + color: convert('$c.' + $color) + .{$width-name}\\:active-{$color}:active + color: convert('$c.' + $color) + .{$width-name}\\:c-focus-{$color}:focus + color: convert('$c.' + $color) + + .{$width-name}\\:bg-{$color} + background-color: convert('$c.' + $color) + .{$width-name}\\:bg-hover-{$color}:hover + background-color: convert('$c.' + $color) + .{$width-name}\\:bg-active-{$color}:active + background-color: convert('$c.' + $color) + .{$width-name}\\:bg-focus-{$color}:focus + background-color: convert('$c.' + $color) + .{$width-name}\\:bg-none + background: none + + for $name, $width in $bp + for $color in $c + generate-responsive-color-class($width, $name, $color) \ No newline at end of file diff --git a/pkg/webui/styles/utilities/general.styl b/pkg/webui/styles/utilities/general.styl new file mode 100644 index 0000000000..a29660c299 --- /dev/null +++ b/pkg/webui/styles/utilities/general.styl @@ -0,0 +1,386 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// 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. + +// Grid. +:global + .grid + display: grid + row-gap: $grid-row-gap + width: 100% + + // Prevent column-gaps that are wider than the page width when combined. + column-gap: calc(min($grid-column-gap, 100% / 11)) + + &:not(.auto-columns) + grid-template-columns: repeat(12, minmax(0, 1fr)) + + &.auto-columns + grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)) + + // Generate basic grid item classes. + for $num in (1..12) + .item-{$num} + grid-column-end: span $num + + // Generate start-column (offset) classes. + for $num in (1..12) + .item-start-{$num} + grid-column-start: $num + + // Generate responsive grid item styles. + for $name, $width in $bp + media-query($width) + for $num in (1..12) + // Generate responsive grid item overrides. + .{$name}\\:item-{$num} + grid-column-end: span $num + + // Generate responsive start-colum (offset) item overrides. + .{$name}\\:item-start-{$num} + grid-column-start: $num + + &--center + align-items: center + + // Content justification. + + .j-center + justify-content: center + + .j-start + justify-content: start + + .j-end + justify-content: end + + .j-between + justify-content: space-between + + .j-around + justify-content: space-around + + .j-evenly + justify-content: space-evenly + + .al-center + align-items: center + + .al-start + align-items: start + + .al-end + align-items: end + + // Responsive justification styles. + for $name, $width in $bp + +media-query($width) + .{$name}\\:j-center + justify-content: center !important + + .{$name}\\:j-start + justify-content: start !important + + .{$name}\\:end + justify-content: end !important + + .{$name}\\:j-between + justify-content: space-between !important + + // Block justification. + + .block-center + margin-left: auto + margin-right: auto + + // Width and height. + + .w-full + width: 100% + + .w-auto + width: auto + + .w-content + width: fit-content + + .h-full + height: 100% + + .h-auto + height: auto + + for $num in (1..9) + $percentage = percentage($num / 10) + .w-{$num}0 + width: $percentage + + .h-{$num}0 + width: $percentage + + for $name, $width in $bp + +media-query($width) + .{$name}\\:w-{$num}0 + width: $percentage + + .{$name}\\:h-{$num}0 + height: $percentage + + for $name, $width in $bp + +media-query($width) + .{$name}\\:w-full + width: 100% + + .{$name}\\:w-auto + width: auto + + .{$name}\\:w-content + width: fit-content + + .{$name}\\:h-full + height: 100% + + .{$name}\\:h-auto + height: auto + + // Positioning. + .pos-relative + position: relative + .pos-absolute + position: absolute + .pos-fixed + position: fixed + .pos-static + position: static + // Flex layout. + .direction-column + flex-direction: column + .direction-row + flex-direction: row + .flex-wrap + flex-wrap: wrap + + for $name, $width in $bp + +media-query($width) + .{$name}\\:pos-relative + position: relative + .{$name}\\:pos-absolute + position: absolute + .{$name}\\:pos-fixed + position: fixed + .{$name}\\:pos-static + position: static + .{$name}\\:direction-column + flex-direction: column + .{$name}\\:direction-row + flex-direction: row + .{$name}\\:flex-wrap + flex-wrap: wrap + + // Layout shorthands. + .pos-absolute-stretch + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + + .flex-horizontal + display: flex + justify-content: space-between + align-items: center + + .flex-column + display: flex + justify-content: space-between + flex-direction: column + + .flex-grow + flex-grow: 1 + + .flex-no-grow + flex-grow: 0 + + .flex-shrink + flex-shrink: 1 + + .flex-no-shrink + flex-shrink: 0 + + for $name, $width in $bp + +media-query($width) + .{$name}\\:direction-column + flex-direction: column !important + + .{$name}\\:direction-row + flex-direction: row !important + + // Opacity. + .opacity-0 + opacity: 0 + for $num in (1..10) + $percentage = percentage($num / 10) + .opacity-{$num}0 + opacity: $percentage + + // Miscellaneous. + .overflow-hidden + overflow: hidden + + .overflow-auto + overflow: auto + + .overflow-visible + overflow: visible + + .overflow-scroll + overflow: scroll + + .overflow-x-hidden + overflow-x: hidden + + .overflow-x-auto + overflow-x: auto + + .overflow-x-visible + overflow-x: visible + + .overflow-x-scroll + overflow-x: scroll + + .overflow-y-hidden + overflow-y: hidden + + .overflow-y-auto + overflow-y: auto + + .overflow-y-visible + overflow-y: visible + + .overflow-y-scroll + overflow-y: scroll + + .text-overflow-ellipsis + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .cursor-pointer + cursor: pointer + + // Font sizes. + + for $name in $fs + .fs-{$name} + font-size: convert('$fs.' + $name) + + // Font weights. + .fw-normal + font-weight: $fw.normal + + .fw-bold + font-weight: $fw.bold + + .fw-bolder + font-weight: $fw.bolder + + // Text alignments. + + .text-center + text-align: center + + .text-left + text-align: left + + .text-right + text-align: right + + // Text decorations. + + .td-underline + text-decoration: underline + + .td-line-through + text-decoration: line-through + + .td-none + text-decoration: none + + // Cursor. + + .cursor-pointer + cursor: pointer + + .cursor-not-allowed + cursor: not-allowed + + .cursor-grab + cursor: grab + + .cursor-zoom-in + cursor: zoom-in + + .cursor-zoom-out + cursor: zoom-out + + // Responsive typography styles. + for $name, $width in $bp + +media-query($width) + .{$name}\\:text-center + text-align: center !important + + .{$name}\\:text-left + text-align: left !important + + .{$name}\\:text-right + text-align: right !important + + // DISPLAY UTILITIES. + .d-flex + display: flex !important + + .d-inline + display: inline !important + + .d-block + display: block !important + + .d-none + display: none !important + + .d-inline-block + display: inline-block !important + + .d-inline-flex + display: inline-flex !important + + // Responsive display styles. + for $name, $width in $bp + +media-query($width) + .{$name}\\:d-flex + display: flex !important + + .{$name}\\:d-inline + display: inline !important + + .{$name}\\:d-block + display: block !important + + .{$name}\\:d-none + display: none !important + + .{$name}\\:d-inline-block + display: inline-block !important + + .{$name}\\:d-inline-flex + display: inline-flex !important diff --git a/pkg/webui/styles/utilities/spacing.styl b/pkg/webui/styles/utilities/spacing.styl new file mode 100644 index 0000000000..6e7a8cacd0 --- /dev/null +++ b/pkg/webui/styles/utilities/spacing.styl @@ -0,0 +1,75 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// 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. + +:global + // SPACING UTILITIES + + // This logic creates a spacing utility class based on + // scale, type, direction, size, etc. + // eg. `mb-ls-xs`, `md:mt-cs-m`, `m-0`, `p-sides-0`, etc. + create-spacing-classes($prefix, $scale, $type, $direction, $size) + $initial = substr($direction, 0, 1) + $t = substr($type, 0, 1) + $property = () + + // Account for 0 sizes, eg. `mb-0` + if $scale == 0 + $property = 0 + $scalesuffix = '-0' + else + // Compose property using CSS variables. + $property = convert('$' + $scale + '.' + $size) + $scalesuffix = '-' + $scale + '-' + $size + // Special case for gap + if $type == 'gap' + if $direction == '' + .gap{$scalesuffix} + gap: $property + // Account for all-sides margins/paddings. + else if $direction == '' + .{$prefix}{$t}{$scalesuffix} + {$type}: $property + // Account for special cases, vert (top/bottom) and sides (left/right). + else if $direction == 'vert' || $direction == 'sides' + .{$prefix}{$t}-{$direction}{$scalesuffix} + if $direction == 'vert' + {$type}-top: $property + {$type}-bottom: $property + else + {$type}-right: $property + {$type}-left: $property + // Default assignment. + else + // Eg. `.xs:mb-cs-s`. + .{$prefix}{$t}{$initial}{$scalesuffix} + // Eg. `margin-bottom: $cs.s)`. + {$type}-{$direction}: $property + + // Iterate through types, scales, directions, sizes and generate classes. + for $type in 'margin' 'padding' 'gap' + for $direction in 'left' 'right' 'top' 'bottom' 'vert' 'sides' '' + create-spacing-classes('', 0, $type, $direction, $size) + for $scale in 'cs' 'ls' + for $size in lookup('$' + $scale) + create-spacing-classes('', $scale, $type, $direction, $size) + + // Generate responsive classes. + for $name, $width in $bp + $prefix = $name + '\:' + +media-query($width) + for $direction in 'left' 'right' 'top' 'bottom' 'vert' 'sides' '' + create-spacing-classes($prefix, 0, $type, $direction, $size) + for $scale in 'cs' 'ls' + for $size in lookup('$' + $scale) + create-spacing-classes($prefix, $scale, $type, $direction, $size) diff --git a/pkg/webui/styles/variables/brand.styl b/pkg/webui/styles/variables/brand.styl deleted file mode 100644 index 8ce89183d8..0000000000 --- a/pkg/webui/styles/variables/brand.styl +++ /dev/null @@ -1,33 +0,0 @@ -// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. -// -// 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. - -// BRAND COLORS -// ====== - -// ## General - -$c-active-blue = #3D73FF -$c-active-blue-hover = #1E5DFF -$c-active-blue-active = #0047FF -$c-icon-fill = #686868 -$c-subtle-fill = #AAA -$c-backdrop = #F3F3F3 -$c-backdrop-lighter = #FAFAFA -$c-text-backdrop = #ECECEC - -// ## Text - -$tc-active = #3D73FF -$tc-active-hover = $c-active-blue-hover -$tc-error = #EA0000 diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl index 5f5f0ed3be..2adca93e24 100644 --- a/pkg/webui/styles/variables/generic.styl +++ b/pkg/webui/styles/variables/generic.styl @@ -15,6 +15,66 @@ // COLORS // ====== +$c = { + // Semantic colors + 'red-error-600': #EE3F41, + 'red-error-500': #F9595A, + 'red-error-100': #FFECEC, + 'green-validation-600': #25B933, + 'green-validation-500': #24C833, + 'green-validation-100': #E0F6E2, + 'orange-warning-600': #F9AB32, + 'orange-warning-500': #FFB746, + 'orange-warning-100': #FFF3E1, + 'blue-information-600': #3462DA, + 'blue-information-500': #3D73FF, + 'blue-information-100': #E3EBFF, + 'subtle-01': #DDD, + 'invert-text-01': white, + 'success-01': #25B933, + 'success-02': #F3FAFF, + 'success-03': #FAFCFF, + 'success-04': white, + // Neutral colors + 'black': #000000, + 'grey-900': #29292B, + 'grey-700': #616063, + 'grey-500': #929196, + 'grey-400': #B7B6BC, + 'grey-300': #D4D3D9, + 'grey-200': #E8E7EC, + 'grey-100': #F5F4F8, + 'bone': #F7F6F1, + 'white': #FFFFFF, + // Theme colors + 'tts-primary-100': #D2E3FF, + 'tts-primary-200': #A4C6FF, + 'tts-primary-300': #78A5FF, + 'tts-primary-400': #568AFF, + 'tts-primary': #1E5DFF, + 'tts-primary-600': #1547DB, + 'tts-primary-700': #0F34B7, + 'tts-primary-800': #092493, + 'tts-primary-900': #05187A, +} + +// ## General + +$c-active-blue = $c.tts-primary +$c-active-blue-hover = $c.tts-primary-600 +$c-active-blue-active = $c.tts-primary-700 +$c-icon-fill = $c.grey-900 +$c-subtle-fill = $c.grey-500 +$c-backdrop = $c.grey-200 +$c-backdrop-lighter = $c.grey-100 +$c-text-backdrop = #ECECEC + +// ## Text + +$tc-active = $c.tts-primary +$tc-active-hover = $c.tts-primary-600 +$tc-error = $c.red-error-600 + // ## Lines $c-divider = #EFEFEF @@ -25,18 +85,18 @@ $c-input-border = #CCC // ## Alerts -$c-success = #24C833 -$c-error = #FF5C5C -$c-warning = #FFC464 -$tc-warning = #D18100 -$c-info = $c-active-blue +$c-success = $c.success-01 +$c-error = $c.red-error-500 +$c-warning = $c.orange-warning-500 +$tc-warning = $c.orange-warning-600 +$c-info = $c.tts-primary // ## Text -$tc-black = #000 -$tc-deep-gray = #363636 -$tc-subtle-gray = #868686 +$tc-black = $c.black +$tc-deep-gray = $c.grey-900 +$tc-subtle-gray = $c.grey-500 @@ -75,7 +135,7 @@ $ls = { // ## Typefaces -$font-family = 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' +$font-family = -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" $font-family-mono = 'IBM Plex Mono', monospace @@ -203,6 +263,44 @@ $ffw = { 'quarter': 25% } +// Sizes +$sz = { + '0\.25': '0.0625rem', + '0\.5': '0.125rem', + '1': '0.25rem', + '1\.5': '0.375rem', + '2': '0.5rem', + '2\.5': '0.625rem' + '3': '0.75rem', + '3\.5': '0.875rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '14': '3.5rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '28': '7rem', + '32': '8rem', + '36': '9rem', + '40': '10rem', + '44': '11rem', + '48': '12rem', + '52': '13rem', + '56': '14rem', + '60': '15rem', + '64': '16rem', + '72': '18rem', + '80': '20rem', + '96': '24rem', +} + // MISCELLANEOUS // ============= @@ -214,3 +312,6 @@ $sidebar-width-minimized = 3rem $sidebar-mobile-menu-height = 3rem $breadcrumbs-bar-height = 3rem $default-input-height = 2.3rem + +$grid-column-gap = $ls.xxs +$grid-row-gap = $ls.xxs