@pantograph/styles 0.0.1 → 0.0.2

package/dist/go_picker.umd.cjs

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_go_picker__trigger_emoji{font-size:var(--pt-size-3xsm, 14px);line-height:1}.pc_go_picker__emoji{font-size:var(--pt-size-xsm, 20px);line-height:1}.pc_go_picker__color_swatch_loading{width:var(--pt-dimension-1600, 32px)!important;height:var(--pt-dimension-1600, 32px)!important}.pc_go_picker__content{width:381px;min-width:381px;max-width:381px;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.pc_go_picker__content .pc_go_picker__header{display:flex;flex-direction:column;gap:var(--pt-dimension-300, 6px);padding-bottom:var(--pt-dimension-600, 12px)}.pc_go_picker__content .pc_go_picker__header .pc_go_picker__group{display:flex;align-items:center;justify-content:space-between}.pc_go_picker__content .pc_go_picker__header .pc_go_picker__search{display:flex;align-items:center;gap:var(--pt-dimension-300, 6px)}.pc_go_picker__content .pc_go_picker__scroll_container{max-height:184px}.pc_go_picker__content .pc_go_picker__empty{height:184px;min-height:184px;max-height:184px;justify-content:center}.pc_go_picker__content .pc_go_picker__grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--pt-dimension-300, 6px);padding:2px}.pc_go_picker__colors{display:flex;flex-direction:column;gap:var(--pt-dimension-600, 12px)}\n";
-const addGoPickerCss = () => addCssToHead(`${prefix}s-go_picker`, cssText);
+const goPickerId = `${prefix}s-go_picker`;
+const addGoPickerCss = () => addCssToHead(goPickerId, cssText);
+const removeGoPickerCss = () => removeCssFromHead(goPickerId);
+const goPickerCss = cssText;
+exports.goPickerId = goPickerId;
 exports.addGoPickerCss = addGoPickerCss;
-exports.goPickerCss = cssText;
+exports.removeGoPickerCss = removeGoPickerCss;
+exports.goPickerCss = goPickerCss;

package/dist/graphical_object_group.d.ts

@@ -0,0 +1,5 @@
+declare const graphicalObjectGroupId: string;
+declare const addGraphicalObjectGroupCss: () => void;
+declare const removeGraphicalObjectGroupCss: () => void;
+declare const graphicalObjectGroupCss: string;
+export { graphicalObjectGroupId, addGraphicalObjectGroupCss, removeGraphicalObjectGroupCss, graphicalObjectGroupCss };

package/dist/{go_group.js → graphical_object_group.js}

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_go_group{display:flex;flex-wrap:wrap}.pc_go_group .pc_go_group__truncate{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;justify-content:center;border-width:1px;border-style:solid}.pc_go_group .pc_go_group__truncate:not(:hover){--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-br-subtle),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg),var(--ptu-text-opacity))}.pc_go_group .pc_go_group__truncate:hover{--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-2),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-6),var(--ptu-text-opacity))}.pc_go_group.pc_go_group--sm .pc_go_group__truncate,.pc_go_group.pc_go_group--xsm .pc_go_group__truncate{border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_go_group.pc_go_group--xsm{gap:var(--pt-dimension-100, 2px)}.pc_go_group.pc_go_group--xsm .pc_go_group__truncate{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);padding-left:var(--pt-dimension-050, 1px);padding-right:var(--pt-dimension-050, 1px)}.pc_go_group.pc_go_group--sm{gap:var(--pt-dimension-200, 4px)}.pc_go_group.pc_go_group--sm .pc_go_group__truncate{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);padding-left:var(--pt-dimension-100, 2px);padding-right:var(--pt-dimension-100, 2px)}.pc_go_group.pc_go_group--md{gap:var(--pt-dimension-300, 6px)}.pc_go_group.pc_go_group--md .pc_go_group__truncate{height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);border-radius:var(--pt-roundness-md, 6px);padding-left:var(--pt-dimension-200, 4px);padding-right:var(--pt-dimension-200, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}\n";
-export const addGoGroupCss = () => addCssToHead(`${prefix}s-go_group`, cssText);
-export const goGroupCss = cssText;
+const graphicalObjectGroupId = `${prefix}s-graphical_object_group`;
+const addGraphicalObjectGroupCss = () => addCssToHead(graphicalObjectGroupId, cssText);
+const removeGraphicalObjectGroupCss = () => removeCssFromHead(graphicalObjectGroupId);
+const graphicalObjectGroupCss = cssText;
+export { graphicalObjectGroupId, addGraphicalObjectGroupCss, removeGraphicalObjectGroupCss, graphicalObjectGroupCss };

