css-zero 0.0.9 → 0.0.11

data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_control_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { target: String }
+
+  close() {
+    document.getElementById(this.targetValue).close()
+  }
+
+  show() {
+    document.getElementById(this.targetValue).show()
+  }
+
+  showModal() {
+    document.getElementById(this.targetValue).showModal()
+  }
+}

data/lib/generators/css_zero/install/USAGE

@@ -0,0 +1,5 @@
+Description:
+    This will copy base.css into your application.
+
+Example:
+    bin/rails generate css_zero:install

data/lib/generators/css_zero/install/install_generator.rb

@@ -0,0 +1,9 @@
+require "rails/generators/named_base"
+
+class CssZero::InstallGenerator < Rails::Generators::Base
+  source_root File.expand_path("templates", __dir__)
+
+  def copy_base_css
+    copy_file "app/assets/stylesheets/base.css"
+  end
+end

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css

@@ -0,0 +1,46 @@
+:root {
+  /* Color Scheme */
+  color-scheme: light dark;
+
+  /* Abstractions */
+  --color-bg: light-dark(white, var(--zinc-950));
+  --color-text: light-dark(black, white);
+  --color-text-reversed: light-dark(white, black);
+  --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
+  --color-border: light-dark(var(--zinc-200), var(--zinc-800));
+  --color-border-darker: light-dark(var(--zinc-400), var(--zinc-300));
+
+  /* Accent colors */
+  --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
+  --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
+  --color-negative: light-dark(var(--red-600), var(--red-900));
+  --color-positive: light-dark(var(--green-600), var(--green-900));
+
+  /* SVG color values */
+  --color-filter-text: invert(0);
+  --color-filter-text-reversed: invert(100%);
+  --color-filter-negative: invert(31%) sepia(96%) saturate(4646%) hue-rotate(350deg) brightness(91%) contrast(89%);
+  --color-filter-positive: invert(48%) sepia(74%) saturate(520%) hue-rotate(90deg) brightness(89%) contrast(90%);
+
+  @media (prefers-color-scheme: dark) {
+    --color-filter-text: invert(100%);
+    --color-filter-text-reversed: invert(0);
+    --color-filter-negative: invert(15%) sepia(83%) saturate(2066%) hue-rotate(345deg) brightness(87%) contrast(88%);
+    --color-filter-positive: invert(23%) sepia(74%) saturate(495%) hue-rotate(91deg) brightness(88%) contrast(89%);
+  }
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-synthesis-weight: none;
+  text-rendering: optimizeLegibility;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.0.11
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-18 00:00:00.000000000 Z
+date: 2024-07-02 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -20,23 +20,41 @@ files:
 - Rakefile
 - app/assets/stylesheets/_reset.css
 - app/assets/stylesheets/animations.css
-- app/assets/stylesheets/base.css
 - app/assets/stylesheets/borders.css
-- app/assets/stylesheets/buttons.css
 - app/assets/stylesheets/colors.css
-- app/assets/stylesheets/dialog.css
 - app/assets/stylesheets/effects.css
 - app/assets/stylesheets/filters.css
 - app/assets/stylesheets/grid.css
-- app/assets/stylesheets/inputs.css
-- app/assets/stylesheets/separators.css
 - app/assets/stylesheets/sizes.css
 - app/assets/stylesheets/transform.css
 - app/assets/stylesheets/transition.css
 - app/assets/stylesheets/typography.css
 - app/assets/stylesheets/zutilities.css
 - lib/css-zero.rb
+- lib/css_zero/engine.rb
 - lib/css_zero/version.rb
+- lib/generators/css_zero/add/USAGE
+- lib/generators/css_zero/add/add_generator.rb
+- lib/generators/css_zero/add/resources.yml
+- lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
+- lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
+- lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
+- lib/generators/css_zero/add/templates/app/assets/images/x.svg
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
+- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_control_controller.js
+- lib/generators/css_zero/install/USAGE
+- lib/generators/css_zero/install/install_generator.rb
+- lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
 homepage: https://github.com/lazaronixon/css-zero
 licenses:
 - MIT

data/app/assets/stylesheets/base.css

@@ -1,4 +0,0 @@
-html, body {
-  background-color: var(--color-bg);
-  color: var(--color-text);
-}

data/app/assets/stylesheets/buttons.css

@@ -1,46 +0,0 @@
-.btn {
-  align-items: center;
-  background-color: var(--btn-background, var(--color-primary));
-  border-radius: var(--btn-border-radius, var(--rounded-md));
-  border: 1px solid var(--btn-border-color, transparent);
-  color: var(--btn-color, var(--color-text-reversed));
-  column-gap: var(--btn-gap, var(--size-2));
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--btn-font-size, var(--text-sm));
-  font-weight: var(--btn-font-weight, var(--font-medium));
-  justify-content: center;
-  padding: var(--btn-padding, .5rem 1rem);
-  text-align: center;
-  white-space: nowrap;
-
-  img:not([class]) {
-    filter: var(--btn-icon-color, var(--color-filter-text-reversed));
-  }
-
-  &:disabled {
-    opacity: var(--opacity-50);
-    pointer-events: none;
-  }
-}
-
-.btn--outline {
-  --btn-background: transparent;
-  --btn-border-color: var(--color-border);
-  --btn-color: var(--color-text);
-  --btn-icon-color: var(--color-filter-text);
-}
-
-.btn--plain {
-  --btn-background: transparent;
-  --btn-color: var(--color-text);
-  --btn-icon-color: var(--color-filter-text);
-}
-
-.btn--positive {
-  --btn-background: var(--color-positive);
-}
-
-.btn--negative {
-  --btn-background: var(--color-negative);
-}

