lookbook 2.0.0.beta.4 → 2.0.0.beta.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/app/components/lookbook/button/component.js +2 -2
  3. data/app/components/lookbook/copy_button/component.js +1 -1
  4. data/app/components/lookbook/display_options/field/component.js +1 -1
  5. data/app/components/lookbook/header/component.css +12 -0
  6. data/app/components/lookbook/header/component.html.erb +13 -9
  7. data/app/components/lookbook/header/component.rb +4 -2
  8. data/app/components/lookbook/icon/component.css +8 -0
  9. data/app/components/lookbook/icon/component.html.erb +2 -4
  10. data/app/components/lookbook/icon/component.rb +16 -4
  11. data/app/components/lookbook/nav/directory/component.html.erb +4 -4
  12. data/app/components/lookbook/nav/entity/component.html.erb +4 -4
  13. data/app/components/lookbook/tabs/component.js +1 -1
  14. data/app/views/layouts/lookbook/application.html.erb +40 -42
  15. data/app/views/layouts/lookbook/skeleton.html.erb +3 -9
  16. data/app/views/lookbook/inspector/panels/_preview.html.erb +1 -0
  17. data/app/views/lookbook/inspector/show.html.erb +10 -2
  18. data/config/app.yml +2 -1
  19. data/lib/lookbook/engine.rb +20 -18
  20. data/lib/lookbook/entities/concerns/navigable_entity.rb +6 -1
  21. data/lib/lookbook/entities/preview_entity.rb +24 -4
  22. data/lib/lookbook/entities/scenario_group_entity.rb +5 -0
  23. data/lib/lookbook/preview.rb +4 -0
  24. data/lib/lookbook/services/urls/data_uri_encoder.rb +14 -0
  25. data/lib/lookbook/services/urls/file_data_uri_encoder.rb +24 -0
  26. data/lib/lookbook/stores/config_store.rb +46 -1
  27. data/lib/lookbook/stores/hook_store.rb +0 -10
  28. data/lib/lookbook/stores/input_store.rb +7 -1
  29. data/lib/lookbook/stores/panel_store.rb +4 -1
  30. data/lib/lookbook/stores/tag_store.rb +6 -5
  31. data/lib/lookbook/version.rb +1 -1
  32. data/lib/lookbook.rb +3 -3
  33. data/public/lookbook-assets/css/lookbook.css +125 -6
  34. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  35. data/public/lookbook-assets/css/themes/blue.css.map +1 -1
  36. data/public/lookbook-assets/css/themes/green.css.map +1 -1
  37. data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
  38. data/public/lookbook-assets/css/themes/rose.css.map +1 -1
  39. data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
  40. data/public/lookbook-assets/js/iframe.js +2 -1
  41. data/public/lookbook-assets/js/iframe.js.map +1 -1
  42. data/public/lookbook-assets/js/index.js +322 -350
  43. data/public/lookbook-assets/js/index.js.map +1 -1
  44. data/public/lookbook-assets/js/lookbook-core.js +21 -21
  45. data/public/lookbook-assets/js/lookbook.js +30 -29
  46. metadata +10 -43
  47. data/app/assets/lookbook/css/fonts.css +0 -33
  48. data/app/assets/lookbook/css/lookbook.css +0 -145
  49. data/app/assets/lookbook/css/themes/blue.css +0 -76
  50. data/app/assets/lookbook/css/themes/green.css +0 -76
  51. data/app/assets/lookbook/css/themes/indigo.css +0 -76
  52. data/app/assets/lookbook/css/themes/rose.css +0 -76
  53. data/app/assets/lookbook/css/themes/zinc.css +0 -76
  54. data/app/assets/lookbook/css/tooltip.css +0 -53
  55. data/app/assets/lookbook/img/lucide-sprite.svg +0 -4960
  56. data/app/assets/lookbook/js/app.js +0 -112
  57. data/app/assets/lookbook/js/components/clipboard.js +0 -47
  58. data/app/assets/lookbook/js/components/params_input.js +0 -23
  59. data/app/assets/lookbook/js/components/tooltip.js +0 -30
  60. data/app/assets/lookbook/js/config.js +0 -24
  61. data/app/assets/lookbook/js/helpers/build.js +0 -22
  62. data/app/assets/lookbook/js/helpers/dom.js +0 -42
  63. data/app/assets/lookbook/js/helpers/layout.js +0 -21
  64. data/app/assets/lookbook/js/helpers/request.js +0 -16
  65. data/app/assets/lookbook/js/helpers/string.js +0 -26
  66. data/app/assets/lookbook/js/iframe.js +0 -1
  67. data/app/assets/lookbook/js/index.js +0 -61
  68. data/app/assets/lookbook/js/lib/lookbook.js +0 -123
  69. data/app/assets/lookbook/js/lib/socket.js +0 -28
  70. data/app/assets/lookbook/js/lib/tippy.js +0 -9
  71. data/app/assets/lookbook/js/lookbook-core.js +0 -1
  72. data/app/assets/lookbook/js/lookbook.js +0 -2
  73. data/app/assets/lookbook/js/plugins/logger.js +0 -39
  74. data/app/assets/lookbook/js/stores/filter.js +0 -11
  75. data/app/assets/lookbook/js/stores/inspector.js +0 -31
  76. data/app/assets/lookbook/js/stores/layout.js +0 -111
  77. data/app/assets/lookbook/js/stores/nav.js +0 -22
  78. data/app/assets/lookbook/js/stores/pages.js +0 -7
  79. data/app/assets/lookbook/js/stores/settings.js +0 -7
  80. data/app/assets/lookbook/js/stores/workbench.js +0 -29
  81. data/app/components/lookbook/icon/component.js +0 -5
  82. data/config/hooks.yml +0 -4
  83. /data/{app/assets/lookbook/fonts/Inter-italic.var.woff2 → public/lookbook-assets/Inter-italic.var.53a0de5f.woff2} +0 -0
  84. /data/{app/assets/lookbook/fonts/Inter-roman.var.woff2 → public/lookbook-assets/Inter-roman.var.d4f9805a.woff2} +0 -0
  85. /data/{app/assets/lookbook/fonts/SourceCodeVariable-Italic.ttf.woff2 → public/lookbook-assets/SourceCodeVariable-Italic.ttf.a93fa22f.woff2} +0 -0
  86. /data/{app/assets/lookbook/fonts/SourceCodeVariable-Roman.ttf.woff2 → public/lookbook-assets/SourceCodeVariable-Roman.ttf.f1c8fcce.woff2} +0 -0
