@ui0/theme 0.0.0-stage → 0.1.0

package/src/contracts/disabled/index.ts

@@ -0,0 +1,21 @@
+import type { ThemeContract } from '@ui0/types'
+
+import { ThemeContractFlags } from '../../constants'
+import { disabledDeal } from './disabled.contract'
+import { DisabledContractKey, DisabledRefKey } from './disabled.keys'
+import type { DisabledProps } from './disabled.types'
+
+export { default as $style } from './disabled.module.css'
+export type * from './disabled.types'
+export * from './disabled.keys'
+
+export const DisabledPropsKeys: ReadonlyArray<keyof DisabledProps> = ['disabled']
+
+export const disabled: ThemeContract = {
+  key: DisabledContractKey,
+  name: 'disabled',
+  ref: DisabledRefKey,
+  flag: ThemeContractFlags.dealer + ThemeContractFlags.generator,
+  deal: disabledDeal,
+  props: DisabledPropsKeys
+}

package/src/contracts/display/display.contract.ts

@@ -0,0 +1,41 @@
+// The display contract's processing endpoint: closes over the provider and
+// returns the deal that maps the `display` prop onto classes/styles at
+// runtime, resolving `inherit` against the provided context ref.
+import type { ClassList, CSSModuleClassList } from '@ui0/types'
+import type { ContractProvider, ThemeContractDeal } from '@ui0/types'
+import { mergeCssModulesStyles } from '@ui0/util'
+import type { Ref } from 'vue'
+
+import { EMPTY_OBJ } from '../../constants'
+import type { DisplayProps } from './display.types'
+
+import $display from './display.module.css'
+
+// the prop -> class wiring: resolves the prop value to the hashed class from
+// the module map (merged with the component's own $style)
+function displayClasses(props: DisplayProps, styles?: CSSModuleClassList): ClassList {
+  const $ = mergeCssModulesStyles($display, styles)
+  const out: ClassList = []
+  if (props.display && $.displayed) out.push($.displayed)
+  return out
+}
+
+export function displayDeal(instance: ContractProvider): ThemeContractDeal {
+  const props = instance.props
+
+  return {
+    classes: () => {
+      if (!props.display) return instance.inject([])
+
+      if (props.display === 'inherit') {
+        const ctx = instance.context as Record<string, Ref<any> | undefined> | null
+        if (ctx?.display) {
+          return instance.inject(displayClasses({ display: ctx.display.value }, instance.$styles))
+        }
+      }
+
+      return instance.inject(displayClasses(props as DisplayProps, instance.$styles))
+    },
+    styles: () => instance.inject(EMPTY_OBJ)
+  }
+}

package/src/contracts/display/display.generator.ts

@@ -0,0 +1,57 @@
+// The display contract's generator endpoint: turns the contract's slice of
+// the appearance config (DisplayThemeAppearanceConfig) into css vars and
+// setter classes. Values are authored in the theme config; this generator
+// only knows the wiring.
+import type { CSSModuleClassList, StyleList, VarList } from '@ui0/types'
+import type { ThemeContractGenerator } from '@ui0/types'
+import { toUnits } from '@ui0/util'
+
+import type { ContractContext, ContractFactory } from '../generator'
+import type { DisplayThemeAppearanceConfig } from './display.types'
+
+// the logical class names shipped in display.module.css - class() re-exports
+// the registry map, so the logical names resolve to the distiller hashes.
+import $display from './display.module.css'
+
+const displayGenerator: ContractFactory = (ctx: ContractContext): ThemeContractGenerator => {
+  const { config } = ctx
+
+  function vars(): Record<string, VarList> {
+    // after registration (see display.types.ts) this reads
+    // `config.display`; typed loosely until the contract is named.
+    const display = (config as { display?: DisplayThemeAppearanceConfig }).display
+    if (display?.base === undefined) return {}
+    return { display: { base: display.base } }
+  }
+
+  return {
+    namespace: 'd',
+    vars: (scheme) => (scheme ? {} : vars()),
+    css: () => `.${$display.displayed} { /* point the component slot at the theme var */ }`,
+    localScss: () => {
+      const brp = ctx.settings.display?.breakpoints
+      const out: StyleList = {}
+
+      if (brp) {
+        Object.keys(brp).forEach((k) => {
+          out[`$${k}`] = toUnits(brp[k])
+        })
+      }
+      return out
+    },
+    class: (): CSSModuleClassList => ({ ...$display }),
+    styles: () => {
+      const brp = ctx.settings.display?.breakpoints
+      const out: StyleList = {}
+
+      if (brp) {
+        Object.keys(brp).forEach((k) => {
+          out[`--0-display-${k}`] = toUnits(brp[k])
+        })
+      }
+      return out
+    }
+  }
+}
+
+export default displayGenerator

