@astryx-vue/core 0.1.3 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -44,6 +44,10 @@
       "types": "./dist/AvatarGroup/index.d.ts",
       "import": "./dist/AvatarGroup/index.js"
     },
+    "./Carousel": {
+      "types": "./dist/Carousel/index.d.ts",
+      "import": "./dist/Carousel/index.js"
+    },
     "./CheckboxList": {
       "types": "./dist/CheckboxList/index.d.ts",
       "import": "./dist/CheckboxList/index.js"
@@ -80,14 +84,26 @@
       "types": "./dist/FormLayout/index.d.ts",
       "import": "./dist/FormLayout/index.js"
     },
+    "./Icon": {
+      "types": "./dist/Icon/index.d.ts",
+      "import": "./dist/Icon/index.js"
+    },
     "./Layout": {
       "types": "./dist/Layout/index.d.ts",
       "import": "./dist/Layout/index.js"
     },
+    "./Lightbox": {
+      "types": "./dist/Lightbox/index.d.ts",
+      "import": "./dist/Lightbox/index.js"
+    },
     "./MetadataList": {
       "types": "./dist/MetadataList/index.d.ts",
       "import": "./dist/MetadataList/index.js"
     },
+    "./Outline": {
+      "types": "./dist/Outline/index.d.ts",
+      "import": "./dist/Outline/index.js"
+    },
     "./RadioList": {
       "types": "./dist/RadioList/index.d.ts",
       "import": "./dist/RadioList/index.js"
@@ -168,6 +184,10 @@
       "types": "./dist/Table/index.d.ts",
       "import": "./dist/Table/index.js"
     },
+    "./Theme": {
+      "types": "./dist/Theme/index.d.ts",
+      "import": "./dist/Theme/index.js"
+    },
     "./Thumbnail": {
       "types": "./dist/Thumbnail/index.d.ts",
       "import": "./dist/Thumbnail/index.js"
@@ -176,6 +196,10 @@
       "types": "./dist/TimeInput/index.d.ts",
       "import": "./dist/TimeInput/index.js"
     },
