Bing's Website Blog https://bndy.net/blog Bing's Website Blog Thu, 12 Mar 2026 00:00:00 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en <![CDATA[LangGraph]]> https://bndy.net/blog/langgraph https://bndy.net/blog/langgraph Thu, 12 Mar 2026 00:00:00 GMT Open in Notion

image.png

]]> AI <![CDATA[Compress Files]]> https://bndy.net/blog/compress-files https://bndy.net/blog/compress-files Tue, 01 Jul 2025 00:00:00 GMT Open in Notion

tar -xzf example.tgz    # uncompress
tar  --exclude='.DS_Store' --exclude='._*' -czf your-file.tgz folder/    # compress
]]> OS <![CDATA[Check Theme of Browser]]> https://bndy.net/blog/check-theme-of-browser https://bndy.net/blog/check-theme-of-browser Mon, 30 Jun 2025 00:00:00 GMT Open in Notion

Theme of the browser​

const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
]]> Frontend JavaScript <![CDATA[Uptime Kuma]]> https://bndy.net/blog/uptime-kuma https://bndy.net/blog/uptime-kuma Fri, 27 Jun 2025 00:00:00 GMT Open in Notion

Run in Docker​

docker run -d \
	--name uk \
	--restart=unless-stopped \
	-p 8010:3001 \
	-v ~/uptime-kuma-data:/app/data \
	louislam/uptime-kuma:1
]]> DevOps Monitoring Tools <![CDATA[healthchecks]]> https://bndy.net/blog/healthchecks https://bndy.net/blog/healthchecks Thu, 26 Jun 2025 00:00:00 GMT Open in Notion

Running in Docker​

docker run -d \
  --name=hc \
  -p 8010:8000 \
  --restart unless-stopped \
  -e DB=sqlite \
  -e DB_NAME=/data/hc.sqlite \
  -e DEBUG=False \
  -e SITE_ROOT=http://10.224.59.43:8010 \
  -v ~/healthchecks-data:/data \
healthchecks

docker exec -it hc /opt/healthchecks/manage.py createsuperuser
]]> DevOps Monitoring Tools <![CDATA[Development on MacOS]]> https://bndy.net/blog/development-on-macos https://bndy.net/blog/development-on-macos Wed, 18 Jun 2025 00:00:00 GMT Open in Notion

Code Sign Invalid for Opening App​

  • Option 1: Resign

    codesign --deep --force --sign "Developer ID Application: Your Name (Team ID)" /path/to/YourApp.app

  • Option 2: Use a temprary sign

    codesign --deep --force --sign - /path/to/YourApp.app
]]> OS <![CDATA[Links ]]> https://bndy.net/blog/links https://bndy.net/blog/links Wed, 31 Jul 2024 00:00:00 GMT Open in Notion

https://cdn.jsdelivr.net/npm/@bndynet/dator/dist/index.min.js
]]> Resources <![CDATA[Color Definitions]]> https://bndy.net/blog/color-definitions https://bndy.net/blog/color-definitions Fri, 01 Mar 2024 00:00:00 GMT Open in Notion

const colorScheme = {
  background: '#1F2D3D', 
  primary: '#3498DB', 
  secondary: '#2ECC71',
  highlight: '#E74C3C',
  accent: '#F1C40F',
  textPrimary: '#FFFFFF',
  textSecondary: '#BDC3C7',
};

Retro Metro

