@vaebe/ccui 2.0.0-beta.0

package/tabs/index.es.js

@@ -0,0 +1,128 @@
+import { computed as e, createVNode as t, defineComponent as n, inject as r, mergeProps as i, onUnmounted as a, provide as o, reactive as s } from "vue";
+//#region ../ccui/ui/shared/hooks/use-namespace.ts
+function c(e, t, n) {
+	let r = e;
+	return t && (r += `__${t}`), n && (r += `--${n}`), r;
+}
+function l(e, t = !1) {
+	let n = t ? `.ccui-${e}` : `ccui-${e}`;
+	return {
+		b: () => c(n),
+		e: (e) => e ? c(n, e) : "",
+		m: (e) => e ? c(n, "", e) : "",
+		em: (e, t) => e && t ? c(n, e, t) : "",
+		is: (e) => `is-${e}`
+	};
+}
+//#endregion
+//#region ../ccui/ui/tabs/src/tabs-types.ts
+var u = {
+	modelValue: {
+		type: [String, Number],
+		default: null
+	},
+	type: {
+		type: String,
+		default: ""
+	},
+	customWidth: {
+		type: String,
+		default: ""
+	},
+	cssClass: {
+		type: String,
+		default: ""
+	},
+	beforeChange: {
+		type: Function,
+		default: null
+	},
+	tabPosition: {
+		type: String,
+		default: "top"
+	}
+}, d = Symbol("CTabs"), f = /* @__PURE__ */ n({
+	name: "CTab",
+	props: {
+		label: {
+			type: [String, Number],
+			default: null
+		},
+		name: {
+			type: [String, Number],
+			default: null
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [],
+	setup(e, { slots: n }) {
+		let i = l("tab"), o = r(d);
+		return o?.data?.push(e), o?.slots?.push(n), a(() => {
+			o && (o.data = o.data?.filter((t) => t.name !== e.name));
+		}), () => e.name === o?.active ? t("div", { class: i.b() }, [n.default && n.default()]) : null;
+	}
+}), p = /* @__PURE__ */ n({
+	name: "CTabs-nav",
+	props: u,
+	emits: ["active-tab-change"],
+	setup(n, { emit: i }) {
+		let a = l("tabs-nav"), o = r(d), s = e(() => o?.data || []), c = e(() => o?.slots || []), u = e(() => {
+			let e = a.b();
+			return n.type && (e += `-${n.type}`), `${e}--${n.tabPosition}`;
+		}), f = (e) => {
+			let t = `${u.value}-item`;
+			return `${t} ${o?.active === e.name ? `${t}-active` : ""}`;
+		}, p = (e) => {
+			if (o) {
+				if (o.active === e.name) return;
+				i("active-tab-change", e.name);
+			}
+		}, m = e(() => s.value.map((e, n) => {
+			let r = c.value[n];
+			return t("p", {
+				class: f(e),
+				onClick: () => {
+					p(e);
+				}
+			}, [r.title ? r.title() : e.label]);
+		}));
+		return () => t("div", { class: u.value }, [m.value]);
+	}
+}), m = /* @__PURE__ */ n({
+	name: "CTabs",
+	props: u,
+	emits: ["change", "update:modelValue"],
+	setup(e, { slots: n, emit: r }) {
+		let a = l("tabs"), c = s({
+			data: [],
+			active: e.modelValue,
+			slots: []
+		});
+		o(d, c);
+		let u = (e) => {
+			c.active = e, r("update:modelValue", e), r("change", e);
+		}, f = () => {
+			let r = t(p, i(e, { "onActive-tab-change": u }), null), a = n.default && n.default();
+			return ["bottom"].includes(e.tabPosition) ? [a, r] : [r, a];
+		};
+		return () => t("div", { class: a.b() }, [f()]);
+	}
+});
+//#endregion
+//#region ../ccui/ui/tabs/index.ts
+m.install = function(e) {
+	e.component(m.name, m), e.component(f.name, f);
+};
+var h = {
+	title: "Tabs 选项卡",
+	category: "导航",
+	status: void 0,
+	install(e) {
+		e.component(m.name, m), e.component(f.name, f);
+	}
+};
+//#endregion
+export { f as Tab, m as Tabs, h as default };

package/tabs/index.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.index={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function n(e,t,n){let r=e;return t&&(r+=`__${t}`),n&&(r+=`--${n}`),r}function r(e,t=!1){let r=t?`.ccui-${e}`:`ccui-${e}`;return{b:()=>n(r),e:e=>e?n(r,e):``,m:e=>e?n(r,``,e):``,em:(e,t)=>e&&t?n(r,e,t):``,is:e=>`is-${e}`}}var i={modelValue:{type:[String,Number],default:null},type:{type:String,default:``},customWidth:{type:String,default:``},cssClass:{type:String,default:``},beforeChange:{type:Function,default:null},tabPosition:{type:String,default:`top`}},a=Symbol(`CTabs`),o={label:{type:[String,Number],default:null},name:{type:[String,Number],default:null},disabled:{type:Boolean,default:!1}},s=(0,t.defineComponent)({name:`CTab`,props:o,emits:[],setup(e,{slots:n}){let i=r(`tab`),o=(0,t.inject)(a);return o?.data?.push(e),o?.slots?.push(n),(0,t.onUnmounted)(()=>{o&&(o.data=o.data?.filter(t=>t.name!==e.name))}),()=>e.name===o?.active?(0,t.createVNode)(`div`,{class:i.b()},[n.default&&n.default()]):null}}),c=(0,t.defineComponent)({name:`CTabs-nav`,props:i,emits:[`active-tab-change`],setup(e,{emit:n}){let i=r(`tabs-nav`),o=(0,t.inject)(a),s=(0,t.computed)(()=>o?.data||[]),c=(0,t.computed)(()=>o?.slots||[]),l=(0,t.computed)(()=>{let t=i.b();return e.type&&(t+=`-${e.type}`),`${t}--${e.tabPosition}`}),u=e=>{let t=`${l.value}-item`;return`${t} ${o?.active===e.name?`${t}-active`:``}`},d=e=>{if(o){if(o.active===e.name)return;n(`active-tab-change`,e.name)}},f=(0,t.computed)(()=>s.value.map((e,n)=>{let r=c.value[n];return(0,t.createVNode)(`p`,{class:u(e),onClick:()=>{d(e)}},[r.title?r.title():e.label])}));return()=>(0,t.createVNode)(`div`,{class:l.value},[f.value])}}),l=(0,t.defineComponent)({name:`CTabs`,props:i,emits:[`change`,`update:modelValue`],setup(e,{slots:n,emit:i}){let o=r(`tabs`),s=(0,t.reactive)({data:[],active:e.modelValue,slots:[]});(0,t.provide)(a,s);let l=e=>{s.active=e,i(`update:modelValue`,e),i(`change`,e)},u=()=>{let r=(0,t.createVNode)(c,(0,t.mergeProps)(e,{"onActive-tab-change":l}),null),i=n.default&&n.default();return[`bottom`].includes(e.tabPosition)?[i,r]:[r,i]};return()=>(0,t.createVNode)(`div`,{class:o.b()},[u()])}});l.install=function(e){e.component(l.name,l),e.component(s.name,s)},e.Tab=s,e.Tabs=l,e.default={title:`Tabs 选项卡`,category:`导航`,status:void 0,install(e){e.component(l.name,l),e.component(s.name,s)}}});

package/tag/ccui-cli.css

@@ -0,0 +1,2 @@
+:root{--ccui-global-bg:#f5f5f5;--ccui-global-bg-normal:#fff;--ccui-base-bg:#fff;--ccui-base-bg-dark:#000000d9;--ccui-brand:#1677ff;--ccui-brand-foil:#e6f4ff;--ccui-brand-hover:#4096ff;--ccui-brand-active:#0958d9;--ccui-brand-active-focus:#003eb3;--ccui-contrast:#ff4d4f;--ccui-text:#000000e0;--ccui-text-weak:#000000a6;--ccui-aide-text:#00000073;--ccui-aide-text-stress:#000000a6;--ccui-placeholder:#00000040;--ccui-light-text:#fff;--ccui-dark-text:#000000e0;--ccui-link:#1677ff;--ccui-link-active:#0958d9;--ccui-link-light:#4096ff;--ccui-link-light-active:#69b1ff;--ccui-line:#d9d9d9;--ccui-dividing-line:#f0f0f0;--ccui-block:#fff;--ccui-area:#fafafa;--ccui-danger:#ff4d4f;--ccui-warning:#faad14;--ccui-waiting:#00000073;--ccui-success:#52c41a;--ccui-info:#1677ff;--ccui-initial:#e6f4ff;--ccui-unavailable:#f5f5f5;--ccui-shadow:#00000026;--ccui-light-shadow:#0000000f;--ccui-icon-text:#000000e0;--ccui-icon-bg:#fff;--ccui-icon-fill:#00000073;--ccui-icon-fill-hover:#000000a6;--ccui-icon-fill-active:#1677ff;--ccui-icon-fill-active-hover:#4096ff;--ccui-form-control-line:#d9d9d9;--ccui-form-control-line-hover:#4096ff;--ccui-form-control-line-active:#1677ff;--ccui-form-control-line-active-hover:#0958d9;--ccui-list-item-active-bg:#1677ff;--ccui-list-item-active-text:#fff;--ccui-list-item-active-hover-bg:#4096ff;--ccui-list-item-hover-bg:#0000000a;--ccui-list-item-hover-text:#1677ff;--ccui-list-item-selected-bg:#e6f4ff;--ccui-list-item-strip-bg:#fafafa;--ccui-disabled-bg:#0000000a;--ccui-disabled-line:#d9d9d9;--ccui-disabled-text:#00000040;--ccui-primary-disabled:#91caff;--ccui-icon-fill-active-disabled:#91caff;--ccui-label-bg:#fafafa;--ccui-connected-overlay-bg:#fff;--ccui-connected-overlay-line:#1677ff;--ccui-fullscreen-overlay-bg:#fff;--ccui-feedback-overlay-bg:#000000d9;--ccui-feedback-overlay-text:#fff;--ccui-embed-search-bg:#fafafa;--ccui-embed-search-bg-hover:#f0f0f0;--ccui-float-block-shadow:#1677ff29;--ccui-highlight-overlay:#fffc;--ccui-range-item-hover-bg:#e6f4ff;--ccui-primary:#1677ff;--ccui-primary-hover:#4096ff;--ccui-primary-active:#0958d9;--ccui-contrast-hover:#ff7875;--ccui-contrast-active:#d9363e;--ccui-secondary:#000000a6;--ccui-danger-line:#ffccc7;--ccui-danger-bg:#fff2f0;--ccui-warning-line:#ffe58f;--ccui-warning-bg:#fffbe6;--ccui-info-line:#91caff;--ccui-info-bg:#e6f4ff;--ccui-success-line:#b7eb8f;--ccui-success-bg:#f6ffed;--ccui-primary-line:#91caff;--ccui-primary-bg:#e6f4ff;--ccui-default-line:#d9d9d9;--ccui-default-bg:#fff;--ccui-font-size:14px;--ccui-font-size-card-title:16px;--ccui-font-size-page-title:20px;--ccui-font-size-modal-title:16px;--ccui-font-size-price:24px;--ccui-font-size-data-overview:30px;--ccui-font-size-icon:16px;--ccui-font-size-sm:12px;--ccui-font-size-md:14px;--ccui-font-size-lg:16px;--ccui-font-title-weight:600;--ccui-font-content-weight:400;--ccui-line-height-base:1.57143;--ccui-border-radius:6px;--ccui-border-radius-feedback:8px;--ccui-border-radius-card:8px;--ccui-shadow-length-base:0 1px 2px 0;--ccui-shadow-length-slide-left:-6px 0 16px 0;--ccui-shadow-length-slide-right:6px 0 16px 0;--ccui-shadow-length-connected-overlay:0 6px 16px 0;--ccui-shadow-length-hover:0 6px 16px 0;--ccui-shadow-length-feedback-overlay:0 6px 16px 0;--ccui-shadow-fullscreen-overlay:0 6px 16px 0;--ccui-animation-duration-slow:.3s;--ccui-animation-duration-base:.2s;--ccui-animation-duration-fast:.1s;--ccui-animation-ease-in:cubic-bezier(.7, 0, .84, 0);--ccui-animation-ease-out:cubic-bezier(.215, .61, .355, 1);--ccui-animation-ease-in-out:cubic-bezier(.78, .14, .15, .86);--ccui-animation-ease-in-smooth:cubic-bezier(.645, .045, .355, 1);--ccui-animation-linear:cubic-bezier(0, 0, 1, 1);--ccui-z-index-full-page-overlay:1080;--ccui-z-index-pop-up:1060;--ccui-z-index-dropdown:1052;--ccui-z-index-modal:1050;--ccui-z-index-drawer:1040;--ccui-z-index-framework:1000;--ccui-size-sm:24px;--ccui-size-md:32px;--ccui-size-lg:40px;--ccui-color-primary:#1677ff;--ccui-color-primary-hover:#4096ff;--ccui-color-primary-active:#0958d9;--ccui-color-primary-bg:#e6f4ff;--ccui-color-primary-bg-hover:#bae0ff;--ccui-color-primary-border:#91caff;--ccui-color-primary-border-hover:#69b1ff;--ccui-color-success:#52c41a;--ccui-color-success-hover:#73d13d;--ccui-color-success-active:#389e0d;--ccui-color-success-bg:#f6ffed;--ccui-color-success-border:#b7eb8f;--ccui-color-warning:#faad14;--ccui-color-warning-hover:#ffc53d;--ccui-color-warning-active:#d48806;--ccui-color-warning-bg:#fffbe6;--ccui-color-warning-border:#ffe58f;--ccui-color-error:#ff4d4f;--ccui-color-error-hover:#ff7875;--ccui-color-error-active:#d9363e;--ccui-color-error-bg:#fff2f0;--ccui-color-error-border:#ffccc7;--ccui-color-info:#1677ff;--ccui-color-info-hover:#4096ff;--ccui-color-info-bg:#e6f4ff;--ccui-color-info-border:#91caff;--ccui-color-text:#000000e0;--ccui-color-text-secondary:#000000a6;--ccui-color-text-tertiary:#00000073;--ccui-color-text-quaternary:#00000040;--ccui-color-text-disabled:#00000040;--ccui-color-text-placeholder:#00000040;--ccui-color-text-heading:#000000e0;--ccui-color-text-light-solid:#fff;--ccui-color-bg-base:#fff;--ccui-color-bg-container:#fff;--ccui-color-bg-elevated:#fff;--ccui-color-bg-layout:#f5f5f5;--ccui-color-bg-spotlight:#000000d9;--ccui-color-bg-mask:#00000073;--ccui-color-bg-text-hover:#0000000f;--ccui-color-bg-text-active:#00000026;--ccui-color-border:#d9d9d9;--ccui-color-border-secondary:#f0f0f0;--ccui-color-border-disabled:#0000000a;--ccui-color-split:#0505050f;--ccui-color-fill:#00000026;--ccui-color-fill-secondary:#0000000f;--ccui-color-fill-tertiary:#0000000a;--ccui-color-fill-quaternary:#00000005;--ccui-control-outline:#0591ff1a;--ccui-control-outline-error:#ff26050f;--ccui-control-outline-warning:#ffd7051a;--ccui-red-1:#fff1f0;--ccui-red-2:#ffccc7;--ccui-red-3:#ffa39e;--ccui-red-4:#ff7875;--ccui-red-5:#ff4d4f;--ccui-red-6:#f5222d;--ccui-red-7:#cf1322;--ccui-red-8:#a8071a;--ccui-red-9:#820014;--ccui-red-10:#5c0011;--ccui-volcano-1:#fff2e8;--ccui-volcano-2:#ffd8bf;--ccui-volcano-3:#ffbb96;--ccui-volcano-4:#ff9c6e;--ccui-volcano-5:#ff7a45;--ccui-volcano-6:#fa541c;--ccui-volcano-7:#d4380d;--ccui-volcano-8:#ad2102;--ccui-volcano-9:#871400;--ccui-volcano-10:#610b00;--ccui-orange-1:#fff7e6;--ccui-orange-2:#ffe7ba;--ccui-orange-3:#ffd591;--ccui-orange-4:#ffc069;--ccui-orange-5:#ffa940;--ccui-orange-6:#fa8c16;--ccui-orange-7:#d46b08;--ccui-orange-8:#ad4e00;--ccui-orange-9:#873800;--ccui-orange-10:#612500;--ccui-gold-1:#fffbe6;--ccui-gold-2:#fff1b8;--ccui-gold-3:#ffe58f;--ccui-gold-4:#ffd666;--ccui-gold-5:#ffc53d;--ccui-gold-6:#faad14;--ccui-gold-7:#d48806;--ccui-gold-8:#ad6800;--ccui-gold-9:#874d00;--ccui-gold-10:#613400;--ccui-yellow-1:#feffe6;--ccui-yellow-2:#ffffb8;--ccui-yellow-3:#fffb8f;--ccui-yellow-4:#fff566;--ccui-yellow-5:#ffec3d;--ccui-yellow-6:#fadb14;--ccui-yellow-7:#d4b106;--ccui-yellow-8:#ad8b00;--ccui-yellow-9:#876800;--ccui-yellow-10:#614700;--ccui-lime-1:#fcffe6;--ccui-lime-2:#f4ffb8;--ccui-lime-3:#eaff8f;--ccui-lime-4:#d3f261;--ccui-lime-5:#bae637;--ccui-lime-6:#a0d911;--ccui-lime-7:#7cb305;--ccui-lime-8:#5b8c00;--ccui-lime-9:#3f6600;--ccui-lime-10:#254000;--ccui-green-1:#f6ffed;--ccui-green-2:#d9f7be;--ccui-green-3:#b7eb8f;--ccui-green-4:#95de64;--ccui-green-5:#73d13d;--ccui-green-6:#52c41a;--ccui-green-7:#389e0d;--ccui-green-8:#237804;--ccui-green-9:#135200;--ccui-green-10:#092b00;--ccui-cyan-1:#e6fffb;--ccui-cyan-2:#b5f5ec;--ccui-cyan-3:#87e8de;--ccui-cyan-4:#5cdbd3;--ccui-cyan-5:#36cfc9;--ccui-cyan-6:#13c2c2;--ccui-cyan-7:#08979c;--ccui-cyan-8:#006d75;--ccui-cyan-9:#00474f;--ccui-cyan-10:#002329;--ccui-blue-1:#e6f4ff;--ccui-blue-2:#bae0ff;--ccui-blue-3:#91caff;--ccui-blue-4:#69b1ff;--ccui-blue-5:#4096ff;--ccui-blue-6:#1677ff;--ccui-blue-7:#0958d9;--ccui-blue-8:#003eb3;--ccui-blue-9:#002c8c;--ccui-blue-10:#001d66;--ccui-geekblue-1:#f0f5ff;--ccui-geekblue-2:#d6e4ff;--ccui-geekblue-3:#adc6ff;--ccui-geekblue-4:#85a5ff;--ccui-geekblue-5:#597ef7;--ccui-geekblue-6:#2f54eb;--ccui-geekblue-7:#1d39c4;--ccui-geekblue-8:#10239e;--ccui-geekblue-9:#061178;--ccui-geekblue-10:#030852;--ccui-purple-1:#f9f0ff;--ccui-purple-2:#efdbff;--ccui-purple-3:#d3adf7;--ccui-purple-4:#b37feb;--ccui-purple-5:#9254de;--ccui-purple-6:#722ed1;--ccui-purple-7:#531dab;--ccui-purple-8:#391085;--ccui-purple-9:#22075e;--ccui-purple-10:#120338;--ccui-magenta-1:#fff0f6;--ccui-magenta-2:#ffd6e7;--ccui-magenta-3:#ffadd2;--ccui-magenta-4:#ff85c0;--ccui-magenta-5:#f759ab;--ccui-magenta-6:#eb2f96;--ccui-magenta-7:#c41d7f;--ccui-magenta-8:#9e1068;--ccui-magenta-9:#780650;--ccui-magenta-10:#520339;--ccui-pink-1:#fff0f6;--ccui-pink-6:#eb2f96;--ccui-border-radius-lg:8px;--ccui-border-radius-sm:4px;--ccui-border-radius-xs:2px;--ccui-border-radius-outer:4px;--ccui-font-size-xl:20px;--ccui-font-size-heading-1:38px;--ccui-font-size-heading-2:30px;--ccui-font-size-heading-3:24px;--ccui-font-size-heading-4:20px;--ccui-font-size-heading-5:16px;--ccui-line-height-lg:1.5;--ccui-line-height-sm:1.66;--ccui-line-height-heading-1:1.21052;--ccui-line-height-heading-2:1.26666;--ccui-line-height-heading-3:1.33333;--ccui-line-height-heading-4:1.4;--ccui-line-height-heading-5:1.5;--ccui-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--ccui-font-family-code:SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;--ccui-control-height:32px;--ccui-control-height-sm:24px;--ccui-control-height-lg:40px;--ccui-control-height-xs:16px;--ccui-box-shadow:0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;--ccui-box-shadow-secondary:0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;--ccui-box-shadow-tertiary:0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005;--ccui-motion-duration-slow:.3s;--ccui-motion-duration-mid:.2s;--ccui-motion-duration-fast:.1s;--ccui-motion-ease-in-out:cubic-bezier(.645, .045, .355, 1);--ccui-motion-ease-out:cubic-bezier(.215, .61, .355, 1);--ccui-motion-ease-in:cubic-bezier(.55, .055, .675, .19);--ccui-motion-ease-out-back:cubic-bezier(.12, .4, .29, 1.46);--ccui-motion-ease-in-back:cubic-bezier(.71, -.46, .88, .6);--ccui-motion-ease-out-circ:cubic-bezier(.08, .82, .17, 1);--ccui-motion-ease-in-out-circ:cubic-bezier(.78, .14, .15, .86);--ccui-padding-xxs:4px;--ccui-padding-xs:8px;--ccui-padding-sm:12px;--ccui-padding:16px;--ccui-padding-md:20px;--ccui-padding-lg:24px;--ccui-padding-xl:32px;--ccui-margin-xxs:4px;--ccui-margin-xs:8px;--ccui-margin-sm:12px;--ccui-margin:16px;--ccui-margin-md:20px;--ccui-margin-lg:24px;--ccui-margin-xl:32px}.ccui-tag{height:auto;font-size:var(--ccui-font-size-sm,12px);white-space:nowrap;background:var(--ccui-color-fill-quaternary,#00000005);border:1px solid var(--ccui-color-border,#d9d9d9);border-radius:var(--ccui-border-radius-sm,4px);opacity:1;transition:all var(--ccui-motion-duration-mid,.2s);color:var(--ccui-color-text,#000000e0);align-items:center;padding-inline:7px;line-height:20px;display:inline-flex}.ccui-tag__icon{align-items:center;margin-inline-end:4px;display:inline-flex}.ccui-tag__icon svg,.ccui-tag__icon i{width:12px;height:12px}.ccui-tag__content{align-items:center;display:inline-flex}.ccui-tag__close{color:#00000073;cursor:pointer;transition:color var(--ccui-motion-duration-mid,.2s);justify-content:center;align-items:center;margin-inline-start:6px;font-size:10px;display:inline-flex}.ccui-tag__close:hover{color:var(--ccui-color-text,#000000e0)}.ccui-tag--borderless{border-color:#0000}.ccui-tag--has-color{color:var(--ccui-color-text-light-solid,#fff);border-color:#0000}.ccui-tag--has-color .ccui-tag__close{color:#ffffffd9}.ccui-tag--has-color .ccui-tag__close:hover{color:#fff}.ccui-tag--default{background:var(--ccui-color-fill-quaternary,#00000005);border-color:var(--ccui-color-border,#d9d9d9);color:var(--ccui-color-text,#000000e0)}.ccui-tag--primary,.ccui-tag--processing{background:var(--ccui-color-primary-bg,#e6f4ff);border-color:var(--ccui-color-primary-border,#91caff);color:var(--ccui-color-primary,#1677ff)}.ccui-tag--processing:before{content:"";background:var(--ccui-color-primary,#1677ff);width:6px;height:6px;animation:ccui-tag-processing-pulse 1.6s var(--ccui-motion-ease-in-out-circ,cubic-bezier(.78, .14, .15, .86)) infinite;border-radius:50%;margin-inline-end:6px;display:inline-block}.ccui-tag--success{background:var(--ccui-color-success-bg,#f6ffed);border-color:var(--ccui-color-success-border,#b7eb8f);color:var(--ccui-color-success,#52c41a)}.ccui-tag--warning{background:var(--ccui-color-warning-bg,#fffbe6);border-color:var(--ccui-color-warning-border,#ffe58f);color:var(--ccui-color-warning,#faad14)}.ccui-tag--error{background:var(--ccui-color-error-bg,#fff2f0);border-color:var(--ccui-color-error-border,#ffccc7);color:var(--ccui-color-error,#ff4d4f)}.ccui-tag--magenta{background:var(--ccui-magenta-1);border-color:var(--ccui-magenta-3);color:var(--ccui-magenta-7)}.ccui-tag--red{background:var(--ccui-red-1);border-color:var(--ccui-red-3);color:var(--ccui-red-7)}.ccui-tag--volcano{background:var(--ccui-volcano-1);border-color:var(--ccui-volcano-3);color:var(--ccui-volcano-7)}.ccui-tag--orange{background:var(--ccui-orange-1);border-color:var(--ccui-orange-3);color:var(--ccui-orange-7)}.ccui-tag--gold{background:var(--ccui-gold-1);border-color:var(--ccui-gold-3);color:var(--ccui-gold-7)}.ccui-tag--lime{background:var(--ccui-lime-1);border-color:var(--ccui-lime-3);color:var(--ccui-lime-7)}.ccui-tag--green{background:var(--ccui-green-1);border-color:var(--ccui-green-3);color:var(--ccui-green-7)}.ccui-tag--cyan{background:var(--ccui-cyan-1);border-color:var(--ccui-cyan-3);color:var(--ccui-cyan-7)}.ccui-tag--blue{background:var(--ccui-blue-1);border-color:var(--ccui-blue-3);color:var(--ccui-blue-7)}.ccui-tag--geekblue{background:var(--ccui-geekblue-1);border-color:var(--ccui-geekblue-3);color:var(--ccui-geekblue-7)}.ccui-tag--purple{background:var(--ccui-purple-1);border-color:var(--ccui-purple-3);color:var(--ccui-purple-7)}@keyframes ccui-tag-processing-pulse{0%,to{opacity:.4;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
+/*$vite$:1*/

package/tag/index.es.js

@@ -0,0 +1,116 @@
+import { computed as e, createVNode as t, defineComponent as n } from "vue";
+//#region ../ccui/ui/shared/hooks/use-namespace.ts
+function r(e, t, n) {
+	let r = e;
+	return t && (r += `__${t}`), n && (r += `--${n}`), r;
+}
+function i(e, t = !1) {
+	let n = t ? `.ccui-${e}` : `ccui-${e}`;
+	return {
+		b: () => r(n),
+		e: (e) => e ? r(n, e) : "",
+		m: (e) => e ? r(n, "", e) : "",
+		em: (e, t) => e && t ? r(n, e, t) : "",
+		is: (e) => `is-${e}`
+	};
+}
+//#endregion
+//#region ../ccui/ui/tag/src/tag-types.ts
+var a = {
+	color: {
+		type: String,
+		default: "default"
+	},
+	variant: {
+		type: String,
+		default: void 0
+	},
+	bordered: {
+		type: Boolean,
+		default: !0
+	},
+	closable: {
+		type: Boolean,
+		default: !1
+	},
+	icon: {
+		type: String,
+		default: ""
+	}
+}, o = new Set([
+	"default",
+	"primary",
+	"success",
+	"processing",
+	"error",
+	"warning",
+	"magenta",
+	"red",
+	"volcano",
+	"orange",
+	"gold",
+	"lime",
+	"green",
+	"cyan",
+	"blue",
+	"geekblue",
+	"purple"
+]);
+function s(e) {
+	return o.has(e);
+}
+//#endregion
+//#region ../ccui/ui/tag/src/tag.tsx
+var c = /* @__PURE__ */ n({
+	name: "CTag",
+	props: a,
+	emits: ["close"],
+	setup(n, { slots: r, emit: a }) {
+		let o = i("tag"), c = e(() => s(n.color)), l = e(() => n.variant ? n.variant : n.bordered ? "outlined" : "filled"), u = e(() => ({
+			[o.b()]: !0,
+			[o.m(n.color)]: c.value,
+			[o.m(`variant-${l.value}`)]: !0,
+			[o.m("borderless")]: l.value !== "outlined",
+			[o.m("has-color")]: !c.value && !!n.color
+		})), d = e(() => {
+			if (!(c.value || !n.color)) return {
+				backgroundColor: n.color,
+				borderColor: n.color
+			};
+		}), f = (e) => {
+			e.stopPropagation(), a("close", e);
+		};
+		return () => t("span", {
+			class: u.value,
+			style: d.value
+		}, [
+			r.icon ? t("span", { class: o.e("icon") }, [r.icon()]) : n.icon && t("i", { class: [o.e("icon"), n.icon] }, null),
+			t("span", { class: o.e("content") }, [r.default?.()]),
+			n.closable && t("span", {
+				class: o.e("close"),
+				onClick: f
+			}, [t("svg", {
+				viewBox: "64 64 896 896",
+				width: "1em",
+				height: "1em",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [t("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }, null)])])
+		]);
+	}
+});
+//#endregion
+//#region ../ccui/ui/tag/index.ts
+c.install = function(e) {
+	e.component(c.name, c);
+};
+var l = {
+	title: "Tag 标签",
+	category: "数据展示",
+	status: "100%",
+	install(e) {
+		e.component(c.name, c);
+	}
+};
+//#endregion
+export { c as Tag, l as default };

package/tag/index.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.index={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function n(e,t,n){let r=e;return t&&(r+=`__${t}`),n&&(r+=`--${n}`),r}function r(e,t=!1){let r=t?`.ccui-${e}`:`ccui-${e}`;return{b:()=>n(r),e:e=>e?n(r,e):``,m:e=>e?n(r,``,e):``,em:(e,t)=>e&&t?n(r,e,t):``,is:e=>`is-${e}`}}var i={color:{type:String,default:`default`},variant:{type:String,default:void 0},bordered:{type:Boolean,default:!0},closable:{type:Boolean,default:!1},icon:{type:String,default:``}},a=new Set([`default`,`primary`,`success`,`processing`,`error`,`warning`,`magenta`,`red`,`volcano`,`orange`,`gold`,`lime`,`green`,`cyan`,`blue`,`geekblue`,`purple`]);function o(e){return a.has(e)}var s=(0,t.defineComponent)({name:`CTag`,props:i,emits:[`close`],setup(e,{slots:n,emit:i}){let a=r(`tag`),s=(0,t.computed)(()=>o(e.color)),c=(0,t.computed)(()=>e.variant?e.variant:e.bordered?`outlined`:`filled`),l=(0,t.computed)(()=>({[a.b()]:!0,[a.m(e.color)]:s.value,[a.m(`variant-${c.value}`)]:!0,[a.m(`borderless`)]:c.value!==`outlined`,[a.m(`has-color`)]:!s.value&&!!e.color})),u=(0,t.computed)(()=>{if(!(s.value||!e.color))return{backgroundColor:e.color,borderColor:e.color}}),d=e=>{e.stopPropagation(),i(`close`,e)};return()=>(0,t.createVNode)(`span`,{class:l.value,style:u.value},[n.icon?(0,t.createVNode)(`span`,{class:a.e(`icon`)},[n.icon()]):e.icon&&(0,t.createVNode)(`i`,{class:[a.e(`icon`),e.icon]},null),(0,t.createVNode)(`span`,{class:a.e(`content`)},[n.default?.()]),e.closable&&(0,t.createVNode)(`span`,{class:a.e(`close`),onClick:d},[(0,t.createVNode)(`svg`,{viewBox:`64 64 896 896`,width:`1em`,height:`1em`,fill:`currentColor`,"aria-hidden":`true`},[(0,t.createVNode)(`path`,{d:`M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z`},null)])])])}});s.install=function(e){e.component(s.name,s)},e.Tag=s,e.default={title:`Tag 标签`,category:`数据展示`,status:`100%`,install(e){e.component(s.name,s)}}});

package/theme/darkTheme.css

@@ -0,0 +1,352 @@
+.dark{
+--ccui-global-bg: #000000;
+--ccui-global-bg-normal: #141414;
+--ccui-base-bg: #141414;
+--ccui-base-bg-dark: #000000;
+--ccui-brand: #1668dc;
+--ccui-brand-foil: #111a2c;
+--ccui-brand-hover: #3c89e8;
+--ccui-brand-active: #1554ad;
+--ccui-brand-active-focus: #103e85;
+--ccui-contrast: #dc4446;
+--ccui-text: rgba(255, 255, 255, 0.85);
+--ccui-text-weak: rgba(255, 255, 255, 0.65);
+--ccui-aide-text: rgba(255, 255, 255, 0.45);
+--ccui-aide-text-stress: rgba(255, 255, 255, 0.65);
+--ccui-placeholder: rgba(255, 255, 255, 0.25);
+--ccui-light-text: #ffffff;
+--ccui-dark-text: rgba(255, 255, 255, 0.85);
+--ccui-link: #1668dc;
+--ccui-link-active: #1554ad;
+--ccui-link-light: #3c89e8;
+--ccui-link-light-active: #65a9f3;
+--ccui-line: #424242;
+--ccui-dividing-line: #303030;
+--ccui-block: #1f1f1f;
+--ccui-area: #1f1f1f;
+--ccui-danger: #dc4446;
+--ccui-warning: #d89614;
+--ccui-waiting: rgba(255, 255, 255, 0.45);
+--ccui-success: #49aa19;
+--ccui-info: #1668dc;
+--ccui-initial: #111a2c;
+--ccui-unavailable: #1f1f1f;
+--ccui-shadow: rgba(0, 0, 0, 0.4);
+--ccui-light-shadow: rgba(0, 0, 0, 0.2);
+--ccui-icon-text: rgba(255, 255, 255, 0.85);
+--ccui-icon-bg: #141414;
+--ccui-icon-fill: rgba(255, 255, 255, 0.45);
+--ccui-icon-fill-hover: rgba(255, 255, 255, 0.65);
+--ccui-icon-fill-active: #1668dc;
+--ccui-icon-fill-active-hover: #3c89e8;
+--ccui-form-control-line: #424242;
+--ccui-form-control-line-hover: #3c89e8;
+--ccui-form-control-line-active: #1668dc;
+--ccui-form-control-line-active-hover: #1554ad;
+--ccui-list-item-active-bg: #1668dc;
+--ccui-list-item-active-text: rgba(255, 255, 255, 0.85);
+--ccui-list-item-active-hover-bg: #3c89e8;
+--ccui-list-item-hover-bg: rgba(255, 255, 255, 0.08);
+--ccui-list-item-hover-text: #3c89e8;
+--ccui-list-item-selected-bg: #111a2c;
+--ccui-list-item-strip-bg: #1f1f1f;
+--ccui-disabled-bg: rgba(255, 255, 255, 0.08);
+--ccui-disabled-line: #424242;
+--ccui-disabled-text: rgba(255, 255, 255, 0.25);
+--ccui-primary-disabled: #15325b;
+--ccui-icon-fill-active-disabled: #15325b;
+--ccui-label-bg: #1f1f1f;
+--ccui-connected-overlay-bg: #1f1f1f;
+--ccui-connected-overlay-line: #1668dc;
+--ccui-fullscreen-overlay-bg: #141414;
+--ccui-feedback-overlay-bg: rgba(255, 255, 255, 0.85);
+--ccui-feedback-overlay-text: #000000;
+--ccui-embed-search-bg: #1f1f1f;
+--ccui-embed-search-bg-hover: #262626;
+--ccui-float-block-shadow: rgba(22, 104, 220, 0.32);
+--ccui-highlight-overlay: rgba(0, 0, 0, 0.45);
+--ccui-range-item-hover-bg: #111a2c;
+--ccui-primary: #1668dc;
+--ccui-primary-hover: #3c89e8;
+--ccui-primary-active: #1554ad;
+--ccui-contrast-hover: #e86e6b;
+--ccui-contrast-active: #ad2d2c;
+--ccui-secondary: rgba(255, 255, 255, 0.65);
+--ccui-danger-line: #58181c;
+--ccui-danger-bg: #2a1215;
+--ccui-warning-line: #594214;
+--ccui-warning-bg: #2b2111;
+--ccui-info-line: #15325b;
+--ccui-info-bg: #111a2c;
+--ccui-success-line: #274916;
+--ccui-success-bg: #162312;
+--ccui-primary-line: #15325b;
+--ccui-primary-bg: #111a2c;
+--ccui-default-line: #424242;
+--ccui-default-bg: #1f1f1f;
+--ccui-font-size: 14px;
+--ccui-font-size-card-title: 16px;
+--ccui-font-size-page-title: 20px;
+--ccui-font-size-modal-title: 16px;
+--ccui-font-size-price: 24px;
+--ccui-font-size-data-overview: 30px;
+--ccui-font-size-icon: 16px;
+--ccui-font-size-sm: 12px;
+--ccui-font-size-md: 14px;
+--ccui-font-size-lg: 16px;
+--ccui-font-title-weight: 600;
+--ccui-font-content-weight: 400;
+--ccui-line-height-base: 1.5714285714285714;
+--ccui-border-radius: 6px;
+--ccui-border-radius-feedback: 8px;
+--ccui-border-radius-card: 8px;
+--ccui-shadow-length-base: 0 1px 2px 0;
+--ccui-shadow-length-slide-left: -6px 0 16px 0;
+--ccui-shadow-length-slide-right: 6px 0 16px 0;
+--ccui-shadow-length-connected-overlay: 0 6px 16px 0;
+--ccui-shadow-length-hover: 0 6px 16px 0;
+--ccui-shadow-length-feedback-overlay: 0 6px 16px 0;
+--ccui-shadow-fullscreen-overlay: 0 6px 16px 0;
+--ccui-animation-duration-slow: 0.3s;
+--ccui-animation-duration-base: 0.2s;
+--ccui-animation-duration-fast: 0.1s;
+--ccui-animation-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+--ccui-animation-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+--ccui-animation-ease-in-out: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+--ccui-animation-ease-in-smooth: cubic-bezier(0.645, 0.045, 0.355, 1);
+--ccui-animation-linear: cubic-bezier(0, 0, 1, 1);
+--ccui-z-index-full-page-overlay: 1080;
+--ccui-z-index-pop-up: 1060;
+--ccui-z-index-dropdown: 1052;
+--ccui-z-index-modal: 1050;
+--ccui-z-index-drawer: 1040;
+--ccui-z-index-framework: 1000;
+--ccui-size-sm: 24px;
+--ccui-size-md: 32px;
+--ccui-size-lg: 40px;
+--ccui-color-primary: #1668dc;
+--ccui-color-primary-hover: #3c89e8;
+--ccui-color-primary-active: #1554ad;
+--ccui-color-primary-bg: #111a2c;
+--ccui-color-primary-bg-hover: #112545;
+--ccui-color-primary-border: #15325b;
+--ccui-color-primary-border-hover: #15417e;
+--ccui-color-success: #49aa19;
+--ccui-color-success-hover: #6abe39;
+--ccui-color-success-active: #3c8618;
+--ccui-color-success-bg: #162312;
+--ccui-color-success-border: #274916;
+--ccui-color-warning: #d89614;
+--ccui-color-warning-hover: #e8b339;
+--ccui-color-warning-active: #aa7714;
+--ccui-color-warning-bg: #2b2111;
+--ccui-color-warning-border: #594214;
+--ccui-color-error: #dc4446;
+--ccui-color-error-hover: #e86e6b;
+--ccui-color-error-active: #ad2d2c;
+--ccui-color-error-bg: #2a1215;
+--ccui-color-error-border: #58181c;
+--ccui-color-info: #1668dc;
+--ccui-color-info-hover: #3c89e8;
+--ccui-color-info-bg: #111a2c;
+--ccui-color-info-border: #15325b;
+--ccui-color-text: rgba(255, 255, 255, 0.85);
+--ccui-color-text-secondary: rgba(255, 255, 255, 0.65);
+--ccui-color-text-tertiary: rgba(255, 255, 255, 0.45);
+--ccui-color-text-quaternary: rgba(255, 255, 255, 0.25);
+--ccui-color-text-disabled: rgba(255, 255, 255, 0.25);
+--ccui-color-text-placeholder: rgba(255, 255, 255, 0.25);
+--ccui-color-text-heading: rgba(255, 255, 255, 0.85);
+--ccui-color-text-light-solid: #ffffff;
+--ccui-color-bg-base: #000000;
+--ccui-color-bg-container: #141414;
+--ccui-color-bg-elevated: #1f1f1f;
+--ccui-color-bg-layout: #000000;
+--ccui-color-bg-spotlight: #424242;
+--ccui-color-bg-mask: rgba(0, 0, 0, 0.45);
+--ccui-color-bg-text-hover: rgba(255, 255, 255, 0.06);
+--ccui-color-bg-text-active: rgba(255, 255, 255, 0.15);
+--ccui-color-border: #424242;
+--ccui-color-border-secondary: #303030;
+--ccui-color-border-disabled: rgba(255, 255, 255, 0.08);
+--ccui-color-split: rgba(253, 253, 253, 0.12);
+--ccui-color-fill: rgba(255, 255, 255, 0.18);
+--ccui-color-fill-secondary: rgba(255, 255, 255, 0.12);
+--ccui-color-fill-tertiary: rgba(255, 255, 255, 0.08);
+--ccui-color-fill-quaternary: rgba(255, 255, 255, 0.04);
+--ccui-control-outline: rgba(22, 104, 220, 0.2);
+--ccui-control-outline-error: rgba(220, 68, 70, 0.2);
+--ccui-control-outline-warning: rgba(216, 150, 20, 0.2);
+--ccui-red-1: #2a1215;
+--ccui-red-2: #431418;
+--ccui-red-3: #58181c;
+--ccui-red-4: #791a1f;
+--ccui-red-5: #a61d24;
+--ccui-red-6: #d32029;
+--ccui-red-7: #e84749;
+--ccui-red-8: #f37370;
+--ccui-red-9: #f89f9a;
+--ccui-red-10: #fac8c3;
+--ccui-volcano-1: #2b1611;
+--ccui-volcano-2: #441d12;
+--ccui-volcano-3: #592716;
+--ccui-volcano-4: #7c3118;
+--ccui-volcano-5: #aa3e19;
+--ccui-volcano-6: #d84a1b;
+--ccui-volcano-7: #e87040;
+--ccui-volcano-8: #f3956a;
+--ccui-volcano-9: #f8b692;
+--ccui-volcano-10: #fad4bc;
+--ccui-orange-1: #2b1d11;
+--ccui-orange-2: #442a11;
+--ccui-orange-3: #593815;
+--ccui-orange-4: #7c4a15;
+--ccui-orange-5: #aa6215;
+--ccui-orange-6: #d87a16;
+--ccui-orange-7: #e89a3c;
+--ccui-orange-8: #f3b765;
+--ccui-orange-9: #f8cf8d;
+--ccui-orange-10: #fae3b7;
+--ccui-gold-1: #2b2111;
+--ccui-gold-2: #443111;
+--ccui-gold-3: #594214;
+--ccui-gold-4: #7c5914;
+--ccui-gold-5: #aa7714;
+--ccui-gold-6: #d89614;
+--ccui-gold-7: #e8b339;
+--ccui-gold-8: #f3cc62;
+--ccui-gold-9: #f8df8b;
+--ccui-gold-10: #faedb5;
+--ccui-yellow-1: #2b2611;
+--ccui-yellow-2: #443b11;
+--ccui-yellow-3: #595014;
+--ccui-yellow-4: #7c6e14;
+--ccui-yellow-5: #aa9514;
+--ccui-yellow-6: #d8bd14;
+--ccui-yellow-7: #e8d639;
+--ccui-yellow-8: #f3ea62;
+--ccui-yellow-9: #f8f48b;
+--ccui-yellow-10: #fafab5;
+--ccui-lime-1: #1f2611;
+--ccui-lime-2: #2e3c10;
+--ccui-lime-3: #3e4f13;
+--ccui-lime-4: #5d7916;
+--ccui-lime-5: #7da919;
+--ccui-lime-6: #8bbb16;
+--ccui-lime-7: #a9d134;
+--ccui-lime-8: #c9e75d;
+--ccui-lime-9: #e4f88b;
+--ccui-lime-10: #f0fcb4;
+--ccui-green-1: #162312;
+--ccui-green-2: #1d3712;
+--ccui-green-3: #274916;
+--ccui-green-4: #306317;
+--ccui-green-5: #3c8618;
+--ccui-green-6: #49aa19;
+--ccui-green-7: #6abe39;
+--ccui-green-8: #8fd460;
+--ccui-green-9: #b2e58b;
+--ccui-green-10: #d5f2bb;
+--ccui-cyan-1: #112123;
+--ccui-cyan-2: #113536;
+--ccui-cyan-3: #144848;
+--ccui-cyan-4: #146262;
+--ccui-cyan-5: #138585;
+--ccui-cyan-6: #13a8a8;
+--ccui-cyan-7: #33bcb7;
+--ccui-cyan-8: #58d1c9;
+--ccui-cyan-9: #84e2d8;
+--ccui-cyan-10: #b2f1e8;
+--ccui-blue-1: #111a2c;
+--ccui-blue-2: #112545;
+--ccui-blue-3: #15325b;
+--ccui-blue-4: #15417e;
+--ccui-blue-5: #1554ad;
+--ccui-blue-6: #1668dc;
+--ccui-blue-7: #3c89e8;
+--ccui-blue-8: #65a9f3;
+--ccui-blue-9: #8dbff9;
+--ccui-blue-10: #b7dcfa;
+--ccui-geekblue-1: #131629;
+--ccui-geekblue-2: #161d40;
+--ccui-geekblue-3: #1c2755;
+--ccui-geekblue-4: #203175;
+--ccui-geekblue-5: #263ea0;
+--ccui-geekblue-6: #2b4acb;
+--ccui-geekblue-7: #5273e0;
+--ccui-geekblue-8: #7f9ef3;
+--ccui-geekblue-9: #a8c1f8;
+--ccui-geekblue-10: #d2e0fa;
+--ccui-purple-1: #1a1325;
+--ccui-purple-2: #24163a;
+--ccui-purple-3: #301c4d;
+--ccui-purple-4: #3e2069;
+--ccui-purple-5: #51258f;
+--ccui-purple-6: #642ab5;
+--ccui-purple-7: #854eca;
+--ccui-purple-8: #ab7ae0;
+--ccui-purple-9: #cda8f0;
+--ccui-purple-10: #ebd7fa;
+--ccui-magenta-1: #291321;
+--ccui-magenta-2: #40162f;
+--ccui-magenta-3: #551c3b;
+--ccui-magenta-4: #75204f;
+--ccui-magenta-5: #a02669;
+--ccui-magenta-6: #cb2b83;
+--ccui-magenta-7: #e0529c;
+--ccui-magenta-8: #f37fb7;
+--ccui-magenta-9: #f8a8cc;
+--ccui-magenta-10: #fad2e3;
+--ccui-pink-1: #291321;
+--ccui-pink-6: #cb2b83;
+--ccui-border-radius-lg: 8px;
+--ccui-border-radius-sm: 4px;
+--ccui-border-radius-xs: 2px;
+--ccui-border-radius-outer: 4px;
+--ccui-font-size-xl: 20px;
+--ccui-font-size-heading-1: 38px;
+--ccui-font-size-heading-2: 30px;
+--ccui-font-size-heading-3: 24px;
+--ccui-font-size-heading-4: 20px;
+--ccui-font-size-heading-5: 16px;
+--ccui-line-height-lg: 1.5;
+--ccui-line-height-sm: 1.66;
+--ccui-line-height-heading-1: 1.21052;
+--ccui-line-height-heading-2: 1.26666;
+--ccui-line-height-heading-3: 1.33333;
+--ccui-line-height-heading-4: 1.4;
+--ccui-line-height-heading-5: 1.5;
+--ccui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+--ccui-font-family-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+--ccui-control-height: 32px;
+--ccui-control-height-sm: 24px;
+--ccui-control-height-lg: 40px;
+--ccui-control-height-xs: 16px;
+--ccui-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
+--ccui-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
+--ccui-box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+--ccui-motion-duration-slow: 0.3s;
+--ccui-motion-duration-mid: 0.2s;
+--ccui-motion-duration-fast: 0.1s;
+--ccui-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+--ccui-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+--ccui-motion-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+--ccui-motion-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+--ccui-motion-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+--ccui-motion-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+--ccui-motion-ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+--ccui-padding-xxs: 4px;
+--ccui-padding-xs: 8px;
+--ccui-padding-sm: 12px;
+--ccui-padding: 16px;
+--ccui-padding-md: 20px;
+--ccui-padding-lg: 24px;
+--ccui-padding-xl: 32px;
+--ccui-margin-xxs: 4px;
+--ccui-margin-xs: 8px;
+--ccui-margin-sm: 12px;
+--ccui-margin: 16px;
+--ccui-margin-md: 20px;
+--ccui-margin-lg: 24px;
+--ccui-margin-xl: 32px
+}