SONAR-18524 New Main App bar

1 files changed, 195 insertions, 0 deletions

diff --git a/server/sonar-web/tailwind.base.config.js b/server/sonar-web/tailwind.base.config.js
new file mode 100644
index 00000000000..81ec058ff2d
--- /dev/null
+++ b/server/sonar-web/tailwind.base.config.js
@@ -0,0 +1,195 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+const path = require('path');
+const { fontFamily } = require('tailwindcss/defaultTheme');
+const utilities = require('./tailwind-utilities');
+
+module.exports = {
+  prefix: 'sw-', // Prefix all tailwind classes with the sw- prefix to avoid collisions
+  theme: {
+    // Define cursors
+    cursor: {
+      auto: 'auto',
+      default: 'default',
+      pointer: 'pointer',
+      'not-allowed': 'not-allowed',
+    },
+    // Define font sizes
+    fontSize: {
+      sm: ['0.875rem', '1.25rem'], // 14px / 20px
+      base: ['1rem', '1.5rem'], // 16px / 24px
+      md: ['1.313rem', '1.75rem'], // 21px / 28px
+      lg: ['1.5rem', '1.75rem'], // 24px / 28px
+      xl: ['2.25rem', '3rem'], // 36px / 48px
+    },
+    // Define font weights
+    fontWeight: {
+      regular: 400,
+      semibold: 600,
+      bold: 700,
+    },
+    // Define font families
+    fontFamily: {
+      sans: ['Inter', ...fontFamily.sans],
+      mono: ['Ubuntu Mono', ...fontFamily.mono],
+    },
+    // Define less order properties than default
+    order: {
+      first: '-9999',
+      last: '9999',
+      none: '0',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+    },
+    // No responsive breakpoint for the webapp
+    screens: {},
+    // Defined spacing values based on our grid size
+    spacing: {
+      0: '0',
+      '1/2': '0.125rem', // 2px
+      1: '0.25rem', // 4px
+      2: '0.5rem', // 8px
+      3: '0.75rem', // 12px
+      4: '1rem', // 16px
+      6: '1.5rem', // 24px
+      8: '2rem', // 32px
+      10: '2.5rem', // 40px
+      12: '3rem', // 48px
+      16: '4rem', // 64px
+      24: '6rem', // 96px
+      40: '10rem', // 160px
+      64: '16rem', // 256px
+
+      page: '1.25rem', // 20px
+    },
+    maxHeight: (twTheme) => twTheme('height'),
+    maxWidth: (twTheme) => twTheme('width'),
+    minHeight: (twTheme) => twTheme('height'),
+    minWidth: (twTheme) => twTheme('width'),
+    borderRadius: {
+      0: '0',
+      '1/2': '0.125rem', // 2px
+      1: '0.25rem', // 4px
+      2: '0.5rem', // 8px
+      pill: '625rem',
+    },
+    zIndex: {
+      normal: '2',
+      filterbar: '50',
+      'content-popup': '52',
+      'filterbar-header': '55',
+      'top-navbar': '419',
+      popup: '420',
+      'global-navbar': '421',
+      sidebar: '421',
+      'core-concepts': '422',
+      'global-popup': '5000',
+      'dropdown-menu': '7500',
+      tooltip: '8000',
+    },
+    extend: {
+      width: {
+        'abs-150': '150px',
+        'abs-200': '200px',
+        'abs-250': '250px',
+        'abs-300': '300px',
+        'abs-350': '350px',
+        'abs-400': '400px',
+        'abs-500': '500px',
+        'abs-600': '600px',
+        'abs-800': '800px',
+        'input-small': '150px',
+        'input-medium': '250px',
+        'input-large': '350px',
+        icon: '1rem', // 16px
+      },
+      height: {
+        'abs-200': '200px',
+        icon: '1rem', // 16px
+        control: '2.25rem', // 36px
+      },
+    },
+  },
+  variants: {},
+  corePlugins: {
+    // Please respect the alphabetical order in the below plugins
+    alignItems: true, // .sw-items-x classes
+    alignSelf: true, // .sw-self-x classes
+    borderRadius: true, // .sw-rounded-x classes
+    boxSizing: true, // .sw-box-x classes
+    cursor: true, // .sw-cursor-not-allowed
+    display: true, // display classes .sw-grid .sw-flex
+    flex: true, // .sw-flex-1 .sw-flex-auto ... classes
+    flexDirection: true, // .sw-flex-row .sw-flex-col-reverse ... classes
+    flexGrow: true, // .sw-flex-grow .sw-flex-grow-0 classes
+    flexShrink: true, // .sw-flex-shrink .sw-flex-shrink-0 classes
+    flexWrap: true, // .sw-flex-wrap sw-flex-nowrap ... classes
+    fontFamily: true, // .sw-font-sans .sw-font-mono classes
+    fontSize: true, // .sw-text-sm and similar classes
+    fontWeight: true, // .sw-font-x classes
+    gap: true, // .sw-gap-x classes based on spacing
+    gridAutoFlow: true, // all css grid related classes: .sw-grid-cols-x .sw-col-span-x
+    gridColumn: true,
+    gridColumnEnd: true,
+    gridColumnStart: true,
+    gridRow: true,
+    gridRowEnd: true,
+    gridRowStart: true,
+    gridTemplateColumns: true,
+    gridTemplateRows: true,
+    height: true, // height classes .sw-h-x based on spacing + some more
+    inset: true, // placement classes .sw-top-x based on spacing + some more
+    justifyContent: true, // .sw-justify-x classes
+    lineHeight: true, // .sw-leading-x classes
+    margin: true, // .sw-m-x classes based on spacing
+    maxHeight: true, // sw-max-height classes .sw-max-h-x based on spacing + some more
+    maxWidth: true, // sw-max-width classes .sw-max-w-x based on spacing + some more
+    minHeight: true, // sw-min-height classes .sw-min-h-x based on spacing + some more
+    minWidth: true, // sw-min-width classes .sw-min-w-x based on spacing + some more
+    opacity: true, // sw-opacity-x classes
+    order: true, // .sw-order-x classes
+    overflow: true, // .sw-overflow-x classes
+    padding: true, // .sw-p-x classes based on spacing
+    pointerEvents: true, //.sw-pointer-events-none .sw-pointer-events-auto
+    position: true, // position classes .sw-relative .sw-absolute
+    preflight: false, // disable preflight
+    textAlign: true, // .sw-text-x classes
+    textOverflow: true, // .sw-overflow-ellipsis, .sw-truncate
+    textTransform: true, // sw-uppercase, .sw-capitalize
+    userSelect: true, // .sw-select-none classes
+    verticalAlign: true, // .sw-align-x classes
+    width: true, // .sw-w-x classes based on spacing + some more
+    whitespace: true, // sw-whitespace-x classes
+    wordBreak: true, // .sw-break-normal, sw-break-all, sw-break-words classes
+    zIndex: true, // .sw-z-x classes
+  },
+  plugins: [utilities],
+  // PurgeCss will look into those files to find unused tailwind classes and drop them
+  purge: {
+    content: [
+      path.resolve(__dirname, './src/**/!(__tests__|@types|api|pages|marketing)/*.{ts,tsx}'),
+    ],
+    options: {
+      safelist: [],
+    },
+  },
+};