[“#ea5545”, “#f46a9b”, “#ef9b20”, “#edbf33”, “#ede15b”, “#bdcf32”, “#87bc45”, “#27aeef”, “#b33dc6”]

metro.png

Dutch Field

[#e60049″, “#0bb4ff”, “#50e991”, “#e6d800”, “#9b19f5”, “#ffa300”, “#dc0ab4”, “#b3d4ff”, “#00bfa0”]

dutch.png

River Nights

[“#b30000”, “#7c1158”, “#4421af”, “#1a53ff”, “#0d88e6”, “#00b7c7”, “#5ad45a”, “#8be04e”, “#ebdc78”]

river-1.png

Spring Pastels

[“#fd7f6f”, “#7eb0d5”, “#b2e061”, “#bd7ebe”, “#ffb55a”, “#ffee65”, “#beb9db”, “#fdcce5”, “#8bd3c7”]

spring.png

Sequential palettes​

Blue to Yellow

blueyellow.png

[“#115f9a”, “#1984c5”, “#22a7f0”, “#48b5c4”, “#76c68f”, “#a6d75b”, “#c9e52f”, “#d0ee11”, “#f4f100”]

Grey to Red

greyred.png

[“#d7e1ee”, “#cbd6e4”, “#bfcbdb”, “#b3bfd1”, “#a4a2a8”, “#df8879”, “#c86558”, “#b04238”, “#991f17”]

Black to Pink

blackpink.png

[“#2e2b28”, “#3b3734”, “#474440”, “#54504c”, “#6b506b”, “#ab3da9”, “#de25da”, “#eb44e8”, “#ff80ff”]

Blues

blues.png

[“#0000b3”, “#0010d9”, “#0020ff”, “#0040ff”, “#0060ff”, “#0080ff”, “#009fff”, “#00bfff”, “#00ffff”]

More Colors​

export const gray = {
    gray1: "hsl(0, 0%, 99.0%)",
    gray2: "hsl(0, 0%, 97.5%)",
    gray3: "hsl(0, 0%, 94.6%)",
    gray4: "hsl(0, 0%, 92.0%)",
    gray5: "hsl(0, 0%, 89.5%)",
    gray6: "hsl(0, 0%, 86.8%)",
    gray7: "hsl(0, 0%, 83.0%)",
    gray8: "hsl(0, 0%, 73.2%)",
    gray9: "hsl(0, 0%, 55.2%)",
    gray10: "hsl(0, 0%, 50.3%)",
    gray11: "hsl(0, 0%, 39.3%)",
    gray12: "hsl(0, 0%, 12.5%)",
  };
  
  export const mauve = {
    mauve1: "hsl(300, 26.0%, 99.0%)",
    mauve2: "hsl(270, 20.0%, 98.0%)",
    mauve3: "hsl(267, 13.8%, 95.3%)",
    mauve4: "hsl(265, 12.2%, 92.7%)",
    mauve5: "hsl(263, 11.6%, 90.3%)",
    mauve6: "hsl(261, 11.1%, 87.7%)",
    mauve7: "hsl(257, 10.8%, 84.3%)",
    mauve8: "hsl(249, 10.4%, 75.5%)",
    mauve9: "hsl(252, 6.0%, 57.3%)",
    mauve10: "hsl(250, 5.0%, 52.3%)",
    mauve11: "hsl(252, 5.0%, 40.7%)",
    mauve12: "hsl(260, 10.0%, 13.5%)",
  };
  
  export const slate = {
    slate1: "hsl(240, 22.0%, 99.0%)",
    slate2: "hsl(240, 20.0%, 98.0%)",
    slate3: "hsl(239, 13.4%, 95.4%)",
    slate4: "hsl(238, 11.8%, 92.9%)",
    slate5: "hsl(237, 11.1%, 90.5%)",
    slate6: "hsl(236, 10.6%, 87.9%)",
    slate7: "hsl(234, 10.4%, 84.4%)",
    slate8: "hsl(231, 10.2%, 75.1%)",
    slate9: "hsl(230, 6.0%, 57.0%)",
    slate10: "hsl(227, 5.2%, 51.8%)",
    slate11: "hsl(220, 6.0%, 40.0%)",
    slate12: "hsl(210, 12.0%, 12.5%)",
  };
  
  export const sage = {
    sage1: "hsl(155, 30.0%, 98.8%)",
    sage2: "hsl(150, 14.3%, 97.3%)",
    sage3: "hsl(150, 8.0%, 94.5%)",
    sage4: "hsl(150, 6.0%, 92.0%)",
    sage5: "hsl(150, 4.9%, 89.5%)",
    sage6: "hsl(150, 4.3%, 86.7%)",
    sage7: "hsl(150, 3.7%, 82.8%)",
    sage8: "hsl(150, 2.9%, 72.9%)",
    sage9: "hsl(155, 3.5%, 54.2%)",
    sage10: "hsl(158, 2.9%, 49.3%)",
    sage11: "hsl(155, 3.0%, 38.5%)",
    sage12: "hsl(155, 12.0%, 11.5%)",
  };
  
  export const olive = {
    olive1: "hsl(110, 20.0%, 99.0%)",
    olive2: "hsl(120, 16.7%, 97.6%)",
    olive3: "hsl(118, 8.4%, 94.8%)",
    olive4: "hsl(116, 6.0%, 92.1%)",
    olive5: "hsl(115, 4.9%, 89.4%)",
    olive6: "hsl(113, 4.2%, 86.5%)",
    olive7: "hsl(111, 3.6%, 82.6%)",
    olive8: "hsl(105, 2.9%, 72.9%)",
    olive9: "hsl(110, 3.0%, 54.5%)",
    olive10: "hsl(105, 2.7%, 49.4%)",
    olive11: "hsl(110, 3.0%, 38.5%)",
    olive12: "hsl(110, 8.0%, 12.0%)",
  };
  
  export const sand = {
    sand1: "hsl(50, 20.0%, 99.0%)",
    sand2: "hsl(60, 7.7%, 97.5%)",
    sand3: "hsl(59, 5.8%, 94.5%)",
    sand4: "hsl(58, 5.3%, 91.8%)",
    sand5: "hsl(57, 5.1%, 89.0%)",
    sand6: "hsl(56, 5.0%, 86.0%)",
    sand7: "hsl(54, 4.9%, 81.8%)",
    sand8: "hsl(51, 5.0%, 72.4%)",
    sand9: "hsl(60, 3.0%, 53.9%)",
    sand10: "hsl(60, 2.6%, 49.0%)",
    sand11: "hsl(50, 2.5%, 38.0%)",
    sand12: "hsl(50, 8.0%, 12.0%)",
  };
  
  export const tomato = {
    tomato1: "hsl(10, 100%, 99.4%)",
    tomato2: "hsl(8, 100%, 98.4%)",
    tomato3: "hsl(8, 100%, 96.6%)",
    tomato4: "hsl(8, 100%, 94.3%)",
    tomato5: "hsl(8, 92.8%, 91.0%)",
    tomato6: "hsl(9, 84.7%, 86.3%)",
    tomato7: "hsl(10, 77.3%, 79.5%)",
    tomato8: "hsl(10, 71.6%, 71.0%)",
    tomato9: "hsl(10, 78.0%, 54.0%)",
    tomato10: "hsl(10, 71.4%, 49.4%)",
    tomato11: "hsl(10, 82.0%, 42.0%)",
    tomato12: "hsl(8, 50.0%, 24.0%)",
  };
  
  export const red = {
    red1: "hsl(359, 100%, 99.4%)",
    red2: "hsl(0, 100%, 98.4%)",
    red3: "hsl(360, 100%, 96.8%)",
    red4: "hsl(360, 97.9%, 94.8%)",
    red5: "hsl(360, 90.2%, 91.9%)",
    red6: "hsl(360, 81.7%, 87.8%)",
    red7: "hsl(359, 74.2%, 81.7%)",
    red8: "hsl(359, 69.5%, 74.3%)",
    red9: "hsl(358, 75.0%, 59.0%)",
    red10: "hsl(358, 67.4%, 54.6%)",
    red11: "hsl(358, 65.0%, 47.0%)",
    red12: "hsl(350, 63.0%, 24.0%)",
  };
  
  export const ruby = {
    ruby1: "hsl(348, 100%, 99.5%)",
    ruby2: "hsl(345, 100%, 98.4%)",
    ruby3: "hsl(345, 89.9%, 96.7%)",
    ruby4: "hsl(346, 82.6%, 94.4%)",
    ruby5: "hsl(346, 75.8%, 91.4%)",
    ruby6: "hsl(347, 69.3%, 87.1%)",
    ruby7: "hsl(348, 64.3%, 80.9%)",
    ruby8: "hsl(348, 61.5%, 73.5%)",
    ruby9: "hsl(348, 75.0%, 58.5%)",
    ruby10: "hsl(347, 68.6%, 54.1%)",
    ruby11: "hsl(345, 70.0%, 46.5%)",
    ruby12: "hsl(344, 63.0%, 24.0%)",
  };
  
  export const crimson = {
    crimson1: "hsl(332, 100%, 99.4%)",
    crimson2: "hsl(330, 100%, 98.4%)",
    crimson3: "hsl(331, 85.6%, 96.6%)",
    crimson4: "hsl(331, 78.1%, 94.2%)",
    crimson5: "hsl(332, 72.1%, 91.1%)",
    crimson6: "hsl(333, 67.0%, 86.7%)",
    crimson7: "hsl(335, 63.5%, 80.4%)",
    crimson8: "hsl(336, 62.3%, 72.9%)",
    crimson9: "hsl(336, 80.0%, 57.8%)",
    crimson10: "hsl(336, 71.3%, 52.8%)",
    crimson11: "hsl(336, 75.0%, 45.5%)",
    crimson12: "hsl(332, 63.0%, 23.5%)",
  };
  
  export const pink = {
    pink1: "hsl(322, 100%, 99.4%)",
    pink2: "hsl(323, 100%, 98.4%)",
    pink3: "hsl(323, 86.3%, 96.5%)",
    pink4: "hsl(323, 78.7%, 94.2%)",
    pink5: "hsl(323, 72.2%, 91.1%)",
    pink6: "hsl(323, 66.3%, 86.6%)",
    pink7: "hsl(323, 62.0%, 80.1%)",
    pink8: "hsl(323, 60.3%, 72.4%)",
    pink9: "hsl(322, 65.0%, 54.5%)",
    pink10: "hsl(322, 62.0%, 49.6%)",
    pink11: "hsl(322, 75.0%, 44.0%)",
    pink12: "hsl(320, 70.0%, 23.2%)",
  };
  
  export const plum = {
    plum1: "hsl(292, 90.0%, 99.4%)",
    plum2: "hsl(300, 100%, 98.6%)",
    plum3: "hsl(299, 71.2%, 96.4%)",
    plum4: "hsl(299, 62.0%, 93.8%)",
    plum5: "hsl(298, 56.1%, 90.5%)",
    plum6: "hsl(296, 51.3%, 85.8%)",
    plum7: "hsl(295, 48.2%, 78.9%)",
    plum8: "hsl(292, 47.7%, 70.8%)",
    plum9: "hsl(292, 45.0%, 51.0%)",
    plum10: "hsl(292, 50.2%, 46.9%)",
    plum11: "hsl(292, 60.0%, 42.5%)",
    plum12: "hsl(291, 57.0%, 23.2%)",
  };
  
  export const purple = {
    purple1: "hsl(280, 65.0%, 99.4%)",
    purple2: "hsl(276, 100%, 99.0%)",
    purple3: "hsl(276, 83.1%, 97.0%)",
    purple4: "hsl(275, 76.4%, 94.7%)",
    purple5: "hsl(275, 70.8%, 91.8%)",
    purple6: "hsl(274, 65.4%, 87.8%)",
    purple7: "hsl(273, 61.0%, 81.7%)",
    purple8: "hsl(272, 60.0%, 73.5%)",
    purple9: "hsl(272, 51.0%, 54.0%)",
    purple10: "hsl(272, 46.8%, 50.3%)",
    purple11: "hsl(272, 50.0%, 45.8%)",
    purple12: "hsl(270, 50.0%, 25.0%)",
  };
  
  export const violet = {
    violet1: "hsl(255, 65.0%, 99.4%)",
    violet2: "hsl(252, 100%, 99.0%)",
    violet3: "hsl(252, 96.9%, 97.4%)",
    violet4: "hsl(252, 91.5%, 95.5%)",
    violet5: "hsl(252, 85.1%, 93.0%)",
    violet6: "hsl(252, 77.8%, 89.4%)",
    violet7: "hsl(252, 71.0%, 83.7%)",
    violet8: "hsl(252, 68.6%, 76.3%)",
    violet9: "hsl(252, 56.0%, 57.5%)",
    violet10: "hsl(251, 48.1%, 53.5%)",
    violet11: "hsl(250, 43.0%, 48.0%)",
    violet12: "hsl(250, 43.0%, 26.0%)",
  };
  
  export const iris = {
    iris1: "hsl(243, 65.0%, 99.5%)",
    iris2: "hsl(240, 100%, 99.0%)",
    iris3: "hsl(240, 99.9%, 97.7%)",
    iris4: "hsl(240, 93.5%, 95.9%)",
    iris5: "hsl(240, 86.5%, 93.4%)",
    iris6: "hsl(240, 80.2%, 89.8%)",
    iris7: "hsl(239, 75.3%, 84.6%)",
    iris8: "hsl(238, 73.9%, 77.5%)",
    iris9: "hsl(240, 60.0%, 59.8%)",
    iris10: "hsl(240, 55.7%, 56.7%)",
    iris11: "hsl(240, 50.0%, 52.0%)",
    iris12: "hsl(238, 43.0%, 26.8%)",
  };
  
  export const indigo = {
    indigo1: "hsl(225, 60.0%, 99.4%)",
    indigo2: "hsl(223, 100%, 98.6%)",
    indigo3: "hsl(223, 98.4%, 97.1%)",
    indigo4: "hsl(223, 92.9%, 95.0%)",
    indigo5: "hsl(224, 87.1%, 92.0%)",
    indigo6: "hsl(224, 81.9%, 87.8%)",
    indigo7: "hsl(225, 77.4%, 82.1%)",
    indigo8: "hsl(226, 75.4%, 74.5%)",
    indigo9: "hsl(226, 70.0%, 55.5%)",
    indigo10: "hsl(226, 58.6%, 51.3%)",
    indigo11: "hsl(226, 55.0%, 45.0%)",
    indigo12: "hsl(226, 50.0%, 24.0%)",
  };
  
  export const blue = {
    blue1: "hsl(206, 100%, 99.2%)",
    blue2: "hsl(210, 100%, 98.0%)",
    blue3: "hsl(209, 100%, 96.5%)",
    blue4: "hsl(210, 98.8%, 94.0%)",
    blue5: "hsl(209, 95.0%, 90.1%)",
    blue6: "hsl(209, 81.2%, 84.5%)",
    blue7: "hsl(208, 77.5%, 76.9%)",
    blue8: "hsl(206, 81.9%, 65.3%)",
    blue9: "hsl(206, 100%, 50.0%)",
    blue10: "hsl(208, 93.5%, 47.4%)",
    blue11: "hsl(211, 90.0%, 42.0%)",
    blue12: "hsl(216, 71.0%, 23.0%)",
  };
  
  export const cyan = {
    cyan1: "hsl(185, 60.0%, 98.7%)",
    cyan2: "hsl(185, 73.3%, 97.1%)",
    cyan3: "hsl(186, 70.2%, 94.4%)",
    cyan4: "hsl(186, 63.8%, 90.6%)",
    cyan5: "hsl(187, 58.3%, 85.4%)",
    cyan6: "hsl(188, 54.6%, 78.4%)",
    cyan7: "hsl(189, 53.7%, 68.7%)",
    cyan8: "hsl(189, 60.3%, 52.5%)",
    cyan9: "hsl(190, 95.0%, 39.0%)",
    cyan10: "hsl(191, 91.2%, 36.8%)",
    cyan11: "hsl(192, 85.0%, 31.0%)",
    cyan12: "hsl(192, 70.0%, 16.5%)",
  };
  
  export const teal = {
    teal1: "hsl(165, 60.0%, 98.8%)",
    teal2: "hsl(169, 64.7%, 96.7%)",
    teal3: "hsl(169, 59.8%, 94.0%)",
    teal4: "hsl(169, 53.1%, 90.2%)",
    teal5: "hsl(170, 47.1%, 85.0%)",
    teal6: "hsl(170, 42.6%, 77.9%)",
    teal7: "hsl(170, 39.9%, 68.1%)",
    teal8: "hsl(172, 42.1%, 52.5%)",
    teal9: "hsl(173, 80.0%, 36.0%)",
    teal10: "hsl(173, 83.4%, 32.5%)",
    teal11: "hsl(174, 90.0%, 25.2%)",
    teal12: "hsl(174, 65.0%, 14.5%)",
  };
  
  export const jade = {
    jade1: "hsl(151, 60.0%, 99.0%)",
    jade2: "hsl(150, 77.8%, 96.5%)",
    jade3: "hsl(151, 65.9%, 93.7%)",
    jade4: "hsl(152, 56.5%, 90.0%)",
    jade5: "hsl(154, 49.1%, 85.0%)",
    jade6: "hsl(156, 43.5%, 78.3%)",
    jade7: "hsl(159, 40.2%, 68.7%)",
    jade8: "hsl(164, 42.0%, 53.3%)",
    jade9: "hsl(164, 60.0%, 40.0%)",
    jade10: "hsl(164, 60.8%, 36.7%)",
    jade11: "hsl(163, 65.0%, 28.9%)",
    jade12: "hsl(160, 34.0%, 17.2%)",
  };
  
  export const green = {
    green1: "hsl(136, 50.0%, 98.9%)",
    green2: "hsl(138, 62.5%, 96.9%)",
    green3: "hsl(139, 55.2%, 94.5%)",
    green4: "hsl(140, 48.7%, 91.0%)",
    green5: "hsl(141, 43.7%, 86.0%)",
    green6: "hsl(143, 40.3%, 79.0%)",
    green7: "hsl(146, 38.5%, 69.0%)",
    green8: "hsl(151, 40.2%, 54.1%)",
    green9: "hsl(151, 55.0%, 41.5%)",
    green10: "hsl(152, 57.5%, 37.6%)",
    green11: "hsl(153, 67.0%, 28.5%)",
    green12: "hsl(155, 40.0%, 16.5%)",
  };
  
  export const grass = {
    grass1: "hsl(116, 50.0%, 98.9%)",
    grass2: "hsl(120, 60.0%, 97.1%)",
    grass3: "hsl(120, 53.6%, 94.8%)",
    grass4: "hsl(121, 47.5%, 91.4%)",
    grass5: "hsl(122, 42.6%, 86.5%)",
    grass6: "hsl(124, 39.0%, 79.7%)",
    grass7: "hsl(126, 37.1%, 70.2%)",
    grass8: "hsl(131, 38.1%, 56.3%)",
    grass9: "hsl(131, 41.0%, 46.5%)",
    grass10: "hsl(132, 43.1%, 42.2%)",
    grass11: "hsl(133, 50.0%, 32.5%)",
    grass12: "hsl(131, 30.0%, 18.0%)",
  };
  
  export const brown = {
    brown1: "hsl(30, 40.0%, 99.1%)",
    brown2: "hsl(30, 50.0%, 97.6%)",
    brown3: "hsl(30, 52.5%, 94.6%)",
    brown4: "hsl(30, 53.0%, 91.2%)",
    brown5: "hsl(29, 52.9%, 86.8%)",
    brown6: "hsl(29, 52.5%, 80.9%)",
    brown7: "hsl(29, 51.5%, 72.8%)",
    brown8: "hsl(28, 50.0%, 63.1%)",
    brown9: "hsl(28, 34.0%, 51.0%)",
    brown10: "hsl(26, 31.7%, 46.9%)",
    brown11: "hsl(25, 30.0%, 39.0%)",
    brown12: "hsl(20, 15.0%, 21.0%)",
  };
  
  export const bronze = {
    bronze1: "hsl(15, 30.0%, 99.1%)",
    bronze2: "hsl(17, 63.6%, 97.8%)",
    bronze3: "hsl(17, 42.1%, 95.2%)",
    bronze4: "hsl(17, 35.2%, 92.1%)",
    bronze5: "hsl(17, 31.5%, 88.2%)",
    bronze6: "hsl(17, 29.0%, 83.0%)",
    bronze7: "hsl(17, 26.9%, 75.6%)",
    bronze8: "hsl(17, 25.1%, 66.5%)",
    bronze9: "hsl(17, 20.0%, 54.0%)",
    bronze10: "hsl(17, 17.9%, 49.3%)",
    bronze11: "hsl(15, 20.0%, 41.0%)",
    bronze12: "hsl(12, 22.0%, 21.5%)",
  };
  
  export const gold = {
    gold1: "hsl(50, 20.0%, 99.1%)",
    gold2: "hsl(47, 52.9%, 96.7%)",
    gold3: "hsl(46, 38.2%, 93.7%)",
    gold4: "hsl(44, 32.7%, 90.1%)",
    gold5: "hsl(43, 29.9%, 85.7%)",
    gold6: "hsl(41, 28.3%, 79.8%)",
    gold7: "hsl(39, 27.6%, 71.9%)",
    gold8: "hsl(36, 27.2%, 61.8%)",
    gold9: "hsl(36, 20.0%, 49.5%)",
    gold10: "hsl(36, 19.9%, 44.9%)",
    gold11: "hsl(36, 20.0%, 37.0%)",
    gold12: "hsl(36, 16.0%, 20.0%)",
  };
  
  export const sky = {
    sky1: "hsl(193, 100%, 98.8%)",
    sky2: "hsl(193, 100%, 97.3%)",
    sky3: "hsl(192, 100%, 94.3%)",
    sky4: "hsl(193, 93.5%, 90.9%)",
    sky5: "hsl(193, 79.3%, 85.9%)",
    sky6: "hsl(194, 66.1%, 78.8%)",
    sky7: "hsl(194, 60.0%, 69.4%)",
    sky8: "hsl(193, 65.2%, 56.1%)",
    sky9: "hsl(193, 98.0%, 74.0%)",
    sky10: "hsl(193, 90.0%, 71.0%)",
    sky11: "hsl(200, 60.0%, 36.0%)",
    sky12: "hsl(195, 50.0%, 20.0%)",
  };
  
  export const mint = {
    mint1: "hsl(165, 80.0%, 98.8%)",
    mint2: "hsl(164, 88.2%, 96.7%)",
    mint3: "hsl(164, 80.4%, 92.6%)",
    mint4: "hsl(165, 71.6%, 88.4%)",
    mint5: "hsl(165, 61.0%, 83.4%)",
    mint6: "hsl(166, 50.2%, 76.7%)",
    mint7: "hsl(166, 43.3%, 67.2%)",
    mint8: "hsl(168, 45.0%, 52.9%)",
    mint9: "hsl(167, 70.0%, 72.0%)",
    mint10: "hsl(167, 62.0%, 69.0%)",
    mint11: "hsl(172, 50.0%, 30.5%)",
    mint12: "hsl(171, 50.0%, 17.5%)",
  };
  
  export const lime = {
    lime1: "hsl(85, 50.0%, 98.7%)",
    lime2: "hsl(85, 66.7%, 96.5%)",
    lime3: "hsl(85, 76.8%, 91.7%)",
    lime4: "hsl(84, 71.6%, 86.6%)",
    lime5: "hsl(83, 62.5%, 80.8%)",
    lime6: "hsl(81, 51.6%, 73.6%)",
    lime7: "hsl(79, 41.5%, 64.4%)",
    lime8: "hsl(77, 40.2%, 52.2%)",
    lime9: "hsl(81, 80.0%, 66.0%)",
    lime10: "hsl(81, 75.0%, 60.0%)",
    lime11: "hsl(75, 40.0%, 29.0%)",
    lime12: "hsl(75, 40.0%, 18.0%)",
  };
  
  export const yellow = {
    yellow1: "hsl(60, 54.0%, 98.5%)",
    yellow2: "hsl(52, 100%, 93.9%)",
    yellow3: "hsl(53, 100%, 88.9%)",
    yellow4: "hsl(53, 93.7%, 83.9%)",
    yellow5: "hsl(52, 84.7%, 78.7%)",
    yellow6: "hsl(51, 73.0%, 72.4%)",
    yellow7: "hsl(48, 59.6%, 64.3%)",
    yellow8: "hsl(46, 55.0%, 52.9%)",
    yellow9: "hsl(53, 96.0%, 58.0%)",
    yellow10: "hsl(52, 95.0%, 52.0%)",
    yellow11: "hsl(42, 50.0%, 31.0%)",
    yellow12: "hsl(42, 40.0%, 20.0%)",
  };
  
  export const amber = {
    amber1: "hsl(39, 70.0%, 99.0%)",
    amber2: "hsl(40, 100%, 96.5%)",
    amber3: "hsl(45, 100%, 90.8%)",
    amber4: "hsl(44, 100%, 85.8%)",
    amber5: "hsl(40, 100%, 81.5%)",
    amber6: "hsl(39, 83.6%, 75.4%)",
    amber7: "hsl(37, 66.9%, 68.2%)",
    amber8: "hsl(35, 59.8%, 60.0%)",
    amber9: "hsl(42, 100%, 62.0%)",
    amber10: "hsl(42, 100%, 55.0%)",
    amber11: "hsl(25, 50.0%, 38.0%)",
    amber12: "hsl(25, 40.0%, 22.0%)",
  };
  
  export const orange = {
    orange1: "hsl(24, 70.0%, 99.0%)",
    orange2: "hsl(22, 100%, 97.8%)",
    orange3: "hsl(34, 100%, 91.7%)",
    orange4: "hsl(33, 100%, 86.6%)",
    orange5: "hsl(31, 100%, 82.2%)",
    orange6: "hsl(27, 100%, 78.4%)",
    orange7: "hsl(21, 100%, 74.5%)",
    orange8: "hsl(19, 80.1%, 64.5%)",
    orange9: "hsl(24, 94.0%, 50.0%)",
    orange10: "hsl(24, 100%, 46.5%)",
    orange11: "hsl(16, 45.0%, 41.5%)",
    orange12: "hsl(16, 50.0%, 23.0%)",
  };
  
  export const grayA = {
    grayA1: "hsla(0, 0%, 0%, 0.012)",
    grayA2: "hsla(0, 0%, 0%, 0.024)",
    grayA3: "hsla(0, 0%, 0%, 0.055)",
    grayA4: "hsla(0, 0%, 0%, 0.078)",
    grayA5: "hsla(0, 0%, 0%, 0.106)",
    grayA6: "hsla(0, 0%, 0%, 0.133)",
    grayA7: "hsla(0, 0%, 0%, 0.169)",
    grayA8: "hsla(0, 0%, 0%, 0.267)",
    grayA9: "hsla(0, 0%, 0%, 0.447)",
    grayA10: "hsla(0, 0%, 0%, 0.498)",
    grayA11: "hsla(0, 0%, 0%, 0.608)",
    grayA12: "hsla(0, 0%, 0%, 0.875)",
  };
  
  export const mauveA = {
    mauveA1: "hsla(300, 89.3%, 18.3%, 0.012)",
    mauveA2: "hsla(270, 89.3%, 18.3%, 0.024)",
    mauveA3: "hsla(270, 98.8%, 14.4%, 0.055)",
    mauveA4: "hsla(264, 93.8%, 12.6%, 0.083)",
    mauveA5: "hsla(270, 98.4%, 10.9%, 0.110)",
    mauveA6: "hsla(266, 94.9%, 10.5%, 0.138)",
    mauveA7: "hsla(255, 97.2%, 9.3%, 0.173)",
    mauveA8: "hsla(249, 98.4%, 9.6%, 0.271)",
    mauveA9: "hsla(249, 99.9%, 5.7%, 0.451)",
    mauveA10: "hsla(250, 99.8%, 4.7%, 0.502)",
    mauveA11: "hsla(252, 98.8%, 3.2%, 0.612)",
    mauveA12: "hsla(257, 96.0%, 1.6%, 0.879)",
  };
  
  export const slateA = {
    slateA1: "hsla(240, 89.3%, 18.3%, 0.012)",
    slateA2: "hsla(240, 89.3%, 18.3%, 0.024)",
    slateA3: "hsla(240, 99.7%, 11.6%, 0.051)",
    slateA4: "hsla(240, 93.2%, 10.6%, 0.079)",
    slateA5: "hsla(240, 98.8%, 9.4%, 0.106)",
    slateA6: "hsla(240, 94.6%, 9.3%, 0.134)",
    slateA7: "hsla(233, 97.2%, 9.3%, 0.173)",
    slateA8: "hsla(231, 98.1%, 9.4%, 0.275)",
    slateA9: "hsla(231, 99.6%, 5.6%, 0.455)",
    slateA10: "hsla(230, 99.5%, 4.7%, 0.506)",
    slateA11: "hsla(220, 98.0%, 3.8%, 0.624)",
    slateA12: "hsla(210, 95.1%, 1.9%, 0.891)",
  };
  
  export const sageA = {
    sageA1: "hsla(150, 92.6%, 26.5%, 0.016)",
    sageA2: "hsla(150, 86.2%, 14.2%, 0.032)",
    sageA3: "hsla(150, 95.7%, 6.9%, 0.059)",
    sageA4: "hsla(160, 89.0%, 7.6%, 0.087)",
    sageA5: "hsla(140, 96.8%, 5.5%, 0.110)",
    sageA6: "hsla(140, 88.8%, 4.8%, 0.138)",
    sageA7: "hsla(140, 91.7%, 3.6%, 0.177)",
    sageA8: "hsla(150, 93.2%, 3.0%, 0.279)",
    sageA9: "hsla(158, 97.0%, 3.4%, 0.475)",
    sageA10: "hsla(163, 97.0%, 2.7%, 0.522)",
    sageA11: "hsla(160, 95.5%, 2.0%, 0.628)",
    sageA12: "hsla(154, 93.5%, 1.6%, 0.899)",
  };
  
  export const oliveA = {
    oliveA1: "hsla(120, 89.3%, 18.3%, 0.012)",
    oliveA2: "hsla(120, 87.7%, 16.0%, 0.028)",
    oliveA3: "hsla(120, 97.6%, 7.3%, 0.055)",
    oliveA4: "hsla(120, 85.8%, 5.5%, 0.083)",
    oliveA5: "hsla(120, 95.2%, 3.7%, 0.110)",
    oliveA6: "hsla(120, 87.7%, 4.7%, 0.142)",
    oliveA7: "hsla(100, 90.6%, 3.6%, 0.181)",
    oliveA8: "hsla(105, 93.2%, 3.0%, 0.279)",
    oliveA9: "hsla(103, 97.1%, 3.0%, 0.471)",
    oliveA10: "hsla(110, 97.1%, 2.3%, 0.518)",
    oliveA11: "hsla(110, 95.5%, 2.0%, 0.628)",
    oliveA12: "hsla(108, 92.4%, 1.2%, 0.891)",
  };
  
  export const sandA = {
    sandA1: "hsla(60, 89.3%, 18.3%, 0.012)",
    sandA2: "hsla(60, 78.1%, 9.0%, 0.028)",
    sandA3: "hsla(60, 95.7%, 6.9%, 0.059)",
    sandA4: "hsla(60, 84.4%, 5.3%, 0.087)",
    sandA5: "hsla(60, 93.5%, 3.7%, 0.114)",
    sandA6: "hsla(60, 86.7%, 4.6%, 0.146)",
    sandA7: "hsla(48, 92.1%, 5.5%, 0.193)",
    sandA8: "hsla(51, 94.5%, 5.0%, 0.291)",
    sandA9: "hsla(60, 96.6%, 3.0%, 0.475)",
    sandA10: "hsla(60, 96.5%, 2.3%, 0.522)",
    sandA11: "hsla(60, 94.0%, 1.7%, 0.632)",
    sandA12: "hsla(48, 92.4%, 1.2%, 0.891)",
  };
  
  export const tomatoA = {
    tomatoA1: "hsla(0, 100%, 51.0%, 0.012)",
    tomatoA2: "hsla(8, 100%, 51.0%, 0.032)",
    tomatoA3: "hsla(7, 100%, 50.2%, 0.067)",
    tomatoA4: "hsla(8, 100%, 50.1%, 0.114)",
    tomatoA5: "hsla(7, 99.5%, 47.9%, 0.173)",
    tomatoA6: "hsla(9, 99.9%, 46.2%, 0.255)",
    tomatoA7: "hsla(10, 99.8%, 43.6%, 0.365)",
    tomatoA8: "hsla(10, 99.5%, 41.8%, 0.499)",
    tomatoA9: "hsla(10, 99.9%, 43.8%, 0.820)",
    tomatoA10: "hsla(10, 100%, 41.1%, 0.859)",
    tomatoA11: "hsla(10, 99.9%, 37.3%, 0.926)",
    tomatoA12: "hsla(8, 99.5%, 13.7%, 0.879)",
  };
  
  export const redA = {
    redA1: "hsla(0, 100%, 51.0%, 0.012)",
    redA2: "hsla(0, 100%, 51.0%, 0.032)",
    redA3: "hsla(0, 100%, 50.2%, 0.063)",
    redA4: "hsla(0, 100%, 50.0%, 0.102)",
    redA5: "hsla(0, 99.9%, 47.5%, 0.153)",
    redA6: "hsla(0, 99.5%, 44.9%, 0.224)",
    redA7: "hsla(359, 99.7%, 42.7%, 0.318)",
    redA8: "hsla(359, 99.6%, 41.1%, 0.436)",
    redA9: "hsla(358, 99.9%, 42.9%, 0.718)",
    redA10: "hsla(358, 99.9%, 40.2%, 0.761)",
    redA11: "hsla(358, 99.8%, 36.7%, 0.836)",
    redA12: "hsla(351, 99.9%, 16.6%, 0.910)",
  };
  
  export const rubyA = {
    rubyA1: "hsla(340, 100%, 51.0%, 0.012)",
    rubyA2: "hsla(345, 100%, 51.0%, 0.032)",
    rubyA3: "hsla(344, 99.1%, 47.1%, 0.063)",
    rubyA4: "hsla(348, 99.9%, 46.2%, 0.102)",
    rubyA5: "hsla(346, 99.9%, 43.6%, 0.153)",
    rubyA6: "hsla(347, 99.6%, 41.2%, 0.220)",
    rubyA7: "hsla(348, 99.8%, 39.4%, 0.314)",
    rubyA8: "hsla(348, 99.7%, 38.2%, 0.428)",
    rubyA9: "hsla(348, 99.8%, 43.0%, 0.726)",
    rubyA10: "hsla(347, 99.9%, 40.6%, 0.773)",
    rubyA11: "hsla(345, 99.9%, 37.9%, 0.859)",
    rubyA12: "hsla(344, 99.9%, 16.6%, 0.910)",
  };
  
  export const crimsonA = {
    crimsonA1: "hsla(340, 100%, 51.0%, 0.012)",
    crimsonA2: "hsla(330, 100%, 51.0%, 0.032)",
    crimsonA3: "hsla(332, 99.1%, 47.1%, 0.063)",
    crimsonA4: "hsla(331, 99.9%, 44.3%, 0.102)",
    crimsonA5: "hsla(333, 99.9%, 42.3%, 0.153)",
    crimsonA6: "hsla(333, 99.5%, 40.5%, 0.224)",
    crimsonA7: "hsla(335, 99.7%, 39.1%, 0.322)",
    crimsonA8: "hsla(336, 99.5%, 38.5%, 0.440)",
    crimsonA9: "hsla(336, 99.9%, 44.3%, 0.761)",
    crimsonA10: "hsla(336, 100%, 41.5%, 0.808)",
    crimsonA11: "hsla(336, 99.8%, 38.5%, 0.887)",
    crimsonA12: "hsla(332, 99.8%, 16.3%, 0.914)",
  };
  
  export const pinkA = {
    pinkA1: "hsla(320, 100%, 51.0%, 0.012)",
    pinkA2: "hsla(323, 100%, 51.0%, 0.032)",
    pinkA3: "hsla(323, 98.9%, 47.3%, 0.067)",
    pinkA4: "hsla(323, 99.9%, 44.3%, 0.102)",
    pinkA5: "hsla(324, 99.9%, 42.3%, 0.153)",
    pinkA6: "hsla(323, 99.5%, 39.6%, 0.224)",
    pinkA7: "hsla(323, 99.7%, 38.5%, 0.322)",
    pinkA8: "hsla(323, 99.5%, 37.7%, 0.444)",
    pinkA9: "hsla(322, 99.7%, 39.3%, 0.750)",
    pinkA10: "hsla(322, 99.9%, 37.9%, 0.812)",
    pinkA11: "hsla(322, 99.8%, 37.1%, 0.891)",
    pinkA12: "hsla(320, 99.6%, 17.6%, 0.930)",
  };
  
  export const plumA = {
    plumA1: "hsla(280, 100%, 51.0%, 0.012)",
    plumA2: "hsla(300, 100%, 51.0%, 0.028)",
    plumA3: "hsla(300, 99.0%, 40.9%, 0.063)",
    plumA4: "hsla(300, 99.9%, 38.5%, 0.102)",
    plumA5: "hsla(298, 98.2%, 35.9%, 0.150)",
    plumA6: "hsla(297, 99.6%, 33.7%, 0.216)",
    plumA7: "hsla(295, 99.7%, 32.6%, 0.314)",
    plumA8: "hsla(292, 99.6%, 32.4%, 0.432)",
    plumA9: "hsla(292, 99.9%, 31.0%, 0.710)",
    plumA10: "hsla(292, 99.9%, 30.8%, 0.765)",
    plumA11: "hsla(292, 99.8%, 30.7%, 0.832)",
    plumA12: "hsla(291, 100%, 14.8%, 0.902)",
  };
  
  export const purpleA = {
    purpleA1: "hsla(300, 94.3%, 34.6%, 0.012)",
    purpleA2: "hsla(276, 100%, 51.0%, 0.020)",
    purpleA3: "hsla(277, 99.6%, 46.5%, 0.055)",
    purpleA4: "hsla(274, 97.9%, 44.3%, 0.095)",
    purpleA5: "hsla(276, 98.6%, 42.0%, 0.142)",
    purpleA6: "hsla(275, 100%, 39.2%, 0.200)",
    purpleA7: "hsla(273, 99.2%, 38.2%, 0.295)",
    purpleA8: "hsla(272, 99.7%, 37.6%, 0.424)",
    purpleA9: "hsla(272, 99.6%, 34.0%, 0.695)",
    purpleA10: "hsla(272, 99.7%, 32.0%, 0.730)",
    purpleA11: "hsla(272, 99.8%, 29.7%, 0.773)",
    purpleA12: "hsla(270, 99.6%, 14.4%, 0.875)",
  };
  
  export const violetA = {
    violetA1: "hsla(270, 94.3%, 34.6%, 0.012)",
    violetA2: "hsla(252, 100%, 51.0%, 0.020)",
    violetA3: "hsla(254, 100%, 50.0%, 0.051)",
    violetA4: "hsla(251, 98.3%, 48.2%, 0.087)",
    violetA5: "hsla(252, 99.0%, 45.7%, 0.130)",
    violetA6: "hsla(251, 99.1%, 44.0%, 0.189)",
    violetA7: "hsla(252, 99.5%, 41.7%, 0.279)",
    violetA8: "hsla(252, 100%, 40.7%, 0.400)",
    violetA9: "hsla(252, 99.9%, 35.8%, 0.663)",
    violetA10: "hsla(251, 99.6%, 32.5%, 0.691)",
    violetA11: "hsla(250, 99.8%, 28.4%, 0.726)",
    violetA12: "hsla(249, 100%, 13.1%, 0.851)",
  };
  
  export const irisA = {
    irisA1: "hsla(240, 100%, 51.0%, 0.008)",
    irisA2: "hsla(240, 100%, 51.0%, 0.020)",
    irisA3: "hsla(240, 100%, 51.0%, 0.048)",
    irisA4: "hsla(240, 98.5%, 47.9%, 0.079)",
    irisA5: "hsla(240, 99.2%, 47.0%, 0.122)",
    irisA6: "hsla(240, 99.2%, 44.9%, 0.185)",
    irisA7: "hsla(239, 99.6%, 42.8%, 0.271)",
    irisA8: "hsla(238, 99.5%, 42.6%, 0.393)",
    irisA9: "hsla(240, 99.6%, 37.6%, 0.644)",
    irisA10: "hsla(240, 99.8%, 35.8%, 0.675)",
    irisA11: "hsla(240, 99.8%, 33.5%, 0.722)",
    irisA12: "hsla(238, 99.2%, 13.8%, 0.848)",
  };
  
  export const indigoA = {
    indigoA1: "hsla(240, 92.6%, 26.5%, 0.008)",
    indigoA2: "hsla(223, 100%, 51.0%, 0.028)",
    indigoA3: "hsla(224, 100%, 50.1%, 0.059)",
    indigoA4: "hsla(223, 98.0%, 48.5%, 0.099)",
    indigoA5: "hsla(225, 98.6%, 46.4%, 0.150)",
    indigoA6: "hsla(224, 99.5%, 44.9%, 0.224)",
    indigoA7: "hsla(225, 99.7%, 43.9%, 0.318)",
    indigoA8: "hsla(226, 99.5%, 43.1%, 0.448)",
    indigoA9: "hsla(226, 100%, 41.2%, 0.757)",
    indigoA10: "hsla(226, 99.8%, 37.1%, 0.773)",
    indigoA11: "hsla(226, 99.6%, 31.1%, 0.797)",
    indigoA12: "hsla(226, 99.5%, 13.7%, 0.879)",
  };
  
  export const blueA = {
    blueA1: "hsla(210, 100%, 51.0%, 0.016)",
    blueA2: "hsla(210, 100%, 51.0%, 0.040)",
    blueA3: "hsla(210, 100%, 50.3%, 0.071)",
    blueA4: "hsla(210, 100%, 50.1%, 0.118)",
    blueA5: "hsla(209, 99.1%, 49.2%, 0.193)",
    blueA6: "hsla(209, 99.5%, 45.3%, 0.283)",
    blueA7: "hsla(208, 99.9%, 43.8%, 0.412)",
    blueA8: "hsla(206, 99.8%, 45.1%, 0.632)",
    blueA9: "hsla(206, 100%, 50.0%, 1)",
    blueA10: "hsla(208, 99.9%, 45.8%, 0.969)",
    blueA11: "hsla(211, 100%, 39.4%, 0.957)",
    blueA12: "hsla(216, 99.6%, 17.5%, 0.934)",
  };
  
  export const cyanA = {
    cyanA1: "hsla(195, 95.2%, 41.2%, 0.020)",
    cyanA2: "hsla(185, 99.9%, 42.3%, 0.051)",
    cyanA3: "hsla(186, 97.8%, 42.2%, 0.095)",
    cyanA4: "hsla(186, 99.9%, 38.5%, 0.153)",
    cyanA5: "hsla(187, 99.3%, 36.6%, 0.232)",
    cyanA6: "hsla(188, 99.4%, 35.4%, 0.334)",
    cyanA7: "hsla(189, 99.6%, 35.0%, 0.483)",
    cyanA8: "hsla(189, 99.9%, 37.6%, 0.761)",
    cyanA9: "hsla(190, 99.8%, 37.8%, 0.981)",
    cyanA10: "hsla(191, 99.9%, 34.6%, 0.969)",
    cyanA11: "hsla(192, 100%, 27.6%, 0.953)",
    cyanA12: "hsla(192, 99.2%, 12.3%, 0.950)",
  };
  
  export const tealA = {
    tealA1: "hsla(165, 95.2%, 41.2%, 0.020)",
    tealA2: "hsla(169, 99.5%, 39.4%, 0.055)",
    tealA3: "hsla(167, 97.6%, 38.1%, 0.095)",
    tealA4: "hsla(168, 98.1%, 34.6%, 0.150)",
    tealA5: "hsla(170, 99.4%, 32.3%, 0.220)",
    tealA6: "hsla(170, 99.7%, 30.1%, 0.314)",
    tealA7: "hsla(170, 99.3%, 28.7%, 0.448)",
    tealA8: "hsla(172, 99.8%, 29.7%, 0.675)",
    tealA9: "hsla(173, 99.8%, 31.1%, 0.930)",
    tealA10: "hsla(173, 99.7%, 28.7%, 0.946)",
    tealA11: "hsla(174, 99.8%, 23.3%, 0.977)",
    tealA12: "hsla(174, 99.0%, 10.0%, 0.950)",
  };
  
  export const jadeA = {
    jadeA1: "hsla(160, 94.9%, 38.7%, 0.016)",
    jadeA2: "hsla(150, 99.1%, 44.0%, 0.063)",
    jadeA3: "hsla(150, 99.7%, 40.8%, 0.106)",
    jadeA4: "hsla(151, 99.8%, 36.3%, 0.157)",
    jadeA5: "hsla(153, 99.4%, 33.5%, 0.224)",
    jadeA6: "hsla(155, 99.8%, 30.4%, 0.310)",
    jadeA7: "hsla(159, 99.4%, 28.7%, 0.440)",
    jadeA8: "hsla(164, 99.9%, 29.6%, 0.663)",
    jadeA9: "hsla(164, 99.7%, 28.6%, 0.840)",
    jadeA10: "hsla(164, 100%, 25.9%, 0.855)",
    jadeA11: "hsla(163, 99.5%, 21.0%, 0.899)",
    jadeA12: "hsla(160, 98.8%, 6.7%, 0.887)",
  };
  
  export const greenA = {
    greenA1: "hsla(140, 94.9%, 38.7%, 0.016)",
    greenA2: "hsla(138, 99.9%, 38.5%, 0.051)",
    greenA3: "hsla(139, 97.7%, 36.9%, 0.087)",
    greenA4: "hsla(139, 98.5%, 32.7%, 0.134)",
    greenA5: "hsla(141, 100%, 30.4%, 0.200)",
    greenA6: "hsla(142, 99.0%, 28.9%, 0.295)",
    greenA7: "hsla(146, 99.5%, 27.6%, 0.428)",
    greenA8: "hsla(151, 99.5%, 28.8%, 0.644)",
    greenA9: "hsla(151, 99.9%, 28.0%, 0.812)",
    greenA10: "hsla(152, 99.6%, 25.8%, 0.840)",
    greenA11: "hsla(153, 99.9%, 21.0%, 0.906)",
    greenA12: "hsla(155, 99.9%, 7.4%, 0.902)",
  };
  
  export const grassA = {
    grassA1: "hsla(120, 94.9%, 38.7%, 0.016)",
    grassA2: "hsla(120, 94.9%, 38.7%, 0.048)",
    grassA3: "hsla(120, 98.0%, 35.5%, 0.079)",
    grassA4: "hsla(120, 98.7%, 31.5%, 0.126)",
    grassA5: "hsla(122, 98.5%, 29.9%, 0.193)",
    grassA6: "hsla(125, 99.2%, 27.9%, 0.283)",
    grassA7: "hsla(125, 99.9%, 27.0%, 0.408)",
    grassA8: "hsla(131, 100%, 27.6%, 0.604)",
    grassA9: "hsla(131, 99.7%, 26.3%, 0.726)",
    grassA10: "hsla(132, 99.9%, 24.0%, 0.761)",
    grassA11: "hsla(133, 99.5%, 19.5%, 0.840)",
    grassA12: "hsla(131, 99.1%, 6.3%, 0.875)",
  };
  
  export const brownA = {
    brownA1: "hsla(30, 94.3%, 34.6%, 0.012)",
    brownA2: "hsla(30, 94.3%, 34.6%, 0.036)",
    brownA3: "hsla(30, 97.7%, 33.9%, 0.083)",
    brownA4: "hsla(31, 98.5%, 34.2%, 0.134)",
    brownA5: "hsla(29, 100%, 34.3%, 0.200)",
    brownA6: "hsla(28, 99.2%, 34.6%, 0.291)",
    brownA7: "hsla(29, 99.8%, 33.8%, 0.412)",
    brownA8: "hsla(28, 100%, 33.3%, 0.553)",
    brownA9: "hsla(28, 99.9%, 25.5%, 0.655)",
    brownA10: "hsla(26, 99.6%, 22.0%, 0.679)",
    brownA11: "hsla(24, 99.6%, 16.0%, 0.726)",
    brownA12: "hsla(19, 98.8%, 3.9%, 0.820)",
  };
  
  export const bronzeA = {
    bronzeA1: "hsla(0, 89.3%, 18.3%, 0.012)",
    bronzeA2: "hsla(17, 95.1%, 40.1%, 0.036)",
    bronzeA3: "hsla(18, 98.3%, 29.8%, 0.067)",
    bronzeA4: "hsla(17, 99.6%, 26.0%, 0.106)",
    bronzeA5: "hsla(19, 99.6%, 23.8%, 0.157)",
    bronzeA6: "hsla(17, 99.2%, 22.5%, 0.220)",
    bronzeA7: "hsla(18, 99.7%, 21.6%, 0.310)",
    bronzeA8: "hsla(17, 99.5%, 20.2%, 0.420)",
    bronzeA9: "hsla(18, 99.9%, 16.7%, 0.553)",
    bronzeA10: "hsla(17, 99.0%, 14.9%, 0.597)",
    bronzeA11: "hsla(15, 99.5%, 12.0%, 0.671)",
    bronzeA12: "hsla(12, 98.7%, 5.7%, 0.832)",
  };
  
  export const goldA = {
    goldA1: "hsla(60, 89.3%, 18.3%, 0.012)",
    goldA2: "hsla(47, 99.9%, 34.6%, 0.051)",
    goldA3: "hsla(45, 97.0%, 27.9%, 0.087)",
    goldA4: "hsla(46, 98.0%, 25.4%, 0.134)",
    goldA5: "hsla(43, 98.4%, 22.6%, 0.185)",
    goldA6: "hsla(41, 99.7%, 22.0%, 0.259)",
    goldA7: "hsla(38, 99.8%, 21.5%, 0.357)",
    goldA8: "hsla(36, 99.3%, 21.5%, 0.487)",
    goldA9: "hsla(36, 99.9%, 16.2%, 0.604)",
    goldA10: "hsla(36, 99.1%, 13.9%, 0.640)",
    goldA11: "hsla(36, 99.8%, 10.6%, 0.706)",
    goldA12: "hsla(38, 98.0%, 3.8%, 0.832)",
  };
  
  export const skyA = {
    skyA1: "hsla(190, 100%, 51.0%, 0.024)",
    skyA2: "hsla(193, 100%, 50.1%, 0.055)",
    skyA3: "hsla(192, 100%, 50.1%, 0.114)",
    skyA4: "hsla(193, 99.4%, 47.9%, 0.177)",
    skyA5: "hsla(194, 100%, 44.5%, 0.251)",
    skyA6: "hsla(194, 100%, 40.0%, 0.353)",
    skyA7: "hsla(194, 99.6%, 37.7%, 0.491)",
    skyA8: "hsla(193, 99.8%, 39.5%, 0.726)",
    skyA9: "hsla(193, 99.9%, 49.6%, 0.514)",
    skyA10: "hsla(193, 100%, 47.5%, 0.553)",
    skyA11: "hsla(200, 100%, 25.2%, 0.855)",
    skyA12: "hsla(195, 100%, 11.3%, 0.902)",
  };
  
  export const mintA = {
    mintA1: "hsla(168, 95.4%, 42.8%, 0.024)",
    mintA2: "hsla(164, 99.1%, 47.1%, 0.063)",
    mintA3: "hsla(164, 98.9%, 44.4%, 0.134)",
    mintA4: "hsla(165, 100%, 42.2%, 0.200)",
    mintA5: "hsla(166, 99.7%, 37.6%, 0.267)",
    mintA6: "hsla(166, 99.2%, 33.3%, 0.350)",
    mintA7: "hsla(166, 99.7%, 30.5%, 0.471)",
    mintA8: "hsla(168, 99.7%, 31.1%, 0.683)",
    mintA9: "hsla(167, 99.8%, 41.4%, 0.475)",
    mintA10: "hsla(167, 100%, 38.3%, 0.502)",
    mintA11: "hsla(172, 99.4%, 18.1%, 0.848)",
    mintA12: "hsla(171, 99.7%, 9.7%, 0.914)",
  };
  
  export const limeA = {
    limeA1: "hsla(80, 93.8%, 31.4%, 0.020)",
    limeA2: "hsla(85, 99.3%, 40.2%, 0.059)",
    limeA3: "hsla(84, 98.6%, 43.6%, 0.146)",
    limeA4: "hsla(83, 99.4%, 41.7%, 0.232)",
    limeA5: "hsla(83, 99.8%, 38.8%, 0.314)",
    limeA6: "hsla(81, 100%, 33.8%, 0.400)",
    limeA7: "hsla(79, 100%, 29.3%, 0.502)",
    limeA8: "hsla(77, 99.8%, 28.7%, 0.671)",
    limeA9: "hsla(81, 99.9%, 44.6%, 0.612)",
    limeA10: "hsla(81, 100%, 43.0%, 0.702)",
    limeA11: "hsla(75, 99.5%, 14.3%, 0.828)",
    limeA12: "hsla(75, 98.9%, 8.0%, 0.891)",
  };
  
  export const yellowA = {
    yellowA1: "hsla(60, 94.3%, 34.6%, 0.024)",
    yellowA2: "hsla(52, 100%, 50.2%, 0.122)",
    yellowA3: "hsla(53, 100%, 50.1%, 0.224)",
    yellowA4: "hsla(53, 99.8%, 48.2%, 0.314)",
    yellowA5: "hsla(52, 99.5%, 46.1%, 0.393)",
    yellowA6: "hsla(51, 99.7%, 42.3%, 0.479)",
    yellowA7: "hsla(48, 99.8%, 37.3%, 0.569)",
    yellowA8: "hsla(46, 99.8%, 35.5%, 0.730)",
    yellowA9: "hsla(53, 99.9%, 49.1%, 0.824)",
    yellowA10: "hsla(52, 99.8%, 48.8%, 0.938)",
    yellowA11: "hsla(42, 99.4%, 18.5%, 0.844)",
    yellowA12: "hsla(42, 99.3%, 9.0%, 0.879)",
  };
  
  export const amberA = {
    amberA1: "hsla(40, 94.9%, 38.7%, 0.016)",
    amberA2: "hsla(40, 100%, 50.3%, 0.071)",
    amberA3: "hsla(45, 100%, 50.2%, 0.185)",
    amberA4: "hsla(44, 100%, 50.1%, 0.283)",
    amberA5: "hsla(40, 100%, 50.1%, 0.369)",
    amberA6: "hsla(39, 100%, 45.7%, 0.451)",
    amberA7: "hsla(37, 99.7%, 40.1%, 0.530)",
    amberA8: "hsla(35, 99.7%, 37.5%, 0.640)",
    amberA9: "hsla(42, 100%, 50.0%, 0.761)",
    amberA10: "hsla(42, 100%, 50.1%, 0.899)",
    amberA11: "hsla(25, 99.9%, 23.5%, 0.812)",
    amberA12: "hsla(24, 99.6%, 10.2%, 0.867)",
  };
  
  export const orangeA = {
    orangeA1: "hsla(20, 94.9%, 38.7%, 0.016)",
    orangeA2: "hsla(22, 100%, 51.0%, 0.044)",
    orangeA3: "hsla(34, 100%, 50.1%, 0.165)",
    orangeA4: "hsla(33, 100%, 50.1%, 0.267)",
    orangeA5: "hsla(31, 100%, 50.0%, 0.357)",
    orangeA6: "hsla(27, 100%, 50.1%, 0.432)",
    orangeA7: "hsla(21, 100%, 50.0%, 0.510)",
    orangeA8: "hsla(19, 99.7%, 44.5%, 0.640)",
    orangeA9: "hsla(24, 99.9%, 48.4%, 0.969)",
    orangeA10: "hsla(24, 100%, 46.5%, 1)",
    orangeA11: "hsla(16, 99.8%, 24.2%, 0.773)",
    orangeA12: "hsla(16, 99.4%, 13.1%, 0.887)",
  };

  export const grayDark = {
  gray1: "hsl(0, 0%, 9.5%)",
  gray2: "hsl(0, 0%, 10.5%)",
  gray3: "hsl(0, 0%, 15.8%)",
  gray4: "hsl(0, 0%, 18.9%)",
  gray5: "hsl(0, 0%, 21.7%)",
  gray6: "hsl(0, 0%, 24.7%)",
  gray7: "hsl(0, 0%, 29.1%)",
  gray8: "hsl(0, 0%, 37.5%)",
  gray9: "hsl(0, 0%, 43.0%)",
  gray10: "hsl(0, 0%, 50.7%)",
  gray11: "hsl(0, 0%, 69.5%)",
  gray12: "hsl(0, 0%, 93.5%)",
};

export const mauveDark = {
  mauve1: "hsl(300, 5.0%, 9.5%)",
  mauve2: "hsl(300, 7.1%, 11.0%)",
  mauve3: "hsl(290, 6.2%, 16.2%)",
  mauve4: "hsl(285, 5.8%, 19.5%)",
  mauve5: "hsl(280, 5.6%, 22.4%)",
  mauve6: "hsl(276, 5.4%, 25.7%)",
  mauve7: "hsl(269, 5.3%, 30.3%)",
  mauve8: "hsl(258, 5.0%, 39.2%)",
  mauve9: "hsl(250, 5.0%, 45.0%)",
  mauve10: "hsl(252, 4.3%, 52.3%)",
  mauve11: "hsl(250, 6.0%, 70.5%)",
  mauve12: "hsl(240, 7.0%, 93.8%)",
};

export const slateDark = {
  slate1: "hsl(240, 5.0%, 9.8%)",
  slate2: "hsl(240, 6.9%, 11.4%)",
  slate3: "hsl(227, 6.7%, 16.4%)",
  slate4: "hsl(222, 6.6%, 19.4%)",
  slate5: "hsl(218, 6.5%, 22.1%)",
  slate6: "hsl(214, 6.4%, 25.1%)",
  slate7: "hsl(209, 6.2%, 29.4%)",
  slate8: "hsl(202, 5.8%, 37.5%)",
  slate9: "hsl(220, 6.0%, 44.0%)",
  slate10: "hsl(218, 5.3%, 51.5%)",
  slate11: "hsl(220, 7.0%, 70.0%)",
  slate12: "hsl(220, 7.0%, 93.5%)",
};

export const sageDark = {
  sage1: "hsl(155, 7.0%, 9.2%)",
  sage2: "hsl(150, 7.7%, 10.2%)",
  sage3: "hsl(151, 5.5%, 15.2%)",
  sage4: "hsl(152, 4.7%, 18.3%)",
  sage5: "hsl(153, 4.2%, 21.1%)",
  sage6: "hsl(153, 3.7%, 24.2%)",
  sage7: "hsl(154, 3.3%, 28.7%)",
  sage8: "hsl(156, 2.6%, 37.1%)",
  sage9: "hsl(155, 6.0%, 41.5%)",
  sage10: "hsl(157, 4.6%, 49.2%)",
  sage11: "hsl(155, 5.0%, 68.3%)",
  sage12: "hsl(155, 7.0%, 93.0%)",
};

export const oliveDark = {
  olive1: "hsl(110, 5.0%, 9.2%)",
  olive2: "hsl(120, 5.7%, 10.4%)",
  olive3: "hsl(120, 4.3%, 15.4%)",
  olive4: "hsl(120, 3.9%, 18.5%)",
  olive5: "hsl(120, 3.6%, 21.2%)",
  olive6: "hsl(120, 3.3%, 24.3%)",
  olive7: "hsl(120, 3.0%, 28.7%)",
  olive8: "hsl(120, 2.6%, 37.1%)",
  olive9: "hsl(110, 6.0%, 41.5%)",
  olive10: "hsl(106, 4.6%, 49.3%)",
  olive11: "hsl(110, 5.0%, 68.8%)",
  olive12: "hsl(110, 7.0%, 93.0%)",
};

export const sandDark = {
  sand1: "hsl(60, 6.0%, 9.0%)",
  sand2: "hsl(60, 1.9%, 10.4%)",
  sand3: "hsl(56, 2.4%, 15.4%)",
  sand4: "hsl(53, 2.7%, 18.4%)",
  sand5: "hsl(51, 2.9%, 21.2%)",
  sand6: "hsl(49, 3.1%, 24.3%)",
  sand7: "hsl(47, 3.3%, 28.7%)",
  sand8: "hsl(43, 3.7%, 37.1%)",
  sand9: "hsl(50, 4.0%, 41.8%)",
  sand10: "hsl(48, 3.5%, 49.5%)",
  sand11: "hsl(50, 5.0%, 68.3%)",
  sand12: "hsl(56, 7.0%, 93.0%)",
};

export const tomatoDark = {
  tomato1: "hsl(10, 23.0%, 9.4%)",
  tomato2: "hsl(10, 39.0%, 11.6%)",
  tomato3: "hsl(9, 48.3%, 15.5%)",
  tomato4: "hsl(9, 53.0%, 18.1%)",
  tomato5: "hsl(9, 57.0%, 20.7%)",
  tomato6: "hsl(9, 61.8%, 24.5%)",
  tomato7: "hsl(9, 68.4%, 31.1%)",
  tomato8: "hsl(10, 80.4%, 43.9%)",
  tomato9: "hsl(10, 78.0%, 54.0%)",
  tomato10: "hsl(10, 88.4%, 64.1%)",
  tomato11: "hsl(10, 100%, 72.0%)",
  tomato12: "hsl(10, 85.0%, 89.0%)",
};

export const redDark = {
  red1: "hsl(353, 23.0%, 9.8%)",
  red2: "hsl(354, 30.2%, 12.4%)",
  red3: "hsl(353, 40.8%, 16.4%)",
  red4: "hsl(353, 46.3%, 19.2%)",
  red5: "hsl(353, 51.2%, 22.1%)",
  red6: "hsl(353, 57.3%, 26.2%)",
  red7: "hsl(354, 65.7%, 33.2%)",
  red8: "hsl(358, 75.0%, 47.1%)",
  red9: "hsl(358, 75.0%, 59.0%)",
  red10: "hsl(359, 84.8%, 67.6%)",
  red11: "hsl(358, 100%, 76.0%)",
  red12: "hsl(350, 100%, 91.0%)",
};

export const rubyDark = {
  ruby1: "hsl(343, 23.0%, 10.0%)",
  ruby2: "hsl(349, 33.3%, 12.4%)",
  ruby3: "hsl(348, 42.2%, 16.4%)",
  ruby4: "hsl(348, 46.8%, 19.1%)",
  ruby5: "hsl(348, 50.7%, 21.7%)",
  ruby6: "hsl(348, 56.0%, 25.7%)",
  ruby7: "hsl(348, 64.3%, 33.0%)",
  ruby8: "hsl(348, 77.0%, 46.1%)",
  ruby9: "hsl(348, 75.0%, 58.5%)",
  ruby10: "hsl(349, 84.1%, 67.1%)",
  ruby11: "hsl(348, 100%, 76.0%)",
  ruby12: "hsl(340, 95.0%, 91.0%)",
};

export const crimsonDark = {
  crimson1: "hsl(335, 20.0%, 9.6%)",
  crimson2: "hsl(336, 32.3%, 12.2%)",
  crimson3: "hsl(336, 40.2%, 16.0%)",
  crimson4: "hsl(336, 44.4%, 18.5%)",
  crimson5: "hsl(336, 48.4%, 21.3%)",
  crimson6: "hsl(336, 53.9%, 25.5%)",
  crimson7: "hsl(336, 62.7%, 32.8%)",
  crimson8: "hsl(336, 80.0%, 45.1%)",
  crimson9: "hsl(336, 80.0%, 57.8%)",
  crimson10: "hsl(339, 87.0%, 67.2%)",
  crimson11: "hsl(341, 100%, 76.0%)",
  crimson12: "hsl(330, 90.0%, 91.0%)",
};

export const pinkDark = {
  pink1: "hsl(318, 25.0%, 9.6%)",
  pink2: "hsl(318, 32.3%, 12.2%)",
  pink3: "hsl(318, 37.1%, 15.7%)",
  pink4: "hsl(319, 39.8%, 18.1%)",
  pink5: "hsl(319, 42.3%, 20.8%)",
  pink6: "hsl(319, 45.8%, 24.9%)",
  pink7: "hsl(320, 51.2%, 32.2%)",
  pink8: "hsl(322, 60.0%, 46.1%)",
  pink9: "hsl(322, 65.0%, 54.5%)",
  pink10: "hsl(324, 71.5%, 63.2%)",
  pink11: "hsl(325, 90.0%, 75.0%)",
  pink12: "hsl(325, 90.0%, 90.5%)",
};

export const plumDark = {
  plum1: "hsl(301, 20.0%, 9.4%)",
  plum2: "hsl(300, 28.8%, 11.6%)",
  plum3: "hsl(299, 31.8%, 15.5%)",
  plum4: "hsl(298, 33.4%, 18.3%)",
  plum5: "hsl(297, 34.6%, 21.0%)",
  plum6: "hsl(296, 36.0%, 25.1%)",
  plum7: "hsl(295, 37.9%, 32.7%)",
  plum8: "hsl(292, 40.2%, 47.8%)",
  plum9: "hsl(292, 45.0%, 51.0%)",
  plum10: "hsl(291, 51.2%, 60.2%)",
  plum11: "hsl(290, 70.0%, 74.0%)",
  plum12: "hsl(300, 60.0%, 89.5%)",
};

export const purpleDark = {
  purple1: "hsl(284, 20.0%, 9.6%)",
  purple2: "hsl(284, 31.1%, 12.0%)",
  purple3: "hsl(282, 35.1%, 16.8%)",
  purple4: "hsl(281, 36.9%, 20.1%)",
  purple5: "hsl(280, 38.1%, 23.0%)",
  purple6: "hsl(278, 39.5%, 27.3%)",
  purple7: "hsl(276, 41.1%, 35.1%)",
  purple8: "hsl(272, 42.7%, 50.0%)",
  purple9: "hsl(272, 51.0%, 54.0%)",
  purple10: "hsl(271, 57.8%, 61.2%)",
  purple11: "hsl(270, 90.0%, 78.0%)",
  purple12: "hsl(275, 75.0%, 91.5%)",
};

export const violetDark = {
  violet1: "hsl(250, 20.0%, 10.2%)",
  violet2: "hsl(255, 30.3%, 12.9%)",
  violet3: "hsl(254, 33.3%, 18.4%)",
  violet4: "hsl(253, 34.6%, 22.1%)",
  violet5: "hsl(253, 35.5%, 25.5%)",
  violet6: "hsl(252, 36.6%, 30.5%)",
  violet7: "hsl(251, 37.8%, 39.0%)",
  violet8: "hsl(250, 46.2%, 54.1%)",
  violet9: "hsl(252, 56.0%, 57.5%)",
  violet10: "hsl(253, 63.2%, 64.1%)",
  violet11: "hsl(255, 100%, 80.0%)",
  violet12: "hsl(250, 93.0%, 93.0%)",
};

export const irisDark = {
  iris1: "hsl(240, 22.0%, 10.5%)",
  iris2: "hsl(243, 30.4%, 13.5%)",
  iris3: "hsl(242, 32.6%, 18.9%)",
  iris4: "hsl(241, 33.5%, 22.6%)",
  iris5: "hsl(241, 34.2%, 26.1%)",
  iris6: "hsl(240, 35.0%, 31.0%)",
  iris7: "hsl(240, 36.0%, 39.4%)",
  iris8: "hsl(240, 45.2%, 54.9%)",
  iris9: "hsl(240, 60.0%, 59.8%)",
  iris10: "hsl(241, 66.4%, 65.7%)",
  iris11: "hsl(242, 100%, 81.0%)",
  iris12: "hsl(242, 92.0%, 93.5%)",
};

export const indigoDark = {
  indigo1: "hsl(229, 24.0%, 10.0%)",
  indigo2: "hsl(230, 36.4%, 12.9%)",
  indigo3: "hsl(228, 42.7%, 18.1%)",
  indigo4: "hsl(227, 45.6%, 21.4%)",
  indigo5: "hsl(227, 47.8%, 24.4%)",
  indigo6: "hsl(226, 50.3%, 28.8%)",
  indigo7: "hsl(226, 53.3%, 36.6%)",
  indigo8: "hsl(226, 60.0%, 52.0%)",
  indigo9: "hsl(226, 70.0%, 55.5%)",
  indigo10: "hsl(230, 73.9%, 63.3%)",
  indigo11: "hsl(235, 100%, 80.0%)",
  indigo12: "hsl(235, 93.0%, 93.0%)",
};

export const blueDark = {
  blue1: "hsl(212, 35.0%, 9.2%)",
  blue2: "hsl(216, 50.0%, 11.8%)",
  blue3: "hsl(214, 57.6%, 15.6%)",
  blue4: "hsl(214, 62.3%, 18.4%)",
  blue5: "hsl(213, 66.6%, 21.1%)",
  blue6: "hsl(212, 72.6%, 25.2%)",
  blue7: "hsl(211, 81.3%, 32.4%)",
  blue8: "hsl(211, 85.2%, 47.8%)",
  blue9: "hsl(206, 100%, 50.0%)",
  blue10: "hsl(206, 100%, 61.8%)",
  blue11: "hsl(205, 100%, 71.0%)",
  blue12: "hsl(205, 100%, 88.0%)",
};

export const cyanDark = {
  cyan1: "hsl(192, 60.0%, 7.2%)",
  cyan2: "hsl(193, 51.1%, 8.8%)",
  cyan3: "hsl(193, 51.9%, 11.9%)",
  cyan4: "hsl(193, 52.6%, 14.1%)",
  cyan5: "hsl(193, 53.4%, 16.5%)",
  cyan6: "hsl(192, 54.6%, 20.1%)",
  cyan7: "hsl(192, 56.6%, 26.5%)",
  cyan8: "hsl(192, 59.8%, 39.0%)",
  cyan9: "hsl(190, 95.0%, 39.0%)",
  cyan10: "hsl(190, 84.0%, 46.0%)",
  cyan11: "hsl(190, 90.0%, 54.0%)",
  cyan12: "hsl(190, 80.0%, 84.0%)",
};

export const tealDark = {
  teal1: "hsl(167, 50.0%, 6.7%)",
  teal2: "hsl(166, 55.0%, 7.8%)",
  teal3: "hsl(167, 52.9%, 10.6%)",
  teal4: "hsl(168, 52.5%, 12.7%)",
  teal5: "hsl(169, 52.6%, 14.8%)",
  teal6: "hsl(169, 53.1%, 18.0%)",
  teal7: "hsl(171, 54.9%, 23.8%)",
  teal8: "hsl(173, 59.8%, 34.1%)",
  teal9: "hsl(173, 80.0%, 36.0%)",
  teal10: "hsl(172, 89.5%, 38.8%)",
  teal11: "hsl(170, 90.0%, 44.5%)",
  teal12: "hsl(163, 70.0%, 81.0%)",
};

export const jadeDark = {
  jade1: "hsl(152, 53.0%, 6.5%)",
  jade2: "hsl(153, 47.6%, 8.2%)",
  jade3: "hsl(154, 46.7%, 11.0%)",
  jade4: "hsl(155, 47.0%, 13.2%)",
  jade5: "hsl(156, 47.7%, 15.3%)",
  jade6: "hsl(158, 49.0%, 18.5%)",
  jade7: "hsl(160, 52.0%, 24.2%)",
  jade8: "hsl(164, 59.8%, 34.1%)",
  jade9: "hsl(164, 60.0%, 40.0%)",
  jade10: "hsl(164, 66.8%, 43.7%)",
  jade11: "hsl(163, 75.0%, 48.4%)",
  jade12: "hsl(155, 70.0%, 81.0%)",
};

export const greenDark = {
  green1: "hsl(146, 30.0%, 7.4%)",
  green2: "hsl(154, 31.8%, 8.6%)",
  green3: "hsl(154, 37.6%, 11.5%)",
  green4: "hsl(154, 41.0%, 13.6%)",
  green5: "hsl(154, 43.7%, 15.7%)",
  green6: "hsl(154, 46.7%, 18.7%)",
  green7: "hsl(153, 50.3%, 24.4%)",
  green8: "hsl(151, 52.2%, 36.1%)",
  green9: "hsl(151, 55.0%, 41.5%)",
  green10: "hsl(151, 55.2%, 46.7%)",
  green11: "hsl(151, 65.0%, 54.0%)",
  green12: "hsl(144, 70.0%, 82.0%)",
};

export const grassDark = {
  grass1: "hsl(146, 30.0%, 7.4%)",
  grass2: "hsl(138, 20.8%, 9.4%)",
  grass3: "hsl(138, 25.8%, 12.5%)",
  grass4: "hsl(138, 28.4%, 14.8%)",
  grass5: "hsl(137, 30.3%, 17.1%)",
  grass6: "hsl(137, 32.3%, 20.6%)",
  grass7: "hsl(135, 34.4%, 27.1%)",
  grass8: "hsl(131, 35.3%, 40.0%)",
  grass9: "hsl(131, 41.0%, 46.5%)",
  grass10: "hsl(131, 41.7%, 55.0%)",
  grass11: "hsl(131, 50.0%, 63.0%)",
  grass12: "hsl(120, 60.0%, 85.0%)",
};

export const brownDark = {
  brown1: "hsl(22, 15.0%, 8.7%)",
  brown2: "hsl(26, 13.2%, 10.4%)",
  brown3: "hsl(26, 17.4%, 13.6%)",
  brown4: "hsl(26, 19.6%, 16.2%)",
  brown5: "hsl(27, 21.3%, 19.0%)",
  brown6: "hsl(27, 23.2%, 23.0%)",
  brown7: "hsl(27, 25.4%, 30.4%)",
  brown8: "hsl(28, 27.8%, 45.1%)",
  brown9: "hsl(28, 34.0%, 51.0%)",
  brown10: "hsl(28, 38.0%, 58.3%)",
  brown11: "hsl(28, 50.0%, 72.0%)",
  brown12: "hsl(35, 60.0%, 87.0%)",
};

export const bronzeDark = {
  bronze1: "hsl(17, 10.0%, 8.8%)",
  bronze2: "hsl(15, 7.7%, 10.2%)",
  bronze3: "hsl(15, 10.2%, 13.9%)",
  bronze4: "hsl(16, 11.5%, 16.8%)",
  bronze5: "hsl(16, 12.4%, 19.7%)",
  bronze6: "hsl(16, 13.4%, 24.1%)",
  bronze7: "hsl(17, 14.7%, 31.9%)",
  bronze8: "hsl(18, 16.0%, 47.6%)",
  bronze9: "hsl(17, 20.0%, 54.0%)",
  bronze10: "hsl(18, 23.6%, 60.8%)",
  bronze11: "hsl(18, 35.0%, 74.0%)",
  bronze12: "hsl(22, 35.0%, 89.0%)",
};

export const goldDark = {
  gold1: "hsl(44, 9.0%, 8.3%)",
  gold2: "hsl(45, 8.0%, 9.8%)",
  gold3: "hsl(44, 9.5%, 13.0%)",
  gold4: "hsl(43, 10.5%, 15.6%)",
  gold5: "hsl(42, 11.2%, 18.5%)",
  gold6: "hsl(41, 12.1%, 22.6%)",
  gold7: "hsl(39, 13.2%, 29.8%)",
  gold8: "hsl(35, 14.8%, 45.1%)",
  gold9: "hsl(36, 20.0%, 49.5%)",
  gold10: "hsl(36, 21.9%, 56.8%)",
  gold11: "hsl(35, 30.0%, 71.0%)",
  gold12: "hsl(35, 25.0%, 88.0%)",
};

export const skyDark = {
  sky1: "hsl(205, 45.0%, 8.6%)",
  sky2: "hsl(202, 49.0%, 10.0%)",
  sky3: "hsl(201, 50.8%, 13.2%)",
  sky4: "hsl(201, 52.1%, 15.8%)",
  sky5: "hsl(201, 53.3%, 18.4%)",
  sky6: "hsl(200, 54.9%, 22.2%)",
  sky7: "hsl(200, 57.2%, 29.3%)",
  sky8: "hsl(200, 60.0%, 44.1%)",
  sky9: "hsl(193, 98.0%, 74.0%)",
  sky10: "hsl(192, 100%, 77.0%)",
  sky11: "hsl(195, 100%, 66.0%)",
  sky12: "hsl(192, 100%, 88.0%)",
};

export const mintDark = {
  mint1: "hsl(173, 50.0%, 6.6%)",
  mint2: "hsl(174, 51.2%, 8.0%)",
  mint3: "hsl(174, 53.5%, 10.6%)",
  mint4: "hsl(174, 55.1%, 12.6%)",
  mint5: "hsl(173, 56.6%, 14.8%)",
  mint6: "hsl(173, 58.3%, 17.9%)",
  mint7: "hsl(172, 60.1%, 23.6%)",
  mint8: "hsl(170, 59.8%, 35.1%)",
  mint9: "hsl(167, 70.0%, 72.0%)",
  mint10: "hsl(163, 80.0%, 77.0%)",
  mint11: "hsl(167, 70.0%, 58.0%)",
  mint12: "hsl(155, 70.0%, 86.5%)",
};

export const limeDark = {
  lime1: "hsl(75, 55.0%, 6.0%)",
  lime2: "hsl(78, 41.5%, 8.0%)",
  lime3: "hsl(81, 38.1%, 11.0%)",
  lime4: "hsl(81, 39.4%, 13.1%)",
  lime5: "hsl(81, 40.8%, 15.3%)",
  lime6: "hsl(80, 42.6%, 18.4%)",
  lime7: "hsl(78, 45.4%, 24.0%)",
  lime8: "hsl(75, 49.7%, 35.1%)",
  lime9: "hsl(81, 80.0%, 66.0%)",
  lime10: "hsl(75, 85.0%, 60.0%)",
  lime11: "hsl(70, 70.0%, 50.0%)",
  lime12: "hsl(80, 80.0%, 85.0%)",
};

export const yellowDark = {
  yellow1: "hsl(45, 100%, 5.5%)",
  yellow2: "hsl(44, 78.9%, 7.5%)",
  yellow3: "hsl(44, 61.9%, 10.6%)",
  yellow4: "hsl(44, 57.5%, 13.0%)",
  yellow5: "hsl(45, 57.0%, 15.2%)",
  yellow6: "hsl(46, 57.5%, 18.3%)",
  yellow7: "hsl(47, 58.5%, 24.0%)",
  yellow8: "hsl(50, 59.8%, 35.1%)",
  yellow9: "hsl(53, 96.0%, 58.0%)",
  yellow10: "hsl(53, 96.8%, 67.5%)",
  yellow11: "hsl(55, 100%, 60.0%)",
  yellow12: "hsl(53, 100%, 84.0%)",
};

export const amberDark = {
  amber1: "hsl(36, 100%, 6.1%)",
  amber2: "hsl(36, 80.5%, 8.0%)",
  amber3: "hsl(35, 63.4%, 11.4%)",
  amber4: "hsl(34, 58.8%, 14.1%)",
  amber5: "hsl(34, 58.1%, 16.7%)",
  amber6: "hsl(35, 58.3%, 20.5%)",
  amber7: "hsl(35, 59.0%, 27.4%)",
  amber8: "hsl(36, 60.2%, 41.4%)",
  amber9: "hsl(42, 100%, 62.0%)",
  amber10: "hsl(43, 100%, 64.0%)",
  amber11: "hsl(43, 100%, 65.0%)",
  amber12: "hsl(41, 100%, 85.0%)",
};

export const orangeDark = {
  orange1: "hsl(30, 70.0%, 7.2%)",
  orange2: "hsl(29, 81.4%, 8.4%)",
  orange3: "hsl(26, 68.4%, 12.0%)",
  orange4: "hsl(25, 64.6%, 14.9%)",
  orange5: "hsl(25, 64.3%, 17.8%)",
  orange6: "hsl(25, 65.7%, 21.9%)",
  orange7: "hsl(25, 67.7%, 29.4%)",
  orange8: "hsl(25, 70.3%, 44.9%)",
  orange9: "hsl(24, 94.0%, 50.0%)",
  orange10: "hsl(24, 100%, 58.5%)",
  orange11: "hsl(24, 100%, 70.0%)",
  orange12: "hsl(30, 100%, 88.0%)",
};

export const grayDarkA = {
  grayA1: "hsla(0, 0%, 100%, 0)",
  grayA2: "hsla(0, 0%, 100%, 0.013)",
  grayA3: "hsla(0, 0%, 100%, 0.069)",
  grayA4: "hsla(0, 0%, 100%, 0.104)",
  grayA5: "hsla(0, 0%, 100%, 0.134)",
  grayA6: "hsla(0, 0%, 100%, 0.169)",
  grayA7: "hsla(0, 0%, 100%, 0.216)",
  grayA8: "hsla(0, 0%, 100%, 0.312)",
  grayA9: "hsla(0, 0%, 100%, 0.372)",
  grayA10: "hsla(0, 0%, 100%, 0.455)",
  grayA11: "hsla(0, 0%, 100%, 0.662)",
  grayA12: "hsla(0, 0%, 100%, 0.926)",
};

export const mauveDarkA = {
  mauveA1: "hsla(300, 100%, 43.9%, 0.005)",
  mauveA2: "hsla(300, 99.7%, 69.7%, 0.026)",
  mauveA3: "hsla(288, 96.3%, 88.3%, 0.087)",
  mauveA4: "hsla(280, 96.6%, 90.3%, 0.126)",
  mauveA5: "hsla(280, 98.8%, 92.4%, 0.156)",
  mauveA6: "hsla(274, 98.7%, 92.9%, 0.195)",
  mauveA7: "hsla(270, 98.6%, 93.6%, 0.247)",
  mauveA8: "hsla(258, 98.4%, 94.3%, 0.351)",
  mauveA9: "hsla(251, 98.3%, 94.7%, 0.416)",
  mauveA10: "hsla(251, 99.3%, 95.6%, 0.498)",
  mauveA11: "hsla(253, 98.2%, 97.4%, 0.693)",
  mauveA12: "hsla(240, 82.2%, 99.5%, 0.936)",
};

export const slateDarkA = {
  slateA1: "hsla(240, 92.7%, 53.0%, 0.009)",
  slateA2: "hsla(240, 92.5%, 72.7%, 0.031)",
  slateA3: "hsla(230, 99.3%, 87.0%, 0.091)",
  slateA4: "hsla(223, 97.1%, 88.8%, 0.126)",
  slateA5: "hsla(223, 99.0%, 91.1%, 0.156)",
  slateA6: "hsla(218, 97.1%, 91.5%, 0.191)",
  slateA7: "hsla(210, 97.4%, 91.7%, 0.243)",
  slateA8: "hsla(202, 97.3%, 93.4%, 0.334)",
  slateA9: "hsla(219, 97.6%, 93.2%, 0.412)",
  slateA10: "hsla(217, 98.3%, 94.7%, 0.494)",
  slateA11: "hsla(218, 98.5%, 96.8%, 0.693)",
  slateA12: "hsla(220, 87.4%, 99.3%, 0.936)",
};

export const sageDarkA = {
  sageA1: "hsla(126, 100%, 43.9%, 0.005)",
  sageA2: "hsla(150, 92.7%, 53.0%, 0.018)",
  sageA3: "hsla(150, 95.5%, 88.9%, 0.074)",
  sageA4: "hsla(156, 93.3%, 90.4%, 0.109)",
  sageA5: "hsla(150, 94.8%, 94.0%, 0.139)",
  sageA6: "hsla(156, 92.8%, 93.9%, 0.174)",
  sageA7: "hsla(156, 92.4%, 95.3%, 0.226)",
  sageA8: "hsla(156, 91.7%, 96.6%, 0.317)",
  sageA9: "hsla(157, 99.8%, 93.3%, 0.381)",
  sageA10: "hsla(158, 96.8%, 95.2%, 0.464)",
  sageA11: "hsla(158, 98.1%, 97.6%, 0.667)",
  sageA12: "hsla(150, 88.0%, 99.5%, 0.927)",
};

export const oliveDarkA = {
  oliveA1: "hsla(120, 100%, 43.9%, 0.005)",
  oliveA2: "hsla(120, 90.5%, 63.9%, 0.018)",
  oliveA3: "hsla(120, 94.1%, 91.6%, 0.074)",
  oliveA4: "hsla(120, 91.8%, 92.2%, 0.109)",
  oliveA5: "hsla(120, 94.8%, 94.0%, 0.139)",
  oliveA6: "hsla(120, 91.2%, 95.1%, 0.174)",
  oliveA7: "hsla(120, 97.5%, 96.4%, 0.221)",
  oliveA8: "hsla(120, 91.7%, 96.6%, 0.317)",
  oliveA9: "hsla(106, 99.8%, 93.3%, 0.381)",
  oliveA10: "hsla(104, 96.8%, 95.2%, 0.464)",
  oliveA11: "hsla(105, 100%, 97.7%, 0.671)",
  oliveA12: "hsla(120, 88.0%, 99.5%, 0.927)",
};

export const sandDarkA = {
  sandA1: "hsla(60, 98.4%, 4.7%, 0.084)",
  sandA2: "hsla(60, 99.4%, 84.8%, 0.013)",
  sandA3: "hsla(60, 85.5%, 93.4%, 0.070)",
  sandA4: "hsla(60, 97.7%, 96.1%, 0.104)",
  sandA5: "hsla(45, 94.8%, 94.0%, 0.139)",
  sandA6: "hsla(45, 91.2%, 95.1%, 0.174)",
  sandA7: "hsla(48, 92.4%, 95.3%, 0.226)",
  sandA8: "hsla(43, 95.9%, 95.5%, 0.321)",
  sandA9: "hsla(47, 98.1%, 95.2%, 0.377)",
  sandA10: "hsla(47, 96.1%, 96.0%, 0.464)",
  sandA11: "hsla(52, 98.1%, 97.6%, 0.667)",
  sandA12: "hsla(60, 88.0%, 99.5%, 0.927)",
};

export const tomatoDarkA = {
  tomatoA1: "hsla(0, 100%, 49.3%, 0.022)",
  tomatoA2: "hsla(0, 100%, 49.8%, 0.074)",
  tomatoA3: "hsla(9, 100%, 49.9%, 0.152)",
  tomatoA4: "hsla(9, 99.5%, 52.7%, 0.204)",
  tomatoA5: "hsla(9, 99.5%, 53.8%, 0.256)",
  tomatoA6: "hsla(9, 99.6%, 54.6%, 0.334)",
  tomatoA7: "hsla(9, 99.7%, 55.0%, 0.477)",
  tomatoA8: "hsla(10, 99.9%, 54.2%, 0.771)",
  tomatoA9: "hsla(10, 99.9%, 59.5%, 0.888)",
  tomatoA10: "hsla(10, 99.8%, 66.8%, 0.953)",
  tomatoA11: "hsla(10, 100%, 72.0%, 1)",
  tomatoA12: "hsla(10, 99.7%, 90.4%, 0.983)",
};

export const redDarkA = {
  redA1: "hsla(0, 100%, 49.0%, 0.031)",
  redA2: "hsla(354, 100%, 49.8%, 0.074)",
  redA3: "hsla(353, 99.3%, 55.9%, 0.152)",
  redA4: "hsla(352, 99.8%, 56.5%, 0.208)",
  redA5: "hsla(354, 99.3%, 57.5%, 0.265)",
  redA6: "hsla(354, 99.8%, 57.5%, 0.351)",
  redA7: "hsla(354, 99.7%, 56.6%, 0.503)",
  redA8: "hsla(358, 99.8%, 56.1%, 0.806)",
  redA9: "hsla(358, 99.8%, 65.3%, 0.888)",
  redA10: "hsla(359, 99.9%, 70.9%, 0.944)",
  redA11: "hsla(358, 100%, 76.1%, 1)",
  redA12: "hsla(350, 100%, 91.0%, 1)",
};

export const rubyDarkA = {
  rubyA1: "hsla(0, 100%, 49.0%, 0.031)",
  rubyA2: "hsla(351, 100%, 50.0%, 0.078)",
  rubyA3: "hsla(348, 99.4%, 54.6%, 0.152)",
  rubyA4: "hsla(348, 99.5%, 56.5%, 0.204)",
  rubyA5: "hsla(347, 99.5%, 56.9%, 0.256)",
  rubyA6: "hsla(348, 99.8%, 57.6%, 0.338)",
  rubyA7: "hsla(348, 99.8%, 57.0%, 0.494)",
  rubyA8: "hsla(348, 99.9%, 55.4%, 0.797)",
  rubyA9: "hsla(348, 99.8%, 64.8%, 0.888)",
  rubyA10: "hsla(349, 99.9%, 70.7%, 0.944)",
  rubyA11: "hsla(348, 100%, 76.1%, 1)",
  rubyA12: "hsla(340, 99.7%, 91.3%, 0.996)",
};

export const crimsonDarkA = {
  crimsonA1: "hsla(354, 100%, 49.3%, 0.022)",
  crimsonA2: "hsla(338, 100%, 49.8%, 0.074)",
  crimsonA3: "hsla(335, 99.8%, 54.7%, 0.143)",
  crimsonA4: "hsla(336, 99.4%, 56.6%, 0.191)",
  crimsonA5: "hsla(336, 99.8%, 57.8%, 0.247)",
  crimsonA6: "hsla(336, 99.3%, 58.1%, 0.330)",
  crimsonA7: "hsla(336, 99.9%, 57.5%, 0.485)",
  crimsonA8: "hsla(336, 99.8%, 54.4%, 0.793)",
  crimsonA9: "hsla(336, 99.9%, 62.7%, 0.905)",
  crimsonA10: "hsla(339, 99.8%, 70.1%, 0.953)",
  crimsonA11: "hsla(341, 100%, 76.1%, 1)",
  crimsonA12: "hsla(330, 99.3%, 91.6%, 0.992)",
};

export const pinkDarkA = {
  pinkA1: "hsla(331, 100%, 49.0%, 0.031)",
  pinkA2: "hsla(319, 100%, 49.8%, 0.074)",
  pinkA3: "hsla(318, 98.8%, 55.9%, 0.135)",
  pinkA4: "hsla(319, 99.4%, 59.0%, 0.178)",
  pinkA5: "hsla(319, 99.8%, 60.9%, 0.221)",
  pinkA6: "hsla(319, 99.8%, 61.2%, 0.299)",
  pinkA7: "hsla(320, 99.9%, 61.9%, 0.433)",
  pinkA8: "hsla(322, 100%, 61.1%, 0.710)",
  pinkA9: "hsla(322, 99.8%, 64.2%, 0.823)",
  pinkA10: "hsla(324, 99.7%, 70.2%, 0.884)",
  pinkA11: "hsla(325, 99.6%, 76.8%, 0.975)",
  pinkA12: "hsla(326, 99.3%, 91.2%, 0.992)",
};

export const plumDarkA = {
  plumA1: "hsla(300, 100%, 49.3%, 0.022)",
  plumA2: "hsla(300, 100%, 49.7%, 0.061)",
  plumA3: "hsla(300, 98.6%, 59.2%, 0.122)",
  plumA4: "hsla(298, 99.3%, 62.9%, 0.165)",
  plumA5: "hsla(297, 99.7%, 65.0%, 0.208)",
  plumA6: "hsla(296, 99.7%, 66.9%, 0.273)",
  plumA7: "hsla(295, 100%, 68.6%, 0.394)",
  plumA8: "hsla(292, 99.7%, 69.7%, 0.637)",
  plumA9: "hsla(292, 99.7%, 68.6%, 0.702)",
  plumA10: "hsla(291, 99.8%, 74.2%, 0.784)",
  plumA11: "hsla(290, 99.7%, 80.0%, 0.914)",
  plumA12: "hsla(300, 99.1%, 93.4%, 0.953)",
};

export const purpleDarkA = {
  purpleA1: "hsla(278, 100%, 49.3%, 0.022)",
  purpleA2: "hsla(283, 100%, 49.5%, 0.070)",
  purpleA3: "hsla(282, 98.8%, 59.8%, 0.148)",
  purpleA4: "hsla(281, 99.0%, 62.4%, 0.200)",
  purpleA5: "hsla(280, 99.7%, 64.2%, 0.247)",
  purpleA6: "hsla(278, 99.2%, 65.7%, 0.317)",
  purpleA7: "hsla(276, 99.7%, 67.5%, 0.442)",
  purpleA8: "hsla(272, 100%, 68.8%, 0.684)",
  purpleA9: "hsla(272, 99.7%, 68.7%, 0.754)",
  purpleA10: "hsla(271, 99.7%, 72.6%, 0.819)",
  purpleA11: "hsla(270, 99.6%, 79.6%, 0.975)",
  purpleA12: "hsla(275, 99.1%, 93.3%, 0.979)",
};

export const violetDarkA = {
  violetA1: "hsla(240, 100%, 49.0%, 0.031)",
  violetA2: "hsla(255, 98.3%, 51.9%, 0.083)",
  violetA3: "hsla(255, 99.8%, 62.8%, 0.169)",
  violetA4: "hsla(252, 99.0%, 65.8%, 0.226)",
  violetA5: "hsla(253, 99.1%, 67.2%, 0.278)",
  violetA6: "hsla(253, 100%, 68.5%, 0.355)",
  violetA7: "hsla(251, 99.5%, 69.8%, 0.490)",
  violetA8: "hsla(250, 99.7%, 70.8%, 0.728)",
  violetA9: "hsla(252, 99.7%, 70.0%, 0.793)",
  violetA10: "hsla(253, 99.9%, 73.5%, 0.853)",
  violetA11: "hsla(255, 100%, 80.0%, 1)",
  violetA12: "hsla(249, 99.5%, 93.5%, 0.996)",
};

export const irisDarkA = {
  irisA1: "hsla(240, 100%, 50.0%, 0.039)",
  irisA2: "hsla(243, 99.8%, 54.7%, 0.091)",
  irisA3: "hsla(244, 98.8%, 63.5%, 0.174)",
  irisA4: "hsla(242, 99.3%, 66.5%, 0.230)",
  irisA5: "hsla(241, 99.4%, 68.5%, 0.282)",
  irisA6: "hsla(240, 99.4%, 69.3%, 0.360)",
  irisA7: "hsla(240, 99.5%, 70.6%, 0.490)",
  irisA8: "hsla(240, 99.7%, 71.9%, 0.728)",
  irisA9: "hsla(240, 99.8%, 70.6%, 0.823)",
  irisA10: "hsla(241, 99.8%, 73.7%, 0.875)",
  irisA11: "hsla(242, 100%, 81.0%, 1)",
  irisA12: "hsla(242, 99.5%, 93.9%, 0.996)",
};

export const indigoDarkA = {
  indigoA1: "hsla(240, 100%, 49.5%, 0.035)",
  indigoA2: "hsla(232, 100%, 50.0%, 0.091)",
  indigoA3: "hsla(228, 99.8%, 56.8%, 0.182)",
  indigoA4: "hsla(228, 99.2%, 59.5%, 0.239)",
  indigoA5: "hsla(227, 99.5%, 59.9%, 0.295)",
  indigoA6: "hsla(225, 99.6%, 60.9%, 0.373)",
  indigoA7: "hsla(226, 99.6%, 62.2%, 0.516)",
  indigoA8: "hsla(226, 100%, 63.4%, 0.788)",
  indigoA9: "hsla(226, 99.9%, 63.4%, 0.853)",
  indigoA10: "hsla(230, 99.7%, 69.5%, 0.897)",
  indigoA11: "hsla(235, 100%, 80.0%, 1)",
  indigoA12: "hsla(236, 99.5%, 93.5%, 0.996)",
};

export const blueDarkA = {
  blueA1: "hsla(240, 100%, 49.5%, 0.035)",
  blueA2: "hsla(227, 100%, 50.0%, 0.091)",
  blueA3: "hsla(216, 100%, 50.0%, 0.169)",
  blueA4: "hsla(214, 100%, 49.8%, 0.226)",
  blueA5: "hsla(213, 99.8%, 50.5%, 0.286)",
  blueA6: "hsla(212, 99.8%, 51.5%, 0.377)",
  blueA7: "hsla(211, 99.8%, 51.4%, 0.546)",
  blueA8: "hsla(211, 99.9%, 53.3%, 0.875)",
  blueA9: "hsla(206, 100%, 50.0%, 1)",
  blueA10: "hsla(206, 100%, 61.8%, 1)",
  blueA11: "hsla(205, 100%, 71.0%, 1)",
  blueA12: "hsla(206, 100%, 88.0%, 1)",
};

export const cyanDarkA = {
  cyanA1: "hsla(223, 100%, 49.3%, 0.022)",
  cyanA2: "hsla(207, 100%, 49.3%, 0.044)",
  cyanA3: "hsla(197, 100%, 49.6%, 0.096)",
  cyanA4: "hsla(194, 100%, 49.7%, 0.135)",
  cyanA5: "hsla(193, 99.5%, 50.2%, 0.178)",
  cyanA6: "hsla(192, 99.3%, 53.7%, 0.239)",
  cyanA7: "hsla(192, 100%, 57.5%, 0.355)",
  cyanA8: "hsla(192, 99.8%, 60.0%, 0.585)",
  cyanA9: "hsla(190, 100%, 50.0%, 0.736)",
  cyanA10: "hsla(190, 99.8%, 53.5%, 0.832)",
  cyanA11: "hsla(190, 99.8%, 56.3%, 0.949)",
  cyanA12: "hsla(190, 99.6%, 86.7%, 0.966)",
};

export const tealDarkA = {
  tealA1: "hsla(120, 100%, 48.3%, 0.009)",
  tealA2: "hsla(141, 100%, 49.0%, 0.031)",
  tealA3: "hsla(161, 100%, 49.8%, 0.074)",
  tealA4: "hsla(167, 100%, 49.7%, 0.109)",
  tealA5: "hsla(167, 100%, 49.8%, 0.148)",
  tealA6: "hsla(169, 99.2%, 52.5%, 0.200)",
  tealA7: "hsla(171, 99.3%, 56.5%, 0.304)",
  tealA8: "hsla(173, 99.9%, 59.0%, 0.498)",
  tealA9: "hsla(173, 99.8%, 52.7%, 0.611)",
  tealA10: "hsla(172, 99.9%, 50.8%, 0.706)",
  tealA11: "hsla(170, 99.8%, 51.6%, 0.832)",
  tealA12: "hsla(163, 99.4%, 85.9%, 0.936)",
};

export const jadeDarkA = {
  jadeA1: "hsla(120, 100%, 43.9%, 0.005)",
  jadeA2: "hsla(120, 100%, 49.0%, 0.031)",
  jadeA3: "hsla(145, 100%, 49.8%, 0.074)",
  jadeA4: "hsla(152, 100%, 49.7%, 0.109)",
  jadeA5: "hsla(156, 100%, 49.8%, 0.148)",
  jadeA6: "hsla(158, 99.1%, 54.5%, 0.200)",
  jadeA7: "hsla(159, 99.3%, 58.4%, 0.304)",
  jadeA8: "hsla(164, 99.9%, 59.0%, 0.498)",
  jadeA9: "hsla(164, 99.9%, 60.2%, 0.602)",
  jadeA10: "hsla(164, 99.8%, 58.3%, 0.702)",
  jadeA11: "hsla(163, 99.8%, 56.3%, 0.832)",
  jadeA12: "hsla(155, 99.4%, 85.9%, 0.936)",
};

export const greenDarkA = {
  greenA1: "hsla(120, 100%, 43.9%, 0.005)",
  greenA2: "hsla(120, 100%, 49.3%, 0.022)",
  greenA3: "hsla(149, 100%, 49.5%, 0.070)",
  greenA4: "hsla(154, 100%, 49.7%, 0.109)",
  greenA5: "hsla(153, 98.9%, 53.1%, 0.148)",
  greenA6: "hsla(155, 99.1%, 55.5%, 0.200)",
  greenA7: "hsla(152, 99.3%, 59.1%, 0.304)",
  greenA8: "hsla(151, 99.6%, 62.4%, 0.503)",
  greenA9: "hsla(151, 99.6%, 62.4%, 0.607)",
  greenA10: "hsla(151, 100%, 62.9%, 0.697)",
  greenA11: "hsla(151, 99.9%, 63.5%, 0.823)",
  greenA12: "hsla(144, 99.6%, 86.6%, 0.940)",
};

export const grassDarkA = {
  grassA1: "hsla(120, 100%, 43.9%, 0.005)",
  grassA2: "hsla(120, 100%, 49.3%, 0.022)",
  grassA3: "hsla(139, 97.9%, 54.2%, 0.070)",
  grassA4: "hsla(137, 99.8%, 60.3%, 0.104)",
  grassA5: "hsla(138, 99.8%, 62.9%, 0.143)",
  grassA6: "hsla(136, 99.7%, 66.7%, 0.195)",
  grassA7: "hsla(135, 99.7%, 68.4%, 0.299)",
  grassA8: "hsla(131, 99.7%, 71.3%, 0.494)",
  grassA9: "hsla(131, 99.5%, 69.2%, 0.620)",
  grassA10: "hsla(131, 100%, 73.5%, 0.710)",
  grassA11: "hsla(131, 99.8%, 76.6%, 0.797)",
  grassA12: "hsla(120, 99.1%, 90.3%, 0.936)",
};

export const brownDarkA = {
  brownA1: "hsla(0, 100%, 48.3%, 0.009)",
  brownA2: "hsla(24, 100%, 50.0%, 0.026)",
  brownA3: "hsla(25, 98.5%, 67.7%, 0.074)",
  brownA4: "hsla(26, 97.8%, 70.6%, 0.109)",
  brownA5: "hsla(26, 98.9%, 72.6%, 0.152)",
  brownA6: "hsla(27, 99.6%, 74.5%, 0.208)",
  brownA7: "hsla(28, 98.8%, 75.6%, 0.317)",
  brownA8: "hsla(28, 99.6%, 76.4%, 0.533)",
  brownA9: "hsla(28, 99.5%, 74.1%, 0.646)",
  brownA10: "hsla(28, 99.6%, 77.7%, 0.715)",
  brownA11: "hsla(28, 99.5%, 83.4%, 0.845)",
  brownA12: "hsla(34, 99.7%, 91.7%, 0.944)",
};

export const bronzeDarkA = {
  bronzeA1: "hsla(0, 100%, 43.9%, 0.005)",
  bronzeA2: "hsla(15, 92.7%, 53.0%, 0.018)",
  bronzeA3: "hsla(17, 99.6%, 78.8%, 0.065)",
  bronzeA4: "hsla(18, 99.5%, 81.1%, 0.104)",
  bronzeA5: "hsla(15, 98.2%, 82.8%, 0.139)",
  bronzeA6: "hsla(18, 97.7%, 82.9%, 0.200)",
  bronzeA7: "hsla(17, 99.4%, 84.2%, 0.299)",
  bronzeA8: "hsla(18, 99.4%, 84.8%, 0.507)",
  bronzeA9: "hsla(18, 99.1%, 84.3%, 0.594)",
  bronzeA10: "hsla(19, 100%, 86.0%, 0.671)",
  bronzeA11: "hsla(18, 99.9%, 88.7%, 0.814)",
  bronzeA12: "hsla(21, 97.9%, 95.7%, 0.923)",
};

export const goldDarkA = {
  goldA1: "hsla(45, 99.2%, 3.8%, 0.209)",
  goldA2: "hsla(42, 100%, 50.0%, 0.013)",
  goldA3: "hsla(50, 99.6%, 77.3%, 0.052)",
  goldA4: "hsla(45, 97.6%, 81.5%, 0.087)",
  goldA5: "hsla(42, 96.5%, 83.3%, 0.122)",
  goldA6: "hsla(39, 98.3%, 84.3%, 0.178)",
  goldA7: "hsla(39, 98.6%, 85.2%, 0.269)",
  goldA8: "hsla(35, 99.4%, 85.7%, 0.468)",
  goldA9: "hsla(36, 99.8%, 82.1%, 0.550)",
  goldA10: "hsla(36, 99.7%, 85.0%, 0.628)",
  goldA11: "hsla(35, 99.9%, 88.9%, 0.775)",
  goldA12: "hsla(36, 98.3%, 96.7%, 0.901)",
};

export const skyDarkA = {
  skyA1: "hsla(234, 100%, 49.5%, 0.035)",
  skyA2: "hsla(215, 100%, 49.7%, 0.061)",
  skyA3: "hsla(204, 100%, 50.0%, 0.117)",
  skyA4: "hsla(201, 100%, 49.8%, 0.161)",
  skyA5: "hsla(202, 99.8%, 52.8%, 0.208)",
  skyA6: "hsla(200, 99.3%, 56.0%, 0.278)",
  skyA7: "hsla(200, 99.8%, 58.6%, 0.403)",
  skyA8: "hsla(200, 99.8%, 60.8%, 0.676)",
  skyA9: "hsla(193, 99.9%, 74.4%, 0.996)",
  skyA10: "hsla(192, 100%, 77.1%, 1)",
  skyA11: "hsla(195, 100%, 66.1%, 1)",
  skyA12: "hsla(192, 100%, 88.0%, 1)",
};

export const mintDarkA = {
  mintA1: "hsla(120, 100%, 43.9%, 0.005)",
  mintA2: "hsla(165, 100%, 49.0%, 0.031)",
  mintA3: "hsla(174, 100%, 49.8%, 0.074)",
  mintA4: "hsla(172, 100%, 49.8%, 0.113)",
  mintA5: "hsla(172, 100%, 49.9%, 0.152)",
  mintA6: "hsla(173, 100%, 50.0%, 0.208)",
  mintA7: "hsla(173, 99.8%, 54.7%, 0.312)",
  mintA8: "hsla(170, 99.6%, 59.2%, 0.516)",
  mintA9: "hsla(167, 99.6%, 78.4%, 0.910)",
  mintA10: "hsla(163, 99.5%, 80.5%, 0.949)",
  mintA11: "hsla(167, 99.8%, 65.8%, 0.862)",
  mintA12: "hsla(156, 99.7%, 89.9%, 0.957)",
};

export const limeDarkA = {
  limeA1: "hsla(74, 99.8%, 4.7%, 0.709)",
  limeA2: "hsla(114, 100%, 49.3%, 0.022)",
  limeA3: "hsla(89, 100%, 50.0%, 0.065)",
  limeA4: "hsla(84, 100%, 49.8%, 0.100)",
  limeA5: "hsla(81, 98.9%, 53.0%, 0.135)",
  limeA6: "hsla(80, 99.0%, 57.6%, 0.187)",
  limeA7: "hsla(78, 99.5%, 60.9%, 0.282)",
  limeA8: "hsla(75, 99.6%, 63.3%, 0.477)",
  limeA9: "hsla(81, 99.8%, 70.5%, 0.927)",
  limeA10: "hsla(75, 99.8%, 63.5%, 0.936)",
  limeA11: "hsla(70, 99.9%, 58.0%, 0.836)",
  limeA12: "hsla(80, 99.5%, 87.6%, 0.966)",
};

export const yellowDarkA = {
  yellowA1: "hsla(0, 100%, 48.3%, 0.018)",
  yellowA2: "hsla(17, 100%, 49.3%, 0.044)",
  yellowA3: "hsla(36, 100%, 49.8%, 0.087)",
  yellowA4: "hsla(41, 100%, 49.7%, 0.122)",
  yellowA5: "hsla(44, 100%, 49.8%, 0.161)",
  yellowA6: "hsla(46, 99.2%, 50.8%, 0.213)",
  yellowA7: "hsla(47, 99.4%, 55.2%, 0.317)",
  yellowA8: "hsla(50, 99.6%, 59.2%, 0.516)",
  yellowA9: "hsla(53, 99.9%, 58.9%, 0.983)",
  yellowA10: "hsla(53, 99.7%, 68.2%, 0.988)",
  yellowA11: "hsla(55, 100%, 60.0%, 1)",
  yellowA12: "hsla(53, 100%, 83.9%, 1)",
};

export const amberDarkA = {
  amberA1: "hsla(0, 100%, 49.0%, 0.031)",
  amberA2: "hsla(6, 100%, 49.4%, 0.057)",
  amberA3: "hsla(24, 100%, 50.0%, 0.104)",
  amberA4: "hsla(30, 100%, 50.0%, 0.143)",
  amberA5: "hsla(33, 100%, 49.8%, 0.187)",
  amberA6: "hsla(34, 99.6%, 53.1%, 0.256)",
  amberA7: "hsla(35, 99.8%, 57.3%, 0.377)",
  amberA8: "hsla(36, 99.9%, 60.3%, 0.628)",
  amberA9: "hsla(42, 100%, 62.0%, 1)",
  amberA10: "hsla(43, 100%, 63.9%, 1)",
  amberA11: "hsla(43, 100%, 65.1%, 1)",
  amberA12: "hsla(41, 100%, 85.1%, 1)",
};

export const orangeDarkA = {
  orangeA1: "hsla(0, 100%, 49.0%, 0.031)",
  orangeA2: "hsla(0, 100%, 50.0%, 0.065)",
  orangeA3: "hsla(13, 100%, 49.7%, 0.122)",
  orangeA4: "hsla(20, 100%, 50.0%, 0.169)",
  orangeA5: "hsla(24, 100%, 50.0%, 0.221)",
  orangeA6: "hsla(25, 99.8%, 51.4%, 0.299)",
  orangeA7: "hsla(25, 99.8%, 54.7%, 0.442)",
  orangeA8: "hsla(25, 99.8%, 57.3%, 0.741)",
  orangeA9: "hsla(24, 99.9%, 51.4%, 0.966)",
  orangeA10: "hsla(24, 100%, 58.4%, 1)",
  orangeA11: "hsla(24, 100%, 70.0%, 1)",
  orangeA12: "hsla(30, 100%, 88.0%, 1)",
};
]]> Resources <![CDATA[SSH]]> https://bndy.net/blog/ssh https://bndy.net/blog/ssh Thu, 22 Feb 2024 00:00:00 GMT Open in Notion

Log into server with SSH keys​

Generate SSH keys​

ssh-keygen -t rsa -b 4096

Your keys will be created at ~/.ssh/id_rsa.pub and ~/.ssh/id_rsa

Transfer Your Public Key to the Server​

ssh-copy-id user@remote_server

If ssh-copy-id is unavailable, please

cat ~/.ssh/id_rsa.pub | ssh user@remote_server "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"
]]> Tools <![CDATA[Web Components in React]]> https://bndy.net/blog/web-components-in-react https://bndy.net/blog/web-components-in-react Thu, 23 Nov 2023 00:00:00 GMT Open in Notion

Events of Web Components in React​

An improvement would be to extract the event listener callback function in order to remove the listener when the component unmounts.

import React from 'react';

import 'road-dropdown';

const Dropdown = ({ label, option, options, onChange }) => {
  const ref = React.useRef();

  React.useLayoutEffect(() => {
    const handleChange = customEvent => onChange(customEvent.detail);

    const { current } = ref;

    current.addEventListener('onChange', handleChange);

    // returning the callback in order to remove the listener when the component unmounts.
    return () => current.removeEventListener('onChange', handleChange);
  }, [ref]);

  return (
    <road-dropdown
      ref={ref}
      label={label}
      option={option}
      options={JSON.stringify(options)}
    />
  );
};
That's it for adding an event listener for

React to Web Components​

Below works with the useCustomElement React Hook which can be installed via npm install use-custom-element:

import React from 'react';

import 'road-dropdown';

import useCustomElement from 'use-custom-element';

const Dropdown = props => {
  const [customElementProps, ref] = useCustomElement(props);

  return <road-dropdown {...customElementProps} ref={ref} />;
};
]]> Frontend React <![CDATA[Web Components]]> https://bndy.net/blog/web-components https://bndy.net/blog/web-components Thu, 23 Nov 2023 00:00:00 GMT Open in Notion

HTMLSlotElement​

The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML <slot> element.

Life Cycle Callbacks​

Special callback functions defined inside the custom element's class definition, which affect its behavior:

connectedcallback

Invoked when the custom element is first connected to the document's DOM.

disconnectedcallback

Invoked when the custom element is disconnected from the document's DOM.

adoptedcallback

Invoked when the custom element is moved to a new document.

attributechangedcallback

Invoked when one of the custom element's attributes is added, removed, or changed.

CSS pseudo-classes​

:defined {}
:host {}
:host() {}
:host-context() {}

Access parent element​

<wc-parent>
	<wc-child>
	  <wc-subchild>
	  </wc-subchild>
	</wc-child>
<wc-parent>
function findParent(startElement: Element | ShadowRoot, selector: string): Element | null {
  let result: Element | null;
  if (startElement instanceof HTMLElement) {
    result = startElement.closest(selector);
    if (result) {
      return result;
    }
  }
  const r = startElement.getRootNode();
  if (r instanceof ShadowRoot) {
    return findParent((r as ShadowRoot).host, selector);
  }
  return null;
}

// wc-subchild component
findParent(this.shadowRoot, 'wc-parent');
]]> Frontend <![CDATA[ngrok]]> https://bndy.net/blog/ngrok https://bndy.net/blog/ngrok Tue, 30 May 2023 00:00:00 GMT Open in Notion