package/dist/{go_group.umd.cjs → graphical_object_group.umd.cjs}

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_go_group{display:flex;flex-wrap:wrap}.pc_go_group .pc_go_group__truncate{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;justify-content:center;border-width:1px;border-style:solid}.pc_go_group .pc_go_group__truncate:not(:hover){--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-br-subtle),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg),var(--ptu-text-opacity))}.pc_go_group .pc_go_group__truncate:hover{--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-2),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-6),var(--ptu-text-opacity))}.pc_go_group.pc_go_group--sm .pc_go_group__truncate,.pc_go_group.pc_go_group--xsm .pc_go_group__truncate{border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_go_group.pc_go_group--xsm{gap:var(--pt-dimension-100, 2px)}.pc_go_group.pc_go_group--xsm .pc_go_group__truncate{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);padding-left:var(--pt-dimension-050, 1px);padding-right:var(--pt-dimension-050, 1px)}.pc_go_group.pc_go_group--sm{gap:var(--pt-dimension-200, 4px)}.pc_go_group.pc_go_group--sm .pc_go_group__truncate{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);padding-left:var(--pt-dimension-100, 2px);padding-right:var(--pt-dimension-100, 2px)}.pc_go_group.pc_go_group--md{gap:var(--pt-dimension-300, 6px)}.pc_go_group.pc_go_group--md .pc_go_group__truncate{height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);border-radius:var(--pt-roundness-md, 6px);padding-left:var(--pt-dimension-200, 4px);padding-right:var(--pt-dimension-200, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}\n";
-const addGoGroupCss = () => addCssToHead(`${prefix}s-go_group`, cssText);
-exports.addGoGroupCss = addGoGroupCss;
-exports.goGroupCss = cssText;
+const graphicalObjectGroupId = `${prefix}s-graphical_object_group`;
+const addGraphicalObjectGroupCss = () => addCssToHead(graphicalObjectGroupId, cssText);
+const removeGraphicalObjectGroupCss = () => removeCssFromHead(graphicalObjectGroupId);
+const graphicalObjectGroupCss = cssText;
+exports.graphicalObjectGroupId = graphicalObjectGroupId;
+exports.addGraphicalObjectGroupCss = addGraphicalObjectGroupCss;
+exports.removeGraphicalObjectGroupCss = removeGraphicalObjectGroupCss;
+exports.graphicalObjectGroupCss = graphicalObjectGroupCss;

package/dist/hover_card.d.ts

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const hoverCardId: string;
 declare const addHoverCardCss: () => void;
+declare const removeHoverCardCss: () => void;
 declare const hoverCardCss: string;
-export { addHoverCardCss, hoverCardCss };
+export { hoverCardId, addHoverCardCss, removeHoverCardCss, hoverCardCss };

package/dist/hover_card.js

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_hover_card__trigger{-webkit-user-select:none;user-select:none;outline:0}.pc_hover_card__content{border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);outline:0}.pc_hover_card__content--sm{border-radius:var(--pt-roundness-sm, 4px)}.pc_hover_card__content--sm:not(.pc_hover_card__content--no-padding){padding:var(--pt-dimension-200, 4px)}.pc_hover_card__content--md{border-radius:var(--pt-roundness-md, 6px)}.pc_hover_card__content--md:not(.pc_hover_card__content--no-padding){padding:var(--pt-dimension-300, 6px)}.pc_hover_card__content--lg{border-radius:var(--pt-roundness-lg, 8px)}.pc_hover_card__content--lg:not(.pc_hover_card__content--no-padding){padding:var(--pt-dimension-400, 8px)}.pc_hover_card__content.pc_hover_card__content--no-padding{padding:var(--pt-dimension-0, 0px)}\n";
-export const addHoverCardCss = () => addCssToHead(`${prefix}s-hover_card`, cssText);
-export const hoverCardCss = cssText;
+const hoverCardId = `${prefix}s-hover_card`;
+const addHoverCardCss = () => addCssToHead(hoverCardId, cssText);
+const removeHoverCardCss = () => removeCssFromHead(hoverCardId);
+const hoverCardCss = cssText;
+export { hoverCardId, addHoverCardCss, removeHoverCardCss, hoverCardCss };

