gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2025-01-05 17:15:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update color variables and icons

Browse Source
This commit is contained in:
Pavel Laptev 2024-01-03 17:07:29 +01:00 committed by GitButler
commit 8350fe0c6b
10 changed files with 312 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gitbutler-ui/src/lib/branches/types.ts
View File

@ -1,7 +1,5 @@
import type { PullRequest } from '$lib/github/types';
import type { Author, Branch, RemoteBranch } from '$lib/vbranches/types';
import type iconsJson from '$lib/icons/icons.json';
import type { IconColor } from '$lib/icons/Icon.svelte';
export class CombinedBranch {
pr?: PullRequest;
@ -52,18 +50,20 @@ export class CombinedBranch {
return this.authors[0];
}
get icon(): keyof typeof iconsJson | undefined {
if (this.vbranch) return 'branch';
get icon(): 'remote-branch' | 'virtual-branch' | 'pr' | 'pr-draft' | 'pr-closed' | undefined {
if (this.vbranch) return 'virtual-branch';
if (this.pr) return 'pr';
if (this.remoteBranch) return 'branch';
if (this.remoteBranch) return 'remote-branch';
return undefined; // or implement a default icon?
}
get color(): IconColor {
if (this.pr?.mergedAt) return 'pop';
if (this.vbranch && this.vbranch.active == false) return 'warn';
if (this.remoteBranch?.isMergeable) return 'success';
return 'pop';
// GH colors reference https://github.blog/changelog/2021-06-08-new-issue-and-pull-request-state-icons
get color(): 'neutral' | 'success' | 'pop' | 'purple' | undefined {
if (this.pr?.mergedAt) return 'purple'; // merged PR
if (this.pr) return 'success'; // open PR
if (this.vbranch && this.vbranch.active == false) return 'pop'; // stashed virtual branches
if (this.remoteBranch?.isMergeable) return 'success'; // remote branches
return 'neutral';
}
get modifiedAt(): Date | undefined {

31
gitbutler-ui/src/lib/components/Button.svelte
View File

@ -1,3 +1,7 @@
<script lang="ts" context="module">
export type ButtonColor = 'primary' | 'neutral' | 'error' | 'warn';
</script>
<script lang="ts">
import { onMount } from 'svelte';
import type iconsJson from '$lib/icons/icons.json';
@ -5,7 +9,7 @@
export let icon: keyof typeof iconsJson | undefined = undefined;
export let iconAlign: 'left' | 'right' = 'right';
export let color: 'primary' | 'neutral' | 'error' = 'primary';
export let color: ButtonColor = 'primary';
export let kind: 'filled' | 'outlined' = 'filled';
export let disabled = false;
export let id: string | undefined = undefined;
@ -31,8 +35,10 @@
class={`btn ${className}`}
class:error-outline={color == 'error' && kind == 'outlined'}
class:primary-outline={color == 'primary' && kind == 'outlined'}
class:warn-outline={color == 'warn' && kind == 'outlined'}
class:error-filled={color == 'error' && kind == 'filled'}
class:primary-filled={color == 'primary' && kind == 'filled'}
class:warn-filled={color == 'warn' && kind == 'filled'}
class:neutral-outline={color == 'neutral' && kind == 'outlined'}
class:pointer-events-none={loading}
class:icon-left={iconAlign == 'left'}
@ -125,6 +131,29 @@
background: var(--clr-theme-container-pale);
}
}
.warn-filled {
color: var(--clr-theme-warn-on-element);
background: var(--clr-theme-warn-element);
&:hover {
background: var(--clr-theme-warn-element-dim);
}
&:active {
background: var(--clr-theme-warn-element-dark);
}
}
.warn-outline {
color: var(--clr-theme-warn-outline);
border: 1px solid var(--clr-theme-warn-outline);
&:hover {
color: var(--clr-theme-warn-outline-dim);
border: 1px solid var(--clr-theme-warn-outline-dim);
}
&:active {
color: var(--clr-theme-warn-outline-dim);
border: 1px solid var(--clr-theme-warn-outline-dim);
background: var(--clr-theme-warn-container);
}
}
.error-filled {
color: var(--clr-theme-err-on-element);
background: var(--clr-theme-err-element);

121
gitbutler-ui/src/lib/components/InfoMessage.svelte Normal file
View File

@ -0,0 +1,121 @@
<script lang="ts" context="module">
export type MessageStyle = 'neutral' | 'error' | 'pop' | 'warn';
</script>
<script lang="ts">
import Icon, { type IconColor } from '$lib/icons/Icon.svelte';
import { createEventDispatcher } from 'svelte';
import type iconsJson from '../icons/icons.json';
import Button, { type ButtonColor } from './Button.svelte';
export let style: MessageStyle = 'neutral';
export let title: string;
export let primary: string | undefined = undefined;
export let secondary: string | undefined = undefined;
const dispatch = createEventDispatcher<{ primary: void; secondary: void }>();
const iconMap: { [Key in MessageStyle]: keyof typeof iconsJson } = {
neutral: 'info',
pop: 'info',
warn: 'warning',
error: 'error'
};
const iconColorMap: { [Key in MessageStyle]: IconColor } = {
neutral: 'pop',
pop: 'pop',
warn: 'warn',
error: 'error'
};
const primaryButtonMap: { [Key in MessageStyle]: ButtonColor } = {
neutral: 'primary',
pop: 'primary',
warn: 'warn',
error: 'error'
};
const secondaryButtonMap: { [Key in MessageStyle]: ButtonColor } = {
neutral: 'neutral',
pop: 'primary',
warn: 'warn',
error: 'error'
};
</script>
<div
class="info-message"
class:neutral={style == 'neutral'}
class:error={style == 'error'}
class:pop={style == 'pop'}
class:warn={style == 'warn'}
>
<Icon name={iconMap[style]} color={iconColorMap[style]} />
<div class="info-message__inner">
<div class="info-message__content">
<div class="info-message__title text-base-13 text-semibold">{title}</div>
<div class="info-message__text text-base-12">
<slot />
</div>
</div>
<div class="info-message__actions">
{#if secondary}
<Button
color={secondaryButtonMap[style]}
kind="outlined"
on:click={() => dispatch('secondary')}
>
{secondary}
</Button>
{/if}
{#if primary}
<Button color={primaryButtonMap[style]} on:click={() => dispatch('primary')}>
{primary}
</Button>
{/if}
</div>
</div>
</div>
<style lang="postcss">
.info-message {
color: var(--clr-theme-scale-ntrl-0);
display: flex;
padding: var(--space-16);
border-radius: var(--radius-m);
gap: var(--space-12);
}
.info-message__inner {
display: flex;
flex-grow: 1;
flex-direction: column;
gap: var(--space-12);
}
.info-message__content {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.info-message__actions {
display: flex;
gap: var(--space-6);
justify-content: flex-end;
}
.neutral {
background-color: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-light);
}
.error {
background-color: var(--clr-theme-err-container);
border: 1px solid var(--clr-theme-scale-err-70);
}
.pop {
background-color: var(--clr-theme-pop-container);
border: 1px solid var(--clr-theme-scale-pop-60);
}
.warn {
background-color: var(--clr-theme-warn-container);
border: 1px solid var(--clr-theme-scale-warn-70);
}
</style>

4
gitbutler-ui/src/lib/components/Toggle.svelte
View File

@ -25,7 +25,7 @@
width: calc(var(--space-24) + var(--space-2));
height: var(--space-16);
border-radius: var(--space-16);
background-color: var(--clr-theme-container-mid);
background-color: var(--clr-theme-container-sub);
box-shadow: inset 0 0 0 1px var(--clr-theme-container-outline-light);
transition:
background-color var(--transition-fast),
@ -37,7 +37,7 @@
/* not checked */
&:hover,
&:focus {
background-color: var(--clr-theme-container-dark);
background-color: var(--clr-theme-container-dim);
outline: none;
}

2
gitbutler-ui/src/lib/icons/Icon.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts" context="module">
export type IconColor = 'success' | 'error' | 'pop' | 'warn' | undefined;
export type IconColor = 'success' | 'error' | 'pop' | 'warn' | 'neutral' | undefined;
</script>
<script lang="ts">

6
gitbutler-ui/src/routes/[projectId]/components/Tag.svelte
View File

@ -84,7 +84,7 @@
}
.success {
color: var(--clr-theme-succ-outline-dark);
color: var(--clr-theme-scale-succ-30);
background: var(--clr-theme-succ-container);
&:hover {
background: var(--clr-theme-succ-container-dim);
@ -102,7 +102,7 @@
}
.error {
color: var(--clr-theme-err-outline-dark);
color: var(--clr-theme-scale-err-30);
background: var(--clr-theme-err-container);
&:hover {
background: var(--clr-theme-err-container-dim);
@ -120,7 +120,7 @@
}
.warning {
color: var(--clr-theme-warn-outline-dark);
color: var(--clr-theme-scale-warn-30);
background: var(--clr-theme-warn-container);
&:hover {
background: var(--clr-theme-warn-container-dim);

87
gitbutler-ui/src/routes/[projectId]/navigation/BranchIcon.svelte Normal file
View File

@ -0,0 +1,87 @@
<script lang="ts">
export let name: 'remote-branch' | 'virtual-branch' | 'pr' | 'pr-draft' | 'pr-closed' | undefined;
export let color: 'neutral' | 'success' | 'pop' | 'purple' | undefined;
console.log(name, color);
</script>
<div
class="branch-icon"
class:pop={color == 'pop'}
class:neutral={color == 'neutral'}
class:success={color == 'success'}
class:purple={color == 'purple'}
>
{#if name == 'virtual-branch'}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.75 7.5V4H4.25V7.5H5.75Z" fill="white" />
<path
d="M11.75 7V4H10.25V7C10.25 8.24264 9.24264 9.25 8 9.25C5.92893 9.25 4.25 10.9289 4.25 13V16H5.75V13C5.75 11.7574 6.75736 10.75 8 10.75C10.0711 10.75 11.75 9.07107 11.75 7Z"
fill="white"
/>
</svg>
{/if}
{#if name == 'remote-branch'}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.75 9.99973V4H4.25V16H5.75V13C5.75 11.7574 6.75736 10.75 8 10.75C10.0711 10.75 11.75 9.07107 11.75 7V4H10.25V7C10.25 8.24264 9.24264 9.25 8 9.25C7.1558 9.25 6.37675 9.52896 5.75 9.99973Z"
fill="white"
/>
</svg>
{/if}
{#if name == 'pr'}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 5L8 2V4.25H10C11.5188 4.25 12.75 5.48122 12.75 7V16H11.25V7C11.25 6.30964 10.6904 5.75 10 5.75H8V8L3 5Z"
fill="white"
/>
<path d="M4.25 9L4.25 16H5.75L5.75 9H4.25Z" fill="white" />
</svg>
{/if}
{#if name == 'pr-draft'}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.75 7.88555C12.7643 7.56698 13.5 6.61941 13.5 5.5C13.5 4.11929 12.3807 3 11 3C9.61929 3 8.5 4.11929 8.5 5.5C8.5 6.61941 9.23572 7.56698 10.25 7.88555V9H11.75V7.88555Z"
fill="white"
/>
<path d="M4.25 16V4L5.75 4L5.75 16H4.25Z" fill="white" />
<path d="M10.25 13L10.25 11H11.75L11.75 13H10.25Z" fill="white" />
<path d="M10.25 16V15H11.75V16H10.25Z" fill="white" />
</svg>
{/if}
{#if name == 'pr-closed'}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.99999 4.93934L12.4697 2.46967L13.5303 3.53033L11.0607 6L13.5303 8.46967L12.4697 9.53033L9.99999 7.06066L7.53033 9.53033L6.46967 8.46967L8.93933 6L6.46967 3.53033L7.53033 2.46967L9.99999 4.93934Z"
fill="white"
/>
<path d="M3.25 4.00001V16H4.75L4.75 4.00001H3.25Z" fill="white" />
<path d="M9.25 10L9.25 16H10.75L10.75 10H9.25Z" fill="white" />
</svg>
{/if}
</div>
<style lang="postcss">
.branch-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: var(--radius-s);
}
.pop {
background-color: var(--clr-core-pop-40);
}
.neutral {
background-color: var(--clr-core-ntrl-50);
}
.success {
background-color: var(--clr-core-succ-45);
}
.purple {
background-color: #8e5ae3;
}
</style>

10
gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
View File

@ -2,7 +2,8 @@
import { page } from '$app/stores';
import AuthorIcons from '$lib/components/AuthorIcons.svelte';
import TimeAgo from '$lib/components/TimeAgo.svelte';
import Icon from '$lib/icons/Icon.svelte';
import BranchIcon from './BranchIcon.svelte';
// import Icon from '$lib/icons/Icon.svelte';
import type { CombinedBranch } from '$lib/branches/types';
export let projectId: string;
@ -21,7 +22,8 @@
<a class="branch" class:selected {href}>
{#if branch.icon}
<div class="item__icon"><Icon name={branch.icon} color={branch.color} /></div>
<!-- <div class="item__icon"><Icon name={branch.icon} color={branch.color} /></div> -->
<BranchIcon name={branch.icon} color={branch.color} />
{/if}
<div class="branch__info flex flex-col gap-2">
<p class="text-base-body-13 branch__name">
@ -78,8 +80,4 @@
.selected {
background-color: var(--clr-theme-container-pale);
}
.item__icon {
flex-shrink: 0;
}
</style>

10
gitbutler-ui/src/routes/[projectId]/navigation/Navigation.svelte
View File

@ -64,10 +64,14 @@
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="16" height="16" rx="4" fill="#797FE6" />
<path d="M5 8.8H11V4" stroke="white" stroke-width="2" />
<path d="M5 12V8.44444V4" stroke="white" stroke-width="2" />
<path
d="M0 6.64C0 4.17295 0 2.93942 0.525474 2.01817C0.880399 1.39592 1.39592 0.880399 2.01817 0.525474C2.93942 0 4.17295 0 6.64 0H9.36C11.8271 0 13.0606 0 13.9818 0.525474C14.6041 0.880399 15.1196 1.39592 15.4745 2.01817C16 2.93942 16 4.17295 16 6.64V9.36C16 11.8271 16 13.0606 15.4745 13.9818C15.1196 14.6041 14.6041 15.1196 13.9818 15.4745C13.0606 16 11.8271 16 9.36 16H6.64C4.17295 16 2.93942 16 2.01817 15.4745C1.39592 15.1196 0.880399 14.6041 0.525474 13.9818C0 13.0606 0 11.8271 0 9.36V6.64Z"
fill="#48B0AA"
/>
<rect x="2" y="3" width="6" height="10" rx="2" fill="#D9F3F2" />
<rect opacity="0.7" x="10" y="3" width="4" height="10" rx="2" fill="#D9F3F2" />
</svg>
<span>Applied branches</span>
{#if ($base$?.behind || 0) > 0}
<Tooltip label="Merge upstream commits into common base">

106
gitbutler-ui/src/styles/tokens.css
View File

@ -26,45 +26,45 @@
--clr-core-err-90: #fdf1f4;
--clr-core-err-95: #fff8fb;
--clr-core-ntrl-0: #000000;
--clr-core-ntrl-5: #141415;
--clr-core-ntrl-10: #1c1c1c;
--clr-core-ntrl-15: #252527;
--clr-core-ntrl-20: #2d2d2f;
--clr-core-ntrl-25: #383838;
--clr-core-ntrl-30: #424242;
--clr-core-ntrl-35: #4d4d4d;
--clr-core-ntrl-40: #676767;
--clr-core-ntrl-45: #7a7a7a;
--clr-core-ntrl-50: #989898;
--clr-core-ntrl-55: #afafaf;
--clr-core-ntrl-60: #c4c4c4;
--clr-core-ntrl-65: #d4d4d4;
--clr-core-ntrl-70: #d9d9d9;
--clr-core-ntrl-75: #e1e1e1;
--clr-core-ntrl-80: #e7e7e7;
--clr-core-ntrl-85: #eeeeee;
--clr-core-ntrl-90: #f4f4f4;
--clr-core-ntrl-95: #f9f9f9;
--clr-core-ntrl-5: #151514;
--clr-core-ntrl-10: #1a1a19;
--clr-core-ntrl-15: #1f1f1e;
--clr-core-ntrl-20: #242423;
--clr-core-ntrl-25: #2c2c2a;
--clr-core-ntrl-30: #373634;
--clr-core-ntrl-35: #444341;
--clr-core-ntrl-40: #51504d;
--clr-core-ntrl-45: #787773;
--clr-core-ntrl-50: #999894;
--clr-core-ntrl-55: #b1b0ad;
--clr-core-ntrl-60: #c5c5c3;
--clr-core-ntrl-65: #d5d5d3;
--clr-core-ntrl-70: #dbdad7;
--clr-core-ntrl-75: #e3e2df;
--clr-core-ntrl-80: #e9e8e5;
--clr-core-ntrl-85: #f0efec;
--clr-core-ntrl-90: #f5f5f3;
--clr-core-ntrl-95: #fbfaf9;
--clr-core-ntrl-100: #ffffff;
--clr-core-pop-5: #27273f;
--clr-core-pop-10: #2a2b50;
--clr-core-pop-15: #363763;
--clr-core-pop-20: #3d3f7b;
--clr-core-pop-25: #414595;
--clr-core-pop-30: #484cad;
--clr-core-pop-35: #565ac2;
--clr-core-pop-40: #666ad6;
--clr-core-pop-45: #7176e4;
--clr-core-pop-50: #7c81e3;
--clr-core-pop-55: #a0a4f7;
--clr-core-pop-60: #b5b9f8;
--clr-core-pop-65: #cacdff;
--clr-core-pop-70: #d6d8fd;
--clr-core-pop-75: #dfe1ff;
--clr-core-pop-80: #e8eaff;
--clr-core-pop-85: #eeefff;
--clr-core-pop-90: #f4f4ff;
--clr-core-pop-95: #f9f9ff;
--clr-core-pop-5: #073e3b;
--clr-core-pop-10: #084643;
--clr-core-pop-15: #094e4b;
--clr-core-pop-20: #0a5d59;
--clr-core-pop-25: #0c6e69;
--clr-core-pop-30: #0e7c76;
--clr-core-pop-35: #108e88;
--clr-core-pop-40: #12a19a;
--clr-core-pop-45: #14b8af;
--clr-core-pop-50: #1eccc3;
--clr-core-pop-55: #6cdad5;
--clr-core-pop-60: #91e3df;
--clr-core-pop-65: #a5e9e5;
--clr-core-pop-70: #baeeeb;
--clr-core-pop-75: #c6f1ef;
--clr-core-pop-80: #d2f4f2;
--clr-core-pop-85: #e2f8f7;
--clr-core-pop-90: #ebfaf9;
--clr-core-pop-95: #f3fcfb;
--clr-core-succ-5: #112c1f;
--clr-core-succ-10: #153727;
--clr-core-succ-15: #1b412f;
@ -116,7 +116,6 @@
--clr-theme-container-pale: var(--clr-core-ntrl-90);
--clr-theme-container-sub: var(--clr-core-ntrl-80);
--clr-theme-err-container: var(--clr-core-err-95);
--clr-theme-err-container-dark: var(--clr-core-err-70);
--clr-theme-err-container-dim: var(--clr-core-err-80);
--clr-theme-err-element: var(--clr-core-err-50);
--clr-theme-err-element-dark: var(--clr-core-err-35);
@ -124,11 +123,9 @@
--clr-theme-err-on-container: var(--clr-core-err-40);
--clr-theme-err-on-element: var(--clr-core-err-95);
--clr-theme-err-outline: var(--clr-core-err-45);
--clr-theme-err-outline-dark: var(--clr-core-err-35);
--clr-theme-err-outline-dim: var(--clr-core-err-40);
--clr-theme-overlay-bg: #cfcfcf4d;
--clr-theme-pop-container: var(--clr-core-pop-95);
--clr-theme-pop-container-dark: var(--clr-core-pop-70);
--clr-theme-pop-container-dim: var(--clr-core-pop-80);
--clr-theme-pop-element: var(--clr-core-pop-40);
--clr-theme-pop-element-dark: var(--clr-core-pop-20);
@ -136,7 +133,6 @@
--clr-theme-pop-on-container: var(--clr-core-pop-10);
--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
--clr-theme-pop-outline: var(--clr-core-pop-40);
--clr-theme-pop-outline-dark: var(--clr-core-pop-20);
--clr-theme-pop-outline-dim: var(--clr-core-pop-30);
--clr-theme-scale-err-10: var(--clr-core-err-10);
--clr-theme-scale-err-20: var(--clr-core-err-20);
@ -186,7 +182,6 @@
--clr-theme-scale-warn-80: var(--clr-core-warn-80);
--clr-theme-scale-warn-90: var(--clr-core-warn-90);
--clr-theme-succ-container: var(--clr-core-succ-95);
--clr-theme-succ-container-dark: var(--clr-core-succ-70);
--clr-theme-succ-container-dim: var(--clr-core-succ-80);
--clr-theme-succ-element: var(--clr-core-succ-50);
--clr-theme-succ-element-dark: var(--clr-core-succ-35);
@ -194,19 +189,18 @@
--clr-theme-succ-on-container: var(--clr-core-succ-40);
--clr-theme-succ-on-element: var(--clr-core-succ-95);
--clr-theme-succ-outline: var(--clr-core-succ-45);
--clr-theme-succ-outline-dark: var(--clr-core-succ-35);
--clr-theme-succ-outline-dim: var(--clr-core-succ-40);
--clr-theme-warn-container: var(--clr-core-warn-95);
--clr-theme-warn-container-dark: var(--clr-core-warn-75);
--clr-theme-warn-container-dim: var(--clr-core-warn-80);
--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-40);
--clr-theme-warn-element-dark: var(--clr-core-warn-40);
--clr-theme-warn-element: var(--clr-core-warn-55);
--clr-theme-warn-element-dark: var(--clr-core-warn-40);
--clr-theme-warn-element-dim: var(--clr-core-warn-50);
--clr-theme-warn-on-container: var(--clr-core-warn-40);
--clr-theme-warn-on-element: var(--clr-core-warn-95);
--clr-theme-warn-outline: var(--clr-core-warn-45);
--clr-theme-warn-outline-dark: var(--clr-core-warn-35);
--clr-theme-warn-outline-dim: var(--clr-core-warn-40);
/* other */
--fx-shadow-l: 0 16px 40px 0 #0000001f;
--fx-shadow-m: 0 10px 30px 0 #00000024;
--fx-shadow-s: 0 7px 14px 0 #0000001a;
@ -257,7 +251,6 @@
--clr-theme-container-pale: var(--clr-core-ntrl-20);
--clr-theme-container-sub: var(--clr-core-ntrl-15);
--clr-theme-err-container: var(--clr-core-err-20);
--clr-theme-err-container-dark: var(--clr-core-err-10);
--clr-theme-err-container-dim: var(--clr-core-err-15);
--clr-theme-err-element: var(--clr-core-err-40);
--clr-theme-err-element-dark: var(--clr-core-err-30);
@ -265,19 +258,16 @@
--clr-theme-err-on-container: var(--clr-core-err-65);
--clr-theme-err-on-element: var(--clr-core-err-90);
--clr-theme-err-outline: var(--clr-core-err-55);
--clr-theme-err-outline-dark: var(--clr-core-err-65);
--clr-theme-err-outline-dim: var(--clr-core-err-60);
--clr-theme-overlay-bg: #20202099;
--clr-theme-pop-container: var(--clr-core-pop-20);
--clr-theme-pop-container-dark: var(--clr-core-pop-10);
--clr-theme-pop-container-dim: var(--clr-core-pop-15);
--clr-theme-pop-element: var(--clr-core-pop-40);
--clr-theme-pop-container: var(--clr-core-pop-15);
--clr-theme-pop-container-dim: var(--clr-core-pop-10);
--clr-theme-pop-element: var(--clr-core-pop-35);
--clr-theme-pop-element-dark: var(--clr-core-pop-20);
--clr-theme-pop-element-dim: var(--clr-core-pop-30);
--clr-theme-pop-on-container: var(--clr-core-pop-80);
--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
--clr-theme-pop-outline: var(--clr-core-pop-55);
--clr-theme-pop-outline-dark: var(--clr-core-pop-65);
--clr-theme-pop-outline-dim: var(--clr-core-pop-60);
--clr-theme-scale-err-10: var(--clr-core-err-90);
--clr-theme-scale-err-20: var(--clr-core-err-80);
@ -327,7 +317,6 @@
--clr-theme-scale-warn-80: var(--clr-core-warn-20);
--clr-theme-scale-warn-90: var(--clr-core-warn-10);
--clr-theme-succ-container: var(--clr-core-succ-20);
--clr-theme-succ-container-dark: var(--clr-core-succ-10);
--clr-theme-succ-container-dim: var(--clr-core-succ-15);
--clr-theme-succ-element: var(--clr-core-succ-40);
--clr-theme-succ-element-dark: var(--clr-core-succ-25);
@ -335,19 +324,18 @@
--clr-theme-succ-on-container: var(--clr-core-succ-80);
--clr-theme-succ-on-element: var(--clr-core-succ-90);
--clr-theme-succ-outline: var(--clr-core-succ-55);
--clr-theme-succ-outline-dark: var(--clr-core-succ-65);
--clr-theme-succ-outline-dim: var(--clr-core-succ-60);
--clr-theme-warn-container: var(--clr-core-warn-20);
--clr-theme-warn-container-dark: var(--clr-core-warn-10);
--clr-theme-warn-container-dim: var(--clr-core-warn-15);
--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-35);
--clr-theme-warn-element-dark: var(--clr-core-warn-35);
--clr-theme-warn-element: var(--clr-core-warn-45);
--clr-theme-warn-element-dark: var(--clr-core-warn-35);
--clr-theme-warn-element-dim: var(--clr-core-warn-40);
--clr-theme-warn-on-container: var(--clr-core-warn-80);
--clr-theme-warn-on-element: var(--clr-core-warn-90);
--clr-theme-warn-outline: var(--clr-core-warn-55);
--clr-theme-warn-outline-dark: var(--clr-core-warn-65);
--clr-theme-warn-outline-dim: var(--clr-core-warn-60);
/* other */
--helpers-invert-0: 1;
--helpers-invert-1: 0;
}