Installation​

bookmark

Commands​

Run an instance​

# start in background and forward to https://localhost:3000
nohup ./ngrok http https://localhost:3000 &

Get Tunnels​

curl \
-X GET \
-H "Authorization: Bearer {API_KEY}" \
-H "Ngrok-Version: 2" \
https://api.ngrok.com/tunnels

Response

{
  "tunnels": [
    {
      "id": "tn_2NTVGqGpa5w2LExRzILEksu7FOa",
      "public_url": "https://b8ad9cf4eff6.ngrok.paid",
      "started_at": "2023-03-24T19:59:25Z",
      "proto": "https",
      "region": "us",
      "tunnel_session": {
        "id": "ts_2NTVGmVw5yMzr02ZZzlX4VC6b6L",
        "uri": "https://api.ngrok.com/tunnel_sessions/ts_2NTVGmVw5yMzr02ZZzlX4VC6b6L"
      },
      "endpoint": {
        "id": "ep_2NTVGqGpa5w2LExRzILEksu7FOa",
        "uri": "https://api.ngrok.com/endpoints/ep_2NTVGqGpa5w2LExRzILEksu7FOa"
      },
      "forwards_to": "http://localhost:80"
    },
    {
      "id": "tn_2NTVGiqsZQ8EGqJ7HgcysTvGPAN",
      "public_url": "://:0",
      "started_at": "2023-03-24T19:59:24Z",
      "region": "us",
      "tunnel_session": {
        "id": "ts_2NTVGfpxBknN9h3rpLqPiV7NiAw",
        "uri": "https://api.ngrok.com/tunnel_sessions/ts_2NTVGfpxBknN9h3rpLqPiV7NiAw"
      },
      "labels": {
        "baz": "qux",
        "foo": "bar"
      },
      "forwards_to": "http://localhost:80"
    }
  ],
  "uri": "https://api.ngrok.com/tunnels",
  "next_page_uri": null
}

