@youversion/platform-core 1.21.0 → 1.22.0

package/src/styles/fonts.css

@@ -0,0 +1,5 @@
+/**
+  * Note: If you import this CSS file into another CSS file, you cannot
+  * import this into a layer since @import is not supported inside layers
+  */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+4:wght@400;700&display=swap');

package/src/styles/index.css

@@ -0,0 +1,3 @@
+@import './fonts.css';
+@import './theme.css';
+@import './bible-reader.css';

package/src/styles/theme.css

@@ -0,0 +1,300 @@
+/* Colors sourced from YV Brand Library in Figma */
+
+[data-yv-sdk] {
+  /* Brand colors */
+  --yv-red: oklch(from #ff3d4d l c h);
+  --yv-red-dark-mode: oklch(from #f04c59 l c h);
+  --yv-warm-neutral: oklch(from #f6efee l c h);
+  --yv-warm-neutral-dm: oklch(from #373231 l c h);
+
+  /* Expressive palette */
+  --yv-orange-10: oklch(from #faeceb l c h);
+  --yv-orange-20: oklch(from #e59f9a l c h);
+  --yv-orange-30-dm: oklch(from #f23b22 l c h);
+  --yv-orange-30: oklch(from #ca3e35 l c h);
+  --yv-orange-40: oklch(from #7a2629 l c h);
+  --yv-orange-50: oklch(from #3d1310 l c h);
+
+  --yv-teal-10: oklch(from #e6f2f3 l c h);
+  --yv-teal-20: oklch(from #80bdc4 l c h);
+  --yv-teal-30-dm: oklch(from #00909f l c h);
+  --yv-teal-30: oklch(from #007b89 l c h);
+  --yv-teal-40: oklch(from #004a52 l c h);
+  --yv-teal-50: oklch(from #002529 l c h);
+
+  --yv-green-10: oklch(from #eef6f0 l c h);
+  --yv-green-20: oklch(from #abd0b6 l c h);
+  --yv-green-30-dm: oklch(from #4aae67 l c h);
+  --yv-green-30: oklch(from #57a16c l c h);
+  --yv-green-40: oklch(from #346148 l c h);
+  --yv-green-50: oklch(from #1a3026 l c h);
+
+  --yv-purple-10: oklch(from #f2eef3 l c h);
+  --yv-purple-20: oklch(from #bca8c5 l c h);
+  --yv-purple-30-dm: oklch(from #8c51a6 l c h);
+  --yv-purple-30: oklch(from #79518a l c h);
+  --yv-purple-40: oklch(from #483550 l c h);
+  --yv-purple-50: oklch(from #241829 l c h);
+
+  --yv-magenta-10: oklch(from #f5eaee l c h);
+  --yv-magenta-20: oklch(from #cc96aa l c h);
+  --yv-magenta-30-dm: oklch(from #c3235f l c h);
+  --yv-magenta-30: oklch(from #992c55 l c h);
+  --yv-magenta-40: oklch(from #5c1a33 l c h);
+  --yv-magenta-50: oklch(from #2e0d19 l c h);
+
+  --yv-yellow-10: oklch(from #fef5eb l c h);
+  --yv-yellow-20: oklch(from #f8cb94 l c h);
+  --yv-yellow-30-dm: oklch(from #ffc24a l c h);
+  --yv-yellow-30: oklch(from #f19c33 l c h);
+  --yv-yellow-35: oklch(from #ce801f l c h);
+  --yv-yellow-40: oklch(from #975c11 l c h);
+  --yv-yellow-50: oklch(from #4c2d08 l c h);
+
+  --yv-blue-10: oklch(from #e7f2fd l c h);
+  --yv-blue-20: oklch(from #9ebce1 l c h);
+  --yv-blue-30-dm: oklch(from #2a85f4 l c h);
+  --yv-blue-30: oklch(from #3d79c2 l c h);
+  --yv-blue-40: oklch(from #29537a l c h);
+  --yv-blue-50: oklch(from #1c2a3b l c h);
+  --yv-blue-60: oklch(from #080e17 l c h);
+
+  /* Grayscale palette */
+  --yv-white: #ffffff;
+  --yv-gray-2: #fcfafa;
+  --yv-gray-5: #f6f4f4;
+  --yv-gray-10: #edebeb;
+  --yv-gray-15: #dddbdb;
+  --yv-gray-20: #bfbdbd;
+  --yv-gray-25: #828080;
+  --yv-gray-30: #636161;
+  --yv-gray-35: #474545;
+  --yv-gray-40: #353333;
+  --yv-gray-45: #232121;
+  --yv-gray-48: #1c1a1a;
+  --yv-gray-50: #121212;
+
+  --yv-background: var(--yv-white);
+  --yv-foreground: var(--yv-gray-50);
+  --yv-card: var(--yv-gray-2);
+  --yv-card-foreground: var(--yv-gray-50);
+  --yv-popover: var(--yv-white);
+  --yv-popover-foreground: var(--yv-gray-50);
+  --yv-primary: var(--yv-gray-50);
+  --yv-primary-foreground: var(--yv-white);
+  --yv-secondary: var(--yv-warm-neutral);
+  --yv-secondary-foreground: var(--yv-gray-50);
+  --yv-muted: var(--yv-gray-5);
+  --yv-muted-foreground: var(--yv-gray-30);
+  --yv-accent: var(--yv-gray-5);
+  --yv-accent-foreground: var(--yv-gray-50);
+  --yv-destructive: var(--yv-red);
+  --yv-destructive-foreground: var(--yv-white);
+  --yv-border: var(--yv-gray-15);
+  --yv-input: var(--yv-gray-5);
+  --yv-ring: var(--yv-blue-30);
+  --yv-chart-1: var(--yv-blue-30);
+  --yv-chart-2: var(--yv-green-30);
+  --yv-chart-3: var(--yv-purple-30);
+  --yv-chart-4: var(--yv-orange-30);
+  --yv-chart-5: var(--yv-magenta-30);
+  --yv-radius: 2rem;
+  --yv-sidebar: var(--yv-gray-2);
+  --yv-sidebar-foreground: var(--yv-gray-50);
+  --yv-sidebar-primary: var(--yv-teal-30);
+  --yv-sidebar-primary-foreground: var(--yv-white);
+  --yv-sidebar-accent: var(--yv-gray-5);
+  --yv-sidebar-accent-foreground: var(--yv-gray-50);
+  --yv-sidebar-border: var(--yv-gray-15);
+  --yv-sidebar-ring: var(--yv-blue-30);
+
+  --yv-font-sans: 'Inter', sans-serif;
+  --yv-font-serif: 'Source Serif 4', serif;
+  --yv-reader-font-family: var(--yv-font-serif), var(--yv-font-sans);
+
+  &[data-yv-theme='dark'] {
+    /* Brand colors - Dark theme */
+    --yv-background: var(--yv-gray-50);
+    --yv-foreground: var(--yv-white);
+    --yv-card: var(--yv-gray-45);
+    --yv-card-foreground: var(--yv-white);
+    --yv-popover: var(--yv-gray-48);
+    --yv-popover-foreground: var(--yv-white);
+    --yv-primary: var(--yv-red-dark-mode);
+    --yv-primary-foreground: var(--yv-white);
+    --yv-secondary: var(--yv-warm-neutral-dm);
+    --yv-secondary-foreground: var(--yv-white);
+    --yv-muted: var(--yv-gray-40);
+    --yv-muted-foreground: var(--yv-gray-10);
+    --yv-accent: var(--yv-gray-30);
+    --yv-accent-foreground: var(--yv-gray-2);
+    --yv-destructive: var(--yv-red);
+    --yv-destructive-foreground: var(--yv-white);
+    --yv-border: var(--yv-gray-35);
+    --yv-input: var(--yv-gray-40);
+    --yv-ring: var(--yv-blue-30-dm);
+    --yv-chart-1: var(--yv-blue-30-dm);
+    --yv-chart-2: var(--yv-green-30-dm);
+    --yv-chart-3: var(--yv-purple-30-dm);
+    --yv-chart-4: var(--yv-orange-30-dm);
+    --yv-chart-5: var(--yv-magenta-30-dm);
+    --yv-sidebar: var(--yv-gray-48);
+    --yv-sidebar-foreground: var(--yv-white);
+    --yv-sidebar-primary: var(--yv-teal-30-dm);
+    --yv-sidebar-primary-foreground: var(--yv-white);
+    --yv-sidebar-accent: var(--yv-gray-40);
+    --yv-sidebar-accent-foreground: var(--yv-white);
+    --yv-sidebar-border: var(--yv-gray-35);
+    --yv-sidebar-ring: var(--yv-blue-30-dm);
+  }
+}
+
+/*
+  * :where() is a CSS pseudo-class that drops the specificity of
+  * everything inside it to zero (0,0,0,0). The selectors still
+  * match, but they never win a specificity fight. This is desired.
+  */
+:where([data-yv-sdk]) {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    font: inherit;
+    font-family: var(--yv-font-sans);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--yv-font-sans);
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-family: var(--yv-font-sans);
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}