@public-ui/themes 1.4.0 → 1.4.1-rc.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.cjs +4 -4
- package/dist/index.mjs +4 -4
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -7,7 +7,7 @@ const BAMF = schema.KoliBri.createTheme("bamf", {
|
|
|
7
7
|
});
|
|
8
8
|
|
|
9
9
|
const BMF = schema.KoliBri.createTheme("bmf", {
|
|
10
|
-
GLOBAL: ":host {--color-midnight: #004b76;--color-ocean: #0077b6;--color-sky: #99c9e2;--color-ice: #cce4f0;--color-crimson: #780f2d;--color-red: #c0003c;--color-pink: #f2ccd8;--color-olive: #004d38;--color-green: #005c45;--color-jungle: #00854a;--color-lime: #c1ca31;--color-mint: #ccdeda;--color-fire: #7a2e1f;--color-orange: #c44931;--color-coral: #f5dcd7;--color-bronze: #c44931;--color-yellow: #c44931;--color-ivory: #c44931;--color-purple: #c44931;--color-lavender: #c44931;--color-black: #202020;--color-metal: #454d4f;--color-grey: #576164;--color-granite: #bec5c9;--color-silver: #e5e8e9;--color-smoke: #f2f3f4;--color-white: #ffffff;--font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;--font-size: 16px;--spacing: 0.25em;}* {box-sizing: border-box;font-family: var(--font-family);}h1,h2,h3,h4,h5,h6 {margin: 0;font-family: var(--font-family);font-size: var(--font-size);}a,button {align-items: center;background-color: transparent;border: 0;cursor: pointer;display: inline-flex;gap: 0.25rem;justify-items: center;}input,option,select,summary,textarea {display: inline-block;}a,button,input,option,select,summary,textarea {-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;letter-spacing: inherit;word-break: break-word;}*[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,summary:focus,textarea:focus {cursor: pointer;outline-color: var(--color-ocean);outline-offset: 2px;outline-style: solid;outline-width: 3px;transition: outline-offset 0.2s linear;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}kol-heading-wc {font-weight: 700;}
|
|
10
|
+
GLOBAL: "/* Design Tokens */:host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: 0.25rem;}:host {--color-midnight: #004b76;--color-ocean: #0077b6;--color-sky: #99c9e2;--color-ice: #cce4f0;--color-crimson: #780f2d;--color-red: #c0003c;--color-pink: #f2ccd8;--color-olive: #004d38;--color-green: #005c45;--color-jungle: #00854a;--color-lime: #c1ca31;--color-mint: #ccdeda;--color-fire: #7a2e1f;--color-orange: #c44931;--color-coral: #f5dcd7;--color-bronze: #c44931;--color-yellow: #c44931;--color-ivory: #c44931;--color-purple: #c44931;--color-lavender: #c44931;--color-black: #202020;--color-metal: #454d4f;--color-grey: #576164;--color-granite: #bec5c9;--color-silver: #e5e8e9;--color-smoke: #f2f3f4;--color-white: #ffffff;--font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;--font-size: 16px;--spacing: 0.25em;}* {box-sizing: border-box;font-family: var(--font-family);}h1,h2,h3,h4,h5,h6 {margin: 0;font-family: var(--font-family);font-size: var(--font-size);}a,button {align-items: center;background-color: transparent;border: 0;cursor: pointer;display: inline-flex;gap: 0.25rem;justify-items: center;}input,option,select,summary,textarea {display: inline-block;}a,button,input,option,select,summary,textarea {-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;letter-spacing: inherit;word-break: break-word;}*[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,summary:focus,textarea:focus {cursor: pointer;outline-color: var(--color-ocean);outline-offset: 2px;outline-style: solid;outline-width: 3px;transition: outline-offset 0.2s linear;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}kol-heading-wc {font-weight: 700;}",
|
|
11
11
|
"KOL-BUTTON": ":host {display: inline-block;}button {background-color: transparent;border: 0;cursor: pointer;border-radius: 1.5em;min-width: 44px;min-height: 44px;padding: 0;text-decoration: none !important;}button > kol-span-wc {display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}button:disabled > kol-span-wc {cursor: not-allowed;opacity: 0.5;}button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);} /*-----------*/button.primary:active > kol-span-wc,button.primary:hover > kol-span-wc,button.secondary:active > kol-span-wc,button.secondary:hover > kol-span-wc,button.normal:active > kol-span-wc,button.normal:hover > kol-span-wc,button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc,button.ghost:active > kol-span-wc,button.ghost:hover > kol-span-wc {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc {background-color: var(--color-crimson);border-color: var(--color-crimson);}button:disabled:hover > kol-span-wc,button:focus:hover > kol-span-wc {box-shadow: none;}button.primary:active > kol-span-wc,button.secondary:active > kol-span-wc,button.normal:active > kol-span-wc,button.danger:active > kol-span-wc,button.ghost:active > kol-span-wc {border-color: var(--color-white);box-shadow: none;outline: none;}:host button > kol-span-wc > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}button.icon-only > kol-span-wc {padding: 8px;}button.icon-only > kol-span-wc > span > span {display: none;}button.icon-only > kol-span-wc kol-icon {display: inline-block;width: 1.5em;height: 1.5em;}button.loading > kol-span-wc kol-icon {animation: spin 5s infinite linear;} /** small ghost button */button.small.ghost > kol-span-wc {border: none;background-color: transparent;box-shadow: none;}button.small.ghost > kol-span-wc > span {border-radius: 1.5em;border-style: solid;border-width: 2px;border-color: var(--color-white);background-color: var(--color-white);}button.small.ghost:active > kol-span-wc > span,button.small.ghost:hover > kol-span-wc > span,button.small.ghost.transparent:active > kol-span-wc > span,button.small.ghost.transparent:hover > kol-span-wc > span {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);} /** button with transparent background */button.transparent > kol-span-wc > span,button.small.ghost.transparent > kol-span-wc > span,button.transparent > kol-span-wc {background-color: transparent;border-color: transparent;}",
|
|
12
12
|
"KOL-INPUT-TEXT": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--color-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -44px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
13
13
|
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -44px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
@@ -22,16 +22,16 @@ const BMF = schema.KoliBri.createTheme("bmf", {
|
|
|
22
22
|
"KOL-INDENTED-TEXT": ":host > div {background: var(--color-white);border-left: none;box-shadow: -4px 0px 0px var(--color-ocean);padding: 0.25em 0.5em;width: 100%;}",
|
|
23
23
|
"KOL-LINK": "a,button {background-color: transparent;border: 0;cursor: pointer;display: inline-block;}kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--color-midnight);font-style: normal;font-weight: 400;display: inline-flex;line-height: 1.5em;text-decoration-line: underline;border-radius: 0.25rem;}a:hover,button:hover {text-decoration-thickness: 0.25em;}a:visited,button:visited {color: var(--visited);}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
24
24
|
"KOL-BREADCRUMB": 'nav {width: 100%;}ul {margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;align-items: center;}kol-link {display: inline;}:host kol-icon[exportparts*="separator"] {padding: 0 0.5rem;}:host kol-icon::part(icon separator) {font-weight: 900;font-size: 0.875rem;}:host kol-icon::part(icon separator)::before {color: black;content: "\\f054";font-family: "Font Awesome 6 Free";}:host li > kol-link > kol-link-wc > a {color: red !important;}',
|
|
25
|
-
"KOL-DETAILS": ":host details > summary {border-radius: 2px;display: flex;gap: 0rem;}:host details > summary > span:not(:first-of-type) {padding-left: 0.25rem;}:host details > kol-indented-text {margin: 0.
|
|
25
|
+
"KOL-DETAILS": ":host details > summary {border-radius: 2px;display: flex;gap: 0rem;}:host details > summary > span:not(:first-of-type) {padding-left: 0.25rem;}:host details > kol-indented-text {margin: 0.25rem 0 0 0.7rem;}",
|
|
26
26
|
"KOL-SPIN": ".spin {display: inline-block;height: 1rem;position: relative;width: 3rem;}.spin span {animation-timing-function: cubic-bezier(0, 1, 1, 0);border: 0.1rem solid rgb(255, 255, 255);border-radius: 50%;height: 0.8rem;width: 0.8rem;top: 0.1rem;position: absolute;}.spin span:nth-child(1) {background-color: #fc0;z-index: 0;animation: 2s ease 0s infinite normal none running spin1;left: 0.1rem;}.spin span:nth-child(2) {background-color: #f00;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 0.1rem;}.spin span:nth-child(3) {background-color: #000;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 1.1rem;}.spin span:nth-child(4) {background-color: #666;z-index: 0;animation: 2s ease 0s infinite normal none running spin3;left: 2.1rem;}@keyframes spin1 {0% {transform: scale(0);}100% {transform: scale(1);}}@keyframes spin2 {0% {transform: translate(0px, 0px);}100% {transform: translate(1rem, 0px);}}@keyframes spin3 {0% {transform: scale(1);}100% {transform: scale(0);}}",
|
|
27
27
|
"KOL-PROGRESS": ":host progress,:host span {display: block;height: 0px;overflow: hidden;width: 0px;}:host svg line:first-child,:host svg circle:first-child {fill: transparent;stroke: var(--color-ice);}:host svg line:last-child,:host svg circle:last-child {fill: transparent;stroke: var(--color-midnight);}",
|
|
28
28
|
"KOL-SELECT": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -33px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
29
29
|
"KOL-INPUT-COLOR": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -33px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
30
|
-
"KOL-ACCORDION": ':host > div {font-family: var(--font-family);padding: 0 0.5rem 0 0;}:host > div > kol-heading-wc {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host > div > kol-heading-wc button {cursor: pointer;width: 100%;margin: 0;display: flex;gap: 0.5em;border: 0;align-items: center;overflow: hidden;font-size: inherit;line-height: 1.75em;background-color: transparent;padding: 0;}:host > div > kol-heading-wc button kol-icon {text-align: center;width: 1em;margin-left: 0.5em;}:host > div[part*="open"] > kol-heading-wc button {padding-bottom: 0;}:host > div > kol-heading-wc button kol-icon::part(icon) {font-weight: 900;color: var(--color-midnight);}:host > div > kol-heading-wc button kol-icon::part(close)::before {font-family: "Font Awesome 6 Free";content: "\\f077";}:host > div > kol-heading-wc button kol-icon::part(open)::before {font-family: "Font Awesome 6 Free";content: "\\f078";}:host > div {width: 100%;height: 100%;display: grid;}:host > div div[part="header"],:host > div[part*="open"] div[part="content"] {margin: 0;padding-left:
|
|
30
|
+
"KOL-ACCORDION": ':host > div {font-family: var(--font-family);padding: 0 0.5rem 0 0;}:host > div > kol-heading-wc {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host > div > kol-heading-wc button {cursor: pointer;width: 100%;margin: 0;display: flex;gap: 0.5em;border: 0;align-items: center;overflow: hidden;font-size: inherit;line-height: 1.75em;background-color: transparent;padding: 0;}:host > div > kol-heading-wc button kol-icon {text-align: center;width: 1em;margin-left: 0.5em;}:host > div[part*="open"] > kol-heading-wc button {padding-bottom: 0;}:host > div > kol-heading-wc button kol-icon::part(icon) {font-weight: 900;color: var(--color-midnight);}:host > div > kol-heading-wc button kol-icon::part(close)::before {font-family: "Font Awesome 6 Free";content: "\\f077";}:host > div > kol-heading-wc button kol-icon::part(open)::before {font-family: "Font Awesome 6 Free";content: "\\f078";}:host > div {width: 100%;height: 100%;display: grid;}:host > div div[part="header"],:host > div[part*="open"] div[part="content"] {margin: 0;padding-left: 2.5em;}button {font-weight: inherit;font-size: inherit;line-height: inherit;}:host > div {background: var(--color-white);}:host > div[part*="open"] {padding-bottom: 1em;}',
|
|
31
31
|
"KOL-TABLE": ':host * {hyphens: var(--kolibri-hyphens);font-family: var(--kolibri-font-family);line-height: var(--kolibri-line-height);word-break: break-word;}:host > div {overflow-x: auto;overflow-y: hidden;}caption {padding: 0.5em;}th {font-weight: normal;color: var(--color-midnight);}:host table thead tr:first-child th,:host table thead tr:first-child td {border-width: 0;border-top-width: 2px;border-style: solid;border-color: var(--color-ice);}table {width: 100%;border-spacing: 0;}table,:host table thead tr:last-child th,:host table thead tr:last-child td {border-width: 0;border-bottom-width: 2px;border-style: solid;border-color: var(--color-ice);}th {background-color: var(--color-white);}th div {width: 100%;display: flex;gap: 0.5em;grid-template-columns: 1fr auto;align-items: center;}th div.center {justify-content: center;}th div.right {justify-content: end;}tr:nth-child(even) {background-color: #f2f2f2;}th,td {padding: 0.5em;}td.center > div {display: flex;justify-content: center;}td.right > div {display: flex;justify-content: end;}th[aria-sort="ascending"],th[aria-sort="descending"] {font-weight: 700;}:host > div:last-child {padding: 0.5em;}:host > div:last-child,:host > div:last-child > div:last-child {display: grid;align-items: center;justify-items: center;gap: 1em;}@media (min-width: 1024px) {:host > div:last-child,:host > div:last-child > div:last-child {grid-auto-flow: column;}:host > div:last-child kol-pagination{display: flex;gap: 1rem}}',
|
|
32
32
|
"KOL-NAV": '* {margin: 0;padding: 0;}nav {font-family: var(--font-family);font-size: var(--font-size);background-color: var(--color-smoke);}ul {list-style: none;}a {background-color: var(--color-white);text-decoration: none;color: var(--color-midnight);width: 100%;display: flex;align-items: center;font-style: normal;padding: 0.75rem 0.5rem 0.75rem 0;border-left-color: var(--color-white);border-left-style: solid;border-left-width: 0.5rem;line-height: 1.5rem;min-height: 44px;min-width: 44px;transition-duration: 0.5s;transition-property: background-color, color, border-color;letter-spacing: 0.175px;}a:hover {border-left-color: var(--color-ocean);font-weight: 700;letter-spacing: unset;}.selected a,[exportparts*="selected"] a {background-color: var(--color-ice);border-left-color: var(--color-midnight);color: var(--color-midnight);font-weight: 700;letter-spacing: unset;}a:hover,.selected a:hover,[exportparts*="selected"] a:hover {background-color: var(--color-ocean);color: var(--color-white);}a.icon-only > kol-span-wc {justify-items: center;}a.icon-only > kol-span-wc kol-icon {display: inline-block;text-align: center;width: 44px;flex-shrink: 0;}kol-icon ~ span {padding-left: 0.5rem;}.hidden {display: none;}:host > div {width: 100%;}:host > div > div:last-child {margin-top: 0.5em;width: 100%;text-align: center;} /* horizontal */ul.flex {display: flex;}li > div > div.absolute {position: absolute;}.horizontal a {display: block;}:host kol-span-wc {margin: 0 0.25rem;justify-items: baseline;}',
|
|
33
33
|
"KOL-CARD": "/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */:host > div {display: grid;width: 100%;height: 100%;background-color: white;grid-template-rows: min-content 2fr min-content;box-shadow: 0 0 0.25rem var(--color-grey);border-radius: 0.25rem;}:host kol-heading-wc {display: inline-flex;font-style: normal;font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host div.header {padding: 1rem 1rem 0.5rem 1rem;}:host div.content {padding: 0.5rem 1rem 1rem;overflow: hidden;}:host div.footer {padding: 0.5rem 1rem;}:host > div > div.content + div.footer {border-top: 2px solid var(--color-ice);}",
|
|
34
|
-
"KOL-INPUT-CHECKBOX": '/* INPUT
|
|
34
|
+
"KOL-INPUT-CHECKBOX": '/* INPUT */:host kol-input {display: grid;align-items: center;justify-items: left;width: 100%;min-height: 44px;}:host kol-input.checkbox {grid-template-columns: 2rem auto;}:host kol-input.switch {grid-template-columns: 4rem auto;}:host kol-input > div.input {display: inline-flex;order: 2;}:host kol-input > div.input input {margin: 0px;}:host kol-input > label {cursor: pointer;order: 3;}:host kol-input > kol-alert.error {order: 1;padding-top: 0.25em;margin-bottom: 0.4em;grid-column: span 2 / auto;}:host kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}:host kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}:host kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}:host input {cursor: pointer;order: 1;width: 100%;border-color: var(--color-grey);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 1rem;}:host input:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}:host input:focus:hover {box-shadow: none;}:host input:active {box-shadow: none;}:host kol-alert {display: block;width: 100%;} /* CHECKBOX */:host kol-input label span {margin-top: 0.125rem;}:host .required label > span::after {content: "*";padding-left: 0.125em;}:host kol-input input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}:host kol-input input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}:host kol-input input[type="checkbox"]:before {content: "";cursor: pointer;}:host kol-input input[type="checkbox"]:checked {background-color: var(--color-midnight);border-color: var(--color-midnight);}:host kol-input.checkbox input[type="checkbox"] {border-radius: 0.25em;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:before {border-radius: 1.5em;background-color: transparent;display: block;height: calc(6 * var(--spacing));position: relative;width: calc(6 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:checked:before {border-right-width: 3px;border-bottom-width: 3px;left: calc(1.5 * var(--spacing) - 2px);top: calc(2.85 * var(--spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(3 * var(--spacing));width: calc(1.5 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1; /* background-color: white; */}:host kol-input.checkbox input[type="checkbox"]:indeterminate:before {background-color: var(--color-white);height: 0.125rem;top: 0.6rem;left: 0.1rem;width: calc(4 * var(--spacing));transform: inherit;}:host kol-input.checkbox input[type="checkbox"]:checked:indeterminate:before {border-width: 0px 1px 1px 0px;}:host kol-input.switch input[type="checkbox"] {min-width: 3.5em;width: 3.5em;background-color: var(--color-grey);border-width: 0;height: 1.5em;border-radius: 1.25em;display: inline-block;position: relative;}:host kol-input.switch input[type="checkbox"]:before {-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.25em;height: 1.25em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);border-radius: 1.25em;background-color: white;position: absolute;}:host kol-input.switch input[type="checkbox"]:checked {background-color: var(--color-midnight);}:host kol-input.switch input[type="checkbox"]:checked:before {-webkit-transform: translateX(2em);-moz-transform: translateX(2em);-ms-transform: translateX(2em);transform: translateX(2em);--tw-bg-opacity: 1;}:host kol-input.switch input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1;}:host kol-input.switch input[type="checkbox"]:indeterminate:before {-webkit-transform: translateX(1em);-moz-transform: translateX(1em);-ms-transform: translateX(1em);transform: translateX(1em);}:host .disabled {opacity: 0.33;}',
|
|
35
35
|
"KOL-INPUT-RADIO": '/* INPUT */label {cursor: pointer;display: grid;line-height: 20px;gap: 8px;width: 100%;}input {cursor: pointer;width: 100%;border-color: var(--color-grey);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}input:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}input:focus:hover {box-shadow: none;}input:hover {border-color: var(--color-midnight);}kol-alert {display: block;width: 100%;margin-bottom: 0.4em;}.required legend > span::after {content: "*";padding-left: 0.125em;} /* RADIO */:host fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}:host fieldset div {cursor: pointer;display: flex;flex-direction: row;align-items: center;position: relative;min-height: 44px;margin: 0;}:host fieldset div label {cursor: pointer;display: flex;padding-left: 0.25em;width: 100%;}:host fieldset div label span {margin-top: 0.125em;}:host fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}:host fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * var(--spacing) - 2px);top: calc(1.5 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * var(--spacing));width: calc(3 * var(--spacing));}:host fieldset div input[type="radio"]:checked:before {background-color: var(--color-midnight);}:host fieldset div input[type="radio"]:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}:host fieldset #error {margin: 0.4em 0;order: 1;}:host fieldset legend {order: 2;display: contents;}:host fieldset kol-input {order: 3;}:host fieldset.error {padding-left: 1em;border-left: 3px solid var(--color-red);}:host fieldset kol-alert#error {color: var(--color-red);font-weight: 700;}:host fieldset.error input:focus,:host fieldset.error select:focus,:host fieldset.error textarea:focus {outline-color: var(--color-red) !important;}:host fieldset.error kol-alert.error {margin-left: -0.25em;color: var(--color-red);font-weight: 700;}.disabled {opacity: 0.33;}:host fieldset.horizontal {display: flex;flex-wrap: wrap;gap: 0.5rem 1rem;}:host fieldset.horizontal legend {display: inline-block;margin-bottom: 0.25em;}',
|
|
36
36
|
"KOL-LINK-GROUP": "ul {list-style: none;margin: 0px;padding: 0px;}nav.horizontal ul {display: flex;flex-wrap: wrap;}nav.horizontal li {margin-left: 1.25rem;margin-right: 0.25rem;}nav.horizontal li:first-child {margin-left: 0;}nav.horizontal li:last-child {margin-right: 0;}nav.vertical li {margin-left: 1.75rem;margin-right: 0.5rem;}li.list-none {list-style-type: none !important;margin-left: 0;}",
|
|
37
37
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
package/dist/index.mjs
CHANGED
|
@@ -5,7 +5,7 @@ const BAMF = KoliBri.createTheme("bamf", {
|
|
|
5
5
|
});
|
|
6
6
|
|
|
7
7
|
const BMF = KoliBri.createTheme("bmf", {
|
|
8
|
-
GLOBAL: ":host {--color-midnight: #004b76;--color-ocean: #0077b6;--color-sky: #99c9e2;--color-ice: #cce4f0;--color-crimson: #780f2d;--color-red: #c0003c;--color-pink: #f2ccd8;--color-olive: #004d38;--color-green: #005c45;--color-jungle: #00854a;--color-lime: #c1ca31;--color-mint: #ccdeda;--color-fire: #7a2e1f;--color-orange: #c44931;--color-coral: #f5dcd7;--color-bronze: #c44931;--color-yellow: #c44931;--color-ivory: #c44931;--color-purple: #c44931;--color-lavender: #c44931;--color-black: #202020;--color-metal: #454d4f;--color-grey: #576164;--color-granite: #bec5c9;--color-silver: #e5e8e9;--color-smoke: #f2f3f4;--color-white: #ffffff;--font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;--font-size: 16px;--spacing: 0.25em;}* {box-sizing: border-box;font-family: var(--font-family);}h1,h2,h3,h4,h5,h6 {margin: 0;font-family: var(--font-family);font-size: var(--font-size);}a,button {align-items: center;background-color: transparent;border: 0;cursor: pointer;display: inline-flex;gap: 0.25rem;justify-items: center;}input,option,select,summary,textarea {display: inline-block;}a,button,input,option,select,summary,textarea {-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;letter-spacing: inherit;word-break: break-word;}*[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,summary:focus,textarea:focus {cursor: pointer;outline-color: var(--color-ocean);outline-offset: 2px;outline-style: solid;outline-width: 3px;transition: outline-offset 0.2s linear;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}kol-heading-wc {font-weight: 700;}
|
|
8
|
+
GLOBAL: "/* Design Tokens */:host {--kolibri-border-color: unset;--kolibri-border-radius: unset;--kolibri-border-width: unset;--kolibri-color-error: unset;--kolibri-color-info: unset;--kolibri-color-success: unset;--kolibri-color-warning: unset;--kolibri-color-primary: unset;--kolibri-color-secondary: unset;--kolibri-color-normal: unset;--kolibri-color-danger: unset;--kolibri-color-ghost: unset;--kolibri-color-disabled: unset;--kolibri-color-text: unset;--kolibri-color-visited: unset;--kolibri-font-family: unset;--kolibri-font-size: unset;--kolibri-spacing: 0.25rem;}:host {--color-midnight: #004b76;--color-ocean: #0077b6;--color-sky: #99c9e2;--color-ice: #cce4f0;--color-crimson: #780f2d;--color-red: #c0003c;--color-pink: #f2ccd8;--color-olive: #004d38;--color-green: #005c45;--color-jungle: #00854a;--color-lime: #c1ca31;--color-mint: #ccdeda;--color-fire: #7a2e1f;--color-orange: #c44931;--color-coral: #f5dcd7;--color-bronze: #c44931;--color-yellow: #c44931;--color-ivory: #c44931;--color-purple: #c44931;--color-lavender: #c44931;--color-black: #202020;--color-metal: #454d4f;--color-grey: #576164;--color-granite: #bec5c9;--color-silver: #e5e8e9;--color-smoke: #f2f3f4;--color-white: #ffffff;--font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;--font-size: 16px;--spacing: 0.25em;}* {box-sizing: border-box;font-family: var(--font-family);}h1,h2,h3,h4,h5,h6 {margin: 0;font-family: var(--font-family);font-size: var(--font-size);}a,button {align-items: center;background-color: transparent;border: 0;cursor: pointer;display: inline-flex;gap: 0.25rem;justify-items: center;}input,option,select,summary,textarea {display: inline-block;}a,button,input,option,select,summary,textarea {-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;letter-spacing: inherit;word-break: break-word;}*[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,summary:focus,textarea:focus {cursor: pointer;outline-color: var(--color-ocean);outline-offset: 2px;outline-style: solid;outline-width: 3px;transition: outline-offset 0.2s linear;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}kol-heading-wc {font-weight: 700;}",
|
|
9
9
|
"KOL-BUTTON": ":host {display: inline-block;}button {background-color: transparent;border: 0;cursor: pointer;border-radius: 1.5em;min-width: 44px;min-height: 44px;padding: 0;text-decoration: none !important;}button > kol-span-wc {display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}button:disabled > kol-span-wc {cursor: not-allowed;opacity: 0.5;}button.primary > kol-span-wc,button.primary:disabled:hover > kol-span-wc {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}button.secondary > kol-span-wc,button.secondary:disabled:hover > kol-span-wc,button.normal > kol-span-wc,button.normal:disabled:hover > kol-span-wc {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}button.danger > kol-span-wc,button.danger:disabled:hover > kol-span-wc {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}button.ghost > kol-span-wc,button.ghost:disabled:hover > kol-span-wc {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);} /*-----------*/button.primary:active > kol-span-wc,button.primary:hover > kol-span-wc,button.secondary:active > kol-span-wc,button.secondary:hover > kol-span-wc,button.normal:active > kol-span-wc,button.normal:hover > kol-span-wc,button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc,button.ghost:active > kol-span-wc,button.ghost:hover > kol-span-wc {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}button.danger:active > kol-span-wc,button.danger:hover > kol-span-wc {background-color: var(--color-crimson);border-color: var(--color-crimson);}button:disabled:hover > kol-span-wc,button:focus:hover > kol-span-wc {box-shadow: none;}button.primary:active > kol-span-wc,button.secondary:active > kol-span-wc,button.normal:active > kol-span-wc,button.danger:active > kol-span-wc,button.ghost:active > kol-span-wc {border-color: var(--color-white);box-shadow: none;outline: none;}:host button > kol-span-wc > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}button.icon-only > kol-span-wc {padding: 8px;}button.icon-only > kol-span-wc > span > span {display: none;}button.icon-only > kol-span-wc kol-icon {display: inline-block;width: 1.5em;height: 1.5em;}button.loading > kol-span-wc kol-icon {animation: spin 5s infinite linear;} /** small ghost button */button.small.ghost > kol-span-wc {border: none;background-color: transparent;box-shadow: none;}button.small.ghost > kol-span-wc > span {border-radius: 1.5em;border-style: solid;border-width: 2px;border-color: var(--color-white);background-color: var(--color-white);}button.small.ghost:active > kol-span-wc > span,button.small.ghost:hover > kol-span-wc > span,button.small.ghost.transparent:active > kol-span-wc > span,button.small.ghost.transparent:hover > kol-span-wc > span {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);} /** button with transparent background */button.transparent > kol-span-wc > span,button.small.ghost.transparent > kol-span-wc > span,button.transparent > kol-span-wc {background-color: transparent;border-color: transparent;}",
|
|
10
10
|
"KOL-INPUT-TEXT": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--color-grey);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -44px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
11
11
|
"KOL-INPUT-PASSWORD": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -44px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
@@ -20,16 +20,16 @@ const BMF = KoliBri.createTheme("bmf", {
|
|
|
20
20
|
"KOL-INDENTED-TEXT": ":host > div {background: var(--color-white);border-left: none;box-shadow: -4px 0px 0px var(--color-ocean);padding: 0.25em 0.5em;width: 100%;}",
|
|
21
21
|
"KOL-LINK": "a,button {background-color: transparent;border: 0;cursor: pointer;display: inline-block;}kol-link-wc,kol-link-button-wc {display: inline-block;}a,button {color: var(--color-midnight);font-style: normal;font-weight: 400;display: inline-flex;line-height: 1.5em;text-decoration-line: underline;border-radius: 0.25rem;}a:hover,button:hover {text-decoration-thickness: 0.25em;}a:visited,button:visited {color: var(--visited);}kol-icon {padding: 0 0.25em;display: inline-block;}.hidden {display: none;visibility: hidden;}.skip {left: -99999px;overflow: hidden;position: absolute;z-index: 9999999;line-height: 1em;}.skip:focus {background: white;left: unset;position: unset;}",
|
|
22
22
|
"KOL-BREADCRUMB": 'nav {width: 100%;}ul {margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;align-items: center;}kol-link {display: inline;}:host kol-icon[exportparts*="separator"] {padding: 0 0.5rem;}:host kol-icon::part(icon separator) {font-weight: 900;font-size: 0.875rem;}:host kol-icon::part(icon separator)::before {color: black;content: "\\f054";font-family: "Font Awesome 6 Free";}:host li > kol-link > kol-link-wc > a {color: red !important;}',
|
|
23
|
-
"KOL-DETAILS": ":host details > summary {border-radius: 2px;display: flex;gap: 0rem;}:host details > summary > span:not(:first-of-type) {padding-left: 0.25rem;}:host details > kol-indented-text {margin: 0.
|
|
23
|
+
"KOL-DETAILS": ":host details > summary {border-radius: 2px;display: flex;gap: 0rem;}:host details > summary > span:not(:first-of-type) {padding-left: 0.25rem;}:host details > kol-indented-text {margin: 0.25rem 0 0 0.7rem;}",
|
|
24
24
|
"KOL-SPIN": ".spin {display: inline-block;height: 1rem;position: relative;width: 3rem;}.spin span {animation-timing-function: cubic-bezier(0, 1, 1, 0);border: 0.1rem solid rgb(255, 255, 255);border-radius: 50%;height: 0.8rem;width: 0.8rem;top: 0.1rem;position: absolute;}.spin span:nth-child(1) {background-color: #fc0;z-index: 0;animation: 2s ease 0s infinite normal none running spin1;left: 0.1rem;}.spin span:nth-child(2) {background-color: #f00;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 0.1rem;}.spin span:nth-child(3) {background-color: #000;z-index: 1;animation: 2s ease 0s infinite normal none running spin2;left: 1.1rem;}.spin span:nth-child(4) {background-color: #666;z-index: 0;animation: 2s ease 0s infinite normal none running spin3;left: 2.1rem;}@keyframes spin1 {0% {transform: scale(0);}100% {transform: scale(1);}}@keyframes spin2 {0% {transform: translate(0px, 0px);}100% {transform: translate(1rem, 0px);}}@keyframes spin3 {0% {transform: scale(1);}100% {transform: scale(0);}}",
|
|
25
25
|
"KOL-PROGRESS": ":host progress,:host span {display: block;height: 0px;overflow: hidden;width: 0px;}:host svg line:first-child,:host svg circle:first-child {fill: transparent;stroke: var(--color-ice);}:host svg line:last-child,:host svg circle:last-child {fill: transparent;stroke: var(--color-midnight);}",
|
|
26
26
|
"KOL-SELECT": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -33px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
27
27
|
"KOL-INPUT-COLOR": 'kol-input {display: grid;}kol-input label {display: grid;order: 2;margin-bottom: 0.4em;}kol-input div.input {box-sizing: border-box;order: 3;background-color: white;border-radius: 0.3125rem;}kol-input kol-alert.error {margin-bottom: 0.4em;order: 1;}input,select,textarea {font-family: var(--font-family);background-color: transparent;box-sizing: border-box;font-size: 1rem;display: inline-flex;line-height: 1.5em;border-color: var(--color-grey);border-width: 2px;border-style: solid;padding: 0.625em 0.875em;border-radius: 0.3125rem;overflow: hidden;width: 100%;}input,select:not([multiple]) {height: 2.75em;}input::placeholder {color: var(--color-grey);}input:hover {border-color: var(--color-midnight);}input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {cursor: not-allowed;border-color: var(--border-default);}.required label > span::after {content: "*";padding-left: 0.125em;}.icons {display: flex;justify-content: space-between;height: 0;}.icons > * {margin: 0.75em;}.icon-left input,.icon-left select {padding-left: 2em;}.icon-right input,.icon-right select {padding-right: 2em;}kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}kol-button-wc {position: relative;float: right;z-index: 1000;margin-top: -33px;}kol-button-wc button {border: 1px solid var(--color-grey);border-radius: 0.25rem;box-sizing: border-box;background-color: transparent;cursor: pointer;}.icon-right kol-button-wc {margin-right: 2.5em;}.disabled {opacity: 0.33;}select[multiple],textarea {overflow: auto;}textarea {display: block;}select option {margin: 1px 0;padding: 0.5em;border-radius: 0.25em;cursor: pointer;}select option:disabled {cursor: not-allowed;}option:active:not(:disabled),option:checked:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {background: var(--color-ocean);color: white;}',
|
|
28
|
-
"KOL-ACCORDION": ':host > div {font-family: var(--font-family);padding: 0 0.5rem 0 0;}:host > div > kol-heading-wc {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host > div > kol-heading-wc button {cursor: pointer;width: 100%;margin: 0;display: flex;gap: 0.5em;border: 0;align-items: center;overflow: hidden;font-size: inherit;line-height: 1.75em;background-color: transparent;padding: 0;}:host > div > kol-heading-wc button kol-icon {text-align: center;width: 1em;margin-left: 0.5em;}:host > div[part*="open"] > kol-heading-wc button {padding-bottom: 0;}:host > div > kol-heading-wc button kol-icon::part(icon) {font-weight: 900;color: var(--color-midnight);}:host > div > kol-heading-wc button kol-icon::part(close)::before {font-family: "Font Awesome 6 Free";content: "\\f077";}:host > div > kol-heading-wc button kol-icon::part(open)::before {font-family: "Font Awesome 6 Free";content: "\\f078";}:host > div {width: 100%;height: 100%;display: grid;}:host > div div[part="header"],:host > div[part*="open"] div[part="content"] {margin: 0;padding-left:
|
|
28
|
+
"KOL-ACCORDION": ':host > div {font-family: var(--font-family);padding: 0 0.5rem 0 0;}:host > div > kol-heading-wc {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host > div > kol-heading-wc button {cursor: pointer;width: 100%;margin: 0;display: flex;gap: 0.5em;border: 0;align-items: center;overflow: hidden;font-size: inherit;line-height: 1.75em;background-color: transparent;padding: 0;}:host > div > kol-heading-wc button kol-icon {text-align: center;width: 1em;margin-left: 0.5em;}:host > div[part*="open"] > kol-heading-wc button {padding-bottom: 0;}:host > div > kol-heading-wc button kol-icon::part(icon) {font-weight: 900;color: var(--color-midnight);}:host > div > kol-heading-wc button kol-icon::part(close)::before {font-family: "Font Awesome 6 Free";content: "\\f077";}:host > div > kol-heading-wc button kol-icon::part(open)::before {font-family: "Font Awesome 6 Free";content: "\\f078";}:host > div {width: 100%;height: 100%;display: grid;}:host > div div[part="header"],:host > div[part*="open"] div[part="content"] {margin: 0;padding-left: 2.5em;}button {font-weight: inherit;font-size: inherit;line-height: inherit;}:host > div {background: var(--color-white);}:host > div[part*="open"] {padding-bottom: 1em;}',
|
|
29
29
|
"KOL-TABLE": ':host * {hyphens: var(--kolibri-hyphens);font-family: var(--kolibri-font-family);line-height: var(--kolibri-line-height);word-break: break-word;}:host > div {overflow-x: auto;overflow-y: hidden;}caption {padding: 0.5em;}th {font-weight: normal;color: var(--color-midnight);}:host table thead tr:first-child th,:host table thead tr:first-child td {border-width: 0;border-top-width: 2px;border-style: solid;border-color: var(--color-ice);}table {width: 100%;border-spacing: 0;}table,:host table thead tr:last-child th,:host table thead tr:last-child td {border-width: 0;border-bottom-width: 2px;border-style: solid;border-color: var(--color-ice);}th {background-color: var(--color-white);}th div {width: 100%;display: flex;gap: 0.5em;grid-template-columns: 1fr auto;align-items: center;}th div.center {justify-content: center;}th div.right {justify-content: end;}tr:nth-child(even) {background-color: #f2f2f2;}th,td {padding: 0.5em;}td.center > div {display: flex;justify-content: center;}td.right > div {display: flex;justify-content: end;}th[aria-sort="ascending"],th[aria-sort="descending"] {font-weight: 700;}:host > div:last-child {padding: 0.5em;}:host > div:last-child,:host > div:last-child > div:last-child {display: grid;align-items: center;justify-items: center;gap: 1em;}@media (min-width: 1024px) {:host > div:last-child,:host > div:last-child > div:last-child {grid-auto-flow: column;}:host > div:last-child kol-pagination{display: flex;gap: 1rem}}',
|
|
30
30
|
"KOL-NAV": '* {margin: 0;padding: 0;}nav {font-family: var(--font-family);font-size: var(--font-size);background-color: var(--color-smoke);}ul {list-style: none;}a {background-color: var(--color-white);text-decoration: none;color: var(--color-midnight);width: 100%;display: flex;align-items: center;font-style: normal;padding: 0.75rem 0.5rem 0.75rem 0;border-left-color: var(--color-white);border-left-style: solid;border-left-width: 0.5rem;line-height: 1.5rem;min-height: 44px;min-width: 44px;transition-duration: 0.5s;transition-property: background-color, color, border-color;letter-spacing: 0.175px;}a:hover {border-left-color: var(--color-ocean);font-weight: 700;letter-spacing: unset;}.selected a,[exportparts*="selected"] a {background-color: var(--color-ice);border-left-color: var(--color-midnight);color: var(--color-midnight);font-weight: 700;letter-spacing: unset;}a:hover,.selected a:hover,[exportparts*="selected"] a:hover {background-color: var(--color-ocean);color: var(--color-white);}a.icon-only > kol-span-wc {justify-items: center;}a.icon-only > kol-span-wc kol-icon {display: inline-block;text-align: center;width: 44px;flex-shrink: 0;}kol-icon ~ span {padding-left: 0.5rem;}.hidden {display: none;}:host > div {width: 100%;}:host > div > div:last-child {margin-top: 0.5em;width: 100%;text-align: center;} /* horizontal */ul.flex {display: flex;}li > div > div.absolute {position: absolute;}.horizontal a {display: block;}:host kol-span-wc {margin: 0 0.25rem;justify-items: baseline;}',
|
|
31
31
|
"KOL-CARD": "/* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */:host > div {display: grid;width: 100%;height: 100%;background-color: white;grid-template-rows: min-content 2fr min-content;box-shadow: 0 0 0.25rem var(--color-grey);border-radius: 0.25rem;}:host kol-heading-wc {display: inline-flex;font-style: normal;font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}:host div.header {padding: 1rem 1rem 0.5rem 1rem;}:host div.content {padding: 0.5rem 1rem 1rem;overflow: hidden;}:host div.footer {padding: 0.5rem 1rem;}:host > div > div.content + div.footer {border-top: 2px solid var(--color-ice);}",
|
|
32
|
-
"KOL-INPUT-CHECKBOX": '/* INPUT
|
|
32
|
+
"KOL-INPUT-CHECKBOX": '/* INPUT */:host kol-input {display: grid;align-items: center;justify-items: left;width: 100%;min-height: 44px;}:host kol-input.checkbox {grid-template-columns: 2rem auto;}:host kol-input.switch {grid-template-columns: 4rem auto;}:host kol-input > div.input {display: inline-flex;order: 2;}:host kol-input > div.input input {margin: 0px;}:host kol-input > label {cursor: pointer;order: 3;}:host kol-input > kol-alert.error {order: 1;padding-top: 0.25em;margin-bottom: 0.4em;grid-column: span 2 / auto;}:host kol-input.error {border-left: 3px solid var(--color-red);padding-left: 1em;}:host kol-input.error input:focus,kol-input.error select:focus,kol-input.error textarea:focus {outline-color: var(--color-red) !important;}:host kol-input.error kol-alert.error {color: var(--color-red);font-weight: 700;}:host input {cursor: pointer;order: 1;width: 100%;border-color: var(--color-grey);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 1rem;}:host input:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}:host input:focus:hover {box-shadow: none;}:host input:active {box-shadow: none;}:host kol-alert {display: block;width: 100%;} /* CHECKBOX */:host kol-input label span {margin-top: 0.125rem;}:host .required label > span::after {content: "*";padding-left: 0.125em;}:host kol-input input[type="checkbox"] {appearance: none;background-color: white;cursor: pointer;transition: 0.5s;}:host kol-input input[type="checkbox"].kol-disabled:before {cursor: not-allowed;}:host kol-input input[type="checkbox"]:before {content: "";cursor: pointer;}:host kol-input input[type="checkbox"]:checked {background-color: var(--color-midnight);border-color: var(--color-midnight);}:host kol-input.checkbox input[type="checkbox"] {border-radius: 0.25em;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:before {border-radius: 1.5em;background-color: transparent;display: block;height: calc(6 * var(--spacing));position: relative;width: calc(6 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:checked:before {border-right-width: 3px;border-bottom-width: 3px;left: calc(1.5 * var(--spacing) - 2px);top: calc(2.85 * var(--spacing) - 2px);transform: rotate(40deg) translate(-50%, -50%);background-color: transparent;border-width: 0px 3px 3px 0px;border-color: white;border-radius: 1px;border-style: solid;height: calc(3 * var(--spacing));width: calc(1.5 * var(--spacing));}:host kol-input.checkbox input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1; /* background-color: white; */}:host kol-input.checkbox input[type="checkbox"]:indeterminate:before {background-color: var(--color-white);height: 0.125rem;top: 0.6rem;left: 0.1rem;width: calc(4 * var(--spacing));transform: inherit;}:host kol-input.checkbox input[type="checkbox"]:checked:indeterminate:before {border-width: 0px 1px 1px 0px;}:host kol-input.switch input[type="checkbox"] {min-width: 3.5em;width: 3.5em;background-color: var(--color-grey);border-width: 0;height: 1.5em;border-radius: 1.25em;display: inline-block;position: relative;}:host kol-input.switch input[type="checkbox"]:before {-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5;width: 1.25em;height: 1.25em;left: calc(0.25em - 2px);top: calc(0.25em - 2px);border-radius: 1.25em;background-color: white;position: absolute;}:host kol-input.switch input[type="checkbox"]:checked {background-color: var(--color-midnight);}:host kol-input.switch input[type="checkbox"]:checked:before {-webkit-transform: translateX(2em);-moz-transform: translateX(2em);-ms-transform: translateX(2em);transform: translateX(2em);--tw-bg-opacity: 1;}:host kol-input.switch input[type="checkbox"]:indeterminate {--tw-bg-opacity: 1;}:host kol-input.switch input[type="checkbox"]:indeterminate:before {-webkit-transform: translateX(1em);-moz-transform: translateX(1em);-ms-transform: translateX(1em);transform: translateX(1em);}:host .disabled {opacity: 0.33;}',
|
|
33
33
|
"KOL-INPUT-RADIO": '/* INPUT */label {cursor: pointer;display: grid;line-height: 20px;gap: 8px;width: 100%;}input {cursor: pointer;width: 100%;border-color: var(--color-grey);border-width: 2px;border-style: solid;border-radius: 5px; /* padding: 10px 14px; */line-height: 24px;font-size: 16px;}input:hover {border-color: var(--color-midnight);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);}input:focus:hover {box-shadow: none;}input:hover {border-color: var(--color-midnight);}kol-alert {display: block;width: 100%;margin-bottom: 0.4em;}.required legend > span::after {content: "*";padding-left: 0.125em;} /* RADIO */:host fieldset {border: 0px;margin: 0px;padding: 0px;display: grid;gap: 0.25em;}:host fieldset div {cursor: pointer;display: flex;flex-direction: row;align-items: center;position: relative;min-height: 44px;margin: 0;}:host fieldset div label {cursor: pointer;display: flex;padding-left: 0.25em;width: 100%;}:host fieldset div label span {margin-top: 0.125em;}:host fieldset div input[type="radio"] {appearance: none;transition: 0.5s;border-radius: 100%;height: calc(6 * var(--spacing));min-width: calc(6 * var(--spacing));width: calc(6 * var(--spacing));}:host fieldset div input[type="radio"]:before {content: "";cursor: pointer;left: calc(1.5 * var(--spacing) - 2px);top: calc(1.5 * var(--spacing) - 2px);position: relative;border-radius: 100%;display: block;height: calc(3 * var(--spacing));width: calc(3 * var(--spacing));}:host fieldset div input[type="radio"]:checked:before {background-color: var(--color-midnight);}:host fieldset div input[type="radio"]:disabled {cursor: not-allowed;border-color: var(--border-default);background-color: var(--background-light-grey);}:host fieldset #error {margin: 0.4em 0;order: 1;}:host fieldset legend {order: 2;display: contents;}:host fieldset kol-input {order: 3;}:host fieldset.error {padding-left: 1em;border-left: 3px solid var(--color-red);}:host fieldset kol-alert#error {color: var(--color-red);font-weight: 700;}:host fieldset.error input:focus,:host fieldset.error select:focus,:host fieldset.error textarea:focus {outline-color: var(--color-red) !important;}:host fieldset.error kol-alert.error {margin-left: -0.25em;color: var(--color-red);font-weight: 700;}.disabled {opacity: 0.33;}:host fieldset.horizontal {display: flex;flex-wrap: wrap;gap: 0.5rem 1rem;}:host fieldset.horizontal legend {display: inline-block;margin-bottom: 0.25em;}',
|
|
34
34
|
"KOL-LINK-GROUP": "ul {list-style: none;margin: 0px;padding: 0px;}nav.horizontal ul {display: flex;flex-wrap: wrap;}nav.horizontal li {margin-left: 1.25rem;margin-right: 0.25rem;}nav.horizontal li:first-child {margin-left: 0;}nav.horizontal li:last-child {margin-right: 0;}nav.vertical li {margin-left: 1.75rem;margin-right: 0.5rem;}li.list-none {list-style-type: none !important;margin-left: 0;}",
|
|
35
35
|
"KOL-TOAST": ":host > div {position: fixed;top: 0;left: 0;width: 100%;height: 0;z-index: 200;}:host > div > kol-alert {display: block;margin: auto;padding: 1rem;max-width: 750px;}:host > div > kol-button-wc {top: 0;position: relative;display: block;margin: auto;width: 1em;}",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/themes",
|
|
3
|
-
"version": "1.4.0",
|
|
3
|
+
"version": "1.4.1-rc.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": "https://github.com/public-ui/kolibri",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"prepack": "unbuild"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@public-ui/schema": "1.4.0"
|
|
51
|
+
"@public-ui/schema": "1.4.1-rc.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@types/node": "18.14.2",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"unbuild": "1.1.2"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
|
-
"@public-ui/components": "1.4.0"
|
|
63
|
+
"@public-ui/components": "1.4.1-rc.0"
|
|
64
64
|
},
|
|
65
65
|
"sideEffects": false,
|
|
66
66
|
"type": "module",
|