data/app/assets/stylesheets/dialog.css

@@ -1,34 +0,0 @@
-.dialog {
-  background-color: var(--dialog-background, var(--color-bg));
-  border: 1px solid var(--dialog-border-color, var(--color-border));
-  border-radius: var(--dialog-border-radius, var(--rounded-lg));
-  box-shadow: var(--dialog-shadow, var(--shadow-lg));
-  color: var(--dialog-color, var(--color-text));
-  margin: auto; inline-size: 100%;
-  max-inline-size: var(--dialog-size, var(--width-lg));
-  padding: var(--dialog-padding, var(--size-6));
-
-  &::backdrop {
-    background-color: var(--dialog-backdrop-background, #000c);
-  }
-
-  /* Setup transition */
-  &, &::backdrop {
-    opacity: 0; transition: all var(--time-300) allow-discrete;
-  }
-
-  /* Fade in */
-  &[open], &[open]::backdrop {
-    opacity: 1
-  }
-
-  /* Fade out */
-  @starting-style {
-    &[open], &[open]::backdrop { opacity: 0; }
-  }
-
-  /* Responsiveness */
-  @media (width <= 40rem) {
-    border-radius: 0;
-  }
-}

data/app/assets/stylesheets/inputs.css

@@ -1,43 +0,0 @@
-.input {
-  appearance: none;
-  background-color: var(--input-background, transparent);
-  border-radius: var(--input-border-radius, var(--rounded-md));
-  border: 1px solid var(--input-border-color, var(--color-border));
-  box-shadow: var(--input-shadow, var(--shadow-xs));
-  font-size: var(--input-font-size, var(--text-sm));
-  inline-size: 100%;
-  padding: var(--input-padding, .5rem .75rem);
-
-  &::file-selector-button {
-    font-weight: var(--font-medium);
-    margin-inline-end: var(--size-2);
-  }
-
-  &:is(textarea) {
-    field-sizing: content;
-    min-block-size: var(--input-lines, 4lh);
-    resize: none;
-  }
-
-  &:is(select):not([multiple]) {
-    background-image: var(--icon-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(113,113,122)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E"));
-    background-position: center right var(--icon-chevron-padding, .75rem);
-    background-size: 1rem auto;
-    background-repeat: no-repeat;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: var(--opacity-50);
-  }
-
-  &::placeholder {
-    color: var(--color-text-subtle);
-  }
-}
-
-[type="checkbox"], [type="radio"] {
-  accent-color: var(--color-primary);
-  height: var(--check-size, var(--size-4));
-  width:  var(--check-size, var(--size-4));
-}

data/app/assets/stylesheets/separators.css

@@ -1,4 +0,0 @@
-.separator {
-  border-block-start: 1px var(--separator-style, solid) var(--separator-color, var(--color-border));
-  inline-size: 100%;
-}