@codenhub/styles 0.0.4 → 0.1.0

package/src/components/form.css

@@ -1,303 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-
-@utility field {
-  @apply flex w-full flex-col gap-1.5;
-
-  .label {
-    @apply text-text text-sm font-semibold;
-  }
-
-  .hint {
-    @apply text-text-secondary text-[0.8125rem];
-  }
-
-  .error:not(.btn) {
-    @apply text-destructive text-[0.8125rem] font-medium;
-  }
-}
-
-@utility ipt {
-  --control-bg: transparent;
-  --control-border: var(--color-border);
-  --control-border-active: var(--color-primary);
-  --control-fg: var(--color-text);
-  --control-placeholder: var(--color-text-secondary);
-
-  @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
-  border: var(--border-width) solid var(--control-border);
-
-  &::placeholder {
-    color: var(--control-placeholder);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-border-active);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &[aria-invalid="true"] {
-    --control-border: var(--color-destructive);
-    --control-border-active: var(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed;
-
-    opacity: 0.58;
-  }
-}
-
-@utility textarea {
-  --control-bg: transparent;
-  --control-border: var(--color-border);
-  --control-border-active: var(--color-primary);
-  --control-fg: var(--color-text);
-  --control-placeholder: var(--color-text-secondary);
-
-  @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
-  border: var(--border-width) solid var(--control-border);
-
-  &::placeholder {
-    color: var(--control-placeholder);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-border-active);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &[aria-invalid="true"] {
-    --control-border: var(--color-destructive);
-    --control-border-active: var(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed;
-
-    opacity: 0.58;
-  }
-
-  @apply min-h-28 resize-y;
-}
-
-@utility select {
-  --control-bg: transparent;
-  --control-border: var(--color-border);
-  --control-border-active: var(--color-primary);
-  --control-fg: var(--color-text);
-  --control-placeholder: var(--color-text-secondary);
-
-  @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
-  border: var(--border-width) solid var(--control-border);
-
-  &::placeholder {
-    color: var(--control-placeholder);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-border-active);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &[aria-invalid="true"] {
-    --control-border: var(--color-destructive);
-    --control-border-active: var(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed;
-
-    opacity: 0.58;
-  }
-
-  appearance: none;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
-  background-position: right 0.75rem center;
-  background-repeat: no-repeat;
-  background-size: 1rem;
-  padding-right: 2.5rem;
-}
-
-@utility checkbox {
-  --control-color: var(--color-text);
-  --control-contrast: var(--color-text-contrast);
-
-  @apply inline-grid size-4 cursor-pointer appearance-none place-content-center rounded-sm bg-transparent transition-[background-color,border-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
-  border: var(--border-width) solid var(--color-border);
-
-  &:hover:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
-    @apply border-(--color-border-hover);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-color);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &::after {
-    @apply block size-3 opacity-0 transition-opacity duration-(--motion-duration-normal) ease-(--motion-ease);
-
-    background-color: var(--control-contrast);
-    content: "";
-    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-    mask-size: contain;
-    -webkit-mask-size: contain;
-  }
-
-  &:checked {
-    border-color: var(--control-color);
-    background-color: var(--control-color);
-
-    &::after {
-      @apply opacity-100;
-    }
-  }
-
-  &.primary {
-    --control-color: var(--color-primary);
-    --control-contrast: var(--color-primary-contrast);
-  }
-
-  &.secondary {
-    --control-color: var(--color-accent);
-    --control-contrast: var(--color-accent-contrast);
-  }
-
-  &.success {
-    --control-color: var(--color-success);
-    --control-contrast: var(--color-success-contrast);
-  }
-
-  &.warning {
-    --control-color: var(--color-warning);
-    --control-contrast: var(--color-warning-contrast);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --control-color: var(--color-destructive);
-    --control-contrast: var(--color-destructive-contrast);
-  }
-
-  &.info {
-    --control-color: var(--color-info);
-    --control-contrast: var(--color-info-contrast);
-  }
-
-  &[aria-invalid="true"] {
-    @apply border-(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed opacity-[0.58];
-  }
-}
-
-@utility switch {
-  --control-color: var(--color-text);
-  --control-contrast: var(--color-text-contrast);
-
-  @apply relative h-4.5 w-9 cursor-pointer appearance-none rounded-full bg-(--color-surface) transition-[background-color,border-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
-  border: var(--border-width) solid transparent;
-
-  &::after {
-    @apply absolute size-3.5 rounded-full bg-(--color-text-secondary) transition-[transform,translate,background-color] duration-(--motion-duration-normal) ease-(--motion-ease);
-
-    content: "";
-    top: 1px;
-    left: 1px;
-  }
-
-  &:hover:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
-    @apply border-(--color-border-hover);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-color);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &:checked {
-    border-color: var(--control-color);
-    background-color: var(--control-color);
-
-    &::after {
-      @apply translate-x-4.5;
-
-      background-color: var(--control-contrast);
-    }
-  }
-
-  &.primary {
-    --control-color: var(--color-primary);
-    --control-contrast: var(--color-primary-contrast);
-  }
-
-  &.secondary {
-    --control-color: var(--color-accent);
-    --control-contrast: var(--color-accent-contrast);
-  }
-
-  &.success {
-    --control-color: var(--color-success);
-    --control-contrast: var(--color-success-contrast);
-  }
-
-  &.warning {
-    --control-color: var(--color-warning);
-    --control-contrast: var(--color-warning-contrast);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --control-color: var(--color-destructive);
-    --control-contrast: var(--color-destructive-contrast);
-  }
-
-  &.info {
-    --control-color: var(--color-info);
-    --control-contrast: var(--color-info-contrast);
-  }
-
-  &[aria-invalid="true"] {
-    @apply border-(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed opacity-[0.58];
-  }
-}

package/src/components/index.css

@@ -1,9 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-@import "../typography.css";
-@import "./button.css";
-@import "./feedback.css";
-@import "./form.css";
-@import "./loader.css";
-@import "./surface.css";
-@import "./tooltip.css";

package/src/components/loader.css

@@ -1,56 +0,0 @@
-@import "tailwindcss";
-
-@utility ai {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D@keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D@keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25,100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C/style%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
-
-  mask-image: var(--ai-image);
-  -webkit-mask-image: var(--ai-image);
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-}
-
-@utility dots-wave {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)%7Dto%7Btransform:translate(0)%7D%7D.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83' cx='12' cy='12' r='3' style='animation-delay:.1s'/%3E%3Ccircle class='spinner_qM83' cx='20' cy='12' r='3' style='animation-delay:.2s'/%3E%3C/svg%3E");
-}
-
-@utility dots-fade {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.dot%7Banimation:dot-anim 1s ease-in-out infinite;fill:currentColor%7D.d1%7Banimation-delay:-0.32s%7D.d2%7Banimation-delay:-0.16s%7D@keyframes dot-anim%7B0%25,80%25,100%25%7Btransform:scale(0.6);opacity:0.2%7D40%25%7Btransform:scale(1);opacity:1%7D%7D%3C/style%3E%3Ccircle class='dot d1' cx='4' cy='12' r='3' transform-origin='4px 12px'%3E%3C/circle%3E%3Ccircle class='dot d2' cx='12' cy='12' r='3' transform-origin='12px 12px'%3E%3C/circle%3E%3Ccircle class='dot d3' cx='20' cy='12' r='3' transform-origin='20px 12px'%3E%3C/circle%3E%3C/svg%3E");
-}
-
-@utility dots-queue {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_qtyZ%7B0%25%7Br:0%7D25%25%7Br:3px;cx:4px%7D50%25%7Br:3px;cx:12px%7D75%25%7Br:3px;cx:20px%7Dto%7Br:0;cx:20px%7D%7D.spinner_nOfF%7Banimation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite%7D%3C/style%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-.5s'/%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1s'/%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1.5s'/%3E%3C/svg%3E");
-}
-
-@utility dots-rotate {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_XVY9%7B50%25%7Btransform:rotate(180deg)%7Dto%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cg style='transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite'%3E%3Ccircle cx='4' cy='12' r='3'/%3E%3Ccircle cx='20' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");
-}
-
-@utility dots-grow {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_xe7Q%7B93.75%25,to%7Br:3px%7D46.875%25%7Br:.2px%7D%7D.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}%3C/style%3E%3Ccircle class='spinner_b2T7' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_b2T7' cx='12' cy='12' r='3' style='animation-delay:-.65s'/%3E%3Ccircle class='spinner_b2T7' cx='20' cy='12' r='3' style='animation-delay:-.5s'/%3E%3C/svg%3E");
-}
-
-@utility dots-grow-alternate {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_qhi1%7B0%25,to%7Br:1.5px%7D50%25%7Br:3px%7D%7D.spinner_I8Q1%7Banimation:spinner_qhi1 .75s linear infinite%7D%3C/style%3E%3Ccircle class='spinner_I8Q1' cx='4' cy='12' r='1.5'/%3E%3Ccircle class='spinner_I8Q1' cx='12' cy='12' r='3' style='animation-delay:-.375s'/%3E%3Ccircle class='spinner_I8Q1' cx='20' cy='12' r='1.5'/%3E%3C/svg%3E");
-}
-
-@utility dot-bounce {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7Dto%7Bcy:5px%7D%7D%3C/style%3E%3Ccircle cx='12' cy='5' style='animation:spinner_YeBj .8s infinite' r='4'/%3E%3C/svg%3E");
-}
-
-@utility bars-wave {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.bar%7Banimation:bar-anim 1s ease-in-out infinite;fill:currentColor%7D.b1%7Banimation-delay:-0.4s%7D.b2%7Banimation-delay:-0.2s%7D@keyframes bar-anim%7B0%25,100%25%7Btransform:scaleY(0.3)%7D50%25%7Btransform:scaleY(1)%7D%7D%3C/style%3E%3Crect class='bar b1' x='3' y='2' width='4' height='20' rx='2' transform-origin='5px 12px'%3E%3C/rect%3E%3Crect class='bar b2' x='10' y='2' width='4' height='20' rx='2' transform-origin='12px 12px'%3E%3C/rect%3E%3Crect class='bar b3' x='17' y='2' width='4' height='20' rx='2' transform-origin='19px 12px'%3E%3C/rect%3E%3C/svg%3E");
-}
-
-@utility pulse-ring {
-  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.pulse%7Banimation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center%7D.p2%7Banimation-delay:-0.6s%7D@keyframes pulse-anim%7B0%25%7Btransform:scale(0);opacity:1%7D100%25%7Btransform:scale(1);opacity:0%7D%7D%3C/style%3E%3Ccircle class='pulse p1' cx='12' cy='12' r='10' fill='none' stroke-width='3'%3E%3C/circle%3E%3Ccircle class='pulse p2' cx='12' cy='12' r='10' fill='none' stroke-width='3'%3E%3C/circle%3E%3C/svg%3E");
-}
-
-@utility loader {
-  @apply ai bg-text inline-block size-8 [&.lg]:size-10 [&.sm]:size-6;
-
-  content: "";
-}

package/src/components/surface.css

@@ -1,6 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-
-@utility empty-state {
-  @apply text-text-secondary flex flex-col items-center gap-3 p-[clamp(2rem,8vw,5rem)] text-center;
-}

package/src/components/tooltip.css

@@ -1,60 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-
-@utility tooltip {
-  --tooltip-bg: var(--color-surface);
-  --tooltip-fg: var(--color-text);
-  --tooltip-gap: 0.5rem;
-  --tooltip-top: calc(var(--tooltip-gap) * -1);
-  --tooltip-right: auto;
-  --tooltip-bottom: auto;
-  --tooltip-left: 50%;
-  --tooltip-origin: bottom;
-  --tooltip-transform: translate(-50%, -100%);
-
-  @apply relative;
-
-  &.tooltip-icon {
-    @apply bg-surface text-text inline-flex size-5 cursor-default items-center justify-center rounded-full text-sm font-bold;
-  }
-
-  &[data-tooltip-position="bottom"] {
-    --tooltip-top: auto;
-    --tooltip-bottom: calc(var(--tooltip-gap) * -1);
-    --tooltip-origin: top;
-    --tooltip-transform: translate(-50%, 100%);
-  }
-
-  &[data-tooltip-position="left"] {
-    --tooltip-top: 50%;
-    --tooltip-left: calc(var(--tooltip-gap) * -1);
-    --tooltip-origin: right;
-    --tooltip-transform: translate(-100%, -50%);
-  }
-
-  &[data-tooltip-position="right"] {
-    --tooltip-top: 50%;
-    --tooltip-left: auto;
-    --tooltip-right: calc(var(--tooltip-gap) * -1);
-    --tooltip-origin: left;
-    --tooltip-transform: translate(100%, -50%);
-  }
-
-  &::after {
-    @apply pointer-events-none absolute z-(--z-popover) w-max max-w-72 rounded-(--radius-control) bg-(--tooltip-bg) px-2.5 py-2 text-sm font-normal whitespace-normal text-(--tooltip-fg) opacity-0 shadow-(--elevation-high) transition-[opacity,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
-    content: attr(data-tooltip);
-    left: var(--tooltip-left);
-    right: var(--tooltip-right);
-    top: var(--tooltip-top);
-    bottom: var(--tooltip-bottom);
-    transform: var(--tooltip-transform) scale(0);
-    transform-origin: var(--tooltip-origin);
-  }
-
-  &:hover::after,
-  &:focus-visible::after,
-  &[data-state="open"]::after {
-    opacity: 1;
-    transform: var(--tooltip-transform) scale(1);
-  }
-}

package/src/index.css

@@ -1,7 +0,0 @@
-@import "tailwindcss";
-
-@import "./components/index.css";
-@import "./theme.css";
-@import "./typography.css";
-@import "./utilities.css";
-@import "./overrides.css";

package/src/overrides.css

@@ -1,76 +0,0 @@
-@import "tailwindcss";
-@import "./theme.css";
-@import "./typography.css";
-
-@layer base {
-  ::-webkit-scrollbar {
-    width: calc(var(--spacing) * 4);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--color-primary);
-    border: var(--spacing) solid var(--color-background);
-    border-radius: calc(var(--spacing) * 2);
-  }
-
-  html,
-  body {
-    @apply bg-background text-text font-default min-h-dvh overflow-x-hidden;
-  }
-
-  body {
-    @apply flex flex-col;
-  }
-
-  button {
-    @apply not-disabled:cursor-pointer;
-  }
-
-  img {
-    @apply select-none;
-  }
-
-  ::selection {
-    background: var(--color-primary);
-    color: var(--color-primary-contrast);
-  }
-
-  :focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring);
-    outline-offset: var(--focus-ring-offset);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      scroll-behavior: auto !important;
-      transition-duration: 0.01ms !important;
-    }
-  }
-
-  p,
-  li,
-  a {
-    @apply text-body;
-  }
-}
-
-@layer components {
-  [aria-current="page"] {
-    @apply text-primary font-bold;
-  }
-
-  @media (forced-colors: active) {
-    .btn,
-    .ipt,
-    .textarea,
-    .select,
-    .alert,
-    .badge {
-      border-color: CanvasText;
-    }
-  }
-}