package/src/contracts/display/display.instance.ts

@@ -0,0 +1,173 @@
+import type { Ui0ThemeContractSettings, EventHandler } from '@ui0/types'
+import {
+  getClientHeight,
+  getClientWidth,
+  isBrowser,
+  objectMerge,
+  parseUnits,
+  RecordContainer,
+  type RecordContainerImpl
+} from '@ui0/util'
+import { ref, type Ref, type WatchHandle } from 'vue'
+
+import cfg from '../../config.default'
+import type {
+  DisplayBreakpoint,
+  DisplayBreakpoints,
+  DisplayImpl,
+  DisplayMeasure,
+  DisplayOperation,
+  DisplayWatcher
+} from './display.types'
+
+export class Display implements DisplayImpl {
+  breakpoints: DisplayBreakpoints
+  _watchers: DisplayWatcher[]
+  _watcher: WatchHandle | null
+  _activated: boolean
+  _listeners: RecordContainerImpl<any>
+  _width: Ref<number> | null
+  _height: Ref<number> | null
+  _resizeHandler: EventHandler
+
+  constructor(config: Ui0ThemeContractSettings['display']) {
+    this.breakpoints = objectMerge(cfg.contracts.display?.breakpoints, config?.breakpoints ?? {})
+
+    this._watchers = []
+    this._watcher = null
+    this._width = null
+    this._height = null
+    this._activated = false
+    this._resizeHandler = () => this.update()
+    this._listeners = new RecordContainer()
+  }
+
+  public update() {
+    if (this._width && this._height) {
+      this._width.value = getClientWidth()
+      this._height.value = getClientHeight()
+    }
+    let wasChanged = false
+
+    this._watchers.forEach((watcher) => {
+      const measure = watcher.measure === 'width' ? this._width : this._height
+      const oldValue = watcher.value.value
+
+      if (watcher.operation === 'between') {
+        const breakpoint1 = this.getBreakpointValue(String(watcher.points[0]))
+        const breakpoint2 = this.getBreakpointValue(String(watcher.points[1]))
+
+        if (measure && breakpoint1 && breakpoint2) {
+          const b1 = parseUnits(String(breakpoint1)).value
+          const b2 = parseUnits(String(breakpoint2)).value
+          // console.log('we', b1, b2)
+          if (b1 > b2) watcher.value.value = measure.value > b2 && measure.value < b1
+          if (b1 < b2) watcher.value.value = measure.value > b1 && measure.value < b2
+
+          if (watcher.value.value !== oldValue) {
+            wasChanged = true
+          }
+        }
+      }
+      if (watcher.operation === 'less' || watcher.operation === 'greater') {
+        const breakpoint1 = this.getBreakpointValue(String(watcher.points[0]))
+        if (breakpoint1 && measure) {
+          const b1 = parseUnits(String(breakpoint1)).value
+          watcher.value.value = watcher.operation === 'less' ? measure.value < b1 : measure.value > b1
+
+          if (watcher.value.value !== oldValue) {
+            wasChanged = true
+          }
+        }
+      }
+    })
+
+    if (wasChanged) {
+      this._listeners.items.forEach((item) => item())
+    }
+  }
+
+  public addUpdateListener(fn: AnyFn): number {
+    return this._listeners.add(fn)
+  }
+
+  public removeUpdateListener(index: number) {
+    this._listeners.remove(index)
+  }
+
+  public less(point: DisplayBreakpoint, measure: DisplayMeasure = 'width') {
+    const out = this.addWatcher('less', [point], measure)
+    this.activate()
+    return out
+  }
+
+  public between(point1: DisplayBreakpoint, point2: DisplayBreakpoint, measure: DisplayMeasure = 'width') {
+    const out = this.addWatcher('between', [point1, point2], measure)
+    this.activate()
+    this.update()
+    return out
+  }
+
+  public greater(point: DisplayBreakpoint, measure: DisplayMeasure = 'width') {
+    const out = this.addWatcher('greater', [point], measure)
+    this.activate()
+    return out
+  }
+
+  public activate() {
+    // if (this._activated) return
+
+    if (!this._width) this._width = ref(0)
+    if (!this._height) this._height = ref(0)
+
+    if (isBrowser && !this._activated) window.addEventListener('resize', this._resizeHandler, { passive: true })
+
+    this.update()
+    this._activated = true
+  }
+
+  public deactivate() {
+    this._activated = false
+    if (isBrowser) window.removeEventListener('resize', this._resizeHandler)
+  }
+
+  private getBreakpointValue(name: string): number {
+    // console.log('breaks', Object.keys(_breakpoints).length)
+    return +this.breakpoints[name]
+  }
+
+  private addWatcher(
+    operation: DisplayOperation,
+    points: DisplayBreakpoint[],
+    measure: DisplayMeasure = 'width'
+  ): Ref<boolean> {
+    let outRef: Ref<boolean> | undefined = undefined
+
+    this._watchers.forEach((watcher) => {
+      const isMultiValued = watcher.points.length > 1
+      if (watcher.operation === operation) {
+        if (isMultiValued) {
+          if (watcher.points[0] === points[0] && watcher.points[1] === points[1]) {
+            console.log('setting existing ', watcher.value)
+            outRef = watcher.value
+          }
+        } else {
+          if (watcher.points[0] === points[0]) {
+            outRef = watcher.value
+          }
+        }
+      }
+    })
+    if (!outRef) {
+      outRef = ref(false)
+      this._watchers.push({
+        measure,
+        points,
+        operation,
+        value: outRef
+      })
+    }
+
+    return outRef
+  }
+}

