2022-03-08 16:49:08 +00:00
|
|
|
/**********************************************************************
|
2024-02-01 16:48:02 +00:00
|
|
|
* Copyright (C) 2022-2024 Red Hat, Inc.
|
2022-03-08 16:49:08 +00:00
|
|
|
*
|
|
|
|
|
* 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.
|
|
|
|
|
*
|
|
|
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
***********************************************************************/
|
|
|
|
|
|
2024-09-23 08:21:07 +00:00
|
|
|
const tailwindColors = require('tailwindcss/colors');
|
|
|
|
|
const colorPalette = require('./tailwind-color-palette.json');
|
2024-02-09 16:59:00 +00:00
|
|
|
|
2022-03-08 16:49:08 +00:00
|
|
|
module.exports = {
|
|
|
|
|
content: [
|
|
|
|
|
'packages/renderer/index.html',
|
2023-10-11 09:09:19 +00:00
|
|
|
'packages/renderer/src/**/*.{svelte,ts,css}',
|
2024-02-28 20:33:04 +00:00
|
|
|
'packages/ui/src/**/*.{svelte,ts,css}',
|
2022-03-08 16:49:08 +00:00
|
|
|
],
|
2023-11-20 16:06:47 +00:00
|
|
|
darkMode: 'class',
|
2022-03-08 16:49:08 +00:00
|
|
|
theme: {
|
Font sizes and UI consistency (#7995)
* chore: font sizes and consistency
Stevan and I spent some time yesterday walking through the UI and trying to
address a few related issues:
- The base (default) font size is too big.
- As a result just about everything has a text-sm or -xs, or even a hardcoded
font size instead of fixing the core problem.
- Many pages have 3, 4, or even 5 font sizes, and then several variations of
font weight from light to bold.
- We've been through at least 4 design iterations, and it shows. Need to
clean up and make more of the UI consistent, and
Unfortunately, the only way to address 1+2 is to reset the default font size,
which means *everything* will need a minor font change. So, here we go! The
core philosophy of this change is:
- Regular controls like Buttons, Inputs, and text descriptions should all be
at the base (default) font size.
- The default size should be reduced from 16px to 12px. (but this would at
least be configurable now)
- Most other text (see below) should only be -lg or -sm, with only a couple
variations of weight.
This first commit changes the font sizes in Tailwind config, applies the new
default in index.html, and fixes the core components. Next commits will each
cover a different area:
Nav/form/settings pages
- Titles in text-lg, font-bold
- Breadcrumbs in text-sm but keep close button text-lg so it's clickable
- Align things between settings nav and settings pages
Tables:
- Header should be text-sm and font-semibold
- Column font regular size, except secondary lines should be text-sm and not
highlighted
- Labels text-sm
Forms:
- Field labels in font-bold
- Everything justified
- Later: bottom button bar right justified like in dialogs
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to settings
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to tables
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to forms
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: tests & linting
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: messagebox, dashboard, and accounts nav
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: respond to pr feedback
- Fix extensions/catalog pages.
- Increase text-sm to 11px (a little more readable and helps status bar) and
text-xs to 10px (so not too small).
- Improve status bar - refactored so selection is full height, everything is
centered correctly.
- Fix tooltip font size.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
---------
Signed-off-by: Tim deBoer <git@tdeboer.ca>
2024-07-12 12:56:13 +00:00
|
|
|
fontSize: {
|
2024-09-23 08:21:07 +00:00
|
|
|
xs: '10px',
|
|
|
|
|
sm: '11px',
|
|
|
|
|
base: '12px',
|
|
|
|
|
lg: '14px',
|
|
|
|
|
xl: '16px',
|
Font sizes and UI consistency (#7995)
* chore: font sizes and consistency
Stevan and I spent some time yesterday walking through the UI and trying to
address a few related issues:
- The base (default) font size is too big.
- As a result just about everything has a text-sm or -xs, or even a hardcoded
font size instead of fixing the core problem.
- Many pages have 3, 4, or even 5 font sizes, and then several variations of
font weight from light to bold.
- We've been through at least 4 design iterations, and it shows. Need to
clean up and make more of the UI consistent, and
Unfortunately, the only way to address 1+2 is to reset the default font size,
which means *everything* will need a minor font change. So, here we go! The
core philosophy of this change is:
- Regular controls like Buttons, Inputs, and text descriptions should all be
at the base (default) font size.
- The default size should be reduced from 16px to 12px. (but this would at
least be configurable now)
- Most other text (see below) should only be -lg or -sm, with only a couple
variations of weight.
This first commit changes the font sizes in Tailwind config, applies the new
default in index.html, and fixes the core components. Next commits will each
cover a different area:
Nav/form/settings pages
- Titles in text-lg, font-bold
- Breadcrumbs in text-sm but keep close button text-lg so it's clickable
- Align things between settings nav and settings pages
Tables:
- Header should be text-sm and font-semibold
- Column font regular size, except secondary lines should be text-sm and not
highlighted
- Labels text-sm
Forms:
- Field labels in font-bold
- Everything justified
- Later: bottom button bar right justified like in dialogs
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to settings
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to tables
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to forms
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: tests & linting
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: messagebox, dashboard, and accounts nav
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: respond to pr feedback
- Fix extensions/catalog pages.
- Increase text-sm to 11px (a little more readable and helps status bar) and
text-xs to 10px (so not too small).
- Improve status bar - refactored so selection is full height, everything is
centered correctly.
- Fix tooltip font size.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
---------
Signed-off-by: Tim deBoer <git@tdeboer.ca>
2024-07-12 12:56:13 +00:00
|
|
|
'2xl': '18px',
|
|
|
|
|
'3xl': '20px',
|
|
|
|
|
'4xl': '24px',
|
|
|
|
|
'5xl': '30px',
|
|
|
|
|
'6xl': '36px',
|
|
|
|
|
},
|
2023-04-24 12:26:29 +00:00
|
|
|
colors: {
|
2024-02-09 16:59:00 +00:00
|
|
|
// import colors from the color palette
|
|
|
|
|
...colorPalette,
|
2024-09-23 08:21:07 +00:00
|
|
|
|
2023-04-24 12:26:29 +00:00
|
|
|
// The remaining colors below are not part of our palette and are only here
|
|
|
|
|
// to maintain existing code. No new use.
|
2024-09-23 08:21:07 +00:00
|
|
|
zinc: {
|
2023-04-24 14:31:30 +00:00
|
|
|
100: tailwindColors.zinc[100],
|
|
|
|
|
200: tailwindColors.zinc[200],
|
|
|
|
|
300: tailwindColors.zinc[300],
|
|
|
|
|
700: tailwindColors.zinc[700],
|
2023-04-24 12:26:29 +00:00
|
|
|
},
|
|
|
|
|
},
|
2022-03-08 16:49:08 +00:00
|
|
|
},
|
|
|
|
|
plugins: [],
|
|
|
|
|
};
|