oficina / estilo Public

Merge branch 'feat-meet-web-primitives' into main

claude agent, operated by paul@keymail.dev pushed by paul@keymail.dev d3d7c081922d7c93dbef4ead18703ab2348c2ec0 parent 5b8a9daparent ce2a798
3 files changed, +110 −0
  • callui/callui.css +73 −0
  • callui/callui.go +11 −0
  • callui/tokens_test.go +26 −0

CI passed — run details

diff --git a/callui/callui.css b/callui/callui.css
new file mode 100644
index 0000000..86e3a29
--- /dev/null
+++ b/callui/callui.css
@@ -0,0 +1,73 @@
+[estilo-call-header] {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--rst-sp-4);
+ margin-block-end: var(--rst-sp-4);
+}
+[estilo-call-header] > * { min-inline-size: 0; }
+[estilo-call-header] h1 { margin: 0; overflow-wrap: anywhere; }
+[estilo-call-workspace] {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ gap: var(--rst-sp-4);
+ align-items: start;
+}
+[estilo-call-workspace] > * { min-inline-size: 0; }
+[estilo-call-panel] {
+ padding: var(--rst-sp-4);
+ border: 1px solid var(--rst-line);
+ border-radius: 1.25rem;
+ background: var(--rst-surface);
+}
+[estilo-call-actions] {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--rst-sp-2);
+ padding-block: var(--rst-sp-3);
+}
+[estilo-call-actions] button,
+[estilo-call-actions] a {
+ min-inline-size: 44px;
+ min-block-size: 44px;
+ border-radius: 14px;
+}
+[estilo-call-actions] svg { flex: none; inline-size: 20px; block-size: 20px; }
+[estilo-call-actions] [aria-pressed='true'] {
+ box-shadow: inset 0 0 0 2px currentColor;
+ font-weight: 700;
+}
+[estilo-call-segmented] {
+ display: flex;
+ padding: 3px;
+ border: 1px solid var(--rst-line);
+ border-radius: 12px;
+ background: var(--rst-surface-2);
+}
+[estilo-call-segmented] button {
+ min-inline-size: 64px;
+ min-block-size: 44px;
+ border: 1px solid transparent;
+ border-radius: 9px;
+ background: transparent;
+ color: var(--rst-text);
+ font: inherit;
+ cursor: pointer;
+}
+[estilo-call-segmented] [aria-pressed='true'] {
+ background: var(--rst-surface);
+ border-color: var(--rst-line);
+ font-weight: 700;
+}
+[estilo-call-segmented] button:focus-visible {
+ outline: 2px solid var(--rst-accent);
+ outline-offset: 2px;
+}
+[estilo-call-actions][hidden],
+[estilo-call-segmented][hidden],
+[estilo-call-workspace][hidden] { display: none; }
+@media (min-width: 64rem) {
+ [estilo-call-workspace~='sidebar'] { grid-template-columns: minmax(0, 1fr) 20rem; }
+}
diff --git a/callui/callui.go b/callui/callui.go
new file mode 100644
index 0000000..a4cfcfa
--- /dev/null
+++ b/callui/callui.go
@@ -0,0 +1,11 @@
+// Package callui styles a call workspace and its controls. Meet is its first consumer.
+// It contains no language strings or script: callers supply translated labels,
+// state attributes and any media or panel behavior.
+package callui
+
+import _ "embed"
+
+//go:embed callui.css
+var css []byte
+
+func CSS() []byte { return append([]byte(nil), css...) }
diff --git a/callui/tokens_test.go b/callui/tokens_test.go
new file mode 100644
index 0000000..12b5fe8
--- /dev/null
+++ b/callui/tokens_test.go
@@ -0,0 +1,26 @@
+package callui
+
+import (
+ "amadan.net/oficina/estilo.git/theme"
+ "github.com/carlosframework/rastrillo/ui"
+ "regexp"
+ "testing"
+)
+
+// Mutation-checked: the former undefined --rst-border reference must fail.
+func TestCallStylesUseDefinedTokens(t *testing.T) {
+ definitions := map[string]bool{}
+ styles := append(append([]byte{}, ui.TokensCSS()...), theme.CSS()...)
+ for _, m := range regexp.MustCompile(`(--rst-[a-z0-9-]+)\s*:`).FindAllSubmatch(styles, -1) {
+ definitions[string(m[1])] = true
+ }
+ references := regexp.MustCompile(`var\(\s*(--rst-[a-z0-9-]+)`).FindAllSubmatch(CSS(), -1)
+ if len(references) == 0 {
+ t.Fatal("call token reference disappeared")
+ }
+ for _, m := range references {
+ if !definitions[string(m[1])] {
+ t.Fatal("call stylesheet uses undefined token", string(m[1]))
+ }
+ }
+}