package/src/contracts/display/display.keys.ts

@@ -0,0 +1,9 @@
+import type { ThemeContract } from '@ui0/types'
+import type { InjectionKey, Ref } from 'vue'
+
+import type { DisplayImpl, DisplayProp, DisplayReturn } from './display.types'
+
+/** context key the deal resolves `inherit` against (see useThemeContract) */
+export const DisplayRefKey = Symbol('DisplayRefKey') as InjectionKey<Ref<DisplayProp | undefined>>
+export const DisplayContractKey = Symbol('DisplayContractKey') as InjectionKey<ThemeContract>
+export const DisplayKey = Symbol('DisplayContractKey') as InjectionKey<DisplayImpl>

package/src/contracts/display/display.module.css

@@ -0,0 +1,4 @@
+.displayed,
+.displayNormal {
+  /*@*/
+}

package/src/contracts/display/display.scss

@@ -0,0 +1,63 @@
+
+// Component-namespace wiring for the display contract: the generator emits
+// `--0-display-base` on the theme blocks; this mixin mirrors it into the
+// component namespace so a component can consume (and locally override) it.
+@mixin use() {
+  --0c-display: var(--0-display-base, initial);
+}
+
+@mixin wh($width, $height) {
+  $max-w: ' and (max-width: #{$width})';
+  $max-h: ' and (max-height: #{$height})';
+  @media only screen#{$max-h}#{$max-w} {
+    @content;
+  }
+}
+@mixin w-between($max, $min) {
+  $min-w: ' and (min-width: #{$min})';
+  $max-w: ' and (max-width: #{$max})';
+  @if $max == 0 and $min == 0 {
+  } @else {
+    @if $max == 0 {
+      $max-w: ' ';
+    }
+    @media only screen#{$min-w}#{$max-w} {
+      @content;
+    }
+  }
+}
+
+@mixin w-greater($val) {
+  @include w-between(0, $val) {
+    @content;
+  }
+}
+
+@mixin w-less($val) {
+  @include w-between($val, 0) {
+    @content;
+  }
+}
+@mixin h-between($max, $min) {
+  $minh: ' and (min-height: #{$min})';
+  $maxh: ' and (max-height: #{$max})';
+  @if $max == 0 and $min == 0 {
+  } @else {
+    @if $max == 0 {
+      $maxh: ' ';
+    }
+    @media only screen#{$minh}#{$maxh} {
+      @content;
+    }
+  }
+}
+@mixin h-greater($val) {
+  @include h-between(0, $val) {
+    @content;
+  }
+}
+@mixin h-less($val) {
+  @include h-between($val, 0) {
+    @content;
+  }
+}