Get Tunnel​

curl \
-X GET \
-H "Authorization: Bearer {API_KEY}" \
-H "Ngrok-Version: 2" \
https://api.ngrok.com/tunnels/tn_2NTVGqGpa5w2LExRzILEksu7FOa

Response

{
  "id": "tn_2NTVGqGpa5w2LExRzILEksu7FOa",
  "public_url": "https://b8ad9cf4eff6.ngrok.paid",
  "started_at": "2023-03-24T19:59:25Z",
  "proto": "https",
  "region": "us",
  "tunnel_session": {
    "id": "ts_2NTVGmVw5yMzr02ZZzlX4VC6b6L",
    "uri": "https://api.ngrok.com/tunnel_sessions/ts_2NTVGmVw5yMzr02ZZzlX4VC6b6L"
  },
  "endpoint": {
    "id": "ep_2NTVGqGpa5w2LExRzILEksu7FOa",
    "uri": "https://api.ngrok.com/endpoints/ep_2NTVGqGpa5w2LExRzILEksu7FOa"
  },
  "forwards_to": "http://localhost:80"
}
]]> Tools <![CDATA[Commands for Terminal]]> https://bndy.net/blog/commands-for-terminal https://bndy.net/blog/commands-for-terminal Mon, 29 May 2023 00:00:00 GMT Open in Notion

