@jikjo/ui-kit 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -9,6 +9,8 @@
9
9
  --jikjo-btn-text: #a1a1aa;
10
10
  --jikjo-btn-bg-hover: #3f3f46b3;
11
11
  --jikjo-btn-text-hover: #e4e4e7;
12
+ --jikjo-btn-bg-active: #ffffff26;
13
+ --jikjo-btn-text-active: #fff;
12
14
  }
13
15
 
14
16
  .jikjo-bubble-menu {
@@ -45,13 +47,13 @@
45
47
  }
46
48
 
47
49
  .jikjo-bubble-menu__btn:hover {
50
+ background: var(--jikjo-btn-bg-hover);
48
51
  color: var(--jikjo-btn-text-hover);
49
- background: #ffffff1a;
50
52
  }
51
53
 
52
54
  .jikjo-bubble-menu__btn[aria-pressed="true"], .jikjo-bubble-menu__btn--active {
53
- color: #fff;
54
- background: #ffffff26;
55
+ background: var(--jikjo-btn-bg-active);
56
+ color: var(--jikjo-btn-text-active);
55
57
  }
56
58
 
57
59
  .jikjo-block-toolbar__btn {
@@ -1 +1 @@
1
- {"version":3,"file":"index.css","names":[],"sources":["../src/styles/variables.css","../src/styles/bubble-menu.css","../src/styles/block-toolbar.css","../src/styles/menu-panel.css"],"sourcesContent":[":root {\n --jikjo-menu-bg: #27272a;\n --jikjo-menu-shadow: #00000080;\n --jikjo-menu-item-text: #a1a1aa;\n --jikjo-menu-item-text-active: #f4f4f5;\n --jikjo-menu-item-bg-active: #3f3f46b3;\n --jikjo-menu-divider: #52525b80;\n --jikjo-accent: #818cf8;\n --jikjo-btn-text: #a1a1aa;\n --jikjo-btn-bg-hover: #3f3f46b3;\n --jikjo-btn-text-hover: #e4e4e7;\n}\n",".jikjo-bubble-menu {\n background: var(--jikjo-menu-bg);\n box-shadow: 0 20px 25px -5px var(--jikjo-menu-shadow),\n 0 8px 10px -6px var(--jikjo-menu-shadow);\n border-radius: 8px;\n align-items: center;\n gap: 2px;\n padding: 6px;\n display: flex;\n}\n\n.jikjo-bubble-menu__divider {\n background: var(--jikjo-menu-divider);\n flex-shrink: 0;\n width: 1px;\n height: 16px;\n margin: 0 2px;\n}\n\n.jikjo-bubble-menu__btn {\n cursor: pointer;\n width: 32px;\n height: 32px;\n color: var(--jikjo-menu-item-text);\n background: none;\n border: none;\n border-radius: 6px;\n justify-content: center;\n align-items: center;\n transition: background 75ms, color 75ms;\n display: flex;\n}\n\n.jikjo-bubble-menu__btn:hover {\n color: var(--jikjo-btn-text-hover);\n background: #ffffff1a;\n}\n\n.jikjo-bubble-menu__btn[aria-pressed=\"true\"], .jikjo-bubble-menu__btn--active {\n color: #fff;\n background: #ffffff26;\n}\n",".jikjo-block-toolbar__btn {\n color: var(--jikjo-btn-text);\n cursor: pointer;\n background: none;\n border: none;\n border-radius: 4px;\n justify-content: center;\n align-items: center;\n padding: 0;\n transition: background 80ms, color 80ms;\n display: flex;\n}\n\n.jikjo-block-toolbar__btn:hover, .jikjo-block-toolbar__btn--hovered {\n background: var(--jikjo-btn-bg-hover);\n color: var(--jikjo-btn-text-hover);\n}\n\n.jikjo-block-toolbar__cursor-indicator {\n background: var(--jikjo-accent);\n pointer-events: none;\n z-index: 2;\n border-radius: 1px;\n width: 2px;\n position: absolute;\n left: 0;\n}\n\n.jikjo-block-toolbar__drop-line {\n pointer-events: none;\n z-index: 3;\n align-items: center;\n height: 2px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n transform: translateY(-1px);\n}\n\n.jikjo-block-toolbar__drop-line-dot {\n background: var(--jikjo-accent);\n border-radius: 50%;\n flex-shrink: 0;\n width: 6px;\n height: 6px;\n margin-left: 4px;\n}\n\n.jikjo-block-toolbar__drop-line-bar {\n background: var(--jikjo-accent);\n flex: 1;\n height: 2px;\n margin-right: 8px;\n}\n",".jikjo-menu-panel {\n background: var(--jikjo-menu-bg);\n box-shadow: 0 20px 25px -5px var(--jikjo-menu-shadow),\n 0 8px 10px -6px var(--jikjo-menu-shadow);\n border-radius: 8px;\n padding: 6px 0;\n overflow: hidden;\n}\n\n.jikjo-menu-panel__list {\n flex-direction: column;\n width: 100%;\n padding: 0 6px;\n display: flex;\n}\n\n.jikjo-menu-panel__list--scrollable {\n max-height: 288px;\n overflow-y: auto;\n}\n\n.jikjo-menu-panel__empty {\n color: var(--jikjo-menu-item-text);\n margin: 0;\n padding: 8px 16px;\n font-size: 12px;\n}\n\n.jikjo-menu-panel__item {\n text-align: left;\n cursor: pointer;\n width: 100%;\n color: var(--jikjo-menu-item-text);\n background: none;\n border: none;\n border-radius: 6px;\n outline: none;\n align-items: center;\n gap: 12px;\n padding: 8px 12px;\n transition: background 75ms, color 75ms;\n display: flex;\n}\n\n.jikjo-menu-panel__item:hover, .jikjo-menu-panel__item--active {\n background: var(--jikjo-menu-item-bg-active);\n color: var(--jikjo-menu-item-text-active);\n}\n\n.jikjo-menu-panel__item-icon {\n color: currentColor;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 16px;\n display: flex;\n}\n\n.jikjo-menu-panel__item-label {\n font-size: 14px;\n font-weight: 400;\n line-height: 1;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACzCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;ACtDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"index.css","names":[],"sources":["../src/styles/variables.css","../src/styles/bubble-menu.css","../src/styles/block-toolbar.css","../src/styles/menu-panel.css"],"sourcesContent":[":root {\n --jikjo-menu-bg: #27272a;\n --jikjo-menu-shadow: #00000080;\n --jikjo-menu-item-text: #a1a1aa;\n --jikjo-menu-item-text-active: #f4f4f5;\n --jikjo-menu-item-bg-active: #3f3f46b3;\n --jikjo-menu-divider: #52525b80;\n --jikjo-accent: #818cf8;\n --jikjo-btn-text: #a1a1aa;\n --jikjo-btn-bg-hover: #3f3f46b3;\n --jikjo-btn-text-hover: #e4e4e7;\n --jikjo-btn-bg-active: #ffffff26;\n --jikjo-btn-text-active: #fff;\n}\n",".jikjo-bubble-menu {\n background: var(--jikjo-menu-bg);\n box-shadow: 0 20px 25px -5px var(--jikjo-menu-shadow),\n 0 8px 10px -6px var(--jikjo-menu-shadow);\n border-radius: 8px;\n align-items: center;\n gap: 2px;\n padding: 6px;\n display: flex;\n}\n\n.jikjo-bubble-menu__divider {\n background: var(--jikjo-menu-divider);\n flex-shrink: 0;\n width: 1px;\n height: 16px;\n margin: 0 2px;\n}\n\n.jikjo-bubble-menu__btn {\n cursor: pointer;\n width: 32px;\n height: 32px;\n color: var(--jikjo-menu-item-text);\n background: none;\n border: none;\n border-radius: 6px;\n justify-content: center;\n align-items: center;\n transition: background 75ms, color 75ms;\n display: flex;\n}\n\n.jikjo-bubble-menu__btn:hover {\n background: var(--jikjo-btn-bg-hover);\n color: var(--jikjo-btn-text-hover);\n}\n\n.jikjo-bubble-menu__btn[aria-pressed=\"true\"], .jikjo-bubble-menu__btn--active {\n background: var(--jikjo-btn-bg-active);\n color: var(--jikjo-btn-text-active);\n}\n",".jikjo-block-toolbar__btn {\n color: var(--jikjo-btn-text);\n cursor: pointer;\n background: none;\n border: none;\n border-radius: 4px;\n justify-content: center;\n align-items: center;\n padding: 0;\n transition: background 80ms, color 80ms;\n display: flex;\n}\n\n.jikjo-block-toolbar__btn:hover, .jikjo-block-toolbar__btn--hovered {\n background: var(--jikjo-btn-bg-hover);\n color: var(--jikjo-btn-text-hover);\n}\n\n.jikjo-block-toolbar__cursor-indicator {\n background: var(--jikjo-accent);\n pointer-events: none;\n z-index: 2;\n border-radius: 1px;\n width: 2px;\n position: absolute;\n left: 0;\n}\n\n.jikjo-block-toolbar__drop-line {\n pointer-events: none;\n z-index: 3;\n align-items: center;\n height: 2px;\n display: flex;\n position: absolute;\n left: 0;\n right: 0;\n transform: translateY(-1px);\n}\n\n.jikjo-block-toolbar__drop-line-dot {\n background: var(--jikjo-accent);\n border-radius: 50%;\n flex-shrink: 0;\n width: 6px;\n height: 6px;\n margin-left: 4px;\n}\n\n.jikjo-block-toolbar__drop-line-bar {\n background: var(--jikjo-accent);\n flex: 1;\n height: 2px;\n margin-right: 8px;\n}\n",".jikjo-menu-panel {\n background: var(--jikjo-menu-bg);\n box-shadow: 0 20px 25px -5px var(--jikjo-menu-shadow),\n 0 8px 10px -6px var(--jikjo-menu-shadow);\n border-radius: 8px;\n padding: 6px 0;\n overflow: hidden;\n}\n\n.jikjo-menu-panel__list {\n flex-direction: column;\n width: 100%;\n padding: 0 6px;\n display: flex;\n}\n\n.jikjo-menu-panel__list--scrollable {\n max-height: 288px;\n overflow-y: auto;\n}\n\n.jikjo-menu-panel__empty {\n color: var(--jikjo-menu-item-text);\n margin: 0;\n padding: 8px 16px;\n font-size: 12px;\n}\n\n.jikjo-menu-panel__item {\n text-align: left;\n cursor: pointer;\n width: 100%;\n color: var(--jikjo-menu-item-text);\n background: none;\n border: none;\n border-radius: 6px;\n outline: none;\n align-items: center;\n gap: 12px;\n padding: 8px 12px;\n transition: background 75ms, color 75ms;\n display: flex;\n}\n\n.jikjo-menu-panel__item:hover, .jikjo-menu-panel__item--active {\n background: var(--jikjo-menu-item-bg-active);\n color: var(--jikjo-menu-item-text-active);\n}\n\n.jikjo-menu-panel__item-icon {\n color: currentColor;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 16px;\n display: flex;\n}\n\n.jikjo-menu-panel__item-label {\n font-size: 14px;\n font-weight: 400;\n line-height: 1;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACbA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACzCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;ACtDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jikjo/ui-kit",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "type": "module",
5
5
  "description": "Pre-built editor UI components for jikjo with self-contained CSS and theming via CSS custom properties",
6
6
  "keywords": [