@shift-css/core 0.0.1 → 0.5.0

package/dist/utils/typography.css

@@ -0,0 +1,434 @@
+.s-font-sans {
+  font-family: var(--s-font-sans);
+}
+
+.s-font-serif {
+  font-family: var(--s-font-serif);
+}
+
+.s-font-mono {
+  font-family: var(--s-font-mono);
+}
+
+.s-text-xs {
+  font-size: var(--s-text-xs);
+}
+
+.s-text-sm {
+  font-size: var(--s-text-sm);
+}
+
+.s-text-base {
+  font-size: var(--s-text-base);
+}
+
+.s-text-lg {
+  font-size: var(--s-text-lg);
+}
+
+.s-text-xl {
+  font-size: var(--s-text-xl);
+}
+
+.s-text-2xl {
+  font-size: var(--s-text-2xl);
+}
+
+.s-text-3xl {
+  font-size: var(--s-text-3xl);
+}
+
+.s-text-4xl {
+  font-size: var(--s-text-4xl);
+}
+
+.s-text-5xl {
+  font-size: var(--s-text-5xl);
+}
+
+.s-font-thin {
+  font-weight: var(--s-font-thin);
+}
+
+.s-font-extralight {
+  font-weight: var(--s-font-extralight);
+}
+
+.s-font-light {
+  font-weight: var(--s-font-light);
+}
+
+.s-font-normal {
+  font-weight: var(--s-font-normal);
+}
+
+.s-font-medium {
+  font-weight: var(--s-font-medium);
+}
+
+.s-font-semibold {
+  font-weight: var(--s-font-semibold);
+}
+
+.s-font-bold {
+  font-weight: var(--s-font-bold);
+}
+
+.s-font-extrabold {
+  font-weight: var(--s-font-extrabold);
+}
+
+.s-font-black {
+  font-weight: var(--s-font-black);
+}
+
+.s-leading-none {
+  line-height: var(--s-leading-none);
+}
+
+.s-leading-tight {
+  line-height: var(--s-leading-tight);
+}
+
+.s-leading-snug {
+  line-height: var(--s-leading-snug);
+}
+
+.s-leading-normal {
+  line-height: var(--s-leading-normal);
+}
+
+.s-leading-relaxed {
+  line-height: var(--s-leading-relaxed);
+}
+
+.s-leading-loose {
+  line-height: var(--s-leading-loose);
+}
+
+.s-tracking-tighter {
+  letter-spacing: var(--s-tracking-tighter);
+}
+
+.s-tracking-tight {
+  letter-spacing: var(--s-tracking-tight);
+}
+
+.s-tracking-normal {
+  letter-spacing: var(--s-tracking-normal);
+}
+
+.s-tracking-wide {
+  letter-spacing: var(--s-tracking-wide);
+}
+
+.s-tracking-wider {
+  letter-spacing: var(--s-tracking-wider);
+}
+
+.s-tracking-widest {
+  letter-spacing: var(--s-tracking-widest);
+}
+
+.s-text-left {
+  text-align: left;
+}
+
+.s-text-center {
+  text-align: center;
+}
+
+.s-text-right {
+  text-align: right;
+}
+
+.s-text-justify {
+  text-align: justify;
+}
+
+.s-text-start {
+  text-align: start;
+}
+
+.s-text-end {
+  text-align: end;
+}
+
+.s-align-baseline {
+  vertical-align: baseline;
+}
+
+.s-align-top {
+  vertical-align: top;
+}
+
+.s-align-middle {
+  vertical-align: middle;
+}
+
+.s-align-bottom {
+  vertical-align: bottom;
+}
+
+.s-align-text-top {
+  vertical-align: text-top;
+}
+
+.s-align-text-bottom {
+  vertical-align: text-bottom;
+}
+
+.s-align-sub {
+  vertical-align: sub;
+}
+
+.s-align-super {
+  vertical-align: super;
+}
+
+.s-underline {
+  text-decoration-line: underline;
+}
+
+.s-overline {
+  text-decoration-line: overline;
+}
+
+.s-line-through {
+  text-decoration-line: line-through;
+}
+
+.s-no-underline {
+  text-decoration-line: none;
+}
+
+.s-decoration-solid {
+  text-decoration-style: solid;
+}
+
+.s-decoration-double {
+  text-decoration-style: double;
+}
+
+.s-decoration-dotted {
+  text-decoration-style: dotted;
+}
+
+.s-decoration-dashed {
+  text-decoration-style: dashed;
+}
+
+.s-decoration-wavy {
+  text-decoration-style: wavy;
+}
+
+.s-uppercase {
+  text-transform: uppercase;
+}
+
+.s-lowercase {
+  text-transform: lowercase;
+}
+
+.s-capitalize {
+  text-transform: capitalize;
+}
+
+.s-normal-case {
+  text-transform: none;
+}
+
+.s-text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.s-text-clip {
+  text-overflow: clip;
+}
+
+.s-text-wrap {
+  text-wrap: wrap;
+}
+
+.s-text-nowrap {
+  text-wrap: nowrap;
+}
+
+.s-text-balance {
+  text-wrap: balance;
+}
+
+.s-text-pretty {
+  text-wrap: pretty;
+}
+
+.s-whitespace-normal {
+  white-space: normal;
+}
+
+.s-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.s-whitespace-pre {
+  white-space: pre;
+}
+
+.s-whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.s-whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.s-whitespace-break-spaces {
+  white-space: break-spaces;
+}
+
+.s-break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.s-break-words {
+  overflow-wrap: break-word;
+}
+
+.s-break-all {
+  word-break: break-all;
+}
+
+.s-break-keep {
+  word-break: keep-all;
+}
+
+.s-hyphens-none {
+  hyphens: none;
+}
+
+.s-hyphens-manual {
+  hyphens: manual;
+}
+
+.s-hyphens-auto {
+  hyphens: auto;
+}
+
+.s-text-primary {
+  color: var(--s-text-primary);
+}
+
+.s-text-secondary {
+  color: var(--s-text-secondary);
+}
+
+.s-text-tertiary {
+  color: var(--s-text-tertiary);
+}
+
+.s-text-inverse {
+  color: var(--s-text-inverse);
+}
+
+.s-text-success {
+  color: var(--s-state-success);
+}
+
+.s-text-warning {
+  color: var(--s-state-warning);
+}
+
+.s-text-danger {
+  color: var(--s-state-danger);
+}
+
+.s-link {
+  color: var(--s-interactive-primary);
+  text-underline-offset: 2px;
+  text-decoration: underline;
+
+  &:hover {
+    color: var(--s-interactive-primary-hover);
+  }
+}
+
+.s-list-none {
+  list-style-type: none;
+}
+
+.s-list-disc {
+  list-style-type: disc;
+}
+
+.s-list-decimal {
+  list-style-type: decimal;
+}
+
+.s-list-inside {
+  list-style-position: inside;
+}
+
+.s-list-outside {
+  list-style-position: outside;
+}
+
+.s-opacity-0 {
+  opacity: 0;
+}
+
+.s-opacity-5 {
+  opacity: .05;
+}
+
+.s-opacity-10 {
+  opacity: .1;
+}
+
+.s-opacity-20 {
+  opacity: .2;
+}
+
+.s-opacity-25 {
+  opacity: .25;
+}
+
+.s-opacity-30 {
+  opacity: .3;
+}
+
+.s-opacity-40 {
+  opacity: .4;
+}
+
+.s-opacity-50 {
+  opacity: .5;
+}
+
+.s-opacity-60 {
+  opacity: .6;
+}
+
+.s-opacity-70 {
+  opacity: .7;
+}
+
+.s-opacity-75 {
+  opacity: .75;
+}
+
+.s-opacity-80 {
+  opacity: .8;
+}
+
+.s-opacity-90 {
+  opacity: .9;
+}
+
+.s-opacity-95 {
+  opacity: .95;
+}
+
+.s-opacity-100 {
+  opacity: 1;
+}

