diff --git a/packages/frontend/tailwind.config.cjs b/packages/frontend/tailwind.config.cjs index 5feab162..b960b922 100644 --- a/packages/frontend/tailwind.config.cjs +++ b/packages/frontend/tailwind.config.cjs @@ -15,7 +15,6 @@ * * SPDX-License-Identifier: Apache-2.0 ***********************************************************************/ -const defaultTheme = require('tailwindcss/defaultTheme'); const tailwindColors = require('tailwindcss/colors') const tailwindTypography = require('@tailwindcss/typography') @@ -39,200 +38,40 @@ module.exports = { '5xl': '30px', '6xl': '36px', }, - extend: { - boxShadow: { - "titlebar": 'inset 0px -1px 0px 0 rgb(54 54 61 / 0.6)', // highlight for bottom of titlebar - "pageheader": 'inset 0 0px 10px 0 rgb(0 0 0 / 0.4)', - "nav": 'inset 7px -4px 6px 0 rgb(0 0 0 / 0.15)', - }, - transitionProperty: { - width: 'width', - }, - width: { - 'leftnavbar': '54px', - 'leftsidebar': '225px', - }, - minWidth: { - 'leftnavbar': '54px', - 'leftsidebar': '225px', - }, - typography: (theme) => ({ - DEFAULT: { - css: { - color: tailwindColors.gray[100], - '--tw-prose-headings': tailwindColors.gray[100], - '--tw-prose-bold': tailwindColors.gray[100], - '--tw-prose-links': tailwindColors.purple[500], - '--tw-prose-code': tailwindColors.purple[400], - // ... - }, - }, - }), - }, colors: { - // The "status" colours to be used for Podman and Kubernetes containers - // these can be referenced by in the form of "bg-status-running" or "text-status-running" - 'status': { - // Podman & Kubernetes - 'running': tailwindColors.green[400], - - // Kubernetes only - 'terminated': tailwindColors.red[500], - 'waiting': tailwindColors.amber[600], - - // Podman only - - // Stopped & Exited are the same color / same thing in the eyes of statuses - 'stopped': tailwindColors.gray[300], - 'exited': tailwindColors.gray[300], - - // "Warning" - 'paused': tailwindColors.amber[600], - 'degraded': tailwindColors.amber[700], - - // Others - 'created': tailwindColors.green[300], - 'dead': tailwindColors.red[500], - - // If we don't know the status, use gray - 'unknown': tailwindColors.gray[100], - }, 'charcoal': { - 50: '#767676', - 100: '#707073', - 200: '#5c5c5c', - 300: '#464649', - 400: '#4a4b4f', - 500: '#36363d', 600: '#27272a', - 700: '#222222', 800: '#18181b', - 900: '#0f0f11', }, 'gray': { - 50: '#f9fafb', - 100: '#f6f6f6', - 200: '#efefef', - 300: '#e4e4e4', 400: '#d1d1d1', - 500: '#c8c8c8', - 600: '#b4b4b4', 700: '#aaabac', - 800: '#9a9a9a', 900: '#818181', }, 'purple': { - 50: '#f7f3ff', - 100: '#efe9fe', - 200: '#e2d6fe', - 300: '#bfa7f6', 400: '#ad8bfa', 500: '#8b5cf6', - 600: '#6d48bf', - 700: '#6234b1', - 800: '#4d2d87', - 900: '#37255d', - }, - 'dustypurple': { - 50: '#f2f2fb', - 100: '#e7e8f8', - 200: '#d3d3f2', - 300: '#b9b8e9', - 400: '#a09adf', - 500: '#8f81d3', - 600: '#8772c7', - 700: '#6d57ab', - 800: '#59498a', - 900: '#4a406f', - }, - 'fuschia': { - 50: '#fdf2ff', - 100: '#f9e3ff', - 200: '#f4c6ff', - 300: '#f099ff', - 400: '#e85dff', - 500: '#d721ff', - 600: '#c200ff', - 700: '#a200cf', - 800: '#8600a9', - 900: '#710689', }, 'sky': { - 50: '#f2f8fd', - 100: '#e5eff9', - 200: '#c4def3', - 300: '#90c3e9', 400: '#51a2da', - 500: '#2f88c8', - 600: '#206ca9', - 700: '#1b5789', - 800: '#1a4a72', - 900: '#1b3f5f', }, 'green': { - 50: '#f0f9f0', - 100: '#ddefdc', - 200: '#bbdfbb', - 300: '#8ec792', - 400: '#64ad6c', - 500: '#3c8d47', 600: '#2b7037', - 700: '#225a2d', - 800: '#1d4825', - 900: '#193b20', }, 'red': { - 50: '#fff4f1', - 100: '#ffe7e1', - 200: '#ffd1c7', - 300: '#ffb3a1', - 400: '#ff866a', - 500: '#f86847', 600: '#e5421d', - 700: '#c13414', - 800: '#9f2f15', - 900: '#842c18', }, 'amber': { - 50: tailwindColors.amber[50], - 100: tailwindColors.amber[100], - 200: tailwindColors.amber[200], - 300: tailwindColors.amber[300], - 400: tailwindColors.amber[400], - 500: tailwindColors.amber[500], 600: tailwindColors.amber[600], - 700: tailwindColors.amber[700], - 800: tailwindColors.amber[800], - 900: tailwindColors.amber[900], }, transparent: 'transparent', black: '#000', white: '#fff', // The remaining colors below are not part of our palette and are only here // to maintain existing code. No new use. - 'slate': { - 400: tailwindColors.slate[400], - 800: tailwindColors.slate[800], - }, - 'zinc': { - 100: tailwindColors.zinc[100], - 200: tailwindColors.zinc[200], - 300: tailwindColors.zinc[300], - 400: tailwindColors.zinc[400], - 600: tailwindColors.zinc[600], - 700: tailwindColors.zinc[700], - }, - 'indigo': { // website only - 500: tailwindColors.indigo[500], - 600: tailwindColors.indigo[600], - }, 'violet': { - 50: tailwindColors.violet[50], - 400: tailwindColors.violet[400], 500: tailwindColors.violet[500], 600: tailwindColors.violet[600], - 700: tailwindColors.violet[700], - 800: tailwindColors.violet[800], }, }, },