@designsystemsinternational/cloudflare 0.1.0

package/templates/src/styles/reset.css

@@ -0,0 +1,438 @@
+/* It’s a reset stylesheet, so expect some very dirty stuff in here
+ * that stylelint will not like. */
+/* stylelint-disable */
+
+/* Putting the reset in its own layer makes sure we can
+ * easily overwrite the reset styles with more specific
+ * component or utility styles, nice! */
+@layer reset {
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    /* 1 */
+    margin: 0;
+    /* 2 */
+    padding: 0;
+    /* 2 */
+    border: 0 solid;
+    /* 3 */
+  }
+
+  /*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+  html,
+  :host {
+    line-height: 1.5;
+    /* 1 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */
+    tab-size: 4;
+    /* 3 */
+    font-family: --theme(--default-font-family,
+        ui-sans-serif,
+        system-ui,
+        sans-serif,
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji'
+      );
+    /* 4 */
+    font-feature-settings: --theme(--default-font-feature-settings, normal);
+    /* 5 */
+    font-variation-settings: --theme(--default-font-variation-settings, normal);
+    /* 6 */
+    -webkit-tap-highlight-color: transparent;
+    /* 7 */
+  }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+  hr {
+    height: 0;
+    /* 1 */
+    color: inherit;
+    /* 2 */
+    border-top-width: 1px;
+    /* 3 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+*/
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+*/
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the user's configured `mono` font-family by default.
+  2. Use the user's configured `mono` font-feature-settings by default.
+  3. Use the user's configured `mono` font-variation-settings by default.
+  4. Correct the odd `em` font sizing in all browsers.
+*/
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: --theme(--default-mono-font-family,
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        'Liberation Mono',
+        'Courier New',
+        monospace);
+    /* 1 */
+    font-feature-settings: --theme(--default-mono-font-feature-settings, normal);
+    /* 2 */
+    font-variation-settings: --theme(--default-mono-font-variation-settings, normal);
+    /* 3 */
+    font-size: 1em;
+    /* 4 */
+  }
+
+  /*
+  Add the correct font size in all browsers.
+*/
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+  table {
+    text-indent: 0;
+    /* 1 */
+    border-color: inherit;
+    /* 2 */
+    border-collapse: collapse;
+    /* 3 */
+  }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+*/
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Make lists unstyled by default.
+*/
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  /*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    /* 1 */
+    vertical-align: middle;
+    /* 2 */
+  }
+
+  /*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    /* 1 */
+    font-feature-settings: inherit;
+    /* 1 */
+    font-variation-settings: inherit;
+    /* 1 */
+    letter-spacing: inherit;
+    /* 1 */
+    color: inherit;
+    /* 1 */
+    border-radius: 0;
+    /* 2 */
+    background-color: transparent;
+    /* 3 */
+    opacity: 1;
+    /* 4 */
+  }
+
+  /*
+  Restore default font weight.
+*/
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  /*
+  Restore indentation.
+*/
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  /*
+  Restore space after button.
+*/
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  /*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  /*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+  @supports (not (-webkit-appearance: -apple-pay-button))
+  /* Not Safari */
+  or (contain-intrinsic-size: 1px)
+
+  /* Safari 17+ */
+    {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+*/
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    /* 1 */
+    text-align: inherit;
+    /* 2 */
+  }
+
+  /*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
+*/
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  /*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  /*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  /*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}
+
+/* stylelint-enable */

package/templates/src/styles/textStyles.css

@@ -0,0 +1,19 @@
+:where(.text-xs) {
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wider);
+  line-height: var(--leading-normal);
+}
+
+:where(.text-sm) {
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-wide);
+  line-height: var(--leading-normal);
+}
+
+:where(.text-primary) {
+  color: var(--color-text-primary);
+}
+
+:where(.text-secondary) {
+  color: var(--color-text-secondary);
+}

package/templates/src/styles/utilities.css

@@ -0,0 +1,5 @@
+.cell {
+  max-width: 100%;
+  padding-right: var(--spacing-layout-gutter);
+  padding-left: var(--spacing-layout-gutter);
+}

package/templates/src/styles/variables.css