Useful Aliases​

Add following aliases in your ~/.bash_profile

alias ..='cd ..'
alias ...='cd ../../'
alias b='brew'
alias c='clear'
alias l='ls -lah'
alias su='sudo -i'
alias root='sudo -i'

How to parse JSON string in the terminal​

Install jq via following link to parse the string.

bookmark

curl 'https://api.github.com/repos/jqlang/jq/commits?per_page=5' | jq '.[0]'

How to find the largest files or folders on a file system​

To find the largest folders on a file system pass the -a option. This will change the behavior of du to write size counts for files as well as folders. Run the following as root to see the ten largest files or folders on a system. This can be useful if you are dealing with out-of-disk space issues on a system.

du -a / | sort -n -r | head -n 10
5351116 /
2462616 /usr
2153492 /home
2153472 /home/george
1571924 /usr/lib

How to sort by file or folder size​

To sort by file size pass the output of du to sort and use the -n (numeric) and -r (reverse) options.

du ~/go | sort -n -r | less
170440  /home/george/go
132816  /home/george/go/src
74024   /home/george/go/src/github.com
57072   /home/george/go/src/golang.org

Open and close ports on RHEL 8 / CentOS 8​

sudo firewall-cmd --zone=public --list-ports
sudo firewall-cmd --zone=public --permanent --add-port 8080/tcp
sudo firewall-cmd --reload

