woodpecker/web/windi.config.ts

231 lines
6.7 KiB
TypeScript
Raw Normal View History

/* eslint-disable import/no-extraneous-dependencies */
Use consistent woodpecker color scheme (#2003) Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 07:09:12 +00:00
import tinycolor from 'tinycolor2';
import colors from 'windicss/colors';
import { defineConfig } from 'windicss/helpers';
import typography from 'windicss/plugin/typography';
Use consistent woodpecker color scheme (#2003) Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 07:09:12 +00:00
const customColors = {
'wp-primary': {
100: '#8AD97F',
200: '#68C464',
300: '#4CAF50',
400: '#369943',
500: '#248438',
600: '#166E30',
},
'wp-secondary': {
200: '#434858',
300: '#383C4A',
400: '#303440',
500: '#2D313D',
600: '#2A2E3A',
700: '#222631',
800: '#1B1F28',
},
};
export default defineConfig({
darkMode: 'class',
theme: {
extend: {
colors: {
Use consistent woodpecker color scheme (#2003) Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 07:09:12 +00:00
// Internals to keep a single source for color definitions
'int-wp-primary': {
100: customColors['wp-primary'][100],
200: customColors['wp-primary'][200],
300: customColors['wp-primary'][300],
400: customColors['wp-primary'][400],
500: customColors['wp-primary'][500],
600: customColors['wp-primary'][600],
},
'int-wp-secondary': {
200: customColors['wp-secondary'][200],
300: customColors['wp-secondary'][300],
400: customColors['wp-secondary'][400],
500: customColors['wp-secondary'][500],
600: customColors['wp-secondary'][600],
700: customColors['wp-secondary'][700],
800: customColors['wp-secondary'][800],
},
'int-wp-control-neutral': {
100: colors.white,
200: colors.gray[300],
300: colors.gray[400],
},
'int-wp-control-info': {
100: colors.cyan[700],
200: colors.cyan[800],
300: colors.cyan[900],
},
'int-wp-control-info-dark': {
100: tinycolor(colors.cyan[700]).desaturate(30).toString(),
200: tinycolor(colors.cyan[800]).desaturate(30).toString(),
300: tinycolor(colors.cyan[900]).desaturate(30).toString(),
},
'int-wp-control-ok': {
100: customColors['wp-primary'][400],
200: customColors['wp-primary'][500],
300: customColors['wp-primary'][600],
},
'int-wp-control-ok-dark': {
100: tinycolor(customColors['wp-primary'][400]).desaturate(10).toString(),
200: tinycolor(customColors['wp-primary'][500]).desaturate(10).toString(),
300: tinycolor(customColors['wp-primary'][600]).desaturate(10).toString(),
},
'int-wp-control-error': {
100: colors.red[700],
200: colors.red[800],
300: colors.red[900],
},
'int-wp-control-error-dark': {
100: tinycolor(colors.red[700]).desaturate(25).toString(),
200: tinycolor(colors.red[800]).desaturate(25).toString(),
300: tinycolor(colors.red[900]).desaturate(25).toString(),
Use consistent woodpecker color scheme (#2003) Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 07:09:12 +00:00
},
'int-wp-state-error': {
100: colors.red[700],
},
'int-wp-state-error-dark': {
100: tinycolor(colors.red[700]).desaturate(25).toString(),
Use consistent woodpecker color scheme (#2003) Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 07:09:12 +00:00
},
'int-wp-state-neutral': {
100: colors.gray[600],
},
'int-wp-state-ok': {
100: colors.green[600],
},
'int-wp-state-ok-dark': {
100: tinycolor(colors.green[600]).desaturate(20).toString(),
},
'int-wp-state-info': {
100: colors.cyan[600],
},
'int-wp-state-info-dark': {
100: tinycolor(colors.cyan[600]).desaturate(20).toString(),
},
'int-wp-state-warn': {
100: colors.yellow[400],
},
'int-wp-state-warn-dark': {
100: tinycolor(colors.yellow[400]).desaturate(20).toString(),
},
'int-wp-hint-warn': {
100: colors.yellow[100],
200: colors.yellow[300],
},
'int-wp-hint-warn-dark': {
100: tinycolor(colors.yellow[300]).desaturate(60).toString(),
200: tinycolor(colors.yellow[500]).desaturate(60).toString(),
},
// Theme colors
'wp-background': {
100: 'var(--wp-background-100)',
200: 'var(--wp-background-200)',
300: 'var(--wp-background-300)',
400: 'var(--wp-background-400)',
},
'wp-text': {
100: 'var(--wp-text-100)',
200: 'var(--wp-text-200)',
},
'wp-text-alt': {
100: 'var(--wp-text-alt-100)',
},
'wp-primary': {
100: 'var(--wp-primary-100)',
200: 'var(--wp-primary-200)',
300: 'var(--wp-primary-300)',
},
'wp-primary-text': {
100: 'var(--wp-primary-text-100)',
},
'wp-control-neutral': {
100: 'var(--wp-control-neutral-100)',
200: 'var(--wp-control-neutral-200)',
300: 'var(--wp-control-neutral-300)',
},
'wp-control-info': {
100: 'var(--wp-control-info-100)',
200: 'var(--wp-control-info-200)',
300: 'var(--wp-control-info-300)',
},
'wp-control-ok': {
100: 'var(--wp-control-ok-100)',
200: 'var(--wp-control-ok-200)',
300: 'var(--wp-control-ok-300)',
},
'wp-control-error': {
100: 'var(--wp-control-error-100)',
200: 'var(--wp-control-error-200)',
300: 'var(--wp-control-error-300)',
},
'wp-state-error': {
100: 'var(--wp-state-error-100)',
},
'wp-state-neutral': {
100: 'var(--wp-state-neutral-100)',
},
'wp-state-ok': {
100: 'var(--wp-state-ok-100)',
},
'wp-state-info': {
100: 'var(--wp-state-info-100)',
},
'wp-state-warn': {
100: 'var(--wp-state-warn-100)',
},
'wp-hint-warn': {
100: 'var(--wp-hint-warn-100)',
200: 'var(--wp-hint-warn-200)',
},
'wp-code': {
100: 'var(--wp-code-100)',
200: 'var(--wp-code-200)',
},
'wp-code-text': {
100: 'var(--wp-code-text-100)',
},
'wp-code-text-alt': {
100: 'var(--wp-code-text-alt-100)',
},
Use consistent woodpecker color scheme (#2003) Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 07:09:12 +00:00
'wp-link': {
100: 'var(--wp-link-100)',
200: 'var(--wp-link-200)',
},
},
transitionProperty: {
height: 'max-height',
},
stroke: (theme) => theme('colors'),
fill: (theme) => theme('colors'),
fontFamily: [
'system-ui',
'-apple-system',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Noto Sans',
'Liberation Sans',
'Arial',
'sans-serif',
],
},
},
shortcuts: {
'hover-effect':
'hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 transition-colors duration-100',
},
Use consistent woodpecker color scheme (#2003) Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details> ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f) I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues. ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb) ![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27) What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
2023-08-02 07:09:12 +00:00
plugins: [typography()],
});