package/src/contracts/display/display.types.ts

@@ -0,0 +1,75 @@
+// ---------------------------------------------------------------------------
+// CONTRACT TEMPLATE - a skeleton for new theme contracts, consumed by
+// scripts/gen-contract.ts in the templates package:
+//
+//   pnpm contract:gen
+//
+// The generator copies this folder into <package>/src/contracts/<name>/
+// (the theme package ships the contracts folder), substituting display /
+// Display / display / d in file bodies and names. After generation:
+//
+//   1. add the contract to src/contracts/index.ts (registry)
+//   2. add <kebab>Generator to src/generator.ts (contractGenerators)
+//   3. fill in the prop values / appearance config below
+//
+// The package itself stays unaware of the contract - types land in the
+// registries via interface merging only.
+// ---------------------------------------------------------------------------
+import type { LiteralUnion, MaybeUnits, Numberish, UpdateFn } from '@ui0/types'
+import type { Ref } from 'vue'
+
+// 1. the values the prop accepts
+export type DisplayProp = LiteralUnion<'some' | 'display' | 'values'>
+export type DisplayOperation = 'greater' | 'less' | 'equal' | 'between'
+
+export type DisplayMeasure = 'width' | 'height'
+
+export type DisplayBreakpoint = string | 'xxs' | 's' | 'xs' | 'xxl' | 'lg' | 'xl' | 'hd' | 'fhd' | 'qhd' | 'uhd'
+export type DisplayBreakpoints = Record<DisplayBreakpoint, Numberish>
+
+// 2. the props this contract supplies to components
+export interface DisplayProps {
+  // display?: DisplayProp
+}
+
+// 3. the contract's settings inside a theme preset (appearance config) -
+//    what the generator turns into css vars
+export interface DisplayThemeAppearanceConfig {
+  /** e.g. a base value the generator emits as a css var */
+  base?: MaybeUnits
+}
+
+// 4. registration: announces this contract to the package registries.
+declare module '@ui0/types/theme' {
+  interface Ui0ThemePresetAppearanceConfig {
+    display?: DisplayThemeAppearanceConfig
+  }
+  interface Ui0ThemeContractSettings {
+    display?: {
+      breakpoints: DisplayBreakpoints
+    }
+  }
+  interface Ui0ThemeContracts extends DisplayProps {}
+}
+
+export interface DisplayWatcher {
+  points: Array<any>
+  measure: DisplayMeasure
+  operation: DisplayOperation
+  value: Ref<boolean>
+}
+
+export interface DisplayReturn {
+  breakpoints: DisplayBreakpoints
+  between: (point: DisplayBreakpoint, b: DisplayBreakpoint, measure?: DisplayMeasure) => Ref<boolean>
+  greater: (point: DisplayBreakpoint, measure?: DisplayMeasure) => Ref<boolean>
+  less: (point: DisplayBreakpoint, measure?: DisplayMeasure) => Ref<boolean>
+}
+
+export interface DisplayImpl extends DisplayReturn {
+  activate: () => void
+  deactivate: () => void
+  update: () => void
+  addUpdateListener: (fn: UpdateFn) => number
+  removeUpdateListener: (id: number) => void
+}

package/src/contracts/display/index.ts

@@ -0,0 +1,27 @@
+import type { ThemeContract } from '@ui0/types'
+
+// The display contract's registry entry, generated from
+// packages/templates/contract. Wiring left (see the generator output):
+//   1. add `display` to src/contracts/index.ts (next to round/size/...)
+//   2. add displayGenerator to src/generator.ts (contractGenerators)
+import { ThemeContractFlags } from '../../constants'
+import { displayDeal } from './display.contract'
+import { DisplayContractKey, DisplayRefKey } from './display.keys'
+import type { DisplayProps } from './display.types'
+
+export { default as $style } from './display.module.css'
+export type * from './display.types'
+export * from './display.keys'
+
+export const DisplayPropsKeys: ReadonlyArray<keyof DisplayProps> = [
+  // 'display'
+]
+
+export const display: ThemeContract = {
+  key: DisplayContractKey,
+  name: 'display',
+  ref: DisplayRefKey,
+  deal: displayDeal,
+  flag: ThemeContractFlags.generator,
+  props: DisplayPropsKeys
+}