sudo firewall-cmd --zone=public --permanent --remove-port 8080/tcp
]]> OS <![CDATA[Podman]]> https://bndy.net/blog/podman https://bndy.net/blog/podman Mon, 29 May 2023 00:00:00 GMT Open in Notion

The alternative of docker as docker is no longer free for enterprise users.

Installation​

bookmark

Install from download​

wget https://github.com/containers/podman/releases/latest/download/podman-remote-static-linux_amd64.tar.gz
tar -xvzf podman-remote-static-linux_amd64.tar.gz
sudo mv ./bin/podman-remote-static-linux_amd64 /usr/local/bin/podman
sudo chmod +x /usr/local/bin/podman

Examples​

# If you want to keep your existing volumns, you should use --userns=keep-id,
# otherwise, it might throw "operation not permitted" when start a container
podman run -d --name my-container --userns=keep-id \
    -v /your-path:/path
	image-name

Configure sources​

Open /etc/containers/registries.conf and uncomment below line, so that you can pull images from other sources.

unqualified-search-registries = ["registry.fedoraproject.org", "registry.access.redhat.com", "docker.io"]

Jenkins in Podman​

Run podman in jenkins pipeline if jenkins is running in container​

Mount the socket of podman into jenkins container.

docker run -d \
  --name my-jenkins \
  -p 8080:8080 \
  -v /home/<host_user>/jenkins_home:/var/jenkins_home \
  -v /run/user/1000/podman/podman.sock:/run/user/1000/podman/podman.sock \
  bndynet/jenkins

