mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Autocomplete info box: improve structure and add examples (#9019)

Browse Source 
Co-authored-by: Giulio Andreini <andreini@netseven.it>
This commit is contained in:
Elias Meire
2024-05-10 14:39:06 +02:00
committed by GitHub
parent 4ed585040b
commit c92c870c73
30 changed files with 1596 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/design-system/src/css/_primitives.scss
View File

@@ -9,6 +9,7 @@
--prim-gray-820: hsl(var(--prim-gray-h), 1%, 18%);
--prim-gray-800: hsl(var(--prim-gray-h), 1%, 20%);
--prim-gray-780: hsl(var(--prim-gray-h), 1%, 22%);
--prim-gray-740: hsl(var(--prim-gray-h), 2%, 26%);
--prim-gray-670: hsl(var(--prim-gray-h), 2%, 33%);
--prim-gray-540: hsl(var(--prim-gray-h), 4%, 46%);
@@ -20,8 +21,9 @@
--prim-gray-70: hsl(var(--prim-gray-h), 32%, 93%);
--prim-gray-70-alpha-01: hsla(var(--prim-gray-h), 32%, 93%, 0.1);
--prim-gray-40: hsl(var(--prim-gray-h), 40%, 96%);
--prim-gray-30: hsl(var(--prim-gray-h), 40%, 97%);
--prim-gray-10: hsl(var(--prim-gray-h), 47%, 99%);
--prim-gray-30: hsl(var(--prim-gray-h), 43%, 97%);
--prim-gray-25: hsl(var(--prim-gray-h), 50%, 97.5%);
--prim-gray-10: hsl(var(--prim-gray-h), 50%, 99%);
--prim-gray-0-alpha-075: hsla(var(--prim-gray-h), 50%, 100%, 0.75);
--prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25);
--prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%);

4
packages/design-system/src/css/_tokens.dark.scss
View File

@@ -72,7 +72,7 @@
--color-sticky-background-7: var(--prim-gray-740);
--color-sticky-border-7: var(--prim-gray-670);
// Expressions and autocomplete
// Expressions, autocomplete, infobox
--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);
--color-invalid-resolvable-foreground: var(--prim-color-alt-c-tint-250);
@@ -83,6 +83,8 @@
--color-expression-syntax-example: var(--prim-gray-670);
--color-autocomplete-item-selected: var(--prim-color-secondary-tint-200);
--color-autocomplete-section-header-border: var(--prim-gray-540);
--color-infobox-background: var(--prim-gray-780);
--color-infobox-examples-border-color: var(--prim-gray-670);
// Code
--color-code-tags-string: var(--prim-color-alt-f-tint-150);

5
packages/design-system/src/css/_tokens.scss
View File

@@ -59,6 +59,7 @@
--color-background-dark: var(--prim-gray-820);
--color-background-medium: var(--prim-gray-120);
--color-background-base: var(--prim-gray-40);
--color-background-light-base: var(--prim-gray-25);
--color-background-light: var(--prim-gray-10);
--color-background-xlight: var(--prim-gray-0);
@@ -105,7 +106,7 @@
--color-sticky-background-7: var(--prim-gray-10);
--color-sticky-border-7: var(--prim-gray-120);
// Expressions and autocomplete
// Expressions, autocomplete, infobox
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
--color-valid-resolvable-background: var(--prim-color-alt-a-tint-500);
--color-invalid-resolvable-foreground: var(--prim-color-alt-c);
@@ -116,6 +117,8 @@
--color-expression-syntax-example: var(--prim-gray-40);
--color-autocomplete-item-selected: var(--color-secondary);
--color-autocomplete-section-header-border: var(--color-foreground-light);
--color-infobox-background: var(--color-background-light-base);
--color-infobox-examples-border-color: var(--color-foreground-light);
// Code
--color-code-tags-string: var(--prim-color-alt-f);