package/src/contracts/elevation/elevation.contract.ts

@@ -0,0 +1,37 @@
+// The elevation contract's processing endpoint: the `elevation` prop picks a
+// step of the shadow scale; the deal resolves it to the hashed step class
+// (`elv1..steps`, `n` suffix for inset), `inherit` reading the provided ref.
+import type { ClassList, CSSModuleClassList } from '@ui0/types'
+import type { ContractProvider, ThemeContractDeal } from '@ui0/types'
+import { mergeCssModulesStyles } from '@ui0/util'
+
+import { EMPTY_OBJ } from '../../constants'
+import type { ElevationProps } from './elevation.types'
+
+import $elevation from './elevation.module.css'
+
+function elevationClasses(p: ElevationProps, s?: CSSModuleClassList): ClassList {
+  const { elevation } = p
+  if (elevation === undefined) return []
+  const $ = mergeCssModulesStyles($elevation, s)
+
+  const value = Number(elevation)
+
+  return Number.isNaN(value) ? [] : [$['elv' + Math.abs(value) + (value < 0 ? 'n' : '')], $.elv]
+}
+
+export function elevationDeal(instance: ContractProvider): ThemeContractDeal {
+  const props = instance.props
+
+  return {
+    classes: () => {
+      if (instance.context) {
+        if (props.elevation === 'inherit' && instance.context.elevation) {
+          return instance.inject(elevationClasses({ elevation: instance.context.elevation.value }, instance.$styles))
+        }
+      }
+      return instance.inject(elevationClasses(props, instance.$styles))
+    },
+    styles: () => instance.inject(EMPTY_OBJ)
+  }
+}

package/src/contracts/elevation/elevation.generator.ts

@@ -0,0 +1,71 @@
+// The elevation contract's generator endpoint: ONE .elv base class carries the
+// box-shadow (built from css vars), the per-step classes (.elv1..steps /
+// .elv1n..stepsn for inset) only fill in the var values for their step - no
+// shadow math is repeated per class. Shadow tuning (color, steps) lands in
+// the config with the elevation appearance settings.
+import type { CSSModuleClassList } from '@ui0/types'
+import type { ThemeContractGenerator } from '@ui0/types'
+
+import type { ContractFactory } from '../generator'
+import type { ElevationThemeAppearanceConfig } from './elevation.types'
+
+import $elevation from './elevation.module.css'
+
+// the shared shadow: a fixed highlight ring + three layers assembled from the
+// --0-elv-* vars (the step classes fill those in; the base class shadows with
+// zero/fallback values until one is applied)
+const BASE_CLASS_BODY = `  box-shadow:
+    0 0 0 1px rgba(255 255 255 / .1),
+    var(--0-elv-i, ) 0px 1px 1px rgba(var(--0-elv-c, 0 0 0) / 0.1),
+    var(--0-elv-i, ) var(--0-elv-x1, 0px) var(--0-elv-y1, 0px) rgba(var(--0-elv-c, 0 0 0) / 0.095),
+    var(--0-elv-i, ) var(--0-elv-x2, 0px) var(--0-elv-y2, 0px) rgba(var(--0-elv-c, 0 0 0) / 0.13);`
+
+const elevationGenerator: ContractFactory = (ctx): ThemeContractGenerator => {
+  const { config, hash } = ctx
+  const steps = (config as { elevation?: ElevationThemeAppearanceConfig }).elevation?.steps ?? 16
+  function vars() {
+    return {
+      elv: {
+        x1: '1px',
+        y1: 'calc(var(--0-elv-x1) * 3)',
+        x2: 'calc(var(--0-elv-x1) * 1.5)',
+        y2: 'calc(var(--0-elv-x1) * 1.5)'
+      }
+    }
+  }
+  function stepVars(i: number, inset: boolean): string {
+    const lines = [`  --0-elv-x1: ${i}px;`]
+    if (inset) lines.push('  --0-elv-i: inset;')
+    return lines.join('\n')
+  }
+
+  function css(): string {
+    const lines: string[] = [`.${$elevation.elv} {\n${BASE_CLASS_BODY}\n}`]
+    for (let i = 1; i <= steps; i++) {
+      lines.push(`.${hash(`elv${i}`)} {\n${stepVars(i, false)}\n}`)
+      lines.push(`.${hash(`elv${i}n`)} {\n${stepVars(i, true)}\n}`)
+    }
+    return lines.join('\n')
+  }
+
+  function classes(): CSSModuleClassList {
+    // the base class + the default 16 steps come from the registry map; a
+    // config that extends the step count generates the extras dynamically
+    const out: CSSModuleClassList = { ...$elevation }
+    for (let i = 1; i <= steps; i++) {
+      out[`elv${i}`] = hash(`elv${i}`)
+      out[`elv${i}n`] = hash(`elv${i}n`)
+    }
+    return out
+  }
+
+  return {
+    namespace: 'e',
+    vars,
+    css,
+    class: classes,
+    styles: () => ({})
+  }
+}
+
+export default elevationGenerator