Then run it in pipeline:

pipeline {
    agent any
    stages {
        stage('Run Podman') {
            steps {
                sh 'export PODMAN_HOST=unix:///run/user/1000/podman/podman.sock && podman run --rm hello-world'
            }
        }
    }
}

Let jenkins account run podman​

sudo usermod --add-subuids 100000-165535 --add-subgids 100000-165535 jenkins

If the jenkins user does not exist, please create one:

sudo useradd -m -s /bin/bash jenkins
sudo passwd jenkins  # set password（optional）

Restart jenkins

sudo systemctl restart jenkins
# or podman restart jenkins-container

Automatically Start​

Podman provides generate systemd command, that can generate systemd service file to restart when server starts.

podman generate systemd --name my-container --restart-policy=always > /etc/systemd/system/my-container.service

Then enable and start service:

systemctl daemon-reload
systemctl enable my-container
systemctl start my-container

In this way, my-container will start automatically, it likes docker --restart unless-stopped.

Q&A​

Can not “podman machine start”?​

You need to remove the current machine via podman machine rm. and reinit via podman machine init.

]]> DevOps CI and CD <![CDATA[PostgreSQL]]> https://bndy.net/blog/postgresql https://bndy.net/blog/postgresql Fri, 26 May 2023 00:00:00 GMT Open in Notion