package/dist/utils/visibility.css

@@ -0,0 +1,177 @@
+[s-hidden] {
+  display: none;
+}
+
+[s-visible] {
+  visibility: visible;
+}
+
+[s-invisible] {
+  visibility: hidden;
+}
+
+[s-collapse] {
+  visibility: collapse;
+}
+
+[s-sr-only] {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+[s-sr-only="focusable"]:focus, [s-sr-only="focusable"]:focus-within, [s-not-sr-only], [s-focus\:not-sr-only]:focus, [s-focus\:not-sr-only]:focus-visible, [s-focus-within\:not-sr-only]:focus-within {
+  clip: auto;
+  white-space: normal;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  position: static;
+  overflow: visible;
+}
+
+[s-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+[s-truncate="2"] {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+[s-truncate="3"] {
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+[s-truncate="4"] {
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+[s-overflow="auto"] {
+  overflow: auto;
+}
+
+[s-overflow="hidden"] {
+  overflow: hidden;
+}
+
+[s-overflow="visible"] {
+  overflow: visible;
+}
+
+[s-overflow="scroll"] {
+  overflow: scroll;
+}
+
+[s-overflow-x="auto"] {
+  overflow-x: auto;
+}
+
+[s-overflow-x="hidden"] {
+  overflow-x: hidden;
+}
+
+[s-overflow-y="auto"] {
+  overflow-y: auto;
+}
+
+[s-overflow-y="hidden"] {
+  overflow-y: hidden;
+}
+
+@media (width < 640px) {
+  [s-hide-on~="sm"] {
+    display: none;
+  }
+}
+
+@media (width >= 640px) and (width < 768px) {
+  [s-hide-on~="md"] {
+    display: none;
+  }
+}
+
+@media (width >= 768px) and (width < 1024px) {
+  [s-hide-on~="lg"] {
+    display: none;
+  }
+}
+
+@media (width >= 1024px) {
+  [s-hide-on~="xl"] {
+    display: none;
+  }
+}
+
+@media (width >= 640px) {
+  [s-show-on~="sm"] {
+    display: none;
+  }
+}
+
+@media (width < 640px), (width >= 768px) {
+  [s-show-on~="md"] {
+    display: none;
+  }
+}
+
+@media (width < 768px), (width >= 1024px) {
+  [s-show-on~="lg"] {
+    display: none;
+  }
+}
+
+@media (width < 1024px) {
+  [s-show-on~="xl"] {
+    display: none;
+  }
+}
+
+[s-pointer="none"] {
+  pointer-events: none;
+}
+
+[s-pointer="auto"] {
+  pointer-events: auto;
+}
+
+[s-select="none"] {
+  user-select: none;
+}
+
+[s-select="text"] {
+  user-select: text;
+}
+
+[s-select="all"] {
+  user-select: all;
+}
+
+[s-select="auto"] {
+  user-select: auto;
+}
+
+[s-isolate] {
+  isolation: isolate;
+}
+
+[s-isolate="auto"] {
+  isolation: auto;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shift-css/core",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "description": "Zero-runtime, OKLCH-native CSS framework with cascade layers and native light-dark() theming",
   "type": "module",
   "main": "./dist/shift.css",
@@ -9,6 +9,16 @@
     "./min": "./dist/shift.min.css",
     "./reset": "./dist/reset.css",
     "./tokens": "./dist/tokens.css",
+    "./components/button": "./dist/components/button.css",
+    "./components/card": "./dist/components/card.css",
+    "./components/input": "./dist/components/input.css",
+    "./components/modal": "./dist/components/modal.css",
+    "./components/surface": "./dist/components/surface.css",
+    "./utils/layout": "./dist/utils/layout.css",
+    "./utils/spacing": "./dist/utils/spacing.css",
+    "./utils/flex": "./dist/utils/flex.css",
+    "./utils/typography": "./dist/utils/typography.css",
+    "./utils/visibility": "./dist/utils/visibility.css",
     "./package.json": "./package.json"
   },
   "files": [