package/dist/hover_card.umd.cjs

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_hover_card__trigger{-webkit-user-select:none;user-select:none;outline:0}.pc_hover_card__content{border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);outline:0}.pc_hover_card__content--sm{border-radius:var(--pt-roundness-sm, 4px)}.pc_hover_card__content--sm:not(.pc_hover_card__content--no-padding){padding:var(--pt-dimension-200, 4px)}.pc_hover_card__content--md{border-radius:var(--pt-roundness-md, 6px)}.pc_hover_card__content--md:not(.pc_hover_card__content--no-padding){padding:var(--pt-dimension-300, 6px)}.pc_hover_card__content--lg{border-radius:var(--pt-roundness-lg, 8px)}.pc_hover_card__content--lg:not(.pc_hover_card__content--no-padding){padding:var(--pt-dimension-400, 8px)}.pc_hover_card__content.pc_hover_card__content--no-padding{padding:var(--pt-dimension-0, 0px)}\n";
-const addHoverCardCss = () => addCssToHead(`${prefix}s-hover_card`, cssText);
+const hoverCardId = `${prefix}s-hover_card`;
+const addHoverCardCss = () => addCssToHead(hoverCardId, cssText);
+const removeHoverCardCss = () => removeCssFromHead(hoverCardId);
+const hoverCardCss = cssText;
+exports.hoverCardId = hoverCardId;
 exports.addHoverCardCss = addHoverCardCss;
-exports.hoverCardCss = cssText;
+exports.removeHoverCardCss = removeHoverCardCss;
+exports.hoverCardCss = hoverCardCss;

package/dist/icon.d.ts

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const iconId: string;
 declare const addIconCss: () => void;
+declare const removeIconCss: () => void;
 declare const iconCss: string;
-export { addIconCss, iconCss };
+export { iconId, addIconCss, removeIconCss, iconCss };