@@ -1,76 +0,0 @@
1
- :root {
2
- --lookbook-white: theme("colors.white");
3
- --lookbook-accent-50: theme("colors.green.50");
4
- --lookbook-accent-100: theme("colors.green.100");
5
- --lookbook-accent-200: theme("colors.green.200");
6
- --lookbook-accent-300: theme("colors.green.300");
7
- --lookbook-accent-400: theme("colors.green.400");
8
- --lookbook-accent-500: theme("colors.green.500");
9
- --lookbook-accent-600: theme("colors.green.600");
10
- --lookbook-accent-700: theme("colors.green.700");
11
- --lookbook-accent-800: theme("colors.green.800");
12
- --lookbook-accent-900: theme("colors.green.900");
13
- --lookbook-base-50: theme("colors.zinc.50");
14
- --lookbook-base-100: theme("colors.zinc.100");
15
- --lookbook-base-200: theme("colors.zinc.200");
16
- --lookbook-base-300: theme("colors.zinc.300");
17
- --lookbook-base-400: theme("colors.zinc.400");
18
- --lookbook-base-500: theme("colors.zinc.500");
19
- --lookbook-base-600: theme("colors.zinc.600");
20
- --lookbook-base-700: theme("colors.zinc.700");
21
- --lookbook-base-800: theme("colors.zinc.800");
22
- --lookbook-base-900: theme("colors.zinc.900");
23
- --lookbook-text: var(--lookbook-base-800);
24
- --lookbook-divider: var(--lookbook-base-300);
25
- --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
26
- --lookbook-icon-button-stroke: var(--lookbook-base-400);
27
- --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
28
- --lookbook-button-bg: var(--lookbook-accent-500);
29
- --lookbook-button-bg-hover: var(--lookbook-accent-600);
30
- --lookbook-button-text: var(--lookbook-white);
31
- --lookbook-tooltip-bg: var(--lookbook-accent-500);
32
- --lookbook-tooltip-text: var(--lookbook-white);
33
- --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
34
- --lookbook-dropdown-text: var(--lookbook-text);
35
- --lookbook-dropdown-divider: var(--lookbook-divider);
36
- --lookbook-scrollbar: var(--lookbook-base-200);
37
- --lookbook-scrollbar-hover: var(--lookbook-base-300);
38
- --lookbook-toolbar-bg: var(--lookbook-white);
39
- --lookbook-toolbar-divider: var(--lookbook-divider);
40
- --lookbook-nav-text: var(--lookbook-text);
41
- --lookbook-nav-toggle: var(--lookbook-base-500);
42
- --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
43
- --lookbook-nav-item-hover: var(--lookbook-base-100);
44
- --lookbook-nav-item-active: var(--lookbook-accent-50);
45
- --lookbook-input-bg: var(--lookbook-white);
46
- --lookbook-input-border: var(--lookbook-base-300);
47
- --lookbook-input-border-focus: var(--lookbook-accent-200);
48
- --lookbook-input-text: var(--lookbook-base-600);
49
- --lookbook-input-text-placeholder: var(--lookbook-base-400);
50
- --lookbook-input-toggle: var(--lookbook-base-300);
51
- --lookbook-input-toggle-active: var(--lookbook-accent-500);
52
- --lookbook-prose-bg: var(--lookbook-white);
53
- --lookbook-prose-text: var(--lookbook-base-600);
54
- --lookbook-prose-link: var(--lookbook-accent-900);
55
- --lookbook-tabs-text: var(--lookbook-base-500);
56
- --lookbook-tabs-text-hover: var(--lookbook-base-700);
57
- --lookbook-tabs-text-disabled: var(--lookbook-base-300);
58
- --lookbook-tabs-border-active: var(--lookbook-accent-400);
59
- --lookbook-viewport-handle: var(--lookbook-white);
60
- --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
61
- --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
62
- --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
63
- --lookbook-sidebar-bg: var(--lookbook-base-50);
64
- --lookbook-page-bg: var(--lookbook-white);
65
- --lookbook-drawer-bg: var(--lookbook-base-50);
66
- --lookbook-params-editor-bg: var(--lookbook-white);
67
- --lookbook-header-bg: var(--lookbook-accent-600);
68
- --lookbook-header-text: var(--lookbook-white);
69
- --lookbook-header-border: var(--lookbook-accent-700);
70
- --lookbook-message-bg: var(--lookbook-white);
71
- --lookbook-message-border: var(--lookbook-divider);
72
- --lookbook-message-title: var(--lookbook-base-600);
73
- --lookbook-message-text: var(--lookbook-text);
74
- --lookbook-embed-title: var(--lookbook-text);
75
- --lookbook-branding-text: var(--lookbook-header-text);
76
- }
@@ -1,76 +0,0 @@
1
- :root {
2
- --lookbook-white: theme("colors.white");
3
- --lookbook-accent-50: theme("colors.indigo.50");
4
- --lookbook-accent-100: theme("colors.indigo.100");
5
- --lookbook-accent-200: theme("colors.indigo.200");
6
- --lookbook-accent-300: theme("colors.indigo.300");
7
- --lookbook-accent-400: theme("colors.indigo.400");
8
- --lookbook-accent-500: theme("colors.indigo.500");
9
- --lookbook-accent-600: theme("colors.indigo.600");
10
- --lookbook-accent-700: theme("colors.indigo.700");
11
- --lookbook-accent-800: theme("colors.indigo.800");
12
- --lookbook-accent-900: theme("colors.indigo.900");
13
- --lookbook-base-50: theme("colors.zinc.50");
14
- --lookbook-base-100: theme("colors.zinc.100");
15
- --lookbook-base-200: theme("colors.zinc.200");
16
- --lookbook-base-300: theme("colors.zinc.300");
17
- --lookbook-base-400: theme("colors.zinc.400");
18
- --lookbook-base-500: theme("colors.zinc.500");
19
- --lookbook-base-600: theme("colors.zinc.600");
20
- --lookbook-base-700: theme("colors.zinc.700");
21
- --lookbook-base-800: theme("colors.zinc.800");
22
- --lookbook-base-900: theme("colors.zinc.900");
23
- --lookbook-text: var(--lookbook-base-800);
24
- --lookbook-divider: var(--lookbook-base-300);
25
- --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
26
- --lookbook-icon-button-stroke: var(--lookbook-base-400);
27
- --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
28
- --lookbook-button-bg: var(--lookbook-accent-500);
29
- --lookbook-button-bg-hover: var(--lookbook-accent-600);
30
- --lookbook-button-text: var(--lookbook-white);
31
- --lookbook-tooltip-bg: var(--lookbook-accent-500);
32
- --lookbook-tooltip-text: var(--lookbook-white);
33
- --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
34
- --lookbook-dropdown-text: var(--lookbook-text);
35
- --lookbook-dropdown-divider: var(--lookbook-divider);
36
- --lookbook-scrollbar: var(--lookbook-base-200);
37
- --lookbook-scrollbar-hover: var(--lookbook-base-300);
38
- --lookbook-toolbar-bg: var(--lookbook-white);
39
- --lookbook-toolbar-divider: var(--lookbook-divider);
40
- --lookbook-nav-text: var(--lookbook-text);
41
- --lookbook-nav-toggle: var(--lookbook-base-500);
42
- --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
43
- --lookbook-nav-item-hover: var(--lookbook-base-100);
44
- --lookbook-nav-item-active: var(--lookbook-accent-50);
45
- --lookbook-input-bg: var(--lookbook-white);
46
- --lookbook-input-border: var(--lookbook-base-300);
47
- --lookbook-input-border-focus: var(--lookbook-accent-200);
48
- --lookbook-input-text: var(--lookbook-base-600);
49
- --lookbook-input-text-placeholder: var(--lookbook-base-400);
50
- --lookbook-input-toggle: var(--lookbook-base-300);
51
- --lookbook-input-toggle-active: var(--lookbook-accent-500);
52
- --lookbook-prose-bg: var(--lookbook-white);
53
- --lookbook-prose-text: var(--lookbook-base-600);
54
- --lookbook-prose-link: var(--lookbook-accent-900);
55
- --lookbook-tabs-text: var(--lookbook-base-500);
56
- --lookbook-tabs-text-hover: var(--lookbook-base-700);
57
- --lookbook-tabs-text-disabled: var(--lookbook-base-300);
58
- --lookbook-tabs-border-active: var(--lookbook-accent-400);
59
- --lookbook-viewport-handle: var(--lookbook-white);
60
- --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
61
- --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
62
- --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
63
- --lookbook-sidebar-bg: var(--lookbook-base-50);
64
- --lookbook-page-bg: var(--lookbook-white);
65
- --lookbook-drawer-bg: var(--lookbook-base-50);
66
- --lookbook-params-editor-bg: var(--lookbook-white);
67
- --lookbook-header-bg: var(--lookbook-accent-600);
68
- --lookbook-header-text: var(--lookbook-white);
69
- --lookbook-header-border: var(--lookbook-accent-700);
70
- --lookbook-message-bg: var(--lookbook-white);
71
- --lookbook-message-border: var(--lookbook-divider);
72
- --lookbook-message-title: var(--lookbook-base-600);
73
- --lookbook-message-text: var(--lookbook-text);
74
- --lookbook-embed-title: var(--lookbook-text);
75
- --lookbook-branding-text: var(--lookbook-header-text);
76
- }
@@ -1,76 +0,0 @@
1
- :root {
2
- --lookbook-white: theme("colors.white");
3
- --lookbook-accent-50: theme("colors.rose.50");
4
- --lookbook-accent-100: theme("colors.rose.100");
5
- --lookbook-accent-200: theme("colors.rose.200");
6
- --lookbook-accent-300: theme("colors.rose.300");
7
- --lookbook-accent-400: theme("colors.rose.400");
8
- --lookbook-accent-500: theme("colors.rose.500");
9
- --lookbook-accent-600: theme("colors.rose.600");
10
- --lookbook-accent-700: theme("colors.rose.700");
11
- --lookbook-accent-800: theme("colors.rose.800");
12
- --lookbook-accent-900: theme("colors.rose.900");
13
- --lookbook-base-50: theme("colors.zinc.50");
14
- --lookbook-base-100: theme("colors.zinc.100");
15
- --lookbook-base-200: theme("colors.zinc.200");
16
- --lookbook-base-300: theme("colors.zinc.300");
17
- --lookbook-base-400: theme("colors.zinc.400");
18
- --lookbook-base-500: theme("colors.zinc.500");
19
- --lookbook-base-600: theme("colors.zinc.600");
20
- --lookbook-base-700: theme("colors.zinc.700");
21
- --lookbook-base-800: theme("colors.zinc.800");
22
- --lookbook-base-900: theme("colors.zinc.900");
23
- --lookbook-text: var(--lookbook-base-800);
24
- --lookbook-divider: var(--lookbook-base-300);
25
- --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
26
- --lookbook-icon-button-stroke: var(--lookbook-base-400);
27
- --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
28
- --lookbook-button-bg: var(--lookbook-accent-500);
29
- --lookbook-button-bg-hover: var(--lookbook-accent-600);
30
- --lookbook-button-text: var(--lookbook-white);
31
- --lookbook-tooltip-bg: var(--lookbook-accent-500);
32
- --lookbook-tooltip-text: var(--lookbook-white);
33
- --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
34
- --lookbook-dropdown-text: var(--lookbook-text);
35
- --lookbook-dropdown-divider: var(--lookbook-divider);
36
- --lookbook-scrollbar: var(--lookbook-base-200);
37
- --lookbook-scrollbar-hover: var(--lookbook-base-300);
38
- --lookbook-toolbar-bg: var(--lookbook-white);
39
- --lookbook-toolbar-divider: var(--lookbook-divider);
40
- --lookbook-nav-text: var(--lookbook-text);
41
- --lookbook-nav-toggle: var(--lookbook-base-500);
42
- --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
43
- --lookbook-nav-item-hover: var(--lookbook-base-100);
44
- --lookbook-nav-item-active: var(--lookbook-accent-50);
45
- --lookbook-input-bg: var(--lookbook-white);
46
- --lookbook-input-border: var(--lookbook-base-300);
47
- --lookbook-input-border-focus: var(--lookbook-accent-200);
48
- --lookbook-input-text: var(--lookbook-base-600);
49
- --lookbook-input-text-placeholder: var(--lookbook-base-400);
50
- --lookbook-input-toggle: var(--lookbook-base-300);
51
- --lookbook-input-toggle-active: var(--lookbook-accent-500);
52
- --lookbook-prose-bg: var(--lookbook-white);
53
- --lookbook-prose-text: var(--lookbook-base-600);
54
- --lookbook-prose-link: var(--lookbook-accent-900);
55
- --lookbook-tabs-text: var(--lookbook-base-500);
56
- --lookbook-tabs-text-hover: var(--lookbook-base-700);
57
- --lookbook-tabs-text-disabled: var(--lookbook-base-300);
58
- --lookbook-tabs-border-active: var(--lookbook-accent-400);
59
- --lookbook-viewport-handle: var(--lookbook-white);
60
- --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
61
- --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
62
- --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
63
- --lookbook-sidebar-bg: var(--lookbook-base-50);
64
- --lookbook-page-bg: var(--lookbook-white);
65
- --lookbook-drawer-bg: var(--lookbook-base-50);
66
- --lookbook-params-editor-bg: var(--lookbook-white);
67
- --lookbook-header-bg: var(--lookbook-accent-600);
68
- --lookbook-header-text: var(--lookbook-white);
69
- --lookbook-header-border: var(--lookbook-accent-700);
70
- --lookbook-message-bg: var(--lookbook-white);
71
- --lookbook-message-border: var(--lookbook-divider);
72
- --lookbook-message-title: var(--lookbook-base-600);
73
- --lookbook-message-text: var(--lookbook-text);
74
- --lookbook-embed-title: var(--lookbook-text);
75
- --lookbook-branding-text: var(--lookbook-header-text);
76
- }
@@ -1,76 +0,0 @@
1
- :root {
2
- --lookbook-white: theme("colors.white");
3
- --lookbook-accent-50: theme("colors.zinc.50");
4
- --lookbook-accent-100: theme("colors.zinc.100");
5
- --lookbook-accent-200: theme("colors.zinc.200");
6
- --lookbook-accent-300: theme("colors.zinc.300");
7
- --lookbook-accent-400: theme("colors.zinc.400");
8
- --lookbook-accent-500: theme("colors.zinc.500");
9
- --lookbook-accent-600: theme("colors.zinc.600");
10
- --lookbook-accent-700: theme("colors.zinc.700");
11
- --lookbook-accent-800: theme("colors.zinc.800");
12
- --lookbook-accent-900: theme("colors.zinc.900");
13
- --lookbook-base-50: theme("colors.zinc.50");
14
- --lookbook-base-100: theme("colors.zinc.100");
15
- --lookbook-base-200: theme("colors.zinc.200");
16
- --lookbook-base-300: theme("colors.zinc.300");
17
- --lookbook-base-400: theme("colors.zinc.400");
18
- --lookbook-base-500: theme("colors.zinc.500");
19
- --lookbook-base-600: theme("colors.zinc.600");
20
- --lookbook-base-700: theme("colors.zinc.700");
21
- --lookbook-base-800: theme("colors.zinc.800");
22
- --lookbook-base-900: theme("colors.zinc.900");
23
- --lookbook-text: var(--lookbook-base-800);
24
- --lookbook-divider: var(--lookbook-base-300);
25
- --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
26
- --lookbook-icon-button-stroke: var(--lookbook-base-400);
27
- --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
28
- --lookbook-button-bg: var(--lookbook-accent-500);
29
- --lookbook-button-bg-hover: var(--lookbook-accent-600);
30
- --lookbook-button-text: var(--lookbook-white);
31
- --lookbook-tooltip-bg: var(--lookbook-accent-500);
32
- --lookbook-tooltip-text: var(--lookbook-white);
33
- --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
34
- --lookbook-dropdown-text: var(--lookbook-text);
35
- --lookbook-dropdown-divider: var(--lookbook-divider);
36
- --lookbook-scrollbar: var(--lookbook-base-200);
37
- --lookbook-scrollbar-hover: var(--lookbook-base-300);
38
- --lookbook-toolbar-bg: var(--lookbook-white);
39
- --lookbook-toolbar-divider: var(--lookbook-divider);
40
- --lookbook-nav-text: var(--lookbook-text);
41
- --lookbook-nav-toggle: var(--lookbook-base-500);
42
- --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
43
- --lookbook-nav-item-hover: var(--lookbook-base-100);
44
- --lookbook-nav-item-active: var(--lookbook-accent-50);
45
- --lookbook-input-bg: var(--lookbook-white);
46
- --lookbook-input-border: var(--lookbook-base-300);
47
- --lookbook-input-border-focus: var(--lookbook-accent-200);
48
- --lookbook-input-text: var(--lookbook-base-600);
49
- --lookbook-input-text-placeholder: var(--lookbook-base-400);
50
- --lookbook-input-toggle: var(--lookbook-base-300);
51
- --lookbook-input-toggle-active: var(--lookbook-accent-500);
52
- --lookbook-prose-bg: var(--lookbook-white);
53
- --lookbook-prose-text: var(--lookbook-base-600);
54
- --lookbook-prose-link: var(--lookbook-accent-900);
55
- --lookbook-tabs-text: var(--lookbook-base-500);
56
- --lookbook-tabs-text-hover: var(--lookbook-base-700);
57
- --lookbook-tabs-text-disabled: var(--lookbook-base-300);
58
- --lookbook-tabs-border-active: var(--lookbook-accent-400);
59
- --lookbook-viewport-handle: var(--lookbook-white);
60
- --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
61
- --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
62
- --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
63
- --lookbook-sidebar-bg: var(--lookbook-base-50);
64
- --lookbook-page-bg: var(--lookbook-white);
65
- --lookbook-drawer-bg: var(--lookbook-base-50);
66
- --lookbook-params-editor-bg: var(--lookbook-white);
67
- --lookbook-header-bg: var(--lookbook-accent-600);
68
- --lookbook-header-text: var(--lookbook-white);
69
- --lookbook-header-border: var(--lookbook-accent-700);
70
- --lookbook-message-bg: var(--lookbook-white);
71
- --lookbook-message-border: var(--lookbook-divider);
72
- --lookbook-message-title: var(--lookbook-base-600);
73
- --lookbook-message-text: var(--lookbook-text);
74
- --lookbook-embed-title: var(--lookbook-text);
75
- --lookbook-branding-text: var(--lookbook-header-text);
76
- }
@@ -1,53 +0,0 @@
1
- @import "tippy.js/dist/tippy";
2
- @import "tippy.js/dist/border";
3
-
4
- .tippy-box[data-theme~="tooltip"] {
5
- @apply text-xs opacity-90;
6
-
7
- background-color: var(--lookbook-tooltip-bg);
8
- color: var(--lookbook-tooltip-text);
9
-
10
- &[data-placement^="top"] > .tippy-arrow::before {
11
- border-top-color: var(--lookbook-tooltip-bg);
12
- }
13
-
14
- &[data-placement^="bottom"] > .tippy-arrow::before {
15
- border-bottom-color: var(--lookbook-tooltip-bg);
16
- }
17
-
18
- &[data-placement^="left"] > .tippy-arrow::before {
19
- border-left-color: var(--lookbook-tooltip-bg);
20
- }
21
-
22
- &[data-placement^="right"] > .tippy-arrow::before {
23
- border-right-color: var(--lookbook-tooltip-bg);
24
- }
25
- }
26
-
27
- .tippy-box[data-theme~="menu"] {
28
- @apply shadow-lg !max-w-none;
29
-
30
- border: 1px solid var(--lookbook-dropdown-divider);
31
- color: var(--lookbook-dropdown-text);
32
- background: var(--lookbook-dropdown-bg);
33
-
34
- & > .tippy-content {
35
- @apply rounded p-0 overflow-hidden;
36
- }
37
-
38
- &[data-placement^="top"] > .tippy-arrow::before {
39
- border-top-color: var(--lookbook-dropdown-bg);
40
- }
41
-
42
- &[data-placement^="bottom"] > .tippy-arrow::before {
43
- border-bottom-color: var(--lookbook-dropdown-bg);
44
- }
45
-
46
- &[data-placement^="left"] > .tippy-arrow::before {
47
- border-left-color: var(--lookbook-dropdown-bg);
48
- }
49
-
50
- &[data-placement^="right"] > .tippy-arrow::before {
51
- border-right-color: var(--lookbook-dropdown-bg);
52
- }
53
- }