package/src/contracts/elevation/elevation.keys.ts

@@ -0,0 +1,6 @@
+import type { ComponentElevation } from '@ui0/types'
+import type { ThemeContractDeal } from '@ui0/types'
+import type { InjectionKey, Ref } from 'vue'
+
+export const ElevationRefKey = Symbol('ElevationRefKey') as InjectionKey<Ref<ComponentElevation>>
+export const ElevationContractKey = Symbol('ElevationContractKey') as InjectionKey<ThemeContractDeal>

package/src/contracts/elevation/elevation.module.css

@@ -0,0 +1,35 @@
+.elv,
+.elv1,
+.elv1n,
+.elv2,
+.elv2n,
+.elv3,
+.elv3n,
+.elv4,
+.elv4n,
+.elv5,
+.elv5n,
+.elv6,
+.elv6n,
+.elv7,
+.elv7n,
+.elv8,
+.elv8n,
+.elv9,
+.elv9n,
+.elv10,
+.elv10n,
+.elv11,
+.elv11n,
+.elv12,
+.elv12n,
+.elv13,
+.elv13n,
+.elv14,
+.elv14n,
+.elv15,
+.elv15n,
+.elv16,
+.elv16n {
+  /*@*/
+}

package/src/contracts/elevation/elevation.scss

@@ -0,0 +1,46 @@
+// Elevation: ONE base class carries the box-shadow assembled from the
+// --0-elv-* css vars; the per-step classes (.elv1..$steps, .elv1n..stepsn for
+// inset) only fill in the var values for their step - no shadow math is
+// repeated per class. This file mirrors what elevation.generator.ts emits
+// (the generator compiles this pattern with $steps from the theme config).
+
+// the shared shadow: a fixed highlight ring + three layers assembled from the
+// --0-elv-* vars (zero/fallback values until a step class is applied)
+@mixin use() {
+  box-shadow:
+    0 0 0 1px rgba(255 255 255 / 0.1),
+    var(--0-elv-i,) 0px 1px 1px rgba(var(--0-elv-c, 0 0 0) / 0.1),
+    var(--0-elv-i,) var(--0-elv-x1, 0px) var(--0-elv-y1, 0px) rgba(var(--0-elv-c, 0 0 0) / 0.095),
+    var(--0-elv-i,) var(--0-elv-x2, 0px) var(--0-elv-y2, 0px) rgba(var(--0-elv-c, 0 0 0) / 0.13);
+}
+
+@mixin elv($i, $inset: false) {
+  --0-elv-x1: #{$i}px;
+  --0-elv-y1: #{3 * $i}px;
+  --0-elv-x2: #{1.5 * $i}px;
+  --0-elv-y2: #{1.5 * $i}px;
+  @if $inset {
+    --0-elv-i: inset;
+  }
+}
+
+@mixin elevator($elevation, $color-value: #000) {
+  // legacy helper - kept for hand-written component styles; the generated
+  // classes use the var pattern above (@include use + @include elv)
+  $inset: 0;
+  @if $elevation < 0 {
+    $elevation: $elevation * -1;
+    $inset: inset 0;
+  } @else {
+    $inset: 0;
+  }
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    $inset 0px 1px 1px rgba($color-value, 0.1),
+    $inset #{1 * $elevation}px #{3 * $elevation}px rgba($color-value, 0.095),
+    $inset #{1.5 * $elevation}px #{1.5 * $elevation}px rgba($color-value, 0.13);
+}
+
+@function stroke() {
+  @return 0 0 0 1px rgba(255, 255, 255, 0.1);
+}