@@ -0,0 +1,195 @@
+:root {
+  /* BASE COLOR SCALES 
+   * ====================================================================
+   *
+   * ALWAYS! define them in rgb values, so we can
+   * use them like this rgb(var(--base-color-name));
+   *
+   * NEVER! use them directly, these should be mapped
+   * to semantically named color names to use instead.
+   */
+  --base-color-black: 0, 0, 0;
+  --base-color-white: 255, 255, 255;
+  --base-color-grey-100: 240, 240, 240;
+  --base-color-grey-300: 204, 204, 204;
+  --base-color-grey-500: 136, 136, 136;
+  --base-color-grey-800: 35, 35, 35;
+  --base-color-grey-900: 15, 15, 15;
+
+  /* SEMANTICALLY NAMED COLOR
+   * =================================================================== 
+   
+   /* Text 
+    *
+    * Any custom property that starts with --color-text will 
+    * also automatically be turned into .text- utility class,
+    * so --color-text-primary will create the .text-primary
+    * utility class.
+    * */
+  --color-text-primary: rgb(var(--base-color-black));
+  --color-text-secondary: rgb(var(--base-color-grey-500));
+  --color-text-tertiary: rgb(var(--base-color-grey-300));
+  --color-text-inverted-primary: rgb(var(--base-color-white));
+  --color-text-inverted-secondary: rgba(var(--base-color-white), 50%);
+
+  /* Background 
+   *
+   * Any custom property that starts with --color-bg will 
+   * also automatically be turned into .bg utility class,
+   * so --color-bg-primary will create the .bg-primary
+   * utility class.
+   */
+  --color-bg-primary: rgb(var(--base-color-white));
+  --color-bg-secondary: rgb(var(--base-color-grey-100));
+  --color-bg-inverted-primary: rgb(var(--base-color-black));
+  --color-bg-inverted-secondary: rgb(var(--base-color-grey-800));
+  --color-bg-inverted-tertiary: rgba(var(--base-color-black), 7.5%);
+
+  /* Overlays */
+  --color-overlay: rgba(var(--base-color-white), 40%);
+  --color-overlay-inverted: rgba(var(--base-color-black), 80%);
+
+  /* Borders */
+  --color-border-default: rgba(var(--base-color-black), 10%);
+  --color-border-focus: rgb(var(--base-color-grey-800));
+
+  /* SPACING 
+   *
+   * Any custom property that starts with --spacing-
+   * will yield utility classes for padding, margin,
+   * gap, and stack.
+   *
+   * =================================================================== */
+  --spacing-4xs: fluid(2px, 4px);
+  --spacing-3xs: fluid(4px, 6px);
+  --spacing-2xs: fluid(6px, 8px);
+  --spacing-xs: fluid(8px, 12px);
+  --spacing-sm: fluid(12px, 16px);
+  --spacing-md: fluid(16px, 24px);
+  --spacing-lg: fluid(24px, 32px);
+  --spacing-xl: fluid(32px, 48px);
+  --spacing-2xl: fluid(48px, 64px);
+  --spacing-3xl: fluid(64px, 96px);
+  --spacing-4xl: fluid(80px, 144px);
+  --spacing-5xl: fluid(144px, 220px);
+
+  /* Semantically named spacings */
+  --spacing-layout-gutter: fluid(8px, 10px);
+  --spacing-grid-gap: calc(2 * var(--spacing-layout-gutter));
+
+  /* TYPOGRAPHY 
+   * =================================================================== 
+   *
+   * Sizes */
+  --text-xs: fluid(13px, 14px);
+  --text-sm: fluid(14px, 17px);
+
+  /* Line Heights 
+   *
+   * Any custom property that starts with --leading will
+   * be turned into a .leading- utility class.
+   * */
+  --leading-none: 1;
+  --leading-tight: 1.05;
+  --leading-normal: 1.25;
+  --leading-loose: 1.5;
+
+  /* Letter Spacings 
+   *
+   * Any custom property that starts with --tracking will
+   * be turned into a .tracking utility class.
+   * */
+  --tracking-widest: 0.05em;
+  --tracking-wider: 0.025em;
+  --tracking-wide: 0.001em;
+  --tracking-none: 0;
+  --tracking-tight: -0.01em;
+  --tracking-tighter: -0.02em;
+  --tracking-tightest: -0.04em;
+
+  /* Font Families */
+  --font-sans: "Univers", sans-serif;
+  --font-mono: "Typewriter", monospace;
+
+  /* Text Measures 
+   *
+   * Any custom property that starts with --measure will
+   * be turned into a .measure utility class.
+   */
+  --measure-xs: 30ch;
+  --measure-s: 40ch;
+  --measure-m: 55ch;
+  --measure-l: 75ch;
+  --measure-xl: 80ch;
+  --measure-2xl: 100ch;
+
+  /* Font Weights 
+   *
+   * Any custom property that starts with --font-weight- will
+   * be turned into a .weight utility class.
+   */
+  --font-weight-regular: 400;
+  --font-weight-medium: 600;
+
+  /**
+   * TRANSITIONS
+   * ======================================================== */
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-fast: 150ms;
+  --duration-slow: 400ms;
+
+  /**
+   * ASPECT RATIOS
+   * ======================================================== */
+  --aspect-square: 1 / 1;
+  --aspect-wide: 16 / 9;
+
+  /**
+   * BORDER RADII
+   * ======================================================== */
+  --radius-xs: 1px;
+  --radius-sm: 2px;
+  --radius-full: 9999px;
+
+  /**
+   * FILTER VALUES
+   * ======================================================== */
+  --backdrop-filter: blur(10px);
+
+  /**
+   * Z-INDICES
+   * ======================================================== */
+  --z-index-tooltip-hover-target: 90;
+  --z-index-tooltip: 100;
+  --z-index-control-elements: 200;
+}
+
+/* THEMES (aka dark mode) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* SEMANTICALLY NAMED COLOR
+   * =================================================================== 
+   *
+   * Text */
+    --color-text-primary: rgb(var(--base-color-white));
+    --color-text-secondary: rgba(var(--base-color-white), 50%);
+    --color-text-inverted-primary: rgb(var(--base-color-black));
+    --color-text-inverted-secondary: rgba(var(--base-color-black), 50%);
+
+    /* Background */
+    --color-bg-primary: rgb(var(--base-color-black));
+    --color-bg-secondary: rgb(var(--base-color-grey-900));
+    --color-bg-inverted-primary: rgb(var(--base-color-white));
+    --color-bg-inverted-secondary: rgb(var(--base-color-grey-100));
+    --color-bg-inverted-tertiary: rgba(var(--base-color-white), 20%);
+
+    /* Overlays */
+    --color-overlay: rgba(var(--base-color-white), 8%);
+    --color-overlay-inverted: rgba(var(--base-color-white), 80%);
+
+    /* Borders */
+    --color-border-default: rgba(var(--base-color-white), 20%);
+    --color-border-focus: rgba(var(--base-color-white), 70%);
+
+  }
+}

package/templates/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}