package/dist/icon.js

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_icon{width:var(--pt-icon-size);height:var(--pt-icon-size);max-width:var(--pt-icon-size);max-height:var(--pt-icon-size);min-width:var(--pt-icon-size);min-height:var(--pt-icon-size);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--pt-icon-size);line-height:1}.pc_icon:not(.pc_icon--sm):not(.pc_icon--xsm):not(.pc_icon--2xsm):not(.pc_icon--3xsm){--pt-icon-stroke: 1px}.pc_icon:not(.pc_icon--custom-stroke) svg,.pc_icon:not(.pc_icon--custom-stroke) svg path{stroke-width:var(--pt-icon-stroke)}.pc_icon--flip-x{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_icon--flip-y{--ptu-scale-y:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: rtl\"] .pc_icon--flip-rtl,:dir(rtl) .pc_icon--flip-rtl,[dir=rtl] .pc_icon--flip-rtl,.rtl .pc_icon--flip-rtl{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: ltr\"] .pc_icon--flip-ltr,:dir(ltr) .pc_icon--flip-ltr,[dir=ltr] .pc_icon--flip-ltr,.ltr .pc_icon--flip-ltr{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}\n";
-export const addIconCss = () => addCssToHead(`${prefix}s-icon`, cssText);
-export const iconCss = cssText;
+const iconId = `${prefix}s-icon`;
+const addIconCss = () => addCssToHead(iconId, cssText);
+const removeIconCss = () => removeCssFromHead(iconId);
+const iconCss = cssText;
+export { iconId, addIconCss, removeIconCss, iconCss };

package/dist/icon.umd.cjs

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_icon{width:var(--pt-icon-size);height:var(--pt-icon-size);max-width:var(--pt-icon-size);max-height:var(--pt-icon-size);min-width:var(--pt-icon-size);min-height:var(--pt-icon-size);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--pt-icon-size);line-height:1}.pc_icon:not(.pc_icon--sm):not(.pc_icon--xsm):not(.pc_icon--2xsm):not(.pc_icon--3xsm){--pt-icon-stroke: 1px}.pc_icon:not(.pc_icon--custom-stroke) svg,.pc_icon:not(.pc_icon--custom-stroke) svg path{stroke-width:var(--pt-icon-stroke)}.pc_icon--flip-x{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_icon--flip-y{--ptu-scale-y:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: rtl\"] .pc_icon--flip-rtl,:dir(rtl) .pc_icon--flip-rtl,[dir=rtl] .pc_icon--flip-rtl,.rtl .pc_icon--flip-rtl{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: ltr\"] .pc_icon--flip-ltr,:dir(ltr) .pc_icon--flip-ltr,[dir=ltr] .pc_icon--flip-ltr,.ltr .pc_icon--flip-ltr{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}\n";
-const addIconCss = () => addCssToHead(`${prefix}s-icon`, cssText);
+const iconId = `${prefix}s-icon`;
+const addIconCss = () => addCssToHead(iconId, cssText);
+const removeIconCss = () => removeCssFromHead(iconId);
+const iconCss = cssText;
+exports.iconId = iconId;
 exports.addIconCss = addIconCss;
-exports.iconCss = cssText;
+exports.removeIconCss = removeIconCss;
+exports.iconCss = iconCss;

package/dist/image.d.ts

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const imageId: string;
 declare const addImageCss: () => void;
+declare const removeImageCss: () => void;
 declare const imageCss: string;
-export { addImageCss, imageCss };
+export { imageId, addImageCss, removeImageCss, imageCss };

package/dist/image.js

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_image{position:relative;display:inline-flex;overflow:hidden;min-width:var(--ptc-image-min);max-width:var(--ptc-image-max);-webkit-user-select:none;user-select:none}.pc_image.pc_image--xsm{--ptc-image-min: 24px;--ptc-image-max: 80px}.pc_image.pc_image--sm{--ptc-image-min: 100px;--ptc-image-max: 100px}.pc_image.pc_image--md{--ptc-image-min: 150px;--ptc-image-max: 270px}.pc_image.pc_image--lg{--ptc-image-min: 280px;--ptc-image-max: 511px}.pc_image.pc_image--1\\:1{--ptc-image-aspect-x: 1;--ptc-image-aspect-y: 1}.pc_image.pc_image--4\\:3{--ptc-image-aspect-x: 4;--ptc-image-aspect-y: 3}.pc_image.pc_image--3\\:2{--ptc-image-aspect-x: 3;--ptc-image-aspect-y: 2}.pc_image.pc_image--16\\:9{--ptc-image-aspect-x: 16;--ptc-image-aspect-y: 9}.pc_image.pc_image--2\\:1{--ptc-image-aspect-x: 2;--ptc-image-aspect-y: 1}.pc_image.pc_image--vertical{aspect-ratio:var(--ptc-image-aspect-y) / var(--ptc-image-aspect-x)}.pc_image.pc_image--horizontal{aspect-ratio:var(--ptc-image-aspect-x) / var(--ptc-image-aspect-y)}.pc_image .pc_image__img{height:100%;width:100%}.pc_image .pc_image__loading{position:absolute;width:100%;height:100%;--ptu-text-opacity:1;color:rgba(var(--pt-gray-0),var(--ptu-text-opacity))}.pc_image .pc_image__hover_actions{position:absolute;top:var(--pt-dimension-0, 0px);display:none;width:100%;height:100%;align-items:center;justify-content:center;background-color:var(--pt-alpha-gray-4);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_image .pc_image__hover_actions .pc_button{--ptu-shadow:0 0 var(--ptu-shadow-color, rgb(0 0 0 / 0)) !important;box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)!important}.pc_image.pc_image--loaded:hover .pc_image__hover_actions,.pc_image.pc_image--loaded.pc_image--hovered .pc_image__hover_actions{display:flex}.pc_image.pc_image--fallback-content:not(.pc_image--1\\:1):not(.pc_image--4\\:3):not(.pc_image--3\\:2):not(.pc_image--16\\:9):not(.pc_image--2\\:1){aspect-ratio:1/1}.pc_image .pc_image__fallback{position:absolute;top:var(--pt-dimension-0, 0px);width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-gray-fg),var(--ptu-text-opacity))}.pc_image .pc_image__fallback .pc_image__fallback__icon{border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_image .pc_image__fallback .pc_image__fallback__text{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}\n";
-export const addImageCss = () => addCssToHead(`${prefix}s-image`, cssText);
-export const imageCss = cssText;
+const imageId = `${prefix}s-image`;
+const addImageCss = () => addCssToHead(imageId, cssText);
+const removeImageCss = () => removeCssFromHead(imageId);
+const imageCss = cssText;
+export { imageId, addImageCss, removeImageCss, imageCss };

package/dist/image.umd.cjs

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_image{position:relative;display:inline-flex;overflow:hidden;min-width:var(--ptc-image-min);max-width:var(--ptc-image-max);-webkit-user-select:none;user-select:none}.pc_image.pc_image--xsm{--ptc-image-min: 24px;--ptc-image-max: 80px}.pc_image.pc_image--sm{--ptc-image-min: 100px;--ptc-image-max: 100px}.pc_image.pc_image--md{--ptc-image-min: 150px;--ptc-image-max: 270px}.pc_image.pc_image--lg{--ptc-image-min: 280px;--ptc-image-max: 511px}.pc_image.pc_image--1\\:1{--ptc-image-aspect-x: 1;--ptc-image-aspect-y: 1}.pc_image.pc_image--4\\:3{--ptc-image-aspect-x: 4;--ptc-image-aspect-y: 3}.pc_image.pc_image--3\\:2{--ptc-image-aspect-x: 3;--ptc-image-aspect-y: 2}.pc_image.pc_image--16\\:9{--ptc-image-aspect-x: 16;--ptc-image-aspect-y: 9}.pc_image.pc_image--2\\:1{--ptc-image-aspect-x: 2;--ptc-image-aspect-y: 1}.pc_image.pc_image--vertical{aspect-ratio:var(--ptc-image-aspect-y) / var(--ptc-image-aspect-x)}.pc_image.pc_image--horizontal{aspect-ratio:var(--ptc-image-aspect-x) / var(--ptc-image-aspect-y)}.pc_image .pc_image__img{height:100%;width:100%}.pc_image .pc_image__loading{position:absolute;width:100%;height:100%;--ptu-text-opacity:1;color:rgba(var(--pt-gray-0),var(--ptu-text-opacity))}.pc_image .pc_image__hover_actions{position:absolute;top:var(--pt-dimension-0, 0px);display:none;width:100%;height:100%;align-items:center;justify-content:center;background-color:var(--pt-alpha-gray-4);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_image .pc_image__hover_actions .pc_button{--ptu-shadow:0 0 var(--ptu-shadow-color, rgb(0 0 0 / 0)) !important;box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)!important}.pc_image.pc_image--loaded:hover .pc_image__hover_actions,.pc_image.pc_image--loaded.pc_image--hovered .pc_image__hover_actions{display:flex}.pc_image.pc_image--fallback-content:not(.pc_image--1\\:1):not(.pc_image--4\\:3):not(.pc_image--3\\:2):not(.pc_image--16\\:9):not(.pc_image--2\\:1){aspect-ratio:1/1}.pc_image .pc_image__fallback{position:absolute;top:var(--pt-dimension-0, 0px);width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-gray-fg),var(--ptu-text-opacity))}.pc_image .pc_image__fallback .pc_image__fallback__icon{border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_image .pc_image__fallback .pc_image__fallback__text{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}\n";
-const addImageCss = () => addCssToHead(`${prefix}s-image`, cssText);
+const imageId = `${prefix}s-image`;
+const addImageCss = () => addCssToHead(imageId, cssText);
+const removeImageCss = () => removeCssFromHead(imageId);
+const imageCss = cssText;
+exports.imageId = imageId;
 exports.addImageCss = addImageCss;
-exports.imageCss = cssText;
+exports.removeImageCss = removeImageCss;
+exports.imageCss = imageCss;

package/dist/indent_level.d.ts

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const indentLevelId: string;
 declare const addIndentLevelCss: () => void;
+declare const removeIndentLevelCss: () => void;
 declare const indentLevelCss: string;
-export { addIndentLevelCss, indentLevelCss };
+export { indentLevelId, addIndentLevelCss, removeIndentLevelCss, indentLevelCss };

package/dist/indent_level.js

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_indent_level{height:100%;display:flex;outline:0}.pc_indent_level .pc_indent_level__item{height:100%;display:flex;flex-direction:column;align-items:center}.pc_indent_level .pc_indent_level__item.pc_indent_level--expand .pc_indent_level__item__branch{cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-gray-5),var(--ptu-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_indent_level .pc_indent_level__item.pc_indent_level--expand>*:not(.pc_badge){flex:1 1 0%}.pc_indent_level:hover .pc_indent_level__item.pc_indent_level--expand .pc_indent_level__item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-6),var(--ptu-text-opacity))}.pc_indent_level--2xsm,.pc_indent_level--xsm{gap:var(--pt-dimension-200, 4px)}.pc_indent_level--xsm .pc_indent_level__item{width:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);max-width:var(--pt-dimension-1000, 20px)}.pc_indent_level--2xsm .pc_indent_level__item{width:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px)}.pc_indent_level--sm{gap:var(--pt-dimension-300, 6px)}.pc_indent_level--sm .pc_indent_level__item{width:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);max-width:var(--pt-dimension-1200, 24px)}.pc_indent_level:not(.pc_indent_level--expanded) .pc_indent_level__item:last-child,.pc_indent_level:not(.pc_indent_level--self-divider) .pc_indent_level__item:last-child,.pc_indent_level.pc_indent_level--loading .pc_indent_level__item:last-child{justify-content:center}[style*=\"direction: ltr\"] .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch,:dir(ltr) .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch,[dir=ltr] .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch,.ltr .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:90deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: rtl\"] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,:dir(rtl) .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,[dir=rtl] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,.rtl .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: rtl\"] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,:dir(rtl) .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,[dir=rtl] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,.rtl .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-90deg;--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}\n";
-export const addIndentLevelCss = () => addCssToHead(`${prefix}s-indent_level`, cssText);
-export const indentLevelCss = cssText;
+const indentLevelId = `${prefix}s-indent_level`;
+const addIndentLevelCss = () => addCssToHead(indentLevelId, cssText);
+const removeIndentLevelCss = () => removeCssFromHead(indentLevelId);
+const indentLevelCss = cssText;
+export { indentLevelId, addIndentLevelCss, removeIndentLevelCss, indentLevelCss };

package/dist/indent_level.umd.cjs

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_indent_level{height:100%;display:flex;outline:0}.pc_indent_level .pc_indent_level__item{height:100%;display:flex;flex-direction:column;align-items:center}.pc_indent_level .pc_indent_level__item.pc_indent_level--expand .pc_indent_level__item__branch{cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-gray-5),var(--ptu-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_indent_level .pc_indent_level__item.pc_indent_level--expand>*:not(.pc_badge){flex:1 1 0%}.pc_indent_level:hover .pc_indent_level__item.pc_indent_level--expand .pc_indent_level__item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-6),var(--ptu-text-opacity))}.pc_indent_level--2xsm,.pc_indent_level--xsm{gap:var(--pt-dimension-200, 4px)}.pc_indent_level--xsm .pc_indent_level__item{width:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);max-width:var(--pt-dimension-1000, 20px)}.pc_indent_level--2xsm .pc_indent_level__item{width:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px)}.pc_indent_level--sm{gap:var(--pt-dimension-300, 6px)}.pc_indent_level--sm .pc_indent_level__item{width:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);max-width:var(--pt-dimension-1200, 24px)}.pc_indent_level:not(.pc_indent_level--expanded) .pc_indent_level__item:last-child,.pc_indent_level:not(.pc_indent_level--self-divider) .pc_indent_level__item:last-child,.pc_indent_level.pc_indent_level--loading .pc_indent_level__item:last-child{justify-content:center}[style*=\"direction: ltr\"] .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch,:dir(ltr) .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch,[dir=ltr] .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch,.ltr .pc_indent_level.pc_indent_level--expanded:not(.pc_indent_level--branch-slot):not(.pc_indent_level--no-rotate-branch) .pc_indent_level__item:last-child .pc_indent_level__item__branch{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:90deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: rtl\"] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,:dir(rtl) .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,[dir=rtl] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,.rtl .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr):not(.pc_indent_level--expanded):not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch{--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}[style*=\"direction: rtl\"] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,:dir(rtl) .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,[dir=rtl] .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch,.rtl .pc_indent_level:not(.pc_indent_level--no-rotate-branch):not(.ltr).pc_indent_level--expanded:not(.pc_indent_level--branch-slot) .pc_indent_level__item:last-child .pc_indent_level__item__branch{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-90deg;--ptu-scale-x:-1;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}\n";
-const addIndentLevelCss = () => addCssToHead(`${prefix}s-indent_level`, cssText);
+const indentLevelId = `${prefix}s-indent_level`;
+const addIndentLevelCss = () => addCssToHead(indentLevelId, cssText);
+const removeIndentLevelCss = () => removeCssFromHead(indentLevelId);
+const indentLevelCss = cssText;
+exports.indentLevelId = indentLevelId;
 exports.addIndentLevelCss = addIndentLevelCss;
-exports.indentLevelCss = cssText;
+exports.removeIndentLevelCss = removeIndentLevelCss;
+exports.indentLevelCss = indentLevelCss;