Zayin/Ekklesia
3
0
Fork 0
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases 9 Wiki Activity

feat: establish shared Ekklesia design system
CI / verify (pull_request) Successful in 48s
Details
CI / infrastructure-smoke (pull_request) Successful in 20s
Details
CI / migration-smoke (pull_request) Successful in 1m47s
Details

Browse Source
This commit is contained in:
ekklesia
2026-09-30 18:21:09 -05:00
parent 3ca6b2cb32
commit 3a26ef49ad
9 changed files with 336 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles.ts
+111 -7
View File
@@ -44,6 +44,7 @@ export const EKKLESIA_UI_STYLESHEET = `
align-items: center;
border: ${designToken("border.width")} solid transparent;
border-radius: ${designToken("radius.md")};
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
font-family: inherit;
@@ -72,11 +73,11 @@ export const EKKLESIA_UI_STYLESHEET = `
}
.ek-button--primary:hover:not(:disabled) {
background: ${designToken("accent.strong")};
background: ${designToken("accent.hover")};
}
.ek-button--primary:active:not(:disabled) {
background: ${designToken("accent.strong")};
background: ${designToken("accent.active")};
}
.ek-button--secondary {
@@ -160,9 +161,10 @@ export const EKKLESIA_UI_STYLESHEET = `
}
.ek-control {
background: ${designToken("background.inset")};
background: ${designToken("background.surface")};
border: ${designToken("border.width")} solid ${designToken("border.base")};
border-radius: ${designToken("radius.md")};
box-sizing: border-box;
color: ${designToken("text.primary")};
font-family: inherit;
font-size: ${designToken("typography.size-sm")};
@@ -212,9 +214,10 @@ export const EKKLESIA_UI_STYLESHEET = `
border: ${designToken("border.width")} solid ${designToken("border.base")};
border-radius: ${designToken("radius.lg")};
box-shadow: ${designToken("shadow.sm")};
box-sizing: border-box;
display: grid;
gap: ${designToken("spacing.md")};
padding: ${designToken("spacing.lg")};
gap: ${designToken("spacing.lg")};
padding: ${designToken("spacing.xl")};
}
.ek-panel--raised {
@@ -223,12 +226,17 @@ export const EKKLESIA_UI_STYLESHEET = `
}
.ek-panel__header {
align-items: baseline;
align-items: flex-start;
display: flex;
gap: ${designToken("spacing.md")};
justify-content: space-between;
}
.ek-panel__heading {
display: grid;
gap: ${designToken("spacing.xs")};
}
.ek-panel__title {
font-size: ${designToken("typography.size-heading-3")};
font-weight: ${designToken("typography.weight-bold")};
@@ -281,7 +289,7 @@ export const EKKLESIA_UI_STYLESHEET = `
.ek-tabs__list {
border-bottom: ${designToken("border.width")} solid ${designToken("border.divider")};
display: flex;
gap: ${designToken("spacing.xs")};
gap: ${designToken("spacing.sm")};
}
.ek-tab {
@@ -293,6 +301,7 @@ export const EKKLESIA_UI_STYLESHEET = `
font-family: inherit;
font-size: ${designToken("typography.size-sm")};
font-weight: ${designToken("typography.weight-medium")};
border-radius: ${designToken("radius.md")} ${designToken("radius.md")} 0 0;
padding: ${designToken("spacing.sm")} ${designToken("spacing.md")};
}
@@ -302,6 +311,7 @@ export const EKKLESIA_UI_STYLESHEET = `
}
.ek-tab[aria-selected="true"] {
background: ${designToken("accent.subtle")};
border-bottom-color: ${designToken("accent.base")};
color: ${designToken("state.selected-foreground")};
}
@@ -440,6 +450,7 @@ export const EKKLESIA_UI_STYLESHEET = `
}
.ek-message {
background: ${designToken("background.canvas")};
align-items: center;
border: ${designToken("border.width")} dashed ${designToken("border.base")};
border-radius: ${designToken("radius.lg")};
@@ -450,6 +461,99 @@ export const EKKLESIA_UI_STYLESHEET = `
text-align: center;
}
.ek-page-header {
align-items: flex-end;
display: flex;
gap: ${designToken("spacing.xl")};
justify-content: space-between;
}
.ek-page-header__copy {
display: grid;
gap: ${designToken("spacing.xs")};
}
.ek-page-header__eyebrow {
color: ${designToken("accent.strong")};
font-size: ${designToken("typography.size-xs")};
font-weight: ${designToken("typography.weight-bold")};
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ek-page-header__title {
font-size: ${designToken("typography.size-heading-1")};
font-weight: ${designToken("typography.weight-bold")};
line-height: ${designToken("typography.line-height-tight")};
margin: 0;
}
.ek-page-header__description {
color: ${designToken("text.secondary")};
margin: 0;
max-width: 64ch;
}
.ek-page-header__actions,
.ek-action-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: ${designToken("spacing.sm")};
}
.ek-notice {
align-items: flex-start;
background: ${designToken("background.inset")};
border: ${designToken("border.width")} solid ${designToken("border.base")};
border-radius: ${designToken("radius.md")};
color: ${designToken("text.secondary")};
display: flex;
font-size: ${designToken("typography.size-sm")};
gap: ${designToken("spacing.sm")};
padding: ${designToken("spacing.md")};
}
.ek-notice--info {
background: ${designToken("status.info-background")};
border-color: ${designToken("status.info-border")};
}
.ek-notice--success {
background: ${designToken("status.success-background")};
border-color: ${designToken("status.success-border")};
}
.ek-notice--warning {
background: ${designToken("status.warning-background")};
border-color: ${designToken("status.warning-border")};
}
.ek-notice--danger {
background: ${designToken("status.danger-background")};
border-color: ${designToken("status.danger-border")};
color: ${designToken("text.danger")};
}
.ek-notice__symbol,
.ek-notice__title {
color: ${designToken("text.primary")};
font-weight: ${designToken("typography.weight-bold")};
}
.ek-notice__body {
display: grid;
gap: ${designToken("spacing.2xs")};
}
@media (max-width: 48rem) {
.ek-page-header,
.ek-panel__header {
align-items: stretch;
flex-direction: column;
}
}
.ek-message__title {
font-size: ${designToken("typography.size-lg")};
font-weight: ${designToken("typography.weight-bold")};