+    "./Timer": {
+      "types": "./dist/Timer/index.d.ts",
+      "import": "./dist/Timer/index.js"
+    },
     "./Timestamp": {
       "types": "./dist/Timestamp/index.d.ts",
       "import": "./dist/Timestamp/index.js"

package/styles/carousel.css

@@ -0,0 +1,120 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-carousel {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .astryx-carousel__scroller {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-carousel-gap, var(--astryx-spacing-1, 4px));
+    width: 100%;
+    min-width: 0;
+    padding-inline: var(--astryx-carousel-padding, 0);
+    padding-bottom: 1px;
+    margin-bottom: -1px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scroll-behavior: smooth;
+    scroll-padding-inline: var(--astryx-carousel-padding, 0);
+    scrollbar-width: none;
+  }
+
+  .astryx-carousel__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-carousel__scroller {
+      scroll-behavior: auto;
+    }
+  }
+
+  .astryx-carousel__scroller:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent, #0074e2));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-carousel__scroller[data-snap] {
+    scroll-snap-type: x mandatory;
+  }
+
+  .astryx-carousel__scroller[data-fade='start'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__scroller[data-fade='end'] {
+    mask-image: linear-gradient(to left, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__scroller[data-fade='both'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px), #000 calc(100% - var(--astryx-spacing-1, 4px)), rgb(0 0 0 / 30%) calc(100% - 2px), transparent 100%);
+  }
+
+  [dir='rtl'] .astryx-carousel__scroller[data-fade='start'] {
+    mask-image: linear-gradient(to left, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  [dir='rtl'] .astryx-carousel__scroller[data-fade='end'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__item {
+    display: flex;
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+
+  .astryx-carousel__controls {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    pointer-events: none;
+  }
+
+  .astryx-carousel__pill {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--astryx-radius-full, 9999px);
+    background-color: var(--astryx-color-background-popover, #fff);
+    box-shadow: var(--astryx-shadow-med, 0 2px 4px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 10%));
+    pointer-events: auto;
+    opacity: 1;
+    transition: opacity var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+    --astryx-button-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-carousel__pill--start {
+    transform: translateX(-50%);
+  }
+
+  .astryx-carousel__pill--end {
+    transform: translateX(50%);
+  }
+
+  [dir='rtl'] .astryx-carousel__pill--start {
+    transform: translateX(50%);
+  }
+
+  [dir='rtl'] .astryx-carousel__pill--end {
+    transform: translateX(-50%);
+  }
+
+  .astryx-carousel__pill[data-hidden] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  [dir='rtl'] .astryx-carousel__pill .astryx-icon {
+    transform: scaleX(-1);
+  }
+}

package/styles/heading.css

@@ -3,7 +3,7 @@
 @layer astryx.components {
   .astryx-heading {
     margin: 0;
-    color: var(--astryx-heading-foreground, var(--astryx-color-text-primary, #171717));
+    color: var(--astryx-heading-foreground, var(--astryx-color-text-primary, light-dark(#171717, #fafafa)));
     font-family: var(--astryx-font-family-body, Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
     line-height: var(--astryx-heading-leading, 1.25);
   }
@@ -21,8 +21,12 @@
     display: inline;
   }
 
+  .astryx-heading--color-primary {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
   .astryx-heading--color-secondary {
-    color: var(--astryx-color-text-secondary, #525252);
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
   }
 
   .astryx-heading--color-accent {

package/styles/lightbox.css

@@ -0,0 +1,144 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-lightbox {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    max-width: none;
+    height: 100vh;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    background: transparent;
+    outline: none;
+  }
+
+  .astryx-lightbox::backdrop {
+    background-color: var(--astryx-color-overlay, light-dark(#00000080, #000000cc));
+    backdrop-filter: blur(2px);
+  }
+
+  .astryx-lightbox__container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-lightbox__media {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .astryx-lightbox__frame {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    max-height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    user-select: none;
+    cursor: default;
+  }
+
+  .astryx-lightbox__frame[data-zoomable]:not([data-zoomed]) {
+    cursor: zoom-in;
+  }
+
+  .astryx-lightbox__frame[data-zoomed] {
+    cursor: grab;
+  }
+
+  .astryx-lightbox__frame[data-dragging] {
+    cursor: grabbing;
+  }
+
+  .astryx-lightbox__frame:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent, #0074e2));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-lightbox__image,
+  .astryx-lightbox__video {
+    display: block;
+    max-width: min(100vw, 100%);
+    max-height: calc(100vh - 7rem);
+    object-fit: contain;
+    outline: none;
+  }
+
+  .astryx-lightbox__image {
+    pointer-events: none;
+    transform-origin: center center;
+    transition: transform 200ms ease-out;
+  }
+
+  .astryx-lightbox__image[data-dragging] {
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-lightbox__image {
+      transition-duration: 0ms;
+    }
+  }
+
+  .astryx-lightbox__caption {
+    flex-shrink: 0;
+    max-width: 600px;
+    margin: 0;
+    padding-block: var(--astryx-spacing-2, 8px) 0;
+    padding-inline: var(--astryx-spacing-3, 12px);
+    color: var(--astryx-color-on-dark, #fff);
+    font-size: var(--astryx-text-large-size, 1.125rem);
+    line-height: var(--astryx-text-large-leading, 1.3333);
+    text-align: center;
+  }
+
+  .astryx-lightbox__close,
+  .astryx-lightbox__nav,
+  .astryx-lightbox__counter {
+    position: absolute;
+    z-index: 1;
+    color: var(--astryx-color-on-dark, #fff);
+    --astryx-button-ghost-foreground: var(--astryx-color-on-dark, #fff);
+  }
+
+  .astryx-lightbox__close {
+    top: var(--astryx-spacing-3, 12px);
+    inset-inline-end: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-lightbox__nav {
+    top: 50%;
+    translate: 0 -50%;
+  }
+
+  .astryx-lightbox__nav--prev {
+    inset-inline-start: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-lightbox__nav--next {
+    inset-inline-end: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-lightbox__counter {
+    top: var(--astryx-spacing-3, 12px);
+    inset-inline-start: var(--astryx-spacing-3, 12px);
+    margin: 0;
+    color: var(--astryx-color-on-dark, #fff);
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+}

package/styles/media-theme.css

@@ -0,0 +1,51 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-media-theme {
+    display: contents;
+  }
+
+  /*
+   * Inverted surfaces do not rely on `color-scheme` alone. Text and heading
+   * colors are their own variables, and a `display: contents` wrapper does not
+   * always establish a color-scheme for its children. These declarations set
+   * the text tokens to the on-dark / on-light colors directly.
+   */
+  [data-astryx-media='dark'] {
+    color-scheme: dark;
+    color: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-text-primary: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-text-secondary: #a3a3a3;
+    --astryx-text-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-text-supporting-foreground: #a3a3a3;
+    --astryx-heading-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-icon-primary: var(--astryx-color-on-dark, #ffffff);
+    --astryx-icon-primary-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-accent: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-on-accent: var(--astryx-color-on-light, #171717);
+    --astryx-button-primary-background: var(--astryx-color-on-dark, #ffffff);
+    --astryx-button-primary-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-button-secondary-background: #ffffff1a;
+    --astryx-button-secondary-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-button-ghost-foreground: var(--astryx-color-on-dark, #ffffff);
+  }
+
+  [data-astryx-media='light'] {
+    color-scheme: light;
+    color: var(--astryx-color-on-light, #171717);
+    --astryx-color-text-primary: var(--astryx-color-on-light, #171717);
+    --astryx-color-text-secondary: #525252;
+    --astryx-text-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-text-supporting-foreground: #525252;
+    --astryx-heading-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-color-icon-primary: var(--astryx-color-on-light, #171717);
+    --astryx-icon-primary-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-color-accent: var(--astryx-color-on-light, #171717);
+    --astryx-color-on-accent: #ffffff;
+    --astryx-button-primary-background: var(--astryx-color-on-light, #171717);
+    --astryx-button-primary-foreground: #ffffff;
+    --astryx-button-secondary-background: #0000000f;
+    --astryx-button-secondary-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-button-ghost-foreground: var(--astryx-color-on-light, #171717);
+  }
+}

package/styles/outline.css

@@ -0,0 +1,124 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-outline {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    gap: var(--astryx-spacing-0-5, 2px);
+    width: 100%;
+  }
+
+  .astryx-outline__list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .astryx-outline__item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .astryx-outline__link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px) var(--astryx-spacing-2, 8px);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    font-size: var(--astryx-text-body-size, 1rem);
+    font-weight: var(--astryx-font-weight-regular, 400);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-outline[data-density='compact'] .astryx-outline__link {
+    padding-block: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-outline__link[data-level='2'] {
+    padding-inline-start: var(--astryx-spacing-7, 28px);
+  }
+
+  .astryx-outline__link[data-level='3'] {
+    padding-inline-start: var(--astryx-spacing-11, 44px);
+  }
+
+  .astryx-outline__link[data-level='4'] {
+    padding-inline-start: var(--astryx-spacing-12, 48px);
+  }
+
+  @media (hover: hover) {
+    .astryx-outline__link:hover {
+      color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+  }
+
+  .astryx-outline__link[data-active] {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-outline__link:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent, #0074e2));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-outline__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .astryx-outline__track {
+    position: relative;
+    flex-shrink: 0;
+    order: -1;
+    width: 2px;
+  }
+
+  .astryx-outline__line,
+  .astryx-outline__indicator {
+    position: absolute;
+    inset-inline-start: 0;
+    width: 2px;
+    border-radius: var(--astryx-radius-full, 9999px);
+    pointer-events: none;
+  }
+
+  .astryx-outline__line {
+    inset-block: 0;
+    background-color: var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-outline__indicator {
+    top: var(--astryx-outline-indicator-top, 0px);
+    height: var(--astryx-outline-indicator-height, 0px);
+    background-color: var(--astryx-color-icon-primary, light-dark(#171717, #fafafa));
+    transition:
+      top var(--astryx-duration-fast-min, 95ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      height var(--astryx-duration-fast-min, 95ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-outline__indicator {
+      transition: none;
+    }
+  }
+}

package/styles/text.css

@@ -3,7 +3,7 @@
 @layer astryx.components {
   .astryx-text {
     margin: 0;
-    color: var(--astryx-text-foreground, var(--astryx-color-text-primary, #171717));
+    color: var(--astryx-text-foreground, var(--astryx-color-text-primary, light-dark(#171717, #fafafa)));
     font-family: var(--astryx-font-family-body, Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
     font-size: var(--astryx-text-body-size, 0.875rem);
     line-height: var(--astryx-text-body-leading, 1.4286);
@@ -13,18 +13,6 @@
     display: block;
   }
 
-  .astryx-text--color-secondary {
-    color: var(--astryx-color-text-secondary, #525252);
-  }
-
-  .astryx-text--color-accent {
-    color: var(--astryx-color-text-accent, #0074e2);
-  }
-
-  .astryx-text--color-inherit {
-    color: inherit;
-  }
-
   .astryx-text--weight-regular {
     font-weight: var(--astryx-font-weight-regular, 400);
   }
@@ -58,7 +46,7 @@
   }
 
   .astryx-text--type-supporting {
-    color: var(--astryx-text-supporting-foreground, var(--astryx-color-text-secondary, #525252));
+    color: var(--astryx-text-supporting-foreground, var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3)));
     font-size: var(--astryx-text-supporting-size, 0.75rem);
     line-height: var(--astryx-text-supporting-leading, 1.6667);
   }
@@ -87,6 +75,67 @@
     line-height: 1.2;
   }
 
+  .astryx-text--color-primary {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-text--color-secondary {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
+  .astryx-text--color-accent {
+    color: var(--astryx-color-text-accent, #0074e2);
+  }
+
+  .astryx-text--color-disabled {
+    color: var(--astryx-color-text-disabled, light-dark(#a3a3a3, #525252));
+  }
+
+  .astryx-text--color-placeholder {
+    color: var(--astryx-color-text-placeholder, #737373);
+  }
+
+  .astryx-text--color-inherit {
+    color: inherit;
+  }
+
+  .astryx-text--wrap-wrap {
+    text-wrap: wrap;
+  }
+
+  .astryx-text--wrap-nowrap {
+    text-wrap: nowrap;
+  }
+
+  .astryx-text--wrap-balance {
+    text-wrap: balance;
+  }
+
+  .astryx-text--wrap-pretty {
+    text-wrap: pretty;
+  }
+
+  .astryx-text--word-normal {
+    word-break: normal;
+  }
+
+  .astryx-text--word-break-word {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .astryx-text--word-break-all {
+    word-break: break-all;
+  }
+
+  .astryx-text--strike {
+    text-decoration: line-through;
+  }
+
+  .astryx-text--tabular {
+    font-variant-numeric: tabular-nums;
+  }
+
   .astryx-text--size-sm {
     font-size: var(--astryx-text-sm-size, 0.75rem);
   }

package/styles/theme.css

@@ -0,0 +1,29 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /*
+   * `display: contents` keeps the theme out of layout. Color and font still
+   * inherit through it, so unmarked text uses the primary text token.
+   */
+  .astryx-theme {
+    display: contents;
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-family: var(--astryx-font-family-body, Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+    /*
+     * These aliases are also declared on :root, where var() is substituted
+     * once. Restating them here makes the subtree resolve them again, including
+     * semantic tokens this theme did not override but a parent theme did.
+     */
+    --astryx-text-foreground: var(--astryx-color-text-primary);
+    --astryx-text-supporting-foreground: var(--astryx-color-text-secondary);
+    --astryx-heading-foreground: var(--astryx-color-text-primary);
+    --astryx-button-primary-background: var(--astryx-color-accent);
+    --astryx-button-primary-foreground: var(--astryx-color-on-accent);
+    --astryx-button-secondary-background: var(--astryx-color-neutral);
+    --astryx-button-secondary-foreground: var(--astryx-color-text-primary);
+    --astryx-button-ghost-foreground: var(--astryx-color-text-primary);
+    --astryx-button-focus: var(--astryx-color-accent);
+    --astryx-focus-outline-color: var(--astryx-color-accent);
+    --astryx-icon-primary-foreground: var(--astryx-color-icon-primary);
+  }
+}

package/styles/timer.css

@@ -0,0 +1,34 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-timer {
+    display: inline;
+  }
+
+  .astryx-timer__time {
+    display: inline;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: normal;
+    font-variant-numeric: tabular-nums;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+
+  .astryx-timer[data-color='primary'] {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-timer[data-color='secondary'] {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
+  .astryx-timer[data-color='accent'] {
+    color: var(--astryx-color-text-accent, #0074e2);
+  }
+
+  .astryx-timer[data-color='disabled'] {
+    color: var(--astryx-color-text-disabled, light-dark(#a3a3a3, #525252));
+  }
+}