podman-desktop/tailwind.config.cjs

58 lines
1.7 KiB
JavaScript
Raw Normal View History

2022-03-08 16:49:08 +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
***********************************************************************/
const tailwindColors = require('tailwindcss/colors');
const colorPalette = require('./tailwind-color-palette.json');
2022-03-08 16:49:08 +00:00
module.exports = {
content: [
'packages/renderer/index.html',
'packages/renderer/src/**/*.{svelte,ts,css}',
'packages/ui/src/**/*.{svelte,ts,css}',
2022-03-08 16:49:08 +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: {
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',
},
colors: {
// import colors from the color palette
...colorPalette,
// The remaining colors below are not part of our palette and are only here
// to maintain existing code. No new use.
zinc: {
100: tailwindColors.zinc[100],
200: tailwindColors.zinc[200],
300: tailwindColors.zinc[300],
700: tailwindColors.zinc[700],
},
},
2022-03-08 16:49:08 +00:00
},
plugins: [],
};