feat: docker compose maybe

This commit is contained in:
2023-11-13 16:10:04 -05:00
parent 180b261e40
commit b625ccd8d6
8031 changed files with 2182966 additions and 0 deletions

View File

@ -0,0 +1,77 @@
<script>import { afterUpdate } from "svelte";
import { tailwindDefaultColors } from "./settings.js";
export let stops = [{ color: ["neutral", 500], start: 0, end: 100 }];
export let legend = false;
export let spin = false;
export let width = "w-24";
export let hover = "bg-primary-hover-token";
export let digits = 0;
export let regionCaption = "";
export let regionCone = "";
export let regionLegend = "";
let cone;
let generatedLegendList;
const cBase = "flex flex-col items-center space-y-4 w-";
const cCaption = "text-center";
const cCone = "block aspect-square rounded-full";
const cLegend = "text-sm w-full";
const cSwatch = "block aspect-square bg-black w-5 rounded-full mr-2";
function setColorValue(color) {
if (typeof color === "string")
return color;
const colorSet = tailwindDefaultColors.find((c) => c.label === color[0]);
return colorSet?.shades[color[1]].hex;
}
function genConicGradient() {
let d = stops.map((v) => `${setColorValue(v.color)} ${v.start}% ${v.end}%`);
cone = `conic-gradient(${d.join(", ")})`;
}
function genLegend() {
if (!legend)
return;
generatedLegendList = stops.map((v) => {
return {
label: v.label,
color: setColorValue(v.color),
value: (v.end - v.start).toFixed(digits)
};
});
}
afterUpdate(() => {
genConicGradient();
genLegend();
});
$:
classesBase = `${cBase} ${$$props.class ?? ""}`;
$:
classesCaption = `${cCaption} ${regionCaption}`;
$:
classesCone = `${cCone} ${width} ${regionCone}`;
$:
classesLegend = `${cLegend} ${regionLegend}`;
</script>
<figure class="conic-gradient {classesBase}" data-testid="conic-gradient">
<!-- Label -->
{#if $$slots.default}
<figcaption class="conic-caption {classesCaption}"><slot /></figcaption>
{/if}
<!-- Conic Gradient -->
{#if cone}
<div class="conic-cone {classesCone}" class:animate-spin={spin} style:background={cone} />
{/if}
<!-- Legend -->
{#if legend && generatedLegendList}
<ul class="conic-list list {classesLegend}">
{#each generatedLegendList as { color, label, value }}
<!-- FIXME: resolve a11y warnings -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li class="conic-item {hover}" on:click on:keydown on:keyup on:keypress>
<span class="conic-swatch {cSwatch}" style:background={color} />
<span class="conic-label flex-auto">{label}</span>
<strong class="conic-value">{value}%</strong>
</li>
{/each}
</ul>
{/if}
</figure>

View File

@ -0,0 +1,42 @@
import { SvelteComponentTyped } from "svelte";
import type { ConicStop } from './types.js';
declare const __propDef: {
props: {
[x: string]: any;
/** Provide a data set of color stops and labels.*/
stops?: ConicStop[] | undefined;
/** Enable a contextual legend.*/
legend?: boolean | undefined;
/** When enabled, the conic gradient will spin.*/
spin?: boolean | undefined;
/** Style the conic gradient width.*/
width?: string | undefined;
/** Style the legend hover effect.*/
hover?: string | undefined;
/** Set the number of digits on the legend values.*/
digits?: number | undefined;
/** Style the caption region above the gradient.*/
regionCaption?: string | undefined;
/** Style the conic gradient region.*/
regionCone?: string | undefined;
/** Style the legend region below the gradient.*/
regionLegend?: string | undefined;
};
events: {
click: MouseEvent;
keydown: KeyboardEvent;
keyup: KeyboardEvent;
keypress: KeyboardEvent;
} & {
[evt: string]: CustomEvent<any>;
};
slots: {
default: {};
};
};
export type ConicGradientProps = typeof __propDef.props;
export type ConicGradientEvents = typeof __propDef.events;
export type ConicGradientSlots = typeof __propDef.slots;
export default class ConicGradient extends SvelteComponentTyped<ConicGradientProps, ConicGradientEvents, ConicGradientSlots> {
}
export {};

View File

@ -0,0 +1,9 @@
export type HexRgb = {
hex: string;
rgb: string;
};
export type TailwindColorObject = {
label: string;
shades: Record<string, HexRgb>;
};
export declare const tailwindDefaultColors: TailwindColorObject[];

View File

@ -0,0 +1,334 @@
// Provides the full set of Tailwind colors via Javascript
// https://tailwindcss.com/docs/customizing-colors#default-color-palette
export const tailwindDefaultColors = [
{
label: 'slate',
shades: {
'50': { hex: '#f8fafc', rgb: '248 250 252' },
'100': { hex: '#f1f5f9', rgb: '241 245 249' },
'200': { hex: '#e2e8f0', rgb: '226 232 240' },
'300': { hex: '#cbd5e1', rgb: '203 213 225' },
'400': { hex: '#94a3b8', rgb: '148 163 184' },
'500': { hex: '#64748b', rgb: '100 116 139' },
'600': { hex: '#475569', rgb: '71 85 105' },
'700': { hex: '#334155', rgb: '51 65 85' },
'800': { hex: '#1e293b', rgb: '30 41 59' },
'900': { hex: '#0f172a', rgb: '15 23 42' }
}
},
{
label: 'gray',
shades: {
'50': { hex: '#f9fafb', rgb: '249 250 251' },
'100': { hex: '#f3f4f6', rgb: '243 244 246' },
'200': { hex: '#e5e7eb', rgb: '229 231 235' },
'300': { hex: '#d1d5db', rgb: '209 213 219' },
'400': { hex: '#9ca3af', rgb: '156 163 175' },
'500': { hex: '#6b7280', rgb: '107 114 128' },
'600': { hex: '#4b5563', rgb: '75 85 99' },
'700': { hex: '#374151', rgb: '55 65 81' },
'800': { hex: '#1f2937', rgb: '31 41 55' },
'900': { hex: '#111827', rgb: '17 24 39' }
}
},
{
label: 'zinc',
shades: {
'50': { hex: '#fafafa', rgb: '250 250 250' },
'100': { hex: '#f4f4f5', rgb: '244 244 245' },
'200': { hex: '#e4e4e7', rgb: '228 228 231' },
'300': { hex: '#d4d4d8', rgb: '212 212 216' },
'400': { hex: '#a1a1aa', rgb: '161 161 170' },
'500': { hex: '#71717a', rgb: '113 113 122' },
'600': { hex: '#52525b', rgb: '82 82 91' },
'700': { hex: '#3f3f46', rgb: '63 63 70' },
'800': { hex: '#27272a', rgb: '39 39 42' },
'900': { hex: '#18181b', rgb: '24 24 27' }
}
},
{
label: 'neutral',
shades: {
'50': { hex: '#fafafa', rgb: '250 250 250' },
'100': { hex: '#f5f5f5', rgb: '245 245 245' },
'200': { hex: '#e5e5e5', rgb: '229 229 229' },
'300': { hex: '#d4d4d4', rgb: '212 212 212' },
'400': { hex: '#a3a3a3', rgb: '163 163 163' },
'500': { hex: '#737373', rgb: '115 115 115' },
'600': { hex: '#525252', rgb: '82 82 82' },
'700': { hex: '#404040', rgb: '64 64 64' },
'800': { hex: '#262626', rgb: '38 38 38' },
'900': { hex: '#171717', rgb: '23 23 23' }
}
},
{
label: 'stone',
shades: {
'50': { hex: '#fafaf9', rgb: '250 250 249' },
'100': { hex: '#f5f5f4', rgb: '245 245 244' },
'200': { hex: '#e7e5e4', rgb: '231 229 228' },
'300': { hex: '#d6d3d1', rgb: '214 211 209' },
'400': { hex: '#a8a29e', rgb: '168 162 158' },
'500': { hex: '#78716c', rgb: '120 113 108' },
'600': { hex: '#57534e', rgb: '87 83 78' },
'700': { hex: '#44403c', rgb: '68 64 60' },
'800': { hex: '#292524', rgb: '41 37 36' },
'900': { hex: '#1c1917', rgb: '28 25 23' }
}
},
{
label: 'red',
shades: {
'50': { hex: '#fef2f2', rgb: '254 242 242' },
'100': { hex: '#fee2e2', rgb: '254 226 226' },
'200': { hex: '#fecaca', rgb: '254 202 202' },
'300': { hex: '#fca5a5', rgb: '252 165 165' },
'400': { hex: '#f87171', rgb: '248 113 113' },
'500': { hex: '#ef4444', rgb: '239 68 68' },
'600': { hex: '#dc2626', rgb: '220 38 38' },
'700': { hex: '#b91c1c', rgb: '185 28 28' },
'800': { hex: '#991b1b', rgb: '153 27 27' },
'900': { hex: '#7f1d1d', rgb: '127 29 29' }
}
},
{
label: 'orange',
shades: {
'50': { hex: '#fff7ed', rgb: '255 247 237' },
'100': { hex: '#ffedd5', rgb: '255 237 213' },
'200': { hex: '#fed7aa', rgb: '254 215 170' },
'300': { hex: '#fdba74', rgb: '253 186 116' },
'400': { hex: '#fb923c', rgb: '251 146 60' },
'500': { hex: '#f97316', rgb: '249 115 22' },
'600': { hex: '#ea580c', rgb: '234 88 12' },
'700': { hex: '#c2410c', rgb: '194 65 12' },
'800': { hex: '#9a3412', rgb: '154 52 18' },
'900': { hex: '#7c2d12', rgb: '124 45 18' }
}
},
{
label: 'amber',
shades: {
'50': { hex: '#fffbeb', rgb: '255 251 235' },
'100': { hex: '#fef3c7', rgb: '254 243 199' },
'200': { hex: '#fde68a', rgb: '253 230 138' },
'300': { hex: '#fcd34d', rgb: '252 211 77' },
'400': { hex: '#fbbf24', rgb: '251 191 36' },
'500': { hex: '#f59e0b', rgb: '245 158 11' },
'600': { hex: '#d97706', rgb: '217 119 6' },
'700': { hex: '#b45309', rgb: '180 83 9' },
'800': { hex: '#92400e', rgb: '146 64 14' },
'900': { hex: '#78350f', rgb: '120 53 15' }
}
},
{
label: 'yellow',
shades: {
'50': { hex: '#fefce8', rgb: '254 252 232' },
'100': { hex: '#fef9c3', rgb: '254 249 195' },
'200': { hex: '#fef08a', rgb: '254 240 138' },
'300': { hex: '#fde047', rgb: '253 224 71' },
'400': { hex: '#facc15', rgb: '250 204 21' },
'500': { hex: '#eab308', rgb: '234 179 8' },
'600': { hex: '#ca8a04', rgb: '202 138 4' },
'700': { hex: '#a16207', rgb: '161 98 7' },
'800': { hex: '#854d0e', rgb: '133 77 14' },
'900': { hex: '#713f12', rgb: '113 63 18' }
}
},
{
label: 'lime',
shades: {
'50': { hex: '#f7fee7', rgb: '247 254 231' },
'100': { hex: '#ecfccb', rgb: '236 252 203' },
'200': { hex: '#d9f99d', rgb: '217 249 157' },
'300': { hex: '#bef264', rgb: '190 242 100' },
'400': { hex: '#a3e635', rgb: '163 230 53' },
'500': { hex: '#84cc16', rgb: '132 204 22' },
'600': { hex: '#65a30d', rgb: '101 163 13' },
'700': { hex: '#4d7c0f', rgb: '77 124 15' },
'800': { hex: '#3f6212', rgb: '63 98 18' },
'900': { hex: '#365314', rgb: '54 83 20' }
}
},
{
label: 'green',
shades: {
'50': { hex: '#f0fdf4', rgb: '240 253 244' },
'100': { hex: '#dcfce7', rgb: '220 252 231' },
'200': { hex: '#bbf7d0', rgb: '187 247 208' },
'300': { hex: '#86efac', rgb: '134 239 172' },
'400': { hex: '#4ade80', rgb: '74 222 128' },
'500': { hex: '#22c55e', rgb: '34 197 94' },
'600': { hex: '#16a34a', rgb: '22 163 74' },
'700': { hex: '#15803d', rgb: '21 128 61' },
'800': { hex: '#166534', rgb: '22 101 52' },
'900': { hex: '#14532d', rgb: '20 83 45' }
}
},
{
label: 'emerald',
shades: {
'50': { hex: '#ecfdf5', rgb: '236 253 245' },
'100': { hex: '#d1fae5', rgb: '209 250 229' },
'200': { hex: '#a7f3d0', rgb: '167 243 208' },
'300': { hex: '#6ee7b7', rgb: '110 231 183' },
'400': { hex: '#34d399', rgb: '52 211 153' },
'500': { hex: '#10b981', rgb: '16 185 129' },
'600': { hex: '#059669', rgb: '5 150 105' },
'700': { hex: '#047857', rgb: '4 120 87' },
'800': { hex: '#065f46', rgb: '6 95 70' },
'900': { hex: '#064e3b', rgb: '6 78 59' }
}
},
{
label: 'teal',
shades: {
'50': { hex: '#f0fdfa', rgb: '240 253 250' },
'100': { hex: '#ccfbf1', rgb: '204 251 241' },
'200': { hex: '#99f6e4', rgb: '153 246 228' },
'300': { hex: '#5eead4', rgb: '94 234 212' },
'400': { hex: '#2dd4bf', rgb: '45 212 191' },
'500': { hex: '#14b8a6', rgb: '20 184 166' },
'600': { hex: '#0d9488', rgb: '13 148 136' },
'700': { hex: '#0f766e', rgb: '15 118 110' },
'800': { hex: '#115e59', rgb: '17 94 89' },
'900': { hex: '#134e4a', rgb: '19 78 74' }
}
},
{
label: 'cyan',
shades: {
'50': { hex: '#ecfeff', rgb: '236 254 255' },
'100': { hex: '#cffafe', rgb: '207 250 254' },
'200': { hex: '#a5f3fc', rgb: '165 243 252' },
'300': { hex: '#67e8f9', rgb: '103 232 249' },
'400': { hex: '#22d3ee', rgb: '34 211 238' },
'500': { hex: '#06b6d4', rgb: '6 182 212' },
'600': { hex: '#0891b2', rgb: '8 145 178' },
'700': { hex: '#0e7490', rgb: '14 116 144' },
'800': { hex: '#155e75', rgb: '21 94 117' },
'900': { hex: '#164e63', rgb: '22 78 99' }
}
},
{
label: 'sky',
shades: {
'50': { hex: '#f0f9ff', rgb: '240 249 255' },
'100': { hex: '#e0f2fe', rgb: '224 242 254' },
'200': { hex: '#bae6fd', rgb: '186 230 253' },
'300': { hex: '#7dd3fc', rgb: '125 211 252' },
'400': { hex: '#38bdf8', rgb: '56 189 248' },
'500': { hex: '#0ea5e9', rgb: '14 165 233' },
'600': { hex: '#0284c7', rgb: '2 132 199' },
'700': { hex: '#0369a1', rgb: '3 105 161' },
'800': { hex: '#075985', rgb: '7 89 133' },
'900': { hex: '#0c4a6e', rgb: '12 74 110' }
}
},
{
label: 'blue',
shades: {
'50': { hex: '#eff6ff', rgb: '239 246 255' },
'100': { hex: '#dbeafe', rgb: '219 234 254' },
'200': { hex: '#bfdbfe', rgb: '191 219 254' },
'300': { hex: '#93c5fd', rgb: '147 197 253' },
'400': { hex: '#60a5fa', rgb: '96 165 250' },
'500': { hex: '#3b82f6', rgb: '59 130 246' },
'600': { hex: '#2563eb', rgb: '37 99 235' },
'700': { hex: '#1d4ed8', rgb: '29 78 216' },
'800': { hex: '#1e40af', rgb: '30 64 175' },
'900': { hex: '#1e3a8a', rgb: '30 58 138' }
}
},
{
label: 'indigo',
shades: {
'50': { hex: '#eef2ff', rgb: '238 242 255' },
'100': { hex: '#e0e7ff', rgb: '224 231 255' },
'200': { hex: '#c7d2fe', rgb: '199 210 254' },
'300': { hex: '#a5b4fc', rgb: '165 180 252' },
'400': { hex: '#818cf8', rgb: '129 140 248' },
'500': { hex: '#6366f1', rgb: '99 102 241' },
'600': { hex: '#4f46e5', rgb: '79 70 229' },
'700': { hex: '#4338ca', rgb: '67 56 202' },
'800': { hex: '#3730a3', rgb: '55 48 163' },
'900': { hex: '#312e81', rgb: '49 46 129' }
}
},
{
label: 'violet',
shades: {
'50': { hex: '#f5f3ff', rgb: '245 243 255' },
'100': { hex: '#ede9fe', rgb: '237 233 254' },
'200': { hex: '#ddd6fe', rgb: '221 214 254' },
'300': { hex: '#c4b5fd', rgb: '196 181 253' },
'400': { hex: '#a78bfa', rgb: '167 139 250' },
'500': { hex: '#8b5cf6', rgb: '139 92 246' },
'600': { hex: '#7c3aed', rgb: '124 58 237' },
'700': { hex: '#6d28d9', rgb: '109 40 217' },
'800': { hex: '#5b21b6', rgb: '91 33 182' },
'900': { hex: '#4c1d95', rgb: '76 29 149' }
}
},
{
label: 'purple',
shades: {
'50': { hex: '#faf5ff', rgb: '250 245 255' },
'100': { hex: '#f3e8ff', rgb: '243 232 255' },
'200': { hex: '#e9d5ff', rgb: '233 213 255' },
'300': { hex: '#d8b4fe', rgb: '216 180 254' },
'400': { hex: '#c084fc', rgb: '192 132 252' },
'500': { hex: '#a855f7', rgb: '168 85 247' },
'600': { hex: '#9333ea', rgb: '147 51 234' },
'700': { hex: '#7e22ce', rgb: '126 34 206' },
'800': { hex: '#6b21a8', rgb: '107 33 168' },
'900': { hex: '#581c87', rgb: '88 28 135' }
}
},
{
label: 'fuchsia',
shades: {
'50': { hex: '#fdf4ff', rgb: '253 244 255' },
'100': { hex: '#fae8ff', rgb: '250 232 255' },
'200': { hex: '#f5d0fe', rgb: '245 208 254' },
'300': { hex: '#f0abfc', rgb: '240 171 252' },
'400': { hex: '#e879f9', rgb: '232 121 249' },
'500': { hex: '#d946ef', rgb: '217 70 239' },
'600': { hex: '#c026d3', rgb: '192 38 211' },
'700': { hex: '#a21caf', rgb: '162 28 175' },
'800': { hex: '#86198f', rgb: '134 25 143' },
'900': { hex: '#701a75', rgb: '112 26 117' }
}
},
{
label: 'pink',
shades: {
'50': { hex: '#fdf2f8', rgb: '253 242 248' },
'100': { hex: '#fce7f3', rgb: '252 231 243' },
'200': { hex: '#fbcfe8', rgb: '251 207 232' },
'300': { hex: '#f9a8d4', rgb: '249 168 212' },
'400': { hex: '#f472b6', rgb: '244 114 182' },
'500': { hex: '#ec4899', rgb: '236 72 153' },
'600': { hex: '#db2777', rgb: '219 39 119' },
'700': { hex: '#be185d', rgb: '190 24 93' },
'800': { hex: '#9d174d', rgb: '157 23 77' },
'900': { hex: '#831843', rgb: '131 24 67' }
}
},
{
label: 'rose',
shades: {
'50': { hex: '#fff1f2', rgb: '255 241 242' },
'100': { hex: '#ffe4e6', rgb: '255 228 230' },
'200': { hex: '#fecdd3', rgb: '254 205 211' },
'300': { hex: '#fda4af', rgb: '253 164 175' },
'400': { hex: '#fb7185', rgb: '251 113 133' },
'500': { hex: '#f43f5e', rgb: '244 63 94' },
'600': { hex: '#e11d48', rgb: '225 29 72' },
'700': { hex: '#be123c', rgb: '190 18 60' },
'800': { hex: '#9f1239', rgb: '159 18 57' },
'900': { hex: '#881337', rgb: '136 19 55' }
}
}
];

View File

@ -0,0 +1,10 @@
export interface ConicStop {
/** The legend label value. */
label?: string;
/** The desired color value. */
color: string | object;
/** Starting stop value (0-100) */
start: number;
/** Ending stop value (0-100) */
end: number;
}

View File

@ -0,0 +1,2 @@
// Conic Gradient Types
export {};