Installing​

bookmark

# default
docker run --name my-postgres -e POSTGRES_PASSWORD=your-pass -d postgres

# advance
docker run -d --name my-postgres \
	-v /my-dockers/my-postgres/my-postgres.conf:/etc/postgresql/postgresql.conf  \
	-v /my-dockers/my-postgres/data:/var/lib/postgresql/data \
	-e PGDATA=/var/lib/postgresql/data/pgdata \
	-e POSTGRES_PASSWORD=your-pass \
	-e POSTGRES_USER=postgres  \
	-e POSTGRES_DB=my-db  \
	-c ssl=on \
	-p 5432:5432 \
	postgres -c 'config_file=/etc/postgresql/postgresql.conf'

via psql:

$ docker run -it --rm --network some-network postgres psql -h my-postgres -U postgres
psql (14.3)
Type "help" for help.

postgres=# SELECT 1;
 ?column? 
----------
        1
(1 row)

Generate SSL Certificates for PostgreSQL server​

  1. Go to data folder

    cd /var/lib/postgresql/data/pgdata

  2. Generate a private key by entering a pass phrase:

    openssl genrsa -des3 -out server.key 2048

  3. Remove the pass phrase to automatically start up the server using the following command

    openssl rsa -in server.key -out server.key

  4. Run the following command to remove group and other’s permission from the private key file

    chmod og-rwx server.key

  5. Run the following command to create a self-signed certificate

    openssl req -new -key server.key -days 3650 -out server.crt -x509

    Note that: You will be asked to enter information that will be incorporated into your certificate request. For some fields, there will be a default value. If you enter ‘.’, the field will be left blank.

    Country Name (2 letter code) [XX]:IN
    State or Province Name (full name) []:.
    Locality Name (eg, city) [Default City]:CH
    Organization Name (eg, company) [Default Company Ltd]:francium tech Organizational Unit Name (eg, section) []:.
    Common Name (eg, your name or your server's hostname) []:.
    Email Address []:kumaresan@francium.tech

  6. For self-signed certificates, use the server certificate as the trusted root certificate:

    cp server.crt root.crt

Prepare PostgreSQL standalone for SSL authentication​

  1. Edit the postgresql.conf file to activate SSL:

    cd /usr/local/var/postgres
    vi postgresql.conf

  2. Uncomment and change the following parameters:

    ssl = on
    ssl_ciphers = 'HIGH:MEDIUM:+3DES:!aNULL'
    ssl_prefer_server_ciphers = on
    ssl_cert_file = 'server.crt'
    ssl_key_file = 'server.key'
    ssl_ca_file = 'root.crt'
    ssl_crl_file = ''

  3. Add the following entry to the client machine in /var/lib/postgresql/data/pgdata/pg_hba.conf file:

    local       all            all                              trust
    hostssl     all            all             127.0.0.1/32     cert
    hostnossl   all            all             0.0.0.0/0        reject
    hostnossl   all            all             ::/0             reject

  4. To verify if SSL is enabled on standalone Postgres, run the following command:

    psql 'host=\<hostname\> port=5432 dbname=\<name\> user=\<user\> sslmode=verify-full sslcert=/tmp/postgresql.crt sslkey=/tmp/postgresql.key sslrootcert=/tmp/root.crt'

  5. Once the database has restarted, login by specifying localhost to make sure the database is being connected over TCP/IP:

    psql -h localhost -U postgres
]]> Backend Databases <![CDATA[Update Jenkins inside Docker Container]]> https://bndy.net/blog/update-jenkins-inside-docker-container https://bndy.net/blog/update-jenkins-inside-docker-container Tue, 23 May 2023 00:00:00 GMT Open in Notion

First identify your image.

$ docker ps --format "{{.ID}}: {{.Image}} {{.Names}}"3d2fb2ab2ca5: jenkins-docker jenkins-docker_1

Then login into the image as root.

$ docker container exec -u 0 -it jenkins-docker_1 /bin/bash

Now you are inside the container, download the jenkins.war file from the official site like.

# wget http://updates.jenkins-ci.org/download/war/2.176.1/jenkins.war

Replace the version with the one that fits to you.

The next step is to move that file and replace the oldest one.

# mv ./jenkins.war /usr/share/jenkins/

Then change permissions.

# chown jenkins:jenkins /usr/share/jenkins/jenkins.war

The last step is to logout from the container and restart it.

$ docker restart jenkins-docker_1

You can verify that update was successful by access to you Jenkins url.

]]> DevOps CI and CD <![CDATA[Tmux]]> https://bndy.net/blog/tmux https://bndy.net/blog/tmux Fri, 19 May 2023 00:00:00 GMT Open in Notion

Installing​

bookmark

Script Examples​

Start a main pane with other panes​

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                                                                      +
+                                                                      +
+                                  main                                +
+                                                                      +
+                                                                      +
+                                                                      +
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+           a         +           b           +            c           +   
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
tmux new-session -d -s sessionName; \
tmux split-window -v; \
tmux send-keys "echo a" Enter; \
tmux split-window -v; \
tmux send-keys "echo b" Enter; \
tmux split-window -v; \
tmux send-keys "echo c" Enter; \
tmux select-layout main-horizontal; \
tmux select-pane -t 0; \
tmux a;

Start there same size panes​

tmux new-session -d -s sessionName; \
tmux send-keys "echo a" Enter; \
tmux split-window -v; \
tmux send-keys "echo b" Enter; \
tmux split-window -v; \
tmux send-keys "echo c" Enter; \
tmux select-layout even-horizontal; \
tmux a;

Others​

# Layouts
tmux select-layout main-vertical
tmux select-layout main-horizontal 
tmux select-layout even-vertical
tmux select-layout even-horizontal

# Enable pane border labels
tmux set pane-border-status top

#Enable Mouse
tmux set mouse on

Oh my tmux​

https://github.com/gpakosz/.tmux

Do not forget to source your config file via:

tmux source-file ~/.tmux.conf.local
]]> Tools <![CDATA[Useful Scripts for Jenkins]]> https://bndy.net/blog/useful-scripts-for-jenkins https://bndy.net/blog/useful-scripts-for-jenkins Fri, 10 Mar 2023 00:00:00 GMT Open in Notion

Decrypt credentials defined in Jenkins and list values.​

def creds = com.cloudbees.plugins.credentials.CredentialsProvider.lookupCredentials(
    com.cloudbees.plugins.credentials.common.StandardUsernameCredentials.class,
    Jenkins.instance,
    null,
    null
);
for (c in creds) {
  if (c.properties.privateKeySource) {
	  println("ID: " + c.id)
    println("UserName: " + c.username)
    println("Description: " + c.description)
	  println("Private Key: " + c.getPrivateKey() )
  }
}

Decrypt the password if you got its HASH.​

println(hudson.util.Secret.decrypt("{HASHxxxxx=}"))
# or /////
println(hudson.util.Secret.fromString("{HASHxxxxx=}").getPlainText())

Trigger build by url​

# Run when the anonymous user has the build permission
curl http://127.0.0.1:8080/job/Trigger_Remote_Demo/build?token=My-token
# Send request with credentials
curl -u username:api_token http://127.0.0.1:8080/job/Trigger_Remote_Demo/build
# Build with Parameter
curl -u username:api_token http://127.0.0.1:8080/job/Trigger_Remote_Demo/buildWithParameters?para1=val1&para2=val2
]]> DevOps CI and CD <![CDATA[Service Provided in a Lazy Loaded Module]]> https://bndy.net/blog/service-provided-in-a-lazy-loaded-module https://bndy.net/blog/service-provided-in-a-lazy-loaded-module Tue, 21 Feb 2023 00:00:00 GMT Open in Notion

https://angular.io/guide/ngmodule-faq#why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module

Unlike providers of the modules loaded at launch, providers of lazy-loaded modules are module-scoped.

When the Angular router lazy-loads a module, it creates a new execution context. That context has its own injector, which is a direct child of the application injector.

The router adds the lazy module's providers and the providers of its imported NgModules to this child injector.

These providers are insulated from changes to application providers with the same lookup token. When the router creates a component within the lazy-loaded context, Angular prefers service instances created from these providers to the service instances of the application root injector.

]]> Frontend Angular <![CDATA[Jenkins]]> https://bndy.net/blog/jenkins https://bndy.net/blog/jenkins Fri, 10 Feb 2023 00:00:00 GMT Open in Notion

Start Jenkins​

Startup script to set the System Properties​

Step 1:

  • Locate the Jenkins home directory. You can look into the existing system properties for ‘jenkins_home’ or execute ‘echo $JENKINS_HOME’ inside the jenkins server to get the Jenkins home directory.
  • Say if your Jenkins home directory is ‘/var/jenkins_home’. Create a new directory with name ‘init.groovy.d’.

Step 2:

  • Now change your working directory to ‘/var/jenkins_home/init.groovy.d’
  • Within init.groovy.d directory create a new groovy script. Say ‘startup-properties.groovy’

Step 3:

  • Copy the below content to the ‘startup-properties.groovy’ file
import jenkins.model.Jenkins
import java.util.logging.LogManager

/* Jenkins home directory */
def jenkinsHome = Jenkins.instance.getRootDir().absolutePath
def logger = LogManager.getLogManager().getLogger("")

/* Replace the Key and value with the values you want to set.*/
/* System.setProperty(key, value)*/
System.setProperty("hudson.model.WorkspaceCleanupThread.disabled", "true")
logger.info("Jenkins Startup Script: Successfully updated the system properties. Script location: ${jenkinsHome}/init.groovy.d")

Visit https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/lang/System.html?is-external=true#setProperty(java.lang.String,java.lang.String) to see how to use setProperty.

Step 4:

Restart the Jenkins server, you can manually restart the server using :

<Jenkins-server-URL>/restart or <Jenkins-server-URL>/safeRestart

  • Use safeRestart when you have some job still running. It will wait till all the jobs are completed.

Step 5:

Check the logs after Jenkins restart: Manage Jenkins → System Log. You can see while server is starting, its executing the startup-properties.groovy script which is inside init.groovy.d directory.

1*kjzZCxTixWCYsQbIcfRkzA.png

For example, run the below scripts in Script Console to check the System Properties, you will see the required key and values.

println(System.getProperty("hudson.model.WorkspaceCleanupThread.disabled"))

Now every time server is restarted the script will run and set the system properties for you. You don’t need to worry for setting these system properties manually every time server restart.

https://wiki.jenkins-ci.org/display/JENKINS/Features-controlled-by-system-properties.html

Start docker container with system properties​

link_preview

docker run --name my-jenkins -p 8080:8080 -p 50000:50000 -v /your/jenkins_home:/var/jenkins_home \
  -d \
  -v /var/run/docker.sock:/var/run/docker.sock \
  --env JAVA_OPTS="-Dhudson.model.WorkspaceCleanupThread.disabled=\"true\"" \
  --restart unless-stopped \
  --user root \
  bndynet/jenkins

Plugin: Configuration as Code (aka.JCasC )​

Apply configuration from Git

https://<USERNAME>:<PERSON_ACCESS_TOKEN>@github.com/your-repo/jenkins-config.git

Add Nodes​

Step 1. In node server, install java by https://sdkman.io/

curl -s "https://get.sdkman.io" | bash
sdk install java 17.0.14-tem

Step 2. Add java path for all users (/etc/environment)

JAVA_HOME=/home/<user>/.sdkman/candidates/java/current
PATH="/home/<user>/.sdkman/candidates/java/current/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin"

Step 3. Generate ssh key in jenkins server, if you are running jenkins on container, you should enter the container to do that.

ssh-keygen -t rsa -b 4096 -f /var/jenkins_home/id_rsa

Step 4. Copy pub key to node server

ssh-copy-id -i /var/jenkins_home/.ssh/id_rsa.pub username@hostname

Step 5. Add Credentials in jenkins UI with the private key

Step 6. Add Node in jenkins UI with Launch agens via SSH, and choose above Credentials

Q: Could not copy remoting.jar into '/home/jenkins' on agent​

If below error thrown:

Permission denied (SSH_FX_PERMISSION_DENIED: The user does not have sufficient permissions to perform the operation.)

]]> DevOps CI and CD